/* ==========================================================================
   CRO.STUDIO — UNIFIED STYLESHEET (new.css)
   Combines: site-speed-audit.html + cro-audit.html
   Duplicate rules merged. Conflicting same-named classes scoped properly.
   All colors + font sizes live in :root — change once, updates everywhere.
   ========================================================================== */

/* ---------------------------------------------------------------------
   1. VARIABLES — edit colors / font sizes here only
--------------------------------------------------------------------- */
:root{
  /* base palette */
  --navy-deep:#0E104B;
  --navy-panel:#161a5e;
  --navy-panel-2:#1e2274;
  --navy-line: rgba(247,164,0,0.14);

  --amber:#f7a400;
  --amber-hi:#ffc247;

  /* secondary amber used only in Vitals section cards (kept separate
     because it's a slightly different shade in the original design) */
  --amber-2:#FFB400;
  --amber-2-hi:#FFD34D;
  --amber-2-ring:#FFD95B;

  /* blues used only in Culprits section */
  --blue:#00d4ff;
  --blue-2:#5a8dff;
  --blue-3:#4c72ff;
  --blue-4:#6d5dff;
  --blue-eyebrow:#7cc9ff;

  --text-hi:#F5F6FF;
  --text-mid:#B7BAE6;
  --text-mid-2:#b9c2ef;   /* culprits section paragraph */
  --text-mid-3:#BFC8F3;   /* vitals section paragraph */
  --text-mid-4:#bfc7ff;   /* secon-div paragraph */
  --text-mid-5:#b9bfe6;   /* timeline paragraph */
  --text-low:#7f83b8;

  --radius:14px;

  /* ---- font sizes (change once to re-scale whole site) ---- */
  --fs-h1:        clamp(0.8rem, 6vw, 3rem);
  --fs-h2-lg:     clamp(2.3rem, 5vw, 3rem);   /* vitals / culprits headings */
  --fs-h2:        clamp(26px, 3vw, 38px);     /* default section heading */
  --fs-h3:        20px;
  --fs-lead:      clamp(17px, 2vw, 21px);
  --fs-body:      15px;
  --fs-body-lg:   16px;
  --fs-small:     13px;
  --fs-eyebrow:   16px;
}

/* ---------------------------------------------------------------------
   2. RESET & BASE
--------------------------------------------------------------------- */
*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--navy-deep);
  color:var(--text-hi);
  font-family:"Inter", sans-serif;
  overflow-x:hidden;
  line-height:1.6;
}

h1, h2, h3, h4{
  font-family:"Sora", sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }

/* Default section spacing (page-specific override lives in §12) */
section{ position:relative; padding:80px 0; }

/* ---------------------------------------------------------------------
   3. REVEAL ON SCROLL ANIMATION
   (original files had a duplicate rule later that cancelled the
   animation by forcing opacity:1 — removed, keeping the real one)
--------------------------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.215,.61,.355,1),
             transform .8s cubic-bezier(.215,.61,.355,1);
}
.reveal.is-visible,
.reveal.active{ opacity:1; transform:translateY(0); }

/* Hero staggered entrance delays */
.page-hero .breadcrumb{ transition-delay:.1s; }
.page-hero .eyebrow{    transition-delay:.2s; }
.page-hero h1{          transition-delay:.3s; }
.page-hero .lead{       transition-delay:.4s; }
.page-hero .hero-ctas{  transition-delay:.5s; }
.page-hero .gauge-card{ transition-delay:.6s; }

/* ---------------------------------------------------------------------
   4. HEADER / NAV
--------------------------------------------------------------------- */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 18px 0;
    border-bottom: 1px solid transparent;
    transition: background .3s ease, padding .3s ease, border-color .3s ease;
    background: #0e104b;
}
header .wrap{ display:flex; align-items:center; justify-content:space-between; }

.logo{
  font-family:"Sora", sans-serif; font-weight:800; font-size:20px;
  display:flex; align-items:center; gap:8px;
}
.logo .dot{ width:9px; height:9px; background:var(--amber); border-radius:2px; }

nav ul{ display:flex; gap:30px; list-style:none; }
nav a{ font-size:14.5px; font-weight:500; color:var(--text-mid); transition:color .2s; }
nav a:hover{ color:var(--amber); }

/* underline hover effect */
nav ul li a{ position:relative; }
nav ul li a::after{
  content:""; position:absolute; left:0; bottom:-4px;
  width:0; height:2px; background-color:var(--amber);
  transition:width .3s ease;
}
nav ul li a:hover::after{ width:100%; }

header .cta{ display:flex; align-items:center; gap:18px; }
header .btn{ padding:11px 22px; font-size:14px; }

.burger{ display:none; flex-direction:column; gap:5px; cursor:pointer; }
.burger span{ width:22px; height:2px; background:var(--text-hi); }

/* ---------------------------------------------------------------------
   5. BUTTONS
--------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--amber); color:#1a1200;
  font-weight:700; font-family:"Sora", sans-serif;
  padding:15px 28px; border-radius:100px; border:none; cursor:pointer;
  font-size:var(--fs-body);
  box-shadow:0 0 0 0 rgba(247,164,0,.5);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn:hover{
  background:var(--amber-hi);
  transform:translateY(-2px);
  box-shadow:0 10px 30px -6px rgba(247,164,0,.55);
}

.btn-outline{
  background:transparent; border:1px solid rgba(255,255,255,.22); color:var(--text-hi);
}
.btn-outline:hover{ border-color:var(--amber); color:var(--amber); background:transparent; box-shadow:none; }

.hero-ctas{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }

/* ---------------------------------------------------------------------
   6. SECTION HEADINGS / GENERIC EYEBROW
--------------------------------------------------------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"IBM Plex Mono", monospace; font-size:var(--fs-eyebrow);
  letter-spacing:.14em; color:var(--amber); text-transform:uppercase;
  margin-bottom:18px;
}
.eyebrow::before{ content:""; width:18px; height:2px; background:var(--amber); display:inline-block; }

.sec-head{ max-width:680px; margin-bottom:56px; }
.sec-head h2{ font-size:var(--fs-h2); margin-bottom:16px; }
.sec-head p{ color:var(--text-mid); font-size:var(--fs-body-lg); }

.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* Vitals / Culprits section headings use a bigger heading + own eyebrow tint */
.vitals-section .sec-head,
.culprits-section .section-top .left{ max-width:700px; }

.vitals-section .sec-head .eyebrow,
.culprits-section .eyebrow{
  display:inline-block; font-size:var(--fs-eyebrow); font-weight:700;
  letter-spacing:4px; text-transform:uppercase; margin-bottom:18px;
}
.vitals-section .sec-head .eyebrow{
  color:var(--amber-2); position:relative; padding-left:22px;
}
.vitals-section .sec-head .eyebrow::before{
  content:""; position:absolute; left:0; top:50%;
  width:14px; height:2px; background:var(--amber-2);
}
.culprits-section .eyebrow {
    color: #f7a400;
}
.vitals-section .sec-head h2{ font-size:var(--fs-h2-lg); line-height:1.1; margin-bottom:22px; }
.vitals-section .sec-head p{ font-size:clamp(16px,2vw,20px); line-height:1.8; color:var(--text-mid-3); }

/* ---------------------------------------------------------------------
   7. PRICING CARDS (.cards-3 / .card)
--------------------------------------------------------------------- */
.cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

.card{
  background:var(--navy-panel); border:1px solid var(--navy-line); border-radius:var(--radius);
  padding:32px;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.card:hover{
  transform:translateY(-6px); border-color:var(--amber);
  box-shadow:0 20px 40px -18px rgba(247,164,0,.25);
}
.card.featured{
  border-color:var(--amber); position:relative;
  background:linear-gradient(180deg, var(--navy-panel-2), var(--navy-panel));
}
.card .tag{
  position:absolute; top:-13px; right:24px;
  background:var(--amber); color:#1a1200; font-size:11px; font-weight:700;
  padding:5px 12px; border-radius:100px; font-family:"IBM Plex Mono", monospace;
}
.card h3{ font-size:var(--fs-h3); margin-bottom:6px; }
.card .price{
  font-family:"Sora", sans-serif; font-weight:800; font-size:32px;
  color:var(--amber); margin:14px 0 6px;
}
.card .price span{ font-size:14px; color:var(--text-low); font-weight:500; }
.card ul{ list-style:none; margin:20px 0 26px; display:flex; flex-direction:column; gap:11px; }
.card ul li{ font-size:14px; color:var(--text-mid); display:flex; gap:10px; align-items:flex-start; }
.card ul li::before{ content:"✓"; color:var(--amber); font-weight:700; flex-shrink:0; }
.card .btn{ width:100%; justify-content:center; }

/* ---------------------------------------------------------------------
   8. FAQ (identical block existed in both pages — merged once)
--------------------------------------------------------------------- */
#faq{ position:relative; }
#faq .faq-list{ display:flex; flex-direction:column; gap:20px; margin-top:60px; }

#faq .faq-item{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:20px; overflow:hidden; transition:.35s;
}
#faq .faq-item:hover{ border-color:var(--amber); transform:translateY(-3px); }
#faq .faq-item.active{ border-color:var(--amber); box-shadow:0 20px 45px rgba(0,0,0,.18); }

#faq .faq-q{
  width:100%; padding:28px 32px; display:flex; justify-content:space-between; align-items:center;
  background:none; border:none; color:#fff; cursor:pointer;
  font-size:24px; font-weight:600; text-align:left;
}
#faq .faq-q span:first-child{ max-width:90%; }

#faq .faq-icon{
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(247,164,0,.35); background:rgba(247,164,0,.08);
  position:relative; flex-shrink:0; transition:.35s;
}
#faq .faq-icon::before, #faq .faq-icon::after{
  content:""; position:absolute; background:var(--amber);
  left:50%; top:50%; transform:translate(-50%,-50%); transition:.35s;
}
#faq .faq-icon::before{ width:16px; height:2px; }
#faq .faq-icon::after{ width:2px; height:16px; }
#faq .faq-item.active .faq-icon{ transform:rotate(180deg); }
#faq .faq-item.active .faq-icon::after{ opacity:0; }

#faq .faq-a{ max-height:0; overflow:hidden; transition:max-height .45s ease; }
 
#faq .faq-a p{ padding:0 32px 28px; margin:0; color:#bfc5ef; font-size:17px; line-height:1.8; }

/* simple faq variant used inline in markup (non-#faq id, kept for safety) */
.faq-item{ border-bottom:1px solid var(--navy-line); }
.faq-q{
  padding:24px 4px; display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; font-family:"Sora", sans-serif; font-weight:600; font-size:16px;
}
.faq-a p{ padding:0 4px 24px; color:var(--text-mid); font-size:14.5px; max-width:760px; }

/* ---------------------------------------------------------------------
   9. PAGE HERO (shared base + per-page variant)
--------------------------------------------------------------------- */
.page-hero{ position:relative; padding:170px 0 90px; overflow:hidden; }

.breadcrumb{
  display:flex; align-items:center; gap:10px; margin-bottom:20px;
  font-family:"IBM Plex Mono", monospace; font-size:12.5px; color:var(--text-low);
}
.breadcrumb a{ color:var(--text-low); transition:.3s; }
.breadcrumb a:hover{ color:var(--amber); }

.page-hero h1{ font-size:var(--fs-h1); max-width:760px; margin-bottom:18px; color:#fff; }
.page-hero .lead{ font-size:var(--fs-lead); color:var(--text-mid); max-width:650px; margin-bottom:32px; line-height:1.9; }

/* --- Simple variant (used by CRO Audit page: two-column split) --- */
.split-2{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }

.gauge-card{
  background:linear-gradient(180deg, var(--navy-panel), var(--navy-panel-2));
  border:1px solid var(--navy-line); border-radius:22px; padding:34px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
}

/* --- Rich variant (used by Site Speed Audit page: gradient bg + score ring) --- */
.page-hero.rich{
  background:radial-gradient(circle at top left, #233ca8 0%, #14193f 45%, #090d25 100%);
}
.page-hero.rich::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.015), transparent);
}
.hero-blur{ position:absolute; border-radius:50%; filter:blur(140px); opacity:.18; pointer-events:none; }
.blur-1{ width:320px; height:320px; background:#315CFF; left:-120px; top:-80px; }
.blur-2{ width:260px; height:260px; background:var(--amber-2); right:-80px; bottom:-60px; }

.hero-grid-bg{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.5), transparent);
}

.hero-content{ display:grid; grid-template-columns:1.2fr .8fr; gap:80px; align-items:center; position:relative; z-index:2; }

.page-hero .eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  color:var(--amber-2); font-size:13px; font-weight:700; letter-spacing:4px;
  text-transform:uppercase; margin-bottom:24px;
}
.page-hero .eyebrow::before{ content:""; width:28px; height:2px; background:var(--amber-2); }

.hero-btn, .hero-btn-outline{ padding:18px 34px; border-radius:60px; }
.hero-btn:hover, .hero-btn-outline:hover{ transform:translateY(-4px); }

/* score-ring "audit card" widget */
.audit-card{
  position:relative; border-radius:28px; padding:38px; overflow:hidden;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
}
.audit-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(140deg, rgba(255,180,0,.08), transparent 45%);
}
.audit-header{ display:flex; align-items:center; gap:12px; margin-bottom:35px; }
.audit-dot{ width:10px; height:10px; border-radius:50%; background:#36ff76; box-shadow:0 0 15px #36ff76; }
.audit-title{ color:#fff; font-size:15px; font-weight:600; letter-spacing:1px; }

.audit-score{ display:flex; justify-content:center; margin-bottom:38px; }
.score-ring{
  width:170px; height:170px; border-radius:50%; position:relative;
  display:flex; align-items:center; justify-content:center;
  background:conic-gradient(var(--amber-2) 0deg, var(--amber-2-ring) 300deg, rgba(255,255,255,.08) 300deg);
}
.score-ring::before{ content:""; position:absolute; width:138px; height:138px; border-radius:50%; background:#101634; }
.score-ring span{ position:relative; z-index:2; color:#fff; font-size:54px; font-weight:800; }

.audit-items{ display:flex; justify-content:space-between; gap:18px; }
.audit-item{
  flex:1; text-align:center; padding:18px; border-radius:18px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.05);
}
.audit-item span{ display:block; color:#94A7F3; font-size:13px; margin-bottom:8px; }
.audit-item strong{ color:#fff; font-size:22px; }

/* ---------------------------------------------------------------------
   10. INFO CARDS / STATS (CRO Audit page)
--------------------------------------------------------------------- */
.info-card{
  background:var(--navy-panel); border:1px solid var(--navy-line); border-radius:var(--radius); padding:28px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.info-card:hover{ transform:scale(1.03); box-shadow:0 12px 25px rgba(0,0,0,.2); }
.info-card h4{ font-size:16px; margin-bottom:10px; display:flex; justify-content:space-between; }
.info-card p{ color:var(--text-mid); font-size:14px; }
.info-card img{ max-width:40px; }

.info-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }

.stat-block{
  text-align:center; padding:30px 20px; border-right:1px solid var(--navy-line);
  transition:transform .4s cubic-bezier(.175,.885,.32,1.275), box-shadow .4s ease, border-color .4s ease;
}
.stat-block:last-child{ border-right:none; }
.stat-block:hover{ transform:translateY(-8px); border-color:var(--amber); box-shadow:0 15px 30px rgba(247,164,0,.15); }
.stat-block .big{ font-family:"Sora", sans-serif; font-weight:800; font-size:36px; color:var(--amber); }
.stat-block .cap{ font-size:13px; color:var(--text-mid); margin-top:6px; }

.four-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.four-grid .stat-block{ border:1px solid var(--amber); border-radius:12px; background:#ffffff0a; background-blend-mode:color-burn; }
.new-css-cls img{ max-width:48px; margin:auto; }

.new-class .sec-head{ max-width:100%; padding-bottom:40px; text-align:center; }

/* ---------------------------------------------------------------------
   11. SAMPLE FINDING CARD (.secon-div — CRO Audit page)
--------------------------------------------------------------------- */
.wrap.secon-div{ position:relative; border-radius:30px; padding:32px; margin-bottom:60px; overflow:hidden;
  background:#0d1140; border:1px solid rgba(247,164,0,.35); }

.secon-div::before{
  content:""; position:absolute; inset:0; padding:1px; border-radius:24px; pointer-events:none;
  background:linear-gradient(90deg, var(--amber), #ff7b00, #ff4fd8, #8f6cff);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}

.secon-div-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:30px; }
.secon-div-left{ display:flex; align-items:flex-start; gap:22px; }
.secon-div-icon{
  width:70px; height:70px; border-radius:18px; background:rgba(255,255,255,.06);
  display:flex; justify-content:center; align-items:center; font-size:32px;
}
.secon-div-label{
  display:inline-block; color:var(--amber); text-transform:uppercase;
  font-size:12px; letter-spacing:2px; font-weight:600; margin-bottom:8px;
}
.secon-div h3{ margin:0; color:#fff; font-size:30px; font-weight:700; }
.secon-div p{ margin-top:14px; color:var(--text-mid-4); line-height:1.8; max-width:750px; }
.secon-div-priority{
  white-space:nowrap; background:rgba(247,164,0,.12); color:var(--amber);
  border:1px solid rgba(247,164,0,.3); border-radius:100px; padding:12px 22px; font-weight:600;
}
.secon-div-bottom{
  margin-top:35px; border-top:1px solid rgba(255,255,255,.08); padding-top:28px;
  display:grid; grid-template-columns:repeat(3,1fr);
}
.secon-div-box{ position:relative; padding-left:30px; }
.secon-div-box:not(:last-child)::after{
  content:""; position:absolute; top:0; right:0; width:1px; height:100%; background:rgba(255,255,255,.08);
}
.secon-div-box span{ display:block; color:#8f96c8; font-size:13px; text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; }
.secon-div-box strong{ color:#fff; font-size:28px; font-weight:700; }

/* ---------------------------------------------------------------------
   12. PROCESS TIMELINE (.new-add — CRO Audit page)
--------------------------------------------------------------------- */
.new-add{ position:relative; overflow:hidden; }
.new-add .sec-head{ margin-bottom:70px; }
.new-add-timeline{ position:relative; display:flex; flex-direction:column; gap:35px; }
.new-add-line{ position:absolute; left:29px; top:20px; bottom:20px; width:2px; background:rgba(247,164,0,.35); }
.new-add-item{ display:flex; align-items:center; gap:35px; position:relative; }

.new-add-dot{
  width:18px; height:18px; border-radius:50%; background:var(--amber);
  position:relative; left:21px; z-index:2; flex-shrink:0;
  animation:pulseDot 1.5s infinite;
}
.new-add-dot::after{
  content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--amber);
  animation:ripple 1.5s infinite;
}
@keyframes pulseDot{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.25); } }
@keyframes ripple{ 0%{ transform:scale(1); opacity:1; } 100%{ transform:scale(2.5); opacity:0; } }

.new-add-card{
  flex:1; display:flex; align-items:center; gap:40px; padding:20px; border-radius:24px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); transition:.35s;
}
.new-add-card:hover{ transform:translateY(-5px); border-color:var(--amber); box-shadow:0 20px 50px rgba(0,0,0,.25); }

.new-add-hour{ width:140px; flex-shrink:0; text-align:center; border-right:1px solid rgba(255,255,255,.08); padding-right:35px; }
.new-add-hour span{ display:block; text-transform:uppercase; color:var(--amber); font-size:14px; letter-spacing:2px; margin-bottom:8px; }
.new-add-hour strong{ display:block; color:#fff; font-size:35px; line-height:1; font-weight:700; }

.new-add-content h3{ color:#fff; font-size:28px; margin:0 0 15px; }
.new-add-content p{ color:var(--text-mid-5); line-height:1.8; font-size:18px; margin:0; }

/* ---------------------------------------------------------------------
   13. CORE WEB VITALS (Site Speed Audit page)
--------------------------------------------------------------------- */
.vitals-section{ position:relative; padding:120px 0; }
.vitals-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }

.vital-card{
  position:relative; padding:38px; border-radius:24px; overflow:hidden;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px); transition:.4s;
}
.vital-card::before{
  content:""; position:absolute; inset:0; opacity:0; transition:.4s;
  background:linear-gradient(140deg, rgba(255,180,0,.08), transparent 45%);
}
.vital-card:hover{ transform:translateY(-10px); border-color:rgba(255,180,0,.35); box-shadow:0 25px 60px rgba(255,180,0,.08); }
.vital-card:hover::before{ opacity:1; }

.vital-card .card-number{ position:absolute; top:18px; right:20px; font-size:60px; font-weight:700; color:rgba(255,255,255,.05); }
.vital-card .top{ display:flex; align-items:center; gap:18px; margin-bottom:25px; justify-content:space-between; }
.vital-card .title-wrap{ display:flex; align-items:center; gap:18px; }
.vital-card .icon{
  width:62px; height:62px; border-radius:18px; display:flex; align-items:center; justify-content:center;
  font-size:28px; background:linear-gradient(135deg, var(--amber-2), var(--amber-2-hi)); transition:.4s;
}
.vital-card:hover .icon{ transform:rotate(12deg) scale(1.08); }
.vital-card h4{ color:#fff; font-size:15px; margin-bottom:6px; }
.vital-card p{ color:var(--text-mid-3); line-height:1.8; margin-bottom:20px; font-size:13px; }

.vital-card .score{ display:inline-block; padding:8px 16px; border-radius:50px; font-size:14px; font-weight:700; margin-bottom:20px; }
.score.good{ background:#1FAF6033; color:#59F2A1; }
.score.fair{ background:#FFB40033; color:#FFD45A; }
.score.bad{  background:#FF575733; color:#FF8A8A; }

.bar-track{ width:100%; height:10px; background:rgba(255,255,255,.08); border-radius:20px; overflow:hidden; margin-bottom:10px; }
.bar-fill{
  height:100%; width:0%; border-radius:20px;
  background:linear-gradient(90deg, var(--amber-2), var(--amber-2-hi));
  box-shadow:0 0 18px rgba(255,180,0,.45);
  transition:width 1.2s ease;
}

/* ---------------------------------------------------------------------
   14. COMMON CULPRITS (Site Speed Audit page)
--------------------------------------------------------------------- */
.culprits-section{ position:relative; padding:120px 0; overflow:hidden; }

.section-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:80px; margin-bottom:70px; }
.section-top .left{ max-width:650px; }
.section-top h2{ font-size:48px; line-height:1.1; font-weight:700; color:#fff; }
 
.section-top p{ font-size:18px; line-height:1.8; color:var(--text-mid-2); max-width:420px; }

.culprit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }

.culprit-card{
  position:relative; padding:45px; border-radius:28px; overflow:hidden; cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(18px); transition:.45s;
}
.culprit-card::before{
  content:""; position:absolute; inset:0; padding:1px; border-radius:28px; pointer-events:none;
  background:linear-gradient(140deg, var(--navy-deep), transparent, rgba(100,120,255,.5));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.culprit-card:hover{ transform:translateY(-14px); box-shadow:0 30px 80px rgba(255,255,255,.18); }
.culprit-card .number{ position:absolute; right:25px; top:18px; font-size:62px; font-weight:700; color:rgba(255,255,255,.05); }

.culprit-card .icon{
  width:78px; height:78px; display:flex; align-items:center; justify-content:center;
  font-size:36px; border-radius:22px; margin-bottom:30px;
  background:linear-gradient(135deg, var(--blue), var(--blue-3)); transition:.4s;
}
.culprit-card:hover .icon{ transform:rotate(12deg) scale(1.12); }
.culprit-card h3{ font-size:26px; margin-bottom:18px; color:#fff; }
.culprit-card p{ color:var(--text-mid-2); line-height:1.8; margin-bottom:30px; }

.badge{ display:inline-block; padding:10px 18px; border-radius:50px; font-size:13px; font-weight:600; }
.badge.high{ background:#214bff33; color:#78b4ff; }
.badge.medium{ background:#24c87d22; color:#62ffbd; }
.badge.critical{ background:#ff474722; color:#ff7a7a; }

.bg-circle{ position:absolute; border-radius:50%; filter:blur(140px); opacity:.18; animation:float 12s infinite ease-in-out; }
.circle-1{ width:320px; height:320px; background:var(--blue); top:-80px; left:-100px; }
.circle-2{ width:280px; height:280px; background:var(--blue-4); bottom:-80px; right:-50px; animation-delay:3s; }
.circle-3{ width:200px; height:200px; background:#00bfff; left:40%; top:55%; animation-delay:6s; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-35px); } }

/* ---------------------------------------------------------------------
   15. FINAL CTA (identical block existed in both pages — merged once)
--------------------------------------------------------------------- */
.final-cta{ padding:120px 0; }
.final-cta .final-cta-box{
  position:relative; overflow:hidden; padding:80px 60px; text-align:center; border-radius:32px;
  background:linear-gradient(135deg, #121852, #1a236d); border:1px solid rgba(255,255,255,.08);
}
.final-cta .final-cta-box::before{
  content:""; position:absolute; width:420px; height:420px; border-radius:50%;
  background:rgba(247,164,0,.08); top:-180px; left:-120px; filter:blur(50px);
}
.final-cta .final-cta-box::after{
  content:""; position:absolute; width:350px; height:350px; border-radius:50%;
  background:rgba(255,90,0,.08); right:-120px; bottom:-150px; filter:blur(60px);
}
.final-cta .final-cta-box > *{ position:relative; z-index:2; }
.final-cta .final-cta-tag{
  display:inline-block; padding:10px 18px; border-radius:100px;
  background:rgba(247,164,0,.12); border:1px solid rgba(247,164,0,.25);
  color:var(--amber); font-size:13px; font-weight:600; letter-spacing:1px;
  text-transform:uppercase; margin-bottom:25px;
}
.final-cta h2{ color:#fff; font-size:35px; line-height:1.15; margin-bottom:22px; }
.final-cta p{ max-width:760px; margin:auto; color:#bcc3ef; font-size:20px; line-height:1.8; }
.final-cta .final-cta-btns{ margin-top:45px; display:flex; justify-content:center; align-items:center; gap:25px; flex-wrap:wrap; }
.final-cta .btn{ padding:18px 34px; }
.final-cta-note{ color:#8fd39c; font-size:16px; font-weight:500; }

/* ---------------------------------------------------------------------
   16. FOOTER (identical in both pages)
--------------------------------------------------------------------- */
footer{ border-top:1px solid var(--navy-line); padding:70px 0 30px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:50px; }
.foot-grid h5{
  font-family:"IBM Plex Mono", monospace; font-size:12px; color:var(--amber);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:18px;
}
.foot-grid ul{ list-style:none; display:flex; flex-direction:column; gap:11px; }
.foot-grid ul a{ color:var(--text-mid); font-size:14px; }
.foot-grid ul a:hover{ color:var(--amber); }
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center; padding-top:26px;
  border-top:1px solid var(--navy-line); color:var(--text-low); font-size:13px; flex-wrap:wrap; gap:14px;
}
.socials{ display:flex; gap:14px; }
.socials a{
  width:34px; height:34px; border:1px solid var(--navy-line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--text-mid);
}
.socials a:hover{ border-color:var(--amber); color:var(--amber); }

/* ---------------------------------------------------------------------
   17. PAGE-SPECIFIC SECTION SPACING
   (original CRO page used `section{padding:70px 0 !important}` which
   would silently affect the Speed page too if both loaded one sheet.
   Fixed by scoping to a body class — add `page-cro` or `page-speed`
   to <body> on each page.)
--------------------------------------------------------------------- */
body.page-cro section{ padding:70px 0; }
body.page-speed section{ padding:110px 0; }

/* ==========================================================================
   18. RESPONSIVE — grouped by breakpoint (largest to smallest)
   ========================================================================== */

/* ---- ≤1100px ---- */
@media(max-width:1100px){
  .hero-content{ grid-template-columns:1fr; gap:60px; }
  .hero-right{ max-width:550px; width:100%; margin:auto; }
}

/* ---- ≤1024px ---- */
@media(max-width:1024px){
	section {
    position: relative;
    padding: 40px 0;
}
  .vitals-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---- ≤991px ---- */
@media(max-width:991px){
	
  .section-top{ flex-direction:column; gap:30px; }
  .culprit-grid{ grid-template-columns:repeat(2,1fr); }
  .section-top h2{ font-size:42px; }

  .new-add-card{ gap:25px; }
  .new-add-hour{ width:110px; }
  .new-add-hour strong{ font-size:48px; }
  .new-add-content h3{ font-size:24px; }

  .final-cta h2{ font-size:25px; }
  .final-cta .final-cta-box{ padding:60px 35px; }
}

/* ---- ≤900px ---- */
@media(max-width:900px){
  .cards-3{ grid-template-columns:1fr; }
  .contact-box{ grid-template-columns:1fr; padding:36px; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .split-2, .info-grid{ grid-template-columns:1fr; }
  .stat-block{ border-right:none; border-bottom:1px solid var(--navy-line); }
  .stat-block:last-child{ border-bottom:none; }
  nav{ display:none; }
  .burger{ display:flex; }
}

/* ---- ≤768px ---- */
@media(max-width:768px){
  .vitals-section{ padding:80px 0; }
  .sec-head{ margin-bottom:45px; }
  .vitals-grid{ grid-template-columns:1fr; gap:22px; }
  .vital-card{ padding:28px; }
  .vital-card .title-wrap{ gap:15px; }
  .vital-card .icon{ width:55px; height:55px; font-size:24px; }
  .vital-card h4{ font-size:20px; }
  .vital-card .card-number{ font-size:48px; }

  .page-hero{ padding:90px 0 70px; }
  .hero-content{ gap:45px; }
  .hero-ctas{ flex-direction:column; }
  .hero-btn, .hero-btn-outline{ width:100%; text-align:center; }
  .audit-card{ padding:28px; }
  .score-ring{ width:145px; height:145px; }
  .score-ring::before{ width:118px; height:118px; }
  .score-ring span{ font-size:42px; }
  .audit-items{ flex-direction:column; }

  #faq .faq-list{ gap:15px; margin-top:40px; }
  #faq .faq-q{ padding:20px; font-size:18px; }
  #faq .faq-icon{ width:36px; height:36px; }
  #faq .faq-a p{ padding:0 20px 20px; font-size:15px; }
}

/* ---- ≤767px ---- */
@media(max-width:767px){
  body.page-cro section{ padding:30px 0; }

  .culprit-grid{ grid-template-columns:1fr; }
  .section-top h2{ font-size:34px; }
  .culprit-card{ padding:35px; }

  .four-grid{ grid-template-columns:repeat(2,1fr); gap:18px; }
  .stat-block .big{ font-size:20px; }
  .new-css-cls img{ max-width:30px; }
  .wrap.secon-div{ max-width:86%; }
  .secon-div-box strong{ font-size:22px; }

  .secon-div{ padding:22px; }
  .secon-div-top{ flex-direction:column; }
  .secon-div-left{ flex-direction:column; }
  .secon-div h3{ font-size:26px; }
  .secon-div-bottom{ grid-template-columns:1fr; gap:20px; }
  .secon-div-box:not(:last-child)::after{ display:none; }

  .new-add .sec-head{ margin-bottom:40px; }
  .new-add-line{ left:14px; }
  .new-add-item{ gap:20px; align-items:flex-start; }
  .new-add-dot{ width:14px; height:14px; right:-20px; left:auto; position:relative; }
  .new-add-card{ flex-direction:column; align-items:flex-start; padding:18px; gap:15px; }
  .new-add-hour{ width:100%; border-right:none; border-bottom:1px solid rgba(255,255,255,.08); padding-right:0; padding-bottom:20px; text-align:left; }
  .new-add-hour strong{ font-size:28px; }
  .new-add-content h3{ font-size:18px; }
  .new-add-content p{ font-size:16px; line-height:1.7; }

  .final-cta{ padding:80px 0; }
  .final-cta .final-cta-box{ padding:45px 25px; border-radius:24px; }
  .final-cta h2{ font-size:20px; }
  .final-cta p{ font-size:16px; }
  .final-cta .final-cta-btns{ flex-direction:column; gap:18px; }
  .final-cta .btn{ width:100%; text-align:center; }
}