/* ============================================================================
   ccprime — style.css
   Part 0: self-hosted fonts — this page hosts a non-custodial wallet, so it
   loads ZERO third-party origins (no Google Fonts, no CDNs).
   Part 1: BLUEPRINT SAAS DESIGN SYSTEM (verbatim — the shared spine for every
   theblueprint.xyz product; tokens are exact, radius stays 2px).
   Part 2: ccprime product extensions (gold accent #ffcf5c, landing sections).
   ========================================================================== */

@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/geist-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/geist-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  color-scheme:light;
  /* neutrals */
  --n50:#fff; --n100:#f5f5f7; --n200:#e6e6e6; --n300:#d9d9d9;
  --n600:#56555c; --n900:#18171f;
  /* brand accents */
  --blue:#5674e1; --teal:#59b3d4; --teal-text:#2c7d9c;
  --lavender:#a7b1d4; --lavender-lt:#c6d2ff; --beige:#f2eee8;
  --pos:#2e7d4f; --neg:#b3423a;
  --ink-deep:#0e0e15; --ink-deep-2:#15151f;
  /* system */
  --border:var(--n300); --radius:.125rem;               /* 2px — architectural */
  --font:Manrope,sans-serif; --mono:"Geist Mono",monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow-1:0 1px 2px rgba(24,23,31,.04),0 2px 8px rgba(24,23,31,.04);
  --shadow-2:0 2px 6px rgba(24,23,31,.05),0 10px 28px rgba(24,23,31,.07);
  --shadow-lift:0 24px 60px -26px rgba(24,23,31,.28);
  /* signature gradients */
  --grad-cta:linear-gradient(120deg,#4a63c7,#6b82db 45%,#59b3d4);
  --grad-aurora:radial-gradient(600px 320px at 78% -12%,rgba(86,116,225,.42),transparent 62%),radial-gradient(520px 300px at 8% 118%,rgba(89,179,212,.26),transparent 60%);
  --bp-grid:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  /* fluid type scale */
  --h1:clamp(3.93rem,2.4rem + 2.48vw,5.37rem);
  --h2:clamp(2.55rem,1.55rem + 1.61vw,3.48rem);
  --h4:clamp(1.28rem,.95rem + .52vw,1.58rem);
  --text-main:clamp(.79rem,.66rem + .2vw,.91rem);
  --text-sm:clamp(.68rem,.57rem + .17vw,.78rem);
}

*{box-sizing:border-box;margin:0}
html{background:var(--n100)}
body{font-family:var(--font);background:var(--n100);color:var(--n900);font-size:var(--text-main);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font);font-weight:400;line-height:1;letter-spacing:-.01em}
h1{font-size:var(--h1)} h2{font-size:var(--h2)}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono)} .dim{color:var(--n600)}
.num,.tabular{font-variant-numeric:tabular-nums}      /* every number */
.kicker{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--n600)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:2.7rem;padding:0 1.1rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--n50);color:var(--n900);font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;transition:border-color .15s,background .15s}
.btn:hover{border-color:var(--n900)}
.btn-dark{background:var(--n900);color:#fff;border-color:var(--n900)}
.cta-primary{background:var(--grad-cta);color:#fff;border:none}

/* ---- nav: logo · links · Explore dropdown · account ---- */
.nav{position:relative;z-index:100;background:var(--n100);height:5.8rem}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:100%;padding:0 2.5rem;width:84vw;max-width:100rem;margin:0 auto}
.nav-logo{height:2rem}                                  /* Blueprint logo — always present */
.nav-links{display:flex;gap:1.5rem;align-items:center;margin-left:auto}
.nav-links a,.nav-dd-btn{font-family:var(--mono);font-size:var(--text-sm);text-transform:uppercase;color:var(--n900)}
.nav-dd{position:relative}
.nav-dd-btn{background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;padding:0}
.nav-dd-btn:hover{color:var(--blue)}
.nav-caret{display:inline-flex;align-items:center;color:var(--blue);margin-left:.3rem;transition:transform .2s ease}  /* prominent blue chevron */
.nav-dd:hover .nav-caret,.nav-dd:focus-within .nav-caret{transform:rotate(180deg)}
.nav-dd-menu{position:absolute;top:calc(100% + .85rem);left:50%;transform:translateX(-50%) translateY(-6px);min-width:11rem;background:var(--n50);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-2);padding:.4rem;opacity:0;visibility:hidden;transition:opacity .16s,transform .16s;z-index:120;display:flex;flex-direction:column;gap:.1rem}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{opacity:1;visibility:visible;transform:translateX(-50%)}
.nav-dd-menu::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:.85rem}
.nav-dd-menu a{padding:.5rem .7rem;border-radius:var(--radius);white-space:nowrap;font-size:.72rem}
.nav-dd-menu a:hover{background:var(--n100)}
.nav-acct{display:flex;align-items:center;margin-left:1.6rem;position:relative}
.acct-btn{width:2.3rem;height:2.3rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--n50);cursor:pointer;overflow:hidden;padding:0}
.acct-btn:hover{border-color:var(--n600)}
.nav-acct.open .acct-btn{border-color:var(--blue);box-shadow:0 0 0 3px rgba(86,116,225,.14)}
.acct-menu{position:absolute;top:calc(100% + .7rem);right:0;min-width:15rem;background:var(--n50);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-2);padding:.5rem;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s;z-index:130}
.nav-acct.open .acct-menu{opacity:1;visibility:visible;transform:none}

/* ---- hero + product signet wordmark ---- */
.hero{position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:var(--grad-aurora);pointer-events:none}
.hero-content{position:relative;padding:3rem 2.5rem}
.hero h1{font-size:var(--h1);max-width:10em;padding-bottom:1.4rem}
/* signet lockup: dark-gradient mark holds the 2-letter monogram (product accent),
   the rest of the name morphs in the aurora. Rename .cc-* per product. */
.cc-lockup{display:inline-flex;align-items:center;gap:.5rem;margin:.15rem 0 1.15rem}
.cc-signet{position:relative;display:inline-flex;align-items:center;justify-content:center;background:radial-gradient(135% 135% at 28% 16%,#2c2d3e 0%,#15151d 60%,#0e0e13 100%);border-radius:.7rem;padding:.1em .32em .16em;box-shadow:0 12px 34px -12px rgba(86,116,225,.6),inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(140,155,225,.16)}
.cc-signet::before{content:"";position:absolute;inset:-7px;z-index:-1;border-radius:1rem;background:linear-gradient(120deg,#5674e1,#59b3d4,#a7b1d4,#c6d2ff);background-size:200% 100%;filter:blur(15px);opacity:.32;animation:auroraMorph 8s ease-in-out infinite}
.cc-cc{color:#f3ff97;font-family:var(--font);font-weight:800;font-size:clamp(1.9rem,4.2vw,2.7rem);letter-spacing:-.05em;line-height:1}   /* ← product accent color */
.cc-scan{font-family:var(--font);font-weight:800;font-size:clamp(2.1rem,4.6vw,3rem);letter-spacing:-.04em;line-height:.92}

/* ---- the aurora morph (wordmark second-half + title emphasis) ---- */
.aurora{background:linear-gradient(100deg,#5674e1,#59b3d4,#a7b1d4,#c6d2ff,#5674e1);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:auroraMorph 8s ease-in-out infinite}
@keyframes auroraMorph{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media(prefers-reduced-motion:reduce){.aurora,.cc-signet::before{animation:none}}

/* ---- metric / stat grid (hairline separators over a --border bg) ---- */
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-1)}
.metric-card{background:var(--n50);padding:1.4rem 1.5rem;min-width:0}
.metric-k{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--n600)}
.metric-v{font-size:1.9rem;font-family:var(--mono);color:var(--n900);margin-top:.4rem;font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ---- data tables: no vertical borders, hairline rows, right-aligned mono nums ---- */
.tbl_wrap{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;border:1px solid var(--border);border-radius:var(--radius);background:var(--n50)}
.data-table th{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--n600);text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--border)}
.data-table td{padding:.7rem .9rem;border-bottom:1px solid var(--border)}
.data-table td.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.data-table tr:last-child td{border-bottom:none}

/* ---- rectangular pills / chips ---- */
.pill{display:inline-block;font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;padding:.18rem .45rem;border-radius:var(--radius);background:var(--n100);color:var(--n600);border:1px solid var(--border)}
.pill.blue{color:var(--blue);border-color:color-mix(in srgb,var(--blue) 40%,var(--border))}

/* ---- SVG chart axis helpers (charts are hand-rolled — no library) ---- */
.ax-grid{stroke:var(--border);stroke-width:1}
.ax-y,.ax-x{font-family:var(--mono);font-size:9px;fill:var(--n600)}
.chart-svg{width:100%;height:auto;display:block}

/* ---- auth card (login / 2FA) ---- */
.auth-wrap{display:flex;justify-content:center;padding:4rem 1.5rem 6rem;min-height:58vh}
.auth-card{width:100%;max-width:26rem;background:var(--n50);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-1);padding:2.6rem 2.4rem;text-align:center}
.auth-btn{width:100%;height:3rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--n50);color:var(--n900);font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;margin-bottom:.7rem}
.auth-btn.primary{background:var(--n900);color:#fff;border-color:var(--n900)}

@media(max-width:900px){.nav-links{display:none}}

/* ============================================================================
   Part 2 — ccprime PRODUCT EXTENSIONS
   ONE product accent: gold #ffcf5c (signet monogram + sparing emphasis).
   Blueprint blue/teal/aurora remain the shared system accents.
   ========================================================================== */

:root{
  --gold:#ffcf5c;
  --text-lg:clamp(.85rem,.52rem + .54vw,1.16rem);
  --text-xxl:clamp(1.49rem,.91rem + .94vw,2.03rem);
  --sec-space:clamp(.4rem,.34rem + .12vw,.5rem);
}

/* gold text selection — the one native product accent */
::selection{background-color:var(--gold);color:var(--n900)}
::-moz-selection{background-color:var(--gold);color:var(--n900)}

/* Lenis owns all scroll smoothing — never CSS scroll-behavior:smooth */
html{scroll-behavior:auto}
body{overflow-x:hidden;line-height:1.2;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}
.link{color:var(--blue);text-decoration:underline}
.num{font-family:var(--mono)}                     /* every number: mono + tabular */

/* ---- container with the Blueprint side-border pattern ---- */
.pg{margin:0 2.5rem;padding-bottom:.6rem}
.ctr{width:84vw;max-width:100rem;margin:0 auto;border-left:1px solid var(--border);border-right:1px solid var(--border);height:100%}
.divider{height:1px;background:var(--border);margin:var(--sec-space) 0;width:100vw;position:relative;left:50%;transform:translateX(-50%)}
.spacer-line{background:var(--border);height:1px;width:100vw;position:relative;left:50%;transform:translateX(-50%)}

/* ---- nav (sticky refinement over the system nav) ---- */
.nav{position:sticky;top:0;transition:box-shadow .3s ease,background .3s ease}
.nav-inner{padding:0;width:84vw;max-width:100rem}
.nav-brand{display:flex;align-items:center;gap:.7rem}
.nav-logo{transform:translateY(5px)}
.nav-links a:hover{color:var(--blue)}
.nav.scrolled{background:rgba(245,245,247,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--n200)}
.acct-signin{height:2.3rem;padding:0 .9rem;font-size:.64rem}

/* ---- mobile hamburger + overlay (app.js toggles .open) ---- */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:.5rem;min-width:2.75rem;min-height:2.75rem;-webkit-tap-highlight-color:transparent}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--n900);margin:4px 0;transition:transform .3s ease,opacity .3s ease}
.nav-toggle.open span:nth-child(1){transform:rotate(45deg) translate(3px,5px)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(3px,-5px)}
.nav-mobile{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:99;background:rgba(245,245,247,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;opacity:0;transition:opacity .3s ease}
.nav-mobile.open{display:flex;opacity:1}
.nav-mobile a{font-family:var(--mono);font-size:1.25rem;text-transform:uppercase;color:var(--n900);padding:.6rem 1rem}
.nav-mobile .nav-mobile-dim{font-size:.9rem;color:var(--n600)}

/* ---- hero (compact fold, ccledger/ccscan-identical rhythm) ---- */
.hero{padding:6rem 0 4rem;text-align:left}
.hero.hero-compact{padding:1.6rem 0 .8rem}
.hero-content{position:relative;z-index:1;padding:0}
.hero .sec-pad{padding:0 2rem}
.hero .kicker{margin-bottom:.55rem;color:var(--n600)}
.hero-bg{position:absolute;top:-60%;left:-30%;right:-30%;bottom:-20%;will-change:transform;transition:transform .1s linear;z-index:0}
.hero .cc-h1{margin-top:0;font-size:clamp(1.55rem,1.1rem + 1.35vw,2.05rem);font-weight:500;max-width:none;padding-bottom:.7rem;letter-spacing:-.01em;color:var(--n900)}
.hero-body{color:var(--n600);font-size:var(--text-lg);max-width:30em;margin:0 0 .8rem;line-height:139%}
.hero-row{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;margin-top:1rem}
.hero-bar{display:flex;align-items:center;justify-content:flex-start;padding:1rem 0;flex-wrap:wrap;gap:.75rem}
.tag{display:inline-block;font-family:var(--mono);font-size:var(--text-sm);background:var(--beige);border-radius:var(--radius);padding:.75rem;line-height:1;text-transform:none}

/* ---- ccprime signet lockup: gold monogram in the dark signet + aurora "prime" ---- */
.cc-lockup{margin:.2rem 0 1.3rem}
.cc-signet{box-shadow:0 12px 34px -12px rgba(86,116,225,.55),inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,207,92,.28)}   /* gold keyline */
.cc-cc{color:var(--gold)}                                        /* ← the product accent */
.cc-scan{padding-bottom:.16em;margin-bottom:-.16em}              /* clear the p descender */

/* ---- hero stat netbar ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:2rem 0 0}
.stat-card{background:var(--n50);border:1px solid var(--border);border-radius:var(--radius);padding:2rem 1.5rem;text-align:center;transition:transform .25s ease,box-shadow .25s ease}
.stat-card:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(0,0,0,.06)}
.stat-v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--text-xxl);font-weight:500;line-height:1}
.stat-v.blue{color:var(--blue)}
.stat-v.teal{color:var(--teal-text)}
.stat-l{font-family:var(--mono);font-size:var(--text-sm);color:var(--n600);margin-top:.5rem;text-transform:uppercase}

/* ---- sections + // 01 tags ---- */
.sec{padding:1.9rem 0}
.sec-pad{padding:0 2rem}
.sec-white{background:var(--n50)}
.sec-title{font-size:clamp(1.55rem,1.1rem + 1.35vw,2.05rem);margin-bottom:1rem;font-weight:400}
.sec-desc{color:var(--n600);font-size:var(--text-lg);max-width:36rem;margin-bottom:2rem;line-height:139%}
.stag{font-family:var(--mono);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:1px;margin-bottom:.625rem}
.stag .sl{color:var(--n300)}
.muted{color:var(--n600);font-size:var(--text-main);line-height:139%}
.mt-1{margin-top:1rem}
.code{font-family:var(--mono);font-size:var(--text-sm);background:var(--n200);padding:.125rem .375rem;border-radius:var(--radius)}

/* ---- how it works: numbered step grid ---- */
.step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.step-card{padding:2.25rem;border-right:1px solid var(--border)}
.step-card:last-child{border-right:none}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;background:var(--n900);color:var(--gold);font-family:var(--mono);font-size:.72rem;font-variant-numeric:tabular-nums;border-radius:var(--radius);margin-bottom:1rem}
.step-card h3{font-size:var(--h4);font-weight:500;margin-bottom:.625rem}
.step-card p{color:var(--n600);font-size:var(--text-main);line-height:139%}

/* ---- assets: 3-up card grid ---- */
.asset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.asset-card{padding:2.25rem;border-right:1px solid var(--border)}
.asset-card:last-child{border-right:none}
.asset-mark{display:inline-flex;align-items:center;justify-content:center;height:2.4rem;padding:0 .7rem;background:radial-gradient(135% 135% at 28% 16%,#2c2d3e 0%,#15151d 60%,#0e0e13 100%);color:var(--gold);font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;border-radius:var(--radius);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,207,92,.22);margin-bottom:1rem}
.asset-card h3{font-size:var(--h4);font-weight:500;margin-bottom:.2rem}
.asset-issuer{font-family:var(--mono);font-size:var(--text-sm);color:var(--n600);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.75rem}
.asset-card p{color:var(--n600);font-size:var(--text-main);line-height:139%}
.asset-note{margin-top:0;padding:1.5rem 2rem;border-top:1px solid var(--border);font-family:var(--mono);font-size:var(--text-sm);color:var(--n600);line-height:170%}
.asset-note strong{color:var(--n900);font-weight:500}

/* ---- 2x2 feature cards (security / trading) ---- */
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.feat-card{padding:2.25rem;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.feat-card:nth-child(2n){border-right:none}
.feat-card:nth-last-child(-n+2){border-bottom:none}
.feat-card h3{font-size:var(--h4);font-weight:500;margin-bottom:.75rem}
.feat-card ul{list-style:none;padding:0}
.feat-card li{color:var(--n600);font-size:var(--text-main);line-height:139%;padding:.25rem 0 .25rem 1.25rem;position:relative}
.feat-card li::before{content:'';position:absolute;left:0;top:.55rem;width:6px;height:6px;border-radius:50%;background:var(--lavender)}
.feat-card:hover,.step-card:hover,.asset-card:hover{background:var(--n200)}
.asset-card.sec-white-card:hover{background:var(--n100)}

/* ---- order lifecycle bar ---- */
.lifecycle-bar{margin-top:2.5rem;padding:1.5rem;background:var(--n100);border:1px solid var(--border);border-radius:var(--radius);font-family:var(--mono);font-size:var(--text-sm);line-height:180%}
.lifecycle-lbl{color:var(--n600);text-transform:uppercase;letter-spacing:1px;margin-bottom:.5rem}
.lifecycle-steps{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem .5rem;color:var(--n900)}
.lifecycle-step{white-space:nowrap}
.lifecycle-arrow{color:var(--n600)}

/* ---- pricing compare cards ---- */
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.cmp-card{border-radius:var(--radius);padding:3rem 2rem 2.5rem;display:flex;flex-direction:column}
.cmp-light{background:var(--n50);border:1px solid var(--border)}
.cmp-dark{background:var(--grad-cta);color:var(--n50)}
.cmp-light:hover{box-shadow:0 6px 24px rgba(0,0,0,.06)}
.cmp-dark:hover{box-shadow:0 6px 24px rgba(66,81,136,.3)}
.cmp-tag{font-family:var(--mono);font-size:var(--text-sm);color:var(--n600);text-transform:uppercase;letter-spacing:1px;margin-bottom:.3rem}
.cmp-dark .cmp-tag{color:rgba(255,255,255,.9)}
.cmp-title{font-size:var(--h4);font-weight:500;margin-bottom:.25rem}
.cmp-price{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--text-xxl);font-weight:500;margin-bottom:.75rem}
.cmp-price .per{font-size:var(--text-sm);color:var(--n600)}
.cmp-dark .cmp-price .per{color:rgba(255,255,255,.75)}
.cmp-desc{color:var(--n600);font-size:var(--text-main);margin-bottom:1.25rem;line-height:139%}
.cmp-dark .cmp-desc{color:rgba(255,255,255,.95)}
.cmp-card ul{list-style:none;padding:0;margin-bottom:1.75rem}
.cmp-card li{font-size:var(--text-main);padding:.375rem 0 .375rem 1.25rem;position:relative;line-height:139%}
.cmp-light li{color:var(--n600)}
.cmp-dark li{color:rgba(255,255,255,.95)}
.cmp-card li::before{content:'';position:absolute;left:0;top:.55rem;width:6px;height:6px;border-radius:50%;background:var(--lavender)}
.cmp-dark li::before{background:rgba(255,255,255,.4)}
.cmp-cta{margin-top:auto;align-self:flex-start}
.cmp-dark .cmp-cta{background:var(--n50);color:var(--n900);border-color:var(--n50)}
.cmp-featured-tag{display:inline-block;font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;background:var(--gold);color:var(--n900);border-radius:var(--radius);padding:.22rem .5rem;margin-bottom:.9rem}

/* ---- CTA band (aurora over deep ink + blueprint grid) ---- */
.cta-band{position:relative;overflow:hidden;background:var(--ink-deep);color:var(--n50);text-align:center;padding:6.5rem 1.5rem;border-radius:var(--radius);width:84vw;max-width:100rem;margin:0 auto}
.cta-band::before{content:"";position:absolute;inset:0;background-image:var(--bp-grid);background-size:44px 44px;pointer-events:none}
.cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(620px 340px at 76% -10%,rgba(86,116,225,.5),transparent 62%),radial-gradient(540px 320px at 6% 116%,rgba(89,179,212,.32),transparent 60%);pointer-events:none}
.cta-band > *{position:relative;z-index:1}
.cta-band h2{font-family:var(--mono);font-size:clamp(1.6rem,1rem + 1.9vw,2.7rem);font-weight:200;text-transform:uppercase;line-height:150%;margin-bottom:1.5rem;color:var(--n50)}
.cta-band-desc{font-size:var(--text-lg);color:rgba(255,255,255,.82);max-width:30em;margin:0 auto 2rem;line-height:139%}
.cta-band .btn-row{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}
.cta-band .btn{background:transparent;color:var(--n50);border-color:rgba(255,255,255,.35)}
.cta-band .btn:hover{border-color:var(--n50)}
.cta-band .cta-primary{background:var(--grad-cta);border:none}

/* ---- footer (Blueprint exact pattern) ---- */
.sec-footer-bottom{background:var(--n100);border-top:1px solid var(--border);border-left:1px solid var(--border);border-right:1px solid var(--border);width:84vw;max-width:100rem;margin:0 auto;padding:3rem 2rem;text-transform:uppercase;font-family:var(--mono);font-size:.875rem}
.footer-row{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:15px}
.footer-links{display:flex;gap:2rem;color:var(--n900)}
.sec-footer-bottom a{font-family:var(--mono);font-size:.875rem;color:var(--n900);line-height:1rem;text-decoration:underline}
.sec-footer-bottom a:hover{color:#18171fbf}
.footer-copy{font-family:var(--mono);font-size:.875rem;color:var(--n900)}
.footer-tagline{font-family:var(--mono);font-size:.72rem;color:var(--n600);margin-bottom:1.5rem;text-transform:none}

/* ---- scroll-reveal (app.js IntersectionObserver adds .revealed) ---- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.revealed{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
/* stagger children inside grids */
.feat-grid .feat-card,.step-grid .step-card,.asset-grid .asset-card,.cmp-grid .cmp-card{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease),box-shadow .25s ease,background .25s ease}
.feat-grid.revealed .feat-card,.step-grid.revealed .step-card,.asset-grid.revealed .asset-card,.cmp-grid.revealed .cmp-card{opacity:1;transform:translateY(0)}
.feat-grid.revealed .feat-card:nth-child(1),.step-grid.revealed .step-card:nth-child(1),.asset-grid.revealed .asset-card:nth-child(1),.cmp-grid.revealed .cmp-card:nth-child(1){transition-delay:0s}
.feat-grid.revealed .feat-card:nth-child(2),.step-grid.revealed .step-card:nth-child(2),.asset-grid.revealed .asset-card:nth-child(2),.cmp-grid.revealed .cmp-card:nth-child(2){transition-delay:.08s}
.feat-grid.revealed .feat-card:nth-child(3),.step-grid.revealed .step-card:nth-child(3),.asset-grid.revealed .asset-card:nth-child(3){transition-delay:.16s}
.feat-grid.revealed .feat-card:nth-child(4),.step-grid.revealed .step-card:nth-child(4){transition-delay:.24s}

/* ---- accessibility ---- */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--radius)}
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}
.skip-link{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden;padding:1rem;background:var(--n900);color:#fff;z-index:1000;font-family:var(--mono);font-size:var(--text-sm);border-radius:var(--radius)}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;overflow:visible}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---- responsive — tablet ---- */
@media(max-width:991px){
  .pg{margin:0 1rem}
  .ctr{width:auto}
  .nav-inner{width:auto;padding:0 1.25rem}
  .nav-logo{transform:none}
  .nav-toggle{display:block}
  .nav-links{display:none}
  .nav-acct{display:none}
  .hero{padding:3rem 0}
  .hero-body{font-size:var(--text-main)}
  .stats{grid-template-columns:1fr 1fr}
  .step-grid{grid-template-columns:1fr 1fr}
  .step-card{border-bottom:1px solid var(--border)}
  .step-card:nth-child(2n){border-right:none}
  .step-card:nth-last-child(-n+2){border-bottom:none}
  .asset-grid{grid-template-columns:1fr}
  .asset-card{border-right:none;border-bottom:1px solid var(--border)}
  .asset-card:last-child{border-bottom:none}
  .feat-grid,.cmp-grid{grid-template-columns:1fr}
  .feat-card{border-right:none}
  .feat-card:nth-last-child(-n+2){border-bottom:1px solid var(--border)}
  .feat-card:last-child{border-bottom:none}
  .sec{padding:3.5rem 0}
  .sec-pad{padding:0 1rem}
  .sec-title{font-size:clamp(1.5rem,3vw + .5rem,2rem)}
  .cta-band{width:auto;padding:5rem 1.5rem 3.5rem}
  .cta-band h2{font-size:1.75rem}
  .sec-footer-bottom{width:auto}
  .cta-primary{font-size:var(--text-main)}
}
/* ---- responsive — mobile ---- */
@media(max-width:479px){
  .pg{margin:0}
  .ctr{width:100%;border:none}
  .nav{height:auto;margin:1.25rem;position:relative}
  .nav-inner{padding:0;align-items:flex-end}
  .nav-logo{height:1.5rem}
  .hero{padding:2rem 0}
  .hero-body{max-width:100%;font-size:var(--text-main)}
  .hero-row .cta-primary{width:100%;text-align:center}
  .hero-bar{gap:.35rem}
  .tag{padding:.4rem .6rem;font-size:clamp(.6rem,.55rem + .1vw,.68rem)}
  .stats{grid-template-columns:1fr 1fr;gap:.5rem}
  .stat-card{padding:1.25rem .75rem}
  .stat-v{font-size:clamp(1.1rem,.9rem + .4vw,1.49rem)}
  .step-grid{grid-template-columns:1fr}
  .step-card{border-right:none;border-bottom:1px solid var(--border);padding:1.5rem}
  .step-card:last-child{border-bottom:none}
  .asset-card{padding:1.5rem}
  .feat-card{padding:1.5rem}
  .cmp-grid{gap:.75rem}
  .cmp-card{padding:1.75rem 1.25rem}
  .cmp-title{font-size:clamp(1rem,.85rem + .3vw,1.28rem)}
  .sec-title{font-size:clamp(1.35rem,1rem + .7vw,1.75rem)}
  .sec-desc{font-size:var(--text-main)}
  .lifecycle-bar{margin-top:1.5rem;padding:1.25rem}
  .lifecycle-steps{flex-direction:column;align-items:flex-start;gap:.25rem}
  .lifecycle-arrow{display:none}
  .lifecycle-step{white-space:normal}
  .lifecycle-step::before{content:'\2192\00a0';color:var(--n600)}
  .lifecycle-step:first-child::before{content:''}
  .cta-band{width:100%;padding:4rem 1rem 2.5rem;border-radius:0}
  .cta-band h2{font-size:1.3rem;line-height:140%}
  .sec-footer-bottom{width:100%;border-left:none;border-right:none;padding:2rem 1rem}
  .footer-row{flex-flow:column;align-items:flex-start;gap:1rem}
  .footer-links{flex-flow:column;gap:1rem;align-items:flex-start}
  .footer-copy{text-align:left}
  .divider{display:none}
  .btn{font-size:clamp(.6rem,.55rem + .1vw,.68rem);padding:0 1.25rem}
}