/* ============================================================
   Dazzle — shared styles (light / "dazzly" theme)
   Iris violet (#6D5BFF) + amber (#F5A623) on bright white,
   editorial type, subtle animated sunburst.
   ============================================================ */

:root{
  /* surfaces */
  --bg:#ffffff; --bg-2:#f5f5f7; --panel:#ffffff; --panel-2:#faf8ff;
  /* ink */
  --ink:#16131f; --ink-dim:#56525f; --muted:#8d8997;
  --line:rgba(22,19,31,.12); --line-2:rgba(22,19,31,.07);
  /* color */
  --violet:#6d5bff; --violet-deep:#4733c9; --violet-soft:#efecff;
  --amber:#f5a623; --amber-deep:#c97f10; --amber-soft:#fff4e0;
  /* type */
  --display:'Fraunces',Georgia,serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink); font-family:var(--body); line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative;
}
::selection{background:var(--violet); color:#fff}
a{color:inherit; text-decoration:none}
img,svg{display:block}

.wrap{max-width:1180px; margin:0 auto; padding:0 32px}
.mono{font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.mono.v{color:var(--violet)} .mono.a{color:var(--amber-deep)}

/* ---------- animated sunburst (hero-only, off-center) ---------- */
.sunburst{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.sunburst .rays{
  position:absolute; width:180vmax; height:180vmax;
  left:72%; top:8%; transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(109,91,255,.09) 0deg 1.4deg, transparent 1.4deg 9deg);
  -webkit-mask:radial-gradient(closest-side, #000 0, transparent 70%);
          mask:radial-gradient(closest-side, #000 0, transparent 70%);
  animation:spin 200s linear infinite;
}
.sunburst .rays.amber{
  left:70%; top:6%;
  background:repeating-conic-gradient(from 4.5deg at 50% 50%,
    rgba(245,166,35,.08) 0deg 1deg, transparent 1deg 13deg);
  animation:spin 260s linear infinite reverse;
}
.sunburst .wash{
  position:absolute; inset:0;
  background:
    radial-gradient(46% 60% at 72% 0%, rgba(109,91,255,.16), transparent 62%),
    radial-gradient(40% 50% at 86% 6%, rgba(245,166,35,.12), transparent 60%);
}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.sunburst .rays{animation:none}}

/* grain */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- logo ---------- */
.logo{display:inline-flex; align-items:center; gap:10px; font-family:var(--body); font-weight:700; font-size:1.05rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink)}
.logo .mark{width:30px; height:30px; flex:none}

/* ---------- nav ---------- */
nav{position:fixed; top:0; left:0; right:0; z-index:100; backdrop-filter:blur(16px) saturate(1.4);
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.5)); border-bottom:1px solid var(--line-2)}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:70px}
.nav-links{display:flex; align-items:center; gap:32px}
.nav-links a:not(.btn){font-size:.88rem; color:var(--ink-dim); transition:color .25s; position:relative}
.nav-links a:not(.btn):hover{color:var(--ink)}
.nav-links a.nav-login{font-weight:600; color:var(--ink)}
.nav-links a.nav-login:hover{color:var(--violet)}
.nav-links a[aria-current="page"]:not(.nav-login){color:var(--violet)}
.nav-links a[aria-current="page"]::after{content:""; position:absolute; left:0; right:0; bottom:-22px; height:2px; border-radius:2px; background:var(--violet)}
.nav-toggle{display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:11px; background:var(--panel); cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:4px}
.nav-toggle span{width:18px; height:2px; background:var(--ink); border-radius:2px; transition:.25s}

.btn{font-family:var(--body); font-weight:600; font-size:.88rem; padding:11px 20px; border-radius:100px; border:1px solid transparent; cursor:pointer; transition:.25s; display:inline-flex; align-items:center; gap:9px; white-space:nowrap}
.btn-primary{background:var(--violet); color:#fff; box-shadow:0 6px 20px -6px rgba(109,91,255,.55)}
.btn-primary:hover{background:#5a47ff; transform:translateY(-1px); box-shadow:0 12px 30px -8px rgba(109,91,255,.6)}
.btn-ghost{border-color:var(--line); color:var(--ink); background:rgba(255,255,255,.6)}
.btn-ghost:hover{border-color:var(--violet); color:var(--violet); background:#fff}
.btn-amber{background:var(--amber); color:#3a2600; box-shadow:0 6px 20px -6px rgba(245,166,35,.6)}
.btn-amber:hover{background:#ffb53d; transform:translateY(-1px)}

@media(max-width:860px){
  .nav-toggle{display:flex}
  .nav-links{position:absolute; top:70px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
    background:rgba(255,255,255,.97); backdrop-filter:blur(16px); border-bottom:1px solid var(--line);
    padding:8px 20px 20px; transform:translateY(-12px); opacity:0; pointer-events:none; transition:.25s}
  nav.open .nav-links{transform:none; opacity:1; pointer-events:auto}
  .nav-links a:not(.btn){padding:15px 6px; border-bottom:1px solid var(--line-2)}
  .nav-links a[aria-current="page"]::after{display:none}
  .nav-links .btn{margin-top:16px; justify-content:center}
}

/* ---------- generic section + heads ---------- */
main{position:relative; z-index:1}
section{padding:96px 0; position:relative}
.sec-head{max-width:62ch; margin-bottom:54px}
.sec-head h2{font-family:var(--display); font-weight:400; font-size:clamp(2rem,4vw,3rem); line-height:1.08; letter-spacing:-.01em; margin-top:16px}
.sec-head h2 em{font-style:italic; color:var(--violet)}
.sec-head p{margin-top:18px; color:var(--ink-dim); font-size:1.05rem; max-width:54ch}

/* page hero (inner pages) */
.page-hero{position:relative; overflow:hidden; padding:160px 0 30px}
.page-hero .wrap{position:relative; z-index:1}
.page-hero .eyebrow{display:inline-flex; align-items:center; gap:10px; margin-bottom:22px}
.page-hero .eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--violet); box-shadow:0 0 0 4px rgba(109,91,255,.18)}
.page-hero h1{font-family:var(--display); font-weight:400; font-size:clamp(2.4rem,5vw,3.9rem); line-height:1.03; letter-spacing:-.015em; max-width:18ch}
.page-hero h1 em{font-style:italic; color:var(--violet)}
.page-hero.amber h1 em{color:var(--amber-deep)}
.page-hero .lede{margin-top:24px; font-size:1.12rem; color:var(--ink-dim); max-width:56ch; line-height:1.6}

/* ---------- home hero ---------- */
header.hero{position:relative; overflow:hidden; padding:172px 0 84px}
.hero .wrap{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center}
@media(max-width:920px){.hero .wrap{grid-template-columns:1fr; gap:46px} header.hero{padding:140px 0 56px}}
.eyebrow{display:inline-flex; align-items:center; gap:10px; margin-bottom:26px}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--violet); box-shadow:0 0 0 4px rgba(109,91,255,.18)}
h1{font-family:var(--display); font-weight:400; font-size:clamp(2.6rem,5.6vw,4.6rem); line-height:1.0; letter-spacing:-.018em}
h1 em{font-style:italic; color:var(--violet)}
h1 .shine{background:linear-gradient(95deg,var(--violet),var(--amber)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lede{margin-top:26px; font-size:1.14rem; color:var(--ink-dim); max-width:36ch; line-height:1.62}
.hero-cta{margin-top:36px; display:flex; gap:14px; flex-wrap:wrap}

/* ---------- verdict card ---------- */
.card{background:linear-gradient(165deg,#ffffff,#f7f4ff); border:1px solid var(--line); border-radius:22px; padding:28px;
  box-shadow:0 40px 80px -36px rgba(72,52,180,.34), 0 6px 20px -8px rgba(22,19,31,.08); position:relative}
.card .glow{position:absolute; inset:0; border-radius:22px; padding:1px; background:linear-gradient(150deg,rgba(109,91,255,.7),rgba(245,166,35,.4) 45%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none}
.card-top{display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:18px; border-bottom:1px solid var(--line-2)}
.vname{font-family:var(--display); font-size:1.5rem; font-weight:500}
.chip{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; padding:7px 12px; border-radius:100px; background:var(--violet-soft); color:var(--violet-deep); border:1px solid rgba(109,91,255,.3); white-space:nowrap}
.score-row{display:flex; align-items:baseline; gap:14px; margin:20px 0 8px}
.score-big{font-family:var(--display); font-size:3.7rem; font-weight:500; line-height:1; background:linear-gradient(120deg,var(--violet),var(--amber)); -webkit-background-clip:text; background-clip:text; color:transparent}
.score-cap{color:var(--muted); font-size:.8rem}
.bars{display:flex; flex-direction:column; gap:13px; margin-top:18px}
.bar-line{display:grid; grid-template-columns:1fr auto; gap:8px; font-size:.8rem; color:var(--ink-dim)}
.bar-track{grid-column:1/-1; height:6px; border-radius:4px; background:rgba(22,19,31,.07); overflow:hidden}
.bar-fill{height:100%; border-radius:4px; background:linear-gradient(90deg,var(--violet-deep),var(--violet)); width:0; transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.qbox{margin-top:22px; padding:16px 18px; border-left:2px solid var(--violet); background:var(--violet-soft); border-radius:0 12px 12px 0}
.qbox .mono{margin-bottom:7px; color:var(--violet-deep)}
.qbox p{font-family:var(--display); font-style:italic; font-size:1.02rem; color:var(--ink); line-height:1.45}
.incl{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.incl-tag{font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:rgba(109,91,255,.03)}
.card-foot{margin-top:18px; padding-top:16px; border-top:1px solid var(--line-2); display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.wave{display:flex; align-items:center; gap:3px; height:18px}
.wave span{width:3px; border-radius:2px; background:var(--violet); animation:wv 1s ease-in-out infinite alternate}
@keyframes wv{from{height:3px;opacity:.45}to{height:16px;opacity:1}}

/* ---------- tension columns ---------- */
.tension{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--panel)}
@media(max-width:760px){.tension{grid-template-columns:1fr}}
.tension > div{padding:42px}
.tension > div:first-child{border-right:1px solid var(--line); background:linear-gradient(180deg,#fff,#faf8ff)}
.tension > div:last-child{background:linear-gradient(180deg,#fff,#fffaf1)}
@media(max-width:760px){.tension > div:first-child{border-right:0; border-bottom:1px solid var(--line)}}
.tension h3{font-family:var(--display); font-size:1.45rem; font-weight:500; margin-bottom:12px}
.tension .tag{font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; display:block}
.tension > div:first-child h3{color:var(--violet)}
.tension > div:last-child h3{color:var(--amber-deep)}
.tension p{color:var(--ink-dim); font-size:.99rem}

/* ---------- priority emphasis ---------- */
.priority{position:relative; border:1px solid rgba(109,91,255,.3); border-radius:20px; padding:46px; margin-bottom:54px;
  background:radial-gradient(120% 140% at 0% 0%,rgba(109,91,255,.12),transparent 55%),linear-gradient(180deg,#fff,#f7f4ff); overflow:hidden; box-shadow:0 30px 60px -40px rgba(72,52,180,.3)}
.priority .once{position:absolute; top:24px; right:24px; font-family:var(--mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--violet-deep); border:1px solid rgba(109,91,255,.35); padding:7px 12px; border-radius:100px; background:rgba(255,255,255,.7)}
.priority .k{font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--violet); margin-bottom:16px}
.priority h3{font-family:var(--display); font-weight:400; font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1.06; letter-spacing:-.01em; max-width:20ch}
.priority h3 em{font-style:italic; color:var(--violet)}
.priority p{margin-top:18px; color:var(--ink-dim); font-size:1.05rem; max-width:60ch}
@media(max-width:680px){.priority{padding:32px 24px} .priority .once{position:static; display:inline-block; margin-bottom:16px}}

/* ---------- timeline ---------- */
.timeline-label{font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:26px; text-align:center}
.timeline{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative}
.timeline::before{content:""; position:absolute; top:20px; left:9%; right:9%; height:2px; background:linear-gradient(90deg,var(--violet),var(--amber) 92%); opacity:.4; z-index:0}
.tl{position:relative; z-index:1; padding:0 18px; text-align:center}
.tl .node{width:42px; height:42px; border-radius:50%; margin:0 auto 22px; display:grid; place-items:center; background:#fff; border:1px solid var(--line);
  font-family:var(--mono); font-size:.82rem; color:var(--ink-dim); box-shadow:0 4px 14px -6px rgba(22,19,31,.18)}
.tl.first .node{border-color:var(--violet); color:var(--violet); box-shadow:0 0 0 5px rgba(109,91,255,.12)}
.tl h4{font-family:var(--display); font-size:1.2rem; font-weight:500; margin-bottom:9px}
.tl p{color:var(--ink-dim); font-size:.9rem; line-height:1.55}
.tl .meta{font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:12px; display:block}
@media(max-width:780px){
  .timeline{grid-template-columns:1fr}
  .timeline::before{top:0; bottom:0; left:20px; right:auto; width:2px; height:auto}
  .tl{text-align:left; display:grid; grid-template-columns:42px 1fr; gap:0 22px; padding:0 0 34px 0}
  .tl .node{margin:0}
  .tl > *:not(.node){grid-column:2}
}

/* ---------- stat band — accent "marquee" callout ---------- */
.band{position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(120deg,#6d5bff,#5a47ff 52%,#4733c9)}
.band::before{content:""; position:absolute; left:50%; top:-58%; width:120vmax; height:120vmax; transform:translateX(-50%); pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.07) 0deg 1.1deg, transparent 1.1deg 10deg);
  -webkit-mask:radial-gradient(closest-side,#000,transparent 72%); mask:radial-gradient(closest-side,#000,transparent 72%)}
.band .wrap{position:relative; z-index:1}
.band .band-eyebrow{display:block; text-align:center; color:rgba(255,255,255,.72); margin-bottom:44px}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:0; text-align:center}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr; gap:48px 0}}
.stat{padding:0 18px}
.stat .n{font-family:var(--display); font-size:clamp(3rem,6.4vw,4.8rem); font-weight:500; line-height:1; letter-spacing:-.02em; color:#fff}
.stat .n.amber{color:#ffce7a}
.stat .l{color:rgba(255,255,255,.78); font-size:.94rem; margin-top:16px; max-width:22ch; margin-left:auto; margin-right:auto; line-height:1.5}
/* dotted zero — reads as a numeral, not a letter o */
.zero{position:relative; display:inline-block}
.zero::after{content:""; position:absolute; left:50%; top:51%; transform:translate(-50%,-50%); width:.13em; height:.13em; border-radius:50%; background:currentColor}

/* ---------- value list ---------- */
.vals{display:grid; grid-template-columns:1fr 1fr; gap:40px 56px}
@media(max-width:760px){.vals{grid-template-columns:1fr; gap:32px}}
.val{border-top:2px solid var(--line); padding-top:20px}
.val .k{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--violet); margin-bottom:12px}
.val h3{font-family:var(--display); font-size:1.35rem; font-weight:500; margin-bottom:9px}
.val p{color:var(--ink-dim); font-size:.98rem}
.val em{font-style:italic; color:var(--ink)}

/* vendors accent override */
.vendors .val{border-top-color:rgba(245,166,35,.4)}
.vendors .val .k{color:var(--amber-deep)}

/* ---------- RFP framing band ---------- */
.rfp{background:linear-gradient(180deg,#fff,var(--bg-2),#fff); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.rfp .wrap{display:grid; grid-template-columns:1fr 1fr; gap:62px; align-items:center}
@media(max-width:860px){.rfp .wrap{grid-template-columns:1fr; gap:36px}}
.rfp h2{font-family:var(--display); font-weight:400; font-size:clamp(2rem,4vw,3rem); line-height:1.06; letter-spacing:-.01em; margin-top:14px}
.rfp h2 em{font-style:italic; color:var(--violet)}
.rfp p{margin-top:20px; color:var(--ink-dim); font-size:1.05rem; max-width:50ch}
.rfp-card{border:1px solid var(--line); border-radius:18px; background:#fff; padding:8px; box-shadow:0 24px 50px -34px rgba(72,52,180,.3)}
.rfp-row{display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; padding:16px 18px; border-bottom:1px solid var(--line-2)}
.rfp-row:last-child{border-bottom:0}
.rfp-row .need{font-size:.95rem; color:var(--ink)}
.rfp-row .st{font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.rfp-row .st.active{color:var(--violet)}

/* ---------- disclosure control ---------- */
.disc-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:8px}
@media(max-width:760px){.disc-grid{grid-template-columns:1fr}}
.disc-col{border:1px solid var(--line); border-radius:20px; padding:28px; background:#fff; box-shadow:0 20px 44px -34px rgba(22,19,31,.3)}
.disc-col.shared{border-color:rgba(109,91,255,.3); background:linear-gradient(180deg,#fff,#f8f6ff)}
.disc-col.private{border-color:rgba(245,166,35,.3); background:linear-gradient(180deg,#fff,#fffaf1)}
.disc-h{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.disc-h .ico{width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font-size:.85rem}
.disc-col.shared .ico{background:var(--violet-soft); color:var(--violet-deep)}
.disc-col.private .ico{background:var(--amber-soft); color:var(--amber-deep)}
.disc-h h3{font-family:var(--display); font-size:1.25rem; font-weight:500}
.disc-sub{color:var(--muted); font-size:.84rem; margin-bottom:18px}
.disc-item{display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:13px 0; border-top:1px solid var(--line-2); font-size:.92rem; color:var(--ink-dim)}
.tog{width:38px; height:22px; border-radius:100px; position:relative; flex:none; transition:.25s}
.tog::after{content:""; position:absolute; top:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:.25s; box-shadow:0 1px 3px rgba(0,0,0,.25)}
.tog.on{background:var(--violet)} .tog.on::after{left:19px}
.tog.off{background:rgba(245,166,35,.35)} .tog.off::after{left:3px}
.disc-foot{margin-top:20px; display:flex; align-items:center; gap:10px; font-size:.86rem; color:var(--ink-dim)}
.disc-foot .lock{color:var(--amber-deep)}
.disc-note{margin-top:28px; text-align:center; color:var(--muted); font-size:.95rem; max-width:64ch; margin-left:auto; margin-right:auto}
.disc-note em{font-style:italic; color:var(--ink)}

/* ---------- pricing ---------- */
.price-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
@media(max-width:760px){.price-grid{grid-template-columns:1fr}}
.price-card{border:1px solid var(--line); border-radius:20px; padding:38px; background:#fff; position:relative; box-shadow:0 24px 50px -38px rgba(22,19,31,.4)}
.price-card.buyer{border-color:rgba(109,91,255,.35); background:linear-gradient(180deg,#fff,#f8f6ff); box-shadow:0 30px 60px -38px rgba(72,52,180,.4)}
.price-card .who{font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:18px}
.price-card.buyer .who{color:var(--violet)}
.price-amt{font-family:var(--display); font-size:3.4rem; font-weight:500; line-height:1; letter-spacing:-.02em}
.price-card.buyer .price-amt{background:linear-gradient(120deg,var(--violet),var(--amber)); -webkit-background-clip:text; background-clip:text; color:transparent}
.price-amt small{font-size:1rem; color:var(--muted); font-family:var(--body); letter-spacing:0; -webkit-text-fill-color:var(--muted)}
.price-card h3{font-family:var(--display); font-size:1.3rem; font-weight:500; margin:18px 0 14px}
.price-list{list-style:none; display:flex; flex-direction:column; gap:12px}
.price-list li{display:grid; grid-template-columns:18px 1fr; gap:11px; color:var(--ink-dim); font-size:.95rem; line-height:1.5}
.price-list li::before{content:"→"; color:var(--amber-deep); font-weight:600}
.price-card.buyer .price-list li::before{content:"✓"; color:var(--violet)}
.filter-note{margin-top:26px; border:1px solid var(--line); border-radius:18px; padding:30px 34px; background:radial-gradient(120% 140% at 100% 0%,rgba(245,166,35,.12),transparent 55%),#fff}
.filter-note .k{font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-deep); margin-bottom:12px}
.filter-note p{color:var(--ink-dim); font-size:1.02rem; max-width:70ch}
.filter-note p em{font-style:italic; color:var(--ink)}
.charity{display:flex; align-items:center; gap:16px; margin-top:18px; padding:16px 20px; border-radius:14px; background:var(--amber-soft); border:1px solid rgba(245,166,35,.3)}
.charity .pill{font-family:var(--display); font-size:1.6rem; color:var(--amber-deep); font-weight:500; white-space:nowrap}
.charity span{font-size:.92rem; color:var(--ink-dim)}

/* ---------- closer ---------- */
.closer{text-align:center; padding:120px 0; position:relative}
.closer h2{font-family:var(--display); font-weight:400; font-size:clamp(2.2rem,5vw,3.8rem); line-height:1.05; letter-spacing:-.015em; max-width:18ch; margin:0 auto}
.closer h2 em{font-style:italic; color:var(--violet)}
.closer .hero-cta{justify-content:center; margin-top:38px}

/* ---------- big footer ---------- */
.foot{position:relative; z-index:1; margin-top:40px; background:linear-gradient(180deg,#13111c,#0c0a14); color:#e9e6f2; overflow:hidden}
.foot::before{content:""; position:absolute; left:50%; top:-30%; width:120vmax; height:120vmax; transform:translateX(-50%); pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 0%, rgba(109,91,255,.10) 0deg 1.4deg, transparent 1.4deg 11deg);
  -webkit-mask:radial-gradient(50% 50% at 50% 0%,#000,transparent 70%); mask:radial-gradient(50% 50% at 50% 0%,#000,transparent 70%)}
.foot-cta{position:relative; z-index:1; text-align:center; padding:74px 0 10px; border-bottom:1px solid rgba(255,255,255,.08)}
.foot-cta h3{font-family:var(--display); font-weight:400; font-size:clamp(1.9rem,4vw,2.9rem); line-height:1.06; letter-spacing:-.01em; max-width:20ch; margin:0 auto}
.foot-cta h3 em{font-style:italic; background:linear-gradient(100deg,#9d8cff,var(--amber)); -webkit-background-clip:text; background-clip:text; color:transparent}
.foot-cta .hero-cta{justify-content:center; margin-top:30px; padding-bottom:48px}
.foot-main{position:relative; z-index:1; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding:64px 0 48px}
@media(max-width:860px){.foot-main{grid-template-columns:1fr 1fr; gap:40px 24px}}
@media(max-width:480px){.foot-main{grid-template-columns:1fr 1fr}}
.foot-brand .logo{color:#fff}
.foot-brand .logo .tld{color:#9d8cff}
.foot-tag{margin-top:16px; color:#a39fb4; font-size:.95rem; max-width:30ch; line-height:1.6}
.foot-social{display:flex; gap:10px; margin-top:22px}
.foot-social a{width:38px; height:38px; border-radius:11px; border:1px solid rgba(255,255,255,.14); display:grid; place-items:center; color:#c9c5db; transition:.25s}
.foot-social a:hover{border-color:#9d8cff; color:#fff; background:rgba(109,91,255,.16)}
.foot-col h5{font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:#7e7a93; margin-bottom:16px}
.foot-col a{display:block; color:#c4c0d6; font-size:.94rem; padding:7px 0; transition:.2s}
.foot-col a:hover{color:#fff; transform:translateX(3px)}
.foot-wordmark{position:relative; z-index:1; text-align:center; padding:10px 0 0; line-height:.8; overflow:hidden}
.foot-wordmark span{font-family:var(--body); font-weight:800; text-transform:uppercase; font-size:clamp(3.4rem,19vw,14rem); letter-spacing:.06em;
  background:linear-gradient(180deg,rgba(157,140,255,.26),rgba(157,140,255,0)); -webkit-background-clip:text; background-clip:text; color:transparent; display:block}
.foot-bottom{position:relative; z-index:1; border-top:1px solid rgba(255,255,255,.08); padding:24px 0 30px; display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap}
.foot-bottom .mono{color:#7e7a93}
.foot-bottom .links{display:flex; gap:22px}
.foot-bottom .links a{color:#a39fb4; font-size:.85rem; transition:.2s}
.foot-bottom .links a:hover{color:#fff}

/* ---------- pillar link cards (home) ---------- */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media(max-width:820px){.pillars{grid-template-columns:1fr}}
.pillar{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:20px; padding:30px; background:#fff; transition:.3s; box-shadow:0 18px 40px -34px rgba(22,19,31,.4)}
.pillar:hover{transform:translateY(-4px); border-color:rgba(109,91,255,.4); box-shadow:0 30px 60px -34px rgba(72,52,180,.4)}
.pillar .pico{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; margin-bottom:20px; background:var(--violet-soft); color:var(--violet-deep); font-family:var(--display); font-size:1.3rem; font-weight:600}
.pillar.amber .pico{background:var(--amber-soft); color:var(--amber-deep)}
.pillar h3{font-family:var(--display); font-size:1.4rem; font-weight:500; margin-bottom:10px}
.pillar p{color:var(--ink-dim); font-size:.96rem; flex:1}
.pillar .go{margin-top:20px; font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--violet); display:inline-flex; align-items:center; gap:8px; transition:gap .25s}
.pillar.amber .go{color:var(--amber-deep)}
.pillar:hover .go{gap:14px}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
.stagger > *{opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.stagger.in > *{opacity:1; transform:none}
.stagger.in > *:nth-child(2){transition-delay:.08s}
.stagger.in > *:nth-child(3){transition-delay:.16s}
.stagger.in > *:nth-child(4){transition-delay:.24s}
.stagger.in > *:nth-child(5){transition-delay:.32s}
@media(prefers-reduced-motion:reduce){.reveal,.stagger>*{opacity:1!important;transform:none!important}}