:root {
      --charcoal: #11110F;
      --ink: #0B0B0A;
      --temple: #191713;
      --temple-2: #242017;
      --gold: #D8A84F;
      --gold-soft: #F0C86D;
      --parchment: #F4E8D0;
      --muted: #B9AA8B;
      --moss: #73845A;
      --line: rgba(216, 168, 79, 0.22);
      --shadow: rgba(0, 0, 0, 0.42);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; background: var(--charcoal); }
    body {
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--parchment);
      background:
        radial-gradient(circle at 16% 7%, rgba(216, 168, 79, 0.18), transparent 30rem),
        radial-gradient(circle at 84% 12%, rgba(115, 132, 90, 0.12), transparent 26rem),
        linear-gradient(180deg, #0D0D0C 0%, var(--charcoal) 42%, #090908 100%);
      min-height: 100vh;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: 0.24;
      mix-blend-mode: soft-light;
      background-image:
        linear-gradient(rgba(244, 232, 208, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(244, 232, 208, 0.025) 1px, transparent 1px);
      background-size: 38px 38px;
      mask-image: radial-gradient(circle at center, black, transparent 78%);
    }

    .wrap { width: min(1120px, calc(100% - 40px)); margin: 0 auto; position: relative; }

    header {
      position: sticky;
      top: 0;
      z-index: 20;
      padding: 18px 0;
      border-bottom: 1px solid rgba(216, 168, 79, 0.10);
      background: rgba(17, 17, 15, 0.78);
      backdrop-filter: blur(18px);
    }

    .nav { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
    .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--parchment); text-decoration: none; font-weight: 780; letter-spacing: -0.035em; }
    .brand img { width: 42px; height: 42px; border-radius: 12px; box-shadow: 0 12px 30px var(--shadow), 0 0 0 1px rgba(216, 168, 79, 0.24); }
    nav { display: flex; align-items: center; gap: 22px; color: var(--muted); font-size: 0.94rem; }
    nav a { color: var(--muted); text-decoration: none; transition: color .18s ease; }
    nav a:hover { color: var(--gold-soft); }
    .pill { border: 1px solid rgba(216,168,79,.30); color: var(--gold-soft); background: rgba(216,168,79,.08); padding: 8px 13px; border-radius: 999px; font-weight: 720; text-decoration: none; }

    .hero { padding: 86px 0 72px; display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 66px; align-items: center; }
    .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--gold-soft); font-weight: 760; letter-spacing: .13em; text-transform: uppercase; font-size: .76rem; }
    .eyebrow::before { content: ""; width: 38px; height: 1px; background: var(--gold); box-shadow: 0 0 16px rgba(216,168,79,.55); }
    h1 { margin: 0; max-width: 850px; font-size: clamp(3.3rem, 7.4vw, 6.85rem); line-height: .91; letter-spacing: -.078em; }
    h2 { margin: 0; font-size: clamp(2.1rem, 4vw, 4rem); line-height: 1; letter-spacing: -.055em; }
    h3 { margin: 0 0 10px; font-size: 1.08rem; letter-spacing: -.02em; }
    .gold { color: var(--gold-soft); }
    .lead { margin: 28px 0 0; max-width: 670px; color: rgba(244,232,208,.82); font-size: clamp(1.08rem, 1.55vw, 1.33rem); line-height: 1.72; }
    .hero-actions { margin-top: 34px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
    .cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 15px 20px;
      border-radius: 999px;
      border: 1px solid rgba(240,200,109,.42);
      background: linear-gradient(180deg, rgba(240,200,109,.22), rgba(216,168,79,.12));
      color: var(--gold-soft);
      font-weight: 790;
      text-decoration: none;
      box-shadow: 0 18px 42px rgba(0,0,0,.28);
    }
    .ghost { color: var(--muted); text-decoration: none; font-weight: 680; padding: 14px 4px; }
    .microcopy { margin-top: 12px; color: rgba(185,170,139,.86); font-size: .92rem; line-height: 1.5; }
    .status-card { margin-top: 22px; display: inline-flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid rgba(216,168,79,.20); border-radius: 18px; color: var(--muted); background: rgba(25,23,19,.72); box-shadow: 0 20px 50px rgba(0,0,0,.22); }
    .status-dot { width: 9px; height: 9px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 24px rgba(216,168,79,.8); }

    .hero-mark { position: relative; min-height: 540px; display: grid; place-items: center; }
    .hero-mark::before { content: ""; position: absolute; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, rgba(216,168,79,.20), transparent 64%); filter: blur(14px); }
    .icon-stage { position: relative; width: min(420px, 82vw); aspect-ratio: 1; border-radius: 38px; padding: 18px; background: linear-gradient(145deg, rgba(216,168,79,.24), rgba(244,232,208,.045), rgba(0,0,0,.22)); box-shadow: 0 38px 90px rgba(0,0,0,.46), inset 0 0 0 1px rgba(216,168,79,.18); transform: rotate(1deg); }
    .icon-stage img { width: 100%; height: 100%; object-fit: cover; border-radius: 28px; display: block; }
    .floating-card { position: absolute; right: -2px; bottom: 44px; max-width: 270px; padding: 18px; border: 1px solid rgba(216,168,79,.22); border-radius: 22px; background: rgba(17,17,15,.82); backdrop-filter: blur(18px); box-shadow: 0 28px 70px rgba(0,0,0,.42); }
    .floating-card strong { display: block; color: var(--gold-soft); margin-bottom: 5px; }
    .floating-card span { color: var(--muted); line-height: 1.55; font-size: .94rem; }
    a.icon-stage, a.floating-card, a.status-card, a.ios-badge { text-decoration: none; color: inherit; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
    a.icon-stage:hover, a.floating-card:hover, a.status-card:hover, a.ios-badge:hover { transform: translateY(-2px); border-color: rgba(240,200,109,.42); box-shadow: 0 28px 72px rgba(0,0,0,.38); }

    section { padding: 78px 0; border-top: 1px solid rgba(216,168,79,.08); }
    .section-head { max-width: 770px; margin-bottom: 34px; }
    .section-head p { color: var(--muted); font-size: 1.08rem; line-height: 1.72; }
    .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .card { padding: 24px; border: 1px solid rgba(216,168,79,.16); border-radius: 26px; background: linear-gradient(180deg, rgba(36,32,23,.72), rgba(17,17,15,.62)); box-shadow: 0 22px 54px rgba(0,0,0,.22); color: inherit; text-decoration: none; }
    .card p { margin: 0; color: var(--muted); line-height: 1.65; }
    .num { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: 16px; border: 1px solid rgba(216,168,79,.25); border-radius: 50%; color: var(--gold-soft); font-weight: 800; background: rgba(216,168,79,.08); }

    .method { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 34px; align-items: start; }
    .steps { display: grid; gap: 14px; }
    .step { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 20px; border-radius: 24px; border: 1px solid rgba(216,168,79,.15); background: rgba(25,23,19,.62); }
    .step p { margin: 0; color: var(--muted); line-height: 1.6; }

    .features { grid-template-columns: repeat(2, 1fr); }
    .feature-icon { color: var(--gold-soft); font-weight: 800; margin-bottom: 10px; letter-spacing: .08em; text-transform: uppercase; font-size: .76rem; }

    .ios-panel { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; padding: 34px; border: 1px solid rgba(216,168,79,.22); border-radius: 34px; background: radial-gradient(circle at 10% 0%, rgba(216,168,79,.16), transparent 30rem), rgba(25,23,19,.72); box-shadow: 0 32px 80px rgba(0,0,0,.28); }
    .ios-panel p { color: var(--muted); line-height: 1.65; margin: 10px 0 0; }
    .ios-badge { display: grid; place-items: center; min-width: 150px; padding: 18px; border-radius: 24px; border: 1px solid rgba(216,168,79,.26); color: var(--gold-soft); background: rgba(216,168,79,.08); font-weight: 820; text-align: center; }

    footer { padding: 44px 0; border-top: 1px solid rgba(216,168,79,.10); color: var(--muted); }
    .footer-row { display: flex; justify-content: space-between; gap: 20px; align-items: center; flex-wrap: wrap; }
    .footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
    .footer-links a { color: var(--muted); text-decoration: none; }
    .footer-links a:hover { color: var(--gold-soft); }

    @media (max-width: 860px) {
      nav { display: none; }
      .hero { grid-template-columns: 1fr; padding-top: 60px; gap: 38px; }
      .hero-mark { min-height: auto; }
      .floating-card { position: relative; right: auto; bottom: auto; margin-top: -24px; justify-self: end; }
      .grid, .features, .method, .ios-panel { grid-template-columns: 1fr; }
      .ios-badge { min-width: 0; }
      h1 { font-size: clamp(3rem, 18vw, 5.1rem); }
    }