/* =====================================================================
AMJAM Solutions: one stylesheet for the whole site.
Every page loads it:
1. SHARED colours, base, buttons, header/menu, sections, forms, FAQ,
COMMON CLASSES (grids, cards, pills, tags, text, spacing...),
contact cards, footer, WhatsApp, reveals, reduced motion
2. HOME index.html sections
3. CONTACT contact.html sections
4. ABOUT about.html sections
5. BLOG blogs.html sections (the topic filter bar is reused by portfolio.html)
6. PORTFOLIO portfolio.html sections
7. SERVICES services/*.html (overview and the service pages)
8. READING blog articles, privacy policy, terms (.doc-layout, .toc, .prose)
9. UTILITY thank-you.html, 404.html
10. CAREERS, FAQS careers.html, faqs.html (+ shared calculator layout)
11. FREE TOOLS free-tools/*.html, drawn by assets/js/tools/engine.js
Add new page sections at the end under their own heading.
===================================================================== */
/* =====================================================================
1. SHARED
===================================================================== */
:root{
--white:#FFFFFF; --mist:#F4F7FC; --ink:#0B1320; --slate:#4B5871; --line:#E2E8F1;
--cobalt:#2F58E8; --cobalt-soft:#EAF0FF; --amber:#F59E0B; --amber-text:#B45309; --mint:#0E9F6E; --danger:#D92D20;
--font:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
--header-h:72px; --gutter:clamp(16px,4vw,40px); --r:16px;
--ease:cubic-bezier(.2,.8,.2,1);
--heading-weight:600; /* weight of all page headings: 500 lighter, 700-800 heavier */
color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
img,svg,video,canvas{max-width:100%}
[hidden]{display:none!important}
html{scroll-padding-top:calc(var(--header-h) + 16px)}
html.lock{overflow:hidden}
body{background:var(--white);color:var(--ink);font-family:var(--font);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
h1,h2,h3{line-height:1.05;margin:0;text-wrap:balance;letter-spacing:-.035em}
p{margin:0}
a{color:var(--cobalt)}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:8px}
.container{max-width:76rem;margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt)}
.eyebrow::before{content:"";width:18px;height:2px;background:currentColor;border-radius:2px}
.skip{position:absolute;left:var(--gutter);top:-100px;z-index:100;background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:8px;font-weight:600;text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 8px)}
/* scroll progress */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:linear-gradient(90deg,var(--cobalt),var(--amber));transform-origin:0 50%;transform:scaleX(0)}
/* buttons */
.btn{position:relative;overflow:hidden;font:600 1rem/1 var(--font);min-height:52px;padding:0 1.5rem;border-radius:999px;text-decoration:none;border:1.5px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;cursor:pointer;transition:background .25s,border-color .25s,box-shadow .25s,color .25s;will-change:transform}
.btn-primary{background:var(--cobalt);color:#fff;box-shadow:0 10px 30px -10px rgba(47,88,232,.6)}
.btn-primary:hover{background:#2448CC;box-shadow:0 16px 36px -12px rgba(47,88,232,.75)}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:rgba(255,255,255,.8)}
.btn-ghost:hover{border-color:var(--ink)}
.btn svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
/* header + nav */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;border-bottom:1px solid transparent;transition:transform .4s var(--ease),border-color .3s,box-shadow .3s}
/* The blur lives on a pseudo-element: backdrop-filter on the header itself would trap the fixed mobile menu inside the 72px bar. */
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.78);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px)}
.site-header[data-open="true"]::before{background:var(--white)}
.site-header.scrolled{border-color:var(--line);box-shadow:0 8px 30px -18px rgba(11,19,32,.25)}
.site-header.hide{transform:translateY(-110%)}
.bar{height:var(--header-h);display:flex;align-items:center;gap:1.5rem}
/* Brand: the client's logo file (assets/img/logo.png) shown unmodified, only scaled */
.brand{display:flex;align-items:center;text-decoration:none;margin-right:auto;flex:none}
.brand .logo{display:block;width:auto;height:62px;transition:transform .4s var(--ease)}
.brand:hover .logo{transform:translateY(-2px)}
@keyframes spin{to{transform:rotate(360deg)}}
.nav{display:flex;align-items:center;gap:1.5rem}
.nav-list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:.15rem}
.nav-list > li > a,.sub-btn{position:relative;display:inline-flex;align-items:center;gap:.35rem;min-height:44px;padding:0 .85rem;border-radius:10px;color:var(--ink);text-decoration:none;font:500 .95rem/1 var(--font);background:none;border:0;cursor:pointer}
.nav-list > li > a::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:8px;height:2px;background:var(--cobalt);border-radius:2px;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav-list > li > a:hover::after{transform:scaleX(1);transform-origin:left}
.sub-btn:hover,.sub-btn[aria-expanded="true"]{background:var(--mist)}
.sub-btn svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.sub-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.has-sub{position:relative}
.sub{position:absolute;top:calc(100% + 12px);left:-1rem;width:min(36rem,92vw);background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:.75rem;box-shadow:0 30px 60px -20px rgba(11,19,32,.25);animation:drop .35s var(--ease)}
@keyframes drop{from{opacity:0;transform:translateY(-8px) scale(.98)}}
.sub ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.15rem}
.sub a{display:grid;gap:.1rem;padding:.7rem .8rem;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem;transition:background .2s}
.sub a:hover{background:var(--cobalt-soft)}
.sub a span{font-size:.8rem;font-weight:400;color:var(--slate)}
.sub .all{display:flex;justify-content:space-between;margin-top:.4rem;border-top:1px solid var(--line);padding-top:.85rem;border-radius:0;color:var(--cobalt)}
.menu-btn{display:none;min-height:44px;padding:0 1rem;border-radius:999px;border:1.5px solid var(--line);background:var(--white);color:var(--ink);font:600 .95rem var(--font);cursor:pointer;align-items:center;gap:.55rem}
.menu-btn .bars{width:18px;height:12px;position:relative}
.menu-btn .bars::before,.menu-btn .bars::after{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease),top .3s var(--ease)}
.menu-btn .bars::before{top:1px}.menu-btn .bars::after{top:9px}
.site-header[data-open="true"] .menu-btn .bars::before{top:5px;transform:rotate(45deg)}
.site-header[data-open="true"] .menu-btn .bars::after{top:5px;transform:rotate(-45deg)}
@media (max-width:899px){
.menu-btn{display:inline-flex}
.nav{display:none;position:fixed;left:0;right:0;bottom:0;top:calc(var(--header-h) + env(safe-area-inset-top,0px));background:var(--white);flex-direction:column;align-items:stretch;gap:1.5rem;padding:1rem var(--gutter) calc(2rem + env(safe-area-inset-bottom,0px));overflow-y:auto}
.site-header[data-open="true"] .nav{display:flex;animation:drop .35s var(--ease)}
.site-header[data-open="true"] .nav-list > li{animation:rise .5s var(--ease) both;animation-delay:calc(var(--i,0) * 60ms)}
.nav-list{flex-direction:column;align-items:stretch;gap:0}
.nav-list > li{border-bottom:1px solid var(--line)}
.nav-list > li > a,.sub-btn{width:100%;justify-content:space-between;min-height:60px;font-size:1.2rem;font-weight:600;padding:0 .25rem}
.nav-list > li > a::after{display:none}
.sub{position:static;width:auto;box-shadow:none;border:0;padding:0 0 1rem}
.sub ul{grid-template-columns:1fr}
.nav-cta{width:100%}
}
.nav-list a[aria-current="page"]{color:var(--cobalt)}
.nav-list > li > a[aria-current="page"]::after{transform:scaleX(1)}
.nav-phone{display:none}
@media (max-width:899px){
.nav-phone{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;border:1.5px solid var(--line);border-radius:999px;color:var(--ink);font-weight:600;text-decoration:none}
.nav-phone svg{width:18px;height:18px;color:var(--cobalt)}
}
/* entrance helpers */
.fade-up{animation:rise .9s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
/* click ripple on buttons */
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:ripple .65s ease-out forwards;pointer-events:none}
.btn-ghost .ripple,.icon-btn .ripple{background:rgba(47,88,232,.18)}
@keyframes ripple{to{transform:scale(1);opacity:0}}
/* sections */
.section{padding-block:clamp(4.5rem,9vw,7.5rem)}
.section-head{display:grid;gap:1rem;max-width:46rem;margin-bottom:clamp(2.25rem,5vw,3.5rem)}
.section-head h2{font-size:clamp(2.1rem,4.8vw,3.5rem);font-weight:var(--heading-weight)}
.section-head p{color:var(--slate);font-size:1.1rem;max-width:60ch}
.section-head.center{margin-inline:auto;text-align:center;justify-items:center}
.section-head.center p{margin-inline:auto}
/* form fields */
.field{display:grid;gap:.4rem;align-content:start}
.field .err:empty{display:none}
.field label{font-weight:600;font-size:.925rem}
.field label span{color:var(--slate);font-weight:400}
.field input,.field select,.field textarea{font:inherit;color:var(--ink);background:var(--white);border:1.5px solid var(--line);border-radius:12px;min-height:50px;padding:.7rem .95rem;width:100%;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:110px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#C7D0DE}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 4px rgba(47,88,232,.15)}
.field [aria-invalid="true"]{border-color:var(--danger);animation:shake .4s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.field .err{color:var(--danger);font-size:.85rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}
.form-status{font-size:.95rem;min-height:1.5em}
.form-status:empty{min-height:0;margin:0}
.form-status.ok{color:var(--mint)}
.form-status.bad{color:var(--danger)}
.fine{font-size:.8rem;color:var(--slate)}
/* FAQ accordion */
:root{interpolate-size:allow-keywords}
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:899px){.faq-grid{grid-template-columns:1fr}}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.35rem 0;font-weight:600;font-size:1.1rem;cursor:pointer;letter-spacing:-.01em;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--cobalt)}
.pm{position:relative;flex:none;width:32px;height:32px;border-radius:50%;background:var(--cobalt-soft);transition:transform .45s var(--ease),background .3s}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:2px;background:var(--cobalt);translate:-50% -50%;transition:background .3s}
.pm::after{rotate:90deg}
.faq details[open] .pm{transform:rotate(135deg);background:var(--cobalt)}
.faq details[open] .pm::before,.faq details[open] .pm::after{background:#fff}
.faq details::details-content{block-size:0;overflow-y:clip;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq .ans{padding-bottom:1.35rem;color:var(--slate);max-width:62ch}
/* contact cards and office line */
.direct{margin-top:2rem;display:grid;gap:.75rem;max-width:28rem}
.direct-item{display:flex;align-items:center;gap:.9rem;padding:.85rem 1.1rem;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.88);color:var(--ink);text-decoration:none;transition:border-color .25s,transform .35s var(--ease),box-shadow .35s}
.direct-item:hover{border-color:var(--cobalt);transform:translateX(4px);box-shadow:0 16px 30px -22px rgba(47,88,232,.6)}
.direct-item .ic{width:42px;height:42px;flex:none;border-radius:12px;background:var(--cobalt-soft);color:var(--cobalt);display:grid;place-items:center}
.direct-item .ic svg{width:20px;height:20px}
.direct-item.wa-item .ic{background:#E3F8EC;color:#128C4A}
.direct-item small{display:block;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.direct-item b{display:block;font-weight:600;overflow-wrap:anywhere}
.office{display:flex;align-items:center;gap:.5rem;color:var(--slate);font-size:.925rem;margin-top:.25rem}
.office svg{width:18px;height:18px;color:var(--amber-text);flex:none}
/* footer */
.site-footer{background:var(--ink);color:#AEB8CA;padding-block:4rem calc(2rem + env(safe-area-inset-bottom,0px));font-size:.925rem}
.site-footer .brand{display:inline-flex;padding:.6rem .9rem;background:#fff;border-radius:14px}
.site-footer .brand .logo{height:84px}
.foot-grid ul.foot-social{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem}
.foot-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#1B2638;color:#C9D3E4;transition:background .2s,color .2s,transform .2s}
.foot-social a:hover{background:#0EB0E1;color:#fff;transform:translateY(-2px)}
.foot-social svg{width:20px;height:20px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:2rem}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid > :first-child{grid-column:1/-1}}
.foot-grid h2{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;font-weight:600;margin-bottom:1rem}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.foot-grid a{color:#AEB8CA;text-decoration:none;transition:color .2s}
.foot-grid a:hover{color:#fff}
.site-footer :focus-visible{outline-color:var(--amber)}
.foot-base{margin-top:3rem;padding-top:1.5rem;border-top:1px solid #253146;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.85rem}
.foot-base a{color:#AEB8CA}
.foot-meaning{margin-top:.5rem;max-width:32ch;font-size:.85rem}
.foot-meaning b{color:#E2E8F2;font-weight:600}
.foot-gst{margin-left:.75rem;white-space:nowrap}
/* Phones: GSTIN on its own line, and room under the footer so the call and WhatsApp buttons never cover the legal links */
@media (max-width:600px){.foot-gst{display:block;margin:.25rem 0 0}.site-footer{padding-bottom:calc(6rem + env(safe-area-inset-bottom,0px))}}
.big-word{font-size:clamp(4rem,17vw,15rem);font-weight:800;letter-spacing:-.06em;line-height:.85;margin-top:3rem;color:#172136;user-select:none;display:flex}
.big-word span{display:inline-block;transition:transform .6s var(--ease),color .4s}
.big-word span:hover{transform:translateY(-10%) rotate(-4deg);color:var(--cobalt)}
.big-word span:nth-child(even):hover{transform:translateY(-10%) rotate(4deg);color:var(--amber)}
.foot-grid .foot-contact{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.6rem}
.foot-contact li{display:flex;align-items:center;gap:.6rem}
.foot-contact svg{width:16px;height:16px;flex:none;color:#9DB4FF}
/* avatar (testimonials, WhatsApp panel) */
.avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--cobalt),#7C5CFF)}
/* WhatsApp button + chat preview */
.wa{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:75;display:grid;justify-items:end;gap:.75rem}
.wa-btn{position:relative;width:60px;height:60px;border-radius:50%;border:0;background:#25D366;color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 30px -10px rgba(37,211,102,.7);transition:transform .3s var(--ease)}
.wa-btn:hover{transform:scale(1.08)}
.wa-btn::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:waPulse 2.4s ease-out infinite}
@keyframes waPulse{from{transform:scale(1);opacity:.8}to{transform:scale(1.6);opacity:0}}
.wa-btn svg{width:30px;height:30px}
.wa-panel{width:min(20rem,calc(100vw - 32px));background:var(--white);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(11,19,32,.35);transform-origin:100% 100%;animation:waIn .4s var(--ease)}
@keyframes waIn{from{opacity:0;transform:scale(.85) translateY(10px)}}
.wa-top{display:flex;align-items:center;gap:.75rem;background:#075E54;color:#fff;padding:.9rem 1rem}
.wa-top .avatar{width:40px;height:40px;font-size:.85rem}
.wa-top b{display:block;font-size:.95rem}
.wa-top span{font-size:.78rem;color:#C9EDE6}
.wa-top button{margin-left:auto;width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;cursor:pointer;font-size:1rem}
.wa-body{padding:1rem;background:#ECE5DD;display:grid;gap:.9rem}
.wa-msg{justify-self:start;max-width:90%;background:#fff;border-radius:0 12px 12px 12px;padding:.65rem .85rem;font-size:.9rem;box-shadow:0 1px 1px rgba(0,0,0,.08);animation:rise .5s .25s var(--ease) both}
.wa-go{justify-self:stretch;display:flex;justify-content:center;align-items:center;gap:.5rem;min-height:46px;border-radius:999px;background:#25D366;color:#fff;font-weight:600;text-decoration:none}
html.lock .wa{display:none}
/* Call button (bottom left, mirrors the WhatsApp button) */
.call-btn{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:75;width:60px;height:60px;border-radius:50%;background:var(--cobalt);color:#fff;display:grid;place-items:center;text-decoration:none;box-shadow:0 14px 30px -10px rgba(47,88,232,.7);transition:transform .3s var(--ease)}
.call-btn:hover{transform:scale(1.08)}
.call-btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.call-btn::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--cobalt);animation:waPulse 2.4s ease-out infinite}
.call-btn svg{width:26px;height:26px}
.call-tip{position:absolute;left:calc(100% + 12px);top:50%;transform:translate(-6px,-50%);white-space:nowrap;background:var(--ink);color:#fff;font-size:.82rem;font-weight:600;padding:.45rem .75rem;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
@media (hover:hover){.call-btn:hover .call-tip,.call-btn:focus-visible .call-tip{opacity:1;transform:translate(0,-50%)}}
@media (prefers-reduced-motion:reduce){.call-btn::before{animation:none;opacity:0}}
@media print{.call-btn{display:none}}
html.lock .call-btn{display:none}
/* Quick enquiry: vertical tab on the right edge + popup form */
.qe-tab{position:fixed;right:0;top:50%;z-index:74;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;padding:1rem .6rem;border:0;border-radius:0 12px 12px 0;background:var(--cobalt);color:#fff;font-family:inherit;font-size:.9rem;font-weight:600;line-height:1;letter-spacing:.02em;cursor:pointer;box-shadow:0 10px 24px -8px rgba(47,88,232,.6);transition:padding .2s var(--ease),background .2s}
.qe-tab:hover{padding-left:.85rem;background:#2448C8}
.qe-tab:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.qe-tab[hidden]{display:none}
html.lock .qe-tab{display:none}
/* Shared bottom enquiry (partials/enquiry.html): home "book" design with the form on the left on desktop */
@media (min-width:900px){.book-flip .contact-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.book-flip .contact-grid > form{order:-1}}
/* Write a review: star picker (radios in reverse order so hover and checked fill the stars to the left), consent, thank-you */
.star-field{border:0;margin:0;padding:0;min-width:0}
.star-field legend{padding:0;margin-bottom:.4rem;font-weight:600;font-size:.95rem}
.star-field legend span{font-weight:400;color:var(--slate)}
.star-input{display:inline-flex;flex-direction:row-reverse;gap:.2rem;width:max-content;justify-self:start}
.star-input input{position:absolute;opacity:0;width:1px;height:1px}
.star-input label{width:44px;height:44px;display:grid;place-items:center;cursor:pointer;border-radius:10px;font-size:0}
.star-input label::before{content:"★";font-size:2.1rem;line-height:1;color:var(--line);transition:color .15s,transform .15s}
.star-input label:hover::before,.star-input label:hover~label::before,.star-input input:checked~label::before{color:var(--amber)}
.star-input label:hover::before{transform:scale(1.12)}
.star-input input:focus-visible+label{outline:3px solid var(--cobalt);outline-offset:2px}
.star-input[aria-invalid="true"] label::before{color:#F3C1BD}
.star-word{display:block;margin-top:.2rem;color:var(--slate);font-size:.95rem}
.star-field .err{display:block}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem;color:var(--slate);cursor:pointer}
.consent input{margin-top:.25rem;width:18px;height:18px;flex:none;accent-color:var(--cobalt)}
.review-done{display:grid;justify-items:start;gap:.85rem}
.review-done:focus{outline:none}
.review-done h2{font-size:1.5rem}
.review-done p{margin:0;color:var(--slate)}
.review-done-ic{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#E7F7F0;color:var(--mint)}
.review-done-ic svg{width:26px;height:26px}
.review-done .channel-link{font-weight:600}
.review.is-site{border-color:#CFDBFF}
/* Industrial training (training/*.html, generated by amjam-tools/gen-training.php) */
.tr-hero-card{width:min(100%,26rem);justify-self:center;display:grid;gap:1rem;padding:1.5rem;border:1px solid var(--line);border-radius:24px;background:var(--white);box-shadow:0 40px 80px -40px rgba(47,88,232,.45)}
.tr-hero-label{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cobalt)}
.tr-hero-card ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.tr-hero-card li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:.7rem;align-items:center;font-size:.95rem;color:var(--slate)}
.tr-hero-card li b{display:block;color:var(--ink);font-size:.82rem;letter-spacing:.04em;text-transform:uppercase}
.tr-ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--cobalt-soft);color:var(--cobalt);font-weight:700;font-size:.85rem}
.tr-hero-foot{margin:0;padding-top:.9rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:.9rem;color:var(--slate)}
.tr-status{display:inline-block;padding:.2rem .65rem;border-radius:999px;font-size:.78rem;font-weight:600;background:var(--mist);color:var(--slate);border:1px solid var(--line)}
.tr-status.is-sub{background:#FFF7E0;color:#8A5A00;border-color:#F5E1A8}
.tr-status.is-rev{background:#FFEDE3;color:#B4470E;border-color:#F7CDB5}
.tr-status.is-ok{background:#E7F7F0;color:#0B7A55;border-color:#BDE8D5}
.tr-status-row{display:flex;flex-wrap:wrap;gap:.4rem;margin:.25rem 0 0}
.tr-promise-line{margin:0;text-align:center;font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:700;letter-spacing:-.02em;text-wrap:balance;color:var(--slate)}
.tr-promise-line b{color:var(--ink)}
.tr-card{display:grid;gap:.75rem;align-content:start}
.tr-card h3 a{color:inherit;text-decoration:none}
.tr-card h3 a:hover{color:var(--cobalt)}
.tr-card .btn{justify-self:start;margin-top:.25rem}
.tr-meta{margin:0;display:flex;gap:.6rem;align-items:center;font-size:.85rem;color:var(--slate)}
.tr-days{display:inline-block;padding:.2rem .65rem;border-radius:999px;background:var(--cobalt-soft);color:var(--cobalt);font-weight:700;font-size:.8rem}
.tr-coming{margin:2rem 0 .5rem;color:var(--ink)}
.tr-coming-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.tr-coming-list li{padding:.35rem .8rem;border:1px dashed #C9D3E3;border-radius:999px;color:var(--slate);font-size:.9rem;background:var(--white)}
.tr-plan{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));gap:1rem}
.tr-day{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start;padding:1.15rem 1.25rem;border:1px solid var(--line);border-radius:18px;background:var(--white)}
.tr-day-n{padding:.3rem .65rem;border-radius:10px;background:var(--ink);color:#fff;font-size:.8rem;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.tr-day h3{margin:0 0 .35rem;font-size:1.02rem}
.tr-day ul{margin:0;padding-left:1.1rem;color:var(--slate);font-size:.92rem;display:grid;gap:.2rem}
.tr-out{margin:.6rem 0 0;font-size:.9rem;color:var(--ink)}
.tr-out b{color:var(--mint)}
.tr-note{padding:.85rem 1rem;border-radius:14px;background:#FFF7E6;color:var(--amber-text);font-size:.95rem}
.tr-feedback dl{display:grid;gap:.6rem;margin:.5rem 0 0}
.tr-feedback dl div{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.75rem;padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.tr-feedback dt{font-weight:600;font-size:.88rem;color:var(--slate)}
.tr-feedback dd{margin:0}
.tr-rubric{width:100%;border-collapse:collapse}
.tr-rubric th,.tr-rubric td{padding:.6rem .75rem;border-bottom:1px solid var(--line);text-align:left;font-variant-numeric:tabular-nums}
.tr-rubric th{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.tr-rubric td:last-child,.tr-rubric th:last-child{text-align:right}
.tr-rubric .tr-pass td{font-weight:700;border-bottom:0;color:var(--cobalt)}
.tr-finish{font-size:1.05rem;color:var(--ink)!important;line-height:1.45}
.tr-other{display:grid;gap:.4rem;text-decoration:none;color:inherit}
.tr-other:hover{border-color:var(--cobalt)}
.tr-other .tr-days{justify-self:start}
.tr-needs{margin:0;padding-left:1.1rem;display:grid;gap:.35rem;color:var(--slate)}
@media (max-width:600px){.tr-feedback dl div{grid-template-columns:1fr;gap:.15rem}}
.tr-week{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.6rem}
.tr-wd{display:grid;gap:.35rem;align-content:start;padding:1rem .9rem;border:1px solid var(--line);border-radius:16px;background:var(--white);font-size:.88rem;color:var(--slate)}
.tr-wd b{color:var(--ink);font-size:.95rem;line-height:1.25}
.tr-wd-day{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.tr-wd.is-live{background:var(--cobalt-soft);border-color:#C9D7FF}
.tr-wd.is-live .tr-wd-day{color:var(--cobalt)}
.tr-wd.is-rest{background:var(--mist);border-style:dashed}
.tr-week-key{margin:1rem 0 0;font-size:.88rem;color:var(--slate);display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.tr-key{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid var(--line);background:var(--white);vertical-align:middle}
.tr-key.is-live{background:var(--cobalt-soft);border-color:#C9D7FF}
@media (max-width:960px){.tr-week{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr))}}
.tr-compare th[scope=row]{font-weight:600;color:var(--ink);text-transform:none;letter-spacing:0;font-size:.95rem}
.tr-compare td:last-child,.tr-compare th:last-child{text-align:left}
.tr-compare td:nth-child(2){color:var(--slate)}
.tr-compare td:last-child{color:var(--ink);font-weight:600}
.tr-compare thead th:last-child{color:var(--cobalt)}
.tr-report{margin:0;padding-left:1.4rem;columns:2 12rem;column-gap:2rem;color:var(--slate)}
.tr-report li{margin-bottom:.35rem;break-inside:avoid}
.tr-chips-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:1.5rem;align-items:center;padding:1.5rem;border:1px solid var(--line);border-radius:20px;background:var(--white)}
.tr-chips-box h2{margin:0 0 .3rem}
.tr-chips-box p{margin:0}
@media (max-width:760px){.tr-chips-box{grid-template-columns:1fr}}
.tr-tools-h{margin:1.25rem 0 .6rem}
.tr-cat{margin:2.25rem 0 1rem;font-size:1.25rem;display:flex;align-items:baseline;gap:.6rem}
.tr-cat:first-of-type{margin-top:0}
.tr-cat span{font-size:.85rem;font-weight:500;color:var(--slate)}
.tr-consult-band{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.5rem;align-items:center;padding:1.4rem 1.6rem;border-radius:22px;background:var(--ink);color:#fff}
.tr-consult-band h2{color:#fff;margin:0 0 .3rem}
.tr-consult-band p{margin:0;color:#AEB8CA}
.tr-price{display:block;font-size:2.2rem;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.tr-price-per{display:block;font-size:.8rem;color:#AEB8CA;margin-top:.2rem}
@media (max-width:760px){.tr-consult-band{grid-template-columns:1fr;gap:1rem}.tr-consult-band .btn{justify-self:start}}
/* Coupon box (product page, consultation form) */
.coupon-box summary{cursor:pointer;font-weight:600;color:var(--cobalt);font-size:.95rem}
.coupon-in{display:flex;gap:.5rem;margin-top:.6rem}
.coupon-in input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.05em}
.coupon-ok{display:block;color:#0B7A55;font-weight:600;font-size:.9rem;margin-top:.3rem}
/* Careers: resume upload */
.resume-drop{position:relative;display:flex;align-items:center;gap:.8rem;padding:1rem 1.1rem;border:1.5px dashed #B9C6E6;border-radius:14px;background:var(--white);cursor:pointer;transition:border-color .2s,background .2s}
.resume-drop:hover,.resume-drop.is-over{border-color:var(--cobalt);background:var(--cobalt-soft)}
.resume-drop.has-file{border-style:solid;border-color:#BDE8D5;background:#F3FBF7}
.resume-drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.resume-drop input:focus-visible + .resume-ic{outline:3px solid var(--cobalt);outline-offset:2px}
.resume-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--cobalt-soft);color:var(--cobalt)}
.resume-ic svg{width:22px;height:22px}
.resume-text{font-size:.95rem;color:var(--slate);overflow-wrap:anywhere}
.resume-text b{color:var(--ink)}
.resume-field .fine{margin-top:.35rem;display:block}
/* Careers: open positions (filled by assets/js/careers.js from Admin > Job openings) */
.jobs-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem}
.jobs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:1rem;align-items:start}
.jobs-empty{grid-column:1/-1;padding:2rem 1.5rem;text-align:center;color:var(--slate);border:1px dashed #C9D3E3;border-radius:20px;background:var(--white)}
.job-card{display:grid;gap:.6rem;padding:1.35rem;border:1px solid var(--line);border-radius:20px;background:var(--white);transition:border-color .2s,box-shadow .3s}
.job-card:hover{border-color:#C9D7FF;box-shadow:0 24px 40px -30px rgba(47,88,232,.45)}
.job-card[hidden]{display:none}
.job-card h3{margin:0}
.job-head{display:flex;flex-wrap:wrap;gap:.4rem .7rem;align-items:center}
.job-type{padding:.2rem .65rem;border-radius:999px;background:var(--cobalt-soft);color:var(--cobalt);font-size:.78rem;font-weight:700}
.job-meta{font-size:.85rem;color:var(--slate)}
.job-summary{margin:0;color:var(--slate)}
.job-more summary{cursor:pointer;font-weight:600;color:var(--cobalt);font-size:.95rem}
.job-more .check-list{margin-top:.6rem}
.job-fit-h{margin:.8rem 0 .3rem;font-weight:600;font-size:.92rem}
.job-fit{margin:0;padding-left:1.1rem;color:var(--slate);font-size:.95rem;display:grid;gap:.25rem}
.job-apply{justify-self:start;margin-top:.25rem}
.jobs-other{margin:1.5rem 0 0;color:var(--slate)}
/* Shop (shop.html, product.html; filled by assets/js/shop.js) */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15.5rem),1fr));gap:1.25rem}
.shop-empty{grid-column:1/-1;padding:2.5rem 1.5rem;text-align:center;color:var(--slate);border:1px dashed #C9D3E3;border-radius:20px;background:var(--white)}
.shop-card{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:20px;background:var(--white);overflow:hidden;color:inherit;text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s,border-color .2s}
.shop-card:hover{transform:translateY(-4px);border-color:#C9D7FF;box-shadow:0 26px 44px -30px rgba(47,88,232,.5)}
.shop-card[hidden]{display:none}
.shop-media{position:relative;display:block;aspect-ratio:1;background:var(--mist)}
.shop-media img{width:100%;height:100%;object-fit:cover;display:block}
.shop-media.is-empty{background:linear-gradient(135deg,var(--cobalt-soft),#F4EEFF)}
.shop-badge{position:absolute;top:10px;left:10px;padding:.25rem .6rem;border-radius:999px;background:var(--ink);color:#fff;font-size:.78rem;font-weight:700}
.shop-badge.is-out{background:#6B7280}
.shop-body{display:grid;gap:.35rem;align-content:start;padding:1rem 1.1rem 1.2rem}
.shop-type{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cobalt)}
.shop-name{font-size:1.05rem;line-height:1.3}
.shop-short{font-size:.9rem;color:var(--slate)}
.shop-price{display:flex;gap:.5rem;align-items:baseline;margin-top:.3rem}
.shop-price b{font-size:1.15rem}
.shop-price s{color:var(--slate);font-size:.9rem}
.shop-trust{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--line);font-size:.9rem;color:var(--slate)}
.pd-wrap{padding-top:calc(var(--header-h) + .25rem)}
.pd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start;margin-top:1rem}
.pd-media{position:sticky;top:calc(var(--header-h) + 1.5rem);border-radius:24px;overflow:hidden;border:1px solid var(--line);background:var(--mist)}
.pd-media img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.pd-noimg{aspect-ratio:1;background:linear-gradient(135deg,var(--cobalt-soft),#F4EEFF)}
.pd-info{display:grid;gap:.6rem;align-content:start}
.pd-type{margin:0;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cobalt)}
.pd-title{margin:0;font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.pd-price{margin:.3rem 0 0;display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap}
.pd-price b{font-size:1.8rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pd-price s{color:var(--slate)}
.pd-off{padding:.15rem .55rem;border-radius:999px;background:#E7F7F0;color:#0B7A55;font-size:.85rem;font-weight:700}
.pd-incl{margin:0;font-size:.85rem;color:var(--slate)}
.pd-short{margin:.2rem 0 0;font-size:1.05rem;color:var(--slate)}
.pd-stock{margin:0;font-weight:600;color:var(--amber-text)}
.pd-form{display:grid;gap:.9rem;margin-top:.8rem;padding:1.25rem;border:1px solid var(--line);border-radius:20px;background:var(--white)}
.pd-form .form-row.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.pd-total{margin:0;font-weight:700}
.pd-buy{width:100%;justify-content:center}
.pd-desc{grid-column:2;max-width:65ch}
.pd-desc h2{font-size:1.25rem;margin:1rem 0 .6rem}
.pd-desc p{color:var(--slate)}
.pd-after{padding:.8rem 1rem;border-radius:14px;background:var(--cobalt-soft);color:var(--ink)!important}
@media (max-width:860px){.pd-grid{grid-template-columns:1fr}.pd-media{position:static}.pd-desc{grid-column:1}.pd-form .form-row.three{grid-template-columns:1fr 1fr}}
/* Sample certificate preview (training pages and verify-certificate.html) */
.tr-cert-sample{margin:.5rem 0 0;display:grid;gap:.5rem}
.tr-cert-sample img{display:block;width:100%;max-width:100%;height:auto;border-radius:10px;border:1px solid var(--line);box-shadow:0 24px 48px -28px rgba(11,19,32,.35);transition:transform .3s var(--ease)}
.tr-cert-sample a:hover img{transform:translateY(-3px)}
.tr-cert-sample figcaption{font-size:.88rem;color:var(--slate)}
.cv-sample{max-width:640px;margin-top:2rem}
/* Certificate verification (verify-certificate.html) */
.cv-box{max-width:640px;display:grid;gap:1.25rem}
.cv-form{display:grid;gap:.5rem;padding:1.5rem;border:1px solid var(--line);border-radius:20px;background:var(--white)}
.cv-form label{font-weight:600}
.cv-row{display:flex;gap:.6rem;flex-wrap:wrap}
.cv-row input{flex:1 1 14rem;min-height:50px;padding:.7rem 1rem;border:1px solid var(--line);border-radius:14px;font:inherit;font-size:1.1rem;letter-spacing:.06em;text-transform:uppercase;background:var(--white);color:var(--ink)}
.cv-row input:focus{outline:2px solid var(--cobalt);outline-offset:1px}
.cv-result{display:grid;gap:.45rem;justify-items:start;padding:1.5rem;border-radius:20px;border:1px solid var(--line);background:var(--white)}
.cv-result h2{font-size:1.3rem;margin:0 0 .25rem}
.cv-result p{margin:0;color:var(--slate)}
.cv-result p b{color:var(--ink);font-weight:600}
.cv-result .btn{margin-top:.6rem}
.cv-result.is-ok{border-color:#BDE8D5;background:#F2FBF7}
.cv-result.is-ok h2{color:#0B7A55}
.cv-result.is-bad{border-color:#F5C2C4;background:#FFF6F6}
.cv-result.is-bad h2{color:var(--danger)}
/* Refer and earn: commission calculator and form section labels */
.ref-calc{display:grid;gap:.6rem;align-content:start}
.ref-calc label{font-weight:600;font-size:.95rem}
.ref-calc input[type=number]{width:100%;min-height:50px;padding:.7rem 1rem;border:1px solid var(--line);border-radius:14px;font:inherit;font-size:1.1rem;background:var(--white);color:var(--ink)}
.ref-calc input[type=number]:focus{outline:2px solid var(--cobalt);outline-offset:1px}
.ref-calc-check{display:flex;gap:.5rem;align-items:center;font-weight:400!important;color:var(--slate);cursor:pointer}
.ref-calc-check input{width:18px;height:18px;accent-color:var(--cobalt)}
.ref-calc-out{margin:.4rem 0 0;padding:1rem 1.15rem;border-radius:16px;background:var(--cobalt-soft);display:grid;gap:.15rem}
.ref-calc-out span{font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cobalt)}
.ref-calc-out b{font-size:2rem;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.ref-calc-out small{color:var(--slate)}
.ref-form-h{margin:.4rem 0 -.2rem;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt)}
.topic[hidden]{display:none}
/* Sticky side: in a two-column section, the clearly shorter column follows the scroll (class added by main.js) */
@media (min-width:961px){.is-sticky{position:sticky;top:calc(var(--header-h) + 24px);align-self:start}.ss-measure{align-self:start}}
@media (max-width:600px){.qe-tab{font-size:.8rem;padding:.85rem .5rem}}
@media print{.qe-tab,.qe-dialog{display:none}}
.qe-dialog{width:min(26rem,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:1.5rem;border:0;border-radius:20px;background:var(--white);color:var(--ink);box-shadow:0 30px 70px -20px rgba(11,19,32,.45)}
.qe-dialog[open]{animation:waIn .35s var(--ease)}
.qe-dialog::backdrop{background:rgba(11,19,32,.55)}
.qe-dialog h2{margin:0 2.5rem .35rem 0;font-size:1.3rem;line-height:1.25;text-wrap:balance}
.qe-intro{margin:0 0 1rem;color:var(--slate);font-size:.92rem}
.qe-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:0;background:var(--mist);color:var(--ink);font-size:1.25rem;line-height:1;cursor:pointer}
.qe-close:hover{background:var(--line)}
.qe-form{display:grid;gap:.75rem}
.qe-form textarea{min-height:0}
.qe-submit{width:100%;justify-content:center}
.qe-form .fine{margin:0;font-size:.78rem;color:var(--slate)}
@media (prefers-reduced-motion:reduce){.qe-dialog[open]{animation:none}}
/* page transitions between pages of the site (supported browsers) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .35s var(--ease) both}
::view-transition-new(root){animation:vtIn .45s var(--ease) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-16px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(16px)}}
/* scroll-driven reveals: content stays fully visible wherever this is unsupported */
@supports (animation-timeline: view()){
.reveal{animation:revealUp linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
.reveal-stagger > *{animation:revealUp linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
.progress{animation:grow linear both;animation-timeline:scroll(root)}
.big-word{animation:revealUp linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
}
@keyframes revealUp{from{opacity:0;transform:translateY(48px) scale(.97)}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.progress{display:none}
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
.cursor{display:none}
}
/* ---------------------------------------------------------------------
COMMON CLASSES
Reuse these on any page before writing new CSS. Full list with
examples: page-template.html
--------------------------------------------------------------------- */
/* backgrounds + section spacing */
.bg-white{background:var(--white)}
.bg-mist{background:var(--mist)}
.bg-tint{background:radial-gradient(40% 60% at 90% 30%,rgba(124,92,255,.12),transparent 70%),radial-gradient(35% 55% at 5% 90%,rgba(47,88,232,.08),transparent 70%),#F8FAFF}
.bg-dark{background:var(--ink);color:#fff}
.bg-dark .text-muted,.bg-dark .section-head p{color:#AEB8CA}
.bg-dark .eyebrow{color:#9DB4FF}
.border-y{border-block:1px solid var(--line)}
.section-sm{padding-block:clamp(2.5rem,5vw,4rem)}
/* layout */
.grid-2,.grid-3,.grid-4{display:grid;gap:1.25rem;grid-template-columns:repeat(var(--cols),minmax(0,1fr))}
.grid-2{--cols:2}
.grid-3{--cols:3}
.grid-4{--cols:4}
@media (max-width:1023px){.grid-4{--cols:2}}
@media (max-width:899px){.grid-3{--cols:2}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{--cols:1}}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
@media (max-width:899px){.split{grid-template-columns:minmax(0,1fr)}}
.stack{display:grid;gap:1rem;align-content:start}
.stack-sm{display:grid;gap:.5rem;align-content:start}
.stack-lg{display:grid;gap:2rem;align-content:start}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.row-between{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.center-x{margin-inline:auto}
/* text */
.h1{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:var(--heading-weight);letter-spacing:-.04em;line-height:1}
.h2{font-size:clamp(2.1rem,4.8vw,3.5rem);font-weight:var(--heading-weight);letter-spacing:-.035em;line-height:1.05}
.h3{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.text-lg{font-size:clamp(1.05rem,1.6vw,1.2rem)}
.text-sm{font-size:.875rem}
.text-center{text-align:center}
.text-muted{color:var(--slate)}
.text-accent{color:var(--cobalt)}
.text-gradient{background:linear-gradient(90deg,var(--cobalt),#7C5CFF 55%,var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.measure{max-width:60ch}
.big-number{font-size:clamp(2.4rem,5vw,3.4rem);font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
/* cards */
.card{position:relative;display:grid;gap:.85rem;align-content:start;padding:clamp(1.25rem,3vw,1.75rem);background:var(--white);border:1px solid var(--line);border-radius:20px;color:var(--ink)}
.card p{color:var(--slate)}
a.card{text-decoration:none}
.card-hover{transition:transform .4s var(--ease),box-shadow .4s,border-color .25s}
.card-hover:hover{transform:translateY(-4px);border-color:rgba(47,88,232,.35);box-shadow:0 26px 44px -28px rgba(47,88,232,.5)}
.card-dark{background:var(--ink);border-color:var(--ink);color:#fff}
.card-dark p{color:#AEB8CA}
/* icon box, pills, tags */
.icon-box{width:48px;height:48px;flex:none;border-radius:14px;display:grid;place-items:center;background:var(--cobalt-soft);color:var(--cobalt);transition:background .3s,color .3s}
.icon-box svg{width:22px;height:22px}
.card-hover:hover .icon-box{background:var(--cobalt);color:#fff}
.pill{display:inline-flex;align-items:center;gap:.35rem;width:fit-content;padding:.25rem .75rem;border-radius:999px;font-size:.78rem;font-weight:600;background:var(--cobalt-soft);color:var(--cobalt)}
.icon-box.is-mint,.pill.is-mint{background:#E7F7F0;color:var(--mint)}
.icon-box.is-amber,.pill.is-amber{background:#FEF3E2;color:var(--amber-text)}
.icon-box.is-dark,.pill.is-dark{background:var(--ink);color:#fff}
.tag-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.tag{display:inline-flex;align-items:center;min-height:40px;padding:0 1rem;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink);font-size:.875rem;font-weight:500;text-decoration:none;transition:border-color .2s,background .2s,color .2s}
a.tag:hover{border-color:var(--cobalt);background:var(--cobalt);color:#fff}
/* lists */
.check-list{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.check-list li{position:relative;padding-left:2rem;color:var(--slate)}
.check-list li::before{content:"";position:absolute;left:0;top:.15em;width:1.3rem;height:1.3rem;border-radius:50%;background:#E7F7F0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10.5l3 3 7-7' stroke='%230E9F6E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
/* buttons: extra variants */
.btn-group{display:flex;flex-wrap:wrap;gap:.75rem}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#1C2636}
.btn-sm{min-height:42px;padding:0 1.1rem;font-size:.9rem}
.btn-block{width:100%}
/* media + dividers */
.rounded{border-radius:20px;overflow:hidden}
.shadow{box-shadow:0 30px 60px -40px rgba(11,19,32,.45)}
.divider{height:1px;border:0;margin:0;background:var(--line)}
/* spacing */
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2.5rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2.5rem}
/* visibility */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:899px){.hide-mobile{display:none!important}}
@media (min-width:900px){.hide-desktop{display:none!important}}
/* page hero for inner pages (breadcrumbs + heading + intro) */
.page-hero{position:relative;overflow:hidden;padding-block:clamp(2.5rem,5vw,4rem) clamp(3rem,6vw,4.5rem);background:radial-gradient(38% 60% at 6% 10%,rgba(124,92,255,.11),transparent 70%),radial-gradient(45% 70% at 85% 20%,rgba(47,88,232,.15),transparent 70%),radial-gradient(30% 50% at 60% 110%,rgba(245,158,11,.12),transparent 70%),linear-gradient(180deg,#F4F7FF 0%,#FFFFFF 100%);border-bottom:1px solid var(--line)}
.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(47,88,232,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(47,88,232,.07) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(60% 80% at 25% 30%,#000 20%,transparent 75%);mask-image:radial-gradient(60% 80% at 25% 30%,#000 20%,transparent 75%)}
.page-hero::after{content:"";position:absolute;width:40vw;height:40vw;max-width:560px;max-height:560px;right:4%;top:-30%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(124,92,255,.16),rgba(47,88,232,.08) 45%,transparent 70%);animation:aurora 16s ease-in-out infinite alternate}
@keyframes aurora{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-8%,14%) scale(1.12)}100%{transform:translate(6%,24%) scale(.95)}}
.page-hero .container{position:relative;z-index:1;display:grid;gap:1.25rem}
.page-hero h1{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:var(--heading-weight);letter-spacing:-.04em;line-height:1;max-width:16ch}
.page-hero .lede{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--slate);max-width:52ch}
.breadcrumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;font-size:.875rem;color:var(--slate)}
.breadcrumbs li + li::before{content:"/";margin-right:.5rem;color:#9AA4B5}
.breadcrumbs a{color:var(--slate);text-decoration:none}
.breadcrumbs a:hover{color:var(--cobalt);text-decoration:underline}
.breadcrumbs [aria-current]{color:var(--ink);font-weight:500}
/* dark call-to-action band */
.cta-band{margin-top:2.5rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;padding:1.5rem 1.75rem;border-radius:20px;background:var(--ink);color:#fff}
.cta-band b{display:block;font-size:1.15rem;letter-spacing:-.02em}
.cta-band span{color:#AEB8CA;font-size:.95rem}
/* =====================================================================
2. HOME (index.html)
===================================================================== */
/* hero */
.hero{position:relative;overflow:hidden;display:grid;align-items:center;background:radial-gradient(38% 55% at 8% 12%,rgba(124,92,255,.10),transparent 70%),radial-gradient(45% 60% at 78% 32%,rgba(47,88,232,.15),transparent 70%),radial-gradient(32% 45% at 62% 100%,rgba(245,158,11,.10),transparent 70%),linear-gradient(180deg,#F4F7FF 0%,#FFFFFF 92%)}
/* faint grid that fades out from behind the headline */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(47,88,232,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(47,88,232,.07) 1px,transparent 1px);background-size:56px 56px;background-position:-1px -1px;-webkit-mask-image:radial-gradient(60% 75% at 25% 35%,#000 20%,transparent 75%);mask-image:radial-gradient(60% 75% at 25% 35%,#000 20%,transparent 75%)}
/* slow-drifting colour glow */
.hero::after{content:"";position:absolute;width:46vw;height:46vw;max-width:640px;max-height:640px;right:8%;top:-18%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(124,92,255,.16),rgba(47,88,232,.08) 45%,transparent 70%);filter:blur(10px);animation:aurora 16s ease-in-out infinite alternate}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.45) 38%,rgba(255,255,255,0) 66%);pointer-events:none}
@media (max-width:899px){.hero .shade{background:linear-gradient(180deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.5) 60%,rgba(255,255,255,.1) 100%)}}
.hero-inner{position:relative;z-index:1;width:100%;display:grid;gap:1.5rem;padding-block:clamp(2.5rem,5vw,4rem) clamp(3.5rem,6vw,5rem);pointer-events:none}
.hero-inner > *{pointer-events:auto}
.hero h1{font-size:clamp(2.8rem,7.4vw,5.6rem);font-weight:var(--heading-weight);letter-spacing:-.04em;max-width:12ch;line-height:.98}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.hero h1 .w > span{display:inline-block;animation:wordUp 1s var(--ease) both;animation-delay:calc(120ms + var(--i) * 80ms)}
.hero h1 .accent > span{background:linear-gradient(90deg,var(--cobalt),#7C5CFF 45%,var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:wordUp 1s var(--ease) both,sheen 6s ease-in-out 1.2s infinite alternate;animation-delay:calc(120ms + var(--i) * 80ms),1.2s}
@keyframes wordUp{from{transform:translateY(105%) rotate(4deg)}}
@keyframes sheen{to{background-position:100% 0}}
.hero .lede{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--slate);max-width:46ch}
.ctas{display:flex;flex-wrap:wrap;gap:.75rem}
.trust-line{display:flex;align-items:center;gap:.75rem;font-size:.875rem;color:var(--slate)}
.trust-line .dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(14,159,110,.5);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(14,159,110,0)}100%{box-shadow:0 0 0 0 rgba(14,159,110,0)}}
/* floating live cards */
.float-cards{position:absolute;inset:0;pointer-events:none;z-index:1}
.fcard{position:absolute;display:flex;align-items:center;gap:.75rem;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px;padding:.75rem 1rem;box-shadow:0 20px 40px -18px rgba(11,19,32,.3);font-size:.85rem;animation:pop .8s var(--ease) both,bob 6s ease-in-out infinite;animation-delay:var(--d),calc(var(--d) + .8s)}
.fcard b{display:block;font-weight:600;color:var(--ink)}
.fcard span{color:var(--slate);font-size:.78rem}
.fcard .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}
.fcard .ic svg{width:18px;height:18px}
.fc1{right:6%;top:18%;--d:1.1s}.fc1 .ic{background:#E7F7F0;color:var(--mint)}
.fc2{right:28%;top:52%;--d:1.4s}.fc2 .ic{background:var(--cobalt-soft);color:var(--cobalt)}
.fc3{right:8%;bottom:14%;--d:1.7s}.fc3 .ic{background:#FEF3E2;color:var(--amber-text)}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.9)}}
@keyframes bob{50%{transform:translateY(-10px)}}
@media (max-width:1023px){.float-cards{display:none}}
/* logo wall */
.logos{border-block:1px solid var(--line);background:var(--mist);overflow:hidden;padding-block:2.25rem;display:grid;gap:1.25rem}
.logos,.logos .rows,.cases-sticky{grid-template-columns:minmax(0,1fr)}
.logos .label{text-align:center;color:var(--slate);font-size:.875rem;font-weight:500;padding-inline:var(--gutter)}
.logos .rows{display:grid;gap:1.1rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.logo-row{display:flex;width:max-content;animation:slide 45s linear infinite}
.logo-row.rev{animation-direction:reverse;animation-duration:52s}
.logos:hover .logo-row{animation-play-state:paused}
.logo-row ul{list-style:none;margin:0;padding:0 3rem 0 0;display:flex;gap:3rem;align-items:center}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.15rem;letter-spacing:-.02em;white-space:nowrap;color:#98A2B3;transition:color .3s}
.logo i{width:26px;height:26px;border-radius:var(--rad,8px);background:#C5CCD8;transition:background .3s,transform .4s var(--ease)}
.logo:hover{color:var(--ink)}
.logo:hover i{background:var(--c);transform:rotate(-12deg) scale(1.1)}
@keyframes slide{to{transform:translateX(-50%)}}
/* proof */
.proof{background:linear-gradient(180deg,#FFFFFF 0%,#F8FAFF 100%)}
.proof ul{list-style:none;margin-block:0;margin-inline:auto;padding-block:2.75rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.proof li{display:grid;justify-items:center;align-content:start;gap:.85rem;text-align:center;padding-inline:1rem;font-size:.95rem;color:var(--slate)}
.proof li + li{position:relative}
.proof li + li::before{content:"";position:absolute;left:-.75rem;top:10%;bottom:10%;width:1px;background:var(--line)}
.proof b{display:block;color:var(--ink);font-weight:600;margin-bottom:.2rem}
.proof .ic{width:48px;height:48px;border-radius:14px;background:var(--cobalt-soft);color:var(--cobalt);display:grid;place-items:center}
@media (max-width:719px){
.proof ul{grid-template-columns:minmax(0,1fr);gap:2rem}
.proof li + li::before{left:15%;right:15%;top:-1rem;bottom:auto;width:auto;height:1px}
}
.proof svg{width:22px;height:22px}
/* growth engine: labelled 3D stack beside an accordion of layers */
.engine{background:var(--mist);border-block:1px solid var(--line)}
.engine-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:stretch}
.engine-stage{position:relative;min-height:clamp(400px,40vw,560px);border-radius:24px;background:radial-gradient(70% 60% at 45% 55%,rgba(47,88,232,.1),transparent 70%),var(--white);border:1px solid var(--line);overflow:hidden;box-shadow:0 40px 80px -50px rgba(11,19,32,.35)}
.engine-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.etags{position:absolute;inset:0;pointer-events:none}
.etag{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:.45rem;padding:.28rem .7rem .28rem .28rem;border-radius:999px;background:rgba(255,255,255,.94);border:1px solid var(--line);font-size:.78rem;font-weight:600;color:var(--ink);white-space:nowrap;box-shadow:0 6px 16px -8px rgba(11,19,32,.3);pointer-events:auto;cursor:pointer;transition:background .3s,border-color .3s,color .3s;will-change:transform}
.etag::before{content:"";position:absolute;right:100%;top:50%;width:16px;height:1px;background:#9AA7BC}
.etag b{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--cobalt-soft);color:var(--cobalt);font-size:.7rem;transition:background .3s,color .3s}
.etag:hover{border-color:var(--cobalt)}
.etag.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.etag.on b{background:var(--amber);color:var(--ink)}
.legend{position:absolute;left:1rem;bottom:1rem;display:flex;gap:1rem;font-size:.78rem;font-weight:500;color:var(--slate);background:rgba(255,255,255,.9);padding:.4rem .8rem;border-radius:999px;border:1px solid var(--line)}
.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:.4rem;vertical-align:middle}
.legend .v{background:var(--cobalt)}
.legend .l{background:var(--amber)}
.layers{list-style:none;margin:0;padding:0;display:grid;gap:.75rem;align-content:center}
.layer{position:relative;background:var(--white);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:border-color .3s,box-shadow .4s}
.layer:hover{border-color:#C7D0DE}
.layer.is-open{border-color:rgba(47,88,232,.35);box-shadow:0 24px 48px -32px rgba(47,88,232,.55)}
.layer-btn{width:100%;display:grid;grid-template-columns:40px minmax(0,1fr) 18px;gap:1rem;align-items:center;min-height:68px;padding:.85rem 1.25rem;background:none;border:0;font:inherit;color:var(--ink);text-align:left;cursor:pointer;border-radius:18px}
.layer-btn .ln{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--cobalt-soft);color:var(--cobalt);font-weight:800;transition:background .3s,color .3s,transform .4s var(--ease)}
.layer:hover .ln{transform:scale(1.06)}
.is-open .layer-btn .ln{background:var(--amber);color:var(--ink)}
.layer-btn small{display:block;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.is-open .layer-btn small{color:var(--amber-text)}
.layer-btn b{display:block;font-size:1.08rem;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.layer-btn svg{width:18px;height:18px;color:var(--slate);transition:transform .4s var(--ease),color .3s}
.is-open .layer-btn svg{transform:rotate(180deg);color:var(--cobalt)}
.layer-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.is-open .layer-panel{grid-template-rows:1fr}
.layer-panel .clip{overflow:hidden;min-height:0}
.layer-panel .inner{display:grid;gap:.9rem;padding:0 1.25rem 1.35rem calc(1.25rem + 40px + 1rem);opacity:0;transform:translateY(-6px);transition:opacity .35s,transform .45s var(--ease)}
.is-open .layer-panel .inner{opacity:1;transform:none;transition-delay:.12s}
.layer-panel p{color:var(--slate);font-size:.95rem;max-width:48ch}
.layer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.layer ul a{display:inline-flex;align-items:center;min-height:40px;padding:0 1rem;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink);text-decoration:none;font-size:.875rem;font-weight:500;transition:border-color .2s,background .2s,color .2s}
.layer ul a:hover{border-color:var(--cobalt);background:var(--cobalt);color:#fff}
.layer-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--cobalt),var(--amber));transform-origin:0 50%;transform:scaleX(0)}
.layers.manual .layer-bar{display:none}
@media (max-width:899px){
.engine-grid{grid-template-columns:minmax(0,1fr)}
.engine-stage{min-height:340px}
}
@media (max-width:520px){
.engine-stage{min-height:300px}
.etag{font-size:.7rem;padding:.22rem .55rem .22rem .22rem}
.etag b{width:17px;height:17px;font-size:.62rem}
.layer-btn{padding:.75rem 1rem;gap:.8rem;grid-template-columns:36px minmax(0,1fr) 18px}
.layer-btn .ln{width:36px;height:36px}
.layer-panel .inner{padding:0 1rem 1.15rem}
}
/* process */
.steps-wrap{position:relative}
.steps-line{position:absolute;left:0;right:0;top:27px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.steps-line::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--cobalt),var(--amber));transform-origin:0 50%}
.steps{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
.steps li{display:grid;gap:.6rem;align-content:start}
.steps .n{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--white);border:2px solid var(--cobalt);color:var(--cobalt);font-weight:800;font-size:1.1rem;box-shadow:0 0 0 8px var(--white)}
.steps h3{font-size:1.3rem;font-weight:700;margin-top:.5rem}
.steps p{color:var(--slate);font-size:.95rem}
.steps .when{font-size:.8rem;font-weight:600;color:var(--amber-text)}
@media (max-width:899px){
.steps{grid-template-columns:1fr;gap:2rem;padding-left:0}
.steps-line{left:27px;right:auto;top:0;bottom:0;width:2px;height:auto}
.steps-line::after{transform-origin:50% 0}
.steps li{grid-template-columns:56px 1fr;column-gap:1.25rem}
.steps li > :not(.n){grid-column:2}
.steps .n{grid-row:1 / span 4}
.steps h3{margin-top:.6rem}
}
/* contact */
.book{position:relative;overflow:hidden;overflow:clip;background:var(--white)}
.blobs{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.blobs i{position:absolute;width:44vw;height:44vw;max-width:620px;max-height:620px;border-radius:50%;filter:blur(70px);opacity:.55}
.blobs i:nth-child(1){background:#DCE5FF;left:-8%;top:-10%;animation:drift1 18s ease-in-out infinite alternate}
.blobs i:nth-child(2){background:#FFE8C2;right:-6%;bottom:-18%;animation:drift2 22s ease-in-out infinite alternate}
.blobs i:nth-child(3){background:#E6DDFF;left:40%;top:30%;width:30vw;height:30vw;animation:drift1 26s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(12%,18%) scale(1.15)}}
@keyframes drift2{to{transform:translate(-16%,-12%) scale(.9)}}
.contact-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:899px){.contact-grid{grid-template-columns:1fr}}
.contact-points{list-style:none;margin:1.75rem 0 0;padding:0;display:grid;gap:.85rem;color:var(--slate)}
.contact-points li{display:grid;grid-template-columns:26px 1fr;gap:.75rem;align-items:center}
.contact-points .ck{width:26px;height:26px;border-radius:50%;background:#E7F7F0;color:var(--mint);display:grid;place-items:center}
.contact-points svg{width:14px;height:14px}
.book form.lead{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:24px;padding:clamp(1.25rem,3vw,2.25rem);display:grid;gap:1.1rem;box-shadow:0 40px 80px -40px rgba(11,19,32,.3)}
/* ===== results in numbers ===== */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15.5rem),1fr));gap:1rem}
.stat{padding:1.75rem 1.75rem 1.25rem;border:1px solid var(--line);border-radius:var(--r);background:var(--white);display:grid;gap:.35rem;transition:transform .4s var(--ease),box-shadow .4s}
.stat:hover{transform:translateY(-4px);box-shadow:0 24px 40px -28px rgba(11,19,32,.35)}
.stat .val{font-size:clamp(2.6rem,5vw,3.5rem);font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.stat .val small{font-size:.55em;color:var(--cobalt);margin-left:.05em}
.stat .lbl{color:var(--slate);font-size:.95rem}
.stat svg{width:100%;height:52px;margin-top:.75rem;overflow:visible}
.stat .spark-area{fill:var(--cobalt-soft);transition:opacity 1.2s .6s}
.stat .spark-line{fill:none;stroke:var(--cobalt);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke}
.stat .spark-dot{fill:var(--amber);transition:opacity .4s 1.6s}
.stat.armed .spark-line{stroke-dashoffset:1}
.stat.armed .spark-area,.stat.armed .spark-dot{opacity:0}
.stat.armed.in .spark-line{stroke-dashoffset:0;transition:stroke-dashoffset 1.8s var(--ease)}
.stat.armed.in .spark-area,.stat.armed.in .spark-dot{opacity:1}
/* ===== case studies: pinned horizontal scroll ===== */
.cases{position:relative;background:var(--ink);color:#fff}
.cases-sticky{display:grid;align-content:center;gap:2rem;padding-block:clamp(4rem,8vw,6rem);overflow:hidden}
.cases.pinned .cases-sticky{position:sticky;top:0;height:100vh;padding-block:calc(var(--header-h) + 1rem) 2rem}
.cases-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1.5rem}
.cases-head .section-head{margin-bottom:0}
.cases-head .eyebrow{color:#9DB4FF}
.cases-head p{color:#AEB8CA}
.cases-head a{color:#fff;font-weight:600;text-decoration:none;display:inline-flex;gap:.4rem;align-items:center;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:.2rem}
.cases-track{display:flex;gap:1.25rem;padding-left:max(var(--gutter),calc((100vw - 76rem)/2 + var(--gutter)));will-change:transform}
.cases-track::after{content:"";flex:none;width:var(--gutter)}
.cases:not(.pinned) .cases-track{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;scrollbar-width:thin}
.case{flex:none;width:min(46rem,84vw);scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.75rem;padding:clamp(1.25rem,3vw,2.25rem);border-radius:24px;background:#131D2E;border:1px solid #26334A}
@media (max-width:700px){.case{grid-template-columns:1fr}}
.case .chip{justify-self:start;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#FFD08A;background:rgba(245,158,11,.14);padding:.3rem .7rem;border-radius:999px}
.case-copy{display:grid;gap:.9rem;align-content:start}
.case h3{font-size:clamp(1.4rem,2.4vw,1.8rem);font-weight:var(--heading-weight)}
.case .metric{font-size:clamp(2.4rem,4.6vw,3.4rem);font-weight:800;letter-spacing:-.045em;line-height:1;background:linear-gradient(90deg,#9DB4FF,#FFD08A);-webkit-background-clip:text;background-clip:text;color:transparent}
.case p{color:#AEB8CA;font-size:.95rem}
.case .tags{display:flex;flex-wrap:wrap;gap:.4rem}
.case .tags span{font-size:.78rem;color:#C9D2E3;border:1px solid #2C3A53;border-radius:999px;padding:.2rem .65rem}
.case a.more{color:#fff;font-weight:600;font-size:.95rem}
.funnel{display:grid;gap:.9rem;align-content:start;background:#0E1626;border:1px solid #26334A;border-radius:18px;padding:1.25rem}
.seg{display:inline-grid;grid-template-columns:1fr 1fr;background:#1B263A;border-radius:999px;padding:4px;justify-self:start;position:relative}
.seg button{position:relative;z-index:1;border:0;background:none;color:#AEB8CA;font:600 .85rem var(--font);padding:.5rem 1rem;border-radius:999px;cursor:pointer;min-height:36px;transition:color .3s}
.seg button[aria-pressed="true"]{color:var(--ink)}
.seg::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);background:#fff;border-radius:999px;transition:transform .45s var(--ease)}
.seg[data-state="after"]::before{transform:translateX(100%)}
.f-row{display:grid;gap:.3rem;justify-items:center;text-align:center}
.f-bar{height:38px;width:var(--w,100%);max-width:100%;border-radius:10px;background:linear-gradient(90deg,#2F58E8,#6D8BFF);clip-path:polygon(0 0,100% 0,96% 100%,4% 100%);transition:width .9s var(--ease)}
.f-row:nth-child(3) .f-bar{background:linear-gradient(90deg,#5B6CFF,#8E7CFF)}
.f-row:nth-child(4) .f-bar{background:linear-gradient(90deg,#F59E0B,#FFC766)}
.f-meta{display:flex;gap:.5rem;font-size:.82rem;color:#AEB8CA}
.f-meta b{color:#fff;font-variant-numeric:tabular-nums}
.cases-progress{height:3px;background:#26334A;border-radius:3px;overflow:hidden;margin-inline:max(var(--gutter),calc((100vw - 76rem)/2 + var(--gutter)))}
.cases-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--cobalt),var(--amber));transform-origin:0 50%;transform:scaleX(0)}
.cases:not(.pinned) .cases-progress{display:none}
/* ===== ROI calculator ===== */
.roi{background:var(--mist);border-block:1px solid var(--line)}
.roi-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(1.5rem,4vw,3rem);align-items:stretch}
@media (max-width:899px){.roi-grid{grid-template-columns:1fr}}
.roi-controls{display:grid;gap:1.75rem;align-content:start;background:var(--white);border:1px solid var(--line);border-radius:24px;padding:clamp(1.25rem,3vw,2rem)}
.range-field{display:grid;gap:.6rem}
.range-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.range-top label{font-weight:600}
.range-top output{font-weight:800;font-size:1.35rem;letter-spacing:-.02em;color:var(--cobalt);font-variant-numeric:tabular-nums}
input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;background:linear-gradient(90deg,var(--cobalt) var(--p,30%),var(--line) var(--p,30%));outline-offset:6px}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--cobalt);box-shadow:0 4px 12px rgba(47,88,232,.35);cursor:grab;transition:transform .2s}
input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.15)}
input[type="range"]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--cobalt);cursor:grab}
.range-scale{display:flex;justify-content:space-between;font-size:.78rem;color:var(--slate)}
.roi-out{position:relative;background:var(--white);border:1px solid var(--line);border-radius:24px;padding:clamp(1.25rem,3vw,2rem);display:grid;gap:1.5rem;overflow:hidden}
.roi-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:end}
.roi-x{font-size:clamp(3rem,7vw,4.6rem);font-weight:800;letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums;background:linear-gradient(90deg,var(--cobalt),#7C5CFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.roi-x-lbl{color:var(--slate);font-size:.9rem;max-width:18ch}
.bars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,3vw,2rem);align-items:end;height:220px;padding-inline:.5rem 1rem;border-bottom:2px solid var(--line)}
.rbar{position:relative;height:calc(var(--h,10) * 1%);min-height:8px;border-radius:8px 8px 0 0;background:linear-gradient(180deg,#6D8BFF,var(--cobalt));transition:height .9s var(--ease)}
.rbar::before{content:"";position:absolute;left:0;right:-12px;top:-8px;height:8px;background:#9DB0FF;transform:skewX(-55deg);transform-origin:bottom left;border-radius:3px 3px 0 0}
.rbar::after{content:"";position:absolute;top:0;right:-12px;width:12px;height:100%;background:#1E3FB8;transform:skewY(-34deg);transform-origin:top left}
.rbar.amber{background:linear-gradient(180deg,#FFC766,var(--amber))}
.rbar.amber::before{background:#FFE0A3}
.rbar.amber::after{background:#C77A00}
.rbar.violet{background:linear-gradient(180deg,#A28BFF,#6A4DF0)}
.rbar.violet::before{background:#C9BCFF}
.rbar.violet::after{background:#4A2FC4}
.bar-labels{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,3vw,2rem);padding-inline:.5rem 1rem}
.bar-labels div{display:grid;gap:.1rem}
.bar-labels b{font-size:clamp(1.1rem,2.2vw,1.5rem);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bar-labels span{font-size:.8rem;color:var(--slate)}
.roi-note{font-size:.8rem;color:var(--slate)}
/* ===== testimonials: 3D card stack ===== */
.t-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:899px){.t-grid{grid-template-columns:1fr}}
.t-stage{display:grid;perspective:1400px;padding-bottom:3.5rem;touch-action:pan-y;border-radius:24px}
.t-card{grid-area:1/1;display:grid;gap:1.25rem;align-content:start;background:var(--white);border:1px solid var(--line);border-radius:24px;padding:clamp(1.5rem,3.5vw,2.5rem);box-shadow:0 30px 60px -40px rgba(11,19,32,.45);transform:translateY(calc(var(--k,0) * 22px)) scale(calc(1 - var(--k,0) * .05)) rotate(calc(var(--k,0) * -1.4deg));transform-origin:50% 100%;z-index:calc(10 - var(--k,0));opacity:max(0,calc(1 - var(--k,0) * .3));transition:transform .7s var(--ease),opacity .5s}
.t-card:not(.current){pointer-events:none;user-select:none}
.stars{position:relative;width:120px;height:22px}
.stars svg{position:absolute;inset:0;width:120px;height:22px}
.stars .fill{position:absolute;inset:0;overflow:hidden;width:100%}
.t-card.armed .stars .fill{width:0}
.t-card.armed.current .stars .fill{width:100%;transition:width 1s .35s var(--ease)}
.t-card blockquote{margin:0;font-size:clamp(1.1rem,2vw,1.35rem);font-weight:500;line-height:1.5;letter-spacing:-.01em}
.t-card .res{justify-self:start;font-size:.85rem;font-weight:600;color:var(--mint);background:#E7F7F0;padding:.3rem .75rem;border-radius:999px}
.who{display:flex;align-items:center;gap:.9rem}
.who b{display:block}
.who span{font-size:.875rem;color:var(--slate)}
.t-controls{display:flex;align-items:center;gap:1rem;margin-top:1.5rem}
.icon-btn{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--line);background:var(--white);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s}
.icon-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:20px;height:20px}
.t-count{font-weight:600;font-variant-numeric:tabular-nums;color:var(--slate);min-width:3.5rem;text-align:center}
/* ===== pricing ===== */
@property --ang{syntax:"";inherits:false;initial-value:0deg}
.bill{display:inline-grid;grid-template-columns:1fr 1fr;position:relative;background:var(--mist);border:1px solid var(--line);border-radius:999px;padding:4px;margin-bottom:2rem}
.bill button{position:relative;z-index:1;border:0;background:none;font:600 .95rem var(--font);color:var(--slate);padding:.6rem 1.3rem;border-radius:999px;cursor:pointer;min-height:44px;transition:color .3s}
.bill button[aria-pressed="true"]{color:#fff}
.bill button small{font-weight:600;color:var(--mint);margin-left:.35rem;transition:color .3s}
.bill button[aria-pressed="true"] small{color:#B6F0D8}
.bill::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);background:var(--ink);border-radius:999px;transition:transform .45s var(--ease)}
.bill[data-bill="q"]::before{transform:translateX(100%)}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:1.25rem;align-items:start}
.plan{position:relative;display:grid;gap:1.25rem;padding:2rem;border-radius:24px;background:var(--white);border:1px solid var(--line);transition:transform .4s var(--ease),box-shadow .4s}
.plan:hover{transform:translateY(-6px);box-shadow:0 30px 60px -36px rgba(11,19,32,.4)}
.plan.hot{border:2px solid transparent;background:linear-gradient(var(--white),var(--white)) padding-box,conic-gradient(from var(--ang),var(--cobalt),#7C5CFF,var(--amber),var(--cobalt)) border-box;animation:ang 5s linear infinite;box-shadow:0 30px 70px -40px rgba(47,88,232,.6)}
@keyframes ang{to{--ang:360deg}}
.plan .badge{position:absolute;top:-13px;left:2rem;background:var(--ink);color:#fff;font-size:.75rem;font-weight:600;padding:.3rem .8rem;border-radius:999px}
.plan h3{font-size:1.3rem;font-weight:700}
.plan .for{color:var(--slate);font-size:.925rem;margin-top:-.75rem}
.price{display:flex;align-items:baseline;gap:.35rem}
.price b{font-size:clamp(2.3rem,4vw,2.9rem);font-weight:800;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.price span{color:var(--slate);font-size:.9rem}
.per{font-size:.8rem;color:var(--slate);margin-top:-1rem;min-height:1.2em}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:.65rem;font-size:.95rem}
.plan li{display:grid;grid-template-columns:20px 1fr;gap:.6rem}
.plan li svg{width:18px;height:18px;color:var(--mint);margin-top:.2rem}
.plan .btn{width:100%}
.plan .btn-ghost{background:var(--white)}
.price-note{margin-top:1.25rem;font-size:.85rem;color:var(--slate)}
/* ===== blog ===== */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:1.5rem}
.post{display:grid;gap:1rem;align-content:start;text-decoration:none;color:var(--ink)}
.thumb{position:relative;aspect-ratio:16/10;max-width:100%;border-radius:20px;overflow:hidden;background:var(--mist)}
.thumb .art{position:absolute;inset:0;transition:transform 1s var(--ease)}
.post:hover .art{transform:scale(1.08) rotate(-1deg)}
.art.a1{background:radial-gradient(circle at 30% 70%,#2F58E8 0 18%,transparent 19%),radial-gradient(circle at 70% 35%,#FFC766 0 12%,transparent 13%),linear-gradient(rgba(47,88,232,.08) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(47,88,232,.08) 1px,transparent 1px) 0 0/24px 24px,#EEF2FF}
.art.a2{background:conic-gradient(from 200deg at 60% 60%,#7C5CFF,#2F58E8,#6D8BFF,#7C5CFF);}
.art.a2::after{content:"";position:absolute;left:12%;bottom:14%;width:46%;height:40%;border-radius:14px;background:rgba(255,255,255,.9);box-shadow:0 20px 40px -20px rgba(0,0,0,.4)}
.art.a3{background:radial-gradient(circle at 75% 30%,#0E9F6E 0 16%,transparent 17%),repeating-linear-gradient(135deg,#E7F7F0 0 14px,#D3F0E4 14px 28px)}
.art.a3::after{content:"";position:absolute;left:14%;top:22%;width:38%;height:48%;border-radius:18px 18px 18px 4px;background:#fff;box-shadow:0 20px 40px -24px rgba(0,0,0,.35)}
.post .meta{display:flex;gap:.75rem;font-size:.8rem;color:var(--slate)}
.post .meta b{color:var(--cobalt);font-weight:600}
.post h3{font-size:1.25rem;font-weight:700;line-height:1.3;letter-spacing:-.02em}
.post h3 span{background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .5s var(--ease)}
.post:hover h3 span,.post:focus-visible h3 span{background-size:100% 2px}
/* ===== FAQ ===== */
.faq-grid .section-head{position:sticky;top:calc(var(--header-h) + 2rem)}
@media (max-width:899px){.faq-grid .section-head{position:static}}
/* ===== site-wide extras ===== */
.cursor{position:fixed;left:0;top:0;z-index:90;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid var(--cobalt);border-radius:50%;pointer-events:none;opacity:0;display:grid;place-items:center;color:#fff;font-size:.72rem;font-weight:600;transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s,opacity .3s,border-color .3s}
.cursor.show{opacity:1}
.cursor.hover{width:54px;height:54px;margin:-27px 0 0 -27px;background:rgba(47,88,232,.1)}
.cursor.label{width:78px;height:78px;margin:-39px 0 0 -39px;background:var(--cobalt);border-color:var(--cobalt)}
.cursor span{opacity:0;transition:opacity .2s}
.cursor.label span{opacity:1}
/* ===== responsive refinements (checked at 390 / 820 / 1440) ===== */
.fc1{right:5%;top:16%}
.fc2{right:12%;top:auto;bottom:34%}
.fc3{right:20%;bottom:9%}
@media (max-width:1199px){.float-cards{display:none}}
@media (max-width:480px){
.hero-inner{padding-block:2.25rem 3rem}
.hero .ctas .btn{flex:1 1 100%}
}
.stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1023px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
.stats-grid{gap:.75rem}
.stat{padding:1.1rem 1rem .9rem}
.stat .val{font-size:2rem}
.stat .lbl{font-size:.8rem;line-height:1.35}
.stat svg{height:34px;margin-top:.4rem}
}
.plans{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.plan{display:flex;flex-direction:column}
.plan .btn{margin-top:auto}
@media (max-width:1023px){
.plan{padding:1.5rem 1.25rem}
.price b{font-size:1.9rem}
.plan ul{font-size:.875rem}
.plan .badge{left:1.25rem}
}
@media (max-width:719px){.plans{grid-template-columns:minmax(0,1fr);max-width:30rem}}
.bill button{white-space:nowrap}
@media (max-width:480px){.bill button{padding:.55rem .9rem;font-size:.875rem}}
.posts{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:719px){.posts{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
}
/* ===== extra motion layer ===== */
/* hero: rotating accent word */
.hero h1 .rot > span{background:none;display:inline-grid;animation:wordUp 1s var(--ease) both;animation-delay:calc(120ms + var(--i) * 80ms)}
.rw{grid-area:1/1;background:linear-gradient(90deg,var(--cobalt),#7C5CFF 55%,var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent;transform:translateY(105%);opacity:0;transition:transform .8s var(--ease),opacity .5s}
.rw.on{transform:none;opacity:1}
.rw.out{transform:translateY(-105%);opacity:0}
/* hero: cursor spotlight */
.hero .spot{position:absolute;inset:0;pointer-events:none;background:radial-gradient(460px circle at var(--sx,72%) var(--sy,42%),rgba(47,88,232,.11),transparent 65%)}
/* manifesto: words ink in as they scroll past */
.manifesto{position:relative;overflow:hidden;padding-block:clamp(4.5rem,10vw,8rem);background:radial-gradient(42% 70% at 92% 40%,rgba(124,92,255,.15),transparent 70%),radial-gradient(32% 50% at 78% 95%,rgba(245,158,11,.12),transparent 70%),radial-gradient(30% 50% at 0% 0%,rgba(47,88,232,.07),transparent 70%),#F8FAFF;border-block:1px solid var(--line)}
.manifesto::before{content:"";position:absolute;right:-4%;top:8%;width:46%;height:84%;pointer-events:none;background-image:radial-gradient(rgba(47,88,232,.34) 1.3px,transparent 1.5px);background-size:22px 22px;-webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent);mask-image:radial-gradient(closest-side,#000 30%,transparent)}
#results{background:linear-gradient(180deg,var(--mist) 0%,#FFFFFF 100%)}
.manifesto .container{position:relative;display:grid;gap:1.5rem}
.manifesto p{font-size:clamp(1.9rem,4.6vw,3.7rem);font-weight:700;letter-spacing:-.04em;line-height:1.14;max-width:22ch;color:var(--ink)}
.manifesto em{font-style:normal;color:var(--cobalt)}
.manifesto .mw{display:inline-block}
@supports (animation-timeline: view()){
.manifesto .mw{animation:ink linear both;animation-timeline:view();animation-range:cover 12% cover 42%}
}
@keyframes ink{from{color:#B8C1D0}}
/* scroll-velocity text band */
.vband{overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);gap:.25rem;padding-block:clamp(2.5rem,6vw,4.5rem);border-top:1px solid var(--line)}
.vrow{display:flex;width:max-content;will-change:transform}
.vrow span{display:inline-flex;align-items:center;gap:.4em;padding-right:.4em;font-size:clamp(2.6rem,8vw,6.5rem);font-weight:var(--heading-weight);letter-spacing:-.04em;line-height:1.08;white-space:nowrap;color:var(--ink)}
.vrow span::after{content:"";width:.26em;height:.26em;border-radius:.07em;background:var(--cobalt);transform:rotate(45deg)}
.vrow.outline span{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.vrow.outline span::after{background:var(--amber)}
/* back to top with scroll-progress ring */
.totop{position:fixed;right:24px;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:74;width:44px;height:44px;border-radius:50%;border:0;background:var(--white);color:var(--ink);box-shadow:0 10px 24px -10px rgba(11,19,32,.4);display:grid;place-items:center;cursor:pointer;opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;transition:opacity .3s,transform .4s var(--ease)}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop.show:hover{transform:translateY(-3px)}
.totop .ring{position:absolute;inset:0;width:44px;height:44px;transform:rotate(-90deg)}
.totop circle{fill:none;stroke-width:2.5}
.totop .rt{stroke:var(--line)}
.totop .rp{stroke:var(--cobalt);stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:round}
html.lock .totop{display:none}
/* centred section heads, academy callout, phone tidy-up */
#pricing .bill{display:grid;width:max-content;margin-inline:auto}
#pricing .price-note{text-align:center}
.plans{margin-inline:auto}
@media (max-width:720px){.totop{display:none}}
/* home-only scroll-driven pieces */
@supports (animation-timeline: view()){
.steps-line::after{animation:grow linear both;animation-timeline:view();animation-range:entry 40% cover 55%}
@media (max-width:899px){.steps-line::after{animation-name:growY}}
}
@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* =====================================================================
3. CONTACT (contact.html)
===================================================================== */
/* contact hero */
.quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1rem}
@media (max-width:899px){.quick{grid-template-columns:minmax(0,1fr)}}
.q-card{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:1rem;align-items:center;padding:1.15rem 1.25rem;border-radius:18px;background:rgba(255,255,255,.9);border:1px solid var(--line);color:var(--ink);text-decoration:none;box-shadow:0 20px 40px -32px rgba(11,19,32,.35);transition:transform .4s var(--ease),border-color .25s,box-shadow .4s}
.q-card:hover{transform:translateY(-4px);border-color:var(--cobalt);box-shadow:0 26px 44px -28px rgba(47,88,232,.55)}
.q-card .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--cobalt-soft);color:var(--cobalt);transition:background .3s,color .3s}
.q-card:hover .ic{background:var(--cobalt);color:#fff}
.q-card.q-wa .ic{background:#E3F8EC;color:#128C4A}
.q-card.q-wa:hover .ic{background:#25D366;color:#fff}
.q-card .ic svg{width:22px;height:22px}
.q-card small{display:block;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.q-card b{display:block;font-size:1.05rem;font-weight:700;letter-spacing:-.01em;overflow-wrap:anywhere}
.q-card span.hint{display:block;font-size:.85rem;color:var(--slate)}
/* main: form + sidebar */
.c-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media (max-width:959px){.c-grid{grid-template-columns:minmax(0,1fr)}}
.c-form-card{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:clamp(1.25rem,3.5vw,2.5rem);box-shadow:0 40px 80px -50px rgba(11,19,32,.35);display:grid;gap:1.5rem}
.c-form-card h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:var(--heading-weight)}
.c-form-card .intro{color:var(--slate);margin-top:.5rem}
form.lead{display:grid;gap:1.1rem}
.c-form-card .field textarea{min-height:130px}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.form-actions .btn{min-width:14rem}
.c-side{display:grid;gap:1.25rem}
.side-card{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:1.5rem;display:grid;gap:1.1rem}
.side-card h3{font-size:1.25rem;font-weight:700;letter-spacing:-.02em}
.next-steps{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.next-steps::before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:2px;background:linear-gradient(180deg,var(--cobalt),var(--amber));border-radius:2px;opacity:.35}
.next-steps li{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:1rem;padding-block:.6rem}
.next-steps .n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--white);border:2px solid var(--cobalt);color:var(--cobalt);font-weight:800;font-size:.9rem;z-index:1}
.next-steps li:last-child .n{border-color:var(--amber);color:var(--amber-text)}
.next-steps b{display:block;font-weight:600;margin-top:.35rem}
.next-steps p{color:var(--slate);font-size:.9rem}
.map{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:16px;overflow:hidden;background:
linear-gradient(115deg,transparent 46%,#fff 46%,#fff 50%,transparent 50%),
linear-gradient(25deg,transparent 60%,#fff 60%,#fff 63%,transparent 63%),
linear-gradient(rgba(47,88,232,.08) 1px,transparent 1px) 0 0/28px 28px,
linear-gradient(90deg,rgba(47,88,232,.08) 1px,transparent 1px) 0 0/28px 28px,
radial-gradient(40% 50% at 75% 30%,rgba(14,159,110,.18),transparent 70%),
#EEF2FF;border:1px solid var(--line)}
.pin{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-44px 0 0 -22px;color:var(--cobalt);filter:drop-shadow(0 8px 10px rgba(47,88,232,.35));animation:pinDrop .9s var(--ease) .3s both}
.pin svg{width:44px;height:44px}
.pin-pulse{position:absolute;left:50%;top:50%;width:18px;height:8px;margin:-4px 0 0 -9px;border-radius:50%;background:rgba(47,88,232,.35)}
.pin-pulse::after{content:"";position:absolute;inset:-6px -12px;border-radius:50%;border:2px solid rgba(47,88,232,.45);animation:pulse 2.2s ease-out infinite}
@keyframes pinDrop{from{transform:translateY(-40px);opacity:0}}
@keyframes pulse{from{transform:scale(.6);opacity:1}to{transform:scale(2.4);opacity:0}}
.map-label{position:absolute;left:50%;top:50%;transform:translate(-50%,14px);background:var(--ink);color:#fff;font-size:.75rem;font-weight:600;padding:.25rem .6rem;border-radius:999px;white-space:nowrap}
.office-lines{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.office-lines li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:.7rem;align-items:start;color:var(--slate)}
.office-lines svg{width:18px;height:18px;margin-top:.2rem;color:var(--cobalt)}
.office-lines a{color:var(--ink);font-weight:500;text-decoration:none;overflow-wrap:anywhere}
.office-lines a:hover{color:var(--cobalt);text-decoration:underline}
.map-link{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;text-decoration:none}
.map-link:hover{text-decoration:underline}
/* FAQ block */
.faq-wrap{background:var(--mist);border-block:1px solid var(--line)}
.faq-head{display:grid;gap:1rem}
.faq-head h2{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:var(--heading-weight)}
.faq-head p{color:var(--slate)}
.faq-wrap .pm{background:var(--white);border:1px solid var(--line)}
.faq-wrap details[open] .pm{border-color:var(--cobalt)}
/* =====================================================================
4. ABOUT (about.html)
===================================================================== */
/* hero: text + 3D orbit of services */
.about-hero .split{align-items:center}
.orbit{position:relative;width:min(100%,460px);aspect-ratio:1;justify-self:center;container-type:inline-size;perspective:1100px}
.orbit-plane{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(62deg) rotateZ(-8deg);transition:transform .8s var(--ease)}
.ring{position:absolute;border-radius:50%;transform-style:preserve-3d;animation:orbitSpin 36s linear infinite}
.ring-1{inset:6%;border:1.5px solid rgba(47,88,232,.28);background:radial-gradient(circle,transparent 58%,rgba(47,88,232,.06) 70%,transparent 71%)}
.ring-2{inset:24%;border:1.5px dashed rgba(124,92,255,.35);animation-duration:26s;animation-direction:reverse}
.slot{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:rotate(var(--a)) translateX(44cqw) rotate(calc(var(--a) * -1))}
.ring-2 .slot{transform:rotate(var(--a)) translateX(26cqw) rotate(calc(var(--a) * -1))}
.chip{position:absolute;left:0;top:0;translate:-50% -100%;transform-origin:50% 100%;white-space:nowrap;display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .85rem;border-radius:999px;background:var(--white);border:1px solid var(--line);box-shadow:0 14px 30px -14px rgba(11,19,32,.35);font-size:.85rem;font-weight:600;color:var(--ink);transform:rotateZ(8deg) rotateX(-62deg);animation:orbitCounter 36s linear infinite}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cobalt)}
.chip.is-mint::before{background:var(--mint)}
.chip.is-amber::before{background:var(--amber)}
.chip.is-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.is-dark::before{background:#9DB4FF}
.ring-2 .chip{animation-duration:26s;animation-direction:reverse}
@keyframes orbitSpin{to{transform:rotateZ(360deg)}}
@keyframes orbitCounter{from{transform:rotateZ(8deg) rotateX(-62deg)}to{transform:rotateZ(-352deg) rotateX(-62deg)}}
.core{position:absolute;left:50%;top:50%;width:28cqw;aspect-ratio:1;margin:-14cqw 0 0 -14cqw;border-radius:50%;display:grid;place-content:center;justify-items:center;gap:.15rem;background:radial-gradient(circle at 35% 30%,#fff,#EEF2FF 70%);border:1px solid var(--line);box-shadow:0 40px 60px -30px rgba(47,88,232,.55),inset 0 -8px 20px rgba(47,88,232,.08);transform:rotateZ(8deg) rotateX(-62deg)}
.core-mark{width:4.2cqw;height:4.2cqw;min-width:22px;min-height:22px;border-radius:7px;background:conic-gradient(from 0deg,var(--cobalt),#7C9BFF,var(--amber),var(--cobalt));animation:spin 8s linear infinite}
.core b{font-size:clamp(1rem,5.2cqw,1.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.core small{font-size:.72rem;color:var(--slate);font-weight:500}
.orbit-note{position:absolute;display:flex;align-items:center;gap:.45rem;padding:.55rem .9rem;border-radius:14px;background:rgba(255,255,255,.92);border:1px solid var(--line);box-shadow:0 18px 36px -20px rgba(11,19,32,.35);font-size:.85rem;color:var(--slate);animation:float 6s ease-in-out infinite}
.orbit-note b{color:var(--ink);font-size:1.1rem}
.on-1{left:0;bottom:6%}
.on-2{right:0;top:4%;animation-delay:-3s}
.orbit-note .dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(14,159,110,.18)}
@keyframes float{50%{transform:translateY(-10px)}}
@media (max-width:899px){.orbit{width:min(100%,380px)}}
@media (max-width:560px){.orbit{width:84%;margin-block:.5rem}.on-1{display:none}.on-2{right:-6%;top:0}.chip{font-size:.7rem;padding:.3rem .55rem;gap:.3rem}.chip::before{width:6px;height:6px}.core small{display:none}}
/* numbers */
.about-stats{background:var(--white)}
.about-stat{display:grid;gap:.35rem;padding-left:1.25rem;border-left:2px solid var(--line);transition:border-color .4s}
.about-stat:hover{border-color:var(--cobalt)}
.about-stat p{color:var(--slate);font-size:.95rem}
@media (max-width:640px){.about-stats .grid-4,.about-stats.grid-4{--cols:2;row-gap:1.75rem}.about-stat{padding-left:.9rem}.about-stat .big-number{font-size:2rem}.about-stat p{font-size:.85rem}}
/* story + founder note */
.story{align-items:start}
.founder-card{margin:0;gap:1.25rem;padding:clamp(1.5rem,4vw,2.5rem);background:linear-gradient(160deg,#F4F7FF,#fff 60%)}
.founder-card blockquote{margin:0;font-size:clamp(1.25rem,2.4vw,1.6rem);font-weight:600;letter-spacing:-.02em;line-height:1.35;color:var(--ink)}
.founder-card figcaption b{display:block}
.founder-card figcaption small{color:var(--slate);font-size:.875rem}
@media (min-width:900px){.founder-card{position:sticky;top:calc(var(--header-h) + 2rem)}}
/* journey timeline: line fills as you scroll (about.js sets --p) */
.timeline{--p:1;position:relative;list-style:none;margin:0 auto;padding:0;max-width:60rem;display:grid;gap:1.5rem}
.timeline::before,.timeline::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;border-radius:3px;background:var(--line)}
.timeline::after{background:linear-gradient(var(--cobalt),#7C5CFF,var(--amber));transform-origin:50% 0;transform:scaleY(var(--p))}
.tl-item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:4rem}
.tl-card{display:grid;gap:.6rem;padding:1.5rem;background:var(--white);border:1px solid var(--line);border-radius:20px;transition:transform .6s var(--ease),opacity .6s,box-shadow .4s,border-color .4s}
.tl-card p{color:var(--slate)}
.tl-item:nth-child(odd) .tl-card{grid-column:1;text-align:right;justify-items:end}
.tl-item:nth-child(even) .tl-card{grid-column:2}
.tl-dot{position:absolute;left:50%;top:1.9rem;z-index:1;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--white);border:3px solid var(--line);transition:border-color .4s,transform .4s var(--ease),box-shadow .4s}
.timeline.js .tl-item:not(.on) .tl-card{opacity:.35;transform:translateY(16px)}
.tl-item.on .tl-dot{border-color:var(--cobalt);transform:scale(1.2);box-shadow:0 0 0 6px rgba(47,88,232,.15)}
.tl-item.on .tl-card{border-color:rgba(47,88,232,.3);box-shadow:0 24px 40px -30px rgba(47,88,232,.55)}
@media (max-width:760px){
.timeline::before,.timeline::after{left:9px}
.tl-item{grid-template-columns:minmax(0,1fr);padding-left:2.5rem}
.tl-item:nth-child(n) .tl-card{grid-column:1;text-align:left;justify-items:start}
.tl-dot{left:9px}
}
/* values: cursor spotlight on cards (about.js sets --mx/--my) */
.value-card{overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s,border-color .25s}
.value-card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(47,88,232,.12),transparent 70%)}
.value-card:hover{transform:translateY(-4px);border-color:rgba(47,88,232,.35);box-shadow:0 26px 44px -28px rgba(47,88,232,.5)}
.value-card:hover::before{opacity:1}
.value-card:hover .icon-box{background:var(--cobalt);color:#fff}
.value-card > *{position:relative}
/* comparison table */
.compare{border:1px solid #253146;border-radius:20px;overflow:hidden}
.cmp-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);border-top:1px solid #253146;transition:background .3s}
.cmp-row:first-child{border-top:0}
.cmp-row:not(.cmp-head):hover{background:#111C2E}
.cmp-row > span{padding:1.1rem 1.4rem}
.cmp-row > span:nth-child(2){color:#7F8BA0;text-decoration:line-through;text-decoration-color:rgba(217,45,32,.6)}
.cmp-row > span:nth-child(3){color:#fff;font-weight:600;background:rgba(47,88,232,.12);display:flex;gap:.6rem;align-items:start}
.cmp-row:not(.cmp-head) > span:nth-child(3)::before{content:"";flex:none;width:1.2rem;height:1.2rem;margin-top:.15rem;border-radius:50%;background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10.5l3 3 7-7' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.cmp-row [role="rowheader"]{color:#fff;font-weight:600}
.cmp-head > span{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#AEB8CA;text-decoration:none!important}
.cmp-head > span:nth-child(3){color:#9DB4FF}
@media (max-width:640px){
.cmp-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cmp-row > [role="rowheader"]{grid-column:1/-1;padding-bottom:0}
.cmp-head > span:first-child{display:none}
.cmp-row > span{padding:.9rem 1rem}
}
/* team */
.member{padding:.75rem .75rem 1.25rem}
.member .stack-sm{padding-inline:.5rem}
.member-photo{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(150deg,hsl(var(--h) 80% 62%),hsl(calc(var(--h) + 40) 75% 45%))}
.member-photo::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.35),transparent 55%);transition:transform .6s var(--ease)}
.member-photo span{font-size:clamp(2.5rem,6vw,3.5rem);font-weight:800;letter-spacing:-.04em;color:rgba(255,255,255,.92);transition:transform .6s var(--ease)}
.member-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.member:hover .member-photo span,.member:hover .member-photo img{transform:scale(1.08)}
.member:hover .member-photo::after{transform:translate(20%,15%)}
.member p{color:var(--slate)}
@media (max-width:640px){.team{grid-template-columns:repeat(2,minmax(0,1fr))}.member .h3{font-size:1.05rem}}
/* =====================================================================
5. BLOG (blogs.html)
===================================================================== */
/* hero search */
.blog-search{position:relative;display:flex;align-items:center;max-width:36rem;margin-top:.5rem}
.blog-search svg{position:absolute;left:1.1rem;width:20px;height:20px;color:var(--slate);pointer-events:none}
.blog-search input{flex:1;min-width:0;font:inherit;color:var(--ink);min-height:58px;padding:0 3.25rem 0 3.1rem;border:1.5px solid var(--line);border-radius:999px;background:rgba(255,255,255,.9);box-shadow:0 18px 40px -26px rgba(47,88,232,.45);transition:border-color .2s,box-shadow .2s}
.blog-search input:hover{border-color:#C7D0DE}
.blog-search input:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 4px rgba(47,88,232,.15),0 18px 40px -26px rgba(47,88,232,.45)}
.blog-search kbd{position:absolute;right:1rem;display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--line);border-radius:7px;background:var(--mist);font:600 .8rem var(--font);color:var(--slate)}
.blog-search input:focus ~ kbd{opacity:0}
@media (pointer:coarse){.blog-search kbd{display:none}}
/* featured article */
.featured{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding:clamp(.75rem,1.5vw,1rem);border:1px solid var(--line);border-radius:28px;background:var(--white);box-shadow:0 40px 70px -50px rgba(11,19,32,.4)}
.featured-body{display:grid;gap:1.1rem;padding:clamp(.5rem,2vw,1.5rem) clamp(.5rem,2vw,1.5rem) clamp(.5rem,2vw,1.5rem) 0}
.featured h2 a{color:var(--ink);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 3px no-repeat;transition:background-size .5s var(--ease)}
.featured h2 a:hover,.featured:hover h2 a{background-size:100% 3px}
.featured-art{position:relative;display:block;aspect-ratio:4/3;border-radius:20px;overflow:hidden}
.author{display:flex;align-items:center;gap:.7rem}
.author .avatar{width:42px;height:42px;font-size:.85rem}
.author b{display:block;font-size:.95rem}
.author small{color:var(--slate);font-size:.82rem}
@media (max-width:899px){.featured{grid-template-columns:minmax(0,1fr)}.featured-body{padding:0 .5rem .75rem}}
/* featured art: a budget chart whose bars grow and settle */
.art.a-feature{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;gap:6%;padding:0 12% 14%;background:radial-gradient(60% 50% at 80% 10%,rgba(245,158,11,.35),transparent 70%),linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px) 0 0/100% 20%,linear-gradient(150deg,#1D2F6F,#2F58E8 55%,#7C5CFF);transition:transform 1s var(--ease)}
.featured:hover .a-feature{transform:scale(1.04)}
.a-feature span{flex:1;border-radius:10px 10px 4px 4px;background:linear-gradient(rgba(255,255,255,.95),rgba(255,255,255,.6));transform-origin:50% 100%;animation:barGrow 1.2s var(--ease) both,barBreathe 5s ease-in-out 1.4s infinite alternate}
.a-feature .bar-a{height:34%;animation-delay:.2s,1.4s}
.a-feature .bar-b{height:52%;animation-delay:.32s,1.9s}
.a-feature .bar-c{height:70%;animation-delay:.44s,2.4s}
.a-feature .bar-d{height:88%;animation-delay:.56s,2.9s;background:linear-gradient(#FFD27A,var(--amber))}
@keyframes barGrow{from{transform:scaleY(0)}}
@keyframes barBreathe{to{transform:scaleY(.9)}}
/* list header + topic chips */
.list-head{margin-bottom:1.25rem}
.list-head p{font-variant-numeric:tabular-nums}
.topic-bar{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--header-h));z-index:5;display:flex;gap:.5rem;margin:0 calc(var(--gutter) * -1) 2rem;padding:.75rem var(--gutter);overflow-x:auto;scrollbar-width:none;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.topic-bar::-webkit-scrollbar{display:none}
.topic{flex:none;display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 1rem;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink);font:500 .9rem var(--font);cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .3s var(--ease)}
.topic span{display:grid;place-items:center;min-width:1.5rem;height:1.5rem;padding:0 .35rem;border-radius:999px;background:var(--mist);color:var(--slate);font-size:.75rem;font-weight:600;font-variant-numeric:tabular-nums;transition:background .25s,color .25s}
.topic:hover{border-color:var(--cobalt);transform:translateY(-2px)}
.topic[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.topic[aria-pressed="true"] span{background:rgba(255,255,255,.16);color:#fff}
/* the header hides while scrolling down, so the chips can sit at the very top then */
.site-header.hide ~ main .topic-bar{top:env(safe-area-inset-top,0px)}
.topic-bar{transition:top .4s var(--ease)}
/* post grid: builds on the home page .posts / .post / .thumb */
.post-grid{list-style:none;margin:0;padding:0;row-gap:2.5rem}
.post-grid > li{display:grid}
.post .excerpt{color:var(--slate);font-size:.95rem;line-height:1.55}
.post-grid .thumb{box-shadow:0 0 0 1px var(--line) inset}
.art.flip{scale:-1 1}
.art.a4{background:linear-gradient(#fff,#fff) 14% 26%/72% 8% no-repeat,linear-gradient(#DCE4F7,#DCE4F7) 14% 44%/44% 6% no-repeat,linear-gradient(#DCE4F7,#DCE4F7) 14% 55%/58% 6% no-repeat,linear-gradient(var(--amber),var(--amber)) 14% 74%/26% 11% no-repeat,linear-gradient(#fff,#fff) 10% 18%/80% 70% no-repeat,linear-gradient(135deg,#FDE9C8,#FEF3E2)}
.art.a4::after{content:"";position:absolute;left:10%;top:12%;width:80%;height:8%;border-radius:10px 10px 0 0;background:radial-gradient(circle at 5% 50%,#F87171 0 4px,transparent 5px),radial-gradient(circle at 9% 50%,#FBBF24 0 4px,transparent 5px),radial-gradient(circle at 13% 50%,#34D399 0 4px,transparent 5px),#F1F4FA}
.art.a5{background:conic-gradient(from 90deg at 50% 50%,#FF8FB1 0 25%,#FFC766 0 50%,#7C5CFF 0 75%,#2F58E8 0) 50% 50%/50% 50%,#FCE7F0}
.art.a5::after{content:"";position:absolute;inset:18% 24%;border-radius:22px;border:6px solid #fff;box-shadow:0 20px 40px -20px rgba(0,0,0,.4)}
.art.a6{background:repeating-linear-gradient(0deg,transparent 0 22px,rgba(14,159,110,.08) 22px 23px),linear-gradient(160deg,#E7F7F0,#CFEFE2)}
.art.a6::before{content:"";position:absolute;left:22%;top:26%;width:56%;height:48%;border-radius:12px;background:#fff;box-shadow:0 24px 40px -22px rgba(0,0,0,.35)}
.art.a6::after{content:"";position:absolute;left:22%;top:26%;width:56%;height:30%;background:linear-gradient(to bottom right,transparent calc(50% - 1.5px),var(--mint) calc(50% - 1.5px),var(--mint) calc(50% + 1.5px),transparent calc(50% + 1.5px)) 0 0/50% 100% no-repeat,linear-gradient(to bottom left,transparent calc(50% - 1.5px),var(--mint) calc(50% - 1.5px),var(--mint) calc(50% + 1.5px),transparent calc(50% + 1.5px)) 100% 0/50% 100% no-repeat}
/* filter animation: cards glide to new places; the page-wide fade is off during it */
html.vt-filter::view-transition-old(root),html.vt-filter::view-transition-new(root){animation:none}
::view-transition-group(*){animation-duration:.45s;animation-timing-function:var(--ease)}
.empty-state{display:grid;justify-items:center;gap:.75rem;text-align:center;padding:3rem 1rem;border:1.5px dashed var(--line);border-radius:20px}
.load-wrap{display:flex;justify-content:center;margin-top:2.5rem}
.load-wrap:has(> [hidden]){display:none}
/* newsletter */
.newsletter{background:radial-gradient(50% 80% at 90% 10%,rgba(47,88,232,.35),transparent 70%),radial-gradient(40% 60% at 0% 100%,rgba(124,92,255,.25),transparent 70%),var(--ink)}
.news-form{display:grid;gap:.75rem;padding:clamp(1.25rem,3vw,2rem);border:1px solid #253146;border-radius:24px;background:rgba(255,255,255,.04)}
.news-form label{color:#fff}
.news-row{display:flex;gap:.6rem}
.news-row input{flex:1;min-width:0}
.news-form .fine{color:#8E99AE}
.news-form .form-status.ok{color:#5FE0B0}
.news-form .form-status.bad,.news-form .err{color:#FF8A80}
@media (max-width:480px){.news-row{flex-direction:column}}
/* =====================================================================
6. PORTFOLIO (portfolio.html)
Also uses from BLOG: .list-head .topic-bar .topic .empty-state
===================================================================== */
/* hero figures */
.pf-stats{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;margin:.75rem 0 0}
.pf-stats div{display:grid;gap:.1rem;padding-left:1rem;border-left:2px solid rgba(47,88,232,.25)}
.pf-stats dt{order:2;font-size:.875rem;color:var(--slate)}
.pf-stats dd{order:1;margin:0;font-size:clamp(1.8rem,3.4vw,2.4rem);font-weight:var(--heading-weight);letter-spacing:-.04em;line-height:1.1;font-variant-numeric:tabular-nums}
/* project grid */
.work-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 1.5rem}
@media (max-width:1023px){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.work-grid{grid-template-columns:minmax(0,1fr)}}
.work-grid > li{display:grid;scroll-margin-top:calc(var(--header-h) + 6rem)}
.project{position:relative;display:grid;grid-template-rows:auto 1fr;gap:1.1rem;padding:.7rem;border:1px solid var(--line);border-radius:24px;background:var(--white);transition:transform .45s var(--ease),box-shadow .45s,border-color .3s}
.project:hover{transform:translateY(-6px);border-color:hsl(var(--h,225) 60% 75%);box-shadow:0 34px 60px -40px rgba(11,19,32,.45)}
.project:has(.project-open:focus-visible){outline:3px solid var(--amber);outline-offset:3px}
.project-body{display:grid;gap:.65rem;align-content:start;padding:0 .6rem .6rem}
.project-body > p{color:var(--slate);font-size:.95rem}
.mini-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.mini-tags li{font-size:.75rem;font-weight:500;color:var(--slate);padding:.2rem .6rem;border-radius:999px;background:var(--mist)}
.project-open{justify-self:start;margin-top:.35rem;display:inline-flex;align-items:center;gap:.4rem;padding:0;border:0;background:none;color:var(--cobalt);font:600 .95rem var(--font);cursor:pointer}
.project-open::after{content:"";position:absolute;inset:0;border-radius:24px} /* whole card is clickable */
.project-open:focus-visible{outline:none}
.project-open span{transition:transform .35s var(--ease)}
.project:hover .project-open span{transform:translateX(5px)}
/* preview: a tilting browser window or phone drawn in CSS, coloured by --h */
.pv{--h:225;position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;perspective:900px;background:radial-gradient(70% 60% at 85% 0%,hsl(calc(var(--h) + 40) 90% 80% / .7),transparent 70%),linear-gradient(150deg,hsl(var(--h) 85% 94%),hsl(var(--h) 70% 86%))}
.pv::before{content:"";position:absolute;inset:0;background-image:linear-gradient(hsl(var(--h) 60% 50% / .08) 1px,transparent 1px),linear-gradient(90deg,hsl(var(--h) 60% 50% / .08) 1px,transparent 1px);background-size:26px 26px}
.pv-screen{position:absolute;left:11%;right:11%;top:13%;bottom:-10%;display:flex;flex-direction:column;border-radius:12px 12px 0 0;background:var(--white);overflow:hidden;box-shadow:0 30px 50px -24px hsl(var(--h) 60% 25% / .55);transform:rotateX(var(--rx,4deg)) rotateY(var(--ry,0deg)) translateY(0);transform-origin:50% 100%;transition:transform .5s var(--ease)}
.project:hover .pv-screen{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4%)}
.pv-bar{flex:none;display:flex;align-items:center;gap:5px;height:26px;padding:0 10px;background:#F1F4FA;border-bottom:1px solid var(--line)}
.pv-bar i{width:7px;height:7px;border-radius:50%;background:#F87171}
.pv-bar i:nth-child(2){background:#FBBF24}
.pv-bar i:nth-child(3){background:#34D399}
.pv-bar span{margin-left:8px;padding:0 .6rem;height:16px;display:flex;align-items:center;border-radius:6px;background:var(--white);font-size:.62rem;color:var(--slate);white-space:nowrap;overflow:hidden}
.pv-page{flex:1;display:flex;flex-direction:column;gap:7px;padding:10px}
.pv-hero{flex:none;height:42%;min-height:40px;border-radius:8px;background:linear-gradient(120deg,hsl(var(--h) 75% 52%),hsl(calc(var(--h) + 35) 80% 62%))}
.pv-line{flex:none;height:7px;width:78%;border-radius:4px;background:hsl(var(--h) 30% 88%)}
.pv-line.short{width:52%}
.pv-cards{flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;height:22%;min-height:22px}
.pv-cards i,.pv-grid i{border-radius:6px;background:hsl(var(--h) 60% 94%);border:1px solid hsl(var(--h) 40% 88%)}
.pv-grid{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:5px;height:34%}
.pv-grid i:nth-child(2),.pv-grid i:nth-child(3){background:hsl(calc(var(--h) + 30) 80% 80%)}
.pv-cards.pv-shop{height:32%}
.pv-shop i{background:linear-gradient(hsl(var(--h) 85% 72%) 0 62%,hsl(var(--h) 60% 96%) 62%)}
.pv-chat{display:grid;gap:5px}
.pv-chat i{height:14px;width:70%;border-radius:0 8px 8px 8px;background:hsl(var(--h) 30% 92%)}
.pv-chat i.me{justify-self:end;width:55%;border-radius:8px 0 8px 8px;background:#DCF8C6}
.pv.is-phone .pv-screen{left:31%;right:31%;top:9%;bottom:-14%;border-radius:22px 22px 0 0;border:5px solid var(--ink);border-bottom:0}
.pv.is-phone .pv-page{padding:18px 7px 7px;gap:6px}
.pv.is-phone .pv-hero{height:34%}
.pv-notch{position:absolute;left:50%;top:5px;width:34%;height:8px;margin-left:-17%;border-radius:6px;background:var(--ink);z-index:1}
.pv-map{position:relative;background:linear-gradient(115deg,transparent 46%,#fff 46%,#fff 50%,transparent 50%),linear-gradient(rgba(47,88,232,.08) 1px,transparent 1px) 0 0/18px 18px,linear-gradient(90deg,rgba(47,88,232,.08) 1px,transparent 1px) 0 0/18px 18px,hsl(var(--h) 50% 94%);justify-content:flex-end}
.pv-pin{position:absolute;left:46%;top:22%;width:22px;height:22px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--danger);box-shadow:0 6px 10px rgba(217,45,32,.35);animation:pinBob 2.4s ease-in-out infinite}
.pv-pin::after{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff}
@keyframes pinBob{50%{translate:0 -5px}}
.pv-map .pv-line{background:rgba(255,255,255,.95)}
.pv-badge{position:absolute;left:.8rem;bottom:.8rem;z-index:2;display:flex;align-items:baseline;gap:.4rem;padding:.45rem .8rem;border-radius:12px;background:rgba(255,255,255,.95);box-shadow:0 14px 28px -14px rgba(11,19,32,.45);font-size:.78rem;font-weight:500;color:var(--slate);transition:transform .5s var(--ease)}
.pv-badge b{font-size:1.15rem;font-weight:var(--heading-weight);letter-spacing:-.03em;color:hsl(var(--h) 70% 36%);font-variant-numeric:tabular-nums}
.project:hover .pv-badge{transform:translateY(-6px) scale(1.04)}
/* case study pop-up */
.case-dialog{--h:225;width:min(56rem,calc(100vw - 2rem));max-height:min(88dvh,60rem);padding:0;border:0;border-top:6px solid hsl(var(--h) 72% 52%);border-radius:24px;background:var(--white);color:var(--ink);overflow:auto;overscroll-behavior:contain;box-shadow:0 50px 100px -40px rgba(11,19,32,.6)}
.case-dialog::backdrop{background:rgba(11,19,32,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.case-dialog[open]{animation:dlgIn .45s var(--ease)}
.case-dialog[open]::backdrop{animation:fadeIn .35s ease}
.case-dialog.closing{animation:dlgOut .22s ease-in forwards}
.case-dialog.closing::backdrop{animation:fadeIn .22s ease-in reverse forwards}
@keyframes dlgIn{from{opacity:0;transform:translateY(28px) scale(.97)}}
@keyframes dlgOut{to{opacity:0;transform:translateY(16px) scale(.98)}}
@keyframes fadeIn{from{opacity:0}}
.cd-close{position:sticky;top:.75rem;z-index:2;display:block;margin:.75rem .75rem -3.5rem auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--white);color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;transition:transform .3s var(--ease),background .2s}
.cd-close:hover{transform:rotate(90deg);background:var(--mist)}
.cd-body{display:grid;gap:2rem;padding:clamp(1.5rem,4vw,2.75rem)}
.cd-head{display:grid;gap:.75rem;padding-right:2.5rem}
.cd-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.cd-results div{display:grid;gap:.2rem;padding:1.1rem 1.2rem;border-radius:16px;background:hsl(var(--h) 70% 96%);animation:rise .6s var(--ease) both}
.cd-results div:nth-child(2){animation-delay:.08s}
.cd-results div:nth-child(3){animation-delay:.16s}
.cd-results b{font-size:clamp(1.6rem,3.4vw,2.2rem);font-weight:var(--heading-weight);letter-spacing:-.04em;line-height:1.1;color:hsl(var(--h) 70% 34%);font-variant-numeric:tabular-nums}
.cd-results span{font-size:.875rem;color:var(--slate)}
.cd-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem}
.cd-cols p{color:var(--slate)}
.cd-quote{margin:0;padding:1.25rem 1.5rem;border-left:3px solid hsl(var(--h) 72% 52%);border-radius:0 14px 14px 0;background:var(--mist);font-size:1.1rem;font-weight:500;line-height:1.5}
.cd-quote cite{display:block;margin-top:.5rem;font-size:.875rem;font-style:normal;font-weight:400;color:var(--slate)}
.cd-foot{position:sticky;bottom:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;padding:1rem clamp(1.5rem,4vw,2.75rem);border-top:1px solid var(--line);background:rgba(255,255,255,.96)}
@media (max-width:640px){
.cd-results{grid-template-columns:minmax(0,1fr)}
.cd-results div{grid-template-columns:auto 1fr;align-items:baseline;gap:.75rem}
.cd-cols{grid-template-columns:minmax(0,1fr)}
.case-dialog{width:100vw;max-width:100vw;max-height:92dvh;margin:auto 0 0;border-radius:24px 24px 0 0}
}
/* industries marquee */
.industries{overflow:hidden}
.industries .eyebrow{margin-bottom:1.25rem}
.marquee{display:grid;gap:.5rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content}
.marquee.ready .marquee-track{animation:marquee 60s linear infinite}
.marquee.ready .marquee-track.reverse{animation-direction:reverse;animation-duration:70s}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{display:inline-flex;align-items:center;gap:1.5rem;padding-right:1.5rem;font-size:clamp(1.6rem,3.6vw,2.8rem);font-weight:var(--heading-weight);letter-spacing:-.035em;line-height:1.3;color:var(--ink);white-space:nowrap}
.marquee-track span::after{content:"";width:.35em;height:.35em;border-radius:50%;background:var(--cobalt)}
.marquee-track.reverse span{color:transparent;-webkit-text-stroke:1.2px #9AA6BC}
.marquee-track.reverse span::after{background:var(--amber)}
@keyframes marquee{to{transform:translateX(-50%)}}
/* closing call to action */
.pf-cta{display:grid;grid-template-columns:minmax(0,1.4fr) auto;align-items:end;gap:2rem;padding:clamp(1.75rem,5vw,3.5rem);border-radius:28px;background:radial-gradient(50% 90% at 100% 0%,rgba(124,92,255,.14),transparent 70%),radial-gradient(40% 80% at 0% 100%,rgba(245,158,11,.12),transparent 70%),#F6F8FF;border:1px solid var(--line)}
@media (max-width:899px){.pf-cta{grid-template-columns:minmax(0,1fr);align-items:start}}
/* =====================================================================
7. SERVICES (services/index.html and services/*.html)
Each service page sets its accent hue on .
Also uses: .plans/.plan (HOME), .faq-wrap/.faq-head (CONTACT)
===================================================================== */
.sub-btn[data-current]{color:var(--cobalt)}
.svc,.svc-tile,.related{--h:225}
.svc-ic{background:hsl(var(--h) 80% 95%);color:hsl(var(--h) 65% 42%)}
.card-hover:hover .svc-ic{background:hsl(var(--h) 65% 48%);color:#fff}
/* hero dashboard card */
.svc-hero .split{align-items:center}
.svc-card{position:relative;display:grid;gap:1rem;width:min(100%,30rem);justify-self:center;padding:1.5rem;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.92);box-shadow:0 40px 80px -40px hsl(var(--h) 60% 30% / .45);animation:rise .9s var(--ease) both,float 7s ease-in-out 1s infinite;animation-delay:var(--d,0ms),1s}
.svc-card::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:25px;background:linear-gradient(140deg,hsl(var(--h) 80% 70%),transparent 40%,transparent 60%,hsl(calc(var(--h) + 50) 80% 70%));opacity:.6}
.svc-card-title{display:flex;align-items:center;gap:.7rem;font-weight:600;font-size:.95rem}
.svc-card-title .icon-box{width:40px;height:40px;border-radius:12px}
.svc-card-title .icon-box svg{width:20px;height:20px}
.live{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:600;color:var(--mint)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--mint);animation:livePulse 1.8s ease-out infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(14,159,110,.5)}100%{box-shadow:0 0 0 8px rgba(14,159,110,0)}}
.svc-value{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .9rem}
.svc-value b{font-size:clamp(2.4rem,5vw,3.2rem);font-weight:var(--heading-weight);letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.svc-delta{font-size:.85rem;font-weight:600;padding:.2rem .6rem;border-radius:999px;background:#E7F7F0;color:var(--mint)}
.svc-card .spark{width:100%;height:96px;overflow:visible}
.svc-card .spark-fill{fill:hsl(var(--h) 80% 60% / .14)}
.svc-card .spark-line{fill:none;stroke:hsl(var(--h) 70% 50%);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.8s var(--ease) .6s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.svc-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.svc-chips span{font-size:.8rem;font-weight:500;padding:.35rem .75rem;border-radius:999px;background:var(--mist);border:1px solid var(--line)}
.svc-note{font-size:.72rem;color:var(--slate);text-align:right;margin-top:-.25rem}
@media (prefers-reduced-motion:reduce){.svc-card .spark-line{stroke-dashoffset:0}}
/* pain points */
.pain{border-top:3px solid hsl(var(--h) 70% 60%)}
.pain-x{width:36px;height:36px;border-radius:50%;background:#FEECEB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 6l8 8M14 6l-8 8' stroke='%23D92D20' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat}
/* what's included */
.inc-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media (max-width:760px){.inc-list{grid-template-columns:minmax(0,1fr)}}
.inc-list li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:1rem;align-items:start;padding:1.25rem;border:1px solid var(--line);border-radius:18px;background:var(--white);transition:border-color .3s,transform .4s var(--ease)}
.inc-list li:hover{border-color:hsl(var(--h) 60% 70%);transform:translateX(4px)}
.inc-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:hsl(var(--h) 80% 95%);color:hsl(var(--h) 65% 42%)}
.inc-ic svg{width:20px;height:20px}
.inc-list h3{font-size:1.05rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.inc-list p{color:var(--slate);font-size:.95rem;margin-top:.25rem}
/* process: numbered steps joined by a line that fills in */
.svc-steps{--n:4;list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:1.5rem}
.svc-steps::before,.svc-steps::after{content:"";position:absolute;top:27px;left:calc(100% / var(--n) / 2);right:calc(100% / var(--n) / 2);height:2px;background:var(--line)}
.svc-steps::after{background:linear-gradient(90deg,hsl(var(--h) 70% 50%),hsl(calc(var(--h) + 50) 75% 55%));transform-origin:0 50%;transform:scaleX(0);transition:transform 1.6s var(--ease) .3s}
.svc-steps li{position:relative;z-index:1;display:grid;gap:.6rem;justify-items:center;text-align:center}
.svc-steps p{color:var(--slate);font-size:.95rem;max-width:26ch}
.step-n{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--white);border:2px solid hsl(var(--h) 70% 55%);color:hsl(var(--h) 65% 40%);font-weight:700;font-size:1.1rem;box-shadow:0 0 0 8px var(--white)}
@supports (animation-timeline: view()){
.svc-steps::after{transition:none;animation:grow linear both;animation-timeline:view();animation-range:entry 40% cover 50%}
}
@supports not (animation-timeline: view()){.svc-steps::after{transform:scaleX(1)}}
@media (max-width:760px){
.svc-steps{grid-template-columns:minmax(0,1fr);gap:1.75rem}
.svc-steps::before,.svc-steps::after{top:0;bottom:0;left:27px;right:auto;width:2px;height:auto}
.svc-steps::after{transform-origin:50% 0;animation-name:growY}
.svc-steps li{grid-template-columns:56px minmax(0,1fr);justify-items:start;text-align:left;column-gap:1rem;row-gap:.25rem}
.svc-steps .step-n{grid-row:span 2}
}
@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@supports not (animation-timeline: view()){@media (max-width:760px){.svc-steps::after{transform:scaleY(1)}}}
/* case study band */
.svc-case{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.3fr) auto;align-items:center;gap:2rem;padding:clamp(1.75rem,4vw,3rem);border-radius:28px;background:radial-gradient(60% 120% at 100% 0%,hsl(var(--h) 80% 55% / .45),transparent 70%),var(--ink);color:#fff;text-decoration:none;transition:transform .45s var(--ease),box-shadow .45s}
.svc-case:hover{transform:translateY(-4px);box-shadow:0 40px 70px -40px hsl(var(--h) 70% 30% / .8)}
.svc-case p{color:#AEB8CA;max-width:52ch}
.svc-case .pill.is-dark{background:rgba(255,255,255,.12)}
.svc-case-go{font-weight:600;color:#fff;margin-top:.5rem}
.svc-case-go span{display:inline-block;transition:transform .35s var(--ease)}
.svc-case:hover .svc-case-go span{transform:translateX(6px)}
.svc-case-metric{font-size:clamp(2.2rem,5.5vw,4rem);font-weight:var(--heading-weight);letter-spacing:-.045em;line-height:1;background:linear-gradient(90deg,hsl(var(--h) 90% 80%),#FFD08A);-webkit-background-clip:text;background-clip:text;color:transparent;text-align:right}
@media (max-width:760px){.svc-case{grid-template-columns:minmax(0,1fr)}.svc-case-metric{text-align:left;grid-row:1}}
/* pricing on service pages: one-time prices get a smaller unit */
.svc .plans{margin-top:0}
/* related services */
.related{text-decoration:none}
.related p{font-size:.95rem}
.related-go{margin-top:auto;font-weight:600;color:hsl(var(--h) 65% 42%)}
.related-go span{display:inline-block;transition:transform .35s var(--ease)}
.related:hover .related-go span{transform:translateX(5px)}
/* overview page: service tiles and build path */
.svc-tile,.related{display:flex;flex-direction:column;gap:.85rem} /* footer row sits at the bottom of every card */
.svc-tile{text-decoration:none}
.svc-tile p{font-size:.95rem}
.svc-tile .pill{background:hsl(var(--h) 80% 95%);color:hsl(var(--h) 65% 38%)}
.svc-tile-foot{margin-top:auto;padding-top:.75rem;border-top:1px solid var(--line)}
.svc-tile-foot b{color:var(--ink)}
.svc-tile-go{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--mist);color:var(--ink);transition:background .3s,color .3s,transform .4s var(--ease)}
.svc-tile:hover .svc-tile-go{background:hsl(var(--h) 65% 48%);color:#fff;transform:rotate(-45deg)}
.svc-tiles{align-items:stretch}
.svc-path-wrap{align-items:start}
.svc-path{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:1.25rem}
.svc-path::before{content:"";position:absolute;left:27px;top:28px;bottom:28px;width:2px;background:linear-gradient(var(--cobalt),#7C5CFF,var(--amber))}
.svc-path li{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:1rem;align-items:start}
.svc-path .step-n{--h:225}
.svc-path p{color:var(--slate)}
.svc-path .tag{min-height:36px;font-size:.85rem}
/* =====================================================================
8. READING PAGES (blog/*.html, privacy-policy.html, terms.html)
article.js fills the table of contents from the h2 headings in .prose.
===================================================================== */
.page-hero.is-compact{padding-block:clamp(2rem,4vw,3rem) clamp(2.25rem,4.5vw,3.25rem)}
.page-hero.is-compact h1{font-size:clamp(2.1rem,5vw,3.5rem);max-width:22ch}
.doc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;color:var(--slate);font-size:.9rem}
.doc-layout{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:960px){.doc-layout{grid-template-columns:minmax(0,1fr)}}
/* table of contents */
.toc{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--header-h) + 1.5rem);max-height:calc(100dvh - var(--header-h) - 3rem);overflow:auto;font-size:.9rem}
.toc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);padding-bottom:.75rem;cursor:default}
.toc summary::-webkit-details-marker{display:none}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:.1rem;border-left:2px solid var(--line)}
.toc a{display:block;margin-left:-2px;padding:.4rem 0 .4rem 1rem;border-left:2px solid transparent;color:var(--slate);text-decoration:none;line-height:1.35;transition:color .2s,border-color .2s}
.toc a:hover{color:var(--ink)}
.toc a.active{color:var(--cobalt);border-color:var(--cobalt);font-weight:600}
@media (max-width:960px){
.toc{position:static;max-height:none;padding:1rem 1.25rem;border:1px solid var(--line);border-radius:16px;background:var(--mist)}
.toc summary{padding:0;cursor:pointer}
.toc summary::after{content:"+";font-size:1.2rem;color:var(--cobalt)}
.toc[open] summary{padding-bottom:.75rem}
.toc[open] summary::after{content:"−"}
}
/* long-form text */
.prose{max-width:44rem;font-size:1.075rem;line-height:1.75;color:#26324A}
.prose > * + *{margin-top:1.1rem}
.prose h2{margin-top:2.75rem;font-size:clamp(1.45rem,2.6vw,1.85rem);font-weight:var(--heading-weight);letter-spacing:-.025em;line-height:1.2;color:var(--ink);scroll-margin-top:calc(var(--header-h) + 1.5rem)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.75rem;font-size:1.2rem;font-weight:600;letter-spacing:-.015em;line-height:1.3;color:var(--ink)}
.prose p,.prose li{text-wrap:pretty}
.prose ul,.prose ol{padding-left:1.35rem}
.prose li + li{margin-top:.4rem}
.prose li::marker{color:var(--cobalt)}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--cobalt);text-underline-offset:3px}
.prose blockquote{margin:1.75rem 0;padding:.25rem 0 .25rem 1.25rem;border-left:3px solid var(--cobalt);font-size:1.2rem;font-weight:500;color:var(--ink)}
.prose hr{border:0;height:1px;background:var(--line);margin:2.5rem 0}
.prose .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
.prose table{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.5}
.prose th,.prose td{padding:.75rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.prose th{background:var(--mist);font-weight:600;color:var(--ink);white-space:nowrap}
.prose tr:last-child td{border-bottom:0}
.callout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;padding:1.1rem 1.25rem;border-radius:16px;background:var(--cobalt-soft);font-size:1rem;line-height:1.6}
.callout::before{content:"i";display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--cobalt);color:#fff;font-weight:700;font-style:italic;font-family:Georgia,serif}
.callout.is-tip{background:#E7F7F0}
.callout.is-tip::before{content:"✓";background:var(--mint);font-style:normal;font-family:var(--font)}
.callout p{margin:0}
.prose .fix-n{display:inline-grid;place-items:center;width:2rem;height:2rem;margin-right:.6rem;border-radius:10px;background:var(--cobalt-soft);color:var(--cobalt);font-size:1rem;vertical-align:.2em}
/* article extras */
.article-art{position:relative;aspect-ratio:21/9;border-radius:24px;overflow:hidden;background:var(--mist)}
@media (max-width:640px){.article-art{aspect-ratio:16/10}}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.share > span{font-size:.85rem;color:var(--slate);margin-right:.25rem}
.share a,.share button{display:inline-flex;align-items:center;gap:.4rem;min-height:40px;padding:0 .9rem;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink);font:500 .85rem var(--font);text-decoration:none;cursor:pointer;transition:border-color .2s,color .2s}
.share a:hover,.share button:hover{border-color:var(--cobalt);color:var(--cobalt)}
.author-box{display:grid;grid-template-columns:56px minmax(0,1fr);gap:1rem;align-items:start;padding:1.5rem;border:1px solid var(--line);border-radius:20px;background:var(--mist)}
.author-box .avatar{width:56px;height:56px}
.author-box b{display:block;font-size:1.05rem}
.author-box p{color:var(--slate);font-size:.95rem;margin-top:.25rem}
.article-end{display:grid;gap:1.5rem;max-width:44rem;margin-top:3rem}
.legal-note{font-size:.9rem;color:var(--slate)}
/* =====================================================================
9. UTILITY PAGES (thank-you.html, 404.html)
===================================================================== */
.center-page{min-height:calc(100dvh - var(--header-h));display:grid;align-items:center;padding-block:clamp(3rem,8vw,6rem)}
.center-page .container{display:grid;justify-items:center;gap:1.25rem;text-align:center}
.center-page h1{font-size:clamp(2.2rem,5.5vw,3.8rem);font-weight:var(--heading-weight);letter-spacing:-.04em;max-width:18ch}
.center-page .lede{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--slate);max-width:48ch}
.done-mark{width:96px;height:96px}
.done-mark circle{fill:#E7F7F0;stroke:var(--mint);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .8s var(--ease) .1s forwards}
.done-mark path{fill:none;stroke:var(--mint);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .5s var(--ease) .7s forwards}
@media (prefers-reduced-motion:reduce){.done-mark circle,.done-mark path{stroke-dashoffset:0}}
.foot-legal{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.next-row{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;width:100%;max-width:56rem;margin-top:1.5rem;text-align:left}
@media (max-width:760px){.next-row{grid-template-columns:minmax(0,1fr)}}
.next-row .card{gap:.5rem}
.next-row .step-n{--h:225;width:40px;height:40px;font-size:.95rem;box-shadow:none}
.nf-code{display:flex;gap:.1em;font-size:clamp(6rem,22vw,13rem);font-weight:800;letter-spacing:-.06em;line-height:.9;user-select:none}
.nf-code span{background:linear-gradient(160deg,var(--cobalt),#7C5CFF 60%,var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent;animation:float 5s ease-in-out infinite}
.nf-code span:nth-child(2){animation-delay:-1.6s}
.nf-code span:nth-child(3){animation-delay:-3.2s}
.quick-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:.5rem}
a.pill{text-decoration:none}
.prose code{font-size:.85em;word-break:break-all}
/* =====================================================================
10. CAREERS, FREE TOOLS, FAQS
===================================================================== */
/* careers: expandable role cards */
.roles{display:grid;gap:.9rem}
.role{border:1px solid var(--line);border-radius:20px;background:var(--white);transition:border-color .3s,box-shadow .3s}
.role:hover{border-color:rgba(47,88,232,.35)}
.role[open]{border-color:rgba(47,88,232,.4);box-shadow:0 30px 60px -44px rgba(47,88,232,.55)}
.role summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 1.5rem;cursor:pointer}
.role summary::-webkit-details-marker{display:none}
.role-title{display:grid;gap:.55rem}
.role-title b{font-size:1.2rem;font-weight:600;letter-spacing:-.015em}
.role-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.role[open] .pm{transform:rotate(135deg);background:var(--cobalt)}
.role[open] .pm::before,.role[open] .pm::after{background:#fff}
.role::details-content{block-size:0;overflow-y:clip;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
.role[open]::details-content{block-size:auto}
.role-body{display:grid;gap:1.25rem;justify-items:start;padding:0 1.5rem 1.5rem;border-top:1px solid var(--line);padding-top:1.25rem}
.role-body > p{color:var(--slate);max-width:65ch}
.role-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;width:100%}
.role-cols h3{font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-bottom:.75rem}
@media (max-width:700px){.role-cols{grid-template-columns:minmax(0,1fr)}.role summary{padding:1.1rem 1.15rem}.role-body{padding-inline:1.15rem}}
.apply-wrap{align-items:start}
.apply-form{gap:1.1rem}
/* free tools: tab cards, calculator panels */
.tool-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem;margin-bottom:1.5rem}
@media (max-width:1023px){.tool-tabs{display:flex;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding:0 var(--gutter) .25rem}.tool-tabs::-webkit-scrollbar{display:none}.tool-tabs [role="tab"]{flex:0 0 13.5rem}}
.tool-tabs [role="tab"]{display:grid;justify-items:start;gap:.35rem;padding:1rem;text-align:left;border:1px solid var(--line);border-radius:18px;background:var(--white);color:var(--ink);font:inherit;cursor:pointer;transition:border-color .25s,box-shadow .3s,transform .35s var(--ease)}
.tool-tabs [role="tab"]:hover{transform:translateY(-3px);border-color:rgba(47,88,232,.35)}
.tool-tabs [role="tab"] .icon-box{width:40px;height:40px;border-radius:12px;margin-bottom:.25rem}
.tool-tabs [role="tab"] .icon-box svg{width:20px;height:20px}
.tool-tabs b{font-size:.98rem;font-weight:600;line-height:1.25}
.tool-tabs small{font-size:.8rem;color:var(--slate);line-height:1.35}
.tool-tabs [aria-selected="true"]{border-color:var(--cobalt);box-shadow:0 0 0 3px rgba(47,88,232,.15),0 24px 40px -30px rgba(47,88,232,.6)}
.tool{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.5rem;align-items:start;animation:rise .45s var(--ease)}
@media (max-width:899px){.tool{grid-template-columns:minmax(0,1fr)}}
.tool-form{display:grid;gap:1.1rem;padding:clamp(1.25rem,3vw,2rem);border:1px solid var(--line);border-radius:24px;background:var(--white)}
.tool-form > p{margin-top:-.6rem}
.affix{display:flex;align-items:stretch;border:1.5px solid var(--line);border-radius:12px;background:var(--white);transition:border-color .2s,box-shadow .2s}
.affix:focus-within{border-color:var(--cobalt);box-shadow:0 0 0 4px rgba(47,88,232,.15)}
.affix > span{display:grid;place-items:center;padding:0 .9rem;color:var(--slate);font-weight:600;background:var(--mist)}
.affix > span:first-child{border-radius:10px 0 0 10px;border-right:1px solid var(--line)}
.affix > span:last-child{border-radius:0 10px 10px 0;border-left:1px solid var(--line)}
.field .affix input{border:0;box-shadow:none;min-width:0;font-variant-numeric:tabular-nums}
.field .affix input:focus{box-shadow:none}
.hint{font-size:.8rem;color:var(--slate)}
.tool-result{position:sticky;top:calc(var(--header-h) + 1.5rem);display:grid;gap:1.1rem;justify-items:start;padding:clamp(1.25rem,3vw,2rem);border-radius:24px;color:#fff;background:radial-gradient(70% 90% at 100% 0%,rgba(124,92,255,.35),transparent 70%),radial-gradient(50% 70% at 0% 100%,rgba(47,88,232,.35),transparent 70%),var(--ink)}
@media (max-width:899px){.tool-result{position:static}}
.tool-result .eyebrow{color:#9DB4FF}
.result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;width:100%;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.1)}
.result-grid > div{display:grid;gap:.25rem;padding:1rem 1.1rem;background:#111B2D}
.result-grid .wide{grid-column:1/-1}
.result-grid b{font-size:clamp(1.6rem,3.4vw,2.2rem);font-weight:var(--heading-weight);letter-spacing:-.035em;line-height:1.1;font-variant-numeric:tabular-nums}
.result-grid span{font-size:.85rem;color:#AEB8CA}
.result-note{font-size:.9rem;color:#AEB8CA}
.result-note a{color:#9DB4FF}
.link-out{display:block;width:100%;padding:.9rem 1rem;border-radius:12px;background:#111B2D;border:1px solid #253146;font:500 .9rem/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;color:#DDE5F5;overflow-wrap:anywhere}
.tool-result .btn-ghost{background:transparent;color:#fff;border-color:#34425C}
.tool-result .btn-ghost:hover{border-color:#fff}
.tool-result [aria-disabled]{opacity:.5;pointer-events:none}
.presets{display:flex;flex-wrap:wrap;gap:.4rem}
.presets .tag{min-height:36px;font-size:.82rem;cursor:pointer;font-family:inherit}
.presets .tag:hover{border-color:var(--cobalt);color:var(--cobalt)}
.seg-field{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.seg-field legend{font-weight:600;font-size:.925rem;margin-bottom:.5rem;padding:0}
.seg-field label{position:relative;display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:0 1rem;border:1.5px solid var(--line);border-radius:999px;font-size:.9rem;font-weight:500;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.seg-field label:has(input[type="radio"]:checked){border-color:var(--cobalt);background:var(--cobalt-soft);color:var(--cobalt)}
.seg-field input[type="radio"]{accent-color:var(--cobalt);margin:0}
.seg-custom input[type="number"]{width:4.5rem;min-height:32px;padding:.2rem .5rem;border:1px solid var(--line);border-radius:8px;font:inherit;color:var(--ink)}
.gst-rows{margin:0;width:100%;display:grid}
.gst-rows > div{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid #253146}
.gst-rows dt{color:#AEB8CA}
.gst-rows dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.gst-rows .total{border-bottom:0;padding-top:1rem}
.gst-rows .total dt{color:#fff;font-weight:600}
.gst-rows .total dd{font-size:1.6rem;font-weight:var(--heading-weight);letter-spacing:-.03em}
/* FAQs page */
.faq-page{max-width:56rem}
.faq-count{margin:-1rem 0 1.5rem;font-size:.9rem}
.faq-group + .faq-group{margin-top:2.75rem}
.faq-group-title{font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt);margin-bottom:.5rem;scroll-margin-top:calc(var(--header-h) + 5rem)}
.faq-page .ans a{color:var(--cobalt)}
.faq-page .empty-state{margin-top:1rem}
/* Wide screens: the many topics wrap onto several rows, so the bar stays in place instead of
sticking to the top (a pinned multi-row bar would cover the answers). Phones keep one sticky scrolling row. */
@media (min-width:900px){
.tools-bar{position:static;flex-wrap:wrap;overflow:visible;margin-inline:0;padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;margin-bottom:1.5rem}
}
/* FAQ page on desktop: topics become a sticky column on the left, answers on the right. */
@media (min-width:960px){
.faq-page{max-width:76rem;display:grid;grid-template-columns:16rem minmax(0,1fr);column-gap:clamp(2rem,4vw,4rem);align-items:start}
.faq-page > *{grid-column:2}
.faq-page > .topic-bar{grid-column:1;grid-row:1 / span 30;position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--header-h) + 1.25rem);flex-direction:column;align-items:stretch;gap:.2rem;margin:0;padding:.75rem;overflow:visible;max-height:calc(100dvh - var(--header-h) - 2.5rem);overflow-y:auto;border:1px solid var(--line);border-radius:20px;background:var(--white);backdrop-filter:none;-webkit-backdrop-filter:none}
.faq-page > .topic-bar .topic{justify-content:space-between;min-height:40px;padding:0 .75rem;border:0;border-radius:10px;background:none;text-align:left}
.faq-page > .topic-bar .topic:hover{transform:none;background:var(--mist)}
.faq-page > .topic-bar .topic[aria-pressed="true"]{background:var(--ink);color:#fff}
.site-header.hide ~ main .faq-page > .topic-bar{top:calc(env(safe-area-inset-top,0px) + 1.25rem)}
.faq-page .faq-count{margin:0 0 1rem}
.faq-page > .faq-group:first-of-type .faq-group-title{margin-top:0}
}
/* less empty space between the hero and the topic buttons */
section:has(> .faq-page),section:has(> .container > .tools-bar){padding-top:clamp(1.75rem,3.5vw,2.75rem)}
/* =====================================================================
11. FREE TOOLS (free-tools/*.html). engine.js builds .tool-form and .tool-result.
===================================================================== */
#tool-app .tool-result{position:static}
.tr-body{display:grid;gap:1rem;width:100%;min-width:0}
.tool-form input[type="file"]{padding:.65rem;background:var(--mist);cursor:pointer}
.tool-form input[type="color"]{padding:.3rem;height:50px;cursor:pointer}
.tool-form input[type="month"],.tool-form input[type="date"]{font-variant-numeric:tabular-nums}
.form-sub{margin-top:.25rem;font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt)}
.check-field{display:flex;align-items:center;gap:.6rem;font-size:.95rem;cursor:pointer}
.check-field input{width:18px;height:18px;accent-color:var(--cobalt);margin:0}
.tool-go{justify-self:start}
.res-big{display:grid;gap:.2rem}
.res-big span{font-size:.85rem;color:#AEB8CA}
.res-big b{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:var(--heading-weight);letter-spacing:-.035em;line-height:1.1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.res-big small{font-size:.85rem;color:#AEB8CA}
.res-label{display:block;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#9DB4FF}
.res-code{display:grid;gap:.55rem;min-width:0}
.res-code .link-out{white-space:pre-wrap}
.link-out.is-big{max-height:24rem;overflow:auto}
.res-table{overflow-x:auto;border:1px solid #253146;border-radius:12px}
.res-table table{width:100%;border-collapse:collapse;font-size:.9rem}
.res-table th,.res-table td{padding:.6rem .8rem;text-align:left;border-bottom:1px solid #253146;vertical-align:top}
.res-table th{color:#9DB4FF;font-weight:600;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.res-table tr:last-child td{border-bottom:0}
.res-table td{font-variant-numeric:tabular-nums;color:#DDE5F5}
.res-status{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.res-status li{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:.6rem;align-items:start;font-size:.92rem}
.res-status li::before{content:"";grid-row:span 2;width:22px;height:22px;border-radius:50%;background:#34425C center/12px no-repeat}
.res-status li.ok::before{background-color:var(--mint);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10.5l3 3 7-7' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.res-status li.bad::before{background-color:var(--danger);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 6l8 8M14 6l-8 8' stroke='white' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.res-status li.meh::before{background-color:var(--amber);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v6M10 14.5v.5' stroke='white' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.res-status small{color:#AEB8CA;font-size:.82rem}
.res-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:.5rem}
.swatch{display:grid;gap:.35rem;padding:.35rem;border:1px solid #253146;border-radius:12px;background:#111B2D;color:#DDE5F5;font:500 .75rem var(--font);cursor:pointer;text-align:left}
.swatch i{display:block;height:48px;border-radius:8px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.swatch:hover{border-color:#9DB4FF}
.res-img{margin:0;display:grid;gap:.6rem;justify-items:start}
.res-img img{max-height:22rem;border-radius:12px;background:repeating-conic-gradient(#1C2638 0 25%,#243149 0 50%) 0 0/16px 16px;object-fit:contain}
.res-preview{padding:1rem;border-radius:14px;background:var(--white);color:var(--ink);overflow:auto;font-size:.95rem}
.res-list{margin:0;padding-left:1.25rem;display:grid;gap:.45rem;color:#DDE5F5}
.res-list li::marker{color:#9DB4FF}
.res-warn{padding:.75rem 1rem;border-radius:12px;background:rgba(217,45,32,.18);color:#FFC2B8;font-size:.92rem}
/* previews drawn by individual tools */
.serp{display:grid;gap:.25rem;max-width:600px;font-family:var(--font)}
.serp-site{display:flex;align-items:center;gap:.6rem}
.serp-fav{width:26px;height:26px;border-radius:50%;background:#EEF1F6}
.serp-site b{display:block;font-size:.85rem;font-weight:400;color:#202124}
.serp-site small{font-size:.75rem;color:#4D5156}
.serp-title{font-size:1.25rem;line-height:1.3;color:#1A0DAB}
.serp-desc{font-size:.875rem;line-height:1.55;color:#4D5156}
.contrast-demo{display:grid;gap:.35rem;padding:1.25rem;border-radius:10px}
.contrast-demo b{font-size:1.5rem}
.css-demo{height:180px;border-radius:12px}
.shadow-stage{display:grid;place-items:center;padding:2.5rem;background:#F4F7FC;border-radius:10px}
.shadow-demo{width:160px;height:110px;border-radius:14px;background:#fff}
.wa-bubble{justify-self:start;max-width:90%;padding:.6rem .8rem;border-radius:0 10px 10px 10px;background:#DCF8C6;box-shadow:0 1px 1px rgba(0,0,0,.1);font-size:.95rem;line-height:1.45}
.wa-bubble code{font-family:ui-monospace,Consolas,monospace}
.fb-ad{max-width:380px;margin-inline:auto;border:1px solid #DADDE1;border-radius:10px;overflow:hidden;background:#fff;font-family:var(--font);font-size:.9rem;color:#050505}
.fb-head{display:flex;gap:.55rem;align-items:center;padding:.7rem .75rem .4rem}
.fb-logo{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--cobalt);color:#fff;font-weight:700}
.fb-head b{display:block;font-size:.9rem}
.fb-head small{font-size:.75rem;color:#65676B}
.fb-text{padding:0 .75rem .6rem;line-height:1.4;white-space:pre-line}
.fb-img{aspect-ratio:1;background:#E4E6EB;display:grid;place-items:center;color:#65676B}
.fb-img img{width:100%;height:100%;object-fit:cover}
.fb-foot{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.6rem .75rem;background:#F0F2F5}
.fb-foot div{display:grid;min-width:0}
.fb-foot small{font-size:.7rem;color:#65676B}
.fb-foot b{font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-foot span{font-size:.78rem;color:#65676B}
.fb-foot button{flex:none;padding:.45rem .75rem;border:0;border-radius:6px;background:#E4E6EB;font:600 .8rem var(--font);color:#050505}
.lp-label{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin:.25rem 0 .4rem}
.lp-label + div{margin-bottom:1rem}
.lp-wa{display:grid;grid-template-columns:84px minmax(0,1fr);gap:.6rem;padding:.4rem;border-radius:8px;background:#DCF8C6;max-width:360px}
.lp-wa img,.lp-wa .lp-noimg{width:84px;height:84px;object-fit:cover;border-radius:6px}
.lp-fb{max-width:420px;border:1px solid #DADDE1;border-radius:8px;overflow:hidden}
.lp-fb img,.lp-fb .lp-noimg{width:100%;aspect-ratio:1.91;object-fit:cover}
.lp-fb > div{padding:.6rem .75rem;background:#F0F2F5}
.lp-wa > div,.lp-fb > div{display:grid;gap:.15rem;min-width:0;font-family:var(--font)}
.lp-wa small,.lp-fb small{font-size:.72rem;color:#65676B;text-transform:uppercase}
.lp-wa b,.lp-fb b{font-size:.9rem;color:#050505}
.lp-wa span,.lp-fb span{font-size:.8rem;color:#65676B;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lp-noimg{display:grid;place-items:center;background:#E4E6EB;color:#65676B;font-size:.75rem;text-align:center}
.wa-demo{position:relative;height:120px;border-radius:10px;background:#F4F7FC}
.wa-demo span{position:absolute;right:16px;bottom:16px;width:52px;height:52px;border-radius:50%;background:#25D366;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.inbox-row{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:.75rem;padding:.7rem .9rem;border-radius:8px;background:#F2F6FC;font-family:var(--font);font-size:.88rem;color:#202124}
.inbox-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#5F6368}
.inbox-row span b{color:#202124}
@media (max-width:640px){.inbox-row{grid-template-columns:minmax(0,1fr)}}
/* tool page: how-to and hub */
.tool-about{align-items:start}
.tool-steps{margin:0;padding-left:1.25rem;display:grid;gap:.6rem;color:var(--slate)}
.tool-steps li::marker{color:var(--cobalt);font-weight:700}
.tool-about .ans a{color:var(--cobalt)}
.tool-card{display:flex;flex-direction:column;gap:.85rem;text-decoration:none}
.tool-card p{font-size:.92rem}
.tool-card .related-go{margin-top:auto;color:var(--cobalt)}
.tools-group + .tools-group{margin-top:3rem}
.tools-group-head{margin-bottom:1.25rem;align-items:baseline}
.tools-group-head a{font-size:.9rem;font-weight:600;text-decoration:none}
.tools-group-head a:hover{text-decoration:underline}
/* ===== 12. INDUSTRIES (industries/*.html) reuse the SERVICES styles ===== */
.sub .all + .all{margin-top:0;border-top:0;padding-top:.35rem}
.other-industries{display:grid;gap:.6rem;margin-top:2rem}
.other-industries .tag{min-height:36px;font-size:.85rem}
/* three dropdowns in the menu: tighten the header on small desktop screens */
@media (min-width:900px) and (max-width:1060px){
.bar,.nav{gap:.85rem}
.nav-list > li > a,.sub-btn{padding:0 .5rem;font-size:.9rem}
.nav-list > li > a::after{left:.5rem;right:.5rem}
.nav-cta{padding:0 1.1rem;font-size:.92rem}
}
/* phones: slightly smaller logo inside the shorter bar */
@media (max-width:480px){
.site-header .brand .logo{height:56px}
}
/* =====================================================================
13. ACADEMY, REVIEWS, FREE AUDIT, COMPANY, CASE STUDIES, LOCATIONS
===================================================================== */
/* light data tables (academy batches, location prices, service x city grid) */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--white)}
.data-table{width:100%;border-collapse:collapse;font-size:.95rem}
.data-table th,.data-table td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.data-table thead th{background:var(--mist);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);white-space:nowrap}
.data-table tbody tr:last-child > *{border-bottom:0}
.data-table tbody tr:hover{background:#FAFBFE}
.data-table.matrix th[scope="row"]{font-weight:600;white-space:nowrap}
.data-table.matrix td{text-align:center}
.data-table.matrix a{font-weight:600;font-size:.88rem}
/* academy */
.courses{align-items:stretch}
.course{gap:1rem}
.course-fee{font-size:1.3rem;font-weight:var(--heading-weight);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* reviews */
.rating-card{display:grid;justify-items:center;gap:.4rem;width:min(100%,22rem);justify-self:center;padding:2rem;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.92);box-shadow:0 40px 80px -40px rgba(47,88,232,.4);text-align:center}
.rating-big{font-size:4rem;font-weight:var(--heading-weight);letter-spacing:-.05em;line-height:1}
.rating-stars{color:var(--amber);letter-spacing:.12em;font-size:1.2rem}
.rating-stars .dim{color:var(--line)}
.rating-card p{color:var(--slate);font-size:.95rem}
.rating-bars{list-style:none;margin:.5rem 0 0;padding:0;width:100%;display:grid;gap:.35rem}
.rating-bars li{display:grid;grid-template-columns:2rem 1fr 2.5rem;align-items:center;gap:.5rem;font-size:.8rem;color:var(--slate);font-variant-numeric:tabular-nums}
.rating-bars i{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--amber) var(--w),var(--mist) var(--w))}
.review-grid{columns:3 18rem;column-gap:1.25rem}
.review{break-inside:avoid;margin:0 0 1.25rem;display:grid;gap:.9rem;padding:1.5rem;border:1px solid var(--line);border-radius:20px;background:var(--white)}
.review blockquote{margin:0;font-size:1.02rem;line-height:1.6;color:var(--ink)}
.review figcaption{display:flex;align-items:center;gap:.7rem}
.review figcaption .avatar{width:40px;height:40px;font-size:.8rem}
.review figcaption b{display:block;font-size:.95rem}
.review figcaption small{color:var(--slate);font-size:.82rem}
.review-case{font-size:.85rem;font-weight:600;text-decoration:none}
.review-case:hover{text-decoration:underline}
/* free audit landing page */
.audit-hero .split{align-items:start}
.audit-form{position:relative;display:grid;gap:1rem;padding:clamp(1.25rem,3vw,2rem);border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.96);box-shadow:0 40px 80px -40px rgba(11,19,32,.35)}
.audit-form .anchor{position:absolute;top:calc(-1 * (var(--header-h) + 1rem))}
.scorecard{display:grid;gap:1rem;padding:1.5rem;border:1px solid var(--line);border-radius:22px;background:var(--white);box-shadow:0 30px 60px -40px rgba(11,19,32,.35)}
.scorecard ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.scorecard li{display:grid;grid-template-columns:minmax(0,10rem) 1fr 2rem;align-items:center;gap:.75rem;font-size:.92rem}
.scorecard li i{height:10px;border-radius:5px;background:linear-gradient(90deg,var(--cobalt) var(--s),var(--mist) var(--s))}
.scorecard li b{text-align:right;font-variant-numeric:tabular-nums}
.scorecard-fix{padding:.9rem 1rem;border-radius:12px;background:#FEF3E2;font-size:.92rem}
.audit-proof .card{text-decoration:none}
.audit-proof p{font-size:.95rem}
@media (max-width:640px){.scorecard li{grid-template-columns:minmax(0,1fr) 5rem 2rem}}
/* certifications and referral */
.cert-badge{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:var(--cobalt-soft);color:var(--cobalt);font-weight:700;font-size:.8rem;letter-spacing:.02em}
.cert-badge.is-mint{background:#E7F7F0;color:var(--mint)}
.cert-badge.is-amber{background:#FEF3E2;color:var(--amber-text)}
.cert-badge.is-dark{background:var(--ink);color:#fff}
.reward-card{display:grid;gap:1px;width:min(100%,24rem);justify-self:center;border-radius:24px;overflow:hidden;background:var(--line);box-shadow:0 40px 80px -40px rgba(47,88,232,.45)}
.reward-card > div{display:grid;gap:.2rem;padding:1.5rem 1.75rem;background:var(--white)}
.reward-card > div:first-child{background:var(--ink);color:#fff}
.reward-card b{font-size:2.6rem;font-weight:var(--heading-weight);letter-spacing:-.04em;line-height:1.05}
.reward-card span{color:var(--slate)}
.reward-card > div:first-child span{color:#AEB8CA}
.reward-label{font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
/* case study pages */
.cs-hero .mini-tags li{background:rgba(255,255,255,.8);border:1px solid var(--line)}
.cs-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
@media (max-width:760px){.cs-stats{grid-template-columns:minmax(0,1fr)}}
.cs-stat{display:grid;gap:.3rem;padding:1.5rem;border-radius:20px;background:hsl(var(--h) 70% 96%);border:1px solid hsl(var(--h) 50% 90%)}
.cs-stat b{font-size:clamp(2rem,4.5vw,3rem);font-weight:var(--heading-weight);letter-spacing:-.045em;line-height:1;color:hsl(var(--h) 70% 34%);font-variant-numeric:tabular-nums}
.cs-stat span{color:var(--slate)}
.cs-story{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;align-items:start}
@media (max-width:760px){.cs-story{grid-template-columns:minmax(0,1fr)}}
.cs-quote{margin:2rem 0 0;padding:clamp(1.5rem,4vw,2.5rem);border-radius:24px;background:var(--ink);color:#fff}
.cs-quote blockquote{margin:0;font-size:clamp(1.25rem,2.6vw,1.75rem);font-weight:500;line-height:1.4;letter-spacing:-.015em}
.cs-quote figcaption{margin-top:1rem;color:#AEB8CA}
/* location pages */
.loc-card{gap:1rem;width:min(100%,30rem);justify-self:center}
.loc-card p{font-size:1rem}
.loc-lists{align-items:start}
.loc-lists .tag,.loc-more .tag{min-height:36px;font-size:.85rem}
.loc-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
@media (max-width:760px){.loc-more{grid-template-columns:minmax(0,1fr)}}
.sub-price{display:grid;justify-items:end;text-align:right;line-height:1.2}
.sub-price small{font-size:.78rem;color:var(--slate)}
.sub-price b{font-size:1.5rem;font-weight:var(--heading-weight);letter-spacing:-.03em}
.subs-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
@media (max-width:899px){.subs-groups{grid-template-columns:minmax(0,1fr)}}
.subs-groups .h3 a{color:var(--ink);text-decoration:none}
.subs-groups .h3 a:hover{color:var(--cobalt)}
.subs-groups .tag{min-height:36px;font-size:.85rem}
/* ===== 14. PRICING GUIDES (pricing/*.html) ===== */
.quick-answer{display:grid;gap:.75rem;max-width:52rem;padding:clamp(1.25rem,3vw,2rem);border-left:4px solid var(--cobalt);border-radius:0 20px 20px 0;background:var(--cobalt-soft)}
.quick-answer p{font-size:clamp(1.1rem,2vw,1.3rem);line-height:1.55;color:var(--ink);font-weight:500}
.quick-answer small{color:var(--slate);font-size:.85rem}
.our-price{max-width:36rem;gap:1rem}
.our-price .price b{font-size:clamp(1.8rem,4vw,2.4rem)}
.price-extra{align-items:start}
.flag-list{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.flag-list li{position:relative;padding-left:2rem;color:var(--slate)}
.flag-list li::before{content:"!";position:absolute;left:0;top:.1em;display:grid;place-items:center;width:1.3rem;height:1.3rem;border-radius:50%;background:#FEECEB;color:var(--danger);font-weight:700;font-size:.8rem}
.price-table td b{font-size:1.05rem}
.price-table th[scope="row"] a{color:var(--ink);text-decoration:none;font-weight:600}
.price-table th[scope="row"] a:hover{color:var(--cobalt)}
.guide-grid{list-style:none;margin:0;padding:0;row-gap:2.5rem}
.guide-grid > li{display:grid}
.guide-grid .excerpt{color:var(--slate);font-size:.95rem;line-height:1.55}
.plain-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-size:.95rem;color:var(--slate)}
.plain-list b{color:var(--ink)}
.tactic-list li{align-items:center}
.tactic-list h3{font-size:1rem}
/* ===== 15. NEW TOOL PREVIEWS ===== */
.plan-out h4{margin:.9rem 0 .35rem;font-size:1rem}
.plan-out h4:first-child{margin-top:0}
.plan-out ul{margin:0;padding-left:1.2rem;display:grid;gap:.25rem}
.rec-list{margin:0;padding-left:1.3rem;display:grid;gap:.9rem}
.rec-list span:not(.pill){color:var(--slate);font-size:.92rem}
.persona-head{display:flex;gap:.75rem;align-items:center;margin-bottom:.8rem}
.persona-head b{display:block}
.persona-head small{color:var(--slate)}
.persona dl{margin:0;display:grid;grid-template-columns:9rem 1fr;gap:.5rem 1rem}
.persona dt{font-weight:600}
.persona dd{margin:0;color:var(--slate)}
@media (max-width:560px){.persona dl{grid-template-columns:1fr}}
.li-post{font-family:var(--font);font-size:.95rem;line-height:1.5}
.li-post span{color:#666}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;max-width:420px;margin:auto}
.ig-grid img{width:100%;aspect-ratio:3/4;object-fit:cover}
.flow ul{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.7rem}
.flow .wa-bubble{display:block;margin-top:.3rem}
/* ---------- YouTube videos in blog posts (thumbnail first, player loads on click; see article.js) ---------- */
.yt{position:relative;display:block;width:100%;max-width:100%;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#0B1220;color:#fff;text-decoration:none;box-shadow:0 30px 60px -36px rgba(11,18,32,.55)}
.yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .4s}
.yt::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,18,32,.7),transparent 55%)}
.yt .yt-btn{position:absolute;left:50%;top:50%;z-index:1;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:#FF0033;display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(255,0,51,.6);transition:transform .3s var(--ease)}
.yt .yt-btn::before{content:"";margin-left:5px;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #fff}
.yt .yt-cap{position:absolute;left:1rem;right:1rem;bottom:.9rem;z-index:1;display:flex;justify-content:space-between;gap:1rem;font-size:.85rem;font-weight:600;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.yt .yt-cap span:last-child{flex:none;font-variant-numeric:tabular-nums;opacity:.9}
.yt:hover img{transform:scale(1.04)}
.yt:hover .yt-btn,.yt:focus-visible .yt-btn{transform:scale(1.1)}
.yt:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px}
.yt-frame{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt.is-short{aspect-ratio:9/16;border-radius:16px}
.yt.is-short .yt-btn{width:52px;height:52px;margin:-26px 0 0 -26px}
.yt.is-short .yt-btn::before{border-width:9px 0 9px 15px;margin-left:4px}
.yt.is-short .yt-cap{left:.6rem;right:.6rem;bottom:.6rem;font-size:.75rem;line-height:1.3}
.video-hero{display:grid;gap:.75rem;max-width:960px;margin-inline:auto}
.video-hero .yt.is-short{max-width:360px;margin-inline:auto}
.video-note{font-size:.9rem;color:var(--slate);text-align:center}
.video-note a{font-weight:600}
.prose .video-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin:1.5rem 0 2rem;padding:0;list-style:none}
.prose .video-list.shorts{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.prose .video-list li{margin:0;padding:0}
.prose .video-list li::before{display:none}
.prose .video-list .yt{box-shadow:none}
.prose a.yt,.prose a.yt:hover{color:#fff;text-decoration:none}
.video-list .yt-cap span:first-child{visibility:hidden}
.prose .video-list b{display:block;margin-top:.5rem;font-size:.9rem;line-height:1.35;color:var(--ink)}
.thumb .yt-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.thumb .play{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#FF0033;box-shadow:0 10px 24px -8px rgba(255,0,51,.6)}
.thumb .play::before{content:"";position:absolute;left:21px;top:16px;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent #fff}
.post:hover .thumb .yt-thumb{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){.yt img,.thumb .yt-thumb{transition:none}}
/* Category bar arrows (added by main.js when the chips overflow). They stick to the bar's edges,
fade the chips underneath, and only show on the side that has more chips. */
.bar-arrow{--w:calc(64px + var(--gutter));position:sticky;z-index:2;flex:none;align-self:stretch;width:var(--w);margin:-.75rem 0;padding:0;border:0;display:flex;align-items:center;color:var(--ink);cursor:pointer;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.bar-arrow.prev{left:calc(var(--gutter) * -1);margin-left:calc(var(--gutter) * -1);margin-right:calc(-64px - .5rem);padding-left:var(--gutter);justify-content:flex-start;background:linear-gradient(90deg,#fff 60%,rgba(255,255,255,0))}
.bar-arrow.next{right:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);margin-left:calc(-64px - .5rem);padding-right:var(--gutter);justify-content:flex-end;background:linear-gradient(270deg,#fff 60%,rgba(255,255,255,0))}
.bar-arrow i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--white);border:1px solid var(--line);box-shadow:0 6px 16px -8px rgba(11,18,32,.35);transition:border-color .2s,transform .2s}
.bar-arrow svg{width:16px;height:16px}
.bar-arrow:hover i{border-color:var(--cobalt);color:var(--cobalt);transform:scale(1.06)}
.topic-bar.more-left .bar-arrow.prev,.topic-bar.more-right .bar-arrow.next{opacity:1;visibility:visible}
@media (hover:none){.bar-arrow{--w:calc(44px + var(--gutter))}.bar-arrow.prev{margin-right:calc(-44px - .5rem)}.bar-arrow.next{margin-left:calc(-44px - .5rem)}.bar-arrow i{width:30px;height:30px}}
/* ---------- Book a call (book-a-call.html + booking.js) ---------- */
.book-facts{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin:0;padding:0;list-style:none;color:var(--slate);font-size:.95rem}
.book-facts li{display:inline-flex;align-items:center;gap:.45rem}
.book-facts svg{width:18px;height:18px;color:var(--cobalt);flex:none}
.booking{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(1.25rem,3vw,2rem);align-items:start}
.book-card{display:grid;gap:1.25rem;min-width:0;padding:clamp(1.25rem,3vw,2rem);background:var(--white);border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 60px -44px rgba(11,19,32,.35)}
.book-form-card{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--header-h) + 1.25rem)}
.book-head{display:flex;align-items:center;gap:.7rem}
.book-head .n{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--cobalt-soft);color:var(--cobalt);font-weight:700;font-size:.875rem}
.book-head h2{font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
.book-head small{margin-left:auto;color:var(--slate);font-size:.875rem;text-align:right}
.day-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.5rem}
.day{display:grid;justify-items:center;gap:.1rem;padding:.6rem .25rem;border:1.5px solid var(--line);border-radius:14px;background:var(--white);color:var(--ink);font:inherit;cursor:pointer;transition:border-color .2s,background .2s,color .2s,transform .2s var(--ease)}
.day small{font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.day b{font-size:1.3rem;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.day i{font-style:normal;font-size:.75rem;color:var(--slate)}
.day:hover:not(:disabled){border-color:var(--cobalt);transform:translateY(-2px)}
.day[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.day[aria-pressed="true"] small,.day[aria-pressed="true"] i{color:rgba(255,255,255,.75)}
.day:disabled{opacity:.4;cursor:not-allowed}
.day:focus-visible,.time-slot:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px}
#book-slots{display:grid;gap:1.1rem;min-height:120px}
.slot-group{margin:0 0 .5rem;font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.slot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.time-slot{min-height:44px;padding:0 .25rem;border:1.5px solid var(--line);border-radius:12px;background:var(--white);color:var(--ink);font:600 .9rem var(--font);font-variant-numeric:tabular-nums;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.time-slot:hover:not(:disabled){border-color:var(--cobalt);color:var(--cobalt)}
.time-slot[aria-pressed="true"]{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.time-slot:disabled{background:var(--mist);border-color:transparent;color:#9AA6BA;text-decoration:line-through;cursor:not-allowed}
.slots-note{color:var(--slate);font-size:.95rem}
.book-zone{color:var(--slate);font-size:.875rem}
.book-summary{display:flex;gap:.75rem;align-items:flex-start;padding:1rem;border-radius:16px;background:var(--mist);color:var(--slate);transition:background .25s}
.book-summary svg{flex:none;width:22px;height:22px;margin-top:.1rem}
.book-summary.is-set{background:var(--cobalt-soft);color:var(--ink)}
.book-summary.is-set svg{color:var(--cobalt)}
.book-summary b{display:block;color:var(--ink)}
.book-summary #book-summary-text span{font-size:.875rem;color:var(--slate)}
.book-local{margin-top:.25rem;font-size:.85rem;color:var(--slate)}
#book-form{display:grid;gap:1rem}
.book-submit{width:100%;justify-content:center}
.book-fine{font-size:.875rem;color:var(--slate)}
.book-done{display:grid;justify-items:center;gap:1rem;max-width:640px;margin-inline:auto;padding:clamp(1.5rem,4vw,3rem);text-align:center;background:var(--white);border:1px solid var(--line);border-radius:28px;box-shadow:0 30px 60px -44px rgba(11,19,32,.35)}
.book-done h2:focus{outline:none}
.book-when{font-size:clamp(1.1rem,2.4vw,1.35rem);font-weight:700;color:var(--cobalt)}
.book-note{padding:.85rem 1rem;border-radius:14px;background:#FFF7E6;color:var(--amber-text);font-size:.95rem}
#done-invite-note{background:#E7F7F0;color:#0B7A55}
.link-btn{padding:.25rem;border:0;background:none;color:var(--slate);font:inherit;font-size:.9rem;text-decoration:underline;cursor:pointer}
.link-btn:hover{color:var(--cobalt)}
@media (max-width:960px){
.booking{grid-template-columns:1fr}
.book-form-card{position:static}
}
@media (max-width:640px){
.day-strip{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:64px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin-inline:calc(clamp(1.25rem,3vw,2rem) * -1);padding:.15rem clamp(1.25rem,3vw,2rem)}
.day-strip::-webkit-scrollbar{display:none}
.day{scroll-snap-align:start}
.slot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* ---------- Billing switch on plan groups (monthly vs quarterly, 10% off). main.js sets data-bill on .plans ---------- */
.price i,.plan .per i{font-style:normal}
.plans .cyc-q{display:none}
.plans[data-bill="q"] .cyc-q{display:inline}
.plans[data-bill="q"] .cyc-m{display:none}
.bill-toggle{display:flex;gap:4px;width:max-content;max-width:100%;margin:0 auto 1.75rem;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--white);box-shadow:0 10px 24px -18px rgba(11,19,32,.35)}
.bill-toggle button{display:inline-flex;align-items:center;gap:.5rem;min-height:42px;padding:0 1.15rem;border:0;border-radius:999px;background:none;color:var(--slate);font:600 .92rem var(--font);cursor:pointer;transition:background .2s,color .2s}
.bill-toggle button:hover{color:var(--ink)}
.bill-toggle button[aria-pressed="true"]{background:var(--ink);color:#fff}
.bill-toggle button:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px}
.bill-toggle span{padding:.15rem .5rem;border-radius:999px;background:#E7F7F0;color:#0B7A55;font-size:.72rem;font-weight:700}
.bill-toggle button[aria-pressed="true"] span{background:rgba(255,255,255,.18);color:#fff}
.extra-head{margin-top:clamp(3rem,6vw,4.5rem)}
.extra-head h3{margin-bottom:.4rem}
/* Very small phones (about 320px): keep the billing switches inside the screen */
#pricing .bill,.bill-toggle{max-width:100%}
@media (max-width:360px){
.bill button{padding:.5rem .7rem;font-size:.82rem}
.bill button small{margin-left:.2rem}
.bill-toggle button{padding:0 .75rem;font-size:.85rem;gap:.35rem}
}
/* ---------- Photos (assets/img/photos, from Unsplash; see CREDITS.txt) ----------
Top sections: a photo with the page's card overlapping its lower-left corner. */
.hero-visual{position:relative;display:grid;justify-items:end;width:100%;min-width:0}
.hero-photo{margin:0;width:min(100%,34rem);aspect-ratio:4/3;border-radius:28px;overflow:hidden;background:var(--mist);box-shadow:0 40px 80px -50px rgba(11,19,32,.55)}
.hero-photo img{display:block;width:100%;height:100%;object-fit:cover}
.hero-visual > .svc-card,.hero-visual > .loc-card{position:relative;z-index:1;justify-self:start;margin-top:-28%;width:min(88%,26rem);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3)}
.article-photo{margin:0;aspect-ratio:21/9;border-radius:24px;overflow:hidden;background:var(--mist)}
.article-photo img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:960px){
.hero-visual{justify-items:center}
.hero-photo{width:100%}
.hero-visual > .svc-card,.hero-visual > .loc-card{justify-self:center;margin-top:-16%;width:92%}
}
@media (max-width:640px){.article-photo{aspect-ratio:16/10;border-radius:18px}}
/* ---------- Real project screenshots (portfolio cards, case studies) ---------- */
.pv-shot{display:block;flex:1;min-height:0;width:100%;object-fit:cover;object-position:left top}
.cs-shot{margin:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--white);box-shadow:0 30px 60px -40px rgba(11,19,32,.45)}
.cs-shot .pv-bar{background:var(--mist);border-bottom:1px solid var(--line)}
.cs-shot img{display:block;width:100%;height:auto}
.cs-shot figcaption{padding:.75rem 1rem;border-top:1px solid var(--line);font-size:.9rem;color:var(--slate)}
.cs-shot.is-phone{justify-self:center;width:min(100%,250px);border:6px solid var(--ink);border-radius:30px}
.cs-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;align-items:start}
.cd-links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.5rem}
@media (max-width:700px){.cs-gallery{grid-template-columns:1fr}}
.cs-gallery.is-3{grid-template-columns:repeat(3,minmax(0,1fr));justify-items:center}
@media (max-width:700px){.cs-gallery.is-3{grid-template-columns:1fr}}
.pv.is-phone .pv-screen > .pv-shot{border-radius:0}
.lp-phone-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center}
.lp-phone-row .cs-shot.is-phone{width:min(100%,280px)}
@media (max-width:700px){.lp-phone-row{grid-template-columns:1fr;justify-items:center}}
/* ---------- Data chart on case studies (one series, theme tokens) ---------- */
.chart-card{margin:0;padding:clamp(1rem,3vw,1.75rem)}
.chart-scroll{overflow-x:auto}
.cpc-chart{display:block;width:100%;min-width:560px;height:auto;font-family:var(--font)}
.cpc-chart .grid{stroke:var(--line);stroke-width:1}
.cpc-chart .tick{fill:var(--slate);font-size:12px;font-variant-numeric:tabular-nums}
.cpc-chart .lbl{fill:var(--ink);font-size:13px}
.cpc-chart .val{fill:var(--ink);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--white);stroke-width:5px;stroke-linejoin:round}
.cpc-chart rect{fill:var(--cobalt);transition:opacity .2s}
.cpc-chart .bar{cursor:default}
.cpc-chart:hover .bar rect{opacity:.45}
.cpc-chart .bar:hover rect{opacity:1}
.cpc-chart .avg{stroke:var(--amber-text);stroke-width:2;stroke-dasharray:4 4}
.cpc-chart .avg-l{fill:var(--amber-text);font-size:12px;font-weight:600}
.chart-table{margin-top:1rem}
.chart-table summary{cursor:pointer;color:var(--cobalt);font-weight:600;font-size:.95rem}
.chart-table .table-scroll{margin-top:.75rem}
.ads-proof-scroll{overflow-x:auto}
.ads-proof img{display:block;max-width:none;width:100%;min-width:760px;height:auto}
/* Featured creative on case studies and portfolio cards */
.cs-featured{margin:0 auto;max-width:620px;border-radius:24px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(11,19,32,.55)}
.cs-featured img{display:block;width:100%;height:auto}
.pv-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.pv:has(.pv-cover) .pv-badge{display:none}
/* WhatsApp channel invite (thank-you page and form success messages) */
.channel-card{display:flex;align-items:center;gap:1rem;width:100%;max-width:44rem;margin-top:.5rem;padding:1.1rem 1.25rem;border:1px solid var(--line);border-radius:20px;background:var(--white);text-align:left;box-shadow:0 20px 40px -32px rgba(11,19,32,.35)}
.channel-card b{display:block;font-size:1.05rem}
.channel-card div span{display:block;color:var(--slate);font-size:.92rem;margin-top:.15rem}
.channel-card .btn{flex:none;margin-left:auto}
.channel-ic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#E8F8EE;color:#128C4A}
.channel-ic svg{width:26px;height:26px}
@media (max-width:640px){.channel-card{flex-wrap:wrap}.channel-card .btn{margin-left:0;width:100%}}
.form-status .channel-link{display:inline-block;margin-top:.35rem;font-weight:600}
/* Grouped 'Live workshops' menu */
.sub-wide{width:min(54rem,calc(100vw - 2rem))}
.sub-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.25rem 1rem}
.sub-wide .sub-group ul{grid-template-columns:1fr;gap:0}
.sub-h{margin:.55rem .8rem .2rem;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.sub-wide .sub-group a{padding:.42rem .8rem;font-weight:500;font-size:.92rem}
.ws-cat{margin:2.5rem 0 1rem}
.ws-cat:first-of-type{margin-top:0}
@media (max-width:960px){.sub-groups{grid-template-columns:1fr}}
/* Live workshops: next-session box, countdown, month list, announcement bar */
.ws-next{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1rem;max-width:44rem;padding:.9rem 1.15rem;border:1px solid var(--line);border-radius:16px;background:var(--white);box-shadow:0 20px 40px -34px rgba(11,19,32,.35)}
.ws-next b{font-size:1.05rem}
.ws-next span{color:var(--slate)}
.ws-pill{flex:none;padding:.2rem .65rem;border-radius:999px;background:#E8F8EE;color:#11713D !important;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.ws-next.is-wait .ws-pill{background:var(--cobalt-soft);color:var(--cobalt) !important}
.ws-countdown{color:var(--cobalt) !important;font-weight:600}
.ws-countdown:empty{display:none}
.ws-tiles b{font-size:1.2rem}
.card.ws-month-card{display:flex;flex-direction:row;gap:1rem;align-items:flex-start}
.ws-date{flex:none;display:grid;place-items:center;width:58px;padding:.45rem 0;border-radius:14px;background:var(--cobalt-soft);color:var(--cobalt);font-size:.75rem;font-weight:700;text-transform:uppercase;line-height:1.1}
.ws-date b{font-size:1.5rem;line-height:1}
.ws-month-card .ws-countdown{display:block;margin-top:.35rem;font-size:.9rem}
.ws-bar{background:var(--ink);color:#fff;font-size:.9rem}
.ws-bar-in{display:flex;align-items:center;gap:.75rem;min-height:42px;padding-block:.35rem}
.ws-bar-tag{flex:none;padding:.15rem .6rem;border-radius:999px;background:var(--amber);color:var(--ink);font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.ws-bar a{color:#fff;text-decoration:none}
.ws-bar a span{color:#C9D3E3}
.ws-bar a u{text-underline-offset:3px;font-weight:600;white-space:nowrap}
.ws-bar-x{flex:none;margin-left:auto;width:32px;height:32px;border:0;border-radius:50%;background:none;color:#fff;font-size:1.25rem;cursor:pointer}
.ws-bar-x:hover{background:rgba(255,255,255,.12)}
@media (max-width:640px){.ws-bar{font-size:.82rem}.ws-bar-tag{display:none}}
/* Real client result cards in service and industry heroes (fix-dashboards.ps1) */
.svc-card .spark-line{animation:none;stroke-dasharray:none;stroke-dashoffset:0}
.svc-card .svc-bar{fill:hsl(var(--h) 70% 55%);opacity:.85}
.svc-card .svc-bar:last-child{opacity:1}
.svc-client{margin:0;color:var(--slate);font-size:.95rem}
.svc-client b{display:block;color:var(--ink);font-size:1.35rem;letter-spacing:-.02em}
.svc-shot{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border:1px solid var(--line);border-radius:12px;background:var(--mist)}
.svc-note a{color:var(--slate);text-decoration:none;font-weight:600}
.svc-note a:hover{color:var(--cobalt);text-decoration:underline}
/* Spam trap field in forms: hidden from people, filled in by bots */
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
/* Daily free Q&A (qa.html) */
.qa-done{display:grid;gap:.4rem;padding:1rem 1.1rem;border-radius:14px;background:#E8F8EE;border:1px solid #BFE5CF}
.qa-done b{font-size:1.1rem}.qa-done p{margin:0}
.qa-done:focus{outline:2px solid var(--mint);outline-offset:2px}
.qa-past .check-list{margin:.75rem 0;font-size:.95rem}.qa-past .check-list li{margin-bottom:.35rem}
.qa-topics .card p{font-size:.95rem}
/* Top menu: wide dropdowns open centred under the header (not under their button), so they never run off screen */
@media (min-width:961px){
.site-header .bar{position:relative}
.has-sub.is-wide{position:static}
.sub-wide{left:50%;right:auto;top:calc(100% - 6px);width:min(58rem,calc(100vw - 2rem));margin-left:calc(min(58rem,calc(100vw - 2rem)) / -2)}
.sub-groups-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.sub-foot{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;margin-top:.4rem;padding:.85rem .8rem .25rem;border-top:1px solid var(--line)}
.sub-foot a{color:var(--cobalt);font-weight:600;font-size:.92rem;text-decoration:none}
.sub-foot a:hover{text-decoration:underline}
.sub-feature{display:flex !important;align-items:center;gap:.9rem;margin:0 0 .5rem;padding:.75rem .9rem !important;border-radius:12px;background:var(--cobalt-soft);color:var(--ink);text-decoration:none}
.sub-feature b{display:block;font-size:.98rem}
.sub-feature span{display:block;font-size:.85rem;color:var(--slate);font-weight:400}
.sub-feature .ws-pill{flex:none}
.sub-feature:hover{background:#DCE6FF}
@media (max-width:960px){.sub-groups-4{grid-template-columns:1fr}.sub-feature{margin:.25rem 0 .5rem}}
/* "Learn" menu: training and daily Q&A cards side by side on desktop */
.site-header .sub .sub-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.sub-features .sub-feature{margin:.25rem 0 0}
.sub-h-ws{margin:.9rem 0 .2rem;padding-left:.8rem}
@media (max-width:960px){.site-header .sub .sub-features{grid-template-columns:1fr}}
.sub-wide .sub-group a .sub-note{display:block;font-size:.8rem;font-weight:400;color:var(--slate);margin-top:.1rem}
/* Home 'Client results': screenshot panel for cases without a before/after chart */
.case-shot{margin:0;align-self:start;display:grid;background:#0E1626;border:1px solid #26334A;border-radius:18px;overflow:hidden}
.case-shot-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#1B263A;color:#AEB8CA;font-size:.75rem;font-weight:600}
.case-shot-bar i{width:9px;height:9px;border-radius:50%;background:#3A4660}.case-shot-bar span{margin-left:6px}
.case-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-position:top left;background:#fff}
.case-shot figcaption{padding:.75rem 1rem;color:#AEB8CA;font-size:.85rem}