/* Ari Labs — shared chrome (vars, nav, footer, buttons, reveal, scroll progress, marquee).
   Pages may override or extend; this file is the floor. */

:root{
  --cream:#f1e8d4;
  --cream-deep:#e6dabe;
  --cream-paper:#f6efde;
  --sepia:#5a3f1c;
  --sepia-2:#7e5a2c;
  --gold:#b07d28;
  --gold-light:#d4a85a;
  --ink:#231b10;

  --night:#0a0820;
  --night-2:#1a103f;
  --night-3:#2d1e6e;
  --lavender:#c8b8ff;
  --lavender-2:#ece2ff;
  --violet:#8b6dff;
  --star:#fff6e4;

  --serif:'Cormorant Garamond','Iowan Old Style','Palatino',Georgia,serif;
  --mono:'IBM Plex Mono','SF Mono',ui-monospace,monospace;

  --mx:0; --my:0;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{font-family:var(--serif);color:var(--ink);-webkit-font-smoothing:antialiased;font-feature-settings:"liga","kern"}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ─── NAV ─── */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:24px 64px;color:var(--ink);background:rgba(246,239,222,.78);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(106,79,42,.12);transition:background .5s,color .5s,border-color .5s,padding .4s}
.nav .brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:26px;font-style:italic}
.nav .brand .mark{width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.3),transparent 60%),conic-gradient(from 180deg,var(--gold-light),var(--lavender),var(--gold-light));display:flex;align-items:center;justify-content:center}
.nav .brand .mark svg{width:20px;height:20px;color:rgba(0,0,0,.6)}
.nav .brand .pipe{opacity:.4;margin:0 6px}
.nav .brand .mono{font-family:var(--mono);font-size:14px;letter-spacing:.32em;font-style:normal}
.nav ul{list-style:none;display:flex;gap:42px;font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase}
.nav ul a{transition:opacity .2s,color .2s}
.nav ul a:hover{opacity:.6}
.nav ul a.active{color:var(--gold)}
.nav .cta{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;padding:11px 22px;border-radius:99px;background:rgba(35,27,16,.06);border:1px solid rgba(35,27,16,.18);color:var(--ink);transition:background .3s,border-color .3s,color .3s}
.nav.dark{background:rgba(10,8,32,.78);color:var(--lavender-2);border-bottom:1px solid rgba(200,184,255,.14)}
.nav.dark .cta{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:var(--lavender-2)}
.nav.scrolled{background:rgba(10,8,32,.78);color:var(--lavender-2);border-bottom:1px solid rgba(200,184,255,.14);padding:18px 64px}
.nav.scrolled .cta{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:var(--lavender-2)}

/* ─── PROGRESS BAR ─── */
.progress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--gold-light),var(--lavender));width:0;z-index:100;transition:width .1s linear}

/* ─── FOOTER ─── */
.footer{background:var(--night);color:var(--lavender-2);padding:120px 80px 50px;position:relative;overflow:hidden}
.footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--lavender),transparent)}
.footer-stars{position:absolute;inset:0;pointer-events:none}
.footer-grid{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:64px;padding-bottom:80px;border-bottom:1px solid rgba(200,184,255,.12);position:relative}
.footer-brand .glyph-wrap{font-family:var(--serif);font-style:italic;font-size:42px;display:flex;align-items:center;gap:14px;margin-bottom:24px}
.footer-brand .glyph-wrap .mark{width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.3),transparent 60%),conic-gradient(from 180deg,var(--gold-light),var(--lavender),var(--gold-light));display:flex;align-items:center;justify-content:center}
.footer-brand .glyph-wrap .mark svg{width:22px;height:22px;color:rgba(0,0,0,.6)}
.footer-brand .glyph-wrap .mono{font-family:var(--mono);font-style:normal;font-size:16px;letter-spacing:.32em;color:var(--lavender)}
.footer-brand p{font-size:16px;line-height:1.6;opacity:.7;max-width:340px}
.footer h6{font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--lavender);margin-bottom:22px}
.footer ul{list-style:none}
.footer li{margin-bottom:12px;font-size:16px;font-family:var(--serif)}
.footer li em{font-style:italic}
.footer li a{transition:color .2s}
.footer li a:hover{color:var(--lavender)}
.footer-bottom{max-width:1320px;margin:0 auto;display:flex;justify-content:space-between;padding-top:30px;font-family:var(--mono);font-size:11px;letter-spacing:.25em;text-transform:uppercase;opacity:.5}
@keyframes footStar{0%,100%{opacity:.25}50%{opacity:.9}}
.footer-stars span{animation:footStar 3s ease-in-out infinite}

/* ─── BUTTONS ─── */
.appstore{display:inline-flex;align-items:center;gap:12px;padding:18px 26px 16px 22px;border-radius:18px;background:var(--ink);color:#fff;font-family:var(--serif);font-size:19px;line-height:1.1;position:relative;overflow:hidden;transition:transform .25s,box-shadow .35s}
.appstore .platform{font-family:var(--mono);font-size:10px;letter-spacing:.25em;text-transform:uppercase;opacity:.7;display:block;margin-bottom:2px}
.appstore svg{width:24px;height:24px}
.appstore::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);transform:translateX(-100%);transition:transform .9s}
.appstore:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.35)}
.appstore:hover::before{transform:translateX(100%)}
.btn-ghost{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:99px;border:1px solid currentColor;font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;transition:background .25s,transform .25s}
.btn-ghost:hover{transform:translateY(-2px);background:rgba(0,0,0,.04)}
.dark-mode .btn-ghost:hover{background:rgba(255,255,255,.08)}
.price{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.6}

/* ─── REVEAL ON SCROLL ─── */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-stagger>*{opacity:0;transform:translateY(50px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal-stagger.in>*{opacity:1;transform:translateY(0)}
.reveal-stagger.in>*:nth-child(1){transition-delay:0s}
.reveal-stagger.in>*:nth-child(2){transition-delay:.08s}
.reveal-stagger.in>*:nth-child(3){transition-delay:.16s}
.reveal-stagger.in>*:nth-child(4){transition-delay:.24s}
.reveal-stagger.in>*:nth-child(5){transition-delay:.32s}
.reveal-stagger.in>*:nth-child(6){transition-delay:.4s}
.reveal-stagger.in>*:nth-child(7){transition-delay:.48s}
.reveal-stagger.in>*:nth-child(8){transition-delay:.56s}
.reveal-stagger.in>*:nth-child(9){transition-delay:.64s}
.reveal-stagger.in>*:nth-child(10){transition-delay:.72s}

/* ─── SUB-PAGE HERO ─── */
.subhero{position:relative;padding:200px 80px 120px;overflow:hidden}
.subhero-inner{max-width:1320px;margin:0 auto;position:relative;z-index:2}
.subhero-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.45em;text-transform:uppercase;margin-bottom:32px;display:flex;align-items:center;gap:14px;color:var(--gold)}
.subhero-eyebrow::before{content:'';width:50px;height:1px;background:currentColor}
.subhero-title{font-family:var(--serif);font-size:180px;line-height:.9;font-weight:300;letter-spacing:-.04em;margin-bottom:40px}
.subhero-title em{font-style:italic;color:var(--gold)}
.subhero-sub{font-family:var(--serif);font-size:28px;font-style:italic;line-height:1.4;max-width:680px;color:var(--sepia)}

.subhero.day{background:radial-gradient(ellipse 80% 60% at 20% 20%, #faf2dc 0%, transparent 60%),linear-gradient(180deg,#fbf3de 0%, #f1e6c8 100%)}
.subhero.night{background:radial-gradient(ellipse 70% 60% at 80% 30%, #3b2a8e 0%, transparent 60%),linear-gradient(180deg, var(--night-2) 0%, var(--night) 100%);color:var(--lavender-2)}
.subhero.night .subhero-eyebrow{color:var(--lavender)}
.subhero.night .subhero-title em{color:var(--lavender)}
.subhero.night .subhero-sub{color:var(--lavender-2);opacity:.8}
.subhero.dusk{background:linear-gradient(180deg,var(--cream-paper) 0%, #c89f6a 50%, #3a2a8e 100%);color:var(--ink)}

/* Subhero celestial ornaments */
.sub-sun{position:absolute;left:-80px;top:80px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle at 40% 40%, #ffe9b3 0%, #d8a44c 60%, transparent 70%);filter:blur(.5px);box-shadow:0 0 200px 50px rgba(212,164,76,.3);opacity:.5;pointer-events:none}
.sub-moon{position:absolute;right:-60px;top:60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle at 35% 35%, #f0e8ff 0%, #b9a8ff 50%, #6b54c4 100%);box-shadow:0 0 180px 40px rgba(139,109,255,.4);opacity:.55;pointer-events:none}

/* ─── PAGE BACKGROUND ─── */
body.day{background:var(--cream);color:var(--ink)}
body.night{background:var(--night);color:var(--lavender-2)}

/* ─── SHARED ANIMATIONS ─── */
@keyframes fadeUpY{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes navFade{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes orbitDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.nav{animation:navFade 1s ease both .1s}
.subhero-eyebrow{animation:fadeUpY 1s ease both .2s}
.subhero-title{animation:fadeUpY 1.2s ease both .4s}
.subhero-sub{animation:fadeUpY 1.2s ease both .7s}
.sub-sun{animation:orbitDrift 9s ease-in-out infinite}
.sub-moon{animation:orbitDrift 11s ease-in-out infinite reverse}

/* ─── SHOOTING STARS (reusable in night hero/sections) ─── */
.shooting-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.shooting{position:absolute;width:160px;height:1px;background:linear-gradient(90deg,transparent,#fff6e4 30%,#c8b8ff 80%,transparent);transform-origin:0 50%;opacity:0;filter:drop-shadow(0 0 6px rgba(255,246,228,.9))}
.shooting::before{content:'';position:absolute;right:0;top:50%;width:6px;height:6px;border-radius:50%;background:#fff6e4;transform:translateY(-50%);box-shadow:0 0 20px 4px rgba(255,246,228,.8)}
@keyframes shoot{0%{opacity:0;transform:translate(0,0) rotate(var(--ang,18deg)) scaleX(.3)}10%{opacity:1}100%{opacity:0;transform:translate(var(--dx,420px),var(--dy,180px)) rotate(var(--ang,18deg)) scaleX(1)}}
.shooting.run{animation:shoot 1.6s cubic-bezier(.4,.1,.7,1) forwards}

/* ─── ICON: APPLE LOGO PATH for App Store ─── */
.apple-d{fill:currentColor}

/* ─── COMMON: section, eyebrow ─── */
.section-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.4em;text-transform:uppercase;display:flex;align-items:center;gap:12px;margin-bottom:28px;color:var(--gold)}
.section-eyebrow::before{content:'';display:inline-block;width:32px;height:1px;background:currentColor}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — tablet ≤ 1024, mobile ≤ 720
   ════════════════════════════════════════════════════════════════ */

/* Hamburger menu (added by page.js when needed) */
.nav-toggle{display:none;background:transparent;border:0;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;color:inherit;padding:0;border-radius:8px}
.nav-toggle:hover{background:rgba(0,0,0,.05)}
.nav.dark .nav-toggle:hover,.nav.scrolled .nav-toggle:hover{background:rgba(255,255,255,.08)}
.nav-toggle .bar{display:block;width:24px;height:1.5px;background:currentColor;margin:4px 0;transition:transform .3s,opacity .3s}
.nav-toggle.open .bar:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-toggle.open .bar:nth-child(2){opacity:0}
.nav-toggle.open .bar:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

@media (max-width: 1024px){
  .nav{padding:18px 28px}
  .nav ul{gap:22px}
  .footer{padding:80px 32px 40px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:48px 32px}
  .subhero{padding:160px 32px 80px}
  .subhero-title{font-size:120px}
  .subhero-sub{font-size:22px}
}

@media (max-width: 720px){
  /* Nav: collapse list to a hamburger drawer */
  .nav{padding:14px 20px}
  .nav .brand{font-size:22px}
  .nav .brand .mark{width:32px;height:32px}
  .nav .brand .mark svg{width:16px;height:16px}
  .nav .brand .mono{font-size:12px;letter-spacing:.28em}
  .nav .brand .pipe{margin:0 2px}
  .nav ul{position:fixed;top:60px;left:0;right:0;flex-direction:column;gap:0;background:rgba(10,8,32,.96);backdrop-filter:blur(20px);padding:24px 28px 32px;border-bottom:1px solid rgba(200,184,255,.14);transform:translateY(calc(-100% - 80px));transition:transform .35s cubic-bezier(.2,.7,.3,1),visibility 0s .35s;color:var(--lavender-2);visibility:hidden}
  .nav.menu-open ul{transform:translateY(0);visibility:visible;transition:transform .35s cubic-bezier(.2,.7,.3,1),visibility 0s 0s}
  .nav ul li{padding:14px 0;border-bottom:1px solid rgba(200,184,255,.1)}
  .nav ul li:last-child{border-bottom:none}
  .nav ul a{font-size:13px;letter-spacing:.28em;color:var(--lavender-2)}
  .nav .cta{display:none}
  .nav-toggle{display:flex}

  /* Subhero */
  .subhero{padding:120px 20px 60px}
  .subhero-eyebrow{font-size:10px;letter-spacing:.32em;margin-bottom:20px}
  .subhero-title{font-size:72px;line-height:.95;margin-bottom:28px}
  .subhero-sub{font-size:18px;max-width:100%}
  .sub-sun,.sub-moon{width:160px;height:160px;opacity:.35}
  .sub-sun{left:-50px;top:60px}
  .sub-moon{right:-40px;top:40px}

  /* Footer */
  .footer{padding:60px 20px 32px}
  .footer-grid{grid-template-columns:1fr;gap:40px;padding-bottom:48px}
  .footer-brand .glyph-wrap{font-size:32px}
  .footer-bottom{flex-direction:column;gap:12px;text-align:center;font-size:10px}

  /* Reveal motion shouldn't be a layout shift on mobile */
  .reveal{transform:translateY(20px)}
  .reveal-stagger>*{transform:translateY(24px)}
}