/*
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.0
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
*/

: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{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{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{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{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{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{margin-bottom:6px;}
  .step p{max-width:none;}
  .step h3, .step p{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{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{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;}
}