/* ============================================================
   fnstudio — portfolio site styles
   Cool-slate neutral ground; each app supplies its own accent.
   ============================================================ */
:root{
  --ink:#0B0E14; --ink-2:#0F141C; --surface:#141922; --surface-2:#1A212C;
  --line:#232C3B; --line-2:#2E3949; --text:#EDF1F7; --muted:#8B97AB; --faint:#5C6779;
  --studio:#5B8CFF; --good:#34D399; --warn:#F5B14C;
  --accent:#5B8CFF; /* overridden per app-page via inline style */
  --maxw:1180px; --r-card:20px; --r-chip:999px;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Menlo",monospace;
  --s--1:clamp(0.78rem,0.75rem + 0.15vw,0.86rem);
  --s-0:clamp(0.98rem,0.94rem + 0.2vw,1.06rem);
  --s-1:clamp(1.2rem,1.1rem + 0.5vw,1.45rem);
  --s-2:clamp(1.6rem,1.3rem + 1.4vw,2.3rem);
  --s-3:clamp(2.6rem,1.8rem + 4vw,5.2rem);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--sans);font-size:var(--s-0);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
::selection{background:rgba(91,140,255,0.35);color:#fff;}
img{max-width:100%;display:block;}

#bg{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(60vw 60vw at 15% -10%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 60%),
  radial-gradient(50vw 50vw at 95% 8%, color-mix(in srgb,var(--accent) 10%,transparent), transparent 55%),
  radial-gradient(70vw 70vw at 50% 120%, rgba(120,90,255,0.09), transparent 60%);
  transition:background .6s ease;}
#grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0.5;
  background-image:radial-gradient(rgba(255,255,255,0.025) 1px,transparent 1px);background-size:3px 3px;}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.4rem);}

/* Nav */
header.nav{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);
  background:linear-gradient(to bottom,rgba(11,14,20,0.85),rgba(11,14,20,0.55));border-bottom:1px solid var(--line);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;letter-spacing:-0.02em;}
.brand .wordmark{font-weight:800;}
.brand .wordmark .fn{background:linear-gradient(120deg,#8FB4FF,#5B8CFF 45%,#7C5BFF);-webkit-background-clip:text;background-clip:text;color:transparent;}
.brand .wordmark .studio{color:var(--text);}
.brand .mark{width:26px;height:26px;border-radius:8px;
  background:conic-gradient(from 210deg,#2E7AEF,#5B8CFF,#7C5BFF,#2E7AEF);
  box-shadow:0 0 0 1px rgba(255,255,255,0.08),0 6px 18px rgba(91,140,255,0.4);}
.nav-links{display:flex;gap:1.4rem;font-size:var(--s--1);color:var(--muted);}
.nav-links a{transition:color .2s;}
.nav-links a:hover{color:var(--text);}
.back{display:inline-flex;align-items:center;gap:.4rem;color:var(--muted);font-size:var(--s--1);transition:color .2s;}
.back:hover{color:var(--text);}
@media (max-width:640px){.nav-links{display:none;}}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.72rem 1.15rem;border-radius:var(--r-chip);
  font-weight:600;font-size:var(--s-0);border:1px solid transparent;cursor:pointer;
  transition:transform .15s,box-shadow .25s,background .2s;}
.btn-primary{background:var(--accent);color:#08111f;box-shadow:0 8px 26px color-mix(in srgb,var(--accent) 35%,transparent);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 34px color-mix(in srgb,var(--accent) 50%,transparent);}
.btn-ghost{border-color:var(--line-2);color:var(--text);}
.btn-ghost:hover{background:var(--surface);border-color:var(--faint);}

/* Hero (home) */
.hero{padding:clamp(3.5rem,9vw,7rem) 0 clamp(2rem,5vw,3.5rem);}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;}
.hero-phone{display:grid;place-items:center;}
.hero-phone-frame{--w:250px;width:var(--w);border-radius:calc(var(--w)*0.15);padding:calc(var(--w)*0.035);
  background:linear-gradient(160deg,#2a3547,#0e1620);border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 50px 90px -30px rgba(0,0,0,0.8),inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 0 1px rgba(91,140,255,0.04);
  transform:rotate(-4deg);transition:transform .5s ease;
  animation:hero-float 6s ease-in-out infinite;}
.hero-phone-frame:hover{transform:rotate(-2deg) translateY(-6px);}
.hero-phone-frame img{width:100%;border-radius:calc(var(--w)*0.11);display:block;}
@keyframes hero-float{0%,100%{transform:rotate(-4deg) translateY(0);}50%{transform:rotate(-4deg) translateY(-12px);}}
@media (prefers-reduced-motion:reduce){.hero-phone-frame{animation:none;}}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr;}.hero-phone{display:none;}}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--s--1);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 10px var(--good);}
h1{font-size:var(--s-3);line-height:0.98;letter-spacing:-0.035em;font-weight:800;margin:1.1rem 0 0;max-width:17ch;text-wrap:balance;}
h1 .grad{background:linear-gradient(100deg,#8FB4FF,#5B8CFF 40%,#9B7CFF);-webkit-background-clip:text;background-clip:text;color:transparent;}
.lede{margin:1.4rem 0 0;max-width:56ch;font-size:var(--s-1);color:#C6CFDD;line-height:1.5;}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem;}

/* Tenets */
.tenets{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:clamp(2.5rem,6vw,4rem);
  background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.tenet{background:var(--ink-2);padding:1.3rem 1.4rem;}
.tenet h3{margin:0;font-size:var(--s-0);letter-spacing:-0.01em;}
.tenet p{margin:.35rem 0 0;color:var(--muted);font-size:var(--s--1);line-height:1.5;}
.tenet .k{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--studio);text-transform:uppercase;}
@media (max-width:720px){.tenets{grid-template-columns:1fr;}}

/* Section head */
.sec{padding:clamp(2.5rem,6vw,4.5rem) 0;}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:2rem;flex-wrap:wrap;}
.sec-head h2{font-size:var(--s-2);letter-spacing:-0.03em;margin:0;font-weight:800;text-wrap:balance;}
.sec-head p{margin:.4rem 0 0;color:var(--muted);max-width:46ch;}
.sec-index{font-family:var(--mono);color:var(--faint);font-size:var(--s--1);letter-spacing:.1em;}

/* Tag filter bar */
.filterbar{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.6rem;}
.fchip{font-family:var(--sans);font-size:var(--s--1);font-weight:600;color:var(--muted);cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-chip);
  padding:.42rem .9rem;transition:color .2s,border-color .2s,background .2s;}
.fchip:hover{color:var(--text);border-color:var(--faint);}
.fchip.is-active{color:#08111f;background:var(--studio);border-color:var(--studio);}
.fchip:focus-visible{outline:2px solid var(--studio);outline-offset:2px;}

/* Card tag chips */
.ctags{display:flex;flex-wrap:wrap;gap:.35rem;margin:.9rem 0 0;}
.ctag{font-size:.68rem;color:var(--muted);background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);border-radius:var(--r-chip);padding:.16rem .5rem;
  letter-spacing:.02em;}

/* App grid (home) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.1rem;}
.card{--accent:var(--studio);position:relative;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  transition:transform .25s,border-color .25s,box-shadow .3s;}
.card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 55%,var(--line));
  box-shadow:0 20px 50px -24px color-mix(in srgb,var(--accent) 60%,transparent);}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* Screenshot / preview header — a whole phone floating in an accent panel */
.card .shot{position:relative;height:248px;overflow:hidden;display:grid;place-items:center;
  background:
    radial-gradient(120% 90% at 50% -20%, color-mix(in srgb,var(--accent) 34%,transparent), transparent 60%),
    linear-gradient(160deg,color-mix(in srgb,var(--accent) 22%,#0c1420),#0b0f16);
  border-bottom:1px solid var(--line);}
/* Stacked / fanned phones */
.card .stack{position:relative;width:100%;height:100%;}
.card .mp{position:absolute;bottom:-34px;left:50%;border-radius:22px;padding:5px;
  background:linear-gradient(160deg,#232c3b,#0e1620);border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 24px 46px -18px rgba(0,0,0,0.8),inset 0 1px 0 rgba(255,255,255,0.10);
  transition:transform .45s ease;}
.card .mp img{width:100%;border-radius:17px;display:block;}
/* one phone: centered */
.stack-1 .mp-0{width:150px;transform:translateX(-50%);}
/* two phones: side by side, slight tilt */
.stack-2 .mp{width:124px;}
.stack-2 .mp-0{transform:translateX(-86%) rotate(-6deg);z-index:2;}
.stack-2 .mp-1{transform:translateX(-14%) rotate(6deg);z-index:1;}
/* three phones: center front, two behind fanned out */
.stack-3 .mp{width:118px;}
.stack-3 .mp-0{transform:translateX(-50%) translateY(6px);z-index:3;}
.stack-3 .mp-1{transform:translateX(-104%) rotate(-9deg) translateY(18px);z-index:2;}
.stack-3 .mp-2{transform:translateX(4%) rotate(9deg) translateY(18px);z-index:1;}
.card:hover .stack-1 .mp-0{transform:translateX(-50%) translateY(-8px);}
.card:hover .stack-2 .mp-0{transform:translateX(-90%) rotate(-7deg) translateY(-6px);}
.card:hover .stack-2 .mp-1{transform:translateX(-10%) rotate(7deg) translateY(-6px);}
.card:hover .stack-3 .mp-0{transform:translateX(-50%) translateY(-2px);}
.card:hover .stack-3 .mp-1{transform:translateX(-110%) rotate(-10deg) translateY(10px);}
.card:hover .stack-3 .mp-2{transform:translateX(10%) rotate(10deg) translateY(10px);}
.card .shot.placeholder .ph-glyph{font-size:3.4rem;color:#fff;opacity:.92;
  filter:drop-shadow(0 6px 16px color-mix(in srgb,var(--accent) 60%,transparent));}
.card .card-body{padding:1.3rem 1.4rem;display:flex;flex-direction:column;flex:1;}
.card .top{display:flex;align-items:center;justify-content:space-between;}
.icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 90%,#000),color-mix(in srgb,var(--accent) 55%,#7C5BFF));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.25),0 6px 16px -6px var(--accent);color:#fff;font-weight:800;font-size:1.15rem;}
.icon.has-img{background:none;box-shadow:0 6px 16px -6px var(--accent);padding:0;overflow:hidden;}
.icon.has-img img{width:100%;height:100%;object-fit:cover;border-radius:13px;}
.rank{font-family:var(--mono);font-size:.72rem;color:var(--faint);letter-spacing:.1em;}
.card h3{margin:1rem 0 .2rem;font-size:var(--s-1);letter-spacing:-0.02em;font-weight:700;}
.card .pitch{color:var(--muted);font-size:var(--s--1);line-height:1.5;margin:0;flex:1;}
.card .foot{display:flex;align-items:center;justify-content:space-between;margin-top:1.3rem;padding-top:1rem;border-top:1px solid var(--line);}
.price{font-family:var(--mono);font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;}
.price .cur{color:var(--accent);}
.arrow{color:var(--accent);font-weight:700;transition:transform .2s;}
.card:hover .arrow{transform:translateX(3px);}
.status-pill{position:absolute;top:1.2rem;right:1.2rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.24rem .5rem;border-radius:var(--r-chip);}
.status-pill.built{color:var(--good);background:rgba(52,211,153,0.12);border:1px solid rgba(52,211,153,0.3);}
.status-pill.planned{color:var(--warn);background:rgba(245,177,76,0.1);border:1px solid rgba(245,177,76,0.28);}

/* Eye-catching STAMP badge (top-left, tilted like a rubber stamp / seal) */
.badge-ribbon{position:absolute;top:16px;left:12px;z-index:3;
  font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  padding:.4rem .7rem;line-height:1;
  border:2px solid rgba(255,255,255,0.85);border-radius:8px;
  background:transparent;
  transform:rotate(-9deg);
  box-shadow:0 4px 14px -4px rgba(0,0,0,0.55);
  text-shadow:0 1px 2px rgba(0,0,0,0.35);white-space:nowrap;
  transition:transform .3s ease;}
.card:hover .badge-ribbon{transform:rotate(-6deg) scale(1.05);}
/* double-ring stamp outline */
.badge-ribbon::after{content:"";position:absolute;inset:2px;border:1px solid rgba(255,255,255,0.45);border-radius:5px;pointer-events:none;}
/* colour comes from a tinted fill + coloured ink */
.badge-hot{background:linear-gradient(120deg,rgba(255,61,127,0.92),rgba(255,107,74,0.92));border-color:rgba(255,255,255,0.9);}
.badge-pop{background:linear-gradient(120deg,rgba(124,91,255,0.92),rgba(91,140,255,0.92));border-color:rgba(255,255,255,0.9);}
.badge-value{background:linear-gradient(120deg,rgba(18,184,134,0.92),rgba(12,166,120,0.92));border-color:rgba(255,255,255,0.9);}
.badge-new{background:linear-gradient(120deg,rgba(245,177,76,0.94),rgba(245,158,11,0.94));border-color:rgba(255,255,255,0.9);color:#3a2600;text-shadow:none;}

/* ===== App page ===== */
.app-hero{padding:clamp(2.5rem,6vw,4.5rem) 0 1rem;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;}
.app-hero .icon-lg{width:76px;height:76px;border-radius:20px;display:grid;place-items:center;font-size:2rem;font-weight:800;color:#fff;
  background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 90%,#000),color-mix(in srgb,var(--accent) 55%,#7C5BFF));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.25),0 10px 30px -8px var(--accent);margin-bottom:1.3rem;}
.app-hero .icon-lg.has-img{background:none;padding:0;overflow:hidden;}
.app-hero .icon-lg.has-img img{width:100%;height:100%;object-fit:cover;border-radius:20px;}
.app-hero h1{font-size:clamp(2.2rem,1.6rem+3vw,3.6rem);margin:0;max-width:14ch;}
.app-hero .tagline{color:var(--accent);font-weight:600;font-size:var(--s-1);margin:.6rem 0 0;}
.app-hero .desc{color:#C6CFDD;margin:1.2rem 0 0;max-width:52ch;font-size:var(--s-1);line-height:1.5;}
.app-meta{display:flex;gap:1.6rem;margin-top:1.8rem;flex-wrap:wrap;}
.app-meta div{display:flex;flex-direction:column;}
.app-meta .lab{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);}
.app-meta .val{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--text);font-weight:600;}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem;}
.chips span{font-size:var(--s--1);color:var(--muted);border:1px solid var(--line-2);padding:.3rem .65rem;border-radius:var(--r-chip);}

/* Hero device (right column) */
.hero-device{display:grid;place-items:center;}
@media (max-width:860px){.app-hero{grid-template-columns:1fr;}.hero-device{order:-1;}}

/* Device frame */
.phone-frame{--w:280px;width:var(--w);border-radius:calc(var(--w)*0.14);padding:calc(var(--w)*0.035);
  background:linear-gradient(160deg,#232c3b,#0e1620);border:1px solid rgba(255,255,255,0.09);
  box-shadow:0 40px 80px -24px rgba(0,0,0,0.7),inset 0 1px 0 rgba(255,255,255,0.08);}
.phone-frame img{border-radius:calc(var(--w)*0.10);width:100%;}
.pad-frame{--w:420px;width:var(--w);border-radius:calc(var(--w)*0.045);padding:calc(var(--w)*0.02);
  background:linear-gradient(160deg,#232c3b,#0e1620);border:1px solid rgba(255,255,255,0.09);
  box-shadow:0 40px 80px -24px rgba(0,0,0,0.7),inset 0 1px 0 rgba(255,255,255,0.08);}
.pad-frame img{border-radius:calc(var(--w)*0.03);width:100%;}

/* Carousel */
.gallery{padding-block:clamp(2rem,5vw,3.5rem);}
.rail{display:flex;gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.5rem .2rem 1.5rem;scrollbar-width:thin;}
.rail::-webkit-scrollbar{height:8px;}
.rail::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:999px;}
.slide{scroll-snap-align:center;flex:0 0 auto;text-align:center;}
.slide figcaption{margin-top:.9rem;color:var(--muted);font-size:var(--s--1);}
.rail-nav{display:flex;gap:.6rem;justify-content:flex-end;margin-top:-.5rem;}
.rail-nav button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);color:var(--text);
  cursor:pointer;font-size:1.1rem;transition:background .2s,border-color .2s;}
.rail-nav button:hover{background:var(--surface-2);border-color:var(--accent);}

/* Feature list */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;}
.feature{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:1.4rem;}
.feature .fi{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:.9rem;
  background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);font-size:1.2rem;}
.feature h4{margin:0 0 .3rem;font-size:var(--s-0);letter-spacing:-0.01em;}
.feature p{margin:0;color:var(--muted);font-size:var(--s--1);line-height:1.5;}

/* Coming soon */
.soon{background:var(--surface);border:1px dashed var(--line-2);border-radius:var(--r-card);padding:clamp(1.6rem,4vw,2.6rem);text-align:center;}
.soon .badge{display:inline-flex;align-items:center;gap:.5rem;color:var(--warn);font-family:var(--mono);font-size:var(--s--1);
  letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(245,177,76,0.28);background:rgba(245,177,76,0.08);padding:.35rem .7rem;border-radius:var(--r-chip);}
.soon h3{margin:1rem 0 .3rem;font-size:var(--s-1);}
.soon p{margin:0 auto;color:var(--muted);max-width:44ch;}

/* Footer */
footer{border-top:1px solid var(--line);padding:3rem 0 4rem;margin-top:3rem;color:var(--muted);}
footer .wrap{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:center;}
footer .studio-mark{display:flex;align-items:center;gap:.5rem;color:var(--text);font-weight:700;}
footer .fine{font-size:var(--s--1);}

/* Reveal — progressive enhancement. JS adds .in on scroll; a CSS fallback
   guarantees visibility even if the observer never fires (e.g. no-JS, headless). */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;
  animation:reveal-fallback 0.01s linear 1.2s forwards;}
.reveal.in{opacity:1;transform:none;animation:none;}
@keyframes reveal-fallback{to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;animation:none;}}
.no-js .reveal{opacity:1;transform:none;animation:none;}