/* ===== Global Reset & Base ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

html, body {
    font-family: 'Satoshi', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #e0e4ea;
    background: #000000;
    line-height: 1.6;
}

a {
    color: #0077ee;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
}

/* ===== Utility ===== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.text-center {
    text-align: center;
}

/* ===== Hero Sections ===== */
.hero {
    background: #000000;
    color: #ffffff;
    padding: 5rem 2rem;
    text-align: left;
    position: relative;
    overflow: hidden;
}

/* Starfield layer - small stars pass 1 */
.hero .stars-sm {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: transparent;
    box-shadow:
        6.9vw 290px #fff, 11.3vw 525px #fff, 51.1vw 38px #fff, 4.8vw 514px #fff, 15.6vw 512px #fff,
        63.0vw 353px #fff, 85.4vw 421px #fff, 57.3vw 281px #fff, 25.0vw 99px #fff, 42.4vw 264px #fff,
        77.1vw 190px #fff, 39.9vw 659px #fff, 62.0vw 462px #fff, 68.7vw 634px #fff, 20.8vw 538px #fff,
        6.8vw 180px #fff, 59.5vw 224px #fff, 48.8vw 158px #fff, 25.7vw 307px #fff, 61.1vw 484px #fff,
        50.0vw 266px #fff, 96.3vw 542px #fff, 54.8vw 379px #fff, 15.1vw 141px #fff, 8.7vw 656px #fff,
        82.7vw 47px #fff, 69.2vw 263px #fff, 66.3vw 307px #fff, 32.9vw 55px #fff, 19.5vw 299px #fff,
        71.6vw 113px #fff, 44.0vw 673px #fff, 10.5vw 286px #fff, 85.3vw 454px #fff, 94.7vw 422px #fff,
        64.6vw 164px #fff, 40.8vw 368px #fff, 86.9vw 467px #fff, 37.3vw 614px #fff, 61.3vw 505px #fff,
        17.6vw 186px #fff, 59.6vw 300px #fff, 25.7vw 641px #fff, 95.8vw 473px #fff, 97.2vw 503px #fff,
        45.6vw 88px #fff, 56.5vw 632px #fff, 57.1vw 516px #fff, 37.8vw 22px #fff, 51.1vw 242px #fff,
        56.5vw 678px #fff, 94.7vw 637px #fff, 64.8vw 369px #fff, 53.9vw 640px #fff, 1.1vw 27px #fff,
        8.0vw 316px #fff, 98.5vw 628px #fff, 55.9vw 664px #fff, 72.2vw 570px #fff, 26.0vw 85px #fff,
        22.1vw 596px #fff, 87.9vw 414px #fff, 15.5vw 281px #fff, 27.2vw 407px #fff, 76.0vw 599px #fff,
        60.4vw 220px #fff, 35.7vw 152px #fff, 11.8vw 32px #fff, 12.6vw 639px #fff, 50.7vw 673px #fff,
        51.0vw 196px #fff, 27.9vw 329px #fff, 64.0vw 207px #fff, 72.1vw 13px #fff, 67.1vw 142px #fff,
        12.8vw 575px #fff, 75.4vw 162px #fff, 3.9vw 507px #fff, 91.3vw 71px #fff, 95.0vw 538px #fff,
        23.7vw 37px #fff, 69.8vw 251px #fff, 27.6vw 679px #fff, 13.4vw 237px #fff, 55.8vw 653px #fff,
        6.6vw 51px #fff, 8.7vw 173px #fff, 33.3vw 328px #fff, 36.0vw 141px #fff, 55.5vw 127px #fff,
        29.4vw 64px #fff, 6.6vw 319px #fff, 42.0vw 449px #fff, 91.3vw 520px #fff, 13.7vw 501px #fff,
        62.5vw 539px #fff, 1.4vw 200px #fff, 92.1vw 629px #fff, 12.6vw 132px #fff, 17.4vw 233px #fff,
        92.5vw 263px #fff, 48.5vw 633px #fff, 78.5vw 162px #fff, 63.6vw 212px #fff, 19.6vw 331px #fff,
        89.3vw 339px #fff, 89.1vw 346px #fff, 10.7vw 674px #fff, 5.2vw 631px #fff, 41.5vw 556px #fff,
        98.0vw 129px #fff, 94.2vw 20px #fff, 3.6vw 53px #fff, 33.3vw 365px #fff, 21.5vw 507px #fff,
        51.4vw 347px #fff, 3.6vw 67px #fff, 70.4vw 571px #fff, 96.6vw 346px #fff, 4.7vw 332px #fff,
        43.4vw 363px #fff, 52.3vw 257px #fff, 25.3vw 381px #fff, 22.1vw 187px #fff, 28.5vw 483px #fff,
        59.7vw 396px #fff, 1.7vw 358px #fff, 53.3vw 502px #fff, 67.7vw 370px #fff, 19.3vw 152px #fff,
        33.2vw 512px #fff, 18.6vw 248px #fff, 72.9vw 414px #fff, 48.9vw 316px #fff, 52.6vw 356px #fff,
        77.3vw 592px #fff, 21.1vw 155px #fff, 60.2vw 387px #fff, 65.6vw 185px #fff, 28.1vw 73px #fff,
        28.8vw 394px #fff, 13.4vw 692px #fff, 21.4vw 532px #fff, 35.9vw 204px #fff, 40.6vw 190px #fff,
        70.8vw 265px #fff, 74.2vw 601px #fff, 88.8vw 673px #fff, 94.1vw 426px #fff, 63.3vw 202px #fff,
        69.1vw 316px #fff, 2.4vw 430px #fff, 59.6vw 212px #fff, 59.2vw 576px #fff, 29.3vw 448px #fff,
        33.8vw 288px #fff, 7.5vw 235px #fff, 43.9vw 370px #fff, 41.8vw 27px #fff, 37.7vw 304px #fff,
        37.2vw 48px #fff, 25.4vw 346px #fff, 10.0vw 379px #fff, 62.0vw 222px #fff, 27.0vw 533px #fff,
        83.5vw 669px #fff, 61.5vw 511px #fff, 54.7vw 531px #fff, 83.6vw 147px #fff, 89.5vw 302px #fff;
    width: 1px;
    height: 1px;
    animation: twinkle1 3s ease-in-out infinite alternate;
}

/* Starfield layer - small stars pass 2 */
.hero .stars-sm2 {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: transparent;
    box-shadow:
        96.3vw 391px #fff, 47.4vw 366px #fff, 76.6vw 689px #fff, 42.1vw 164px #fff, 37.5vw 50px #fff,
        64.2vw 692px #fff, 20.9vw 529px #fff, 21.3vw 648px #fff, 55.7vw 270px #fff, 3.3vw 111px #fff,
        90.0vw 133px #fff, 61.4vw 391px #fff, 44.4vw 498px #fff, 12.8vw 468px #fff, 6.6vw 152px #fff,
        67.4vw 135px #fff, 13.7vw 348px #fff, 63.9vw 7px #fff, 67.4vw 408px #fff, 0.4vw 397px #fff,
        0.4vw 388px #fff, 60.9vw 270px #fff, 36.0vw 553px #fff, 19.6vw 326px #fff, 49.9vw 34px #fff,
        89.7vw 129px #fff, 78.9vw 328px #fff, 1.3vw 214px #fff, 58.2vw 323px #fff, 90.9vw 25px #fff,
        82.7vw 601px #fff, 16.5vw 356px #fff, 5.2vw 405px #fff, 69.3vw 204px #fff, 78.4vw 172px #fff,
        6.0vw 338px #fff, 74.4vw 212px #fff, 21.9vw 457px #fff, 66.8vw 96px #fff, 16.7vw 434px #fff,
        78.9vw 103px #fff, 63.9vw 461px #fff, 4.4vw 476px #fff, 48.6vw 78px #fff, 13.7vw 181px #fff,
        70.4vw 107px #fff, 58.1vw 605px #fff, 56.6vw 483px #fff, 11.7vw 669px #fff, 94.5vw 599px #fff,
        23.4vw 413px #fff, 75.0vw 96px #fff, 13.4vw 627px #fff, 56.0vw 642px #fff, 42.1vw 654px #fff,
        71.4vw 138px #fff, 23.9vw 652px #fff, 10.7vw 673px #fff, 64.2vw 655px #fff, 19.4vw 35px #fff,
        93.1vw 375px #fff, 28.6vw 423px #fff, 14.5vw 488px #fff, 62.9vw 459px #fff, 37.8vw 283px #fff,
        24.5vw 46px #fff, 51.2vw 232px #fff, 37.9vw 88px #fff, 76.2vw 403px #fff, 10.3vw 317px #fff,
        43.1vw 582px #fff, 36.1vw 217px #fff, 53.2vw 589px #fff, 2.4vw 664px #fff, 8.5vw 23px #fff,
        26.2vw 486px #fff, 89.0vw 286px #fff, 13.8vw 277px #fff, 32.0vw 372px #fff, 11.2vw 504px #fff,
        85.2vw 181px #fff, 45.1vw 690px #fff, 22.3vw 8px #fff, 67.5vw 326px #fff, 42.6vw 172px #fff,
        61.8vw 631px #fff, 78.5vw 249px #fff, 18.9vw 335px #fff, 93.4vw 393px #fff, 57.9vw 425px #fff,
        91.0vw 688px #fff, 22.0vw 517px #fff, 70.3vw 330px #fff, 69.6vw 82px #fff, 47.1vw 90px #fff,
        2.9vw 434px #fff, 97.0vw 338px #fff, 64.8vw 401px #fff, 22.6vw 210px #fff, 61.5vw 396px #fff,
        5.3vw 343px #fff, 53.8vw 470px #fff, 12.2vw 626px #fff, 53.2vw 529px #fff, 73.8vw 193px #fff,
        18.9vw 200px #fff, 75.1vw 169px #fff, 94.3vw 465px #fff, 62.6vw 276px #fff, 47.8vw 538px #fff,
        48.6vw 600px #fff, 97.8vw 390px #fff, 84.7vw 120px #fff, 14.7vw 256px #fff, 90.9vw 56px #fff,
        28.2vw 613px #fff, 19.1vw 82px #fff, 25.9vw 233px #fff, 51.9vw 382px #fff, 36.2vw 668px #fff,
        70.8vw 559px #fff, 75.1vw 378px #fff, 75.5vw 538px #fff, 92.3vw 556px #fff, 72.3vw 684px #fff,
        55.0vw 115px #fff, 25.2vw 673px #fff, 17.3vw 548px #fff, 33.8vw 292px #fff, 2.2vw 375px #fff,
        84.0vw 533px #fff, 2.1vw 445px #fff, 80.3vw 210px #fff, 13.0vw 113px #fff, 58.1vw 158px #fff,
        38.2vw 673px #fff, 60.0vw 368px #fff, 25.3vw 440px #fff, 76.8vw 302px #fff, 84.5vw 32px #fff,
        18.0vw 447px #fff, 14.4vw 624px #fff, 31.2vw 613px #fff, 2.1vw 144px #fff, 73.7vw 302px #fff,
        64.3vw 130px #fff, 62.1vw 631px #fff, 14.8vw 606px #fff, 99.1vw 518px #fff, 79.6vw 356px #fff,
        86.2vw 483px #fff, 27.4vw 509px #fff, 49.9vw 566px #fff, 63.0vw 601px #fff, 4.8vw 500px #fff,
        13.5vw 4px #fff, 55.4vw 291px #fff, 15.9vw 418px #fff, 90.1vw 424px #fff, 12.6vw 438px #fff,
        96.9vw 82px #fff, 1.3vw 190px #fff, 25.6vw 36px #fff, 35.7vw 176px #fff, 12.0vw 482px #fff,
        37.1vw 415px #fff, 3.2vw 511px #fff, 66.6vw 532px #fff, 87.1vw 661px #fff, 28.5vw 676px #fff;
    width: 1px;
    height: 1px;
    animation: twinkle1 4s ease-in-out infinite alternate-reverse;
}

/* Starfield layer - small stars pass 3 */
.hero .stars-sm3 {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: transparent;
    box-shadow:
        44.5vw 207px #fff, 90.7vw 339px #fff, 9.0vw 523px #fff, 7.8vw 144px #fff, 7.6vw 439px #fff,
        84.0vw 427px #fff, 22.4vw 589px #fff, 86.9vw 231px #fff, 27.5vw 470px #fff, 97.0vw 636px #fff,
        87.4vw 500px #fff, 22.9vw 428px #fff, 42.8vw 446px #fff, 48.7vw 146px #fff, 89.5vw 29px #fff,
        34.2vw 232px #fff, 96.4vw 85px #fff, 57.7vw 657px #fff, 61.1vw 646px #fff, 39.5vw 307px #fff,
        37.1vw 259px #fff, 34.9vw 55px #fff, 98.2vw 512px #fff, 67.7vw 372px #fff, 20.2vw 160px #fff,
        96.5vw 575px #fff, 45.6vw 519px #fff, 95.6vw 33px #fff, 36.7vw 282px #fff, 34.2vw 377px #fff,
        29.6vw 88px #fff, 86.7vw 298px #fff, 80.0vw 95px #fff, 30.9vw 345px #fff, 4.0vw 291px #fff,
        18.1vw 278px #fff, 29.4vw 543px #fff, 50.8vw 178px #fff, 58.9vw 334px #fff, 22.4vw 543px #fff,
        58.1vw 13px #fff, 54.1vw 279px #fff, 8.9vw 676px #fff, 62.0vw 692px #fff, 47.7vw 307px #fff,
        15.9vw 463px #fff, 48.3vw 128px #fff, 83.8vw 413px #fff, 8.8vw 683px #fff, 41.9vw 644px #fff,
        41.1vw 40px #fff, 54.9vw 286px #fff, 77.9vw 347px #fff, 37.1vw 289px #fff, 48.2vw 510px #fff,
        80.0vw 279px #fff, 14.3vw 13px #fff, 60.0vw 167px #fff, 84.9vw 297px #fff, 95.5vw 57px #fff,
        83.3vw 85px #fff, 24.6vw 288px #fff, 28.2vw 314px #fff, 50.5vw 431px #fff, 3.3vw 426px #fff,
        38.1vw 434px #fff, 30.2vw 570px #fff, 21.7vw 62px #fff, 72.2vw 444px #fff, 18.6vw 239px #fff,
        41.5vw 143px #fff, 55.7vw 298px #fff, 57.8vw 535px #fff, 18.7vw 189px #fff, 66.5vw 417px #fff,
        71.7vw 193px #fff, 21.8vw 36px #fff, 30.9vw 180px #fff, 74.0vw 239px #fff, 78.1vw 84px #fff,
        29.0vw 300px #fff, 23.4vw 335px #fff, 96.9vw 320px #fff, 20.3vw 415px #fff, 52.6vw 578px #fff,
        8.3vw 512px #fff, 59.8vw 208px #fff, 37.0vw 68px #fff, 92.3vw 209px #fff, 42.2vw 452px #fff,
        74.1vw 424px #fff, 40.9vw 449px #fff, 53.0vw 224px #fff, 82.9vw 106px #fff, 17.0vw 328px #fff,
        49.2vw 81px #fff, 74.2vw 662px #fff, 56.9vw 407px #fff, 28.7vw 85px #fff, 34.1vw 502px #fff,
        85.8vw 260px #fff, 34.2vw 237px #fff, 54.3vw 191px #fff, 51.1vw 576px #fff, 16.6vw 468px #fff,
        28.5vw 142px #fff, 42.3vw 439px #fff, 41.9vw 277px #fff, 62.6vw 349px #fff, 82.5vw 679px #fff,
        91.6vw 459px #fff, 15.8vw 301px #fff, 29.4vw 373px #fff, 10.7vw 653px #fff, 25.5vw 187px #fff,
        88.2vw 294px #fff, 3.9vw 81px #fff, 62.6vw 8px #fff, 71.4vw 81px #fff, 8.3vw 358px #fff,
        17.5vw 11px #fff, 55.3vw 116px #fff, 42.8vw 666px #fff, 84.7vw 615px #fff, 48.7vw 440px #fff,
        42.0vw 522px #fff, 96.9vw 50px #fff, 1.0vw 319px #fff, 58.9vw 434px #fff, 20.4vw 111px #fff,
        40.8vw 564px #fff, 40.7vw 536px #fff, 46.7vw 568px #fff, 11.8vw 449px #fff, 26.1vw 277px #fff,
        6.6vw 478px #fff, 47.4vw 449px #fff, 43.1vw 62px #fff, 68.5vw 13px #fff, 19.2vw 297px #fff,
        77.6vw 339px #fff, 63.7vw 632px #fff, 83.9vw 127px #fff, 37.3vw 86px #fff, 83.5vw 381px #fff,
        57.8vw 92px #fff, 40.8vw 211px #fff, 97.6vw 225px #fff, 94.0vw 165px #fff, 70.1vw 206px #fff,
        26.5vw 205px #fff, 94.7vw 429px #fff, 25.8vw 253px #fff, 61.1vw 326px #fff, 62.0vw 36px #fff,
        36.5vw 159px #fff, 69.4vw 603px #fff, 6.5vw 253px #fff, 99.2vw 622px #fff, 4.8vw 336px #fff,
        63.0vw 307px #fff, 67.7vw 398px #fff, 43.3vw 258px #fff, 11.5vw 636px #fff, 31.3vw 130px #fff,
        69.9vw 85px #fff, 63.6vw 520px #fff, 21.1vw 544px #fff, 89.1vw 319px #fff, 37.3vw 561px #fff;
    width: 1px;
    height: 1px;
    animation: twinkle1 3.5s ease-in-out infinite alternate;
}

/* Starfield layer - small stars pass 4 */
.hero .stars-sm4 {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: transparent;
    box-shadow:
        90.7vw 207px #fff, 46.0vw 98px #fff, 99.2vw 111px #fff, 67.3vw 418px #fff, 71.3vw 288px #fff,
        38.1vw 281px #fff, 7.5vw 225px #fff, 27.7vw 545px #fff, 44.6vw 70px #fff, 3.5vw 244px #fff,
        98.2vw 21px #fff, 45.1vw 536px #fff, 12.3vw 560px #fff, 88.2vw 576px #fff, 13.6vw 649px #fff,
        23.1vw 558px #fff, 79.5vw 366px #fff, 75.0vw 539px #fff, 79.9vw 218px #fff, 96.0vw 435px #fff,
        35.8vw 88px #fff, 83.8vw 686px #fff, 87.0vw 460px #fff, 72.7vw 277px #fff, 15.3vw 646px #fff,
        77.1vw 382px #fff, 87.1vw 109px #fff, 10.3vw 193px #fff, 89.6vw 251px #fff, 9.4vw 130px #fff,
        11.9vw 625px #fff, 97.1vw 43px #fff, 66.6vw 154px #fff, 85.1vw 183px #fff, 74.8vw 41px #fff,
        57.2vw 299px #fff, 13.0vw 642px #fff, 46.7vw 516px #fff, 19.0vw 223px #fff, 87.8vw 363px #fff,
        96.4vw 477px #fff, 98.0vw 244px #fff, 51.9vw 631px #fff, 5.1vw 379px #fff, 2.0vw 168px #fff,
        42.2vw 176px #fff, 7.6vw 57px #fff, 66.7vw 606px #fff, 60.2vw 238px #fff, 72.9vw 24px #fff,
        77.0vw 396px #fff, 50.6vw 416px #fff, 13.2vw 330px #fff, 53.7vw 314px #fff, 51.5vw 267px #fff,
        60.7vw 251px #fff, 94.0vw 182px #fff, 77.7vw 382px #fff, 87.3vw 540px #fff, 46.7vw 693px #fff,
        82.2vw 114px #fff, 31.0vw 172px #fff, 45.7vw 367px #fff, 50.3vw 624px #fff, 36.6vw 595px #fff,
        44.2vw 475px #fff, 13.9vw 522px #fff, 24.0vw 496px #fff, 33.6vw 554px #fff, 77.0vw 61px #fff,
        79.3vw 407px #fff, 15.1vw 501px #fff, 46.6vw 688px #fff, 62.7vw 132px #fff, 61.0vw 63px #fff,
        20.1vw 75px #fff, 6.9vw 344px #fff, 97.9vw 324px #fff, 27.5vw 20px #fff, 43.8vw 251px #fff,
        10.7vw 553px #fff, 70.8vw 26px #fff, 57.4vw 336px #fff, 86.5vw 115px #fff, 16.1vw 580px #fff,
        24.1vw 295px #fff, 13.5vw 162px #fff, 84.2vw 93px #fff, 77.8vw 144px #fff, 70.9vw 452px #fff,
        80.4vw 548px #fff, 57.6vw 665px #fff, 37.8vw 225px #fff, 64.5vw 135px #fff, 32.5vw 28px #fff,
        59.2vw 370px #fff, 41.2vw 245px #fff, 41.3vw 210px #fff, 39.0vw 361px #fff, 92.1vw 34px #fff,
        67.6vw 312px #fff, 96.8vw 494px #fff, 43.2vw 588px #fff, 17.3vw 244px #fff, 75.9vw 677px #fff,
        52.1vw 600px #fff, 90.9vw 552px #fff, 32.5vw 167px #fff, 77.4vw 540px #fff, 26.2vw 162px #fff,
        39.9vw 210px #fff, 16.7vw 592px #fff, 68.4vw 272px #fff, 91.1vw 451px #fff, 83.2vw 166px #fff,
        1.8vw 139px #fff, 10.8vw 558px #fff, 1.1vw 595px #fff, 98.1vw 340px #fff, 95.1vw 604px #fff,
        8.7vw 487px #fff, 71.3vw 136px #fff, 2.9vw 71px #fff, 24.9vw 677px #fff, 14.3vw 205px #fff,
        71.7vw 447px #fff, 6.9vw 169px #fff, 50.8vw 176px #fff, 23.2vw 361px #fff, 74.9vw 689px #fff,
        73.9vw 252px #fff, 99.7vw 612px #fff, 79.8vw 426px #fff, 42.5vw 566px #fff, 5.7vw 477px #fff,
        55.2vw 147px #fff, 91.6vw 596px #fff, 42.1vw 454px #fff, 16.3vw 276px #fff, 57.5vw 516px #fff,
        4.7vw 158px #fff, 93.0vw 130px #fff, 76.1vw 648px #fff, 44.7vw 32px #fff, 44.4vw 361px #fff,
        79.5vw 323px #fff, 50.9vw 425px #fff, 70.4vw 530px #fff, 81.4vw 523px #fff, 63.0vw 530px #fff,
        52.0vw 317px #fff, 81.1vw 160px #fff, 26.1vw 610px #fff, 68.7vw 277px #fff, 45.5vw 253px #fff,
        53.1vw 188px #fff, 98.2vw 589px #fff, 36.4vw 83px #fff, 17.4vw 179px #fff, 93.4vw 271px #fff,
        19.3vw 130px #fff, 54.2vw 583px #fff, 64.6vw 322px #fff, 56.9vw 340px #fff, 42.5vw 685px #fff,
        36.4vw 568px #fff, 79.2vw 351px #fff, 64.6vw 368px #fff, 19.2vw 475px #fff, 33.2vw 279px #fff;
    width: 1px;
    height: 1px;
    animation: twinkle2 3.2s ease-in-out infinite alternate-reverse;
}

/* Starfield layer - small stars pass 5 */
.hero .stars-sm5 {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: transparent;
    box-shadow:
        79.7vw 230px #fff, 24.2vw 573px #fff, 11.7vw 333px #fff, 55.8vw 427px #fff, 14.8vw 440px #fff,
        50.1vw 594px #fff, 3.1vw 667px #fff, 17.5vw 567px #fff, 50.7vw 582px #fff, 18.5vw 226px #fff,
        9.0vw 543px #fff, 53.4vw 146px #fff, 19.4vw 60px #fff, 20.2vw 392px #fff, 43.8vw 491px #fff,
        7.9vw 585px #fff, 97.9vw 516px #fff, 74.2vw 592px #fff, 9.7vw 323px #fff, 8.2vw 545px #fff,
        53.8vw 77px #fff, 44.5vw 542px #fff, 55.2vw 88px #fff, 93.4vw 43px #fff, 84.1vw 678px #fff,
        75.0vw 659px #fff, 53.1vw 155px #fff, 47.2vw 515px #fff, 76.7vw 270px #fff, 94.5vw 28px #fff,
        49.6vw 31px #fff, 35.9vw 689px #fff, 12.0vw 687px #fff, 90.3vw 480px #fff, 5.9vw 330px #fff,
        69.1vw 69px #fff, 29.9vw 67px #fff, 84.1vw 638px #fff, 92.1vw 524px #fff, 57.5vw 47px #fff,
        48.2vw 531px #fff, 75.4vw 22px #fff, 1.1vw 64px #fff, 92.2vw 82px #fff, 39.1vw 333px #fff,
        88.1vw 97px #fff, 26.3vw 538px #fff, 8.8vw 118px #fff, 2.8vw 668px #fff, 23.5vw 351px #fff,
        38.0vw 684px #fff, 71.1vw 420px #fff, 49.0vw 189px #fff, 83.7vw 75px #fff, 62.1vw 208px #fff,
        27.8vw 318px #fff, 19.1vw 414px #fff, 7.3vw 17px #fff, 14.3vw 66px #fff, 87.6vw 357px #fff,
        67.8vw 543px #fff, 16.7vw 663px #fff, 38.5vw 323px #fff, 48.8vw 485px #fff, 76.7vw 138px #fff,
        82.6vw 300px #fff, 25.3vw 603px #fff, 87.0vw 598px #fff, 32.5vw 637px #fff, 77.4vw 676px #fff,
        75.3vw 697px #fff, 47.8vw 523px #fff, 78.0vw 367px #fff, 50.4vw 281px #fff, 86.6vw 266px #fff,
        74.5vw 393px #fff, 70.6vw 218px #fff, 8.1vw 471px #fff, 14.7vw 253px #fff, 78.0vw 38px #fff,
        90.9vw 412px #fff, 56.1vw 473px #fff, 6.0vw 19px #fff, 71.9vw 410px #fff, 63.9vw 574px #fff,
        27.2vw 115px #fff, 96.6vw 46px #fff, 51.6vw 436px #fff, 95.2vw 64px #fff, 70.1vw 58px #fff,
        45.4vw 433px #fff, 84.7vw 36px #fff, 74.7vw 106px #fff, 40.5vw 683px #fff, 84.8vw 57px #fff,
        0.8vw 25px #fff, 77.9vw 30px #fff, 78.3vw 563px #fff, 81.6vw 652px #fff, 63.2vw 575px #fff,
        54.3vw 467px #fff, 7.2vw 385px #fff, 98.7vw 272px #fff, 71.3vw 127px #fff, 48.2vw 379px #fff,
        76.8vw 227px #fff, 46.9vw 135px #fff, 57.7vw 655px #fff, 38.7vw 461px #fff, 55.6vw 139px #fff,
        69.5vw 151px #fff, 61.3vw 692px #fff, 30.8vw 467px #fff, 34.1vw 450px #fff, 19.3vw 351px #fff,
        78.3vw 151px #fff, 35.6vw 160px #fff, 16.0vw 468px #fff, 82.9vw 369px #fff, 44.7vw 213px #fff,
        24.1vw 657px #fff, 48.0vw 476px #fff, 28.0vw 123px #fff, 1.2vw 209px #fff, 42.0vw 365px #fff,
        61.6vw 482px #fff, 87.4vw 559px #fff, 68.6vw 561px #fff, 54.2vw 331px #fff, 91.3vw 623px #fff,
        38.7vw 605px #fff, 43.0vw 524px #fff, 2.7vw 416px #fff, 94.4vw 307px #fff, 86.8vw 475px #fff,
        2.3vw 57px #fff, 33.2vw 677px #fff, 65.6vw 418px #fff, 85.8vw 246px #fff, 14.8vw 312px #fff,
        90.6vw 118px #fff, 49.3vw 207px #fff, 35.8vw 68px #fff, 90.5vw 181px #fff, 78.7vw 123px #fff,
        42.7vw 20px #fff, 58.8vw 357px #fff, 43.2vw 142px #fff, 63.7vw 28px #fff, 93.1vw 338px #fff,
        61.0vw 298px #fff, 2.5vw 25px #fff, 72.4vw 341px #fff, 27.9vw 376px #fff, 86.9vw 357px #fff,
        51.8vw 408px #fff, 87.1vw 25px #fff, 66.2vw 403px #fff, 71.5vw 118px #fff, 82.7vw 554px #fff,
        27.9vw 661px #fff, 5.5vw 382px #fff, 8.9vw 134px #fff, 63.8vw 492px #fff, 47.9vw 174px #fff,
        54.5vw 314px #fff, 38.4vw 288px #fff, 46.2vw 260px #fff, 12.5vw 348px #fff, 28.5vw 553px #fff;
    width: 1px;
    height: 1px;
    animation: twinkle1 2.8s ease-in-out infinite alternate;
}

/* Starfield layer - small stars pass 6 */
.hero .stars-sm6 {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: transparent;
    box-shadow:
        73.0vw 637px #fff, 4.0vw 6px #fff, 99.0vw 224px #fff, 19.8vw 349px #fff, 55.1vw 516px #fff,
        60.8vw 381px #fff, 75.5vw 185px #fff, 46.8vw 621px #fff, 72.4vw 421px #fff, 12.8vw 654px #fff,
        4.7vw 566px #fff, 15.1vw 350px #fff, 68.6vw 375px #fff, 1.5vw 144px #fff, 42.3vw 207px #fff,
        11.5vw 88px #fff, 73.0vw 381px #fff, 46.5vw 24px #fff, 76.1vw 690px #fff, 72.7vw 337px #fff,
        71.0vw 440px #fff, 13.8vw 384px #fff, 61.5vw 135px #fff, 26.6vw 224px #fff, 36.9vw 217px #fff,
        95.5vw 616px #fff, 48.9vw 123px #fff, 91.9vw 592px #fff, 2.0vw 568px #fff, 1.6vw 594px #fff,
        59.4vw 646px #fff, 63.5vw 104px #fff, 52.7vw 620px #fff, 39.1vw 433px #fff, 35.5vw 465px #fff,
        35.1vw 191px #fff, 0.8vw 642px #fff, 60.7vw 621px #fff, 69.2vw 217px #fff, 7.3vw 678px #fff,
        91.2vw 630px #fff, 37.7vw 412px #fff, 74.9vw 231px #fff, 26.5vw 183px #fff, 49.9vw 283px #fff,
        86.4vw 572px #fff, 13.7vw 204px #fff, 45.5vw 665px #fff, 83.4vw 308px #fff, 82.3vw 90px #fff,
        7.9vw 633px #fff, 18.0vw 576px #fff, 91.0vw 300px #fff, 34.4vw 32px #fff, 3.4vw 658px #fff,
        86.9vw 79px #fff, 36.5vw 467px #fff, 35.9vw 17px #fff, 93.4vw 384px #fff, 28.1vw 628px #fff,
        34.3vw 692px #fff, 67.5vw 647px #fff, 36.9vw 425px #fff, 77.4vw 389px #fff, 59.5vw 431px #fff,
        96.1vw 639px #fff, 45.5vw 233px #fff, 79.0vw 370px #fff, 30.9vw 239px #fff, 24.6vw 186px #fff,
        48.1vw 269px #fff, 12.1vw 622px #fff, 31.4vw 650px #fff, 69.5vw 671px #fff, 69.6vw 659px #fff,
        47.6vw 500px #fff, 61.9vw 34px #fff, 93.9vw 529px #fff, 8.9vw 489px #fff, 64.4vw 673px #fff,
        50.7vw 64px #fff, 48.5vw 361px #fff, 54.9vw 320px #fff, 3.7vw 299px #fff, 24.1vw 658px #fff,
        32.6vw 675px #fff, 35.3vw 259px #fff, 0.9vw 569px #fff, 8.8vw 512px #fff, 68.3vw 393px #fff,
        31.6vw 632px #fff, 75.5vw 274px #fff, 82.7vw 11px #fff, 77.1vw 80px #fff, 59.8vw 506px #fff,
        93.1vw 71px #fff, 73.0vw 518px #fff, 56.9vw 102px #fff, 92.8vw 28px #fff, 63.4vw 119px #fff,
        93.3vw 111px #fff, 56.4vw 205px #fff, 45.2vw 377px #fff, 20.5vw 200px #fff, 28.1vw 280px #fff,
        49.8vw 39px #fff, 41.0vw 423px #fff, 46.6vw 179px #fff, 88.9vw 179px #fff, 76.7vw 69px #fff,
        62.1vw 540px #fff, 74.3vw 423px #fff, 41.5vw 636px #fff, 97.5vw 438px #fff, 58.8vw 583px #fff,
        53.1vw 660px #fff, 62.1vw 339px #fff, 21.4vw 323px #fff, 60.4vw 232px #fff, 45.2vw 212px #fff,
        59.9vw 342px #fff, 88.9vw 571px #fff, 72.6vw 601px #fff, 13.3vw 564px #fff, 89.2vw 397px #fff,
        8.3vw 165px #fff, 18.8vw 611px #fff, 31.7vw 354px #fff, 1.7vw 395px #fff, 55.2vw 106px #fff,
        20.9vw 125px #fff, 9.2vw 490px #fff, 52.8vw 552px #fff, 54.6vw 633px #fff, 40.6vw 361px #fff,
        56.8vw 380px #fff, 46.5vw 148px #fff, 68.8vw 369px #fff, 0.4vw 524px #fff, 7.2vw 222px #fff,
        21.2vw 267px #fff, 28.3vw 80px #fff, 20.1vw 461px #fff, 10.8vw 307px #fff, 87.3vw 413px #fff,
        88.9vw 202px #fff, 55.5vw 557px #fff, 41.6vw 187px #fff, 21.6vw 122px #fff, 90.1vw 533px #fff,
        98.8vw 508px #fff, 95.7vw 309px #fff, 83.5vw 645px #fff, 38.7vw 595px #fff, 53.3vw 370px #fff,
        26.4vw 692px #fff, 38.7vw 691px #fff, 24.3vw 493px #fff, 75.3vw 294px #fff, 66.5vw 417px #fff,
        98.3vw 63px #fff, 90.3vw 5px #fff, 85.9vw 226px #fff, 77.1vw 256px #fff, 41.1vw 182px #fff,
        81.2vw 146px #fff, 98.6vw 351px #fff, 44.8vw 691px #fff, 74.9vw 288px #fff, 83.9vw 656px #fff;
    width: 1px;
    height: 1px;
    animation: twinkle2 3.7s ease-in-out infinite alternate-reverse;
}

/* Starfield layer - medium stars pass 1 */
.hero .stars-md {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: transparent;
    box-shadow:
        15.6vw 156px 1px rgba(200,220,255,0.9), 2.5vw 292px 1px rgba(255,250,240,0.85),
        51.1vw 218px 1px rgba(200,220,255,0.9), 34.9vw 365px 1px rgba(255,250,240,0.85),
        22.1vw 237px 1px rgba(200,220,255,0.9), 55.0vw 326px 1px rgba(255,250,240,0.85),
        79.2vw 562px 1px rgba(200,220,255,0.9), 67.8vw 405px 1px rgba(255,250,240,0.85),
        29.8vw 532px 1px rgba(200,220,255,0.9), 73.2vw 221px 1px rgba(255,250,240,0.85),
        21.1vw 315px 1px rgba(200,220,255,0.9), 34.1vw 246px 1px rgba(255,250,240,0.85),
        36.1vw 263px 1px rgba(200,220,255,0.9), 3.3vw 361px 1px rgba(255,250,240,0.85),
        93.0vw 69px 1px rgba(200,220,255,0.9), 70.1vw 474px 1px rgba(255,250,240,0.85),
        95.5vw 181px 1px rgba(200,220,255,0.9), 61.0vw 56px 1px rgba(255,250,240,0.85),
        14.7vw 433px 1px rgba(200,220,255,0.9), 19.0vw 90px 1px rgba(255,250,240,0.85),
        80.5vw 420px 1px rgba(200,220,255,0.9), 65.5vw 350px 1px rgba(255,250,240,0.85),
        87.2vw 429px 1px rgba(200,220,255,0.9), 41.4vw 696px 1px rgba(255,250,240,0.85),
        54.5vw 174px 1px rgba(200,220,255,0.9), 31.4vw 610px 1px rgba(255,250,240,0.85),
        75.0vw 348px 1px rgba(200,220,255,0.9), 62.8vw 224px 1px rgba(255,250,240,0.85),
        22.2vw 52px 1px rgba(200,220,255,0.9), 68.1vw 342px 1px rgba(255,250,240,0.85),
        85.0vw 470px 1px rgba(200,220,255,0.9), 41.0vw 489px 1px rgba(255,250,240,0.85),
        29.8vw 291px 1px rgba(200,220,255,0.9), 73.7vw 377px 1px rgba(255,250,240,0.85),
        5.0vw 72px 1px rgba(200,220,255,0.9), 79.5vw 439px 1px rgba(255,250,240,0.85),
        5.1vw 626px 1px rgba(200,220,255,0.9), 33.9vw 305px 1px rgba(255,250,240,0.85),
        7.9vw 511px 1px rgba(200,220,255,0.9), 32.3vw 89px 1px rgba(255,250,240,0.85),
        99.5vw 186px 1px rgba(200,220,255,0.9), 23.8vw 279px 1px rgba(255,250,240,0.85),
        52.6vw 7px 1px rgba(200,220,255,0.9), 37.4vw 493px 1px rgba(255,250,240,0.85),
        76.7vw 201px 1px rgba(200,220,255,0.9), 37.4vw 366px 1px rgba(255,250,240,0.85),
        84.5vw 494px 1px rgba(200,220,255,0.9), 6.4vw 514px 1px rgba(255,250,240,0.85),
        21.9vw 80px 1px rgba(200,220,255,0.9), 29.9vw 186px 1px rgba(255,250,240,0.85),
        33.2vw 4px 1px rgba(200,220,255,0.9), 85.9vw 562px 1px rgba(255,250,240,0.85),
        10.1vw 223px 1px rgba(200,220,255,0.9), 55.9vw 186px 1px rgba(255,250,240,0.85),
        98.1vw 410px 1px rgba(200,220,255,0.9), 25.1vw 90px 1px rgba(255,250,240,0.85),
        57.9vw 396px 1px rgba(200,220,255,0.9), 77.9vw 314px 1px rgba(255,250,240,0.85),
        58.5vw 682px 1px rgba(200,220,255,0.9), 12.8vw 151px 1px rgba(255,250,240,0.85),
        60.9vw 92px 1px rgba(200,220,255,0.9), 71.9vw 69px 1px rgba(255,250,240,0.85),
        31.7vw 543px 1px rgba(200,220,255,0.9), 63.1vw 685px 1px rgba(255,250,240,0.85),
        57.1vw 173px 1px rgba(200,220,255,0.9), 13.7vw 186px 1px rgba(255,250,240,0.85),
        48.5vw 513px 1px rgba(200,220,255,0.9), 32.0vw 48px 1px rgba(255,250,240,0.85),
        3.4vw 442px 1px rgba(200,220,255,0.9), 91.5vw 570px 1px rgba(255,250,240,0.85),
        92.0vw 218px 1px rgba(200,220,255,0.9), 56.4vw 158px 1px rgba(255,250,240,0.85),
        87.5vw 149px 1px rgba(200,220,255,0.9), 18.9vw 642px 1px rgba(255,250,240,0.85),
        94.7vw 260px 1px rgba(200,220,255,0.9);
    width: 2px;
    height: 2px;
    border-radius: 50%;
    animation: twinkle2 5s ease-in-out infinite alternate;
}

/* Starfield layer - medium stars pass 2 */
.hero .stars-md2 {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: transparent;
    box-shadow:
        48.4vw 597px 1px rgba(200,220,255,0.9), 55.0vw 415px 1px rgba(255,250,240,0.85),
        5.5vw 258px 1px rgba(200,220,255,0.9), 93.9vw 270px 1px rgba(255,250,240,0.85),
        95.9vw 573px 1px rgba(200,220,255,0.9), 93.5vw 389px 1px rgba(255,250,240,0.85),
        34.8vw 65px 1px rgba(200,220,255,0.9), 35.5vw 368px 1px rgba(255,250,240,0.85),
        17.6vw 380px 1px rgba(200,220,255,0.9), 33.0vw 389px 1px rgba(255,250,240,0.85),
        42.7vw 102px 1px rgba(200,220,255,0.9), 40.5vw 523px 1px rgba(255,250,240,0.85),
        3.4vw 285px 1px rgba(200,220,255,0.9), 56.2vw 13px 1px rgba(255,250,240,0.85),
        38.4vw 265px 1px rgba(200,220,255,0.9), 75.6vw 376px 1px rgba(255,250,240,0.85),
        95.2vw 561px 1px rgba(200,220,255,0.9), 84.8vw 531px 1px rgba(255,250,240,0.85),
        51.6vw 87px 1px rgba(200,220,255,0.9), 45.7vw 144px 1px rgba(255,250,240,0.85),
        9.4vw 542px 1px rgba(200,220,255,0.9), 79.9vw 641px 1px rgba(255,250,240,0.85),
        29.4vw 115px 1px rgba(200,220,255,0.9), 17.8vw 590px 1px rgba(255,250,240,0.85),
        48.2vw 285px 1px rgba(200,220,255,0.9), 3.3vw 235px 1px rgba(255,250,240,0.85),
        16.0vw 351px 1px rgba(200,220,255,0.9), 57.3vw 138px 1px rgba(255,250,240,0.85),
        85.9vw 481px 1px rgba(200,220,255,0.9), 8.5vw 470px 1px rgba(255,250,240,0.85),
        42.6vw 375px 1px rgba(200,220,255,0.9), 90.8vw 694px 1px rgba(255,250,240,0.85),
        86.0vw 653px 1px rgba(200,220,255,0.9), 95.4vw 272px 1px rgba(255,250,240,0.85),
        51.7vw 458px 1px rgba(200,220,255,0.9), 20.8vw 42px 1px rgba(255,250,240,0.85),
        35.5vw 62px 1px rgba(200,220,255,0.9), 91.3vw 454px 1px rgba(255,250,240,0.85),
        16.7vw 132px 1px rgba(200,220,255,0.9), 47.9vw 377px 1px rgba(255,250,240,0.85),
        71.8vw 240px 1px rgba(200,220,255,0.9), 14.3vw 74px 1px rgba(255,250,240,0.85),
        11.6vw 60px 1px rgba(200,220,255,0.9), 97.8vw 160px 1px rgba(255,250,240,0.85),
        30.9vw 187px 1px rgba(200,220,255,0.9), 24.6vw 353px 1px rgba(255,250,240,0.85),
        69.5vw 361px 1px rgba(200,220,255,0.9), 60.2vw 690px 1px rgba(255,250,240,0.85),
        64.7vw 452px 1px rgba(200,220,255,0.9), 41.6vw 601px 1px rgba(255,250,240,0.85),
        77.5vw 36px 1px rgba(200,220,255,0.9), 83.4vw 74px 1px rgba(255,250,240,0.85),
        88.8vw 292px 1px rgba(200,220,255,0.9), 73.1vw 592px 1px rgba(255,250,240,0.85),
        91.8vw 169px 1px rgba(200,220,255,0.9), 73.3vw 20px 1px rgba(255,250,240,0.85),
        49.9vw 499px 1px rgba(200,220,255,0.9), 11.4vw 64px 1px rgba(255,250,240,0.85),
        45.5vw 224px 1px rgba(200,220,255,0.9), 5.0vw 652px 1px rgba(255,250,240,0.85),
        24.3vw 308px 1px rgba(200,220,255,0.9), 25.3vw 674px 1px rgba(255,250,240,0.85),
        37.2vw 483px 1px rgba(200,220,255,0.9), 54.3vw 84px 1px rgba(255,250,240,0.85),
        0.6vw 453px 1px rgba(200,220,255,0.9), 33.4vw 123px 1px rgba(255,250,240,0.85),
        46.5vw 312px 1px rgba(200,220,255,0.9), 24.4vw 227px 1px rgba(255,250,240,0.85),
        43.3vw 106px 1px rgba(200,220,255,0.9), 79.2vw 171px 1px rgba(255,250,240,0.85),
        9.8vw 248px 1px rgba(200,220,255,0.9), 40.3vw 81px 1px rgba(255,250,240,0.85),
        12.8vw 396px 1px rgba(200,220,255,0.9), 95.3vw 248px 1px rgba(255,250,240,0.85),
        97.2vw 564px 1px rgba(200,220,255,0.9);
    width: 2px;
    height: 2px;
    border-radius: 50%;
    animation: twinkle2 4.5s ease-in-out infinite alternate-reverse;
}

/* Starfield layer - medium stars pass 3 */
.hero .stars-md3 {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: transparent;
    box-shadow:
        12.3vw 577px 1px rgba(200,220,255,0.9), 15.3vw 75px 1px rgba(255,250,240,0.85),
        6.6vw 258px 1px rgba(200,220,255,0.9), 1.8vw 523px 1px rgba(255,250,240,0.85),
        26.1vw 585px 1px rgba(200,220,255,0.9), 14.8vw 393px 1px rgba(255,250,240,0.85),
        2.9vw 608px 1px rgba(200,220,255,0.9), 11.9vw 170px 1px rgba(255,250,240,0.85),
        83.2vw 333px 1px rgba(200,220,255,0.9), 60.7vw 684px 1px rgba(255,250,240,0.85),
        96.2vw 529px 1px rgba(200,220,255,0.9), 75.7vw 524px 1px rgba(255,250,240,0.85),
        48.5vw 688px 1px rgba(200,220,255,0.9), 9.5vw 663px 1px rgba(255,250,240,0.85),
        56.2vw 305px 1px rgba(200,220,255,0.9), 21.7vw 168px 1px rgba(255,250,240,0.85),
        32.3vw 55px 1px rgba(200,220,255,0.9), 59.2vw 414px 1px rgba(255,250,240,0.85),
        20.9vw 549px 1px rgba(200,220,255,0.9), 80.9vw 669px 1px rgba(255,250,240,0.85),
        75.5vw 309px 1px rgba(200,220,255,0.9), 27.9vw 404px 1px rgba(255,250,240,0.85),
        93.8vw 179px 1px rgba(200,220,255,0.9), 83.6vw 588px 1px rgba(255,250,240,0.85),
        47.6vw 239px 1px rgba(200,220,255,0.9), 27.7vw 363px 1px rgba(255,250,240,0.85),
        75.7vw 335px 1px rgba(200,220,255,0.9), 7.5vw 82px 1px rgba(255,250,240,0.85),
        49.2vw 184px 1px rgba(200,220,255,0.9), 50.1vw 605px 1px rgba(255,250,240,0.85),
        23.2vw 222px 1px rgba(200,220,255,0.9), 5.9vw 604px 1px rgba(255,250,240,0.85),
        22.9vw 575px 1px rgba(200,220,255,0.9), 86.8vw 21px 1px rgba(255,250,240,0.85),
        37.5vw 311px 1px rgba(200,220,255,0.9), 61.5vw 584px 1px rgba(255,250,240,0.85),
        31.6vw 666px 1px rgba(200,220,255,0.9), 97.0vw 36px 1px rgba(255,250,240,0.85),
        95.4vw 405px 1px rgba(200,220,255,0.9), 70.5vw 139px 1px rgba(255,250,240,0.85),
        81.0vw 146px 1px rgba(200,220,255,0.9), 30.6vw 22px 1px rgba(255,250,240,0.85),
        53.3vw 253px 1px rgba(200,220,255,0.9), 93.1vw 169px 1px rgba(255,250,240,0.85),
        51.8vw 564px 1px rgba(200,220,255,0.9), 64.3vw 208px 1px rgba(255,250,240,0.85),
        45.4vw 605px 1px rgba(200,220,255,0.9), 58.1vw 482px 1px rgba(255,250,240,0.85),
        40.0vw 536px 1px rgba(200,220,255,0.9), 12.5vw 104px 1px rgba(255,250,240,0.85),
        75.2vw 440px 1px rgba(200,220,255,0.9), 51.9vw 391px 1px rgba(255,250,240,0.85),
        59.7vw 251px 1px rgba(200,220,255,0.9), 89.1vw 312px 1px rgba(255,250,240,0.85),
        75.8vw 319px 1px rgba(200,220,255,0.9), 34.7vw 372px 1px rgba(255,250,240,0.85),
        91.8vw 331px 1px rgba(200,220,255,0.9), 25.7vw 6px 1px rgba(255,250,240,0.85),
        50.2vw 352px 1px rgba(200,220,255,0.9), 65.2vw 72px 1px rgba(255,250,240,0.85),
        7.8vw 223px 1px rgba(200,220,255,0.9), 87.2vw 200px 1px rgba(255,250,240,0.85),
        98.5vw 611px 1px rgba(200,220,255,0.9), 1.0vw 221px 1px rgba(255,250,240,0.85),
        44.2vw 391px 1px rgba(200,220,255,0.9), 30.1vw 365px 1px rgba(255,250,240,0.85),
        57.3vw 518px 1px rgba(200,220,255,0.9), 77.2vw 582px 1px rgba(255,250,240,0.85),
        32.9vw 353px 1px rgba(200,220,255,0.9), 43.0vw 555px 1px rgba(255,250,240,0.85),
        3.0vw 558px 1px rgba(200,220,255,0.9), 20.5vw 624px 1px rgba(255,250,240,0.85),
        92.3vw 281px 1px rgba(200,220,255,0.9), 11.4vw 185px 1px rgba(255,250,240,0.85),
        12.6vw 587px 1px rgba(200,220,255,0.9);
    width: 2px;
    height: 2px;
    border-radius: 50%;
    animation: twinkle1 5.5s ease-in-out infinite alternate;
}

/* Starfield layer - bright stars pass 1 */
.hero .stars-lg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: transparent;
    box-shadow:
        80.6vw 666px 2px rgba(200,220,255,1), 97.6vw 284px 2px rgba(255,240,220,0.95),
        20.4vw 304px 2px rgba(200,220,255,1), 17.9vw 583px 2px rgba(255,240,220,0.95),
        30.9vw 94px 2px rgba(200,220,255,1), 15.7vw 616px 2px rgba(255,240,220,0.95),
        40.8vw 571px 2px rgba(200,220,255,1), 91.1vw 630px 2px rgba(255,240,220,0.95),
        31.8vw 650px 2px rgba(200,220,255,1), 64.6vw 605px 2px rgba(255,240,220,0.95),
        63.2vw 456px 2px rgba(200,220,255,1), 69.4vw 175px 2px rgba(255,240,220,0.95),
        2.8vw 459px 2px rgba(200,220,255,1), 85.8vw 690px 2px rgba(255,240,220,0.95),
        42.4vw 302px 2px rgba(200,220,255,1), 64.1vw 399px 2px rgba(255,240,220,0.95),
        76.5vw 398px 2px rgba(200,220,255,1), 7.6vw 519px 2px rgba(255,240,220,0.95),
        84.7vw 625px 2px rgba(200,220,255,1), 83.9vw 167px 2px rgba(255,240,220,0.95),
        41.8vw 80px 2px rgba(200,220,255,1), 17.9vw 599px 2px rgba(255,240,220,0.95),
        50.4vw 587px 2px rgba(200,220,255,1), 75.4vw 634px 2px rgba(255,240,220,0.95),
        89.5vw 124px 2px rgba(200,220,255,1), 14.8vw 680px 2px rgba(255,240,220,0.95),
        62.5vw 440px 2px rgba(200,220,255,1), 35.6vw 472px 2px rgba(255,240,220,0.95),
        50.0vw 48px 2px rgba(200,220,255,1), 78.1vw 53px 2px rgba(255,240,220,0.95);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    animation: twinkle3 4s ease-in-out infinite alternate;
}

/* Starfield layer - bright stars pass 2 */
.hero .stars-lg2 {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: transparent;
    box-shadow:
        42.4vw 385px 2px rgba(200,220,255,1), 46.0vw 113px 2px rgba(255,240,220,0.95),
        35.8vw 300px 2px rgba(200,220,255,1), 14.5vw 130px 2px rgba(255,240,220,0.95),
        51.1vw 200px 2px rgba(200,220,255,1), 96.6vw 127px 2px rgba(255,240,220,0.95),
        30.8vw 436px 2px rgba(200,220,255,1), 73.5vw 178px 2px rgba(255,240,220,0.95),
        13.0vw 431px 2px rgba(200,220,255,1), 2.8vw 477px 2px rgba(255,240,220,0.95),
        1.5vw 257px 2px rgba(200,220,255,1), 35.6vw 86px 2px rgba(255,240,220,0.95),
        27.1vw 507px 2px rgba(200,220,255,1), 76.5vw 316px 2px rgba(255,240,220,0.95),
        20.9vw 452px 2px rgba(200,220,255,1), 40.7vw 363px 2px rgba(255,240,220,0.95),
        93.6vw 155px 2px rgba(200,220,255,1), 41.0vw 233px 2px rgba(255,240,220,0.95),
        50.2vw 578px 2px rgba(200,220,255,1), 12.5vw 359px 2px rgba(255,240,220,0.95),
        78.3vw 602px 2px rgba(200,220,255,1), 70.3vw 370px 2px rgba(255,240,220,0.95),
        55.3vw 9px 2px rgba(200,220,255,1), 19.6vw 44px 2px rgba(255,240,220,0.95),
        45.2vw 642px 2px rgba(200,220,255,1), 65.6vw 617px 2px rgba(255,240,220,0.95),
        42.2vw 394px 2px rgba(200,220,255,1), 35.5vw 545px 2px rgba(255,240,220,0.95),
        60.1vw 340px 2px rgba(200,220,255,1), 9.3vw 238px 2px rgba(255,240,220,0.95);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    animation: twinkle3 3.5s ease-in-out infinite alternate-reverse;
}

/* Shooting stars — rare, faint, star-colored. The element is rotated and
   then translated along its own X axis, so the trail (drawn on the +X side)
   always points directly away from the direction of travel. */
.hero .shooting-star {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    opacity: 0;
    background: #ffffff;
    box-shadow: 0 0 4px 1px rgba(220, 235, 255, 0.7);
}

.hero .shooting-star::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    width: 90px;
    height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(to right, rgba(220, 235, 255, 0.55), transparent);
}

.hero .shooting-star-1 {
    top: 8%;
    right: -100px;
    animation: shoot 70s linear infinite;
    animation-delay: 4s;
}

.hero .shooting-star-2 {
    top: 30%;
    right: -100px;
    animation: shoot 85s linear infinite;
    animation-delay: 27s;
}

.hero .shooting-star-3 {
    top: 55%;
    right: -100px;
    animation: shoot 75s linear infinite;
    animation-delay: 48s;
}

.hero .shooting-star-4 {
    top: 18%;
    right: -100px;
    animation: shoot 95s linear infinite;
    animation-delay: 64s;
}

@keyframes shoot {
    0%    { transform: rotate(-14deg) translateX(0); opacity: 0; }
    0.3%  { opacity: 0.55; }
    3.5%  { transform: rotate(-14deg) translateX(-130vw); opacity: 0; }
    100%  { transform: rotate(-14deg) translateX(-130vw); opacity: 0; }
}

@keyframes twinkle1 {
    0%   { opacity: 0.4; }
    50%  { opacity: 1; }
    100% { opacity: 0.5; }
}

@keyframes twinkle2 {
    0%   { opacity: 0.3; }
    50%  { opacity: 0.95; }
    100% { opacity: 0.5; }
}

@keyframes twinkle3 {
    0%   { opacity: 0.6; }
    50%  { opacity: 1; }
    100% { opacity: 0.7; }
}

/* ===== Floating Orbs ===== */
.hero .orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
}

.hero .orb-1 {
    width: 4px; height: 4px;
    background: #4dc9f6;
    box-shadow: 0 0 8px 3px rgba(77, 201, 246, 0.6), 0 0 20px 6px rgba(77, 201, 246, 0.25);
    top: 15%; left: 10%;
    animation: orbFloat1 18s ease-in-out infinite;
}
.hero .orb-2 {
    width: 6px; height: 6px;
    background: #00ff66;
    box-shadow: 0 0 10px 4px rgba(0, 255, 102, 0.6), 0 0 24px 8px rgba(0, 255, 102, 0.2);
    top: 60%; left: 75%;
    animation: orbFloat2 22s ease-in-out infinite;
    animation-delay: -5s;
}
.hero .orb-3 {
    width: 3px; height: 3px;
    background: #b266ff;
    box-shadow: 0 0 6px 2px rgba(178, 102, 255, 0.7), 0 0 16px 5px rgba(178, 102, 255, 0.25);
    top: 35%; left: 85%;
    animation: orbFloat3 25s ease-in-out infinite;
    animation-delay: -10s;
}
.hero .orb-4 {
    width: 5px; height: 5px;
    background: #ff4444;
    box-shadow: 0 0 8px 3px rgba(255, 68, 68, 0.6), 0 0 20px 6px rgba(255, 68, 68, 0.2);
    top: 75%; left: 20%;
    animation: orbFloat4 20s ease-in-out infinite;
    animation-delay: -3s;
}
.hero .orb-5 {
    width: 3px; height: 3px;
    background: #4dc9f6;
    box-shadow: 0 0 6px 2px rgba(77, 201, 246, 0.7), 0 0 14px 4px rgba(77, 201, 246, 0.25);
    top: 45%; left: 50%;
    animation: orbFloat5 16s ease-in-out infinite;
    animation-delay: -8s;
}
.hero .orb-6 {
    width: 7px; height: 7px;
    background: #00ff66;
    box-shadow: 0 0 12px 5px rgba(0, 255, 102, 0.5), 0 0 28px 10px rgba(0, 255, 102, 0.15);
    top: 20%; left: 60%;
    animation: orbFloat6 28s ease-in-out infinite;
    animation-delay: -14s;
}
.hero .orb-7 {
    width: 2px; height: 2px;
    background: #b266ff;
    box-shadow: 0 0 5px 2px rgba(178, 102, 255, 0.8), 0 0 12px 4px rgba(178, 102, 255, 0.3);
    top: 80%; left: 45%;
    animation: orbFloat1 21s ease-in-out infinite;
    animation-delay: -7s;
}
.hero .orb-8 {
    width: 4px; height: 4px;
    background: #ff4444;
    box-shadow: 0 0 8px 3px rgba(255, 68, 68, 0.6), 0 0 18px 6px rgba(255, 68, 68, 0.2);
    top: 10%; left: 35%;
    animation: orbFloat3 19s ease-in-out infinite;
    animation-delay: -12s;
}

@keyframes orbFloat1 {
    0%   { transform: translate(0, 0); opacity: 0; }
    5%   { opacity: 0.8; }
    25%  { transform: translate(8vw, -42px); opacity: 0.9; }
    50%  { transform: translate(-3vw, 28px); opacity: 0.6; }
    75%  { transform: translate(5vw, 56px); opacity: 0.85; }
    95%  { opacity: 0.7; }
    100% { transform: translate(0, 0); opacity: 0; }
}

@keyframes orbFloat2 {
    0%   { transform: translate(0, 0); opacity: 0; }
    5%   { opacity: 0.7; }
    20%  { transform: translate(-10vw, 21px); opacity: 0.8; }
    40%  { transform: translate(-5vw, -56px); opacity: 0.6; }
    60%  { transform: translate(6vw, -28px); opacity: 0.85; }
    80%  { transform: translate(3vw, 42px); opacity: 0.7; }
    95%  { opacity: 0.6; }
    100% { transform: translate(0, 0); opacity: 0; }
}

@keyframes orbFloat3 {
    0%   { transform: translate(0, 0); opacity: 0; }
    5%   { opacity: 0.75; }
    30%  { transform: translate(-7vw, 35px); opacity: 0.85; }
    50%  { transform: translate(4vw, 70px); opacity: 0.5; }
    70%  { transform: translate(-2vw, -42px); opacity: 0.9; }
    95%  { opacity: 0.65; }
    100% { transform: translate(0, 0); opacity: 0; }
}

@keyframes orbFloat4 {
    0%   { transform: translate(0, 0); opacity: 0; }
    5%   { opacity: 0.8; }
    25%  { transform: translate(12vw, -21px); opacity: 0.7; }
    50%  { transform: translate(6vw, 49px); opacity: 0.9; }
    75%  { transform: translate(-4vw, 14px); opacity: 0.6; }
    95%  { opacity: 0.7; }
    100% { transform: translate(0, 0); opacity: 0; }
}

@keyframes orbFloat5 {
    0%   { transform: translate(0, 0); opacity: 0; }
    5%   { opacity: 0.7; }
    20%  { transform: translate(-6vw, -35px); opacity: 0.85; }
    45%  { transform: translate(8vw, 21px); opacity: 0.6; }
    65%  { transform: translate(2vw, -63px); opacity: 0.8; }
    85%  { transform: translate(-3vw, 35px); opacity: 0.7; }
    95%  { opacity: 0.6; }
    100% { transform: translate(0, 0); opacity: 0; }
}

@keyframes orbFloat6 {
    0%   { transform: translate(0, 0); opacity: 0; }
    5%   { opacity: 0.65; }
    15%  { transform: translate(-9vw, -28px); opacity: 0.8; }
    35%  { transform: translate(4vw, 56px); opacity: 0.5; }
    55%  { transform: translate(10vw, -14px); opacity: 0.75; }
    75%  { transform: translate(-3vw, -49px); opacity: 0.85; }
    95%  { opacity: 0.6; }
    100% { transform: translate(0, 0); opacity: 0; }
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0;
    padding-left: 4rem;
}

.hero h1 {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
    border: none;
    outline: none;
}

.hero h2 {
    font-size: 1.2rem;
    font-weight: 400;
    color: #b0bec5;
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* Centered hero for inner pages */
.hero-centered {
    text-align: left;
}

.hero-centered .hero-content {
    max-width: 900px;
    margin: 0 auto;
    padding-left: 0;
}

/* Inner-page heroes: tighten the gap to the first section */
.hero.hero-centered {
    padding-bottom: 3rem;
}

.hero-centered .hero-content > h2:last-child {
    margin-bottom: 0;
}

.hero-centered + .section {
    padding-top: 3rem;
}

/* About page hero — match about-grid width */
.hero-about .hero-content {
    max-width: 900px;
    margin: 0 auto;
    padding-left: 0;
}

/* Contact page hero — match contact-layout width */
.hero-contact .hero-content {
    max-width: 1100px;
    margin: 0 auto;
    padding-left: 0;
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.badge {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    padding: 0.6rem 1.4rem;
    font-size: 0.9rem;
    color: #e0e0e0;
    backdrop-filter: blur(10px);
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    flex-wrap: wrap;
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
}

.btn:hover {
    text-decoration: none;
}

.btn-primary {
    background: rgba(0, 100, 220, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    border-color: #0077ee;
}

.btn-primary:hover {
    background: rgba(0, 100, 220, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 120, 238, 0.3);
}

.btn-outline {
    background: rgba(0, 100, 220, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    border-color: #0077ee;
}

.btn-outline:hover {
    background: rgba(0, 100, 220, 0.4);
    border-color: #0077ee;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 120, 238, 0.3);
}

.btn-lg {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
}

/* ===== Section Styles ===== */
.section {
    padding: 5rem 2rem;
}

.section-dark {
    background: #0a0a0a;
}

.section-title {
    font-size: 2.2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1rem;
    color: #ffffff;
}

.section-subtitle {
    text-align: center;
    color: #94a3b8;
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto 3rem;
    line-height: 1.7;
}

/* ===== Card Grid ===== */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.75rem;
    color: inherit;
    text-decoration: none;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 0%), rgba(0, 119, 238, 0.12), transparent 40%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

a.card:hover {
    text-decoration: none;
    transform: translateY(-4px);
    border-color: rgba(0, 119, 238, 0.45);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 119, 238, 0.15);
}

a.card:hover::before {
    opacity: 1;
}

.card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    margin-bottom: 1.25rem;
    color: #4da3ff;
    background: rgba(0, 119, 238, 0.12);
    border: 1px solid rgba(0, 119, 238, 0.25);
    transition: background 0.3s ease, color 0.3s ease;
}

a.card:hover .card-icon {
    background: rgba(0, 119, 238, 0.22);
    color: #ffffff;
}

.card h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.card p {
    color: #94a3b8;
    line-height: 1.65;
    font-size: 0.95rem;
    flex-grow: 1;
}

.card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #4da3ff;
}

.card-link .icon {
    transition: transform 0.3s ease;
}

a.card:hover .card-link .icon {
    transform: translateX(4px);
}

.card-static {
    cursor: default;
}

/* ===== Eyebrow / inline link ===== */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ff8a3d;
    margin-bottom: 1rem;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    color: #4da3ff;
}

/* ===== Pillars (Why SeaOrb / How We Work) ===== */
.pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.pillar {
    padding: 1.5rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

.pillar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    color: #4da3ff;
    background: rgba(0, 119, 238, 0.1);
    margin-bottom: 1rem;
}

.pillar h4 {
    font-size: 1.05rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.4rem;
}

.pillar p {
    color: #94a3b8;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ===== Tech Band ===== */
.tech-band {
    text-align: center;
    max-width: 1200px;
    margin: 4rem auto 0;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tech-band-label {
    color: #64748b;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 1.75rem;
}

.tech-stack-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem 3rem;
}

.tech-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.7;
    filter: grayscale(0.4);
    transition: opacity 0.3s, filter 0.3s;
}

.tech-icon:hover {
    opacity: 1;
    filter: none;
}

.tech-icon img {
    height: 30px;
    width: auto;
}

.tech-icon span {
    font-size: 0.65rem;
    color: #94a3b8;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ===== Process Steps ===== */
.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    max-width: 1000px;
    margin: 2rem auto 0;
}

.process-step {
    text-align: center;
    padding: 1.5rem 1rem;
    border-radius: 12px;
    background: #111111;
    border: 1px solid #1e1e2e;
    transition: transform 0.3s ease;
}

.process-step:hover {
    transform: translateY(-3px);
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #ffffff;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.process-step h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
}

/* ===== CTA Banner ===== */
.cta-banner {
    background: linear-gradient(135deg, #0a1628 0%, #1a1040 100%);
    color: #ffffff;
    text-align: center;
    padding: 4rem 2rem;
}

.cta-banner h2 {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.cta-banner p {
    color: #b0bec5;
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

/* ===== About Page ===== */
.about-grid {
    max-width: 900px;
    margin: 0 auto;
}

.about-text h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #ffffff;
}

.about-text p {
    color: #94a3b8;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.leadership {
    max-width: 900px;
    margin: 0 auto;
}

.leader-card {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

.leader-avatar {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.4rem;
    color: #ffffff;
    background: linear-gradient(135deg, #0099ff, #00ff66);
}

.leader-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.2rem;
}

.leader-role {
    color: #4da3ff;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.9rem;
}

.leader-card p {
    color: #94a3b8;
    line-height: 1.75;
}

/* ===== Contact Form ===== */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 1100px;
    margin: 0 auto;
}

.contact-info h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #ffffff;
}

.contact-info p {
    color: #94a3b8;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.contact-detail {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: #94a3b8;
}

.contact-detail-icon {
    font-size: 1.3rem;
}

.contact-form {
    background: #111111;
    border: 2px solid #0077ee;
    border-radius: 12px;
    padding: 2rem;
}

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

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #c0c8d8;
    margin-bottom: 0.3rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.7rem 1rem;
    border: 1px solid #2a2a3a;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.2s;
    background: #0a0a0a;
    color: #e0e4ea;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* ===== Services Detail ===== */
.services-detail {
    max-width: 900px;
    margin: 0 auto;
}

.service-detail-card {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    scroll-margin-top: 6rem;
    transition: transform 0.2s, border-color 0.2s;
}

.service-detail-card:hover {
    border-color: rgba(0, 119, 238, 0.35);
}

.service-detail-card:hover {
    transform: translateX(4px);
}

.service-icon-large {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    color: #4da3ff;
    background: rgba(0, 119, 238, 0.12);
    border: 1px solid rgba(0, 119, 238, 0.25);
}

.service-detail-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #ffffff;
}

.service-detail-card p {
    color: #94a3b8;
    line-height: 1.7;
}

/* ===== Development Process Detail ===== */
.process-detail {
    max-width: 800px;
    margin: 0 auto;
}

.process-detail-step {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
}

.process-detail-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #ffffff;
    font-weight: 700;
    font-size: 1.2rem;
}

.process-detail-content h4 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #ffffff;
}

.process-detail-content p {
    color: #94a3b8;
    line-height: 1.7;
}

/* ===== Responsive ===== */

/* Large tablets / small laptops */
@media (max-width: 1024px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pillars {
        grid-template-columns: repeat(2, 1fr);
    }


    .hero {
        padding: 4rem 1.5rem;
    }

    .hero-content h1 {
        font-size: 2.4rem;
    }

    .hero-content h2 {
        font-size: 1.1rem;
    }

    .section {
        padding: 4rem 1.5rem;
    }

    .cta-banner {
        padding: 3rem 1.5rem;
    }

    .cta-banner h2 {
        font-size: 1.75rem;
    }
}

/* Tablets */
@media (max-width: 768px) {
    .hero {
        padding: 3rem 1.25rem 5rem;
    }

    .hero-content {
        padding-left: 0;
    }

    .hero h1,
    .hero-content h1 {
        font-size: 2rem;
    }

    .hero h2,
    .hero-content h2 {
        font-size: 1rem;
    }

    .section-title {
        font-size: 1.7rem;
    }

    .section {
        padding: 3rem 1.25rem;
    }

    .card-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .leader-card {
        flex-direction: column;
        gap: 1.25rem;
    }

    .contact-layout {
        grid-template-columns: 1fr;
    }

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

    .service-detail-card {
        flex-direction: column;
        gap: 1rem;
    }

    .hero-badges {
        flex-wrap: wrap;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-buttons .btn {
        text-align: center;
    }

    .tech-stack-row {
        justify-content: center;
    }

    .cta-banner h2 {
        font-size: 1.5rem;
    }

    .cta-banner p {
        font-size: 1rem;
    }

    .process-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Small phones */
@media (max-width: 480px) {
    .hero {
        padding: 2.5rem 1rem 5rem;
    }

    .hero-content {
        padding-left: 0;
    }

    .hero h1,
    .hero-content h1 {
        font-size: 1.6rem;
    }

    .hero h2,
    .hero-content h2 {
        font-size: 0.9rem;
    }

    .section-title {
        font-size: 1.4rem;
    }

    .section {
        padding: 2.5rem 1rem;
    }

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

    .card {
        padding: 1.5rem;
    }

    .btn-lg {
        padding: 0.85rem 2rem;
        font-size: 1rem;
    }

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

    .process-steps {
        grid-template-columns: 1fr;
    }

    .about-text h2 {
        font-size: 1.5rem;
    }

    .contact-form {
        padding: 1.5rem;
    }

    .cta-banner {
        padding: 2.5rem 1rem;
    }

    .cta-banner h2 {
        font-size: 1.3rem;
    }

    .process-detail-step {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem;
    }
}

/* ===== Form validation ===== */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}