/* ============================================================================
   Crowe Logic / DeepParallel - Canonical Design System
   Dark editorial + liquid glass. Source of truth: deepparallel.org.
   Drop this one file into any app, add a <div class="aura"> at the page root,
   give panels class="glass". See README.md for per-framework wiring.

   HARD RULES baked in: no emojis, no em dashes, gold is the primary accent.
   Corner decision: panels tightened to 16-18px (editorial), pills stay rounded,
   raw terminal/code surfaces sit closer to square. See --r-* tokens below.
   ========================================================================== */

:root{
  /* canvas + ink */
  --bg:#080a0d; --ink:#eceae4; --dim:#a3a097; --faint:#666561;
  /* gold (Crowe Logic, primary accent) */
  --gold:#d2ad62; --gold-2:#e7c984; --gold-dim:#9a7e44;
  /* status */
  --ok:#8cb87c; --warn:#dcb05a; --bad:#db7c66;
  /* optional DeepParallel identity accent (use sparingly) */
  --dp:#3fd0d0; --dp-2:#5fb8c4;

  /* LIQUID GLASS material */
  --glass:linear-gradient(150deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.07) 20%,rgba(255,255,255,.025) 52%,rgba(210,173,98,.06) 100%);
  --glass-2:linear-gradient(150deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.03) 40%,rgba(120,150,200,.04) 100%);
  --gbrd:rgba(255,255,255,.2);
  --blur:saturate(235%) blur(28px) brightness(1.22) contrast(1.06);
  --spec:inset 0 1.6px 0 0 rgba(255,255,255,.55),inset 0 -1px 0 0 rgba(130,160,210,.2),inset 1px 0 0 0 rgba(255,255,255,.1),inset -1px 0 0 0 rgba(210,173,98,.1),inset 0 0 42px -10px rgba(255,255,255,.18);
  --depth:0 26px 60px -30px rgba(0,0,0,.75);

  /* corner radii (tightened from spec's 22px for an editorial feel) */
  --r-panel:17px;     /* glass panels: 16-18px */
  --r-nav:14px;       /* floating nav */
  --r-terminal:14px;  /* terminal/code hero, closer to square */
  --r-code:10px;      /* inner code blocks */
  --r-pill:13px;      /* pills / buttons stay rounded */

  /* type */
  --sans:-apple-system,"SF Pro Display","SF Pro Text","Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --serif:"Fraunces",Georgia,serif;

  --mx:clamp(1.1rem,4.5vw,4.5rem);            /* page gutter */
  --maxw:76rem;                                /* content max width */
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg); color:var(--ink);
  font:400 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; font-optical-sizing:auto;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  overflow-x:hidden;
}

/* ---- 6. Ambient light (aura behind the glass) ---------------------------- */
.aura{position:fixed;inset:-20%;z-index:-2;pointer-events:none;filter:blur(40px);opacity:1}
.aura b{position:absolute;border-radius:50%;mix-blend-mode:screen;display:block}
.aura .a1{width:52vw;height:52vw;left:56%;top:4%;background:radial-gradient(circle,rgba(232,184,92,.92),rgba(232,184,92,.3) 42%,transparent 68%);animation:drift1 26s ease-in-out infinite}
.aura .a2{width:46vw;height:46vw;left:-14%;top:38%;background:radial-gradient(circle,rgba(86,128,170,.5),rgba(86,128,170,.16) 42%,transparent 68%);animation:drift2 32s ease-in-out infinite}
.aura .a4{width:36vw;height:36vw;left:0%;top:0%;background:radial-gradient(circle,rgba(232,184,92,.74),transparent 66%);animation:drift2 28s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5%,6%) scale(1.1)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(7%,-5%) scale(1.12)}}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(125% 85% at 50% -10%,transparent 55%,rgba(8,10,13,.42) 100%),linear-gradient(180deg,transparent 60%,rgba(8,10,13,.28))}

/* ---- 5. Liquid-glass recipe --------------------------------------------- */
.glass{
  position:relative; background:var(--glass);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--gbrd); border-radius:var(--r-panel);
  box-shadow:var(--spec),0 2px 10px rgba(0,0,0,.4),0 24px 56px -28px rgba(0,0,0,.72),inset 0 0 0 1px rgba(210,173,98,.05);
}
.glass-2{
  position:relative; background:var(--glass-2);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--gbrd); border-radius:var(--r-pill);
  box-shadow:var(--spec),0 2px 10px rgba(0,0,0,.4);
}
/* diagonal specular sheen streak (the "liquid" highlight) */
.glass::before,.glass-2::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background:linear-gradient(150deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.12) 9%,transparent 24%,transparent 76%,rgba(255,255,255,.04) 92%,rgba(255,255,255,.16) 100%);
  mix-blend-mode:screen; opacity:.9;
}
/* cursor-follow glow (optional, wired in JS via --mx/--my) */
.glass::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .45s; z-index:1;
  background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.14),transparent 62%);
  mix-blend-mode:screen;
}
.glass:hover::after{opacity:1}
/* keep real content above the sheen layers */
.glass>*{position:relative;z-index:3}

/* ---- 7. Typography ------------------------------------------------------- */
.eyebrow{font:600 .72rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 1rem}
h1,h2,h3{margin:0 0 .6rem;letter-spacing:-.03em}
.hero h1{font:800 clamp(3rem,6.9vw,6rem)/.96 var(--sans);letter-spacing:-.052em;
  background:linear-gradient(176deg,#fff 28%,#c9c5ba);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font:700 clamp(2.1rem,4.2vw,3.4rem)/1.04 var(--sans);letter-spacing:-.036em;max-width:17ch}
p{color:var(--dim);margin:0 0 1rem}
.lead{max-width:46ch}
.lead b,b{color:var(--ink);font-weight:600}
/* gold accent word: wrap in .g */
.g{background:linear-gradient(180deg,var(--gold-2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
/* premium animated sheen on a hero accent word */
.hero h1 .g{background:linear-gradient(110deg,var(--gold) 0%,var(--gold-2) 32%,#fff6e2 47%,#fffdf7 50%,#fff6e2 53%,var(--gold-2) 68%,var(--gold) 100%);background-size:280% 100%;background-position:140% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:goldsheen 7.5s ease-in-out 1.4s infinite}
@keyframes goldsheen{0%,68%,100%{background-position:140% 0}82%{background-position:-40% 0}}
.stat{font:800 1.7rem/1 var(--sans);font-feature-settings:"tnum" 1;color:var(--ink)}
.stat .g{display:inline}
/* wordmarks */
.wm-crowe{font:500 1.15rem var(--serif);color:var(--ink);letter-spacing:-.01em}
.wm-crowe::after{content:" \25C6";color:var(--gold);font-size:.7em;vertical-align:.08em}
/* DeepParallel wordmark: premium product mark, not a code token.
   Tight optical sans, two-weight contrast, gold gradient on "parallel". */
.wm-dp{font:700 1.12rem var(--sans);letter-spacing:-.045em;font-optical-sizing:auto;
  display:inline-flex;align-items:baseline;white-space:nowrap}
.wm-dp .lo{color:var(--ink);font-weight:500}
.wm-dp .hi{font-weight:700;background:linear-gradient(174deg,var(--gold-2) 10%,var(--gold) 70%,var(--gold-dim));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- 8. Components ------------------------------------------------------- */
/* Floating nav */
.nav{position:fixed;top:.9rem;left:50%;transform:translateX(-50%);z-index:50;
  width:min(var(--maxw),calc(100vw - 1.6rem));display:flex;align-items:center;justify-content:space-between;
  padding:.62rem .8rem;border-radius:var(--r-nav)}
.nav .links{display:flex;gap:1.3rem;align-items:center}
.nav a{color:var(--dim);text-decoration:none;font-size:.78rem;transition:color .2s}
.nav a:hover{color:var(--ink)}
/* Buttons / pills */
.btn{display:inline-flex;align-items:center;gap:.4rem;font:600 .82rem var(--sans);
  padding:.55rem .95rem;border-radius:var(--r-pill);text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:filter .2s,transform .2s}
.btn-gold{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#1a140a}
.btn-gold:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.04);border-color:var(--gbrd);color:var(--ink)}
.btn-ghost:hover{filter:brightness(1.1);transform:translateY(-1px)}
/* Section lockup */
.lockup{text-align:center;max-width:36ch;margin:0 auto 3.5rem}
.lockup p{margin-inline:auto}
/* Command pill */
.cmd{display:inline-flex;align-items:center;gap:.7rem;font:500 .82rem var(--mono);
  padding:.5rem .7rem;border-radius:var(--r-pill)}
.cmd .pr{color:var(--gold)}
.cmd .copy{color:var(--faint);padding-left:.7rem;border-left:1px solid var(--gbrd);cursor:pointer}
.cmd .copy:hover{color:var(--ink)}
/* Pricing */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;align-items:stretch}
.tier{padding:1.7rem;display:flex;flex-direction:column}
.tier.feat{border-color:rgba(210,173,98,.42);box-shadow:var(--spec),0 0 0 1px rgba(210,173,98,.3),0 24px 60px -28px rgba(210,173,98,.25)}
.tier .price{font:800 2.5rem/1 var(--sans);margin:.4rem 0}
.tier ul{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.55rem}
.tier li{color:var(--dim);font-size:.9rem;padding-left:1.3rem;position:relative}
.tier li::before{content:"+";position:absolute;left:0;color:var(--gold);font-weight:700}
.badge{position:absolute;top:-.7rem;left:50%;transform:translateX(-50%);background:linear-gradient(180deg,var(--gold-2),var(--gold));
  color:#1a140a;font:600 .64rem var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:.25rem .6rem;border-radius:999px}
/* Bento */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.bento .cell{padding:1.6rem} .bento .span2{grid-column:span 2}
.meta{font:600 .64rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  padding-top:.7rem;margin-top:.9rem;border-top:1px solid var(--gbrd)}

/* ---- 9 / 10. Layout, motion, rhythm ------------------------------------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--mx)}
section{padding:6rem 0}
.grid{display:grid;gap:1.1rem}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

@media (max-width:880px){
  .tiers,.bento{grid-template-columns:1fr}
  .bento .span2{grid-column:auto}
  .nav .links a:not(.btn){display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .aura{display:none}
  .reveal{opacity:1;transform:none}
}