/*
Theme Name: Theme Chuẩn SEO
Theme URI: https://themechuanseo.com
Author: Theme Chuẩn SEO
Author URI: https://themechuanseo.com
Description: Theme bán giao diện website theo ngành nghề, kèm trang dịch vụ Thiết kế website, Dịch vụ SEO và Liên hệ. Có kho theme (custom post type) lọc theo ngành và giá, form tư vấn lưu vào quản trị, schema SEO, hỗ trợ WooCommerce.
Version: 2.4.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: theme-chuan-seo
Tags: e-commerce, blog, custom-menu, custom-logo, featured-images, translation-ready
*/

/* Layout: brand storefront — navy top bar + sticky white header, blue-gradient heroes on subpages, 1200px content column, navy footer. Single light theme by design (brand is blue/white). */
:root{
  --blue:#1660F0; --blue-d:#0B47C9; --blue-50:#EEF4FF; --blue-100:#DDE8FF; --blue-200:#BBD0FB;
  --navy:#0A2463; --navy-2:#0F2F7A; --ink:#0D1A3A; --muted:#536081; --line:#DCE5F4;
  --yellow:#FFD12A; --yellow-d:#F2BC00; --red:#E0262F; --green:#12A150;
  --bg:#FFFFFF; --surface:#F4F7FD; --blue-l:#3C8BFF; --font-h:var(--font);
  --font:"Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --r:14px; --shadow:0 10px 30px -12px rgba(16,56,140,.25);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{margin:0;line-height:1.2;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
.i{width:1em;height:1em;flex:none;vertical-align:-.14em}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.wrap{max-width:1232px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:2px solid transparent;border-radius:999px;padding:.72em 1.4em;font-weight:700;font-size:15px;line-height:1.1;transition:transform .15s,background .15s,box-shadow .15s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-y{background:var(--yellow);color:var(--ink);box-shadow:0 8px 20px -8px color-mix(in srgb,var(--yellow) 75%,transparent)}
.btn-y:hover{background:var(--yellow-d)}
.btn-b{background:var(--blue);color:#fff;box-shadow:0 8px 20px -10px color-mix(in srgb,var(--blue) 80%,transparent)}
.btn-b:hover{background:var(--blue-d)}
.btn-o{background:#fff;color:var(--blue);border-color:var(--blue)}
.btn-o:hover{background:var(--blue-50)}
.btn-w{background:#fff;color:var(--blue-d)}
.btn-sm{padding:.5em 1em;font-size:13px}
.btn-block{width:100%}

/* ---------- top bar & header ---------- */
.topbar{background:var(--navy);color:#DCE6FF;font-size:13px}
.topbar .wrap{display:flex;align-items:center;gap:28px;min-height:36px;padding-block:6px}
.topbar span{display:inline-flex;align-items:center;gap:7px}
.topbar .soc{margin-left:auto;display:flex;gap:12px}
.topbar .soc a{opacity:.9}.topbar .soc a:hover{opacity:1}
@media (max-width:760px){.topbar .hide-m{display:none}.topbar .wrap{gap:16px}}

header.site-h{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 4px 16px -12px rgba(10,36,99,.3)}
header.site-h .wrap{display:flex;align-items:center;gap:22px;min-height:70px}
.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo svg{width:42px;height:34px}
.logo b{display:block;font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--navy);line-height:1}
.logo small{display:block;font-size:11px;color:var(--muted);margin-top:3px;font-weight:500}
nav.main{display:flex;align-items:center;gap:4px;margin-left:auto}
nav.main > a, nav.main .dd > button{display:inline-flex;align-items:center;gap:4px;padding:10px 9px;font-weight:600;font-size:14px;white-space:nowrap;color:var(--ink);background:none;border:0;border-radius:8px;position:relative}
nav.main > a:hover, nav.main .dd > button:hover{color:var(--blue)}
nav.main .on{color:var(--blue)!important}
nav.main .on::after{content:"";position:absolute;left:11px;right:11px;bottom:3px;height:2px;background:var(--blue);border-radius:2px}
.dd{position:relative}
.dd-menu{position:absolute;top:100%;left:0;min-width:230px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px;display:none;z-index:5}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{display:grid}
.dd-menu a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:14px;font-weight:500}
.dd-menu a:hover{background:var(--blue-50);color:var(--blue)}
.dd-menu a .i{color:var(--blue);font-size:17px}
.h-search{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:999px;padding:7px 14px;width:190px;background:#fff}
.h-search:focus-within{border-color:var(--blue)}
.h-search input{border:0;outline:0;width:100%;font-size:13.5px;background:transparent}
.cart-btn{position:relative;background:none;border:0;padding:6px;font-size:24px;color:var(--ink);display:flex}
.cart-btn em{position:absolute;top:-2px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;font-style:normal;font-weight:700;display:grid;place-items:center;padding:0 4px}
.burger{display:none;background:none;border:0;font-size:26px;padding:6px;color:var(--ink)}
@media (max-width:1300px){.h-search{display:none}}
header.site-h .wrap{gap:16px}
@media (max-width:980px){
  nav.main{position:fixed;inset:calc(106px + env(safe-area-inset-top,0px)) 0 auto 0;flex-direction:column;align-items:stretch;background:#fff;padding:12px max(16px,env(safe-area-inset-right,0px)) 18px max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line);box-shadow:var(--shadow);display:none;max-height:calc(100vh - 110px);overflow:auto}
  nav.main.open{display:flex}
  nav.main .on::after{display:none}
  .dd-menu{position:static;display:grid;box-shadow:none;border:0;padding:0 0 0 12px}
  .burger{display:flex;margin-left:auto}
  .h-cta{display:none}
}
@media (max-width:420px){.logo b{font-size:17px}}

/* ---------- section scaffolding ---------- */
@keyframes fade{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
.sec{padding-block:44px}
.sec-t{text-align:center;font-size:clamp(22px,2.6vw,30px);font-weight:800;color:var(--ink);margin-bottom:26px}
.sec-t::after{content:"";display:block;width:56px;height:3px;border-radius:2px;background:var(--blue);margin:12px auto 0}
.sec-t.l{text-align:left}.sec-t.l::after{margin-left:0}
.row-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:22px}
.row-head .sec-t{margin:0}
.more{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:700;font-size:14px;white-space:nowrap}
.more:hover{text-decoration:underline}

.crumb{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);padding-top:18px}
.crumb a:hover{color:var(--blue)}
.crumb b{color:var(--ink);font-weight:600}

/* hero */
.hero{background:radial-gradient(1200px 400px at 85% 10%,rgba(255,255,255,.18),transparent 60%),linear-gradient(115deg,var(--blue-d) 0%,var(--blue) 45%,var(--blue-l) 100%);color:#fff;overflow:hidden;position:relative}
.hero::after{content:"";position:absolute;inset:auto -10% -40% 30%;height:70%;background:radial-gradient(closest-side,rgba(255,255,255,.22),transparent);pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:36px;align-items:center;padding-block:48px 92px;position:relative;z-index:1}
.hero h1{font-size:clamp(34px,4.6vw,58px);font-weight:800;line-height:1.05}
.hero .sub{color:var(--yellow);font-size:clamp(20px,2.4vw,30px);font-weight:800;margin-top:8px}
.hero p{margin-top:14px;max-width:52ch;font-size:16.5px;color:#E7EEFF}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

.phero{background:linear-gradient(100deg,var(--blue-50) 0%,var(--blue-50) 55%,var(--blue-100) 100%);position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;right:-6%;top:-30%;width:60%;height:160%;background:radial-gradient(closest-side,color-mix(in srgb,var(--blue) 14%,transparent),transparent);pointer-events:none}
.phero .wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:30px;align-items:center;padding-block:10px 40px;position:relative}
.phero h1{font-size:clamp(30px,4vw,48px);font-weight:800;color:var(--ink);margin-top:18px}
.phero h1 em{font-style:normal;color:var(--blue)}
.phero p{margin-top:12px;font-size:16.5px;color:#33405F;max-width:56ch}
.checks{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px}
.checks span{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:15px}
.tick{width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;flex:none;font-size:13px}
.phero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
@media (max-width:860px){
  .hero .wrap,.phero .wrap{grid-template-columns:1fr}
  .hero .wrap{padding-block:34px 84px}
  .stage{max-width:520px;margin:0 auto;width:100%}
}

/* device mockups */
.stage{position:relative;padding:4% 8% 6% 0}
.laptop{position:relative;filter:drop-shadow(0 26px 30px rgba(6,26,80,.35))}
.laptop .lid{background:#151B2C;border-radius:12px 12px 2px 2px;padding:2.3%;border:1px solid #2A3350}
.laptop .base{height:clamp(8px,1.3vw,14px);background:linear-gradient(#EEF1F7,#AEB8CC);border-radius:0 0 14px 14px;margin:0 -7%;position:relative}
.laptop .base::after{content:"";position:absolute;left:42%;right:42%;top:0;height:40%;background:#C9D1E0;border-radius:0 0 6px 6px}
.phone{position:absolute;right:0;bottom:0;width:26%;background:#151B2C;border-radius:16px;padding:2.2% 1.6%;border:1px solid #2A3350;filter:drop-shadow(0 18px 20px rgba(6,26,80,.35))}
.tablet{position:absolute;right:13%;bottom:2%;width:30%;background:#151B2C;border-radius:14px;padding:2%;border:1px solid #2A3350;filter:drop-shadow(0 18px 20px rgba(6,26,80,.3))}
.plant{position:absolute;left:-4%;bottom:0;width:15%}
.screen{container-type:inline-size;overflow:hidden;background:#fff;border-radius:3px;aspect-ratio:16/10;position:relative}
.phone .screen{aspect-ratio:9/19;border-radius:10px}
.tablet .screen{aspect-ratio:3/4;border-radius:6px}

/* mini website inside screens (all in cqw so it scales with any frame) */
.site{position:absolute;inset:0;display:flex;flex-direction:column;font-family:var(--font);background:#fff}
.s-nav{display:flex;align-items:center;gap:3cqw;height:8cqw;padding:0 4cqw;flex:none;border-bottom:.3cqw solid #EEF1F6}
.s-logo{display:flex;align-items:center;gap:1.2cqw;font-size:2.6cqw;font-weight:800;color:var(--c1);white-space:nowrap}
.s-logo::before{content:"";width:3.4cqw;height:3.4cqw;border-radius:1cqw;background:linear-gradient(135deg,var(--c1),var(--c2))}
.s-nav i{display:block;height:1.1cqw;width:7cqw;background:#D7DCE6;border-radius:1cqw}
.s-nav i:first-of-type{margin-left:auto}
.s-btn{width:10cqw;height:4cqw;border-radius:3cqw;background:var(--c1);flex:none}
.s-hero{position:relative;display:flex;align-items:center;gap:4cqw;padding:4cqw 6cqw;height:46cqw;flex:none;background:linear-gradient(120deg,var(--c1),var(--c2));color:#fff;overflow:hidden}
.s-hero::after{content:"";position:absolute;right:-10cqw;bottom:-18cqw;width:50cqw;height:50cqw;border-radius:50%;background:rgba(255,255,255,.12)}
.s-copy{flex:1.2;position:relative;z-index:1;min-width:0}
.s-k{font-size:2cqw;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.s-h{font-size:5.4cqw;font-weight:800;line-height:1.08;margin-top:1.2cqw}
.s-l{height:1.2cqw;width:80%;background:rgba(255,255,255,.65);border-radius:1cqw;margin-top:2.4cqw}
.s-l.sh{width:55%;margin-top:1.4cqw}
.s-cta{display:inline-block;margin-top:3.6cqw;padding:1.4cqw 3.6cqw;font-size:2.3cqw;font-weight:700;border-radius:4cqw;background:#fff;color:var(--c1)}
.s-art{flex:1;display:grid;place-items:center;position:relative;z-index:1}
.s-art .orb{width:30cqw;height:30cqw;border-radius:50%;background:rgba(255,255,255,.18);border:.5cqw solid rgba(255,255,255,.45);display:grid;place-items:center}
.s-art .i{width:16cqw;height:16cqw;stroke-width:1.6}
.s-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:3cqw;padding:4cqw 6cqw;flex:1}
.s-cards div{border-radius:1.6cqw;background:#F2F5FA;border:.3cqw solid #E6EBF3;display:flex;flex-direction:column;gap:1.4cqw;padding:2cqw}
.s-cards div::before{content:"";height:9cqw;border-radius:1cqw;background:linear-gradient(135deg,var(--c2),var(--c1));opacity:.55}
.s-cards div::after{content:"";height:1.1cqw;width:70%;background:#D2D9E5;border-radius:1cqw}
.site.v1 .s-hero{flex-direction:row-reverse}
.site.v2 .s-hero{background:linear-gradient(160deg,#0F1729 0%,var(--c1) 140%)}
.site.v2 .s-cta{background:var(--c2);color:#0F1729}
.site.v3 .s-hero{background:#fff;color:var(--ink)}
.site.v3 .s-hero::after{background:linear-gradient(135deg,var(--c2),var(--c1));opacity:.25}
.site.v3 .s-l{background:#D2D9E5}
.site.v3 .s-cta{background:var(--c1);color:#fff}
.site.v3 .s-art .orb{background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;border-color:transparent}
/* portrait screens */
.phone .s-nav,.tablet .s-nav{height:14cqw}
.phone .s-nav i,.tablet .s-nav i{display:none}
.phone .s-logo,.tablet .s-logo{font-size:6cqw}
.phone .s-logo::before,.tablet .s-logo::before{width:7cqw;height:7cqw}
.phone .s-btn,.tablet .s-btn{margin-left:auto;width:8cqw;height:8cqw;border-radius:2cqw}
.phone .s-hero,.tablet .s-hero{flex-direction:column!important;height:auto;padding:8cqw 7cqw;text-align:left;gap:6cqw}
.phone .s-h,.tablet .s-h{font-size:10cqw}
.phone .s-k,.tablet .s-k{font-size:4.5cqw}
.phone .s-cta,.tablet .s-cta{font-size:5cqw;padding:3cqw 7cqw;margin-top:6cqw}
.phone .s-l,.tablet .s-l{height:2.6cqw;margin-top:4cqw}
.phone .s-art .orb,.tablet .s-art .orb{width:50cqw;height:50cqw}
.phone .s-art .i,.tablet .s-art .i{width:26cqw;height:26cqw}
.phone .s-cards,.tablet .s-cards{grid-template-columns:1fr 1fr;padding:6cqw 7cqw;gap:5cqw}
.phone .s-cards div:nth-child(3),.tablet .s-cards div:nth-child(3){display:none}
.phone .s-cards div::before,.tablet .s-cards div::before{height:18cqw}

/* feature strip */
.fstrip{position:relative;z-index:2;margin-top:-52px}
.fstrip ul{display:grid;grid-template-columns:repeat(var(--n,4),1fr);background:#fff;border-radius:18px;box-shadow:var(--shadow);border:1px solid var(--line)}
.fstrip li{display:flex;gap:14px;align-items:center;padding:20px 22px;min-width:0}
.fstrip li + li{border-left:1px solid var(--line)}
.fstrip .i{font-size:34px;color:var(--blue);stroke-width:1.7}
.fstrip b{display:block;font-size:16px}
.fstrip small{display:block;color:var(--muted);font-size:13px}
.fstrip.flat{margin-top:0}
@media (max-width:900px){.fstrip ul{grid-template-columns:1fr 1fr}.fstrip li:nth-child(3){border-left:0}.fstrip li:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:460px){.fstrip li{padding:14px;gap:10px}.fstrip .i{font-size:26px}.fstrip b{font-size:14px}.fstrip small{font-size:12px}}

/* category tiles */
.cats{display:grid;grid-template-columns:repeat(var(--n,9),1fr);gap:12px}
.cat{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 8px;border-radius:14px;background:#fff;border:1px solid var(--line);font-weight:600;font-size:14px;text-align:center;transition:.18s;box-shadow:0 6px 16px -14px rgba(10,36,99,.6)}
.cat .i{font-size:32px;color:var(--blue);stroke-width:1.7}
.cat:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:var(--shadow)}
.cat.all{color:var(--blue);background:var(--blue-50)}
@media (max-width:1000px){.cats{grid-template-columns:repeat(5,1fr)}}
@media (max-width:560px){.cats{grid-template-columns:repeat(3,1fr)}.cat{font-size:13px;padding:14px 6px}}

/* theme card */
.tcard{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:.2s;box-shadow:0 6px 18px -16px rgba(10,36,99,.6);min-width:0}
.tcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--blue-200)}
.tthumb{background:linear-gradient(180deg,var(--blue-50),var(--blue-100));padding:9% 13% 7%;position:relative;cursor:pointer}
.tthumb .laptop{filter:drop-shadow(0 12px 12px rgba(6,26,80,.28))}
.tthumb .laptop .lid{border-radius:7px 7px 1px 1px;padding:2.6%}
.tthumb .laptop .base{height:6px}
.tthumb .hot{z-index:3;position:absolute;top:10px;left:10px;background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px}
.tbody{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.tag{align-self:flex-start;font-size:12px;font-weight:600;color:var(--blue);background:var(--blue-50);padding:3px 9px;border-radius:6px}
.tbody h3{font-size:16.5px;font-weight:700;margin-top:4px}
.tbody .ind{font-size:13px;color:var(--muted)}
.price{color:var(--red);font-weight:800;font-size:19px;font-variant-numeric:tabular-nums;margin-top:2px}
.price s{color:var(--muted);font-weight:500;font-size:13px;margin-left:6px}
.tact{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto;padding-top:10px}
.tact .btn{padding:.6em .4em;font-size:13px;border-radius:9px;gap:.35em;min-width:0}
.grid4 .tact .btn .i{display:none}

.carousel{position:relative}
.track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*18px)/4);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 14px}
.track::-webkit-scrollbar{display:none}
.track > *{scroll-snap-align:start}
.cbtn{position:absolute;top:36%;width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);display:grid;place-items:center;color:var(--blue);font-size:20px;z-index:2}
.cbtn.l{left:-14px}.cbtn.r{right:-14px}
@media (max-width:1000px){.track{grid-auto-columns:calc((100% - 18px)/2)}}
@media (max-width:560px){.track{grid-auto-columns:82%}.cbtn{display:none}}

/* service duo */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.svc{border-radius:20px;padding:28px;background:linear-gradient(120deg,var(--blue-50),var(--blue-100));border:1px solid var(--blue-100);display:grid;grid-template-columns:1fr .85fr;gap:16px;align-items:center;overflow:hidden}
.svc h3,.svc .h3{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:800}
.svc h3 .i,.svc .h3 .i{color:var(--blue);font-size:28px}
.svc ul{display:grid;gap:9px;margin:16px 0 20px}
.svc li{display:flex;gap:9px;align-items:center;font-weight:500}
.svc li .tick{width:19px;height:19px;font-size:11px}
@media (max-width:900px){.duo{grid-template-columns:1fr}}
@media (max-width:520px){.svc{grid-template-columns:1fr}.svc .stage{max-width:300px}}

/* why grid */
.why{display:grid;grid-template-columns:repeat(var(--n,6),1fr);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 24px -20px rgba(10,36,99,.7)}
.why li{text-align:center;padding:22px 12px;display:flex;flex-direction:column;align-items:center;gap:6px}
.why li + li{border-left:1px solid var(--line)}
.why .i{font-size:34px;color:var(--blue);stroke-width:1.6;margin-bottom:4px}
.why b{font-size:15px}.why small{color:var(--muted);font-size:13px}
@media (max-width:900px){.why{grid-template-columns:repeat(3,1fr)}.why li:nth-child(4){border-left:0}.why li:nth-child(n+4){border-top:1px solid var(--line)}}
@media (max-width:520px){.why{grid-template-columns:1fr 1fr}.why li{border-left:0!important;border-top:1px solid var(--line)}.why li:nth-child(-n+2){border-top:0}.why li:nth-child(even){border-left:1px solid var(--line)!important}}

/* process */
.steps{display:grid;grid-template-columns:repeat(var(--n,5),1fr);gap:28px;counter-reset:st}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 14px 16px;text-align:center;box-shadow:0 8px 20px -18px rgba(10,36,99,.7)}
.step:not(:last-child)::after{content:"›";position:absolute;right:-21px;top:50%;transform:translateY(-50%);font-size:26px;color:var(--blue);font-weight:700}
.step .ico{width:54px;height:54px;border-radius:50%;margin:0 auto;display:grid;place-items:center;background:var(--blue-50);color:var(--blue);font-size:26px;position:relative}
.step .n{position:absolute;bottom:-6px;right:-6px;width:24px;height:24px;border-radius:50%;background:var(--blue);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;border:2px solid #fff;font-variant-numeric:tabular-nums}
.step b{display:block;margin-top:14px;font-size:14.5px}
.step small{display:block;color:var(--muted);font-size:12.5px;margin-top:4px;line-height:1.45}
.steps.compact{gap:22px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr);gap:14px}.step::after{display:none}}
@media (max-width:420px){.steps{grid-template-columns:1fr}}

/* two-column split */
.split{display:grid;grid-template-columns:var(--cols,1.1fr 1fr);gap:30px;align-items:start}
@media (max-width:960px){.split{grid-template-columns:1fr}}

.whybox{border-radius:20px;padding:26px 28px;background:linear-gradient(120deg,var(--blue-50),var(--blue-100));border:1px solid var(--blue-100);position:relative;overflow:hidden}
.whybox h3,.whybox .h3{font-size:22px;font-weight:800;margin-bottom:14px}
.whybox ul{display:grid;gap:10px;max-width:72%}
.whybox li{display:flex;gap:10px;align-items:flex-start;font-weight:500}
.whybox li .tick{margin-top:1px;width:20px;height:20px;font-size:12px}
.whybox .badge{position:absolute;right:22px;bottom:22px;width:24%;max-width:130px;color:var(--blue)}
@media (max-width:520px){.whybox ul{max-width:none}.whybox .badge{display:none}}

/* projects & blog */
.proj{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pj{border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--line);transition:.2s}
.pj:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.pj .tthumb{padding:8% 10% 6%}
.pj b{display:block;padding:12px 14px;font-size:14.5px;text-align:center}
.blog{display:grid;gap:12px}
.post{display:grid;grid-template-columns:92px 1fr auto;gap:14px;align-items:center;padding:10px;border-radius:12px;border:1px solid var(--line);background:#fff}
.post:hover{border-color:var(--blue-200);box-shadow:0 8px 20px -16px rgba(10,36,99,.7)}
.post .th{aspect-ratio:16/10;border-radius:8px;background:linear-gradient(135deg,var(--c1),var(--c2));display:grid;place-items:center;color:#fff;font-size:26px}
.post b{font-size:14.5px;line-height:1.35;display:block}
.post small{color:var(--muted);font-size:12.5px}
.post time{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
@media (max-width:560px){.proj{grid-template-columns:1fr 1fr}.proj .pj:nth-child(3){display:none}.post{grid-template-columns:72px 1fr}.post time{display:none}}

/* CTA band */
.cta-band{border-radius:22px;background:radial-gradient(500px 220px at 90% 0%,rgba(255,255,255,.2),transparent),linear-gradient(110deg,var(--blue-d),var(--blue) 60%,var(--blue-l));color:#fff;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding:26px 34px;overflow:hidden}
.cta-band h2{font-size:clamp(20px,2.4vw,28px);font-weight:800}
.cta-band .checks span{color:#E7EEFF}
.cta-band .checks .tick{background:#fff;color:var(--blue)}
.cta-band .art{width:150px;color:#fff}
@media (max-width:860px){.cta-band{grid-template-columns:1fr;padding:24px}.cta-band .art{display:none}}

/* ---------- Theme listing page ---------- */
.shop{display:grid;grid-template-columns:260px 1fr;gap:26px;align-items:start}
.side{display:grid;gap:18px;position:sticky;top:calc(86px + env(safe-area-inset-top,0px))}
.panel{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 8px 20px -18px rgba(10,36,99,.7)}
.panel h3,.panel .h3{background:var(--blue);color:#fff;font-size:17px;font-weight:700;padding:14px 18px}
.panel h3.soft,.panel .h3.soft{background:var(--blue-50);color:var(--ink)}
.catlist{padding:8px}
.catlist button{width:100%;display:flex;align-items:center;gap:12px;padding:9px 10px;border:0;background:none;border-radius:9px;font-weight:500;font-size:15px;text-align:left}
.catlist button .i{font-size:21px;color:var(--ink);stroke-width:1.7}
.catlist button span{margin-left:auto;background:var(--surface);border-radius:999px;font-size:12px;padding:2px 9px;color:var(--muted);font-variant-numeric:tabular-nums}
.catlist button:hover{background:var(--blue-50)}
.catlist button.on{background:var(--blue-50);color:var(--blue);font-weight:700}
.catlist button.on .i{color:var(--blue)}
.catlist button.on span{background:var(--blue);color:#fff}
.radios{padding:12px 18px 16px;display:grid;gap:10px}
.radios label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14.5px}
.radios input{accent-color:var(--blue);width:18px;height:18px}
.listhead{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.listhead h2{font-size:24px;font-weight:800}
.listhead h2 small{font-weight:500;color:var(--muted);font-size:17px}
.sel{display:flex;align-items:center;gap:10px;font-size:14px}
.sel select{border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;background:#fff;font-weight:600;min-width:150px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid4 .tthumb{padding:9% 10% 7%}
.pager{display:flex;justify-content:center;gap:8px;margin-top:26px;flex-wrap:wrap}
.pager button{min-width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.pager button.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.pager button:disabled{opacity:.4;cursor:default}
.empty{grid-column:1/-1;text-align:center;padding:50px 20px;border:2px dashed var(--line);border-radius:16px;color:var(--muted)}
.empty b{display:block;color:var(--ink);font-size:17px;margin-bottom:6px}
.chips{display:none}
@media (max-width:1140px){.grid4{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){
  .shop{grid-template-columns:1fr}
  .side{display:none}
  .chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:12px;scrollbar-width:none}
  .chips button{flex:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font-weight:600;font-size:13.5px}
  .chips button.on{background:var(--blue);color:#fff;border-color:var(--blue)}
  .grid4{grid-template-columns:repeat(2,1fr);gap:12px}
}
@media (max-width:420px){.tbody{padding:12px}.tbody h3{font-size:14.5px}.price{font-size:16px}.tact{grid-template-columns:1fr}}

/* ---------- service cards (web design / SEO) ---------- */
.svc3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sv{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:14px;box-shadow:0 10px 24px -20px rgba(10,36,99,.7);transition:.2s}
.sv:hover{box-shadow:var(--shadow);border-color:var(--blue-200)}
.sv .hd{display:grid;grid-template-columns:auto 1fr;gap:14px}
.sv .hd > .i{font-size:44px;color:var(--blue);stroke-width:1.5}
.sv h3{font-size:19px;font-weight:800}
.sv p{color:var(--muted);font-size:14px;margin-top:6px}
.sv .bd{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:center}
.scene{aspect-ratio:4/3;border-radius:12px;background:linear-gradient(135deg,var(--c2),var(--c1));display:grid;place-items:center;color:#fff;position:relative;overflow:hidden}
.scene::before{content:"";position:absolute;inset:auto -20% -50% -20%;height:70%;background:rgba(255,255,255,.15);border-radius:50%}
.scene .i{font-size:56px;stroke-width:1.4;position:relative}
.sv ul{display:grid;gap:8px;font-size:13.5px;font-weight:500}
.sv li{display:flex;gap:8px;align-items:center}
.sv li .tick{width:18px;height:18px;font-size:10px}
@media (max-width:980px){.svc3{grid-template-columns:1fr}}

.pk4{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:16px}
.pk{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:10px;transition:.2s;box-shadow:0 10px 24px -20px rgba(10,36,99,.7)}
.pk:hover{box-shadow:var(--shadow);border-color:var(--blue-200);transform:translateY(-3px)}
.pk .i.big{font-size:42px;color:var(--blue);stroke-width:1.5}
.pk h3{font-size:18px;font-weight:800}
.pk p{color:var(--muted);font-size:13.5px;flex:1}
.pk ul{display:grid;gap:6px;font-size:13px;margin:4px 0 8px}
.pk li{display:flex;gap:7px;align-items:center}
.pk li .i{color:var(--green)}
@media (max-width:1000px){.pk4{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pk4{grid-template-columns:1fr}}

.results{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;background:linear-gradient(120deg,var(--blue-50),var(--blue-100));border-radius:18px;padding:18px;border:1px solid var(--blue-100)}
.rc{background:#fff;border-radius:14px;padding:16px 18px;border:1px solid var(--line);min-width:0}
.rc b{font-size:15px}
.rc .big{font-size:34px;font-weight:800;color:var(--green);line-height:1.1;font-variant-numeric:tabular-nums}
.rc svg{width:100%;height:auto;display:block;margin-top:6px}
.rank{display:grid;gap:10px;margin-top:12px}
.rank div{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:center;font-weight:800;color:var(--muted)}
.rank i{display:block;height:9px;border-radius:5px;background:var(--line)}
.rank div:first-child{color:var(--blue)}
.rank div:first-child i{background:var(--green)}
.note{font-size:12px;color:var(--muted);margin-top:8px}
@media (max-width:560px){.results{grid-template-columns:1fr}}

.faq{display:grid;gap:10px}
.faq details{border:1px solid var(--line);border-radius:12px;background:#fff}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center;padding:14px 16px;font-weight:600;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary .i{color:var(--blue);transition:transform .2s}
.faq details[open] summary .i{transform:rotate(45deg)}
.faq details p{padding:0 16px 16px;color:var(--muted);font-size:14.5px}

/* forms */
.fld{position:relative;display:block}
.fld .i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--blue);font-size:18px;pointer-events:none}
.fld.ta .i{top:16px;transform:none}
.fld input,.fld select,.fld textarea{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:12px 14px 12px 42px;background:#fff;outline:0;font-size:14.5px;transition:border-color .15s}
.fld textarea{min-height:120px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 14%,transparent)}
.fld.err input,.fld.err select{border-color:var(--red)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fgrid .full{grid-column:1/-1}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}}
.ferr{color:var(--red);font-size:13px;min-height:1em}
.okmsg{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:12px;background:#E9F8EF;border:1px solid #B8E8CB;color:#0B5A2E}
.okmsg .i{font-size:22px;color:var(--green);margin-top:2px}

.leadbox{border-radius:20px;padding:26px;background:radial-gradient(400px 200px at 100% 100%,rgba(255,255,255,.18),transparent),linear-gradient(130deg,var(--blue-d),var(--blue) 60%,var(--blue-l));color:#fff;display:grid;gap:14px}
.leadbox h3{font-size:22px;font-weight:800}
.leadbox p{color:#E1EAFF;font-size:14.5px}
.leadbox .fld input{border-color:transparent}
.leadbox .okmsg{background:rgba(255,255,255,.95)}

.leadband{border-radius:22px;padding:26px 30px;background:radial-gradient(500px 220px at 0% 100%,rgba(255,255,255,.18),transparent),linear-gradient(110deg,var(--blue-d),var(--blue) 60%,var(--blue-l));color:#fff;display:grid;grid-template-columns:1fr 1.1fr;gap:26px;align-items:center}
.leadband h2{font-size:clamp(20px,2.4vw,28px);font-weight:800}
.leadband p{color:#E1EAFF;margin-top:8px}
.leadband form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.leadband .fld input{border-color:transparent}
.leadband .okmsg{grid-column:1/-1;background:rgba(255,255,255,.95)}
@media (max-width:860px){.leadband{grid-template-columns:1fr;padding:22px}}
@media (max-width:480px){.leadband form{grid-template-columns:1fr}}

/* contact */
.contact{display:grid;grid-template-columns:320px 1fr;gap:24px;align-items:start}
.info{padding:8px 20px 18px;display:grid;gap:16px}
.info div{display:grid;grid-template-columns:30px 1fr;gap:10px}
.info .i{font-size:24px;color:var(--blue);margin-top:2px}
.info b{display:block;font-size:15.5px}
.info span{color:#33405F;font-size:14.5px;overflow-wrap:anywhere}
.copy{border:0;background:var(--blue-50);color:var(--blue);font-size:12px;font-weight:600;border-radius:6px;padding:2px 8px;margin-left:6px}
.socials{display:flex;gap:10px;padding:16px 18px;flex-wrap:wrap}
.sbtn{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px}
.formcard{background:linear-gradient(120deg,#FFFFFF,var(--blue-50));border:1px solid var(--line);border-radius:18px;padding:26px;display:grid;grid-template-columns:1fr 230px;gap:22px;box-shadow:0 10px 24px -20px rgba(10,36,99,.7)}
.formcard h2{font-size:26px;font-weight:800}
.formcard > div > p{color:var(--muted);margin:6px 0 18px}
.agent{align-self:stretch;border-radius:16px;background:linear-gradient(160deg,var(--blue-100),var(--blue-200));position:relative;display:grid;place-items:center;overflow:hidden;min-height:260px}
.agent .bubble{position:absolute;top:18px;left:18px;background:var(--blue);color:#fff;border-radius:18px 18px 18px 4px;padding:10px 14px;font-size:13px;font-weight:600;box-shadow:var(--shadow)}
.agent .avatar{width:120px;height:120px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--blue);font-size:60px;box-shadow:var(--shadow)}
.agent .online{position:absolute;bottom:16px;left:16px;right:16px;background:#fff;border-radius:12px;padding:10px 12px;font-size:13px;display:flex;gap:8px;align-items:center}
.agent .online i{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px #CDEFD9}
.map{border-radius:16px;overflow:hidden;border:1px solid var(--line);position:relative;background:#EEF1E9}
.map > svg{display:block;width:100%;height:auto}
.map .pincard{position:absolute;left:38%;top:12%;background:#fff;border-radius:12px;padding:10px 14px;box-shadow:var(--shadow);font-size:12.5px;line-height:1.4}
.map .pincard b{font-size:14px}
.map a.open{position:absolute;right:12px;bottom:12px}
.reasons{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.reasons div{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:16px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.reasons .i{font-size:30px;color:var(--blue);stroke-width:1.6}
.reasons b{display:block;font-size:15px}
.reasons small{color:var(--muted);font-size:13px}
@media (max-width:980px){.contact{grid-template-columns:1fr}.formcard{grid-template-columns:1fr}.agent{display:none}}
@media (max-width:480px){.reasons{grid-template-columns:1fr}.formcard{padding:18px}}

/* footer */
footer{background:var(--navy);color:#C9D6F5;margin-top:40px}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.3fr;gap:26px;padding-block:40px 30px}
footer h4{color:#fff;font-size:16px;font-weight:700;margin-bottom:12px}
footer .logo b{color:#fff}footer .logo small{color:#AFC1EA}
footer p{font-size:14px;margin:14px 0 16px}
footer ul{display:grid;gap:7px;font-size:14px}
footer ul a{display:flex;gap:6px;align-items:center}
footer ul a::before{content:"›";color:#7FA2F0}
footer ul a:hover{color:#fff}
footer .ct li{display:grid;grid-template-columns:22px 1fr;gap:8px;font-size:14px}
footer .ct .i{font-size:18px;color:#fff;margin-top:2px}
footer .fsoc{display:flex;gap:10px}
footer .fsoc a{width:36px;height:36px;border-radius:50%;background:var(--blue);display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px}
footer .bot{border-top:1px solid rgba(255,255,255,.12)}
footer .bot .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:16px;font-size:13.5px}
footer .bot nav{display:flex;gap:18px;flex-wrap:wrap}
footer .bot nav a:hover{color:#fff}
@media (max-width:980px){footer .cols{grid-template-columns:1fr 1fr}footer .cols > div:first-child{grid-column:1/-1}}
@media (max-width:480px){footer .cols{grid-template-columns:1fr}}

/* drawer + modal */
.scrim{position:fixed;inset:0;background:rgba(8,20,52,.5);z-index:80;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:#fff;z-index:90;transform:translateX(105%);transition:transform .25s ease;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-right:env(safe-area-inset-right,0px)}
.drawer.on{transform:none}
.dh{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.dh h3{font-size:19px;font-weight:800}
.x{border:0;background:var(--surface);border-radius:50%;width:36px;height:36px;display:grid;place-items:center;font-size:18px}
.db{flex:1;overflow:auto;padding:14px 20px;display:grid;align-content:start;gap:12px}
.ci{display:grid;grid-template-columns:86px 1fr auto;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line)}
.ci .mini{border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.ci b{font-size:14.5px;display:block}
.ci .price{font-size:15px}
.ci .rm{border:0;background:none;color:var(--muted);font-size:18px;padding:6px}
.ci .rm:hover{color:var(--red)}
.df{border-top:1px solid var(--line);padding:16px 20px;display:grid;gap:12px}
.tot{display:flex;justify-content:space-between;font-size:16px;font-weight:700}
.tot .price{font-size:22px}
.cempty{text-align:center;padding:40px 10px;color:var(--muted)}
.cempty .i{font-size:48px;color:var(--blue-200)}

.modal{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));pointer-events:none;opacity:0;transition:opacity .2s}
.modal.on{pointer-events:auto;opacity:1}
.mbox{background:#fff;border-radius:20px;width:min(1040px,100%);max-height:100%;overflow:auto;display:grid;grid-template-columns:1.5fr 1fr;box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
.mprev{background:linear-gradient(180deg,var(--blue-50),var(--blue-100));padding:24px;display:grid;gap:14px;align-content:start}
.dtoggle{display:flex;gap:6px;background:#fff;border-radius:999px;padding:4px;justify-self:start;border:1px solid var(--line)}
.dtoggle button{border:0;background:none;border-radius:999px;padding:6px 14px;font-weight:600;font-size:13px;display:flex;gap:6px;align-items:center}
.dtoggle button.on{background:var(--blue);color:#fff}
.mprev .stage{padding:2% 4%}
.mprev .phone.solo{position:relative;width:40%;margin:0 auto}
.minfo{padding:24px;display:flex;flex-direction:column;gap:12px}
.minfo h3{font-size:24px;font-weight:800}
.minfo .price{font-size:26px}
.minfo ul{display:grid;gap:8px;font-size:14.5px}
.minfo li{display:flex;gap:9px;align-items:center}
.minfo li .tick{width:19px;height:19px;font-size:11px}
.minfo .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.minfo .row .btn{flex:1}
.mtop{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
@media (max-width:820px){.mbox{grid-template-columns:1fr}}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,30px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-weight:600;font-size:14px;z-index:120;opacity:0;transition:.25s;display:flex;gap:10px;align-items:center;max-width:calc(100% - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast .i{color:#6EE7A0;font-size:18px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* =========================================================
   WordPress markup: menus, pagination, content, Woo, notices
   ========================================================= */
nav.main ul.menu{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
nav.main .menu > li{position:relative}
nav.main .menu > li > a{display:inline-flex;align-items:center;gap:5px;padding:10px 9px;font-weight:600;font-size:14px;white-space:nowrap;border-radius:8px;position:relative;color:var(--ink)}
nav.main .menu > li > a:hover{color:var(--blue)}
nav.main .menu > li.menu-item-has-children > a::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);margin-left:3px}
nav.main .menu > li.current-menu-item > a,nav.main .menu > li.current-menu-ancestor > a,nav.main .menu > li.current_page_item > a,nav.main .menu > li.current-menu-parent > a{color:var(--blue);box-shadow:inset 0 -2px 0 var(--blue);border-radius:0}
nav.main .sub-menu{position:absolute;top:100%;left:0;min-width:240px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px;display:none;z-index:5;list-style:none;margin:0}
nav.main li:hover > .sub-menu,nav.main li:focus-within > .sub-menu{display:grid}
nav.main .sub-menu a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:14px;font-weight:500}
nav.main .sub-menu a:hover,nav.main .sub-menu .current-menu-item > a{background:var(--blue-50);color:var(--blue)}
@media (max-width:980px){
  nav.main ul.menu{flex-direction:column;align-items:stretch}
  nav.main .menu > li > a{box-shadow:none!important;padding:12px 6px}
  nav.main .sub-menu{position:static;display:grid;box-shadow:none;border:0;padding:0 0 0 12px}
}
.custom-logo{max-height:46px;width:auto}

/* WP core helpers */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;clip:auto;background:#fff;padding:10px 14px;z-index:200;border-radius:8px}
.alignleft{float:left;margin:0 1.5em 1em 0}.alignright{float:right;margin:0 0 1em 1.5em}.aligncenter{display:block;margin-inline:auto}
.wp-caption-text,.gallery-caption{font-size:13px;color:var(--muted)}
.sticky,.bypostauthor{}

/* pagination from paginate_links() */
.pager .page-numbers{min-width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:#fff;font-weight:700;display:inline-grid;place-items:center;padding:0 10px;font-variant-numeric:tabular-nums}
.pager .page-numbers.current{background:var(--blue);color:#fff;border-color:var(--blue)}
.pager .page-numbers.dots{border:0;background:none}
.pager a.page-numbers:hover{border-color:var(--blue);color:var(--blue)}

/* sidebar filters as links */
.catlist a{width:100%;display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:9px;font-weight:500;font-size:15px}
.catlist a .i{font-size:21px;stroke-width:1.7}
.catlist a span{margin-left:auto;background:var(--surface);border-radius:999px;font-size:12px;padding:2px 9px;color:var(--muted);font-variant-numeric:tabular-nums}
.catlist a:hover{background:var(--blue-50)}
.catlist a.on{background:var(--blue-50);color:var(--blue);font-weight:700}
.catlist a.on span{background:var(--blue);color:#fff}
.radios a{display:flex;align-items:center;gap:10px;font-size:14.5px}
.radios a::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid #9AA8C4;flex:none}
.radios a.on::before{border-color:var(--blue);background:radial-gradient(circle,var(--blue) 45%,#fff 50%)}
.radios a:hover{color:var(--blue)}
.chips a{flex:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font-weight:600;font-size:13.5px}
.chips a.on{background:var(--blue);color:#fff;border-color:var(--blue)}

/* featured image inside device screens */
.screen > img.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}

/* single theme */
.tsingle{display:grid;grid-template-columns:1.35fr 1fr;gap:30px;align-items:start}
.buybox{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow);position:sticky;top:calc(90px + env(safe-area-inset-top,0px))}
.buybox h1{font-size:clamp(24px,3vw,32px);font-weight:800}
.buybox .price{font-size:28px}
.buybox ul{display:grid;gap:8px;font-size:14.5px}
.buybox li{display:flex;gap:9px;align-items:center}
.buybox li .tick{width:19px;height:19px;font-size:11px}
.buybox .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.prevbox{background:linear-gradient(180deg,var(--blue-50),var(--blue-100));border-radius:20px;padding:24px;display:grid;gap:14px}
.prevbox .phone.solo{position:relative;width:38%;margin:0 auto}
@media (max-width:900px){.tsingle{grid-template-columns:1fr}.buybox{position:static}}

/* generic content */
.entry{max-width:780px;margin-inline:auto}
.entry-content{font-size:16.5px;line-height:1.75;color:#24304F}
.entry-content > * + *{margin-top:1.1em}
.entry-content h2{font-size:26px;margin-top:1.6em}.entry-content h3{font-size:21px;margin-top:1.4em}
.entry-content a{color:var(--blue);text-decoration:underline}
.entry-content ul,.entry-content ol{padding-left:1.4em;list-style:revert}
.entry-content img{border-radius:12px;height:auto}
.entry-content blockquote{margin:1.4em 0;padding:14px 20px;border-left:4px solid var(--blue);background:var(--blue-50);border-radius:0 12px 12px 0}
.entry-meta{color:var(--muted);font-size:14px;margin-top:10px}
.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:.2s}
.pcard:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.pcard .th{aspect-ratio:16/9;background:linear-gradient(135deg,var(--blue),#60A5FA);display:grid;place-items:center;color:#fff;font-size:40px;overflow:hidden}
.pcard .th img{width:100%;height:100%;object-fit:cover}
.pcard div.b{padding:16px;display:grid;gap:6px}
.pcard h2{font-size:17px}
.pcard p{color:var(--muted);font-size:14px}
@media (max-width:900px){.postgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.postgrid{grid-template-columns:1fr}}
.post .th img{width:100%;height:100%;object-fit:cover;border-radius:8px}

/* lead form notices */
.form-note{padding:12px 14px;border-radius:10px;font-size:14px;grid-column:1/-1}
.form-note.err{background:#FDECEC;border:1px solid #F6C1C1;color:#9B1C1C}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* WooCommerce basics */
.woocommerce .button,.woocommerce button.button,.woocommerce a.button,.woocommerce input.button{background:var(--blue)!important;color:#fff!important;border-radius:999px!important;font-weight:700!important;padding:.75em 1.4em!important}
.woocommerce .button.alt,.woocommerce a.checkout-button{background:var(--yellow)!important;color:var(--ink)!important}
.woocommerce .price,.woocommerce-Price-amount{color:var(--red);font-weight:800}
.woocommerce input.input-text,.woocommerce textarea,.woocommerce select{border:1.5px solid var(--line);border-radius:10px;padding:10px 12px}
.woocommerce-message,.woocommerce-info{border-top-color:var(--blue)!important}

/* WP structure fixes */
ol.steps{list-style:none;margin:0;padding:0}
footer h2.h4{color:#fff;font-size:16px;font-weight:700;margin-bottom:12px}
footer .bot ul{display:flex;gap:18px;flex-wrap:wrap}
footer .bot ul a::before{content:none}
footer .ct a::before{content:none}
footer .ct a:hover{color:#fff}
.topbar a:hover{color:#fff}
.h-search input[type=search]::-webkit-search-cancel-button{display:none}

.split.two{grid-template-columns:1fr 1fr}
@media (max-width:700px){.split.two{grid-template-columns:1fr}}
.tbody h3 a:hover{color:var(--blue)}
a.tag:hover{background:var(--blue-100)}
.info a:hover span{color:var(--blue)}

.price{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px}
.price s{margin-left:0}

/* ===== v2: heading font, block wrappers, editor-safe helpers ===== */
h1,h2,h3,h4,.logo b,.btn{font-family:var(--font-h)}
.sec.sp-tight{padding-top:10px}
.sec.sp-none{padding-block:0}
.sec.sp-large{padding-block:72px}
.sec.bg-soft{background:var(--surface);max-width:none}
.sec.bg-soft > .inner{max-width:1200px;margin:0 auto}
.tcs-b{min-width:0}
.split > .tcs-b > .sec-t,.split > .tcs-b > .row-head{margin-top:0}
.split.al-center{align-items:center}
.hero.light{background:none;color:var(--ink)}
.hero-img{border-radius:18px;box-shadow:var(--shadow);width:100%;height:auto}
.scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pj .tthumb img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px}
.svc .svc-img{width:100%;border-radius:14px}
.map > img{display:block;width:100%;height:auto}
.sticky-off header.site-h{position:relative;top:0}
.tcs-empty-note{padding:30px;border:2px dashed var(--line);border-radius:14px;text-align:center;color:var(--muted)}
.richtext a{color:var(--blue);text-decoration:underline}

.hero .wrap.novis,.phero .wrap.novis{grid-template-columns:1fr}
.phero .wrap.novis{padding-bottom:44px}
.whybox svg.badge{position:absolute;right:22px;bottom:22px;width:24%;max-width:130px;height:auto;color:var(--blue);stroke-width:1.3}
.cta-band img.art{width:150px;height:auto;border-radius:12px}
.agent .avatar img{width:100%;height:100%;object-fit:cover}
@media (max-width:960px){.split{grid-template-columns:1fr}}

/* Live demo preview inside device frames (single theme page) */
.screen > iframe.live{position:absolute;top:0;left:0;border:0;transform-origin:0 0;background:#fff}
.laptop .screen > iframe.live{width:1440px;height:900px}
.phone .screen > iframe.live{width:390px;height:823px}
.live-cta{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:center;font-size:14px;color:var(--muted)}
.live-cta span{display:inline-flex;gap:6px;align-items:center}
.live-cta span .i{color:var(--blue)}