/* ============================================================
   PixDevs — Website Design System
   Built on Stonebound Twilight tokens. Dark theme.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Aldrich&family=Inter:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@500;600&display=swap');

:root{
  /* ---- Surfaces (twilight) ---- */
  --bg:#1C2A3A;
  --bg-deep:#16212E;
  --surface:#2A3B52;
  --socket:#223145;
  --raised:#324560;
  --raised-hi:#46597A;

  /* ---- Text ---- */
  --text:#F0E6D8;
  --text-2:#97A2B0;
  --text-3:#6B7787;

  /* ---- Accent ---- */
  --amber:#D4A435;
  --amber-bright:#ECC04E;
  --amber-dim:#A67E22;

  /* ---- Web semantic ---- */
  --border:rgba(255,255,255,0.08);
  --border-strong:rgba(255,255,255,0.15);
  --success:#81B29A;
  --danger:#E07A5F;
  --info:#7FB3D5;
  --overlay:rgba(12,18,26,0.66);
  --focus:rgba(236,192,78,0.55);

  /* ---- Game-family accents (portfolio tags ONLY) ---- */
  --fam-fire:#E07A5F;
  --fam-frost:#7FB3D5;
  --fam-earth:#81B29A;
  --fam-sky:#9B8BC4;
  --fam-bone:#EDE4D3;

  /* ---- Type ---- */
  --font-display:'Aldrich', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;

  /* ---- Radii ---- */
  --r-btn:10px; --r-input:10px; --r-card:16px; --r-modal:24px; --r-full:9999px;

  /* ---- Elevation ---- */
  --lift-sm:0 4px 12px rgba(0,0,0,0.24);
  --lift-md:0 10px 26px rgba(0,0,0,0.32);
  --lift-lg:0 22px 50px rgba(0,0,0,0.42);
  --glow-warm:0 0 60px rgba(214,166,74,0.14);

  /* ---- Motion ---- */
  --ease:cubic-bezier(0.22,1,0.36,1);
  --t-tap:150ms; --t-move:220ms; --t-reveal:380ms; --t-sheet:480ms;

  /* ---- Layout ---- */
  --container:1180px;
  --rail:228px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:88px;}
html,body{margin:0;}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{animation:none !important; transition:none !important;} }

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
code{font-family:var(--font-mono); font-size:0.86em;}

/* ============================================================
   TYPE PRIMITIVES
   ============================================================ */
.eyebrow{font-family:var(--font-mono); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.2em; color:var(--text-2);}
.display{font-family:var(--font-display); font-size:clamp(40px,6vw,68px); line-height:1.02; letter-spacing:0.01em;}
.h1{font-family:var(--font-display); font-size:clamp(30px,4vw,44px); line-height:1.1; letter-spacing:0.01em;}
.h2{font-family:var(--font-display); font-size:clamp(24px,2.6vw,32px); line-height:1.15; letter-spacing:0.01em;}
.h3{font-family:var(--font-display); font-size:22px; line-height:1.2;}
.h4{font-family:var(--font-display); font-size:18px; line-height:1.25;}
.lead{font-size:clamp(17px,1.6vw,19px); line-height:1.6; color:var(--text);}
.body{font-size:16px; line-height:1.6;}
.body-sm{font-size:14px; line-height:1.55; color:var(--text-2);}
.small{font-size:13px; color:var(--text-2);}
.label{font-family:var(--font-mono); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.18em; color:var(--text-2);}
.mono{font-family:var(--font-mono);}
.muted{color:var(--text-2);}
.amber{color:var(--amber);}

.link{color:var(--amber); font-weight:500; border-bottom:1px solid transparent; transition:border-color var(--t-tap) var(--ease);}
.link:hover{border-bottom-color:var(--amber);}

/* ============================================================
   PAGE SHELL — sticky TOC rail + content
   ============================================================ */
.shell{max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:var(--rail) 1fr; gap:56px; padding:0 32px;}

/* DS top bar */
.dsbar{position:sticky; top:0; z-index:60; background:rgba(22,33,46,0.82); backdrop-filter:blur(14px); border-bottom:1px solid var(--border);}
.dsbar-in{max-width:var(--container); margin:0 auto; padding:14px 32px; display:flex; align-items:center; gap:16px;}
.dsbar .badge{margin-left:auto;}

/* TOC */
.toc{position:sticky; top:88px; height:max-content; padding:8px 0 48px; align-self:start;}
.toc h6{font-family:var(--font-mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-3); margin:22px 0 8px;}
.toc a{display:block; font-size:13.5px; color:var(--text-2); padding:5px 12px; border-radius:8px; border-left:2px solid transparent; transition:all var(--t-tap) var(--ease);}
.toc a:hover{color:var(--text); background:var(--surface);}
.toc a.active{color:var(--amber); border-left-color:var(--amber); background:rgba(212,164,53,0.06);}

.content{min-width:0; padding-bottom:120px;}

/* section blocks */
.sec{padding:56px 0; border-top:1px solid var(--border);}
.sec:first-child{border-top:none;}
.sec-head{display:flex; align-items:baseline; gap:14px; margin-bottom:8px; flex-wrap:wrap;}
.sec-head .num{font-family:var(--font-mono); font-size:12px; color:var(--amber); letter-spacing:0.14em;}
.sec-intro{max-width:62ch; color:var(--text-2); margin:0 0 32px;}

.sub{font-family:var(--font-display); font-size:15px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-2); margin:40px 0 16px; display:flex; align-items:center; gap:12px;}
.sub::after{content:""; flex:1; height:1px; background:var(--border);}

/* spec panel — neutral demo surface */
.panel{background:linear-gradient(180deg,#243449,#1F2E40); border:1px solid var(--border); border-radius:var(--r-card); padding:32px; box-shadow:var(--lift-sm);}
.panel + .caption{margin-top:10px;}
.caption{font-size:12.5px; color:var(--text-3);}
.caption code{color:var(--text-2);}

.row{display:flex; flex-wrap:wrap; gap:16px; align-items:center;}
.col{display:flex; flex-direction:column; gap:16px;}
.stack-lg{display:flex; flex-direction:column; gap:24px;}

/* ============================================================
   COLOR TOKENS
   ============================================================ */
.swatches{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px;}
.swatch{border-radius:12px; overflow:hidden; border:1px solid var(--border); background:var(--surface); cursor:pointer; transition:transform var(--t-tap) var(--ease), box-shadow var(--t-tap) var(--ease);}
.swatch:hover{transform:translateY(-2px); box-shadow:var(--lift-md);}
.swatch .chip{height:72px;}
.swatch .meta{padding:10px 12px;}
.swatch .nm{font-size:13px; font-weight:500;}
.swatch .hx{font-family:var(--font-mono); font-size:11px; color:var(--text-2); margin-top:2px; display:flex; align-items:center; gap:6px;}
.swatch .hx .copied{color:var(--amber); opacity:0; transition:opacity var(--t-tap);}
.swatch.is-copied .hx .copied{opacity:1;}

.fam-row{display:flex; gap:10px; flex-wrap:wrap;}
.fam-dot{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-2); background:var(--surface); border:1px solid var(--border); padding:6px 12px 6px 8px; border-radius:var(--r-full);}
.fam-dot i{width:14px; height:14px; border-radius:4px; display:block;}

/* ============================================================
   TYPOGRAPHY SPECIMEN
   ============================================================ */
.type-row{display:grid; grid-template-columns:160px 1fr; gap:24px; padding:18px 0; border-bottom:1px solid var(--border); align-items:baseline;}
.type-row:last-child{border-bottom:none;}
.type-row .meta{font-family:var(--font-mono); font-size:11px; color:var(--text-3); line-height:1.7; padding-top:6px;}
.type-row .meta b{color:var(--text-2); font-weight:600; display:block; text-transform:uppercase; letter-spacing:0.12em;}

/* ============================================================
   SCALE TILES — spacing / radii
   ============================================================ */
.scale-row{display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap;}
.scale-item{display:flex; flex-direction:column; align-items:center; gap:8px;}
.scale-item .box{background:var(--amber); border-radius:3px;}
.scale-item .v{font-family:var(--font-mono); font-size:11px; color:var(--text-2);}
.radii-row{display:flex; gap:18px; flex-wrap:wrap;}
.radii-item{display:flex; flex-direction:column; align-items:center; gap:8px;}
.radii-item .box{width:72px; height:72px; background:var(--raised); border:1px solid var(--raised-hi);}

/* elevation */
.elev-row{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:20px;}
.elev-item{height:96px; border-radius:var(--r-card); background:var(--surface); border:1px solid var(--border); display:flex; align-items:flex-end; padding:12px; font-family:var(--font-mono); font-size:11px; color:var(--text-2);}

/* motion */
.motion-row{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px;}
.motion-item{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; cursor:pointer; overflow:hidden;}
.motion-item .dot{width:18px; height:18px; border-radius:5px; background:var(--amber); margin-bottom:14px; transition-timing-function:var(--ease);}
.motion-item:hover .dot{transform:translateX(96px);}
.motion-item .d{font-family:var(--font-mono); font-size:12px; color:var(--text); }
.motion-item .u{font-size:12px; color:var(--text-2);}

/* ============================================================
   NAVBAR component
   ============================================================ */
.nav{display:flex; align-items:center; gap:28px; padding:16px 24px; background:rgba(22,33,46,0.7); border:1px solid var(--border); border-radius:var(--r-card); backdrop-filter:blur(10px);}
.nav .brand{display:flex; align-items:center; gap:12px;}
.nav .brand .wm{font-family:var(--font-display); font-size:20px; letter-spacing:0.015em;}
.nav .brand .wm .dv{color:var(--text-2);}
.nav .links{display:flex; gap:24px; margin-left:8px;}
.nav .links a{font-size:14px; font-weight:500; color:var(--text-2); position:relative; padding:4px 0; transition:color var(--t-tap) var(--ease);}
.nav .links a:hover,.nav .links a.cur{color:var(--text);}
.nav .links a.cur::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--amber); border-radius:2px;}
.nav .right{margin-left:auto; display:flex; align-items:center; gap:14px;}
.nav .burger{display:none; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer; padding:6px;}
.nav .burger span{width:20px; height:2px; background:var(--text); border-radius:2px;}
@media(max-width:560px){ .nav .links{display:none;} .nav .burger{display:flex;} .nav .right .btn-txt{display:none;} }

.mark{display:block; height:30px; width:auto; color:var(--amber);}
.mark use{fill:currentColor;}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-body); font-weight:600; font-size:15px; line-height:1; border-radius:var(--r-btn); border:1.5px solid transparent; padding:0 22px; height:48px; cursor:pointer; white-space:nowrap; transition:transform var(--t-tap) var(--ease), background var(--t-tap) var(--ease), border-color var(--t-tap) var(--ease), box-shadow var(--t-tap) var(--ease); user-select:none;}
.btn:active{transform:translateY(1px) scale(0.99);}
.btn svg{width:18px; height:18px; flex:0 0 auto;}
.btn:focus-visible{outline:none; box-shadow:0 0 0 3px var(--focus);}

.btn-primary{background:var(--amber); color:var(--bg); border-color:var(--amber);}
.btn-primary:hover{background:var(--amber-bright); border-color:var(--amber-bright); box-shadow:0 8px 22px rgba(214,166,74,0.28);}
.btn-secondary{background:transparent; color:var(--text); border-color:var(--raised-hi);}
.btn-secondary:hover{border-color:var(--text-2); background:rgba(255,255,255,0.03);}
.btn-txt{background:transparent; color:var(--text-2); border-color:transparent; padding:0 8px; height:auto;}
.btn-txt:hover{color:var(--text);}
.btn-ghost{background:var(--surface); color:var(--text); border-color:var(--border);}
.btn-ghost:hover{background:var(--raised); border-color:var(--border-strong);}
.btn[disabled]{opacity:0.4; pointer-events:none;}

.btn-lg{height:56px; font-size:16px; padding:0 30px;}
.btn-sm{height:40px; font-size:13px; padding:0 16px; gap:7px;}
.btn-sm svg{width:15px; height:15px;}
.btn-icon{width:48px; padding:0;}
.btn-icon.btn-sm{width:40px;}

/* ============================================================
   STORE BADGES (studio-styled, not official trademarks)
   ============================================================ */
.store{display:inline-flex; align-items:center; gap:11px; height:54px; padding:0 18px 0 16px; border-radius:12px; background:var(--bg-deep); border:1px solid var(--border-strong); cursor:pointer; transition:border-color var(--t-tap) var(--ease), transform var(--t-tap) var(--ease);}
.store:hover{border-color:var(--text-2); transform:translateY(-1px);}
.store svg{width:26px; height:26px; color:var(--text);}
.store .t{display:flex; flex-direction:column; line-height:1.15; text-align:left;}
.store .t .a{font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-2);}
.store .t .b{font-family:var(--font-display); font-size:16px; color:var(--text);}

/* ============================================================
   TAGS / PILLS / BADGES
   ============================================================ */
.tag{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.12em; padding:4px 10px; border-radius:var(--r-full); border:1px solid var(--border-strong); color:var(--text-2);}
.tag.solid{background:var(--amber); color:var(--bg); border-color:var(--amber);}
.tag.dot::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor;}
.tag.fire{color:var(--fam-fire); border-color:color-mix(in srgb,var(--fam-fire) 45%, transparent);}
.tag.frost{color:var(--fam-frost); border-color:color-mix(in srgb,var(--fam-frost) 45%, transparent);}
.tag.earth{color:var(--fam-earth); border-color:color-mix(in srgb,var(--fam-earth) 45%, transparent);}
.tag.sky{color:var(--fam-sky); border-color:color-mix(in srgb,var(--fam-sky) 45%, transparent);}

.badge{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; padding:4px 9px; border-radius:6px; background:var(--surface); border:1px solid var(--border); color:var(--text-2);}
.badge.live{color:var(--success); border-color:color-mix(in srgb,var(--success) 40%, transparent);}
.badge.soon{color:var(--amber); border-color:color-mix(in srgb,var(--amber) 40%, transparent);}
.badge.dev{color:var(--info); border-color:color-mix(in srgb,var(--info) 40%, transparent);}

/* platform glyph chips */
.plat{display:inline-flex; gap:8px; align-items:center; color:var(--text-2);}
.plat svg{width:15px; height:15px;}

/* ============================================================
   FORMS
   ============================================================ */
.field{display:flex; flex-direction:column; gap:7px;}
.field label{font-size:13px; font-weight:500; color:var(--text);}
.field .hint{font-size:12px; color:var(--text-3);}
.input,.textarea,.select{font-family:var(--font-body); font-size:15px; color:var(--text); background:var(--socket); border:1.5px solid var(--border-strong); border-radius:var(--r-input); padding:12px 14px; width:100%; transition:border-color var(--t-tap) var(--ease), box-shadow var(--t-tap) var(--ease);}
.input::placeholder,.textarea::placeholder{color:var(--text-3);}
.input:focus,.textarea:focus,.select:focus{outline:none; border-color:var(--amber); box-shadow:0 0 0 3px var(--focus);}
.textarea{min-height:108px; resize:vertical;}
.select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2397A2B0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;}
.field.err .input,.field.err .textarea{border-color:var(--danger); box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 30%, transparent);}
.field.err .hint{color:var(--danger);}

.check{display:flex; align-items:flex-start; gap:11px; cursor:pointer; font-size:14px; color:var(--text);}
.check input{position:absolute; opacity:0; width:0; height:0;}
.check .box{flex:0 0 auto; width:20px; height:20px; border-radius:6px; border:1.5px solid var(--border-strong); background:var(--socket); display:grid; place-items:center; transition:all var(--t-tap) var(--ease); margin-top:1px;}
.check .box svg{width:13px; height:13px; color:var(--bg); opacity:0; transform:scale(0.6); transition:all var(--t-tap) var(--ease);}
.check input:checked + .box{background:var(--amber); border-color:var(--amber);}
.check input:checked + .box svg{opacity:1; transform:scale(1);}
.check input:focus-visible + .box{box-shadow:0 0 0 3px var(--focus);}

/* inline newsletter */
.newsletter{display:flex; gap:10px; max-width:440px;}
.newsletter .input{flex:1;}
@media(max-width:460px){ .newsletter{flex-direction:column;} }

/* ============================================================
   PORTFOLIO / GAME CARDS
   ============================================================ */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:20px;}
.gcard{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; box-shadow:var(--lift-sm); transition:transform var(--t-move) var(--ease), box-shadow var(--t-move) var(--ease), border-color var(--t-move) var(--ease); cursor:pointer;}
.gcard:hover{transform:translateY(-4px); box-shadow:var(--lift-lg); border-color:var(--border-strong);}
.gcard .art{aspect-ratio:4/3; position:relative; display:grid; place-items:center; overflow:hidden;}
.gcard .art .glow{position:absolute; inset:0; background:radial-gradient(120% 120% at 50% 38%,#2E4159,#1B2838);}
.gcard .art .tile{position:relative; width:64px; height:64px; border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,0.34); display:grid; place-items:center;}
.gcard .art .badge{position:absolute; top:12px; left:12px; z-index:2;}
.gcard .art .plat{position:absolute; top:14px; right:14px; z-index:2; color:var(--text-2);}
.gcard .body{padding:16px 18px 20px;}
.gcard .body .top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px;}
.gcard .body h4{font-family:var(--font-display); font-size:19px; margin:0;}
.gcard .body p{font-size:13.5px; color:var(--text-2); margin:0; line-height:1.5;}

/* horizontal feature card */
.fcard{display:grid; grid-template-columns:240px 1fr; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; box-shadow:var(--lift-md);}
.fcard .art{position:relative; display:grid; place-items:center; min-height:200px;}
.fcard .art .glow{position:absolute; inset:0; background:radial-gradient(120% 120% at 50% 40%,#2E4159,#1B2838);}
.fcard .art .tile{position:relative; width:84px; height:84px; border-radius:16px; box-shadow:0 14px 30px rgba(0,0,0,0.4); display:grid; place-items:center;}
.fcard .body{padding:28px 30px; display:flex; flex-direction:column; gap:14px; justify-content:center;}
.fcard .body .meta{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.fcard .body h3{margin:0;}
.fcard .body p{margin:0; color:var(--text-2); max-width:48ch;}
.fcard .body .actions{display:flex; gap:12px; margin-top:6px; flex-wrap:wrap;}
@media(max-width:620px){ .fcard{grid-template-columns:1fr;} .fcard .art{min-height:150px;} }

/* carved-tile glyph used in art placeholders */
.runetile{font-family:var(--font-display); font-weight:400; color:var(--bg); font-size:30px; opacity:0.92;}

/* ============================================================
   STAT / METRIC BLOCKS
   ============================================================ */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden;}
.stat{background:var(--surface); padding:26px 24px; text-align:left;}
.stat .n{font-family:var(--font-display); font-size:clamp(30px,4vw,42px); color:var(--amber); line-height:1; font-variant-numeric:tabular-nums;}
.stat .l{font-size:13px; color:var(--text-2); margin-top:9px;}

/* ============================================================
   PRESS QUOTE / TESTIMONIAL
   ============================================================ */
.quote{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:32px 34px; box-shadow:var(--lift-sm); position:relative; max-width:620px;}
.quote .mk{font-family:var(--font-display); font-size:60px; color:var(--amber); opacity:0.32; line-height:0.6; height:24px; display:block;}
.quote blockquote{margin:6px 0 18px; font-size:19px; line-height:1.5; font-family:var(--font-body); font-style:italic; color:var(--text);}
.quote .by{display:flex; align-items:center; gap:11px;}
.quote .by .av{width:36px; height:36px; border-radius:50%; background:var(--raised); border:1px solid var(--raised-hi); display:grid; place-items:center; font-family:var(--font-display); font-size:14px; color:var(--text-2);}
.quote .by .nm{font-size:13.5px; font-weight:600;}
.quote .by .src{font-size:12px; color:var(--text-2);}

/* ============================================================
   FAQ / ACCORDION
   ============================================================ */
.faq{border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; max-width:680px; background:var(--surface);}
.faq-item{border-bottom:1px solid var(--border);}
.faq-item:last-child{border-bottom:none;}
.faq-q{width:100%; display:flex; align-items:center; gap:16px; text-align:left; background:none; border:none; cursor:pointer; padding:18px 22px; font-family:var(--font-body); font-size:16px; font-weight:500; color:var(--text);}
.faq-q .ic{margin-left:auto; flex:0 0 auto; width:20px; height:20px; position:relative; transition:transform var(--t-move) var(--ease);}
.faq-q .ic::before,.faq-q .ic::after{content:""; position:absolute; background:var(--amber); border-radius:2px;}
.faq-q .ic::before{top:9px; left:0; right:0; height:2px;}
.faq-q .ic::after{left:9px; top:0; bottom:0; width:2px; transition:opacity var(--t-tap) var(--ease);}
.faq-item.open .faq-q .ic::after{opacity:0;}
.faq-a{max-height:0; overflow:hidden; transition:max-height var(--t-move) var(--ease);}
.faq-a .inner{padding:0 22px 20px; color:var(--text-2); font-size:14.5px; line-height:1.6; max-width:60ch;}

/* ============================================================
   MODAL / DIALOG
   ============================================================ */
.modal-scrim{position:fixed; inset:0; background:var(--overlay); backdrop-filter:blur(4px); display:grid; place-items:center; z-index:100; opacity:0; pointer-events:none; transition:opacity var(--t-move) var(--ease); padding:24px;}
.modal-scrim.open{opacity:1; pointer-events:auto;}
.modal{width:min(440px,100%); background:var(--raised); border:1px solid var(--border-strong); border-radius:var(--r-modal); box-shadow:var(--lift-lg); padding:30px; transform:translateY(12px) scale(0.98); transition:transform var(--t-move) var(--ease);}
.modal-scrim.open .modal{transform:none;}
.modal h3{margin:0 0 8px;}
.modal p{margin:0 0 22px; color:var(--text-2); font-size:14.5px;}
.modal .actions{display:flex; gap:12px; justify-content:flex-end;}

/* ============================================================
   FOOTER pattern
   ============================================================ */
.site-footer{background:var(--bg-deep); border:1px solid var(--border); border-radius:var(--r-card); padding:44px 40px 32px; }
.site-footer .top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;}
.site-footer .brandcol .wm{font-family:var(--font-display); font-size:22px; letter-spacing:0.015em; margin:14px 0 10px;}
.site-footer .brandcol .wm .dv{color:var(--text-2);}
.site-footer .brandcol p{font-size:13.5px; color:var(--text-2); max-width:32ch; margin:0 0 18px;}
.site-footer h6{font-family:var(--font-mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-3); margin:0 0 14px;}
.site-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.site-footer ul a{font-size:14px; color:var(--text-2); transition:color var(--t-tap) var(--ease);}
.site-footer ul a:hover{color:var(--text);}
.site-footer .socials{display:flex; gap:10px;}
.site-footer .socials a{width:36px; height:36px; border-radius:9px; border:1px solid var(--border); display:grid; place-items:center; color:var(--text-2); transition:all var(--t-tap) var(--ease);}
.site-footer .socials a:hover{color:var(--text); border-color:var(--border-strong); background:var(--surface);}
.site-footer .socials svg{width:17px; height:17px;}
.site-footer .base{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:36px; padding-top:22px; border-top:1px solid var(--border); flex-wrap:wrap;}
.site-footer .base .small{color:var(--text-3);}
@media(max-width:760px){ .site-footer .top{grid-template-columns:1fr 1fr;} }
@media(max-width:460px){ .site-footer .top{grid-template-columns:1fr;} }

/* ============================================================
   HERO pattern
   ============================================================ */
.hero{position:relative; border-radius:var(--r-modal); overflow:hidden; border:1px solid var(--border); background:radial-gradient(130% 120% at 26% 16%,#26384E 0%,#1A2734 64%); box-shadow:var(--glow-warm), var(--lift-md); padding:72px 56px;}
.hero .eyebrow{margin-bottom:20px;}
.hero h1{margin:0 0 20px; max-width:18ch;}
.hero p{font-size:clamp(16px,1.6vw,19px); color:var(--text-2); max-width:52ch; margin:0 0 32px;}
.hero .cta{display:flex; gap:14px; flex-wrap:wrap;}
.hero .deco{position:absolute; right:48px; top:50%; transform:translateY(-50%); opacity:0.9;}
@media(max-width:780px){ .hero{padding:48px 32px;} .hero .deco{display:none;} }

/* pixel-block decorative cluster */
.blockfield{display:grid; grid-template-columns:repeat(4,22px); grid-auto-rows:22px; gap:6px;}
.blockfield i{border-radius:5px; background:var(--amber); opacity:0.9;}
.blockfield i.dim{background:var(--raised-hi); opacity:0.6;}

/* ============================================================
   DO / DON'T
   ============================================================ */
.rules{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.rule{display:flex; gap:12px; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:15px 17px;}
.rule .ic{font-family:var(--font-mono); font-weight:700; width:22px; height:22px; flex:0 0 22px; border-radius:6px; display:grid; place-items:center; font-size:13px;}
.rule.ok .ic{background:rgba(129,178,154,0.18); color:#A9D3BE;}
.rule.no .ic{background:rgba(224,122,95,0.18); color:#E89A85;}
.rule .small{color:var(--text);}

.note{background:rgba(212,164,53,0.08); border:1px solid rgba(212,164,53,0.28); border-radius:12px; padding:16px 20px; font-size:14px; color:var(--text);}

/* ============================================================
   RESPONSIVE shell
   ============================================================ */
@media(max-width:920px){
  .shell{grid-template-columns:1fr; gap:0;}
  .toc{display:none;}
  .rules{grid-template-columns:1fr;}
  .type-row{grid-template-columns:1fr; gap:8px;}
}