/* ── TOKENS ───────────────────────────────────────────── */
    :root {
      --bg:              #F5F1EB;
      --bg-card:         #FEFCF9;
      --text:            #0F0E0C;
      --text-muted:      #6B6860;
      --accent:          #F77E2D;
      --accent-bg:       #FFF3E8;
      --border:          #E4DDD3;
      --nav-solid:       rgba(245,241,235,0.9);
      --about-bg:        #0F0E0C;
      --about-text:      #F5F1EB;
      --about-muted:     rgba(245,241,235,.58);
      --about-border:    rgba(255,255,255,.08);
      --about-port-bg:   rgba(255,255,255,.04);
      --badge-live-bg:   #E5F4EA;
      --badge-live-text: #1A7232;
      /* icon pill backgrounds */
      --ic-coral: #FFF0EC; --ic-amber: #FDF7EE; --ic-blue: #EEF4FF;
      --ic-gray:  #F3F3F3; --ic-green: #EDFAF3; --ic-dgrn: #EDFAF5;
      --nav-h: 64px;
    }

    /* Dark overrides applied by JS toggle */
    html[data-theme="dark"] {
      --bg:              #0E0D0B;
      --bg-card:         #181612;
      --text:            #EDE9E3;
      --text-muted:      #7A766F;
      --accent:          #FF8C3A;
      --accent-bg:       #2A1800;
      --border:          #2C2820;
      --nav-solid:       rgba(14,13,11,0.92);
      --about-bg:        #141210;
      --about-text:      #EDE9E3;
      --about-muted:     rgba(237,233,227,.55);
      --about-border:    rgba(255,255,255,.07);
      --about-port-bg:   rgba(255,255,255,.03);
      --badge-live-bg:   #0D2214;
      --badge-live-text: #4ABA6C;
      --ic-coral: #2A1008; --ic-amber: #241A08; --ic-blue: #0A1228;
      --ic-gray:  #1E1E1E; --ic-green: #0A1F12; --ic-dgrn: #0A1F14;
    }

    /* System preference used when user hasn't toggled */
    @media (prefers-color-scheme: dark) {
      html:not([data-theme="light"]):not([data-theme="dark"]) {
        --bg:              #0E0D0B;
        --bg-card:         #181612;
        --text:            #EDE9E3;
        --text-muted:      #7A766F;
        --accent:          #FF8C3A;
        --accent-bg:       #2A1800;
        --border:          #2C2820;
        --nav-solid:       rgba(14,13,11,0.92);
        --about-bg:        #141210;
        --about-text:      #EDE9E3;
        --about-muted:     rgba(237,233,227,.55);
        --about-border:    rgba(255,255,255,.07);
        --about-port-bg:   rgba(255,255,255,.03);
        --badge-live-bg:   #0D2214;
        --badge-live-text: #4ABA6C;
        --ic-coral: #2A1008; --ic-amber: #241A08; --ic-blue: #0A1228;
        --ic-gray:  #1E1E1E; --ic-green: #0A1F12; --ic-dgrn: #0A1F14;
      }
    }

    /* ── RESET ───────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
    body {
      background: var(--bg); color: var(--text);
      font-family: 'DM Sans', system-ui, sans-serif;
      font-size: 16px; line-height: 1.6; overflow-x: hidden;
      transition: background .3s, color .3s;
    }

    /* ── NAV ─────────────────────────────────────────────── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 99;
      height: var(--nav-h);
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 48px;
      background: transparent;
      transition: background .3s, border-color .3s;
      border-bottom: 1px solid transparent;
    }
    nav.solid {
      background: var(--nav-solid);
      backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      border-bottom-color: var(--border);
    }
    .nav-wordmark {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 19px; font-weight: 700; letter-spacing: .05em;
      text-transform: uppercase; color: var(--text); text-decoration: none;
      white-space: nowrap;
    }
    .nav-wordmark .nav-wordmark-accent { color: var(--accent); }
    .nav-links { display: flex; align-items: center; gap: 6px; }
    .nav-link {
      font-size: 13px; color: var(--text-muted); text-decoration: none;
      padding: 6px 14px; border-radius: 100px;
      transition: color .2s, background .2s;
    }
    .nav-link:hover { color: var(--text); background: rgba(128,128,128,.1); }
    .nav-appstore {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 13px; font-weight: 500;
      padding: 8px 18px; background: var(--text); color: var(--bg);
      border-radius: 100px; text-decoration: none;
      transition: opacity .2s, transform .2s;
    }
    .nav-appstore:hover { opacity: .82; transform: translateY(-1px); }

    /* Theme toggle */
    #themeBtn {
      width: 34px; height: 34px; border-radius: 100px;
      border: 1px solid var(--border); background: transparent;
      color: var(--text-muted); cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: color .2s, border-color .2s, background .2s;
      flex-shrink: 0;
    }
    #themeBtn:hover { color: var(--text); background: rgba(128,128,128,.1); }
    #themeBtn svg { pointer-events: none; transition: opacity .2s; }
    .icon-sun  { display: none; }
    .icon-moon { display: block; }
    html[data-theme="dark"]  .icon-sun  { display: block; }
    html[data-theme="dark"]  .icon-moon { display: none; }
    @media (prefers-color-scheme: dark) {
      html:not([data-theme="light"]):not([data-theme="dark"]) .icon-sun  { display: block; }
      html:not([data-theme="light"]):not([data-theme="dark"]) .icon-moon { display: none; }
    }

    /* ── HERO ─────────────────────────────────────────────── */
    .hero {
      min-height: 100svh;
      display: flex; flex-direction: column; justify-content: center;
      padding: calc(var(--nav-h) + 40px) 48px 80px;
      position: relative;
    }
    .hero-tag {
      display: inline-flex; align-items: center; gap: 10px;
      font-size: 11px; font-weight: 500; letter-spacing: .22em;
      text-transform: uppercase; color: var(--accent); margin-bottom: 28px;
      opacity: 0; animation: fadeUp .7s .1s ease both;
    }
    .hero-tag::before { content:''; display:block; width:28px; height:1px; background:var(--accent); }
    .hero-h1 {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(64px,12vw,184px); font-weight: 400;
      line-height: .9; letter-spacing: -.02em; margin-bottom: 36px;
      opacity: 0; animation: fadeUp .8s .25s ease both;
    }
    .hero-h1 .acc { color: var(--accent); font-style: italic; }
    .hero-desc {
      max-width: 420px; font-size: 17px; font-weight: 300; line-height: 1.8;
      color: var(--text-muted); margin-bottom: 44px;
      opacity: 0; animation: fadeUp .8s .42s ease both;
    }
    .hero-desc b { color: var(--text); font-weight: 500; }
    .hero-desc em { font-style: italic; font-size: 14px; }
    .hero-ctas {
      display: flex; align-items: center; gap: 20px;
      opacity: 0; animation: fadeUp .8s .58s ease both;
    }
    .cta-primary {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 14px; font-weight: 500;
      padding: 13px 26px; background: var(--text); color: var(--bg);
      border-radius: 100px; text-decoration: none;
      transition: transform .2s, opacity .2s;
    }
    .cta-primary:hover { transform: translateY(-2px); opacity: .85; }
    .cta-ghost {
      font-size: 14px; color: var(--text-muted);
      text-decoration: none; transition: color .2s;
    }
    .cta-ghost:hover { color: var(--text); }
    .hero-byjuan {
      position: absolute; bottom: 44px; right: 48px;
      font-family: 'Playfair Display', serif; font-style: italic;
      font-size: 14px; color: var(--text-muted);
      opacity: 0; animation: fadeIn 1.2s 1.1s ease both;
    }
    .hero-ring {
      position: absolute; top: 10%; right: -8%;
      width: min(50vw,560px); aspect-ratio: 1;
      border-radius: 50%; border: 1px solid var(--border); pointer-events: none;
      opacity: 0; animation: fadeIn 1.4s .5s ease both, slowSpin 55s linear infinite;
    }
    .hero-ring::after {
      content:''; position:absolute; inset:20%;
      border-radius:50%; border:1px solid var(--border);
    }

    /* ── SECTION SHARED ──────────────────────────────────── */
    .section { padding: 96px 48px; }
    .section-eyebrow {
      font-size: 11px; font-weight: 500; letter-spacing: .22em;
      text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
    }
    .section-title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(32px,5vw,58px); font-weight: 400;
      line-height: 1.06; letter-spacing: -.015em; margin-bottom: 52px;
    }
    .section-title i { font-style: italic; color: var(--text-muted); }

    /* ── APP GRID ────────────────────────────────────────── */
    .apps-grid {
      display: grid; grid-template-columns: repeat(auto-fill,minmax(285px,1fr)); gap: 16px;
    }
    .app-card {
      background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px;
      padding: 28px; display: flex; flex-direction: column; gap: 14px;
      transition: transform .25s ease, box-shadow .25s ease, background .3s, border-color .3s;
      position: relative; overflow: hidden;
    }
    .app-card:not(.dimmed):hover {
      transform: translateY(-5px);
      box-shadow: 0 24px 60px rgba(0,0,0,.12);
    }
    .app-card.dimmed { opacity: .65; }
    .app-card-head { display: flex; align-items: flex-start; justify-content: space-between; }
    .app-icon {
      width: 56px; height: 56px; border-radius: 13px;
      display: flex; align-items: center; justify-content: center;
      font-size: 26px; flex-shrink: 0;
      transition: background .3s;
    }
    .ic-coral { background: var(--ic-coral); }
    .ic-amber { background: var(--ic-amber); }
    .ic-blue  { background: var(--ic-blue);  }
    .ic-gray  { background: var(--ic-gray);  }
    .ic-green { background: var(--ic-green); }
    .ic-dgrn  { background: var(--ic-dgrn);  }

    .badge {
      font-size: 10px; font-weight: 600; letter-spacing: .08em;
      text-transform: uppercase; padding: 4px 10px; border-radius: 100px;
    }
    .badge-live { background: var(--badge-live-bg); color: var(--badge-live-text); }
    .badge-soon { background: var(--accent-bg); color: var(--accent); }
    .app-name {
      font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 500; line-height: 1.1;
    }
    .app-desc { font-size: 13px; font-weight: 300; line-height: 1.7; color: var(--text-muted); flex: 1; }
    .app-link {
      font-size: 13px; font-weight: 500; color: var(--text);
      text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
      transition: gap .2s;
    }
    .app-link:hover { gap: 9px; }
    .app-link.muted { color: var(--text-muted); pointer-events: none; }
    .blob {
      position: absolute; bottom: -44px; right: -44px;
      width: 110px; height: 110px; border-radius: 50%; opacity: .07;
    }

    /* ── ABOUT ───────────────────────────────────────────── */
    .about-wrap {
      background: var(--about-bg); color: var(--about-text);
      padding: 96px 48px; transition: background .3s;
    }
    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; max-width: 1000px; }
    .about-eyebrow {
      font-size: 11px; font-weight: 500; letter-spacing: .22em;
      text-transform: uppercase; color: var(--accent); margin-bottom: 18px;
    }
    .about-title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(30px,4.5vw,52px); font-weight: 400;
      line-height: 1.06; letter-spacing: -.015em;
      color: var(--about-text); margin-bottom: 28px;
    }
    .about-title i { font-style: italic; color: var(--accent); }
    .about-body { font-size: 15px; font-weight: 300; line-height: 1.9; color: var(--about-muted); }
    .about-body p + p { margin-top: 14px; }
    .about-quote {
      margin-top: 30px; padding-left: 18px;
      border-left: 2px solid var(--accent);
      font-family: 'Playfair Display', serif; font-style: italic;
      font-size: 16px; line-height: 1.6; color: var(--about-muted);
      filter: brightness(1.4);
    }
    .about-portrait {
      aspect-ratio: 3/4; border-radius: 20px;
      border: 1px solid var(--about-border); background: var(--about-port-bg);
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    }
    .about-portrait svg { opacity: .22; }
    .portrait-label {
      font-family: 'Playfair Display', serif; font-style: italic;
      font-size: 14px; color: var(--about-muted); filter: brightness(.6);
    }

    /* ── FOOTER ──────────────────────────────────────────── */
    footer {
      display: flex; align-items: center; justify-content: space-between;
      padding: 32px 48px; border-top: 1px solid var(--border);
      transition: border-color .3s;
    }
    .footer-logo {
      font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 700;
      letter-spacing: .06em; text-transform: uppercase;
      color: var(--text); text-decoration: none; transition: opacity .2s;
    }
    .footer-logo:hover { opacity: .7; }
    .footer-copy { font-size: 13px; color: var(--text-muted); }
    .footer-copy a { color: inherit; text-decoration: none; transition: color .2s; }
    .footer-copy a:hover { color: var(--accent); }

    /* ── ANIMATIONS ──────────────────────────────────────── */
    @keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none} }
    @keyframes fadeIn { from{opacity:0} to{opacity:1} }
    @keyframes slowSpin { to{transform:rotate(360deg)} }
    .reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease; }
    .reveal.vis { opacity: 1; transform: none; }
    .app-card.dimmed.reveal.vis { opacity: .65; }

    /* ── RESPONSIVE ──────────────────────────────────────── */
    @media (max-width: 800px) {
      nav { padding: 0 20px; }
      .nav-wordmark { font-size: 16px; letter-spacing: .03em; }
      .nav-link { display: none; }
      .hero {
        min-height: auto;
        padding: calc(var(--nav-h) + 32px) 20px 48px;
      }
      .hero-byjuan {
        position: static; margin-top: 32px;
        font-size: 13px; opacity: 1; animation: none;
      }
      .hero-ring { display: none; }
      .section, .about-wrap { padding: 64px 20px; }
      .about-grid { grid-template-columns: 1fr; gap: 36px; }
      .about-portrait { display: none; }
      footer { padding: 28px 20px; flex-direction: column; gap: 8px; text-align: center; }
    }
  
    /* ── APP PAGE ────────────────────────────────────────── */
    .app-card .card-link::after { content:''; position:absolute; inset:0; z-index:2; }

    .app-hero {
      padding: calc(var(--nav-h) + 48px) 48px 48px;
      max-width: 780px;
      display: flex; flex-direction: column; align-items: flex-start;
    }
    .app-back {
      font-size: 13px; color: var(--text-muted); text-decoration: none;
      margin-bottom: 36px; display: inline-flex; align-items: center; gap: 6px;
      transition: color .2s, gap .2s;
    }
    .app-back:hover { color: var(--text); gap: 10px; }
    .app-hero-icon {
      width: 88px; height: 88px; border-radius: 20px;
      display: flex; align-items: center; justify-content: center;
      background: var(--accent); margin-bottom: 22px;
      box-shadow: 0 18px 44px rgba(247,126,45,.30);
    }
    .app-hero-badges { margin-bottom: 16px; }
    .app-hero-name {
      font-family: 'Playfair Display', serif;
      font-size: clamp(40px,7vw,72px); font-weight: 400;
      line-height: 1; letter-spacing: -.02em; margin-bottom: 14px;
    }
    .app-hero-tagline {
      font-size: clamp(18px,2.4vw,23px); font-weight: 500;
      color: var(--accent); margin-bottom: 20px;
    }
    .app-hero-desc {
      font-size: 17px; font-weight: 300; line-height: 1.8;
      color: var(--text-muted); max-width: 580px; margin-bottom: 34px;
    }
    .app-download {
      display: inline-flex; align-items: center; gap: 10px;
      font-size: 15px; font-weight: 500;
      padding: 14px 26px; background: var(--text); color: var(--bg);
      border-radius: 100px; text-decoration: none;
      transition: transform .2s, opacity .2s;
    }
    .app-download:hover { transform: translateY(-2px); opacity: .9; }
    .app-download svg { flex-shrink: 0; }
    .app-download.disabled {
      background: transparent; color: var(--text-muted);
      border: 1px solid var(--border); cursor: default;
    }
    .app-download.disabled:hover { transform: none; opacity: 1; }

    .app-section { padding: 36px 48px; max-width: 780px; }
    .app-section-title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(24px,3.5vw,34px); font-weight: 400;
      letter-spacing: -.01em; margin-bottom: 26px;
    }
    .feature-list { list-style: none; display: grid; gap: 15px; }
    .feature-list li {
      position: relative; padding-left: 28px;
      font-size: 16px; font-weight: 300; line-height: 1.65; color: var(--text);
    }
    .feature-list li::before {
      content: ''; position: absolute; left: 0; top: 9px;
      width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
    }
    .feature-list li b { font-weight: 500; }

    .shots {
      display: flex; gap: 16px; overflow-x: auto; padding: 4px 0 14px;
      scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    }
    .shot-frame {
      flex: 0 0 auto; width: 210px; aspect-ratio: 9 / 19;
      border-radius: 28px; border: 1px solid var(--border);
      background: var(--bg-card); scroll-snap-align: start;
      display: flex; align-items: center; justify-content: center;
      color: var(--text-muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    }

    .app-cta {
      max-width: 780px; padding: 52px 48px 72px;
      margin-top: 24px; border-top: 1px solid var(--border);
      display: flex; flex-direction: column; align-items: flex-start; gap: 22px;
      transition: border-color .3s;
    }
    .app-cta-title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(26px,4vw,40px); font-weight: 400; letter-spacing: -.015em;
    }
    .app-cta-title i { font-style: italic; color: var(--accent); }

    @media (max-width: 800px) {
      .app-hero { padding: calc(var(--nav-h) + 32px) 20px 36px; }
      .app-section { padding: 28px 20px; }
      .app-cta { padding: 44px 20px 56px; }
      .shot-frame { width: 170px; }
    }

    .nav-appstore.soon {
      background: transparent; color: var(--text-muted);
      border: 1px solid var(--border); cursor: default;
    }
    .nav-appstore.soon:hover { opacity: 1; transform: none; }