/* FUN4FOUR Game Table — site styles (brand book v1, 2026-11-12) */
@font-face{font-family:"Exo 2";src:url(../fonts/exo-2-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Exo 2";src:url(../fonts/exo-2-latin-ext-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#0C0C0E; --surface:#131316; --card:#1A1A1E; --card2:#222227;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --text:#F5F3EF; --mist:#A9A59E; --dim:#8E8A83;
  --orange:#FFA500; --amber:#FFC81E; --ember:#FF6B00;
  --grad:linear-gradient(135deg,#FFD23F 0%,#FFA500 45%,#FF6B00 100%);
  --archive:#8C8B90;
  --aqua:#3DE8FF; --mag:#FF8AF0; --night:#0E0826;
  --spec:linear-gradient(90deg,#EF4444,#F97316,#FACC15,#22C55E,#0EA5E9,#8B5CF6,#EC4899);
  --r:18px; --max:1200px; --pad:clamp(16px,4vw,32px);
  --font:"Exo 2",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.6;font-weight:400;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--amber);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#fff}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{line-height:1.08;margin:0 0 .5em;font-weight:800;letter-spacing:-.02em}
h1{font-size:clamp(2.5rem,6.2vw,5.4rem)}
h2{font-size:clamp(1.9rem,4.2vw,3.3rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem);letter-spacing:-.01em}
p{margin:0 0 1em}
ul{padding-left:1.2em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--amber);color:#000;padding:8px 14px;border-radius:8px;z-index:200}
.skip:focus{left:8px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.spectext{background:var(--spec);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{display:inline-flex;align-items:center;gap:.6em;font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin-bottom:1rem}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--grad);border-radius:2px}
.eyebrow.fx{color:var(--aqua)}.eyebrow.fx::before{background:var(--spec)}
.lead{font-size:clamp(1.05rem,1.6vw,1.28rem);color:var(--mist);max-width:62ch}
.muted{color:var(--mist)}
.small{font-size:.86rem;color:var(--dim)}

/* Ribbon */
.ribbon{position:relative;background:#09090B;border-bottom:1px solid var(--line);font-size:.88rem;z-index:60}
.ribbon::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--spec);opacity:.85}
.ribbon .wrap{display:flex;align-items:center;justify-content:center;gap:.4em .9em;flex-wrap:wrap;padding-top:9px;padding-bottom:9px;text-align:center}
.ribbon a{color:var(--aqua);font-weight:700;text-decoration:none;white-space:nowrap}
.ribbon a:hover{color:#fff}

/* Header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(12,12,14,.78);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:20px;height:72px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:44px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{color:var(--text);text-decoration:none;font-weight:600;font-size:.95rem;padding:8px 12px;border-radius:999px;white-space:nowrap}
.nav a:hover,.nav a[aria-current=page]{background:rgba(255,255,255,.07);color:#fff}
.nav a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--orange)}
.navbtn{display:none;margin-left:auto;background:none;border:1px solid var(--line2);color:var(--text);border-radius:12px;width:46px;height:42px;cursor:pointer}
.navbtn span{display:block;width:20px;height:2px;background:currentColor;margin:4px auto;border-radius:2px;transition:.25s}
.hdr .btn{margin-left:8px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:48px;padding:0 24px;border-radius:999px;font-weight:700;font-size:1rem;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s;font-family:inherit;line-height:1.2}
.btn:hover{transform:translateY(-2px)}
.btn.p{background:var(--grad);color:#120A00;box-shadow:0 8px 30px -10px rgba(255,140,0,.7)}
.btn.p:hover{color:#000;box-shadow:0 12px 36px -8px rgba(255,140,0,.85)}
.btn.g{background:rgba(255,255,255,.04);border-color:var(--line2);color:var(--text)}
.btn.g:hover{background:rgba(255,255,255,.09);color:#fff}
.btn.fx{background:var(--aqua);color:#06121A;box-shadow:0 8px 30px -10px rgba(61,232,255,.7)}
.btn.fx:hover{color:#000;box-shadow:0 12px 40px -6px rgba(61,232,255,.9)}
.btn.sm{min-height:40px;padding:0 16px;font-size:.92rem}
.btn svg{width:1em;height:1em;flex:none}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:.5em;font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:999px;border:1px solid var(--line2);color:var(--archive);background:rgba(255,255,255,.03);white-space:nowrap}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.badge.off::before{background:transparent;border:1.5px solid currentColor}
.badge.on{color:var(--aqua);border-color:rgba(61,232,255,.4);background:rgba(61,232,255,.08)}
.badge.on::before{box-shadow:0 0 0 0 rgba(61,232,255,.7);animation:pulse 2s infinite}
.badge.or{color:var(--amber);border-color:rgba(255,200,30,.35);background:rgba(255,165,0,.07)}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(61,232,255,0)}100%{box-shadow:0 0 0 0 rgba(61,232,255,0)}}

/* Sections */
section{position:relative}
.sec{padding:clamp(64px,10vw,120px) 0}
.sec.tight{padding:clamp(48px,7vw,80px) 0}
.sec.alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.head{max-width:760px;margin-bottom:clamp(32px,5vw,56px)}
.head.c{margin-left:auto;margin-right:auto;text-align:center}
.head.c .lead{margin-left:auto;margin-right:auto}

/* Hero */
.hero{position:relative;overflow:hidden;padding:clamp(48px,8vw,96px) 0 clamp(40px,6vw,72px);isolation:isolate}
.hero::before{content:"";position:absolute;inset:-20% -10% auto;height:120%;background:radial-gradient(50% 45% at 22% 30%,rgba(255,165,0,.22),transparent 70%),radial-gradient(40% 40% at 85% 70%,rgba(61,232,255,.14),transparent 70%);z-index:-1}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;z-index:-1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero .lead{margin-bottom:1.6rem}
.hero .badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.6rem}
.hero h1{font-size:clamp(2.4rem,4.6vw,4.1rem)}
.hero-grid{display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(24px,4vw,56px);align-items:center}

/* Evolution stage */
.stage{position:relative;padding:18px 0 0}
.stage .row{display:grid;grid-template-columns:1.1fr 1.1fr 1.5fr;align-items:end;gap:0}
.stage figure.new{margin-left:-6%}
.stage figure{margin:0;position:relative;text-align:center}
.stage figure img{margin:0 auto;filter:drop-shadow(0 24px 30px rgba(0,0,0,.6))}
.stage .old img{filter:grayscale(.5) brightness(.95) drop-shadow(0 18px 24px rgba(0,0,0,.6))}
.stage .new img{filter:drop-shadow(0 0 40px rgba(61,232,255,.28)) drop-shadow(0 30px 34px rgba(0,0,0,.7))}
.stage .floor{position:absolute;left:-10%;right:-10%;top:10%;bottom:10%;background:radial-gradient(50% 40% at 55% 62%,rgba(255,255,255,.07),transparent 75%);z-index:-1;pointer-events:none}
.stage figcaption{margin-top:12px;font-size:.8rem;line-height:1.3;color:var(--mist)}
.stage figcaption b{display:block;color:var(--text);font-size:.92rem}
.stage .new figcaption b{color:var(--aqua)}
.evo-line{position:relative;height:4px;border-radius:4px;margin:18px 6% 0;background:linear-gradient(90deg,#3a3a3f 0%,#5d5d63 30%,var(--orange) 55%,#F97316 66%,#FACC15 74%,#22C55E 82%,#0EA5E9 88%,#8B5CF6 94%,#EC4899 100%)}
.evo-line i{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--bg);border:3px solid #6a6a70}
.evo-line i:nth-child(1){left:12%}.evo-line i:nth-child(2){left:44%;border-color:var(--orange)}.evo-line i:nth-child(3){left:82%;border-color:var(--aqua);box-shadow:0 0 16px var(--aqua)}
.stamp{z-index:2;position:absolute;top:8%;left:50%;transform:translateX(-50%) rotate(-12deg);font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#d9d6d0;border:1.5px solid rgba(217,214,208,.55);padding:3px 7px;border-radius:5px;background:rgba(12,12,14,.6);white-space:nowrap}

/* Cards / grids */
.grid{display:grid;gap:clamp(14px,2vw,22px)}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.6vw,30px);position:relative;overflow:hidden}
.card h3{margin-bottom:.4em}
.card p:last-child{margin-bottom:0}
.card .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(255,165,0,.1);border:1px solid rgba(255,165,0,.25);color:var(--amber);margin-bottom:16px}
.card .ico svg{width:22px;height:22px}
.card.link{text-decoration:none;color:inherit;transition:border-color .2s,transform .2s}
.card.link:hover{border-color:rgba(255,165,0,.45);transform:translateY(-3px)}
.card .more{display:inline-flex;align-items:center;gap:.4em;margin-top:12px;font-weight:700;color:var(--amber)}
.more svg,.cc h3 svg,.btn svg{width:1em;height:1em;flex:none}
.cc h3 svg{color:var(--amber)}

/* Generation cards */
.gens{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);align-items:stretch}
.gen{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;position:relative}
.gen .pic{position:relative;aspect-ratio:4/3;display:grid;place-items:center;padding:22px;background:radial-gradient(70% 60% at 50% 60%,#2b2b31,#16161a 75%)}
.gen .pic img{max-height:100%;width:auto;filter:drop-shadow(0 18px 22px rgba(0,0,0,.6))}
.gen.old .pic img{filter:grayscale(.55) brightness(.85) drop-shadow(0 18px 22px rgba(0,0,0,.6))}
.gen .body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.gen .num{font-size:.78rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.gen h3{margin:0}
.gen .badge{align-self:flex-start}
.big small.pre{margin:0 .3em 0 0;display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.gen ul{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:6px;color:var(--mist);font-size:.95rem}
.gen li{display:flex;gap:.6em}
.gen li::before{content:"";flex:none;width:6px;height:6px;margin-top:.62em;border-radius:50%;background:var(--dim)}
.gen .cta{margin-top:auto;padding-top:12px}
.gen.new{border-color:transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--spec) border-box;border:1.5px solid transparent;box-shadow:0 30px 80px -40px rgba(61,232,255,.55)}
.gen.new .pic{background:radial-gradient(70% 60% at 50% 60%,#1f1640,#0E0826 75%)}
.gen.new li::before{background:var(--aqua)}
.gen.new .num{color:var(--aqua)}
.gen .whatsnew{margin:6px 0 0;font-weight:800;color:var(--text);font-size:1.02rem}
.gen.new ul{color:#D8D5CF}
.gen .story{margin:6px 0 0;font-weight:700;color:var(--aqua)}
.big{font-size:clamp(2.6rem,5vw,3.8rem);font-weight:800;line-height:1;letter-spacing:-.03em}
.gen .big{margin:2px 0}
.gen .big small{font-size:.9rem;font-weight:600;letter-spacing:0;color:var(--mist);margin-left:.3em}

/* Comparison table */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:.98rem}
th,td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child th,tr:last-child td{border-bottom:0}
thead th{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);background:rgba(255,255,255,.02)}
thead th.fx{color:var(--aqua)}
tbody th{font-weight:600;color:var(--mist);width:28%}
td.fx{background:rgba(61,232,255,.05);color:#fff;font-weight:600}
.yes{color:var(--aqua)}.no{color:var(--dim)}
.spec-tbl table{min-width:0}
.spec-tbl tbody th{width:45%}

/* Media */
.media{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--card)}
.media img{width:100%;height:100%;object-fit:cover}
.ar .media img{aspect-ratio:4/3}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.split.rev>:first-child{order:2}
.ticks{list-style:none;padding:0;margin:0 0 1.4em;display:grid;gap:10px}
.ticks li{display:flex;gap:.7em;align-items:flex-start}
.ticks li::before{content:"";flex:none;width:20px;height:20px;margin-top:.18em;border-radius:6px;background:rgba(255,165,0,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC81E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/13px no-repeat;border:1px solid rgba(255,165,0,.3)}
.ticks.fx li::before{background-color:rgba(61,232,255,.12);border-color:rgba(61,232,255,.35);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233DE8FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E")}

/* Bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.6vw,18px)}
.bento>*{grid-column:span 2}
.bento .w3{grid-column:span 3}.bento .w4{grid-column:span 4}.bento .w6{grid-column:span 6}
.bento .tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
.bento .tile .k{font-size:clamp(2.1rem,4vw,3rem);font-weight:800;line-height:1;letter-spacing:-.03em;margin-bottom:.25em}
.bento .tile p{margin:0;color:var(--mist)}
.bento .tile.img{padding:0;min-height:260px}
.bento .tile.img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bento .tile.img.contain{background:#fff;min-height:300px}
.bento .tile.img.contain img{object-fit:contain;padding:14px}

/* Notice */
.notice{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;background:linear-gradient(90deg,rgba(255,165,0,.10),rgba(61,232,255,.06));border:1px solid rgba(255,165,0,.3);border-radius:var(--r);padding:20px 24px}
.notice .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(255,165,0,.14);color:var(--amber)}
.notice p{margin:0;color:var(--mist)}
.notice strong{color:var(--text)}

/* Gallery */
.gal{columns:3 280px;column-gap:14px}
.gal a{display:block;margin:0 0 14px;break-inside:avoid;border-radius:14px;overflow:hidden;border:1px solid var(--line);position:relative;background:var(--card)}
.gal a img{width:100%;transition:transform .5s}
.gal a:hover img{transform:scale(1.04)}
.strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.strip a{border-radius:12px;overflow:hidden;border:1px solid var(--line);aspect-ratio:1}
.strip img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.strip a:hover img{transform:scale(1.06)}
dialog.lb{border:0;padding:0;background:transparent;max-width:min(1100px,94vw);max-height:92vh;overflow:visible}
dialog.lb::backdrop{background:rgba(0,0,0,.88);backdrop-filter:blur(4px)}
dialog.lb img{max-height:82vh;width:auto;margin:auto;border-radius:12px}
dialog.lb p{color:var(--mist);text-align:center;margin:12px 0 0;font-size:.95rem}
dialog.lb button{position:absolute;background:rgba(20,20,22,.85);color:#fff;border:1px solid var(--line2);border-radius:50%;width:46px;height:46px;font-size:22px;cursor:pointer;display:grid;place-items:center}
.lb .x{top:-14px;right:-14px}.lb .pv{left:-14px;top:45%}.lb .nx{right:-14px;top:45%}

/* FunXPad band */
.fxband{position:relative;overflow:hidden;background:radial-gradient(60% 80% at 80% 30%,rgba(78,38,150,.55),transparent 70%),radial-gradient(50% 60% at 10% 90%,rgba(61,232,255,.16),transparent 70%),var(--night);border-top:1px solid rgba(185,178,214,.18);border-bottom:1px solid rgba(185,178,214,.18);isolation:isolate}
.fxband::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--spec)}
.fxband .split{grid-template-columns:1.25fr 1fr}
.fxband h2{font-size:clamp(2.1rem,4.8vw,3.8rem)}
.fxband .lead{color:#B9B2D6}
.fxband .pic{position:relative}
.fxband .pic img.table{filter:drop-shadow(0 0 60px rgba(61,232,255,.3)) drop-shadow(0 40px 40px rgba(0,0,0,.6));margin:0 auto;width:min(560px,100%)}
.fxband .photos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.fxband .photos img{border-radius:12px;aspect-ratio:4/3;object-fit:cover;border:1px solid rgba(185,178,214,.18)}

/* Contact */
.ccards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)}
.cc h3{display:flex;align-items:center;gap:.5em}
.cc dl{margin:0;display:grid;gap:8px}
.cc dt{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:700}
.cc dd{margin:0 0 6px;font-weight:600;overflow-wrap:anywhere}
.cc dd a{color:var(--text);text-decoration:none;border-bottom:1px solid rgba(255,200,30,.4)}
.cc dd a:hover{color:var(--amber)}
.langs{display:flex;flex-wrap:wrap;gap:8px}
.langs span{font-size:.82rem;font-weight:700;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
form.cf{display:grid;gap:16px}
.cf .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cf label{display:grid;gap:6px;font-weight:600;font-size:.95rem}
.cf input,.cf select,.cf textarea{font:inherit;color:var(--text);background:#0F0F12;border:1px solid var(--line2);border-radius:12px;padding:12px 14px;min-height:48px;width:100%}
.cf textarea{min-height:150px;resize:vertical}
.cf input:focus,.cf select:focus,.cf textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(255,165,0,.18)}
.cf .chk{display:flex;gap:12px;align-items:flex-start;font-weight:400;font-size:.92rem;color:var(--mist)}
.cf .chk input{width:24px;height:24px;min-height:0;flex:none;margin-top:2px;accent-color:var(--orange)}
.cf .hp{position:absolute;left:-9999px}
.req{color:var(--amber)}
.err{margin:0;padding:12px 14px;border-radius:12px;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.45);color:#FECACA}

/* Steps */
.steps{counter-reset:s;display:grid;gap:14px;grid-template-columns:repeat(4,1fr)}
.steps li{list-style:none;counter-increment:s;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font-weight:800;font-size:1.6rem;margin-bottom:8px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.steps{padding:0;margin:0}

/* Q&A */
.qa{display:grid;gap:10px;max-width:860px}
.qa details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0 20px}
.qa summary{cursor:pointer;font-weight:700;padding:18px 28px 18px 0;list-style:none;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:0;top:14px;font-size:1.4rem;color:var(--amber);transition:transform .2s}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa details>div{padding:0 0 18px;color:var(--mist)}

/* Prose (legal) */
.prose{max-width:780px}
.prose h2{font-size:1.5rem;margin-top:2em}
.prose h3{font-size:1.15rem;margin-top:1.6em}
.prose p,.prose li{color:#D8D5CF}
.todo{background:rgba(255,200,30,.12);border:1px dashed var(--amber);border-radius:6px;padding:0 6px;color:var(--amber);font-weight:700}

/* Page head */
.phead{padding:clamp(48px,8vw,90px) 0 clamp(28px,4vw,44px);position:relative;overflow:hidden;isolation:isolate}
.phead::before{content:"";position:absolute;inset:-40% -10% auto;height:150%;background:radial-gradient(45% 50% at 15% 40%,rgba(255,165,0,.18),transparent 70%);z-index:-1}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:.85rem;color:var(--dim);margin-bottom:18px;padding:0;list-style:none}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--dim)}
.crumbs a{color:var(--mist);text-decoration:none}
.crumbs a:hover{color:var(--amber)}

/* Dimensions SVG */
.dims svg{width:100%;height:auto}
.dims text{font-family:var(--font);fill:var(--mist);font-size:14px;font-weight:600}
.dims .v{fill:var(--text);font-size:16px;font-weight:800}

/* Footer */
.ftr{background:#08080A;border-top:1px solid var(--line);padding:64px 0 28px;font-size:.95rem}
.ftr .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:32px}
.ftr .fh{font-weight:800;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.ftr a{color:var(--mist);text-decoration:none}
.ftr a:hover{color:var(--amber)}
.ftr .logo{height:46px;width:auto;margin-bottom:16px}
.soc{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.soc a{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line2);color:var(--mist)}
.soc a:hover{color:#000;background:var(--amber);border-color:var(--amber)}
.soc svg{width:18px;height:18px}
.ftr .bottom{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;margin-top:48px;padding-top:22px;border-top:1px solid var(--line);color:var(--dim);font-size:.86rem}
.ftr .bottom ul{display:flex;flex-wrap:wrap;gap:18px}

/* Cookie banner */
.ck{position:fixed;left:16px;right:16px;bottom:16px;z-index:100;max-width:560px;margin-left:auto;background:#17171B;border:1px solid var(--line2);border-radius:18px;padding:20px;box-shadow:0 30px 60px -20px rgba(0,0,0,.8);display:none}
.ck.show{display:block}
.ck p{font-size:.92rem;color:var(--mist);margin-bottom:14px}
.ck .btns{gap:10px}
.ck .btn{flex:1;min-width:130px}

/* Reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}}

/* Responsive */
@media (max-width:1080px){
  .nav{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;padding:12px var(--pad) 20px;background:rgba(12,12,14,.97);border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .nav a{padding:13px 14px;font-size:1.05rem;border-radius:12px}
  .navbtn{display:block}
  .hdr .btn.fxh{display:none}
  .nav .btn{margin:10px 0 0}
  .ftr .cols{grid-template-columns:1fr 1fr}
}
@media (min-width:1081px){.nav .btn{display:none}}
@media (max-width:900px){
  .hero-grid,.split,.fxband .split{grid-template-columns:1fr}
  .split.rev>:first-child{order:0}
  .gens{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .g3,.g4,.ccards{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento>*,.bento .w3,.bento .w4{grid-column:span 1}.bento .w6{grid-column:span 2}
  .strip{grid-template-columns:repeat(3,1fr)}
  .notice{grid-template-columns:auto 1fr}
  .notice .btn{grid-column:1/-1}
}
@media (max-width:600px){
  body{font-size:16px}
  .g2,.g3,.g4,.ccards,.steps,.cf .two{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}.bento .w6{grid-column:span 1}
  .ftr .cols{grid-template-columns:1fr}
  .brand img{height:38px}
  .hdr .wrap{height:64px}
  .nav{top:64px}
  .stage figcaption{font-size:.7rem}
  .stage figcaption b{font-size:.78rem}
  .stamp{font-size:.5rem;letter-spacing:.1em}
  .btns .btn{width:100%}
  .lb .pv,.lb .nx{top:auto;bottom:-60px}.lb .pv{left:20%}.lb .nx{right:20%}
}

/* What's new list (FunXPad card) */
.gen ul.wn{gap:10px;margin-top:8px}
.gen ul.wn li{display:flex;gap:12px;align-items:flex-start}
.gen ul.wn li::before{display:none}
.wn .wi{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--aqua);background:rgba(61,232,255,.09);border:1px solid rgba(61,232,255,.28)}
.wn .wi svg{width:18px;height:18px}
.wn b{display:block;color:#fff;font-size:1rem;line-height:1.3}
.wn li>span:last-child{font-size:.9rem;line-height:1.45;color:#C9C4D9}

.ask{font-size:clamp(1.1rem,1.9vw,1.45rem);font-weight:600;color:var(--amber);margin:0 0 .5em;max-width:44ch;line-height:1.35}

/* What's new list in the FunXPad band */
ul.wn.band{list-style:none;padding:0;margin:4px 0 18px;display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
ul.wn.band li{display:flex;gap:12px;align-items:flex-start}
.fxband .story{font-weight:700;color:var(--aqua);margin:0 0 22px}
@media (max-width:600px){ul.wn.band{grid-template-columns:1fr}}

.bento.leap{grid-template-columns:repeat(3,1fr)}
.bento.leap>*{grid-column:span 1}
.bento.leap .tile{min-height:160px}
@media (max-width:900px){.bento.leap{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.bento.leap{grid-template-columns:1fr}}
.bento.leap .tile{justify-content:flex-start}
.bento.leap .k{display:inline-block;align-self:flex-start;padding-right:.05em}

/* Service dropdown */
.dd{position:relative}
.dd .ddt{display:inline-flex;align-items:center;gap:4px}
.dd .ddt svg{width:14px;height:14px;transition:transform .2s}
.dd .ddt[data-active]{background:rgba(255,255,255,.07);box-shadow:inset 0 -2px 0 var(--orange)}
.ddm{display:none;position:absolute;top:100%;left:0;min-width:300px;padding:8px;margin-top:6px;background:#17171B;border:1px solid var(--line2);border-radius:14px;box-shadow:0 24px 50px -20px rgba(0,0,0,.8);flex-direction:column;gap:2px;z-index:60}
.ddm::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.ddm a{border-radius:10px!important;white-space:normal!important}
.dd:hover .ddm,.dd:focus-within .ddm{display:flex}
.dd:hover .ddt svg,.dd:focus-within .ddt svg{transform:rotate(180deg)}
@media (max-width:1080px){.dd .ddm{display:flex;position:static;min-width:0;margin:0 0 6px 14px;padding:0 0 0 10px;background:none;border:0;border-left:1px solid var(--line2);border-radius:0;box-shadow:none}.dd .ddt svg{display:none}.ddm a{font-size:.98rem!important;padding:10px 12px!important;color:var(--mist)!important}}
/* WhatsApp button and device pages */
.btn.wa{background:#25D366;color:#04210F;box-shadow:0 8px 30px -10px rgba(37,211,102,.7)}
.btn.wa:hover{color:#000;box-shadow:0 12px 36px -8px rgba(37,211,102,.9)}
.btn.wa svg{width:1.2em;height:1.2em}
.devhero{background:#fff;display:grid;place-items:center;padding:24px}
.devhero img{max-height:420px;width:auto;object-fit:contain}
.bento.devgal{grid-template-columns:1fr 1fr}
.bento.devgal>*{grid-column:span 1}
.bento.devgal .tile.img.contain{min-height:240px}
.card h3 svg{width:1em;height:1em;color:var(--amber);vertical-align:-2px}
/* equal picture height in the generation cards, so titles line up */
.gen .pic{aspect-ratio:auto;height:clamp(220px,22vw,290px);padding:20px}
.gen .pic img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
/* Support hub cards */
.scard{display:flex;flex-direction:column;padding:0}
.scard>*:not(.simg){margin-left:24px;margin-right:24px}
.scard h3{margin-top:18px}
.scard .more{margin-bottom:22px}
.simg{aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line);background:#111}
.simg img{width:100%;height:100%;object-fit:cover}
.simg.white{background:#fff}
.simg.white img{object-fit:contain;padding:14px}
.ddm a:first-child{font-weight:800}