/* hero */
    .hero {
      padding: 150px 0 80px;
      background:
        radial-gradient(circle at 14% 12%, #fbf1e7 0%, transparent 28%),
        radial-gradient(circle at 85% 10%, #fff6ef 0%, transparent 26%),
        linear-gradient(180deg, #f5f1eb 0%, #f7f3ee 100%);
    }

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

    .hero-title {
      font-size: clamp(56px, 11vw, 150px);
      line-height: 0.9;
      letter-spacing: -5px;
      font-weight: 800;
      max-width: 1100px;
      margin: 0 auto;
    }

    .hero-sub {
      margin: 24px auto 0;
      max-width: 760px;
      font-size: clamp(18px, 2.2vw, 28px);
      color: var(--text-muted);
      line-height: 1.6;
    }

    .hero-actions {
      margin-top: 34px;
      display: flex;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .hero-stage {
      margin-top: 70px;
      min-height: 760px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero-glow {
      position: absolute;
      width: 820px;
      height: 820px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,106,0,0.16) 0%, rgba(255,106,0,0.05) 40%, transparent 72%);
      filter: blur(16px);
    }

    .pendant-main {
      position: relative;
      width: 360px;
      height: 520px;
      border-radius: 78px;
      background: linear-gradient(180deg, #17181b 0%, #0f1012 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        inset 0 -12px 24px rgba(0,0,0,0.34),
        0 40px 90px rgba(0,0,0,0.25);
      transform: rotate(-10deg);
      padding: 20px;
      z-index: 2;
    }

    .pendant-main::before {
      content: "";
      position: absolute;
      top: -42px;
      left: 50%;
      transform: translateX(-50%);
      width: 82px;
      height: 82px;
      border: 7px solid rgba(255,255,255,0.12);
      border-bottom: none;
      border-radius: 44px 44px 0 0;
    }

    .pendant-screen {
      width: 100%;
      height: 100%;
      border-radius: 60px;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.06);
      background:
        radial-gradient(circle at 50% 34%, rgba(255,106,0,0.18), transparent 28%),
        linear-gradient(180deg, #121316 0%, #17191d 100%);
    }

    .screen-topbar {
      width: 90px;
      height: 10px;
      border-radius: 999px;
      background: rgba(255,255,255,0.09);
      margin: 22px auto 0;
    }

    .screen-ring {
      position: absolute;
      top: 126px;
      left: 50%;
      transform: translateX(-50%);
      width: 184px;
      height: 184px;
      border-radius: 50%;
      border: 11px solid rgba(255,255,255,0.08);
      box-shadow: inset 0 0 36px rgba(255,106,0,0.1);
    }

    .screen-ring::before {
      content: "";
      position: absolute;
      inset: 10px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,106,0,0.30) 0%, rgba(255,106,0,0.08) 40%, transparent 68%);
    }

    .screen-ring::after {
      content: "";
      position: absolute;
      top: -10px;
      left: 50%;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--primary);
      transform: translateX(-50%);
      box-shadow: 0 0 18px rgba(255,106,0,0.92);
    }

    .hero-note {
      position: absolute;
      padding: 18px 20px;
      border-radius: 24px;
      background: rgba(255,255,255,0.72);
      border: 1px solid var(--line);
      backdrop-filter: blur(18px);
      box-shadow: var(--shadow-soft);
      max-width: 230px;
      z-index: 3;
    }

    .hero-note small {
      display: block;
      font-size: 11px;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: #9f9185;
      margin-bottom: 6px;
      font-weight: 700;
    }

    .hero-note strong {
      display: block;
      font-size: 24px;
      line-height: 1.15;
      margin-bottom: 6px;
    }

    .hero-note p {
      font-size: 14px;
      line-height: 1.6;
      color: var(--text-muted);
    }

    .note-1 { top: 90px; left: 6%; }
    .note-2 { top: 180px; right: 6%; }
    .note-3 { bottom: 96px; left: 12%; }

    /* statement */
    .statement {
      padding: 100px 0 120px;
    }

    .statement-inner {
      max-width: 980px;
      margin: 0 auto;
      text-align: center;
    }

    .statement h2 {
      font-size: clamp(42px, 7vw, 100px);
      line-height: 1;
      letter-spacing: -4px;
      font-weight: 800;
    }

    .statement p {
      margin-top: 22px;
      font-size: clamp(18px, 2vw, 26px);
      line-height: 1.7;
      color: var(--text-muted);
    }

    /* split story */
    .story {
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: 80px 0;
    }

    .story.light {
      background: var(--bg-soft);
    }

    .story.dark {
      background: linear-gradient(180deg, #111315 0%, #0a0b0d 100%);
      color: #fff;
    }

    .story-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 36px;
      align-items: center;
    }

    .story-copy h2 {
      font-size: clamp(40px, 6vw, 86px);
      line-height: 0.98;
      letter-spacing: -3px;
      font-weight: 800;
      max-width: 560px;
    }

    .story-copy p {
      margin-top: 24px;
      max-width: 560px;
      font-size: 19px;
      line-height: 1.8;
      color: var(--text-muted);
    }

    .story.dark .story-copy p {
      color: var(--text-light);
    }

    .story-visual {
      min-height: 620px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .story-device {
      position: relative;
      width: 250px;
      height: 360px;
      border-radius: 56px;
      background: linear-gradient(180deg, #17181b 0%, #0f1012 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 28px 70px rgba(0,0,0,0.22);
      transform: rotate(-8deg);
      padding: 14px;
      z-index: 2;
    }

    .story-device::before {
      content: "";
      position: absolute;
      top: -30px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 60px;
      border: 6px solid rgba(255,255,255,0.12);
      border-bottom: none;
      border-radius: 32px 32px 0 0;
    }

    .story-screen {
      width: 100%;
      height: 100%;
      border-radius: 42px;
      border: 1px solid rgba(255,255,255,0.06);
      background:
        radial-gradient(circle at 50% 34%, rgba(255,106,0,0.14), transparent 28%),
        linear-gradient(180deg, #121316 0%, #17191d 100%);
      position: relative;
    }

    .story-ring {
      position: absolute;
      top: 96px;
      left: 50%;
      transform: translateX(-50%);
      width: 132px;
      height: 132px;
      border-radius: 50%;
      border: 8px solid rgba(255,255,255,0.08);
    }

    .story-ring::after {
      content: "";
      position: absolute;
      top: -8px;
      left: 50%;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--primary);
      transform: translateX(-50%);
    }

    .story-glow {
      position: absolute;
      width: 480px;
      height: 480px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,106,0,0.18) 0%, rgba(255,106,0,0.05) 42%, transparent 72%);
      filter: blur(12px);
    }

    .story-callout {
      position: absolute;
      padding: 18px 20px;
      border-radius: 22px;
      background: rgba(255,255,255,0.72);
      border: 1px solid var(--line);
      backdrop-filter: blur(16px);
      box-shadow: var(--shadow-soft);
      max-width: 220px;
      z-index: 3;
      font-size: 14px;
      line-height: 1.6;
      color: var(--text-muted);
    }

    .story-callout strong {
      display: block;
      color: var(--text);
      font-size: 20px;
      margin-bottom: 4px;
      line-height: 1.2;
    }

    .story.dark .story-callout {
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.08);
      box-shadow: none;
      color: rgba(255,255,255,0.7);
    }

    .story.dark .story-callout strong {
      color: #fff;
    }

    .callout-1 { top: 14%; left: 4%; }
    .callout-2 { bottom: 12%; right: 4%; }

    /* numbers */
    .numbers {
      padding: 110px 0;
      background: #fff;
    }

    .numbers-head {
      text-align: center;
      max-width: 900px;
      margin: 0 auto;
    }

    .numbers-head h2 {
      font-size: clamp(40px, 6vw, 82px);
      line-height: 1;
      letter-spacing: -3px;
      font-weight: 800;
    }

    .numbers-head p {
      margin-top: 20px;
      font-size: 20px;
      color: var(--text-muted);
      line-height: 1.7;
    }

    .numbers-grid {
      margin-top: 56px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    .number-card {
      padding: 34px 24px;
      border-radius: 28px;
      border: 1px solid var(--line);
      background: #fff;
      box-shadow: var(--shadow-soft);
      text-align: center;
      transition: var(--transition);
    }

    .number-card:hover {
      transform: translateY(-6px);
    }

    .number-card strong {
      display: block;
      font-size: clamp(34px, 5vw, 62px);
      line-height: 1;
      letter-spacing: -2px;
      margin-bottom: 12px;
      font-weight: 800;
    }

    .number-card span {
      display: block;
      font-size: 15px;
      font-weight: 700;
      color: #2f241c;
      margin-bottom: 8px;
    }

    .number-card p {
      font-size: 14px;
      line-height: 1.7;
      color: var(--text-muted);
    }

    /* specs */
    .specs {
      padding: 120px 0;
      background: var(--bg-soft);
    }

    .specs-head {
      text-align: center;
      max-width: 920px;
      margin: 0 auto;
    }

    .specs-head h2 {
      font-size: clamp(40px, 6vw, 78px);
      line-height: 1;
      letter-spacing: -3px;
      font-weight: 800;
    }

    .specs-head p {
      margin-top: 20px;
      font-size: 20px;
      color: var(--text-muted);
      line-height: 1.7;
    }

    .specs-table {
      margin-top: 56px;
      border-radius: 34px;
      overflow: hidden;
      background: rgba(255,255,255,0.76);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-soft);
    }

    .spec-row {
      display: grid;
      grid-template-columns: 220px 1fr;
      gap: 20px;
      padding: 22px 28px;
      border-bottom: 1px solid rgba(31,18,10,0.06);
    }

    .spec-row:last-child {
      border-bottom: none;
    }

    .spec-key {
      font-size: 13px;
      font-weight: 800;
      color: #9a8d82;
      text-transform: uppercase;
      letter-spacing: .9px;
    }

    .spec-val {
      font-size: 16px;
      line-height: 1.7;
      color: #241911;
    }
    
     @media (max-width: 900px) {
      .nav-links,
      .nav-btns {
        display: none;
      }

      .mobile-menu-btn {
        display: inline-flex;
      }

      #nav-toggle:checked + .mobile-menu {
        display: block;
      }

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

      .hero-stage {
        min-height: 650px;
      }

      .pendant-main {
        width: 290px;
        height: 420px;
      }

      .pendant-screen {
        border-radius: 48px;
      }

      .screen-ring {
        width: 150px;
        height: 150px;
        top: 102px;
      }

      .story-visual {
        min-height: 460px;
      }

      .story-copy h2,
      .story-copy p {
        max-width: 100%;
      }
    }

    @media (max-width: 768px) {
      .container {
        padding: 0 18px;
      }

      .hero {
        padding: 128px 0 70px;
      }

      .hero-title,
      .statement h2,
      .story-copy h2,
      .numbers-head h2,
      .specs-head h2,
      .cta-card h2 {
        letter-spacing: -2px;
      }

      .hero-actions .btn,
      .cta-actions .btn {
        width: 100%;
      }

      .hero-stage {
        margin-top: 44px;
        min-height: 520px;
      }

      .hero-glow {
        width: 420px;
        height: 420px;
      }

      .pendant-main {
        width: 220px;
        height: 320px;
        border-radius: 44px;
        transform: rotate(-7deg);
        padding: 12px;
      }

      .pendant-main::before {
        top: -24px;
        width: 50px;
        height: 50px;
        border-width: 5px;
      }

      .pendant-screen {
        border-radius: 32px;
      }

      .screen-topbar {
        width: 64px;
        height: 8px;
      }

      .screen-ring {
        width: 108px;
        height: 108px;
        top: 76px;
        border-width: 7px;
      }

      .hero-note {
        max-width: 150px;
        padding: 12px 12px;
        border-radius: 18px;
      }

      .hero-note strong {
        font-size: 16px;
      }

      .hero-note p {
        font-size: 12px;
      }

      .note-1 { top: 10px; left: 0; }
      .note-2 { top: 76px; right: 0; }
      .note-3 { bottom: 8px; left: 2px; }

      .statement,
      .numbers,
      .specs {
        padding: 80px 0;
      }

      .story {
        min-height: auto;
        padding: 80px 0;
      }

      .story-visual {
        min-height: 320px;
      }

      .story-device {
        width: 180px;
        height: 260px;
        border-radius: 36px;
        padding: 10px;
      }

      .story-device::before {
        top: -18px;
        width: 40px;
        height: 40px;
        border-width: 4px;
      }

      .story-screen {
        border-radius: 28px;
      }

      .story-ring {
        width: 88px;
        height: 88px;
        top: 72px;
        border-width: 5px;
      }

      .story-callout {
        max-width: 150px;
        padding: 12px 12px;
        border-radius: 16px;
        font-size: 12px;
      }

      .story-callout strong {
        font-size: 15px;
      }

      .callout-1 { top: 6%; left: 0; }
      .callout-2 { bottom: 6%; right: 0; }

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

      .spec-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 18px 18px;
      }

      .cta-card {
        padding: 56px 22px;
        border-radius: 28px;
      }

      .footer {
        padding: 68px 0 30px;
      }

      .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 38px;
      }

      .footer-bottom {
        flex-direction: column;
        text-align: center;
      }
    }