:root{
  --bg:#FBF7F2; --bg-alt:#F2EBE1; --surface:#FFFFFF; --ink:#16201B; --ink-soft:#5A655E;
  --accent:#D9480F; --accent-2:#1F2D26; --accent-soft:#FFE7D6; --on-accent:#FFFFFF;
  --border:rgba(22,32,27,.12); --glow:rgba(217,72,15,.22); --radius:16px;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A0F0C; --bg-alt:#0F1612; --surface:#141C17; --ink:#F2F4EF; --ink-soft:#A5B0A8;
    --accent:#FF7A1A; --accent-soft:#2B190B; --on-accent:#1A0E04; --border:rgba(255,255,255,.12); --glow:rgba(255,122,26,.28);
  }
}
:root[data-theme="dark"]{
  --bg:#0A0F0C; --bg-alt:#0F1612; --surface:#141C17; --ink:#F2F4EF; --ink-soft:#A5B0A8;
  --accent:#FF7A1A; --accent-soft:#2B190B; --on-accent:#1A0E04; --border:rgba(255,255,255,.12); --glow:rgba(255,122,26,.28);
}
:root[data-accent="green"]{--accent:#12805F; --accent-soft:#DDF1E8; --glow:rgba(18,128,95,.22);}
:root[data-accent="blue"]{--accent:#1D4ED8; --accent-soft:#DBE7FF; --glow:rgba(29,78,216,.22);}
:root[data-theme="dark"][data-accent="green"]{--accent:#3FD3A0; --accent-soft:#12291F; --glow:rgba(63,211,160,.25);}
:root[data-theme="dark"][data-accent="blue"]{--accent:#6B9BFF; --accent-soft:#16224A; --glow:rgba(107,155,255,.25);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"])[data-accent="green"]{--accent:#3FD3A0; --accent-soft:#12291F; --glow:rgba(63,211,160,.25);}
  :root:not([data-theme="light"])[data-accent="blue"]{--accent:#6B9BFF; --accent-soft:#16224A; --glow:rgba(107,155,255,.25);}
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:calc(74px + env(safe-area-inset-top,0px));}
html{height:100%;} body{min-height:100%;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:'Noto Sans Tamil','Noto Sans',system-ui,sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip;}
h1,h2,h3,h4,.display{font-family:'Baloo Thambi 2','Noto Sans Tamil',system-ui,sans-serif; font-weight:700; line-height:1.12; margin:0;}
a{color:inherit;} img,svg{max-width:100%;}
.wrap{max-width:1160px; margin:0 auto; padding:0 20px;}
.bg-fixed{position:fixed; inset:0; z-index:-1; background:url("shop-bg.jpg") center 30%/cover no-repeat; pointer-events:none;}
.bg-fixed::after{content:''; position:absolute; inset:0; background:rgba(5,9,7,.5);}
section{padding:72px 0; background:color-mix(in srgb, var(--bg) 86%, transparent);}
.alt{background:color-mix(in srgb, var(--bg-alt) 88%, transparent);}
section.hero{background:linear-gradient(90deg, rgba(5,9,7,.72) 0%, rgba(5,9,7,.4) 50%, rgba(5,9,7,0) 100%);}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:14px;}
.eyebrow::before{content:''; width:22px; height:2px; background:var(--accent); border-radius:2px;}
.sec-head{max-width:60ch; margin-bottom:38px;}
.sec-head h2{font-size:clamp(1.7rem,4.2vw,2.5rem);}
.sec-head p{color:var(--ink-soft); margin:12px 0 0;}
.center{margin-left:auto; margin-right:auto; text-align:center;} .center .eyebrow{justify-content:center;}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:999px; border:1px solid transparent; font-family:inherit; font-weight:700; font-size:.94rem; text-decoration:none; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--accent); color:var(--on-accent); box-shadow:0 10px 26px -10px var(--glow);}
.btn-primary:hover{box-shadow:0 16px 32px -10px var(--glow);}
.btn-dark{background:var(--ink); color:var(--bg);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--border);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent);}
.btn-block{width:100%;} .btn-sm{padding:9px 15px; font-size:.84rem;}
.btn:focus-visible,a:focus-visible,summary:focus-visible,.cat:focus-visible,.tab:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

/* preloader */
#preloader{position:fixed; inset:0; z-index:999; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; transition:opacity .5s ease, visibility .5s ease;}
#preloader.hide{opacity:0; visibility:hidden;}
.pl-ring{position:relative; width:150px; height:150px; display:flex; align-items:center; justify-content:center;}
.pl-ring svg{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg);}
.pl-ring .trk{fill:none; stroke:var(--border); stroke-width:5;}
.pl-ring .prg{fill:none; stroke:var(--accent); stroke-width:5; stroke-linecap:round; stroke-dasharray:427.26; stroke-dashoffset:427.26; transition:stroke-dashoffset .15s linear; filter:drop-shadow(0 0 6px var(--glow));}
.pl-logo{width:76px; animation:pop .6s ease;}
.pl-num{font-family:'Baloo Thambi 2',sans-serif; font-weight:700; color:var(--ink-soft); font-size:.95rem;}
@keyframes pop{from{transform:scale(.75); opacity:0;} to{transform:scale(1); opacity:1;}}
.logo-on-dark{display:none!important;}
:root[data-theme="dark"] .logo-on-dark{display:block!important;} :root[data-theme="dark"] .logo-on-light{display:none!important;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-on-dark{display:block!important;}
  :root:not([data-theme="light"]) .logo-on-light{display:none!important;}
}

/* header */
header.site{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--border); padding-top:env(safe-area-inset-top,0px);}
.nav-row{max-width:1160px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand img{height:34px; width:auto;}
.brand-text{font-family:'Baloo Thambi 2',sans-serif; font-weight:700; letter-spacing:.02em; font-size:1rem; white-space:nowrap;}
nav.links{display:flex; gap:22px;}
nav.links a{font-size:.9rem; font-weight:600; text-decoration:none; color:var(--ink-soft); position:relative; padding:4px 0;}
nav.links a::after{content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--accent); transition:width .25s;}
nav.links a:hover{color:var(--ink);} nav.links a:hover::after{width:100%;}
.nav-actions{display:flex; align-items:center; gap:8px;}
.icon-btn{width:40px; height:40px; padding:0; border-radius:50%; border:1px solid var(--border); background:transparent; color:var(--ink); font-size:1rem; cursor:pointer; font-family:inherit; font-weight:700;}
.icon-btn:hover{border-color:var(--accent);}
#lang-toggle{width:auto; padding:0 14px; border-radius:999px; font-size:.8rem;}
.theme-wrap{position:relative;}
.theme-panel{position:absolute; right:0; top:calc(100% + 10px); background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px; width:212px; box-shadow:0 22px 44px -18px rgba(0,0,0,.45); z-index:60;}
.theme-panel[hidden]{display:none;}
.tp-label{font-size:.75rem; color:var(--ink-soft); font-weight:700; margin:2px 0 8px;}
.tp-row{display:flex; gap:8px; margin-bottom:12px;} .tp-row:last-child{margin-bottom:0;}
.tp-opt{flex:1; padding:9px 6px; border-radius:10px; border:1px solid var(--border); background:var(--bg-alt); color:var(--ink); font-family:inherit; font-size:.84rem; font-weight:600; cursor:pointer;}
.tp-opt.active{border-color:var(--accent); outline:2px solid var(--accent);}
.tp-dot{width:34px; height:34px; border-radius:50%; border:2px solid var(--border); cursor:pointer;}
.tp-dot.active{outline:2px solid var(--ink); outline-offset:2px;}
#menu-btn{display:none;}
.mobile-menu{display:none; border-top:1px solid var(--border); padding:8px 20px 16px;}
.mobile-menu a{display:block; padding:12px 0; text-decoration:none; font-weight:600; border-bottom:1px dashed var(--border);}
.mobile-menu.open{display:block;}

/* hero */
.hero{position:relative; padding:64px 0 76px; overflow:hidden; isolation:isolate;}
.hero{background:linear-gradient(90deg, rgba(5,9,7,.72) 0%, rgba(5,9,7,.4) 50%, rgba(5,9,7,0) 100%); color:#F4F6F1;}
.hero::before{content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(50% 60% at 90% 30%, var(--glow), transparent 70%);}
.hero-grid{display:grid; grid-template-columns:minmax(0,640px); gap:40px; align-items:center; min-height:520px;}
.pill{display:inline-flex; align-items:center; gap:8px; background:var(--accent-soft); color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); padding:6px 14px; border-radius:999px; font-size:.82rem; font-weight:700; margin-bottom:18px;}
.pill .dot{width:8px; height:8px; border-radius:50%; background:var(--accent); animation:blink 1.6s ease-in-out infinite;}
@keyframes blink{50%{opacity:.25;}}
.hero h1{color:#fff; font-size:clamp(2.2rem,6vw,3.9rem); letter-spacing:-.01em;}
.hero h1 em{font-style:normal; color:var(--accent); position:relative; white-space:nowrap;}
.hero .lead{margin:18px 0 0; font-size:1.06rem; color:rgba(244,246,241,.85); max-width:50ch;}
.hero .btn-ghost{color:#fff; border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.06);}
.hero .btn-ghost:hover{border-color:var(--accent); color:var(--accent);}
.hero-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px;}
.hero-info{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:24px; font-size:.86rem; color:rgba(244,246,241,.8);}
.hero-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:34px; max-width:480px;}
.hstat{border-left:2px solid var(--accent); padding-left:12px;}
.hstat b{display:block; font-family:'Baloo Thambi 2',sans-serif; font-size:1.55rem; line-height:1.1;}
.hstat span{font-size:.78rem; color:rgba(244,246,241,.75);}

.hero-art{position:relative; display:flex; justify-content:center;}
.hero-art svg{width:100%; max-width:460px; overflow:visible;}
.pc-body{fill:var(--surface); stroke:var(--border); stroke-width:2;}
.pc-line{stroke:var(--accent); stroke-width:2.5; fill:none; stroke-linecap:round;}
.pc-fill{fill:var(--accent);}
.pc-dim{fill:none; stroke:var(--border); stroke-width:2;}
.fan{transform-origin:150px 220px; animation:spin 3s linear infinite;}
.fan2{transform-origin:150px 300px; animation:spin 4s linear infinite reverse;}
@keyframes spin{to{transform:rotate(360deg);}}
.led{animation:blink 2s ease-in-out infinite;}
.chip{position:absolute; display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:8px 14px; font-size:.82rem; font-weight:700; box-shadow:0 14px 30px -16px rgba(0,0,0,.5); animation:float 5s ease-in-out infinite;}
.chip.c1{top:6%; left:0;} .chip.c2{top:22%; right:-2%; animation-delay:1s;} .chip.c3{bottom:20%; left:-2%; animation-delay:2s;} .chip.c4{bottom:4%; right:4%; animation-delay:3s;}
@keyframes float{50%{transform:translateY(-10px);}}

/* marquee */
.ticker{border-block:1px solid var(--border); background:color-mix(in srgb, var(--bg-alt) 88%, transparent); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); overflow:hidden; padding:16px 0;}
.ticker-track{display:flex; gap:44px; width:max-content; animation:marquee 34s linear infinite;}
.ticker:hover .ticker-track{animation-play-state:paused;}
.ticker span{font-family:'Baloo Thambi 2',sans-serif; font-weight:600; font-size:1.05rem; color:var(--ink-soft); white-space:nowrap; display:flex; align-items:center; gap:44px;}
.ticker span::after{content:'✦'; color:var(--accent);}
@keyframes marquee{to{transform:translateX(-50%);}}

/* category tiles */
.cats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.cat{position:relative; overflow:hidden; text-align:left; cursor:pointer; font-family:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:24px 22px 22px; min-height:200px; display:flex; flex-direction:column; justify-content:flex-end; transition:transform .25s ease, border-color .25s ease;}
.cat::before{content:''; position:absolute; inset:0; background:radial-gradient(90% 70% at 100% 0%, var(--glow), transparent 70%); opacity:.7; transition:opacity .25s;}
.cat:hover{transform:translateY(-6px); border-color:var(--accent);} .cat:hover::before{opacity:1;}
.cat .em{position:absolute; top:16px; right:18px; font-size:3rem; filter:drop-shadow(0 8px 14px rgba(0,0,0,.25));}
.cat h3{position:relative; font-size:1.2rem;} .cat p{position:relative; margin:6px 0 0; font-size:.86rem; color:var(--ink-soft);}
.cat .go{position:relative; margin-top:12px; font-weight:700; font-size:.84rem; color:var(--accent);}

/* steps */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; counter-reset:s;}
.steps::before{content:''; position:absolute; top:26px; left:10%; right:10%; height:2px; background:repeating-linear-gradient(90deg,var(--accent) 0 8px,transparent 8px 16px); opacity:.55;}
.step{position:relative; text-align:center; padding:0 12px;}
.step .num{width:54px; height:54px; margin:0 auto 16px; border-radius:50%; background:var(--bg); border:2px solid var(--accent); color:var(--accent); display:flex; align-items:center; justify-content:center; font-family:'Baloo Thambi 2',sans-serif; font-weight:700; font-size:1.1rem; position:relative; z-index:1; transition:background .25s,color .25s, transform .25s;}
.alt .step .num{background:var(--bg-alt);}
.step:hover .num{background:var(--accent); color:var(--on-accent); transform:scale(1.08);}
.step small{display:block; color:var(--ink-soft); font-size:.8rem;}
.step h3{font-size:1.1rem; margin:2px 0 8px;}
.step p{margin:0; font-size:.86rem; color:var(--ink-soft);}

/* prebuilt */
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px;}
.tab{padding:10px 20px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--ink-soft); font-family:inherit; font-weight:700; font-size:.9rem; cursor:pointer;}
.tab.active{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
.build-panel{display:grid; grid-template-columns:1fr 1fr; gap:0; background:var(--surface); border:1px solid var(--border); border-radius:26px; overflow:hidden;}
.build-visual{position:relative; min-height:300px; display:flex; align-items:center; justify-content:center; background:radial-gradient(70% 70% at 50% 40%, var(--glow), transparent 75%), var(--bg-alt);}
.build-visual .big{font-size:7.5rem; filter:drop-shadow(0 20px 26px rgba(0,0,0,.35)); animation:float 5s ease-in-out infinite;}
.build-info{padding:32px;}
.build-info h3{font-size:1.7rem;} .build-info .desc{color:var(--ink-soft); margin:8px 0 18px;}
.spec-list{list-style:none; margin:0 0 18px; padding:0;}
.spec-list li{display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px dashed var(--border); font-size:.94rem;}
.spec-list li span:first-child{color:var(--ink-soft);} .spec-list li span:last-child{font-weight:600; text-align:right;}
.price-row{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; background:var(--accent-soft); border-radius:14px; padding:14px 18px;}
.price-row .label{font-size:.78rem; color:var(--ink-soft);}
.price-row .val{font-family:'Baloo Thambi 2',sans-serif; font-weight:700; font-size:1.5rem; color:var(--accent);}

/* services */
.svc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px;}
.svc{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:24px; transition:transform .25s, border-color .25s, box-shadow .25s;}
.svc:hover{transform:translateY(-5px); border-color:var(--accent); box-shadow:0 22px 40px -26px var(--glow);}
.svc .ic{width:48px; height:48px; border-radius:14px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:14px;}
.svc h3{font-size:1.06rem; margin-bottom:6px;} .svc p{margin:0; font-size:.9rem; color:var(--ink-soft);}

/* service floating tab */
.svc{cursor:pointer; position:relative; text-align:left; font:inherit; color:inherit;}
.svc .more{display:inline-block; margin-top:12px; font-weight:700; font-size:.84rem; color:var(--accent);}
.svc:hover .more{letter-spacing:.02em;}
#svc-dlg{width:min(520px, calc(100vw - 28px)); max-height:calc(100dvh - 40px); overflow:auto;}
#svc-dlg[open]{animation:sheet .32s cubic-bezier(.2,.9,.3,1);}
@keyframes sheet{from{opacity:0; transform:translateY(36px) scale(.97);} to{opacity:1; transform:none;}}
#svc-dlg[open]::backdrop{animation:fade .3s ease;} @keyframes fade{from{opacity:0;} to{opacity:1;}}
.sd-head{display:flex; align-items:center; gap:14px; margin-bottom:14px; padding-right:40px;}
.sd-ic{width:56px; height:56px; border-radius:16px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; font-size:28px; flex:none;}
.sd-list{list-style:none; margin:16px 0; padding:0;}
.sd-list li{padding:9px 0 9px 26px; position:relative; border-bottom:1px dashed var(--border); font-size:.93rem;}
.sd-list li::before{content:'✓'; position:absolute; left:0; color:var(--accent); font-weight:700;}
.sd-price{background:var(--accent-soft); border-radius:14px; padding:12px 16px; margin-bottom:16px; font-size:.9rem;}
.sd-price b{font-family:'Baloo Thambi 2',sans-serif; font-size:1.25rem; color:var(--accent);}
.sd-actions{display:flex; flex-wrap:wrap; gap:10px;} .sd-actions .btn{flex:1; min-width:150px;}
@media (max-width:520px){
  #svc-dlg{margin:auto auto 0; width:100vw; max-width:100vw; border-radius:24px 24px 0 0; max-height:88dvh;}
  #svc-dlg[open]{animation:sheetm .32s cubic-bezier(.2,.9,.3,1);}
}
@keyframes sheetm{from{transform:translateY(100%);} to{transform:none;}}

/* forms */
.split{display:grid; grid-template-columns:.9fr 1.1fr; gap:36px; align-items:start;}
.form-card{background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:28px;}
.row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;} .row.one{grid-template-columns:1fr;}
label{display:block; font-size:.82rem; font-weight:700; color:var(--ink-soft); margin-bottom:6px;}
input,select,textarea{width:100%; padding:12px 13px; border-radius:12px; border:1px solid var(--border); background:var(--bg-alt); color:var(--ink); font-family:inherit; font-size:.95rem;}
textarea{min-height:88px; resize:vertical;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:1px;}
.note{font-size:.8rem; color:var(--ink-soft); margin:10px 0 16px;}
.addr-tools{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.side-note{display:flex; flex-direction:column; gap:14px;}
.side-note .mini{display:flex; gap:14px; align-items:flex-start; padding:16px; background:var(--surface); border:1px solid var(--border); border-radius:16px;}
.side-note .mini .e{font-size:1.5rem;} .side-note .mini h4{font-size:1rem; margin-bottom:2px;} .side-note .mini p{margin:0; font-size:.86rem; color:var(--ink-soft);}

/* pricing / plans */
.price-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px;}
.pcard{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:24px;}
.pcard h3{font-size:1rem; color:var(--ink-soft); font-family:'Noto Sans Tamil',sans-serif; font-weight:600; margin-bottom:8px;}
.pcard .amt{font-family:'Baloo Thambi 2',sans-serif; font-weight:700; font-size:2rem; color:var(--accent);}
.pcard .amt span{font-size:.9rem; color:var(--ink-soft); font-weight:500;}
.price-note{font-size:.8rem; color:var(--ink-soft); margin-top:18px;}
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; align-items:stretch;}
.plan{background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:28px; display:flex; flex-direction:column; position:relative;}
.plan.featured{border-color:var(--accent); box-shadow:0 26px 50px -30px var(--glow);}
.plan .badge{position:absolute; top:-12px; right:22px; background:var(--accent); color:var(--on-accent); font-size:.72rem; font-weight:700; padding:4px 12px; border-radius:999px;}
.plan .amt{font-family:'Baloo Thambi 2',sans-serif; font-weight:700; font-size:2.1rem; color:var(--accent); margin:8px 0;}
.plan .amt small{font-size:.9rem; color:var(--ink-soft); font-weight:500;}
.plan ul{list-style:none; margin:10px 0 22px; padding:0; flex:1;}
.plan li{padding:9px 0 9px 26px; position:relative; font-size:.9rem; color:var(--ink-soft); border-bottom:1px dashed var(--border);}
.plan li::before{content:'✓'; position:absolute; left:0; color:var(--accent); font-weight:700;}

/* trust + stats */
.trust{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:34px;}
.badge-t{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:15px 18px; font-weight:700; font-size:.92rem;}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:18px; padding:30px; border-radius:24px; background:linear-gradient(135deg, var(--accent-2), #0f1a14); color:#fff;}
.stat{text-align:center;} .stat b{display:block; font-family:'Baloo Thambi 2',sans-serif; font-size:2.3rem; color:var(--accent); line-height:1.1;} .dark-num{color:#FF8A3D;}
.stat span{font-size:.86rem; color:rgba(255,255,255,.75);}

/* reviews / updates */
.grid3{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px;}
.review{background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:24px;}
.stars{color:#F5A524; letter-spacing:2px; margin-bottom:10px;}
.review p{margin:0 0 14px; color:var(--ink-soft); font-size:.94rem;} .review .who{font-weight:700; font-size:.9rem;}
.update{background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:14px; padding:20px;}
.update .date{font-size:.78rem; font-weight:700; color:var(--accent); margin-bottom:6px;} .update h3{font-size:1.02rem; margin-bottom:6px;} .update p{margin:0; font-size:.9rem; color:var(--ink-soft);}

/* faq */
.faq{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}
.faq details{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:0 22px; transition:border-color .2s;}
.faq details[open]{border-color:var(--accent);}
.faq summary{list-style:none; cursor:pointer; padding:18px 0; font-weight:700; display:flex; justify-content:space-between; align-items:center; gap:14px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+'; font-size:1.5rem; line-height:1; color:var(--accent); transition:transform .25s;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{margin:0 0 18px; color:var(--ink-soft); font-size:.94rem;}

/* contact */
.contact{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start;}
.card{background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:28px;}
.c-row{display:flex; gap:14px; margin-bottom:18px; align-items:flex-start;}
.c-row .ic{width:40px; height:40px; border-radius:12px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; flex:none; font-size:1.05rem;}
.c-row h4{font-size:.95rem; margin-bottom:2px;} .c-row p{margin:0; color:var(--ink-soft); font-size:.92rem;}
.hours{width:100%; border-collapse:collapse; font-size:.94rem;} .hours td{padding:10px 0; border-bottom:1px dashed var(--border);} .hours td:last-child{text-align:right; color:var(--ink-soft);}

.bgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.bcard{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:22px;text-decoration:none;color:var(--ink);transition:transform .2s,border-color .2s}
.bcard:hover{transform:translateY(-3px);border-color:var(--accent)}
.bcard .bi{width:46px;height:46px;border-radius:14px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-size:22px}
.bcard h3{font-size:1.05rem;margin:4px 0 0}.bcard p{margin:0;color:var(--ink-soft);font-size:.92rem}.bcard .rm{margin-top:auto;color:var(--accent);font-weight:700}

.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px;}
.post-card{display:flex; flex-direction:column; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:22px; text-decoration:none; color:var(--ink); transition:transform .2s, border-color .2s;}
.post-card:hover{transform:translateY(-3px); border-color:var(--accent);}
.post-card .pe{font-size:1.8rem;} .post-card h3{font-size:1.08rem; margin:0;} .post-card p{margin:0; color:var(--ink-soft); font-size:.92rem; flex:1;}
.post-card .more{color:var(--accent); font-weight:700; font-size:.9rem;}
.blogwrap{padding-top:34px; padding-bottom:60px;}
.post-page{max-width:760px; margin:0 auto; line-height:1.85; color:var(--ink-soft);} .post-page h1{color:var(--ink); font-size:clamp(1.6rem,4.5vw,2.3rem); margin:14px 0 20px;}
.post-page b{color:var(--ink);} .post-page a{color:var(--accent);} .post-page .back{text-decoration:none; font-weight:700;} .post-page .src{font-size:.82rem;}
.post-page .az{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2px 24px;} .post-page .az p{margin:6px 0;}
.cta-box{margin:34px 0 18px; padding:22px; border:1px solid var(--border); border-radius:20px; background:var(--surface);} .cta-box h3{margin:0 0 12px; color:var(--ink);} .cta-box .btn{margin:0 6px 6px 0; color:inherit;} .cta-box .btn-primary{color:var(--on-accent);}
.nextp{font-size:.95rem;}
.kw{color:var(--accent); font-weight:700; font-size:.85rem; margin:-8px 0 18px;}
/* footer */
footer{background:color-mix(in srgb, var(--bg-alt) 92%, transparent); border-top:1px solid var(--border); padding:56px 0 calc(28px + env(safe-area-inset-bottom,0px));}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px;}
.foot-grid img{height:92px; width:auto; margin-bottom:12px;}
.foot-grid h4{font-size:.95rem; margin-bottom:12px;}
.foot-grid a{display:block; text-decoration:none; color:var(--ink-soft); font-size:.9rem; padding:4px 0;} .foot-grid a:hover{color:var(--accent);}
.foot-grid p{margin:0 0 8px; color:var(--ink-soft); font-size:.9rem;}
.foot-bottom{margin-top:34px; padding-top:20px; border-top:1px solid var(--border); font-size:.8rem; color:var(--ink-soft); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.disclaimer{font-size:.74rem; opacity:.75; margin-top:12px; max-width:90ch;}

/* dialog */
dialog{border:1px solid var(--border); background:var(--surface); color:var(--ink); border-radius:24px; padding:0; width:min(440px, calc(100vw - 32px)); box-shadow:0 40px 80px -30px rgba(0,0,0,.6);}
dialog::backdrop{background:rgba(0,0,0,.6); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);}
.dlg{padding:28px;} .dlg h3{font-size:1.4rem; margin-bottom:4px;} .dlg .sub{margin:0 0 18px; color:var(--ink-soft); font-size:.9rem;}
.dlg-x{position:absolute; top:12px; right:12px;}

.float-wa{position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:40; width:58px; height:58px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 28px -8px rgba(37,211,102,.6);}
.float-wa svg{width:30px; height:30px; fill:#fff;}
.float-wa::after{content:''; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation:ring 2.2s ease-out infinite;}
@keyframes ring{from{transform:scale(1); opacity:.8;} to{transform:scale(1.6); opacity:0;}}

/* reveal */
.js .reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; transition-delay:var(--d,0s);}
.js .reveal.in{opacity:1; transform:none;}

@media (max-width:980px){
  .cats{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:1fr; gap:22px;} .steps::before{display:none;}
  .step{display:flex; text-align:left; gap:16px; align-items:flex-start; padding:0;} .step .num{margin:0; flex:none;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:820px){
  section{padding:54px 0;}
  .hero{padding:48px 0 56px; background:linear-gradient(180deg, rgba(5,9,7,.5) 0%, rgba(5,9,7,.4) 100%);} .hero-grid{min-height:0;}
  nav.links{display:none;} #menu-btn{display:inline-block;} .hide-m{display:none!important;}
  .split,.contact,.build-panel{grid-template-columns:1fr;} .row{grid-template-columns:1fr;}
  .build-visual{min-height:200px;} .build-visual .big{font-size:5.5rem;} .build-info{padding:24px;}
  .brand-text{font-size:.9rem;}
}
@media (max-width:520px){
  .cats{grid-template-columns:1fr 1fr; gap:12px;} .cat{min-height:190px; padding:16px 14px; justify-content:flex-end;} .cat .em{font-size:2.1rem; top:12px; right:12px;}
  .cat h3{font-size:1.05rem;} .brand-text{font-size:.78rem; letter-spacing:0;} .brand img{height:28px;} .nav-row{padding:10px 14px; gap:8px;} .nav-actions{gap:6px;}
  .icon-btn{width:36px; height:36px;} #lang-toggle{padding:0 11px;}
  .foot-grid{grid-template-columns:1fr;} .hero-stats{gap:8px;} .hstat b{font-size:1.3rem;}
  .chip{font-size:.72rem; padding:6px 10px;}
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

/* tap targets */
@media (max-width:820px){ footer a{display:block!important; padding:13px 0!important; min-height:44px;} .brand{padding:8px 0;} }

.fine{font-size:.78rem; color:var(--ink-soft); margin:10px 0 0; line-height:1.5;} .fine a{color:var(--accent); text-decoration:underline;} .disclaimer a{text-decoration:underline;}

/* readable article card */
.post-page{background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:26px 22px; margin:24px auto;}
@media (max-width:520px){ .post-page{padding:20px 16px; border-radius:18px;} }

/* touch: tap feedback (hover does not exist on phones) */
.btn,.cat,.svc,.bcard,.post-card,.step,.icon-btn{-webkit-tap-highlight-color:transparent;}
.btn:active{transform:translateY(-2px) scale(.98);}
.btn-primary:active{box-shadow:0 16px 32px -10px var(--glow);}
.btn-ghost:active{border-color:var(--accent); color:var(--accent);}
.cat:active{transform:translateY(-6px) scale(.985); border-color:var(--accent);}
.cat:active::before{opacity:1;}
.svc:active{transform:translateY(-5px) scale(.985); border-color:var(--accent); box-shadow:0 22px 40px -26px var(--glow);}
.bcard:active,.post-card:active{transform:translateY(-3px) scale(.985); border-color:var(--accent);}
.step:active .num{background:var(--accent); color:var(--on-accent); transform:scale(1.08);}
.ticker:active .ticker-track{animation-play-state:paused;}
.foot-grid a:active{color:var(--accent);}