/* Go Stash It — marketing site styles. Scoped so nothing leaks into the Flutter app. */
:root{
  --bg:#0B1220;--bg2:#0F172A;--ink:#0F172A;--paper:#FFFFFF;--paper2:#F6F8FB;--muted:#5B6B82;--line:#E3E8F0;
  --brand:#2563EB;--brand2:#60A5FA;--amber:#F59E0B;--emerald:#10B981;--rose:#F43F5E;--violet:#8B5CF6;
  --radius:20px;--max:1180px;
  --font-head:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
html:not(.app){scroll-behavior:smooth;background:var(--bg);color-scheme:light}
html:not(.app) body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
html.app body{background:#F5F7FA;margin:0}
html.app #site,html.app .nav,html.app .progress{display:none}
#site *,#site *::before,#site *::after,.nav *{box-sizing:border-box}
#site a,.nav a{text-decoration:none}
#site a:not(.btn),.nav a:not(.btn):not(.brand){color:inherit}
#site img,#site svg,.nav img{display:block;max-width:100%}
#site h1,#site h2,#site h3{font-family:var(--font-head);letter-spacing:-.02em;margin:0}
/* Components below lay their own text out, so paragraphs start with no margin.
   The id makes this rule (1,0,1) beat any plain class selector, so every
   intentional paragraph margin has to be restated at #site strength — see
   "paragraph flow" near the end of this file. Do not add margins to `.foo p`
   alone; it will silently lose to this. */
#site p{margin:0}
.wrap{width:min(var(--max),calc(100% - 48px));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* progress bar */
.progress{position:fixed;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--brand),var(--brand2),var(--amber));transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}
@supports (animation-timeline: scroll()){.progress{animation:grow linear both;animation-timeline:scroll(root)}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;font-family:var(--font-body);transition:background .3s,box-shadow .3s}
.nav .wrap{display:flex;align-items:center;gap:28px;height:72px}
.nav.scrolled{background:rgba(11,18,32,.72);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.nav.light{color:var(--ink)}
.nav.light.scrolled{background:rgba(255,255,255,.82);box-shadow:0 1px 0 rgba(15,23,42,.08)}
.nav .brand,.footer .brand{color:#fff}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:800;font-size:1.1rem;color:#fff}
.nav.light .brand{color:var(--ink)}
.nav.light.open .brand{color:#fff}
.brand img{width:34px;height:34px;border-radius:9px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.nav-links{display:flex;gap:26px;margin-left:auto;font-weight:500;font-size:.95rem;color:rgba(255,255,255,.78)}
.nav.light .nav-links{color:var(--muted)}
.nav-links a:hover{color:#fff}.nav.light .nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex;gap:10px;align-items:center}
.nav.light .btn-ghost{color:var(--ink);border-color:var(--line);background:#fff}
.burger{display:none;margin-left:auto;background:none;border:0;color:#fff;width:44px;height:44px;border-radius:12px;cursor:pointer}
.nav.light .burger{color:var(--ink)}
.burger span{display:block;width:22px;height:2px;background:currentColor;margin:5px auto;transition:transform .25s,opacity .25s}
.nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border-radius:14px;font-weight:600;font-size:.95rem;border:1px solid transparent;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s,border-color .18s;white-space:nowrap;font-family:var(--font-body)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg,#3B82F6,#2563EB 55%,#1D4ED8);color:#fff;box-shadow:0 10px 30px -10px rgba(37,99,235,.75),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(37,99,235,.9),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.18)}
.btn-ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.btn-outline{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-outline:hover{border-color:#CBD5E1;transform:translateY(-2px)}
.btn-lg{height:54px;padding:0 26px;font-size:1.02rem;border-radius:16px}
.btn-sm{height:40px;padding:0 16px;font-size:.9rem;border-radius:12px}
.btn .arrow{transition:transform .2s}.btn:hover .arrow{transform:translateX(3px)}
[hidden]{display:none!important}

/* stage: sticky 3D visual + scrolling hero/story */
.stage{position:relative;color:#fff}
.stage-visual{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:radial-gradient(1200px 700px at 78% 35%,rgba(37,99,235,.35),transparent 60%),radial-gradient(900px 600px at 15% 90%,rgba(245,158,11,.14),transparent 60%),linear-gradient(180deg,#0B1220,#0F172A 60%,#0B1220)}
.stage-visual::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(70% 60% at 60% 45%,#000 30%,transparent 100%);-webkit-mask-image:radial-gradient(70% 60% at 60% 45%,#000 30%,transparent 100%)}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s ease}
.webgl-ready #hero-canvas{opacity:1}
.no-webgl #hero-canvas{display:none}
.no-webgl .stage-visual::after{content:"";position:absolute;right:-10%;top:15%;width:55vw;height:55vw;max-width:720px;max-height:720px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(96,165,250,.35),rgba(37,99,235,.08) 55%,transparent 70%);filter:blur(10px)}
.stage-visual .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,18,32,.92) 0%,rgba(11,18,32,.72) 26%,rgba(11,18,32,.15) 46%,rgba(11,18,32,0) 58%);pointer-events:none}
.stage-content{position:relative;margin-top:-100vh;margin-top:-100svh}
.hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:120px 0 80px;position:relative}
.hero-inner{max-width:640px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-size:.82rem;font-weight:500;color:#DCE6F5}
.eyebrow b{display:inline-flex;align-items:center;gap:6px;background:var(--emerald);color:#052e1c;font-weight:700;border-radius:999px;padding:2px 9px;font-size:.74rem;letter-spacing:.02em}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.4rem);line-height:1.02;font-weight:800;margin:22px 0 18px;text-wrap:balance}
.hero h1 .grad{background:linear-gradient(92deg,#93C5FD,#60A5FA 40%,#FBBF24);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.6;color:#C7D2E3;max-width:560px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.platforms{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:.85rem;color:#DCE6F5}
.pill svg{width:16px;height:16px;opacity:.9}
.pill .dot{width:7px;height:7px;border-radius:50%;background:#34D399;box-shadow:0 0 0 4px rgba(52,211,153,.18)}
.pill .soon{font-size:.72rem;font-weight:600;color:#FCD34D;background:rgba(251,191,36,.14);padding:2px 7px;border-radius:999px}
/* Android is shipped: its badge is a real link to the Play listing. */
a.pill.pill-link{color:#fff;cursor:pointer;background:rgba(37,99,235,.16);border-color:rgba(96,165,250,.4);font-weight:600;transition:transform .18s,background .18s,border-color .18s,box-shadow .18s}
a.pill.pill-link:hover{transform:translateY(-2px);background:rgba(37,99,235,.28);border-color:rgba(147,197,253,.65);box-shadow:0 12px 26px -14px rgba(37,99,235,.9)}
a.pill.pill-link:focus-visible{outline:2px solid #93C5FD;outline-offset:3px}
a.pill.pill-link .arrow{transition:transform .2s}
a.pill.pill-link:hover .arrow{transform:translateX(3px)}
/* iOS is not shipped: visibly inert, not a link. */
.pill.pill-soon{opacity:.55;color:#94A3B8;background:rgba(255,255,255,.03);border-style:dashed}
.pill.pill-soon svg{opacity:.6}
.cta-platforms{justify-content:center;margin-top:26px}
.section .cta-platforms .pill,.article .cta-platforms .pill{color:#DCE6F5}
.scroll-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.scroll-hint i{width:1px;height:38px;background:linear-gradient(180deg,rgba(255,255,255,.7),transparent);animation:drip 1.8s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.story-step{min-height:90vh;display:flex;align-items:center;padding:40px 0}
html.js .story-step .step-card{opacity:0;transform:translateY(34px) scale(.98)}
.step-card{max-width:520px;padding:30px 32px;border-radius:24px;background:rgba(15,23,42,.62);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 30px 80px -30px rgba(0,0,0,.7);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
html.js .story-step.in-view .step-card{opacity:1;transform:none}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--brand),#1D4ED8);font-family:var(--font-head);font-weight:800;box-shadow:0 8px 20px -8px rgba(37,99,235,.9)}
.step-card h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin:16px 0 10px;line-height:1.15}
.step-card p{color:#C7D2E3;line-height:1.65;font-size:1.02rem}
.step-card .kw{color:#fff;font-weight:600}
.story-end{height:16vh}

/* light sections */
.section{padding:104px 0;background:var(--paper);color:var(--ink)}
.section.alt{background:var(--paper2)}
.section-head{max-width:720px;margin:0 auto 56px;text-align:center}
.kicker{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:14px}
.section h2{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.1;font-weight:800;text-wrap:balance}
.section .sub{color:var(--muted);font-size:1.08rem;line-height:1.65;margin-top:16px}
.grid{display:grid;gap:22px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:transform .25s,box-shadow .25s,border-color .25s;transform-style:preserve-3d}
.card:hover{box-shadow:0 30px 60px -30px rgba(15,23,42,.35);border-color:#CBD5E1}
.card .icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;color:#fff;transform:translateZ(30px)}
.card h3{font-size:1.2rem;margin-bottom:8px;transform:translateZ(20px)}
.card p{color:var(--muted);line-height:1.6;font-size:.97rem;transform:translateZ(10px)}
.i-blue{background:linear-gradient(135deg,#60A5FA,#2563EB)}.i-amber{background:linear-gradient(135deg,#FBBF24,#F59E0B)}.i-green{background:linear-gradient(135deg,#34D399,#059669)}
.i-rose{background:linear-gradient(135deg,#FB7185,#E11D48)}.i-violet{background:linear-gradient(135deg,#A78BFA,#7C3AED)}.i-slate{background:linear-gradient(135deg,#64748B,#334155)}
.card .icon svg{width:24px;height:24px}

/* hierarchy diagram */
.hier{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hier-copy h2{margin-bottom:16px}
.hier-copy p{color:var(--muted);line-height:1.7;font-size:1.05rem}
.hier-copy ul{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.hier-copy li{display:flex;gap:12px;align-items:flex-start;color:var(--ink);line-height:1.5}
.hier-copy li svg{flex:none;width:22px;height:22px;color:var(--emerald);margin-top:2px}
.nest{position:relative;padding:22px;border-radius:24px;background:linear-gradient(180deg,#EEF4FF,#F8FAFC);border:1px solid #DBE4F3;perspective:1200px}
.nest .lvl{border-radius:18px;border:1px solid;padding:16px;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.nest .lvl>header{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:700;font-size:.95rem;margin-bottom:12px}
.nest .lvl>header i{width:10px;height:10px;border-radius:3px}
.nest .lvl>header small{margin-left:auto;font-weight:500;color:var(--muted);font-size:.78rem}
.l1{background:#fff;border-color:#C7D7F5}.l1>header i{background:var(--brand)}
.l2{background:#F5F9FF;border-color:#C7D7F5}.l2>header i{background:var(--violet)}
.l3{background:#FFF9EE;border-color:#F3DFB6}.l3>header i{background:var(--amber)}
.items{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.item{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #E7EDF6;border-radius:10px;padding:8px 10px;font-size:.82rem;font-weight:500}
.item i{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,#E2E8F0,#CBD5E1);flex:none}
.nest:hover .l1{transform:rotateX(6deg) rotateY(-6deg)}
.qr-tag{position:absolute;right:-14px;top:-14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;box-shadow:0 18px 40px -18px rgba(15,23,42,.35);display:flex;gap:10px;align-items:center;animation:float 5s ease-in-out infinite}
.qr-tag svg{width:44px;height:44px}
.qr-tag b{display:block;font-size:.72rem;letter-spacing:.08em;color:var(--muted)}
.qr-tag span{font-weight:700;font-size:.9rem}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* use cases */
.uc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 26px 28px;position:relative;overflow:hidden}
.uc::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--c,var(--brand))}
.uc h3{font-size:1.15rem;margin:8px 0 8px}
.uc p{color:var(--muted);line-height:1.6;font-size:.96rem}
.uc .tag{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c,var(--brand))}
.uc a.more{display:inline-block;margin-top:12px;font-weight:600;color:var(--brand);font-size:.92rem}

/* how */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;position:relative}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--font-head);font-weight:800;font-size:2.4rem;line-height:1;color:#DBE4F3}
.step h3{font-size:1.15rem;margin:14px 0 8px}
.step p{color:var(--muted);line-height:1.6;font-size:.96rem}

/* faq */
.faq{max-width:820px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:0 22px;margin-bottom:12px;transition:box-shadow .25s}
.faq details[open]{box-shadow:0 20px 50px -30px rgba(15,23,42,.35)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 0;font-family:var(--font-head);font-weight:700;font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--paper2);color:var(--brand);font-weight:600;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{color:var(--muted);line-height:1.7;padding:0 0 20px;font-size:.98rem}

/* cta */
.cta{padding:110px 0;background:radial-gradient(900px 500px at 50% 0%,rgba(37,99,235,.45),transparent 65%),linear-gradient(180deg,#0F172A,#0B1220);color:#fff;text-align:center}
.cta h2{font-size:clamp(2rem,4vw,3.2rem);font-weight:800;line-height:1.08;text-wrap:balance}
.cta p{color:#C7D2E3;font-size:1.1rem;margin:16px auto 32px;max-width:600px;line-height:1.6}
.cta .hero-actions{justify-content:center;margin-top:0}

/* footer */
.footer{background:#0B1220;color:#94A3B8;padding:44px 0 36px;border-top:1px solid rgba(255,255,255,.06);font-size:.9rem}
.footer .wrap{display:flex;flex-wrap:wrap;gap:20px 34px;align-items:center}
.footer .brand{font-size:1rem}
.footer nav{display:flex;gap:22px;flex-wrap:wrap;margin-left:auto}
.footer a:hover{color:#fff}
.footer .copy{width:100%;font-size:.82rem;color:#64748B}

/* article pages (SEO landers) */
.article{padding:140px 0 90px;background:var(--paper);color:var(--ink)}
.article .wrap{max-width:820px}
.article h1{font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1.06;font-weight:800;margin:14px 0 18px;text-wrap:balance}
.article .lede{font-size:1.15rem;color:var(--muted);line-height:1.7}
.article h2{font-size:1.6rem;margin:44px 0 12px}
.article p,.article li{line-height:1.75;color:#334155;font-size:1.02rem}
.article ul{padding-left:22px}
.article .callout{margin:34px 0;padding:24px 26px;border-radius:18px;background:linear-gradient(135deg,#EEF4FF,#F8FAFC);border:1px solid #DBE4F3}
.article .callout p{margin-bottom:14px}

/* paragraph flow — these restate margins at #site strength so they beat the
   `#site p{margin:0}` reset above. Without the id prefix the CTA paragraph
   loses its auto margins and sits flush left inside a much wider container
   instead of centred under the heading. */
#site .section .sub{margin-top:16px}
#site .cta p{margin:16px auto 32px}
#site .article p{margin:0 0 18px}
#site .article .lede{margin-bottom:6px}
#site .article .callout p{margin:0 0 14px}
#site .article li{margin-bottom:10px}

/* reveal */
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
html.js .reveal.in-view{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}.reveal[data-d="3"]{transition-delay:.24s}.reveal[data-d="4"]{transition-delay:.32s}.reveal[data-d="5"]{transition-delay:.4s}

@media (prefers-reduced-motion: reduce){
  html:not(.app){scroll-behavior:auto}
  #hero-canvas{transition:none}
  html.js .reveal,html.js .story-step .step-card{opacity:1;transform:none;transition:none}
  .qr-tag,.scroll-hint i{animation:none}
  .card,.nest .lvl{transition:none}
}
@media (max-width:1000px){
  .grid-3,.steps{grid-template-columns:repeat(2,1fr)}
  .hier{grid-template-columns:1fr;gap:40px}
  .nav-links,.nav-cta{display:none}
  .burger{display:block}
  .nav.open .nav-links,.nav.open .nav-cta{display:flex;flex-direction:column;align-items:stretch;gap:6px}
  .nav.open .wrap{flex-wrap:wrap;height:auto;padding:14px 0 18px}
  .nav.open{background:rgba(11,18,32,.96)}
  .nav.open .nav-links{width:100%;margin:6px 0 0;order:3;font-size:1.05rem}
  .nav.open .nav-links a{padding:10px 4px;border-bottom:1px solid rgba(255,255,255,.07)}
  .nav.open .nav-cta{width:100%;order:4;margin-top:8px}
  .nav.open .burger{order:2}
  .nav.light.open{color:#fff;background:rgba(11,18,32,.96)}
  .nav.light.open .brand{color:#fff}
  .stage-visual .scrim{background:linear-gradient(180deg,rgba(11,18,32,.25) 0%,rgba(11,18,32,.75) 55%,rgba(11,18,32,.9) 100%)}
}
@media (max-width:640px){
  .wrap{width:calc(100% - 32px)}
  .grid-3,.grid-2,.steps{grid-template-columns:1fr}
  .section{padding:76px 0}
  .hero{padding:110px 0 90px}
  .hero-actions .btn{flex:1 1 100%}
  .step-card{padding:24px}
  .story-step{min-height:78vh}
  .items{grid-template-columns:repeat(2,1fr)}
  .qr-tag{right:6px;top:-18px}
  .footer nav{margin-left:0}
}