/* ================================================================
   TAGNOLOGYS — "VINTAGE COMPUTER" Design System v3
   Brand: navy #2D3E50 · teal #22B89B (official logo)
   Language: retro-OS windows · blueprint hardware · modern motion
   Themes: light (engineer's paper) · dark (CRT terminal)
   ================================================================ */
:root{
  /* light — engineer's graph paper + old plastic */
  --bg:#F2EFE6;
  --bg-2:#EAE6D9;
  --panel:#FAF8F1;
  --panel-2:#F0EDE2;
  --ink:#2D3E50;
  --ink-dim:#6B7A8A;
  --line:#2D3E50;
  --line-soft:rgba(45,62,80,.18);
  --grid:rgba(45,62,80,.07);
  --grid-strong:rgba(45,62,80,.12);
  --accent:#17A287;
  --accent-bright:#22B89B;
  --accent-soft:rgba(34,184,155,.14);
  --accent-ink:#0E4438;
  --hard-shadow:#2D3E50;
  --titlebar:repeating-linear-gradient(90deg,var(--line) 0 2px,transparent 2px 6px);
  --glow:none;
  --font-head:'Noto Kufi Arabic','IBM Plex Sans Arabic',sans-serif;
  --font-body:'IBM Plex Sans Arabic',sans-serif;
  --font-en:'Space Grotesk',monospace;
  --bw:2px;                 /* border width of the retro UI */
  --hs:5px;                 /* hard shadow offset */
  --ease:cubic-bezier(.22,.9,.28,1);
  --press:cubic-bezier(.34,1.56,.64,1);
}
html[data-theme="dark"]{
  /* dark — CRT phosphor terminal */
  --bg:#0A131D;
  --bg-2:#0E1926;
  --panel:#101C2A;
  --panel-2:#152435;
  --ink:#DFF3ED;
  --ink-dim:#8AA0A6;
  --line:#22B89B;
  --line-soft:rgba(34,184,155,.28);
  --grid:rgba(34,184,155,.06);
  --grid-strong:rgba(34,184,155,.1);
  --accent:#22B89B;
  --accent-bright:#2BD9B6;
  --accent-soft:rgba(34,184,155,.12);
  --accent-ink:#06231C;
  --hard-shadow:#031712;
  --titlebar:repeating-linear-gradient(90deg,var(--line) 0 2px,transparent 2px 6px);
  --glow:0 0 18px rgba(34,184,155,.25);
}
[dir="ltr"]{--font-body:'Space Grotesk','IBM Plex Sans Arabic',sans-serif}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.9;
  overflow-x:hidden;
  transition:background .3s,color .3s;
}
::selection{background:var(--accent);color:var(--accent-ink)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.en{font-family:var(--font-en)}
.num{font-family:var(--font-en);font-variant-numeric:tabular-nums}
.only-dark{display:none}
html[data-theme="dark"] .only-dark{display:block}
html[data-theme="dark"] .only-light{display:none}

/* ---- backdrop: graph paper / CRT ---- */
.bg-pattern{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px),
    linear-gradient(var(--grid-strong) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-strong) 1px,transparent 1px);
  background-size:28px 28px,28px 28px,140px 140px,140px 140px;
}
/* page frame like a technical sheet */
.sheet-frame{position:fixed;inset:10px;z-index:900;pointer-events:none;border:1px solid var(--line-soft)}
.sheet-frame::before,.sheet-frame::after{content:"";position:absolute;width:9px;height:9px;background:var(--line);transform:rotate(45deg)}
.sheet-frame::before{top:-5px;inset-inline-start:-5px}
.sheet-frame::after{bottom:-5px;inset-inline-end:-5px}
/* CRT scanlines + vignette (dark only) */
html[data-theme="dark"] body::after{content:"";position:fixed;inset:0;z-index:901;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;animation:crt-flicker 7s infinite}
@keyframes crt-flicker{0%,100%{opacity:.9}50%{opacity:.75}92%{opacity:.9}94%{opacity:.6}96%{opacity:.9}}
.bg-glow{display:none}
html[data-theme="dark"] .bg-glow{display:block;position:fixed;z-index:-1;width:55vw;height:55vw;max-width:760px;max-height:760px;border-radius:50%;filter:blur(150px);opacity:.12;pointer-events:none;background:var(--accent)}
html[data-theme="dark"] .bg-glow.a{top:-20vw;inset-inline-end:-16vw}
html[data-theme="dark"] .bg-glow.b{bottom:-24vw;inset-inline-start:-18vw;opacity:.08}

.container{max-width:1200px;margin-inline:auto;padding-inline:24px}

/* ---------------- cursor: crosshair square ---------------- */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;transform:translate(-50%,-50%)}
.cursor-dot{width:6px;height:6px;background:var(--accent-bright)}
.cursor-ring{width:30px;height:30px;border:var(--bw) solid var(--line-soft);transition:width .25s,height .25s,border-color .25s,transform .08s}
body.link-hover .cursor-ring{width:46px;height:46px;border-color:var(--accent-bright);transform:translate(-50%,-50%) rotate(45deg)}
@media (hover:none){.cursor-dot,.cursor-ring{display:none}}

/* ---------------- preloader: BIOS boot ---------------- */
.preloader{position:fixed;inset:0;z-index:1000;background:var(--bg);display:grid;place-items:center}
.bios{width:min(560px,88vw);border:var(--bw) solid var(--line);background:var(--panel);box-shadow:var(--hs) var(--hs) 0 var(--hard-shadow)}
.bios-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:var(--bw) solid var(--line)}
.bios-bar .sq{width:12px;height:12px;border:var(--bw) solid var(--line)}
.bios-bar .sq.f{background:var(--accent)}
.bios-bar b{font-family:var(--font-en);font-size:12px;letter-spacing:2px;color:var(--ink)}
.bios-bar .ttl-stripes{flex:1;height:8px;background:var(--titlebar);opacity:.5}
.bios-body{padding:18px 20px;font-family:var(--font-en);direction:ltr;text-align:left;font-size:13px;line-height:2;color:var(--ink)}
.bios-body .ok{color:var(--accent)}
.bios-body .bar{height:14px;border:var(--bw) solid var(--line);margin-top:10px;padding:2px;background:var(--panel-2)}
.bios-body .bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--accent) 0 8px,transparent 8px 12px)}
.bios-body .pct{margin-top:6px;font-size:12px;color:var(--ink-dim)}

/* ---------------- scroll progress ---------------- */
.scroll-progress{position:fixed;top:0;inset-inline-start:0;height:4px;background:repeating-linear-gradient(90deg,var(--accent) 0 10px,var(--accent-bright) 10px 20px);width:0;z-index:950}

/* ---------------- header: OS menu bar ---------------- */
.site-header{position:fixed;top:10px;inset-inline:10px;z-index:500;border-bottom:var(--bw) solid transparent;transition:.3s}
.site-header .container{max-width:none;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 22px;transition:.3s}
.site-header.scrolled{background:var(--panel);border-bottom-color:var(--line);box-shadow:0 var(--hs) 0 var(--hard-shadow)}
.site-header.scrolled .container{padding-block:9px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:42px;width:auto}
.brand .brand-name{display:flex;flex-direction:column;line-height:1.25}
.brand .brand-name b{font-family:var(--font-head);font-size:16.5px;letter-spacing:.4px}
.brand .brand-name span{font-size:9.5px;color:var(--ink-dim);letter-spacing:3px;font-family:var(--font-en)}
.main-nav{display:flex;align-items:center}
.main-nav ul,.main-nav .nav-menu-list{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.main-nav li,.main-nav .menu-item{list-style:none;margin:0;padding:0;display:inline-flex;position:relative}
.main-nav a,.main-nav .menu-item a{position:relative;padding:8px 15px;font-size:14px;font-weight:600;color:var(--ink-dim);border:var(--bw) solid transparent;transition:.2s;text-decoration:none;display:inline-block}
.main-nav a:hover,.main-nav .menu-item a:hover{color:var(--ink);border-color:var(--line);background:var(--panel)}
.main-nav a.active,.main-nav .current-menu-item > a,.main-nav .current_page_item > a{color:var(--ink);border-color:var(--line);background:var(--accent-soft);box-shadow:2px 2px 0 var(--hard-shadow)}
.main-nav .sub-menu{display:none;position:absolute;top:100%;inset-inline-start:0;background:var(--panel);border:var(--bw) solid var(--line);box-shadow:4px 4px 0 var(--hard-shadow);list-style:none;margin:0;padding:6px;z-index:100;min-width:180px}
.main-nav li:hover > .sub-menu{display:flex;flex-direction:column;gap:4px}

.header-actions{display:flex;align-items:center;gap:10px}
.burger{display:none;background:none;border:var(--bw) solid var(--line);cursor:pointer;padding:9px 10px;background:var(--panel);box-shadow:3px 3px 0 var(--hard-shadow)}
.burger span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0}

.mobile-menu{position:fixed;inset:0;z-index:450;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;opacity:0;visibility:hidden;transition:.3s;padding:24px}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu ul,.mobile-menu .mobile-nav-list{display:flex;flex-direction:column;align-items:center;gap:10px;list-style:none;margin:0;padding:0;width:100%}
.mobile-menu li,.mobile-menu .menu-item{list-style:none;margin:0;padding:0;width:100%;display:flex;justify-content:center}
.mobile-menu a,.mobile-menu li a{font-family:var(--font-head);font-size:22px;padding:12px 30px;border:var(--bw) solid var(--line);background:var(--panel);box-shadow:4px 4px 0 var(--hard-shadow);width:min(320px,80vw);text-align:center;text-decoration:none;color:var(--ink)}
.mobile-menu a.active,.mobile-menu li.current-menu-item > a{background:var(--accent-soft)}

/* ---------------- RETRO BUTTONS (old-OS bevel, new motion) ---------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 26px;font-family:var(--font-body);font-size:15px;font-weight:700;cursor:pointer;
  color:var(--ink);background:var(--panel);
  border:var(--bw) solid var(--line);border-radius:0;
  box-shadow:var(--hs) var(--hs) 0 var(--hard-shadow),
             inset 1px 1px 0 rgba(255,255,255,.65),
             inset -1px -1px 0 rgba(45,62,80,.18);
  transition:transform .16s var(--press),box-shadow .16s var(--press),background .2s;
  overflow:hidden;
}
html[data-theme="dark"] .btn{box-shadow:var(--hs) var(--hs) 0 var(--hard-shadow),inset 1px 1px 0 rgba(255,255,255,.08),inset -1px -1px 0 rgba(0,0,0,.5)}
.btn::before{content:"";position:absolute;top:0;bottom:0;width:44%;inset-inline-start:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);transition:inset-inline-start .55s var(--ease)}
html[data-theme="dark"] .btn::before{background:linear-gradient(100deg,transparent,rgba(34,184,155,.35),transparent)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:calc(var(--hs) + 2px) calc(var(--hs) + 2px) 0 var(--hard-shadow),inset 1px 1px 0 rgba(255,255,255,.65),inset -1px -1px 0 rgba(45,62,80,.18)}
.btn:hover::before{inset-inline-start:120%}
.btn:active{transform:translate(var(--hs),var(--hs));box-shadow:0 0 0 var(--hard-shadow),inset 2px 2px 3px rgba(45,62,80,.25)}
.btn .btn-ic{display:inline-flex;transition:transform .3s var(--ease)}
.btn:hover .btn-ic{transform:translateX(-4px)}
[dir="ltr"] .btn:hover .btn-ic{transform:translateX(4px)}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--line)}
.btn-primary:hover{background:var(--accent-bright)}
.btn-outline{background:var(--panel)}
.btn-lg{padding:16px 34px;font-size:16.5px}
.btn-sm{padding:9px 18px;font-size:13.5px}
.lang-switch,.theme-switch{
  font-family:var(--font-en);font-size:12.5px;font-weight:700;letter-spacing:1px;
  padding:9px 14px;border:var(--bw) solid var(--line);background:var(--panel);color:var(--ink);
  cursor:pointer;box-shadow:3px 3px 0 var(--hard-shadow);transition:.15s var(--press)}
.lang-switch:hover,.theme-switch:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--hard-shadow)}
.lang-switch:active,.theme-switch:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--hard-shadow)}

/* ---------------- WINDOW (the core retro component) ---------------- */
.win{position:relative;background:var(--panel);border:var(--bw) solid var(--line);box-shadow:var(--hs) var(--hs) 0 var(--hard-shadow);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.win:hover{transform:translate(-3px,-3px);box-shadow:calc(var(--hs) + 3px) calc(var(--hs) + 3px) 0 var(--hard-shadow)}
.win-bar{display:flex;align-items:center;gap:9px;padding:8px 12px;border-bottom:var(--bw) solid var(--line);background:var(--panel-2)}
.win-bar .stripes{flex:1;height:9px;background:var(--titlebar);opacity:.55}
.win-bar .w-title{font-family:var(--font-en);font-size:11px;letter-spacing:1.5px;color:var(--ink-dim);direction:ltr;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.win-bar .sq{flex:none;width:12px;height:12px;border:var(--bw) solid var(--line);display:grid;place-items:center;font-size:8px;line-height:1;color:var(--ink)}
.win-bar .sq.f{background:var(--accent)}
.win-body{padding:26px}

/* ---------------- section scaffolding ---------------- */
section,.section{position:relative}
.section{padding-block:clamp(80px,9vw,120px)}
.section.tinted{background:var(--bg-2);border-block:var(--bw) solid var(--line-soft)}
.sec-label{display:inline-flex;align-items:center;gap:10px;color:var(--accent-ink);font-size:13px;font-weight:700;letter-spacing:1px;margin-bottom:18px;background:var(--accent-soft);border:var(--bw) solid var(--line);padding:6px 14px;box-shadow:3px 3px 0 var(--hard-shadow)}
html[data-theme="dark"] .sec-label{color:var(--accent-bright)}
.sec-label::before{content:"";width:8px;height:8px;background:var(--accent);transform:rotate(45deg)}
.sec-title{font-family:var(--font-head);font-size:clamp(27px,3.9vw,44px);font-weight:700;line-height:1.55;max-width:780px}
.sec-title .hl{color:var(--accent);position:relative}
.sec-title .hl::after{content:"";position:absolute;bottom:3px;inset-inline:-2px;height:38%;background:var(--accent-soft);z-index:-1;transform:skewX(-6deg)}
.sec-desc{color:var(--ink-dim);max-width:640px;margin-top:14px;font-size:16.5px}
.sec-head{margin-bottom:clamp(38px,5vw,58px)}
.sec-head.center{text-align:center}
.sec-head.center .sec-title,.sec-head.center .sec-desc{margin-inline:auto}
.sec-head.split{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
/* sheet corner note like blueprints */
.corner-note{position:absolute;top:18px;inset-inline-end:24px;font-size:11px;color:var(--ink-dim);font-family:var(--font-en);letter-spacing:1px;opacity:.7}

/* ---------------- hero ---------------- */
.hero{min-height:100svh;display:flex;align-items:center;padding-top:130px;position:relative;overflow:hidden}
#hero-canvas{position:absolute;inset:0;z-index:-1;opacity:.5}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,4.5vw,64px);align-items:center;width:100%}
.hero-kicker{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border:var(--bw) solid var(--line);background:var(--panel);color:var(--ink);font-size:13px;font-weight:600;margin-bottom:26px;box-shadow:4px 4px 0 var(--hard-shadow)}
.hero-kicker .pulse{width:9px;height:9px;background:var(--accent);animation:kpulse 1.8s steps(2) infinite}
@keyframes kpulse{0%,100%{opacity:1}50%{opacity:.2}}
.hero h1{font-family:var(--font-head);font-size:clamp(32px,4.8vw,58px);font-weight:800;line-height:1.55}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.hero h1 .line>span{display:inline-block;transform:translateY(115%)}
html.no-js .hero h1 .line>span{transform:none}
.hero h1 .hl{color:var(--accent)}
.hero-sub{color:var(--ink-dim);font-size:17px;max-width:540px;margin-block:22px 32px}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero-meta{display:flex;gap:24px;margin-top:42px;flex-wrap:wrap}
.hero-meta .hm{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-dim)}
.hero-meta .hm b{color:var(--accent-ink);font-family:var(--font-en);font-size:16px;background:var(--accent-soft);border:var(--bw) solid var(--line);padding:2px 9px;box-shadow:2px 2px 0 var(--hard-shadow)}
html[data-theme="dark"] .hero-meta .hm b{color:var(--accent-bright)}
.hero-meta .hm::before{content:"";width:7px;height:7px;background:var(--accent);transform:rotate(45deg);flex:none}

/* hero blueprint banner */
.hero-visual{position:relative}
.blueprint{width:100%;height:auto;display:block}
.blueprint text{font-family:var(--font-body)}
.blueprint .t-en{font-family:var(--font-en)}
.blueprint .draw{stroke:var(--line);fill:none;stroke-width:1.6}
.blueprint .draw.acc{stroke:var(--accent)}
.blueprint .thin{stroke-width:1;opacity:.65}
.blueprint .dash{stroke-dasharray:4 5}
.blueprint .fill-acc{fill:var(--accent)}
.blueprint .fill-soft{fill:var(--accent-soft)}
.blueprint .fill-panel{fill:var(--panel)}
.blueprint .lbl{fill:var(--ink);font-size:12.5px;font-weight:700}
.blueprint .lbl-dim{fill:var(--ink-dim);font-size:10.5px}
.blueprint .lbl-en{fill:var(--ink-dim);font-size:9px;letter-spacing:2px}
.float-card{position:absolute;z-index:2;min-width:190px}
.float-card .win-body{padding:12px 16px;display:flex;align-items:center;gap:11px;font-size:12.5px}
.float-card .ic{width:34px;height:34px;flex:none;display:grid;place-items:center;background:var(--accent-soft);border:var(--bw) solid var(--line);color:var(--accent-ink);font-weight:700}
html[data-theme="dark"] .float-card .ic{color:var(--accent-bright)}
.float-card b{display:block;font-size:13px}
.float-card small{color:var(--ink-dim);font-size:11px}
.float-card.fc1{top:-30px;inset-inline-start:-16px}
.float-card.fc2{bottom:-26px;inset-inline-end:-12px}

/* stamp (vintage approval mark) */
.stamp{position:absolute;inset-inline-end:6%;top:9%;width:96px;height:96px;border:3px double var(--accent);border-radius:50%;display:grid;place-items:center;color:var(--accent);font-family:var(--font-head);font-size:12px;font-weight:700;text-align:center;line-height:1.6;transform:rotate(12deg);opacity:.85;background:var(--panel);box-shadow:3px 3px 0 var(--hard-shadow)}

/* ---------------- marquee: ticker tape ---------------- */
.marquee,.marquee-wrap{border-block:var(--bw) solid var(--line);padding-block:16px;overflow:hidden;background:var(--panel);max-width:100vw}
.marquee-group{display:flex;flex:none}
.m-item{display:flex;align-items:center;gap:18px;padding-inline:20px;font-family:var(--font-head);font-size:15.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.m-item .diamond{color:var(--accent);font-size:11px}
.m-item .en{font-family:var(--font-en);font-size:11px;letter-spacing:1.5px;color:var(--ink-dim)}
.marquee-track{display:flex;width:max-content;will-change:transform}
.marquee-track span{display:flex;align-items:center;gap:24px;padding-inline:24px;font-family:var(--font-head);font-size:16px;font-weight:600;color:var(--ink);white-space:nowrap}
.marquee-track span i{width:8px;height:8px;background:var(--accent);transform:rotate(45deg);flex:none}

/* ---------------- stats: punch cards ---------------- */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat-cell{position:relative;background:var(--panel);border:var(--bw) solid var(--line);box-shadow:var(--hs) var(--hs) 0 var(--hard-shadow);padding:30px 22px 26px;text-align:center;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.stat-cell:hover{transform:translate(-3px,-3px);box-shadow:calc(var(--hs) + 3px) calc(var(--hs) + 3px) 0 var(--hard-shadow)}
.stat-cell::before{content:"";position:absolute;top:0;inset-inline:0;height:8px;background:var(--titlebar);opacity:.5}
.stat-cell .val{font-family:var(--font-en);font-size:clamp(32px,3.6vw,46px);font-weight:700;color:var(--accent);line-height:1.15;text-shadow:var(--glow)}
.stat-cell .val small{font-size:.5em;vertical-align:super}
.stat-cell .lbl{color:var(--ink-dim);font-size:13.5px;margin-top:8px}

/* ---------------- cards grid ---------------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.tcard{position:relative;background:var(--panel);border:var(--bw) solid var(--line);box-shadow:var(--hs) var(--hs) 0 var(--hard-shadow);padding:46px 26px 28px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.tcard:hover{transform:translate(-4px,-4px);box-shadow:calc(var(--hs) + 4px) calc(var(--hs) + 4px) 0 var(--hard-shadow)}
.tcard::before{content:"";position:absolute;top:0;inset-inline:0;height:12px;border-bottom:var(--bw) solid var(--line);background:var(--titlebar);opacity:.55}
.tcard .ic{width:52px;height:52px;display:grid;place-items:center;background:var(--accent-soft);border:var(--bw) solid var(--line);color:var(--accent-ink);margin-bottom:20px;box-shadow:3px 3px 0 var(--hard-shadow);transition:transform .3s var(--press)}
html[data-theme="dark"] .tcard .ic{color:var(--accent-bright)}
.tcard:hover .ic{transform:rotate(-6deg) scale(1.05)}
.tcard h3{font-family:var(--font-head);font-size:18.5px;margin-bottom:10px}
.tcard p{color:var(--ink-dim);font-size:14px}
.tcard .more{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:13px;font-weight:700;color:var(--accent-ink);opacity:0;translate:0 6px;transition:.25s}
html[data-theme="dark"] .tcard .more{color:var(--accent-bright)}
.tcard:hover .more{opacity:1;translate:0 0}

/* ---------------- browser/window portfolio card ---------------- */
.bcard{position:relative;background:var(--panel);border:var(--bw) solid var(--line);box-shadow:var(--hs) var(--hs) 0 var(--hard-shadow);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.bcard:hover{transform:translate(-4px,-4px);box-shadow:calc(var(--hs) + 4px) calc(var(--hs) + 4px) 0 var(--hard-shadow)}
.bcard .hv-bar{display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:var(--bw) solid var(--line);background:var(--panel-2)}
.bcard .hv-bar .sq{width:12px;height:12px;border:var(--bw) solid var(--line);flex:none}
.bcard .hv-bar .sq.f{background:var(--accent)}
.hv-url{flex:1;text-align:center;direction:ltr;font-family:var(--font-en);font-size:11.5px;color:var(--ink-dim);background:var(--bg);border:1px solid var(--line-soft);padding:4px 12px;margin-inline:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bcard .shot{aspect-ratio:16/10;position:relative;overflow:hidden;border-bottom:var(--bw) solid var(--line);background:
  linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),var(--panel-2);
  background-size:22px 22px}
.bcard .shot .art{position:absolute;inset:0;display:grid;place-items:center;transition:scale .5s var(--ease)}
.bcard:hover .shot .art{scale:1.04}
.bcard .shot .badge{position:absolute;top:12px;inset-inline-start:12px;background:var(--panel);border:var(--bw) solid var(--line);box-shadow:2px 2px 0 var(--hard-shadow);padding:4px 12px;font-size:11px;font-weight:700;color:var(--accent-ink)}
html[data-theme="dark"] .bcard .shot .badge{color:var(--accent-bright)}
.bcard .body{padding:20px 22px 24px}
.bcard .body h3{font-family:var(--font-head);font-size:17.5px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bcard .body h3 .en-tag{font-family:var(--font-en);font-size:10px;letter-spacing:2px;color:var(--ink-dim)}
.bcard .body p{color:var(--ink-dim);font-size:13.5px;margin-top:8px}
.bcard .views{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.view-pill{font-size:12px;font-weight:700;padding:7px 15px;border:var(--bw) solid var(--line);color:var(--ink);cursor:pointer;background:var(--panel);font-family:var(--font-body);box-shadow:3px 3px 0 var(--hard-shadow);transition:.15s var(--press)}
.view-pill:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--hard-shadow);color:var(--accent-ink);background:var(--accent-soft)}
html[data-theme="dark"] .view-pill:hover{color:var(--accent-bright)}
.view-pill:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--hard-shadow)}

/* letter-tile art for portfolio shots */
.site-art{display:flex;flex-direction:column;align-items:center;gap:12px}
.site-art .tile{width:74px;height:74px;display:grid;place-items:center;background:var(--panel);border:var(--bw) solid var(--line);box-shadow:4px 4px 0 var(--hard-shadow);font-family:var(--font-head);font-size:30px;font-weight:800;color:var(--accent)}
.site-art .cap{font-size:12px;color:var(--ink-dim);font-weight:600}

/* chat mock (watag) — receipt style */
.chat-mock{width:min(340px,86%);display:flex;flex-direction:column;gap:10px}
.chat-bub{padding:10px 15px;font-size:13px;line-height:1.75;border:var(--bw) solid var(--line);box-shadow:3px 3px 0 var(--hard-shadow);background:var(--panel)}
.chat-bub.in{align-self:flex-start}
.chat-bub.out{background:var(--accent-soft);align-self:flex-end}
.chat-bub small{display:block;font-family:var(--font-en);direction:ltr;text-align:end;font-size:9.5px;color:var(--ink-dim);margin-top:4px}

/* phone mock */
.phone-mock{width:172px;aspect-ratio:9/19;border:var(--bw) solid var(--line);background:var(--panel);position:relative;padding:16px 12px;box-shadow:6px 6px 0 var(--hard-shadow)}
.phone-mock::before{content:"";position:absolute;top:7px;left:50%;translate:-50% 0;width:52px;height:5px;background:var(--line)}
.phone-mock .app-row{height:11px;background:var(--panel-2);border:1px solid var(--line-soft);margin-top:12px}
.phone-mock .app-hero{height:62px;background:var(--accent-soft);border:var(--bw) solid var(--line);margin-top:16px}
.phone-mock .app-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.phone-mock .app-grid i{height:42px;background:var(--panel-2);border:1px solid var(--line-soft)}
/* jar mock */
.jar-mock{width:120px;position:relative}
.jar-mock .lid{height:24px;background:var(--panel-2);border:var(--bw) solid var(--line);border-bottom:0}
.jar-mock .glass{height:110px;border:var(--bw) solid var(--line);background:var(--panel);display:grid;place-items:center;box-shadow:5px 5px 0 var(--hard-shadow)}
.jar-mock .glass span{font-family:var(--font-en);font-size:9px;letter-spacing:2.5px;color:var(--ink);text-align:center;line-height:1.8}

/* ---------------- spotlight ---------------- */
.spotlight{position:relative;border:var(--bw) solid var(--line);background:var(--panel);box-shadow:calc(var(--hs) + 2px) calc(var(--hs) + 2px) 0 var(--hard-shadow);padding:clamp(30px,4.6vw,58px);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,56px);align-items:center;overflow:hidden}
.spotlight::before{content:"";position:absolute;top:0;inset-inline:0;height:12px;border-bottom:var(--bw) solid var(--line);background:var(--titlebar);opacity:.55}
.spotlight .deco{position:absolute;inset-inline-end:-36px;bottom:-36px;width:180px;opacity:.07;transform:rotate(12deg);pointer-events:none}
.spot-list{display:flex;flex-direction:column;gap:13px;margin-block:24px}
.spot-list li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-dim);font-size:15px}
.spot-list li::before{content:"";flex:none;width:8px;height:8px;background:var(--accent);transform:rotate(45deg);margin-top:10px}
.spot-list li b{color:var(--ink)}

/* ---------------- plans: price tags ---------------- */
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;background:var(--panel);border:var(--bw) solid var(--line);box-shadow:var(--hs) var(--hs) 0 var(--hard-shadow);padding:50px 30px 32px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.plan:hover{transform:translate(-4px,-4px);box-shadow:calc(var(--hs) + 4px) calc(var(--hs) + 4px) 0 var(--hard-shadow)}
.plan::before{content:"";position:absolute;top:0;inset-inline:0;height:12px;border-bottom:var(--bw) solid var(--line);background:var(--titlebar);opacity:.55}
.plan.featured{border-width:3px;box-shadow:calc(var(--hs) + 2px) calc(var(--hs) + 2px) 0 var(--accent),calc(var(--hs) + 2px + 3px) calc(var(--hs) + 2px + 3px) 0 var(--hard-shadow)}
.plan.featured::before{background:repeating-linear-gradient(90deg,var(--accent) 0 8px,transparent 8px 14px);opacity:1}
.plan .flag{position:absolute;top:-16px;inset-inline-start:26px;background:var(--accent);color:var(--accent-ink);font-size:12.5px;font-weight:700;padding:6px 16px;border:var(--bw) solid var(--line);box-shadow:3px 3px 0 var(--hard-shadow)}
.plan .p-name{font-family:var(--font-head);font-size:19.5px;display:flex;align-items:baseline;gap:10px}
.plan .p-name .en-tag{font-family:var(--font-en);font-size:10.5px;letter-spacing:2.5px;color:var(--ink-dim)}
.plan .p-desc{color:var(--ink-dim);font-size:13.5px;margin-top:8px}
.plan .p-price{display:flex;align-items:baseline;gap:10px;margin-block:22px 4px}
.plan .p-price .amount{font-family:var(--font-en);font-size:52px;font-weight:700;line-height:1;color:var(--accent);text-shadow:var(--glow)}
.plan .p-price .cur{color:var(--ink-dim);font-size:14px}
.plan .p-feats{margin-block:24px;display:flex;flex-direction:column;gap:12px;flex:1}
.plan .p-feats li{display:flex;gap:11px;font-size:14px;color:var(--ink-dim);align-items:flex-start}
.plan .p-feats li::before{content:"✓";color:var(--accent);font-weight:700;flex:none}
.plan .p-feats li.off{opacity:.45}
.plan .p-feats li.off::before{content:"✕";color:var(--ink-dim)}
.plan .p-feats li b{color:var(--ink)}

/* comparison table: ledger */
.cmp-wrap{overflow-x:auto;border:var(--bw) solid var(--line);box-shadow:var(--hs) var(--hs) 0 var(--hard-shadow);background:var(--panel)}
table.cmp{width:100%;border-collapse:collapse;min-width:680px}
.cmp th,.cmp td{padding:15px 22px;text-align:start;border-bottom:1px solid var(--line-soft);font-size:14px}
.cmp thead th{font-family:var(--font-head);font-size:14.5px;background:var(--panel-2);border-bottom:var(--bw) solid var(--line)}
.cmp thead th .en-tag{display:block;font-family:var(--font-en);font-size:9.5px;letter-spacing:2px;color:var(--ink-dim);font-weight:400}
.cmp td{color:var(--ink-dim)}
.cmp td.yes{color:var(--accent);font-weight:700;font-size:16px}
.cmp td.no{opacity:.4}
.cmp tr:last-child td{border-bottom:0}
.cmp .colhead{width:34%;color:var(--ink);font-weight:600}
.cmp tbody tr{transition:background .15s}
.cmp tbody tr:hover{background:var(--accent-soft)}

/* ---------------- process: flowchart nodes ---------------- */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.steps-grid::before{content:"";position:absolute;top:30px;inset-inline:70px;border-top:2px dashed var(--line-soft)}
.step{position:relative;padding:0 20px;text-align:center}
.step .node{position:relative;z-index:1;width:60px;height:60px;margin-inline:auto;display:grid;place-items:center;background:var(--panel);border:var(--bw) solid var(--line);box-shadow:4px 4px 0 var(--hard-shadow);transform:rotate(45deg);transition:.25s var(--press)}
.step .node span{transform:rotate(-45deg);font-family:var(--font-en);font-weight:700;color:var(--accent);font-size:15px}
.step:hover .node{background:var(--accent);transform:rotate(45deg) scale(1.06)}
.step:hover .node span{color:var(--accent-ink)}
.step h4{font-family:var(--font-head);font-size:17px;margin-top:26px}
.step p{color:var(--ink-dim);font-size:13.5px;margin-top:9px;line-height:1.85}

/* ---------------- notes ---------------- */
.notes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.note{display:flex;gap:16px;background:var(--panel);border:var(--bw) solid var(--line);box-shadow:var(--hs) var(--hs) 0 var(--hard-shadow);padding:24px 26px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.note:hover{transform:translate(-3px,-3px);box-shadow:calc(var(--hs) + 3px) calc(var(--hs) + 3px) 0 var(--hard-shadow)}
.note .n-ic{flex:none;width:44px;height:44px;display:grid;place-items:center;background:var(--accent-soft);border:var(--bw) solid var(--line);color:var(--accent-ink);font-weight:700;box-shadow:3px 3px 0 var(--hard-shadow)}
html[data-theme="dark"] .note .n-ic{color:var(--accent-bright)}
.note h4{font-family:var(--font-head);font-size:16px;margin-bottom:6px}
.note p{color:var(--ink-dim);font-size:13.5px}

/* ---------------- filters ---------------- */
.filters{display:flex;gap:12px;flex-wrap:wrap}
.f-pill{padding:10px 20px;border:var(--bw) solid var(--line);background:var(--panel);color:var(--ink-dim);font-family:var(--font-body);font-weight:700;font-size:13.5px;cursor:pointer;box-shadow:3px 3px 0 var(--hard-shadow);transition:.15s var(--press)}
.f-pill:hover{color:var(--ink);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--hard-shadow)}
.f-pill:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--hard-shadow)}
.f-pill.active{background:var(--accent);color:var(--accent-ink)}

/* ---------------- FAQ ---------------- */
.faq{max-width:820px;margin-inline:auto;display:flex;flex-direction:column;gap:16px}
.faq-item{background:var(--panel);border:var(--bw) solid var(--line);box-shadow:var(--hs) var(--hs) 0 var(--hard-shadow);transition:.2s}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;background:none;border:0;color:var(--ink);font-family:var(--font-body);font-size:15.5px;font-weight:700;cursor:pointer;text-align:start}
.faq-q .fx{flex:none;width:26px;height:26px;display:grid;place-items:center;border:var(--bw) solid var(--line);color:var(--accent-ink);transition:transform .25s var(--press);font-size:15px;background:var(--accent-soft)}
html[data-theme="dark"] .faq-q .fx{color:var(--accent-bright)}
.faq-item.open .fx{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.faq-a p{padding:0 24px 22px;color:var(--ink-dim);font-size:14px}

/* ---------------- CTA band ---------------- */
.cta-band{position:relative;text-align:center;border:var(--bw) solid var(--line);box-shadow:calc(var(--hs) + 2px) calc(var(--hs) + 2px) 0 var(--hard-shadow);overflow:hidden;padding:clamp(48px,6.5vw,84px) 28px;background:var(--panel)}
.cta-band::before{content:"";position:absolute;top:0;inset-inline:0;height:12px;border-bottom:var(--bw) solid var(--line);background:var(--titlebar);opacity:.55}
.cta-band .deco-l,.cta-band .deco-r{position:absolute;width:140px;opacity:.06;pointer-events:none}
.cta-band .deco-l{inset-inline-start:-26px;bottom:-26px;transform:rotate(-12deg)}
.cta-band .deco-r{inset-inline-end:-26px;top:-6px;transform:rotate(12deg)}
.cta-band h2{font-family:var(--font-head);font-size:clamp(25px,3.4vw,42px);line-height:1.55;max-width:720px;margin-inline:auto}
.cta-band .hl{color:var(--accent)}
.cta-band p{color:var(--ink-dim);margin:16px auto 32px;max-width:520px}

/* ---------------- footer ---------------- */
.site-footer{border-top:var(--bw) solid var(--line);background:var(--panel);margin-top:clamp(80px,9vw,120px)}
.footer-main{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-block:58px}
.footer-brand .fb-logo{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.footer-brand .fb-logo img{height:58px}
.footer-brand .fb-logo b{font-family:var(--font-head);font-size:19px;display:block}
.footer-brand .fb-logo span{font-family:var(--font-en);font-size:10px;letter-spacing:3px;color:var(--ink-dim)}
.footer-brand p{color:var(--ink-dim);font-size:13.5px;max-width:300px}
.f-col h5{font-family:var(--font-head);font-size:15px;margin-bottom:16px;display:inline-block;border-bottom:var(--bw) solid var(--accent);padding-bottom:5px}
.f-col ul{display:flex;flex-direction:column;gap:10px}
.f-col a{color:var(--ink-dim);font-size:13.5px;transition:.2s;display:inline-flex;align-items:center;gap:8px}
.f-col a:hover{color:var(--accent-ink)}
html[data-theme="dark"] .f-col a:hover{color:var(--accent-bright)}
.f-col a::before{content:"";width:5px;height:5px;background:var(--accent);transform:rotate(45deg);opacity:0;transition:.2s}
.f-col a:hover::before{opacity:1}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:20px;border-top:var(--bw) solid var(--line-soft);color:var(--ink-dim);font-size:13px;flex-wrap:wrap}
.socials{display:flex;gap:10px}
.socials a{width:36px;height:36px;display:grid;place-items:center;border:var(--bw) solid var(--line);background:var(--panel);color:var(--ink-dim);box-shadow:3px 3px 0 var(--hard-shadow);transition:.15s var(--press)}
.socials a:hover{color:var(--accent-ink);background:var(--accent-soft);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--hard-shadow)}
html[data-theme="dark"] .socials a:hover{color:var(--accent-bright)}

/* WhatsApp float: retro square */
.wa-float{position:fixed;bottom:26px;inset-inline-start:26px;z-index:400;width:56px;height:56px;background:var(--accent);border:var(--bw) solid var(--line);display:grid;place-items:center;color:var(--accent-ink);box-shadow:var(--hs) var(--hs) 0 var(--hard-shadow);transition:.15s var(--press)}
.wa-float:hover{transform:translate(-2px,-2px);box-shadow:calc(var(--hs) + 2px) calc(var(--hs) + 2px) 0 var(--hard-shadow)}
.wa-float:active{transform:translate(var(--hs),var(--hs));box-shadow:0 0 0 var(--hard-shadow)}

/* ---------------- page hero ---------------- */
.page-hero{padding-top:clamp(150px,18vh,190px);padding-bottom:clamp(36px,5vw,60px);position:relative}
.breadcrumbs{display:flex;align-items:center;gap:10px;color:var(--ink-dim);font-size:13px;margin-bottom:22px;font-weight:600}
.breadcrumbs i{width:5px;height:5px;background:var(--accent);transform:rotate(45deg)}
.breadcrumbs a:hover{color:var(--accent-ink)}
html[data-theme="dark"] .breadcrumbs a:hover{color:var(--accent-bright)}

/* hand-drawn doodles layer */
.doodles{position:absolute;inset:0;pointer-events:none;z-index:-1}
.doodle{position:absolute;color:var(--ink);opacity:.16}
.doodle svg{width:100%;height:auto}

/* reveal helpers */
.gs-reveal,.gs-item{will-change:transform,opacity}
html.no-js .gs-reveal,html.no-js .gs-item{opacity:1!important;transform:none!important}

/* ---------------- responsive ---------------- */
@media(max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:70px}
  .hero{padding-top:150px;min-height:auto;padding-bottom:70px}
  .float-card.fc1{inset-inline-start:0}
  .float-card.fc2{inset-inline-end:0}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .steps-grid{grid-template-columns:repeat(2,1fr);gap:44px}
  .steps-grid::before{display:none}
  .footer-main{grid-template-columns:1fr 1fr}
  .spotlight{grid-template-columns:1fr}
  .stamp{display:none}
}
@media(max-width:720px){
  .main-nav,.header-actions .btn{display:none}
  .burger{display:block}
  .grid-3,.grid-2,.plans-grid,.notes-grid{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr}
  .sec-head.split{flex-direction:column;align-items:flex-start}
  .footer-main{grid-template-columns:1fr;gap:32px}
  .hero-meta{gap:14px}
  .sheet-frame{display:none}
  .site-header{top:0;inset-inline:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .hero h1 .line>span{transform:none!important}
}

/* ================= v3.1 — LIVE PREVIEWS + EXTRAS ================= */
/* live mini-render inside portfolio cards */
.live-wrap{position:absolute;inset:0;overflow:hidden;direction:ltr;background:transparent}
.live-wrap iframe{width:1280px;height:800px;border:0;transform-origin:top left;pointer-events:none;background:#fff}
.shot .shield{position:absolute;inset:0;z-index:3;cursor:pointer;background:transparent}
.shot .live-tag{position:absolute;bottom:12px;inset-inline-end:12px;z-index:4;background:var(--panel);border:var(--bw) solid var(--line);box-shadow:2px 2px 0 var(--hard-shadow);padding:4px 12px;font-size:10.5px;font-weight:700;color:var(--accent-ink);display:flex;align-items:center;gap:7px}
html[data-theme="dark"] .shot .live-tag{color:var(--accent-bright)}
.shot .live-tag::before{content:"";width:7px;height:7px;background:var(--accent);animation:kpulse 1.6s steps(2) infinite}

/* live preview modal — retro window */
.live-modal{position:fixed;inset:0;z-index:960;display:none;align-items:center;justify-content:center;padding:22px}
.live-modal.open{display:flex}
.live-modal .lm-backdrop{position:absolute;inset:0;background:rgba(10,19,29,.62)}
html[data-theme="dark"] .live-modal .lm-backdrop{background:rgba(0,0,0,.72)}
.live-modal .lm-win{position:relative;width:min(1100px,96vw);background:var(--panel);border:var(--bw) solid var(--line);box-shadow:10px 10px 0 var(--hard-shadow);display:flex;flex-direction:column;max-height:92vh}
.live-modal .win-bar{cursor:default}
.live-modal .lm-close{cursor:pointer;transition:.15s var(--press);background:var(--panel)}
.live-modal .lm-close:hover{background:#E0655F;color:#fff}
.live-modal .lm-body{position:relative;height:min(66vh,640px);background:#fff}
.live-modal .lm-body iframe{width:100%;height:100%;border:0}
.live-modal .lm-note{position:absolute;inset-inline:0;top:46%;text-align:center;color:#8A94A0;font-size:13px;z-index:-1}
.live-modal .lm-foot{display:flex;gap:12px;justify-content:space-between;align-items:center;padding:12px 16px;border-top:var(--bw) solid var(--line);flex-wrap:wrap}
.live-modal .lm-foot .hint{font-size:12px;color:var(--ink-dim)}

/* draggable hero windows */
.float-card .win-bar{cursor:grab}
.float-card.dragging{z-index:60}
.float-card.dragging .win-bar{cursor:grabbing}

/* back to top */
.to-top{position:fixed;bottom:26px;inset-inline-end:26px;z-index:400;width:48px;height:48px;background:var(--panel);border:var(--bw) solid var(--line);box-shadow:4px 4px 0 var(--hard-shadow);display:grid;place-items:center;color:var(--ink);cursor:pointer;opacity:0;visibility:hidden;transition:.25s;font-size:18px}
.to-top.show{opacity:1;visibility:visible}
.to-top:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--hard-shadow);color:var(--accent-ink)}
html[data-theme="dark"] .to-top:hover{color:var(--accent-bright)}
.to-top:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--hard-shadow)}

/* CRT power flick on theme switch */
html.crt-flick body{animation:crtflick .32s steps(3)}
@keyframes crtflick{0%{filter:brightness(2.4) saturate(0)}40%{filter:brightness(.2)}100%{filter:none}}

/* Script-failure safety fallback */
.hero h1 .line>span{display:block}
.stat-cell .val{min-height:1.2em}
.gs-reveal,.gs-item{opacity:1;transform:none}

/* Booking UI */
.booking-win{max-width:820px;margin-inline:auto}
.booking-form{display:flex;flex-direction:column;gap:20px;padding:28px}
.booking-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.booking-grid{grid-template-columns:1fr}}
.field-group{display:flex;flex-direction:column;gap:7px;text-align:start}
.field-group.full{grid-column:1 / -1}
.field-group label{font-family:var(--font-head);font-size:13.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:6px}
.field-group label .req{color:#E0655F}
.form-input,.form-select,.form-textarea{
  width:100%;font-family:var(--font-body);font-size:14.5px;padding:12px 16px;
  background:var(--bg);color:var(--ink);border:var(--bw) solid var(--line);
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.08);transition:border-color .2s,box-shadow .2s;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:2px 2px 0 var(--accent);
}
.form-textarea{resize:vertical;min-height:110px}
.booking-status{display:none;margin-top:14px;padding:12px 16px;font-family:var(--font-en);font-size:13px;border:var(--bw) solid var(--line);line-height:1.5}
.booking-status.show{display:block}
.booking-status.success{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
html[data-theme="dark"] .booking-status.success{color:var(--accent-bright)}
.booking-status.error{background:rgba(224,101,95,.15);border-color:#E0655F;color:#E0655F}
.honeypot-field{display:none!important}

/* Blog & Single Post System */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;margin-top:32px}
.post-card.win{display:flex;flex-direction:column;height:100%}
.post-card .win-body{padding:24px;display:flex;flex-direction:column;flex:1}
.post-card h3{font-family:var(--font-head);font-size:20px;margin-bottom:12px;line-height:1.35}
.post-card h3 a{color:var(--ink);text-decoration:none;transition:color .2s}
.post-card h3 a:hover{color:var(--accent-ink)}
html[data-theme="dark"] .post-card h3 a:hover{color:var(--accent-bright)}
.post-card .post-excerpt{color:var(--ink-dim);font-size:14px;line-height:1.6;margin-bottom:20px;flex:1}
.post-card .post-footer{display:flex;align-items:center;justify-content:space-between;border-top:var(--bw) solid var(--line);padding-top:14px;margin-top:auto}
.single-post-win{max-width:860px;margin-inline:auto}
.single-post-win .win-body{padding:clamp(24px,5vw,48px)}
.post-meta-strip{display:flex;flex-wrap:wrap;gap:16px;align-items:center;color:var(--ink-dim);font-size:13px;margin-bottom:24px;padding-bottom:16px;border-bottom:var(--bw) dashed var(--line)}
.post-content{font-size:16px;line-height:1.8;color:var(--ink)}
.post-content p{margin-bottom:1.5em}
.post-content h2,.post-content h3{font-family:var(--font-head);margin-top:1.8em;margin-bottom:.8em;color:var(--ink)}
.post-content ul,.post-content ol{margin-bottom:1.5em;padding-inline-start:24px}
.post-content blockquote{border-inline-start:4px solid var(--accent);padding:14px 20px;background:var(--panel-2);margin-bottom:1.5em;font-style:italic}
.post-content img{max-width:100%;height:auto;border:var(--bw) solid var(--line);box-shadow:4px 4px 0 var(--hard-shadow);margin:1.5em 0}
.retro-pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:48px}
.retro-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;font-family:var(--font-head);font-size:14px;font-weight:700;border:var(--bw) solid var(--line);background:var(--panel);color:var(--ink);box-shadow:3px 3px 0 var(--hard-shadow);text-decoration:none}
.retro-pagination .page-numbers.current{background:var(--accent);color:var(--accent-ink)}
.retro-pagination .page-numbers:hover:not(.current){transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--hard-shadow)}

/* ============================================================
   MOBILE OVERFLOW HOTFIX — solutions & contact (2026-08-18)
   ============================================================ */
@media (max-width: 640px) {
	.steps-grid,
	.grid-3,
	.grid-2 {
		grid-template-columns: 1fr !important;
		row-gap: 18px;
	}
	.tcard {
		grid-template-columns: 1fr !important;
		max-width: 100%;
		min-width: 0;
	}
	.step {
		padding: 12px 8px;
	}
	.spotlight .deco,
	.cta-band .deco-l,
	.cta-band .deco-r {
		display: none !important;
	}
}

/* Global safety net: nothing may widen the page sideways. */
html,
body {
	overflow-x: clip;
}

/* HEADER BRAND FIT — mobile (2026-08-31) */
@media (max-width: 720px) {
	.site-header .container { gap: 10px; padding: 12px 14px; }
	.brand { gap: 8px; min-width: 0; }
	.brand img { height: 34px; }
	.brand .brand-name { min-width: 0; }
	.brand .brand-name b { font-size: 15px; letter-spacing: .2px; white-space: nowrap; }
	.brand .brand-name span { font-size: 8px; letter-spacing: 1.6px; white-space: nowrap; }
	.header-actions { gap: 7px; }
}
@media (max-width: 720px) {
	.brand .brand-name span { display: none; }
	.brand .brand-name b { font-size: 16px; }
}

/* HEADER CONTROLS SHRINK — mobile (2026-08-31 pass 2) */
@media (max-width: 720px) {
	.lang-switch,
	.theme-switch {
		font-size: 10px;
		letter-spacing: .3px;
		padding: 6px 9px;
		box-shadow: 2px 2px 0 var(--hard-shadow);
	}
	.burger { padding: 7px 8px; box-shadow: 2px 2px 0 var(--hard-shadow); }
	.burger span { width: 17px; }
	.site-header .container { gap: 8px; padding: 12px 12px; }
}