:root{
  --bg:#1446D8; --bg2:#0E35B4; --bg3:#0A2786; --foot:#061A5C;
  --text:#FFFFFF; --text2:#D3DCF2; --text3:#A9BBEB; --accent:#1446D8; --ink:#0B1638; --ink2:#4A5372;
  --line:rgba(255,255,255,.18); --line2:rgba(255,255,255,.4);
  --grad:linear-gradient(110deg,#FFFFFF 0%,#E3E8EF 22%,#AEB9C9 50%,#E3E8EF 78%,#FFFFFF 100%);
  --blur:blur(22px) saturate(180%);
  --g-chip:linear-gradient(135deg,rgba(255,255,255,.26),rgba(255,255,255,.08));
  --g-chip-border:rgba(255,255,255,.4);
  --g-card:linear-gradient(145deg,rgba(255,255,255,.9),rgba(255,255,255,.72));
  --g-card-border:rgba(255,255,255,.75);
  --g-navy:linear-gradient(145deg,rgba(8,30,120,.66),rgba(8,30,120,.4));
  --g-light:linear-gradient(180deg,rgba(255,255,255,.97),rgba(236,240,246,.82));
  --g-edge:inset 0 1px 1px rgba(255,255,255,.7),inset 0 -1px 1px rgba(255,255,255,.12);
  --g-drop:0 10px 36px rgba(0,12,80,.28);
  --g-header:rgba(20,70,216,.62);
  --btn-bg:var(--g-light); --btn-fg:#1446D8;
  --board:#FFFFFF; --board-op:.2;
  color-scheme:dark;
}
html[data-theme="light"],html[data-theme="cream"]{
  --bg:#FFFFFF; --bg2:#F2F5FB; --bg3:#E8EDF6; --foot:#F2F5FB;
  --text:#0F2E8E; --text2:#4A5372; --text3:#1446D8;
  --line:rgba(20,70,216,.16); --line2:rgba(20,70,216,.3);
  --grad:linear-gradient(110deg,#1446D8 0%,#4F78F0 25%,#8A9BB5 50%,#4F78F0 75%,#1446D8 100%);
  --g-chip:linear-gradient(135deg,rgba(255,255,255,.8),rgba(232,238,250,.55));
  --g-chip-border:rgba(20,70,216,.18);
  --g-card:linear-gradient(145deg,rgba(255,255,255,.86),rgba(255,255,255,.6));
  --g-card-border:rgba(20,70,216,.14);
  --g-navy:linear-gradient(145deg,rgba(20,70,216,.95),rgba(12,48,170,.85));
  --g-edge:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -1px 1px rgba(20,70,216,.06);
  --g-drop:0 10px 36px rgba(10,40,140,.12);
  --g-header:rgba(255,255,255,.75);
  --btn-bg:linear-gradient(180deg,#3A66EE,#1446D8); --btn-fg:#FFFFFF;
  --board:#1446D8; --board-op:.12;
  color-scheme:light;
}
html[data-theme="cream"]{ --bg:#FFF7E4; --bg2:#FBF0D9; --bg3:#F6E7C8; --foot:#FBF0D9; --g-header:rgba(255,247,228,.8); --line:rgba(160,120,40,.2); }

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Kantumruy Pro","Geist",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .4s,color .4s}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{font-family:"Plus Jakarta Sans","Kantumruy Pro","Geist",system-ui,sans-serif;margin:0}
html[lang="en"] h1,html[lang="en"] h2{letter-spacing:-.025em}
p{margin:0}
.num{font-family:"Geist","Kantumruy Pro",sans-serif}
.wrap{max-width:1248px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
section{position:relative;overflow:hidden;isolation:isolate;transition:background .4s}
.sec{padding:96px 0}
.sec-head{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;margin-bottom:48px}
.sec-head h2{font-size:clamp(32px,5vw,58px);line-height:1.3;font-weight:700}
.sec-head p{font-size:clamp(16px,1.8vw,21px);color:var(--text2)}
.eyebrow{font-size:18px;font-weight:600;color:var(--text3)}

/* ---------- motion ---------- */
/* vertical padding widens the clipped paint area so Khmer vowels above and subscripts below aren't cut off; inline padding doesn't change line spacing */
.grad{padding:.18em 0 .32em;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:var(--grad);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 6s linear infinite}
@keyframes shimmer{to{background-position:200% center}}
@keyframes reveal{from{opacity:0;transform:translateY(60px) scale(.97)}to{opacity:1;transform:none}}
@keyframes revealL{from{opacity:0;transform:translateX(-70px)}to{opacity:1;transform:none}}
@keyframes revealR{from{opacity:0;transform:translateX(70px)}to{opacity:1;transform:none}}
@keyframes heroIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){
.reveal{animation:reveal linear backwards;animation-timeline:view();animation-range:entry 0% cover 28%}
.reveal-l{animation:revealL linear backwards;animation-timeline:view();animation-range:entry 0% cover 30%}
.reveal-r{animation:revealR linear backwards;animation-timeline:view();animation-range:entry 0% cover 30%}
.r2{animation-range:entry 8% cover 34%}.r3{animation-range:entry 16% cover 40%}.r4{animation-range:entry 24% cover 46%}
}
.intro{animation:heroIn .9s cubic-bezier(.2,.8,.2,1) both}.i2{animation-delay:.12s}.i3{animation-delay:.24s}.i4{animation-delay:.36s}.i5{animation-delay:.5s}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08)}}
.kb{animation:kb 16s ease-in-out infinite alternate}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(80px,-50px) scale(1.1)}66%{transform:translate(-60px,40px) scale(.95)}}
.orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);pointer-events:none;animation:drift 16s ease-in-out infinite}
.orb2{animation-duration:22s;animation-delay:-7s}
html[data-theme] .orb{opacity:.28!important}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes pulse{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.7);opacity:0}}
@keyframes glowp{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.55),var(--g-drop)}60%{box-shadow:0 0 0 14px rgba(255,255,255,0),var(--g-drop)}}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}60%{transform:translateY(0)}}
@keyframes fanspin{to{transform:rotate(360deg)}}
.float{animation:floaty 5s ease-in-out infinite}
.bob{animation:floaty 4.5s ease-in-out infinite}.d1{animation-delay:-1.2s}.d2{animation-delay:-2.4s}.d3{animation-delay:-3.4s}
.spin{animation:spin 50s linear infinite}.spin-rev{animation:spin 40s linear infinite reverse}
.bar{animation:eq 1s ease-in-out infinite;transform-origin:center}.b2{animation-delay:-.2s}.b3{animation-delay:-.4s}.b4{animation-delay:-.6s}.b5{animation-delay:-.8s}
.pulse{animation:pulse 1.8s ease-out infinite}
.hop{animation:hop 1.8s ease-in-out infinite}
.fan{animation:fanspin 1.6s linear infinite;transform-origin:center}
.hov{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.hov:hover{transform:translateY(-8px);box-shadow:var(--g-edge),0 30px 60px rgba(0,12,80,.32)!important}

/* ---------- glass building blocks ---------- */
.glass-chip{background:var(--g-chip);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--g-chip-border);box-shadow:var(--g-edge),var(--g-drop)}
.glass-card{background:var(--g-card);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--g-card-border);box-shadow:var(--g-edge),var(--g-drop);color:var(--ink)}
.glass-navy{background:var(--g-navy);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 1px rgba(255,255,255,.4),var(--g-drop);color:#FFFFFF}
.btn{height:54px;padding:0 28px;display:inline-flex;align-items:center;gap:10px;border-radius:999px;font-size:17px;font-weight:600;white-space:nowrap;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.btn:hover{transform:translateY(-2px)}
.btn-main{background:var(--btn-bg);color:var(--btn-fg);border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1px 1px #FFFFFF,0 8px 24px rgba(0,12,80,.3);animation:glowp 2.4s ease-out infinite}
.btn-ghost{background:var(--g-chip);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1.5px solid var(--line2);color:var(--text);box-shadow:var(--g-edge)}

/* circuit-free "steel mesh" pattern for hero */
.mesh::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(var(--board) 1.2px,transparent 1.4px);background-size:28px 28px;opacity:var(--board-op);-webkit-mask-image:linear-gradient(90deg,#000 0,#000 12%,transparent 32%,transparent 68%,#000 88%,#000 100%);mask-image:linear-gradient(90deg,#000 0,#000 12%,transparent 32%,transparent 68%,#000 88%,#000 100%)}

/* ---------- header ---------- */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--g-header);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-bottom:1px solid var(--line);transition:background .4s}
.hd{height:72px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand svg{width:42px;height:42px;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.brand:hover svg{transform:rotate(360deg)}
.brand b{font-family:"Geist",sans-serif;font-size:20px;font-weight:800;letter-spacing:.02em}
.brand small{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--text3);margin-top:-2px}
nav.menu{flex:1;display:flex;justify-content:center;gap:6px;font-size:16px;font-weight:500}
nav.menu a{padding:6px 14px;border-radius:9px;transition:background .35s}
nav.menu a:hover{background:rgba(255,255,255,.16)}
html[data-theme] nav.menu a:hover{background:rgba(20,70,216,.12)}
.tools{display:flex;align-items:center;gap:10px;flex-shrink:0}
.pill{height:32px;padding:0 14px;display:inline-flex;align-items:center;gap:5px;border-radius:999px;font-size:14px;cursor:pointer;color:var(--text);background:var(--g-chip);border:1px solid var(--g-chip-border);font-family:inherit}
.lang-opt{opacity:.55}.lang-opt.on{opacity:1;font-weight:700}
#theme-toggle{width:32px;height:32px;padding:0;border-radius:999px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--btn-bg);color:var(--btn-fg);border:1px solid rgba(255,255,255,.85);transition:transform .3s}
#theme-toggle:hover{transform:scale(1.08) rotate(-12deg)}
#theme-toggle svg{width:16px;height:16px;display:none}
html:not([data-theme]) #theme-toggle .ic-sun,html[data-theme="light"] #theme-toggle .ic-warm,html[data-theme="cream"] #theme-toggle .ic-moon{display:block}
.hd-cta{height:40px;padding:0 18px;font-size:15px}

/* ---------- hero V2: realistic kitchen scene ----------
   Graphite matte cabinets, white marble backsplash, quartz top and warm 3000K
   under-cabinet light, matching the real showroom. The scene keeps one look in
   every site theme, because a real kitchen doesn't change colour with the UI. */
.k2-stage{position:relative;margin:26px auto 0;max-width:1120px}
.scene{position:relative;width:100%;aspect-ratio:1100/423;border-radius:32px;overflow:hidden;container-type:inline-size;border:1px solid var(--line);box-shadow:var(--g-drop);background:#1C2029;--rise:5cqw;--st:60.1%;--steam:rgba(235,240,248,.5);--du:12.5%;--db:16.666%}
.scene::after{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 9cqw rgba(0,4,20,.35)}
.scene .steam{transform:scale(1.4)}
.scene .wall{position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(33.333% - 1px),rgba(0,0,0,.35) calc(33.333% - 1px) 33.333%,transparent 33.333% calc(66.666% - 1px),rgba(0,0,0,.35) calc(66.666% - 1px) 66.666%,transparent 66.666%),linear-gradient(180deg,#2E3440,#232833)}
.scene .wglow{position:absolute;inset:0;background:radial-gradient(ellipse 50% 100% at 50% 0,rgba(255,214,160,.34),rgba(255,214,160,0) 72%) 0 9.4%/var(--du) 34.4% repeat-x,linear-gradient(100deg,rgba(150,180,255,.07),rgba(150,180,255,0) 38%),linear-gradient(180deg,rgba(0,0,0,0) 51.6%,rgba(0,0,0,.18) 82%)}
.scene .cab{position:absolute;left:0;right:0;top:0;height:15.8%;z-index:3;background:linear-gradient(90deg,rgba(0,0,0,.6) 0 2px,rgba(255,255,255,.06) 2px 3px,transparent 3px) 0 0/var(--du) 100% repeat-x,linear-gradient(180deg,transparent calc(100% - 3px),rgba(255,226,180,.3) calc(100% - 3px)),linear-gradient(90deg,rgba(255,255,255,.04),transparent 35%,transparent 70%,rgba(0,0,0,.15)),linear-gradient(180deg,#2C313B,#252A33 60%,#1F232B);box-shadow:0 .4cqw 1.2cqw rgba(0,0,0,.45)}
.scene .cab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.2cqw;background:#FFF5E4;box-shadow:0 .2cqw 1.2cqw .3cqw rgba(255,224,176,.55)}
.k2-hood{position:absolute;left:28%;top:-22.8%;width:44%;z-index:2;filter:drop-shadow(0 .6cqw .8cqw rgba(0,0,0,.35))}
.scene .k2-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .9s ease}
.scene .k2-slide.k-open{opacity:0}
.scene.open .k2-slide.k-open{opacity:1}
.scene .kswitch{right:auto;left:50%;transform:translateX(-50%);z-index:8}
.beam{position:absolute;left:30%;top:39%;width:40%;height:43.7%;z-index:1;clip-path:polygon(16% 0,84% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(255,240,214,.22),rgba(255,240,214,0))}
.steam{position:absolute;left:50%;top:var(--st);width:0;height:0;z-index:2}
.steam span{position:absolute;left:var(--x);top:0;width:var(--s);height:var(--s);margin:calc(var(--s) / -2);border-radius:50%;background:radial-gradient(circle,var(--steam),transparent 68%);filter:blur(.7cqw);opacity:0;animation:suck var(--d) ease-in infinite;animation-delay:var(--dl)}
@keyframes suck{0%{transform:translate(0,0) scale(.5);opacity:0}20%{opacity:1}75%{opacity:.7}100%{transform:translate(var(--dx),calc(var(--rise) * -1)) scale(1.6,.7);opacity:0}}
.counter-top{position:absolute;left:0;right:0;top:82%;height:4.2%;z-index:3;background:linear-gradient(180deg,#B9BEC6 0,#A2A7B0 15%,#8C929B 60%,#767B84);box-shadow:0 .35cqw .7cqw rgba(0,0,0,.45)}
.counter-base{position:absolute;left:0;right:0;top:86.2%;bottom:0;z-index:3;background:linear-gradient(180deg,#0C0E12 0,#15181D 16.3%,rgba(0,0,0,.35) 16.3%,rgba(0,0,0,0) 43.4%),linear-gradient(90deg,rgba(15,16,18,.7) 0 2px,rgba(255,255,255,.08) 2px 3px,transparent 3px) 0 0/var(--db) 100% repeat-x,linear-gradient(90deg,rgba(255,255,255,.04),transparent 40%,rgba(0,0,0,.12)),linear-gradient(180deg,#2A2F38,#1D2129)}
.cooktop{position:absolute;left:37%;width:26%;top:80.9%;height:1.06%;z-index:4;border-radius:.2cqw;background:linear-gradient(180deg,#4A4D54,#111215 45%,#050506);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 .1cqw .2cqw rgba(0,0,0,.4)}
.pot{position:absolute;left:45%;width:10%;bottom:19.1%;z-index:5}
.jars{position:absolute;left:17.5%;width:12%;bottom:18%;z-index:5}
.crock{position:absolute;right:20%;width:5.6%;bottom:18%;z-index:5}
.k2 .chips{margin-left:auto;margin-right:auto}
@media (min-width:1101px){
  .k2 .chips{position:absolute;inset:0;pointer-events:none;z-index:6}
  .k2 .chip{pointer-events:auto}
  .k2 .c1{left:2.5%;top:13.3%;display:flex;align-items:center;gap:14px}
  .k2 .c2{left:4%;top:46.2%}
  .k2 .c3{right:2.5%;top:13.3%;max-width:260px}
  .k2 .c4{right:3.5%;top:44.9%;display:flex;align-items:center;gap:12px}
  .k2 .c5{left:50%;top:93.1%;transform:translate(-50%,-50%);padding:10px 20px;border-radius:999px;animation:none}
}
@media (max-width:1100px){
  .k2 .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:760px;margin-top:16px}
  .k2 .chip{display:flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;flex:0 1 auto}
  .k2 .chip > span:not(.ico){display:flex;align-items:baseline;gap:6px}
  .k2 .chip .k,.k2 .chip .v,.k2 .c2 .big,.k2 .c2 .sm{display:inline!important;white-space:nowrap}
  .k2 .chip .k{font-size:12px}
  .k2 .chip .v,.k2 .c5 .v{font-size:13.5px!important;line-height:1.3}
  .k2 .c1 .ico{width:28px;height:28px}.k2 .c1 .ico svg{width:16px;height:16px}
  .k2 .c2{gap:6px}.k2 .c2 .big{font-size:17px}.k2 .c2 .sm{font-size:12px}
  .k2 .c4 svg{width:18px;height:18px}
}
@media (max-width:560px){
  .k2 .chips{gap:6px}
  .k2 .chip{padding:6px 11px;gap:6px}
  .k2 .chip .k{display:none!important}
  .k2 .chip .v,.k2 .c5 .v{font-size:12.5px!important}
  .k2 .c1 .ico{width:24px;height:24px}.k2 .c1 .ico svg{width:14px;height:14px}
  .k2 .c2 .big{font-size:15px}.k2 .c2 .sm{font-size:11.5px}
  .k2 .c4 svg{width:16px;height:16px}
  .k2 .hero-sub{font-size:11.5px;padding:6px 12px}
}
@media (max-width:380px){
  .k2 .chips{gap:5px}
  .k2 .chip{padding:5px 9px;gap:5px}
  .k2 .chip .v,.k2 .c5 .v{font-size:11.5px!important}
  .k2 .c1 .ico{width:20px;height:20px}.k2 .c1 .ico svg{width:12px;height:12px}
  .k2 .c2 .big{font-size:13.5px}.k2 .c2 .sm{font-size:10.5px}
  .k2 .c4 svg{width:14px;height:14px}
  .k2 .hero-sub{font-size:10.5px;padding:5px 10px}
}
@media (max-width:760px){
  .k2-stage{margin-top:18px}
  .scene{aspect-ratio:400/227;border-radius:24px;--rise:6.5cqw;--st:58.2%}
  .scene{--du:25%;--db:33.333%}
  .scene .cab{height:13.1%}
  .scene .wglow{background-position:0 6.4%,0 0,0 0}
  .k2-hood{left:16%;width:68%;top:-27.2%}
  .beam{left:20%;width:60%;top:37.7%;height:43.7%}
  .cooktop{left:27%;width:46%}
  .pot{left:41%;width:18%}
  .jars{left:2%;width:23%}
  .crock{right:3%;width:10.5%}
}
@media (prefers-reduced-motion:reduce){.steam span{animation:none;opacity:.6}}

/* ---------- hero ---------- */
#top{background:var(--bg);padding:36px 0 90px;text-align:center}
#top h1{font-size:clamp(24px,3.6vw,48px);line-height:1.3;font-weight:700;padding-bottom:.08em}
@media (min-width:720px){#top h1{white-space:nowrap}}
.label-pill{position:relative;z-index:3;display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:7px 16px;border-radius:999px;font-size:15px;font-weight:600;color:#1446D8;background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 1px #fff,0 8px 24px rgba(0,12,80,.2)}
html[data-theme] .label-pill{background:rgba(255,255,255,.7);border-color:rgba(20,70,216,.18)}
.chip{position:absolute;text-align:left;border-radius:22px;padding:16px 20px}
.chip .k{font-size:13px;font-weight:600;color:#1446D8}
.chip .v{font-size:18px;font-weight:700;line-height:1.35}
.ico{position:relative;width:48px;height:48px;flex-shrink:0;border-radius:50%;background:#1446D8;display:flex;align-items:center;justify-content:center}
.ico .pulse{position:absolute;inset:0;border-radius:50%;background:#1446D8}
.bars{display:flex;gap:4px;align-items:center;height:18px;margin-top:6px}
.bars span{width:4px;height:18px;border-radius:2px;background:#1446D8}
.c2 .big{font-size:42px;font-weight:800;line-height:1}
.c2 .sm{font-size:15px;color:var(--ink2)}
.c4 svg{color:#1446D8}
.hero-sub{display:inline-block;margin-top:8px;padding:8px 18px;border-radius:999px;font-size:15px;font-weight:600;color:#1446D8;background:rgba(255,255,255,.96);box-shadow:0 8px 24px rgba(0,12,80,.2)}
html[data-theme] .hero-sub{background:rgba(255,255,255,.7);border:1px solid rgba(20,70,216,.18)}
.hero-cta{margin-top:26px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* ---------- products carousel ---------- */
#products{background:var(--bg2)}
.pc-wrap{position:relative;margin:0 -24px}
.pc-track{display:flex;gap:22px;overflow-x:auto;overflow-y:hidden;padding:16px 24px 28px;scrollbar-width:none;cursor:grab;outline:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%)}
.pc-track::-webkit-scrollbar{display:none}
.pc-track.dragging{cursor:grabbing;user-select:none}
.pc-track:focus-visible{outline:3px solid #AEB9C9;outline-offset:2px;border-radius:24px}
.pc-card{flex:0 0 300px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 22px 24px;border-radius:28px;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.pc-card:hover{transform:translateY(-8px);box-shadow:var(--g-edge),0 26px 50px rgba(0,12,80,.3)}
.pc-badge{min-height:26px;padding:4px 14px;border-radius:999px;background:#E8EEFB;color:#1446D8;font-size:13px;font-weight:600;display:inline-flex;align-items:center}
.pc-badge.hot{background:#1446D8;color:#FFFFFF}
.pc-img{margin-top:14px;width:220px;height:200px;border-radius:24px;background:radial-gradient(circle at 50% 40%,#FFFFFF 0%,#E9EDF3 70%,#DCE2EA 100%);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 2px rgba(174,185,201,.45)}
.pc-img img{max-width:188px;max-height:165px;object-fit:contain;filter:drop-shadow(0 16px 14px rgba(10,30,90,.25));transition:transform .5s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.pc-card:hover .pc-img img{transform:translateY(-8px) scale(1.06)}
.pc-brand{margin-top:14px;font-size:12px;font-weight:700;letter-spacing:.16em;color:#8A96AA}
.pc-name{margin:4px 0 0;font-size:20px;line-height:1.4;font-weight:700}
.pc-desc{margin-top:6px;font-size:14.5px;line-height:1.6;color:var(--ink2);flex-grow:1}
.pc-actions{margin-top:16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center}
.pc-buy{height:40px;padding:0 18px;display:inline-flex;align-items:center;border-radius:999px;font-size:14.5px;font-weight:600;color:#1446D8;background:#FFFFFF;border:1.5px solid rgba(20,70,216,.55);transition:background .25s,color .25s}
.pc-buy:hover{background:#1446D8;color:#FFFFFF}
.pc-more{font-size:14.5px;font-weight:600;color:#1446D8}
.pc-arrow{position:absolute;top:50%;z-index:2;width:48px;height:48px;margin-top:-24px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--btn-fg);background:var(--btn-bg);border:1px solid rgba(255,255,255,.85);box-shadow:0 8px 24px rgba(0,12,80,.3);transition:transform .25s}
.pc-arrow:hover{transform:scale(1.08)}
.pc-prev{left:4px}.pc-next{right:4px}

/* ---------- big number ---------- */
#power{background:var(--bg3);padding:72px 0;text-align:center}
.bignum{display:inline-block;padding:.04em .1em .06em;font-size:clamp(84px,14vw,170px);line-height:1;font-weight:800;letter-spacing:-.05em}
.bignum small{font-size:.32em;letter-spacing:0;font-weight:700}
#power p{margin:14px auto 0;max-width:780px;font-size:clamp(16px,1.6vw,20px);line-height:1.7}
.stats{margin-top:44px;padding-top:30px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.stats div{display:flex;flex-direction:column;gap:6px}
.stats b{font-size:36px;font-weight:700;line-height:1.25}
.stats span{font-size:16px;color:var(--text2)}

/* ---------- features bento ---------- */
#features{background:var(--bg)}
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:400px;gap:20px}
.bento > div{border-radius:32px;overflow:hidden}
.b-wide{grid-column:span 2;display:flex}
.b-wide .txt{flex:1;padding:44px;display:flex;flex-direction:column;justify-content:space-between}
.b-wide img{width:46%;object-fit:cover;object-position:62% 50%;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.b-wide:hover img{transform:scale(1.06)}
.b-cell{padding:40px;display:flex;flex-direction:column;justify-content:space-between}
.tile{width:62px;height:62px;border-radius:20px;display:flex;align-items:center;justify-content:center;background:#E8EEFB;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.tile.blue{background:#1446D8}.tile.clear{background:rgba(255,255,255,.16)}
.hov:hover .tile{transform:scale(1.12) rotate(-6deg)}
.b-cell h3,.b-wide h3{font-size:28px;line-height:1.4;font-weight:700}
.b-wide h3{font-size:36px}
.b-cell p,.b-wide p{font-size:16.5px;line-height:1.7}
.glass-card p{color:var(--ink2)}
.glass-navy p{color:#C9D5F5}
.kicker{font-size:15px;font-weight:600;color:#A9BBEB;margin-bottom:12px}
.b-num{font-size:72px;line-height:1;font-weight:800;letter-spacing:-.05em;color:#1446D8}
.b-num small{font-size:26px;letter-spacing:0}

/* ---------- interior design ---------- */
#interior{background:var(--bg3)}
.int-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.frame{position:relative;border-radius:28px;overflow:hidden;border:1px solid var(--g-chip-border);box-shadow:var(--g-drop)}
.frame img{width:100%;height:100%;object-fit:cover}
.frame .tag{position:absolute;left:16px;bottom:16px;padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600;color:#1446D8;background:rgba(255,255,255,.92);box-shadow:0 6px 18px rgba(0,12,60,.25)}
.int-main{height:640px}
.int-side{display:flex;flex-direction:column;gap:20px}
.int-plan{height:380px;background:#E9ECF1}
.int-plan img{object-fit:contain}
.dims{display:flex;gap:10px;flex-wrap:wrap}
.dims span{padding:8px 14px;border-radius:14px;font-size:15px;font-weight:600}
.zones{border-radius:28px;padding:26px 28px;flex:1}
.zones h3{font-size:22px;margin-bottom:14px}
.zones ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;font-size:15.5px;line-height:1.5}
.zones li{display:flex;gap:8px;align-items:flex-start}
.zones li::before{content:"";flex-shrink:0;width:8px;height:8px;margin-top:7px;border-radius:2px;background:#1446D8;transform:rotate(45deg)}
.kitchen{margin-top:20px;height:560px}
.kitchen img{position:absolute;inset:0;transition:opacity .9s ease}
.kitchen img.k-open{opacity:0}
.kitchen.open img.k-open{opacity:1}
.kswitch{position:absolute;right:16px;top:16px;display:flex;padding:4px;border-radius:999px;background:rgba(255,255,255,.9);box-shadow:0 6px 18px rgba(0,12,60,.25)}
.kswitch button{border:0;cursor:pointer;font-family:inherit;height:36px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:600;color:#1446D8;background:transparent;transition:background .3s,color .3s}
.kswitch button.on{background:#1446D8;color:#FFFFFF}

/* ---------- videos (shown only when MEDIA.videos has links) ---------- */
[hidden]{display:none!important}
#videos{background:var(--bg2)}
.vid-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.vid{position:relative;flex:1 1 340px;max-width:600px;aspect-ratio:16/9;border-radius:24px;overflow:hidden;border:1px solid var(--g-chip-border);box-shadow:var(--g-drop);background:#000}
.vid.tall{flex:0 1 300px;aspect-ratio:9/16}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- how to buy ---------- */
#how{background:var(--bg)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.step{position:relative;padding:32px;border-radius:28px;display:flex;flex-direction:column;gap:12px;color:var(--text)}
.step::before{content:"";position:absolute;top:0;left:32px;right:32px;height:3px;border-radius:0 0 3px 3px;background:var(--grad)}
.step .n{font-size:20px;font-weight:700;color:var(--text3)}
.step h3{font-size:26px;line-height:1.4}
.step p{font-size:17px;line-height:1.7;color:var(--text2)}

/* ---------- store ---------- */
#store{background:var(--bg2);display:grid;grid-template-columns:1fr 1fr;min-height:760px}
#store .photo{overflow:hidden;min-height:520px}
#store .photo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
#store .info{padding:72px 64px;display:flex;flex-direction:column;justify-content:center;gap:22px;max-width:640px}
#store h2{font-size:clamp(32px,4vw,54px);line-height:1.3}
#store .info p{font-size:19px;line-height:1.7;color:var(--text2)}
.contact{display:flex;flex-direction:column;gap:12px;font-size:17px}
.contact span{display:flex;align-items:center;gap:10px}
.contact svg{flex-shrink:0;color:var(--text3)}

/* ---------- footer ---------- */
footer{background:var(--foot);color:var(--text2);padding:56px 0 44px;font-size:15.5px;transition:background .4s}
.ft{display:flex;justify-content:space-between;gap:48px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.ft .brand span{color:var(--text);font-size:16px;max-width:300px;line-height:1.5}
.ft-cols{display:flex;gap:72px}
.ft-cols div{display:flex;flex-direction:column;gap:10px}
.ft-cols b{color:var(--text);font-weight:600}
.ft-cols a:hover{color:var(--text)}
.fb{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;font-size:14px}

#to-top{position:fixed;right:calc(22px + env(safe-area-inset-right,0px));bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:60;width:46px;height:46px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--btn-fg);background:var(--btn-bg);border:1px solid rgba(255,255,255,.85);box-shadow:0 10px 28px rgba(0,12,80,.35);opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .3s,visibility .3s,transform .3s}
#to-top.show{opacity:1;visibility:visible;transform:none}
.emo{display:inline-block;margin-right:.35em;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;font-weight:400}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  nav.menu{gap:0;font-size:15px}
  nav.menu a{padding:6px 10px}
  .hd-cta{display:none}
  .stage{height:auto;padding-top:20px;display:flex;flex-direction:column;align-items:center}
  .stage .glow,.ring{display:none}
  .hero-prod{position:relative;left:auto;top:auto;margin:0;width:min(560px,92%)}
  .shadow{display:none}
  .chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:640px;margin-top:22px}
  .chip{position:static;animation:none;max-width:none!important}
  .c5{border-radius:22px;display:flex;align-items:center;justify-content:center}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  .b-wide{grid-column:1/-1;min-height:340px}
  .b-cell{min-height:280px}
  .int-grid{grid-template-columns:1fr}
  .int-main{height:auto;aspect-ratio:1100/1204;max-height:760px}
  .kitchen{height:auto;aspect-ratio:3/2}
  #store{grid-template-columns:1fr 1fr}
  #store .info{padding:48px 32px}
}
@media (max-width:760px){
  .hd{height:auto;flex-wrap:wrap;padding-top:10px;padding-bottom:8px;row-gap:6px}
  header .brand{order:1}.tools{order:2;margin-left:auto}
  nav.menu{order:3;width:100%;flex:none;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;gap:8px;font-size:14px;white-space:nowrap;padding-bottom:4px}
  nav.menu::-webkit-scrollbar{display:none}
  nav.menu a{height:30px;display:inline-flex;align-items:center;padding:0 14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3)}
  html[data-theme] nav.menu a{background:rgba(20,70,216,.07);border-color:rgba(20,70,216,.22)}
  .pill .lang-opt.on{display:none}.pill .sep{display:none}
  .sec{padding:64px 0}
  .sec-head{margin-bottom:32px}
  #top{padding:24px 0 64px}
  .label-pill,.hero-sub{font-size:13px}
  .chip{padding:14px 16px}
  .chip .v{font-size:15.5px}
  .c1 .ico{width:40px;height:40px}
  .c2 .big{font-size:32px}
  .stats{grid-template-columns:1fr;gap:20px}
  .bento{grid-template-columns:1fr}
  .b-wide{flex-direction:column}
  .b-wide img{width:100%;height:240px}
  .b-wide .txt,.b-cell{padding:28px;gap:22px}
  .b-wide h3{font-size:28px}
  .b-cell h3{font-size:24px}
  .zones ul{grid-template-columns:1fr}
  .int-plan{height:auto;aspect-ratio:1200/1097}
  .kswitch button{height:32px;padding:0 12px;font-size:13px}
  .steps{grid-template-columns:1fr}
  #store{grid-template-columns:1fr}
  #store .photo{min-height:0;aspect-ratio:4/5}
  #store .info{padding:44px 24px}
  .pc-card{flex-basis:260px}
  .pc-arrow{display:none}
  .ft,.ft-cols{flex-direction:column;gap:28px}
  #to-top{right:14px;bottom:14px;width:42px;height:42px}
}
@media (max-width:420px){
  .chips{gap:8px}.chip{padding:12px}.chip .v{font-size:14px}.c1{gap:8px}.c1 .ico{width:34px;height:34px}.c1 .ico svg{width:18px;height:18px}.c3 .v,.c4 .v{font-size:13.5px}.c4 svg{width:20px;height:20px}
  .hero-cta .btn{width:100%;justify-content:center}
  .brand small{display:none}
}
@media (prefers-reduced-motion:reduce){
  .float,.bob,.spin,.spin-rev,.bar,.pulse,.grad,.kb,.orb,.btn-main,.hop,.fan,.intro,.reveal,.reveal-l,.reveal-r{animation:none!important}
  .pc-card,.pc-img img,.hov,.kitchen img{transition:none}
}