/*
Theme Name: SEO Maxing
Theme URI: https://seomaxing.com
Author: Hasnain Mehdi
Author URI: https://seomaxing.com
Description: High-end, founder-led SEO and WordPress growth theme with dark/light mode, animated stats, and a full multi-page structure. Fast, server-rendered, SEO/AEO/GEO friendly.
Version: 4.9.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: seomaxing
*/

:root{--indigo:#4F46E5;--indigo-2:#6366F1;--indigo-600:#4338CA;--violet:#7C3AED;--navy:#0B1533;--teal:#0EA871;--teal-2:#12B886;--orange:#F97316;--orange-600:#E45E06;--bg:#F6F7FB;--bg-2:#FFFFFF;--bg-alt:#EEF0F7;--surface:#FFFFFF;--text:#0A1230;--text-2:#3B4468;--text-3:#6A7395;--border:#E1E5F0;--border-2:#D3D9E8;--shadow-s:0 1px 2px rgba(11,21,51,.06),0 3px 8px rgba(11,21,51,.06);--shadow-m:0 10px 30px rgba(11,21,51,.10),0 4px 12px rgba(11,21,51,.06);--shadow-l:0 30px 70px rgba(11,21,51,.16),0 10px 30px rgba(11,21,51,.10);--glow:0 0 0 6px rgba(79,70,229,.10);--grad-brand:linear-gradient(100deg,#4F46E5,#7C3AED 55%,#0EA871);--grad-hero:radial-gradient(720px 460px at 12% 4%,rgba(99,102,241,.16),transparent 60%),radial-gradient(680px 460px at 96% 20%,rgba(14,168,113,.12),transparent 62%);--dash-bg:#0B142C;--dash-panel:#15203F;--dash-line:#233156;--card:#FFFFFF;--eyebrow:#4338CA;--toc-line:#E1E5F0;--toc-active:#4F46E5}[data-theme="dark"]{--bg:#070C18;--bg-2:#0C1424;--bg-alt:#0C1424;--surface:#0F182B;--text:#F3F6FC;--text-2:#B4BFD6;--text-3:#8592AE;--border:#1E2A44;--border-2:#27354F;--shadow-s:0 1px 2px rgba(0,0,0,.4);--shadow-m:0 14px 36px rgba(0,0,0,.5);--shadow-l:0 34px 80px rgba(0,0,0,.6);--glow:0 0 0 6px rgba(99,102,241,.20);--grad-hero:radial-gradient(720px 460px at 12% 4%,rgba(99,102,241,.22),transparent 60%),radial-gradient(680px 460px at 96% 20%,rgba(14,168,113,.16),transparent 62%);--card:#0F182B;--eyebrow:#A9B4FF;--toc-line:#1E2A44;--toc-active:#A9B4FF}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:100px}body{font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);font-size:17px;line-height:1.65;font-weight:450;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background .35s ease,color .35s ease;overflow-x:clip}h1,h2,h3,h4,.display{font-family:"Sora",sans-serif;color:var(--text);line-height:1.04;letter-spacing:-.03em;font-weight:800}p{color:var(--text-2)}a{color:inherit;text-decoration:none}img,svg{display:block;max-width:100%}ul{list-style:none}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}strong,b{font-weight:700;color:var(--text)}.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:26px}section{padding-block:104px;position:relative}.eyebrow{font-family:"Sora",sans-serif;font-weight:800;font-size:.88rem;letter-spacing:.13em;text-transform:uppercase;color:var(--eyebrow);display:inline-flex;align-items:center;gap:10px;padding:9px 17px;border-radius:999px;background:color-mix(in srgb,var(--eyebrow) 13%,transparent);border:1px solid color-mix(in srgb,var(--eyebrow) 22%,transparent)}[data-theme="dark"] .eyebrow{background:color-mix(in srgb,var(--eyebrow) 17%,transparent);border-color:color-mix(in srgb,var(--eyebrow) 30%,transparent)}.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--eyebrow);flex-shrink:0}.eyebrow.solo{background:none;padding:0;border:none}.sec-head{max-width:680px;margin-bottom:60px}.sec-head.center{margin-inline:auto;text-align:center}.sec-head h2{font-size:clamp(2.2rem,4.4vw,3.5rem);margin:20px 0 16px;font-weight:800}.sec-head p{color:var(--text-2);font-size:1.14rem;max-width:60ch}.sec-head.center p{margin-inline:auto}.grad{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}.btn{display:inline-flex;align-items:center;gap:10px;font-family:"Sora",sans-serif;font-weight:700;font-size:1rem;padding:16px 28px;border-radius:14px;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,background .18s ease;white-space:nowrap}.btn svg{width:18px;height:18px;transition:transform .2s ease}.btn-primary{background:var(--orange);color:#fff;box-shadow:0 10px 26px rgba(249,115,22,.36)}.btn-primary:hover{background:var(--orange-600);transform:translateY(-3px);box-shadow:0 18px 36px rgba(249,115,22,.46)}.btn-primary:hover svg{transform:translateX(4px)}.btn-dark{background:var(--navy);color:#fff;box-shadow:var(--shadow-m)}[data-theme="dark"] .btn-dark{background:var(--indigo)}.btn-dark:hover{transform:translateY(-3px);box-shadow:var(--shadow-l)}.btn-dark:hover svg{transform:translateX(4px)}.btn-ghost{background:var(--surface);color:var(--text);border:1.5px solid var(--border-2);box-shadow:var(--shadow-s)}.btn-ghost:hover{transform:translateY(-3px);box-shadow:var(--shadow-m);border-color:var(--indigo)}.btn-ghost:hover svg{transform:translateX(4px)}.btn-outline{border:1.6px solid var(--orange);color:var(--orange);background:transparent}.btn-outline:hover{background:var(--orange);color:#fff;transform:translateY(-3px)}.link-arrow{font-family:"Sora",sans-serif;font-weight:700;color:var(--eyebrow);display:inline-flex;align-items:center;gap:8px;transition:gap .2s ease}.link-arrow svg{width:17px;height:17px;transition:transform .2s ease}.link-arrow:hover{gap:12px}#site-header{position:fixed;top:0;left:0;right:0;width:100%;z-index:200;background:var(--surface);border-bottom:1px solid var(--border);transition:box-shadow .3s}body{padding-top:88px}#site-header.scrolled{box-shadow:var(--shadow-s)}.nav{display:flex;align-items:center;justify-content:space-between;height:88px;gap:22px}.brand{display:flex;align-items:center;flex-shrink:0}.brand img{height:48px;width:auto}.nav-links{display:flex;align-items:center;gap:30px}.nav-links>li{position:relative}.nav-links a{font-weight:600;font-size:1rem;color:var(--text);position:relative;padding:8px 0;display:inline-flex;align-items:center;gap:5px}.nav-links>li>a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2.5px;background:var(--grad-brand);border-radius:3px;transition:width .24s ease}.nav-links>li:hover>a::after,.nav-links .current-menu-item>a::after{width:100%}.nav-links .menu-item-has-children>a::before{content:"";position:absolute;right:-14px;top:50%;width:7px;height:7px;border-right:2px solid var(--text-3);border-bottom:2px solid var(--text-3);transform:translateY(-70%) rotate(45deg);transition:transform .2s}.nav-links .menu-item-has-children:hover>a::before{transform:translateY(-30%) rotate(225deg)}.nav-links .sub-menu{position:absolute;top:calc(100% + 14px);left:-18px;min-width:250px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-l);padding:10px;opacity:0;visibility:hidden;transform:translateY(8px);transition:all .22s ease;z-index:50}.nav-links li:hover>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}.nav-links .sub-menu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}.nav-links .sub-menu li{display:block}.nav-links .sub-menu a{display:block;padding:11px 14px;border-radius:10px;font-weight:600;font-size:.95rem;color:var(--text-2);transition:background .18s,color .18s}.nav-links .sub-menu a::after{display:none}.nav-links .sub-menu a:hover{background:var(--bg-alt);color:var(--indigo)}.nav-right{display:flex;align-items:center;gap:14px;flex-shrink:0}.hdr-social{display:flex;align-items:center;gap:8px}.hdr-social a{width:38px;height:38px;border-radius:10px;border:1.5px solid var(--border-2);display:grid;place-items:center;color:var(--text-2);transition:all .18s}.hdr-social a:hover{border-color:var(--indigo);color:var(--indigo);transform:translateY(-2px)}.hdr-social svg{width:17px;height:17px}.theme-switch{position:relative;width:66px;height:34px;border-radius:999px;flex-shrink:0;background:var(--bg-alt);border:1.5px solid var(--border-2);display:flex;align-items:center;padding:0 5px;transition:background .3s,border-color .3s}.theme-switch:hover{border-color:var(--indigo)}.theme-switch .track-ic{width:16px;height:16px;color:var(--text-3);z-index:1;transition:opacity .3s}.theme-switch .track-ic.sun{margin-right:auto}.theme-switch .track-ic.moon{margin-left:auto}.theme-switch .knob{position:absolute;top:2.5px;left:2.5px;width:27px;height:27px;border-radius:50%;background:linear-gradient(180deg,#fff,#eef);box-shadow:0 3px 8px rgba(11,21,51,.28);transition:transform .3s cubic-bezier(.4,1.4,.5,1)}[data-theme="dark"] .theme-switch{background:#131c33}[data-theme="dark"] .theme-switch .knob{transform:translateX(32px);background:linear-gradient(180deg,#4F46E5,#3730A3)}[data-theme="dark"] .theme-switch .track-ic.sun{opacity:.35}.theme-switch .track-ic.moon{opacity:.35}[data-theme="dark"] .theme-switch .track-ic.moon{opacity:1}.menu-btn{display:none;width:44px;height:44px;border-radius:12px;border:1.5px solid var(--border-2);background:var(--surface);color:var(--text);place-items:center}.menu-btn svg{width:22px;height:22px}.hero{padding-top:30px;padding-bottom:64px;position:relative;overflow:clip}.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grad-hero);pointer-events:none}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}.hero h1{font-size:clamp(2.5rem,4.8vw,3.9rem);font-weight:800;margin:20px 0;letter-spacing:-.035em;line-height:1.05}.hero h1 em{font-style:normal;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-sub{font-size:1.15rem;color:var(--text-2);max-width:40ch;margin-bottom:30px;font-weight:450}.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px}.hero-trust{display:flex;align-items:center;gap:11px;font-size:.98rem;color:var(--text-2)}.hero-trust .shield{flex-shrink:0;width:36px;height:36px;border-radius:10px;background:color-mix(in srgb,var(--indigo) 12%,transparent);display:grid;place-items:center;color:var(--indigo)}.hero-trust .shield svg{width:19px;height:19px}.hero-trust b{color:var(--text);font-weight:700}.hero-visual{position:relative;max-width:560px;margin-inline:auto;width:100%;padding:36px 0}.hero-shot{position:relative;width:88%;margin-inline:auto;aspect-ratio:16/10;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-l);border:1px solid var(--border-2);background:var(--surface)}.hero-shot img{width:100%;height:100%;object-fit:contain;object-position:center;background:var(--surface)}.hero-visual .glow{position:absolute;inset:14% 12%;background:var(--grad-brand);filter:blur(70px);opacity:.22;z-index:-1;border-radius:50%;pointer-events:none}.hstat{position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-l);padding:11px 14px;display:flex;align-items:center;gap:10px;z-index:2;max-width:47%;will-change:transform}.hstat .hi{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;color:#fff}.hstat .hi svg{width:19px;height:19px}.hstat .hv{font-family:"Sora";font-weight:800;font-size:1.16rem;line-height:1;color:var(--text)}.hstat .hk{font-size:.7rem;color:var(--text-3);margin-top:3px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.hstat.s1{top:0;left:0;animation:float 5.5s ease-in-out infinite}.hstat.s2{top:0;right:0;animation:float 5.5s ease-in-out infinite .7s}.hstat.s3{bottom:0;left:0;animation:float 5.5s ease-in-out infinite 1.4s}.hstat.s4{bottom:0;right:0;animation:float 5.5s ease-in-out infinite 2.1s}.hi.g-indigo{background:linear-gradient(135deg,#4F46E5,#6366F1)}.hi.g-teal{background:linear-gradient(135deg,#0EA871,#12B886)}.hi.g-orange{background:linear-gradient(135deg,#F97316,#FB923C)}.hi.g-violet{background:linear-gradient(135deg,#7C3AED,#9061F9)}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}.strip{background:var(--navy);padding-block:52px;position:relative;overflow:hidden}[data-theme="dark"] .strip{background:var(--bg-2);border-block:1px solid var(--border)}.strip::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 20% 0%,rgba(99,102,241,.3),transparent 60%),radial-gradient(500px 300px at 90% 100%,rgba(14,168,113,.2),transparent 60%)}.strip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;position:relative}.strip .n{font-family:"Sora";font-size:clamp(2.1rem,3.6vw,3rem);font-weight:800;color:#fff;letter-spacing:-.03em;background:linear-gradient(180deg,#fff,#c9d2ff);-webkit-background-clip:text;background-clip:text;color:transparent}.strip .l{color:#AEB9DC;font-size:.94rem;margin-top:6px;font-weight:500}.strip .cell:not(:last-child)::after{content:"";position:absolute;height:60%;top:20%;width:1px;background:rgba(255,255,255,.14)}.strip .cell{position:relative}.strip .cell:nth-child(1)::after,.strip .cell:nth-child(2)::after,.strip .cell:nth-child(3)::after{right:-12px}.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.route{position:relative;background:var(--card);border:1px solid var(--border);border-radius:22px;padding:34px 30px 30px;box-shadow:var(--shadow-s);overflow:hidden;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s}.route::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--rc,var(--indigo));opacity:.9}.route:hover{transform:translateY(-8px);box-shadow:var(--shadow-l);border-color:color-mix(in srgb,var(--rc,var(--indigo)) 50%,var(--border))}.route .rtag{font-family:"Sora";font-weight:800;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--rc,var(--indigo))}.route .ic{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;margin:16px 0 20px;background:color-mix(in srgb,var(--rc,var(--indigo)) 14%,transparent);color:var(--rc,var(--indigo))}.route .ic svg{width:28px;height:28px}.route :is(h2,h3){font-size:1.5rem;font-weight:800;margin-bottom:10px}.route p{color:var(--text-2);font-size:1rem;margin-bottom:22px}.route.r-diagnose{--rc:#4F46E5}.route.r-build{--rc:#0EA871}.route.r-grow{--rc:#F97316}[data-theme="dark"] .route.r-diagnose{--rc:#98A0FF}[data-theme="dark"] .route.r-build{--rc:#34D8A4}[data-theme="dark"] .route.r-grow{--rc:#FCA457}.custom-band{margin-top:24px;background:var(--navy);border-radius:22px;padding:34px 40px;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;color:#fff;box-shadow:var(--shadow-l);position:relative;overflow:hidden}[data-theme="dark"] .custom-band{border:1px solid var(--border)}.custom-band::before{content:"";position:absolute;inset:0;background:radial-gradient(640px 340px at 100% 0%,rgba(124,58,237,.55),transparent 62%),radial-gradient(420px 260px at 50% 120%,rgba(79,70,229,.35),transparent 60%)}.custom-band .cb-l{position:relative;z-index:1}.custom-band .rtag{font-family:"Sora";font-weight:800;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#C6B7FF}.custom-band h3{color:#fff;font-size:1.55rem;margin:8px 0 6px;font-weight:800}.custom-band p{color:#C2CBE6}.custom-band .btn{position:relative;z-index:1}.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative}.proc-grid::before{content:"";position:absolute;top:32px;left:9%;right:9%;height:2px;background:var(--grad-brand);opacity:.4}.step{position:relative;z-index:1}.step .num{width:64px;height:64px;border-radius:19px;background:var(--card);border:1px solid var(--border);display:grid;place-items:center;font-family:"Sora";font-weight:800;font-size:1.3rem;color:#fff;background:var(--grad-brand);box-shadow:var(--shadow-m);margin-bottom:22px}.step h3{font-size:1.3rem;font-weight:800;margin-bottom:9px}.step p{color:var(--text-2);font-size:.98rem}.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.wcard{background:var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-s);transition:transform .22s,box-shadow .22s;display:flex;flex-direction:column}.wcard:hover{transform:translateY(-8px);box-shadow:var(--shadow-l)}.wcard .shot{aspect-ratio:16/9;overflow:hidden;background:var(--bg-alt);border-bottom:1px solid var(--border);position:relative;display:block}.wcard .shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s ease}.wcard:hover .shot img{transform:scale(1.05)}.wcard .shot .badge{position:absolute;top:12px;right:12px;background:rgba(11,21,51,.82);color:#fff;font-family:"Sora";font-weight:700;font-size:.74rem;padding:5px 11px;border-radius:999px;backdrop-filter:blur(6px)}.wcard .body{padding:22px;display:flex;flex-direction:column;gap:13px;flex:1}.wcard .top h3{font-size:1.32rem;font-weight:800}.wcard .top h3 a{color:var(--text)}.wcard .top .tag{color:var(--eyebrow);font-size:.9rem;font-weight:700;margin-top:3px}.csr{display:flex;gap:11px}.csr .dot{flex-shrink:0;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;margin-top:1px}.csr .dot svg{width:15px;height:15px}.csr .lbl{font-size:.73rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);font-weight:800;font-family:"Sora"}.csr .val{font-size:.92rem;color:var(--text-2);margin-top:2px;line-height:1.5}.csr.result .val{font-weight:600;color:var(--text)}.work-more{text-align:center;margin-top:40px}.pricing{background:var(--bg-alt)}[data-theme="dark"] .pricing{background:var(--bg-2);border-block:1px solid var(--border)}.pricing{padding-block:82px}.pricing .sec-head{margin-bottom:40px}.price-note{text-align:center;color:var(--text-2);font-size:1rem;margin-bottom:28px;display:inline-flex;align-items:center;gap:9px;justify-content:center;width:100%;font-weight:500}.price-note svg{width:18px;height:18px;color:var(--teal-2)}.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}.pcard{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:28px 26px;box-shadow:var(--shadow-s);display:flex;flex-direction:column;transition:transform .22s,box-shadow .22s;position:relative}.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-m)}.pcard.pop{border:2px solid var(--indigo);box-shadow:var(--shadow-l)}.pcard.pop::before{content:"Most popular";position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--grad-brand);color:#fff;font-family:"Sora";font-weight:700;font-size:.74rem;padding:6px 16px;border-radius:999px;letter-spacing:.04em;white-space:nowrap}.pcard .pname{font-family:"Sora";font-weight:700;font-size:1.12rem}.pcard .price{font-family:"Sora";font-weight:800;font-size:2.3rem;margin:10px 0 2px;letter-spacing:-.04em}.pcard .price span{font-size:1rem;font-weight:500;color:var(--text-3)}.pcard .who{color:var(--text-2);font-size:.95rem;margin-bottom:16px;font-weight:500}.pcard ul{display:flex;flex-direction:column;gap:9px;margin-bottom:22px;flex:1}.pcard li{display:flex;gap:10px;align-items:flex-start;font-size:.94rem;color:var(--text-2);line-height:1.5}.pcard li svg{flex-shrink:0;width:19px;height:19px;color:var(--teal);margin-top:2px}.pcard .btn{width:100%;justify-content:center}.idea-bar{margin-top:24px;background:var(--navy);border-radius:22px;padding:30px 36px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;position:relative;overflow:hidden;box-shadow:var(--shadow-l)}[data-theme="dark"] .idea-bar{border:1px solid var(--border)}.idea-bar::before{content:"";position:absolute;inset:0;background:radial-gradient(640px 340px at 100% 0%,rgba(124,58,237,.55),transparent 62%),radial-gradient(420px 260px at 50% 120%,rgba(79,70,229,.35),transparent 60%)}.idea-bar .ib-l{position:relative;z-index:1}.idea-bar .rtag{font-family:"Sora";font-weight:800;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#C6B7FF;display:block;margin-bottom:8px}.idea-bar :is(h2,h3){color:#fff;font-size:1.4rem;font-weight:800;margin-bottom:6px}.idea-bar p{color:#C2CBE6;font-size:1rem;margin:0}.idea-bar .btn{position:relative;z-index:1}.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 48px}.principle{display:flex;gap:16px;padding-bottom:24px;border-bottom:1px solid var(--border)}.principle .pic{flex-shrink:0;width:46px;height:46px;border-radius:13px;background:var(--grad-brand);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-s)}.principle .pic svg{width:22px;height:22px}.principle :is(h2,h3){font-size:1.24rem;font-weight:800;margin-bottom:7px}.principle p{color:var(--text-2);font-size:.98rem}.founder-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}.founder h2{font-size:clamp(2.2rem,3.8vw,3.1rem);margin:18px 0 6px;font-weight:800}.founder h2 .name{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}.founder .role{color:var(--text-2);font-size:1.16rem;margin-bottom:24px;font-family:"Sora";font-weight:600}.founder .bio{color:var(--text-2);margin-bottom:28px;font-size:1.06rem}.skill-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:28px}.skill{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:15px 12px;text-align:center;font-family:"Sora";font-weight:600;font-size:.92rem;box-shadow:var(--shadow-s);transition:transform .18s,border-color .18s}.skill:hover{transform:translateY(-3px);border-color:var(--indigo)}.founder-note{display:flex;gap:13px;background:color-mix(in srgb,var(--indigo) 8%,transparent);border:1px solid color-mix(in srgb,var(--indigo) 20%,transparent);border-radius:16px;padding:20px 22px}.founder-note svg{flex-shrink:0;width:24px;height:24px;color:var(--indigo);margin-top:2px}.founder-note p{font-size:1rem;color:var(--text-2)}.founder-note b{color:var(--indigo)}.founder-photo{position:relative}.founder-photo .frame{border-radius:24px;overflow:hidden;box-shadow:var(--shadow-l);border:1px solid var(--border);position:relative;aspect-ratio:1/1}.founder-photo .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,rgba(11,21,51,.24));pointer-events:none}.founder-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}.founder-photo .glow{position:absolute;inset:-30px -30px auto auto;width:200px;height:200px;background:var(--grad-brand);filter:blur(70px);opacity:.3;z-index:-1;border-radius:50%}.founder-photo .badge{position:absolute;bottom:-18px;left:-18px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px 20px;box-shadow:var(--shadow-l);display:flex;align-items:center;gap:12px}.founder-photo .badge .bn{font-family:"Sora";font-weight:800;font-size:1.6rem;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}.founder-photo .badge .bl{font-size:.76rem;color:var(--text-2);line-height:1.35;font-weight:500}.faq-wrap{max-width:820px;margin-inline:auto;display:grid;gap:14px}.faq{border:1px solid var(--border);border-radius:16px;background:var(--card);overflow:hidden;transition:box-shadow .2s,border-color .2s}.faq[open]{box-shadow:var(--shadow-m);border-color:color-mix(in srgb,var(--indigo) 35%,var(--border))}.faq summary{list-style:none;cursor:pointer;padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:18px;font-family:"Sora";font-weight:700;font-size:1.08rem;color:var(--text)}.faq summary::-webkit-details-marker{display:none}.faq summary .chev{flex-shrink:0;width:24px;height:24px;color:var(--indigo);transition:transform .28s ease}.faq[open] summary .chev{transform:rotate(180deg)}.faq .ans{padding:0 26px 24px;color:var(--text-2);font-size:1rem;line-height:1.7}.final-inner{background:var(--navy);border-radius:30px;padding:78px 44px;text-align:center;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow-l)}.final-inner::before{content:"";position:absolute;inset:0;background:radial-gradient(560px 300px at 78% 0%,rgba(99,102,241,.45),transparent 60%),radial-gradient(460px 300px at 12% 100%,rgba(14,168,113,.32),transparent 60%)}.final-inner>*{position:relative;z-index:1}.final h2{color:#fff;font-size:clamp(2.1rem,4vw,3rem);margin-bottom:16px;font-weight:800}.final p{color:#C6CFE6;max-width:54ch;margin:0 auto 32px;font-size:1.12rem}.final .rea{margin-top:24px;display:flex;gap:26px;justify-content:center;flex-wrap:wrap;color:#C6CFE6;font-size:.96rem}.final .rea span{display:inline-flex;align-items:center;gap:8px}.final .rea svg{width:17px;height:17px;color:var(--teal-2)}footer{background:var(--navy);color:#fff;padding-block:72px 32px}[data-theme="dark"] footer{background:var(--bg-2);border-top:1px solid var(--border)}.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr;gap:44px;margin-bottom:48px}.foot-brand .foot-logo{height:46px;width:auto;margin-bottom:18px}.foot-brand p{color:#AEB9DC;font-size:.96rem;max-width:34ch;margin-bottom:20px}.foot-social{display:flex;gap:12px}.foot-social a{width:40px;height:40px;border-radius:11px;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;color:#C2CBE6;transition:all .2s}[data-theme="dark"] .foot-social a{border-color:var(--border)}.foot-social a:hover{background:var(--indigo);border-color:var(--indigo);color:#fff;transform:translateY(-3px)}.foot-social svg{width:18px;height:18px}.foot-col h3{font-family:"Sora";font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:#8592AE;margin-bottom:18px;font-weight:700}.foot-col a{display:block;color:#D3DAEC;font-size:.96rem;margin-bottom:13px;transition:color .2s}[data-theme="dark"] .foot-col a{color:var(--text-2)}.foot-col a:hover{color:#fff}[data-theme="dark"] .foot-col a:hover{color:var(--indigo)}.foot-cta h3{font-family:"Sora";color:#fff;font-size:1.1rem;margin-bottom:12px;font-weight:700}.foot-cta p{color:#AEB9DC;font-size:.92rem;margin-bottom:16px}.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#8592AE;font-size:.9rem}[data-theme="dark"] .foot-bottom{border-top-color:var(--border)}.foot-bottom a{color:#AEB9DC}.foot-bottom a:hover{color:#fff}.page-hero{padding-top:72px;padding-bottom:20px}.page-hero .crumbs{display:flex;gap:8px;align-items:center;font-size:.88rem;color:var(--text-3);margin-bottom:20px;font-weight:500}.page-hero .crumbs a:hover{color:var(--indigo)}.page-hero h1{font-size:clamp(2.4rem,5vw,3.6rem);font-weight:800;margin:16px 0;max-width:16ch}.page-hero .lead{font-size:1.2rem;color:var(--text-2);max-width:60ch}.content-block{max-width:760px}.placeholder{border:1.5px dashed var(--border-2);border-radius:16px;padding:40px;text-align:center;color:var(--text-3);background:var(--card)}.related{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}.rel-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:var(--shadow-s);transition:transform .2s,box-shadow .2s,border-color .2s}.rel-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-m);border-color:var(--indigo)}.rel-card .rk{font-family:"Sora";font-weight:700;font-size:1.1rem;margin-bottom:6px}.rel-card p{font-size:.92rem;color:var(--text-2)}.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}.reveal.in{opacity:1;transform:none}.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.mobile-backdrop{position:fixed;inset:0;background:rgba(6,12,24,.5);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;z-index:190;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.mobile-backdrop.open{opacity:1;visibility:visible}.mobile-panel{position:fixed;top:0;left:0;bottom:0;width:min(330px,84vw);background:var(--surface);border-right:1px solid var(--border);padding:26px 24px 30px;padding-top:96px;transform:translateX(-100%);transition:transform .34s cubic-bezier(.4,0,.2,1);z-index:195;box-shadow:8px 0 40px rgba(6,12,24,.28);overflow-y:auto;display:flex;flex-direction:column}.mobile-panel.open{transform:translateX(0)}.mobile-panel .m-social{display:flex;gap:10px;margin-top:auto;padding-top:22px}.mobile-panel .m-social a{width:42px;height:42px;border-radius:11px;border:1.5px solid var(--border-2);display:grid;place-items:center;color:var(--text-2);transition:all .18s}.mobile-panel .m-social a:hover{border-color:var(--indigo);color:var(--indigo)}.mobile-panel .m-social svg{width:18px;height:18px}.mobile-panel a{display:block;padding:14px 4px;font-family:"Sora";font-weight:600;font-size:1.06rem;border-bottom:1px solid var(--border);color:var(--text)}.mobile-panel .sub-menu{padding-left:14px}.mobile-panel .sub-menu a{font-size:.98rem;color:var(--text-2);border-bottom:none;padding:10px 4px}.mobile-panel .btn{margin-top:18px;width:100%;justify-content:center}@media (max-width:1120px){.hdr-social{display:none}}@media (max-width:1000px){.hero-grid{grid-template-columns:1fr;gap:44px}.hero-copy{max-width:640px}.hero-sub{max-width:52ch}.hero-visual{max-width:520px;margin-inline:0}.founder-grid{grid-template-columns:1fr;gap:40px}.founder-photo{max-width:420px;margin-inline:auto;order:-1}.why-grid{grid-template-columns:1fr}.foot-top{grid-template-columns:1fr 1fr;gap:36px}.foot-cta{grid-column:1/-1}}@media (max-width:860px){.nav-links,.nav-right .btn-primary{display:none}.menu-btn{display:grid}.nav{height:74px}body{padding-top:74px}section{padding-block:64px}.routes,.work-grid,.price-grid,.proc-grid,.related{grid-template-columns:1fr}.proc-grid::before{display:none}.strip-grid{grid-template-columns:repeat(2,1fr);gap:30px 16px}.strip .cell::after{display:none!important}.skill-grid{grid-template-columns:repeat(2,1fr)}.sec-head{margin-bottom:40px}.custom-band{padding:26px 24px}.final-inner{padding:52px 26px}}@media (max-width:600px){body{font-size:16px}.wrap{padding-inline:18px}.nav{height:68px}body{padding-top:68px}.brand img{height:40px}section{padding-block:56px}.hero{padding-top:20px;padding-bottom:40px}.hero h1{font-size:clamp(2.1rem,8vw,2.7rem);margin:16px 0}.hero-sub{font-size:1.05rem;margin-bottom:24px}.hero-cta{flex-direction:column;align-items:stretch}.hero-cta .btn{justify-content:center;width:100%}.hero-visual{max-width:460px;aspect-ratio:auto;display:flex;flex-wrap:wrap;gap:12px;padding:0}.hero-visual .glow{display:none}.hero-shot{position:static;inset:auto;flex:0 0 100%;width:100%;margin-inline:0;aspect-ratio:16/10;border-radius:18px}.hstat{position:static;inset:auto;animation:none;flex:1 1 calc(50% - 6px);max-width:none;padding:12px 14px;gap:10px;box-shadow:var(--shadow-m)}.hstat .hi{width:36px;height:36px}.hstat .hv{font-size:1.05rem}.hstat .hk{font-size:.66rem}.sec-head h2{font-size:clamp(1.8rem,7vw,2.3rem)}.sec-head p{font-size:1.02rem}.strip{padding-block:40px}.strip-grid{grid-template-columns:1fr 1fr;gap:26px 14px}.route{padding:28px 24px}.route :is(h2,h3){font-size:1.35rem}.custom-band{flex-direction:column;align-items:flex-start;gap:18px;text-align:left}.custom-band .btn{width:100%;justify-content:center}.idea-bar{flex-direction:column;align-items:flex-start;gap:14px}.foot-top{grid-template-columns:1fr;gap:30px}.founder-photo{max-width:100%}.skill-grid{grid-template-columns:1fr 1fr;gap:10px}.final .rea{gap:14px 20px}.price-grid{gap:32px}.pcard.pop{order:-1}}@media (max-width:380px){.hero-visual{max-width:100%}.strip-grid{grid-template-columns:1fr}.skill-grid{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}.entry-content{color:var(--text-2);line-height:1.75;font-size:1.06rem}
.entry-content>*+*{margin-top:1.1em}
.entry-content h2{font-size:1.9rem;margin-top:1.6em;color:var(--text)}
.entry-content h3{font-size:1.4rem;margin-top:1.3em;color:var(--text)}
.entry-content a{color:var(--indigo);text-decoration:underline;text-underline-offset:2px}
.entry-content ul,.entry-content ol{padding-left:1.3em}.entry-content ul{list-style:disc}.entry-content ol{list-style:decimal}
.entry-content li+li{margin-top:.4em}
.entry-content img{border-radius:14px;height:auto}
.entry-content blockquote{border-left:3px solid var(--indigo);padding-left:18px;color:var(--text-2);font-style:italic}
.entry-content code{background:var(--bg-alt);padding:2px 6px;border-radius:6px;font-size:.9em}
.entry-content pre{background:var(--dash-bg);color:#EAEEF5;padding:18px;border-radius:12px;overflow:auto}
.pagination{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pagination .page-numbers{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--border);border-radius:11px;background:var(--card);font-family:"Sora";font-weight:700;transition:all .2s}
.pagination .page-numbers.current{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.pagination a.page-numbers:hover{border-color:var(--indigo);color:var(--indigo)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:400;background:var(--indigo);color:#fff;padding:12px 20px;border-radius:0 0 12px 0;font-family:"Sora";font-weight:700}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--indigo);outline-offset:2px;border-radius:4px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.9rem;color:var(--text-3);margin-bottom:20px;font-weight:500}
.crumbs a{color:var(--text-2);text-decoration:none;border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.crumbs a:hover{color:var(--eyebrow);border-bottom-color:var(--eyebrow)}
.crumbs .sep{color:var(--text-3);opacity:.7}
.crumbs [aria-current="page"]{color:var(--text);font-weight:600}
.read-bar{position:fixed;top:0;left:0;height:3px;width:100%;z-index:210;background:transparent;pointer-events:none}
.read-bar i{display:block;height:100%;width:0;background:var(--grad-brand);transition:width .1s linear}
.post-head{padding-top:64px;padding-bottom:8px}
.post-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.post-cats a{font-family:"Sora";font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--eyebrow);background:color-mix(in srgb,var(--eyebrow) 13%,transparent);border:1px solid color-mix(in srgb,var(--eyebrow) 22%,transparent);padding:7px 14px;border-radius:999px;transition:background .18s}
.post-cats a:hover{background:color-mix(in srgb,var(--eyebrow) 22%,transparent)}
.post-head h1{font-size:clamp(2.1rem,4.6vw,3.3rem);font-weight:800;margin:0 0 18px;max-width:22ch;line-height:1.08}
.post-lead{font-size:1.16rem;color:var(--text-2);max-width:62ch;margin-bottom:26px}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;padding-top:22px;border-top:1px solid var(--border);color:var(--text-2);font-size:.95rem}
.post-meta .who{display:flex;align-items:center;gap:11px}
.post-meta .who img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--border-2)}
.post-meta .who .nm{font-family:"Sora";font-weight:700;color:var(--text);font-size:.98rem;line-height:1.3}
.post-meta .who .rl{font-size:.85rem;color:var(--text-3)}
.post-meta .mi{display:inline-flex;align-items:center;gap:8px}
.post-meta .mi svg{width:16px;height:16px;color:var(--eyebrow);flex-shrink:0}
.post-figure{margin:34px 0 0;border-radius:20px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-m);background:var(--bg-alt)}
.post-figure img{width:100%;height:auto;display:block}
.post-figure figcaption{padding:12px 18px;font-size:.88rem;color:var(--text-3);background:var(--card);border-top:1px solid var(--border)}
.post-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:52px;align-items:start;padding-top:44px}
.toc{position:sticky;top:112px;max-height:calc(100vh - 140px);display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px 18px}
.toc .toc-h{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:"Sora";font-weight:800;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:14px}
.toc .toc-pct{font-size:.78rem;color:var(--eyebrow);font-weight:800;letter-spacing:.02em}
.toc .toc-track{height:4px;border-radius:999px;background:var(--toc-line);margin-bottom:16px;overflow:hidden}
.toc .toc-track i{display:block;height:100%;width:0;border-radius:999px;background:var(--grad-brand);transition:width .18s ease}
.toc nav{overflow-y:auto;overscroll-behavior:contain}
.toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--toc-line)}
.toc li{margin:0}
.toc a{display:block;padding:7px 0 7px 15px;margin-left:-2px;border-left:2px solid transparent;font-size:.92rem;line-height:1.45;color:var(--text-2);font-weight:500;transition:color .18s,border-color .18s}
.toc a:hover{color:var(--text)}
.toc li.lv3 a{padding-left:27px;font-size:.87rem;color:var(--text-3)}
.toc a.on{color:var(--toc-active);font-weight:700;border-left-color:var(--toc-active)}
.toc li.lv3 a.on{color:var(--toc-active)}
.toc-mobile{display:none;margin-bottom:28px;border:1px solid var(--border);border-radius:14px;background:var(--card);overflow:hidden}
.toc-mobile summary{list-style:none;cursor:pointer;padding:15px 18px;font-family:"Sora";font-weight:700;font-size:1rem;display:flex;align-items:center;justify-content:space-between;gap:12px}
.toc-mobile summary::-webkit-details-marker{display:none}
.toc-mobile summary .chev{width:20px;height:20px;color:var(--eyebrow);transition:transform .25s}
.toc-mobile[open] summary .chev{transform:rotate(180deg)}
.toc-mobile ol{list-style:none;margin:0;padding:0 18px 16px}
.toc-mobile a{display:block;padding:9px 0;font-size:.94rem;color:var(--text-2);border-bottom:1px solid var(--border)}
.toc-mobile li:last-child a{border-bottom:none}
.toc-mobile li.lv3 a{padding-left:16px;font-size:.89rem;color:var(--text-3)}
.author-box{display:flex;gap:20px;align-items:flex-start;margin-top:52px;padding:26px;border:1px solid var(--border);border-radius:18px;background:var(--card);box-shadow:var(--shadow-s)}
.author-box img{width:74px;height:74px;border-radius:16px;object-fit:cover;flex-shrink:0;border:1px solid var(--border-2)}
.author-box .ab-k{font-family:"Sora";font-weight:800;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--eyebrow);margin-bottom:6px}
.author-box h3{font-size:1.24rem;font-weight:800;margin-bottom:8px}
.author-box p{font-size:.97rem;color:var(--text-2);margin-bottom:12px}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
.post-nav a{display:block;padding:20px 22px;border:1px solid var(--border);border-radius:16px;background:var(--card);transition:transform .2s,box-shadow .2s,border-color .2s}
.post-nav a:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:var(--eyebrow)}
.post-nav .k{font-family:"Sora";font-weight:800;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:7px}
.post-nav .t{font-family:"Sora";font-weight:700;font-size:1.02rem;color:var(--text);line-height:1.4}
.post-nav .nx{text-align:right}
.entry-content>h2[id],.entry-content>h3[id]{scroll-margin-top:112px}
.entry-content h2{font-size:1.85rem;font-weight:800;margin-top:1.9em;margin-bottom:.5em;color:var(--text);letter-spacing:-.02em}
.entry-content h3{font-size:1.35rem;font-weight:800;margin-top:1.5em;margin-bottom:.4em;color:var(--text)}
.entry-content h4{font-size:1.12rem;font-weight:700;margin-top:1.3em;color:var(--text);font-family:"Sora"}
.entry-content ul,.entry-content ol{padding-left:1.35em;margin-top:1.1em}
.entry-content ul{list-style:disc}
.entry-content ol{list-style:decimal}
.entry-content li{margin-bottom:.55em;padding-left:.25em}
.entry-content li::marker{color:var(--eyebrow)}
.entry-content img{border-radius:16px;border:1px solid var(--border);height:auto;margin-block:1.6em}
.entry-content figure{margin-block:1.8em}
.entry-content figcaption{font-size:.88rem;color:var(--text-3);text-align:center;margin-top:10px}
.entry-content blockquote{border-left:4px solid var(--eyebrow);background:color-mix(in srgb,var(--eyebrow) 7%,transparent);padding:20px 26px;border-radius:0 14px 14px 0;margin-block:1.8em;font-size:1.08rem;color:var(--text)}
.entry-content blockquote p{color:var(--text)}
.entry-content table{width:100%;border-collapse:collapse;margin-block:1.8em;font-size:.95rem;display:block;overflow-x:auto}
.entry-content th,.entry-content td{border:1px solid var(--border);padding:12px 15px;text-align:left}
.entry-content th{background:var(--bg-alt);font-family:"Sora";font-weight:700;color:var(--text)}
.entry-content code{background:var(--bg-alt);border:1px solid var(--border);border-radius:6px;padding:2px 7px;font-size:.9em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text)}
.entry-content pre{background:var(--dash-bg);color:#E6ECFF;border-radius:14px;padding:22px;overflow-x:auto;margin-block:1.8em;font-size:.9rem;line-height:1.6}
.entry-content pre code{background:none;border:none;padding:0;color:inherit}
.entry-content hr{border:none;border-top:1px solid var(--border);margin-block:2.4em}
.entry-content a:hover{color:var(--violet)}
@media (max-width:1000px){.post-layout{grid-template-columns:1fr;gap:0;padding-top:32px}.toc{display:none}.toc-mobile{display:block}.author-box{flex-direction:column;gap:16px}.post-nav{grid-template-columns:1fr}.post-nav .nx{text-align:left}}
@media (max-width:600px){.post-head{padding-top:34px}.post-meta{gap:12px 16px;font-size:.9rem}.post-figure{border-radius:14px}.entry-content h2{font-size:1.5rem}.entry-content h3{font-size:1.2rem}.author-box{padding:20px}}

/* ============================================================
   4.3.0  header + hero
   Appended after the 4.0.0 sheet so these win at equal specificity.
   Written mobile first: the absolute scatter is added in min-width
   blocks only, so nothing has to fight specificity later.
   ============================================================ */
:root{--green:#0EA871;--green-2:#12B886;--green-ink:#0A7550;--rail-ic:#6A7395;
  --h1grad:linear-gradient(100deg,#7C3AED 0%,#4F46E5 34%,#0E8F8A 70%,#0A8F62 100%)}
[data-theme="dark"]{--green-ink:#34D8A4;--rail-ic:#8592AE;
  --h1grad:linear-gradient(100deg,#C9A9FF 0%,#A9B4FF 34%,#5BE0DA 70%,#34D8A4 100%)}

/* One rail for the header, the hero and every section, so the logo,
   the nav, the H1 and all content below sit on the same edge. */
.wrap,.wrap-x{width:min(86vw,1300px);max-width:none;margin-inline:auto;padding-inline:0}

/* ---- header ---- */
#site-header .nav{gap:clamp(22px,3vw,54px)}
.nav-links{gap:clamp(24px,2.6vw,44px)}
.nav-links a{font-size:1.04rem}
.nav-links .menu-item-has-children>a::before{right:-15px}
.nav-right{gap:16px}

/* ---- fixed social rail, desktop only ---- */
.social-rail{display:none;position:fixed;top:50%;right:12px;transform:translateY(-50%);z-index:150}
@media (min-width:1280px){.social-rail{display:block}}
.rail-social{display:flex;flex-direction:column;gap:6px}
.rail-social a{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--rail-ic);border:1px solid transparent;opacity:.82;transition:opacity .18s ease,color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease}
.rail-social a:hover,.rail-social a:focus-visible{opacity:1;color:var(--indigo);border-color:var(--border);background:var(--surface);transform:translateY(-2px)}
.rail-social svg{width:16px;height:16px}

/* ---- hero shell ---- */
.hero{padding-top:36px;padding-bottom:60px}
.hero-grid{grid-template-columns:minmax(0,54fr) minmax(0,46fr);gap:clamp(30px,3.4vw,58px);align-items:center}
.hero-copy{max-width:none}

/* balanced line breaks stop single words dropping to their own line */
.hero h1{font-size:clamp(2.05rem,3.3vw,2.95rem);font-weight:700;line-height:1.16;letter-spacing:-.022em;text-wrap:balance;max-width:19ch}
/* one gradient flowing through the whole phrase, not per word */
.hero h1 em{font-style:normal;background-image:var(--h1grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;-webkit-box-decoration-break:slice;box-decoration-break:slice}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1 em{color:var(--indigo);-webkit-text-fill-color:currentColor}
}
.hero-sub{max-width:47ch}
.hero-trust .shield{background:color-mix(in srgb,var(--green) 15%,transparent);color:var(--green-ink)}

/* solid blue secondary, balanced against the orange primary */
.btn-blue{background:var(--indigo);color:#fff;box-shadow:0 10px 26px rgba(79,70,229,.30)}
.btn-blue:hover{background:var(--indigo-600);transform:translateY(-3px);box-shadow:0 18px 36px rgba(79,70,229,.40)}
.btn-blue:hover svg{transform:translateX(4px)}
[data-theme="dark"] .btn-blue{background:var(--indigo-2)}

/* ---- founder + cards: MOBILE FIRST (static flow) ---- */
.hero-visual{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:430px;width:100%;margin-inline:auto;padding:0;aspect-ratio:auto}
.hero-visual .glow{display:none}
.hero-shot{position:static;left:auto;top:auto;flex:0 0 100%;width:100%;max-width:300px;margin-inline:auto;aspect-ratio:1/1;border-radius:24px;overflow:hidden;border:1px solid var(--border-2);box-shadow:var(--shadow-m);background:var(--bg-alt)}
.hero-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;background:var(--bg-alt);transform:scale(1.15);transform-origin:50% 26%}

/* Dark, rich, GSC-toned cards. All four are exactly the same size. */
.hmet{position:relative;flex:1 1 calc(50% - 5px);box-sizing:border-box;height:88px;padding:10px 11px;border-radius:14px;
  display:flex;flex-direction:column;align-items:flex-start;overflow:hidden;color:#fff;
  background-image:linear-gradient(168deg,var(--c1) 0%,var(--c1) 38%,var(--c2) 92%);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 10px 26px color-mix(in srgb,var(--c1) 34%,transparent),0 2px 6px rgba(6,12,24,.16);
  will-change:transform;transition:transform .25s ease,box-shadow .25s ease}
/* soft gloss across the top corner */
.hmet::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(158deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.05) 38%,rgba(255,255,255,0) 58%)}
.hmet>*{position:relative;z-index:1}
.hmet .mi{width:21px;height:21px;border-radius:6px;display:grid;place-items:center;background:rgba(255,255,255,.24);color:#fff;margin-bottom:6px}
.hmet .mi svg{width:12px;height:12px}
.hmet .mv{display:block;font-family:"Sora",sans-serif;font-weight:800;font-size:1.32rem;line-height:1;letter-spacing:-.02em;color:#fff}
.hmet .mk{display:block;font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#fff;margin-top:5px;line-height:1.25}
.hmet .mk::before{content:"";display:inline-block;width:9px;height:9px;margin-right:5px;vertical-align:-1px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm-9 14l-5-5 1.4-1.4L10 14.2l7.6-7.6L19 8l-9 9z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm-9 14l-5-5 1.4-1.4L10 14.2l7.6-7.6L19 8l-9 9z'/%3E%3C/svg%3E") center/contain no-repeat}
.hmet.m-blue{--c1:#4285F4;--c2:#17529E}
.hmet.m-purple{--c1:#7327A8;--c2:#45166B}
.hmet.m-green{--c1:#009B83;--c2:#00655A}
.hmet.m-orange{--c1:#D97706;--c2:#9C4A0A}
.hmet:hover{transform:translateY(-5px);box-shadow:0 20px 44px color-mix(in srgb,var(--c1) 46%,transparent),0 3px 8px rgba(6,12,24,.2);border-color:rgba(255,255,255,.45)}

.hdecor{display:none;position:absolute;pointer-events:none;z-index:0}
.hd-trend{width:110px;bottom:11%;right:3%;opacity:.16;color:var(--green)}

/* ============================================================
   601px and up: founder becomes the anchor, cards scatter around
   its outer edge. Face-safe box is 26% to 74% wide and 9% to 52%
   tall of the frame. No card may enter it.
   ============================================================ */
@media (min-width:601px){
  .hero-visual{display:block;max-width:600px;aspect-ratio:1/0.955;gap:0}
  .hero-visual .glow{display:block;position:absolute;inset:14% 12%;background:var(--grad-brand);filter:blur(76px);opacity:.2;z-index:0;border-radius:50%;pointer-events:none}
  .hero-shot{position:absolute;left:8%;top:6%;width:84%;max-width:none;margin-inline:0;border-radius:28px;box-shadow:var(--shadow-l);z-index:1}
  .hmet{position:absolute;z-index:3;width:clamp(132px,9.9vw,152px);flex:none;height:94px;padding:11px 12px;border-radius:15px}
  .hmet .mv{font-size:1.44rem}
  .hdecor{display:block}
  /* uneven on purpose: no two share a row or a column */
  /* One card per corner, identical inset on every side, so the four read
     as a deliberate frame around the founder rather than a random scatter. */
  .hmet.k1{top:5%;left:-5%}
  .hmet.k2{top:5%;right:-5%}
  .hmet.k3{bottom:5%;left:-5%}
  .hmet.k4{bottom:5%;right:-5%}
}

/* 1000px and up: each card levitates on its own slow timing */
@keyframes smlev1{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes smlev2{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes smlev3{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes smlev4{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (min-width:1000px){
  .hero-visual .hmet.k1.in{animation:smlev1 4.8s ease-in-out .9s infinite}
  .hero-visual .hmet.k2.in{animation:smlev2 5.7s ease-in-out 1.3s infinite}
  .hero-visual .hmet.k3.in{animation:smlev3 5.2s ease-in-out 1.7s infinite}
  .hero-visual .hmet.k4.in{animation:smlev4 6.1s ease-in-out 2.2s infinite}
  .hmet:hover{animation:none}
}

/* ---- mobile drawer: collapsible Services ---- */
.mobile-panel .m-menu{list-style:none;margin:0;padding:0}
.mobile-panel .m-menu>li{position:relative}
.mobile-panel .m-row{display:flex;align-items:center;justify-content:space-between;gap:0;border-bottom:1px solid var(--border)}
/* Only the word itself is the link. The rest of the row, right to the
   edge and including the chevron, is one large toggle button. */
.mobile-panel .m-row>a{flex:0 0 auto;border-bottom:none;padding-right:14px}
.mobile-panel .sub-toggle{flex:1 1 auto;align-self:stretch;width:auto;min-height:54px;display:flex;align-items:center;justify-content:flex-end;padding:0 4px 0 14px;background:none;border:none;border-left:1px solid var(--border);color:var(--text-2);cursor:pointer;-webkit-tap-highlight-color:transparent}
.mobile-panel .sub-toggle:active{background:var(--bg-alt)}
.mobile-panel .sub-toggle svg{width:18px;height:18px;transition:transform .22s ease}
.mobile-panel .sub-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.mobile-panel .sub-toggle:hover,.mobile-panel .sub-toggle:focus-visible{color:var(--indigo)}
.mobile-panel .has-toggle>.sub-menu{display:none;padding-left:16px;border-left:2px solid var(--border)}
.mobile-panel .has-toggle.open>.sub-menu{display:block}

/* ============================================================
   4.3.0 responsive
   ============================================================ */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero h1{max-width:20ch}
  .hero-sub{max-width:58ch}
  .hero-visual{margin-inline:auto;max-width:540px}
}
@media (max-width:860px){
  .hero{padding-top:28px;padding-bottom:56px}
}
@media (max-width:600px){
  .wrap,.wrap-x{width:auto;margin-inline:18px}
  .hero{padding-top:20px;padding-bottom:46px}
  .hero h1{font-size:clamp(2rem,7.4vw,2.6rem);margin:14px 0;max-width:none}
  .hero-sub{font-size:1.05rem;margin-bottom:24px;max-width:none}
  .hmet .mv{font-size:1.3rem}
  .hmet .mk{font-size:.64rem}
}
@media (max-width:340px){
  .hero-visual{max-width:100%}
  .hero-shot{max-width:236px}
  .hmet{padding:11px 12px;height:96px}
  .hmet .mv{font-size:1.16rem}
  .hmet .mk{font-size:.58rem}
}
@media (prefers-reduced-motion:reduce){
  .hero-visual .hmet.in{animation:none!important}
}

/* ============================================================
   4.7.0  homepage section pass 1
   Shared rhythm + the Services panel, both tuned to the hero.
   ============================================================ */

/* ---- global section rhythm: the single biggest height saving ---- */
section{padding-block:76px}
.sec-head{margin-bottom:38px;max-width:660px}
/* section headings must sit BELOW the hero H1 in the hierarchy */
.sec-head h2{font-size:clamp(1.85rem,2.9vw,2.5rem);margin:14px 0 12px;font-weight:700;letter-spacing:-.02em;line-height:1.18;text-wrap:balance}
.sec-head p{font-size:1.04rem;max-width:58ch}

/* ---- Services: same colour language as the hero cards ---- */
.routes{gap:20px}
.route{display:flex;flex-direction:column;padding:24px 24px 22px;border-radius:18px;
  text-decoration:none;color:inherit;box-shadow:var(--shadow-s)}
.route::before{height:3px;background:var(--rc);opacity:1}
.route .rtag{font-size:.71rem;letter-spacing:.1em;color:var(--ri)}
.route .ic{width:44px;height:44px;border-radius:12px;margin:12px 0 13px;
  background:color-mix(in srgb,var(--rc) 15%,transparent);color:var(--ri);display:grid;place-items:center}
.route .ic svg{width:21px;height:21px}
.route :is(h2,h3){font-size:1.2rem;font-weight:700;margin-bottom:7px;letter-spacing:-.01em}
.route p{font-size:.95rem;margin-bottom:15px;color:var(--text-2)}
.route .link-arrow{margin-top:auto;color:var(--ri);font-size:.93rem}
.route .link-arrow svg{width:15px;height:15px}
.route:hover{transform:translateY(-5px);box-shadow:var(--shadow-m);border-color:color-mix(in srgb,var(--rc) 45%,var(--border))}
.route:hover .link-arrow{gap:12px}

/* Google Search Console hues, matched to the founder's own colour logic:
   purple = diagnosis, blue = search and technical build, green = growth.
   --rc is the bright hue for bars and tints, --ri the readable ink for text. */
.route.r-diagnose{--rc:#7327A8;--ri:#6B21A8}
.route.r-build{--rc:#4285F4;--ri:#1552C4}
.route.r-grow{--rc:#009B83;--ri:#00655A}
[data-theme="dark"] .route.r-diagnose{--ri:#C9A9FF}
[data-theme="dark"] .route.r-build{--ri:#8AB4F8}
[data-theme="dark"] .route.r-grow{--ri:#34D8A4}

/* ---- custom band: same navy + violet glow, just tighter ---- */
.custom-band{margin-top:20px;padding:26px 30px;border-radius:18px}
.custom-band h3{font-size:1.3rem;margin:7px 0 5px}
.custom-band p{font-size:.97rem;max-width:62ch}

@media (max-width:860px){
  section{padding-block:56px}
  .sec-head{margin-bottom:30px}
}
@media (max-width:600px){
  section{padding-block:48px}
  .sec-head h2{font-size:clamp(1.7rem,6.4vw,2.1rem)}
  .sec-head p{font-size:1rem}
  .route{padding:22px 20px 20px}
  .custom-band{padding:24px 22px}
}

/* ============================================================
   4.8.0  page rhythm + section identity
   ============================================================ */

/* ---- 1. hero: secondary CTA takes the footer navy ---- */
.btn-navy{background:var(--navy);color:#fff;box-shadow:var(--shadow-m)}
.btn-navy:hover{background:#16224a;transform:translateY(-3px);box-shadow:var(--shadow-l)}
.btn-navy:hover svg{transform:translateX(4px)}
[data-theme="dark"] .btn-navy{background:#1b2748}
[data-theme="dark"] .btn-navy:hover{background:#243357}

/* ---- 1b. hero cards: flatter, closer to a real GSC tile ----
   The glossy highlight was what made them read as cartoonish. Gone.
   The colour now holds flat for most of the card and only deepens at the
   bottom, which is what keeps the small label readable. */
.hmet::before{display:none}
.hmet{background-image:linear-gradient(172deg,var(--c1) 0%,var(--c1) 58%,var(--c2) 100%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 26px color-mix(in srgb,var(--c1) 30%,transparent),0 2px 5px rgba(6,12,24,.14)}
.hmet .mi{background:rgba(255,255,255,.17)}
.hmet:hover{box-shadow:0 18px 40px color-mix(in srgb,var(--c1) 40%,transparent),0 3px 8px rgba(6,12,24,.18);
  border-color:rgba(255,255,255,.32)}

/* ---- 2. trust ribbon: closes the hero, brings back a colour break ---- */
.ribbon{background:var(--surface);border-block:1px solid var(--border)}
.ribbon-grid{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;
  align-items:center;gap:18px;padding-block:17px}
.ritem{display:inline-flex;align-items:center;gap:9px;font-family:"Sora",sans-serif;
  font-weight:600;font-size:.88rem;color:var(--text-2);white-space:nowrap}
.ritem svg{width:17px;height:17px;flex-shrink:0;color:var(--rbc)}
.ritem.rb-blue{--rbc:#1552C4}
.ritem.rb-purple{--rbc:#7327A8}
.ritem.rb-green{--rbc:#00655A}
.ritem.rb-orange{--rbc:#9A4300}
[data-theme="dark"] .ritem.rb-blue{--rbc:#8AB4F8}
[data-theme="dark"] .ritem.rb-purple{--rbc:#C9A9FF}
[data-theme="dark"] .ritem.rb-green{--rbc:#34D8A4}
[data-theme="dark"] .ritem.rb-orange{--rbc:#FDBA74}

/* ---- 2b. section rhythm: alternate bands so the page stops reading flat.
   Card-heavy sections sit on grey so white cards lift off the page. ---- */
#services{background:var(--bg)}
#process{background:var(--surface)}
#work{background:var(--bg)}
.pricing{background:var(--surface)}
#why{background:var(--bg)}
#founder{background:var(--surface)}
#faq{background:var(--bg)}
#blog{background:var(--surface)}
#process,.pricing,#founder,#blog{border-block:1px solid var(--border)}

/* ---- 3. Services cards: tinted surface, GSC hover outline ---- */
.route{background-image:linear-gradient(180deg,var(--surface) 0%,color-mix(in srgb,var(--rc) 6%,var(--surface)) 100%);
  border:1px solid color-mix(in srgb,var(--rc) 20%,var(--border));
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.route:hover{transform:translateY(-6px);
  border-color:color-mix(in srgb,var(--rc) 85%,transparent);
  box-shadow:0 16px 38px color-mix(in srgb,var(--rc) 24%,transparent)}
.route .ic{background:color-mix(in srgb,var(--rc) 16%,transparent)}

/* ---- 4. Process: one GSC colour per step, plus what the client receives ---- */
.step .num{background:var(--sc);box-shadow:0 8px 20px color-mix(in srgb,var(--sc) 34%,transparent)}
.step.s-blue{--sc:#2B72E8;--si:#1552C4}
.step.s-purple{--sc:#8E24AA;--si:#6B21A8}
.step.s-green{--sc:#00806F;--si:#00655A}
.step.s-orange{--sc:#C05600;--si:#9A4300}
[data-theme="dark"] .step.s-blue{--si:#8AB4F8}
[data-theme="dark"] .step.s-purple{--si:#C9A9FF}
[data-theme="dark"] .step.s-green{--si:#34D8A4}
[data-theme="dark"] .step.s-orange{--si:#FDBA74}
.step .get{display:inline-flex;align-items:center;gap:7px;margin-top:11px;
  font-family:"Sora",sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.03em;
  text-transform:uppercase;color:var(--si)}
.step .get::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sc);flex-shrink:0}

/* pricing and blog cards sit on white sections, so they need a visible edge */
.pcard,.post-card,#blog article{border:1px solid var(--border-2)}

@media (max-width:900px){
  .ribbon-grid{grid-template-columns:repeat(2,auto);justify-content:start;gap:12px 26px;padding-block:15px}
  .ritem{font-size:.83rem}
}
@media (max-width:520px){
  .ribbon-grid{grid-template-columns:1fr;gap:10px}
  .ritem{white-space:normal}
}

/* ============================================================
   4.9.0  sections 5 to 8
   ============================================================ */

/* ---- 5. Selected Work: readable rows on the GSC palette ---- */
.csr .dot{background:color-mix(in srgb,var(--cc) 15%,transparent);color:var(--ci)}
.csr.c-challenge{--cc:#7327A8;--ci:#6B21A8}
.csr.c-solution{--cc:#4285F4;--ci:#1552C4}
.csr.c-result{--cc:#009B83;--ci:#00655A}
[data-theme="dark"] .csr.c-challenge{--ci:#C9A9FF}
[data-theme="dark"] .csr.c-solution{--ci:#8AB4F8}
[data-theme="dark"] .csr.c-result{--ci:#34D8A4}
.csr .lbl{color:var(--ci);font-size:.7rem;letter-spacing:.08em}
.csr .val{color:var(--text-2);font-size:.93rem}
/* the result is the payoff, so it gets a tinted strip of its own */
.csr.result{background:color-mix(in srgb,var(--cc) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--cc) 20%,transparent);
  border-radius:12px;padding:11px 12px;margin-top:2px}
.csr.result .val{color:var(--text);font-weight:600}
.wcard .body{gap:11px;padding:20px}
.wcard .top h3{font-size:1.2rem;font-weight:700}
.wcard .top .tag{font-size:.86rem}
.work-more{margin-top:32px}

/* ---- 6. Pricing: one primary action, colour per plan, less height ---- */
.pcard{position:relative;padding:24px 22px;border-radius:18px}
.pcard::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  border-radius:18px 18px 0 0;background:var(--pc,transparent)}
.pcard.pop::after{inset:-2px -2px auto -2px;border-radius:18px 18px 0 0}
.pcard.pop::before{z-index:2}
.pcard.p-diagnose{--pc:#7327A8;--pi:#6B21A8}
.pcard.p-build{--pc:#4285F4;--pi:#1552C4}
.pcard.p-grow{--pc:#009B83;--pi:#00655A}
[data-theme="dark"] .pcard.p-diagnose{--pi:#C9A9FF}
[data-theme="dark"] .pcard.p-build{--pi:#8AB4F8}
[data-theme="dark"] .pcard.p-grow{--pi:#34D8A4}
.pcard .pname{font-size:1.04rem}
.pcard .price{font-size:1.95rem;margin:8px 0 2px}
.pcard .who{font-size:.9rem;margin-bottom:13px}
.pcard ul{gap:7px;margin-bottom:18px}
.pcard li{font-size:.9rem}
.pcard li svg{width:17px;height:17px;color:var(--pi)}
.pcard.pop{border:2px solid var(--pc)}
/* the two supporting plans inform, the popular plan converts */
.plink{display:inline-flex;align-items:center;gap:8px;font-family:"Sora",sans-serif;
  font-weight:700;font-size:.92rem;color:var(--pi);transition:gap .2s ease}
.plink svg{width:15px;height:15px}
.plink:hover{gap:12px}
.price-note{margin-bottom:22px;font-size:.95rem}
.idea-bar{margin-top:20px}

/* ---- 7. Why SEO Maxing: six tones instead of six identical badges ---- */
.principle .pic{background:color-mix(in srgb,var(--wc) 15%,transparent);color:var(--wi);
  box-shadow:none;width:42px;height:42px;border-radius:12px}
.principle .pic svg{width:20px;height:20px}
.principle.w-blue{--wc:#4285F4;--wi:#1552C4}
.principle.w-purple{--wc:#7327A8;--wi:#6B21A8}
.principle.w-green{--wc:#009B83;--wi:#00655A}
.principle.w-orange{--wc:#D97706;--wi:#9A4300}
[data-theme="dark"] .principle.w-blue{--wi:#8AB4F8}
[data-theme="dark"] .principle.w-purple{--wi:#C9A9FF}
[data-theme="dark"] .principle.w-green{--wi:#34D8A4}
[data-theme="dark"] .principle.w-orange{--wi:#FDBA74}
.principle{gap:14px;padding-bottom:18px}
.principle :is(h2,h3){font-size:1.1rem;font-weight:700;margin-bottom:5px}
.principle p{font-size:.94rem}
.why-grid{gap:20px 44px}

/* ---- 8. Founder: chips and badge on the same language ---- */
.skill-grid{gap:10px;margin-bottom:22px}
.skill-grid>*{background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--indigo) 5%,var(--surface)));
  border:1px solid var(--border-2);border-radius:12px;font-size:.92rem;font-weight:600}
.founder-photo .badge{border-radius:14px;padding:13px 17px}
.founder-photo .badge .bn{font-size:1.4rem}

@media (max-width:600px){
  .pcard{padding:22px 18px}
  .pcard .price{font-size:1.75rem}
  .csr.result{padding:10px 11px}
}

/* ============================================================
   4.10.0  Blog reading experience
   Sticky rail holding the table of contents and share controls,
   a comfortable reading measure, four related posts, and a link
   colour that keeps contrast in dark mode.
   ============================================================ */

:root{--link:#4338CA;--link-hover:#7C3AED}
[data-theme="dark"]{--link:#A9B4FF;--link-hover:#C7CEFF}

.entry-content a{color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .18s}
.entry-content a:hover{color:var(--link-hover);text-decoration-thickness:2px}
.entry-content a:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:3px}

/* Reading measure. Around 70 characters is the comfortable range for prose. */
#post-content{max-width:70ch}
#post-content>figure,#post-content>pre,#post-content>table,#post-content>.wp-block-table{max-width:none}

/* The left rail is the sticky element now, so the TOC inside it sits static. */
.post-side{position:sticky;top:112px;display:flex;flex-direction:column;gap:18px;max-height:calc(100vh - 136px)}
.post-side .toc{position:static;top:auto;max-height:none;min-height:0;overflow:hidden}
.post-side .toc nav{overflow-y:auto}

/* Share controls */
.share-h{font-family:"Sora";font-weight:700;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3)}
.share-btns{display:flex;gap:10px;flex-wrap:wrap}
.sh{width:40px;height:40px;flex:0 0 40px;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;border:1px solid var(--border);background:var(--card);color:var(--text-2);cursor:pointer;position:relative;transition:transform .18s,border-color .18s,color .18s,background .18s}
.sh svg{width:18px;height:18px}
.sh:hover{transform:translateY(-2px);border-color:var(--link);color:var(--link)}
.sh:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.sh-x:hover{color:var(--text);border-color:var(--text)}
.sh-facebook:hover{color:#1877F2;border-color:#1877F2}
.sh-whatsapp:hover{color:#1EA952;border-color:#1EA952}
.sh .copied{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;font-size:.72rem;font-family:"Sora";font-weight:600;padding:4px 9px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s}
.sh.is-copied .copied{opacity:1}

.share-rail{display:flex;flex-direction:column;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px 18px}
.share-bar{display:none}

@media (max-width:1000px){
  .post-side{display:none}
  /* On phones the share row rides along the bottom of the article instead. */
  .share-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;position:sticky;bottom:12px;z-index:40;margin-top:34px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:10px 14px;box-shadow:var(--shadow-m)}
  .share-bar .share-h{font-size:.74rem}
  #post-content{max-width:none}
}
@media (max-width:520px){
  .share-bar .share-h{display:none}
  .share-bar .share-btns{width:100%;justify-content:space-between}
}

/* Four related articles */
.work-grid.rel-4{grid-template-columns:repeat(var(--rel-cols,4),1fr);gap:20px}
.work-grid.rel-4 .wcard .body{padding:16px 18px 18px}
@media (max-width:1100px){.work-grid.rel-4{grid-template-columns:repeat(min(var(--rel-cols,4),2),1fr)}}
@media (max-width:620px){.work-grid.rel-4{grid-template-columns:1fr}}

/* Case study Challenge / Solution / Result reads as a trio, not 2 + 1. */
.why-grid.case-trio{grid-template-columns:repeat(3,1fr);gap:30px}
@media (max-width:900px){.why-grid.case-trio{grid-template-columns:1fr}}

/* ============================================================
   4.11.0  blog cards, cover art and the post hero
   Appended last so these win at equal specificity.
   Written mobile first: wider layouts are added in min-width
   blocks only, so nothing has to fight specificity later.
   ============================================================ */

/* ---- Cover art -------------------------------------------------------
   Drawn in CSS from the Search Console palette, so a post with no featured
   image still has a hero and the grid never shows an empty frame. A real
   featured image replaces it in the same slot with no other change. */
.cover{position:absolute;inset:0;display:block;overflow:hidden;
  background:linear-gradient(135deg,var(--cv-1),var(--cv-2))}
.cover::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.20) 1px,transparent 0);
  background-size:20px 20px}
.cover::after{content:"";position:absolute;inset:0;
  background:radial-gradient(115% 85% at 86% 4%,rgba(255,255,255,.22),transparent 60%)}
.cover-1{--cv-1:#134BB4;--cv-2:#256BE0}
.cover-2{--cv-1:#661A94;--cv-2:#8E24AA}
.cover-3{--cv-1:#00614F;--cv-2:#00806F}
.cover-4{--cv-1:#9A4300;--cv-2:#C05600}
.cover .cv-mark{position:absolute;left:18px;bottom:15px;z-index:1;
  display:inline-flex;align-items:center;gap:8px;
  color:#fff;font-family:"Sora",sans-serif;font-weight:700;font-size:.8rem;opacity:.92}
.cover .cv-mark svg{width:17px;height:17px;flex:none}
.cover .cv-label{position:absolute;right:18px;bottom:15px;z-index:1;
  color:#fff;font-family:"Sora",sans-serif;font-weight:700;font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;opacity:.8}

/* ---- Post card -------------------------------------------------------- */
.post-grid{grid-template-columns:1fr}
/* A real photograph gets the standard card crop. The drawn stand-in gets a
   shorter band, so a placeholder never dominates the card it sits on. */
.bcard .shot{aspect-ratio:16/9}
.bcard .shot.is-drawn{aspect-ratio:16/6}
.bcard .shot img{object-position:center}
.bcard .cv-label{display:none}
.bcard .body{gap:11px;padding:20px}
.bcard :is(h2,h3){font-family:"Sora",sans-serif;font-size:1.14rem;font-weight:700;line-height:1.34;min-height:2.68em}
.bcard :is(h2,h3) a{color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bcard :is(h2,h3) a:hover{color:var(--indigo)}
.bcard .dek{color:var(--text-2);font-size:.94rem;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Author and timing wrap as two whole units, so a narrow card never breaks
   the line on a separator and leaves it dangling. */
.bcard .by{margin-top:auto;padding-top:14px;border-top:1px solid var(--border);
  display:flex;align-items:center;align-content:center;flex-wrap:wrap;gap:5px 12px;
  font-size:.83rem;color:var(--text-3);line-height:1.4}
.bcard .by .who,.bcard .by .mt{display:inline-flex;align-items:center;white-space:nowrap;min-height:28px}
.bcard .by .who{gap:8px}
.bcard .by .mt{gap:6px}
.bcard .by img{width:28px;height:28px;border-radius:50%;object-fit:cover;
  flex:none;border:1px solid var(--border)}
.bcard .by .nm{font-weight:700;color:var(--text-2)}
.bcard .by .dot{opacity:.55}
.bcard-sm .body{padding:16px 18px 18px}
.bcard-sm h3{font-size:1.05rem}
.bcard-sm .dek{-webkit-line-clamp:2;font-size:.9rem}

/* Column count follows the theme's existing 860px grid breakpoint, and never
   exceeds the number of posts, so two published posts fill the rail instead
   of leaving a dead third column. */
@media (min-width:861px){
  .post-grid{grid-template-columns:repeat(min(var(--pg-cols,3),2),1fr)}
  .bcard .body{padding:22px}
  .bcard :is(h2,h3){font-size:1.22rem}
}
@media (min-width:1101px){
  .post-grid{grid-template-columns:repeat(var(--pg-cols,3),1fr)}
}
/* The related row asks for up to four, which only fits on a wide screen. */
@media (min-width:1101px) and (max-width:1400px){
  .post-grid{grid-template-columns:repeat(min(var(--pg-cols,3),3),1fr)}
}

/* ---- Post hero cover -------------------------------------------------- */
.post-figure{position:relative}
.post-figure.is-drawn{aspect-ratio:16/9;background:none}
@media (min-width:861px){
  .post-figure.is-drawn{aspect-ratio:5/1}
  .cover .cv-mark{left:24px;bottom:19px;font-size:.86rem}
  .cover .cv-label{right:24px;bottom:19px;font-size:.78rem}
}

/* ============================================================
   4.11.7  WordPress admin bar
   Only logged in users ever see this, which is why it went
   unnoticed: the site is correct for visitors.
   The admin bar is fixed at the top of the viewport at z-index
   99999. Our header is fixed at top:0, and a fixed element
   ignores the html{margin-top:32px} WordPress adds, so the bar
   covered the top 32px of the header and left a matching gap
   above the hero. Everything fixed to the viewport shifts down
   by the height of the bar.
   Below 783px WordPress switches the bar to position:absolute
   so it scrolls away with the page, and shifting a fixed header
   there would leave a permanent gap once scrolled. So this is
   scoped to the widths where the bar is actually fixed.
   ============================================================ */
@media screen and (min-width:783px){
  body.admin-bar #site-header{top:32px}
  body.admin-bar .read-bar{top:32px}
  body.admin-bar .post-side{top:144px;max-height:calc(100vh - 168px)}
}
/* Anchor jumps must clear the bar as well as the header. Ignored by
   browsers without :has(), which simply leaves today's behaviour. */
@media screen and (min-width:783px){
  html:has(body.admin-bar){scroll-padding-top:132px}
}

/* ============================================================
   4.12.0  accessibility corrections
   ============================================================ */

/* The primary button was white on #F97316, which measures 2.80:1 and needs
   4.5:1 at 16px/700. #C05600 and #9A4300 are the two stops of the orange
   already used by the Search Console metric card, so the button stays on the
   approved palette and clears AA: 4.59:1 at rest, 6.61:1 on hover. --orange
   is left alone for decorative use. */
:root{--cta:#C05600;--cta-hover:#9A4300}
.btn-primary{background:var(--cta);box-shadow:0 10px 26px rgba(154,67,0,.34)}
.btn-primary:hover{background:var(--cta-hover);box-shadow:0 18px 36px rgba(154,67,0,.44)}

/* The footer menu is a real list now, so strip the default list furniture. */
.foot-col ul.foot-menu{list-style:none;margin:0;padding:0}
.foot-col ul.foot-menu li{margin:0}

/* Keyboard users need to see where they are. */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--indigo);outline-offset:3px;border-radius:6px}

/* ============================================================
   4.12.2  consultant or agency comparison
   A real table, because that is what the content is. Stating the two
   column labels once instead of once per row removed eight repeated
   rows of chrome and about a third of the section height. Semantic
   th/scope also means a screen reader announces which column a cell
   belongs to, which the old stack of divs could not do.
   Mobile: the same table stacks into one card per row at 860px.
   ============================================================ */
.vs{border:1px solid var(--border-2);border-radius:20px;box-shadow:var(--shadow-m);overflow:hidden;background:var(--card)}
.vs-cap{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.vs-table{width:100%;border-collapse:collapse;text-align:left}
.vs-table th,.vs-table td{padding:15px 22px;vertical-align:top}

.vs-table thead th{
  background:var(--bg-alt);border-bottom:1px solid var(--border-2);
  font-family:"Sora",sans-serif;font-weight:800;font-size:.73rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-3);padding-top:15px;padding-bottom:15px;white-space:nowrap
}
.vs-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:9px;vertical-align:middle}
.vs-h-us{color:#00614F}
[data-theme="dark"] .vs-h-us{color:#34D8A4}

/* Even columns for the two answers, so neither wraps a line earlier than the
   other and the rows stay shallow. */
.vs-table tbody th{font-family:"Sora",sans-serif;font-weight:800;font-size:1rem;color:var(--text)}
.vs-table th:first-child{width:22%}
.vs-table th:nth-child(2),.vs-table th:nth-child(3){width:39%}
.vs-table tbody td{font-size:.95rem;color:var(--text-2);line-height:1.6}
.vs-table tbody tr+tr>*{border-top:1px solid var(--border)}

/* The column that describes working with me runs as one continuous block,
   so the comparison reads down a column rather than across four cards. */
.vs-table .vs-us{background:color-mix(in srgb,#00806F 7%,transparent);box-shadow:inset 3px 0 0 #00806F}
.vs-table thead .vs-h-us{background:color-mix(in srgb,#00806F 12%,var(--bg-alt));box-shadow:inset 3px 0 0 #00806F}
[data-theme="dark"] .vs-table .vs-us{background:color-mix(in srgb,#34D8A4 9%,transparent);box-shadow:inset 3px 0 0 #34D8A4}
[data-theme="dark"] .vs-table thead .vs-h-us{background:color-mix(in srgb,#34D8A4 14%,var(--bg-alt));box-shadow:inset 3px 0 0 #34D8A4}

.vs-note{margin-top:20px;display:flex;gap:16px;align-items:flex-start;
  background:color-mix(in srgb,var(--indigo) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--indigo) 22%,transparent);
  border-radius:18px;padding:20px 24px}
.vs-note-ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--grad-brand);color:#fff;box-shadow:var(--shadow-s)}
.vs-note-ic svg{width:22px;height:22px}
.vs-note h3{font-size:1.16rem;font-weight:800;margin-bottom:8px}
.vs-note p{color:var(--text-2);font-size:1rem;margin-bottom:12px}

@media (max-width:860px){
  .vs{border:0;border-radius:0;box-shadow:none;background:transparent;overflow:visible}
  .vs-table,.vs-table tbody,.vs-table tr,.vs-table tbody th,.vs-table tbody td{display:block;width:auto}
  /* The desktop column widths would otherwise squeeze the stacked row heading
     down to one word per line. */
  .vs-table th:first-child,.vs-table th:nth-child(2),.vs-table th:nth-child(3){width:auto}
  .vs-table thead{display:none}
  .vs-table tbody tr{background:var(--card);border:1px solid var(--border);border-radius:16px;
    padding:18px 20px;box-shadow:var(--shadow-s)}
  .vs-table tbody tr+tr{margin-top:14px}
  .vs-table tbody tr+tr>*{border-top:0}
  .vs-table tbody th{padding:0 0 13px}
  .vs-table tbody td{padding:0 0 14px}
  .vs-table tbody tr td:last-child{padding-bottom:0}
  .vs-table tbody td::before{content:attr(data-col);display:block;margin-bottom:5px;
    font-family:"Sora",sans-serif;font-weight:800;font-size:.7rem;letter-spacing:.11em;
    text-transform:uppercase;color:var(--text-3)}
  .vs-table .vs-us{background:transparent;box-shadow:none;border-left:3px solid #00806F;padding-left:15px}
  .vs-table .vs-us::before{color:#00614F}
  [data-theme="dark"] .vs-table .vs-us{border-left-color:#34D8A4}
  [data-theme="dark"] .vs-table .vs-us::before{color:#34D8A4}
}

/* ============================================================
   4.12.3  audit checklist
   ============================================================ */
.sm-check{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:10px}
.sm-check li.ck{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;
  background:var(--card);border:1px solid var(--border);border-radius:13px;
  padding:15px 17px;transition:border-color .18s,opacity .18s}
.sm-check li.ck.is-done{opacity:.58;border-color:var(--border-2)}
.sm-check li.ck.is-done .ck-label strong{text-decoration:line-through}
.ck-box{appearance:none;-webkit-appearance:none;margin:2px 0 0;flex:none;
  width:22px;height:22px;border:2px solid var(--border-2);border-radius:7px;
  background:var(--bg-2);cursor:pointer;position:relative;transition:background .15s,border-color .15s}
.ck-box:hover{border-color:var(--indigo)}
.ck-box:checked{background:#00806F;border-color:#00806F}
.ck-box:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.ck-label{cursor:pointer;font-size:.98rem;line-height:1.6;color:var(--text-2)}
.ck-label strong{color:var(--text);font-weight:700}

.ck-progress{position:sticky;top:104px;z-index:5;margin:0 0 22px;
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:15px 18px;box-shadow:var(--shadow-m);display:flex;flex-direction:column;gap:10px}
.ck-p-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ck-p-k{font-family:"Sora",sans-serif;font-weight:800;font-size:.76rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3)}
.ck-p-n{font-size:.9rem;color:var(--text-2)}
.ck-p-n b{font-family:"Sora",sans-serif;color:var(--text);font-weight:800}
.ck-pct{color:var(--eyebrow);font-weight:700;margin-left:6px}
.ck-p-track{height:7px;border-radius:99px;background:var(--bg-alt);overflow:hidden}
.ck-fill{display:block;height:100%;width:0;border-radius:99px;background:var(--grad-brand);
  transition:width .25s ease}
.ck-reset{align-self:flex-start;background:none;border:none;padding:0;cursor:pointer;
  font-family:"Sora",sans-serif;font-size:.8rem;font-weight:700;color:var(--text-3);
  text-decoration:underline;text-underline-offset:3px}
.ck-reset:hover{color:var(--indigo)}
@media (min-width:861px){
  .ck-progress{flex-direction:row;align-items:center;gap:20px}
  .ck-p-top{flex:none;flex-direction:column;align-items:flex-start;gap:2px}
  .ck-p-track{flex:1}
}
@media print{
  /* Scroll reveals never fire when there is no scrolling, so printing any page
     would otherwise produce blank sheets where the content should be. */
  .reveal{opacity:1!important;transform:none!important}
  .ck-progress,.ck-reset,#site-header,footer,.social-rail,.share,.read-bar,
  .crumbs,.eyebrow,.final-alt{display:none!important}
  .sm-check li.ck{break-inside:avoid;opacity:1;border-color:#999}
  .ck-box{-webkit-appearance:checkbox;appearance:checkbox}
}

/* The low commitment route out of the final CTA, for readers who are not
   ready to book. Sits on the navy panel, so it needs its own colours. */
.final-alt{margin:20px auto 0;max-width:56ch;font-size:.98rem;color:#C6CFE6}
.final-alt a{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:600}
.final-alt a:hover{color:var(--orange)}

/* ============================================================
   4.13.0  letting the palette carry
   The Search Console colours were already on these components,
   applied as 3px hairlines and 15% tints, which is why the cards
   read as white. Nothing new is introduced below. The existing
   per-card tokens (--rc/--ri, --pc/--pi) simply do more work.
   ============================================================ */

/* ---- Trust ribbon --------------------------------------------------
   Navy, the same colour as the footer, so the content opens and closes
   on one anchor and the hero stops bleeding into the services section.
   Dark mode follows the footer's own pattern: panel colour plus a
   border, rather than navy on near-black. */
.ribbon{background:var(--navy);border-block:none;position:relative;overflow:hidden}
[data-theme="dark"] .ribbon{background:var(--bg-2);border-block:1px solid var(--border)}
.ribbon::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(560px 220px at 10% 0%,rgba(99,102,241,.30),transparent 62%),
             radial-gradient(520px 220px at 90% 100%,rgba(14,168,113,.22),transparent 62%)}
[data-theme="dark"] .ribbon::before{opacity:.45}
.ribbon .ribbon-grid{position:relative;z-index:1;padding-block:19px}
.ribbon .ritem{color:#fff;font-weight:600}
[data-theme="dark"] .ribbon .ritem{color:var(--text)}
.ribbon .ritem.rb-blue{--rbc:#8AB4F8}
.ribbon .ritem.rb-purple{--rbc:#C79BE0}
.ribbon .ritem.rb-green{--rbc:#34D8A4}
.ribbon .ritem.rb-orange{--rbc:#FCA457}

/* ---- Route cards ---------------------------------------------------
   A visible wash from the card's own colour down into white, a solid
   icon tile instead of tint on tint, and the step label as a pill.
   Body copy stays on white so nothing costs legibility. */
.route{background-image:linear-gradient(180deg,
  color-mix(in srgb,var(--rc) 14%,var(--surface)) 0%,
  var(--surface) 48%)}
.route::before{height:5px;opacity:1}
/* align-self, because the card is a flex column and a stretched pill
   spans the whole card width. */
.route .rtag{display:inline-flex;align-items:center;align-self:flex-start;
  background:color-mix(in srgb,var(--rc) 16%,transparent);
  color:var(--ri);padding:6px 13px;border-radius:999px;
  font-size:.73rem;letter-spacing:.1em}
.route .ic{width:54px;height:54px;border-radius:15px;margin:15px 0 16px;
  background:var(--rc);color:#fff;
  box-shadow:0 8px 20px color-mix(in srgb,var(--rc) 36%,transparent)}
.route .ic svg{width:26px;height:26px}
.route :is(h2,h3){font-size:1.3rem}
.route .link-arrow{font-weight:800}
.route:hover{border-color:color-mix(in srgb,var(--rc) 55%,var(--border));
  box-shadow:0 20px 42px color-mix(in srgb,var(--rc) 20%,transparent),var(--shadow-m)}

/* ---- Pricing cards -------------------------------------------------
   Same wash, plus the plan name and ticks in the plan's own colour.
   Every plan now ends in an action of the same shape, which is what
   left the outer two looking unfinished beside the popular one. */
.pcard{background-image:linear-gradient(180deg,
  color-mix(in srgb,var(--pc) 12%,var(--card)) 0%,
  var(--card) 44%)}
.pcard .pname{color:var(--pi)}
.pcard li svg{color:var(--pc)}
.pcard .plink{margin-top:auto;width:100%;justify-content:center;
  padding:13px 18px;border-radius:12px;font-size:.95rem;font-weight:800;
  border:2px solid color-mix(in srgb,var(--pc) 42%,transparent);
  color:var(--pi);transition:background .18s,border-color .18s,transform .18s}
.pcard .plink:hover{background:color-mix(in srgb,var(--pc) 12%,transparent);
  border-color:var(--pc);transform:translateY(-2px);gap:11px}
/* The popular card's button already fills the width, so match its rhythm. */
.pcard.pop .btn{margin-top:auto}
.pcard.pop{box-shadow:0 26px 60px color-mix(in srgb,var(--pc) 26%,transparent),var(--shadow-l)}

/* ============================================================
   4.14.0  email capture
   One field and a separate consent act. The panel is navy so it
   reads as a deliberate offer rather than another content block.
   ============================================================ */
.capture{margin:40px 0 0}
.capture-in{background:var(--navy);border-radius:24px;padding:34px 30px;position:relative;overflow:hidden;
  box-shadow:var(--shadow-l);display:flex;flex-direction:column;gap:22px}
[data-theme="dark"] .capture-in{border:1px solid var(--border)}
.capture-in::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 320px at 100% 0%,rgba(99,102,241,.50),transparent 62%),
             radial-gradient(460px 280px at 0% 100%,rgba(14,168,113,.30),transparent 60%)}
.capture-copy,.capture-form{position:relative;z-index:1}
.capture-copy h2{color:#fff;font-size:1.5rem;font-weight:800;margin-bottom:9px;letter-spacing:-.01em}
.capture-copy p{color:#C2CBE6;font-size:1rem;margin:0;max-width:56ch}

.capture-form{display:flex;flex-direction:column;gap:14px}
.cap-row{display:flex;flex-direction:column;gap:11px}
.cap-field{display:flex;flex-direction:column;gap:7px;flex:1}
.cap-lbl{font-family:"Sora",sans-serif;font-weight:700;font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;color:#AEB9DC}
.cap-field input{width:100%;padding:14px 16px;border-radius:12px;font-size:1rem;font-family:inherit;
  color:var(--text);background:#fff;border:2px solid transparent;transition:border-color .18s,box-shadow .18s}
[data-theme="dark"] .cap-field input{background:var(--surface);color:var(--text)}
.cap-field input::placeholder{color:#8592AE}
.cap-field input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(192,86,0,.28)}
.capture-form .btn{justify-content:center;white-space:nowrap;padding:14px 22px}
.capture-form .btn:disabled{opacity:.6;cursor:not-allowed;transform:none}

.cap-consent{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  color:#D3DAEC;font-size:.93rem;line-height:1.5}
.cap-consent input{appearance:none;-webkit-appearance:none;margin:2px 0 0;flex:none;
  width:21px;height:21px;border:2px solid rgba(255,255,255,.45);border-radius:6px;
  background:transparent;cursor:pointer;position:relative;transition:background .15s,border-color .15s}
.cap-consent input:hover{border-color:#fff}
.cap-consent input:checked{background:#00806F;border-color:#00806F}
.cap-consent input:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.cap-consent input:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

.cap-fine{color:#8FA0C4;font-size:.84rem;margin:0}
.cap-fine a{color:#C2CBE6;text-decoration:underline;text-underline-offset:2px}
.cap-fine a:hover{color:#fff}
.cap-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cap-msg{margin:0;font-size:.92rem;color:#C2CBE6;min-height:0}
.cap-msg:empty{display:none}
.capture-form[data-state="err"] .cap-msg{color:#FFC9A3;font-weight:600}

.cap-done{display:flex;gap:16px;align-items:flex-start}
.cap-done .cap-tick{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:#00806F;color:#fff}
.cap-done .cap-tick svg{width:24px;height:24px}
.cap-done strong{display:block;color:#fff;font-family:"Sora",sans-serif;font-size:1.12rem;margin-bottom:5px}
.cap-done p{color:#C2CBE6;font-size:.95rem;margin:0 0 15px}

@media (min-width:721px){
  .capture-in{padding:38px 38px}
  .cap-row{flex-direction:row;align-items:flex-end;gap:13px}
  .capture-form .btn{margin-bottom:0}
}
/* The panel sits inside a 760px article column on the checklist page, so the
   split has to answer to the space it actually has, not the viewport width.
   Browsers without container queries keep the stacked layout, which is the
   safe one. */
.capture{container-type:inline-size}
@container (min-width:880px){
  .capture-in{flex-direction:row;align-items:center;gap:44px;padding:40px 42px}
  .capture-copy{flex:1.05}
  .capture-form{flex:1.25}
}
.cap-field{min-width:0}
@media print{.capture{display:none!important}}

/* ---- Dark theme, one consistent hue per route ----------------------
   The old dark overrides were partial and contradictory: Build had no
   --rc at all so it fell back to green while Grow had an orange fill
   with green ink. Light mode reads purple, blue, green, so dark does
   too. The glyph flips to the dark surface colour because a white one
   on these lighter tiles is barely there. */
[data-theme="dark"] .route.r-diagnose,[data-theme="dark"] .pcard.p-diagnose{--rc:#98A0FF;--ri:#C9A9FF;--pc:#98A0FF;--pi:#C9A9FF}
[data-theme="dark"] .route.r-build,[data-theme="dark"] .pcard.p-build{--rc:#8AB4F8;--ri:#8AB4F8;--pc:#8AB4F8;--pi:#8AB4F8}
[data-theme="dark"] .route.r-grow,[data-theme="dark"] .pcard.p-grow{--rc:#34D8A4;--ri:#34D8A4;--pc:#34D8A4;--pi:#34D8A4}
[data-theme="dark"] .route .ic{color:#0C1424}

/* The drawer styles every link as dark body text, which the CTA inside it was
   inheriting: near-black on orange measures 4.0:1 and needs 4.5. The button
   keeps its own white. */
.mobile-panel .btn{color:#fff;border-bottom:none}
.mobile-panel .btn-navy{color:#fff}

/* ============================================================
   Free tools: the hub and the single-tool app shell
   ============================================================ */
.toolpage{padding-block:56px 92px;position:relative}
.toolpage::before{content:"";position:absolute;inset:0 0 auto;height:420px;pointer-events:none;background:var(--grad-hero)}
.toolpage-shell{position:relative;width:100%;max-width:1040px;margin-inline:auto;padding-inline:26px;display:flex;flex-direction:column;gap:26px}
.toolpage-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.toolpage-head .crumbs{justify-content:center;margin-bottom:0}
.toolpage-head .eyebrow{gap:8px}
.toolpage-head .eyebrow svg{width:15px;height:15px}
.toolpage-head h1{font-size:clamp(2rem,4.4vw,3rem);letter-spacing:-.03em;line-height:1.1;margin:0;text-wrap:balance}
.toolpage-lead{max-width:64ch;color:var(--text-2);font-size:1.06rem;margin:0}
.toolpage-app{margin-top:4px}
.toolpage-notes{width:100%;max-width:62ch;margin-inline:auto;margin-top:10px;padding-top:30px;border-top:1px solid var(--border)}
.toolpage-notes h2{font-size:1.34rem;margin:0 0 10px;letter-spacing:-.01em}
.toolpage-notes h2:not(:first-child){margin-top:42px;padding-top:22px;border-top:1px solid var(--border)}
.toolpage-notes h3{font-size:1.04rem;margin:26px 0 6px;letter-spacing:-.005em}
.toolpage-notes p{color:var(--text-2)}
.toolpage-notes p+p{margin-top:12px}
.toolpage-notes ul,.toolpage-notes ol{margin:14px 0 0;padding-left:1.25em;color:var(--text-2)}
.toolpage-notes li+li{margin-top:10px}
.toolpage-notes li strong{color:var(--text)}
.toolpage-notes code{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:.95em;line-height:1.4;color:var(--text);background:var(--bg-alt);border:1px solid var(--border);border-radius:5px;padding:2px 7px;white-space:nowrap}

/* The four result states carry their own colour, so the article and the report
   teach the same visual language. */
.toolpage-notes h3.state{display:flex;align-items:center;gap:10px;margin-top:24px}
.toolpage-notes h3.state::before{content:"";width:11px;height:11px;border-radius:50%;flex:none}
.toolpage-notes h3.state-crit::before{background:#D93025;box-shadow:0 0 0 4px rgba(217,48,37,.16)}
.toolpage-notes h3.state-warn::before{background:#E37400;box-shadow:0 0 0 4px rgba(227,116,0,.16)}
.toolpage-notes h3.state-pass::before{background:#1E8E3E;box-shadow:0 0 0 4px rgba(30,142,62,.16)}
.toolpage-notes h3.state-na::before{background:#80868B;box-shadow:0 0 0 4px rgba(128,134,139,.16)}

/* ---- Hub cards ---- */
.toolcard{display:block;background:var(--card);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow-s);transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s,border-color .2s}
.toolcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-m);border-color:var(--border-2)}
.toolcard-lead{display:grid;gap:0;overflow:hidden}
.toolcard-body{padding:34px 30px;display:flex;flex-direction:column;align-items:flex-start;gap:13px}
.toolcard-tag{display:inline-flex;align-items:center;gap:9px;font-family:"Sora",sans-serif;font-weight:800;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--eyebrow);background:color-mix(in srgb,var(--indigo) 9%,transparent);border:1px solid color-mix(in srgb,var(--indigo) 22%,transparent);border-radius:999px;padding:6px 13px}
.toolcard-tag-quiet{color:var(--text-3);background:var(--bg-alt);border-color:var(--border)}
.toolcard-dot{width:7px;height:7px;border-radius:50%;background:#0EA871;box-shadow:0 0 0 4px color-mix(in srgb,#0EA871 22%,transparent)}
.toolcard h2{font-size:1.6rem;letter-spacing:-.02em;margin:0}
.toolcard h3{font-size:1.16rem;letter-spacing:-.01em;margin:0}
.toolcard p{color:var(--text-2);margin:0;font-size:.98rem}
.toolcard-points{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.toolcard-points li{position:relative;padding-left:26px;color:var(--text-2);font-size:.95rem}
.toolcard-points li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:#00806F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat}
.toolcard-lead .btn{margin-top:8px}
.toolcard-lead:hover .btn{background:var(--orange-600)}

/* A quiet mock of the tool, so the card shows what the visitor is about to get. */
.toolcard-visual{background:var(--navy);padding:26px;display:none;flex-direction:column;gap:11px;position:relative;overflow:hidden}
/* In dark mode the panel and the card are both near-navy, so it needs an edge. */
[data-theme="dark"] .toolcard-visual{border-left:1px solid var(--border-2);background:#060B16}
.toolcard-visual::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 260px at 100% 0%,rgba(99,102,241,.42),transparent 62%)}
.toolcard-visual>*{position:relative;z-index:1}
.tv-bar{display:flex;gap:6px;margin-bottom:4px}
.tv-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.24)}
.tv-input{height:38px;border-radius:9px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;padding:0 12px}
.tv-input span{display:block;height:7px;width:58%;border-radius:99px;background:rgba(255,255,255,.30)}
.tv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.tv-stat{border-radius:10px;padding:11px 10px;display:flex;flex-direction:column;gap:2px;border:1px solid rgba(255,255,255,.14)}
.tv-stat b{font-family:"Sora",sans-serif;font-size:1.16rem;line-height:1}
.tv-stat i{font-style:normal;font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;opacity:.75}
.tv-crit{background:rgba(240,146,135,.12);color:#F09287}
.tv-warn{background:rgba(227,162,92,.12);color:#E3A25C}
.tv-pass{background:rgba(79,191,149,.14);color:#4FBF95}
.tv-line{height:9px;border-radius:99px;background:rgba(255,255,255,.09);margin-top:3px}
.tv-line.tv-short{width:64%}

.toolgrid{display:grid;gap:18px}
.toolcard-sm{padding:28px 26px;display:flex;flex-direction:column;align-items:flex-start;gap:11px}
.toolcard-next{background:color-mix(in srgb,var(--indigo) 5%,var(--card));border-color:color-mix(in srgb,var(--indigo) 24%,transparent)}
.toolcard-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:6px;font-family:"Sora",sans-serif;font-weight:700;font-size:.94rem;color:var(--eyebrow)}
.toolcard-go svg{width:16px;height:16px;transition:transform .18s}
.toolcard-sm:hover .toolcard-go svg{transform:translateX(4px)}

@media (min-width:761px){
  .toolgrid{grid-template-columns:1fr 1fr}
  .toolcard-visual{display:flex}
  .toolcard-lead{grid-template-columns:1.25fr .95fr;align-items:stretch}
  .toolcard-body{padding:40px 36px}
}
@media (min-width:861px){
  .toolpage{padding-block:64px 104px}
  .toolpage-shell{gap:30px}
}
@media (prefers-reduced-motion:reduce){
  .toolcard,.toolcard-go svg{transition:none}
  .toolcard:hover{transform:none}
}

/* Six top-level items now, so nothing may wrap mid-label. */
.nav-links>li>a{white-space:nowrap}
@media (min-width:1025px) and (max-width:1279px){
  #site-header .nav{gap:clamp(16px,2vw,32px)}
  .nav-links{gap:clamp(16px,1.8vw,28px)}
  .nav-links a{font-size:.97rem}
}

/* ============================================================
   Homepage free tools section
   Built on .route so it reads as part of the same page rather than a
   promotional box bolted underneath. Adding a third tool is one more card.
   ============================================================ */
.route.tool{display:flex;flex-direction:column;align-items:flex-start;padding-bottom:32px}
.tool-head{display:flex;flex-wrap:wrap;align-items:center;gap:9px 14px;width:100%}
.tool-state{display:inline-flex;align-items:center;gap:7px;font-family:"Sora",sans-serif;font-weight:700;font-size:.75rem;letter-spacing:.02em;color:var(--text-3);background:var(--bg-alt);border:1px solid var(--border);border-radius:999px;padding:5px 12px}
.tool-state::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;background:var(--rc,var(--indigo))}
.route.tool p{margin-bottom:18px}
.tool-points{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:10px;width:100%}
.tool-points li{position:relative;padding-left:27px;color:var(--text-2);font-size:.96rem;line-height:1.55}
.tool-points li svg{position:absolute;left:0;top:3px;width:17px;height:17px;color:var(--rc,var(--indigo))}
.route.tool .link-arrow{margin-top:auto}
.tools-note{margin-top:28px;text-align:center;color:var(--text-3);font-size:.97rem}
.tools-note a{color:var(--eyebrow);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.tools-note a:hover{text-decoration-thickness:2px}

@media (min-width:861px){
  /* The diagnostic is the one that produces an answer, so it gets the room. */
  .routes-tools{grid-template-columns:1.3fr 1fr}
}
/* The page alternates grey and white section by section. Services already owns
   the grey slot immediately above, so the tools band takes a tint of its own
   rather than repeating it. Tinting one section also keeps the free tools area
   reading as its own zone as more tools are added, and avoids inverting every
   background below it just to restore the alternation. */
#tools{
  background:color-mix(in srgb,var(--indigo) 5%,var(--bg));
  border-block:1px solid color-mix(in srgb,var(--indigo) 14%,transparent);
}
#tools::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 400px at 50% 0%,color-mix(in srgb,var(--indigo) 9%,transparent),transparent 72%);
}
#tools>*{position:relative;z-index:1}
[data-theme="dark"] #tools{
  background:color-mix(in srgb,var(--indigo) 9%,var(--bg));
  border-block-color:color-mix(in srgb,var(--indigo) 22%,transparent);
}


/* Section rhythm.
   The page alternates grey and white so each section reads as its own block.
   Adding #tools and #independent broke that alternation in two places, leaving
   pairs of touching sections in the same shade, which flattens the page. These
   restore the strict alternation from #independent to the end. Backgrounds only,
   no layout or spacing changes. */
#independent{background:var(--surface)}
#founder{background:var(--bg)}
#faq{background:var(--surface)}
#blog{background:var(--bg)}
#contact{background:var(--surface)}

#independent .sec-head{margin-bottom:40px}

/* The nav landmarks wrap the menus for screen readers without becoming layout
   boxes, so the header flex row is unchanged. */
.nav-primary,.m-nav{display:contents}
/* Plan names are h2 so the pricing page has a real heading outline. They keep
   the .pname size, and the global reset already zeroes heading margins. */
h2.pname{line-height:1.3}