/* Klink - shared styles for klinkreview.com */
:root{
  --paper:#ffffff;
  --mist:#f2f4f8;
  --mist-2:#e9edf4;
  --line:#e2e6ee;
  --ink:#0e1a2b;
  --ink-2:#4b5567;
  --ink-3:#7a8394;
  --blue:#1a73e8;
  --blue-soft:#e8f0fe;
  --gold:#f6b400;
  --wa:#168a4a;
  --g-blue:#4285f4; --g-red:#ea4335; --g-yellow:#f9ab00; --g-green:#34a853;
  --r-xl:32px; --r-lg:24px; --r-md:18px; --r-sm:12px;
  --lift:0 1px 2px rgba(14,26,43,.05), 0 12px 32px -16px rgba(14,26,43,.18);
  --lift-2:0 2px 6px rgba(14,26,43,.06), 0 30px 60px -28px rgba(14,26,43,.35);
  --head-h:64px;
  --wrap:1120px;
}
:root[data-theme="dark"]{
  --paper:#0d1522; --mist:#152033; --mist-2:#1c2940; --line:#24324a;
  --ink:#eef2f8; --ink-2:#b2bccc; --ink-3:#8590a3; --blue:#7aa7ff; --blue-soft:#1a2a47; --wa:#22a35c;
  --lift:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -16px rgba(0,0,0,.6);
  --lift-2:0 2px 6px rgba(0,0,0,.3), 0 30px 60px -28px rgba(0,0,0,.8);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0d1522; --mist:#152033; --mist-2:#1c2940; --line:#24324a;
    --ink:#eef2f8; --ink-2:#b2bccc; --ink-3:#8590a3; --blue:#7aa7ff; --blue-soft:#1a2a47; --wa:#22a35c;
    --lift:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -16px rgba(0,0,0,.6);
    --lift-2:0 2px 6px rgba(0,0,0,.3), 0 30px 60px -28px rgba(0,0,0,.8);
  }
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h) + 52px); -webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *,*:before,*:after{animation:none !important; transition:none !important;} }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  padding-bottom:84px;
}
@media (min-width:900px){ body{padding-bottom:0;} }
img{max-width:100%; display:block; height:auto;}
a{color:inherit;}
h1,h2,h3,h4{margin:0; line-height:1.12; letter-spacing:-0.025em; text-wrap:balance;}
p{margin:0;}
button{font:inherit; color:inherit;}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:8px;}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px;}
@media (min-width:900px){ .wrap{padding:0 32px;} }

/* ---------- brand ---------- */
.wordmark{display:inline-flex; font-weight:800; font-size:28px; letter-spacing:-0.04em; text-decoration:none; line-height:1;}
.wordmark span:nth-child(1){color:var(--g-blue);}
.wordmark span:nth-child(2){color:var(--g-red);}
.wordmark span:nth-child(3){color:var(--g-yellow);}
.wordmark span:nth-child(4){color:var(--g-green);}
.wordmark span:nth-child(5){color:var(--g-blue);}

/* ---------- header ---------- */
.head{
  position:sticky; top:0; z-index:50; height:var(--head-h);
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter:saturate(1.8) blur(16px); backdrop-filter:saturate(1.8) blur(16px);
  border-bottom:1px solid transparent; transition:border-color .2s ease;
}
.head.scrolled{border-bottom-color:var(--line);}
.head .wrap{height:100%; display:flex; align-items:center; gap:14px;}
.head .wordmark{margin-right:auto;}
.nav{display:none; gap:4px;}
.nav a{padding:9px 14px; border-radius:999px; text-decoration:none; font-weight:600; font-size:15px; color:var(--ink-2);}
.nav a:hover{background:var(--mist); color:var(--ink);}
.nav a.on{background:var(--ink); color:var(--paper);}
.chip-btn{
  display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 14px;
  border:1px solid var(--line); background:var(--paper); border-radius:999px;
  font-weight:600; font-size:15px; cursor:pointer; white-space:nowrap; text-decoration:none;
}
.chip-btn svg{width:17px; height:17px;}
.chip-btn:hover{border-color:var(--ink-3);}
.menu-btn{width:40px; padding:0; justify-content:center;}
.head .head-cta{display:none;}
@media (min-width:980px){
  .nav{display:flex;}
  .menu-btn{display:none;}
  .head .head-cta{display:inline-flex;}
}
.drawer{
  position:fixed; inset:var(--head-h) 0 auto 0; z-index:49; background:var(--paper);
  border-bottom:1px solid var(--line); box-shadow:var(--lift-2); padding:10px 20px 20px;
  display:grid; gap:6px;
}
.drawer[hidden]{display:none;}
.drawer a, .drawer button{
  display:flex; align-items:center; justify-content:space-between; padding:15px 16px; border-radius:14px;
  text-decoration:none; font-weight:600; font-size:18px; background:var(--mist); border:none; cursor:pointer; text-align:left;
}
.drawer a.on{background:var(--ink); color:var(--paper);}
.drawer .drawer-row{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
.drawer .drawer-row button{justify-content:center; font-size:16px;}

/* ---------- "you are here" pill ---------- */
.here{
  position:fixed; z-index:45; top:calc(var(--head-h) + 10px); left:50%;
  transform:translate(-50%, -8px); opacity:0; pointer-events:none;
  display:inline-flex; align-items:center; gap:9px; padding:8px 15px 8px 12px; border-radius:999px;
  background:color-mix(in srgb, var(--paper) 90%, transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid var(--line); box-shadow:var(--lift);
  font-size:14px; font-weight:700; color:var(--ink); transition:opacity .25s ease, transform .25s ease; white-space:nowrap;
}
.here.show{opacity:1; transform:translate(-50%, 0);}
.here-dot{width:8px; height:8px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 0 rgba(26,115,232,.5); animation:herePulse 2.4s ease-out infinite;}
@keyframes herePulse{0%{box-shadow:0 0 0 0 rgba(26,115,232,.45);} 70%{box-shadow:0 0 0 8px rgba(26,115,232,0);} 100%{box-shadow:0 0 0 0 rgba(26,115,232,0);}}
.here-step{color:var(--ink-3); font-weight:600;}
.here-label{display:inline-block; animation:hereIn .35s cubic-bezier(.2,.7,.2,1);}
@keyframes hereIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}
@media (min-width:980px){ .here{display:none;} }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:54px; padding:0 24px; border-radius:16px; border:1px solid transparent;
  font-weight:700; font-size:17px; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active{transform:scale(.98);}
.btn svg{width:20px; height:20px; flex:none;}
.btn-ink{background:var(--ink); color:var(--paper);}
.btn-ink:hover{box-shadow:var(--lift-2);}
.btn-wa{background:var(--wa); color:#fff;}
.btn-call{background:var(--paper); color:var(--ink); border-color:var(--line);}
.btn-call:hover{border-color:var(--ink-3);}
.btn-blue{background:var(--blue); color:#fff;}
.btn-wide{width:100%;}

/* ---------- sections ---------- */
.sec{padding:84px 0 0;}
@media (min-width:900px){ .sec{padding-top:120px;} }
.sec-head{max-width:640px; margin-bottom:32px;}
.sec-head h2{font-size:clamp(32px, 7.4vw, 50px); font-weight:800;}
.sec-head p{margin-top:12px; font-size:18px; color:var(--ink-2);}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center;}

.stars{color:var(--gold); letter-spacing:1px;}
mark{background:linear-gradient(transparent 58%, rgba(246,180,0,.38) 58%); color:inherit; font-weight:700; padding:0 1px;}
:root[data-theme="dark"] mark{background:linear-gradient(transparent 58%, rgba(246,180,0,.32) 58%);}

/* ---------- hero (home) ---------- */
.hero{padding:28px 0 0; position:relative;}
.hero-grid{display:grid; gap:36px; align-items:center;}
@media (min-width:900px){ .hero{padding-top:64px;} .hero-grid{grid-template-columns:1.05fr .95fr; gap:48px;} }
.hero-proof{display:inline-flex; align-items:center; gap:10px; padding:7px 14px 7px 8px; border-radius:999px; background:var(--mist); font-size:14.5px; font-weight:600; color:var(--ink-2); margin-bottom:22px;}
.hero-proof .g{width:26px; height:26px; border-radius:50%; background:var(--paper); display:grid; place-items:center; box-shadow:var(--lift);}
.hero-proof .g svg{width:15px; height:15px;}
.hero h1{font-size:clamp(50px, 14vw, 96px); font-weight:800; letter-spacing:-0.055em; line-height:.95;}
.hero h1 .l2{display:block; color:var(--gold); text-shadow:0 2px 0 rgba(180,120,0,.18);}
.hero-stars{display:flex; gap:4px; margin-top:14px; font-size:clamp(46px, 13vw, 76px); line-height:1; color:var(--gold); filter:drop-shadow(0 6px 14px rgba(246,180,0,.35));}
.hero-stars i{font-style:normal; display:inline-block; animation:starPop .5s cubic-bezier(.3,1.6,.5,1) both;}
.hero-stars i:nth-child(1){animation-delay:.15s;} .hero-stars i:nth-child(2){animation-delay:.27s;} .hero-stars i:nth-child(3){animation-delay:.39s;} .hero-stars i:nth-child(4){animation-delay:.51s;} .hero-stars i:nth-child(5){animation-delay:.63s;}
@keyframes starPop{from{opacity:0; transform:scale(.3) rotate(-25deg);} to{opacity:1; transform:none;}}
.hero-sub{margin-top:22px; font-size:19px; color:var(--ink-2); max-width:30em;}
.hero-cta{display:flex; gap:10px; margin-top:28px; flex-wrap:wrap;}
.hero-cta .btn{flex:1 1 180px;}
.hero-facts{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:22px; padding:0; list-style:none; font-size:15px; font-weight:600; color:var(--ink-2);}
.hero-facts li{display:flex; align-items:center; gap:7px;}
.hero-facts svg{width:17px; height:17px; color:var(--g-green); flex:none;}

/* the tap demo */
.tapdemo{position:relative; aspect-ratio:1/1; max-width:520px; width:100%; margin:0 auto;}
.tapdemo-disc{position:absolute; inset:6%; border-radius:50%; background:radial-gradient(circle at 50% 42%, var(--paper) 0 30%, var(--mist) 31% 100%);}
:root[data-theme="dark"] .tapdemo-disc{background:radial-gradient(circle at 50% 42%, #1c2940 0 30%, var(--mist) 31% 100%);}
.tapdemo-stand{position:absolute; left:16%; top:14%; width:50%; border-radius:22px; background:#fff; box-shadow:var(--lift-2); padding:6px;}
.tapdemo-ring{position:absolute; left:41%; top:45%; width:120px; height:120px; margin:-60px 0 0 -60px; border-radius:50%; border:2px solid var(--blue); opacity:0; animation:ring 3.2s ease-out infinite;}
.tapdemo-ring.r2{animation-delay:.35s;}
@keyframes ring{0%{transform:scale(.4); opacity:0;} 12%{opacity:.55;} 60%{transform:scale(1.5); opacity:0;} 100%{opacity:0;}}
.tapdemo-phone{
  position:absolute; right:8%; top:24%; width:34%; aspect-ratio:9/18.5; border-radius:28px; background:var(--ink);
  padding:7px; box-shadow:var(--lift-2); animation:phoneTap 3.2s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes phoneTap{0%,100%{transform:translateX(0) rotate(-6deg);} 25%,45%{transform:translateX(-34%) rotate(-2deg);} }
.tapdemo-screen{width:100%; height:100%; border-radius:22px; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:10px; text-align:center;}
.tapdemo-screen .gq{width:30px; height:30px;}
.tapdemo-screen b{font-size:11px; color:#0e1a2b; line-height:1.2;}
.tapdemo-screen .stars{font-size:15px; letter-spacing:0; animation:starsFill 3.2s steps(1) infinite;}
@keyframes starsFill{0%,30%{color:#d5dae3;} 31%,100%{color:var(--gold);}}
.tapdemo-toast{
  position:absolute; left:4%; bottom:9%; display:flex; align-items:center; gap:12px; padding:12px 16px 12px 12px;
  background:var(--paper); border-radius:18px; box-shadow:var(--lift-2); border:1px solid var(--line);
  animation:toast 3.2s ease infinite;
}
.tapdemo-toast .av{width:38px; height:38px; border-radius:50%; background:var(--g-green); color:#fff; display:grid; place-items:center; font-weight:800; font-size:14px; flex:none;}
.tapdemo-toast small{display:block; font-size:12.5px; color:var(--ink-3); font-weight:600; line-height:1.3;}
.tapdemo-toast b{display:block; font-size:15px; line-height:1.3;}
.tapdemo-toast .stars{font-size:14px;}
@keyframes toast{0%,38%{opacity:0; transform:translateY(10px) scale(.96);} 46%,92%{opacity:1; transform:none;} 100%{opacity:0;}}
@media (prefers-reduced-motion: reduce){ .tapdemo-toast{opacity:1;} .tapdemo-screen .stars{color:var(--gold);} }

/* results strip */
.results{margin-top:56px; display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 20px 6px; margin-left:-20px; margin-right:-20px; scrollbar-width:none;}
.results::-webkit-scrollbar{display:none;}
@media (min-width:900px){ .results{display:grid; grid-template-columns:repeat(6,1fr); overflow:visible; margin:72px 0 0; padding:0;} }
.result{flex:0 0 auto; scroll-snap-align:start; min-width:150px; padding:16px 18px; border-radius:var(--r-md); background:var(--mist);}
.result-num{display:flex; align-items:baseline; gap:6px; font-weight:800; font-size:26px; letter-spacing:-0.03em; white-space:nowrap;}
.result-num .from{color:var(--ink-3); font-weight:600; font-size:18px;}
.result-num svg{width:16px; height:16px; color:var(--ink-3); align-self:center;}
.result-num .unit{font-size:14px; font-weight:700; color:var(--ink-2); letter-spacing:0;}
.result-who{margin-top:4px; font-size:13.5px; font-weight:600; color:var(--ink-2); white-space:nowrap;}

/* ---------- reviews ---------- */
.rev-top{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:28px;}
.rev-top .sec-head{margin-bottom:0;}
.rev-score{display:flex; align-items:center; gap:14px; padding:14px 20px; border-radius:var(--r-md); border:1px solid var(--line);}
.rev-score .big{font-size:40px; font-weight:800; letter-spacing:-0.04em; line-height:1;}
.rev-score .stars{font-size:18px; display:block;}
.rev-score small{display:block; font-size:13.5px; color:var(--ink-2); font-weight:600;}
.rev-list{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 20px 12px; margin:0 -20px; scrollbar-width:none;}
.rev-list::-webkit-scrollbar{display:none;}
@media (min-width:900px){ .rev-list{display:block; columns:3; column-gap:16px; overflow:visible; margin:0; padding:0;} }
.rev{
  flex:0 0 86%; scroll-snap-align:center; break-inside:avoid; margin:0 0 16px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px;
  display:flex; flex-direction:column; gap:14px;
}
.rev.feature{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.rev.feature .rev-q{font-size:20px;}
.rev.feature .rev-who .who-txt > span{color:color-mix(in srgb, var(--paper) 65%, transparent);}
.rev.feature mark{background:linear-gradient(transparent 58%, rgba(246,180,0,.55) 58%);}
.rev-q{font-size:17px; line-height:1.55; margin:0;}
.rev-who{display:flex; align-items:center; gap:12px; margin-top:auto;}
.rev-av{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:14px; color:#fff; background:var(--g-blue); flex:none;}
.rev:nth-child(4n+2) .rev-av{background:var(--g-red);}
.rev:nth-child(4n+3) .rev-av{background:var(--g-yellow); color:#1c1b18;}
.rev:nth-child(4n+4) .rev-av{background:var(--g-green);}
.rev-who b{display:flex; align-items:center; gap:5px; font-size:15.5px; line-height:1.25;}
.rev-who b svg{width:15px; height:15px; color:var(--g-green); flex:none;}
.rev-who .who-txt > span{display:block; font-size:13.5px; color:var(--ink-3); font-weight:600;}
.rev .stars{font-size:17px;}
.rev-nav{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:6px;}
.rev-dots{display:flex; gap:6px;}
.rev-dots i{width:6px; height:6px; border-radius:99px; background:var(--line); transition:width .2s ease, background .2s ease;}
.rev-dots i.on{width:22px; background:var(--ink);}
.rev-hint{font-size:14px; font-weight:600; color:var(--ink-3);}
@media (min-width:900px){ .rev-nav{display:none;} }
.rev-claim{margin-top:22px; font-size:15px; color:var(--ink-2); text-align:center;}

/* ---------- products ---------- */
.prod-grid{display:grid; gap:18px;}
@media (min-width:820px){ .prod-grid{grid-template-columns:1fr 1fr;} }
.prod{border-radius:var(--r-xl); background:var(--mist); padding:10px; display:flex; flex-direction:column;}
.prod-media{position:relative; border-radius:24px; background:#fff; overflow:hidden; aspect-ratio:1/1;}
.prod-track{display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;}
.prod-track::-webkit-scrollbar{display:none;}
.prod-track img{flex:0 0 100%; width:100%; height:100%; object-fit:contain; scroll-snap-align:start;}
.g-arrow{position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; border:none; background:rgba(255,255,255,.95); color:#0e1a2b; box-shadow:0 4px 14px rgba(14,26,43,.18); display:grid; place-items:center; cursor:pointer; font-size:22px; line-height:1;}
.g-prev{left:10px;} .g-next{right:10px;}
.prod-free{position:absolute; left:12px; top:12px; padding:6px 11px; border-radius:999px; background:rgba(255,255,255,.95); color:#0e1a2b; font-size:13px; font-weight:700; box-shadow:0 2px 8px rgba(14,26,43,.12);}
.prod-body{padding:20px 14px 14px;}
.prod-body h3{font-size:26px; font-weight:800;}
.prod-body .prod-line{margin-top:6px; color:var(--ink-2); font-size:16px;}
.prod-price{display:flex; align-items:baseline; gap:8px; margin-top:16px;}
.prod-price b{font-size:40px; font-weight:800; letter-spacing:-0.04em; line-height:1;}
.prod-price span{color:var(--ink-2); font-weight:600;}
.qty{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:18px;}
.qty a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-height:76px; padding:8px 4px;
  border-radius:16px; background:var(--paper); border:1.5px solid transparent; text-decoration:none; text-align:center;
  transition:border-color .15s ease, transform .12s ease;
}
.qty a:hover{border-color:var(--ink);}
.qty a:active{transform:scale(.97);}
.qty .n{font-weight:800; font-size:20px; line-height:1.1;}
.qty .p{font-size:13.5px; font-weight:700; white-space:nowrap;}
.qty .s{font-size:11px; font-weight:700; color:var(--g-green); white-space:nowrap; letter-spacing:-0.01em;}
:root[data-theme="dark"] .qty .s{color:#5bd685;}
.qty-label{margin-top:18px; font-size:14px; font-weight:600; color:var(--ink-2);}
.prod-more{margin-top:14px;}
.prod-more summary{cursor:pointer; list-style:none; font-weight:700; font-size:15px; color:var(--blue); padding:6px 0;}
.prod-more summary::-webkit-details-marker{display:none;}
.prod-more ul{margin:8px 0 0; padding:0 0 0 18px; color:var(--ink-2); font-size:15.5px; display:grid; gap:4px;}
.which{margin-top:18px; display:grid; gap:10px; padding:20px 22px; border-radius:var(--r-lg); border:1px dashed var(--line);}
@media (min-width:820px){ .which{grid-template-columns:auto 1fr 1fr 1fr; align-items:center; gap:22px;} }
.which b{font-size:17px;}
.which p{font-size:15.5px; color:var(--ink-2);}

/* ---------- how it works ---------- */
.steps{display:grid; gap:14px; counter-reset:step; padding:0; margin:0; list-style:none;}
@media (min-width:820px){ .steps{grid-template-columns:repeat(3,1fr); gap:18px;} }
.step{position:relative; padding:24px 22px 26px; border-radius:var(--r-lg); background:var(--mist);}
.step-n{display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--ink); color:var(--paper); font-weight:800; font-size:16px; margin-bottom:18px;}
.step h3{font-size:21px; font-weight:800;}
.step p{margin-top:8px; color:var(--ink-2); font-size:16px;}
.chip-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;}
.chip{display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:999px; border:1px solid var(--line); font-size:14.5px; font-weight:600;}
.chip svg{width:16px; height:16px; color:var(--g-green);}

/* inside the card */
.inside{display:grid; gap:20px; align-items:center; margin-top:18px; padding:22px; border-radius:var(--r-lg); border:1px solid var(--line);}
@media (min-width:700px){ .inside{grid-template-columns:160px 1fr;} }
.inside img{width:160px; border-radius:18px; margin:0 auto;}
.inside h3{font-size:20px;}
.inside p{margin-top:6px; color:var(--ink-2); font-size:16px;}

/* ---------- websites teaser ---------- */
.sites{border-radius:var(--r-xl); background:var(--ink); color:var(--paper); padding:32px 22px 26px; overflow:hidden;}
@media (min-width:900px){ .sites{padding:52px; display:grid; grid-template-columns:.9fr 1.1fr; gap:40px; align-items:center;} }
.sites h2{font-size:clamp(32px,7.4vw,48px); font-weight:800;}
.sites p{margin-top:12px; color:color-mix(in srgb, var(--paper) 72%, transparent); font-size:17.5px;}
.sites .btn{margin-top:22px; background:var(--paper); color:var(--ink);}
.phones{display:flex; justify-content:center; gap:10px; margin-top:28px;}
@media (min-width:900px){ .phones{margin-top:0;} }
.phone{flex:0 1 31%; max-width:190px; border-radius:26px; padding:5px; background:#000; box-shadow:0 24px 50px -20px rgba(0,0,0,.7); text-decoration:none; color:inherit;}
.phone img{border-radius:21px; aspect-ratio:600/1120; object-fit:cover; object-position:top; width:100%;}
.phone:nth-child(2){transform:translateY(-16px);}
.phone-cap{display:block; text-align:center; font-size:13px; font-weight:600; margin-top:10px; color:color-mix(in srgb, var(--paper) 72%, transparent);}

/* ---------- about ---------- */
.about{display:grid; gap:18px;}
@media (min-width:820px){ .about{grid-template-columns:1.1fr .9fr; gap:24px;} }
.about-card{padding:26px; border-radius:var(--r-lg); background:var(--mist);}
.about-person{display:flex; align-items:center; gap:14px;}
.about-av{width:60px; height:60px; border-radius:50%; background:var(--ink); color:var(--paper); display:grid; place-items:center; font-weight:800; font-size:20px; flex:none;}
.about-person b{display:block; font-size:21px;}
.about-person span{color:var(--ink-2); font-size:15px;}
.about-card ul{margin:20px 0 0; padding:0; list-style:none; display:grid; gap:12px;}
.about-card li{display:flex; gap:10px; font-size:16.5px;}
.about-card li svg{width:20px; height:20px; color:var(--g-green); flex:none; margin-top:3px;}
.contact-list{display:grid; gap:8px;}
.contact{display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:var(--r-md); border:1px solid var(--line); text-decoration:none; font-weight:700; font-size:16.5px;}
.contact:hover{border-color:var(--ink-3);}
.contact .ic{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--blue-soft); color:var(--blue); flex:none;}
.contact .ic svg{width:20px; height:20px;}
.contact small{display:block; font-size:13px; color:var(--ink-3); font-weight:600;}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 4px; font-weight:700; font-size:18.5px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:after{content:""; width:12px; height:12px; flex:none; border-right:2.5px solid var(--ink); border-bottom:2.5px solid var(--ink); transform:rotate(45deg) translate(-3px,-3px); transition:transform .2s ease;}
.faq details[open] summary:after{transform:rotate(-135deg);}
.faq .ans{padding:0 4px 22px; color:var(--ink-2); font-size:16.5px; max-width:60ch;}
.faq .ans p + p{margin-top:8px;}
.phones-list{display:grid; gap:14px; margin-top:12px;}
@media (min-width:700px){ .phones-list{grid-template-columns:1fr 1fr;} }
.phones-list b{color:var(--ink);}
.phones-list p{font-size:15px;}

/* ---------- order ---------- */
.order{display:grid; gap:22px;}
@media (min-width:900px){ .order{grid-template-columns:.8fr 1.2fr; gap:48px; align-items:start;} .order-side{position:sticky; top:calc(var(--head-h) + 24px);} }
.order-steps{margin:22px 0 0; padding:0; list-style:none; display:grid; gap:14px;}
.order-steps li{display:flex; gap:14px; align-items:flex-start;}
.order-steps .n{width:30px; height:30px; border-radius:50%; border:1.5px solid var(--ink); display:grid; place-items:center; font-weight:800; font-size:14px; flex:none;}
.order-steps b{display:block;}
.order-steps span{color:var(--ink-2); font-size:15.5px;}
.order-quick{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:24px;}
.form{padding:22px; border-radius:var(--r-xl); background:var(--mist); display:grid; gap:18px;}
@media (min-width:900px){ .form{padding:32px;} }
.field{display:grid; gap:7px; font-weight:700; font-size:15.5px;}
.field input{
  font:inherit; font-weight:500; font-size:17px; padding:15px 16px; border-radius:14px; border:1.5px solid transparent;
  background:var(--paper); color:var(--ink); width:100%;
}
.field input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(26,115,232,.15);}
.hp-field{position:absolute; left:-9999px;}
.pick-legend{display:block; font-weight:700; font-size:15.5px; margin-bottom:10px; padding:0;}
.pick-legend span{font-weight:500; color:var(--ink-3);}
fieldset{border:none; margin:0; padding:0; min-width:0;}
.basket{padding:14px 16px; border-radius:16px; background:var(--paper); margin-bottom:12px; border:1.5px dashed var(--line); transition:border-color .2s ease;}
.basket.has{border-style:solid; border-color:var(--ink);}
.basket-empty{font-size:15px; color:var(--ink-3);}
.basket-list{list-style:none; margin:0; padding:0; display:grid; gap:8px;}
.basket-item{display:flex; justify-content:space-between; align-items:center; gap:10px; font-weight:700; font-size:15px;}
.basket-remove{border:1px solid var(--line); background:var(--paper); border-radius:10px; padding:6px 11px; font-size:13.5px; font-weight:700; color:var(--g-red); cursor:pointer;}
.basket-clear{margin-top:10px; border:none; background:none; padding:0; font-size:14px; font-weight:700; color:var(--ink-2); text-decoration:underline; cursor:pointer;}
@keyframes basketFlash{0%{box-shadow:0 0 0 5px rgba(52,168,83,.5);} 100%{box-shadow:0 0 0 0 rgba(52,168,83,0);}}
.basket-flash{animation:basketFlash 1.1s ease;}
.picker{display:grid; grid-template-columns:repeat(2,1fr); gap:8px;}
@media (min-width:600px){ .picker{grid-template-columns:repeat(4,1fr);} }
.picker-card{
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px;
  padding:12px 8px 12px; border-radius:16px; background:var(--paper); border:1.5px solid transparent; cursor:pointer; font-weight:700; font-size:14.5px; line-height:1.25;
}
.picker-card input{position:absolute; opacity:0; width:1px; height:1px;}
.picker-card img{width:64px; height:64px; object-fit:contain; margin-bottom:6px;}
.picker-card small{display:block; font-size:14px; color:var(--ink-2);}
.picker-card s{color:var(--ink-3); font-weight:600;}
.picker-card em{font-style:normal; font-size:12px; color:var(--g-green);}
.picker-card.is-checked{border-color:var(--ink); box-shadow:0 0 0 3px color-mix(in srgb, var(--ink) 12%, transparent);}
.picker-card.is-checked:after{content:""; position:absolute; top:8px; right:8px; width:20px; height:20px; border-radius:50%; background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;}
:root[data-theme="dark"] .picker-card.is-checked:after{background-color:var(--blue);}
.picker-card:focus-within{outline:3px solid var(--blue); outline-offset:2px;}
.picker-card.wide{grid-column:1/-1; flex-direction:row; justify-content:center; padding:14px;}
.reassure{display:grid; gap:6px; font-size:15px; color:var(--ink-2); font-weight:600;}
.reassure span{display:flex; gap:8px; align-items:center;}
.reassure svg{width:17px; height:17px; color:var(--g-green); flex:none;}
.btn-send{min-height:62px; font-size:20px; background:var(--ink); color:var(--paper);}
.form-note{text-align:center; font-size:13.5px; color:var(--ink-3); font-weight:600;}
.result-box{display:none; padding:28px; border-radius:var(--r-xl); text-align:center; font-weight:600; font-size:17px;}
#enquireSuccess, #websiteSuccess{background:color-mix(in srgb, var(--g-green) 12%, var(--paper));}
#enquireError, #websiteError{background:color-mix(in srgb, var(--g-red) 10%, var(--paper)); margin-top:12px;}
.result-box svg{width:46px; height:46px; margin:0 auto 12px;}
#enquireSuccess svg, #websiteSuccess svg{color:var(--g-green);}
#enquireError svg, #websiteError svg{color:var(--g-red);}

/* ---------- footer ---------- */
.foot{margin-top:110px; padding:48px 0 40px; border-top:1px solid var(--line);}
.foot-grid{display:grid; gap:24px;}
@media (min-width:820px){ .foot-grid{grid-template-columns:1.2fr 1fr 1fr; align-items:start;} }
.foot p{color:var(--ink-2); font-size:15.5px; margin-top:10px; max-width:32ch;}
.foot h4{font-size:14px; color:var(--ink-3); font-weight:700; margin-bottom:10px; letter-spacing:0;}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:8px;}
.foot a{text-decoration:none; font-weight:600;}
.foot a:hover{text-decoration:underline;}
.foot-small{margin-top:36px; font-size:13px; color:var(--ink-3);}
.foot-tools{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap;}

/* ---------- phone bottom bar ---------- */
.bar{
  position:fixed; left:0; right:0; bottom:0; z-index:40; display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:8px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
}
.bar .btn{min-height:50px; padding:0 10px; font-size:16px; border-radius:14px;}
@media (min-width:900px){ .bar{display:none;} }

/* ---------- websites page ---------- */
.wh{padding:36px 0 0;}
@media (min-width:900px){ .wh{padding-top:72px;} }
.wh-grid{display:grid; gap:40px; align-items:center;}
@media (min-width:900px){ .wh-grid{grid-template-columns:1.1fr .9fr;} .wh .phone{max-width:210px;} }
.wh h1{font-size:clamp(44px, 12vw, 72px); font-weight:800; letter-spacing:-0.05em; line-height:.98;}
.wh-sub{margin-top:20px; font-size:19px; color:var(--ink-2); max-width:30em;}
.wh .phones .phone{box-shadow:var(--lift-2);}
.wh .phones .phone-cap{color:var(--ink-2);}
.ba{display:grid; gap:14px;}
@media (min-width:820px){ .ba{grid-template-columns:1fr 1fr; gap:18px;} }
.ba-col{padding:24px; border-radius:var(--r-lg);}
.ba-col.before{border:1px solid var(--line);}
.ba-col.after{background:var(--ink); color:var(--paper);}
.ba-col h3{font-size:20px; margin-bottom:14px;}
.ba-col ul{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
.ba-col li{display:flex; gap:10px; font-size:16.5px; line-height:1.45;}
.ba-col li svg{width:20px; height:20px; flex:none; margin-top:2px;}
.ba-col.before li svg{color:var(--g-red);}
.ba-col.after li svg{color:#5bd685;}
.cases{display:grid; gap:22px;}
.case{border-radius:var(--r-xl); background:var(--mist); padding:10px; scroll-margin-top:calc(var(--head-h) + 60px);}
@media (min-width:900px){ .case{display:grid; grid-template-columns:1.25fr .75fr; gap:10px; align-items:start;} }
.browser{border-radius:24px; overflow:hidden; background:var(--paper); box-shadow:var(--lift);}
.browser-bar{display:flex; align-items:center; gap:6px; padding:11px 14px; border-bottom:1px solid var(--line);}
.browser-bar i{width:10px; height:10px; border-radius:50%; background:var(--line);}
.browser-url{margin-left:8px; flex:1; padding:5px 12px; border-radius:999px; background:var(--mist); font-size:13px; font-weight:600; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.browser img{width:100%; cursor:zoom-in;}
.case-body{padding:22px 14px 14px;}
@media (min-width:900px){ .case-body{padding:28px 22px; display:flex; flex-direction:column;} }
.case-kind{font-size:14px; font-weight:700; color:var(--ink-3);}
.case-body h3{font-size:30px; font-weight:800; margin-top:4px;}
.case-body ul{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px;}
.case-body li{display:flex; gap:9px; font-size:16px; line-height:1.45;}
.case-body li svg{width:19px; height:19px; color:var(--g-green); flex:none; margin-top:2px;}
.case-quote{margin-top:18px; padding:16px 18px; border-radius:18px; background:var(--paper); font-size:16px;}
.case-quote small{display:block; margin-top:6px; color:var(--ink-3); font-weight:700; font-size:13.5px;}
.case-phones{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px;}
.case-phones img{border-radius:20px; border:5px solid #000; cursor:zoom-in; aspect-ratio:600/1120; object-fit:cover; object-position:top;}
.case-body .btn{margin-top:18px;}
@media (min-width:900px){ .case-body .btn{margin-top:auto;} .case-phones + .btn{margin-top:18px;} }
.work-jump{display:flex; gap:8px; flex-wrap:wrap; margin:-12px 0 24px;}
.zoom-box{position:fixed; inset:0; z-index:100; background:rgba(8,12,20,.92); display:flex; align-items:center; justify-content:center; padding:72px 16px 20px; cursor:zoom-out;}
.zoom-box[hidden]{display:none;}
.zoom-box img{max-width:100%; max-height:100%; width:auto; object-fit:contain; border-radius:16px;}
.zoom-close{position:absolute; top:14px; right:14px; background:#fff; color:#0e1a2b; border:none; border-radius:12px; padding:11px 16px; font-weight:700; cursor:pointer;}