/* ============================================================
   BOY MOTORBIKE — NEON GARAGE v2
   Night Chalong after the rain: deep violet dark, three neons.
   ============================================================ */

:root{
  --bg:#07060f;
  --bg2:#0d0a1a;
  --panel:rgba(18,14,34,.72);
  --fg:#f4f2ff;
  --yellow:#ffd400;
  --cyan:#00e5ff;
  --magenta:#ff2ec4;
  --t55:rgba(244,242,255,.55);
  --t70:rgba(244,242,255,.72);
  --t85:rgba(244,242,255,.86);
  --line:rgba(0,229,255,.22);
  --line-y:rgba(255,212,0,.35);
  --line-m:rgba(255,46,196,.3);
  --px:20px;
  --font:'Chakra Petch','Inter',system-ui,sans-serif;
  --body:'Inter','Noto Sans Thai',system-ui,sans-serif;
}
@media (min-width:640px){ :root{ --px:32px; } }
@media (min-width:768px){ :root{ --px:48px; } }

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html,body{ background:var(--bg); }
body{
  font-family:var(--body); color:var(--fg);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100vh;
}
::selection{ background:rgba(255,212,0,.35); }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }

h1,h2,h3,.disp{ font-family:var(--font); }

/* film grain + scanlines over everything */
body::after{
  content:""; position:fixed; inset:0; z-index:96; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}

/* ---------- type utils ---------- */
.mono{ font-family:var(--font); text-transform:uppercase; letter-spacing:.18em; }
.k-cyan{ color:var(--cyan); } .k-mag{ color:var(--magenta); } .k-yel{ color:var(--yellow); }

/* neon text */
.neon-y{ color:#fff8d9; text-shadow:0 0 6px rgba(255,212,0,.9),0 0 18px rgba(255,212,0,.65),0 0 42px rgba(255,170,0,.45); }
.neon-c{ color:#dffaff; text-shadow:0 0 6px rgba(0,229,255,.9),0 0 18px rgba(0,229,255,.6),0 0 40px rgba(0,180,255,.4); }
.neon-m{ color:#ffe1f6; text-shadow:0 0 6px rgba(255,46,196,.9),0 0 18px rgba(255,46,196,.6),0 0 40px rgba(255,46,196,.4); }

@keyframes flick{
  0%,100%{ opacity:1; } 92%{ opacity:1; } 93%{ opacity:.35; } 94%{ opacity:1; } 96%{ opacity:.6; } 97%{ opacity:1; }
}
@keyframes flick2{
  0%,100%{ opacity:1; } 41%{ opacity:1; } 42%{ opacity:.25; } 43%{ opacity:1; } 45%{ opacity:.7; } 46%{ opacity:1; }
}
.flick{ animation:flick 6.5s infinite; }
.flick2{ animation:flick2 9s infinite; }

/* ---------- reveal ---------- */
.rv{ opacity:0; transform:translateY(30px); transition:all .7s ease-out; will-change:transform; }
.rv.on{ opacity:1; transform:translateY(0); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:6px;
  font-family:var(--font); font-weight:600; font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  transition:all .3s; white-space:nowrap; line-height:1;
}
.btn svg{ width:15px; height:15px; }
.btn-y{
  background:var(--yellow); color:#14100a;
  box-shadow:0 0 14px rgba(255,212,0,.45), 0 0 40px rgba(255,212,0,.18), inset 0 -2px 0 rgba(0,0,0,.25);
}
.btn-y:hover{ background:#ffe14d; box-shadow:0 0 22px rgba(255,212,0,.7),0 0 60px rgba(255,212,0,.3); transform:translateY(-1px); }
.btn-c{
  border:1px solid rgba(0,229,255,.55); color:#dffaff; background:rgba(0,229,255,.07);
  box-shadow:0 0 12px rgba(0,229,255,.25), inset 0 0 12px rgba(0,229,255,.08);
}
.btn-c:hover{ background:rgba(0,229,255,.16); box-shadow:0 0 20px rgba(0,229,255,.5); transform:translateY(-1px); }
.btn-m{
  border:1px solid rgba(255,46,196,.55); color:#ffe1f6; background:rgba(255,46,196,.07);
  box-shadow:0 0 12px rgba(255,46,196,.25), inset 0 0 12px rgba(255,46,196,.08);
}
.btn-m:hover{ background:rgba(255,46,196,.16); box-shadow:0 0 20px rgba(255,46,196,.5); }

/* ---------- badge / chip ---------- */
.badge{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--line-y); border-left:3px solid var(--yellow);
  background:rgba(255,212,0,.06);
  padding:8px 14px; font-family:var(--font);
  font-size:11px; text-transform:uppercase; letter-spacing:.18em;
  box-shadow:0 0 14px rgba(255,212,0,.12), inset 0 0 20px rgba(255,212,0,.05);
}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:999px; background:rgba(0,229,255,.05);
  padding:8px 14px; font-family:var(--font); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--t85);
  transition:all .3s;
}
button.chip:hover{ background:rgba(0,229,255,.12); box-shadow:0 0 14px rgba(0,229,255,.3); }
.chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--t55); transition:all .3s; }
.chip.live .dot{ background:var(--yellow); box-shadow:0 0 10px var(--yellow); }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  background:rgba(7,6,15,.55);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(0,229,255,.18);
  box-shadow:0 1px 0 rgba(255,46,196,.12), 0 10px 40px rgba(0,0,0,.4);
  transition:background .4s;
}
.nav.solid{ background:rgba(7,6,15,.88); }
.nav-in{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px var(--px); }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font); font-weight:700; font-size:17px; letter-spacing:.04em; }
.brand img{ height:40px; width:auto; filter:drop-shadow(0 0 8px rgba(255,212,0,.35)); }
.brand b{ color:var(--yellow); }
.nav-links{ display:none; gap:26px; }
.nav-links a{ font-family:var(--font); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--t85); position:relative; padding:4px 0; }
.nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--cyan); box-shadow:0 0 8px var(--cyan); transition:right .3s; }
.nav-links a:hover{ color:#fff; } .nav-links a:hover::after{ right:0; }
.nav-links a sup{ font-size:9px; color:var(--magenta); }
.nav-right{ display:flex; align-items:center; gap:10px; }
.lang{ display:flex; gap:2px; border:1px solid var(--line); border-radius:6px; padding:2px; background:rgba(0,0,0,.3); }
.lang a{ font-family:var(--font); font-size:10px; letter-spacing:.1em; padding:6px 8px; border-radius:4px; color:var(--t70); }
.lang a.cur{ background:var(--yellow); color:#14100a; font-weight:700; box-shadow:0 0 10px rgba(255,212,0,.5); }
.nav-cta{
  font-family:var(--font); font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  border:1px solid rgba(255,212,0,.5); color:var(--yellow); border-radius:6px; padding:9px 16px;
  box-shadow:0 0 10px rgba(255,212,0,.2), inset 0 0 14px rgba(255,212,0,.06);
  transition:all .3s; white-space:nowrap;
}
.nav-cta:hover{ background:rgba(255,212,0,.12); box-shadow:0 0 18px rgba(255,212,0,.45); }
@media (min-width:960px){ .nav-links{ display:flex; } }
@media (max-width:479px){
  .nav-in{ padding:8px 12px; gap:8px; }
  .brand{ font-size:14px; } .brand img{ height:32px; }
  .lang a{ padding:5px 6px; }
  .nav-cta{ padding:8px 10px; font-size:10px; }
}

/* ============================================================
   HERO — animated banner scene
   ============================================================ */
.hero{
  position:relative; min-height:100vh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--bg);
}
@supports (height:100svh){ .hero{ min-height:100svh; } }
.hero-scene{ position:absolute; inset:0; overflow:hidden; }
.hero-scene .img-wrap{
  position:absolute; inset:-4%;
  animation:kenburns 26s ease-in-out infinite alternate;
  will-change:transform;
}
.hero-scene img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
@keyframes kenburns{
  0%{ transform:scale(1.02) translate(0,0); }
  100%{ transform:scale(1.12) translate(-1.5%,-2%); }
}
/* neon patches over scene zones (screen blend) */
.np{
  position:absolute; pointer-events:none; mix-blend-mode:screen; filter:blur(14px);
}
.np-mag{ background:radial-gradient(closest-side, rgba(255,46,196,.75), transparent 70%); animation:flick2 7s infinite; }
.np-cyan{ background:radial-gradient(closest-side, rgba(0,229,255,.7), transparent 70%); animation:flick 5.5s infinite; }
.np-yel{ background:radial-gradient(closest-side, rgba(255,212,0,.55), transparent 70%); animation:flick 8s infinite; }
.np-org{ background:radial-gradient(closest-side, rgba(255,138,0,.6), transparent 70%); }
/* light sweep */
.sweep{
  position:absolute; top:-20%; bottom:-20%; width:34%; left:-40%;
  background:linear-gradient(100deg, transparent 20%, rgba(180,240,255,.14) 48%, rgba(255,255,255,.2) 50%, rgba(255,210,240,.12) 52%, transparent 80%);
  transform:skewX(-14deg); mix-blend-mode:screen;
  animation:sweep 9s ease-in-out infinite;
}
@keyframes sweep{ 0%,55%{ left:-45%; } 90%,100%{ left:125%; } }
/* rain */
.rain, .rain2{ position:absolute; inset:-60px 0 0; pointer-events:none; mix-blend-mode:screen; }
.rain{
  background:repeating-linear-gradient(107deg, transparent 0 7px, rgba(180,220,255,.16) 7px 8px, transparent 8px 14px);
  background-size:120px 160px; opacity:.35;
  animation:rainfall .8s linear infinite;
}
.rain2{
  background:repeating-linear-gradient(105deg, transparent 0 12px, rgba(160,240,255,.1) 12px 13px, transparent 13px 26px);
  background-size:200px 260px; opacity:.28;
  animation:rainfall 1.5s linear infinite;
}
@keyframes rainfall{ 0%{ background-position:0 -160px; } 100%{ background-position:-40px 160px; } }
/* smoke */
.smoke{
  position:absolute; width:340px; height:200px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(210,200,255,.13), transparent 70%);
  filter:blur(22px); mix-blend-mode:screen;
  animation:smokedrift 14s ease-in-out infinite;
}
@keyframes smokedrift{
  0%{ transform:translate(0,10px) scale(1); opacity:.5; }
  50%{ transform:translate(60px,-30px) scale(1.25); opacity:.9; }
  100%{ transform:translate(120px,-60px) scale(1.5); opacity:0; }
}
/* sparks canvas layer handled in JS via absolutely positioned divs */
.spark{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:#ffdf7e; box-shadow:0 0 8px 2px rgba(255,170,40,.9);
  mix-blend-mode:screen; pointer-events:none;
}
/* scene shading for legibility */
.hero-shade{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(7,6,15,.72), transparent 26%, transparent 55%, rgba(7,6,15,.92) 92%),
    radial-gradient(120% 60% at 50% 108%, rgba(7,6,15,.9), transparent 60%);
}
.hero-vign{ position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 220px rgba(0,0,0,.75); }

/* hero content */
.hero-in{
  position:relative; z-index:5;
  padding:0 var(--px) 84px;
  display:flex; flex-direction:column; gap:20px; align-items:flex-start;
}
.hero-thai{
  font-family:var(--font); font-size:clamp(14px,2.2vw,20px); letter-spacing:.5em; text-transform:uppercase;
}
.hero-h1{
  font-size:clamp(46px,9.4vw,110px); font-weight:700; font-style:italic;
  line-height:.95; letter-spacing:.01em; text-transform:uppercase;
}
.hero-h1 .l2{ display:block; }
.hero-sub{ max-width:560px; font-size:clamp(15px,1.6vw,18px); line-height:1.65; color:var(--t85); text-shadow:0 2px 10px rgba(0,0,0,.8); }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
.hero-badges{ display:flex; flex-wrap:wrap; gap:10px; }

/* ============================================================
   ENGINE BACKDROP (fixed, breathing)
   ============================================================ */
#stage{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .6s;
  background:
    radial-gradient(55% 42% at 50% 46%, rgba(0,229,255,.05), transparent 70%),
    radial-gradient(40% 30% at 50% 50%, rgba(255,46,196,.05), transparent 70%),
    var(--bg);
}
#stage.on{ opacity:1; }
#stage::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(7,6,15,.8), transparent 20%, transparent 74%, rgba(7,6,15,.86)),
    radial-gradient(92% 92% at 50% 50%, transparent 52%, rgba(7,6,15,.6));
}
#engine-wrap{
  position:relative; width:min(94vw,660px);
  transition:opacity .5s; will-change:transform,opacity,filter;
  transform-style:preserve-3d;
}
#engine-wrap svg{ width:100%; height:auto; display:block; }

#hud{ position:fixed; z-index:40; left:var(--px); bottom:16px; display:flex; gap:8px; }
#rpm-chip{ min-width:118px; font-variant-numeric:tabular-nums; }
@media (max-width:639px){
  #hud{ bottom:12px; } .chip{ padding:7px 10px; font-size:9px; } #rpm-chip{ min-width:96px; }
}

/* ============================================================
   SECTIONS
   ============================================================ */
.over{ position:relative; z-index:10; }
.section{ position:relative; padding:110px var(--px) 70px; max-width:1280px; margin:0 auto; }
.sec-head{ display:flex; flex-direction:column; gap:18px; margin-bottom:44px; }
@media (min-width:820px){ .sec-head{ flex-direction:row; align-items:flex-end; justify-content:space-between; } }
.h2{
  font-size:clamp(38px,6.4vw,68px); font-weight:700; font-style:italic; text-transform:uppercase;
  line-height:1.02; letter-spacing:.01em;
}
.h2 small{ display:block; font-size:clamp(11px,1.4vw,13px); font-weight:600; letter-spacing:.4em; margin-bottom:12px; font-style:normal; }
.sec-copy{ max-width:400px; font-size:16px; line-height:1.7; color:var(--t70); }
@media (min-width:820px){ .sec-copy{ text-align:right; } }

/* ticker */
.ticker{ position:relative; z-index:10; border-top:1px solid var(--line-m); border-bottom:1px solid var(--line);
  background:rgba(10,8,20,.7); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); overflow:hidden; padding:12px 0; }
.ticker-in{ display:flex; gap:48px; width:max-content; animation:tick 26s linear infinite; }
.ticker span{ font-family:var(--font); font-size:13px; letter-spacing:.3em; text-transform:uppercase; color:var(--t70); white-space:nowrap; }
.ticker b{ color:var(--yellow); font-weight:600; }
@keyframes tick{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }

/* process steps */
.steps{ display:grid; gap:12px; grid-template-columns:1fr; margin:34px 0 8px; }
@media (min-width:640px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.step{
  border:1px solid var(--line); background:var(--panel);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  padding:16px; position:relative; overflow:hidden;
}
.step::before{ content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--cyan); box-shadow:0 0 12px var(--cyan); }
.step b{ font-family:var(--font); font-size:15px; letter-spacing:.06em; text-transform:uppercase; display:block; margin-bottom:6px; }
.step span{ font-size:13px; color:var(--t70); line-height:1.55; }
.step .n{ position:absolute; right:10px; top:6px; font-family:var(--font); font-size:34px; font-weight:700; color:rgba(0,229,255,.14); }

/* services grid */
.svc-grid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:640px){ .svc-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .svc-grid{ grid-template-columns:repeat(3,1fr); } }
.svc-card{
  position:relative; border:1px solid var(--line); background:var(--panel);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  padding:22px; overflow:hidden; transition:all .35s;
}
.svc-card:hover{ border-color:rgba(255,212,0,.6); box-shadow:0 0 24px rgba(255,212,0,.14), inset 0 0 30px rgba(255,212,0,.04); transform:translateY(-4px); }
.svc-card .idx{ position:absolute; top:10px; right:14px; font-family:var(--font); font-size:30px; font-weight:700; color:rgba(255,46,196,.22); }
.svc-card h3{ font-size:18px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin:14px 0 10px; }
.svc-card p{ font-size:13.5px; line-height:1.65; color:var(--t70); }
.svc-card .ico{ width:44px; height:44px; color:var(--yellow); filter:drop-shadow(0 0 8px rgba(255,212,0,.45)); transition:transform .35s; }
.svc-card:hover .ico{ transform:rotate(-8deg) scale(1.08); }
.svc-card ul{ margin:10px 0 0 2px; list-style:none; }
.svc-card li{ font-size:12.5px; color:var(--t55); padding:3px 0 3px 16px; position:relative; }
.svc-card li::before{ content:"›"; position:absolute; left:0; color:var(--cyan); }

/* works */
.works-grid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:640px){ .works-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .works-grid{ grid-template-columns:repeat(3,1fr); } }
.work{
  position:relative; border:1px solid var(--line-m); background:var(--panel); overflow:hidden;
  transition:all .35s;
}
.work:hover{ border-color:rgba(255,46,196,.65); box-shadow:0 0 26px rgba(255,46,196,.18); transform:translateY(-4px); }
.work .ph{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.work .ph img{ width:100%; height:100%; object-fit:cover; transition:transform .6s; filter:saturate(1.05) contrast(1.04); }
.work:hover .ph img{ transform:scale(1.06); }
.work .ph::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(7,6,15,.85)); }
.work .tag{
  position:absolute; top:10px; left:10px; z-index:2;
  font-family:var(--font); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  background:rgba(7,6,15,.8); border:1px solid var(--line-y); color:var(--yellow); padding:5px 9px;
}
.work .bd{ padding:16px 18px 18px; }
.work h3{ font-size:16px; font-weight:600; letter-spacing:.03em; margin-bottom:8px; text-transform:uppercase; }
.work p{ font-size:13px; line-height:1.6; color:var(--t70); }
.work .res{ margin-top:10px; font-family:var(--font); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); }
.work.slot .ph{ display:grid; place-items:center; border-bottom:1px dashed var(--line); background:repeating-linear-gradient(45deg, rgba(0,229,255,.03) 0 14px, transparent 14px 28px); }
.work.slot .ph span{ font-family:var(--font); font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:var(--t55); text-align:center; line-height:2; }

/* about Boy */
.about{ display:flex; flex-direction:column; gap:44px; align-items:center; }
@media (min-width:960px){ .about{ flex-direction:row; align-items:center; gap:60px; } }
.boy-holder{ position:relative; width:min(74vw,360px); flex:none; }
.boy-holder img, .boy-holder svg{ width:100%; height:auto; }
.about-txt{ max-width:600px; }
.about-txt .quote{
  margin:24px 0; padding:16px 20px; border-left:3px solid var(--yellow);
  background:rgba(255,212,0,.05); font-style:italic; font-size:14.5px; line-height:1.65; color:var(--t85);
  box-shadow:inset 0 0 30px rgba(255,212,0,.04);
}
.about-txt .quote small{ display:block; margin-top:8px; font-style:normal; font-family:var(--font); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--t55); }
.about-scene{ margin-top:44px; position:relative; border:1px solid var(--line); overflow:hidden; }
.about-scene img{ width:100%; }
.about-scene figcaption{ position:absolute; left:0; right:0; bottom:0; padding:36px 16px 12px; background:linear-gradient(transparent, rgba(7,6,15,.9)); font-size:12px; color:var(--t85); }

/* reviews */
.rev-grid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:640px){ .rev-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .rev-grid{ grid-template-columns:repeat(4,1fr); } }
.rev-card{
  border:1px solid var(--line); background:var(--panel);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  padding:18px; display:flex; flex-direction:column; gap:10px; transition:all .3s; position:relative; overflow:hidden;
}
.rev-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--cyan), var(--magenta)); opacity:.5; }
.rev-card:hover{ border-color:rgba(0,229,255,.5); box-shadow:0 0 22px rgba(0,229,255,.14); transform:translateY(-3px); }
.rev-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.rev-name{ font-family:var(--font); font-size:13px; font-weight:600; letter-spacing:.05em; }
.rev-stars{ color:var(--yellow); font-size:12px; letter-spacing:2px; text-shadow:0 0 8px rgba(255,212,0,.6); white-space:nowrap; }
.rev-txt{ font-size:13px; line-height:1.65; color:var(--t85); }
.rev-meta{ margin-top:auto; font-family:var(--font); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--t55); }
.rev-foot{ margin-top:28px; display:flex; justify-content:center; }

/* visit */
.visit-grid{ display:flex; flex-direction:column; gap:20px; }
@media (min-width:960px){ .visit-grid{ flex-direction:row; align-items:stretch; } }
.visit-photos{ flex:1.05; display:grid; gap:14px; grid-template-rows:auto auto; }
.vp{ position:relative; border:1px solid var(--line-m); overflow:hidden; }
.vp img{ width:100%; height:100%; object-fit:cover; }
.vp figcaption{ position:absolute; left:0; right:0; bottom:0; padding:30px 14px 10px; background:linear-gradient(transparent, rgba(7,6,15,.9)); font-size:12px; color:var(--t85); }
.visit-col{ flex:1; display:flex; flex-direction:column; gap:12px; }
.info-card{
  border:1px solid var(--line); background:var(--panel);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  padding:16px 18px; display:flex; gap:14px; align-items:flex-start;
}
.info-card svg{ width:18px; height:18px; color:var(--yellow); flex:none; margin-top:2px; filter:drop-shadow(0 0 6px rgba(255,212,0,.5)); }
.info-card b{ display:block; font-family:var(--font); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--t55); font-weight:600; margin-bottom:5px; }
.info-card div{ font-size:14px; line-height:1.55; }
.info-card a{ border-bottom:1px solid var(--line); transition:all .3s; }
.info-card a:hover{ color:var(--cyan); border-color:var(--cyan); }
.map-wrap{ border:1px solid var(--line); overflow:hidden; flex:1; min-height:240px; position:relative; }
.map-wrap iframe{ width:100%; height:100%; min-height:240px; border:0; filter:invert(90%) hue-rotate(200deg) saturate(.85) brightness(.9) contrast(1.05); }

/* blog cards */
.blog-grid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:768px){ .blog-grid{ grid-template-columns:repeat(3,1fr); } }
.blog-card{
  display:flex; flex-direction:column; gap:12px; border:1px solid var(--line); background:var(--panel);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  padding:22px; transition:all .3s;
}
.blog-card:hover{ border-color:rgba(255,212,0,.55); box-shadow:0 0 22px rgba(255,212,0,.12); transform:translateY(-3px); }
.blog-card .k{ font-family:var(--font); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--magenta); }
.blog-card h3{ font-size:18px; font-weight:600; line-height:1.3; }
.blog-card p{ font-size:13.5px; line-height:1.6; color:var(--t70); }
.blog-card .more{ margin-top:auto; display:inline-flex; align-items:center; gap:6px; font-family:var(--font); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); }
.blog-card .more svg{ width:14px; height:14px; transition:transform .3s; }
.blog-card:hover .more svg{ transform:translateX(3px); }

/* footer */
footer{
  position:relative; z-index:10; margin-top:60px;
  border-top:1px solid var(--line-m);
  background:linear-gradient(180deg, rgba(10,8,20,.9), rgba(7,6,15,.98));
  padding:56px var(--px) 30px;
}
.foot-grid{ display:flex; flex-direction:column; gap:36px; max-width:1280px; margin:0 auto; }
@media (min-width:820px){ .foot-grid{ flex-direction:row; justify-content:space-between; } }
.foot-brand img{ width:230px; filter:drop-shadow(0 0 14px rgba(255,212,0,.25)); }
.foot-brand p{ margin-top:16px; font-size:13px; color:var(--t55); max-width:280px; line-height:1.65; }
.foot-col b{ display:block; font-family:var(--font); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--t55); margin-bottom:14px; }
.foot-col{ display:flex; flex-direction:column; }
.foot-col a{ font-size:14px; color:var(--t85); padding:5px 0; transition:color .3s; }
.foot-col a:hover{ color:var(--yellow); }
.foot-base{
  max-width:1280px; margin:40px auto 0; padding-top:20px; padding-bottom:60px;
  border-top:1px solid rgba(0,229,255,.12);
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
  font-family:var(--font); font-size:10.5px; letter-spacing:.1em; color:var(--t55);
}

/* chat chip */
#chat{ position:fixed; right:16px; bottom:16px; z-index:60; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
#chat-pop{
  display:none; flex-direction:column; gap:8px;
  border:1px solid var(--line); background:rgba(10,8,20,.95);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  padding:14px; width:236px; box-shadow:0 18px 50px rgba(0,0,0,.7), 0 0 30px rgba(0,229,255,.1);
}
#chat.open #chat-pop{ display:flex; }
#chat-pop .t{ font-size:12px; color:var(--t70); line-height:1.5; padding:2px 4px 6px; }
.chat-a{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:1px solid var(--line); background:rgba(0,229,255,.04); font-size:13px; font-weight:500; transition:all .3s;
}
.chat-a:hover{ background:rgba(0,229,255,.12); box-shadow:0 0 12px rgba(0,229,255,.2); }
.chat-a svg{ width:16px; height:16px; color:var(--yellow); }
#chat-btn{
  display:flex; align-items:center; gap:10px;
  border:1px solid rgba(255,212,0,.5); border-radius:999px; background:rgba(10,8,20,.9);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  padding:7px 16px 7px 7px; box-shadow:0 12px 36px rgba(0,0,0,.6), 0 0 18px rgba(255,212,0,.2);
  transition:all .3s;
}
#chat-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 36px rgba(0,0,0,.6), 0 0 28px rgba(255,212,0,.4); }
#chat-btn img{ width:42px; height:42px; border-radius:50%; object-fit:cover; background:#140f22; border:2px solid var(--yellow); }
#chat-btn span{ font-family:var(--font); font-size:13px; font-weight:600; }
#chat-btn .st{ display:block; font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); }
@media (max-width:639px){
  #chat-btn span{ display:none; } #chat-btn{ padding:6px; } #chat-btn img{ width:46px; height:46px; }
}

/* toast */
#toast{
  position:fixed; left:50%; bottom:76px; transform:translate(-50%,20px); z-index:70;
  display:flex; align-items:center; gap:12px; border:1px solid var(--line);
  background:rgba(10,8,20,.96); padding:10px 12px 10px 18px; font-size:13px;
  opacity:0; pointer-events:none; transition:all .5s; box-shadow:0 18px 50px rgba(0,0,0,.6); white-space:nowrap;
}
#toast.show{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
#toast a{ background:var(--yellow); color:#14100a; padding:7px 14px; font-weight:700; font-size:12px; font-family:var(--font); }
#toast button{ color:var(--t55); font-size:16px; padding:4px 6px; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rv{ opacity:1; transform:none; transition:none; }
  .hero-scene .img-wrap,.sweep,.rain,.rain2,.smoke,.ticker-in,.np-mag,.np-cyan,.np-yel,.flick,.flick2{ animation:none !important; }
  *{ animation-duration:.01ms !important; }
}

@media (max-width:559px){
  .brand-t{ display:none; }
  .brand img{ height:38px; }
}

/* ---------- v3: video engine backdrop ---------- */
#engine-wrap{ --breath:.6; width:min(96vw,1060px); aspect-ratio:16/9; position:relative; }
#engine-wrap::before{ /* breathing aura behind the engine */
  content:""; position:absolute; inset:-18%;
  background:
    radial-gradient(48% 46% at 50% 50%, rgba(0,229,255,.14), transparent 70%),
    radial-gradient(38% 36% at 46% 54%, rgba(255,46,196,.1), transparent 70%),
    radial-gradient(30% 28% at 55% 45%, rgba(255,212,0,.08), transparent 70%);
  opacity:var(--breath); filter:blur(6px); pointer-events:none;
}
#engine-box{ position:absolute; inset:0; will-change:transform; }
#engine-vid{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:brightness(.78) contrast(1.16) saturate(.88);
  -webkit-mask-image:radial-gradient(ellipse 60% 56% at 50% 48%, #000 52%, transparent 78%);
  mask-image:radial-gradient(ellipse 60% 56% at 50% 48%, #000 52%, transparent 78%);
}
.vid-tint{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:
    radial-gradient(50% 60% at 24% 40%, rgba(0,229,255,.2), transparent 70%),
    radial-gradient(50% 60% at 78% 55%, rgba(255,46,196,.17), transparent 70%),
    radial-gradient(40% 40% at 55% 20%, rgba(255,212,0,.1), transparent 70%);
  opacity:calc(.45 + var(--breath, .6) * .5);
  -webkit-mask-image:radial-gradient(ellipse 60% 56% at 50% 48%, #000 52%, transparent 80%);
  mask-image:radial-gradient(ellipse 60% 56% at 50% 48%, #000 52%, transparent 80%);
}
/* scene 2 is brighter: reinforce text zone shading */
.hero-scene img{ object-position:center 36%; }
.hero-shade{
  background:
    linear-gradient(180deg, rgba(7,6,15,.78), transparent 24%, transparent 52%, rgba(7,6,15,.94) 94%),
    linear-gradient(100deg, rgba(7,6,15,.82) 0%, rgba(7,6,15,.5) 30%, transparent 55%),
    radial-gradient(120% 60% at 50% 110%, rgba(7,6,15,.92), transparent 60%);
}