/* ============================================================================
   perstudio.ai — one-pager. Token-based, DaVinci-toned, Switzer.
   Palette ported verbatim from the product (web/src/styles.css) so the site and
   the app read as one system. Three tiers: primitives → semantic → component.
   ========================================================================== */

@font-face { font-family:"Switzer"; font-weight:400; font-style:normal; font-display:swap; src:url("/fonts/switzer-400.woff2") format("woff2"); }
@font-face { font-family:"Switzer"; font-weight:500; font-style:normal; font-display:swap; src:url("/fonts/switzer-500.woff2") format("woff2"); }
@font-face { font-family:"Switzer"; font-weight:600; font-style:normal; font-display:swap; src:url("/fonts/switzer-600.woff2") format("woff2"); }
@font-face { font-family:"Switzer"; font-weight:700; font-style:normal; font-display:swap; src:url("/fonts/switzer-700.woff2") format("woff2"); }

:root {
  /* ── primitives (raw palette, from the product) ─────────────────────────── */
  --c-graphite-950:#0e0e0e; --c-graphite-900:#141414; --c-graphite-850:#1c1c1c;
  --c-graphite-800:#232323; --c-graphite-750:#303030; --c-graphite-720:#2a2a2a;
  --c-graphite-700:#3a3a3a;
  --c-ink-100:#d4d4d4; --c-ink-300:#9a9a9a; --c-ink-500:#6e6e6e; --c-white:#ffffff;
  --c-azure:#6699c4; --c-azure-deep:#4a7396;
  --c-green:#7fb069; --c-red:#d96459; --c-steel:#7e8c99; --c-orange:#d4a843;
  --a-azure-33:#6699c455; --a-azure-15:#6699c426; --a-azure-08:#6699c414;
  --a-green-20:#7fb06933; --a-red-25:#d9645940; --a-orange-20:#d4a84333;

  /* ── semantic (role aliases) ────────────────────────────────────────────── */
  --bg:var(--c-graphite-950);
  --bg-2:var(--c-graphite-900);
  --panel:var(--c-graphite-850);
  --panel-2:var(--c-graphite-800);
  --line:var(--c-graphite-720);
  --line-2:var(--c-graphite-700);
  --text:var(--c-ink-100);
  --text-strong:var(--c-white);
  --muted:var(--c-ink-300);
  --faint:var(--c-ink-500);
  --accent:var(--c-azure);
  --accent-deep:var(--c-azure-deep);
  --accent-soft:var(--a-azure-15);
  --accent-wash:var(--a-azure-08);
  --accent-glow:var(--a-azure-33);
  --on-accent:#0a1720;

  /* port hues — the app's typed-wire language, reused as accents */
  --hue-image:var(--c-azure);
  --hue-mask:var(--c-green);
  --hue-video:var(--c-orange);
  --hue-custody:var(--c-steel);

  --sans:"Switzer",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;

  /* ── scale ──────────────────────────────────────────────────────────────── */
  --step--1:clamp(.78rem,.76rem + .1vw,.84rem);
  --step-0:clamp(.95rem,.92rem + .15vw,1.02rem);
  --step-1:clamp(1.1rem,1rem + .5vw,1.3rem);
  --step-2:clamp(1.4rem,1.2rem + 1vw,1.9rem);
  --step-3:clamp(1.9rem,1.5rem + 2vw,2.9rem);
  --step-4:clamp(2.6rem,1.9rem + 3.4vw,4.6rem);
  --space:clamp(4.5rem,3rem + 6vw,8rem);
  --radius:14px; --radius-sm:9px;
  --edge:clamp(1.15rem,3vw,2.5rem);
  --maxw:1120px;
  --shadow:0 1px 0 #ffffff08 inset, 0 24px 60px -30px #000000cc;
}

/* ── reset-ish ────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-weight:400; font-size:var(--step-0);
  line-height:1.6; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
::selection{background:var(--accent); color:var(--on-accent)}
h1,h2,h3{margin:0; font-weight:600; line-height:1.08; letter-spacing:-.02em; color:var(--text-strong)}
p{margin:0}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--edge)}
.mono{font-family:var(--mono); font-size:.9em; letter-spacing:0}
.eyebrow{
  font-size:var(--step--1); text-transform:uppercase; letter-spacing:.22em;
  color:var(--faint); font-weight:600;
}

/* ── nav ──────────────────────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid transparent;
  transition:border-color .3s;
}
.nav.scrolled{border-bottom-color:var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.02em; color:var(--text-strong)}
.brand .dot{width:15px; height:15px; border-radius:5px;
  background:linear-gradient(150deg,var(--accent),var(--accent-deep));
  box-shadow:0 0 0 1px #ffffff14 inset, 0 0 16px -2px var(--accent-glow)}
.brand b{font-size:.98rem}
.nav-cta{
  font-size:var(--step--1); font-weight:600; color:var(--text);
  padding:.5rem .95rem; border:1px solid var(--line-2); border-radius:8px;
  transition:border-color .2s, background .2s, color .2s;
}
.nav-cta:hover{border-color:var(--accent); color:var(--text-strong); background:var(--accent-wash)}

/* ── buttons ──────────────────────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:var(--step-0);
  padding:.75rem 1.4rem; border-radius:10px; cursor:pointer; transition:all .2s; border:1px solid transparent}
.btn-primary{background:var(--accent); color:var(--on-accent); box-shadow:0 0 30px -10px var(--accent-glow)}
.btn-primary:hover{background:#79a9cf; box-shadow:0 0 40px -8px var(--accent-glow); transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-2); color:var(--text)}
.btn-ghost:hover{border-color:var(--accent); color:var(--text-strong)}

/* ── hero ─────────────────────────────────────────────────────────────────── */
.hero{position:relative; padding-top:clamp(3.5rem,7vw,6rem); padding-bottom:var(--space); overflow:hidden}
.hero::before{ /* azure aurora */
  content:""; position:absolute; inset:-30% -10% auto -10%; height:70vh; z-index:0;
  background:radial-gradient(60% 60% at 50% 0%, var(--a-azure-08), transparent 70%);
  pointer-events:none;
}
.hero-in{position:relative; z-index:1; text-align:center; max-width:820px; margin-inline:auto}
.hero h1{font-size:var(--step-4); font-weight:700; letter-spacing:-.035em}
.hero h1 .grad{background:linear-gradient(100deg,var(--text-strong) 30%,var(--accent) 130%);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .lede{margin-top:1.4rem; font-size:var(--step-1); color:var(--muted); font-weight:400; line-height:1.5}
.hero .cta-row{margin-top:2.2rem; display:flex; gap:.85rem; justify-content:center; flex-wrap:wrap}
.hero .subnote{margin-top:1.5rem; font-size:var(--step--1); color:var(--faint);
  display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; align-items:center}
.hero .subnote .sep{width:3px; height:3px; border-radius:50%; background:var(--line-2)}

/* framed screenshot */
.frame{
  position:relative; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel); box-shadow:var(--shadow); overflow:hidden;
}
.frame img{width:100%; height:auto}
.hero-shot{margin-top:clamp(2.5rem,5vw,4rem); position:relative; z-index:1}
.hero-shot .frame{transform:perspective(1600px) rotateX(2deg)}
.hero-shot::after{ /* glow under the hero image */
  content:""; position:absolute; inset:auto 8% -18% 8%; height:60%; z-index:-1;
  background:radial-gradient(50% 100% at 50% 0%, var(--accent-glow), transparent 70%);
  filter:blur(30px); opacity:.5;
}

/* ── section shell ────────────────────────────────────────────────────────── */
section{padding-block:var(--space); position:relative}
.section-head{max-width:720px}
.section-head.center{margin-inline:auto; text-align:center}
.section-head h2{font-size:var(--step-3); margin-top:.7rem}
.section-head p{margin-top:1rem; color:var(--muted); font-size:var(--step-1); font-weight:400}
.divider{height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent)}

/* ── premise strip (the atom) ─────────────────────────────────────────────── */
.premise{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.premise > div{background:var(--bg-2); padding:1.8rem 1.6rem}
.premise h3{font-size:var(--step-1); font-weight:600}
.premise .k{font-family:var(--mono); font-size:var(--step--1); color:var(--accent); letter-spacing:0}
.premise p{margin-top:.55rem; color:var(--muted); font-size:var(--step--1); line-height:1.55}

/* ── product rows (the suite) ─────────────────────────────────────────────── */
.product{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.product.flip .copy{order:2}
.product.flip .media{order:1}
.product .tag{display:inline-flex; align-items:center; gap:.5rem; font-size:var(--step--1);
  font-weight:600; letter-spacing:.02em; padding:.3rem .7rem; border-radius:100px;
  border:1px solid var(--line-2); color:var(--muted)}
.product .tag .swatch{width:9px; height:9px; border-radius:3px}
.product h2{font-size:var(--step-2); margin-top:1rem}
.product .copy > p{margin-top:1rem; color:var(--muted); font-size:var(--step-1); font-weight:400}
.feat{margin-top:1.6rem; display:flex; flex-direction:column; gap:.7rem}
.feat li{list-style:none; display:flex; gap:.7rem; align-items:flex-start; color:var(--text); font-size:var(--step-0)}
.feat li .mk{flex:none; margin-top:.5em; width:6px; height:6px; border-radius:2px; background:var(--accent)}
.feat li b{font-weight:600; color:var(--text-strong)}
ul.feat{padding:0; margin-block:1.6rem 0}

/* ── under the hood grid ──────────────────────────────────────────────────── */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:2.5rem}
.card{border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg-2); padding:1.5rem}
.card h3{font-size:var(--step-0); font-weight:600; display:flex; align-items:center; gap:.55rem}
.card h3 .ic{width:8px; height:8px; border-radius:3px; flex:none}
.card p{margin-top:.6rem; color:var(--muted); font-size:var(--step--1); line-height:1.55}

/* ── CTA band ─────────────────────────────────────────────────────────────── */
.cta-band{text-align:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:radial-gradient(70% 130% at 50% 0%, var(--a-azure-08), transparent 60%)}
.cta-band h2{font-size:var(--step-3)}
.cta-band p{margin-top:1rem; color:var(--muted); font-size:var(--step-1); max-width:560px; margin-inline:auto}
.cta-band .cta-row{margin-top:2rem; display:flex; gap:.85rem; justify-content:center; flex-wrap:wrap}

/* ── footer ───────────────────────────────────────────────────────────────── */
footer{padding-block:3rem; color:var(--faint); font-size:var(--step--1)}
.foot-in{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem}
.foot-in a:hover{color:var(--text)}

/* ── responsive ───────────────────────────────────────────────────────────── */
@media (max-width:860px){
  .premise{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .product{grid-template-columns:1fr; gap:1.8rem}
  .product.flip .copy{order:1} .product.flip .media{order:2}
  .hero-shot .frame{transform:none}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .nav-cta{display:none}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important; transition:none!important; animation:none!important}}

/* reveal-on-scroll */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}