/* ============================================
   XEN CHAIN — Design Tokens
   ============================================ */
:root{
  --xc-bg:#020405;
  --xc-bg-footer:#131010;
  --xc-surface:#141110;
  --xc-surface-2:#1B1614;
  --xc-tile:#241A12;

  --xc-orange:#F1611D;
  --xc-orange-text:#F26B1D;
  --xc-orange-bright:#FF8340;
  --xc-glow:rgba(190,80,20,.16);

  --xc-text:#F4EFE9;
  --xc-text-body:#B7AEA5;
  --xc-text-dim:#857C74;

  --xc-border:rgba(255,255,255,.07);
  --xc-border-strong:rgba(255,255,255,.12);
  --xc-border-orange:rgba(241,97,29,.3);

  --xc-font-display:'Space Grotesk',sans-serif;
  --xc-font-body:'Plus Jakarta Sans',sans-serif;

  --xc-r-sm:8px;
  --xc-r-md:10px;
  --xc-r-lg:14px;

  --xc-content:1180px;
}

*{box-sizing:border-box}
html{background:var(--xc-bg)}
body.xenchain-landing{margin:0;background:var(--xc-bg);color:var(--xc-text);font-family:var(--xc-font-body);-webkit-font-smoothing:antialiased}
.xenchain-landing a{color:var(--xc-orange-text);text-decoration:none}
.xenchain-landing a:hover{color:var(--xc-orange-bright)}
.xenchain-landing img{max-width:none}

.page{min-width:0;position:relative;overflow:hidden}
.wrap{width:1180px;margin:0 auto;position:relative}
.fx{display:flex}
.grid{display:grid}
.ac{align-items:center}
.jc{justify-content:center}
.jb{justify-content:space-between}
.f1{flex:1}
.col{display:flex;flex-direction:column}
.posrel{position:relative}
.tc{text-align:center}
.m0{margin:0}
.gap16{gap:16px}
.mt16{margin-top:16px}

.hd{font-family:var(--xc-font-display);font-weight:600;margin:0;color:var(--xc-text)}
.h1{font-size:63px;line-height:1.13;letter-spacing:-.01em}
.h2{font-size:44px;line-height:1.22}
.h3{font-size:32px;line-height:1.28}
.body{font-size:17px;line-height:1.58;color:var(--xc-text-body);margin:0}
.eyebrow{display:flex;gap:12px;font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--xc-orange-text)}
.btn{display:inline-flex;align-items:center;justify-content:center;height:49px;padding:0 27px;border-radius:10px;font-family:var(--xc-font-body);font-size:16px;font-weight:500;cursor:pointer;border:0;box-sizing:border-box}
.btn-o{background:var(--xc-orange);color:#fff}.btn-o:hover{background:var(--xc-orange-bright)}
.btn-d{background:var(--xc-surface-2);color:var(--xc-text);border:1px solid var(--xc-border-strong)}.btn-d:hover{border-color:rgba(255,255,255,.25)}
.glow{position:absolute;pointer-events:none;background:radial-gradient(closest-side,var(--xc-glow),transparent 72%)}
.ic{width:22px;height:22px;flex:none}
.ic16{width:17px;height:17px;flex:none}
.tile{width:44px;height:44px;border-radius:10px;background:var(--xc-tile);border:1px solid var(--xc-border-orange);color:var(--xc-orange);flex:none}
.card{background:var(--xc-surface);border:1px solid var(--xc-border);border-radius:var(--xc-r-lg);position:relative;overflow:hidden;box-sizing:border-box}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hdr{position:absolute;top:0;left:0;right:0;z-index:50;background:transparent}
.hdr.fixed{position:fixed;background:rgba(2,4,5,.72);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid var(--xc-border);box-shadow:0 10px 30px rgba(0,0,0,.45);transform:translateY(0);transition:transform .35s ease}
.hdr.fixed .wrap{height:72px !important}
.hdr.fixed.hide{transform:translateY(-100%);box-shadow:none}
.navlink{font-size:15px;color:#D8D1CA;font-weight:400}.navlink:hover{color:#fff}
.navbtn{height:42px;padding:0 22px;font-size:14px;border-radius:9px}
.ind-box{border-radius:16px;background:#030608}
.ind-row{display:flex;align-items:stretch;justify-content:space-between;padding:20px 30px}
.ind-item{display:flex;align-items:center;gap:12px;color:#D6CFC8;font-size:14px;line-height:1.25;padding:0 8px}
.ind-item svg{color:var(--xc-orange)}
.bcase{width:24px;height:24px;flex:none}
.divv{width:1px;align-self:stretch;background:var(--xc-border)}
.bull{display:flex;gap:15px;align-items:baseline;font-size:16.5px;color:#C9C0B7}
.dot{width:8px;height:8px;border-radius:50%;background:var(--xc-orange);flex:none;box-shadow:0 0 0 3.5px rgba(241,97,29,.18);position:relative;top:-1px}
.pcard{height:276px;padding:26px 28px}
.kick{font-size:11px;font-weight:700;letter-spacing:.12em;color:#CFC7BF;text-transform:uppercase}
.pname{font-family:var(--xc-font-display);font-weight:600;font-size:23px;line-height:1.15;color:var(--xc-text)}
.ptext{width:53%;font-size:15px;line-height:1.5;color:var(--xc-text-body);margin:18px 0 0}
.pimg{position:absolute;right:4px;bottom:4px}
.learn{position:absolute;left:28px;bottom:24px;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--xc-orange-text);display:flex;align-items:center;gap:7px}
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.icard{padding:20px 18px;display:flex;gap:14px;align-items:flex-start}
.ititle{font-size:17px;font-weight:700;color:var(--xc-text);line-height:1.2}
.idesc{font-size:13.5px;line-height:1.45;color:var(--xc-text-dim);margin-top:6px}
.tabs{display:flex;gap:8px;border-bottom:1px solid var(--xc-border);margin-top:34px}
.tab{padding:12px 18px 14px;font-size:16px;color:var(--xc-text-body);cursor:pointer;background:none;border:0;border-bottom:2px solid transparent;font-family:var(--xc-font-body);margin-bottom:-1px}
.tab.on{color:var(--xc-orange-text);border-color:var(--xc-orange);font-weight:600}
.stat{padding:0 30px;display:flex;gap:26px;align-items:center;height:150px}
.stat-n{font-family:var(--xc-font-display);font-weight:600;font-size:92px;color:var(--xc-orange);line-height:1;letter-spacing:-.02em}
.stat-l{font-size:14.5px;line-height:1.45;color:var(--xc-text-body);width:150px}
.ecard{height:256px;padding:26px 28px}
.ename{font-family:var(--xc-font-display);font-weight:600;font-size:24px;color:var(--xc-text)}
.etext{width:52%;font-size:15px;line-height:1.5;color:var(--xc-text-body);margin:22px 0 0}
.fhead{font-size:11.5px;font-weight:700;color:var(--xc-orange-text);letter-spacing:.1em;text-transform:uppercase;margin:0 0 22px}
.flink{display:block;font-size:14.5px;color:#A79E96;margin-top:14px}.flink:hover{color:#fff}
.fmeta{font-size:13px;color:var(--xc-text-dim)}
.sec{position:relative;z-index:1}
.btn{transition:background .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn-o:hover{box-shadow:0 8px 24px rgba(241,97,29,.35)}
.btn:active{transform:translateY(0)}
.navlink{transition:color .2s ease}
.flink{transition:color .2s ease,transform .2s ease}.flink:hover{transform:translateX(3px)}
.hwimg{transition:transform .18s ease-out;transform-origin:center;will-change:transform}
.card{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.card:hover{transform:translateY(-6px);border-color:rgba(241,97,29,.38);box-shadow:0 0 28px rgba(241,97,29,.14),0 14px 34px rgba(0,0,0,.4)}
.learn{transition:color .2s ease,gap .2s ease}.learn:hover{color:var(--xc-orange-bright);gap:11px}
.tab{transition:color .2s ease,border-color .2s ease}
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,.9,.3,1),transform .7s cubic-bezier(.22,.9,.3,1)}
.rv.in{opacity:1;transform:translateY(0)}
.card.rv.in{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease,opacity .6s ease}
.card.rv.in:hover{transform:translateY(-6px)}
.ch{display:inline-block;opacity:0;transform:translateY(.45em);animation:chUp .55s cubic-bezier(.22,.9,.3,1) forwards}
@keyframes chUp{to{opacity:1;transform:translateY(0)}}

/* No-JS / reduced-motion fallback: content must never stay hidden */
html.no-js .rv{opacity:1;transform:none;transition:none}
html.no-js .ch{opacity:1;transform:none;animation:none}

@media (prefers-reduced-motion:reduce){
  .ch{opacity:1;transform:none;animation:none}
  .rv{opacity:1;transform:none;transition:none}
  .btn:hover{transform:none}
  .hwimg{transition:none}
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Fluid container past the desktop breakpoint (exact 1180px above it, untouched).
   Every section's inline style="padding:Xpx 0 ..." zeroes left/right padding on
   purpose (it's a 1440-canvas export) — padding-left/right need !important to win. */
@media (max-width:1230px){
  .wrap{width:100%;max-width:1180px;box-sizing:border-box;padding-left:32px !important;padding-right:32px !important}
  [data-screen-label="Get Started"]{padding-left:32px !important;padding-right:32px !important}
}

/* ---------- Mobile nav (desktop: display:contents keeps markup invisible to layout) ---------- */
.navtoggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:40px;height:40px;background:none;border:0;padding:0;cursor:pointer;flex:none}
.navtoggle span{display:block;width:22px;height:2px;background:var(--xc-text);transition:transform .25s ease,opacity .25s ease}
.navtoggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle.open span:nth-child(2){opacity:0}
.navtoggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.navwrap{display:contents}
.nav-backdrop{position:fixed;inset:0;background:rgba(2,4,5,.6);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:59}
.nav-backdrop.show{opacity:1;pointer-events:auto}

@media (max-width:1024px){
  .navtoggle{display:flex}
  .navwrap{display:flex !important;position:fixed;top:0;right:-100%;bottom:0;width:min(320px,86vw);background:#0A0706;border-left:1px solid var(--xc-border);flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px;padding:96px 28px 32px;overflow-y:auto;transition:right .3s cubic-bezier(.22,.9,.3,1);z-index:60}
  .navwrap.open{right:0}
  .navwrap nav{flex-direction:column;align-items:flex-start;gap:22px !important;width:100%}
  .navwrap .navlink{font-size:17px}
  .navwrap > div{flex-direction:column;align-items:stretch;width:100%;gap:14px !important;margin-top:14px}
  .navwrap .btn{width:100%}

  [data-screen-label="Hero"] canvas,
  [data-screen-label="Hero"] > img.pimg{display:none}
  [data-screen-label="Hero"]{padding-top:150px !important;padding-bottom:70px !important}
  [data-screen-label="Hero"] .posrel{width:100% !important;max-width:560px}
  [data-screen-label="Hero"] h1{font-size:52px !important;line-height:1.08 !important}
  [data-screen-label="Hero"] p.body{width:100% !important;height:auto !important}

  .grid3{grid-template-columns:repeat(2,1fr)}
  .grid5{grid-template-columns:repeat(3,1fr)}

  [data-screen-label="Our Platform"]{flex-direction:column;gap:36px !important}
  [data-screen-label="Our Platform"] img{width:100% !important;max-width:380px;margin-left:0 !important}

  [data-screen-label="How It Works"]{grid-template-columns:1fr !important;gap:36px !important;padding-top:70px !important;padding-bottom:60px !important}
  [data-screen-label="How It Works"] img{justify-self:center !important}

  [data-screen-label="Proof Points"]{flex-direction:column;gap:40px !important}
  [data-screen-label="Proof Points"] > div:first-child{width:100% !important}
}

@media (max-width:640px){
  .wrap{padding-left:10% !important;padding-right:10% !important}
  [data-screen-label="Get Started"]{padding-left:10% !important;padding-right:10% !important}
  .h1{font-size:40px}
  .h2{font-size:30px}
  .h3{font-size:24px}
  .eyebrow{font-size:12px}

  [data-screen-label="Hero"] h1{font-size:40px !important}
  [data-screen-label="Get Started"] h2{font-size:32px !important;line-height:1.2 !important}
  [data-screen-label="Get Started"] .fx{flex-wrap:wrap;gap:14px !important}

  .ind-row{flex-wrap:wrap;justify-content:center;gap:16px 22px;padding:20px 18px}
  .ind-item{padding:0}
  .divv{display:none}

  .grid3{grid-template-columns:1fr}
  .grid5{grid-template-columns:repeat(2,1fr)}

  .pcard,.ecard{height:auto !important;min-height:0;padding-bottom:70px}
  .ptext,.etext{width:100%}

  .stat-n{font-size:56px}
  .stat{height:auto;padding:22px}
  .stat-l{width:auto}

  footer .wrap.fx{flex-direction:column !important;gap:40px !important}
  [data-screen-label="Footer"] .fx > div:first-child{width:100% !important}
  [data-screen-label="Footer"] .f1.grid{grid-template-columns:repeat(2,1fr) !important;padding-left:0 !important;gap:28px 20px !important}
  [data-screen-label="Footer"] .wrap.jb{flex-direction:column !important;gap:16px !important;text-align:center}
  [data-screen-label="Footer"] .wrap.jb > div{flex-wrap:wrap;justify-content:center}

  [data-screen-label="Nav"] .wrap{height:72px !important}
  [data-screen-label="Nav"] img{height:34px !important}
}

@media (max-width:420px){
  .pcard .pimg,.ecard .pimg{display:none}
  .grid5{grid-template-columns:repeat(2,1fr)}
  [data-screen-label="Footer"] .f1.grid{grid-template-columns:1fr !important}
}

/* Never trap the nav panel off-canvas if JS never runs */
html.no-js .navwrap{position:static !important;right:auto !important;display:block !important}
html.no-js .navtoggle{display:none !important}

@media (prefers-reduced-motion:reduce){
  .navwrap{transition:none}
  .navtoggle span{transition:none}
}