/* =============================================================
   CREO ENGINE: Creoplay AI website
   Design tokens, reset, typography, buttons, layout primitives
   ============================================================= */
:root{
  --bg:#05080F;
  --bg-2:#070B15;
  --surface:#0A101E;
  --surface-2:#0E162A;
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.16);
  --text:#F4F7FC;
  --muted:#8E97AD;
  --muted-2:#5C6680;
  --blue:#1E7BFF;
  --blue-2:#3F92FF;
  --blue-3:#8FC2FF;
  --blue-deep:#0B49C9;
  --purple:#7C5CFF;
  --yellow:#FFC53D;
  --green:#22C55E;
  --cyan:#22D3EE;
  --pink:#F472B6;
  --radius:18px;
  --radius-sm:11px;
  --container:1440px;
  --gutter:40px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --glow:0 0 0 1px rgba(79,134,255,.28),0 12px 44px -12px rgba(47,107,255,.65);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-gutter:stable;overflow-x:clip} /* clip, not hidden, and on html (not body): no sideways scroll on phones, no layout-viewport widening of the fixed header on Android, and position:sticky keeps working (2026-10-01) */ /* gutter stays reserved when a modal locks scrolling, so the page never shifts */
body{
  margin:0;font-family:var(--font);color:var(--text);background:var(--bg);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 520px at 78% -8%,rgba(47,107,255,.28),transparent 60%),
    radial-gradient(700px 420px at 8% 12%,rgba(47,107,255,.12),transparent 60%),
    var(--bg);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 50% at 50% 0%,#000 30%,transparent 100%);
          mask-image:radial-gradient(ellipse 80% 50% at 50% 0%,#000 30%,transparent 100%);
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
::selection{background:rgba(79,134,255,.35);color:#fff}

.skip-link{position:absolute;left:-999px;top:8px;background:var(--blue);color:#fff;padding:8px 14px;border-radius:8px;z-index:1000}
.skip-link:focus{left:8px}

/* ---------- Layout ---------- */
.container{width:min(var(--container),calc(100% - var(--gutter) * 2));margin-inline:auto}
.section{padding:clamp(72px,9vw,120px) 0;position:relative}
.section-tight{padding:clamp(48px,6vw,72px) 0}
.section-head{max-width:720px;margin-bottom:clamp(40px,5vw,64px)}
.section-head.center{margin-inline:auto;text-align:center;max-width:840px}
.section-head p{color:var(--muted);font-size:17px;margin-top:16px;max-width:60ch}
.section-head.center p{margin-inline:auto}
.section-head .btn{margin-top:24px}
.row-between{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}

/* ---------- Typography ---------- */
h1{font-size:clamp(40px,6.2vw,74px);font-weight:800;letter-spacing:-.035em;line-height:1.02}
h2{font-size:clamp(30px,4.2vw,50px);font-weight:800;letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
h3{font-size:clamp(20px,2vw,24px);font-weight:700;letter-spacing:-.02em;line-height:1.25}
h4{font-size:15px;font-weight:700;letter-spacing:-.01em}
.lead{font-size:clamp(17px,1.6vw,19px);color:var(--muted);line-height:1.65}
.muted{color:var(--muted)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.text-gradient{background:linear-gradient(90deg,#fff 0%,#C9DAFF 55%,var(--blue-3) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-3);
}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--blue-3))}
.section-head.center .eyebrow::after{content:"";width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--blue-3),var(--blue))}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:12px;font-weight:600;font-size:15px;line-height:1;white-space:nowrap;
  border:1px solid transparent;transition:transform .2s var(--ease),box-shadow .25s var(--ease),background .2s,border-color .2s,color .2s;
  will-change:transform;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{
  color:#fff;background:linear-gradient(180deg,#3F92FF 0%,#1E7BFF 55%,#1560E8 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 10px 30px -10px rgba(30,123,255,.85);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 16px 40px -10px rgba(30,123,255,.95)}
.btn-outline{color:var(--text);background:rgba(255,255,255,.03);border-color:var(--border-strong)}
.btn-outline:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.28);transform:translateY(-2px)}
.btn-ghost{color:var(--blue-3);padding-inline:6px}
.btn-ghost:hover{color:#fff}
.btn-sm{padding:11px 18px;font-size:14px;border-radius:10px}
.btn-lg{padding:17px 30px;font-size:16px;border-radius:14px}
.btn-block{width:100%}
.btn svg{flex:none}
.link-arrow{display:inline-flex;align-items:center;gap:8px;color:var(--blue-3);font-weight:600;font-size:15px;transition:gap .2s var(--ease),color .2s}
.link-arrow:hover{gap:12px;color:#fff}

/* ---------- Cards & chips ---------- */
.card{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,.015) 100%);
  border:1px solid var(--border);border-radius:var(--radius);padding:28px;
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);opacity:.6;
}
.card:hover{border-color:var(--border-strong);transform:translateY(-3px);box-shadow:0 20px 50px -30px rgba(0,0,0,.9)}
.card-flat:hover{transform:none;box-shadow:none}
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  font-size:12.5px;font-weight:600;letter-spacing:.01em;
  background:rgba(79,134,255,.12);color:var(--blue-3);border:1px solid rgba(79,134,255,.25);
}
.chip-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.chip-green{background:rgba(34,197,94,.12);color:#5EE39A;border-color:rgba(34,197,94,.3)}
.chip-yellow{background:rgba(255,197,61,.12);color:#FFD56A;border-color:rgba(255,197,61,.3)}
.chip-purple{background:rgba(124,92,255,.14);color:#B7A6FF;border-color:rgba(124,92,255,.32)}
.chip-neutral{background:rgba(255,255,255,.06);color:var(--muted);border-color:var(--border)}
.icon-box{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:linear-gradient(180deg,rgba(79,134,255,.22),rgba(79,134,255,.08));
  border:1px solid rgba(79,134,255,.3);color:var(--blue-3);
  box-shadow:0 0 0 1px rgba(0,0,0,.2) inset;
}
.icon-box svg{width:22px;height:22px}
.icon-box.purple{background:linear-gradient(180deg,rgba(124,92,255,.25),rgba(124,92,255,.08));border-color:rgba(124,92,255,.35);color:#B7A6FF}
.icon-box.yellow{background:linear-gradient(180deg,rgba(255,197,61,.22),rgba(255,197,61,.06));border-color:rgba(255,197,61,.35);color:#FFD56A}
.icon-box.green{background:linear-gradient(180deg,rgba(34,197,94,.22),rgba(34,197,94,.06));border-color:rgba(34,197,94,.35);color:#5EE39A}
.icon-box.cyan{background:linear-gradient(180deg,rgba(34,211,238,.22),rgba(34,211,238,.06));border-color:rgba(34,211,238,.35);color:#7EE7F5}
.check-list li{display:flex;gap:12px;align-items:flex-start;color:var(--muted);font-size:15px;padding:7px 0}
.check-list li strong{color:var(--text);font-weight:600}
.check-list li::before{
  content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;
  background:rgba(79,134,255,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FB4FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 8'/%3E%3C/svg%3E") center/11px no-repeat;
  border:1px solid rgba(79,134,255,.35);
}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--border-strong),transparent)}
.note{font-size:13px;color:var(--muted-2);margin-top:20px}
/* =============================================================
   Header / Navigation (with dropdown menus)
   ============================================================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:21px 0;transition:padding .25s var(--ease),background .25s,border-color .25s;
  background:linear-gradient(180deg,rgba(5,8,15,.66),rgba(5,8,15,.42));
  border-bottom:1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px);
}
/* thin accent line under the header */
.site-header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(79,134,255,.45) 25%,rgba(143,194,255,.55) 50%,rgba(79,134,255,.45) 75%,transparent 100%);
  opacity:.55;
}
.site-header.scrolled{
  padding:12px 0;background:rgba(5,8,15,.82);border-bottom-color:rgba(255,255,255,.1);
  -webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center}
.brand img{height:30px;width:auto;filter:drop-shadow(0 4px 16px rgba(19,158,251,.35))}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-link{
  display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border-radius:9px;
  font:inherit;font-size:14px;font-weight:500;color:var(--muted);background:none;border:0;cursor:pointer;
  transition:color .2s,background .2s;white-space:nowrap;
}
.nav-link:hover,.nav-item:hover > .nav-link,.nav-item.open > .nav-link{color:#fff;background:rgba(255,255,255,.05)}
.nav-link .chev{opacity:.7;transition:transform .2s var(--ease)}
.nav-item:hover > .nav-link .chev,.nav-item.open > .nav-link .chev{transform:rotate(180deg)}
.nav-item{position:relative}
.nav-item::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.nav-menu{z-index:2; /* above .site-header::after, whose accent line painted across the open panel (owner report 2026-09-24) */
  position:absolute;top:calc(100% + 10px);left:0;min-width:270px;padding:8px;border-radius:14px;
  background:rgba(10,16,30,.96);border:1px solid var(--border-strong);box-shadow:0 30px 60px -20px rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s .2s;
}
.nav-item:hover > .nav-menu,.nav-item.open > .nav-menu{opacity:1;visibility:visible;transform:none;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.nav-menu a{display:block;padding:10px 12px;border-radius:9px;transition:background .15s}
.nav-menu a:hover{background:rgba(79,134,255,.12)}
.nav-menu strong{display:block;font-size:14px;font-weight:600;color:#fff}
.nav-menu small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.nav-mobile-actions{display:none}
.nav-actions{display:flex;align-items:center;gap:10px}
.nav-toggle{display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--border);flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-toggle span{width:18px;height:2px;background:#fff;border-radius:2px;transition:transform .25s var(--ease),opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =============================================================
   Hero: full-width slider
   ============================================================= */
.hero{position:relative;overflow:hidden;padding:clamp(92px,7.5vw,104px) 0 0}
.hero-bg{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(760px 540px at 72% 46%,rgba(30,123,255,.30),transparent 62%),
    radial-gradient(520px 380px at 10% 18%,rgba(30,123,255,.10),transparent 60%),
    linear-gradient(180deg,#040814 0%,#050A17 70%,#05080F 100%);
}
.hero-bg::after{
  content:"";position:absolute;inset:0;opacity:.28;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 60% 40%,#000 20%,transparent 100%);
          mask-image:radial-gradient(ellipse 70% 60% at 60% 40%,#000 20%,transparent 100%);
}
.hero-slider{position:relative}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s var(--ease),visibility 0s .9s}
.slide.is-active{position:relative;opacity:1;visibility:visible;transition:opacity .9s var(--ease)}
/* Inner layout: content (copy and graphic) keeps the header/footer container width; only the background is full-bleed */
.hero-inner{
  position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(8px,2vw,32px);
  width:min(var(--container),calc(100% - var(--gutter) * 2));margin-inline:auto;min-height:600px;
}
.slide-copy{position:relative;z-index:4;padding:36px 0 48px}
/* Homepage hero: give the copy more room so it sits closer to the artwork */
.slide .hero-inner{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr)}
.slide .hero-copy-wide h1{font-size:clamp(38px,5vw,68px);max-width:17ch}
.slide .hero-copy-wide .lead{max-width:56ch;font-size:clamp(16px,1.3vw,18px)}
.js .slide.is-active .slide-copy > *{animation:riseIn .8s var(--ease) both}
.js .slide.is-active .slide-copy > *:nth-child(2){animation-delay:.1s}
.js .slide.is-active .slide-copy > *:nth-child(3){animation-delay:.2s}
.js .slide.is-active .slide-copy > *:nth-child(4){animation-delay:.3s}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero h1{font-size:clamp(36px,4.6vw,60px);max-width:15ch}
.hero .lead{margin-top:20px;max-width:46ch;font-size:clamp(15px,1.25vw,17px)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-facts{display:flex;flex-wrap:wrap;row-gap:10px;margin-top:36px}
.fact{display:flex;align-items:center;gap:9px;padding:4px 16px 4px 0;margin-right:16px;border-right:1px solid rgba(255,255,255,.14)}
.fact:last-child{border-right:0;margin-right:0;padding-right:0}
.fact > svg{width:20px;height:20px;color:var(--blue-3);flex:none}
.fact strong{display:block;font-size:20px;font-weight:800;letter-spacing:-.03em;line-height:1.05;white-space:nowrap}
.fact > div > span{font-size:12px;color:var(--muted);white-space:nowrap}
.hero-facts-grid{display:grid;grid-template-columns:auto auto;gap:14px 32px;justify-content:start;margin-top:32px}
.hero-facts-grid .fact{border:0;padding:0;margin:0}
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;margin-bottom:24px;
  background:rgba(79,134,255,.08);border:1px solid rgba(79,134,255,.28);font-size:13px;font-weight:600;color:#C9DAFF;
}
.hero-badge b{padding:4px 10px;border-radius:999px;background:linear-gradient(180deg,var(--blue-2),var(--blue));color:#fff;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.hero-meta{display:flex;align-items:center;gap:14px;margin-top:22px;color:var(--muted-2);font-size:13.5px;flex-wrap:wrap}
.hero-meta .avatars{display:flex}
.hero-meta .avatars span{width:26px;height:26px;border-radius:50%;border:2px solid var(--bg);margin-left:-8px;background:linear-gradient(135deg,var(--blue-2),var(--purple))}
.hero-meta .avatars span:first-child{margin-left:0}
.hero-meta .avatars span:nth-child(2){background:linear-gradient(135deg,var(--yellow),var(--pink))}
.hero-meta .avatars span:nth-child(3){background:linear-gradient(135deg,var(--cyan),var(--blue))}
.hero-meta .avatars span:nth-child(4){background:linear-gradient(135deg,var(--green),var(--cyan))}

/* Slider navigation */
.slider-nav{display:flex;align-items:center;gap:12px;position:absolute;left:max(var(--gutter),calc((100% - var(--container)) / 2));bottom:20px;z-index:6}
.slider-arrow{width:34px;height:34px;border-radius:50%;border:1px solid var(--border-strong);display:grid;place-items:center;color:var(--muted);background:rgba(255,255,255,.03);transition:color .2s,border-color .2s,background .2s}
.slider-arrow svg{width:16px;height:16px}
.slider-arrow:hover{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.08)}
.slider-dots{display:flex;gap:8px}
.slider-dots button{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.22);transition:width .3s var(--ease),background .3s}
.slider-dots button.active{width:28px;background:linear-gradient(90deg,var(--blue),var(--blue-3))}

/* Stats bar */
.hero-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:clamp(28px,4vw,44px);position:relative;z-index:5;
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
}
.stat{padding:22px 24px;display:flex;align-items:center;gap:14px;border-right:1px solid var(--border)}
.stat:last-child{border-right:0}
.stat .icon-box{width:40px;height:40px;border-radius:11px}
.stat .icon-box svg{width:18px;height:18px}
.stat strong{display:block;font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.stat > div > span{font-size:12.5px;color:var(--muted)}

/* =============================================================
   Hero artwork (slide 1): background image on the right half, fading toward the copy
   ============================================================= */
/* Positioned against the full-width slide (not the content container) so it runs to the screen edge */
.hero-art{
  position:absolute;top:-6%;bottom:-4%;left:46%;right:0;z-index:0;pointer-events:none;
  background-repeat:no-repeat;background-size:cover;background-position:42% 50%;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.45) 20%,#000 42%);
          mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.45) 20%,#000 42%);
}
.hero-art::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(5,8,15,.75) 0%,rgba(5,8,15,0) 18%),
    linear-gradient(0deg,rgba(5,8,15,.95) 0%,rgba(5,8,15,.35) 14%,rgba(5,8,15,0) 34%);
}
.hero-art::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 55% at 62% 50%,rgba(30,123,255,.18),transparent 70%);
  mix-blend-mode:screen;
}
.slide:first-child .hero-inner{min-height:640px}

/* =============================================================
   Hero scene: 3D brand mark, podium, floating game cards (kept for optional reuse)
   ============================================================= */
.scene{position:relative;height:620px;z-index:1;width:100%}
.scene-glow{position:absolute;left:50%;top:50%;width:660px;height:660px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(30,123,255,.40) 0%,rgba(30,123,255,.12) 38%,transparent 68%);filter:blur(12px)}
.beam{position:absolute;left:50%;bottom:84px;width:280px;height:72%;transform:translateX(-50%);opacity:.9;pointer-events:none;
  background:linear-gradient(180deg,rgba(79,160,255,0) 0%,rgba(79,160,255,.14) 55%,rgba(143,196,255,.40) 100%);
  clip-path:polygon(34% 0,66% 0,100% 100%,0 100%);filter:blur(8px)}
.podium{position:absolute;left:50%;bottom:36px;width:470px;height:132px;transform:translateX(-50%);pointer-events:none}
.podium i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(143,196,255,.28);
  background:radial-gradient(ellipse at 50% 50%,rgba(30,123,255,.30),rgba(30,123,255,.06) 55%,transparent 72%)}
.podium i:nth-child(2){inset:16% 13%;border-color:rgba(143,196,255,.45);background:radial-gradient(ellipse,rgba(30,123,255,.35),rgba(30,123,255,.08) 60%,transparent 75%)}
.podium i:nth-child(3){inset:34% 30%;border:0;filter:blur(3px);animation:pulse 3.6s ease-in-out infinite;
  background:radial-gradient(ellipse,rgba(170,214,255,.95),rgba(60,140,255,.35) 50%,transparent 72%)}
@keyframes pulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.hex3d{position:absolute;left:50%;top:50%;width:330px;z-index:2;transform:translate(-50%,-56%);
  animation:hexFloat 7s ease-in-out infinite;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.6)) drop-shadow(0 0 60px rgba(30,123,255,.55))}
.hex-svg{width:100%;height:auto;display:block;overflow:visible}
@keyframes hexFloat{0%,100%{transform:translate(-50%,-56%) rotate(-2deg)}50%{transform:translate(-50%,-62%) rotate(2deg)}}
.scene-card{position:absolute;border-radius:16px;overflow:hidden;z-index:3;background:#0B1224;
  border:1px solid rgba(143,196,255,.35);box-shadow:0 30px 60px -20px rgba(0,0,0,.85),0 0 40px -12px rgba(30,123,255,.65)}
.scene-card img{width:100%;height:100%;object-fit:cover;display:block}
.scene-card::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:4;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);background:linear-gradient(160deg,rgba(255,255,255,.12),transparent 40%)}
.card-a{width:300px;height:178px;right:2%;top:2%;animation:cardFloatA 8s ease-in-out infinite}
.card-b{width:340px;height:196px;right:0;bottom:8%;animation:cardFloatB 9s ease-in-out infinite}
/* Rotating AI game screenshots: stacked layers crossfade */
.game-slot img.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .9s var(--ease)}
.game-slot img.shot-enter{opacity:0;z-index:2}
.game-slot img.shot-enter.in{opacity:1}
.shot-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding:26px 14px 11px;background:linear-gradient(180deg,transparent,rgba(5,8,15,.88))}
.shot-cap b{font-size:13px;font-weight:700;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot-cap span{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-3);font-weight:700;white-space:nowrap}
@keyframes cardFloatA{0%,100%{transform:perspective(1200px) rotateY(-16deg) rotateX(6deg) translateY(0)}50%{transform:perspective(1200px) rotateY(-16deg) rotateX(6deg) translateY(-12px)}}
@keyframes cardFloatB{0%,100%{transform:perspective(1200px) rotateY(-14deg) rotateX(-3deg) translateY(0)}50%{transform:perspective(1200px) rotateY(-14deg) rotateX(-3deg) translateY(-14px)}}
.scene-mini{position:absolute;width:104px;height:136px;border-radius:14px;overflow:hidden;z-index:1;opacity:.88;
  border:1px solid rgba(143,196,255,.28);box-shadow:0 20px 40px -16px rgba(0,0,0,.8);transform:perspective(900px) rotateY(20deg)}
.scene-mini img{width:100%;height:100%;object-fit:cover;display:block}
.scene-mini::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(180deg,rgba(5,8,15,0) 40%,rgba(5,8,15,.55))}
.mini-1{left:6%;top:3%;animation:floaty 7s ease-in-out infinite}
.mini-2{left:0;top:37%;animation:floaty 8s ease-in-out -2s infinite}
.mini-3{left:7%;bottom:10%;animation:floaty 9s ease-in-out -4s infinite}
@keyframes floaty{0%,100%{transform:perspective(900px) rotateY(20deg) translateY(0)}50%{transform:perspective(900px) rotateY(20deg) translateY(-10px)}}
.spark{position:absolute;width:6px;height:6px;border-radius:50%;background:#BFE0FF;box-shadow:0 0 14px 2px rgba(143,196,255,.9);animation:twinkle 3s ease-in-out infinite;z-index:2}
.s1{left:30%;top:18%}.s2{left:72%;top:30%;animation-delay:-1s}.s3{left:38%;top:72%;animation-delay:-2s}.s4{left:64%;top:80%;animation-delay:-.5s;width:4px;height:4px}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}

/* =============================================================
   Creoplay AI generator mock (hero slide 2 + product page)
   ============================================================= */
.hero-visual{position:relative;min-height:520px;perspective:1600px;padding:36px 0 52px}
.hero-orb{
  position:absolute;width:520px;height:520px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(30,123,255,.35) 0%,rgba(30,123,255,.12) 35%,transparent 70%);filter:blur(10px);
}
.hero-ring{
  position:absolute;left:50%;top:50%;width:560px;height:560px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  border:1px dashed rgba(143,180,255,.18);animation:spin 60s linear infinite;
}
.hero-ring::after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:var(--blue-3);top:-5px;left:calc(50% - 5px);box-shadow:0 0 18px var(--blue-3)}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.gen-card{
  position:relative;z-index:2;width:min(480px,100%);margin-inline:auto;
  background:linear-gradient(180deg,#0E162A 0%,#0A101E 100%);
  border:1px solid rgba(143,180,255,.22);border-radius:22px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.5),0 0 80px -20px rgba(30,123,255,.45);
  transform:rotateY(-8deg) rotateX(4deg);transition:transform .6s var(--ease);
}
.hero-visual:hover .gen-card{transform:rotateY(-3deg) rotateX(2deg)}
.gen-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border)}
.gen-head .dots{display:flex;gap:6px}
.gen-head .dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14)}
.gen-head .dots i:first-child{background:#FF5F57}.gen-head .dots i:nth-child(2){background:#FEBC2E}.gen-head .dots i:nth-child(3){background:#28C840}
.gen-head .title{font-size:12.5px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:8px}
.gen-body{padding:18px}
.gen-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:700;margin-bottom:8px}
.gen-prompt{
  background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:12px;padding:14px 16px;
  font-size:14px;line-height:1.55;color:#DCE4F5;min-height:78px;position:relative;
}
.gen-prompt .caret{display:inline-block;width:2px;height:16px;background:var(--blue-3);vertical-align:-3px;margin-left:2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.gen-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.gen-complexity{display:flex;gap:8px}
.gen-complexity span{padding:6px 11px;border-radius:8px;font-size:12px;font-weight:600;border:1px solid var(--border);color:var(--muted)}
.gen-complexity span.on{background:rgba(79,134,255,.16);border-color:rgba(79,134,255,.5);color:#fff;box-shadow:0 0 18px -4px rgba(79,134,255,.8)}
.gen-cost{
  margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-radius:12px;background:linear-gradient(90deg,rgba(79,134,255,.14),rgba(79,134,255,.04));border:1px solid rgba(79,134,255,.3);
}
.gen-cost small{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.gen-cost strong{font-size:20px;font-weight:800;letter-spacing:-.02em;font-family:var(--mono)}
.gen-cost em{font-style:normal;color:var(--muted);font-size:13px;font-family:var(--mono)}
.gen-progress{margin-top:16px}
.gen-progress .bar{height:6px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden}
.gen-progress .bar i{display:block;height:100%;width:64%;border-radius:6px;background:linear-gradient(90deg,var(--blue),var(--blue-3));position:relative;animation:fill 4.5s var(--ease) infinite}
.gen-progress .bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:shimmer 1.6s linear infinite}
@keyframes fill{0%{width:12%}70%{width:86%}100%{width:96%}}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.gen-progress .meta{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:8px;font-family:var(--mono)}
.gen-foot{display:flex;gap:10px;padding:0 18px 26px}
.gen-foot .btn{flex:1}
.float-card{
  position:absolute;z-index:3;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;
  background:rgba(12,18,34,.85);border:1px solid var(--border-strong);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.9);font-size:13px;white-space:nowrap;
  animation:floatCard 6s ease-in-out infinite;
}
.float-card strong{display:block;font-size:13.5px;font-weight:700}
.float-card span{color:var(--muted);font-size:12px}
.float-card .icon-box{width:38px;height:38px;border-radius:10px}
.float-card .icon-box svg{width:18px;height:18px}
.float-card.fc-1{top:0;left:0;animation-delay:-1s}
.float-card.fc-2{bottom:-4px;right:0;animation-delay:-3s}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* =============================================================
   Partners strip
   ============================================================= */
.partners{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(255,255,255,.012);padding:34px 0}
.partners-label{text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);font-weight:700;margin-bottom:22px}
.partners-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.partner{
  display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;letter-spacing:-.01em;color:#A9B2C7;white-space:nowrap;
  opacity:.75;transition:opacity .2s,color .2s,transform .2s var(--ease);
}
.partner:hover{opacity:1;color:#fff;transform:translateY(-2px)}
.partner i{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:none}
.partner i svg{width:14px;height:14px}

/* =============================================================
   Product (bento)
   ============================================================= */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.bento .card{padding:30px;display:flex;flex-direction:column;gap:14px;min-height:280px}
.bento .span-4{grid-column:span 4}
.bento .span-2{grid-column:span 2}
.bento .span-3{grid-column:span 3}
.bento h3{margin-top:6px}
.bento p{color:var(--muted);font-size:15px}
.bento .visual{margin-top:auto}
.feature-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}

/* mini prompt → game visual */
.mini-flow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin-top:8px}
.mini-box{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:12px;padding:12px 14px;font-size:12.5px;line-height:1.5;color:#C9D2E6}
.mini-box .gen-label{margin-bottom:4px}
.mini-arrow{color:var(--blue-3)}
.mini-game{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;border:1px solid rgba(143,180,255,.3);
  background:radial-gradient(120px 80px at 30% 20%,rgba(143,180,255,.35),transparent 60%),radial-gradient(160px 100px at 80% 90%,rgba(124,92,255,.5),transparent 60%),linear-gradient(180deg,#132247,#0B1226)}
.mini-game::before{content:"";position:absolute;inset:auto 0 0 0;height:32%;background:linear-gradient(180deg,rgba(34,197,94,.0),rgba(34,197,94,.35));border-top:1px solid rgba(94,227,154,.35)}
.mini-game .p{position:absolute;left:22%;bottom:34%;width:16px;height:22px;border-radius:5px;background:linear-gradient(180deg,#FFD56A,#FFB300);box-shadow:0 0 18px rgba(255,197,61,.6);animation:hop 1.4s ease-in-out infinite}
@keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.mini-game .c{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--blue-3);box-shadow:0 0 12px var(--blue-3)}
.mini-game .c1{left:48%;top:36%}.mini-game .c2{left:60%;top:28%}.mini-game .c3{left:72%;top:40%}
.mini-game .hud{position:absolute;top:8px;left:10px;font-family:var(--mono);font-size:10px;color:#C9DAFF;background:rgba(0,0,0,.35);padding:3px 7px;border-radius:5px}

/* complexity meter */
.meter{display:grid;gap:8px;margin-top:6px}
.meter div{display:grid;grid-template-columns:96px 1fr 60px;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.meter div b{color:var(--text);font-weight:600}
.meter div i{height:8px;border-radius:8px;background:rgba(255,255,255,.06);overflow:hidden;position:relative}
.meter div i::after{content:"";position:absolute;inset:0;width:var(--w);border-radius:8px;background:linear-gradient(90deg,var(--blue),var(--blue-3))}
.meter div span{font-family:var(--mono);text-align:right;color:var(--blue-3)}

/* model tiers */
.model-tiers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.model-tier{border:1px solid var(--border);border-radius:14px;padding:16px;background:rgba(255,255,255,.025)}
.model-tier .chip{margin-bottom:10px}
.model-tier strong{display:block;font-size:15px;margin-bottom:4px}
.model-tier span{font-size:12.5px;color:var(--muted)}

/* export visual */
.export-visual{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.export-visual .tag{padding:8px 12px;border-radius:9px;font-family:var(--mono);font-size:12px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:#C9D2E6}
.export-visual .tag.hl{border-color:rgba(94,227,154,.4);color:#5EE39A;background:rgba(34,197,94,.08)}

/* =============================================================
   How it works (steps)
   ============================================================= */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;position:relative}
.steps::before{content:"";position:absolute;left:8%;right:8%;top:30px;height:1px;background:linear-gradient(90deg,transparent,rgba(143,180,255,.35) 15%,rgba(143,180,255,.35) 85%,transparent)}
.step{position:relative;padding:0 6px}
.step-num{
  width:60px;height:60px;border-radius:18px;display:grid;place-items:center;position:relative;z-index:1;
  background:linear-gradient(180deg,#121C33,#0B1120);border:1px solid rgba(143,180,255,.3);
  font-family:var(--mono);font-weight:600;font-size:15px;color:var(--blue-3);margin-bottom:22px;
  box-shadow:0 0 0 6px var(--bg),0 0 30px -8px rgba(47,107,255,.6);
}
.step-num svg{width:22px;height:22px}
.step h3{font-size:17px;margin-bottom:8px}
.step p{font-size:14px;color:var(--muted)}
.step .chip{margin-top:12px}

/* =============================================================
   Credits economy
   ============================================================= */
.credits-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:stretch}
.credit-hero{display:flex;flex-direction:column;gap:22px;padding:34px}
.credit-hero .big{font-size:clamp(34px,4vw,48px);font-weight:800;letter-spacing:-.035em;line-height:1;font-family:var(--mono);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.credit-hero .big em{font-style:normal;color:var(--blue-3);font-size:.55em;font-family:var(--font);font-weight:600}
.credit-hero p{color:var(--muted);font-size:15px}
.rules{display:grid;gap:10px;margin-top:auto}
.rule{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--border);font-size:14px;color:var(--muted)}
.rule strong{display:block;color:var(--text);font-weight:600;margin-bottom:2px}
.rule .icon-box{width:36px;height:36px;border-radius:10px}.rule .icon-box svg{width:16px;height:16px}

.cost-table{padding:8px 0 0}
.cost-table table th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);text-align:left;padding:10px 24px;font-weight:700}
.cost-table table td{padding:16px 24px;border-top:1px solid var(--border);vertical-align:middle;font-size:15px}
.cost-table tr:hover td{background:rgba(255,255,255,.02)}
.cost-table td:first-child strong{display:block;font-weight:600}
.cost-table td:first-child span{display:block;font-size:13px;color:var(--muted)}
.cost-table .num{font-family:var(--mono);font-weight:600;white-space:nowrap}
.cost-table .usd{font-family:var(--mono);color:var(--muted)}
.cost-table .bar{height:6px;border-radius:6px;background:rgba(255,255,255,.06);min-width:90px;overflow:hidden}
.cost-table .bar i{display:block;height:100%;width:var(--w);border-radius:6px;background:linear-gradient(90deg,var(--blue),var(--blue-3))}
.cost-table tr.grant td{background:rgba(34,197,94,.05)}
.cost-table tr.grant .num{color:#5EE39A}
.cost-table tr.grant .bar i{background:linear-gradient(90deg,var(--green),#5EE39A)}

/* =============================================================
   Pricing
   ============================================================= */
.pricing-controls{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:40px}
.segmented{display:inline-flex;padding:4px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--border);position:relative}
.segmented button{
  padding:10px 18px;border-radius:9px;font-size:14px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:8px;
  transition:color .2s,background .2s;
}
.segmented button small{font-size:11px;font-weight:600;padding:3px 7px;border-radius:6px;background:rgba(255,255,255,.06);color:var(--muted)}
.segmented button.active{color:#fff;background:linear-gradient(180deg,rgba(79,134,255,.28),rgba(79,134,255,.14));box-shadow:0 0 0 1px rgba(79,134,255,.45) inset}
.segmented button.active small{background:rgba(79,134,255,.3);color:#fff}
.pricing-group{display:none}
.pricing-group.active{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;animation:fadeUp .45s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.plan{padding:30px;display:flex;flex-direction:column;gap:18px}
.plan.featured{border-color:rgba(79,134,255,.55);box-shadow:var(--glow);background:linear-gradient(180deg,rgba(47,107,255,.14),rgba(47,107,255,.03))}
.plan .ribbon{position:absolute;top:18px;right:18px}
.plan-name{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700}
.plan-name .icon-box{width:38px;height:38px;border-radius:10px}.plan-name .icon-box svg{width:18px;height:18px}
.plan-target{font-size:13.5px;color:var(--muted);min-height:42px}
.plan-price{display:flex;align-items:baseline;gap:6px;line-height:1}
.plan-price strong{font-size:44px;font-weight:800;letter-spacing:-.04em}
.plan-price span{color:var(--muted);font-size:14px}
.plan-creo{font-size:13px;color:#5EE39A;font-family:var(--mono);display:flex;align-items:center;gap:8px;min-height:20px}
.plan-creo.hidden{visibility:hidden}
.plan-credits{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--border)}
.plan-credits strong{font-family:var(--mono);font-size:18px}
.plan-credits span{color:var(--muted);font-size:13px}
.plan .check-list{flex:1}
.plan .check-list li{padding:5px 0;font-size:14px}
.plan .btn{margin-top:6px}
.pricing-foot{margin-top:28px;display:flex;justify-content:center;gap:24px;flex-wrap:wrap;color:var(--muted);font-size:13.5px}
.pricing-foot span{display:inline-flex;align-items:center;gap:8px}
.pricing-foot svg{width:15px;height:15px;color:var(--blue-3)}

/* =============================================================
   Top-up packs
   ============================================================= */
.packs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pack{padding:26px;display:flex;flex-direction:column;gap:14px}
.pack .ribbon{position:absolute;top:16px;right:16px}
.pack-name{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.pack-credits{font-size:34px;font-weight:800;letter-spacing:-.035em;font-family:var(--mono);line-height:1}
.pack-credits small{font-size:13px;font-family:var(--font);font-weight:600;color:var(--muted);margin-left:6px;letter-spacing:0}
.pack-price{display:flex;align-items:baseline;gap:8px}
.pack-price strong{font-size:22px;font-weight:700}
.pack-price span{font-size:12.5px;color:var(--muted);font-family:var(--mono)}
.pack-scale{height:6px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden}
.pack-scale i{display:block;height:100%;width:var(--w);border-radius:6px;background:linear-gradient(90deg,var(--blue),var(--blue-3))}
.pack .btn{margin-top:auto}
.pack.best{border-color:rgba(255,197,61,.45)}
/* =============================================================
   Web3 payments
   ============================================================= */
.web3-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.web3-points{display:grid;gap:14px;margin-top:28px}
.point{display:flex;gap:16px;align-items:flex-start}
.point strong{display:block;font-size:16px;margin-bottom:3px}
.point p{font-size:14.5px;color:var(--muted)}
.web3-stack{display:grid;gap:18px}
.pay-table{padding:0;overflow:hidden}
.pay-table .head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border)}
.pay-table .head strong{font-size:15px}
.pay-table table th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);text-align:left;padding:12px 22px;font-weight:700}
.pay-table table td{padding:13px 22px;border-top:1px solid var(--border);font-size:14px}
.pay-table td .chip{font-size:11.5px;padding:4px 9px}
.pay-table td.sol{color:var(--muted)}
.wallet-card{padding:22px;display:grid;gap:14px}
.wallet-head{display:flex;align-items:center;justify-content:space-between}
.wallet-head strong{display:flex;align-items:center;gap:10px;font-size:15px}
.toggle{width:44px;height:24px;border-radius:999px;background:linear-gradient(180deg,#4F86FF,#2F6BFF);position:relative;box-shadow:0 0 16px -4px rgba(79,134,255,.8)}
.toggle::after{content:"";position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:#fff}
.wallet-rows{display:grid;gap:8px}
.wallet-row{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid var(--border);font-size:13.5px;color:var(--muted)}
.wallet-row b{color:var(--text);font-family:var(--mono);font-weight:600;font-size:13px}
.tx{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.tx i{width:8px;height:8px;border-radius:50%;background:#5EE39A;box-shadow:0 0 10px #5EE39A}

/* =============================================================
   $CREO token
   ============================================================= */
.token{position:relative;overflow:hidden}
.token-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.token-utilities{display:grid;gap:14px;margin-top:28px}
.token-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.coin-scene{position:relative;min-height:420px;display:grid;place-items:center}
.coin-scene .glow{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(47,107,255,.45),rgba(47,107,255,.08) 45%,transparent 70%);filter:blur(12px)}
.coin{
  position:relative;width:260px;height:260px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(from 200deg,#1638B8,#4F86FF,#8FB4FF,#2F6BFF,#1638B8);
  box-shadow:0 0 0 10px rgba(255,255,255,.04),0 40px 90px -30px rgba(0,0,0,.9),0 0 90px -20px rgba(79,134,255,.8);
  animation:coinFloat 7s ease-in-out infinite;overflow:hidden;
}
.coin::before{content:"";position:absolute;inset:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#1D2F66,#0A1128 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.coin img{position:relative;width:120px;height:120px;filter:drop-shadow(0 10px 30px rgba(79,134,255,.7))}
.coin::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);mix-blend-mode:screen;animation:sheen 5s linear infinite}
@keyframes coinFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(4deg)}}
@keyframes sheen{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
.coin-stats{position:absolute;display:grid;gap:10px}
.coin-stats .float-card{position:relative;animation:none}
.coin-stats.left{left:0;top:6%}.coin-stats.right{right:0;bottom:6%}
.pill-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

/* =============================================================
   Ecosystem
   ============================================================= */
.eco-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.eco-grid .card{padding:26px;display:flex;flex-direction:column;gap:12px;min-height:240px}
.eco-grid .span-2{grid-column:span 2}.eco-grid .span-3{grid-column:span 3}.eco-grid .span-4{grid-column:span 4}
.eco-grid p{color:var(--muted);font-size:14.5px}
.eco-grid .link-arrow{margin-top:auto}
.eco-featured{background:linear-gradient(135deg,rgba(47,107,255,.22),rgba(124,92,255,.08) 60%,rgba(255,255,255,.02));border-color:rgba(79,134,255,.4)}
.eco-featured .eco-art{position:absolute;right:-40px;bottom:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(143,180,255,.35),transparent 65%);pointer-events:none}
.game-card{padding:0!important;min-height:260px;justify-content:flex-end}
.game-art{position:absolute;inset:0;background-size:cover;background-position:center}
.game-art.slime{background:radial-gradient(180px 120px at 30% 30%,rgba(94,227,154,.55),transparent 60%),radial-gradient(200px 140px at 80% 70%,rgba(34,211,238,.35),transparent 60%),linear-gradient(180deg,#0E2A2A,#071120)}
.game-art.knights{background:radial-gradient(200px 120px at 70% 25%,rgba(255,197,61,.3),transparent 60%),radial-gradient(240px 160px at 20% 80%,rgba(124,92,255,.35),transparent 60%),linear-gradient(180deg,#1A1A2E,#070B15)}
.game-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(5,8,15,.92))}
.game-body{position:relative;padding:22px 24px}
.game-body strong{display:block;font-size:20px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.game-body span{font-size:13px;color:var(--muted)}
.game-body .chip{margin-left:8px}
.partnership{margin-top:18px;padding:30px;display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.015))}
.partnership p{color:var(--muted);font-size:15px;margin-top:8px}
.partnership .btn{margin-top:18px}
.partnership .logos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.partnership .logos div{aspect-ratio:3/2;border-radius:12px;border:1px solid var(--border);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--muted);background:rgba(255,255,255,.03);text-align:center;padding:8px}

/* =============================================================
   FAQ
   ============================================================= */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,64px);align-items:start}
.faq-list{display:grid;gap:10px}
.faq{border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.025);overflow:hidden;transition:border-color .2s}
.faq.open{border-color:rgba(79,134,255,.4)}
.faq button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;text-align:left;font-weight:600;font-size:15.5px}
.faq button svg{flex:none;width:18px;height:18px;color:var(--blue-3);transition:transform .25s var(--ease)}
.faq.open button svg{transform:rotate(45deg)}
.faq button:focus-visible{outline:2px solid var(--blue-3);outline-offset:-4px;border-radius:12px} /* inset ring: the browser default ring was clipped by the rounded item and left a stray white line under the question when the accordion was open (owner report 2026-09-24) */
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.faq.open .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden}
.faq-a p{padding:0 20px 18px;color:var(--muted);font-size:14.5px}
.faq-a p + p{margin-top:-6px}

/* =============================================================
   CTA band
   ============================================================= */
.cta{padding:0 0 clamp(72px,9vw,120px)}
.cta-band{
  position:relative;overflow:hidden;border-radius:26px;padding:clamp(40px,6vw,64px);
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  background:linear-gradient(120deg,#0E1A3A 0%,#0A1226 60%,#0B1120 100%);border:1px solid rgba(79,134,255,.35);
}
.cta-band::before{content:"";position:absolute;inset:-40% auto auto -10%;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(47,107,255,.45),transparent 65%);filter:blur(20px)}
.cta-band::after{content:"";position:absolute;inset:auto -6% -60% auto;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(124,92,255,.35),transparent 65%);filter:blur(20px)}
.cta-band > *{position:relative;z-index:1}
.cta-band h2{font-size:clamp(28px,3.6vw,42px);max-width:14ch}
.cta-band p{color:var(--muted);margin-top:10px;font-size:16px}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}

/* =============================================================
   Footer
   ============================================================= */
.site-footer{border-top:1px solid var(--border);padding:64px 0 28px;background:linear-gradient(180deg,rgba(255,255,255,.012),transparent)}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px}
.footer-address{color:var(--muted);font-size:13.5px;margin-top:18px;line-height:1.7}
.footer-social{display:flex;gap:10px;margin-top:20px}
.footer-social a{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);display:grid;place-items:center;color:var(--muted);transition:color .2s,border-color .2s,background .2s}
.footer-social a svg{width:15px;height:15px}
.footer-social a:hover{color:#fff;border-color:var(--border-strong);background:rgba(255,255,255,.05)}
.footer-col h4{margin-bottom:16px;color:#fff}
.footer-col a{display:block;color:var(--muted);font-size:14px;padding:5px 0;transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:24px;border-top:1px solid var(--border);color:var(--muted-2);font-size:13px}
.footer-legal{display:flex;gap:20px}
.footer-legal a:hover{color:#fff}

/* =============================================================
   Anchor offset for the fixed header
   ============================================================= */
[id]{scroll-margin-top:104px}

/* =============================================================
   Reveal animations (JS-gated: content stays visible without JS or with ?noanim)
   ============================================================= */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.js .reveal-stagger > *{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal-stagger.in > *{opacity:1;transform:none}
.reveal-stagger.in > *:nth-child(2){transition-delay:.08s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.16s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.24s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.32s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.40s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.reveal-stagger > *{opacity:1;transform:none}
}

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width:1100px){
  .nav-links > a{padding:9px 10px;font-size:13.5px}
  .steps{grid-template-columns:repeat(3,1fr);row-gap:32px}
  .steps::before{display:none}
  .packs{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:960px){
  .nav-links{
    position:fixed;inset:0 0 auto 0;top:0;padding:104px 24px 32px;flex-direction:column;align-items:stretch;gap:6px;
    background:rgba(5,8,15,.96);border-bottom:1px solid var(--border);transform:translateY(-110%);transition:transform .35s var(--ease);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  }
  .nav-links.open{transform:none}
  .nav-links > a{font-size:17px;padding:13px 12px}
  .nav-mobile-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}
  .nav-actions{display:none}
  .nav-toggle{display:flex;position:relative;z-index:101}
  .hero-grid,.credits-grid,.web3-grid,.token-grid,.faq-grid,.partnership{grid-template-columns:1fr}
  .hero-visual{min-height:0;margin-top:24px}
  .gen-card{transform:none}
  .float-card.fc-1{top:0;left:0}.float-card.fc-2{bottom:0;right:0}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}.stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--border)}
  .bento .span-4,.bento .span-2,.bento .span-3{grid-column:span 6}
  .eco-grid .span-2,.eco-grid .span-3,.eco-grid .span-4{grid-column:span 6}
  .pricing-group.active{grid-template-columns:1fr}
  .coin-scene{min-height:360px}.coin-stats{display:none}
  .partners-row{justify-content:center;gap:22px 32px}
}
@media (max-width:600px){
  .hide-sm{display:none}
  .gen-row{flex-direction:column;align-items:flex-start;gap:8px}
  .gen-cost strong{font-size:17px}
  .segmented button{padding:10px 14px}
  .segmented button small{display:none}
  .pricing-foot{flex-direction:column;align-items:flex-start;gap:10px}
  .cost-table table th,.cost-table table td{padding:14px}
  .cost-table td:first-child span{display:none}
  .credit-hero{padding:26px}
  .credit-hero .big{font-size:30px}
  .pay-table table th,.pay-table table td{padding:12px 14px}
  .partnership{padding:22px}
  .partnership .logos{grid-template-columns:repeat(2,1fr)}
  .hero{padding-top:120px}
  .hero-actions .btn{width:100%}
  .hero-stats{grid-template-columns:1fr 1fr}
  .stat{padding:16px}.stat strong{font-size:20px}
  .steps{grid-template-columns:1fr}
  .packs{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .cost-table table th:nth-child(4),.cost-table table td:nth-child(4){display:none}
  .mini-flow{grid-template-columns:1fr}.mini-arrow{transform:rotate(90deg);justify-self:center}
  .model-tiers{grid-template-columns:1fr}
  .cta-band{text-align:center;justify-content:center}.cta-band h2{max-width:none}
  .cta-actions{width:100%}.cta-actions .btn{flex:1}
}

/* ---------- Custom HTML sections (sections/_custom.php; markup written in the admin) ---------- */
/* The root also carries .section, so the vertical rhythm comes from there; padding "none" adds .custom-flush. */
.custom-section video,.custom-section iframe{max-width:100%}
.section.custom-flush{padding-top:0;padding-bottom:0}
/* =============================================================
   Company sections (homepage)
   ============================================================= */

/* Partner logo marquee: continuous scroll, content kept inside the container width */
.partners{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(255,255,255,.02);padding:20px 0 2px;overflow:hidden}
.partners-inner{width:min(var(--container),calc(100% - var(--gutter) * 2));margin-inline:auto}
.partners-label{margin-bottom:4px}
/* Vertical padding gives logos with large transparent margins room without being clipped */
.marquee{
  position:relative;overflow:hidden;padding:20px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.marquee-track{display:flex;width:max-content;animation:marquee 70s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-group{display:flex;align-items:center;gap:clamp(44px,4.5vw,80px);padding-right:clamp(44px,4.5vw,80px)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.partner{display:inline-flex;align-items:center;justify-content:center;height:52px;flex:none}
.partner img{width:auto;max-width:200px;opacity:.82;transition:opacity .2s,transform .2s var(--ease)}
.partner:hover img{opacity:1;transform:translateY(-2px)}
html:not(.js) .marquee-track,.marquee-track.is-static{animation:none;flex-wrap:wrap;width:auto}
html:not(.js) .marquee-group + .marquee-group,.marquee-track.is-static .marquee-group + .marquee-group{display:none}

/* Real partnerships (photo grid) */
.partnerships-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(28px,4vw,56px);align-items:center}
.partnerships-copy h2{font-size:clamp(32px,3.6vw,48px)}
.partnerships-copy > p{color:var(--muted);margin-top:16px;font-size:16.5px;max-width:44ch;line-height:1.7}
.partnerships-copy > p:not(.selected-partners){font-weight:400;max-width:42ch}
.partner-stat{display:flex;align-items:flex-start;gap:20px;margin:34px 0 24px;padding-top:28px;border-top:1px solid var(--border-strong)}
.partner-stat strong{font-size:clamp(52px,4.8vw,72px);font-weight:800;letter-spacing:-.05em;line-height:.88;flex:none}
.partner-stat strong span{color:var(--blue-3);font-weight:700}
.partner-stat .label{font-size:14px;color:var(--muted);max-width:22ch;line-height:1.5;padding-top:6px}
.selected-partners{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);line-height:2;margin:0 0 32px;max-width:none}
.selected-partners span{display:block;color:var(--blue-3);font-weight:700;letter-spacing:.18em;font-size:10.5px;margin-bottom:2px}
.partner-actions{align-items:center;gap:24px;margin-top:0}
.photo-main img{object-position:50% 78%}
/* editorial captions: small category line + title */
.photo-cap{padding:40px 16px 13px;font-size:13.5px;font-weight:600;letter-spacing:-.005em;white-space:normal;line-height:1.3;background:linear-gradient(180deg,transparent,rgba(5,8,15,.55) 45%,rgba(5,8,15,.88))}
.photo-cap small{display:block;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-3);margin-bottom:5px}
.photo-main .photo-cap{padding:56px 20px 16px;font-size:16px}
.photo-main .photo-cap small{font-size:10.5px;margin-bottom:6px}
.photo::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);pointer-events:none}
.photo-grid{display:grid;gap:12px}
.photo{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:var(--surface);position:relative}
.photo-main{height:460px}
.photo-row{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:12px}
.photo-row .photo{height:180px}
.photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.photo:hover img{transform:scale(1.03)}
.photo-cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:28px 14px 11px;font-size:12.5px;font-weight:600;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.7);background:linear-gradient(180deg,transparent,rgba(5,8,15,.82))}
.photo-placeholder{
  position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:6px;text-align:center;color:var(--muted-2);
  background:radial-gradient(260px 150px at 50% 40%,rgba(30,123,255,.16),transparent 70%),repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 10px,transparent 10px 22px),var(--surface-2);
}
.photo-placeholder svg{width:34px;height:34px;color:rgba(143,196,255,.6)}
.photo-placeholder span{font-size:13px;font-weight:600;color:var(--muted)}
.photo-placeholder small{font-family:var(--mono);font-size:10.5px;opacity:.7}
.photo:not(.photo-main) .photo-placeholder svg{width:24px;height:24px}
.photo:not(.photo-main) .photo-placeholder small{display:none}

/* Featured games */
.games-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.game-tile{
  position:relative;display:block;border-radius:18px;overflow:hidden;border:1px solid var(--border);aspect-ratio:16/9;background:var(--surface);
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
}
.game-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.game-tile:hover{transform:translateY(-4px);border-color:rgba(143,196,255,.4);box-shadow:0 30px 60px -30px rgba(0,0,0,.9),0 0 40px -16px rgba(30,123,255,.5)}
.game-tile:hover img{transform:scale(1.04)}
.game-meta{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:linear-gradient(180deg,transparent,rgba(5,8,15,.94))}
.game-meta strong{font-size:20px;font-weight:800;letter-spacing:-.02em;width:100%}
.game-meta span{font-size:13px;color:var(--muted)}
.games-sub{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:20px;margin-top:20px;align-items:stretch}
.games-sub-label{padding:22px 0;align-self:center}
.games-sub-label p{color:var(--muted);font-size:14px;margin-top:10px;max-width:30ch}
.game-tile-sm{aspect-ratio:16/8}
.game-tile-sm .game-meta{padding:16px 18px}
.game-tile-sm .game-meta strong{font-size:16px}

/* Ecosystem */
.eco-layout{display:grid;grid-template-columns:.8fr 2.2fr;gap:clamp(24px,3vw,40px);align-items:start}
.eco-intro h2{font-size:clamp(28px,3vw,40px)}
.eco-intro p{color:var(--muted);margin:16px 0 22px;font-size:15.5px}
.eco-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.eco-card{padding:24px;min-height:380px;display:flex;flex-direction:column;gap:12px}
.eco-logo{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:700}
.eco-logo-box{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;background:rgba(79,134,255,.12);border:1px solid rgba(79,134,255,.25)}
.eco-logo-box.purple{background:rgba(124,92,255,.16);border-color:rgba(124,92,255,.35)}
.eco-logo-box.yellow{background:rgba(255,197,61,.12);border-color:rgba(255,197,61,.3)}
.eco-logo-box img{width:26px;height:26px;object-fit:contain}
.eco-card p{color:var(--muted);font-size:14.5px}
.eco-art{margin-top:auto;height:150px;position:relative;border-radius:12px;overflow:hidden;background:var(--surface-2)}
.eco-art img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.eco-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,16,30,.55),transparent 45%);pointer-events:none}
.eco-art-tagtag{background:radial-gradient(200px 120px at 50% 60%,rgba(255,197,61,.22),transparent 70%),var(--surface-2)}
.eco-art-tagtag img{object-fit:contain;object-position:center;padding:6px}
.eco-art-coin{display:grid;place-items:center;background:radial-gradient(circle at 50% 55%,rgba(30,123,255,.38),transparent 68%),var(--surface-2)}
.coin-sm{width:112px;height:112px;animation:coinFloat 7s ease-in-out infinite;box-shadow:0 0 0 6px rgba(255,255,255,.04),0 20px 40px -20px rgba(0,0,0,.9),0 0 50px -14px rgba(79,134,255,.8)}
.coin-sm::before{inset:8px}
.coin-sm img{width:52px;height:52px}

/* Developer tools */
.dev-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.dev-photo{border-radius:18px;overflow:hidden;border:1px solid var(--border)}
.dev-photo img{width:100%;display:block}
.code-card{
  border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#0E162A,#0A101E);border:1px solid rgba(143,180,255,.22);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95),0 0 80px -30px rgba(30,123,255,.4);
}
.code-card .code{margin:0;padding:22px 24px;font-family:var(--mono);font-size:13px;line-height:1.75;color:#C9D2E6;overflow-x:auto;white-space:pre}
.c-k{color:#8FB4FF}.c-s{color:#5EE39A}.c-f{color:#FFD56A}.c-n{color:#F472B6}.c-cm{color:var(--muted-2)}
.dev-copy h2{font-size:clamp(28px,3.2vw,42px)}
.dev-features{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:30px 0 26px}
.dev-features li{display:flex;flex-direction:column;gap:6px}
.dev-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(79,134,255,.12);border:1px solid rgba(79,134,255,.25);color:var(--blue-3)}
.dev-icon svg{width:18px;height:18px}
.dev-features strong{font-size:13.5px;font-weight:600;line-height:1.3}
.dev-features small{font-size:12px;color:var(--muted)}

/* Creoplay AI teaser band */
.creoplay-band{padding-top:0}
.band{
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,56px);align-items:center;padding:clamp(28px,4vw,48px);
  border-radius:26px;border:1px solid rgba(79,134,255,.35);position:relative;overflow:hidden;
  background:linear-gradient(120deg,rgba(30,123,255,.16),rgba(124,92,255,.06) 60%,rgba(255,255,255,.02));
}
.band::before{content:"";position:absolute;width:520px;height:520px;right:-10%;top:-60%;border-radius:50%;background:radial-gradient(circle,rgba(30,123,255,.35),transparent 65%);filter:blur(20px);pointer-events:none}
.band > *{position:relative}
.band h2{font-size:clamp(28px,3.2vw,42px);margin-top:4px}
.band .lead{margin-top:14px;font-size:16px}
.band-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.band-facts li{padding:14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--border)}
.band-facts strong{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em}
.band-facts span{font-size:12.5px;color:var(--muted)}
.band-visual .mini-flow{margin:0}
.band-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}

/* News */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.news-card{padding:0;display:flex;flex-direction:column}
.news-img{aspect-ratio:16/9;overflow:hidden}
.news-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.news-card:hover .news-img img{transform:scale(1.05)}
.news-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:12px;flex:1}
.news-body .chip{align-self:flex-start}
.news-body h3{font-size:17px;line-height:1.35}

/* Token section: keep the stat cards clear of the coin */
.coin-scene .coin{margin-left:72px}
.coin-scene .coin-stats.right{right:-2%;bottom:2%}
.news-body time{font-size:13px;color:var(--muted-2);margin-top:auto}

/* Product page */
.product-hero .hero-inner{min-height:0}
.product-hero h1{max-width:17ch}
.product-hero{padding-bottom:24px}
.product-hero .hero-facts{display:grid;grid-template-columns:auto auto;gap:14px 32px;justify-content:start;margin-top:32px}
.product-hero .fact{border:0;padding:0;margin:0}

/* =============================================================
   Responsive (company sections + hero scene + nav menus)
   ============================================================= */
@media (max-width:1400px){
  .hero-art{left:48%;background-position:50% 50%}
}
@media (max-width:1100px){
  .nav-link{padding:9px 9px;font-size:13.5px}
  .hero-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px 8px}
  .fact{border:0;padding:0;margin:0}
  .dev-features{grid-template-columns:repeat(3,1fr)}
  .eco-layout{grid-template-columns:1fr}
  .eco-intro{max-width:560px}
  .games-sub{grid-template-columns:1fr 1fr}
  .games-sub-label{grid-column:1/-1;padding:0}
  .card-a{width:250px;height:148px}
  .card-b{width:280px;height:162px}
  .hex3d{width:290px}
}
@media (max-width:960px){
  .hero-inner,.slide .hero-inner{grid-template-columns:1fr;min-height:0;gap:8px}
  .slide:first-child .hero-inner{min-height:0}
  .slide .hero-copy-wide h1{max-width:none}
  .slide-copy{padding:24px 0 8px}
  .hero-art{
    position:relative;top:auto;bottom:auto;left:auto;right:auto;height:60vw;max-height:420px;
    margin:8px calc(-1 * var(--gutter)) 0;width:calc(100% + var(--gutter) * 2);
    background-position:50% 40%;
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 28%,#000 100%);
            mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 28%,#000 100%);
  }
  .hero-art::before{background:linear-gradient(0deg,rgba(5,8,15,.9) 0%,rgba(5,8,15,0) 30%)}
  .hero-facts{display:grid;grid-template-columns:1fr 1fr;gap:14px 10px;margin-top:28px}
  .fact{border:0;padding:0;margin:0}
  :root{--gutter:24px}
  .slider-nav{position:relative;left:auto;bottom:auto;width:min(var(--container),calc(100% - var(--gutter) * 2));margin-inline:auto;padding:12px 0 20px}
  .scene{height:470px;margin-top:8px}
  .scene-glow{width:520px;height:520px}
  .hex3d{width:240px}
  .podium{width:340px;height:100px;bottom:22px}
  .beam{width:200px;bottom:70px}
  .card-a{width:210px;height:124px;right:0}
  .card-b{width:230px;height:132px;right:0;bottom:4%}
  .scene-mini{width:78px;height:104px}
  .partnerships-grid{grid-template-columns:1fr}
  .photo-main{height:280px}
  .photo-row .photo{height:130px}
  .games-grid{grid-template-columns:1fr}
  .eco-cards{grid-template-columns:1fr}
  .eco-card{min-height:0}
  .eco-art{height:130px}
  .dev-grid{grid-template-columns:1fr}
  .band{grid-template-columns:1fr}
  .news-grid{grid-template-columns:1fr}
  .nav-item{width:100%}
  .nav-item::after{display:none}
  .nav-item > .nav-link{width:100%;justify-content:space-between;font-size:17px;padding:13px 12px}
  .nav-links > .nav-link{font-size:17px;padding:13px 12px;width:100%}
  .nav-menu{position:static;opacity:1;visibility:visible;transform:none;display:none;min-width:0;background:transparent;border:0;box-shadow:none;padding:0 0 8px 12px;-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav-item.open > .nav-menu{display:block}
  .nav-menu a{padding:9px 12px}
}
@media (max-width:600px){
  :root{--gutter:16px}
  .scene{height:380px}
  .hex3d{width:190px}
  .scene-mini{display:none}
  .card-a{width:160px;height:96px}
  .card-b{width:180px;height:104px}
  .shot-cap{padding:16px 10px 8px}
  .shot-cap span{display:none}
  .podium{width:260px;height:80px}
  .photo-main{height:240px}
  .partner-stat{margin:26px 0 18px;padding-top:22px}
  .photo-cap{font-size:12px;padding:28px 10px 9px}
  .photo-main .photo-cap{font-size:14px;padding:40px 14px 12px}
  .photo-row{grid-template-columns:1fr 1fr}
  .photo-row .photo{height:120px}
  .photo-row .photo:last-child:nth-child(odd){grid-column:1/-1;height:150px}
  .photo-cap{font-size:11.5px;padding:22px 10px 8px}
  .dev-features{grid-template-columns:1fr 1fr}
  .band-facts{grid-template-columns:1fr}
  .games-sub{grid-template-columns:1fr}
  .slider-nav{justify-content:center}
  .game-meta{padding:16px 18px}
  .game-meta strong{font-size:17px}
}
/* =============================================================
   Photo grid triggers
   ============================================================= */
a.photo{display:block;color:inherit;cursor:zoom-in}
a.photo:focus-visible{outline:2px solid var(--blue-3);outline-offset:3px}
.photo-cap{display:block}
.photo-more{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;align-content:center;gap:2px;
  background:rgba(5,8,15,.62);color:#fff;font-size:28px;font-weight:800;letter-spacing:-.03em;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.photo-more small{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-3)}

/* =============================================================
   Lightbox (native <dialog>)
   ============================================================= */
.lightbox{
  border:0;padding:0;margin:0;inset:0;width:100vw;height:100vh;max-width:none;max-height:none;
  background:transparent;color:var(--text);overflow:hidden;
}
.lightbox::backdrop{background:rgba(3,6,14,.88);-webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%)}
.lightbox[open]{animation:lbIn .28s var(--ease)}
.lightbox.is-closing{animation:lbOut .3s ease-in forwards}
.lightbox.is-closing::backdrop{animation:lbOut .3s ease-in forwards}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
@keyframes lbOut{to{opacity:0}}
html.lb-open{overflow:hidden}

.lightbox{--lb-chrome:250px} /* vertical space taken by paddings, caption and thumbnails */
.lb-stage{position:relative;width:100%;height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto auto;gap:14px;padding:70px clamp(16px,7vw,110px) 18px}
.lb-frame{position:relative;display:grid;place-items:center;min-height:0;min-width:0}
.lb-img{
  max-width:100%;max-height:calc(100vh - var(--lb-chrome));width:auto;height:auto;object-fit:contain;border-radius:14px;
  box-shadow:0 50px 120px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.08);
  cursor:zoom-in;user-select:none;-webkit-user-drag:none;will-change:transform;
  transition:transform .4s var(--ease);
}
.lb-img.is-zoomed{cursor:zoom-out;transition:transform .4s var(--ease),transform-origin .12s linear}
.lb-img.is-zoomed ~ *{pointer-events:none}

.lb-btn{
  position:absolute;z-index:3;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(12,18,34,.72);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .2s,border-color .2s,transform .2s var(--ease),opacity .2s;
}
.lb-btn svg{width:22px;height:22px}
.lb-btn:hover{background:rgba(30,123,255,.38);border-color:rgba(143,194,255,.5)}
.lb-btn:focus-visible{outline:2px solid var(--blue-3);outline-offset:2px}
.lb-close{top:18px;right:18px}
.lb-close:hover{transform:rotate(90deg)}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%)}
.lb-prev{left:18px}.lb-next{right:18px}
.lb-prev:hover{transform:translateY(-50%) translateX(-3px)}
.lb-next:hover{transform:translateY(-50%) translateX(3px)}
.lightbox.is-single .lb-prev,.lightbox.is-single .lb-next,.lightbox.is-single .lb-thumbs{display:none}

.lb-meta{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;width:min(100%,1100px);margin-inline:auto}
.lb-tag{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-3);font-weight:700;margin-bottom:5px}
.lb-title{display:block;font-size:19px;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.lb-desc{display:block;color:var(--muted);font-size:14px;margin-top:5px;max-width:64ch}
.lb-count{font-family:var(--mono);font-size:13px;color:var(--muted);white-space:nowrap;padding-bottom:2px}
.lb-count i{font-style:normal;margin:0 5px;opacity:.5}

.lb-thumbs{display:flex;gap:8px;justify-content:center;overflow-x:auto;padding:6px 2px 2px;scrollbar-width:none;width:min(100%,1100px);margin-inline:auto}
.lb-thumbs::-webkit-scrollbar{display:none}
.lb-thumb{flex:none;width:68px;height:46px;border-radius:8px;overflow:hidden;padding:0;background:#0B1224;border:1px solid rgba(255,255,255,.12);opacity:.5;transition:opacity .2s,border-color .2s,transform .2s var(--ease)}
.lb-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lb-thumb:hover{opacity:.85}
.lb-thumb.active{opacity:1;border-color:var(--blue-3);transform:translateY(-2px);box-shadow:0 0 0 1px rgba(143,194,255,.4)}

.lb-spinner{position:absolute;z-index:4;width:38px;height:38px;border-radius:50%;border:3px solid rgba(255,255,255,.14);border-top-color:var(--blue-3);animation:lbSpin .9s linear infinite}
@keyframes lbSpin{to{transform:rotate(360deg)}}

@media (max-width:960px){
  .lightbox{--lb-chrome:210px}
  .lb-stage{padding:64px 14px 12px;gap:10px}
  .lb-prev,.lb-next{display:none}
  .lb-title{font-size:15.5px}
  .lb-desc{font-size:13px}
  .lb-thumb{width:54px;height:38px}
}
/* =============================================================
   Tokenomics
   ============================================================= */
.tokenomics{position:relative;overflow:hidden;padding-top:clamp(8px,2vw,24px)}
/* Editorial header: headline left, intro + actions right */
.tk-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,5vw,72px);align-items:end}
.tk-copy h2{font-size:clamp(34px,4.2vw,58px);max-width:14ch}
.tk-intro p{color:var(--muted);font-size:16.5px;max-width:48ch;line-height:1.7}
.tk-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* Allocation */
.tk-bar{display:flex;gap:3px;height:4px;border-radius:4px;overflow:hidden;margin-top:clamp(40px,5vw,64px)}
.tk-bar i{display:block;height:100%;background:var(--seg);border-radius:2px}
.tk-alloc{display:grid;grid-template-columns:repeat(var(--cols,7),minmax(0,1fr));margin-top:26px}
.tk-alloc > div{padding:22px 16px 24px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.tk-alloc > div:nth-child(-n+7){padding-top:8px}
.tk-alloc > div:nth-child(7n){border-right:0}
.tk-alloc > div:nth-child(7n+1){padding-left:0}
.tk-alloc strong{display:flex;align-items:center;gap:8px;font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1}
.tk-alloc strong span{font-size:10px;line-height:1}
.tk-alloc b{display:block;font-size:13.5px;font-weight:700;margin:12px 0 4px;letter-spacing:-.005em}
.tk-alloc em{display:block;font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--blue-3);margin-bottom:6px}
.tk-alloc > div > span{display:block;font-size:12.5px;color:var(--muted);line-height:1.55}
.tk-note{margin:16px 0 0;font-size:12.5px;color:var(--muted-2)}

/* Facts */
.tk-facts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr);border-bottom:1px solid var(--border)}
.tk-fact{display:flex;gap:18px;align-items:center;padding:28px 20px;border-left:1px solid var(--border)}
.tk-fact:first-child{border-left:0;padding-left:0}
.tk-fact > svg{width:36px;height:36px;color:#fff;flex:none;stroke-width:1.3}
.tk-fact small{display:block;font-size:12.5px;color:var(--muted)}
.tk-fact strong{display:block;font-size:20px;font-weight:700;letter-spacing:-.02em;margin-top:2px}
.tk-fact em{display:block;font-style:normal;font-size:13px;color:var(--muted);margin-top:3px}
.tk-fact .chains{display:flex;gap:12px;margin-top:8px;flex-wrap:nowrap}
.tk-fact .chains span,.tk-fact .chains a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;white-space:nowrap}
.tk-fact .chains a{border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.tk-fact .chains a:hover{color:var(--blue-3);border-bottom-color:rgba(143,194,255,.5)}
.tk-fact .chains i{width:14px;height:14px;border-radius:50%;display:inline-block;box-shadow:0 0 10px -2px currentColor}
.tk-foot{display:flex;justify-content:space-between;gap:16px;margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2)}

@media (max-width:1100px){
  .tk-alloc{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tk-alloc > div:nth-child(-n+7){padding-top:22px}
  .tk-alloc > div:nth-child(-n+4){padding-top:8px}
  .tk-alloc > div:nth-child(7n){border-right:1px solid var(--border)}
  .tk-alloc > div:nth-child(7n+1){padding-left:16px}
  .tk-alloc > div:nth-child(4n){border-right:0}
  .tk-alloc > div:nth-child(4n+1){padding-left:0}
}
@media (max-width:960px){
  .tk-top{grid-template-columns:1fr;gap:18px}
  .tk-facts{grid-template-columns:1fr 1fr}
  .tk-fact:nth-child(odd){border-left:0;padding-left:0}
  .tk-fact:nth-child(n+3){border-top:1px solid var(--border)}
}
@media (max-width:600px){
  .tk-alloc{grid-template-columns:1fr 1fr}
  .tk-alloc > div:nth-child(-n+4){padding-top:22px}
  .tk-alloc > div:nth-child(-n+2){padding-top:8px}
  .tk-alloc > div:nth-child(4n){border-right:1px solid var(--border)}
  .tk-alloc > div:nth-child(4n+1){padding-left:16px}
  .tk-alloc > div:nth-child(even){border-right:0}
  .tk-alloc > div:nth-child(odd){padding-left:0}
  .tk-facts{grid-template-columns:1fr}
  .tk-fact{border-left:0;padding-left:0;padding-right:0}
  .tk-fact:nth-child(n+2){border-top:1px solid var(--border)}
  .tk-foot{flex-direction:column;gap:6px}
}
/* =============================================================
   Token utility: distinct panel with a glowing separator
   ============================================================= */
.utility{
  position:relative;overflow:visible;margin-top:clamp(24px,4vw,56px);
  padding:clamp(96px,10vw,132px) 0 clamp(80px,9vw,120px);
  background:linear-gradient(180deg,#0A1122 0%,#070C18 38%,#05080F 100%);
  border-top:1px solid rgba(143,194,255,.14);
}
/* hairline on the top edge with a thin soft glow (gradient strip, so it fades out instead of ending in a box) */
.utility::before{
  content:"";position:absolute;left:0;right:0;top:-28px;height:56px;pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0%,rgba(79,134,255,.55) 25%,rgba(191,224,255,.95) 50%,rgba(79,134,255,.55) 75%,transparent 100%) 0 27px/100% 1px no-repeat,
    linear-gradient(180deg,rgba(79,134,255,0) 0%,rgba(79,134,255,.22) 50%,rgba(79,134,255,0) 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
}
/* light spill below the edge */
.utility::after{
  content:"";position:absolute;left:50%;top:0;width:min(1100px,100%);height:320px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse 60% 100% at 50% 0%,rgba(30,123,255,.26),transparent 70%);
}
.utility-texture{
  position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(rgba(191,224,255,.10) 1px,transparent 1.2px);background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.35) 30%,transparent 62%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.35) 30%,transparent 62%);
}
.utility-divider{
  position:absolute;top:0;left:50%;width:60px;height:60px;transform:translate(-50%,-50%);z-index:2;border-radius:50%;
  display:grid;place-items:center;background:#0A101E;border:1px solid rgba(143,194,255,.4);
  box-shadow:0 0 0 10px #05080F,0 0 46px -4px rgba(30,123,255,.85);
}
.utility-divider img{width:26px;height:26px;filter:drop-shadow(0 0 10px rgba(30,123,255,.8))}
.utility .container{position:relative;z-index:1}

/* Head: two columns split by a vertical rule */
.ut-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center}
.ut-left h2{font-size:clamp(34px,4.2vw,58px);max-width:14ch}
.ut-left p{color:var(--muted);font-size:16.5px;margin-top:18px;max-width:52ch;line-height:1.7}
.ut-right{border-left:1px solid rgba(255,255,255,.1);padding-left:clamp(28px,4vw,64px)}
.ut-kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-3);font-weight:700;margin-bottom:14px}
.ut-right p{color:var(--muted);font-size:16px;line-height:1.7;max-width:48ch}
.ut-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

/* Utility cards */
.ut-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(40px,5vw,56px)}
.ut-card{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:start;padding:26px;border-radius:18px;
  border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));color:inherit;
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;
}
.ut-card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);opacity:.5}
.ut-card:hover{border-color:rgba(79,134,255,.5);transform:translateY(-3px);box-shadow:0 24px 50px -30px rgba(0,0,0,.9),0 0 40px -18px rgba(30,123,255,.7);background:linear-gradient(180deg,rgba(30,123,255,.08),rgba(255,255,255,.012))}
.ut-icon{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;flex:none;color:var(--blue-3);
  background:linear-gradient(180deg,rgba(30,123,255,.18),rgba(30,123,255,.06));border:1px solid rgba(79,134,255,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.ut-icon svg{width:30px;height:30px}
.ut-body h3{font-size:19px;letter-spacing:-.015em}
.ut-body p{color:var(--muted);font-size:14px;line-height:1.6;margin-top:8px}
.ut-chains{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}
.ut-chains span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--text)}
.ut-chains i{width:12px;height:12px;border-radius:50%;display:inline-block}
.ut-arrow{color:var(--blue-3);margin-top:3px;transition:transform .25s var(--ease)}
.ut-card:hover .ut-arrow{transform:translateX(4px)}

/* Audience row */
.ut-audience{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:32px;border-top:1px solid var(--border);padding-top:26px}
.ut-aud{display:flex;align-items:center;gap:16px;padding:0 20px;border-left:1px solid var(--border)}
.ut-aud:first-child{border-left:0;padding-left:0}
.ut-aud > svg{width:34px;height:34px;color:var(--blue-3);flex:none}
.ut-aud small{display:block;font-size:12.5px;color:var(--muted)}
.ut-aud strong{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.01em;margin-top:2px}

@media (max-width:1100px){
  .ut-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ut-audience{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}
  .ut-aud:nth-child(odd){border-left:0;padding-left:0}
}
@media (max-width:960px){
  .ut-head{grid-template-columns:1fr;gap:26px}
  .ut-right{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.1);padding-top:26px}
}
@media (max-width:700px){
  .utility{padding-top:88px}
  .ut-grid{grid-template-columns:1fr}
  .ut-card{padding:20px;gap:14px}
  .ut-icon{width:52px;height:52px;border-radius:13px}
  .ut-icon svg{width:24px;height:24px}
  .ut-audience{grid-template-columns:1fr;row-gap:18px}
  .ut-aud{border-left:0;padding:0}
}
/* =============================================================
   Tech detail modal: neon edge, corner marks, scan sweep
   ============================================================= */
@property --tm-angle { syntax:'<angle>'; inherits:false; initial-value:0deg; }
.techmodal{
  border:0;padding:0;margin:auto;inset:0;width:min(760px,calc(100% - 32px));max-height:calc(100vh - 32px);
  background:transparent;color:var(--text);overflow:visible;
}
.techmodal::backdrop{background:rgba(3,6,14,.8);-webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%)}
.techmodal[open]{animation:tmIn .38s var(--ease)}
.techmodal.is-closing{animation:tmOut .22s ease-in forwards}
.techmodal.is-closing::backdrop{animation:lbOut .22s ease-in forwards}
@keyframes tmIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes tmOut{to{opacity:0;transform:translateY(8px) scale(.98)}}
html.tm-open{overflow:hidden}

.tm-frame{position:relative;border-radius:22px;padding:1px;background:rgba(143,194,255,.14);overflow:hidden;isolation:isolate}
/* moving neon streak along the edge */
.tm-neon{
  position:absolute;inset:-60%;z-index:0;pointer-events:none;
  background:conic-gradient(from var(--tm-angle),transparent 0deg,transparent 300deg,rgba(30,123,255,.35) 330deg,#8FC2FF 348deg,#FFFFFF 356deg,transparent 360deg);
  animation:tmSpin 5.5s linear infinite;
}
@keyframes tmSpin{to{--tm-angle:360deg}}
.tm-panel{
  position:relative;z-index:1;border-radius:21px;overflow:hidden;
  background:
    radial-gradient(700px 300px at 0% 0%,rgba(30,123,255,.14),transparent 60%),
    linear-gradient(180deg,#0B1222 0%,#080D1A 100%);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.06);
  height:min(640px,calc(100vh - 34px));display:flex;flex-direction:column; /* fixed height: footer and arrows stay put across all cards */
}
.tm-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 100%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 100%);
}
.tm-corner{position:absolute;width:18px;height:18px;border:2px solid rgba(143,194,255,.75);pointer-events:none;z-index:2}
.tm-corner.tl{top:12px;left:12px;border-right:0;border-bottom:0;border-top-left-radius:6px}
.tm-corner.tr{top:12px;right:12px;border-left:0;border-bottom:0;border-top-right-radius:6px}
.tm-corner.bl{bottom:12px;left:12px;border-right:0;border-top:0;border-bottom-left-radius:6px}
.tm-corner.br{bottom:12px;right:12px;border-left:0;border-top:0;border-bottom-right-radius:6px}
/* one-shot scan sweep on open */
.tm-scan{position:absolute;left:0;right:0;top:-40%;height:40%;pointer-events:none;z-index:2;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(143,194,255,.10) 60%,rgba(191,224,255,.28) 98%,transparent)}
.techmodal[open] .tm-scan{animation:tmScan 1.1s var(--ease) .1s 1}
@keyframes tmScan{0%{top:-40%;opacity:1}100%{top:110%;opacity:0}}

.tm-close{position:absolute;top:18px;right:18px;z-index:3;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);transition:background .2s,transform .25s var(--ease)}
.tm-close svg{width:18px;height:18px}
.tm-close:hover{background:rgba(30,123,255,.35);transform:rotate(90deg)}

.tm-head{display:flex;gap:18px;align-items:center;padding:34px 34px 20px}
.tm-icon{width:64px;height:64px;border-radius:16px;flex:none;display:grid;place-items:center;color:var(--blue-3);
  background:linear-gradient(180deg,rgba(30,123,255,.22),rgba(30,123,255,.06));border:1px solid rgba(79,134,255,.4);
  box-shadow:0 0 30px -8px rgba(30,123,255,.8),inset 0 1px 0 rgba(255,255,255,.08)}
.tm-icon svg{width:30px;height:30px}
.tm-kicker{display:flex;gap:12px;align-items:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-3);font-weight:700}
.tm-kicker-index{color:var(--muted-2);letter-spacing:.12em}
.tm-title{font-size:clamp(22px,2.4vw,30px);margin-top:6px;letter-spacing:-.02em}

.tm-body{padding:0 34px 18px;overflow:auto;flex:1;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(143,194,255,.3) transparent}
.tm-body::-webkit-scrollbar{width:6px}
.tm-body::-webkit-scrollbar-thumb{background:rgba(143,194,255,.3);border-radius:6px}
.tm-summary{color:var(--muted);font-size:15.5px;line-height:1.7;max-width:60ch}
.tm-details{margin:22px 0 0;border-top:1px solid var(--border)}
.tm-details div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--border);font-size:14px}
.tm-details dt{color:var(--muted);font-weight:500}
.tm-details dd{margin:0;font-weight:600;color:var(--text)}
.tm-details dd a{color:var(--blue-3);font-family:var(--mono);font-size:13px;border-bottom:1px solid rgba(143,194,255,.35);transition:color .2s,border-color .2s}
.tm-details dd a:hover{color:#fff;border-color:#fff}
.tm-details dd a::after{content:" \2197";font-size:11px}
.tm-details dd.tm-links{color:var(--muted-2);line-height:1.9}
.tm-details dd.tm-links a{margin:0 2px}
.tm-points{margin:18px 0 0;display:grid;gap:10px}
.tm-points li{position:relative;padding-left:22px;color:var(--muted);font-size:14px;line-height:1.6}
.tm-points li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:2px;background:var(--blue-3);box-shadow:0 0 8px var(--blue-3)}

.tm-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 34px 30px;border-top:1px solid var(--border);flex:none}
.tm-nav{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.tm-actions{flex:none;white-space:nowrap}
.tm-prev,.tm-next{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);transition:color .2s,border-color .2s,background .2s}
.tm-prev svg,.tm-next svg{width:16px;height:16px}
.tm-prev:hover,.tm-next:hover{color:#fff;border-color:rgba(143,194,255,.5);background:rgba(30,123,255,.25)}
.tm-status{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-left:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-actions{display:flex;gap:10px;flex-wrap:wrap}
.tm-actions .btn{padding:12px 18px;font-size:14px;border-radius:10px}

@media (max-width:700px){
  .tm-head{padding:26px 22px 14px;gap:14px}
  .tm-icon{width:52px;height:52px;border-radius:13px}.tm-icon svg{width:24px;height:24px}
  .tm-body{padding:0 22px 6px}
  .tm-details div{grid-template-columns:1fr;gap:2px;padding:10px 0}
  .tm-foot{padding:16px 22px 22px;flex-wrap:wrap}
  .tm-status{display:none}
  .tm-actions{width:100%;flex:auto}
  .tm-actions .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .tm-neon{animation:none}
}
/* =============================================================
   Creoplay AI chapter: own panel, tab-style opener
   ============================================================= */
.cpai{
  position:relative;overflow:visible;margin-top:clamp(24px,4vw,56px);
  padding:clamp(92px,9.5vw,124px) 0 clamp(72px,8vw,104px);
  background:linear-gradient(180deg,#060A15 0%,#080E1E 30%,#0A1122 60%,#05080F 100%);
  border-top:1px solid rgba(143,194,255,.12);
}
.cpai::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(191,224,255,.75) 18%,rgba(79,134,255,.25) 50%,rgba(191,224,255,.75) 82%,transparent 100%);
}
.cpai-tab{
  position:absolute;top:0;left:50%;transform:translate(-50%,-50%);z-index:2;
  display:inline-flex;align-items:center;gap:10px;padding:9px 18px 9px 12px;border-radius:999px;
  background:#0A101E;border:1px solid rgba(143,194,255,.4);
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-3);white-space:nowrap;
  box-shadow:0 0 0 10px #05080F,0 0 40px -6px rgba(30,123,255,.75);
}
.cpai-tab img{width:18px;height:18px;filter:drop-shadow(0 0 8px rgba(30,123,255,.8))}
.cpai-glow{position:absolute;left:-12%;top:-8%;width:60%;height:70%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(30,123,255,.20),transparent 65%);filter:blur(30px)}
.cpai .container{position:relative;z-index:1}

/* Chapter head */
.cpai-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.cpai-head h2{font-size:clamp(34px,4.4vw,60px);max-width:14ch}
.cpai-head .lead{margin-top:18px;max-width:50ch}
.cpai-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.ai-visual{min-height:540px}

/* Feature grid */
.cpai-features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:clamp(44px,6vw,72px)}
.cpai-feature{position:relative;padding:26px;border-radius:18px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));transition:border-color .25s var(--ease),transform .25s var(--ease)}
.cpai-feature::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);opacity:.5}
.cpai-feature:hover{border-color:rgba(79,134,255,.45);transform:translateY(-3px)}
.cpai-feature .num{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--blue-3)}
.cpai-feature h3{font-size:18px;margin-top:14px;letter-spacing:-.015em}
.cpai-feature p{color:var(--muted);font-size:14px;margin-top:8px;line-height:1.6}

/* Tool suite */
.cpai-tools{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2.2fr);gap:clamp(24px,4vw,48px);align-items:start;margin-top:clamp(40px,5vw,56px);padding-top:32px;border-top:1px solid var(--border)}
.cpai-tools h3{font-size:22px;letter-spacing:-.015em}
.cpai-tools > div > p{color:var(--muted);font-size:14.5px;margin-top:10px;max-width:34ch;line-height:1.65}
.tool-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tool{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.025)}
.tool strong{display:block;font-size:14.5px;letter-spacing:-.01em}
.tool span{display:block;font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.5}
.tool .chip{flex:none;display:inline-flex;font-size:11px;padding:4px 9px}

/* Showcase marquee */
.cpai-showcase{margin-top:clamp(40px,5vw,56px)}
.cpai-showcase .row-between{margin-bottom:18px}
.cpai-showcase .marquee-group{gap:16px;padding-right:16px}
.marquee-slow .marquee-track{animation-duration:55s}
.showcase-card{margin:0;width:250px;flex:none;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:#0B1224;transition:border-color .25s,transform .25s var(--ease)}
.showcase-card:hover{border-color:rgba(143,194,255,.45);transform:translateY(-3px)}
.showcase-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.showcase-card .cap{display:flex;justify-content:space-between;gap:8px;padding:10px 12px;font-size:12.5px}
.showcase-card .cap b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.showcase-card .cap span{color:var(--muted);white-space:nowrap}

/* Bottom strip */
.cpai-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:20px;align-items:center;margin-top:clamp(40px,5vw,56px);padding:22px 26px;border-radius:18px;border:1px solid rgba(79,134,255,.32);background:linear-gradient(90deg,rgba(30,123,255,.14),rgba(255,255,255,.02))}
.cpai-strip strong{display:block;font-size:15px;letter-spacing:-.01em}
.cpai-strip span{display:block;font-size:13px;color:var(--muted);margin-top:3px;line-height:1.5}

@media (max-width:1100px){
  .cpai-features{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tool-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cpai-strip{grid-template-columns:1fr 1fr}
  .cpai-strip .btn{grid-column:1/-1;justify-self:start}
}
@media (max-width:960px){
  .cpai-head{grid-template-columns:1fr;gap:12px}
  .ai-visual{min-height:0}
  .cpai-tools{grid-template-columns:1fr}
}
@media (max-width:700px){
  .cpai{padding-top:84px}
  .cpai-tab{font-size:10px;padding:8px 14px 8px 10px}
  .cpai-features{grid-template-columns:1fr}
  .tool-list{grid-template-columns:1fr}
  .cpai-strip{grid-template-columns:1fr;padding:20px}
  .cpai-strip .btn{width:100%}
  .showcase-card{width:210px}
}
/* =============================================================
   Tokenomics ⇄ live market pane (switches in place, same height)
   ============================================================= */
.tk-switch{position:relative}
.tk-pane{transition:opacity .24s var(--ease),transform .24s var(--ease)}
.tk-pane.is-leaving{opacity:0;transform:translateY(6px)}
.tk-pane.is-entering{opacity:0;transform:translateY(-6px)}
.tk-pane-market{min-height:var(--pane-h,auto);display:flex;flex-direction:column;gap:16px}
.tk-pane[hidden]{display:none !important} /* the flex display above must not defeat the hidden attribute */
.tk-pane-market .tk-top{align-items:end}
.tk-pane-market .tk-copy h2{font-size:clamp(28px,3vw,42px);max-width:none;white-space:nowrap}
.mk-live-dot{width:8px;height:8px;border-radius:50%;background:#5EE39A;box-shadow:0 0 0 0 rgba(94,227,154,.7);animation:mkPulse 1.8s ease-out infinite;flex:none}
@keyframes mkPulse{0%{box-shadow:0 0 0 0 rgba(94,227,154,.7)}70%{box-shadow:0 0 0 8px rgba(94,227,154,0)}100%{box-shadow:0 0 0 0 rgba(94,227,154,0)}}

/* head */
.mk-side{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.mk-side .tk-actions{margin-top:0}
.mk-price{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.mk-price-value{font-size:clamp(30px,3.4vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.mk-badges{display:flex;gap:8px;flex-wrap:wrap}
.mk-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-family:var(--mono);font-size:12px;font-weight:600;background:rgba(255,255,255,.06);color:var(--muted);border:1px solid var(--border);white-space:nowrap}
.mk-badge.up{background:rgba(34,197,94,.12);color:#5EE39A;border-color:rgba(34,197,94,.3)}
.mk-badge.down{background:rgba(244,63,94,.12);color:#FB7185;border-color:rgba(244,63,94,.3)}
.mk-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.mk-state{padding:12px 16px;border-radius:12px;border:1px solid rgba(255,197,61,.35);background:rgba(255,197,61,.08);color:#FFD56A;font-size:13.5px}

/* KPI row: same hairline rhythm as the tokenomics facts */
.mk-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.mk-kpi{padding:16px 16px;border-left:1px solid var(--border);min-width:0}
.mk-kpi:first-child{border-left:0;padding-left:0}
.mk-kpi small{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);font-weight:700}
.mk-kpi strong{display:block;font-size:17px;font-weight:700;letter-spacing:-.02em;margin-top:8px;font-variant-numeric:tabular-nums;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-kpi span{display:block;font-size:12px;color:var(--muted);margin-top:4px;font-variant-numeric:tabular-nums}
.mk-kpis.is-loading .mk-kpi strong,.mk-kpis.is-loading .mk-kpi span{color:transparent;border-radius:6px;background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.12),rgba(255,255,255,.05));background-size:200% 100%;animation:mkShimmer 1.2s linear infinite}
@keyframes mkShimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* charts */
.mk-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px}
.mk-chart,.mk-venues,.mk-markets{padding:16px 20px 14px;border-radius:16px;border:1px solid var(--border);background:rgba(255,255,255,.025);min-width:0}
.mk-chart-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.mk-chart-title{font-size:14px;font-weight:700}
.mk-chart-title span{font-family:var(--mono);font-size:10.5px;color:var(--muted-2);letter-spacing:.12em;text-transform:uppercase;margin-left:8px;font-weight:600}
.mk-chart-last,.mk-total,.mk-count{font-family:var(--mono);font-size:12px;color:var(--muted)}
.mk-plot{position:relative;height:126px;margin-top:12px}
.mk-gridlines{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;z-index:1}
.mk-gridlines div{position:relative;height:0;border-top:1px dashed rgba(255,255,255,.09)}
.mk-gridlines span{position:absolute;right:0;top:-9px;font-family:var(--mono);font-size:10.5px;color:var(--muted);background:rgba(10,16,30,.9);padding:1px 6px;border-radius:4px}
.mk-spark{position:absolute;inset:0;width:100%;height:100%;display:block}
.mk-area{fill:url(#mkFill)}
.mk-line{fill:none;stroke:#8FC2FF;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px rgba(143,194,255,.55))}
.mk-xaxis{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--mono);font-size:10.5px;color:var(--muted-2);letter-spacing:.04em}
.mk-chain-bar{margin-top:16px}
.mk-chain-list{margin:12px 0 0;display:grid;gap:0}
.mk-chain-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;font-size:12.5px;padding:5px 0;border-bottom:1px solid var(--border)}
.mk-chain-list li:last-child{border-bottom:0}
.mk-chain-list i{width:10px;height:10px;border-radius:50%;display:inline-block;box-shadow:0 0 10px -2px currentColor}
.mk-chain-list b{display:block;font-weight:600;line-height:1.2}
.mk-chain-list small{display:block;color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.mk-chain-list .vol{font-family:var(--mono);font-size:12.5px;white-space:nowrap}
.mk-chain-list .share{font-family:var(--mono);font-size:12.5px;color:var(--blue-3);min-width:52px;text-align:right}
.mk-split{display:flex;gap:8px;margin-top:10px;font-family:var(--mono);font-size:11px}
.mk-split span{padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.04)}
.mk-split-cex{color:#8FC2FF}.mk-split-dex{color:#B7A6FF}

/* exchange table: fills the remaining pane height and scrolls inside */
.mk-markets{display:flex;flex-direction:column;flex:1}
.mk-table-wrap{overflow:auto;margin-top:12px;border:1px solid var(--border);border-radius:12px;flex:1;min-height:312px;max-height:420px;scrollbar-width:thin;scrollbar-color:rgba(143,194,255,.3) transparent}
.mk-table-wrap::-webkit-scrollbar{width:6px;height:6px}
.mk-table-wrap::-webkit-scrollbar-thumb{background:rgba(143,194,255,.3);border-radius:6px}
.mk-table{width:100%;border-collapse:collapse;font-size:13px;min-width:680px}
.mk-table th{position:sticky;top:0;z-index:1;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:700;text-align:left;padding:9px 12px;border-bottom:1px solid var(--border);background:#0B1222}
.mk-table td{padding:7px 12px;border-bottom:1px solid var(--border);vertical-align:middle;font-variant-numeric:tabular-nums;white-space:nowrap}
.mk-table tr:last-child td{border-bottom:0}
.mk-table tr:hover td{background:rgba(255,255,255,.025)}
.mk-table tr.is-stale td{opacity:.5}
.mk-ex{display:flex;align-items:center;gap:8px;font-weight:600}
.mk-type{font-family:var(--mono);font-size:10px;letter-spacing:.12em;padding:2px 6px;border-radius:5px;border:1px solid var(--border);color:var(--muted)}
.mk-type.dex{color:#B7A6FF;border-color:rgba(124,92,255,.35)}
.mk-type.cex{color:#8FC2FF;border-color:rgba(79,134,255,.35)}
.mk-chain{display:inline-flex;align-items:center;gap:6px;font-size:12.5px}
.mk-chain i{width:9px;height:9px;border-radius:50%;display:inline-block}
.mk-pair{font-family:var(--mono);font-size:12px;color:var(--muted)}
.mk-share{display:flex;align-items:center;gap:10px;min-width:140px}
.mk-share i{flex:1;height:5px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden;position:relative}
.mk-share i::after{content:"";position:absolute;inset:0;width:var(--w,0%);border-radius:5px;background:linear-gradient(90deg,var(--blue),var(--blue-3))}
.mk-share b{font-weight:600;font-family:var(--mono);font-size:11.5px;min-width:46px;text-align:right}
.mk-trade{color:var(--blue-3);font-weight:600;font-size:12.5px}
.mk-trade:hover{color:#fff}
.mk-stale-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:#FFD56A}
.tk-pane-market .tk-foot{margin-top:0}
.mk-cache{color:var(--muted)}

@media (max-width:1100px){
  .mk-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mk-kpi:nth-child(3n+1){border-left:0;padding-left:0}
  .mk-kpi:nth-child(n+4){border-top:1px solid var(--border)}
  .mk-grid{grid-template-columns:1fr}
}
@media (max-width:960px){
  .tk-pane-market{min-height:0}
  .mk-table-wrap{min-height:0;max-height:380px}
  .mk-markets{flex:none}
  .mk-table .mk-th-share,.mk-table .mk-td-share{display:none}
  .mk-table{min-width:560px}
}
@media (max-width:600px){
  .mk-kpis{grid-template-columns:1fr 1fr}
  .mk-kpi:nth-child(3n+1){border-left:1px solid var(--border);padding-left:16px}
  .mk-kpi:nth-child(odd){border-left:0;padding-left:0}
  .mk-kpi:nth-child(n+4){border-top:0}
  .mk-kpi:nth-child(n+3){border-top:1px solid var(--border)}
  .mk-xaxis span:nth-child(even){display:none}
  .mk-plot{height:160px}
  .mk-chart,.mk-venues,.mk-markets{padding:14px}
}
/* =============================================================
   News cards (homepage + listing)
   ============================================================= */
.news-card{padding:0;display:flex;flex-direction:column;color:inherit}
.news-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0B1224}
.news-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.news-card:hover .news-img img{transform:scale(1.04)}
.news-count{position:absolute;right:12px;bottom:12px;padding:4px 9px;border-radius:999px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;background:rgba(5,8,15,.72);border:1px solid rgba(255,255,255,.14);color:var(--muted)}
.news-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.news-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.news-meta time{font-size:12.5px;color:var(--muted-2);font-variant-numeric:tabular-nums}
.news-body h3{font-size:17px;line-height:1.35;letter-spacing:-.01em}
.news-body p{font-size:14px;color:var(--muted);line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.news-more{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--blue-3)}
.news-card:hover .news-more{color:#fff}
.news-card[hidden]{display:none}

/* =============================================================
   News listing page
   ============================================================= */
.newsroom{padding-top:clamp(96px,9vw,120px)}
.news-index{padding-top:clamp(40px,5vw,64px)}
.news-head{max-width:760px}
.news-head h1{font-size:clamp(38px,5vw,64px)}
.news-head .lead{margin-top:16px}
.news-filters{display:flex;gap:8px;flex-wrap:wrap;margin:32px 0 28px}
.news-filters button{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--muted);font-size:13.5px;font-weight:600;transition:color .2s,border-color .2s,background .2s}
.news-filters button span{font-family:var(--mono);font-size:11px;color:var(--muted-2)}
.news-filters button:hover{color:#fff;border-color:var(--border-strong)}
.news-filters button.active{color:#fff;background:rgba(30,123,255,.16);border-color:rgba(79,134,255,.5)}
.news-filters button.active span{color:var(--blue-3)}
.news-grid-all{grid-template-columns:repeat(3,minmax(0,1fr))}
.news-card-large{grid-column:span 2}
.news-card-large .news-img{aspect-ratio:16/8}
.news-card-large .news-body h3{font-size:24px;letter-spacing:-.02em}
.news-card-large .news-body p{-webkit-line-clamp:2;font-size:15px}
.news-empty{color:var(--muted);padding:40px 0}

/* =============================================================
   Article page
   ============================================================= */
.post{padding:clamp(20px,3vw,36px) 0 clamp(72px,9vw,120px)}
.post-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.post-back{font-size:14px}
.post-crumb{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted-2)}
.post-crumb a{color:var(--muted)}
.post-crumb a:hover{color:#fff}
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(32px,4.5vw,72px);align-items:start}
.post-main{min-width:0}
.post-header{max-width:960px}
.post-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13.5px;color:var(--muted-2)}
.post-head time{font-variant-numeric:tabular-nums}
.post-read::before{content:"\00b7";margin-right:12px}
.post h1{font-size:clamp(32px,4.2vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1.06;margin-top:18px;text-wrap:balance}
.post .lead{margin-top:18px;max-width:none;font-size:clamp(17px,1.5vw,20px)}
.post-cover{display:block;position:relative;margin-top:32px;border-radius:20px;overflow:hidden;border:1px solid var(--border);background:#0B1224;cursor:zoom-in}
.post-cover img{width:100%;display:block;max-height:620px;object-fit:cover}
.post-cover-cap{position:absolute;left:0;right:0;bottom:0;padding:40px 20px 14px;font-size:12.5px;color:var(--muted);background:linear-gradient(180deg,transparent,rgba(5,8,15,.85))}
.post-body{margin-top:34px;max-width:none; /* owner 2026-09-24: text keeps the full post width, like the photo above it */font-size:17.5px;line-height:1.8;color:#D9E0EF}
.post-body p+p{margin-top:18px}
.post-body .post-first{font-size:19px;color:#EEF2FA}
.post-body .post-first::first-letter{float:left;font-size:54px;line-height:.82;font-weight:800;margin:7px 10px 0 0;color:var(--blue-3)}
.post-highlights{margin-top:36px;max-width:none;padding:22px 26px 12px;border:1px solid rgba(79,134,255,.3);border-radius:16px;background:linear-gradient(180deg,rgba(30,123,255,.09),rgba(255,255,255,.02))}
.post-highlights h3{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-3);font-weight:700}
.post-highlights ol{margin:8px 0 0;padding:0;list-style:none;counter-reset:kp}
.post-highlights li{position:relative;padding:11px 0 11px 34px;border-top:1px solid var(--border);font-size:15px;line-height:1.55;color:#D9E0EF;counter-increment:kp}
.post-highlights li::before{content:counter(kp,decimal-leading-zero);position:absolute;left:0;top:12px;font-family:var(--mono);font-size:11px;color:var(--blue-3)}
.post-highlights li:first-child{border-top:0}
.post-gallery-wrap{margin-top:40px}
.post-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.post-section-head h3{font-size:18px;letter-spacing:-.015em}
.post-section-head span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.post-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.post-thumb{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;background:#0B1224;cursor:zoom-in}
.post-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.post-thumb:hover img{transform:scale(1.03)}
.post-foot{margin-top:36px;padding-top:18px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted-2)}
.post-foot a{color:var(--blue-3);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.post-foot a:hover{color:#fff}
.post-nav{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.post-nav-link{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.025);color:inherit;transition:border-color .2s,transform .25s var(--ease)}
.post-nav-link:hover{border-color:rgba(79,134,255,.5);transform:translateY(-2px)}
.post-nav-link small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-3);font-weight:700}
.post-nav-link strong{font-size:15px;line-height:1.35;letter-spacing:-.01em}
.post-nav-link span{font-size:12.5px;color:var(--muted-2)}
.post-nav-link.is-next{text-align:right;align-items:flex-end}

.post-video{margin:0;display:flex;justify-content:center;border:1px solid var(--border);border-radius:20px;background:#0B1224;overflow:hidden}
.post-main>.post-video{margin-top:32px}
.post-video video{display:block;width:min(100%,calc(max(min(78vh,720px),360px) * var(--r,1.7778)));height:auto;aspect-ratio:var(--r,1.7778);background:#0B1224}
.post-video video.is-cropped{object-fit:cover;object-position:var(--ox,50%) var(--oy,50%)}
.post-gallery .post-video{grid-column:1/-1;border-radius:14px;align-items:center}
.post-gallery .post-video video{width:min(100%,calc(420px * var(--r,1.7778)))}

/* Sidebar */
.post-side{position:sticky;top:104px;display:grid;gap:14px}
.side-card{padding:20px 22px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012))}
.side-card h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-3);font-weight:700;margin-bottom:12px}
.side-dl{margin:0}
.side-dl div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--border);font-size:13.5px}
.side-dl div:first-child{border-top:0;padding-top:0}
.side-dl dt{color:var(--muted)}
.side-dl dd{margin:0;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.side-dl dd a{color:var(--blue-3)}
.side-dl dd a:hover{color:#fff}
.side-people{display:grid;gap:10px}
.side-people li{display:flex;align-items:center;gap:12px}
.side-people .avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:700;font-size:14px;color:#fff;background:linear-gradient(180deg,rgba(30,123,255,.55),rgba(30,123,255,.2));border:1px solid rgba(79,134,255,.45)}
.side-people strong{display:block;font-size:14px}
.side-people small{display:block;font-size:12px;color:var(--muted)}
.side-share{display:flex;gap:8px;flex-wrap:wrap}
.side-share a,.side-share button{padding:8px 13px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.03);font-size:13px;font-weight:600;color:var(--text);transition:border-color .2s,background .2s}
.side-share a:hover,.side-share button:hover{border-color:rgba(79,134,255,.5);background:rgba(30,123,255,.14)}
.side-share button.is-done{border-color:rgba(34,197,94,.45);color:#5EE39A}
.side-list{display:grid;gap:12px}
.side-list a{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center;color:inherit}
.side-thumb{display:block;width:72px;height:52px;border-radius:9px;overflow:hidden;background:#0B1224;border:1px solid var(--border)}
.side-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.side-list strong{display:block;font-size:13.5px;line-height:1.35;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.side-list small{display:block;font-size:12px;color:var(--muted-2);margin-top:3px}
.side-list a:hover strong{color:var(--blue-3)}
.side-all{font-size:13.5px;margin-top:14px}
.side-cats{display:grid;gap:4px}
.side-cats a{display:flex;justify-content:space-between;padding:8px 10px;border-radius:9px;font-size:13.5px;color:var(--muted);transition:background .2s,color .2s}
.side-cats a span{font-family:var(--mono);font-size:11px;color:var(--muted-2)}
.side-cats a:hover,.side-cats a.is-current{background:rgba(30,123,255,.12);color:#fff}
.side-cats a.is-current span{color:var(--blue-3)}
.side-cta{border-color:rgba(79,134,255,.35);background:linear-gradient(135deg,rgba(30,123,255,.18),rgba(255,255,255,.02))}
.side-cta p{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:16px}

@media (max-width:1100px){
  .post-layout{grid-template-columns:minmax(0,1fr) 320px}
}
@media (max-width:960px){
  .post-layout{grid-template-columns:1fr}
  .post-side{position:static}
  .post-body,.post-highlights,.post-header{max-width:none}
  .news-grid-all{grid-template-columns:repeat(2,minmax(0,1fr))}
  .news-card-large{grid-column:span 2}
}
@media (max-width:600px){
  .news-grid-all{grid-template-columns:1fr}
  .news-card-large{grid-column:auto}
  .news-card-large .news-img{aspect-ratio:16/10}
  .news-card-large .news-body h3{font-size:18px}
  .post-gallery{grid-template-columns:1fr}
  .post-nav{grid-template-columns:1fr}
  .post-nav-link.is-next{text-align:left;align-items:flex-start}
  .post-body{font-size:16px}
  .post-cover-cap{display:none}
  .post-top{margin-bottom:20px}
  .side-card{padding:18px}
}
/* ===== Product page (creoplay-ai.php) ===== */
/* Hero flows into the next section: the background fades out at the bottom and a luminous horizon line
   marks the transition, with a soft glow on both sides of it (owner reference, 2026-09-23). */
.product-hero{padding-bottom:64px}
.product-hero .hero-inner{position:relative;z-index:1}
.product-hero .hero-bg{
  background:
    linear-gradient(180deg,rgba(5,8,15,0) 58%,#05080F 100%),
    radial-gradient(760px 540px at 72% 46%,rgba(30,123,255,.30),transparent 62%),
    radial-gradient(520px 380px at 10% 18%,rgba(30,123,255,.10),transparent 60%),
    linear-gradient(180deg,#040814 0%,#050A17 70%,#05080F 100%);
}
.horizon{position:absolute;left:0;right:0;bottom:0;height:1px;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(63,146,255,0) 0%,rgba(63,146,255,.45) 26%,rgba(191,224,255,.95) 50%,rgba(63,146,255,.45) 74%,rgba(63,146,255,0) 100%)}
.horizon::before{content:"";position:absolute;left:50%;bottom:0;width:min(1240px,100%);height:170px;transform:translateX(-50%);
  background:radial-gradient(ellipse 55% 100% at 50% 100%,rgba(30,123,255,.26),rgba(30,123,255,0) 70%)}
.product-open{padding-top:clamp(64px,7vw,96px)}
.product-open::before{content:"";position:absolute;left:50%;top:0;width:min(1240px,100%);height:240px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse 55% 100% at 50% 0%,rgba(30,123,255,.22),rgba(30,123,255,0) 70%)}
.product-open .container{position:relative}
@media (max-width:600px){
  .product-hero{padding-bottom:40px}
  .horizon::before{height:110px}
  .product-open::before{height:150px}
}

/* Overview: four equal columns, each card with its own visual at the bottom (owner reference 2026-09-23) */
.product-open .bento{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.product-open .bento .card{grid-column:auto;min-height:0;padding:24px 22px 22px;gap:12px}
.product-open .bento h3{font-size:19px;letter-spacing:-.02em;line-height:1.2;margin-top:4px}
.product-open .bento p{font-size:14px;line-height:1.6}
.product-open .bento .visual{margin-top:auto;padding-top:6px}
.product-open .mini-flow{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.product-open .mini-flow .mini-arrow{display:none}
.product-open .mini-box{font-size:12px}
.product-open .mini-game{aspect-ratio:auto;height:118px}
.product-open .meter-panel{border:1px solid var(--border);border-radius:14px;padding:14px 14px 12px;background:rgba(255,255,255,.025)}
.product-open .meter-head{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;padding-left:22px;position:relative}
.product-open .meter-head::before{content:"";position:absolute;left:0;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:4px;border:1px solid rgba(63,146,255,.5);background:rgba(30,123,255,.14)}
.product-open .meter{gap:8px;margin-top:0}
.product-open .meter div{grid-template-columns:auto 1fr auto;gap:8px;font-size:12.5px}
.product-open .meter div b{position:relative;padding-left:20px;font-weight:500;color:#C9D2E6}
.product-open .meter div b::before{content:"";position:absolute;left:0;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;border:1px solid rgba(94,227,154,.7);background:rgba(34,197,94,.14)}
.product-open .meter div b::after{content:"";position:absolute;left:3px;top:50%;width:5px;height:3px;margin-top:-3px;border-left:1.5px solid #5EE39A;border-bottom:1.5px solid #5EE39A;transform:rotate(-45deg)}
.product-open .meter div i{height:2px;opacity:.7}
.product-open .meter-sum{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.product-open .meter-badge{padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;color:#FFB4B4;background:rgba(239,68,68,.16);border:1px solid rgba(239,68,68,.4)}
.product-open .meter-sum b{font-size:13px;font-family:var(--mono);color:#fff}
.product-open .meter-bars{margin-left:auto;color:var(--blue-3)}
.product-open .model-tiers{gap:10px}
.product-open .model-tier{padding:12px}
.product-open .model-tier strong{font-size:14px}
.product-open .model-tier span{font-size:12px}
.product-open .model-tier .chip{font-size:11px;padding:4px 9px}
.product-open .export-visual{display:grid;gap:6px;margin-top:0}
.product-open .export-visual .tag{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.03)}
.product-open .export-visual .tag::before{content:"";flex:none;width:10px;height:12px;border:1.5px solid rgba(201,210,230,.7);border-radius:2px;background:linear-gradient(transparent 3px,rgba(201,210,230,.35) 3px 4.5px,transparent 4.5px 6px,rgba(201,210,230,.35) 6px 7.5px,transparent 7.5px)}
.product-open .export-visual .tag.hl{margin-top:4px;padding:12px}
.product-open .export-visual .tag.hl::before{display:none}
.product-open .feature-tags{display:none}
@media (max-width:1100px){.product-open .bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.product-open .bento{grid-template-columns:1fr}}

/* How it works: tighter rail, one continuous light line through the numbers (owner reference 2026-09-23) */
#how-it-works{padding-bottom:clamp(56px,7vw,96px)}
#how-it-works .section-head{margin-bottom:clamp(28px,3.5vw,44px);max-width:900px}
#how-it-works .section-head h2{font-size:clamp(28px,3.1vw,42px);letter-spacing:-.025em}
#how-it-works .section-head p{font-size:15px;margin-top:8px}
#how-it-works .steps{gap:20px}
#how-it-works .steps::before{left:-2%;right:-2%;top:26px;height:2px;background:linear-gradient(90deg,rgba(30,123,255,0),rgba(30,123,255,.55) 6%,rgba(63,146,255,.85) 50%,rgba(30,123,255,.55) 94%,rgba(30,123,255,0));box-shadow:0 0 18px rgba(30,123,255,.35)}
#how-it-works .step-num{position:relative;width:52px;height:52px;border-radius:12px;display:grid;place-items:center;font-family:var(--mono);font-size:13px;color:var(--blue-3);background:#0A1326;border:1px solid rgba(63,146,255,.45);box-shadow:0 0 0 4px #05080F,0 0 22px rgba(30,123,255,.35);margin-bottom:18px}
#how-it-works .step h3{font-size:15.5px;margin-bottom:6px}
#how-it-works .step p{font-size:13.5px;line-height:1.55}
#how-it-works .step .chip{margin-top:10px;font-size:11.5px;padding:5px 10px}
@media (max-width:960px){#how-it-works .steps::before{display:none}}
/* Steps: equal text height per row, chips aligned on one baseline */
#how-it-works .step{display:flex;flex-direction:column;align-items:flex-start}
#how-it-works .step p{flex:1 0 auto;min-height:calc(3 * 1.55em)}
#how-it-works .step .chip{margin-top:auto;padding-top:5px;position:relative;top:12px}

/* Credit economy: lifted band with hairlines, compact head (owner reference 2026-09-23) */
#credits{background:linear-gradient(180deg,#070C17 0%,#060A14 100%);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:clamp(48px,6vw,72px) 0}
#credits .section-head{margin-bottom:clamp(24px,3vw,36px)}
#credits .section-head h2{font-size:clamp(28px,3.1vw,40px);letter-spacing:-.025em}
#credits .section-head p{font-size:15px;margin-top:8px}
#credits .eyebrow::after{content:"";width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--blue-3))}

/* Product page palette: deeper blue-blacks and a larger glow around the generator, measured from the owner's reference (2026-09-23) */
body:has(main.page-product){background:#02060F}
.product-hero .hero-bg{
  background:
    linear-gradient(180deg,rgba(2,6,15,0) 60%,#02060F 100%),
    radial-gradient(760px 560px at 71% 38%,rgba(30,123,255,.36),transparent 62%),
    radial-gradient(420px 320px at 12% 22%,rgba(30,123,255,.10),transparent 60%),
    linear-gradient(180deg,#020B1D 0%,#020914 60%,#02060F 100%);
}
.product-hero .hero-bg::after{opacity:.34}
.product-open{background:linear-gradient(180deg,#020B1B 0%,#02060F 100%)}
.page-product .card{background:linear-gradient(180deg,#050F24 0%,#030A19 100%);border-color:rgba(143,180,255,.14)}
.page-product .card .card,.page-product .model-tier,.page-product .mini-box,.page-product .meter-panel{background:rgba(255,255,255,.03)}
#credits{background:linear-gradient(180deg,#040D1F 0%,#030A18 100%)}

/* Horizon between Top-up packs and Web3 payments (owner request 2026-09-23); reusable: put .horizon at the end of a section and .after-horizon on the next */
#topup{padding-bottom:72px}
.after-horizon{padding-top:clamp(56px,7vw,88px)}
.after-horizon::before{content:"";position:absolute;left:50%;top:0;width:min(1240px,100%);height:240px;transform:translateX(-50%);pointer-events:none;background:radial-gradient(ellipse 55% 100% at 50% 0%,rgba(30,123,255,.22),rgba(30,123,255,0) 70%)}
.after-horizon .container{position:relative}
@media (max-width:600px){#topup{padding-bottom:48px}.after-horizon::before{height:150px}}

/* Overview cards 2 and 3 fill their column: both panels grow to the card bottom and carry more content,
   the analysed prompt in the meter and stacked tiers with a plans line (owner: "fill these 2 boxes better", 2026-09-24) */
.product-open .meter-panel,.product-open .model-tiers{flex:1 1 auto;margin-top:14px;display:flex;flex-direction:column}
.product-open .meter-panel{padding:16px 16px 14px;border-radius:16px}
.product-open .meter-head{margin-bottom:12px}
.product-open .meter-prompt{font-family:var(--mono);font-size:11.5px;line-height:1.55;color:#9FB2D4;padding:10px 12px;margin-bottom:14px;border-radius:10px;background:rgba(2,6,15,.55);border:1px solid rgba(143,180,255,.12)}
.product-open .meter-prompt span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-open .meter-prompt span::before{content:"\201C"}
.product-open .meter-prompt span::after{content:"\201D"}
.product-open .meter{flex:1 1 auto;align-content:center;gap:14px;margin-top:0}
.product-open .meter div{grid-template-columns:108px 1fr auto;gap:10px;font-size:13px}
.product-open .meter div b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-open .meter div i{height:4px;border-radius:4px;opacity:1;background:rgba(255,255,255,.07)}
.product-open .meter div i::after{box-shadow:0 0 12px rgba(63,146,255,.55)}
.product-open .meter div span{font-size:13px}
.product-open .meter div:last-child b{color:#fff}
.product-open .meter-sum{margin-top:14px;padding-top:14px}
.product-open .model-tiers{gap:12px}
.product-open .model-tier{flex:1 1 0;display:flex;flex-direction:column;gap:6px;padding:14px 16px 13px;border-radius:16px}
.product-open .model-tier .chip{align-self:flex-start;margin:0 0 3px}
.product-open .model-tier strong{font-size:19px;letter-spacing:-.02em;line-height:1.15;margin:0;color:#fff}
.product-open .model-tier .tier-plans{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-3);margin:-2px 0 2px}
.product-open .model-tier > span{font-size:13px;line-height:1.55;color:var(--muted)}

/* Plans: the cards mirror the Buy Plans page of the app (ai.creoplay.app/payment): mark top-left, credits badge
   top-right, large plan name, price, hairline, optional "Everything in X and:" line, bullet list, button to the app
   (owner: "pricing has to match these tables", 2026-09-24). Colours stay in the product page palette. */
#pricing .pricing-controls{margin-bottom:40px}
#pricing .segmented{padding:5px;border-radius:999px;background:rgba(255,255,255,.04);border-color:rgba(143,180,255,.14)}
#pricing .segmented button{padding:10px 22px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted)}
#pricing .segmented button.active{color:#fff;background:rgba(255,255,255,.09);box-shadow:none}
#pricing .pricing-group.active{gap:24px}
#pricing .plan{padding:34px 32px 30px;gap:0;border-radius:28px}
#pricing .plan-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:30px}
#pricing .plan-mark{width:64px;height:64px;flex:none}
#pricing .plan-mark svg{width:100%;height:100%;display:block;filter:drop-shadow(0 10px 22px rgba(30,123,255,.35))}
#pricing .mark-diamond svg,#pricing .mark-star svg{filter:drop-shadow(0 10px 22px rgba(34,197,94,.32))}
#pricing .plan .ribbon{position:static;margin-left:auto}
#pricing .plan-badge{display:inline-flex;align-items:center;gap:4px;padding:9px 14px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:-.01em;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);white-space:nowrap}
#pricing .plan-badge b{font-weight:600}
#pricing .plan-name{display:block;font-size:clamp(40px,3.6vw,54px);font-weight:600;letter-spacing:-.035em;line-height:1;color:#fff;margin:0 0 16px}
#pricing .plan-price{display:flex;align-items:baseline;gap:8px;min-height:44px;margin-bottom:26px;line-height:1}
#pricing .plan-price strong{font-size:40px;font-weight:600;letter-spacing:-.04em;color:#fff}
#pricing .plan-price span{font-size:16px;color:var(--muted)}
#pricing .plan-rule{height:1px;background:rgba(255,255,255,.12);margin-bottom:24px}
#pricing .plan-lead{font-size:14px;line-height:1.55;color:#E6ECF7;margin-bottom:8px}
#pricing .plan-list{list-style:disc;padding-left:20px;margin:0 0 28px;display:grid;gap:7px;flex:1;align-content:start}
#pricing .plan-list li{font-size:14px;line-height:1.55;color:#E6ECF7;padding:0}
#pricing .plan-list li::marker{color:#9FB2D4}
#pricing .plan .btn{margin-top:auto}
@media (max-width:640px){#pricing .plan{padding:28px 24px 24px;border-radius:22px}#pricing .plan-mark{width:52px;height:52px}#pricing .plan-name{font-size:40px}}
/* One-column layouts: the Free card has no price, so its empty price slot collapses (it only exists to align the hairlines of a row) */
@media (max-width:960px){#pricing .plan-price.is-free{min-height:0;margin-bottom:0}}
/* ===== Compact product sub-pages: Creoplay.app platform (creoplay-app.php) and Staking Hub (staking-hub.php) =====
   Same palette and sections as the Creoplay AI page (hero, four-column overview, steps rail, CTA); only the hero
   "window" mock and the card visuals are new. Shared templates: sections/_subpage-*.php (2026-09-24). */

/* Hero mock windows (shell = .gen-card from the homepage generator mock) */
.mock .gen-head .title span{color:var(--muted)}
.mock-tabs{display:flex;gap:6px;padding:12px 18px 0}
.mock-tabs span{padding:7px 12px;border-radius:9px;font-size:12px;font-weight:600;color:var(--muted);border:1px solid transparent}
.mock-tabs span.on{color:#fff;background:rgba(79,134,255,.16);border-color:rgba(79,134,255,.5)}
.mock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px 18px 0}
.mock-grid figure{margin:0;position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;border:1px solid var(--border);background:#0A101E}
.mock-grid img{width:100%;height:100%;object-fit:cover;display:block}
.mock-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 7px 5px;font-size:10px;font-weight:600;color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,.8));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-panel{margin:14px 18px 0;padding:10px 14px 4px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--border)}
.mock-panel .gen-label{margin-bottom:2px}
.mock-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--border);font-size:12.5px}
.mock-row:first-child{border-top:0}
.mock-row .dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--blue-3);box-shadow:0 0 10px var(--blue-3)}
.mock-row .dot.green{background:#5EE39A;box-shadow:0 0 10px #5EE39A}
.mock-row b{font-weight:600;white-space:nowrap}
.mock-row span{margin-left:auto;color:var(--muted);font-family:var(--mono);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-row.green span{color:#5EE39A}
.mock-platform .gen-foot{padding-top:14px}
.mock-periods{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mock-periods span{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px;border-radius:10px;border:1px solid var(--border);color:var(--muted);font-size:12px;font-weight:600}
.mock-periods span b{font-weight:600}
.mock-periods span small{font-size:10.5px;font-family:var(--mono);color:var(--muted-2)}
.mock-periods span.on{background:rgba(79,134,255,.16);border-color:rgba(79,134,255,.5);color:#fff;box-shadow:0 0 18px -4px rgba(79,134,255,.8)}
.mock-periods span.on small{color:#5EE39A}
.mock-amount{margin-top:16px}
.mock-input{display:flex;align-items:baseline;gap:8px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--border)}
.mock-input strong{font-family:var(--mono);font-size:21px;letter-spacing:-.02em;font-weight:700}
.mock-input .mock-max{margin-left:auto;font-size:11px;font-weight:700;color:var(--blue-3);letter-spacing:.08em;text-transform:uppercase}
.mock-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.mock-stats > div{padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--border);min-width:0}
.mock-stats small{display:block;font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-stats strong{font-family:var(--mono);font-size:15px;white-space:nowrap}
.mock-stats > div.green strong{color:#5EE39A}
.mock-staking .gen-foot{padding-top:16px}
.subpage-hero .float-card.fc-2{bottom:-16px;right:-26px}

/* Overview card visuals */
.sub-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sub-tiles figure{margin:0;aspect-ratio:4/3;border-radius:8px;overflow:hidden;border:1px solid var(--border)}
.sub-tiles img{width:100%;height:100%;object-fit:cover;display:block}
.sub-flow{display:grid;gap:10px}
.sub-asset{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:999px;background:rgba(79,134,255,.12);border:1px solid rgba(79,134,255,.3);font-size:12px;color:#fff;justify-self:start;max-width:100%}
.sub-asset i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--blue-3);box-shadow:0 0 10px var(--blue-3)}
.sub-asset b{font-weight:600;white-space:nowrap}
.sub-asset em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
.sub-games{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.sub-games svg{color:var(--blue-3);flex:none}
.sub-game{padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--border);min-width:0}
.sub-game b{display:block;font-size:12.5px;line-height:1.3}
.sub-game span{font-size:11px;color:var(--muted);font-family:var(--mono)}
.sub-list{display:grid;gap:6px}
.sub-list > div{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:9px;background:rgba(255,255,255,.03);font-size:12.5px;min-width:0}
.sub-list svg{flex:none;width:15px;height:15px;color:#5EE39A}
.sub-list b{font-weight:500;color:#C9D2E6}
.sub-list span{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--blue-3);white-space:nowrap}
.sub-stats > div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 0;border-top:1px solid var(--border);font-size:12.5px}
.sub-stats > div:first-child{border-top:0;padding-top:0}
.sub-stats b{font-weight:500;color:#C9D2E6}
.sub-stats span{font-family:var(--mono);color:#fff;font-size:12.5px;text-align:right;white-space:nowrap}
.product-open .sub-bars{padding:14px 14px 10px}
.product-open .sub-bars .meter{align-content:center}
.product-open .sub-bars .meter div b{padding-left:0}
.product-open .sub-bars .meter div b::before,.product-open .sub-bars .meter div b::after{display:none}
.product-open .sub-bars .meter div{grid-template-columns:64px 1fr auto}
.product-open .sub-bars .meter div:last-child b{color:#fff}

/* Steps rail with four steps */
#how-it-works .steps.steps-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){#how-it-works .steps.steps-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){#how-it-works .steps.steps-4{grid-template-columns:1fr}.mock-grid{grid-template-columns:repeat(3,1fr)}.mock-stats{grid-template-columns:1fr 1fr}}
/* Bridge hero visual (2026-10-13): route tiles (from / to) above the amount, stats and progress of the staking mock */
.mock-route{display:flex;align-items:center;gap:10px}
.mock-chain{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.03)}
.mock-chain small{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.mock-chain b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-chain.on{border-color:rgba(79,134,255,.5);background:rgba(79,134,255,.16);box-shadow:0 0 18px -4px rgba(79,134,255,.8)}
.mock-route-arrow{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(79,134,255,.16);border:1px solid rgba(79,134,255,.4);color:var(--blue-3)}
.mock-route-arrow svg{width:14px;height:14px}
.mock-bridge .gen-foot{padding-top:16px}
/* ===== Partnerships page (partnerships.php): centred head + four logo groups (2026-09-24) ===== */
.partners-hero{padding-bottom:56px}
.partners-hero .hero-inner{display:block;max-width:860px;margin-inline:auto;text-align:center;padding:34px 0 0}
.partners-hero .slide-copy{padding-bottom:0}
.partners-hero .eyebrow{justify-content:center}
.partners-hero .lead{margin-inline:auto;max-width:640px}
.partners-hero .partners-facts{margin-top:clamp(28px,4vw,40px)}
.partners-facts .fact{color:inherit;text-decoration:none;transition:transform .2s var(--ease)}
.partners-facts .fact:hover{transform:translateY(-2px)}
.partners-facts .fact strong{font-family:var(--mono)}
.partner-groups{padding-top:clamp(40px,5vw,64px)}
.pgroup-nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:8px}
.pgroup-nav a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid var(--border);color:var(--muted);font-size:13.5px;font-weight:600;background:rgba(255,255,255,.03);transition:color .2s,border-color .2s,background .2s}
.pgroup-nav a:hover{color:#fff;border-color:var(--border-strong);background:rgba(255,255,255,.06)}
.pgroup-nav a b{font-family:var(--mono);font-weight:600;font-size:12px;color:var(--blue-3)}
.pgroup{padding:clamp(40px,5vw,60px) 0 0}
.pgroup + .pgroup{margin-top:clamp(28px,4vw,48px);border-top:1px solid var(--border)}
.pgroup-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.pgroup-head h2{display:flex;align-items:center;gap:12px;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.02em;margin:0}
.pgroup-head .count{font-family:var(--mono);font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:rgba(79,134,255,.12);border:1px solid rgba(79,134,255,.3);color:var(--blue-3)}
.pgroup-head p{color:var(--muted);font-size:15px;max-width:560px;margin:0}
.logo-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.logo-tile{display:flex;align-items:center;justify-content:center;height:124px;overflow:hidden; /* flex, not grid: a percentage height on the img only resolves against a definite flex container, in an auto grid track it fell back to auto and portrait logos overflowed */ /* fixed height: with aspect-ratio a tall logo stretched its row */border-radius:14px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));padding:16px;transition:border-color .2s,transform .2s var(--ease),background .2s}
.logo-tile:hover{border-color:var(--border-strong);transform:translateY(-3px);background:rgba(255,255,255,.055)}
.logo-tile img{width:74%;height:58%;object-fit:contain;display:block;mix-blend-mode:screen} /* every logo fills the same box (files are trimmed to their content, 2026-09-25) */
@media (max-width:1100px){.logo-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.logo-tile{height:112px}}
@media (max-width:640px){.logo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.logo-tile{padding:12px;border-radius:12px;height:96px}.pgroup-head{margin-bottom:16px}}
/* Head counters: one centred row of four equal cells, hairlines between, no icons (owner: "doesn't look neat", 2026-09-24) */
.partners-hero .partners-facts{display:flex;flex-wrap:wrap;justify-content:center;row-gap:16px;margin:clamp(30px,4vw,44px) auto 0}
.partners-hero .partners-facts .fact{flex-direction:column;align-items:center;gap:6px;padding:6px 40px;margin:0;border:0;border-left:1px solid rgba(255,255,255,.14);text-align:center}
.partners-hero .partners-facts .fact:first-child{border-left:0}
.partners-hero .partners-facts .fact > svg{display:none}
.partners-hero .partners-facts .fact strong{font-family:var(--mono);font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:1;color:#fff}
.partners-hero .partners-facts .fact > div > span{display:block;margin-top:6px;font-size:13px;letter-spacing:.02em;color:var(--muted)}
@media (max-width:640px){.partners-hero .partners-facts .fact{padding:6px 18px}.partners-hero .partners-facts .fact strong{font-size:24px}.partners-hero .partners-facts .fact:nth-child(3){border-left:0}}
/* Counters v2: four equal columns (separators sit exactly between cells), smaller and tighter; less head space
   (owner: "isn't properly aligned and takes too much space", 2026-09-24) */
.partners-hero{padding-bottom:36px}
.partners-hero .hero-inner{padding-top:16px}
.partners-hero .lead{margin-top:14px}
/* 2026-10-02: no gap between the cells. The hero's general facts rule (.product-hero .hero-facts) added a 32px
   column gap that sat on one side of each hairline, so the separators were 16px off the midpoint between two
   numbers. The gap's width went into the cells (150 + 32 = 182), so the numbers stay exactly where they were. */
.partners-hero .partners-facts{display:grid;grid-template-columns:repeat(4,minmax(0,182px));justify-content:center;gap:0;margin:24px auto 0}
.partners-hero .partners-facts .fact{padding:2px 8px;gap:0;border-left:1px solid rgba(255,255,255,.14)}
.partners-hero .partners-facts .fact:first-child{border-left:0}
.partners-hero .partners-facts .fact strong{font-size:24px}
.partners-hero .partners-facts .fact > div > span{margin-top:3px;font-size:12px}
.partner-groups{padding-top:clamp(28px,4vw,44px)}
@media (max-width:640px){.partners-hero .partners-facts{grid-template-columns:repeat(4,minmax(0,1fr));width:100%}.partners-hero .partners-facts .fact{padding:2px 4px}.partners-hero .partners-facts .fact:nth-child(3){border-left:1px solid rgba(255,255,255,.14)}.partners-hero .partners-facts .fact strong{font-size:20px}.partners-hero .partners-facts .fact > div > span{font-size:11px}}
/* Balanced line breaks in the head: no orphan word under the headline, even lines in the lead (owner 2026-09-24) */
.partners-hero h1{text-wrap:balance;max-width:16ch;margin-inline:auto}
.partners-hero .lead{text-wrap:balance}
/* ===== Media kit page (media-kit.php): logos, colours, typography, usage (2026-09-25) ===== */
.mkit-hero .hero-actions{justify-content:center;margin-top:26px}
.mkit-hero .hero-actions .btn svg{margin-left:6px}
.mkit-section .section-head{max-width:760px;margin-bottom:clamp(24px,3vw,36px)}
.mkit-section .section-head h2{font-size:clamp(28px,3vw,38px);letter-spacing:-.025em}
.mkit-section .section-head p{font-size:15.5px;margin-top:8px}
.mkit-section + .mkit-section{padding-top:0}

/* Logos */
.mkit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.mkit-logo{padding:20px 22px 22px}
.mkit-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.mkit-tile{display:flex;align-items:center;justify-content:center;height:150px;border-radius:12px;border:1px solid var(--border)}
.mkit-tile.dark{background:#05080F}
.mkit-tile.light{background:#FFFFFF;border-color:rgba(255,255,255,.55)}
.mkit-tile img{width:68%;height:44%;object-fit:contain;display:block}
.mkit-logo.is-mark .mkit-tile img{width:auto;height:54%}
.mkit-logo h3{font-size:18px;letter-spacing:-.01em;margin:0 0 6px}
.mkit-logo p{font-size:14px;line-height:1.55;color:var(--muted);margin:0 0 14px}
.mkit-files{display:flex;flex-wrap:wrap;gap:8px}
.mkit-files a{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:#fff;background:rgba(79,134,255,.12);border:1px solid rgba(79,134,255,.28);transition:background .15s,border-color .15s}
.mkit-files a:hover{background:rgba(79,134,255,.22);border-color:rgba(79,134,255,.5)}
.mkit-files a svg{color:var(--blue-3)}

/* Colours */
.mkit-group{margin-top:26px}
.mkit-group-label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);font-weight:700;margin-bottom:12px}
.mkit-swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.mkit-swatch{position:relative;display:block;width:100%;text-align:left;padding:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface);color:inherit;font:inherit;cursor:pointer;transition:border-color .2s,transform .2s var(--ease)}
.mkit-swatch:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.mkit-swatch:focus-visible{outline:2px solid var(--blue-3);outline-offset:2px}
.mkit-swatch > i{display:block;height:84px;border-bottom:1px solid rgba(255,255,255,.06)}
.mkit-swatch .mkit-meta{display:block;padding:12px 14px 13px}
.mkit-swatch b{display:block;font-size:14px;font-weight:600}
.mkit-swatch code{display:block;font-family:var(--mono);font-size:12.5px;color:var(--blue-3);margin-top:3px;word-break:break-all}
.mkit-swatch em{display:block;font-style:normal;font-family:var(--mono);font-size:11px;color:var(--muted-2);margin-top:2px}
.mkit-swatch small{display:block;font-size:12px;line-height:1.45;color:var(--muted);margin-top:6px}
.mkit-swatch::after{content:"Copied";position:absolute;top:10px;right:10px;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:700;color:#05080F;background:#5EE39A;opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s;pointer-events:none}
.mkit-swatch.is-copied::after{opacity:1;transform:none}
.mkit-gradients{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mkit-gradient > i{height:96px}
.mkit-gradient code{font-size:11.5px;color:var(--muted)}

/* Typography */
.mkit-fonts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:28px}
.mkit-font{padding:26px 26px 24px}
.mkit-font .mkit-sample{font-size:clamp(26px,2.6vw,36px);font-weight:800;letter-spacing:-.03em;line-height:1.08;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--border);text-wrap:balance}
.mkit-font.is-mono .mkit-sample{font-family:var(--mono);font-weight:600;font-size:clamp(18px,1.8vw,24px);letter-spacing:0}
.mkit-font h3{font-size:20px;margin:0 0 4px}
.mkit-font-role{font-size:14px;color:var(--blue-3);font-weight:600;margin-bottom:12px}
.mkit-font-meta{display:flex;gap:10px;align-items:baseline;font-size:13.5px;margin-bottom:10px}
.mkit-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:700}
.mkit-font p{font-size:14px;line-height:1.55;color:var(--muted);margin:0 0 14px}
.mkit-scale{border-top:1px solid var(--border)}
.mkit-scale-row{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;align-items:center;padding:18px 0;border-bottom:1px solid var(--border)}
.mkit-scale-spec b{display:block;font-size:14px;font-weight:600}
.mkit-scale-spec span{display:block;font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.5}
.mkit-demo{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkit-demo-display{font-size:clamp(34px,4vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1.02}
.mkit-demo-heading{font-size:clamp(26px,2.6vw,34px);font-weight:800;letter-spacing:-.025em}
.mkit-demo-subheading{font-size:19px;font-weight:700}
.mkit-demo-body{font-size:16px;color:var(--muted);white-space:normal}
.mkit-demo-eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-3);font-weight:700}
.mkit-demo-mono{font-family:var(--mono);font-size:22px;font-weight:600}

/* Usage */
.mkit-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.mkit-rules .card{padding:24px 26px}
.mkit-rules h3{font-size:18px;margin:0 0 8px}
.mkit-rule-list li{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--border);font-size:14.5px;line-height:1.5;color:#D9E0EF}
.mkit-rule-list li svg{flex:none;width:18px;height:18px;margin-top:2px}
.mkit-do svg{color:#5EE39A}
.mkit-dont svg{color:#FF7A7A}
.mkit-names{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.mkit-name{padding:14px 16px;border-radius:14px;border:1px solid var(--border);background:var(--surface)}
.mkit-name b{display:block;font-size:17px;letter-spacing:-.01em}
.mkit-name span{display:block;font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:4px}

@media (max-width:1100px){.mkit-swatches{grid-template-columns:repeat(3,minmax(0,1fr))}.mkit-names{grid-template-columns:repeat(3,minmax(0,1fr))}.mkit-gradients{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.mkit-grid,.mkit-fonts,.mkit-rules{grid-template-columns:1fr}.mkit-scale-row{grid-template-columns:1fr;gap:10px}}
@media (max-width:640px){.mkit-swatches{grid-template-columns:repeat(2,minmax(0,1fr))}.mkit-names,.mkit-gradients{grid-template-columns:1fr}.mkit-tile{height:120px}.mkit-logo{padding:16px}}
/* ===== Contact page (contact.php): channels, office, notes, official links (2026-09-25) ===== */
.contact-hero .hero-actions{justify-content:center;margin-top:26px}
.contact-section .section-head{max-width:760px;margin-bottom:clamp(24px,3vw,36px)}
.contact-section .section-head h2{font-size:clamp(28px,3vw,38px);letter-spacing:-.025em}
.contact-section .section-head p{font-size:15.5px;margin-top:8px}
.contact-section + .contact-section{padding-top:0}

/* Channels: subgrid so the icon, title, text, email and link rows are shared across the four cards and the
   pills line up (owner: "needs to be outlined more properly", 2026-09-25) */
.contact-channels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.contact-channel{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:10px;align-items:start;padding:24px 22px 22px}
.contact-channel h3{font-size:18px;letter-spacing:-.01em;margin:4px 0 0}
.contact-channel p{font-size:14px;line-height:1.55;color:var(--muted);margin:0}
.contact-email{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13.5px;font-weight:600;color:#fff;padding:10px 12px;border-radius:10px;background:rgba(79,134,255,.12);border:1px solid rgba(79,134,255,.28);transition:background .15s,border-color .15s;overflow-wrap:anywhere}
.contact-email:hover{background:rgba(79,134,255,.22);border-color:rgba(79,134,255,.5)}
.contact-email svg{flex:none;width:15px;height:15px;color:var(--blue-3)}
.contact-channel .link-arrow{font-size:13.5px;margin-top:2px}

/* Office + notes */
.contact-info{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.contact-info .card{padding:24px 26px}
.contact-info h3{font-size:18px;margin:0 0 12px}
.contact-company{font-weight:700;font-size:15.5px;margin-bottom:4px}
.contact-address{font-size:15px;line-height:1.6;color:var(--muted);margin:0}
.contact-office-note{font-size:13.5px;color:var(--muted-2);margin:12px 0 0}
.contact-info .btn{margin-top:16px}
.contact-notes li{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--border);font-size:14px;line-height:1.5;color:#D9E0EF}
.contact-notes li:first-child{border-top:0;padding-top:0}
.contact-notes li svg{flex:none;width:17px;height:17px;margin-top:3px;color:var(--blue-3)}

/* Official links: clear outline, centred bright icons, own brand marks where we have them
   (owner: "not properly outlined, icons not properly centered, some icons are wrong, not clear enough in color", 2026-09-25) */
.contact-group{margin-top:26px}
.contact-group-label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:12px}
.contact-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.contact-link{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;border:1px solid rgba(143,180,255,.22);background:linear-gradient(180deg,#0B1428 0%,#080F20 100%);color:inherit;min-width:0;box-shadow:0 1px 0 rgba(255,255,255,.06) inset;transition:border-color .2s,transform .2s var(--ease),background .2s}
.contact-link:hover{border-color:rgba(143,180,255,.5);transform:translateY(-2px);background:linear-gradient(180deg,#0E1A34 0%,#0A1328 100%)}
.contact-link .icon-box{width:42px;height:42px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(79,134,255,.32),rgba(79,134,255,.14));border:1px solid rgba(143,180,255,.45);color:#fff;box-shadow:none}
.contact-link .icon-box svg{width:20px;height:20px;display:block}
.contact-link .icon-box.has-img{background:#070D1C;border-color:rgba(143,180,255,.45)} /* dark tile: the company marks are blue or white on transparent */
.contact-link .icon-box img{width:30px;height:30px;object-fit:contain;display:block}
.contact-link b{display:block;font-size:15px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact-link span{display:block;font-family:var(--mono);font-size:11.5px;color:#AEB8CF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.contact-link > div{min-width:0}
.contact-link .ext{margin-left:auto;flex:none;width:15px;height:15px;color:var(--blue-3)}

@media (max-width:1100px){.contact-channels{grid-template-columns:repeat(2,minmax(0,1fr))}.contact-links{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.contact-channels,.contact-info{grid-template-columns:1fr}.contact-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.contact-channels,.contact-links{grid-template-columns:1fr}}
/* ===== About Creo Engine page (about.php): facts, mission and vision, principles, team, journey (2026-09-28) ===== */
.about-hero .hero-actions{justify-content:center;margin-top:26px}
/* gap:0 and 202px cells (170 + the 32px gap the general facts rule added): hairlines exactly between the facts, 2026-10-02 */
.about-hero .about-facts{display:grid;grid-template-columns:repeat(4,minmax(0,202px));justify-content:center;gap:0;margin:28px auto 0}
.about-hero .about-facts .fact{flex-direction:column;align-items:center;gap:0;padding:2px 8px;margin:0;border:0;border-left:1px solid rgba(255,255,255,.14);text-align:center}
.about-hero .about-facts .fact:first-child{border-left:0}
.about-hero .about-facts .fact strong{font-family:var(--mono);font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1;color:#fff;white-space:nowrap}
.about-hero .about-facts .fact > div > span{display:block;margin-top:4px;font-size:12px;color:var(--muted);white-space:normal}
.about-section .section-head{max-width:760px;margin-bottom:clamp(24px,3vw,36px)}
.about-section .section-head h2{font-size:clamp(28px,3vw,38px);letter-spacing:-.025em}
.about-section .section-head p{font-size:15.5px;margin-top:8px}

/* Mission and vision */
.about-mv{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.about-mv .card{padding:30px 30px 28px;background:linear-gradient(180deg,#071127 0%,#050C1D 100%);border-color:rgba(143,180,255,.2)}
.about-mv .card::before{opacity:.9}
.about-mv .mv-label{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-3);font-weight:700;margin-bottom:14px}
.about-mv .mv-label::before{content:"";width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--blue-3))}
.about-mv h3{font-size:clamp(22px,2vw,26px);letter-spacing:-.02em;margin:0 0 10px}
.about-mv p{font-size:16px;line-height:1.65;color:#D9E0EF;margin:0}
.about-goals{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,4vw,56px);align-items:start;margin-top:clamp(32px,4vw,48px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--border)}
.about-goals h3{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.025em;margin:0 0 12px}
.about-goals > div > p{font-size:15.5px;line-height:1.65;color:var(--muted);margin:0}
.about-goal-list{display:grid;gap:12px}
.about-goal{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;padding:16px 18px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.025)}
.about-goal .num{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--blue-3);background:#0A1326;border:1px solid rgba(63,146,255,.45);box-shadow:0 0 18px rgba(30,123,255,.25)}
.about-goal b{display:block;font-size:16px;margin-bottom:4px}
.about-goal span{display:block;font-size:14px;line-height:1.55;color:var(--muted)}

/* Principles */
.about-principles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.about-principle{display:flex;flex-direction:column;gap:12px;padding:24px 22px}
.about-principle h3{font-size:17px;letter-spacing:-.01em;margin:4px 0 0}
.about-principle p{font-size:14px;line-height:1.6;color:var(--muted);margin:0}

/* Team */
.about-team-photo{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);margin-bottom:20px;aspect-ratio:21/9;background:#0A101E}
.about-team-photo img{width:100%;height:100%;object-fit:cover;display:block}
.about-team-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 22px 16px;font-size:13px;color:#DCE4F5;background:linear-gradient(180deg,transparent,rgba(5,8,15,.85))}
.about-team{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.about-member{display:grid;grid-template-columns:96px 1fr;gap:22px;align-items:start;padding:26px}
.about-avatar{width:96px;height:96px;border-radius:24px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(180deg,rgba(79,134,255,.32),rgba(79,134,255,.12));border:1px solid rgba(143,180,255,.45);font-size:30px;font-weight:800;letter-spacing:-.03em;color:#fff}
.about-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.about-member h3{font-size:20px;letter-spacing:-.015em;margin:2px 0 2px}
.about-member .role{font-size:13.5px;font-weight:600;color:var(--blue-3);margin-bottom:10px}
.about-member p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0}
.about-member .socials{display:flex;gap:8px;margin-top:14px}
.about-member .socials a{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--border);color:var(--muted);transition:color .15s,border-color .15s}
.about-member .socials a:hover{color:#fff;border-color:var(--border-strong)}
.about-member .socials svg{width:15px;height:15px}

/* Journey v3: lifted band, year markers, and every row of milestones on a glowing rail with a node and a mono date
   badge per card, the same device as the How-it-works rail on the product page (owner: "design can be a bit
   stronger", 2026-09-28) */
.about-journey-band{--jb:#040C1C;background:linear-gradient(180deg,#040D1F 0%,#030A18 100%);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:clamp(56px,7vw,88px) 0}
.about-section + .about-journey-band{padding-top:clamp(56px,7vw,88px)}
.about-journey-band .section-head{margin-bottom:8px}
.about-year{display:flex;align-items:baseline;gap:14px;margin:34px 0 22px}
.about-year:first-child{margin-top:18px}
.about-year .year{font-family:var(--mono);font-size:clamp(30px,3vw,40px);font-weight:700;letter-spacing:.04em;line-height:1;background:linear-gradient(90deg,#fff 0%,#C9DAFF 55%,var(--blue-3) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.about-year .count{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);font-weight:700}
.about-year::after{content:"";flex:1;height:1px;margin-left:6px;align-self:center;background:linear-gradient(90deg,rgba(143,180,255,.35),rgba(143,180,255,0))}
.about-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 18px}
.about-step{position:relative;display:flex;flex-direction:column;min-width:0}
.about-step::before{content:"";position:absolute;left:-18px;right:-18px;top:11px;height:2px;background:linear-gradient(90deg,rgba(30,123,255,.55),rgba(63,146,255,.85),rgba(30,123,255,.55));box-shadow:0 0 16px rgba(30,123,255,.35);pointer-events:none}
.about-track .about-step:nth-child(3n+1)::before{left:0}
.about-track .about-step:nth-child(3n)::before,.about-track .about-step:last-child::before{right:0}
.about-step .rail{position:relative;display:flex;align-items:center;gap:10px;height:24px;margin-bottom:14px}
.about-step .node{flex:none;width:12px;height:12px;border-radius:50%;background:var(--blue-3);box-shadow:0 0 0 4px var(--jb),0 0 18px rgba(63,146,255,.9)}
.about-step .when{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--blue-3);padding:4px 10px;border-radius:999px;background:#0A1326;border:1px solid rgba(63,146,255,.45);box-shadow:0 0 0 4px var(--jb);white-space:nowrap}
.about-step .tag{margin-left:auto;display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;color:var(--muted);background:#0A1326;border:1px solid var(--border);box-shadow:0 0 0 4px var(--jb);white-space:nowrap}
.about-step .tag-milestone,.about-step .tag-listing{color:#5EE39A;border-color:rgba(34,197,94,.4)}
.about-step .tag-partnership,.about-step .tag-product{color:var(--blue-3);border-color:rgba(79,134,255,.4)}
.about-step .tag-government{color:#FFD56A;border-color:rgba(255,197,61,.4)}
.about-step .tag-company{color:#B7A6FF;border-color:rgba(124,92,255,.42)}
.about-step .body{flex:1;display:flex;flex-direction:column;gap:8px;padding:18px 20px 18px;border-radius:16px;border:1px solid rgba(143,180,255,.16);background:linear-gradient(180deg,#071127 0%,#050C1D 100%);transition:border-color .2s,transform .2s var(--ease),box-shadow .2s}
.about-step:hover .body{border-color:rgba(143,180,255,.38);transform:translateY(-3px);box-shadow:0 20px 50px -30px rgba(0,0,0,.9),0 0 40px -20px rgba(30,123,255,.5)}
.about-step b{display:block;font-size:17px;line-height:1.3;letter-spacing:-.015em}
.about-step .desc{display:block;font-size:13.5px;line-height:1.55;color:var(--muted)}
.about-step .more{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:8px;font-size:13px;font-weight:600;color:var(--blue-3)}
.about-step .more:hover{color:#fff}
@media (max-width:1000px){.about-track{grid-template-columns:repeat(2,minmax(0,1fr))}.about-track .about-step:nth-child(3n+1)::before,.about-track .about-step:nth-child(3n)::before{left:-18px;right:-18px}.about-track .about-step:nth-child(2n+1)::before{left:0}.about-track .about-step:nth-child(2n)::before,.about-track .about-step:last-child::before{right:0}}
@media (max-width:600px){.about-track{grid-template-columns:1fr;gap:22px}.about-step::before{left:0!important;right:0!important}}
@media (max-width:1100px){.about-principles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.about-mv,.about-goals,.about-team{grid-template-columns:1fr}.about-hero .about-facts{grid-template-columns:repeat(4,minmax(0,1fr));width:100%}}
@media (max-width:640px){.about-principles{grid-template-columns:1fr}.about-member{grid-template-columns:72px 1fr;gap:16px;padding:20px}.about-avatar{width:72px;height:72px;border-radius:18px;font-size:24px}.about-step{grid-template-columns:1fr;gap:4px}.about-hero .about-facts{grid-template-columns:1fr 1fr;row-gap:14px}.about-hero .about-facts .fact:nth-child(3){border-left:0}.about-team-photo{aspect-ratio:16/10}}
.about-section + .about-section{padding-top:clamp(8px,2vw,24px)} /* sections follow each other closely, like the media kit */
/* Objectives: the left column stretches to the height of the cards and ends with a statement and a button (owner 2026-09-28) */
.about-goals{align-items:stretch}
.about-goals > div:first-child{display:flex;flex-direction:column}
.about-goals-foot{margin-top:auto;padding-top:22px}
.about-goals-foot blockquote{position:relative;margin:22px 0 0;padding:2px 0 0 18px;border-left:2px solid var(--blue-3);font-size:17px;line-height:1.55;font-weight:500;color:#E6ECF7}
.about-goals-foot .btn{margin-top:18px}
@media (max-width:900px){.about-goals-foot{margin-top:8px}}
/* Team: founders photo beside two equal-height cards (owner: only the two on the left are the co-founders; bios equal in length, 2026-09-28) */
.about-team-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;align-items:stretch}
.about-team-wrap .about-team-photo{margin:0;aspect-ratio:auto;height:100%;min-height:380px}
.about-team-wrap .about-team-photo img{object-position:50% 18%}
.about-team-wrap .about-team{grid-template-columns:1fr;grid-auto-rows:1fr}
@media (max-width:900px){.about-team-wrap{grid-template-columns:1fr}.about-team-wrap .about-team-photo{aspect-ratio:4/3;height:auto;min-height:0}}
/* The photo adopts the cards' height instead of dictating it: absolutely positioned image inside the figure */
.about-team-wrap .about-team-photo{position:relative;min-height:360px}
.about-team-wrap .about-team-photo img{position:absolute;inset:0;width:100%;height:100%}
@media (max-width:900px){.about-team-wrap .about-team-photo{min-height:0}.about-team-wrap .about-team-photo img{position:static;height:auto;aspect-ratio:4/3}}
/* Team v3: taller photo, cards fill the column, fact chips at the bottom of each card (owner 2026-09-28) */
.about-team-wrap .about-team-photo{min-height:600px}
.about-member{grid-template-columns:112px 1fr;gap:24px;padding:28px 30px;align-items:stretch}
.about-avatar{width:112px;height:112px;border-radius:26px;font-size:34px}
.about-member > div{display:flex;flex-direction:column;min-width:0}
.about-member h3{font-size:22px}
.about-member .role{font-size:14px}
.about-member p{font-size:15px;line-height:1.65}
.about-member .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:18px}
.about-member .tags .chip{font-size:12px;padding:5px 11px}
@media (max-width:900px){.about-team-wrap .about-team-photo{min-height:0}}
@media (max-width:640px){.about-member{grid-template-columns:72px 1fr;gap:16px;padding:20px}.about-avatar{width:72px;height:72px;border-radius:18px;font-size:24px}}
/* 2026-10-02: the journey band keeps its own top padding (the closer-sections rule further up had taken it back to
   8-24px, so the heading sat tight under the band's top edge), and the closing CTA card gets air above it instead
   of sitting flush against the band's bottom border */
.about-section + .about-section.about-journey-band{padding-top:clamp(56px,7vw,88px)}
.about-journey-band + .cta{padding-top:clamp(56px,7vw,88px)}
/* ===== Mobile fixes (2026-10-01): the hamburger sat off-screen because the page overflowed sideways on phones =====
   Root cause: the generator mock's decorative orb (520px) and ring (560px) in the homepage Creoplay AI chapter stuck out
   past the screen; Android Chrome then widens the fixed header to the overflow width and the toggle ends up outside the
   visible area. The chapter cannot clip (its tab sits on the top edge), so the decorations scale with the screen instead,
   and html{overflow-x:clip} in 01-base.css is the safety net for anything else. */
@media (max-width:960px){
  .ai-visual .hero-orb{width:min(520px,80vw);height:min(520px,80vw)}
  .ai-visual .hero-ring{width:min(560px,86vw);height:min(560px,86vw)}

  /* Header bar: tighter, toggle always inside the gutter */
  .site-header{padding:14px 0}
  .site-header.scrolled{padding:10px 0}
  .nav-wrap{gap:12px}
  .nav-toggle{flex:none;margin-left:auto}

  /* Mobile menu: full-width rows, dropdown groups open inline under their row, panel scrolls when tall */
  .nav-links{padding:84px 20px 28px;gap:4px;max-height:100dvh;overflow-y:auto;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
  .nav-links .nav-item{position:static}
  .nav-links .nav-item > .nav-link{width:100%;justify-content:space-between;font-size:17px;padding:13px 12px;color:#fff}
  .nav-links .nav-item > .nav-link .chev{opacity:.9}
  .nav-links .nav-menu{position:static;display:none;min-width:0;margin:2px 0 6px;padding:2px 0 2px 12px;background:none;border:0;border-left:1px solid rgba(143,180,255,.25);border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;opacity:1;visibility:visible;transform:none;transition:none}
  .nav-links .nav-item.open > .nav-menu{display:block}
  .nav-links .nav-menu a{padding:9px 12px}
  .nav-links .nav-menu strong{font-size:15px}
  .nav-links .nav-menu small{font-size:12.5px}
  .nav-mobile-actions{margin-top:14px;padding-top:16px;border-top:1px solid var(--border)}
}
@media (max-width:600px){
  .hero{padding-top:104px}
}
@media (max-width:960px){
  /* Open menu: full-height opaque panel, logo and toggle stay on top of it */
  .nav-links{inset:0;height:100dvh;background:rgba(5,8,15,.985);border-bottom:0}
  .brand{position:relative;z-index:101}
}
@media (max-width:960px){
  /* The spinning ring is a rotating square box: its bounding box is up to 1.41x its circle, so the column clips it
     (clip, not hidden: no scroll container; the 8px margin keeps the floating card's -4px offset visible) */
  .ai-visual{overflow:clip;overflow-clip-margin:8px}
}
@media (max-width:960px){
  /* Floating "export ready" card sits above the generator window instead of over its title bar */
  .ai-visual{padding-top:70px}
  .ai-visual .float-card.fc-1{top:4px}
}
@media (max-width:960px){
  /* Floating cards on phones (owner 2026-10-01: the "Paid with $CREO" card sat on top of the window's buttons):
     the top card keeps floating above the window, the bottom card becomes a normal row under it, right-aligned */
  .hero-visual{padding:70px 0 24px}
  .hero-visual .float-card.fc-1{top:4px}
  .hero-visual .float-card.fc-2{position:static;width:max-content;max-width:100%;margin:16px 0 0 auto;animation:none;bottom:auto;right:auto}
}
@media (max-width:960px){
  /* Hero column must not grow past the screen: 1fr tracks never shrink below the content's min width, and the
     generator mock's cost row and the staking mock's four period tiles were wider than a phone screen */
  .hero .hero-inner{grid-template-columns:minmax(0,1fr)}
  .hero-visual,.gen-card{min-width:0}
  .gen-cost{flex-wrap:wrap;gap:8px 12px}
  .gen-cost strong{font-size:18px}
  .gen-foot{flex-wrap:wrap}
  .mock-periods{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .mock-periods span{padding:8px 2px;font-size:11px}
  .mock-periods span small{font-size:10px}
}
@media (max-width:600px){
  /* Section rhythm on phones: less air between sections (owner: "spacing between this can be reduced a bit") */
  .section{padding:56px 0}
  .cpai{padding-bottom:32px}
  .cpai-strip{margin-top:28px}
}
@media (max-width:960px){
  /* Owner 2026-10-01: the row under the window spans the window's full width, with less space below it */
  .hero-visual{padding-bottom:0}
  .hero-visual .float-card.fc-2{width:100%;max-width:none;margin:12px 0 0;box-sizing:border-box}
  .cpai-features{margin-top:32px}
}
@media (max-width:960px){
  /* Generator window with its two cards as three stacked full-width rows: export card, window, paid card
     (owner 2026-10-01: "outlining of things and having all text within the screen is important") */
  .hero-visual{display:flex;flex-direction:column;padding-top:0}
  .hero-visual > .gen-card{width:100%}
  .hero-visual .float-card.fc-1{position:static;order:-1;width:100%;margin:0 0 12px;box-sizing:border-box;animation:none;top:auto;left:auto}
}
@media (max-width:600px){
  /* Hero facts: two shrinkable columns, text may wrap, nothing runs off the screen */
  .hero-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin-top:28px}
  .hero-facts .fact{border-right:0;margin:0;padding:0;min-width:0;align-items:flex-start}
  .hero-facts .fact > div{min-width:0}
  .hero-facts .fact strong{font-size:18px;white-space:normal}
  .hero-facts .fact > div > span{white-space:normal;line-height:1.35;display:block;margin-top:3px}
}
@media (max-width:600px){
  /* Hero facts: sized so each value and label stays on one line in a half-width column */
  .hero-facts .fact > svg{width:16px;height:16px}
  .hero-facts .fact strong{font-size:16px}
  .hero-facts .fact > div > span{font-size:11.5px}
  /* Generator window title bar: title on one line, model chip never wraps */
  .gen-head{gap:8px}
  .gen-head .title{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .gen-head .chip{flex:none;white-space:nowrap;font-size:11px;padding:4px 9px}
  .chip{white-space:nowrap}
  /* Cost row: the two value blocks stack as a column, both left-aligned */
  .gen-cost{flex-direction:column;align-items:stretch;gap:10px}
  .gen-cost > div{text-align:left!important}
  /* How it works: steps as compact blocks with even spacing, chips directly under the text */
  #how-it-works .steps{gap:26px}
  #how-it-works .step{gap:0}
  #how-it-works .step-num{margin-bottom:12px}
  #how-it-works .step p{min-height:0}
  #how-it-works .step .chip{position:static;margin-top:10px;padding-top:5px}
}
@media (max-width:600px){
  /* Head counters on phones (partnerships, about): a 2x2 block of equal cells, number above label, every label on
     one line, hairlines between the cells (owner 2026-10-02: "dit kan netter op de mobiele partners page").
     Content is top-aligned, so the numbers of one row share a line even if an edited label ever needs two lines.
     The general .hero-facts phone rule above added a column gap that pushed the separators off-centre. */
  .partners-hero .hero-facts.partners-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:0;width:100%;max-width:420px;margin:24px auto 0;border:1px solid rgba(255,255,255,.12);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.025)}
  .partners-hero .hero-facts.partners-facts .fact{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;padding:14px 8px;margin:0;border:0;text-align:center;min-width:0;transform:none}
  .partners-hero .hero-facts.partners-facts a.fact:active{background:rgba(255,255,255,.05)}
  .partners-hero .hero-facts.partners-facts .fact:nth-child(even){border-left:1px solid rgba(255,255,255,.12)}
  .partners-hero .hero-facts.partners-facts .fact:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}
  .partners-hero .hero-facts.partners-facts .fact strong{font-size:22px;line-height:1;white-space:nowrap}
  .partners-hero .hero-facts.partners-facts .fact > div > span{display:block;margin-top:5px;font-size:12px;line-height:1.25;white-space:normal;text-wrap:balance}
  /* Partnerships: the pill row under the head repeats the four counters one thumb-length lower. On phones the
     counter cells are the jump links, so the row is dropped and the first group starts right after the horizon. */
  .partner-groups .pgroup-nav{display:none}
  .partner-groups{padding-top:40px}
  .partner-groups .pgroup-nav + .pgroup{padding-top:0}
}
@media (max-width:600px){
  /* About, founder cards: portrait with name and role on one row, then the bio and the fact chips over the full
     card width (next to the portrait the text column was under 200px wide and the bio ran to nine lines) */
  .about-member{grid-template-columns:64px minmax(0,1fr);column-gap:14px;row-gap:0;align-items:center;align-content:start;padding:20px}
  .about-member > div:not(.about-avatar){display:contents} /* the text wrapper dissolves, its children join the card's grid */
  .about-member .about-avatar{grid-column:1;grid-row:1 / span 2;width:64px;height:64px;border-radius:16px;font-size:22px}
  /* stacked cards need no equal heights (the shorter bio left a hole above its chips) */
  .about-team-wrap .about-team{grid-auto-rows:auto}
  .about-member h3{grid-column:2;grid-row:1;align-self:end;margin:0 0 2px;font-size:20px}
  .about-member .role{grid-column:2;grid-row:2;align-self:start;margin:0}
  .about-member p{grid-column:1 / -1;margin-top:14px}
  .about-member .socials,.about-member .tags{grid-column:1 / -1}
  .about-member .tags{margin-top:0;padding-top:14px}
}
/* ===== Webmerken credit (2026-10-10): "Made by Webmerken" at the bottom right of the footer and its dialog =====
   The credit sits at the right end of the footer's bottom row, after the legal links (owner: "position should be
   bottom right"). The dialog is a centred card in the site's own dark style (same tokens, chips and buttons as the
   rest of the site, panel like the tech modal). Markup: includes/webmerken.php; logic: "Webmerken credit" in main.js. */
.footer-legal{margin-left:auto}
.footer-credit{display:inline-flex;align-items:center;gap:10px;background:none;border:0;border-left:1px solid var(--border);padding:4px 0 4px 20px;margin:0 0 0 4px;cursor:pointer;font:inherit;color:var(--muted-2);transition:transform .2s var(--ease),color .2s}
.footer-credit:hover{transform:translateY(-1px);color:#fff}
.footer-credit-mark{flex:none;width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff;display:grid;place-items:center;font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-weight:900;font-size:15px;line-height:1;box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 6px 14px -4px rgba(30,123,255,.8);transition:transform .25s var(--ease),box-shadow .2s}
.footer-credit:hover .footer-credit-mark{transform:rotate(-6deg) scale(1.06);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 8px 18px -4px rgba(30,123,255,.9)}
.footer-credit-text{font-size:13px;white-space:nowrap}
.footer-credit-text b{color:#fff;font-weight:700}

/* Dialog: centred card */
.wmk{margin:auto;border:0;padding:0;background:transparent;width:min(520px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);overflow:visible;color:var(--text)}
.wmk::backdrop{background:rgba(5,8,15,.66);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.wmk[open]{animation:wmkIn .36s cubic-bezier(.22,.61,.36,1) both}
.wmk.is-closing{animation:wmkOut .22s ease-in both}
@keyframes wmkIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes wmkOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(12px) scale(.98)}}
.wmk-frame{border-radius:22px;padding:1px;background:linear-gradient(180deg,rgba(143,194,255,.3),rgba(143,194,255,.08) 60%,rgba(255,255,255,.06))}
.wmk-panel{position:relative;border-radius:21px;padding:28px 28px 26px;max-height:calc(100dvh - 34px);overflow-y:auto;
  background:radial-gradient(520px 240px at 0% 0%,rgba(30,123,255,.16),transparent 60%),linear-gradient(180deg,#0B1222 0%,#080D1A 100%);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.06)}
.wmk-close{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;cursor:pointer;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);transition:background .2s,transform .25s var(--ease)}
.wmk-close:hover{background:rgba(255,255,255,.1);transform:rotate(90deg)}
.wmk-close svg{width:17px;height:17px}
.wmk-panel .eyebrow{margin:0}
.wmk-logo{font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-weight:900;font-size:32px;color:#fff;letter-spacing:-.02em;line-height:1;margin:10px 0 14px}
.wmk-panel p{color:var(--muted);line-height:1.6;margin:0 0 16px;font-size:14.5px}
.wmk-panel p b{color:#fff;font-weight:600}
.wmk-panel p b.o{color:var(--blue-3)}
.wmk-label{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-3);margin:0 0 8px}
.wmk-tags{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px}
.wmk-divider{height:1px;background:var(--border);margin:4px 0 18px}
.wmk-cta{display:flex;gap:10px;flex-wrap:wrap}
.wmk-cta .btn{flex:1 1 auto;justify-content:center}
.wmk-cta .btn svg{width:15px;height:15px}
html.wmk-open{overflow:hidden}
@media (max-width:600px){
  .footer-bottom .footer-credit{order:3;width:100%;justify-content:flex-end;padding:6px 0 0;margin:0;border-left:0}
  .wmk{width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}
  .wmk-frame{border-radius:20px}
  .wmk-panel{border-radius:19px;padding:22px 18px 20px;max-height:calc(100dvh - 26px)}
  .wmk-logo{font-size:26px}
  .wmk-cta{flex-direction:column}
  .wmk-cta .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.wmk[open],.wmk.is-closing{animation:none}}
/* ===== Buy $CREO drawer (2026-10-13): exchange tiles per type and the contract addresses =====
   Markup: includes/buy-drawer.php; logic: "Buy $CREO drawer" block in main.js. A native dialog that slides in from
   the right; on phones it takes the full width. */
.buy{position:fixed;inset:0 0 0 auto;margin:0;height:100dvh;max-height:none;width:min(560px,100vw);max-width:none;border:0;padding:0;background:transparent;color:var(--text)}
.buy::backdrop{background:rgba(5,8,15,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.buy[open]{animation:buyIn .34s cubic-bezier(.22,.61,.36,1) both}
.buy.is-closing{animation:buyOut .22s ease-in both}
@keyframes buyIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes buyOut{from{opacity:1;transform:none}to{opacity:0;transform:translateX(30px)}}
.buy-panel{height:100%;display:flex;flex-direction:column;background:linear-gradient(180deg,#0B1222 0%,#070C18 100%);border-left:1px solid var(--border-strong);box-shadow:-40px 0 80px -30px rgba(0,0,0,.85)}
.buy-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:26px 28px 14px}
.buy-title{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.2}
.buy-intro{color:var(--muted);font-size:13.5px;line-height:1.5;margin:6px 0 0;max-width:42ch}
.buy-close{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;cursor:pointer;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);transition:background .2s,transform .25s var(--ease)}
.buy-close:hover{background:rgba(255,255,255,.1);transform:rotate(90deg)}
.buy-close svg{width:17px;height:17px}
.buy-tabs{display:inline-flex;align-self:flex-start;gap:4px;margin:0 28px 16px;padding:4px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--border)}
.buy-tab{display:inline-flex;align-items:center;gap:8px;border:0;background:none;color:var(--muted);font:inherit;font-weight:600;font-size:13px;padding:7px 16px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
.buy-tab:hover{color:#fff}
.buy-tab.on{background:rgba(79,134,255,.2);color:#fff}
.buy-count{font-family:var(--mono);font-size:11px;color:var(--blue-3)}
.buy-body{flex:1;min-height:0;overflow-y:auto;padding:0 28px 28px;scrollbar-width:thin}
.buy-group-title{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:700;margin:4px 0 12px}
.buy-empty{color:var(--muted);font-size:14px}
.buy-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.buy-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;height:86px;padding:10px 8px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.035);color:var(--muted-2);text-decoration:none;min-width:0;transition:border-color .2s,background .2s,transform .2s var(--ease)}
.buy-tile:hover{border-color:rgba(79,134,255,.5);background:rgba(79,134,255,.1);transform:translateY(-2px)}
.buy-tile img{max-width:84%;max-height:26px;width:auto;height:auto;object-fit:contain;display:block}
.buy-tile-sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.buy-contracts{margin-top:28px;padding-top:22px;border-top:1px solid var(--border)}
.buy-contracts h3{font-size:15px;font-weight:700;margin:0 0 4px;letter-spacing:-.01em}
.buy-hint{color:var(--muted);font-size:13px;margin:0 0 12px}
.buy-chains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.buy-chain{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:12px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.035);color:var(--text);font:inherit;text-align:left;cursor:pointer;min-width:0;transition:border-color .2s,background .2s,transform .2s var(--ease)}
.buy-chain:hover{border-color:rgba(79,134,255,.5);background:rgba(79,134,255,.1);transform:translateY(-2px)}
.buy-chain-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid var(--border)}
.buy-chain-mark svg{width:20px;height:20px}
.buy-chain-mark.bnb{color:#F0B90B}
.buy-chain-mark.eth{color:#A9B9FF}
.buy-chain-mark.sol{color:#14F195}
.buy-chain-name{display:flex;flex-direction:column;gap:2px;font-size:13px;font-weight:600;line-height:1.2}
.buy-chain-name small{font-size:10.5px;color:var(--muted-2);letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.buy-chain-addr{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.buy-chain-copied{position:absolute;top:10px;right:10px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5EE39A;opacity:0;transition:opacity .15s}
.buy-chain.is-copied{border-color:rgba(94,227,154,.6)}
.buy-chain.is-copied .buy-chain-copied{opacity:1}
.buy-explorers{display:flex;flex-wrap:wrap;gap:6px 14px;margin:12px 0 0;font-size:12.5px;color:var(--muted)}
.buy-explorers a{color:var(--blue-3)}
html.buy-open{overflow:hidden}
@media (max-width:600px){
  .buy{width:100vw}
  .buy-head{padding:20px 18px 12px}
  .buy-tabs{margin:0 18px 12px}
  .buy-body{padding:0 18px 24px}
  .buy-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .buy-tile{height:74px;padding:8px 6px}
  .buy-tile img{max-height:22px}
  .buy-chains{grid-template-columns:1fr}
  .buy-chain{flex-direction:row;align-items:center;gap:12px}
  .buy-chain-addr{flex:1}
}
@media (prefers-reduced-motion:reduce){.buy[open],.buy.is-closing{animation:none}}