/*
Theme Name: SiteAuditHub Glass
Theme URI: https://www.siteaudithub.com
Author: SiteAuditHub Team
Description: A premium dark "aurora glass" theme for SiteAuditHub built around a live-scan visual identity, tools, blog, and legal pages unified under one design system. Each page type has its own PHP template; every animation and interaction lives in this single stylesheet + one lightweight JS file.
Version: 1.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom, dark, tools, blog, responsive
Text Domain: siteaudithub-glass
*/

/* Self-hosted fonts (SIL Open Font License, see assets/fonts/OFL-*.txt).
   Variable fonts: one file per family covers every weight used. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('assets/fonts/inter-latin-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('assets/fonts/bricolage-grotesque-latin-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;
  src:url('assets/fonts/jetbrains-mono-latin-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}


:root{
  --bg:#0A0E1A;
  --bg-2:#0E1424;
  --glass:rgba(255,255,255,0.045);
  --glass-hi:rgba(255,255,255,0.09);
  --border:rgba(255,255,255,0.09);
  --border-hi:rgba(255,255,255,0.18);

  --text:#F3F5F8;
  --text-dim:#A7B0C0;
  --text-faint:#808DA3;

  --blue:#5B9BF0;
  --blue-soft:#3B6FC4;
  --green:#5FDB8E;
  --green-soft:#3FA868;
  --amber:#F0B860;

  --display:'Bricolage Grotesque', sans-serif;
  --body:'Inter', sans-serif;
  --mono:'JetBrains Mono', monospace;
  --max:1400px;
  --btn-radius:10px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-overflow-scrolling:touch;}
body{
  background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.65;overflow-x:clip;
  max-width:100vw;-webkit-overflow-scrolling:touch;
}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{overflow-wrap:break-word;word-wrap:break-word;}
img,svg{max-width:100%;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(26px, 6vw, 48px);box-sizing:border-box;width:100%;}

/* Grid/flex children default to min-width:auto in browsers, which lets
   long unbroken text (titles, badges) force a track wider than its
   column and spill into neighbouring cards on narrow screens. Setting
   min-width:0 everywhere a card sits inside a grid fixes that squish. */
.tool-card, .ext-card, .why-card, .dev-card, .step, .testi-card, .blog-card,
.result-row, .about-stat, .team-card, .stat, .faq-item, .contact-info-card{
  min-width:0;overflow-wrap:break-word;word-wrap:break-word;
}
::selection{background:var(--green);color:#0A0E1A;}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-0.02em;line-height:1.2;}
img,svg{max-width:100%;display:block;}
button{font-family:inherit;}

/* Accessibility: visible focus, skip link */
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px;}
.skip-link{
  position:fixed;top:-60px;left:16px;background:var(--green);color:#0A0E1A;padding:10px 18px;
  border-radius:8px;font-weight:700;z-index:1000;transition:top .2s;
}
.skip-link:focus{top:16px;}

/* =========================================================
   AURORA BACKGROUND (animated, parallax on scroll)
   ========================================================= */
.aurora{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.aurora span{
  position:absolute;border-radius:50%;filter:blur(90px);opacity:.35;
  animation:drift 22s ease-in-out infinite;
}
.a1{width:520px;height:520px;background:var(--blue);top:-160px;left:-120px;animation-delay:0s;}
.a2{width:460px;height:460px;background:var(--green);top:10%;right:-140px;animation-delay:4s;}
.a3{width:400px;height:400px;background:var(--blue-soft);bottom:-140px;left:20%;animation-delay:8s;}
@keyframes drift{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(40px,-30px) scale(1.12);}
}
/* On phones/tablets these blobs are large relative to the viewport
   and their blur doesn't have enough room to fade out softly, so
   they read as a hard, dominant color wash across the text instead
   of a subtle ambient glow. Shrinking + dimming them below 900px
   keeps the same aurora effect without it overpowering content. */

main, header, footer{position:relative;z-index:1;}

/* =========================================================
   HEADER + DROPDOWN NAV
   ========================================================= */
header{position:sticky;top:0;z-index:400;background:rgba(10,14,26,0.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);}
nav{max-width:var(--max);margin:0 auto;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:1.15rem;color:var(--text);transition:opacity .2s ease;}
.logo:hover{opacity:.85;}
.logo .mark{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),var(--green));color:#06090F;
  display:flex;align-items:center;justify-content:center;transition:transform .3s ease;
}
.logo:hover .mark{transform:scale(1.08) rotate(-6deg);}
.logo .mark svg{width:17px;height:17px;}
.logo img{max-height:36px;width:auto;display:block;}
.custom-logo-link{display:flex;align-items:center;}

.nav-links{display:flex;align-items:center;gap:4px;list-style:none;}
.nav-item{position:relative;}
.nav-links > .nav-item > a, .nav-links > .nav-item > button{
  position:relative;font-size:.9rem;color:var(--text-dim);font-weight:600;padding:10px 16px;border-radius:8px;
  background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:6px;
  transition:color .25s ease, background .25s ease, transform .25s ease;
}
.nav-links > .nav-item > a::after{
  content:'';position:absolute;left:16px;right:16px;bottom:6px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--green),var(--blue));transform:scaleX(0);transform-origin:left;
  transition:transform .3s ease;
}
.nav-links > .nav-item > a:hover::after{transform:scaleX(1);}
.nav-links > .nav-item > a:hover, .nav-links > .nav-item > button:hover,
.nav-links > .nav-item > button[aria-expanded="true"]{color:var(--text);background:var(--glass);transform:translateY(-1px);}
.chev{transition:transform .25s;}
.nav-links > .nav-item > button[aria-expanded="true"] .chev{transform:rotate(180deg);}

.dropdown{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);
  width:420px;background:var(--bg-2);border:1px solid var(--border-hi);border-radius:16px;
  padding:14px;opacity:0;visibility:hidden;transition:opacity .22s, transform .22s, visibility .22s;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);display:grid;grid-template-columns:1fr 1fr;gap:4px;
}
/* Opens on hover (desktop) and on keyboard focus, in addition to click */
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown,
.dropdown.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
/* small invisible bridge so the dropdown doesn't close while moving the mouse into it */
.nav-item::after{content:'';position:absolute;top:100%;left:0;right:0;height:10px;}
.dropdown a{
  display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;font-size:.85rem;
  color:var(--text-dim);transition:background .2s, color .2s;
}
.dropdown a:hover{background:var(--glass-hi);color:var(--text);}
.dropdown a .ico{width:30px;height:30px;border-radius:8px;background:var(--glass-hi);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--green);}
.dropdown a .ico svg{width:16px;height:16px;}
.dropdown a:nth-child(even) .ico{color:var(--blue);}

.nav-cta{
  position:relative;font-weight:700;font-size:.85rem;color:#0A0E1A;padding:11px 22px;border-radius:var(--btn-radius);
  background:linear-gradient(120deg,var(--green),var(--blue));overflow:hidden;isolation:isolate;
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.nav-cta::after{
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,0.55),transparent);
  transform:skewX(-20deg);transition:left .6s ease;
}
.nav-cta:hover::after{left:130%;}
.nav-cta:hover{transform:translateY(-2px);}
.menu-toggle{display:none;background:var(--glass);border:1px solid var(--border);border-radius:10px;width:42px;height:42px;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;color:var(--text);z-index:400;position:relative;}
.menu-toggle span{width:18px;height:2px;background:var(--text);transition:.3s;}
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle.open span:nth-child(2){opacity:0;}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Full-screen mobile menu panel */
#mobileMenu{
  position:fixed;inset:0;z-index:350;background:rgba(10,14,26,0.98);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;justify-content:center;padding:40px;
  opacity:0;visibility:hidden;transform:translateY(-16px);transition:opacity .35s ease, transform .35s ease, visibility .35s;
}
#mobileMenu.open{opacity:1;visibility:visible;transform:translateY(0);}
/* Explicit close button, rendered inside the overlay itself so it's
   always visible, never depends on the header's own toggle button
   being on top of the stacking order. */
.mm-close{
  position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;
  background:var(--glass);border:1px solid var(--border-hi);color:var(--text);
  display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1;
  font-size:1.4rem;line-height:1;transition:border-color .2s, color .2s, transform .2s;
}
.mm-close:hover{border-color:var(--green);color:var(--green);transform:rotate(90deg);}
/* The header's own hamburger button already sits above this overlay
   (header z-index:400 > #mobileMenu z-index:350) and morphs into an
   X shape via .menu-toggle.open below, so this separate close
   button was rendering as a second, overlapping X icon next to it.
   Hidden here rather than removed from the markup, in case a future
   z-index change ever needs it back as a fallback. */
.mm-close{display:none;}
#mobileMenu ul{list-style:none;margin-bottom:40px;}
#mobileMenu li{overflow:hidden;margin-bottom:6px;}
#mobileMenu a{
  font-family:var(--display);font-size:2rem;font-weight:700;color:var(--text);display:inline-block;
  padding:8px 0;transform:translateY(110%);opacity:0;transition:transform .5s cubic-bezier(.2,.9,.3,1), opacity .5s ease;
}
#mobileMenu.open a{transform:translateY(0);opacity:1;}
#mobileMenu li:nth-child(1) a{transition-delay:.06s;}
#mobileMenu li:nth-child(2) a{transition-delay:.11s;}
#mobileMenu li:nth-child(3) a{transition-delay:.16s;}
#mobileMenu li:nth-child(4) a{transition-delay:.21s;}
#mobileMenu li:nth-child(5) a{transition-delay:.26s;}
#mobileMenu a:hover{background:linear-gradient(120deg,var(--blue),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent;transform:translateX(6px);}
.menu-toggle:hover{border-color:var(--green);background:var(--glass-hi);}
#mobileMenu .mm-cta{
  font-family:var(--body);font-size:1rem;font-weight:700;color:#06090F;background:linear-gradient(120deg,var(--green),var(--blue));
  display:inline-flex;align-self:flex-start;padding:14px 28px;border-radius:var(--btn-radius);transform:translateY(20px);opacity:0;
  transition:transform .5s cubic-bezier(.2,.9,.3,1) .32s, opacity .5s ease .32s;
}
#mobileMenu.open .mm-cta{transform:translateY(0);opacity:1;}
#mobileMenu .mm-foot{margin-top:30px;font-family:var(--mono);font-size:.76rem;color:var(--text-faint);}
/* Same failsafe idea: never let the page stay scroll-locked forever
   even if the JS that normally removes this class doesn't run. */

/* =========================================================
   HERO
   ========================================================= */
.hero{padding:80px 0;text-align:center;}
.eyebrow{
  font-family:var(--mono);font-size:.72rem;color:var(--green);letter-spacing:.08em;
  display:inline-flex;align-items:center;gap:9px;margin-bottom:26px;font-weight:600;
  background:var(--glass);border:1px solid var(--border);padding:8px 16px;border-radius:999px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:blink 1.6s infinite;box-shadow:0 0 8px var(--green);}
@keyframes blink{50%{opacity:.3;}}
.hero h1{font-size:clamp(2rem, 5.2vw, 4rem);line-height:1.1;margin-bottom:24px;max-width:820px;margin-left:auto;margin-right:auto;}
.grad-text{background:linear-gradient(120deg,var(--blue),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero p.lead{font-size:1.15rem;color:var(--text-dim);max-width:560px;margin:0 auto 38px;}
.hero-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:56px;}

/* All buttons share the same radius + the same shine-sweep hover animation */
.btn{
  position:relative;font-weight:700;font-size:.95rem;padding:16px 30px;border-radius:var(--btn-radius);
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;border:1px solid transparent;
  overflow:hidden;isolation:isolate;transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.btn::after{
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,0.45),transparent);
  transform:skewX(-20deg);transition:left .6s ease;
}
.btn:hover::after{left:130%;}
.btn:hover{transform:translateY(-3px);}
.btn-primary{background:linear-gradient(120deg,var(--blue),var(--green));color:#06090F;}
.btn-primary:hover{box-shadow:0 18px 34px -12px rgba(91,155,240,0.45);}
.btn-ghost{color:var(--text);background:var(--bg-2);border-color:var(--border-hi);}
.btn-ghost:hover{border-color:var(--green);box-shadow:0 18px 34px -12px rgba(95,219,142,0.3);}
.btn .arrow{transition:transform .3s;}
.btn:hover .arrow{transform:translateX(5px);}

.stat-row{display:flex;gap:50px;justify-content:center;flex-wrap:wrap;}
.stat strong{font-family:var(--display);font-size:clamp(1.4rem, 3.4vw, 2.1rem);display:block;}
.stat span{font-size:.76rem;color:var(--text-faint);font-family:var(--mono);letter-spacing:.05em;}

/* Glass scan card */
.audit-card{
  max-width:640px;margin:56px auto 0;background:var(--glass);border:1px solid var(--border-hi);
  border-radius:20px;backdrop-filter:blur(20px);overflow:hidden;text-align:left;
  box-shadow:0 40px 80px -30px rgba(0,0,0,0.6);
}
.audit-card-top{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--border);}
.audit-card-top .who{font-family:var(--mono);font-size:.78rem;color:var(--text-dim);}
.audit-card-top .badge{font-family:var(--mono);font-size:.66rem;background:var(--glass-hi);color:var(--green);padding:4px 10px;border-radius:999px;}
.audit-row{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid rgba(255,255,255,0.05);}
.audit-row:last-child{border-bottom:none;}
.audit-row .status-dot{width:9px;height:9px;border-radius:50%;background:var(--text-faint);flex-shrink:0;}
.audit-row.scanning .status-dot{background:var(--blue);box-shadow:0 0 10px var(--blue);}
.audit-row.pass .status-dot{background:var(--green);box-shadow:0 0 10px var(--green);}
.audit-row.issue .status-dot{background:var(--amber);box-shadow:0 0 10px var(--amber);}
.audit-row .label{font-size:.88rem;color:var(--text-dim);flex:1;}
.audit-row.scanning .label,.audit-row.pass .label{color:var(--text);}
.audit-row .result{font-family:var(--mono);font-size:.74rem;opacity:0;transition:opacity .3s;}
.audit-row.pass .result{color:var(--green);opacity:1;}
.audit-row.issue .result{color:var(--amber);opacity:1;}
.audit-summary{padding:16px 22px;background:rgba(255,255,255,0.02);display:flex;justify-content:space-between;font-family:var(--mono);font-size:.76rem;color:var(--text-dim);}

/* =========================================================
   INFINITE MARQUEE
   ========================================================= */
.marquee-band{border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden;padding:16px 0;background:var(--glass);}
.marquee-track{display:flex;width:max-content;animation:marquee 26s linear infinite;}
.marquee-track span{font-family:var(--mono);font-size:.82rem;color:var(--text-dim);padding:0 30px;white-space:nowrap;display:flex;align-items:center;gap:10px;}
.marquee-track span::before{content:'◆';color:var(--green);font-size:.6rem;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.marquee-band:hover .marquee-track{animation-play-state:paused;}

/* =========================================================
   SECTIONS
   ========================================================= */
.section{padding:55px 0;}
.section-head{max-width:640px;margin:0 auto 56px;text-align:center;}
.section-head .eyebrow{margin:0 auto 20px;}
.section-head h2{font-size:clamp(1.5rem, 3.6vw, 2.4rem);margin-bottom:14px;}
.section-head p{color:var(--text-dim);}
.reveal{opacity:0;transform:translateY(36px);transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-left{opacity:0;transform:translateX(-50px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);}
.reveal-left.in{opacity:1;transform:translateX(0);}
.reveal-right{opacity:0;transform:translateX(50px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);}
.reveal-right.in{opacity:1;transform:translateX(0);}
.reveal-scale{opacity:0;transform:translateY(30px) scale(.94);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);}
.reveal-scale.in{opacity:1;transform:translateY(0) scale(1);}

/* How it works, scroll-linked line */
.timeline{position:relative;max-width:900px;margin:0 auto;}
.timeline-line{position:absolute;top:34px;left:34px;right:34px;height:2px;background:var(--border);}
.timeline-fill{position:absolute;top:0;left:0;height:100%;width:0%;background:linear-gradient(90deg,var(--blue),var(--green));transition:width .1s linear;}
/* Vertical version of the same connecting line, shown only when
   steps stack in a single column on mobile (the horizontal one is
   hidden there). Without it, stacked steps just read as plain
   numbered paragraphs rather than a sequence, the line is what
   visually says "these are steps". */
.timeline-line-mobile{
  display:none;position:absolute;top:26px;bottom:26px;left:26px;width:2px;background:var(--border);
}
.timeline-fill-mobile{position:absolute;top:0;left:0;width:100%;height:0%;background:linear-gradient(180deg,var(--blue),var(--green));transition:height .1s linear;}
.steps-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative;}
.step-num{width:68px;height:68px;border-radius:50%;background:var(--bg-2);border:1px solid var(--border-hi);display:flex;align-items:center;justify-content:center;margin-bottom:22px;font-family:var(--display);font-size:1.3rem;font-weight:700;position:relative;z-index:2;transition:border-color .3s ease, transform .3s ease, background .3s ease;}
.step-num.is-active{border-color:var(--green);background:rgba(95,219,142,0.12);transform:scale(1.08);}
/* Pulsing "radar ping" ring around the current step, same visual
   language as the tool icons elsewhere on the site, so this section
   feels consistent rather than like a separate component. */
.step-num::after{
  content:'';position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--green);
  opacity:0;pointer-events:none;
}
.step-num.is-active::after{animation:step-ping 1.8s ease-out infinite;}
@keyframes step-ping{
  0%{transform:scale(0.85);opacity:0;}
  40%{opacity:.7;}
  100%{transform:scale(1.4);opacity:0;}
}
/* The step's own heading + text fade/lift into place a beat after
   its number lights up, only makes sense on the mobile stacked
   layout (see the 900px media query below); on desktop all three
   steps sit side by side and should stay fully visible. */

.step h3, .step .card-title{font-size:1.2rem;margin-bottom:10px;}
.step p{color:var(--text-dim);font-size:.92rem;max-width:270px;}
.custom-logo-link img.custom-logo {
    height: auto;
    width: 201px;
}
.footer-brand img.custom-logo {
    width: 213px;
    height: auto ! IMPORTANT;
    OBJECT-FIT: contain;
    max-height: fit-content;
}
/* Tools */
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.tool-card{background:var(--glass);border:1px solid var(--border);border-radius:18px;padding:30px 26px;transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;}
.tool-card:hover{transform:translateY(-6px);border-color:var(--border-hi);box-shadow:0 30px 50px -24px rgba(0,0,0,0.5);}
.tool-icon{
  width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;background:var(--bg-2);position:relative;
}
.tool-icon svg{width:22px;height:22px;stroke:var(--green);position:relative;z-index:2;animation:icon-breathe 3.4s ease-in-out infinite;}
.tool-card:nth-child(even) .tool-icon svg{stroke:var(--blue);animation-delay:.7s;}
@keyframes icon-breathe{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.14);}
}
/* Continuously rotating radar-scan ring behind the icon */
.tool-icon::before{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  background:conic-gradient(from 0deg, var(--green) 0deg, transparent 70deg, transparent 360deg);
  animation:radar-spin 2.6s linear infinite;
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}
.tool-card:nth-child(even) .tool-icon::before{background:conic-gradient(from 0deg, var(--blue) 0deg, transparent 70deg, transparent 360deg);animation-duration:3.2s;}
@keyframes radar-spin{to{transform:rotate(360deg);}}
/* Soft pulsing halo, offset so it never syncs boringly with the ring */
.tool-icon::after{
  content:'';position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(95,219,142,0.3);
  animation:icon-halo 3.4s ease-out infinite;
}
.tool-card:nth-child(even) .tool-icon::after{border-color:rgba(91,155,240,0.3);animation-delay:1.1s;}
@keyframes icon-halo{
  0%{transform:scale(0.7);opacity:0;}
  40%{opacity:.8;}
  100%{transform:scale(1.5);opacity:0;}
}
.tool-card h3{font-size:1.12rem;margin-bottom:8px;}
.tool-card p{font-size:.9rem;color:var(--text-dim);min-height:44px;margin-bottom:18px;}
.tool-link{font-weight:600;font-size:.85rem;color:var(--green);display:inline-flex;align-items:center;gap:6px;}
.tool-link .arrow{transition:transform .25s;}
.tool-card:hover .tool-link .arrow{transform:translateX(5px);}

/* Extensions */
.ext-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.ext-card{background:var(--glass);border:1px solid var(--border);border-radius:20px;padding:32px;position:relative;transition:transform .3s, border-color .3s;}
.ext-card:hover{transform:translateY(-6px);border-color:var(--green);}
.ext-badge{position:absolute;top:26px;right:28px;font-family:var(--mono);font-size:.68rem;background:var(--green);color:#06090F;padding:5px 12px;border-radius:999px;font-weight:700;}
.ext-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.ext-icon{width:52px;height:52px;border-radius:14px;background:var(--glass-hi);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;overflow:hidden;}
.ext-icon img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.ext-card h3, .ext-card .card-title{font-size:1.4rem;margin-bottom:2px;}
.ext-meta{font-family:var(--mono);font-size:.74rem;color:var(--text-faint);}
.ext-card p.desc{color:var(--text-dim);font-size:.92rem;margin:16px 0 20px;}
.ext-features{list-style:none;margin-bottom:26px;}
.ext-features li{font-size:.87rem;padding:8px 0 8px 24px;position:relative;border-bottom:1px dashed var(--border);}
.ext-features li::before{content:'✓';color:var(--green);position:absolute;left:0;font-weight:700;}
.ext-cta{
  position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  background:linear-gradient(120deg,var(--blue),var(--green));color:#06090F;border-radius:var(--btn-radius);
  padding:14px;font-weight:700;font-size:.92rem;overflow:hidden;isolation:isolate;
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.ext-cta::after{
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,0.45),transparent);
  transform:skewX(-20deg);transition:left .6s ease;
}
.ext-cta:hover::after{left:130%;}
.ext-cta:hover{transform:translateY(-3px);box-shadow:0 18px 34px -12px rgba(91,155,240,0.4);}

/* Score ring signature */
.score-section{text-align:center;}
.ring-wrap{position:relative;width:220px;height:220px;margin:0 auto 30px;}
.ring-wrap svg{width:100%;height:100%;transform:rotate(-90deg);}
.ring-bg{fill:none;stroke:var(--border);stroke-width:8;}
.ring-fill{fill:none;stroke:url(#ringGrad);stroke-width:8;stroke-linecap:round;stroke-dasharray:534;stroke-dashoffset:534;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1);}
.ring-number{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ring-number strong{font-family:var(--display);font-size:clamp(2rem, 5vw, 2.8rem);}
.ring-number span{font-family:var(--mono);font-size:.7rem;color:var(--text-faint);letter-spacing:.08em;}

/* Why us, glass cards with a moving highlight on hover */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.why-card{
  background:var(--glass);border:1px solid var(--border);border-radius:18px;padding:30px;
  position:relative;overflow:hidden;transition:border-color .3s, transform .3s;
}
.why-card:hover{border-color:var(--border-hi);transform:translateY(-4px);}
.why-card::before{
  content:'';position:absolute;top:-40%;left:-20%;width:60%;height:180%;
  background:linear-gradient(120deg, transparent, rgba(95,219,142,0.08), transparent);
  transform:rotate(20deg) translateX(-120%);transition:transform .8s ease;
}
.why-card:hover::before{transform:rotate(20deg) translateX(60%);}
.why-card h3, .why-card .card-title{font-size:1.15rem;margin-bottom:12px;position:relative;z-index:1;}
.why-card p{color:var(--text-dim);font-size:.92rem;position:relative;z-index:1;}

/* Built for Developers, infinite marquee + info cards */
.dev-marquee-wrap{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:18px 0;margin-bottom:60px;position:relative;}
.dev-marquee-wrap::before,.dev-marquee-wrap::after{content:'';position:absolute;top:0;bottom:0;width:100px;z-index:2;pointer-events:none;}
.dev-marquee-wrap::before{left:0;background:linear-gradient(90deg,var(--bg-2),transparent);}
.dev-marquee-wrap::after{right:0;background:linear-gradient(270deg,var(--bg-2),transparent);}
.dev-marquee-track{display:flex;width:max-content;animation:dev-marquee 22s linear infinite;}
.dev-marquee-track span{
  font-family:var(--display);font-size:1.6rem;font-weight:700;color:var(--border-hi);
  padding:0 36px;white-space:nowrap;transition:color .3s;
}
.dev-marquee-track span:hover{color:var(--green);}
@keyframes dev-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

.dev-grid{display:grid;grid-template-columns:1fr;gap:18px;}
.dev-card{background:var(--glass);border:1px solid var(--border);border-radius:16px;padding:26px;transition:transform .3s, border-color .3s;}
.dev-card:hover{transform:translateY(-4px);border-color:var(--green);}
.dev-card h3, .dev-card .card-title{font-size:1.05rem;margin-bottom:10px;font-family:var(--mono);font-weight:600;}
.dev-card p{color:var(--text-dim);font-size:.88rem;}

/* Developer code-window graphic */
.dev-layout{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;}
.code-window{
  background:#080B14;border:1px solid var(--border-hi);border-radius:14px;overflow:hidden;
  box-shadow:0 30px 60px -24px rgba(0,0,0,0.6);font-family:var(--mono);
}
.code-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--border);background:#0C1120;}
.code-bar span{width:10px;height:10px;border-radius:50%;background:var(--border-hi);}
.code-bar span:nth-child(1){background:#FF6B6B;}
.code-bar span:nth-child(2){background:#F0B860;}
.code-bar span:nth-child(3){background:#5FDB8E;}
.code-file{margin-left:10px;font-size:.72rem;color:var(--text-faint);}
.code-body{padding:18px 20px;font-size:.85rem;line-height:1.9;}
.code-line{
  display:flex;gap:14px;opacity:0;transform:translateX(-10px);
  animation:code-line-in .4s ease forwards;animation-play-state:paused;
}
.code-line.indent{padding-left:20px;}
.dev-layout.in .code-line{animation-play-state:running;}
.dev-layout.in .code-line:nth-child(1){animation-delay:.1s;}
.dev-layout.in .code-line:nth-child(2){animation-delay:.25s;}
.dev-layout.in .code-line:nth-child(3){animation-delay:.4s;}
.dev-layout.in .code-line:nth-child(4){animation-delay:.55s;}
.dev-layout.in .code-line:nth-child(5){animation-delay:.7s;}
.dev-layout.in .code-line:nth-child(6){animation-delay:.85s;}
.dev-layout.in .code-line:nth-child(7){animation-delay:1s;}
.dev-layout.in .code-line:nth-child(8){animation-delay:1.15s;}
@keyframes code-line-in{to{opacity:1;transform:translateX(0);}}
.ln{color:var(--text-faint);width:14px;text-align:right;flex-shrink:0;user-select:none;}
.tok-key{color:var(--blue);}
.tok-str{color:var(--green);}
.tok-num{color:var(--amber);}
.tok-good{color:var(--green);font-weight:600;}
.tok-punc{color:var(--text-faint);}
.code-cursor-line{padding-left:34px;}
.type-cursor{display:inline-block;width:7px;height:14px;background:var(--green);animation:pl-blink 1s steps(1) infinite;}

/* Blog, real image cover cards with zoom + gradient reveal */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.blog-card{
  border-radius:20px;overflow:hidden;border:1px solid var(--border);
  background:var(--bg-2);display:flex;flex-direction:column;height:100%;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s;
}
.blog-card:hover{transform:translateY(-6px);border-color:var(--border-hi);box-shadow:0 30px 50px -24px rgba(0,0,0,0.5);}
.blog-media{position:relative;height:190px;overflow:hidden;flex-shrink:0;background:var(--bg);}
.blog-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1);}
.blog-card:hover .blog-media img{transform:scale(1.08);}
.blog-tag{
  position:absolute;top:14px;left:14px;z-index:2;font-family:var(--mono);font-size:.66rem;font-weight:700;
  color:#06090F;background:var(--green);padding:5px 11px;border-radius:999px;letter-spacing:.03em;
}
.blog-content{flex:1;display:flex;flex-direction:column;padding:22px;background:var(--bg-2);}
.blog-content h3{font-size:1.08rem;margin-bottom:10px;color:var(--text);line-height:1.35;}
.blog-content p{
  font-size:.87rem;color:var(--text-dim);margin-bottom:14px;
}
.blog-excerpt-scroll{
  flex:1;max-height:4.6em;overflow-y:auto;margin-bottom:14px;padding-right:6px;
}
.blog-excerpt-scroll p{margin-bottom:0;}
.blog-excerpt-scroll::-webkit-scrollbar{width:5px;}
.blog-excerpt-scroll::-webkit-scrollbar-track{background:transparent;}
.blog-excerpt-scroll::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:999px;}
.blog-excerpt-scroll::-webkit-scrollbar-thumb:hover{background:var(--green);}
.blog-excerpt-scroll{scrollbar-width:thin;scrollbar-color:var(--border-hi) transparent;}
.blog-meta{font-family:var(--mono);font-size:.72rem;color:var(--text-faint);display:flex;align-items:center;gap:8px;margin-top:auto;}
.blog-meta .read{color:var(--green);font-weight:700;display:inline-flex;align-items:center;gap:5px;margin-left:auto;transition:gap .25s;}
.blog-card:hover .blog-meta .read{gap:9px;}

/* Testimonials dual-row infinite */
.testi-wrap{overflow:hidden;position:relative;margin-bottom:18px;}
.testi-wrap::before,.testi-wrap::after{content:'';position:absolute;top:0;bottom:0;width:100px;z-index:2;pointer-events:none;}
.testi-wrap::before{left:0;background:linear-gradient(90deg,var(--bg),transparent);}
.testi-wrap::after{right:0;background:linear-gradient(270deg,var(--bg),transparent);}
.testi-track{display:flex;gap:20px;width:max-content;}
.testi-track.row1{animation:testi-left 40s linear infinite;}
.testi-track.row2{animation:testi-right 40s linear infinite;}
@keyframes testi-left{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes testi-right{from{transform:translateX(-50%);}to{transform:translateX(0);}}
/* Runs forever, never pauses, even on hover */
.testi-card{width:320px;background:var(--glass);border:1px solid var(--border);border-radius:16px;padding:24px;flex-shrink:0;}
.testi-stars{color:var(--amber);font-size:.85rem;margin-bottom:12px;letter-spacing:2px;}
.testi-quote{font-size:.92rem;color:var(--text-dim);margin-bottom:18px;min-height:70px;}
.testi-person{display:flex;align-items:center;gap:12px;}
.testi-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:.8rem;color:#06090F;flex-shrink:0;}
.testi-name{font-size:.87rem;font-weight:600;}
.testi-role{font-size:.74rem;color:var(--text-faint);}

/* FAQ accessible accordion */
.faq{max-width:760px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-q-wrap{margin:0;font-weight:inherit;}
.faq-q{width:100%;text-align:left;background:none;border:none;color:var(--text);font-family:var(--display);font-size:1.05rem;font-weight:600;padding:24px 4px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;}
.faq-q .plus{color:var(--green);transition:transform .3s;font-size:1.3rem;font-weight:400;}
.faq-q[aria-expanded="true"] .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq-a p{padding:0 4px 24px;color:var(--text-dim);max-width:640px;}

/* Final CTA */
.cta-band{padding:82px 0 100px;text-align:center;}
.cta-panel{max-width:800px;margin:0 auto;padding:60px 40px;border-radius:28px;background:var(--glass);border:1px solid var(--border-hi);position:relative;overflow:hidden;}
.cta-panel h2{font-size:clamp(1.5rem, 4vw, 2.3rem);margin-bottom:16px;}
.cta-panel p{color:var(--text-dim);margin-bottom:34px;}

/* Footer */
footer{padding:60px 0 30px;border-top:1px solid var(--border);}
.footer-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px;margin-bottom:50px;}
.footer-brand p{color:var(--text-faint);font-size:1rem;max-width:320px;margin-top:16px;}
.footer-cols{display:flex;gap:60px;flex-wrap:wrap;}
.footer-col h5{font-family:var(--mono);font-size:.72rem;color:var(--text-faint);margin-bottom:16px;letter-spacing:.06em;text-transform:uppercase;}
.footer-col a{display:block;position:relative;width:fit-content;font-size:.87rem;color:var(--text-dim);margin-bottom:11px;transition:color .25s ease, transform .25s ease;}
.footer-col a::after{
  content:'';position:absolute;left:0;bottom:-2px;width:0;height:1.5px;
  background:linear-gradient(90deg,var(--green),var(--blue));transition:width .3s ease;
}
.footer-col a:hover{color:var(--text);transform:translateX(4px);}
.footer-col a:hover::after{width:100%;}
.footer-contact-link{display:flex !important;align-items:center;gap:8px;}
.footer-contact-link svg{width:16px;height:16px;flex-shrink:0;color:var(--green);}
.footer-bottom{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.72rem;color:var(--text-faint);padding-top:26px;border-top:1px solid var(--border);flex-wrap:wrap;gap:10px;}

/* Back to top */
#backTop{
  position:fixed;bottom:26px;right:26px;width:54px;height:54px;border-radius:50%;
  background:var(--bg-2);color:var(--text);border:1px solid var(--border-hi);font-size:1.1rem;
  cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s, transform .3s, visibility .3s;
  z-index:150;display:flex;align-items:center;justify-content:center;
}
#backTop.show{opacity:1;visibility:visible;transform:translateY(0);}
#backTop svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);}
#backTop .ring-bg{fill:none;stroke:var(--border);stroke-width:3;}
#backTop .ring-progress{fill:none;stroke:url(#backTopGrad);stroke-width:3;stroke-linecap:round;stroke-dasharray:157;stroke-dashoffset:157;}
#backTop .arrow-up{position:relative;z-index:1;transition:transform .25s;}
#backTop:hover .arrow-up{transform:translateY(-3px);}

/* =========================================================
   RESPONSIVE, mobile-first checkpoints, fluid in between via clamp()
   Container stays a fixed, sensible 1400px on every screen above 1100px,
   so nothing stretches oddly on large monitors.
   ========================================================= */

/* Small laptops / large tablets */

/* Tablets */

/* Large phones / small tablets (portrait) */

/* Phones */

/* Very small phones */

/* =========================================================
   TOOL PAGE, breadcrumb, form, scanning state, results
   ========================================================= */
.breadcrumb-bar{border-bottom:1px solid var(--border);background:var(--glass);}
.breadcrumb{
  display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:14px 0;font-family:var(--mono);font-size:.78rem;color:var(--text-faint);
  flex-wrap:wrap;max-width:none;
}
.breadcrumb a{color:var(--text-dim);transition:color .2s;}
.breadcrumb a:hover{color:var(--green);}
.breadcrumb .sep{color:var(--text-faint);opacity:.5;}
.breadcrumb .current{color:var(--text);}

.tool-hero{padding:70px 0 50px;text-align:center;}
.tool-hero .tool-hero-icon{
  width:64px;height:64px;border-radius:16px;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(91,155,240,0.18),rgba(95,219,142,0.18));border:1px solid var(--border-hi);
}
.tool-hero .tool-hero-icon svg{width:30px;height:30px;stroke:var(--green);}
.tool-hero h1{font-size:clamp(2rem,4.6vw,2.8rem);margin-bottom:16px;}
.tool-hero p.lead{font-size:1.05rem;color:var(--text-dim);max-width:600px;margin:0 auto 20px;}

.scan-form{max-width:640px;margin:36px auto 0;}
.scan-form-row{
  display:flex;gap:10px;background:var(--glass);border:1px solid var(--border-hi);border-radius:14px;padding:8px;
  backdrop-filter:blur(16px);
}
.scan-form-row input{
  flex:1;background:transparent;border:none;outline:none;color:var(--text);font-family:var(--body);
  font-size:.98rem;padding:12px 16px;
}
.scan-form-row input::placeholder{color:var(--text-faint);}
.scan-form-row button{border-radius:10px;padding:13px 26px;flex-shrink:0;}
.scan-hint{font-family:var(--mono);font-size:.72rem;color:var(--text-faint);margin-top:14px;}

/* Loading state */
.scan-loading{
  display:none;max-width:640px;margin:40px auto 0;background:var(--glass);border:1px solid var(--border-hi);
  border-radius:16px;padding:32px;text-align:center;backdrop-filter:blur(16px);
}
.scan-loading.active{display:block;}
.scan-spinner{width:52px;height:52px;margin:0 auto 20px;position:relative;}
.scan-spinner svg{width:100%;height:100%;animation:spin 1.4s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.scan-spinner circle{fill:none;stroke-width:4;stroke-linecap:round;}
.scan-loading .status-text{font-family:var(--mono);font-size:.85rem;color:var(--text-dim);margin-bottom:6px;}
.scan-loading .status-sub{font-size:.8rem;color:var(--text-faint);}
.scan-progress-track{height:4px;background:var(--border);border-radius:4px;overflow:hidden;margin-top:20px;}
.scan-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--blue),var(--green));border-radius:4px;transition:width .3s ease;}

/* Results */
.results-panel{display:none;max-width:800px;margin:40px auto 0;}
.results-panel.active{display:block;}
.results-summary{
  display:flex;align-items:center;justify-content:space-between;background:var(--glass);border:1px solid var(--border-hi);
  border-radius:16px;padding:24px 28px;margin-bottom:20px;flex-wrap:wrap;gap:16px;
}
.results-summary .url-scanned{font-family:var(--mono);font-size:.85rem;color:var(--text-dim);}
.results-summary .found-count{font-family:var(--display);font-size:1.6rem;}
.results-summary .found-label{font-family:var(--mono);font-size:.68rem;color:var(--text-faint);}
.result-row{
  display:flex;align-items:center;gap:16px;background:var(--glass);border:1px solid var(--border);border-radius:12px;
  padding:16px 20px;margin-bottom:10px;
}
.result-row .score-badge{
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:.85rem;font-weight:700;flex-shrink:0;
}
.result-row.score-green .score-badge{background:rgba(95,219,142,0.15);color:var(--green);border:1px solid var(--green);}
.result-row.score-amber .score-badge{background:rgba(240,184,96,0.15);color:var(--amber);border:1px solid var(--amber);}
.result-row.score-red .score-badge{background:rgba(255,107,107,0.15);color:#FF6B6B;border:1px solid #FF6B6B;}
.result-row .result-info{flex:1;min-width:0;}
.result-row .result-url{font-family:var(--mono);font-size:.85rem;color:var(--text);word-break:break-all;}
.result-row .result-issues{font-size:.8rem;color:var(--text-faint);margin-top:4px;}

/* Issue + suggestion cards inside a result row */
.issue-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
.issue-item{
  background:var(--bg-2);border:1px solid var(--border);border-left:3px solid var(--amber);
  border-radius:10px;padding:12px 16px;
}
.issue-item.is-critical{border-left-color:#FF6B6B;}
.issue-label{
  display:flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600;color:var(--text);margin-bottom:6px;
}
.issue-label::before{content:'⚠';color:var(--amber);font-size:.8rem;flex-shrink:0;}
.issue-item.is-critical .issue-label::before{content:'✕';color:#FF6B6B;}
.issue-suggestion{
  font-size:.8rem;color:var(--text-dim);padding-left:22px;line-height:1.6;
}
.issue-suggestion .tag{
  font-family:var(--mono);font-size:.68rem;font-weight:700;color:var(--green);text-transform:uppercase;
  letter-spacing:.04em;margin-right:6px;
}
.no-issues-note{font-size:.85rem;color:var(--green);display:flex;align-items:center;gap:8px;}
.no-issues-note::before{content:'✓';font-weight:700;}

.scan-another{text-align:center;margin-top:26px;}

/* =========================================================
   BLOG LISTING PAGE
   ========================================================= */
.blog-page-hero{padding:70px 0 40px;text-align:center;}
.blog-page-hero h1{font-size:clamp(2rem,4.6vw,2.8rem);margin-bottom:16px;}
.blog-page-hero p.lead{font-size:1.05rem;color:var(--text-dim);max-width:560px;margin:0 auto 20px;}

.blog-filters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:30px;}
.blog-filter{
  font-family:var(--mono);font-size:.78rem;font-weight:600;padding:9px 18px;border-radius:999px;
  border:1px solid var(--border-hi);color:var(--text-dim);background:var(--glass);cursor:pointer;transition:.2s;
}
.blog-filter:hover{border-color:var(--green);color:var(--text);}
.blog-filter.active{background:linear-gradient(120deg,var(--blue),var(--green));color:#06090F;border-color:transparent;}

.blog-page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.blog-page-grid .blog-card{height:100%;}

.blog-pagination{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:48px;font-family:var(--mono);font-size:.85rem;}
.blog-pagination a, .blog-pagination span{
  min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;
  border:1px solid var(--border);color:var(--text-dim);transition:.2s;padding:0 12px;
}
.blog-pagination a:hover{border-color:var(--green);color:var(--text);}
.blog-pagination .current{background:linear-gradient(120deg,var(--blue),var(--green));color:#06090F;border-color:transparent;font-weight:700;}

.blog-empty{text-align:center;padding:60px 20px;color:var(--text-faint);font-family:var(--mono);font-size:.9rem;display:none;}
.blog-empty.show{display:block;}

/* =========================================================
   SINGLE BLOG POST
   ========================================================= */
.post-hero-media{height:380px;position:relative;overflow:hidden;}
.post-hero-media img{width:100%;height:100%;object-fit:cover;}
.post-hero-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,14,26,0.1) 0%, rgba(10,14,26,0.9) 100%);}
.post-hero-content{position:relative;padding-top:56px;}
.post-tag{
  display:inline-block;font-family:var(--mono);font-size:.7rem;font-weight:700;color:#06090F;
  background:var(--green);padding:6px 14px;border-radius:999px;margin-bottom:18px;
}
.post-title{font-size:clamp(1.8rem,4.4vw,2.6rem);max-width:820px;margin-bottom:20px;}
.post-meta-row{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:.8rem;color:var(--text-dim);
  padding-bottom:32px;border-bottom:1px solid var(--border);margin-bottom:40px;
}
.post-author{display:flex;align-items:center;gap:10px;}
.post-author-avatar{
  width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--green));
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:.8rem;color:#06090F;
}

.post-layout{display:grid;grid-template-columns:1fr 280px;gap:56px;align-items:start;}
.post-body{color:var(--text-dim);font-size:1.02rem;line-height:1.85;}
.post-body h2{color:var(--text);font-size:1.6rem;margin:2em 0 .6em;}
.post-body h3{color:var(--text);font-size:1.25rem;margin:1.8em 0 .5em;}
.post-body p{margin-bottom:1.3em;}
.post-body ul, .post-body ol{margin:0 0 1.3em 1.4em;}
.post-body li{margin-bottom:.5em;}
.post-body a{color:var(--green);text-decoration:underline;text-underline-offset:3px;}
.post-body img{
  display:block;max-width:100%;height:auto;border-radius:14px;
  border:1px solid var(--border);
  /* If the source image is smaller than the content column (like a
     screenshot exported at a lower resolution), it renders at its
     native size and, being a block element, sits stuck to the
     left with empty space on the right. Centering it looks
     intentional either way, without blowing the image up and
     making it blurry. */

}
.post-body figure{margin:2em 0;}
.post-body figure img{margin:0 auto .8em;}
.post-body figcaption{
  text-align:center;font-size:.84rem;color:var(--text-faint);font-style:italic;
}
.post-body blockquote{
  border-left:3px solid var(--green);padding:4px 0 4px 22px;margin:1.6em 0;color:var(--text);font-style:italic;
}
.post-body .callout{
  background:var(--glass);border:1px solid var(--border-hi);border-radius:14px;padding:22px 24px;margin:1.8em 0;
}
.post-body .callout strong{color:var(--green);}
.post-body code{
  background:var(--bg-2);border:1px solid var(--border);border-radius:5px;padding:2px 7px;font-family:var(--mono);
  font-size:.9em;color:var(--blue);
}

.post-sidebar{position:sticky;top:100px;max-height:calc(100vh - 120px);overflow-y:auto;padding-right:4px;}
.post-sidebar::-webkit-scrollbar{width:5px;}
.post-sidebar::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:99px;}
.sidebar-card{background:var(--glass);border:1px solid var(--border);border-radius:16px;padding:22px;margin-bottom:20px;}
.sidebar-card h4{font-family:var(--mono);font-size:.72rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;margin-bottom:16px;}
.toc-list{list-style:none;}
.toc-list li{margin-bottom:10px;}
.toc-list a{font-size:.86rem;color:var(--text-dim);transition:color .2s, border-color .2s, padding-left .2s;border-left:2px solid transparent;padding-left:10px;margin-left:-11px;display:inline-block;}
.toc-list a.active{color:var(--green);border-left-color:var(--green);font-weight:600;}

/* Sidebar "Categories" widget (single.php) */
.cat-list{list-style:none;}
.cat-list li{border-bottom:1px solid var(--border);}
.cat-list li:last-child{border-bottom:none;}
.cat-list a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;
  font-size:.87rem;color:var(--text-dim);transition:color .2s;
}
.cat-list a:hover{color:var(--green);}
.cat-count{
  font-family:var(--mono);font-size:.72rem;color:var(--text-faint);background:var(--bg-2);
  border:1px solid var(--border);border-radius:999px;padding:2px 9px;flex-shrink:0;
}
.toc-list a:hover{color:var(--green);}
.sidebar-cta p{font-size:.85rem;color:var(--text-dim);margin-bottom:14px;}
.share-row{display:flex;gap:8px;}
.share-btn{
  width:44px;height:44px;border-radius:50%;background:var(--bg-2);border:1px solid var(--border-hi);
  display:flex;align-items:center;justify-content:center;color:var(--text-dim);transition:.2s;cursor:pointer;
}
.share-btn:hover{border-color:var(--green);color:var(--green);}
.share-btn{position:relative;}
.share-btn .copy-tooltip{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
  background:var(--text);color:var(--bg);font-size:.72rem;font-weight:600;padding:5px 10px;border-radius:6px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;
}
.share-btn .copy-tooltip::after{
  content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--text);
}
.share-btn.copied{border-color:var(--green);color:var(--green);}
.share-btn.copied .copy-tooltip{opacity:1;transform:translateX(-50%) translateY(0);}

.post-tags-row{display:flex;gap:8px;flex-wrap:wrap;margin:40px 0;}
.post-tag-chip{
  font-family:var(--mono);font-size:.76rem;color:var(--text-dim);border:1px solid var(--border-hi);
  padding:6px 14px;border-radius:999px;
}

.author-box{
  display:flex;gap:18px;background:var(--glass);border:1px solid var(--border-hi);border-radius:16px;
  padding:26px;margin-bottom:50px;
}
.author-box .avatar-lg{
  width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--green));
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;
  font-size:1.2rem;color:#06090F;flex-shrink:0;
}
.author-box h4{font-size:1.05rem;margin-bottom:6px;}
.author-box p{font-size:.88rem;color:var(--text-dim);}
.author-linkedin{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:.85rem;font-weight:600;color:var(--blue);text-decoration:none;transition:color .2s;}
.author-linkedin:hover{color:var(--green);}
.author-linkedin svg{flex-shrink:0;}

.related-posts-strip{margin-top:60px;}

/* =========================================================
   SIMPLE CONTENT PAGES, Contact, About, Legal
   ========================================================= */
.simple-page-hero{padding:70px 0 40px;text-align:center;}
.simple-page-hero h1{font-size:clamp(2rem,4.6vw,2.8rem);margin-bottom:16px;}
.simple-page-hero p.lead{font-size:1.05rem;color:var(--text-dim);max-width:560px;margin:0 auto 20px;}
/* Contact page only, the subtitle now breaks onto two short lines
   (see template-contact.php), so the section's bottom padding and the
   next section's top padding together left a noticeably large gap
   before the form. Tightened just for this page. */
.contact-page-hero{padding-bottom:12px;}
.contact-page-hero + .section{padding-top:20px;}

/* Contact page */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
.contact-form-card{background:var(--glass);border:1px solid var(--border-hi);border-radius:20px;padding:36px;backdrop-filter:blur(16px);}

/* Modern 2-column CF7 form (contact-form-modern / form-row / form-group.half|.full) */
.contact-form-modern .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px;}
.contact-form-modern .form-group.full{grid-column:1 / -1;}
.contact-form-modern input[type="text"],
.contact-form-modern input[type="email"],
.contact-form-modern input[type="tel"],
.contact-form-modern textarea{
  width:100%;background:var(--bg-2);border:1px solid var(--border-hi);border-radius:10px;
  padding:12px 15px;color:var(--text);font-family:var(--body);font-size:.92rem;outline:none;transition:border-color .2s;
}
.contact-form-modern input:focus,
.contact-form-modern textarea:focus{border-color:var(--green);}
.contact-form-modern textarea{resize:vertical;height:80px;min-height:80px;max-height:200px;}
.contact-form-modern ::placeholder{color:var(--text-faint);}
.sah-captcha-question{
  display:block;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-bottom:8px;
}
.contact-form-modern .wpcf7-submit{
  position:relative;width:100%;border:0;cursor:pointer;font-weight:700;font-size:.95rem;padding:14px 26px;
  border-radius:var(--btn-radius);background:linear-gradient(120deg,var(--blue),var(--green));color:#06090F;
  overflow:hidden;isolation:isolate;transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.contact-form-modern .wpcf7-submit::after{
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,0.45),transparent);
  transform:skewX(-20deg);transition:left .6s ease;
}
.contact-form-modern .wpcf7-submit:hover::after{left:130%;}
.contact-form-modern .wpcf7-submit:hover{transform:translateY(-3px);box-shadow:0 18px 34px -12px rgba(91,155,240,0.45);}
.wpcf7-response-output{border-radius:10px !important;margin-top:16px !important;}

.form-note{font-family:var(--mono);font-size:.72rem;color:var(--text-faint);margin-top:14px;}

.contact-info-list{display:flex;flex-direction:column;gap:20px;}
.contact-info-card{
  display:flex;gap:16px;align-items:flex-start;background:var(--glass);border:1px solid var(--border);
  border-radius:16px;padding:22px;transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, background .3s ease;
}
.contact-info-card:hover{
  transform:translateY(-4px);border-color:var(--green);background:var(--glass-hi);
}
.contact-info-icon{
  width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,rgba(91,155,240,0.18),rgba(95,219,142,0.18));
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .35s ease;
}
.contact-info-card:hover .contact-info-icon{transform:scale(1.12) rotate(-8deg);}
.contact-info-icon svg{width:20px;height:20px;stroke:var(--green);transition:stroke .3s ease;}
.contact-info-card h4{font-size:1rem;margin-bottom:4px;}
.contact-info-card p, .contact-info-card a{font-size:.88rem;color:var(--text-dim);transition:color .2s ease;}
.contact-info-card a:hover{color:var(--green);}

/* About / Who We Are page */
.about-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:50px 0;}
.about-stat{text-align:center;background:var(--glass);border:1px solid var(--border);border-radius:16px;padding:26px 16px;}
.about-stat strong{font-family:var(--display);font-size:2rem;display:block;background:linear-gradient(120deg,var(--blue),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent;}
.about-stat span{font-family:var(--mono);font-size:.7rem;color:var(--text-faint);letter-spacing:.05em;}

.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.team-card{background:var(--glass);border:1px solid var(--border);border-radius:16px;padding:28px;text-align:center;transition:transform .3s, border-color .3s;}
.team-card:hover{transform:translateY(-4px);border-color:var(--border-hi);}
.team-avatar{
  width:64px;height:64px;border-radius:50%;margin:0 auto 16px;background:linear-gradient(135deg,var(--blue),var(--green));
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:1.2rem;color:#06090F;
}
.team-card h4{font-size:1.02rem;margin-bottom:4px;}
.team-card .role{font-family:var(--mono);font-size:.72rem;color:var(--green);margin-bottom:12px;}
.team-card p{font-size:.85rem;color:var(--text-dim);}

/* Legal pages (Privacy Policy, Terms, Cookie Policy) */
.legal-content{max-width:820px;margin:0 auto;color:var(--text-dim);font-size:.98rem;line-height:1.85;}
.legal-content h2{color:var(--text);font-size:1.4rem;margin:2em 0 .6em;}
.legal-content h2:first-child{margin-top:0;}
.legal-content p{margin-bottom:1.2em;}
.legal-content ul{margin:0 0 1.2em 1.4em;}
.legal-content li{margin-bottom:.5em;}
.legal-content a{color:var(--green);text-decoration:underline;text-underline-offset:3px;}
.legal-updated{font-family:var(--mono);font-size:.78rem;color:var(--text-faint);margin-bottom:40px;padding-bottom:24px;border-bottom:1px solid var(--border);}
.legal-toc{background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:22px 26px;margin-bottom:40px;}
.legal-toc h4{font-family:var(--mono);font-size:.72rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px;}
.legal-toc ol{margin:0 0 0 1.2em;padding:0;}
.legal-toc li{margin-bottom:8px;font-size:.88rem;}
.legal-toc a{color:var(--text-dim);}
.legal-toc a:hover{color:var(--green);}

/* Generic content-card wrapper (used by page.php for non-legal pages) */
.sah-content-card{
  background:var(--glass);border:1px solid var(--border-hi);border-radius:20px;padding:40px;
  color:var(--text-dim);font-size:1rem;line-height:1.8;backdrop-filter:blur(16px);max-width:820px;margin:0 auto;
}
.sah-content-card h2{color:var(--text);font-size:1.4rem;margin:1.6em 0 .6em;}
.sah-content-card h2:first-child{margin-top:0;}
.sah-content-card p{margin-bottom:1.2em;}
.sah-content-card a{color:var(--green);text-decoration:underline;text-underline-offset:3px;}

/* =========================================================
   Retint the existing tools-plugin shortcode output (SEO Analyzer,
   Broken Link Checker, etc.) to match this theme's dark glass look,
   without touching the plugin's own PHP/HTML.
   ========================================================= */
.tool-shortcode-wrap{
  background:var(--glass);border:1px solid var(--border-hi);border-radius:20px;padding:36px;
  backdrop-filter:blur(16px);color:var(--text);max-width:720px;margin:0 auto;
}
.tool-shortcode-wrap .filter-section,
.tool-shortcode-wrap .centered-form,
.tool-shortcode-wrap .features-section,
.tool-shortcode-wrap .faq-section{background:transparent !important;color:var(--text) !important;}
.tool-shortcode-wrap input[type="text"]{
  background:var(--bg-2) !important;border:1px solid var(--border-hi) !important;color:var(--text) !important;
  border-radius:10px !important;padding:13px 16px !important;width:100%;font-family:var(--body) !important;
}
.tool-shortcode-wrap button[type="submit"],
.tool-shortcode-wrap .tool-btn,
.tool-shortcode-wrap .btn-download{
  background:linear-gradient(120deg,var(--blue),var(--green)) !important;color:#06090F !important;
  border:none !important;border-radius:10px !important;font-weight:700 !important;padding:13px 26px !important;
}
.tool-shortcode-wrap .feature-box,
.tool-shortcode-wrap .accordion-item{
  background:var(--bg-2) !important;border:1px solid var(--border) !important;color:var(--text) !important;
  border-radius:12px !important;
}
.tool-shortcode-wrap .accordion-header{color:var(--text) !important;}
.tool-shortcode-wrap .result-list li.score.green{color:var(--green) !important;}
.tool-shortcode-wrap .result-list li.score.orange{color:var(--amber) !important;}
.tool-shortcode-wrap .result-list li.score.red{color:#FF6B6B !important;}

/* =========================================================
   DevKit Pro Privacy page, special components (info box,
   tool cards, no-collect box, contact box) matching the
   dark glass theme while keeping the original content structure.
   ========================================================= */
.dk-info-box{
  background:var(--glass);border-left:4px solid var(--blue);border-radius:10px;
  padding:18px 22px;margin-bottom:36px;color:var(--text-dim);font-size:.95rem;
}
.dk-info-box strong{display:block;margin-bottom:6px;font-size:1.02rem;color:var(--text);}
.legal-content h2 .num{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  background:linear-gradient(120deg,var(--blue),var(--green));color:#06090F;border-radius:50%;
  font-size:.82rem;font-weight:700;margin-right:10px;flex-shrink:0;
}
.dk-tool-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:16px 0 28px;}
.dk-tool-card{
  background:var(--glass);border:1px solid var(--border-hi);border-radius:12px;padding:16px 18px;
  font-size:.9rem;color:var(--text);font-weight:600;
}
.dk-tool-card span{display:block;font-size:1.3rem;margin-bottom:8px;}
.dk-no-collect{
  background:rgba(95,219,142,0.08);border:1px solid rgba(95,219,142,0.35);border-radius:12px;
  padding:22px 26px;margin:16px 0 28px;
}
.dk-no-collect h3{color:var(--green);font-size:1.05rem;margin-bottom:12px;}
.dk-no-collect ul li{color:var(--text-dim);}
.dk-check-item{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;font-size:.94rem;color:var(--text-dim);}
.dk-check-item .icon{font-size:1.15rem;flex-shrink:0;margin-top:1px;}
.dk-check-item strong{color:var(--text);}
.dk-contact-box{
  background:var(--glass);border:1px solid var(--border-hi);border-radius:16px;
  padding:30px 34px;margin-top:40px;
}
.dk-contact-box h2{margin-top:0 !important;}
.dk-contact-box p{color:var(--text-dim);}
.dk-contact-box a{color:var(--green);}
.dk-footer-note{
  text-align:center;margin-top:50px;padding:26px;border-top:1px solid var(--border);
  color:var(--text-faint);font-size:.88rem;
}
.dk-footer-note a{color:var(--green);}

body.locked {
    overflow: visible !important;
}

/* ==========================================================
   Comments (comments.php)
   ========================================================== */
.sah-comments-title{font-size:1.3rem;color:var(--text);margin-bottom:24px;}

.sah-comment-list{list-style:none;margin:0 0 40px;}
.sah-comment-list .children{list-style:none;margin:20px 0 0 44px;}
.sah-comment-list > li{margin-bottom:20px;}
.sah-comment-body{
  background:var(--glass);border:1px solid var(--border);border-radius:16px;padding:20px 22px;
}
.sah-comment-top{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.sah-comment-avatar{border-radius:50%;border:1px solid var(--border-hi);flex-shrink:0;display:block;}
.sah-comment-who{display:flex;flex-direction:column;gap:2px;min-width:0;}
.sah-comment-name{font-weight:700;color:var(--text);font-size:.94rem;}
.sah-comment-date a{font-size:.78rem;color:var(--text-faint);}
.sah-comment-pending{
  font-size:.8rem;color:var(--amber);font-style:italic;margin-bottom:10px;
}
.sah-comment-text p{color:var(--text-dim);font-size:.92rem;line-height:1.7;margin-bottom:.6em;}
.sah-comment-text p:last-child{margin-bottom:0;}
.sah-comment-reply{margin-top:12px;}
.sah-comment-reply .comment-reply-link{
  font-size:.8rem;font-weight:600;color:var(--green);border:1px solid var(--border);border-radius:999px;
  padding:5px 14px;display:inline-block;transition:border-color .2s ease;
}
.sah-comment-reply .comment-reply-link:hover{border-color:var(--green);}

.sah-comment-nav{display:flex;justify-content:center;gap:14px;margin-bottom:40px;}
.sah-comment-nav a{color:var(--text-dim);font-size:.86rem;}
.sah-comment-nav a:hover{color:var(--green);}
.sah-comments-closed{color:var(--text-dim);font-size:.92rem;}

#respond{background:var(--glass);border:1px solid var(--border);border-radius:20px;padding:32px 30px;}
#reply-title{font-size:1.2rem;color:var(--text);margin-bottom:6px;}
#cancel-comment-reply-link{font-size:.82rem;color:var(--text-faint);margin-left:10px;}
.sah-comment-notes{color:var(--text-dim);font-size:.86rem;margin-bottom:22px;}
.sah-field{margin-bottom:20px;}
.sah-field label{display:block;margin-bottom:8px;font-weight:600;color:var(--text);font-size:.9rem;}
.sah-input{
  width:100%;border:1px solid var(--border);border-radius:10px;background:var(--bg-2);color:var(--text);
  padding:12px 14px;font-size:.94rem;font-family:inherit;transition:border-color .2s ease;
}
.sah-input:focus{outline:none;border-color:var(--blue);}
textarea.sah-input{resize:vertical;min-height:130px;}
#respond .form-submit{margin:6px 0 0;}
#respond .btn{border:0;cursor:pointer;}

/* =========================================================
   ALL RESPONSIVE MEDIA QUERIES (consolidated at the end so they
   always win the cascade over same-specificity rules defined
   earlier in this file, regardless of source order elsewhere)
   ========================================================= */

/* =========================================================
   SMALLER PHONES, most of the site so far was only fine-tuned
   down to 600px. Below that (iPhone SE, older/budget Android,
   roughly 320-450px wide), several components that work fine at
   600px start feeling cramped or wrapping oddly: two buttons side
   by side no longer fit their labels, card padding eats too much of
   an already-small screen, and the base page padding leaves very
   little room for actual content. These two breakpoints handle that.
   ========================================================= */

/* =========================================================
   OTHER MEDIA QUERIES (non max-width, e.g. reduced motion)
   ========================================================= */

@media(prefers-reduced-motion:reduce){
.step-num.is-active::after{animation:none;}
  .step h3, .step p, .step .card-title{opacity:1 !important;transform:none !important;}
*{animation:none !important;transition:none !important;}
}


/* =========================================================
   ALL RESPONSIVE MEDIA QUERIES, one block per breakpoint,
   ordered from largest (desktop-ish) to smallest (phones), so
   narrower/more-specific overrides always correctly win over
   wider ones for any shared selector, regardless of where each
   rule was originally authored across many editing passes.
   ========================================================= */


@media(max-width:1100px){ /* <= 1100px */
.tools-grid{grid-template-columns:repeat(2,1fr);}
  .dev-layout{gap:26px;}
}


@media(max-width:900px){ /* <= 900px */
.a1{width:340px;height:340px;top:-100px;left:-90px;}
  .a2{width:300px;height:300px;right:-100px;}
  .a3{width:260px;height:260px;bottom:-90px;}
  .aurora span{opacity:.22;filter:blur(70px);}
  /* The header's own CTA button was wrapping onto two lines /
     looking oversized once squeezed next to the logo and hamburger
     on narrow screens. It's also duplicated inside the mobile menu
     itself (.mm-cta) once opened, so hiding it here just declutters
     the compact mobile header, nothing is lost. */
  .nav-cta{display:none;}
.nav-links{display:none;}
  .menu-toggle{display:flex;}
  /* A sticky header with a heavy backdrop-filter blur is one of the
     most common causes of janky/stuttery scroll on phones, the blur
     has to be recomputed every single scroll frame. A lighter blur
     with a slightly more opaque background keeps the same glass
     look while costing far less to redraw. */
  header{backdrop-filter:blur(6px);background:rgba(10,14,26,0.9);}
  .ext-grid{grid-template-columns:1fr;}
  .blog-grid{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr;}
  .dev-grid{grid-template-columns:1fr;}
  .dev-layout{grid-template-columns:1fr;}
  .steps-row{grid-template-columns:1fr;gap:16px;}
  .timeline-line-mobile{display:none;}
  /* Full redesign: each step is now its own card (same glass/border
     language as tool-card elsewhere on the site) with the number
     badge sitting inside it, connected by a small animated arrow
     between cards, reads much more clearly as "steps" than a thin
     rail line ever did, and matches the rest of the site's look. */
  .step{
    display:block;position:relative;background:var(--glass);border:1px solid var(--border);
    border-radius:16px;padding:22px 20px 20px;transition:border-color .3s ease, transform .3s ease, background .3s ease;
  }
  .step:not(:last-child){margin-bottom:28px;}
  .step:not(:last-child)::after{
    content:'';position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);
    width:14px;height:14px;border-right:2px solid var(--border-hi);border-bottom:2px solid var(--border-hi);
    transform:translateX(-50%) rotate(45deg);transition:border-color .3s ease;
  }
  .step-num{width:44px;height:44px;font-size:1rem;margin-bottom:14px;}
  .step h3, .step .card-title{margin-bottom:6px;}
  .step p{max-width:none;}
  .step h3, .step p, .step .card-title{transition:opacity .4s ease, transform .4s ease;opacity:.6;transform:translateY(4px);}
  .step.is-current{border-color:var(--green);background:var(--glass-hi);transform:scale(1.02);}
  .step.is-current::after{border-color:var(--green);}
  .step.is-current h3, .step.is-current p, .step.is-current .card-title{opacity:1;transform:translateY(0);}
  .timeline-line{display:none;}
  .section{padding:50px 0;}
  .hero{padding:64px 0;}
  .stat-row{gap:28px;}
  .blog-page-grid{grid-template-columns:repeat(2,1fr);}
  .post-layout{grid-template-columns:1fr;}
  .post-sidebar{position:static;order:-1;}
  .contact-layout{grid-template-columns:1fr;}
  .about-stats-row{grid-template-columns:repeat(2,1fr);}
  .team-grid{grid-template-columns:1fr;}
.contact-form-modern .form-row{grid-template-columns:1fr;}
  .contact-form-card{padding:26px 22px;}
}


@media(max-width:768px){ /* <= 768px */
.tools-grid{grid-template-columns:repeat(2,1fr);}
  .audit-card{max-width:100%;}
  .cta-panel{padding:44px 28px;}
}


@media(max-width:600px){ /* <= 600px */
.tools-grid{grid-template-columns:1fr;} 
  .stat-row{gap:18px;justify-content:center;}
  .stat strong{font-size:1.5rem;}
  .section{padding: 36px 0;}
  /* Right after a simple-page-hero (Contact, About, legal pages),
     the hero's own bottom padding plus the next section's top
     padding stack up into a much larger visual gap than intended,
     especially on short mobile screens. Tightening just this
     hero-to-next-section seam fixes it without touching the normal
     spacing between later sections on the same page. */
  .simple-page-hero{padding:44px 0 8px;}
  .simple-page-hero + .section{padding-top:20px;}
  .marquee-track span, .dev-marquee-track span{padding:0 18px;}
  .btn{padding:14px 20px;font-size:.88rem;width:100%;justify-content:center;}
  .hero-ctas{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 4px;}
  .hero-ctas .btn{padding:12px 8px;font-size:.78rem;gap:4px;}
  .audit-card{margin-top:32px;}
  #backTop{width:44px;height:44px;bottom:16px;right:16px;}
  /* Bordered/glass "panel" style boxes (this CTA panel, the audit
     card, forms, etc.) always look tighter than plain text at the
     same padding, a solid visible edge makes any gap far more
     obvious than flowing text does. Giving these boxes a bit of
     their own side margin, on top of the page's normal padding,
     is what actually reads as "breathing room" on a phone. */
  .cta-panel{padding:32px 20px;border-radius:20px;margin:0 6px;}
  /* The FREE/rating badge is absolutely positioned in the card's top
     right corner, on narrow screens the title text underneath had
     nowhere reserved and would wrap right under it. Shrinking the
     badge and reserving space next to the title fixes the overlap. */
  .ext-badge{top:20px;right:20px;font-size:.62rem;padding:4px 10px;}
  .ext-head > div:last-child{padding-right:64px;}
  .ext-card h3, .ext-card .card-title{font-size:1.2rem;}
  .testi-card{width:270px;padding:20px;}
  .footer-top{gap:30px;}
  .footer-cols{gap:36px;}
  .dev-marquee-track span{font-size:1.2rem;}
  .code-body{font-size:.76rem;padding:16px;}
  #mobileMenu a{font-size:1.6rem;}
  .ring-wrap{width:170px;height:170px;}
  .blog-page-grid{grid-template-columns:1fr;}
  .form-row-2{grid-template-columns:1fr;}
  .author-box{flex-direction:column;text-align:center;align-items:center;}
  /* The scan-form-row (input + button box on every tool page) had no
     mobile rule at all, so once .btn's own mobile width:100% kicked
     in, the box's internal spacing looked cramped and inconsistent.
     Explicit wrapping + a touch more internal padding gives it the
     same breathing room as everything else on the page. */
  .scan-form-row{flex-wrap:wrap;gap:10px;padding:10px;}
  .scan-form-row input{flex-basis:100%;padding:12px 14px;}
  .scan-form-row button{flex:1;width:100%;}
  .scan-loading{padding:26px 20px;}
  .results-summary{padding:20px 18px;}
#respond{padding:24px 20px;}
  .comment-metadata{margin-left:0;flex-basis:100%;}
  .comment-author{flex-wrap:wrap;}
}


@media(max-width:480px){ /* <= 480px */
.a1{width:240px;height:240px;}
  .a2{width:210px;height:210px;}
  .a3{width:190px;height:190px;}
  .aurora span{opacity:.16;filter:blur(50px);}
	
	.hero {
        padding: 64px 12px;
    }
	.hero-ctas {
        margin: 34px 4px;
    }
	
	
	
	
	
	
	
	
}


@media(max-width:380px){ /* <= 380px */
.eyebrow{font-size:.64rem;padding:6px 10px;}
  .stat-row{gap:12px;}
  .stat strong{font-size:1.3rem;}
  .testi-card{width:230px;}
  .step, .tool-card, .ext-card, .why-card, .dev-card{padding:20px;}
}

/* 7th tool card (Image Compressor): centred in the 3-column grid,
   full row in the 2-column grid, normal in the 1-column grid. */
.tools-grid .tool-card--last{grid-column:2;}
@media(max-width:1100px){ .tools-grid .tool-card--last{grid-column:1 / -1;} }
@media(max-width:600px){ .tools-grid .tool-card--last{grid-column:auto;} }

/* Tool page "how to use" guide (inc/tool-guides.php) */
.sah-tool-guide h3{color:var(--text);font-size:1.15rem;margin:1.8em 0 .55em;}
.sah-tool-guide h3:first-child{margin-top:0;}
.sah-tool-guide ol{margin:0 0 1.2em 1.4em;}
.sah-tool-guide strong{color:var(--text);}

/* ---------- Tool report extras (v1.3) ---------- */
.sah-report-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:22px 0 4px;}
.sah-report-actions .btn{font-size:.85rem;padding:10px 18px;}
.sah-page-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:.78rem;color:var(--text-faint);font-family:var(--mono);}
.sah-page-meta strong{color:var(--text);font-weight:600;}
.sah-details{margin-top:10px;font-size:.82rem;color:var(--text-dim);}
.sah-details summary{cursor:pointer;color:var(--green);font-size:.8rem;}
.sah-outline,.sah-kv{list-style:none !important;margin:10px 0 0 !important;padding:0 !important;}
.sah-outline li{padding:3px 0;line-height:1.5;word-break:break-word;}
.sah-outline li span,.sah-kv li span{font-family:var(--mono);font-size:.7rem;color:var(--green);margin-right:8px;}
.sah-outline li.lvl-2{padding-left:14px;} .sah-outline li.lvl-3{padding-left:28px;}
.sah-outline li.lvl-4,.sah-outline li.lvl-5,.sah-outline li.lvl-6{padding-left:42px;}
.sah-kv li{padding:3px 0;word-break:break-word;}
.sah-bulk{max-width:640px;margin:14px auto 0;text-align:left;}
.sah-bulk summary{cursor:pointer;color:var(--green);font-size:.85rem;text-align:center;}
.sah-bulk textarea{width:100%;margin-top:10px;background:var(--bg-2);border:1px solid var(--border);border-radius:12px;color:var(--text);padding:12px 14px;font-family:var(--mono);font-size:.82rem;resize:vertical;}

@media print{
  body.sah-print-report header,
  body.sah-print-report footer,
  body.sah-print-report #mobileMenu,
  body.sah-print-report #backTop,
  body.sah-print-report .aurora,
  body.sah-print-report .skip-link,
  body.sah-print-report main > *:not(.tool-hero),
  body.sah-print-report .tool-hero-icon,
  body.sah-print-report .scan-form,
  body.sah-print-report .scan-loading,
  body.sah-print-report .scan-another,
  body.sah-print-report .sah-report-actions{display:none !important;}
  body.sah-print-report, body.sah-print-report *{
    background:#fff !important;color:#111 !important;box-shadow:none !important;text-shadow:none !important;
    animation:none !important;transition:none !important;opacity:1 !important;transform:none !important;
  }
  body.sah-print-report .result-row, body.sah-print-report .issue-item, body.sah-print-report .threat-item{border-color:#ccc !important;break-inside:avoid;}
}

/* ---------- Tables in blog posts and pages ----------
   Replaces WordPress's default grid look (equal-width columns, borders
   on every side, centered headings) with a clean, readable table that
   matches the theme. Wide tables scroll sideways on small screens. */
.post-body .wp-block-table,
.legal-content .wp-block-table{margin:2em 0;overflow:visible;}
.post-body .wp-block-table figcaption,
.legal-content .wp-block-table figcaption{margin-top:.8em;}
.sah-table-scroll{
  margin:2em 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--border);border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,0.035),rgba(255,255,255,0.01));
  box-shadow:0 18px 40px -28px rgba(0,0,0,0.7);
}
.wp-block-table .sah-table-scroll{margin:0;}
.sah-table-scroll::-webkit-scrollbar{height:8px;}
.sah-table-scroll::-webkit-scrollbar-thumb{background:rgba(95,219,142,0.35);border-radius:8px;}
.post-body table,
.legal-content table{
  width:100%;border-collapse:separate;border-spacing:0;margin:0;
  table-layout:auto !important;font-size:.92rem;line-height:1.55;color:var(--text-dim);
  border:0 !important;
}
.post-body .sah-table-scroll table,
.legal-content .sah-table-scroll table{min-width:640px;}
.post-body table th,
.post-body table td,
.legal-content table th,
.legal-content table td{
  border:0 !important;border-bottom:1px solid var(--border) !important;
  padding:14px 16px;text-align:left;vertical-align:top;
}
.post-body table thead th,
.legal-content table thead th,
.post-body table tr:first-child > th,
.legal-content table tr:first-child > th{
  background:rgba(91,155,240,0.12);
  color:var(--text);font-family:var(--mono);font-size:.74rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  border-bottom:1px solid rgba(95,219,142,0.35) !important;
}
.post-body table tbody tr:nth-child(even) td,
.legal-content table tbody tr:nth-child(even) td{background:rgba(255,255,255,0.025);}
.post-body table tbody tr:hover td,
.legal-content table tbody tr:hover td{background:rgba(95,219,142,0.06);}
.post-body table tbody tr:last-child td,
.legal-content table tbody tr:last-child td{border-bottom:0 !important;}
/* First column usually names the row (tool, plan, item): make it stand out. */
.post-body table td:first-child,
.legal-content table td:first-child{color:var(--text);font-weight:600;}
.post-body table td strong,
.legal-content table td strong{color:var(--text);}
.post-body table a,
.legal-content table a{word-break:break-word;}
.post-body table tfoot td,
.legal-content table tfoot td{font-weight:600;color:var(--text);border-top:1px solid var(--border) !important;}
@media(max-width:600px){
  .post-body table th,.post-body table td,
  .legal-content table th,.legal-content table td{padding:11px 12px;font-size:.86rem;}
  .post-body table thead th,.legal-content table thead th{font-size:.68rem;}
}
@media print{
  .sah-table-scroll{overflow:visible;box-shadow:none;border-color:#ccc;}
  .post-body table th,.post-body table td{border-bottom:1px solid #ccc !important;}
}

/* Grid/flex children default to min-width:auto, so a wide table made the
   whole post column (and the page) wider than the phone screen. */
.post-layout > *, .post-body{min-width:0;}

/* Blog cards: the link sits on the title (short, descriptive anchor
   text for SEO) and stretches over the whole card so it stays clickable. */
.blog-card{position:relative;}
.blog-card-link{color:inherit;text-decoration:none;}
.blog-card-link::after{content:'';position:absolute;inset:0;z-index:3;border-radius:inherit;}
.blog-card-link:focus-visible{outline:none;}
.blog-card:focus-within{outline:2px solid var(--green);outline-offset:3px;}
.blog-excerpt-scroll{position:relative;z-index:4;}
/* Footer column titles (were <h5>, which broke the heading order) */
.footer-col .footer-title{font-family:var(--mono);font-size:.72rem;color:var(--text-faint);margin-bottom:16px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;}

/* ---------- v1.6: more tools ---------- */
/* Tools dropdown: three columns now that there are 15 tools. */
.dropdown{width:min(680px,94vw);grid-template-columns:repeat(3,1fr);padding:12px;}
.dropdown a{padding:9px 10px;font-size:.82rem;}
/* Homepage grid: 15 cards fill 5 even rows of 3. The old centring rule
   for a lone 7th card no longer applies. */
.tools-grid .tool-card--last{grid-column:auto;}
.tools-grid .tool-card--featured{border-color:rgba(95,219,142,0.45);background:linear-gradient(160deg,rgba(95,219,142,0.10),rgba(91,155,240,0.06));}
@media(max-width:1100px){ .tools-grid .tool-card--featured{grid-column:1 / -1;} }
@media(max-width:600px){ .tools-grid .tool-card--featured{grid-column:auto;} }

/* ---------- Mega menu (Tools) ---------- */
nav{position:relative;}
.nav-links > .nav-item:first-child{position:static;}
.dropdown.mega{
  left:50%;width:min(980px,96vw);grid-template-columns:250px 1fr;gap:18px;padding:18px;
  top:calc(100% - 4px);
}
.nav-links > .nav-item:first-child::after{left:0;right:0;}
.mega-feature{display:flex;flex-direction:column;gap:8px;}
.dropdown .mega-feature-main{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:18px;border-radius:14px;
  background:linear-gradient(160deg,rgba(95,219,142,0.14),rgba(91,155,240,0.10));border:1px solid rgba(95,219,142,0.35);
}
.dropdown .mega-feature-main{position:relative;transition:border-color .2s ease,transform .2s ease;}
.dropdown .mega-feature-main:hover,.dropdown .mega-feature-main:focus-within{border-color:rgba(95,219,142,0.7);}
.dropdown .mega-feature-main .mega-feature-link{display:inline;padding:0;background:none;font-family:var(--display);font-size:1.05rem;font-weight:700;color:var(--text);}
.dropdown .mega-feature-main .mega-feature-link::after{content:"";position:absolute;inset:0;border-radius:14px;}
.dropdown .mega-feature-main .mega-feature-link:hover{background:none;}
.dropdown .mega-feature-main > .ico{width:30px;height:30px;border-radius:8px;background:var(--glass-hi);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--green);}
.dropdown .mega-feature-main > .ico svg{width:16px;height:16px;}
.mega-desc{font-size:.8rem;line-height:1.5;color:var(--text-dim);}
.mega-go{font-size:.8rem;font-weight:700;color:var(--green);}
.dropdown .mega-mini{padding:8px 10px;font-size:.8rem;}
.dropdown .mega-mini svg{width:15px;height:15px;color:var(--green);flex-shrink:0;}
.mega-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 12px;}
.mega-col{display:flex;flex-direction:column;gap:2px;min-width:0;}
.mega-title{font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text-faint);margin:4px 10px 6px;}
.mega-col a{padding:8px 10px;font-size:.82rem;}
.mega-col a .ico{width:26px;height:26px;}
.mega-col a .ico svg{width:14px;height:14px;}
@media(max-width:1180px){ .dropdown.mega{grid-template-columns:1fr;} .mega-feature{flex-direction:row;flex-wrap:wrap;} .dropdown .mega-feature-main{flex:1 1 100%;} }

/* ---------- Mobile menu: tools list ---------- */
#mobileMenu .mm-tools summary{
  font-family:var(--display);font-size:2rem;font-weight:700;color:var(--text);cursor:pointer;list-style:none;padding:8px 0;
  transform:translateY(110%);opacity:0;transition:transform .5s cubic-bezier(.2,.9,.3,1), opacity .5s ease;transition-delay:.06s;
}
#mobileMenu.open .mm-tools summary{transform:translateY(0);opacity:1;}
#mobileMenu .mm-tools summary::-webkit-details-marker{display:none;}
#mobileMenu .mm-tools summary::after{content:' +';color:var(--green);font-size:.7em;}
#mobileMenu .mm-tools details[open] summary::after{content:' −';}
#mobileMenu .mm-tool-list{display:flex;flex-direction:column;padding:4px 0 10px 4px;max-height:52vh;overflow:auto;}
#mobileMenu .mm-tool-list p{font-family:var(--mono);font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text-faint);margin:12px 0 4px;}
#mobileMenu .mm-tool-list a{font-family:var(--body);font-size:1rem;font-weight:500;color:var(--text-dim);padding:6px 0;transition-delay:0s !important;}
#mobileMenu li.mm-tools{overflow:visible;}
@media(max-width:600px){ #mobileMenu .mm-tools summary{font-size:1.6rem;} }

/* Footer: more columns now, a little less space between them */
.footer-cols{gap:34px 44px;}

/* ---------- Light / dark toggle ---------- */
.theme-toggle{
  width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:var(--glass);color:var(--text);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:border-color .2s, transform .2s;
}
.theme-toggle:hover{border-color:var(--green);transform:translateY(-1px);}
.theme-toggle svg{width:18px;height:18px;}
.theme-toggle .theme-ico-moon{display:none;}
html[data-theme="light"] .theme-toggle .theme-ico-sun{display:none;}
html[data-theme="light"] .theme-toggle .theme-ico-moon{display:inline-flex;}
.theme-toggle span{display:inline-flex;}
@media(max-width:900px){ .theme-toggle{margin-left:auto;} }

/* ---------- Light theme ----------
   Same layout, lighter palette. Greens and blues are darkened a little
   so text in those colours keeps good contrast on white. */
html[data-theme="light"]{
  --bg:#F5F7FB;
  --bg-2:#FFFFFF;
  --glass:rgba(14,20,36,0.035);
  --glass-hi:rgba(14,20,36,0.07);
  --border:rgba(14,20,36,0.10);
  --border-hi:rgba(14,20,36,0.20);
  --text:#0E1424;
  --text-dim:#465066;
  --text-faint:#5F6A80;
  --blue:#2F6FD0;
  --green:#178A49;
  --amber:#A86B12;
  color-scheme:light;
}
html[data-theme="light"] header{background:rgba(255,255,255,0.85);}
html[data-theme="light"] #mobileMenu{background:rgba(245,247,251,0.98);}
html[data-theme="light"] .aurora span{opacity:.18;}
html[data-theme="light"] .post-hero-media::after{background:linear-gradient(180deg,rgba(245,247,251,0) 0%,rgba(245,247,251,0.85) 100%);}
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .nav-cta{color:#FFFFFF;}
html[data-theme="light"] .blog-tag{color:#FFFFFF;}
html[data-theme="light"] .code-window,
html[data-theme="light"] .sah-code{background:#0E1424;color:#C9D2E3;}
html[data-theme="light"] .sah-code mark{color:#fff !important;}
@media(max-width:900px){ html[data-theme="light"] header{background:rgba(255,255,255,0.95);} }

/* Recent scans chips under tool URL boxes */
.sah-recent{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:10px;font-size:.78rem;color:var(--text-faint);}
.sah-recent-chip{background:var(--glass);border:1px solid var(--border);color:var(--text-dim);border-radius:999px;padding:4px 11px;font-size:.76rem;font-family:var(--mono);cursor:pointer;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sah-recent-chip:hover{border-color:var(--green);color:var(--text);}
.sah-recent-clear{background:none;border:0;color:var(--text-faint);font-size:.74rem;text-decoration:underline;cursor:pointer;}

/* Mobile menu now has an expandable tools list, so the panel can be taller
   than the screen: start it below the header and let it scroll. */
#mobileMenu{justify-content:flex-start;overflow-y:auto;padding-top:96px;padding-bottom:40px;}
#mobileMenu .mm-tool-list{max-height:none;overflow:visible;}

/* ---------- Logo in light mode (see inc/light-logo.php) ---------- */
.custom-logo-link .sah-logo-light{display:none;}
html[data-theme="light"] .custom-logo-link.has-light-logo img:not(.sah-logo-light){display:none;}
html[data-theme="light"] .custom-logo-link.has-light-logo .sah-logo-light{display:block;}
/* No light logo uploaded yet: keep the dark-theme logo readable on a dark chip. */
html[data-theme="light"] .custom-logo-link:not(.has-light-logo){
  background:#0E1424;padding:6px 14px;border-radius:12px;box-shadow:0 6px 18px -10px rgba(14,20,36,0.5);
}

/* Browser autofill (picking a saved suggestion from the dropdown) paints
   inputs with its own light background and dark text. Keep the theme's
   colours instead, in both dark and light mode. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:var(--text) !important;
  caret-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--bg-2) inset !important;
  box-shadow:0 0 0 1000px var(--bg-2) inset !important;
  transition:background-color 99999s ease-in-out 0s;
}
.scan-form-row input:-webkit-autofill,
.scan-form-row input:-webkit-autofill:hover,
.scan-form-row input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--bg-2) inset !important;
  box-shadow:0 0 0 1000px var(--bg-2) inset !important;
  border-radius:10px;
}
input:autofill{ background-color:var(--bg-2) !important; color:var(--text) !important; }

/* Light mode: buttons, chips and badges that sit on the green/blue gradient
   had their text fixed to near-black for the dark theme. In light mode
   the gradient is deeper, so they switch to white text. (Testimonial
   avatars keep dark text because their backgrounds stay pale.) */
html[data-theme="light"] .logo .mark,
html[data-theme="light"] #mobileMenu .mm-cta,
html[data-theme="light"] .ext-badge,
html[data-theme="light"] .ext-cta,
html[data-theme="light"] .blog-tag,
html[data-theme="light"] .blog-filter.active,
html[data-theme="light"] .blog-pagination .current,
html[data-theme="light"] .post-tag,
html[data-theme="light"] .post-author-avatar,
html[data-theme="light"] .author-box .avatar-lg,
html[data-theme="light"] .contact-form-modern .wpcf7-submit,
html[data-theme="light"] .team-avatar,
html[data-theme="light"] .tool-shortcode-wrap .btn-download,
html[data-theme="light"] .legal-content h2 .num,
html[data-theme="light"] .dk-submit-btn,
html[data-theme="light"] .sah-imgc-app .primary,
html[data-theme="light"] .skip-link{
  color:#FFFFFF !important;
}
html[data-theme="light"] .btn-primary .arrow,
html[data-theme="light"] .ext-cta .arrow{color:inherit;}
html[data-theme="light"] ::selection{color:#FFFFFF;}

/* =================================================================
   Footer (redesign)
   ================================================================= */
footer.site-footer{padding:56px 0 28px;border-top:1px solid var(--border);background:linear-gradient(180deg,transparent,rgba(91,155,240,0.04) 40%,rgba(95,219,142,0.05));}
.sf-cta{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin:0 0 52px;padding:30px 34px;
  background:linear-gradient(135deg,rgba(91,155,240,0.16),rgba(95,219,142,0.14));
  border:1px solid rgba(95,219,142,0.35);border-radius:20px;backdrop-filter:blur(14px);
  box-shadow:0 24px 50px -30px rgba(0,0,0,0.6);
}
.sf-cta-eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin-bottom:6px;}
.sf-cta-title{font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,2.4vw,1.6rem);color:var(--text);line-height:1.25;}
.sf-cta-sub{font-size:.9rem;color:var(--text-dim);margin-top:4px;}
.sf-cta-btn{flex-shrink:0;}
.sf-grid{display:grid;grid-template-columns:minmax(260px,1.5fr) repeat(4,minmax(0,1fr));gap:40px 32px;margin-top:6px;}
.sf-logo{margin-bottom:14px;}
.sf-logo-text{display:flex;align-items:center;gap:10px;color:var(--text);}
.sf-about{color:var(--text-dim);font-size:.92rem;line-height:1.65;max-width:330px;margin-bottom:20px;}
.sf-contact{display:flex;flex-direction:column;gap:10px;margin-bottom:22px;}
.sf-contact a{display:inline-flex;align-items:center;gap:10px;font-size:.88rem;color:var(--text-dim);width:fit-content;transition:color .2s;}
.sf-contact a:hover{color:var(--green);}
.sf-contact svg{width:16px;height:16px;color:var(--green);flex-shrink:0;}
.sf-label{font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text-faint);margin-bottom:10px;}
.sf-ext{display:flex;flex-wrap:wrap;gap:8px;}
.sf-ext a{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;color:var(--text);padding:7px 12px;border:1px solid var(--border-hi);border-radius:999px;background:var(--glass);transition:border-color .2s,transform .2s;}
.sf-ext a:hover{border-color:var(--green);transform:translateY(-1px);}
.sf-ext svg{width:14px;height:14px;color:var(--green);}
.sf-col{display:flex;flex-direction:column;gap:2px;min-width:0;}
.sf-title{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border);position:relative;}
.sf-title::after{content:'';position:absolute;left:0;bottom:-1px;width:28px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--green));}
.sf-col a{font-size:.86rem;color:var(--text-dim);padding:6px 0;width:fit-content;transition:color .2s,transform .2s;}
.sf-col a:hover{color:var(--text);transform:translateX(3px);}
.sf-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-top:44px;padding-top:22px;border-top:1px solid var(--border);font-size:.78rem;color:var(--text-faint);}
.sf-legal{display:flex;flex-wrap:wrap;gap:6px 18px;}
.sf-legal a{color:var(--text-faint);transition:color .2s;}
.sf-legal a:hover{color:var(--text);}
.sf-made{font-family:var(--mono);font-size:.72rem;}
@media(max-width:1180px){
  .sf-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .sf-brand{grid-column:1 / -1;display:grid;grid-template-columns:1.2fr 1fr;gap:6px 40px;align-items:start;}
  .sf-brand .sf-logo,.sf-brand .sf-about{grid-column:1;}
  .sf-brand .sf-contact{grid-column:2;grid-row:1 / span 2;}
  .sf-brand .sf-label{grid-column:2;}
  .sf-brand .sf-ext{grid-column:2;}
}
@media(max-width:760px){
  .sf-cta{margin:0 0 36px;padding:24px;}
  .sf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px;}
  .sf-brand{display:block;}
  .sf-bottom{flex-direction:column;align-items:flex-start;}
}
html[data-theme="light"] .sf-cta{box-shadow:0 24px 50px -34px rgba(14,20,36,0.35);}

/* The header's generic nav{} rule (padding, centring) also hit the footer
   navs. Reset it here so the link columns line up on the left. */
.site-footer nav{max-width:none;margin:0;padding:0;justify-content:flex-start;align-items:flex-start;}
.site-footer nav.sf-legal{flex-direction:row;align-items:center;}
.site-footer .sf-col a{text-align:left;}

/* ---------- Accessibility: contrast ----------
   Lighthouse can't see blur or opacity, so it treated the solid-coloured
   aurora blobs behind the hero as the text background and reported a
   contrast failure. Radial gradients look the same once blurred and are
   not mistaken for a text background. */
.a1{background:radial-gradient(closest-side,var(--blue) 0%,var(--blue) 55%,transparent 100%);}
.a2{background:radial-gradient(closest-side,var(--green) 0%,var(--green) 55%,transparent 100%);}
.a3{background:radial-gradient(closest-side,var(--blue-soft) 0%,var(--blue-soft) 55%,transparent 100%);}
/* Stat labels ("FREE TOOLS", "EXTENSIONS"...) were the faintest grey on
   the page; use the stronger secondary text colour. */
.stat span{color:var(--text-dim);}

/* Card titles that are styled like headings but are not headings */
.step .card-title,.ext-card .card-title,.why-card .card-title,.dev-card .card-title{font-family:var(--display);font-weight:700;letter-spacing:-0.02em;line-height:1.2;color:var(--text);max-width:none;}
.dev-card .card-title{font-family:var(--mono);font-weight:600;}

/* Tool guide illustration and official reference line */
.sah-guide-figure{margin:0 0 28px;}
.sah-guide-figure img{display:block;width:100%;max-width:720px;height:auto;margin:0 auto;border-radius:18px;box-shadow:0 18px 40px -24px rgba(0,0,0,.6);}
.sah-guide-source{margin-top:28px;padding:16px 18px;border-radius:12px;border:1px solid var(--border);background:var(--glass);font-size:.92rem;}
html[data-theme="light"] .sah-guide-figure img{box-shadow:0 18px 40px -26px rgba(15,23,42,.45);}