/* Fonts loaded via index.html link tag (avoids duplicate request + render blocking @import) */
:root {
    /* Premium Dark Theme */
    --bg-primary: #0b0f19;
    --bg-secondary: #121826;
    --bg-tertiary: #1c2538;

    --text-primary: #ffffff;
    --text-secondary: #a1a1aa;
    --text-tertiary: #52525b;

    /* Databricks & Brand Accents */
    --accent-primary: #FF3621;
    --accent-secondary: #00A9E0;
    --accent-glow: rgba(255, 54, 33, 0.3);

    --container-width: 1200px;
    --header-height: 80px;

    /* Fluid responsive: scale with viewport */
    --space-xs: clamp(0.25rem, 1vw, 0.5rem);
    --space-sm: clamp(0.5rem, 2vw, 1rem);
    --space-md: clamp(1rem, 4vw, 1.5rem);
    --space-lg: clamp(1.5rem, 5vw, 2rem);
    --space-xl: clamp(2rem, 6vw, 3rem);
    --container-padding: clamp(0.75rem, 5vw, 2rem);
    --text-heading: clamp(1.25rem, 2.5vw + 1rem, 2.5rem);
    --text-body: clamp(0.875rem, 1vw + 0.5rem, 1.1rem);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Prevent flex/grid children from overflowing on small screens */
.hero-grid,
.about-grid,
.stats-container,
.video-carousel,
.carousel-wrapper,
.video-grid,
.talks-grid,
.talk-card,
.cert-card,
section {
    min-width: 0;
}

/* Fluid section spacing: scales on resize */
section:not(.hero) {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

/* Home section: space between navbar and "YOUSSEF MRINI" (no .hero class) */
#home {
    padding-top: 8rem;
    padding-bottom: 0.5rem;
}
@media (max-width: 968px) {
    #home { padding-top: 7rem; }
}
@media (max-width: 768px) {
    #home { padding-top: 6rem; }
}
@media (max-width: 480px) {
    #home { padding-top: 5.5rem; }
}
@media (max-width: 320px) {
    #home { padding-top: 5rem; }
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
    /* Offset for sticky navbar */
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar {
    display: none;
}

body {
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    max-width: 100vw;
    min-width: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body::-webkit-scrollbar {
    display: none;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    max-width: min(var(--container-width), 100%);
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* --- UI Enhancements --- */
.navbar {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    background: transparent;
}

.navbar.scrolled {
    background: rgba(11, 15, 25, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.nav-link {
    position: relative;
    padding: 0.5rem 0;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--text-primary);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-primary);
    transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* Modern reveal transition */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    will-change: transform, opacity;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.hero .container {
    max-width: 100%;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 1.5rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    transition: transform 0.2s ease, opacity 0.2s ease;
    cursor: pointer;
    border: none;
}

.btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.btn-primary {
    background-color: var(--accent-primary);
    color: white;
}

.btn-secondary {
    background-color: var(--bg-tertiary);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-icon {
    padding: 0.75rem;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
}
.btn-icon i {
    font-size: 1.25rem;
}

.section-title {
    font-size: var(--text-heading);
    font-weight: 800;
    margin-bottom: var(--space-xl);
    text-align: center;
}

/* Navbar */
.navbar {
    position: fixed;
    top: 50px;
    /* Push down to clear the ticker */
    left: 0;
    width: 100%;
    height: var(--header-height);
    display: flex;
    align-items: center;
    z-index: 2500;
    background-color: rgba(5, 5, 5, 0.98);
    /* Always solid — prevents content bleeding through */
    transition: background-color 0.3s ease, border-bottom 0.3s ease;
}

.navbar.scrolled {
    background-color: rgba(11, 15, 25, 0.98);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}

/* Generated Star Layers */
.parallax-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    overflow: hidden;
    pointer-events: none;
}

.stars-1 {
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: 1917px 903px #FFF, 1530px 1198px #FFF, 151px 1827px #FFF, 1780px 1129px #FFF, 939px 751px #FFF, 1855px 1747px #FFF, 481px 1974px #FFF, 545px 1478px #FFF, 212px 1362px #FFF, 32px 1475px #FFF, 888px 1292px #FFF, 182px 414px #FFF, 1699px 1011px #FFF, 764px 338px #FFF, 1172px 1678px #FFF, 451px 956px #FFF, 1373px 93px #FFF, 1500px 305px #FFF, 1221px 406px #FFF, 1820px 480px #FFF, 911px 470px #FFF, 1194px 1789px #FFF, 1546px 1354px #FFF, 1272px 1243px #FFF, 626px 1466px #FFF, 107px 1957px #FFF, 1318px 1238px #FFF, 1072px 905px #FFF, 513px 439px #FFF, 959px 1251px #FFF, 597px 117px #FFF, 301px 1604px #FFF, 1805px 796px #FFF, 1636px 972px #FFF, 1845px 1420px #FFF, 1109px 1121px #FFF, 342px 792px #FFF, 1761px 648px #FFF, 1311px 169px #FFF, 1159px 1756px #FFF, 1968px 1222px #FFF, 1395px 632px #FFF, 1421px 1313px #FFF, 1950px 1017px #FFF, 928px 1781px #FFF, 1205px 1472px #FFF, 663px 1933px #FFF, 360px 402px #FFF, 1289px 408px #FFF, 1599px 664px #FFF;
    animation: animStar 150s linear infinite;
    opacity: 0.3;
    will-change: transform;
}

.stars-1:after {
    content: ' ';
    position: absolute;
    top: 2000px;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: 1917px 903px #FFF, 1530px 1198px #FFF, 151px 1827px #FFF, 1780px 1129px #FFF, 939px 751px #FFF, 1855px 1747px #FFF, 481px 1974px #FFF, 545px 1478px #FFF, 212px 1362px #FFF, 32px 1475px #FFF, 888px 1292px #FFF, 182px 414px #FFF, 1699px 1011px #FFF, 764px 338px #FFF, 1172px 1678px #FFF, 451px 956px #FFF, 1373px 93px #FFF, 1500px 305px #FFF, 1221px 406px #FFF, 1820px 480px #FFF, 911px 470px #FFF, 1194px 1789px #FFF, 1546px 1354px #FFF, 1272px 1243px #FFF, 626px 1466px #FFF, 107px 1957px #FFF, 1318px 1238px #FFF, 1072px 905px #FFF, 513px 439px #FFF, 959px 1251px #FFF, 597px 117px #FFF, 301px 1604px #FFF, 1805px 796px #FFF, 1636px 972px #FFF, 1845px 1420px #FFF, 1109px 1121px #FFF, 342px 792px #FFF, 1761px 648px #FFF, 1311px 169px #FFF, 1159px 1756px #FFF, 1968px 1222px #FFF, 1395px 632px #FFF, 1421px 1313px #FFF, 1950px 1017px #FFF, 928px 1781px #FFF, 1205px 1472px #FFF, 663px 1933px #FFF, 360px 402px #FFF, 1289px 408px #FFF, 1599px 664px #FFF;
}

.stars-2 {
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 1195px 1381px #FFF, 54px 530px #FFF, 1112px 208px #FFF, 946px 721px #FFF, 38px 1220px #FFF, 506px 1955px #FFF, 475px 1781px #FFF, 1035px 717px #FFF, 91px 698px #FFF, 799px 1365px #FFF, 1958px 817px #FFF, 1490px 1465px #FFF, 228px 958px #FFF, 1716px 599px #FFF, 423px 396px #FFF, 376px 1816px #FFF, 751px 1528px #FFF, 1983px 317px #FFF, 1939px 451px #FFF, 306px 1293px #FFF, 324px 1898px #FFF, 32px 4px #FFF, 479px 1420px #FFF, 1955px 164px #FFF, 917px 1800px #FFF, 1205px 777px #FFF, 621px 1484px #FFF, 770px 1034px #FFF, 1029px 860px #FFF, 668px 222px #FFF, 192px 1777px #FFF, 1288px 1868px #FFF, 495px 1761px #FFF, 1447px 1629px #FFF, 261px 1215px #FFF, 1209px 497px #FFF, 907px 691px #FFF, 442px 1966px #FFF, 1594px 364px #FFF, 427px 962px #FFF, 1817px 87px #FFF, 1608px 1228px #FFF, 2px 1424px #FFF, 396px 652px #FFF, 1742px 1188px #FFF, 7px 764px #FFF, 1591px 216px #FFF, 563px 1669px #FFF, 946px 1365px #FFF, 1430px 1161px #FFF, 560px 1822px #FFF, 1521px 770px #FFF, 1178px 1594px #FFF, 102px 1801px #FFF, 110px 1154px #FFF, 57px 1203px #FFF, 218px 1922px #FFF, 1045px 144px #FFF, 686px 229px #FFF, 385px 1591px #FFF, 1371px 135px #FFF, 1859px 973px #FFF, 1585px 1551px #FFF, 1289px 1298px #FFF, 1952px 1708px #FFF, 1851px 1524px #FFF, 1630px 1572px #FFF, 1362px 32px #FFF, 1422px 577px #FFF, 1267px 1583px #FFF, 1994px 997px #FFF, 488px 395px #FFF, 1462px 1517px #FFF, 1134px 1399px #FFF, 1184px 473px #FFF, 1606px 1849px #FFF, 1952px 801px #FFF, 284px 1069px #FFF, 719px 1216px #FFF, 1920px 196px #FFF, 1563px 749px #FFF, 869px 1339px #FFF, 1830px 1665px #FFF, 1496px 1219px #FFF, 593px 1348px #FFF, 1584px 439px #FFF, 40px 218px #FFF, 709px 847px #FFF, 1899px 600px #FFF, 1586px 401px #FFF, 269px 815px #FFF, 500px 1717px #FFF, 542px 453px #FFF, 788px 624px #FFF, 948px 828px #FFF, 50px 1806px #FFF, 1590px 1324px #FFF, 1831px 1910px #FFF, 1872px 1553px #FFF, 1203px 359px #FFF, 1093px 741px #FFF, 492px 1984px #FFF, 924px 108px #FFF, 332px 786px #FFF, 1587px 496px #FFF, 61px 356px #FFF, 1982px 1707px #FFF, 1136px 894px #FFF, 1801px 414px #FFF, 50px 294px #FFF, 1288px 234px #FFF, 825px 1927px #FFF, 1387px 489px #FFF, 269px 171px #FFF, 1568px 1881px #FFF, 1453px 82px #FFF, 648px 40px #FFF, 606px 1727px #FFF, 601px 1593px #FFF, 114px 50px #FFF, 984px 976px #FFF, 99px 1971px #FFF, 1856px 1366px #FFF, 1993px 142px #FFF, 289px 441px #FFF, 699px 589px #FFF, 832px 351px #FFF, 1786px 259px #FFF, 1948px 5px #FFF, 190px 1183px #FFF, 1830px 1274px #FFF, 662px 1652px #FFF, 760px 1099px #FFF, 622px 509px #FFF, 1078px 566px #FFF, 1674px 953px #FFF, 1728px 579px #FFF, 12px 484px #FFF, 549px 738px #FFF, 1889px 886px #FFF, 1429px 901px #FFF, 707px 529px #FFF, 1448px 1023px #FFF, 114px 243px #FFF, 641px 136px #FFF, 1726px 651px #FFF, 1413px 1333px #FFF, 1400px 1366px #FFF, 752px 1377px #FFF, 1582px 1581px #FFF, 1308px 446px #FFF, 324px 127px #FFF, 387px 1086px #FFF, 944px 924px #FFF, 80px 1798px #FFF, 181px 1423px #FFF, 488px 1136px #FFF, 1145px 1490px #FFF, 617px 889px #FFF, 156px 1848px #FFF, 650px 517px #FFF, 1350px 106px #FFF, 454px 1182px #FFF, 1622px 25px #FFF, 183px 881px #FFF, 1563px 818px #FFF, 833px 442px #FFF, 983px 1116px #FFF, 467px 17px #FFF, 878px 906px #FFF, 748px 1106px #FFF, 634px 488px #FFF, 227px 1448px #FFF, 31px 1486px #FFF, 1425px 565px #FFF, 1592px 1187px #FFF, 1280px 1998px #FFF, 1748px 1737px #FFF, 892px 428px #FFF, 1289px 795px #FFF, 1173px 740px #FFF, 1110px 543px #FFF, 1984px 908px #FFF, 1749px 773px #FFF, 1944px 1032px #FFF, 196px 272px #FFF, 10px 597px #FFF, 1079px 1963px #FFF, 1265px 717px #FFF, 160px 820px #FFF, 86px 1593px #FFF, 1622px 996px #FFF, 1890px 1908px #FFF, 122px 291px #FFF, 776px 1767px #FFF, 870px 1074px #FFF, 1059px 1549px #FFF, 1325px 1124px #FFF, 1449px 948px #FFF, 1546px 1816px #FFF;
    animation: animStar 100s linear infinite;
    opacity: 0.2;
    will-change: transform;
}

.stars-2:after {
    content: ' ';
    position: absolute;
    top: 2000px;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 1195px 1381px #FFF, 54px 530px #FFF, 1112px 208px #FFF, 946px 721px #FFF, 38px 1220px #FFF, 506px 1955px #FFF, 475px 1781px #FFF, 1035px 717px #FFF, 91px 698px #FFF, 799px 1365px #FFF, 1958px 817px #FFF, 1490px 1465px #FFF, 228px 958px #FFF, 1716px 599px #FFF, 423px 396px #FFF, 376px 1816px #FFF, 751px 1528px #FFF, 1983px 317px #FFF, 1939px 451px #FFF, 306px 1293px #FFF, 324px 1898px #FFF, 32px 4px #FFF, 479px 1420px #FFF, 1955px 164px #FFF, 917px 1800px #FFF, 1205px 777px #FFF, 621px 1484px #FFF, 770px 1034px #FFF, 1029px 860px #FFF, 668px 222px #FFF, 192px 1777px #FFF, 1288px 1868px #FFF, 495px 1761px #FFF, 1447px 1629px #FFF, 261px 1215px #FFF, 1209px 497px #FFF, 907px 691px #FFF, 442px 1966px #FFF, 1594px 364px #FFF, 427px 962px #FFF, 1817px 87px #FFF, 1608px 1228px #FFF, 2px 1424px #FFF, 396px 652px #FFF, 1742px 1188px #FFF, 7px 764px #FFF, 1591px 216px #FFF, 563px 1669px #FFF, 946px 1365px #FFF, 1430px 1161px #FFF, 560px 1822px #FFF, 1521px 770px #FFF, 1178px 1594px #FFF, 102px 1801px #FFF, 110px 1154px #FFF, 57px 1203px #FFF, 218px 1922px #FFF, 1045px 144px #FFF, 686px 229px #FFF, 385px 1591px #FFF, 1371px 135px #FFF, 1859px 973px #FFF, 1585px 1551px #FFF, 1289px 1298px #FFF, 1952px 1708px #FFF, 1851px 1524px #FFF, 1630px 1572px #FFF, 1362px 32px #FFF, 1422px 577px #FFF, 1267px 1583px #FFF, 1994px 997px #FFF, 488px 395px #FFF, 1462px 1517px #FFF, 1134px 1399px #FFF, 1184px 473px #FFF, 1606px 1849px #FFF, 1952px 801px #FFF, 284px 1069px #FFF, 719px 1216px #FFF, 1920px 196px #FFF, 1563px 749px #FFF, 869px 1339px #FFF, 1830px 1665px #FFF, 1496px 1219px #FFF, 593px 1348px #FFF, 1584px 439px #FFF, 40px 218px #FFF, 709px 847px #FFF, 1899px 600px #FFF, 1586px 401px #FFF, 269px 815px #FFF, 500px 1717px #FFF, 542px 453px #FFF, 788px 624px #FFF, 948px 828px #FFF, 50px 1806px #FFF, 1590px 1324px #FFF, 1831px 1910px #FFF, 1872px 1553px #FFF, 1203px 359px #FFF, 1093px 741px #FFF, 492px 1984px #FFF, 924px 108px #FFF, 332px 786px #FFF, 1587px 496px #FFF, 61px 356px #FFF, 1982px 1707px #FFF, 1136px 894px #FFF, 1801px 414px #FFF, 50px 294px #FFF, 1288px 234px #FFF, 825px 1927px #FFF, 1387px 489px #FFF, 269px 171px #FFF, 1568px 1881px #FFF, 1453px 82px #FFF, 648px 40px #FFF, 606px 1727px #FFF, 601px 1593px #FFF, 114px 50px #FFF, 984px 976px #FFF, 99px 1971px #FFF, 1856px 1366px #FFF, 1993px 142px #FFF, 289px 441px #FFF, 699px 589px #FFF, 832px 351px #FFF, 1786px 259px #FFF, 1948px 5px #FFF, 190px 1183px #FFF, 1830px 1274px #FFF, 662px 1652px #FFF, 760px 1099px #FFF, 622px 509px #FFF, 1078px 566px #FFF, 1674px 953px #FFF, 1728px 579px #FFF, 12px 484px #FFF, 549px 738px #FFF, 1889px 886px #FFF, 1429px 901px #FFF, 707px 529px #FFF, 1448px 1023px #FFF, 114px 243px #FFF, 641px 136px #FFF, 1726px 651px #FFF, 1413px 1333px #FFF, 1400px 1366px #FFF, 752px 1377px #FFF, 1582px 1581px #FFF, 1308px 446px #FFF, 324px 127px #FFF, 387px 1086px #FFF, 944px 924px #FFF, 80px 1798px #FFF, 181px 1423px #FFF, 488px 1136px #FFF, 1145px 1490px #FFF, 617px 889px #FFF, 156px 1848px #FFF, 650px 517px #FFF, 1350px 106px #FFF, 454px 1182px #FFF, 1622px 25px #FFF, 183px 881px #FFF, 1563px 818px #FFF, 833px 442px #FFF, 983px 1116px #FFF, 467px 17px #FFF, 878px 906px #FFF, 748px 1106px #FFF, 634px 488px #FFF, 227px 1448px #FFF, 31px 1486px #FFF, 1425px 565px #FFF, 1592px 1187px #FFF, 1280px 1998px #FFF, 1748px 1737px #FFF, 892px 428px #FFF, 1289px 795px #FFF, 1173px 740px #FFF, 1110px 543px #FFF, 1984px 908px #FFF, 1749px 773px #FFF, 1944px 1032px #FFF, 196px 272px #FFF, 10px 597px #FFF, 1079px 1963px #FFF, 1265px 717px #FFF, 160px 820px #FFF, 86px 1593px #FFF, 1622px 996px #FFF, 1890px 1908px #FFF, 122px 291px #FFF, 776px 1767px #FFF, 870px 1074px #FFF, 1059px 1549px #FFF, 1325px 1124px #FFF, 1449px 948px #FFF, 1546px 1816px #FFF;
}

.stars-3 {
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow: 1115px 434px #FFF, 752px 1900px #FFF, 1590px 632px #FFF, 420px 634px #FFF, 1203px 1183px #FFF, 369px 415px #FFF, 1520px 866px #FFF, 38px 1011px #FFF, 1932px 1143px #FFF, 1891px 1496px #FFF, 737px 992px #FFF, 1521px 1349px #FFF, 1022px 1417px #FFF, 1398px 1338px #FFF, 1917px 1914px #FFF, 1117px 1532px #FFF, 1210px 671px #FFF, 1021px 632px #FFF, 1821px 1057px #FFF, 573px 1692px #FFF, 1731px 1531px #FFF, 1980px 1434px #FFF, 183px 318px #FFF, 404px 568px #FFF, 956px 1177px #FFF, 1281px 1820px #FFF, 1914px 1894px #FFF, 1439px 1343px #FFF, 1723px 1918px #FFF, 1320px 168px #FFF, 600px 1134px #FFF, 1618px 1783px #FFF, 674px 355px #FFF, 1178px 1655px #FFF, 1500px 79px #FFF, 773px 1388px #FFF, 74px 221px #FFF, 684px 332px #FFF, 626px 955px #FFF, 1836px 1902px #FFF, 632px 1564px #FFF, 1902px 1583px #FFF, 1347px 890px #FFF, 470px 208px #FFF, 373px 1422px #FFF, 1117px 428px #FFF, 669px 524px #FFF, 1334px 1812px #FFF, 1849px 833px #FFF, 657px 724px #FFF, 1024px 34px #FFF, 975px 1529px #FFF, 1863px 1192px #FFF, 1163px 903px #FFF, 981px 1839px #FFF, 1412px 1573px #FFF, 1045px 1001px #FFF, 408px 298px #FFF, 1841px 1200px #FFF, 1969px 698px #FFF, 1066px 1230px #FFF, 1854px 1348px #FFF, 949px 1618px #FFF, 1550px 1552px #FFF, 1350px 1163px #FFF, 920px 1859px #FFF, 681px 1885px #FFF, 1299px 889px #FFF, 1031px 681px #FFF, 194px 137px #FFF, 384px 1309px #FFF, 404px 173px #FFF, 1965px 1504px #FFF, 588px 643px #FFF, 667px 1444px #FFF, 1493px 1478px #FFF, 482px 1457px #FFF, 1267px 1049px #FFF, 746px 89px #FFF, 1924px 1098px #FFF, 1957px 447px #FFF, 824px 1740px #FFF, 1376px 1095px #FFF, 1564px 1170px #FFF, 799px 1203px #FFF, 1318px 669px #FFF, 904px 483px #FFF, 285px 975px #FFF, 1270px 521px #FFF, 666px 266px #FFF, 1803px 543px #FFF, 612px 836px #FFF, 1605px 1798px #FFF, 361px 184px #FFF, 1226px 1124px #FFF, 1595px 1612px #FFF, 825px 853px #FFF, 1699px 1409px #FFF, 290px 1545px #FFF, 902px 1229px #FFF;
    animation: animStar 50s linear infinite;
    opacity: 0.1;
    will-change: transform;
}

.stars-3:after {
    content: ' ';
    position: absolute;
    top: 2000px;
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow: 1115px 434px #FFF, 752px 1900px #FFF, 1590px 632px #FFF, 420px 634px #FFF, 1203px 1183px #FFF, 369px 415px #FFF, 1520px 866px #FFF, 38px 1011px #FFF, 1932px 1143px #FFF, 1891px 1496px #FFF, 737px 992px #FFF, 1521px 1349px #FFF, 1022px 1417px #FFF, 1398px 1338px #FFF, 1917px 1914px #FFF, 1117px 1532px #FFF, 1210px 671px #FFF, 1021px 632px #FFF, 1821px 1057px #FFF, 573px 1692px #FFF, 1731px 1531px #FFF, 1980px 1434px #FFF, 183px 318px #FFF, 404px 568px #FFF, 956px 1177px #FFF, 1281px 1820px #FFF, 1914px 1894px #FFF, 1439px 1343px #FFF, 1723px 1918px #FFF, 1320px 168px #FFF, 600px 1134px #FFF, 1618px 1783px #FFF, 674px 355px #FFF, 1178px 1655px #FFF, 1500px 79px #FFF, 773px 1388px #FFF, 74px 221px #FFF, 684px 332px #FFF, 626px 955px #FFF, 1836px 1902px #FFF, 632px 1564px #FFF, 1902px 1583px #FFF, 1347px 890px #FFF, 470px 208px #FFF, 373px 1422px #FFF, 1117px 428px #FFF, 669px 524px #FFF, 1334px 1812px #FFF, 1849px 833px #FFF, 657px 724px #FFF, 1024px 34px #FFF, 975px 1529px #FFF, 1863px 1192px #FFF, 1163px 903px #FFF, 981px 1839px #FFF, 1412px 1573px #FFF, 1045px 1001px #FFF, 408px 298px #FFF, 1841px 1200px #FFF, 1969px 698px #FFF, 1066px 1230px #FFF, 1854px 1348px #FFF, 949px 1618px #FFF, 1550px 1552px #FFF, 1350px 1163px #FFF, 920px 1859px #FFF, 681px 1885px #FFF, 1299px 889px #FFF, 1031px 681px #FFF, 194px 137px #FFF, 384px 1309px #FFF, 404px 173px #FFF, 1965px 1504px #FFF, 588px 643px #FFF, 667px 1444px #FFF, 1493px 1478px #FFF, 482px 1457px #FFF, 1267px 1049px #FFF, 746px 89px #FFF, 1924px 1098px #FFF, 1957px 447px #FFF, 824px 1740px #FFF, 1376px 1095px #FFF, 1564px 1170px #FFF, 799px 1203px #FFF, 1318px 669px #FFF, 904px 483px #FFF, 285px 975px #FFF, 1270px 521px #FFF, 666px 266px #FFF, 1803px 543px #FFF, 612px 836px #FFF, 1605px 1798px #FFF, 361px 184px #FFF, 1226px 1124px #FFF, 1595px 1612px #FFF, 825px 853px #FFF, 1699px 1409px #FFF, 290px 1545px #FFF, 902px 1229px #FFF;
}

@keyframes animStar {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-2000px);
    }
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-right: 4rem;
}

.logo span {
    color: var(--accent-primary);
}

.nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-link {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.1rem;
}

.nav-link:hover {
    color: var(--accent-primary);
}

.nav-socials {
    display: flex;
    gap: 1rem;
    margin-left: 2rem;
    padding-left: 2rem;
    border-left: 1px solid var(--text-tertiary);
}

.mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    position: relative;
    z-index: 10000 !important;
    /* Ensure absolutely above everything including the open menu */
}

/* Hero */
.hero {
    display: flex;
    align-items: center;
    padding-top: 10rem;
    padding-bottom: 0rem;
    position: relative;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
}

/* Mobile hero: apply from 1024px down so phones and tablets get centered, wrapped layout */
@media (max-width: 1024px) {

    section.hero .container.hero-grid,
    .hero .container.hero-grid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box !important;
    }

    section.hero .hero-content,
    .hero .hero-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    section.hero .hero-name,
    section.hero .hero-title,
    section.hero .hero-subtitle,
    .hero .hero-name,
    .hero .hero-title,
    .hero .hero-subtitle {
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }

    /* Social buttons: wrap so labels (Substack, LinkedIn, etc.) are never truncated */
    section.hero .hero-buttons,
    .hero .hero-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
    }

    .hero .hero-buttons .btn {
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: min-content !important;
        white-space: nowrap !important;
        overflow: visible !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
}

.hero::before,
.hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: -1;
}

.hero::before {
    top: -10%;
    right: -5%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    opacity: 0.5;
}

.hero::after {
    bottom: -10%;
    left: -5%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 169, 224, 0.2) 0%, transparent 70%);
    opacity: 0.4;
}

/* Hero: text left, logo right */
.hero-wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
    max-width: min(1200px, 100%);
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    margin-bottom: 2rem;
}
.hero-wrap .hero-content {
    text-align: left;
    min-width: 0;
}
.hero-wrap .hero-buttons {
    justify-content: flex-start;
}
.hero-visual {
    justify-self: end;
    min-width: 0;
}
.hero-logo-img {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    border-radius: 16px;
}
@media (max-width: 900px) {
    .hero-wrap {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .hero-wrap .hero-content {
        text-align: center;
    }
    .hero-wrap .hero-buttons {
        justify-content: center;
    }
    .hero-visual {
        justify-self: center;
        order: -1;
    }
    .hero-logo-img {
        max-width: 280px;
    }
}

.hero-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
}

.hero-grid>div {
    min-width: 0;
    /* Allow grid cells to shrink on small screens */
}

.hero-tag {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(255, 54, 33, 0.1);
    border: 1px solid rgba(255, 54, 33, 0.2);
    border-radius: 20px;
    color: var(--accent-primary);
    margin-bottom: 1.5rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.hero-name {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    /* Shimmer Gradient */
    background: linear-gradient(to right,
            #ffffff 0%,
            #a1a1aa 40%,
            #ffffff 50%,
            #a1a1aa 60%,
            #ffffff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    animation: textShine 5s linear infinite;
    will-change: transform;
}

@keyframes textShine {
    to {
        background-position: 200% center;
    }
}

.hero-name span {
    -webkit-text-fill-color: var(--accent-primary);
}

.hero-name-row2 {
    margin-top: 0.25rem;
    margin-bottom: 1.25rem;
}

/* Hidden visually but present in DOM for crawlers (SEO) */
.hero-keywords,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.hero-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: #fff;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    white-space: normal;
}
.hero-title-accent {
    color: var(--accent-primary);
}

.hero-subtitle {
    font-size: 1.5rem;
    color: var(--text-secondary);
    font-weight: 400;
    margin-bottom: 2rem;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.hero-image-wrapper {
    position: relative;
    border-radius: 2rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    aspect-ratio: 1;
    width: 200px;
    max-width: 80%;
    margin: 0 auto;
    z-index: 1;
    order: -1;
    /* Move image to top in column layout */
    will-change: transform;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stats-card {
    position: absolute;
    bottom: 2rem;
    left: -2rem;
    background: rgba(11, 15, 25, 0.9);
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 1rem;
    animation: float 6s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* About - reduced top spacing so "Bio" sits closer to hero */
.about {
    padding-top: 1rem;
    padding-bottom: var(--space-xl);
    background: transparent;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    width: 100%;
    min-width: 0;
}

.tech-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.tech-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: default;
}


/* Timeline (Work Experience) */
.timeline-section {
    padding: 2rem 0;
    width: 100%;
    position: relative;
}

.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 0;
}

.timeline::after {
    content: '';
    position: absolute;
    width: 2px;
    background: rgba(255, 255, 255, 0.1);
    top: 0;
    bottom: 0;
    left: 20px;
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 100%;
    box-sizing: border-box;
}

.timeline-item::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    right: auto;
    left: 11px;
    background-color: var(--bg-secondary);
    border: 4px solid var(--accent-primary);
    top: 15px;
    border-radius: 50%;
    z-index: 1;
    transition: all 0.3s ease;
}

.timeline-item:hover::after {
    background-color: var(--accent-primary);
    transform: scale(1.2);
}

.timeline-content {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    transition: transform 0.3s;
}

.timeline-content:hover {
    transform: translateY(-5px);
    border-color: var(--accent-primary);
}

.timeline-date {
    font-size: 0.85rem;
    color: var(--accent-secondary);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.timeline-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.timeline-company {
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-start;
}

@media (min-width: 768px) {
    .timeline::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .timeline-item {
        width: 50%;
    }

    .timeline-item:nth-child(odd) {
        left: 0;
        text-align: right;
        padding-right: 50px;
        padding-left: 0;
    }

    .timeline-item:nth-child(even) {
        left: 50%;
        text-align: left;
        padding-left: 50px;
    }

    .timeline-item:nth-child(odd)::after {
        right: -10px;
        left: auto;
    }

    .timeline-item:nth-child(even)::after {
        left: -10px;
    }

    .timeline-item:nth-child(odd) .timeline-company {
        justify-content: flex-end;
    }
}

/* Content Sections */
.youtube-feed {
    padding: 2rem 0;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: var(--space-lg);
    width: 100%;
    min-width: 0;
}

.video-card {
    background: var(--bg-secondary);
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease;
    display: block;
    text-decoration: none;
    color: inherit;
}

.video-card:hover {
    transform: translateY(-5px);
}

.video-thumbnail {
    position: relative;
    aspect-ratio: 16/9;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.newsletter {
    padding: 2rem 0;
    background: var(--bg-tertiary);
    text-align: center;
}

.newsletter-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--accent-primary), #ff6b6b);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    color: white;
    font-size: 1.5rem;
}

/* Subscriber Progress Bar */
.goals-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2.5rem;
}

@media (max-width: 768px) {
    .goals-grid {
        grid-template-columns: 1fr;
    }
}

.subscriber-goal-container {
    margin-top: 2.5rem;
    text-align: center;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--container-padding);
}

.goal-text {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

.goal-text span {
    color: var(--accent-primary);
    font-size: 1.1rem;
}

.progress-bar-bg {
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.progress-bar-fill {
    width: 0%;
    /* Animated via JS */
    height: 100%;
    box-shadow: 0 0 15px var(--accent-glow);
    border-radius: 20px;
    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.youtube-fill {
    background: linear-gradient(90deg, #FF0000, #ff4d4d);
}

.substack-fill {
    background: linear-gradient(90deg, var(--accent-primary), #00d2ff);
}

.newsletter-box {
    background: var(--bg-primary);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 800px;
    margin: 0 auto;
}

.talks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: var(--space-md);
    width: 100%;
    min-width: 0;
}

.talk-card {
    background: var(--bg-secondary);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    transition: border-color 0.3s ease, transform 0.3s ease;
    max-width: 100%;
    box-sizing: border-box;
}

.talk-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-5px);
}

.talk-type {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-bottom-left-radius: 1rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.partnerships {
    padding: 2rem 0;
}

.form-container {
    max-width: min(800px, 100%);
    margin: 0 auto;
    background: var(--bg-secondary);
    padding: var(--space-xl);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    width: 100%;
    box-sizing: border-box;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    max-width: 100%;
    padding: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.footer {
    padding: var(--space-lg) 0;
    background: var(--bg-secondary);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}

.footer-socials {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.footer-socials a {
    color: #fff;
    opacity: 0.9;
}
.footer-socials a:hover {
    opacity: 1;
}

/* Mobile Responsive - compact first section to reduce scroll */
@media (max-width: 968px) {
    .navbar {
        height: 64px;
        min-height: 64px;
    }

    .hero {
        padding-top: 7.5rem;
        /* Clear ticker (45px) + navbar (64px) */
        padding-bottom: 1rem;
        overflow: visible;
    }

    .hero .container.hero-grid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .hero .stats-bar {
        margin-top: 1rem !important;
    }

    .hero .hero-grid {
        gap: 1.25rem;
    }

    .hero .hero-image-wrapper {
        margin-bottom: 1rem;
    }

    .container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1.25rem;
    }

    /* Social buttons above stats on mobile */
    .hero-grid .hero-content {
        order: 1;
    }
    .hero-grid .stats-bar {
        order: 2;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: visible;
        text-align: center;
    }

    /* Constrain all hero text/buttons so nothing overflows or truncates */
    .hero-content>* {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Center name and text - force so nothing is left-aligned or truncated */
    .hero-content .hero-name,
    .hero-content .hero-title,
    .hero-content .hero-subtitle {
        text-align: center !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
    }

    .hero-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
    }

    .hero-buttons .btn {
        width: auto !important;
        flex: 0 1 auto !important;
        min-width: min-content !important;
        white-space: nowrap !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.9rem !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .hero-name {
        font-size: clamp(2rem, 8vw, 4.5rem);
    }

    .hero-title {
        font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
        white-space: normal !important;
    }

    .hero-subtitle {
        font-size: clamp(1rem, 3.5vw, 1.5rem);
    }

    .hero-content>div[style*="display: flex"],
    .hero-content>div[style*="flex"] {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.75rem !important;
    }

    .hero-content .btn {
        padding: 0.65rem 1rem;
        font-size: 0.9rem;
        min-height: 44px;
        min-width: 44px;
    }

    /* Shorter profile picture on mobile - compact first section */
    .hero-image-wrapper {
        max-width: 200px;
        max-height: 200px;
        margin: 0 auto 1rem auto;
        aspect-ratio: 1;
    }

    .hero .goals-grid {
        margin-top: 1rem !important;
    }

    .hero .stats-container {
        padding: 1.25rem 1rem;
        gap: 1.25rem;
    }

    .hero-image-wrapper .hero-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .stats-card {
        left: 50%;
        transform: translateX(-50%);
        bottom: -1rem;
        width: 90%;
        max-width: 320px;
    }

    .section-title {
        font-size: var(--text-heading);
        margin-bottom: var(--space-xl);
    }

    /* Section header (e.g. YouTube "Latest Content"): stack on mobile */
    .section-header-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }

    .nav-links,
    .nav-socials {
        display: none !important;
    }

    .mobile-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
    }

    .navbar.open {
        height: 100vh !important;
        max-height: 100dvh !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        background: var(--bg-primary);
        z-index: 9999 !important;
        padding-top: 60px;
    }

    .navbar.open .nav-container {
        flex-wrap: wrap;
    }

    .navbar.open .nav-links,
    .navbar.open .nav-socials {
        display: flex !important;
        order: 10;
        width: 100%;
        margin: 0;
        padding-left: 0;
        border-left: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        background: var(--bg-secondary);
    }

    .navbar.open .nav-links {
        flex-direction: column;
        padding: 1.5rem 2rem;
        gap: 0.5rem;
        display: flex !important;
        /* Force visible */
        visibility: visible;
        opacity: 1;
    }

    .navbar.open .nav-links a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .navbar.open .nav-socials {
        flex-direction: row;
        justify-content: center;
        padding: 1rem 2rem 1.5rem;
        display: flex !important;
        /* Force visible */
        visibility: visible;
        opacity: 1;
    }

    .logo {
        margin-right: 0.5rem;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .form-container {
        padding: 1.5rem 1.25rem;
    }

    /* Carousel: fluid padding so content is always visible */
    .carousel-wrapper {
        padding-left: var(--container-padding) !important;
        padding-right: var(--container-padding) !important;
    }

    /* Events / Talks timeline: single column, full width */
    .timeline-wrapper {
        padding-left: var(--container-padding);
        padding-right: var(--container-padding);
    }

    .timeline-wrapper::before {
        left: 20px !important;
        transform: none !important;
    }

    .timeline-event {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        padding-left: 3rem !important;
        padding-right: 0 !important;
        text-align: left !important;
    }

    .timeline-event:nth-child(even) {
        left: 0 !important;
    }

    .timeline-event::after {
        left: 11px !important;
        right: auto !important;
    }

    .event-card {
        padding: var(--space-md);
    }

    /* Interviews / talks grid: single column */
    .interviews .talks-grid,
    .talks-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--space-md) !important;
    }

    /* Newsletter feed: single column */
    #newsletter-feed.newsletter-feed {
        grid-template-columns: 1fr !important;
        min-width: 0 !important;
    }

    /* Certifications: stack on narrow */
    .certs-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-md);
    }

    .cert-card {
        max-width: 100% !important;
    }
}

/* Tablet portrait: slightly more room, same single-column flow */
@media (max-width: 640px) {
    .section-header-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .section-header-row .btn {
        align-self: flex-start;
    }
}

@media (max-width: 480px) {
    #scroll-progress {
        top: 40px !important;
    }

    .navbar {
        top: 40px !important;
        height: 56px !important;
        min-height: 56px !important;
    }

    .navbar.open {
        min-height: 56px !important;
    }

    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .hero {
        padding-top: 6.5rem;
        /* 40px ticker + 56px nav = 96px; 6.5rem = 104px */
        padding-bottom: 1.5rem;
    }

    .hero-name {
        font-size: 1.75rem;
    }

    .hero-title {
        font-size: 1.35rem !important;
    }

    .hero-subtitle {
        font-size: 0.95rem;
    }

    .hero-content .btn {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }

    .stats-container {
        padding: 1rem 0.75rem;
        gap: 1rem;
    }

    .stat-item {
        min-width: 120px;
    }

    .stat-number {
        font-size: 2rem;
    }

    .stat-label {
        font-size: 0.75rem;
    }

    .tech-badges {
        gap: 0.5rem;
    }

    .tech-badge {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    .talks-grid {
        grid-template-columns: 1fr;
    }

    .footer-socials {
        gap: 1rem;
        font-size: 1.25rem;
    }

    .certs-grid {
        grid-template-columns: 1fr !important;
    }

    /* Modal: fluid width and padding so it reflows on resize */
    .modal-content {
        width: 95% !important;
        max-width: none !important;
        margin: 5% auto !important;
        padding: var(--container-padding) !important;
        box-sizing: border-box;
    }
}

/* Small phones (400px and below) - prevent any overflow */
@media (max-width: 400px) {
    .container {
        padding-left: var(--container-padding);
        padding-right: var(--container-padding);
    }

    .modal-content {
        margin: var(--space-md) auto !important;
    }

    .hero-name {
        font-size: 1.5rem;
    }

    .hero-title {
        font-size: 1.15rem !important;
    }

    .hero-subtitle {
        font-size: 0.875rem;
    }

    .section-title {
        font-size: var(--text-heading);
        margin-bottom: var(--space-lg);
    }

    .video-grid,
    .talks-grid,
    .newsletter-feed {
        grid-template-columns: 1fr !important;
    }

    .stats-container {
        grid-template-columns: 1fr 1fr !important;
        padding: 0.75rem 0.5rem;
        gap: 0.75rem;
    }

    .stat-item {
        min-width: 0;
    }

    .stat-number {
        font-size: 1.75rem;
    }

    .stat-label {
        font-size: 0.7rem;
    }

    .hero-image-wrapper {
        max-width: min(200px, 100%);
        max-height: 200px;
    }

    .carousel-video-card {
        min-width: 160px !important;
        max-width: 160px !important;
    }
}

/* Very small phones (360px) - compact layout */
@media (max-width: 360px) {
    #scroll-progress {
        top: 36px !important;
    }

    .navbar {
        top: 36px !important;
        height: 52px !important;
        min-height: 52px !important;
    }

    .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .navbar.open {
        height: 100vh !important;
    }

    .hero {
        padding-top: 5.5rem;
        /* 36px ticker + 52px nav ≈ 88px */
    }

    .hero-name {
        font-size: 1.35rem;
    }

    .hero-title {
        font-size: 1rem !important;
    }

    .hero-subtitle {
        font-size: 0.8rem;
    }

    .section-title {
        font-size: var(--text-heading);
    }

    .hero-content .btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    .stat-number {
        font-size: 1.5rem;
    }

    .talk-card,
    .form-container {
        padding: 1rem !important;
    }

    .carousel-video-card {
        min-width: 140px !important;
        max-width: 140px !important;
    }

    .navbar.open .nav-links {
        padding: 1rem var(--container-padding);
    }

    .navbar.open .nav-socials {
        padding: 0.75rem var(--container-padding) 1rem;
    }
}

/* Extra-small phones (320px) - no overflow, everything visible */
@media (max-width: 320px) {
    #scroll-progress {
        top: 34px !important;
    }

    .navbar {
        top: 34px !important;
        height: 48px !important;
        min-height: 48px !important;
    }

    .navbar.open {
        height: 100vh !important;
    }

    .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .hero {
        padding-top: 5rem;
        /* 34px ticker + 48px nav */
    }

    .hero-name {
        font-size: 1.2rem;
    }

    .hero-title {
        font-size: 0.95rem !important;
    }

    .hero-subtitle {
        font-size: 0.75rem;
    }

    .stats-container {
        padding: 0.5rem 0.5rem;
        gap: 0.5rem;
    }

    .stat-number {
        font-size: 1.35rem;
    }

    .stat-label {
        font-size: 0.65rem;
    }

    .talk-card,
    .form-container {
        padding: 0.75rem !important;
    }

    .carousel-video-card {
        min-width: 130px !important;
        max-width: 130px !important;
    }

    .modal-content {
        width: 98% !important;
        margin: var(--space-sm) auto !important;
        padding: var(--space-sm) !important;
    }
}

/* Animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Polished Card Effect */
.card-glow {
    border-color: var(--accent-secondary) !important;
    background: linear-gradient(145deg, var(--bg-secondary), rgba(0, 169, 224, 0.05)) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Social Stats Bar */
.stats-bar {
    padding: 0;
    /* Remove padding as it is now inside hero-grid */
    margin-top: 0rem;
    margin-bottom: 0.25rem;
}

.stats-bar .section-title {
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 10;
}

.stats-container {
    background: rgba(11, 15, 25, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.stat-item {
    text-align: center;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.clickable-stat:hover {
    transform: translateY(-5px);
}

@media (min-width: 601px) {
    .stat-item {
        min-width: 150px;
    }
}

.stat-number {
    display: block;
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #fff 0%, #a1a1aa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -1px;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.stat-icon {
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .stats-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
}

/* Certifications */
.certifications {
    padding: 3rem 0;
    background: var(--bg-secondary);
}

.certs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    justify-items: center;
}

.cert-card {
    background: var(--bg-tertiary);
    padding: 1.5rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    width: 100%;
    max-width: 240px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cert-card:hover {
    transform: translateY(-8px);
    border-color: var(--accent-primary);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.cert-image {
    width: 100%;
    max-width: 160px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s ease;
}

.cert-card:hover .cert-image {
    transform: scale(1.05);
}

.cert-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

.newsletter {
    padding: 2rem 0;
    text-align: center;
    background: linear-gradient(180deg, var(--bg-primary) 0%, rgba(255, 54, 33, 0.05) 100%);
    position: relative;
    overflow: hidden;
}

.newsletter::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.newsletter-icon {
    font-size: 3rem;
    color: var(--accent-primary);
    margin-bottom: 1.5rem;
    animation: float 3s ease-in-out infinite;
    display: inline-block;
    background: rgba(255, 54, 33, 0.1);
    width: 80px;
    height: 80px;
    line-height: 80px;
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(255, 54, 33, 0.2);
}

/* Subscription CTA: minimal copy + sleek button */
.newsletter-cta-text {
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
    font-size: 1.125rem;
}
.newsletter-cta-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 2.5rem;
}
.btn-newsletter-cta {
    background: #fff;
    color: #0f172a;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}
.btn-newsletter-cta:hover {
    opacity: 0.92;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Newsletter feed grid: ample gap and padding, no outer border */
.newsletter-feed {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 2rem;
    margin-top: 2rem;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Newsletter card: glass style, no cyan/blue border */
.newsletter-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    text-align: left;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.newsletter-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}
.newsletter-card-thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-secondary);
}
.newsletter-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.newsletter-card-body {
    padding: 1.25rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
}
.newsletter-card-date {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-tertiary);
    margin-bottom: 0.5rem;
}
.newsletter-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    transition: color 0.3s ease;
}
.newsletter-card:hover .newsletter-card-title {
    color: var(--accent-primary);
}
.newsletter-card-excerpt {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    flex-grow: 1;
    margin-bottom: 1rem;
}
.newsletter-card-link {
    font-size: 0.9rem;
    color: var(--accent-primary);
    font-weight: 600;
}
.newsletter-card-link i {
    font-size: 0.75rem;
    margin-left: 0.25rem;
}

.newsletter-card-simple {
    background: var(--bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
    padding: 1.5rem;
    display: block;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.newsletter-card-simple::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.03), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.newsletter-card-simple:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: var(--accent-primary);
    box-shadow: 0 10px 30px -10px rgba(255, 54, 33, 0.15);
}

.newsletter-card-simple:hover::after {
    transform: translateX(100%);
}

.newsletter-card-simple h3 {
    transition: color 0.3s ease;
}

.newsletter-card-simple:hover h3 {
    color: var(--accent-primary);
}

/* Video Carousel Styles */
.video-carousel::-webkit-scrollbar {
    display: none;
}

.video-carousel {
    scrollbar-width: none;
    align-items: flex-start;
    padding-bottom: 1rem;
    padding-top: 1rem;
}

/* Carousel Thumbnail Sizing */
/* Carousel track: stay within wrapper on resize */
.video-carousel {
    min-width: 0;
    max-width: 100%;
}

.carousel-video-card {
    min-width: 280px !important;
    max-width: 280px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    text-decoration: none !important;
    display: block !important;
    transition: transform 0.2s ease;
    scroll-snap-align: start;
    flex-shrink: 0;
}

.carousel-video-card:hover {
    transform: translateY(-3px) !important;
}

.carousel-video-card:hover .video-thumbnail img {
    opacity: 0.9;
}

.carousel-btn:hover {
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

@media (max-width: 768px) {
    .carousel-wrapper {
        padding: 0 0.5rem;
    }

    .carousel-btn {
        display: none !important;
    }

    /* YouTube / content section header: stack title and button on narrow */
    .youtube-feed .container>div[style*="justify-content: space-between"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }

    /* Newsletter feed: allow single column on small screens */
    .newsletter-feed {
        grid-template-columns: 1fr !important;
    }
}

/* Hero decorative blurs: scale down on small viewports (same look, no overflow) */
@media (max-width: 968px) {
    .hero::before {
        width: min(400px, 85vw);
        height: min(400px, 85vw);
    }

    .hero::after {
        width: min(320px, 70vw);
        height: min(320px, 70vw);
    }
}

@media (max-width: 480px) {
    .hero::before {
        width: min(280px, 80vw);
        height: min(280px, 80vw);
    }

    .hero::after {
        width: min(220px, 65vw);
        height: min(220px, 65vw);
    }
}

/* Trainings Page Enhancements */

/* Filter Bar */
.filter-bar {
    background: var(--bg-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 0;
    margin-top: -4rem;
    /* To sit under topic nav */
    margin-bottom: 3rem;
    position: sticky;
    top: 140px;
    /* Adjust based on navbar + topic nav height */
    z-index: 800;
}

.filter-container {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
}

.filter-select {
    background: var(--bg-tertiary);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
}

.filter-select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

/* Difficulty Badges */
.badge-level {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    margin-left: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.level-beginner {
    background: rgba(34, 197, 94, 0.15);
    /* Green */
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.level-intermediate {
    background: rgba(249, 115, 22, 0.15);
    /* Orange */
    color: #f97316;
    border: 1px solid rgba(249, 115, 22, 0.2);
}

.level-advanced {
    background: rgba(239, 68, 68, 0.15);
    /* Red */
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Featured Section */
.featured-section {
    padding: 2rem 0;
    margin-bottom: 2rem;
}

.featured-card {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, #1e293b 100%);
    border: 1px solid var(--accent-primary);
    border-radius: 1.5rem;
    padding: 2.5rem;
    display: flex;
    gap: 3rem;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5);
}

.featured-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(255, 54, 33, 0.1), transparent 60%);
    pointer-events: none;
}

.featured-content {
    flex: 1;
}

.featured-media {
    flex: 1;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    aspect-ratio: 16/9;
}

.featured-badge {
    display: inline-block;
    background: var(--accent-primary);
    color: white;
    font-weight: 700;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.featured-title {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.featured-desc {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: 2rem;
    line-height: 1.6;
}

@media (max-width: 968px) {
    .featured-card {
        flex-direction: column;
        padding: 1.5rem;
        gap: 1.5rem;
        text-align: center;
    }

    .featured-title {
        font-size: 1.8rem;
    }
}

/* Smooth Card Actions */
.card-actions {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.action-btn {
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.action-btn-primary {
    color: white;
    background: var(--accent-secondary);
}

.action-btn-primary:hover {
    background: #0090c0;
    /* Darker shade of accent */
    transform: translateY(-1px);
}

.action-btn-secondary {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
}

.action-btn-secondary:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

/* Tooltip-ish touch for small icons */
.action-btn i {
    font-size: 0.9rem;
}

/* Resources Grid - 4 Columns */
.resource-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    justify-items: center;
    /* Center items in their cells */
    max-width: 1400px;
    /* Optional: limit width to prevent excessive stretching */
}

@media (max-width: 1400px) {
    .resource-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1100px) {
    .resource-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .resource-grid {
        grid-template-columns: 1fr;
    }
}

/* Search Input Styling */
.search-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-glass);
    border-radius: 12px;
    padding: 10px 16px;
    color: var(--text-main);
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
    outline: none;
}

.search-input:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-primary);
    box-shadow: 0 0 15px rgba(0, 169, 224, 0.2);
}

.search-input::placeholder {
    color: var(--text-muted);
}

/* =========================================
   Speaker Timeline Styles
   ========================================= */
:root {
    --timeline-color: rgba(255, 255, 255, 0.1);
    --card-bg: #1e293b;
    --accent-gradient: linear-gradient(135deg, var(--accent-primary), #ff6b6b);
}

.timeline-wrapper {
    max-width: min(1000px, 100%);
    margin: 0 auto;
    position: relative;
    padding: var(--space-xl) 0;
    width: 100%;
}

/* Central Line */
.timeline-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: var(--timeline-color);
    transform: translateX(-50%);
}

.timeline-event {
    position: relative;
    margin-bottom: 4rem;
    width: 50%;
    padding: 0 3rem;
}

/* Alternating Layout */
.timeline-event:nth-child(odd) {
    left: 0;
    text-align: right;
}

.timeline-event:nth-child(even) {
    left: 50%;
    text-align: left;
}

/* The Dot */
.timeline-event::after {
    content: '';
    position: absolute;
    top: 20px;
    width: 16px;
    height: 16px;
    background: var(--bg-primary);
    border: 3px solid var(--accent-secondary);
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 0 0 4px rgba(0, 169, 224, 0.2);
    transition: all 0.3s ease;
}

.timeline-event:nth-child(odd)::after {
    right: -10px;
    /* Half width of dot + border */
}

.timeline-event:nth-child(even)::after {
    left: -10px;
}

.timeline-event:hover::after {
    background: var(--accent-secondary);
    transform: scale(1.2);
    box-shadow: 0 0 15px var(--accent-secondary);
}

/* Card Design */
.event-card {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
    transition: transform 0.3s, border-color 0.3s;
    position: relative;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

.event-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-primary);
}

.event-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    opacity: 0;
    transition: opacity 0.3s;
}

.event-card:hover::before {
    opacity: 1;
}

.event-date {
    font-size: 0.85rem;
    color: var(--accent-secondary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.timeline-event:nth-child(odd) .event-date {
    justify-content: flex-end;
}

.event-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #fff;
}

.event-location {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.timeline-event:nth-child(odd) .event-location {
    justify-content: flex-end;
}

.card-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 1rem 0;
    width: 100%;
}

.event-tags {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.timeline-event:nth-child(odd) .event-tags {
    justify-content: flex-end;
}

.event-tag {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-view {
    margin-top: 1.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .timeline-wrapper::before {
        left: 20px;
    }

    .timeline-event {
        width: 100%;
        padding-left: 50px;
        padding-right: 0;
        text-align: left !important;
    }

    .timeline-event::after {
        left: 11px !important;
        right: auto !important;
    }

    .event-date,
    .event-location,
    .event-tags {
        justify-content: flex-start !important;
    }
}