/* ===========================================================
   Typic — Cobalt Authority design system
   Ink + Cobalt + Cloud. Space Grotesk / Hanken Grotesk / Space Mono.
   Display font is a CSS var (var(--display)) so it stays tweakable.
   =========================================================== */

:root{
  --display:'Space Grotesk', system-ui, sans-serif;   /* tweakable */

  --glow:46,91,255;          /* accent glow rgb */
  --grad-1:#7C9BFF; --grad-2:#A9BEFF; --grad-3:#5E83FF;  /* headline gradient */
  --mark-radius:28%;         /* logo tile shape (squircle) */

  --ink:#0B1220;          /* cool near-black */
  --ink-2:#101a30;        /* raised */
  --ink-3:#1b2742;
  --mist:#F5F7FB;         /* cool near-white */
  --mist-2:#EAF0FF;       /* cobalt tint */
  --iris:#7C9BFF;         /* light accent / sky */
  --indigo:#2E5BFF;       /* primary accent (cobalt) */
  --indigo-d:#2348DB;     /* hover */
  --indigo-soft:#E3EAFF;
  --line:#E3E8F2;         /* cool hairline */
  --line-2:#D7DEEC;
  --slate:#566377;        /* body text on mist/white */
  --slate-dim:#8893A6;    /* muted */
  --ink-dim:#8C97B4;      /* muted on ink */
  --ink-soft:#C2CCE0;     /* body on ink */
}

*{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  color:var(--ink);
  background:#fff;
  margin:0;
}
::selection{ background:var(--iris); color:#fff; }

.font-display{ font-family:var(--display); }
.font-mono{ font-family:'Space Mono',ui-monospace,monospace; }
h1,h2,h3,.font-display,.wordmark{ letter-spacing:-0.035em; }

/* ---- Brand mark + wordmark ---- */
.brandmark{
  border-radius:var(--mark-radius); background:var(--indigo); display:grid; place-items:center;
  overflow:hidden; flex:none; position:relative;
  box-shadow:0 6px 18px -10px rgba(var(--glow),.6);
}
.brandmark > .bm-glyph, .brandmark > span{
  font-family:var(--display); font-weight:800; color:#fff;
  line-height:1; display:block; letter-spacing:-0.05em;
}
.bm-cursor{
  position:absolute; bottom:23%; width:34%; height:9%;
  border-radius:2px; background:#fff; opacity:.92;
}
.brandmark.ink{ background:var(--ink); }
.wordmark{
  font-family:var(--display); font-weight:800; line-height:1;
}

/* ---- Surfaces ---- */
.surface-ink{
  background:
    radial-gradient(120% 90% at 84% -10%, rgba(var(--glow),.34) 0%, rgba(var(--glow),0) 48%),
    radial-gradient(90% 80% at 6% 0%, rgba(var(--glow),.13) 0%, rgba(var(--glow),0) 52%),
    linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
  position:relative;
}
.surface-ink::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 75%);
  mask-image:radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 75%);
}
.surface-ink > *{ position:relative; z-index:1; }
.bg-mist{ background:var(--mist); }
.glow{ filter:blur(60px); opacity:.6; }

/* ---- Text gradient (iris→indigo, sparing) ---- */
.text-grad{
  background:linear-gradient(100deg,var(--grad-1) 0%, var(--grad-2) 45%, var(--grad-3) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--display); font-weight:700;
  border-radius:999px; padding:.85rem 1.5rem; font-size:1rem; line-height:1;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, background .18s, color .18s;
  cursor:pointer; border:1px solid transparent; white-space:nowrap; text-decoration:none;
  letter-spacing:-0.02em;
}
.btn-indigo{
  background:var(--indigo); color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 12px 26px -10px rgba(79,70,229,.7);
}
.btn-indigo:hover{ background:var(--indigo-d); transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 18px 32px -10px rgba(79,70,229,.85); }
.btn-ghost{ background:rgba(255,255,255,.05); color:#EEEEFB; border-color:rgba(255,255,255,.18); backdrop-filter:blur(6px); }
.btn-ghost:hover{ background:rgba(255,255,255,.11); transform:translateY(-2px); }
.btn-ink{ background:var(--ink); color:#fff; }
.btn-ink:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(20,19,43,.5); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-outline:hover{ background:var(--mist); transform:translateY(-2px); }
.btn-sm{ padding:.62rem 1.1rem; font-size:.92rem; }

/* ---- Nav ---- */
#nav{ transition:padding .25s ease; }
.nav-glass{
  background:rgba(20,19,43,.7);
  backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.09);
}
#nav.scrolled .nav-glass{ background:rgba(16,15,34,.88); box-shadow:0 10px 30px -18px rgba(0,0,0,.7); }
.nav-link{ color:#C7C7DE; font-weight:500; text-decoration:none; transition:color .15s; }
.nav-link:hover{ color:#fff; }
#mobileMenu{ display:none; }
#mobileMenu.open{ display:block; }
.menu-icon span{ display:block; width:20px; height:2px; background:#dcdcec; border-radius:2px; transition:.2s; }
.menu-icon span + span{ margin-top:5px; }

/* ---- Pills / chips ---- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Space Mono',monospace; font-size:.74rem; letter-spacing:.13em; text-transform:uppercase;
  padding:.4rem .8rem; border-radius:999px;
}
.eyebrow-dark{ background:rgba(156,151,242,.14); color:var(--iris); border:1px solid rgba(156,151,242,.32); }
.eyebrow-light{ background:var(--mist-2); color:var(--indigo); border:1px solid #DEDDFA; }

.kw-chip{
  font-family:'Space Mono',monospace; font-size:.78rem;
  padding:.32rem .62rem; border-radius:8px;
  background:var(--mist-2); color:var(--indigo); border:1px solid #DEDDFA;
}

/* ---- Cards ---- */
.card-soft{
  background:#fff; border:1px solid var(--line); border-radius:20px;
  box-shadow:0 1px 2px rgba(20,19,43,.04), 0 18px 40px -28px rgba(20,19,43,.22);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
}
.lift:hover{ transform:translateY(-6px); box-shadow:0 1px 2px rgba(20,19,43,.04), 0 30px 55px -30px rgba(20,19,43,.34); border-color:var(--line-2); }

.step-num{
  font-family:var(--display); font-weight:800; font-size:.9rem;
  width:2rem; height:2rem; border-radius:9px; display:grid; place-items:center;
  background:var(--indigo); color:#fff;
}
.feat-ic{
  width:2.75rem; height:2.75rem; border-radius:13px;
  background:var(--mist-2); border:1px solid #DEDDFA; color:var(--indigo);
  display:grid; place-items:center; font-size:1.15rem;
  font-family:var(--display); font-weight:800;
}

/* ---- Product mockup ---- */
.mock-card{ background:#fff; border-radius:18px; box-shadow:0 30px 60px -24px rgba(20,19,43,.5); }
.float-a{ animation:floatA 7s ease-in-out infinite; }
.float-b{ animation:floatB 8s ease-in-out infinite; }
@keyframes floatA{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
@keyframes floatB{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(10px) } }

.photo-tile{ background:linear-gradient(135deg,#252153,#16142f); position:relative; overflow:hidden; border-radius:8px; }
.photo-tile::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, rgba(156,151,242,.10) 0 8px, transparent 8px 16px);
}
.post-card{ background:#fff; border-radius:16px; border:1px solid #ECECF6; box-shadow:0 24px 50px -20px rgba(20,19,43,.4); }

/* ---- Scroll reveal (visible by default; hidden only when JS present) ---- */
html.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
html.js .reveal.in{ opacity:1; transform:none; }
html.js .reveal[data-d="1"]{ transition-delay:.08s } html.js .reveal[data-d="2"]{ transition-delay:.16s }
html.js .reveal[data-d="3"]{ transition-delay:.24s } html.js .reveal[data-d="4"]{ transition-delay:.32s }

@media (prefers-reduced-motion: reduce){
  html.js .reveal{ opacity:1 !important; transform:none !important; transition:none; }
  .float-a,.float-b{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ---- Utilities ---- */
.hairline{ height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent); }
.hairline-d{ height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); }
.section{ padding-top:clamp(4.5rem,9vw,8rem); padding-bottom:clamp(4.5rem,9vw,8rem); }
.wrap{ width:100%; max-width:1180px; margin:0 auto; padding-left:1.5rem; padding-right:1.5rem; }

/* ---- Hero animated-demo frame ---- */
.demo-wrap{ position:relative; width:100%; max-width:1080px; }
.demo-glow{ position:absolute; inset:-8% -6% -12%; z-index:0; pointer-events:none;
  background:radial-gradient(58% 50% at 50% 30%, rgba(var(--glow),0.42), transparent 72%);
  filter:blur(46px); }
.demo-frame{ position:relative; z-index:1; width:100%; border-radius:16px; overflow:hidden;
  background:#0B1220; border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 40px 100px -34px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.04); }
.demo-chrome{ display:flex; align-items:center; gap:8px; padding:11px 15px;
  background:rgba(255,255,255,0.04); border-bottom:1px solid rgba(255,255,255,0.08); }
.demo-chrome .dot{ width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,0.16); }
.demo-url{ margin-left:12px; font-size:12px; color:#7E8CA6; letter-spacing:0.05em; }
.demo-screen{ position:relative; aspect-ratio:16 / 9; background:#0B1220; }
.demo-screen iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
  pointer-events:none; opacity:0; transition:opacity .6s ease; }
.demo-frame.ready .demo-screen iframe{ opacity:1; }
.demo-poster{ position:absolute; inset:0; display:grid; place-items:center; gap:14px;
  background:#0B1220; transition:opacity .6s ease; z-index:2; }
.demo-frame.ready .demo-poster{ opacity:0; pointer-events:none; }
.demo-poster .spark{ font-size:30px; color:var(--iris);
  animation:posterPulse 1.25s ease-in-out infinite; }
.demo-poster .plabel{ font-family:'Space Mono',monospace; font-size:13px; letter-spacing:0.12em;
  text-transform:uppercase; color:#5C6B86; }
@keyframes posterPulse{ 0%,100%{ opacity:.35; transform:scale(.9) } 50%{ opacity:1; transform:scale(1.05) } }
@media (prefers-reduced-motion: reduce){ .demo-poster .spark{ animation:none; } }