/* Clippyprom base + components v2. Bento, iridescent, refined. Inherits tokens.css. */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);background:var(--ink);color:var(--text);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;font-weight:400}
::selection{background:var(--mint);color:#04120E}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---- Atmosphere: soft radial lift + fine grain, very restrained ---- */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.atmos::before{content:"";position:absolute;top:-30%;left:50%;transform:translateX(-50%);
  width:120vw;height:80vh;background:radial-gradient(ellipse at center,rgba(47,243,198,.06),transparent 60%)}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.35;mix-blend-mode:overlay;
  background-image:url("../img/noise.svg");background-size:200px}

/* ---- Shell ---- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:clamp(20px,5vw,40px);position:relative;z-index:2}
section{position:relative;z-index:2}
.section{padding-block:clamp(4rem,8vw,7rem)}

/* ---- Type ---- */
.eyebrow{font-family:var(--f-mono);font-size:var(--t-eye);letter-spacing:.2em;text-transform:uppercase;
  color:var(--mint);display:inline-flex;align-items:center;gap:.7em;font-weight:500}
.eyebrow::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--irid);
  box-shadow:0 0 14px -2px var(--i-violet)}
.hero-t{font-size:var(--t-hero);font-weight:600;line-height:1.02;letter-spacing:-.02em}
.h1{font-size:var(--t-h1);font-weight:600;line-height:1.06;letter-spacing:-.02em}
.h2{font-size:var(--t-h2);font-weight:600;line-height:1.1;letter-spacing:-.015em}
.h3{font-size:var(--t-h3);font-weight:600;line-height:1.2;letter-spacing:-.01em}
.lead{font-size:var(--t-lead);color:var(--muted);font-weight:400;line-height:1.55;max-width:56ch}
.muted{color:var(--muted)} .faint{color:var(--faint)} .mono{font-family:var(--f-mono)}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-.02em}
/* iridescent key-word treatment, used sparingly like Aleph Zero bolds */
.irid-word{background:var(--irid-lin);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--f-body);font-weight:500;font-size:var(--t-sm);
  padding:.8em 1.35em;border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;
  transition:transform .3s var(--ease),background .3s,border-color .3s,box-shadow .3s;white-space:nowrap}
.btn:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.btn-primary{color:#04120E;background:var(--mint)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--glow-mint)}
.btn-ghost{color:var(--text);background:transparent;border-color:var(--line-2)}
.btn-ghost:hover{background:rgba(255,255,255,.04);border-color:var(--text);transform:translateY(-2px)}
.btn-arrow svg{transition:transform .3s var(--ease)} .btn-arrow:hover svg{transform:translateX(3px)}

/* ---- Chip / pill ---- */
.chip{display:inline-flex;align-items:center;gap:.5em;font-size:var(--t-xs);font-weight:400;
  padding:.4em .85em;border-radius:var(--r-pill);background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--muted)}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint)}
.pill{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-mono);font-size:var(--t-xs);font-weight:500;
  padding:.32em .7em;border-radius:var(--r-pill);border:1px solid;text-transform:uppercase;letter-spacing:.05em}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.pending{color:var(--st-pending);border-color:rgba(245,185,74,.35);background:rgba(245,185,74,.08)}
.pill.settled{color:var(--st-settled);border-color:rgba(47,243,198,.35);background:rgba(47,243,198,.08)}
.pill.paid{color:var(--st-paid);border-color:rgba(87,227,154,.35);background:rgba(87,227,154,.08)}
.pill.eligible{color:var(--st-eligible);border-color:rgba(91,140,255,.4);background:rgba(91,140,255,.1)}
.pill.locked{color:var(--st-locked);border-color:rgba(106,108,120,.4);background:rgba(106,108,120,.12)}
.pill.rejected{color:var(--st-rejected);border-color:rgba(255,107,138,.35);background:rgba(255,107,138,.08)}

/* ---- Bento card ---- */
.bento{display:grid;gap:14px;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(210px,auto)}
.cell{position:relative;background:var(--coal);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-3);overflow:hidden;transition:border-color .4s,transform .4s var(--ease),background .4s}
.cell:hover{border-color:var(--line-2);transform:translateY(-3px)}
/* subtle top sheen on cards */
.cell::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 60% at 50% -20%,rgba(255,255,255,.05),transparent 60%)}
.cell>*{position:relative;z-index:1}
.col-3{grid-column:span 3} .col-4{grid-column:span 4} .col-5{grid-column:span 5}
.col-6{grid-column:span 6} .col-7{grid-column:span 7} .col-8{grid-column:span 8} .col-12{grid-column:span 12}
.row-2{grid-row:span 2}
@media(max-width:900px){
  .col-3,.col-4,.col-5{grid-column:span 6}
  .col-6,.col-7,.col-8{grid-column:span 12}
}
@media(max-width:560px){.col-3,.col-4,.col-5,.col-6,.col-7{grid-column:span 12}}

/* card label block (bottom-anchored like MultiversX) */
.cell-label{position:absolute;left:var(--s-3);right:var(--s-3);bottom:var(--s-3);z-index:1}

/* ---- Iridescent 3D-style motifs (CSS, verifiable; sit inside cells) ---- */
.irid-orb{position:absolute;border-radius:50%;background:var(--irid);
  filter:saturate(1.1) blur(.3px);box-shadow:inset -10px -14px 34px rgba(0,0,0,.55),inset 8px 10px 26px rgba(255,255,255,.35),0 30px 60px -30px rgba(167,107,255,.5)}
.irid-orb .hl{position:absolute;top:14%;left:20%;width:32%;height:24%;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.95),transparent 60%);filter:blur(2px)}
.irid-ring{position:absolute;border-radius:50%;background:var(--irid);
  -webkit-mask:radial-gradient(farthest-side,transparent 58%,#000 60%);mask:radial-gradient(farthest-side,transparent 58%,#000 60%);
  filter:saturate(1.05)}
.irid-shard{position:absolute;background:var(--irid-lin);border-radius:6px;
  box-shadow:inset 0 0 20px rgba(255,255,255,.3),0 20px 50px -20px rgba(91,140,255,.6)}

/* ---- Hero 3D stage ---- */
.stage{position:relative}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}
/* CSS fallback poster behind the canvas so the hero is premium even without WebGL */
.poster{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.poster .core{width:min(52vh,420px);aspect-ratio:1;border-radius:50%;background:var(--irid);
  filter:blur(2px) saturate(1.1);opacity:.9;
  box-shadow:inset -30px -40px 90px rgba(0,0,0,.6),inset 20px 26px 70px rgba(255,255,255,.25),0 60px 140px -50px rgba(167,107,255,.6);
  animation:spin 26s linear infinite}
.poster .core::before{content:"";position:absolute;inset:0;border-radius:50%;
  -webkit-mask:radial-gradient(farthest-side,transparent 40%,#000 42%,#000 58%,transparent 60%);
          mask:radial-gradient(farthest-side,transparent 40%,#000 42%,#000 58%,transparent 60%);
  background:conic-gradient(from 40deg,#fff6,#0000 30%,#fff6 55%,#0000 80%,#fff6)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- Stat ---- */
.stat-v{font-family:var(--f-mono);font-weight:600;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1;letter-spacing:-.03em}
.stat-l{font-size:var(--t-xs);color:var(--muted);margin-top:.4rem}
.legend{display:flex;flex-direction:column;gap:.55rem;font-size:var(--t-sm)}
.legend-row{display:flex;align-items:center;gap:.6rem}
.legend-row .k{width:9px;height:9px;border-radius:3px;flex:none}
.legend-row .lbl{color:var(--muted);flex:1}.legend-row .val{font-family:var(--f-mono);font-weight:600}

/* ---- Nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;transition:background .4s,border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(10,10,12,.7);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:74px}
.nav-links{display:flex;gap:2rem;align-items:center}
.nav-links a{font-size:var(--t-sm);color:var(--muted);transition:color .25s}
.nav-links a:hover{color:var(--text)}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
.brand .mk{width:26px;height:26px;flex:none}

.sec-head{max-width:60ch;margin-bottom:var(--s-5)}
.rule{height:1px;background:var(--line);border:0}
.stack>*+*{margin-top:var(--s-2)}

/* ---- Reveal ---- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.reveal.in{opacity:1;transform:none}

/* ---- Footer ---- */
.footer{background:var(--ink-2);border-top:1px solid var(--line);padding-block:var(--s-6) var(--s-4);position:relative;z-index:2}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:var(--s-4)}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-links{display:flex;flex-direction:column;gap:.55rem;font-size:var(--t-sm)}
.foot-links a{color:var(--muted)}.foot-links a:hover{color:var(--text)}
.foot-h{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:.3rem}

/* ============ v3 additions: mobile nav, art, faq, comparison, section bg ============ */

/* ---- Mobile nav ---- */
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;z-index:60}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text);margin:4px 0;transition:.3s var(--ease);border-radius:2px}
.nav.open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.open .nav-toggle span:nth-child(2){opacity:0}
.nav.open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:820px){
  .nav-toggle{display:block}
  .nav-links{position:fixed;inset:74px 0 auto 0;flex-direction:column;gap:0;align-items:stretch;
    background:rgba(10,10,12,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);padding:1rem clamp(20px,5vw,40px) 1.5rem;
    transform:translateY(-140%);transition:transform .45s var(--ease);z-index:50}
  .nav.open .nav-links{transform:translateY(0)}
  .nav-links a{padding:.9rem 0;border-bottom:1px solid var(--line);font-size:1rem;color:var(--text)}
  .nav-links a.btn{margin-top:1rem;justify-content:center;border-bottom:0}
}

/* ---- Abstract art canvas (SVG motifs sit in .art) ---- */
.art{position:absolute;pointer-events:none;z-index:0}
.art svg{display:block;width:100%;height:100%;overflow:visible}

/* section-level abstract background */
.sec-art{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.6}
.sec-art svg{position:absolute}
section.hasbg{background:linear-gradient(180deg,var(--ink),#08080B 50%,var(--ink))}

/* ---- FAQ accordion ---- */
.faq{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;color:var(--text);
  font-family:var(--f-body);font-size:clamp(1.05rem,1.6vw,1.25rem);font-weight:500;
  padding:1.5rem 3rem 1.5rem 0;position:relative;display:flex;letter-spacing:-.01em}
.faq-q::after{content:"";position:absolute;right:.4rem;top:50%;width:14px;height:14px;
  background:var(--irid);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transform:translateY(-50%);transition:transform .35s var(--ease)}
.faq-item.open .faq-q::after{transform:translateY(-50%) rotate(135deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.faq-a p{color:var(--muted);font-size:var(--t-sm);padding-bottom:1.5rem;max-width:70ch;line-height:1.6}

/* ---- Comparison table ---- */
.cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--t-sm)}
.cmp th,.cmp td{padding:1rem 1.1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}
.cmp thead th.us{color:var(--mint)}
.cmp td.us{color:var(--text);font-weight:500}
.cmp td{color:var(--muted)}
.cmp tr td:first-child{color:var(--text);font-weight:500}
.cmp-wrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--coal)}
.cmp .col-us{background:rgba(47,243,198,.04)}
@media(max-width:720px){.cmp-wrap{overflow-x:auto}.cmp{min-width:620px}}

/* ---- responsive hero + calculator + generic 2-col ---- */
@media(max-width:860px){
  header#top .shell{grid-template-columns:1fr !important;gap:2rem !important}
  .stage{order:-1;max-width:360px;margin-inline:auto;width:100%}
  #reach .cell{grid-template-columns:1fr !important}
  .two-col{grid-template-columns:1fr !important}
}
@media(max-width:560px){
  .nav-in{height:66px}
  .hero-t{font-size:clamp(2.4rem,11vw,3.2rem)}
}

/* hero SVG mark fallback (shown only if WebGL unavailable) */
.mark-fallback{width:min(40vh,300px);opacity:.9;filter:drop-shadow(0 0 40px rgba(91,140,255,.25))}
.mark-fallback svg{width:100%;height:auto;animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}

/* ---- Statement section with floating crystals ---- */
.statement{text-align:center;overflow:hidden}
.statement-inner{position:relative;z-index:2;max-width:760px}
.statement .crystal{position:absolute;z-index:0;pointer-events:none;
  filter:drop-shadow(0 24px 60px rgba(47,243,198,.32));animation:cfloat 9s var(--ease) infinite}
.statement .crystal svg{width:100%;height:auto;display:block}
.statement .crystal.blur{filter:blur(7px) drop-shadow(0 24px 60px rgba(91,140,255,.28));opacity:.65}
@keyframes cfloat{0%,100%{transform:translateY(-14px)}50%{transform:translateY(14px)}}
@media(max-width:640px){.statement .crystal{display:none}.statement .crystal:first-child,.statement .crystal:nth-child(3){display:block;width:80px !important;opacity:.5}}

/* ---- Process ghosted-number cards ---- */
.process{overflow:hidden}
.step-card{overflow:hidden}
.step-ghost{position:absolute;right:8%;top:42%;transform:translateY(-50%);z-index:0;pointer-events:none;
  font-family:var(--f-body);font-weight:800;font-size:clamp(6rem,11vw,10rem);line-height:1;
  color:rgba(255,255,255,.04);letter-spacing:-.04em}
.step-ico{position:absolute;top:var(--s-3);left:var(--s-3);width:44px;height:44px;z-index:1;
  display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;background:rgba(47,243,198,.05)}
.step-ico svg{width:22px;height:22px}
.proc-glow{position:absolute;left:50%;bottom:-40%;transform:translateX(-50%);width:120%;height:80%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at center top,rgba(47,243,198,.16),transparent 55%)}
.process .shell{position:relative;z-index:1}
@media(max-width:900px){.step-card{min-height:230px !important}}

/* ---- Newsletter capture ---- */
.news{overflow:hidden;text-align:center}
.news-inner{position:relative;z-index:2;max-width:720px}
.news-art{position:absolute;z-index:0;pointer-events:none;top:50%;width:min(38vw,440px);opacity:.9;filter:saturate(1.05)}
.news-art.left{left:-8%;transform:translateY(-50%)}
.news-art.right{right:-8%;transform:translateY(-50%)}
.news-art svg{width:100%;height:auto}
.news-form{display:flex;gap:.7rem;margin:1.8rem auto 0;max-width:560px}
.news-form input{flex:1;background:var(--coal);border:1px solid var(--line-2);border-radius:var(--r-pill);
  color:var(--text);font-family:var(--f-body);font-size:var(--t-body);padding:.95em 1.3em;outline:none;transition:border-color .3s}
.news-form input:focus{border-color:var(--mint)}
.news-form input::placeholder{color:var(--faint)}
.news-form .btn{padding:.85em 1.5em}
.news-note{color:var(--faint);font-size:var(--t-sm);max-width:52ch;margin:1.2rem auto 0;line-height:1.55}
@media(max-width:600px){.news-form{flex-direction:column}.news-art{opacity:.4;width:60vw}}

/* ---- Mobile hero: compact static 3D mark, hide the animated canvas ---- */
.stage{position:relative;aspect-ratio:1;min-height:340px}
.mark-fallback{width:min(38vh,320px);margin-inline:auto;filter:drop-shadow(0 20px 50px rgba(122,59,255,.35))}
.mark-fallback svg{width:100%;height:auto;animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}
@media(max-width:860px){
  header#top .hero-grid{grid-template-columns:1fr}
  .stage{order:-1;min-height:auto;max-width:none;aspect-ratio:auto}
  .stage #gl{display:none}
  .mark-fallback{width:180px}
}
@media(max-width:560px){ .mark-fallback{width:150px} }

@media(max-width:860px){
  .stage .poster{position:static;display:flex;justify-content:center;padding-block:1rem}
  .stage{display:flex;justify-content:center}
}

/* ---- Centered MultiversX-style hero ---- */
.hero-c{position:relative;min-height:94vh;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;padding-top:clamp(7rem,13vh,10rem)}
.hero-inner{position:relative;z-index:3;max-width:800px;margin-inline:auto}
.hero-inner .eyebrow{justify-content:center}
.hero-inner .hero-t{text-align:center;margin-inline:auto;max-width:15ch}
.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:2.2rem}
.hero-art{position:absolute;z-index:1;pointer-events:none;top:50%;transform:translateY(-50%)}
.hero-left{left:-14%;width:min(44vw,540px);opacity:.5}
.hero-left svg{width:100%;height:auto}
.hero-right{right:-20%;width:min(62vh,640px);height:min(62vh,640px)}
.hero-right .poster{position:absolute;inset:0;display:grid;place-items:center}
.hero-right #gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-right .mark-fallback{width:66%;margin:0}
@media(max-width:900px){
  .hero-left{opacity:.18;width:78vw;left:-32%}
  .hero-right{opacity:.28;right:-40%;width:92vw;height:92vw}
  .hero-right #gl{display:none}
  .hero-t{font-size:clamp(2.6rem,10vw,3.4rem)}
}
@media(max-width:560px){ .hero-left,.hero-right{opacity:.14} }

/* mid-range: keep edge art from crowding centered hero text */
@media(min-width:901px) and (max-width:1120px){
  .hero-left{opacity:.3;left:-22%}
  .hero-right{opacity:.34;right:-30%}
}