:root{--ink:#111;--yellow:#ffc800;--soft:#f6f6f4;--line:#e8e8e2;--mut:#5c5c55;--amber:#9a6700;--black:#111}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--ink);background:#fff;line-height:1.65}
h1,h2,h3,h4{font-family:Poppins,sans-serif;line-height:1.25;margin:0 0 .5em}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
section{padding:56px 0}section.alt{background:var(--soft)}
.kicker{color:#8a6d00;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;margin-bottom:8px}
h2{font-size:1.9rem}.sub{color:var(--mut);max-width:760px}
.preview-bar{background:#111;color:#fff;text-align:center;padding:10px 16px;font-size:.9rem}
.preview-bar b{color:var(--yellow)}
.kwmap{background:#fffbe6;border-bottom:1px solid #ffe27a;padding:14px 20px;font-size:.88rem}
.kwmap summary{cursor:pointer;font-weight:700}.kwmap li{margin-bottom:4px}
header.site{position:sticky;top:0;z-index:50;background:#111;color:#fff}
header.site .wrap{display:flex;align-items:center;gap:28px;padding:14px 20px}
.brand{font-family:Poppins;font-weight:800;font-size:1.25rem;text-decoration:none;color:#fff}
.brand span{color:var(--yellow)}
nav.main{margin-left:auto;display:flex;gap:22px}
nav.main a{color:#fff;text-decoration:none;font-weight:500}
.btn{display:inline-block;background:var(--yellow);color:#111;font-weight:700;text-decoration:none;padding:13px 26px;border-radius:10px}
.btn.ghost{background:#fff;border:2px solid #111}.btn.dark{background:#111;color:#fff}
.hero{background:#111;color:#fff;padding:64px 0}.hero h1{font-size:2.6rem}
.hero p.lead{color:#e8e8e8;max-width:660px;font-size:1.08rem}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.crumb{color:#c9c9c0;font-size:.9rem;margin-bottom:10px}.crumb a{color:#fff}
.hero-pill{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,200,0,.55);background:rgba(255,200,0,.08);color:var(--yellow);font-family:Poppins,sans-serif;font-weight:600;font-size:.92rem;padding:8px 18px;border-radius:30px;margin:0 0 18px}
.hero-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--yellow)}
.formcard{background:#fff;color:#111;border-radius:16px;padding:24px}
.formcard h3{margin-bottom:4px}.formcard p{color:var(--mut);margin-top:0}
.formcard label{display:block;font-size:.85rem;font-weight:600;margin:12px 0 4px}
.formcard input,.formcard select,.formcard textarea{width:100%;padding:11px 12px;border:1.5px solid #d8d8d0;border-radius:8px;font:inherit}
.formcard textarea{min-height:80px}
.field-err{border-color:var(--amber)!important;background:#fffdf5}
.err-msg{color:var(--amber);font-size:.85rem;font-weight:600;display:none;margin:6px 0 0}
.err-msg.show{display:block}
.ok-msg{display:none;background:#fff7cc;border:1px solid #ffe27a;border-radius:10px;padding:12px 14px;font-weight:600;margin-top:14px}
.ok-msg.show{display:block}
/* sliders: arrows flank the sliding boxes, left and right, level with the cards, with space, never overlapping */
.slider-row{display:flex;align-items:center;gap:28px}
.slider-row .viewport{flex:1;min-width:0;overflow:hidden}
.side-btn{flex:0 0 46px;width:46px;height:46px;border-radius:50%;border:0;background:#111;color:#fff;font-size:1.3rem;cursor:pointer}
.side-btn:hover{background:#333}
.track{display:flex;gap:16px;transition:transform .6s ease;will-change:transform}
.tool{flex:0 0 calc((100% - 48px)/4);background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 18px;text-align:center}
.tool img{width:96px;height:96px;object-fit:contain;margin-bottom:12px;filter:grayscale(1);opacity:.55;transition:filter .25s ease,opacity .25s ease}
.tool:hover img{filter:grayscale(0);opacity:1}
.tool h3{font-size:1.1rem}.tool p{font-size:.86rem;color:var(--mut);margin:0}
.tool{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.tool:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(0,0,0,.12);border-color:var(--yellow)}
@media(max-width:560px){.tool{flex:0 0 calc((100% - 16px)/2)}}
.logos .lg img{max-height:56px;max-width:150px;object-fit:contain}
.who-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.who-box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;text-align:center}
.who-box h3{font-size:.98rem;margin:0}
.who-box .icon{margin:0 auto 10px}
.who-box .icon svg{width:36px;height:36px;fill:none;stroke:var(--yellow);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Industry icons (Nov 5, v11, user order): real emoji in their original colours,
   dimmed by default and full colour on hover, same as the tool logos. */
.who-box .icon span{font-size:34px;line-height:1;filter:grayscale(1);opacity:.55;transition:filter .25s ease,opacity .25s ease}
.who-box:hover .icon span,.who-box:focus-within .icon span{filter:grayscale(0);opacity:1}
a.who-box{text-decoration:none;color:inherit}
.flow{position:relative;margin-top:30px}
.flow-line{position:absolute;top:23px;left:12.5%;right:12.5%;height:3px;background:#e3e0d5;border-radius:3px;overflow:hidden}
.flow-fill{display:block;height:100%;width:0;background:var(--yellow);animation:flowFill 8s linear infinite}
@keyframes flowFill{0%{width:0}88%{width:100%}100%{width:100%}}
.flow-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.fstep{text-align:center;padding:0 6px;opacity:.45;animation:stepOn 8s infinite;animation-delay:var(--d)}
.fstep .fnum{width:46px;height:46px;border-radius:50%;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;font-family:Poppins;font-weight:800;font-size:1.25rem;margin:0 auto 12px;border:3px solid #e3e0d5;position:relative;z-index:1;animation:numOn 8s infinite;animation-delay:var(--d)}
.fstep h3{font-size:1.12rem;margin-bottom:8px}
.fstep p{font-size:.92rem;color:var(--mut);margin:0}
@keyframes stepOn{0%,100%{opacity:.45}4%{opacity:1}25%{opacity:1}29%,99%{opacity:.45}}
@keyframes numOn{0%,100%{background:#111;color:#fff;box-shadow:none}4%{background:var(--yellow);color:#111;box-shadow:0 0 0 6px rgba(255,196,0,.25)}25%{background:var(--yellow);color:#111;box-shadow:0 0 0 6px rgba(255,196,0,.25)}29%,99%{background:#111;color:#fff;box-shadow:none}}
@media(max-width:900px){.flow-line{display:none}.flow-steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.flow-steps{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.flow-fill,.fstep,.fstep .fnum{animation:none}.fstep{opacity:1}.flow-fill{width:100%}}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid3>.card{display:flex;flex-direction:column}.grid3>.card>p{flex:1}.grid3>.card .btn{margin-top:16px}
.grid4>.card{display:flex;flex-direction:column}.grid4>.card>p{flex:1}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px}
.card,.who-box,.city{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover,.card:focus-within,.who-box:hover,.who-box:focus-within,.city:hover,.city:focus-within{transform:translateY(-6px);box-shadow:0 16px 32px rgba(0,0,0,.12);border-color:var(--yellow)}
.step{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease;border:1px solid #262626}
.step:hover{transform:translateY(-8px);background:#1e1e1e;border-color:var(--yellow);box-shadow:0 18px 36px rgba(255,200,0,.16)}
.step .num{transition:transform .25s ease}
.step:hover .num{transform:scale(1.18)}
.card h3{font-size:1.12rem}.card p{color:var(--mut)}
.card p.dark{color:var(--ink)}
.svc .card{display:flex;flex-direction:column}.svc .card p{flex:1}
.svc .tag{display:inline-flex;align-items:center;background:#111;color:#fff;border:1px solid #111;border-radius:20px;padding:4px 12px;font-size:.78rem;font-weight:600;margin-bottom:10px;opacity:0;transform:translateY(-4px);transition:opacity .25s ease,transform .25s ease}
.svc .card:hover .tag,.svc .card:focus-within .tag{opacity:1;transform:translateY(0)}
@media(hover:none){.svc .tag{opacity:1;transform:none}}
.svc .tag::before{content:"";width:7px;height:7px;border-radius:50%;background:#ffc000;margin-right:7px;animation:watchpulse 1.6s ease-in-out infinite}
@keyframes watchpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.svc .tag .wn{font-weight:800}
.svc .tag.bump{animation:tagbump .45s ease}
/* Pain-point flip cards (Nov 5, v11, user order): each pain card flips on hover
   (tap on touch screens) to a black back showing the problem icon with a red
   prohibition "no" sign that draws itself over it, like a real no-entry sign.
   The front keeps its .card look; the hover lift is disabled so it never
   fights the flip. */
.pain .flip{perspective:1200px}
.pain .flip-inner{position:relative;height:100%;transform-style:preserve-3d;transition:transform .6s ease}
.pain .flip:hover .flip-inner,.pain .flip.flipped .flip-inner{transform:rotateY(180deg)}
.pain .flip-front,.pain .flip-back{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.pain .flip-front{height:100%;display:flex;flex-direction:column}
.pain .flip-front>p{flex:1}
.pain .flip-front:hover{transform:none}
.pain .flip-back{position:absolute;inset:0;transform:rotateY(180deg);background:#111;color:#ffc000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;border:1px solid var(--line);border-top:5px solid var(--yellow);border-radius:14px}
.pain .flip-back p{color:#fff;font-size:1.05rem;font-weight:700;margin:0}
.pain .no-anim{position:relative;width:110px;height:110px;display:flex;align-items:center;justify-content:center}
.pain .flip-emoji{font-size:64px;line-height:1}
.pain .no-sign{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pain .no-sign circle{fill:none;stroke:#e5484d;stroke-width:7;stroke-dasharray:277;stroke-dashoffset:277}
.pain .no-sign line{fill:none;stroke:#e5484d;stroke-width:7;stroke-linecap:round;stroke-dasharray:85;stroke-dashoffset:85}
.pain .flip:hover .flip-emoji,.pain .flip.flipped .flip-emoji{animation:flippop .45s ease both}
.pain .flip:hover .no-sign circle,.pain .flip.flipped .no-sign circle{animation:draw .5s ease forwards .2s}
.pain .flip:hover .no-sign line,.pain .flip.flipped .no-sign line{animation:draw .35s ease forwards .6s}
@keyframes flippop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.pain .flip-inner{transition:none}.pain .flip-emoji,.pain .no-sign circle,.pain .no-sign line{animation:none}.pain .no-sign circle,.pain .no-sign line{stroke-dashoffset:0}}
@keyframes tagbump{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
.svc .card .btn{margin-top:16px;text-align:center;padding:11px 18px}
.icon{width:52px;height:52px;border-radius:14px;background:#fff7cc;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.icon svg{width:28px;height:28px;stroke:#111;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{background:#111;color:#fff;border-radius:14px;padding:24px}
.step .num{font-family:Poppins;font-size:2.4rem;font-weight:800;color:var(--yellow)}
.step p{color:#dcdcd4}
.cta-band{background:var(--yellow);border-radius:18px;padding:36px;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta-band h2{margin:0}
.check{list-style:none;padding:0;margin:0}.check li{padding:8px 0 8px 30px;position:relative}
.check li:before{content:"✓";position:absolute;left:4px;top:8px;font-weight:800;color:#8a6d00}
.logos{display:flex;flex-wrap:wrap;gap:16px}
.logos .lg{flex:1 1 140px;height:74px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:12px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;text-align:center}
.stat b{font-size:2rem;color:#111;display:block}
.sample{display:inline-block;background:var(--yellow);color:#111;font-size:.68rem;font-weight:800;letter-spacing:.06em;padding:3px 9px;border-radius:99px;margin-bottom:10px}
.tools-grid{display:flex;flex-wrap:wrap;gap:14px}
.tools-grid img{height:46px;width:auto;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.mapbox iframe{width:100%;height:360px;border:0;border-radius:14px}
.price{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.plan:hover,.plan:focus-within{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,.14);border-color:var(--yellow)}
.plan.hot{border:3px solid var(--yellow);box-shadow:0 12px 30px rgba(0,0,0,.08)}
.plan .pname{font-family:Poppins;font-weight:700;font-size:1.25rem}
.plan .pfor{color:var(--mut);font-size:.92rem}
.plan ul{margin:16px 0;padding-left:20px;flex:1}
.plan li{margin-bottom:8px}
.plan .btn{margin-top:16px;text-align:center;transition:background .2s ease,transform .2s ease}
.plan .btn:hover{background:#f0b800;transform:translateY(-2px)}
.plan .btn-note{text-align:center;color:var(--mut);font-size:.85rem;margin:10px 0 0}
.price-line{margin:14px 0 2px}.price-line .amount{font-family:Poppins;font-size:2rem;font-weight:800}.price-line .per{color:var(--mut);font-weight:600}
.pop-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:#111;color:var(--yellow);font-family:Poppins;font-weight:700;font-size:.75rem;letter-spacing:.06em;padding:6px 16px;border-radius:20px;white-space:nowrap}

details{border:1px solid var(--line);border-radius:12px;background:#fff;padding:18px 20px;margin-bottom:12px}
details summary{font-weight:700;font-family:Poppins;cursor:pointer}
.guide-img{aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#111,#3a3a3a);margin-bottom:14px}
.guide-img img{width:100%;height:100%;object-fit:cover;display:block}
.guide-excerpt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.guide-read{margin-top:14px}
.guide-img span{font-size:.8rem;font-weight:400;color:#e8e8e8;display:block;margin-top:4px}
.stepnum{display:flex;gap:20px;margin-bottom:28px}.stepnum .n{flex:0 0 52px;height:52px;border-radius:50%;background:var(--yellow);font-family:Poppins;font-weight:800;font-size:1.4rem;display:flex;align-items:center;justify-content:center}
.takeaway{background:#fff7cc;border:1px solid #ffe27a;border-radius:14px;padding:24px}
footer.site{background:#0d0d0d;color:#bdbdb4;padding:56px 0 0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:44px}
.foot-grid h4{color:#fff;font-size:1rem;margin-bottom:14px}
.foot-grid ul{list-style:none;margin:0;padding:0}.foot-grid li{margin-bottom:9px}
.foot-grid a{color:#bdbdb4;text-decoration:none}.foot-grid a:hover{color:var(--yellow)}
.foot-brand{font-family:Poppins;font-weight:800;font-size:1.35rem;color:#fff}
.foot-brand span{color:var(--yellow)}
.social{display:flex;gap:10px;margin-top:16px}
.social a{width:38px;height:38px;border-radius:50%;background:#222;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem}
.foot-bottom{border-top:1px solid #262626;padding:20px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.88rem}
.foot-bottom a{color:#bdbdb4;text-decoration:none}
@media(max-width:900px){.hero-grid,.grid3,.grid4,.steps,.price,.foot-grid,.who-grid,.pf{grid-template-columns:1fr 1fr}h2{font-size:1.6rem}.hero h1{font-size:2.1rem}}
@media(max-width:560px){.hero-grid,.grid3,.grid4,.steps,.price,.foot-grid,.who-grid,.pf{grid-template-columns:1fr}nav.main{display:none}}

.review{position:relative;flex:0 0 calc((100% - 32px)/3);background:#fff;border:1px solid var(--line);border-top:5px solid var(--yellow);border-radius:14px;padding:22px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.review:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(0,0,0,.12)}
.review .stars{color:#e8a100;letter-spacing:2px;font-size:1.15rem}
.review .ind{display:inline-block;background:#eef4ff;border:1px solid #cfe0ff;border-radius:20px;padding:3px 10px;font-size:.74rem;font-weight:700;margin:8px 0}
.review .ind.sample{background:#fff1f1;border-color:#f3c2c2;color:#8a1f1f}
.review .who{display:flex;align-items:center;font-weight:700;margin-top:12px}
.review .who span{color:var(--mut);font-weight:400}
.review .avatar{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#111;color:var(--yellow);font-family:Poppins;font-weight:700;margin-right:10px;vertical-align:middle;flex:0 0 auto}
.pf{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.showcase-img{height:150px;border-radius:10px;background:linear-gradient(135deg,#222,#444);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;margin-bottom:14px;text-align:center;padding:12px}
.showcase-img b{font-family:Poppins}
.showcase-img span{font-size:.8rem;color:#e8e8e8}
.badge2{display:inline-block;background:#111;color:var(--yellow);font-size:.72rem;font-weight:700;letter-spacing:.06em;padding:4px 10px;border-radius:20px;margin-bottom:10px}
@media(max-width:900px){.review{flex:0 0 calc((100% - 16px)/2)}}
@media(max-width:560px){.review{flex:0 0 100%}}
.form-side .side-btn{transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease,border-color .25s ease}
.form-side .side-btn.wa:hover{background:#1a9e4e;transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.35)}
.form-side .side-btn.call:hover{background:var(--yellow);color:#111;transform:translateY(-2px);box-shadow:0 10px 22px rgba(255,200,0,.25)}
.form-side .soc-btn{transition:transform .25s ease,box-shadow .25s ease}
.form-side .soc-btn:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 8px 18px rgba(0,0,0,.3)}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.16)}

/* ---- home v14 stylesheet (appended; wins ties) ---- */
:root{--ink:#111;--yellow:#ffc800;--soft:#f6f6f4;--line:#e8e8e2;--mut:#5c5c55;--amber:#9a6700}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--ink);background:#fff;line-height:1.65}
h1,h2,h3,h4{font-family:Poppins,sans-serif;line-height:1.25;margin:0 0 .5em}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
section{padding:64px 0}section.alt{background:var(--soft)}
.kicker{color:#8a6d00;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;margin-bottom:8px}
h2{font-size:2rem}h2 .hl,h1 .hl{color:#b89100}
.sub{color:var(--mut);max-width:760px}
.preview-bar{background:#111;color:#fff;text-align:center;padding:10px 16px;font-size:.9rem}
.preview-bar b{color:var(--yellow)}
.kwmap{background:#fffbe6;border-bottom:1px solid #ffe27a;padding:14px 20px;font-size:.88rem}
.kwmap summary{cursor:pointer;font-weight:700}
.kwmap li{margin-bottom:4px}
header.site{position:sticky;top:0;z-index:50;background:#111;color:#fff}
header.site .wrap{display:flex;align-items:center;gap:28px;padding:14px 20px}
.brand{font-family:Poppins;font-weight:800;font-size:1.25rem;text-decoration:none;color:#fff}
.brand span{color:var(--yellow)}
nav.main{margin-left:auto;display:flex;gap:22px}
nav.main a{color:#fff;text-decoration:none;font-weight:500}
.btn{display:inline-block;background:var(--yellow);color:#111;font-weight:700;text-decoration:none;padding:13px 26px;border-radius:10px}
.btn.ghost{background:#fff;border:2px solid #111}
.btn.white{background:#fff;color:#111}
.btn.dark{background:#111;color:#fff}
.hero{background:#111;color:#fff;padding:72px 0}
.hero h1{font-size:2.9rem}
.hero p.lead{color:#e8e8e8;max-width:660px;font-size:1.1rem}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start}
.hero-pill{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,200,0,.55);background:rgba(255,200,0,.08);color:var(--yellow);font-family:Poppins,sans-serif;font-weight:600;font-size:.92rem;padding:8px 18px;border-radius:30px;margin:0 0 18px}
.hero-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--yellow)}
.formcard{background:#fff;color:#111;border-radius:16px;padding:24px}
.formcard h3{margin-bottom:4px}.formcard p{color:var(--mut);margin-top:0}
.formcard label{display:block;font-size:.85rem;font-weight:600;margin:12px 0 4px}
.formcard input,.formcard select,.formcard textarea{width:100%;padding:11px 12px;border:1.5px solid #d8d8d0;border-radius:8px;font:inherit}
.formcard textarea{min-height:80px}
.field-err{border-color:var(--amber)!important;background:#fffdf5}
.err-msg{color:var(--amber);font-size:.85rem;font-weight:600;display:none;margin:6px 0 0}
.err-msg.show{display:block}
.ok-msg{display:none;background:#fff7cc;border:1px solid #ffe27a;border-radius:10px;padding:12px 14px;font-weight:600;margin-top:14px}
.ok-msg.show{display:block}
/* sliders: arrows flank the sliding boxes, left and right, level with the cards, with space, never overlapping */
.slider-row{display:flex;align-items:center;gap:28px}
.slider-row .viewport{flex:1;min-width:0;overflow:hidden}
.side-btn{flex:0 0 46px;width:46px;height:46px;border-radius:50%;border:0;background:#111;color:#fff;font-size:1.3rem;cursor:pointer}
.side-btn:hover{background:#333}
.track{display:flex;gap:16px;transition:transform .6s ease;will-change:transform}
.tool{flex:0 0 calc((100% - 48px)/4);background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 18px;text-align:center}
.tool img{width:96px;height:96px;object-fit:contain;margin-bottom:12px;filter:grayscale(1);opacity:.55;transition:filter .25s ease,opacity .25s ease}
.tool h3{font-size:1.1rem}.tool p{font-size:.86rem;color:var(--mut);margin:0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid3>.card{display:flex;flex-direction:column}.grid3>.card>p{flex:1}.grid3>.card .btn{margin-top:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px}
.card,.tool,.who-box,.city{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover,.card:focus-within,.tool:hover,.who-box:hover,.who-box:focus-within,.city:hover,.city:focus-within{transform:translateY(-6px);box-shadow:0 16px 32px rgba(0,0,0,.12);border-color:var(--yellow)}
.card h3{font-size:1.12rem}
.pain .card{border-top:5px solid var(--yellow)}
.pain .card p{color:var(--mut)}
.svc .card{display:flex;flex-direction:column}
.svc .card h3 a{color:inherit;text-decoration:none}
.svc .card h3 a:hover{color:#8a6d00}
.svc .card p{flex:1}
.svc .tag{display:inline-flex;align-items:center;background:#111;color:#fff;border:1px solid #111;border-radius:20px;padding:4px 12px;font-size:.78rem;font-weight:600;margin-bottom:10px;opacity:0;transform:translateY(-4px);transition:opacity .25s ease,transform .25s ease}
.svc .card:hover .tag,.svc .card:focus-within .tag{opacity:1;transform:translateY(0)}
@media(hover:none){.svc .tag{opacity:1;transform:none}}
.svc .card .btn{margin-top:16px;text-align:center;padding:11px 18px}
.icon{width:52px;height:52px;border-radius:14px;background:#fff7cc;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.icon svg{width:28px;height:28px;stroke:#111;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.why-grid{display:block}
.why-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.why-img img{width:100%;height:auto;border-radius:16px;background:#fff;padding:14px;border:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{background:#111;color:#fff;border-radius:14px;padding:24px}
.step{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease;border:1px solid #262626}
.step:hover{transform:translateY(-8px);background:#1e1e1e;border-color:var(--yellow);box-shadow:0 18px 36px rgba(255,200,0,.16)}
.step .num{transition:transform .25s ease}
.step:hover .num{transform:scale(1.18)}
.step .num{font-family:Poppins;font-size:2.4rem;font-weight:800;color:var(--yellow)}
.step p{color:#dcdcd4}
.cta-band{background:var(--yellow);border-radius:18px;padding:36px;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta-band h2{margin:0}
.who-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.who-box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;text-align:center}
.who-box h3{font-size:.98rem;margin:0}
.who-box .icon{margin:0 auto 10px}
.citygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.city{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column}
.city h3{margin-bottom:6px}.city p{color:var(--mut);flex:1}
.city .btn{margin-top:14px;text-align:center;padding:11px 18px}
.pf{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.showcase-img{height:150px;border-radius:10px;background:linear-gradient(135deg,#222,#444);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;margin-bottom:14px;text-align:center;padding:12px}
.showcase-img b{font-family:Poppins}
.showcase-img span{font-size:.8rem;color:#e8e8e8}
.pf .card .badge2{display:inline-block;background:#111;color:var(--yellow);font-size:.72rem;font-weight:700;letter-spacing:.06em;padding:4px 10px;border-radius:20px;margin-bottom:10px}
.price{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.plan:hover,.plan:focus-within{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,.14);border-color:var(--yellow)}
.plan .btn{transition:background .2s ease,transform .2s ease}
.plan .btn:hover{background:#f0b800;transform:translateY(-2px)}
.pop-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:#111;color:var(--yellow);font-family:Poppins;font-weight:700;font-size:.75rem;letter-spacing:.06em;padding:6px 16px;border-radius:20px;white-space:nowrap}
.plan.hot{border:3px solid var(--yellow);box-shadow:0 12px 30px rgba(0,0,0,.08)}
.plan .pname{font-family:Poppins;font-weight:700;font-size:1.25rem}
.plan .pfor{color:var(--mut);font-size:.92rem}
.plan ul{margin:16px 0;padding-left:20px;flex:1}
.plan li{margin-bottom:8px}
.plan .btn{margin-top:16px;text-align:center}
.plan .btn-note{text-align:center;color:var(--mut);font-size:.85rem;margin:10px 0 0}
.price-line{margin:14px 0 2px}.price-line .amount{font-family:Poppins;font-size:2rem;font-weight:800}.price-line .per{color:var(--mut);font-weight:600}
.review{position:relative;flex:0 0 calc((100% - 32px)/3);background:#fff;border:1px solid var(--line);border-top:5px solid var(--yellow);border-radius:14px;padding:22px;transition:transform .25s ease,box-shadow .25s ease}
.review:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(0,0,0,.12)}
.review::after{content:"\201D";position:absolute;top:2px;right:16px;font-family:Poppins;font-size:3.6rem;line-height:1;color:#ffe27a;pointer-events:none}
.review .stars{font-size:1.15rem}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#111;color:var(--yellow);font-family:Poppins;font-weight:700;margin-right:10px;vertical-align:middle}
.review .who{display:flex;align-items:center}
.review .stars{color:#e8a100;letter-spacing:2px}
.review .ind{display:inline-block;background:#eef4ff;border:1px solid #cfe0ff;border-radius:20px;padding:3px 10px;font-size:.74rem;font-weight:700;margin:8px 0}
.review .ind.sample{background:#fff1f1;border-color:#f3c2c2;color:#8a1f1f}
.review .who{font-weight:700;margin-top:12px}
.review .who span{color:var(--mut);font-weight:400}
details{border:1px solid var(--line);border-radius:12px;background:#fff;padding:18px 20px;margin-bottom:12px}
details summary{font-weight:700;font-family:Poppins;cursor:pointer}
.guides{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.guide-img{aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#111,#3a3a3a);margin-bottom:14px}
.guide-img img{width:100%;height:100%;object-fit:cover;display:block}
.guide-excerpt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.guide-read{margin-top:14px}
.guide-img span{font-size:.8rem;font-weight:400;color:#e8e8e8;display:block;margin-top:4px}
footer.site{background:#0d0d0d;color:#bdbdb4;padding:60px 0 0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:44px}
.foot-grid h4{color:#fff;font-size:1rem;margin-bottom:14px}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:9px}
.foot-grid a{color:#bdbdb4;text-decoration:none}
.foot-grid a:hover{color:var(--yellow)}
.foot-brand{font-family:Poppins;font-weight:800;font-size:1.35rem;color:#fff}
.foot-brand span{color:var(--yellow)}
.foot-about{font-size:.93rem}
.social{display:flex;gap:10px;margin-top:16px}
.social a{width:38px;height:38px;border-radius:50%;background:#222;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem}
.foot-bottom{border-top:1px solid #262626;padding:20px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.88rem}
.foot-bottom a{color:#bdbdb4;text-decoration:none}
@media(max-width:900px){.hero-grid,.grid3,.steps,.pf,.price,.guides,.citygrid,.foot-grid,.why-grid{grid-template-columns:1fr 1fr}.who-grid{grid-template-columns:1fr 1fr}.tool{flex:0 0 calc((100% - 32px)/3)}.review{flex:0 0 calc((100% - 16px)/2)}h2{font-size:1.6rem}.hero h1{font-size:2.1rem}}
@media(max-width:560px){.hero-grid,.grid3,.steps,.pf,.price,.guides,.citygrid,.foot-grid,.why-grid,.why-list,.who-grid{grid-template-columns:1fr}.tool{flex:0 0 calc((100% - 16px)/2)}.review{flex:0 0 100%}nav.main{display:none}.side-btn{flex-basis:38px;width:38px;height:38px}}

/* ---- real-site additions: header nav, mobile menu ---- */
header.site .wrap{position:relative}
nav.main ul.nav-list{display:flex;gap:22px;list-style:none;margin:0;padding:0;align-items:center}
nav.main ul.nav-list a{color:#fff;text-decoration:none;font-weight:500}
nav.main ul.nav-list a:hover{color:var(--yellow)}
.has-drop{position:relative}
.has-drop>a .caret{font-size:.7rem}
.has-drop .dropdown{display:none;position:absolute;top:100%;left:0;min-width:250px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px;list-style:none;margin:6px 0 0;box-shadow:0 18px 36px rgba(0,0,0,.18);z-index:60}
.has-drop:hover .dropdown,.has-drop.open .dropdown{display:block}
.has-drop .dropdown li{margin:0}
.has-drop .dropdown a{display:block;color:#111!important;padding:9px 12px;border-radius:8px;white-space:nowrap;font-weight:500}
.has-drop .dropdown a:hover{background:#fff7cc;color:#111}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto;flex-direction:column;gap:5px}
.nav-toggle span{display:block;width:24px;height:2px;background:#fff;border-radius:2px}
@media(max-width:1200px){
  .nav-toggle{display:flex}
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:#111;padding:10px 20px 20px;box-shadow:0 24px 40px rgba(0,0,0,.35);z-index:55}
  header.site.nav-open nav.main{display:block}
  nav.main ul.nav-list{flex-direction:column;align-items:stretch;gap:0}
  nav.main ul.nav-list li{border-bottom:1px solid #262626}
  nav.main ul.nav-list a{display:block;padding:12px 4px}
  .has-drop .dropdown{position:static;display:none;box-shadow:none;border:0;background:#1c1c1c;margin:0 0 8px;padding:4px}
  .has-drop.open .dropdown{display:block}
  .has-drop .dropdown a{color:#e8e8e8!important}
  .has-drop .dropdown a:hover{background:var(--yellow);color:#111!important}
}
/* ---- final-form redesign (Nov 3 approved preview): two-column card ---- */
.form-shell{display:grid;grid-template-columns:330px 1fr;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 18px 45px rgba(0,0,0,.14)}
.form-side{background:var(--black);color:#fff;padding:36px 28px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:0;align-self:start}
.form-side .photo{width:118px;height:118px;object-fit:cover;border-radius:50%;border:4px solid var(--yellow);display:block}
.form-side h3{font-family:Poppins,sans-serif;margin:18px 0 2px;font-size:1.25rem;color:#fff}
.form-side .role{color:#cfccc0;font-size:.9rem;margin:0 0 20px}
.form-side hr{width:100%;border:0;border-top:1px solid #2c2c2c;margin:0 0 20px}
.form-side ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px;font-size:.92rem}
.form-side li{padding-left:26px;position:relative}
.form-side li:before{content:"✓";position:absolute;left:0;top:0;color:var(--yellow);font-weight:700}
.form-side .side-btn{display:block;width:100%;height:auto;font-size:1rem;line-height:1.4;text-align:center;text-decoration:none;font-weight:700;padding:12px;border-radius:10px;margin-top:10px}
.form-side .side-btn.wa{background:#22b95c;color:#fff}
.form-side .side-btn.call{border:2px solid var(--yellow);color:var(--yellow)}
.form-side .follow-label{margin:22px 0 10px;font-size:.78rem;letter-spacing:2px;text-transform:uppercase;color:#cfccc0;font-weight:700}
.form-side .social-row{display:flex;gap:10px}
.form-side .soc-btn{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none}
.form-side .soc-btn svg{width:22px;height:22px;fill:#fff;display:block}
.form-side .soc-btn.fb{background:#1877f2}
.form-side .soc-btn.yt{background:#ff0000}
.form-side .soc-btn.li{background:#0a66c2}
.form-main{padding:36px 34px}
.form-main h2{font-size:1.6rem;margin:0 0 10px}
.form-main .intro{color:var(--mut);margin:0 0 24px;line-height:1.6}
.form-main .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-main label{display:block;font-weight:700;font-size:.92rem;margin:16px 0 6px}
.form-main .frow label{margin-top:0}
.form-main input,.form-main select,.form-main textarea{width:100%;padding:13px 14px;border:1.5px solid #d8d5cb;border-radius:10px;font:inherit;background:#fcfcfa;color:#111}
.form-main textarea{min-height:110px;resize:vertical}
.form-main input:focus,.form-main select:focus,.form-main textarea:focus{border-color:var(--yellow);outline:none;box-shadow:0 0 0 3px rgba(255,196,0,.25);background:#fff}
.form-main .linkbox{display:none}
.form-main .linkbox.show{display:block}
.form-main .btn{display:block;width:100%;border:0;cursor:pointer;font:inherit;font-weight:700;background:var(--yellow);color:var(--black);padding:15px;border-radius:10px;margin-top:20px;transition:transform .15s ease,box-shadow .15s ease}
.form-main .btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.16)}
.form-main .form-note{color:var(--mut);font-size:.88rem;text-align:center;margin:14px 0 0}
.send-err{color:var(--amber);font-size:.88rem;font-weight:600;display:none;margin:10px 0 0}
.send-err.show{display:block}
@media(max-width:760px){
.form-shell{grid-template-columns:1fr}
.form-shell .form-side{flex-direction:column;align-items:flex-start;gap:12px;padding:26px 22px}
.form-side .photo{width:76px;height:76px;border-width:3px}
.form-side h3{margin:0}
.form-side hr,.form-side ul{display:none}
.form-side .side-btn{margin-top:0}
.form-main{padding:26px 22px}
.form-main .frow{grid-template-columns:1fr}
}
/* footer social SVG marks (Facebook/YouTube, added Nov 3; LinkedIn/WhatsApp real logos, Nov 6) */
.social a svg{width:19px;height:19px;fill:#fff;display:block}
.social a.soc-fb{background:#1877f2}
.social a.soc-yt{background:#ff0000}
.social a.soc-li{background:#0a66c2}
.social a.soc-wa{background:#25d366}
/* sitemap */
.sitemap-list{columns:2;column-gap:48px;list-style:none;padding:0}
.sitemap-list li{break-inside:avoid;margin-bottom:9px}
.sitemap-list a{color:var(--ink);font-weight:500;text-decoration:none}
.sitemap-list a:hover{color:#8a6d00}
@media(max-width:560px){.sitemap-list{columns:1}}
/* legacy portfolio page rules (ported from the previous stylesheet, values inlined) */
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;margin:26px 0}
.pf-card{background:#fff;border:1px solid #e8e4da;border-radius:18px;overflow:hidden;box-shadow:0 1px 2px rgba(12,12,14,.05),0 3px 10px rgba(12,12,14,.06);transition:transform .22s ease,box-shadow .22s ease}
.pf-card:hover{transform:translateY(-7px);box-shadow:0 8px 24px rgba(12,12,14,.09),0 2px 6px rgba(12,12,14,.05)}
.pf-card img{width:100%;height:auto;display:block}
.pf-card .pf-body{padding:24px}
.pf-card h3{margin:8px 0 10px;font-size:1.12rem}
.pf-card p{font-size:.95rem;color:#6d6d75}
.pf-card ul{margin:12px 0 0 18px;font-size:.9rem;color:#6d6d75}
.pf-badge{display:inline-block;background:#ffc107;color:#0c0c0e;font-size:.72rem;font-weight:800;letter-spacing:1px;padding:5px 14px;border-radius:999px;font-family:Poppins,sans-serif}
.pf-badge-result{background:#0c0c0e;color:#ffc107}
.pf-note{background:#fff7e0;border:1px solid #ecd27a;border-radius:14px;padding:20px 24px;margin:26px 0;font-size:.97rem}
.pf-slider{position:relative;overflow:hidden;aspect-ratio:2/1;background:#f7f7f7;border-bottom:1px solid #e8e4da}
.pf-track{display:flex;height:100%;width:calc(var(--n,1)*100%)}
.pf-track img{flex:0 0 calc(100%/var(--n,1));width:calc(100%/var(--n,1));height:100%;object-fit:contain;background:#fff}
.pf-card:hover .pf-track{animation:var(--slide,none) calc(var(--n,1)*2.6s) ease-in-out infinite}
@keyframes pfslide2{0.0%,28.5%{transform:translateX(-0.000%)}46.0%,74.5%{transform:translateX(-50.000%)}100%{transform:translateX(0)}}
@keyframes pfslide3{0.0%,19.0%{transform:translateX(-0.000%)}30.7%,49.7%{transform:translateX(-33.333%)}61.3%,80.3%{transform:translateX(-66.667%)}100%{transform:translateX(0)}}
@keyframes pfslide4{0.0%,14.3%{transform:translateX(-0.000%)}23.0%,37.3%{transform:translateX(-25.000%)}46.0%,60.3%{transform:translateX(-50.000%)}69.0%,83.3%{transform:translateX(-75.000%)}100%{transform:translateX(0)}}
@keyframes pfslide5{0.0%,11.4%{transform:translateX(-0.000%)}18.4%,29.8%{transform:translateX(-20.000%)}36.8%,48.2%{transform:translateX(-40.000%)}55.2%,66.6%{transform:translateX(-60.000%)}73.6%,85.0%{transform:translateX(-80.000%)}100%{transform:translateX(0)}}
@keyframes pfslide6{0.0%,9.5%{transform:translateX(-0.000%)}15.3%,24.8%{transform:translateX(-16.667%)}30.7%,40.2%{transform:translateX(-33.333%)}46.0%,55.5%{transform:translateX(-50.000%)}61.3%,70.8%{transform:translateX(-66.667%)}76.7%,86.2%{transform:translateX(-83.333%)}100%{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.pf-card:hover .pf-track{animation:none}}
/* ---- side contact buttons (Nov 3 order: exact live-site design, style.v25.css rules, mirrored: left dock on desktop, right dock on phones) ---- */
.side-menu{position:fixed;left:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:99}
.sm-btn{width:52px;height:52px;border-radius:0 14px 14px 0;display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;position:relative;box-shadow:3px 3px 14px rgba(0,0,0,.25);transition:width .18s ease,transform .18s ease}
.sm-btn:hover{text-decoration:none;transform:translateX(3px)}
.sm-ico{font-size:1.35rem;line-height:1}
.sm-label{position:absolute;left:60px;top:50%;transform:translateY(-50%);background:var(--black);color:#fff;font-size:.8rem;font-weight:700;padding:7px 13px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s ease}
.sm-btn:hover .sm-label{opacity:1}
.sm-wa{background:#22b95c;animation:waPulseL 2.8s infinite}
.sm-call{background:var(--black);border:2px solid var(--yellow);color:var(--yellow)}
.sm-li{background:#0a66c2}
@keyframes waPulseL{0%{box-shadow:3px 3px 14px rgba(0,0,0,.25),0 0 0 0 rgba(34,185,92,.45)}70%{box-shadow:3px 3px 14px rgba(0,0,0,.25),0 0 0 13px rgba(34,185,92,0)}100%{box-shadow:3px 3px 14px rgba(0,0,0,.25),0 0 0 0 rgba(34,185,92,0)}}
@keyframes waPulseR{0%{box-shadow:-3px 3px 14px rgba(0,0,0,.25),0 0 0 0 rgba(34,185,92,.45)}70%{box-shadow:-3px 3px 14px rgba(0,0,0,.25),0 0 0 13px rgba(34,185,92,0)}100%{box-shadow:-3px 3px 14px rgba(0,0,0,.25),0 0 0 0 rgba(34,185,92,0)}}
@media(max-width:760px){
.side-menu{left:auto;right:0}
.side-menu .sm-btn{width:44px;height:44px;border-radius:14px 0 0 14px;box-shadow:-3px 3px 14px rgba(0,0,0,.25)}
.side-menu .sm-btn:hover{transform:translateX(-3px)}
.side-menu .sm-label{left:auto;right:60px}
.side-menu .sm-ico{font-size:1.15rem}
.side-menu .sm-wa{animation:waPulseR 2.8s infinite}
}
/* ---- home photo hero (Nov 3, v4): approved complete-v1 hero, scoped to
   .hero-home so no other page's hero changes. Photo + 7 upright static tool
   icons, dotted ring rotating dot by dot, hover pop on icons. ---- */
.hero-home{padding:56px 20px 40px;background:#111}
.hero-home .hero-grid{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.hero-home .pill{display:inline-flex;align-items:center;gap:8px;background:#111;color:#ffc800;border:1px solid #ffc800;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;letter-spacing:.2px}
.hero-home .pill .dot{width:8px;height:8px;border-radius:50%;background:#ffc800}
.hero-home h1{font-family:Sora,Arial,sans-serif;font-size:2.7rem;line-height:1.15;margin:18px 0 14px;color:#fff}
.hero-home h1 .y{color:#ffc800}
.hero-home .lead{font-size:1.06rem;color:#d8d8d8;max-width:560px}
.hero-home .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.hero-home .btn{display:inline-block;padding:13px 24px;border-radius:10px;font-weight:700;text-decoration:none;font-size:15px}
.hero-home .btn-y{background:var(--yellow);color:#111}
.hero-home .btn-y:hover{background:#e6b400}
.hero-home .btn-o{border:2px solid #fff;color:#fff;background:transparent}
.hero-home .btn-o:hover{background:#fff;color:#111}
.hero-home .orbit-wrap{position:relative;width:490px;height:490px;margin:0 auto}
.hero-home .orbit-photo{position:absolute;inset:81px;border-radius:50%;overflow:hidden;border:5px solid var(--yellow);box-shadow:0 0 0 10px rgba(255,200,0,.12),0 24px 48px rgba(0,0,0,.45)}
.hero-home .orbit-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.hero-home .ring{position:absolute;inset:0}
.hero-home .dotring{position:absolute;left:50%;top:50%;width:424px;height:424px;transform:translate(-50%,-50%);animation:dotspin 39s steps(78) infinite;pointer-events:none}
@keyframes dotspin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hero-home .dotring{animation:none}}
.hero-home .slot{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translate(212px)}
.hero-home .orb{width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(0,0,0,.35);transform:rotate(calc(-1 * var(--a)));transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease,border-color .3s ease;cursor:pointer}
.hero-home .orb:hover{border-color:var(--yellow);box-shadow:0 0 0 5px rgba(255,200,0,.22),0 16px 30px rgba(0,0,0,.5);transform:rotate(calc(-1 * var(--a))) scale(1.18)}
.hero-home .orb img{width:40px;height:40px;object-fit:contain}
@media(max-width:900px){.hero-home{overflow-x:clip}.hero-home .hero-grid{grid-template-columns:1fr}.hero-home h1{font-size:2.1rem}.hero-home .orbit-wrap{width:340px;height:340px}.hero-home .orbit-photo{inset:54px}.hero-home .slot{transform:rotate(var(--a)) translate(154px)}.hero-home .orb{width:48px;height:48px;margin:-24px 0 0 -24px}.hero-home .orb img{width:30px;height:30px}.hero-home .dotring{width:308px;height:308px}}
/* ---- real portfolio shots (Nov 3, v4): home featured cards + About gallery ---- */
.pf-shot{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.pf-shot img{width:100%;height:auto;display:block}
.pf-real h3{margin-top:14px}
.pf-real p{font-size:.92rem}
/* ---- tools slider fix (Nov 5, v6; updated Nov 5: tool images removed on user order, cards are name+description, descriptions now visible) ---- */
.slider-row{gap:48px}
.slider-row .track{align-items:stretch}
.tool{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;align-self:stretch}
.tool img{flex:0 0 auto}
.tool h3{margin:0}
@media(max-width:560px){
.slider-row{flex-wrap:wrap;justify-content:center;gap:16px}
.slider-row .viewport{flex:1 1 100%;order:1}
.slider-row .side-btn{order:2}
}
/* ---- unified button hover animation (Nov 5, v7): one system for every button site-wide.
   Transform + box-shadow + background-color only, 0.25s ease, yellow/black only.
   No layout-affecting properties, so the animation never shifts surrounding content. ---- */
.btn,.side-btn,.plan .btn,.form-main .btn,.form-side .side-btn,.hero-home .btn-y,.hero-home .btn-o,.sm-btn{transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease,color .25s ease,border-color .25s ease}
.btn:hover,.btn:focus-visible{transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.18)}
.btn.ghost:hover,.btn.ghost:focus-visible{background:#111;color:#fff;border-color:#111}
.btn.dark:hover,.btn.dark:focus-visible{background:#000}
.plan .btn:hover,.plan .btn:focus-visible{background:#f0b800;transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.16)}
.form-main .btn:hover,.form-main .btn:focus-visible{transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.18)}
.hero-home .btn-y:hover,.hero-home .btn-y:focus-visible{background:#e6b400;transform:translateY(-2px);box-shadow:0 12px 24px rgba(255,200,0,.35)}
.hero-home .btn-o:hover,.hero-home .btn-o:focus-visible{background:#fff;color:#111;transform:translateY(-2px);box-shadow:0 12px 24px rgba(255,255,255,.25)}
.side-btn:hover,.side-btn:focus-visible{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.25)}
.sm-btn:hover,.sm-btn:focus-visible{transform:translateY(-50%) translateX(4px)}
@media (prefers-reduced-motion:reduce){
.btn,.side-btn,.plan .btn,.form-main .btn,.form-side .side-btn,.hero-home .btn-y,.hero-home .btn-o,.sm-btn{transition:none!important}
.btn:hover,.btn:focus-visible,.side-btn:hover,.side-btn:focus-visible,.plan .btn:hover,.plan .btn:focus-visible,.hero-home .btn-y:hover,.hero-home .btn-y:focus-visible,.hero-home .btn-o:hover,.hero-home .btn-o:focus-visible{transform:none!important;box-shadow:none!important}
.sm-btn:hover,.sm-btn:focus-visible{transform:translateY(-50%)!important;box-shadow:3px 3px 14px rgba(0,0,0,.25)!important}
}
/* ---- v9 home hero (Nov 5): cutout photo over rich black/gold backdrop,
   gold ring glow behind the cutout, real tool logos orbiting (as approved
   in the Home-Hero-Draft-Pose-01-Cutout draft). Overrides the v4 circle-crop
   hero rules above; appended last so it wins. ---- */
.hero-home{background:radial-gradient(900px 480px at 78% 28%,rgba(255,200,0,.30),rgba(255,200,0,0) 60%),radial-gradient(700px 420px at 88% 78%,rgba(255,200,0,.15),rgba(255,200,0,0) 62%),linear-gradient(135deg,#0a0a0a 0%,#171717 48%,#232323 100%)}
.hero-home .orbit-wrap{background:radial-gradient(circle at 50% 46%,rgba(255,200,0,.30) 0%,rgba(255,200,0,.12) 34%,rgba(255,200,0,0) 58%),repeating-radial-gradient(circle at 50% 50%,rgba(255,200,0,.20) 0 2px,transparent 2px 64px);border-radius:50%}
.hero-home .orbit-wrap::after{content:"";position:absolute;left:12%;right:12%;bottom:6px;height:26px;background:radial-gradient(ellipse at center,rgba(255,200,0,.45),rgba(255,200,0,0) 70%);filter:blur(6px);pointer-events:none}
.hero-home .orbit-photo{inset:0;border-radius:0;overflow:visible;border:0;box-shadow:none;display:flex;align-items:flex-end;justify-content:center}
.hero-home .orbit-photo img{width:auto;height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 22px 28px rgba(0,0,0,.55))}
@media(max-width:900px){.hero-home .orbit-photo{inset:0}.hero-home .orbit-photo img{height:340px}}
/* Team styles removed Nov 5 23:08 with the team section (user order:
   individual, not an agency team). No page uses those styles anymore. */
/* ---- v11 home hero rings + stats banner (Nov 5): animated dotted gold
   rings behind the cutout photo, copied from the approved
   Hero-Stats-Banner-Variations-v3 preview. Two dotted rings rotate in
   opposite directions, a soft gold glow pulses behind the person. The
   stats banner is section 2 on the home page only, D variation: yellow
   gradient band, heading, three count-up stats, no CTA, no sub-labels,
   1200px centred strip flush to the hero. ---- */
.hero-home .hero-ring{position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none}
.hero-home .hero-ring1{width:460px;height:460px;margin:-230px 0 0 -230px;border:2px dotted rgba(255,192,0,.85);animation:hero-spin 46s linear infinite}
.hero-home .hero-ring2{width:340px;height:340px;margin:-170px 0 0 -170px;border:2px dotted rgba(255,192,0,.55);animation:hero-spinrev 32s linear infinite}
.hero-home .hero-glow{position:absolute;left:50%;top:50%;width:400px;height:400px;margin:-200px 0 0 -200px;border-radius:50%;background:radial-gradient(circle,rgba(255,192,0,.30),rgba(255,192,0,0) 70%);animation:hero-pulse 5s ease-in-out infinite;pointer-events:none}
@keyframes hero-spin{to{transform:rotate(360deg)}}
@keyframes hero-spinrev{to{transform:rotate(-360deg)}}
@keyframes hero-pulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.12);opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-home .hero-ring1,.hero-home .hero-ring2,.hero-home .hero-glow{animation:none}}
@media(max-width:900px){.hero-home .hero-ring1{width:320px;height:320px;margin:-160px 0 0 -160px}.hero-home .hero-ring2{width:240px;height:240px;margin:-120px 0 0 -120px}.hero-home .hero-glow{width:280px;height:280px;margin:-140px 0 0 -140px}}
.stats-d{background:#111;color:#ffc000;padding:24px 40px;text-align:center;max-width:1200px;margin:0 auto 28px;border-radius:0 0 18px 18px}
.stats-d h2{font-size:clamp(22px,3vw,32px)}
.stats-d .row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:16px}
.stats-d .num{font-size:clamp(40px,5vw,66px);font-weight:800;line-height:1}
.stats-d .num sup{font-size:.55em}
.stats-d .lbl{margin-top:10px;font-size:16px;font-weight:700}
.stats-d .stat{background:transparent;border:0;border-radius:0;padding:0}
@media(max-width:640px){.stats-d{margin:0 16px 20px;padding:26px 16px}.stats-d .row{grid-template-columns:1fr}.stats-d .num{font-size:clamp(30px,8vw,44px)}}
/* ---- Deal pricing (Nov 5): limited-time 25% off, daily-reset timer ---- */
.deal-timer{background:#111;color:#fff;text-align:center;padding:14px 18px;border-radius:14px;margin:0 0 24px;font-size:1.08rem}
.deal-timer .deal-clock{color:#ffc000;font-variant-numeric:tabular-nums;letter-spacing:.03em}
.price-line .was{color:var(--mut);text-decoration:line-through;font-size:1.05rem;font-weight:600;margin-right:10px}
/* ---- First-project coupon (Nov 5): FIRST20, 20% off ---- */
.coupon-box{background:#ffc000;color:#111;text-align:center;padding:14px 18px;border-radius:14px;margin:24px 0 0;font-size:1.05rem}
.coupon-box .coupon-code{background:#111;color:#ffc000;border:0;border-radius:8px;padding:6px 14px;font:inherit;font-weight:800;letter-spacing:.06em;cursor:pointer}
.coupon-box .coupon-hint{font-size:.85em;opacity:.75}
/* ---- Blinking deal timer + coupon CTA (Nov 5): blink draws the eye ---- */
.deal-timer{animation:deal-pulse 2s ease-in-out infinite}
.deal-timer .deal-clock{animation:deal-blink 1s steps(2,start) infinite}
@keyframes deal-blink{0%,49%{opacity:1}50%,100%{opacity:.55}}
@keyframes deal-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,192,0,.45)}50%{box-shadow:0 0 22px 4px rgba(255,192,0,.35)}}
@media (prefers-reduced-motion:reduce){.deal-timer,.deal-timer .deal-clock{animation:none}}
.coupon-box .coupon-line{margin:0 0 12px}
.coupon-box .coupon-cta{display:inline-block;background:#111;color:#ffc000;padding:10px 22px;border-radius:10px;font-weight:800;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.coupon-box .coupon-cta:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.25)}
/* ---- Form coupon apply button (Nov 12, user order): one tap fills FIRST20
   into the form's coupon field - no copy-paste. ---- */
.coupon-apply-row{display:flex;gap:10px}
.coupon-apply-row input{flex:1;min-width:0;width:auto}
.coupon-apply-btn{flex:0 0 auto;background:#ffc000;color:#111;border:1.5px solid #ffc000;border-radius:10px;padding:13px 16px;font:inherit;font-weight:800;cursor:pointer;white-space:nowrap}
.coupon-apply-btn:hover{background:#ffd21a}
.coupon-apply-btn.applied{background:#111;color:#ffc000;border-color:#111}
.coupon-apply-btn:disabled{cursor:default}
/* ---- Client reviews grid (Nov 12, owner order): the 100 new reviews on
   location pages, most relevant first. Partial gold stars show the 4.5-5.0
   rating; photos are WebP stand-ins until real client photos arrive. ---- */
.reviews-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.reviews-grid .review{flex:none}
.avatar-photo{width:44px;height:44px;border-radius:50%;object-fit:cover;margin-right:10px;flex:0 0 auto}
.review .stars{position:relative;display:inline-block;line-height:1}
.review .stars-bg{color:#d8d5cb}
.review .stars-fg{position:absolute;left:0;top:0;overflow:hidden;color:#e8a100;white-space:nowrap}
.review .stars-num{color:#111;font-weight:800;font-size:.95rem;margin-left:8px}
.review .who .who-name{display:flex;flex-direction:column;line-height:1.35;font-weight:700;color:#111}
.review .who .who-loc{color:var(--mut);font-weight:400;font-size:.85rem}
@media(max-width:900px){.reviews-grid{grid-template-columns:1fr}}
/* ---- Author box (Nov 12, E-E-A-T): expert behind the page, before the
   final form on location, service, industry and guide pages. ---- */
.author-box{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-top:5px solid var(--yellow);border-radius:14px;padding:22px}
.author-photo{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.author-kicker{margin:0 0 4px;color:var(--mut);font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.author-name{margin:0 0 6px;font-size:1.1rem;font-weight:800}
.author-bio{margin:0;color:var(--mut)}
@media(max-width:560px){.author-box{flex-direction:column}}
/* ---- Book a Call (Calendly) section (Nov 6): inline booking on home ---- */
#book-a-call{text-align:center}
#book-a-call .calendly-inline-widget{max-width:1000px;margin:0 auto}
/* ---- Responsive fixes (Nov 6): from the mobile/tablet/desktop check ---- */
/* No sideways scroll, ever (safety net; the hero already clips at <=900px). */
html,body{overflow-x:clip}
/* Side contact rail: only where it clears the 1140px container. Below
   1280px it covered headings, cards, buttons and form fields at every
   width, so it is hidden there; WhatsApp/Call stay in the form panel,
   header and footer. */
@media(max-width:1279px){.side-menu{display:none}}
/* Prices must never split "Rs" from the number, at any width. */
.price-line{white-space:nowrap}
@media(max-width:560px){.price-line .amount{font-size:1.7rem}}
/* Watching pill: the flex container swallowed the space after the number
   ("8people") , give the number its own right margin. */
.svc .tag .wn{margin-right:5px}
/* Guide cards: the "Featured image" label ran into the title ("...Featured
   image") because the box is a flex row , stack it underneath instead. */
.guide-img{flex-direction:column}
/* Tablet pricing: 2 columns left Premium alone in a second row with a big
   empty space , stack the plans instead. */
@media(max-width:1150px){.price{grid-template-columns:1fr}}
/* Tablet Why Choose: 3 columns were narrow and cramped at 768px , 2. */
@media(max-width:900px){.why-list{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.why-list{grid-template-columns:1fr}}
/* Pain flip cards: the black back (110px icon + text + padding) is ~200px
   tall, so short fronts let it spill ~50px below the card and overlap the
   next one , give every flip card room for its back. */
.pain .flip{min-height:210px}
@media(max-width:560px){.pain .no-anim{width:90px;height:90px}.pain .flip-emoji{font-size:52px}.pain .flip{min-height:190px}}
/* Hero photo on phones: the circle cropped the face out , show the top
   (head) of the portrait instead of the middle. */
@media(max-width:900px){.hero-home .orbit-photo img{object-position:top center}}
/* Tools slider on phones: 2-per-row showed a second card cut in half ,
   one full card per view instead, logos readable. */
@media(max-width:560px){.tool{flex:0 0 100%}}
/* ---- Calendly fallback (Nov 6): shown if the embed cannot render ---- */
.calendly-fallback{margin-top:18px;text-align:center}
/* ---- Responsive fixes, round 3 (Nov 6): from the v10 re-check ---- */
/* Tablet hero (561-900px): the full-body contain treatment crops the face
   out at 768px, so show a circular headshot there instead (face, top of
   the portrait). Mobile and desktop keep the full-body photo, which
   already shows the face. */
@media(min-width:561px) and (max-width:900px){
  .hero-home .orbit-photo{border-radius:50%;overflow:hidden;border:5px solid var(--yellow);box-shadow:0 0 0 10px rgba(255,200,0,.12);display:block}
  .hero-home .orbit-photo img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:top center}
}
/* Tighter section rhythm (was 56-64px top/bottom, ~200px gaps). */
section{padding:48px 0}
/* Review slider arrows: smaller below 900px so they stop crowding the
   slider edges and the section heading. */
@media(max-width:900px){.slider-row .side-btn{flex:0 0 36px;width:36px;height:36px;font-size:1rem}}
/* ---- Responsive fixes, round 4 (Nov 6): from the v11 re-check ---- */
/* Hero <picture> must fill the photo container at every width. */
.hero-home .orbit-photo picture{display:block;width:100%;height:100%}
/* Review pill: keep the "Real Google review" label on one line so it
   never wraps to two lines on a narrow card. */
.review .ind{white-space:nowrap}
/* Working Process numbers: keep the big yellow number fully inside its
   card below 900px (it was clipped flat at the card's left edge). */
@media(max-width:900px){
  .step{overflow:visible}
  .step .num{font-size:2rem;line-height:1}
}
/* ---- Guide featured images (Nov 6): real images replace the gradient placeholder.
   Nov 7 (user order): 16:9 ratio, 2-3 line excerpt, Read More button, site-wide. ---- */
.guide-img{padding:0;overflow:hidden;aspect-ratio:16/9;border-radius:10px;height:auto;display:block}
.guide-img img{width:100%;height:100%;object-fit:cover;display:block}
.guide-excerpt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.guide-read{margin-top:14px}
.guide-hero-img{width:100%;height:auto;border-radius:14px;display:block;margin-top:24px}
/* ---- Scroll reveal (Nov 6): home animation language across all pages.
   Sections fade and rise into view as they scroll in. The home page is
   left untouched (it is the reference); every other page gets .reveal on
   its sections at build time. ---- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
/* ---- Reading progress bar (Nov 6): guide pages only. Thin yellow bar
   fixed to the top of the viewport, filled by scroll position. ---- */
.read-progress{position:fixed;top:0;left:0;height:4px;width:0;background:var(--yellow);z-index:200}
/* ---- Hero pin pulse (Nov 6): city and area pages only. A location pin
   in the hero with a pulsing ring, so the page feels tied to its place. ---- */
.hero-pin{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(255,200,0,.14);border:1px solid rgba(255,200,0,.55);font-size:22px;line-height:1;position:relative;margin:0 0 14px}
.hero-pin::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid rgba(255,200,0,.8);animation:pinPulse 2.2s ease-out infinite}
@keyframes pinPulse{0%{transform:scale(1);opacity:.9}70%{transform:scale(1.7);opacity:0}100%{transform:scale(1.7);opacity:0}}
@media (prefers-reduced-motion:reduce){.hero-pin::after{animation:none}}
/* ---- Hero pill dot blink (Nov 6): the gold dot in the hero pill blinks
   on every page, home .pill and all other pages .hero-pill. ---- */
.hero-pill .dot,.hero-home .pill .dot{animation:dotBlink 1.6s ease-in-out infinite}
@keyframes dotBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.2;transform:scale(.7)}}
@media (prefers-reduced-motion:reduce){.hero-pill .dot,.hero-home .pill .dot{animation:none}}
/* ---- Hero banner (Nov 6): the homepage hero visual (orbit rings + cutout)
   is used in the hero on every page. The laptop photo is NOT used. The
   orbit CSS already exists in the shared stylesheet; no extra rule here. ---- */
/* ---- Hero banner mobile fix (Nov 6): the lead paragraph was clipped at
   the right edge on 390px phones (visual check). Grid items must be allowed
   to shrink below content size, and the lead must not exceed its column. ---- */
.hero-grid>div{min-width:0}
.hero .lead{max-width:100%;overflow-wrap:break-word}
/* ---- Instant-call popup (Nov 6): shown 30 seconds after a visit, once
   per session. Centered card with a direct Call button. ---- */
.call-pop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:300;padding:20px}
.call-pop[hidden]{display:none}
.call-pop-card{position:relative;background:#fff;border-radius:16px;max-width:380px;width:100%;padding:30px 24px 24px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.call-pop-close{position:absolute;top:8px;right:12px;border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:#888}
.call-pop-kicker{color:#b98a00;font-weight:700;font-size:.8rem;letter-spacing:.4px;text-transform:uppercase;margin:0 0 8px}
.call-pop-card h3{margin:0 0 8px;font-size:1.35rem;color:#111}
.call-pop-text{margin:0 0 16px;color:#444}
.call-pop-btn{display:block;background:#ffc000;color:#111;font-weight:700;font-size:1.05rem;text-decoration:none;border-radius:10px;padding:13px 16px;margin:0 0 10px}
.call-pop-later{border:0;background:none;color:#888;cursor:pointer;font-size:.9rem;text-decoration:underline}
/* ---- Home guides (Nov 6, user order): 2 cards per row instead of 4.
   Mobile stays 1 per row. ---- */
.guides{grid-template-columns:repeat(2,1fr)}
@media(max-width:560px){.guides{grid-template-columns:1fr}}
.guides-more{text-align:center;margin:24px 0 0}
/* ---- About certification cards (Nov 6): subtle card treatment with a
   hover lift and a light shine sweep. Wording unchanged. ---- */
.cert-card{border:1px solid var(--line);border-radius:14px;padding:20px 24px;margin:0 0 18px;background:#fff;position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.cert-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(0,0,0,.10);border-color:var(--yellow)}
.cert-card::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,200,0,.14) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s ease;pointer-events:none}
.cert-card:hover::after{transform:translateX(120%)}
@media (prefers-reduced-motion:reduce){.cert-card::after{transition:none}}
.cert-img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:10px;margin-top:14px}
.cert-grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:stretch}
/* Custom cursor (Nov 7, user order): same as the live site. Desktop only;
   the native arrow stays visible. */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;opacity:0;transform:translate(-50%,-50%)}
.cursor-dot.show,.cursor-ring.show{opacity:1}
.cursor-dot{width:7px;height:7px;border-radius:50%;background:var(--yellow);box-shadow:0 0 10px rgba(255,209,0,.85)}
.cursor-ring{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,209,0,.6);transition:width .25s ease,height .25s ease,border-color .25s ease,opacity .3s ease,transform .2s ease}
.cursor-ring.grow{width:54px;height:54px;border-color:var(--yellow)}
.cursor-ring.down{transform:translate(-50%,-50%) scale(.78)}
/* Cart and checkout (Nov 7, user order): Buy Now / Add to Cart on pricing
   cards, floating cart button, checkout modal with Meezan Bank payment. */
.buy-row{display:flex;gap:10px;margin-top:12px}
.buy-row .btn{flex:1;padding:10px 8px;font-size:.92rem}
.btn-buy{background:var(--yellow);color:#111}
.btn-cart{background:#fff;color:#111;border:2px solid #111}
.cart-fab{position:fixed;right:16px;bottom:96px;z-index:9998;display:flex;align-items:center;gap:8px;background:#111;color:#fff;border:2px solid var(--yellow);border-radius:999px;padding:10px 16px;font-size:1rem;font-weight:700;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.cart-fab-count{background:var(--yellow);color:#111;border-radius:999px;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;padding:0 6px}
.cart-fab-count[hidden]{display:none}
.checkout-modal{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.6);display:flex;align-items:flex-start;justify-content:center;padding:24px 12px;overflow-y:auto}
.checkout-modal[hidden]{display:none}
.checkout-box{position:relative;background:#fff;border-radius:16px;max-width:520px;width:100%;padding:28px 24px;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.checkout-close{position:absolute;top:10px;right:14px;background:none;border:0;font-size:1.8rem;line-height:1;cursor:pointer;color:#666}
.checkout-box h3{margin:0 0 8px;font-size:1.4rem}
.co-sub{color:#555;margin:0 0 16px}
.co-items{list-style:none;margin:0 0 12px;padding:0}
.co-items li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #eee}
.co-item-name{flex:1;font-weight:600}
.co-item-qty{color:#666}
.co-item-price{font-weight:700;white-space:nowrap}
.co-remove{background:none;border:0;font-size:1.4rem;line-height:1;cursor:pointer;color:#c00;padding:0 4px}
.co-empty{color:#666}
.co-total{font-size:1.1rem;margin:12px 0}
.co-field{display:block;margin:12px 0;font-weight:600}
.co-field input{width:100%;margin-top:6px;padding:10px 12px;border:1px solid #ccc;border-radius:8px;font-size:1rem;box-sizing:border-box}
.co-wide{width:100%;margin-top:12px}
.co-err{color:#c00;font-weight:600;margin:8px 0}
.co-qr{display:block;width:220px;height:220px;margin:0 auto 16px}
.co-bank{border:1px solid #ddd;border-radius:12px;padding:12px 16px;margin:0 0 12px}
.co-bank p{display:flex;align-items:center;gap:8px;margin:8px 0;flex-wrap:wrap}
.co-bank span{color:#666;min-width:110px}
.co-bank strong{word-break:break-all}
.co-copy{margin-left:auto;background:#111;color:#fff;border:0;border-radius:6px;padding:4px 10px;font-size:.85rem;cursor:pointer}
.co-or{text-align:center;color:#888;margin:4px 0}
.co-send{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.btn-wa{background:#25d366;color:#fff}
.co-note{color:#666;font-size:.92rem;margin:12px 0 0}
.co-back{background:none;border:0;color:#111;text-decoration:underline;cursor:pointer;margin-top:14px;font-size:.95rem}
body.co-open{overflow:hidden}
/* Checkout coupon (Nov 7, user order): FIRST20 gives 20% off the first
   project, same as the pricing-section coupon box. */
.co-coupon{display:flex;gap:10px;align-items:flex-end;margin:12px 0 0}
.co-coupon .co-field{flex:1;margin:0}
.co-apply{padding:10px 18px;white-space:nowrap}
.co-coupon-msg{font-weight:600;margin:8px 0 0}
.co-subtotal,.co-discount{margin:6px 0;font-size:1rem}
.co-discount{color:#0a7a2f}
/* Start Your Project form pricing (Nov 7, user order): the three plans for
   the selected service, shown below the service dropdown. */
.form-pricing{border:1px solid #ddd;border-radius:12px;padding:14px 16px;margin:12px 0;background:#fffbe6}
.form-pricing[hidden]{display:none}
.form-pricing-title{font-weight:700;margin:0 0 10px}
.form-pricing-options{display:flex;flex-direction:column;gap:8px}
.form-plan{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:400}
.form-plan input{accent-color:#ffc000;width:18px;height:18px;flex:none}
/* Free Rank Checker (Nov 7, user order): tool card on /free-rank-checker/. */
.rank-tool{border:1px solid #ddd;border-radius:16px;padding:24px;background:#fff;box-shadow:0 4px 24px rgba(0,0,0,.06);margin:8px 0 24px}
.rank-tabs{display:flex;gap:8px;margin-bottom:20px}
.rank-tab{flex:1;padding:12px 10px;border:1px solid #ddd;border-radius:10px;background:#f7f7f7;font-weight:700;cursor:pointer;font-size:1rem}
.rank-tab.active{background:#111;color:#ffc000;border-color:#111}
.rank-form label{display:block;font-weight:600;margin:12px 0}
.rank-form input,.rank-form select{width:100%;margin-top:6px;padding:12px;border:1px solid #ccc;border-radius:8px;font-size:1rem;box-sizing:border-box}
.rank-form[hidden]{display:none}
.rank-intro{color:#555;margin:0 0 8px}
.rank-result{margin-top:20px}
.rank-result[hidden]{display:none}
.rank-loading{color:#555;font-weight:600}
.rank-err{color:#b00020;font-weight:600}
.rank-big{font-size:3rem;font-weight:800;margin:0;color:#111}
.rank-found-text{font-size:1.15rem}
.rank-meta{color:#555}
.rank-top-title{font-weight:700;margin:16px 0 6px}
.rank-top{margin:0 0 16px;padding-left:22px}
.rank-top li{margin:6px 0}
.rank-left{color:#666;font-size:.9rem}
.rank-limit{color:#666;font-size:.9rem;margin-top:16px}
.about-intro{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.about-photo img{display:block;width:100%;height:auto;border-radius:16px}
.about-text h2{margin-top:0}
.about-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:32px 0}
.about-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;transition:background .3s,color .3s,transform .3s,box-shadow .3s,border-color .3s}
.about-card:hover{background:#111;color:#fff;transform:translateY(-6px);box-shadow:0 14px 28px rgba(0,0,0,.25);border-color:#ffc000}
.about-card:hover h3{color:#ffc000}
.about-card h3{margin:0 0 10px;font-size:22px}
.about-card p{margin:0}
.about-card p+p{margin-top:10px}
.about-box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;margin:32px 0}
.about-box h2{margin-top:0}
.about-box p+p{margin-top:10px}
@media(max-width:768px){.about-intro{grid-template-columns:1fr}.about-text{order:1}.about-photo{order:2}.about-cards{grid-template-columns:1fr}}