/* ─── Hero section ───────────────────────────────────────────── */
/* Pixel-accurate stage at 1920px, scaled via zoom breakpoints.  */
/* Stage height 1150px covers h1 (196) + body (464) +            */
/* button (660) + map (711–1277) + dots (734–1148).              */

/* ─── Hero load animation (above-fold, no scroll trigger) ────── */

@keyframes heroRevealUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes heroLogoReveal {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.hero__h1 {
    animation: heroRevealUp 0.85s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

.hero__body {
    animation: heroRevealUp 0.85s cubic-bezier(0.4, 0, 0.2, 1) 0.42s both;
}

.hero__bttn-wrap {
    animation: heroRevealUp 0.85s cubic-bezier(0.4, 0, 0.2, 1) 0.64s both;
}

.hero {
    overflow-x: clip;
    position: relative;
    z-index: 1;
}

/* ─── Logo ───────────────────────────────────────────────────── */

.hero__logo {
    height: 70px;
    width: auto;
    position: absolute;
    top: 40px;
    left: 50%;
    z-index: 2;
    pointer-events: none;
    animation: heroLogoReveal 0.85s cubic-bezier(0.4, 0, 0.2, 1) 0s both;
}

.hero__stage {
    position: relative;
    width: 2000px;
    height: 1557px;
    left: 50%;
    transform: translateX(-50%);
}

/* ─── Visual layer wrappers (desktop: transparent pass-through) ──
   On desktop, .hero__anim-wrap sits at absolute 0,0 with overflow:visible
   so children keep their original coordinates relative to .hero__stage.
   On mobile, .hero__anim-wrap becomes a clipping flex item and
   .hero__anim-stage gets scaled + offset to center the board.        */

.hero__anim-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    overflow: visible;
    pointer-events: none;
}

.hero__anim-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 2000px;
    height: 1557px;
}

/* ─── Spine animation canvas ─────────────────────────────────── */

#hero-spine-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 2000px;
    height: 1557px;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

/* ─── Map background ─────────────────────────────────────────── */

.hero__map {
    height: 566px;
    left: 0;
    position: absolute;
    top: 711px;
    width: 2000px;
    object-fit: cover;
    pointer-events: none;
}

/* ─── Dots overlay on map ────────────────────────────────────── */

.hero__dots {
    height: 414px;
    left: 431px;
    position: absolute;
    top: 734px;
    width: 1435px;
    pointer-events: none;
    z-index: 1;
}

/* ─── H1: "One SDK. / Harmonized Revenue. / Tier-1..." ──────── */

.hero__h1 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 12px;
    left: 160px;
    position: absolute;
    top: 196px;
    width: 911px;
    z-index: 2;
}

.hero__title {
    align-items: center;
    align-self: stretch;
    color: var(--blue-ribbon);
    display: flex;
    font-family: var(--font-montserrat), sans-serif;
    font-size: 84px;
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 84px;
    margin-top: -1px;
}

.hero__subtitle-wrap {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hero__subtitle-line--white {
    align-items: center;
    color: var(--white-solid);
    display: flex;
    font-family: var(--font-montserrat), sans-serif;
    font-size: 64px;
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 64px;
    margin-top: -1px;
    width: 742px;
}

.hero__subtitle-line--gradient {
    background: linear-gradient(90deg, var(--blue-ribbon) 0%, #fff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    align-items: center;
    display: flex;
    font-family: var(--font-montserrat), sans-serif;
    font-size: 64px;
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 64px;
    width: 742px;
}

/* ─── Body text ──────────────────────────────────────────────── */

.hero__body {
    align-items: flex-start;
    display: inline-flex;
    flex-direction: column;
    gap: 12px;
    left: 160px;
    position: absolute;
    top: 464px;
    z-index: 2;
}

.hero__lead {
    align-items: center;
    color: var(--white-solid);
    display: flex;
    font-family: var(--font-raleway), sans-serif;
    font-size: 36px;
    font-weight: 500;
    letter-spacing: -0.5px;
    line-height: 38px;
    margin-top: -1px;
    white-space: nowrap;
}

.hero__desc {
    color: var(--silver-chalice);
    font-family: var(--font-raleway), sans-serif;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -1px;
    line-height: 39.2px;
    width: 803px;
}

/* ─── CTA Button ─────────────────────────────────────────────── */

.hero__bttn-wrap {
    display: inline-flex;
    left: 160px;
    position: absolute;
    top: 660px;
    z-index: 2;
}

.hero__bttn {
    align-items: center;
    background-color: var(--blue-ribbon);
    border-radius: 21.12px;
    cursor: pointer;
    display: flex;
    gap: 0;
    padding: 21.12px 36.96px;
    position: relative;
}

.hero__bttn-shadow {
    background-color: rgba(244, 245, 245, 0.01);
    border-radius: 21.12px;
    box-shadow: 0 5.28px 7.92px -5.28px rgba(1, 114, 253, 0.25),
    0 13.2px 19.8px -3.96px rgba(1, 114, 253, 0.25);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.hero__bttn-text {
    align-items: center;
    color: var(--cultured-pearl);
    display: flex;
    font-family: var(--font-raleway), sans-serif;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 31.7px;
    margin-top: -1.32px;
    position: relative;
    white-space: nowrap;
}

.hero__bttn-icon-wrap {
    padding: 0 0 0 10.56px;
    width: 36.96px;
    position: relative;
}

.hero__bttn-icon {
    display: flex;
    justify-content: center;
    width: 26.4px;
}

.hero__bttn-icon img {
    flex: 1;
    width: 26.4px;
}

/* ─── sdk-1: ONE SDK board + decorative lines ────────────────── */

.hero__sdk1 {
    height: 1422px;
    left: 896px;
    position: absolute;
    top: 133px;
    width: 943px;
}

/* Long vertical "spine" line (right edge of board, extends to map).
   z-index: 5 — breaks through above integration in the overlap zone. */
.hero__sdk1-v31 {
    height: 1086px;
    left: 480px;
    position: absolute;
    top: 350px;
    width: 240px;
    z-index: 5;
}

/* Left curve (from left side of board, swoops down-left) */
.hero__sdk1-v33 {
    height: 403px;
    left: -1px;
    position: absolute;
    top: 216px;
    width: 274px;
}

/* Right outer thin line */
.hero__sdk1-v36 {
    height: 439px;
    left: 698px;
    position: absolute;
    top: 286px;
    width: 68px;
}

/* Far right line */
.hero__sdk1-v29 {
    height: 508px;
    left: 777px;
    position: absolute;
    top: 215px;
    width: 167px;
}

/* Center-left vertical wire */
.hero__sdk1-v34 {
    height: 363px;
    left: 422px;
    position: absolute;
    top: 315px;
    width: 33px;
}

/* Center thin wire */
.hero__sdk1-v35 {
    height: 343px;
    left: 583px;
    position: absolute;
    top: 330px;
    width: 2px;
}

/* Left thick wire to map */
.hero__sdk1-v30 {
    height: 561px;
    left: 193px;
    position: absolute;
    top: 295px;
    width: 174px;
}

/* Right mid wire to map */
.hero__sdk1-v32 {
    height: 502px;
    left: 640px;
    position: absolute;
    top: 321px;
    width: 24px;
}

/* ─── ONE SDK board (circuit-board visual) ───────────────────── */

.hero__onesdk {
    height: 348px;
    left: 271px;
    position: absolute;
    top: 0;
    width: 508px;
}

.hero__onesdk-bg {
    background-image: url(../img/img.png);
    background-position: 50% 50%;
    background-size: cover;
    height: 348px;
    left: 0;
    position: absolute;
    top: 0;
    width: 507px;
}

.hero__onesdk-v26 {
    height: 332px;
    left: -5px;
    position: absolute;
    top: -5px;
    width: 518px;
}

.hero__onesdk-v27 {
    height: 168px;
    left: -5px;
    position: absolute;
    top: 185px;
    width: 518px;
}

.hero__onesdk-v25 {
    height: 276px;
    left: 61px;
    position: absolute;
    top: 12px;
    width: 391px;
}

/* vector-24 and vector-28 share same CSS class .vector-2 */
.hero__onesdk-v24 {
    height: 243px;
    left: 85px;
    position: absolute;
    top: 23px;
    width: 343px;
}

.hero__onesdk-v28 {
    height: 243px;
    left: 85px;
    position: absolute;
    top: 23px;
    width: 343px;
}

/* "ONE SDK" text inside the board */
.hero__onesdk-label {
    display: flex;
    height: 68px;
    left: 119px;
    position: absolute;
    top: 109px;
    width: 275px;
    align-items: center;
    color: var(--tropical-blue);
    font-family: var(--font-raleway), sans-serif;
    font-size: 68.5px;
    font-style: italic;
    font-weight: 600;
    letter-spacing: -2.44px;
    line-height: 68.5px;
    text-shadow: 0 0 7.1px #0d1626;
    white-space: nowrap;
}

/* ─── Small CAS.AI icon (top-right decoration) ───────────────── */

.hero__icon61 {
    height: 83px;
    left: 1790px;
    position: absolute;
    top: 1078px;
    width: 83px;
}

/* ─── Zoom scaling (stage is 2000px wide) ────────────────────── */
/* Formula: breakpoint / 2000                                     */

@media (max-width: 1999px) {
    .hero {
        zoom: 0.96;
    }
}

@media (max-width: 1800px) {
    .hero {
        zoom: 0.90;
    }
}

@media (max-width: 1700px) {
    .hero {
        zoom: 0.85;
    }
}

@media (max-width: 1600px) {
    .hero {
        zoom: 0.80;
    }
}

@media (max-width: 1500px) {
    .hero {
        zoom: 0.75;
    }
}

@media (max-width: 1400px) {
    .hero {
        zoom: 0.70;
    }
}

@media (max-width: 1280px) {
    .hero {
        zoom: 0.64;
    }
}

@media (max-width: 1100px) {
    .hero {
        zoom: 0.55;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE / TABLET LAYOUT  ≤ 1024px
   Order: h1 → body → animation → button (via CSS order).
   Wrapper height = (711 + 200) * scale → board + map visible.
   left = calc(50% − 1421 * scale) → board centered at any width.
═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

    /* ── Reset zoom ── */
    .hero { zoom: 1; }

    /* ── Stage: flex column ── */
    .hero__stage {
        width: 100%;
        height: auto;
        left: auto;
        transform: none;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 210px 24px 96px;
        gap: 20px;
    }

    /* ── Flex order: text first, animation second, button last ── */
    .hero__h1        { order: 1; }
    .hero__body      { order: 2; }
    .hero__anim-wrap { order: 3; }
    .hero__bttn-wrap { order: 4; }

    /* ── H1: flow ── */
    .hero__h1 {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        gap: 6px;
        z-index: 2;
    }

    .hero__title {
        font-size: 56px;
        line-height: 58px;
        letter-spacing: -1px;
    }

    .hero__subtitle-line--white,
    .hero__subtitle-line--gradient {
        font-size: 44px;
        line-height: 46px;
        letter-spacing: -1px;
        width: auto;    /* reset desktop 742px */
    }

    /* ── Body: flow ── */
    .hero__body {
        position: relative;
        left: auto;
        top: auto;
        gap: 8px;
        z-index: 2;
        width: 100%;
        max-width: 560px;
    }

    .hero__lead {
        font-size: 24px;
        line-height: 30px;
        white-space: normal;
    }

    .hero__desc {
        font-size: 20px;
        line-height: 28px;
        width: auto;
        max-width: 100%;
        letter-spacing: -0.3px;
    }

    /* ── Animation wrapper ──────────────────────────────────────
       scale 0.70: visible stage area = height / 0.70
       890px → shows stage to y≈1271 (map 711–1277 full, dots 734–1148 full) */
    .hero__anim-wrap {
        position: relative;
        width: 100%;
        height: 890px;
        overflow: hidden;
        flex-shrink: 0;
        pointer-events: none;
        left: auto;
        top: auto;
    }

    /* ── Gradient fade: hides curved wire endings at bottom ── */
    .hero__anim-wrap::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 120px;
        background: linear-gradient(to bottom, transparent, #131313);
        pointer-events: none;
        z-index: 2;
    }

    /* scale 0.70 → board center x=995, left: calc(50% − 995px) */
    .hero__anim-stage {
        position: absolute;
        top: 0;
        left: calc(50% - 995px);
        width: 2000px;
        height: 1557px;
        transform-origin: 0 0;
        transform: scale(0.70);
    }

    /* ── CTA button: 70% width, centered ── */
    .hero__bttn-wrap {
        position: relative;
        left: auto;
        top: auto;
        z-index: 2;
        align-self: center;
        width: 80%;
        display: flex;
    }

    .hero__bttn {
        width: 100%;
        justify-content: center;
        padding: 10px 20px;
        border-radius: 12px;
        gap: 10px;
    }

    .hero__bttn-shadow { border-radius: 12px; }

    .hero__bttn-text {
        font-size: clamp(15px, 2.6vw, 23px);
        line-height: 1.3;
        white-space: nowrap;
    }

    .hero__bttn-icon-wrap {
        padding: 0 0 0 6px;
        width: 26px;
    }

    /* ── Logo: scale down slightly ── */
    .hero__logo { height: 48px; top: 24px; }

    /* ── Decorative icon: hide ── */
    .hero__icon61 { display: none; }
}

/* ── Per-breakpoint adjustments ───────────────────────────────
   Formula: left = calc(50% − 1421 * scale)
   Height   = 911 * scale                                        */

@media (max-width: 768px) {
    .hero__title { font-size: 50px; line-height: 52px; }
    .hero__subtitle-line--white,
    .hero__subtitle-line--gradient { font-size: 40px; line-height: 42px; }
    .hero__lead  { font-size: 22px; line-height: 28px; }
    /* scale 0.60: visible to y≈1270 */
    .hero__anim-wrap  { height: 762px; }
    .hero__anim-stage { transform: scale(0.60); left: calc(50% - 853px); }
}

@media (max-width: 540px) {
    .hero__title { font-size: 44px; line-height: 46px; }
    .hero__subtitle-line--white,
    .hero__subtitle-line--gradient { font-size: 34px; line-height: 36px; }
    .hero__lead  { font-size: 20px; line-height: 26px; }
    .hero__desc  { font-size: 18px; line-height: 25px; }
    /* scale 0.52: visible to y≈1269 */
    .hero__anim-wrap  { height: 660px; }
    .hero__anim-stage { transform: scale(0.52); left: calc(50% - 739px); }
}

@media (max-width: 430px) {
    .hero__stage  { padding: 120px 20px 80px; gap: 16px; }
    .hero__title  { font-size: 40px; line-height: 42px; }
    .hero__subtitle-line--white,
    .hero__subtitle-line--gradient { font-size: 32px; line-height: 34px; }
    .hero__lead  { font-size: 18px; line-height: 24px; }
    .hero__desc  { font-size: 16px; line-height: 22px; }
    /* scale 0.46: visible to y≈1269 */
    .hero__anim-wrap  { height: 584px; }
    .hero__anim-stage { transform: scale(0.46); left: calc(50% - 654px); }
    .hero__bttn-wrap  { width: 92%; }
    .hero__bttn-text  { font-size: clamp(13px, 3.6vw, 15px); white-space: nowrap; }
}

/* 2K–4K upscale */
@media (min-width: 2200px) {
    .hero {
        zoom: 1.10;
    }
}

@media (min-width: 2800px) {
    .hero {
        zoom: 1.40;
    }
}

@media (min-width: 3840px) {
    .hero {
        zoom: 1.92;
    }
}

/* ── CTA Button: electric current animation ─────────────────── */

@property --ea {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes electricRun {
  to { --ea: 360deg; }
}

@keyframes btnGlowPulse {
  0%, 100% {
    box-shadow:
      0 5.28px  7.92px -5.28px rgba(1, 114, 253, 0.25),
      0 13.2px 19.8px  -3.96px rgba(1, 114, 253, 0.25);
  }
  50% {
    box-shadow:
      0 0 28px rgba(1, 114, 253, 0.65),
      0 0 56px rgba(1, 114, 253, 0.30);
  }
}

/* Rotating electric arc around the button border */
.hero__bttn-wrap::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 24px;
  background: conic-gradient(
    from var(--ea),
    rgba(255, 255, 255, 0)   0%,
    rgba(255, 255, 255, 0)   6%,
    rgba(255, 255, 255, 0.6) 11%,
    rgba(255, 255, 255, 1)   15%,
    rgba(255, 255, 255, 0.6) 19%,
    rgba(255, 255, 255, 0)   24%,
    rgba(255, 255, 255, 0)   100%
  );
  animation: electricRun 4s linear infinite;
  filter: blur(1.5px);
  z-index: -1;
  will-change: transform;
}

/* Synchronized glow pulse on the button shadow */
.hero__bttn-shadow {
  animation: btnGlowPulse 4s ease-in-out infinite;
}

/* Hover: arc speeds up, glow intensifies */
.hero__bttn-wrap:hover::before {
  animation-duration: 2s;
  filter: blur(2.5px);
}

.hero__bttn-wrap:hover .hero__bttn-shadow {
  animation-duration: 2s;
}

/* Hover: subtle scale on the button */
.hero__bttn {
  transition: transform 0.3s ease, filter 0.3s ease;
}

.hero__bttn-wrap:hover .hero__bttn {
  transform: scale(1.02);
  filter: brightness(1.1);
}

/* ── CTA Arrow: electric teleport ───────────────────────────── */
/* Arrow stretches right → flash → disappears →                 */
/* reappears from left → snaps back. 4s synced with arc.        */

@keyframes arrowTeleport {
  /* rest */
  0%, 40%  {
    transform: translateX(0)    scaleX(1);
    opacity:   1;
    filter:    none;
  }
  /* shoot right + stretch + flash */
  62% {
    transform: translateX(20px) scaleX(1.6);
    opacity:   0;
    filter:    blur(3px) brightness(3);
  }
  /* jump back left, invisible */
  63% {
    transform: translateX(-8px) scaleX(0.7);
    opacity:   0;
    filter:    none;
  }
  /* smooth return */
  80%, 100% {
    transform: translateX(0)    scaleX(1);
    opacity:   1;
    filter:    none;
  }
}

.hero__bttn-icon img {
  animation: arrowTeleport 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform, opacity;
}

/* Hover: speeds up in sync with the arc */
.hero__bttn-wrap:hover .hero__bttn-icon img {
  animation-duration: 2s;
}