/* DreamPC home — static utility + component stylesheet (replaces Tailwind CDN) */
/* Only the utilities actually used on index.html are implemented here. */

*,*::before,*::after{box-sizing:border-box;border:0 solid var(--line);}
html{-webkit-text-size-adjust:100%;line-height:1.5;scroll-behavior:smooth;overflow-x:hidden;}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
img,svg,video{display:block;max-width:100%;}
img,video{height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;cursor:pointer;}
h1,h2,h3,h4,p,ul{margin:0;}
ul{padding:0;list-style:none;}
summary::-webkit-details-marker{display:none;}
:root{
  --bg:#080a0e;--bg-raised:#0e1219;--bg-card:#10141c;
  --line:#232a36;--line-soft:#171d27;
  --cyan:#22e5e5;--cyan-dim:#0e6e6e;--violet:#a78bfa;
  --text:#e7eaf0;--text-dim:#8b93a3;--text-faint:#5b6474;
  --heading:#ffffff;--wa:#25D366;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f5f7f9;--bg-raised:#ffffff;--bg-card:#ffffff;
  --line:#dde2e8;--line-soft:#ebeef1;
  --cyan:#0a8a8a;--cyan-dim:#8ad3d3;--violet:#6a4de0;
  --text:#1a212b;--text-dim:#4d5866;--text-faint:#8b95a3;
  --heading:#0f1720;
  color-scheme:light;
}
/* light-mode fixes for utilities that hard-code colours */
:root[data-theme="light"] .text-white{color:var(--heading);}
:root[data-theme="light"] .bg-\[\#080a0e\]\/85{background-color:rgba(255,255,255,.82);}
:root[data-theme="light"] .site-header{background:rgba(255,255,255,.82);}
:root[data-theme="light"] .grid-overlay{background-image:linear-gradient(rgba(15,23,32,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,32,.05) 1px,transparent 1px);}
:root[data-theme="light"] .hero-glow{background:radial-gradient(1200px 650px at 88% -8%,rgba(10,138,138,.10),transparent 60%),radial-gradient(900px 550px at -5% 30%,rgba(106,77,224,.09),transparent 55%);}
:root[data-theme="light"] #hero-bg-reel{opacity:0 !important;}
:root[data-theme="light"] [class*="bg-[#25D366]"]{color:#fff;}
:root[data-theme="light"] [class*="bg-[#25D366]"] *{color:#fff;}
:root[data-theme="light"] .card,:root[data-theme="light"] .navdrop-menu{box-shadow:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);}
:root[data-theme="light"] .before-after{background:repeating-linear-gradient(135deg,#e6eaef 0 14px,#eef1f4 14px 28px);}
:root[data-theme="light"] .partner-track img{filter:grayscale(1) brightness(.55);opacity:.6;}
:root[data-theme="light"] .terminal-caret,:root[data-theme="light"] .scan::after{filter:none;}
/* text that sits on top of dark photos / scrims must stay light in both themes */
:root[data-theme="light"] .media-frame h3,
:root[data-theme="light"] .media-frame p,
:root[data-theme="light"] .tile-label,
:root[data-theme="light"] .tile-label *,
:root[data-theme="light"] #ba-slider .text-white,
:root[data-theme="light"] .bench-tile .text-white{color:#fff;}
:root[data-theme="light"] .media-frame .text-\[var\(--cyan\)\]{color:#2fe0e0;}
:root[data-theme="light"] .work-tile::after,:root[data-theme="light"] .bench-tile::after{background:linear-gradient(to top,rgba(0,0,0,.82),transparent 60%);}

/* ---------- typography helpers ---------- */
.font-display{font-family:'Space Grotesk','Inter',sans-serif;}
.font-mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;}
.font-medium{font-weight:500;}.font-semibold{font-weight:600;}
.tracking-tight{letter-spacing:-0.02em;}.tracking-wide{letter-spacing:0.05em;}
.leading-none{line-height:1;}.leading-tight{line-height:1.2;}.leading-relaxed{line-height:1.65;}
.leading-8{line-height:2rem;}.leading-\[1\.05\]{line-height:1.05;}
.text-right{text-align:right;}
.text-\[10px\]{font-size:10px;}.text-\[11px\]{font-size:11px;}.text-\[13px\]{font-size:13px;}
.text-xs{font-size:.75rem;line-height:1rem;}.text-sm{font-size:.875rem;line-height:1.35rem;}
.text-base{font-size:1rem;line-height:1.5rem;}.text-lg{font-size:1.125rem;line-height:1.75rem;}
.text-xl{font-size:1.25rem;line-height:1.75rem;}.text-2xl{font-size:1.5rem;line-height:2rem;}
.text-3xl{font-size:1.875rem;line-height:2.25rem;}.text-4xl{font-size:2.25rem;line-height:2.5rem;}
.text-6xl{font-size:3.75rem;line-height:1;}.text-7xl{font-size:4.5rem;line-height:1;}
.whitespace-nowrap{white-space:nowrap;}
.select-none{user-select:none;}
.antialiased{-webkit-font-smoothing:antialiased;}

/* ---------- colors ---------- */
.text-white{color:#fff;}
.text-\[var\(--cyan\)\]{color:var(--cyan);}
.text-\[var\(--violet\)\]{color:var(--violet);}
.text-\[var\(--text\)\]{color:var(--text);}
.text-\[var\(--text-dim\)\]{color:var(--text-dim);}
.text-\[var\(--text-faint\)\]{color:var(--text-faint);}
.text-\[var\(--line\)\]{color:var(--line);}
.text-\[\#03181a\]{color:#03181a;}
.text-\[\#03181a\]\/70{color:rgba(3,24,26,.7);}
.text-emerald-400{color:#34d399;}
.text-red-400{color:#f87171;}
.bg-\[var\(--bg\)\]{background-color:var(--bg);}
.bg-\[var\(--bg-raised\)\]{background-color:var(--bg-raised);}
.bg-\[var\(--bg-raised\)\]\/40{background-color:rgba(14,18,25,.4);}
.bg-\[var\(--cyan\)\]{background-color:var(--cyan);}
.bg-\[var\(--cyan\)\]\/10{background-color:rgba(34,229,229,.1);}
.bg-\[var\(--cyan\)\]\/15{background-color:rgba(34,229,229,.15);}
.bg-\[var\(--cyan-dim\)\]{background-color:var(--cyan-dim);}
.bg-\[var\(--cyan-dim\)\]\/25{background-color:rgba(14,110,110,.25);}
.bg-\[var\(--violet\)\]{background-color:var(--violet);}
.bg-\[\#25D366\]{background-color:#25D366;}
.bg-\[\#4b5563\]{background-color:#4b5563;}
.bg-\[\#080a0e\]\/85{background-color:rgba(8,10,14,.85);}
.bg-black\/60{background-color:rgba(0,0,0,.6);}
.bg-emerald-400{background-color:#34d399;}

/* gradients */
.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-grad-stops));}
.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-grad-stops));}
.from-\[var\(--bg\)\]\/60{--tw-grad-from:rgba(8,10,14,.6);--tw-grad-stops:var(--tw-grad-from),var(--tw-grad-via,transparent),var(--tw-grad-to,rgba(8,10,14,0));}
.via-\[var\(--bg\)\]\/75{--tw-grad-via:rgba(8,10,14,.75);--tw-grad-stops:var(--tw-grad-from),var(--tw-grad-via),var(--tw-grad-to,var(--bg));}
.to-\[var\(--bg\)\]{--tw-grad-to:var(--bg);}
.from-black\/85{--tw-grad-from:rgba(0,0,0,.85);--tw-grad-stops:var(--tw-grad-from),var(--tw-grad-via,transparent),var(--tw-grad-to,rgba(0,0,0,0));}
.via-black\/10{--tw-grad-via:rgba(0,0,0,.1);--tw-grad-stops:var(--tw-grad-from),var(--tw-grad-via),var(--tw-grad-to,rgba(0,0,0,0));}
.to-transparent{--tw-grad-to:transparent;}

/* ---------- layout ---------- */
.relative{position:relative;}.absolute{position:absolute;}.fixed{position:fixed;}.sticky{position:sticky;}
.inset-0{inset:0;}
.top-0{top:0;}.top-3{top:.75rem;}.top-1\/2{top:50%;}.-top-2\.5{top:-.625rem;}.-top-3{top:-.75rem;}
.bottom-0{bottom:0;}.bottom-2{bottom:.5rem;}.bottom-5{bottom:1.25rem;}
.left-0{left:0;}.left-3{left:.75rem;}.left-1\/2{left:50%;}.-left-1{left:-.25rem;}
.right-0{right:0;}.right-3{right:.75rem;}.right-5{right:1.25rem;}.right-6{right:1.5rem;}
.z-10{z-index:10;}.z-40{z-index:40;}.z-50{z-index:50;}
.block{display:block;}.inline{display:inline;}.hidden{display:none;}
.flex{display:flex;}.inline-flex{display:inline-flex;}.grid{display:grid;}
.flex-col{flex-direction:column;}.flex-1{flex:1 1 0%;}
.items-start{align-items:flex-start;}.items-center{align-items:center;}.items-end{align-items:flex-end;}.items-stretch{align-items:stretch;}
.justify-center{justify-content:center;}.justify-between{justify-content:space-between;}
.justify-start{justify-content:flex-start;}.justify-end{justify-content:flex-end;}
.shrink-0{flex-shrink:0;}
.self-start{align-self:flex-start;}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.col-span-2{grid-column:span 2/span 2;}
.row-span-1{grid-row:span 1/span 1;}
.overflow-hidden{overflow:hidden;}
.object-cover{object-fit:cover;}
.pointer-events-none{pointer-events:none;}
.w-fit{width:fit-content;}.w-full{width:100%;}.w-auto{width:auto;}
.w-0\.5{width:.125rem;}.w-1\.5{width:.375rem;}.w-2\.5{width:.625rem;}
.w-5{width:1.25rem;}.w-6{width:1.5rem;}.w-8{width:2rem;}.w-9{width:2.25rem;}.w-10{width:2.5rem;}.w-11{width:2.75rem;}
.w-\[72px\]{width:72px;}.w-\[82vw\]{width:82vw;}
.h-full{height:100%;}.h-auto{height:auto;}
.h-1\.5{height:.375rem;}.h-2\.5{height:.625rem;}.h-5{height:1.25rem;}.h-6{height:1.5rem;}
.h-8{height:2rem;}.h-9{height:2.25rem;}.h-10{height:2.5rem;}.h-11{height:2.75rem;}.h-20{height:5rem;}
.h-\[72px\]{height:72px;}
.min-h-\[320px\]{min-height:320px;}.min-h-\[380px\]{min-height:380px;}
.max-w-sm{max-width:24rem;}.max-w-md{max-width:28rem;}.max-w-xl{max-width:36rem;}
.max-w-2xl{max-width:42rem;}.max-w-3xl{max-width:48rem;}.max-w-4xl{max-width:56rem;}
.max-w-7xl{max-width:80rem;}.max-w-\[80\%\]{max-width:80%;}.max-w-\[340px\]{max-width:340px;}
.aspect-square{aspect-ratio:1/1;}.aspect-\[4\/3\]{aspect-ratio:4/3;}
.mx-auto{margin-left:auto;margin-right:auto;}
.ml-1{margin-left:.25rem;}.ml-3{margin-left:.75rem;}
.mt-0\.5{margin-top:.125rem;}.mt-1{margin-top:.25rem;}.mt-2{margin-top:.5rem;}.mt-3{margin-top:.75rem;}
.mt-4{margin-top:1rem;}.mt-5{margin-top:1.25rem;}.mt-6{margin-top:1.5rem;}.mt-7{margin-top:1.75rem;}
.mt-8{margin-top:2rem;}.mt-9{margin-top:2.25rem;}.mt-10{margin-top:2.5rem;}.mt-14{margin-top:3.5rem;}
.mb-2{margin-bottom:.5rem;}.mb-3{margin-bottom:.75rem;}.mb-4{margin-bottom:1rem;}
.mb-5{margin-bottom:1.25rem;}.mb-6{margin-bottom:1.5rem;}
.p-4{padding:1rem;}.p-5{padding:1.25rem;}.p-6{padding:1.5rem;}.p-8{padding:2rem;}
.px-2{padding-left:.5rem;padding-right:.5rem;}.px-3{padding-left:.75rem;padding-right:.75rem;}
.px-3\.5{padding-left:.875rem;padding-right:.875rem;}.px-4{padding-left:1rem;padding-right:1rem;}
.px-5{padding-left:1.25rem;padding-right:1.25rem;}.px-6{padding-left:1.5rem;padding-right:1.5rem;}
.px-7{padding-left:1.75rem;padding-right:1.75rem;}
.py-0\.5{padding-top:.125rem;padding-bottom:.125rem;}.py-1{padding-top:.25rem;padding-bottom:.25rem;}
.py-1\.5{padding-top:.375rem;padding-bottom:.375rem;}.py-2{padding-top:.5rem;padding-bottom:.5rem;}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem;}.py-3{padding-top:.75rem;padding-bottom:.75rem;}
.py-3\.5{padding-top:.875rem;padding-bottom:.875rem;}.py-4{padding-top:1rem;padding-bottom:1rem;}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem;}.py-16{padding-top:4rem;padding-bottom:4rem;}
.pt-4{padding-top:1rem;}.pt-5{padding-top:1.25rem;}.pt-8{padding-top:2rem;}
.pt-14{padding-top:3.5rem;}.pt-16{padding-top:4rem;}
.pb-5{padding-bottom:1.25rem;}.pb-10{padding-bottom:2.5rem;}
.pr-4{padding-right:1rem;}.pr-10{padding-right:2.5rem;}
.gap-1{gap:.25rem;}.gap-1\.5{gap:.375rem;}.gap-2{gap:.5rem;}.gap-2\.5{gap:.625rem;}
.gap-3{gap:.75rem;}.gap-4{gap:1rem;}.gap-5{gap:1.25rem;}.gap-6{gap:1.5rem;}
.gap-8{gap:2rem;}.gap-10{gap:2.5rem;}.gap-12{gap:3rem;}
.gap-x-3{column-gap:.75rem;}.gap-y-1\.5{row-gap:.375rem;}
.space-y-1\.5>*+*{margin-top:.375rem;}.space-y-2>*+*{margin-top:.5rem;}
.space-y-3>*+*{margin-top:.75rem;}.space-y-4>*+*{margin-top:1rem;}

.rounded{border-radius:.25rem;}.rounded-md{border-radius:.375rem;}.rounded-lg{border-radius:.5rem;}
.rounded-full{border-radius:9999px;}.rounded-tl-sm{border-top-left-radius:.125rem;}.rounded-tr-sm{border-top-right-radius:.125rem;}
.border{border-width:1px;}.border-t{border-top-width:1px;}.border-b{border-bottom-width:1px;}
.border-y{border-top-width:1px;border-bottom-width:1px;}
.border-\[var\(--line\)\]{border-color:var(--line);}
.border-\[var\(--line-soft\)\]{border-color:var(--line-soft);}
.border-\[var\(--cyan-dim\)\]{border-color:var(--cyan-dim);}
.border-\[var\(--cyan-dim\)\]\/40{border-color:rgba(14,110,110,.4);}
.border-\[var\(--cyan-dim\)\]\/50{border-color:rgba(14,110,110,.5);}

.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.3),0 4px 6px -4px rgba(0,0,0,.3);}
.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.35),0 8px 10px -6px rgba(0,0,0,.35);}
.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.5);}
.shadow-black\/40{--x:0;}.shadow-black\/50{--x:0;}
.backdrop-blur{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.opacity-0{opacity:0;}.opacity-\[0\.16\]{opacity:.16;}.opacity-\[0\.45\]{opacity:.45;}.opacity-\[0\.4\]{opacity:.4;}
.transition{transition:all .2s ease;}
.transition-colors{transition:color .2s ease,background-color .2s ease,border-color .2s ease;}
.transition-opacity{transition:opacity .2s ease;}
.transition-transform{transition:transform .2s ease;}
.duration-700{transition-duration:.7s;}
.-translate-x-1\/2{transform:translateX(-50%);}
.-translate-y-1\/2{transform:translateY(-50%);}
.animate-pulse{animation:hp-pulse 2s cubic-bezier(.4,0,.6,1) infinite;}
@keyframes hp-pulse{50%{opacity:.5;}}

.hover\:brightness-110:hover{filter:brightness(1.1);}
.hover\:scale-105:hover{transform:scale(1.05);}
.hover\:text-\[var\(--text\)\]:hover{color:var(--text);}
.hover\:border-\[var\(--cyan-dim\)\]:hover{border-color:var(--cyan-dim);}

/* ---------- component styles (from artifact) ---------- */
.grid-overlay{background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;}
.card{background:var(--bg-card);border:1px solid var(--line);}
.card-hover{transition:border-color .25s ease,transform .25s ease;}
.card-hover:hover{border-color:rgba(34,229,229,.5);transform:translateY(-3px);}
.glow-btn{box-shadow:0 8px 22px -8px rgba(0,0,0,.55);transition:box-shadow .25s ease,transform .15s ease;}
.glow-btn:hover{box-shadow:0 12px 28px -8px rgba(0,0,0,.6);transform:translateY(-1px);}
.terminal-caret{animation:blink 1.1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
.scan{position:relative;overflow:hidden;}
.scan::after{content:"";position:absolute;left:0;right:0;height:2px;top:-10%;background:linear-gradient(90deg,transparent,rgba(34,229,229,.95),transparent);animation:scan-move 3.2s linear infinite;opacity:.75;}
@keyframes scan-move{0%{top:-5%;}100%{top:105%;}}
.wa-pulse{box-shadow:0 12px 30px -6px rgba(0,0,0,.55);}
::selection{background:rgba(34,229,229,.28);color:#fff;}
.ticker-track{display:flex;width:max-content;animation:ticker 40s linear infinite;}
.ticker-track:hover{animation-play-state:paused;}
@keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.ticker-strip{font-size:1rem;line-height:1;letter-spacing:.06em;}
.ticker-strip .ticker-row{display:flex;align-items:center;gap:2.75rem;padding-right:2.75rem;font-weight:600;color:var(--text-dim);white-space:nowrap;}
.ticker-strip .ticker-row .hi{color:var(--cyan);}
.ticker-strip .ticker-row .hi-v{color:var(--violet);}
@media (min-width:768px){.ticker-strip{font-size:1.25rem;}.ticker-strip .ticker-row{gap:3.5rem;padding-right:3.5rem;}}
.reviews-lane{display:flex;overflow-x:auto;cursor:grab;touch-action:pan-x;scrollbar-width:none;-ms-overflow-style:none;}
.reviews-lane::-webkit-scrollbar{display:none;}
.reviews-lane.is-dragging{cursor:grabbing;scroll-behavior:auto;}
.ba-slider{cursor:ew-resize;touch-action:none;}
.chat-bubble{opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease;}
.chat-bubble.is-visible{opacity:1;transform:translateY(0);}
.before-after{background:repeating-linear-gradient(135deg,#171d27 0 14px,#12171f 14px 28px);}
.thermal-tile{background:radial-gradient(circle at 30% 30%,rgba(34,229,229,.35),transparent 55%),radial-gradient(circle at 70% 70%,rgba(167,139,250,.28),transparent 55%),#0e1219;}
.hero-glow{background:radial-gradient(1200px 650px at 88% -8%,rgba(34,229,229,.14),transparent 60%),radial-gradient(900px 550px at -5% 30%,rgba(167,139,250,.1),transparent 55%);}
.media-frame{background:var(--bg-card);border:1px solid var(--line);position:relative;}
.media-frame::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.02) 3px 4px);pointer-events:none;}
.tile-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.tile-label{position:relative;z-index:1;}
.work-tile::after,.bench-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.78),transparent 60%);}

/* FAQ */
.faq-item{overflow:hidden;}
.faq-summary{list-style:none;cursor:pointer;padding:1.1rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-weight:500;color:var(--text);font-size:.95rem;}
.faq-summary::-webkit-details-marker{display:none;}
.faq-icon{flex-shrink:0;width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--cyan);font-size:1.1rem;line-height:1;}
.faq-answer{padding:0 1.25rem 1.1rem;color:var(--text-dim);font-size:.9rem;line-height:1.6;}
.faq-answer a{color:var(--cyan);}
.faq-item[open] .faq-summary{border-bottom:1px solid var(--line);}

/* PC assembly illustration */
.pc-illustration{opacity:0;transform:translateY(16px) scale(.97);transition:opacity .8s ease,transform .8s cubic-bezier(.16,.84,.44,1);}
#assembly-stage.is-assembled .pc-illustration{opacity:1;transform:none;}
.assembly-part.screen-bar{opacity:0;transform:translateX(-6px);transition:opacity .5s ease,transform .5s ease;}
#assembly-stage.is-assembled .assembly-part.screen-bar{opacity:1;transform:none;}
.fan-spin{transform-box:fill-box;transform-origin:center;animation:fan-spin 5s linear infinite;animation-play-state:paused;}
.fan-spin.fan-slow{animation-duration:7s;}
#assembly-stage.is-assembled .fan-spin{animation-play-state:running;}
@keyframes fan-spin{to{transform:rotate(360deg);}}
.rgb-pulse{animation:rgb-pulse 3.2s ease-in-out infinite;}
@keyframes rgb-pulse{0%,100%{opacity:.5;}50%{opacity:1;}}

/* PC illustration — extra "wow": ambient glow + RGB colour cycle + glass sheen */
#assembly-stage{filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));}
#assembly-stage .pc-illustration{overflow:visible;}
.rgb-cycle{animation:rgb-cycle 8s linear infinite;transform-origin:center;}
#assembly-stage.is-assembled .rgb-cycle{animation-play-state:running;}
.rgb-cycle{animation-play-state:paused;}
@keyframes rgb-cycle{0%{filter:hue-rotate(0deg);}100%{filter:hue-rotate(360deg);}}
.glass-sheen{opacity:0;}
#assembly-stage.is-assembled .glass-sheen{animation:glass-sheen 6s ease-in-out 1s infinite;}
@keyframes glass-sheen{0%,72%{opacity:0;transform:translateX(-40px);}80%{opacity:.5;}100%{opacity:0;transform:translateX(140px);}}
.led-flicker{animation:led-flicker 2.6s ease-in-out infinite;}
#assembly-stage.is-assembled .led-flicker{animation-play-state:running;}
.led-flicker{animation-play-state:paused;}
@keyframes led-flicker{0%,100%{opacity:.35;}45%{opacity:1;}60%{opacity:.7;}}

/* How it works — trust chips */
.step-num{width:2.25rem;height:2.25rem;border-radius:.6rem;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--cyan);background:rgba(34,229,229,.1);border:1px solid var(--cyan-dim);flex-shrink:0;}
.trust-chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;color:var(--text-dim);border:1px solid var(--line);border-radius:9999px;padding:.4rem .8rem;}
.trust-chip svg{color:var(--cyan);}

/* Small phones — keep everything comfortable and never overflow */
@media (max-width:430px){
  .text-4xl{font-size:1.9rem;line-height:2.2rem;}
  .text-3xl{font-size:1.6rem;line-height:1.95rem;}
  .text-2xl{font-size:1.35rem;line-height:1.75rem;}
  .text-6xl,.text-7xl{font-size:2.75rem;line-height:1.05;}
  .py-16{padding-top:3.25rem;padding-bottom:3.25rem;}
  .pt-14{padding-top:2.5rem;}
  .px-5{padding-left:1.1rem;padding-right:1.1rem;}
  .p-6{padding:1.15rem;}.p-8{padding:1.25rem;}
  .gap-12{gap:2rem;}
  .w-\[82vw\]{width:86vw;}
}

/* ---------- responsive: sm (>=640) ---------- */
@media (min-width:640px){
  .sm\:inline{display:inline;}
  .sm\:flex-row{flex-direction:row;}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .sm\:px-4{padding-left:1rem;padding-right:1rem;}
  .sm\:text-5xl{font-size:3rem;line-height:1;}
}
/* ---------- responsive: md (>=768) ---------- */
@media (min-width:768px){
  .md\:flex{display:flex;}
  .md\:hidden{display:none;}
  .md\:flex-row{flex-direction:row;}
  .md\:items-center{align-items:center;}
  .md\:items-end{align-items:flex-end;}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
  .md\:col-span-1{grid-column:span 1/span 1;}
  .md\:col-span-2{grid-column:span 2/span 2;}
  .md\:row-span-2{grid-row:span 2/span 2;}
  .md\:aspect-auto{aspect-ratio:auto;}
  .md\:aspect-\[16\/10\]{aspect-ratio:16/10;}
  .md\:min-h-\[380px\]{min-height:380px;}
  .md\:min-h-\[440px\]{min-height:440px;}
  .md\:h-12{height:3rem;}
  .md\:w-12{width:3rem;}
  .md\:p-6{padding:1.5rem;}.md\:p-8{padding:2rem;}.md\:p-12{padding:3rem;}
  .md\:px-6{padding-left:1.5rem;padding-right:1.5rem;}
  .md\:px-8{padding-left:2rem;padding-right:2rem;}
  .md\:py-28{padding-top:7rem;padding-bottom:7rem;}
  .md\:pt-20{padding-top:5rem;}
  .md\:text-base{font-size:1rem;line-height:1.5rem;}
  .md\:text-lg{font-size:1.125rem;line-height:1.75rem;}
  .md\:text-xl{font-size:1.25rem;line-height:1.75rem;}
  .md\:text-2xl{font-size:1.5rem;line-height:2rem;}
  .md\:text-3xl{font-size:1.875rem;line-height:2.25rem;}
  .md\:text-4xl{font-size:2.25rem;line-height:2.5rem;}
  .md\:text-5xl{font-size:3rem;line-height:1.05;}
  .md\:text-7xl{font-size:4.5rem;line-height:1;}
  .md\:leading-\[1\.02\]{line-height:1.02;}
}
/* ---------- responsive: lg (>=1024) ---------- */
@media (min-width:1024px){
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr));}
  .lg\:col-span-2{grid-column:span 2/span 2;}
  .lg\:col-span-3{grid-column:span 3/span 3;}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
  .lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr));}
  .lg\:text-6xl{font-size:3.75rem;line-height:1.03;}
  .lg\:mx-0{margin-left:0;margin-right:0;}
  .lg\:gap-14{gap:3.5rem;}
  .lg\:gap-16{gap:4rem;}
}
@media (min-width:640px){ .sm\:col-span-2{grid-column:span 2/span 2;} }
@media (min-width:768px){ .md\:h-11{height:2.75rem;} .md\:h-12{height:3rem;} .md\:h-14{height:3.5rem;} }

/* ---------- misc utilities added for v2 ---------- */
.h-7{height:1.75rem;}
.opacity-80{opacity:.8;}
.align-middle{vertical-align:middle;}
.mt-1\.5{margin-top:.375rem;}
.pl-3{padding-left:.75rem;}
.border-l-2{border-left-width:2px;}
.aspect-\[16\/11\]{aspect-ratio:16/11;}
.aspect-\[16\/10\]{aspect-ratio:16/10;}

/* ============ SITE HEADER / NAV (self-contained, resilient) ============ */
.site-header{position:sticky;top:0;z-index:40;background:rgba(8,10,14,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft);}
.nav-bar{max-width:80rem;margin:0 auto;padding:0 1.25rem;height:5rem;display:flex;align-items:center;gap:1rem;}
@media(min-width:768px){.nav-bar{padding:0 2rem;}}
.nav-logo{flex-shrink:0;display:flex;align-items:center;}
.nav-logo img{height:2.6rem;width:auto;display:block;}
@media(min-width:768px){.nav-logo img{height:3.1rem;}}
.nav-links{display:none;align-items:center;gap:1.9rem;margin-left:auto;font-size:.9rem;}
.nav-links > a,.navdrop-toggle{color:var(--text-dim);white-space:nowrap;transition:color .15s ease;background:none;border:0;font:inherit;cursor:pointer;padding:0;}
.nav-links > a:hover,.navdrop-toggle:hover{color:var(--text);}
.nav-actions{display:flex;align-items:center;gap:.55rem;margin-left:auto;flex-shrink:0;}
.nav-wa{display:inline-flex;align-items:center;gap:.5rem;background:var(--wa);color:#fff;font-weight:600;font-size:.875rem;border-radius:.45rem;padding:.55rem .95rem;white-space:nowrap;box-shadow:0 8px 20px -10px rgba(0,0,0,.5);transition:filter .15s ease;}
.nav-wa:hover{filter:brightness(1.1);}
.nav-wa span{display:none;}
@media(min-width:420px){.nav-wa span{display:inline;}}
.nav-burger,.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:1px solid var(--line);border-radius:.45rem;color:var(--text-dim);flex-shrink:0;transition:color .15s ease,border-color .15s ease;}
.nav-burger:hover,.theme-toggle:hover{color:var(--text);border-color:var(--cyan-dim);}
.nav-burger .ico-close{display:none;}
.nav-burger.is-open .ico-open{display:none;}
.nav-burger.is-open .ico-close{display:block;}
.theme-toggle .ico-moon{display:none;}
:root[data-theme="light"] .theme-toggle .ico-sun{display:none;}
:root[data-theme="light"] .theme-toggle .ico-moon{display:block;}
@media(min-width:1024px){
  .nav-links{display:flex;}
  .nav-actions{margin-left:1.9rem;}
  .nav-burger{display:none;}
}
.nav-mobile{display:none;border-top:1px solid var(--line-soft);background:var(--bg);}
.nav-mobile.open{display:block;}
@media(min-width:1024px){.nav-mobile{display:none!important;}}
.nav-mobile .inner{max-width:80rem;margin:0 auto;padding:.5rem 1.25rem 1.25rem;display:flex;flex-direction:column;}
.nav-mobile a{padding:.8rem 0;border-bottom:1px solid var(--line-soft);color:var(--text-dim);}
.nav-mobile a:hover{color:var(--text);}
.nav-mobile .grp{margin:0;padding:1rem 0 .35rem;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--text-faint);}
.nav-mobile a.sub{padding-left:.8rem;border-left:2px solid var(--cyan-dim);border-bottom:0;}

/* dropdown */
.navdrop{position:relative;display:inline-flex;}
.navdrop-toggle{display:inline-flex;align-items:center;gap:.3rem;}
.navdrop-menu{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%) translateY(8px);min-width:242px;background:var(--bg-card);border:1px solid var(--line);border-radius:.6rem;padding:.4rem;display:flex;flex-direction:column;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease;box-shadow:0 24px 48px -16px rgba(0,0,0,.55);z-index:60;}
.navdrop:hover .navdrop-menu,.navdrop:focus-within .navdrop-menu,.navdrop.is-open .navdrop-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.navdrop-menu a{padding:.6rem .75rem;border-radius:.4rem;font-size:.85rem;color:var(--text-dim);white-space:nowrap;transition:background .12s ease,color .12s ease;}
.navdrop-menu a:hover{background:var(--bg-raised);color:var(--text);}

/* partnered brands marquee */
.partner-marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
.partner-track{display:flex;align-items:center;gap:3.5rem;width:max-content;animation:partner-scroll 30s linear infinite;}
.partner-track:hover{animation-play-state:paused;}
@keyframes partner-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.partner-track img{height:30px;width:auto;opacity:.55;filter:grayscale(1) brightness(1.7);transition:opacity .2s ease,filter .2s ease;}
.partner-track img:hover{opacity:1;filter:none;}
@media(min-width:768px){.partner-track img{height:34px;}}

/* how it works step emoji */
.step-emoji{font-size:2rem;line-height:1;flex-shrink:0;width:2.6rem;text-align:center;}
@media (min-width:768px){ .step-emoji{font-size:2.4rem;width:3rem;} }
.step-card{transition:border-color .2s ease;}
.step-card:hover{border-color:var(--cyan-dim);}

/* Singapore coverage map (real geography) */
.sg-map-wrap{background:var(--bg-raised);border:1px solid var(--line);border-radius:.75rem;padding:1.1rem 1.25rem 1.35rem;}
.sg-map{display:block;width:100%;height:auto;overflow:visible;}
.sg-hint{fill:var(--text-faint);font-family:'JetBrains Mono',monospace;font-size:22px;letter-spacing:.06em;}
.sg-region path{fill:rgba(34,229,229,.09);stroke:var(--cyan-dim);stroke-width:2;stroke-linejoin:round;transition:fill .18s ease,stroke .18s ease;cursor:pointer;}
.sg-region text{fill:var(--text-faint);font-family:'JetBrains Mono',monospace;font-size:19px;font-weight:600;letter-spacing:.03em;text-anchor:middle;pointer-events:none;transition:fill .18s ease;}
.sg-region:hover path{fill:rgba(34,229,229,.2);stroke:var(--cyan);}
.sg-region:focus{outline:none;}
.sg-region:focus-visible path{stroke:var(--cyan);stroke-width:3;}
.sg-region.is-active path{fill:rgba(34,229,229,.34);stroke:var(--cyan);}
.sg-region.is-active text,.sg-region:hover text{fill:var(--heading);}
:root[data-theme="light"] .sg-region path{fill:rgba(10,138,138,.1);}
:root[data-theme="light"] .sg-region:hover path{fill:rgba(10,138,138,.22);}
:root[data-theme="light"] .sg-region.is-active path{fill:rgba(10,138,138,.3);}
.trust-chip-lg{font-size:.92rem;padding:.55rem 1rem;}
.bg-\[var\(--bg\)\]\/35{background-color:rgba(8,10,14,.35);}
:root[data-theme="light"] .bg-\[var\(--bg\)\]\/35{background-color:rgba(245,247,249,.35);}
.region-btn{font-size:.8rem;font-weight:600;color:var(--text-dim);border:1px solid var(--line);border-radius:9999px;padding:.4rem .85rem;transition:background .15s ease,color .15s ease,border-color .15s ease;}
.region-btn:hover{border-color:var(--cyan-dim);color:var(--text);}
.region-btn.is-active{background:var(--cyan);color:#03181a;border-color:var(--cyan);}
.area-chip{border:1px solid var(--line);border-radius:9999px;padding:.35rem .85rem;color:var(--text-dim);white-space:nowrap;}
.area-chip[hidden]{display:none;}

/* footer colour-coded links */
.foot-link{transition:color .15s ease;}
.foot-link.foot-cyan:hover{color:var(--cyan);}
.foot-link.foot-violet:hover{color:var(--violet);}
.foot-link.foot-green:hover{color:#25D366;}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .scan::after{animation:none;display:none;}
  .terminal-caret,.ticker-track,.animate-pulse,.rgb-cycle,.glass-sheen,.led-flicker,.partner-track{animation:none;}
  .chat-bubble{opacity:1;transform:none;transition:none;}
  .pc-illustration{opacity:1;transform:none;transition:none;}
  .assembly-part.screen-bar{opacity:1;transform:none;transition:none;}
  .fan-spin{animation:none;}
  .rgb-pulse{animation:none;opacity:.8;}
}