/* NaveenCodes — App detail pages · warm/gold premium · self-contained */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:#FAF8F3; --elev:#FFFFFF; --soft:#F2EDE3; --soft2:#EBE5D8;
  --border:#E4DDCD; --border2:#D4CBB5;
  --ink:#1A1814; --ink2:#3D3A33; --mut:#6B6760; --faint:#9C9890;
  --gold:#B8935A; --gold-soft:#D4B584; --gold-deep:#8C6E3F; --glow:rgba(184,147,90,.12);
  --ok:#5C7C5C;
  --grad:linear-gradient(135deg,#B8935A,#8C6E3F);
  --thread:linear-gradient(90deg,transparent,#B8935A,transparent);
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ background:var(--bg); color:var(--ink2); font-family:'Plus Jakarta Sans',system-ui,sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ max-width:1120px; margin:0 auto; padding:0 28px; }
.serif{ font-family:'Instrument Serif',Georgia,serif; font-weight:400; }
.it{ font-style:italic; color:var(--gold-deep); }
.mono{ font-family:'JetBrains Mono',monospace; }
.eyebrow{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); }
.thread{ height:1px; background:var(--thread); border:0; opacity:.6; }
.amb{ position:fixed; inset:0; z-index:-1; background:radial-gradient(ellipse 70% 40% at 50% -5%,rgba(184,147,90,.12),transparent 70%); }

/* NAV */
nav{ position:fixed; top:0; left:0; right:0; z-index:700; background:rgba(255,255,255,.96); border-bottom:1px solid var(--border); height:68px; display:flex; align-items:center; }
.nav-in{ width:100%; max-width:1120px; margin:0 auto; padding:0 28px; display:flex; align-items:center; justify-content:space-between; }
.nav-logo{ display:flex; align-items:center; gap:9px; font-weight:700; color:var(--ink); font-size:15px; }
.logo-sq{ width:30px; height:30px; border-radius:8px; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; }
.nav-links{ display:flex; align-items:center; gap:24px; list-style:none; font-size:14px; color:var(--mut); }
.nav-links a{ transition:color .2s; }
.nav-links a:hover{ color:var(--ink); }
.has-dd{ position:relative; }
.dd{ position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(6px); min-width:230px; background:#fff; border:1px solid var(--border); border-radius:14px; padding:8px; box-shadow:0 18px 50px rgba(26,24,20,.12); opacity:0; visibility:hidden; transition:.2s; }
.has-dd:hover .dd{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.dd a{ display:block; padding:9px 13px; border-radius:9px; font-size:14px; color:var(--ink2); white-space:nowrap; }
.dd a:hover{ background:var(--soft); color:var(--gold-deep); }
.nav-btn{ background:var(--grad); color:#fff !important; padding:9px 16px; border-radius:9px; font-size:13px; font-weight:600; }
.nav-burger{ display:none; width:42px; height:42px; border:1px solid var(--border); background:#fff; border-radius:10px; font-size:18px; color:var(--ink); cursor:pointer; align-items:center; justify-content:center; }
.nav-scrim{ display:none; }
.nav-mobile{ display:none; }

@media(max-width:1024px){
  nav{ -webkit-backdrop-filter:none; backdrop-filter:none; }
  .nav-links,.nav-btn{ display:none !important; }
  .nav-burger{ display:flex !important; }
  .nav-in{ padding:0 18px; }
  .nav-mobile{ display:block; position:fixed; inset:0; width:100vw; height:100vh; background:var(--bg); padding:84px 26px 48px; overflow-y:auto; transform:translateX(-100%); transition:transform .32s cubic-bezier(.2,.7,.2,1); z-index:99999; }
  .nav-mobile.open{ transform:translateX(0); }
  .nav-mobile a{ display:block; color:var(--ink); font-size:18px; font-weight:600; padding:15px 2px; border-bottom:1px solid var(--border); }
  .nav-mobile a:active{ color:var(--gold-deep); }
  .nav-mobile .nm-h{ color:var(--gold-deep); font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin:26px 0 6px; }
  .nav-mobile .nm-h:first-child{ margin-top:0; }
  .nav-close{ position:absolute; top:22px; right:24px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); background:#fff; border-radius:11px; font-size:20px; color:var(--ink); cursor:pointer; }
}
@media(min-width:1025px){ .nav-mobile,.nav-scrim{ display:none !important; } }

/* HERO */
.hero{ padding:128px 0 56px; background:radial-gradient(ellipse 70% 50% at 50% 0%,var(--glow),transparent 70%); }
.back-link{ display:inline-flex; gap:6px; font-size:13px; color:var(--mut); margin-bottom:26px; }
.back-link:hover{ color:var(--gold-deep); }
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.hero-cat{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.hero-cat .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); }
.hero h1{ font-family:'Instrument Serif',serif; font-size:clamp(40px,7vw,76px); line-height:1; letter-spacing:-.03em; color:var(--ink); }
.hero h1 em{ font-style:italic; color:var(--gold-deep); }
.app-sub{ font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--mut); margin-top:14px; }
.hero-lede{ font-size:18px; line-height:1.6; color:var(--ink2); max-width:32em; margin-top:18px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.chip{ font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--mut); background:var(--elev); border:1px solid var(--border); padding:6px 12px; border-radius:50px; }
.chip.ok{ color:var(--ok); border-color:color-mix(in srgb,var(--ok) 30%,var(--border)); }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.btn{ display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:12px; font-weight:600; font-size:15px; cursor:pointer; transition:transform .15s,box-shadow .2s,border-color .2s; border:1px solid transparent; }
.btn:active{ transform:translateY(1px); }
.btn-pri{ background:var(--grad); color:#fff; box-shadow:0 8px 24px var(--glow); }
.btn-gho{ background:var(--elev); color:var(--ink); border-color:var(--border2); }
.btn-gho:hover{ border-color:var(--gold); color:var(--gold-deep); }
.btn.disabled{ opacity:.5; pointer-events:none; }
.btn small{ font-family:'JetBrains Mono',monospace; font-size:11px; opacity:.7; font-weight:400; }

/* PHONE MOCKUP */
.device{ justify-self:center; }
.phone{ width:266px; height:546px; border-radius:38px; padding:11px; background:#14120e; box-shadow:0 34px 80px rgba(26,24,20,.32),0 0 0 1px var(--border2); position:relative; }
.phone::before{ content:''; position:absolute; top:18px; left:50%; transform:translateX(-50%); width:52px; height:5px; border-radius:3px; background:rgba(255,255,255,.18); z-index:3; }
.scr{ width:100%; height:100%; border-radius:28px; overflow:hidden; position:relative; display:flex; flex-direction:column; }
.scr-top{ padding:30px 18px 14px; }
.scr-title{ font-weight:800; font-size:20px; letter-spacing:.5px; }
.scr-sub{ font-size:11px; opacity:.8; margin-top:2px; }
.scr-body{ flex:1; padding:6px 14px 14px; display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.scr-card{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:11px 12px; }
.scr-card .l1{ font-size:12px; font-weight:700; }
.scr-card .l2{ font-size:10.5px; opacity:.75; margin-top:3px; }
.scr-tabs{ display:flex; gap:0; border-top:1px solid rgba(255,255,255,.12); padding:10px 6px; justify-content:space-around; }
.scr-tab{ font-size:9px; opacity:.7; display:flex; flex-direction:column; align-items:center; gap:3px; }
.scr-tab .ic{ font-size:15px; }

/* SECTIONS */
section{ padding:64px 0; }
.sec-head{ margin-bottom:38px; }
.sec-head h2{ font-family:'Instrument Serif',serif; font-size:clamp(28px,4.5vw,46px); line-height:1.07; letter-spacing:-.02em; color:var(--ink); margin-top:10px; }
.sec-head p{ font-size:16px; color:var(--mut); max-width:40em; margin-top:12px; }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.stat{ background:var(--elev); padding:24px 16px; text-align:center; }
.stat-n{ font-family:'Instrument Serif',serif; font-size:34px; line-height:1; color:var(--ink); }
.stat-l{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); margin-top:8px; }

.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feat{ background:var(--elev); border:1px solid var(--border); border-radius:16px; padding:24px; transition:transform .2s,border-color .2s; }
.feat:hover{ transform:translateY(-3px); border-color:var(--border2); }
.feat-ic{ font-size:24px; margin-bottom:12px; }
.feat-t{ font-weight:700; color:var(--ink); font-size:16px; margin-bottom:5px; letter-spacing:-.01em; }
.feat-d{ font-size:14px; color:var(--mut); line-height:1.55; }

/* screens row */
.screens{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.scell{ background:var(--elev); border:1px solid var(--border); border-radius:14px; padding:18px 12px; text-align:center; }
.scell .ic{ font-size:26px; }
.scell .n{ font-weight:700; font-size:13px; color:var(--ink); margin-top:8px; }
.scell .d{ font-size:11.5px; color:var(--mut); margin-top:3px; }

/* privacy band */
.band{ background:var(--soft); border:1px solid var(--border); border-radius:22px; padding:42px 36px; }
.band h2{ font-family:'Instrument Serif',serif; font-size:clamp(26px,4vw,42px); color:var(--ink); letter-spacing:-.02em; }
.band p{ color:var(--mut); margin:14px 0 0; max-width:42em; }
.band-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.band-row .chip{ background:var(--elev); }

/* tribute + footer */
.tribute{ text-align:center; padding:46px 0; }
.tribute-line{ font-family:'Instrument Serif',serif; font-style:italic; font-size:clamp(19px,3vw,26px); color:var(--ink); }
.tribute-line .hh{ color:#c0506a; font-style:normal; }
.tribute-sub{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--gold-deep); letter-spacing:.06em; margin-top:8px; }

.site-footer{ background:var(--soft); border-top:1px solid var(--border); padding:60px 0 0; }
.sf-top{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr 1fr; gap:40px; }
.sf-brand .sf-logo{ display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ink); font-size:17px; margin-bottom:16px; }
.sf-tag{ font-family:'Instrument Serif',serif; font-size:23px; color:var(--ink); margin-bottom:14px; }
.sf-tribute{ font-size:13.5px; color:var(--mut); line-height:1.6; }
.sf-tribute a{ color:var(--gold-deep); }
.sf-col h4{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:16px; font-weight:500; }
.sf-col a{ display:block; font-size:14px; color:var(--ink2); padding:6px 0; }
.sf-col a:hover{ color:var(--gold-deep); }
.sf-bottom{ border-top:1px solid var(--border); margin-top:54px; padding:24px 0 30px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.sf-bottom span{ font-size:12.5px; color:var(--mut); }
.sf-bottom a{ font-size:12.5px; color:var(--gold-deep); }

.rv{ opacity:0; transform:translateY(20px); transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1); }
.rv.in{ opacity:1; transform:none; }

/* RESPONSIVE */
@media(max-width:980px){
  .sf-top{ grid-template-columns:1fr 1fr 1fr; gap:30px 22px; } .sf-brand{ grid-column:1/-1; }
  .feat-grid{ grid-template-columns:1fr 1fr; } .screens{ grid-template-columns:1fr 1fr 1fr; }
}
@media(max-width:860px){ .hero-grid{ grid-template-columns:1fr; gap:36px; } .device{ order:-1; } }
@media(max-width:768px){
  section{ padding:48px 0; } .hero{ padding:104px 0 40px; }
  .stats{ grid-template-columns:1fr 1fr; }
  .screens{ grid-template-columns:1fr 1fr; }
}
@media(max-width:560px){
  .feat-grid{ grid-template-columns:1fr; } .sf-top{ grid-template-columns:1fr 1fr; }
  .sf-bottom{ flex-direction:column; align-items:flex-start; }
  .wrap{ padding:0 18px; } .band{ padding:32px 22px; }
}

/* ════════════════════════════════════════════════
   FOOTER PRO v8 — CTA band + refined footer + journey space
════════════════════════════════════════════════ */

/* journey: give the last timeline item breathing room at the bottom */
#experience .exp-item:last-child{ padding-bottom:26px !important; }

/* footer CTA band */
.site-footer{ padding-top:0 !important; }
.sf-cta{ display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; padding:58px 0 46px; }
.sf-cta-eye{ display:inline-flex; align-items:center; gap:9px; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#8C6E3F; }
.sf-cta-eye::before{ content:''; width:7px; height:7px; border-radius:50%; background:#5C7C5C; box-shadow:0 0 0 3px rgba(92,124,92,.18); }
.sf-cta-h{ font-family:'Instrument Serif',serif; font-weight:400; font-size:clamp(26px,4.2vw,42px); line-height:1.08; letter-spacing:-.02em; color:#1A1814; margin-top:12px; max-width:14ch; }
.sf-cta-h span{ font-style:italic; color:#8C6E3F; }
.sf-cta-btn{ display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,#B8935A,#8C6E3F); color:#fff !important; padding:15px 26px; border-radius:12px; font-weight:600; font-size:15px; white-space:nowrap; box-shadow:0 8px 24px rgba(184,147,90,.25); transition:transform .15s,box-shadow .2s; }
.sf-cta-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 34px rgba(184,147,90,.32); }
.sf-divider{ height:1px; border:0; margin:0; background:linear-gradient(90deg,transparent,#B8935A,transparent); opacity:.5; }
.sf-top{ padding-top:48px !important; }

/* refined bottom bar */
.sf-bottom .sf-made a{ color:#c0506a; }
.sf-bottom{ align-items:center; }

@media(max-width:640px){
  .sf-cta{ padding:44px 0 32px; gap:18px; }
  .sf-cta-btn{ width:100%; justify-content:center; }
}