/* ═══════════════════════════════════════════════
   DESIGN TOKENS — Theme-Cohesive Variables
═══════════════════════════════════════════════ */
:root {
  /* Surfaces */
  --base:      #050505;
  --surface:   rgba(20, 20, 25, 0.6);
  --card:      rgba(20, 20, 25, 0.55);
  --elevated:  rgba(255, 255, 255, 0.035);
  --panel:     rgba(255, 255, 255, 0.025);

  /* Accent — BizChakra orange, used sparingly */
  --accent:    #FFA500;
  --accent-lt: #FFC04D;
  --accent-10: rgba(255, 165, 0, 0.10);
  --accent-20: rgba(255, 165, 0, 0.20);
  --accent-30: rgba(255, 165, 0, 0.30);

  /* Text hierarchy */
  --t-100: #FFFFFF;
  --t-90:  #E8E8E8;
  --t-75:  #BFBFBF;
  --t-50:  #808080;
  --t-30:  #4D4D4D;

  /* Borders */
  --bd-8:  rgba(255, 255, 255, 0.08);
  --bd-12: rgba(255, 255, 255, 0.12);
  --bd-20: rgba(255, 255, 255, 0.20);

  /* Typography — Cohesive with theme */
  --ff-display: 'Montserrat', sans-serif;
  --ff-body:    'Montserrat', sans-serif;
  --ff-mono:    'DM Mono', monospace;
  --ff-d:       'Orelega One', serif;

  /* Easing */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══════════════════════════════════════════════
   LAYOUT UTILITIES
═══════════════════════════════════════════════ */
.wrap{max-width:1100px;margin:0 auto;padding:0 2.5rem}
.wrap-text{max-width:780px;margin:0 auto;padding:0 2.5rem}
.wrap-narrow{max-width:680px;margin:0 auto;padding:0 2.5rem}
.wrap-body{max-width:700px;margin:0 auto;padding:0 2.5rem}

.sp     {padding:96px 0}
.sp-sm  {padding:64px 0}
.sp-lg  {padding:120px 0}

/* Alternate surfaces */
.bg-surface {background:var(--surface)}
.bg-elevated{
  background:var(--elevated);
  border-top:1px solid var(--bd-8);
  border-bottom:1px solid var(--bd-8);
}

/* Section label */
.label{
  font-family:var(--ff-display);font-size:0.75rem;font-weight:800;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:0.75rem;margin-bottom:1.25rem;
}
.label::before{content:'';display:block;width:6px;height:6px;background:currentColor;border-radius:50%;flex-shrink:0}
.label-center{justify-content:center}
.label-center::before{display:block}
.label-center::after{content:'';display:block;width:6px;height:6px;background:currentColor;border-radius:50%;flex-shrink:0}

/* Breadcrumb */
.bc{
  display:flex;align-items:center;gap:0.5rem;
  font-family:var(--ff-mono);font-size:0.7rem;
  letter-spacing:0.07em;text-transform:uppercase;color:var(--t-50);
}
.bc a{transition:color 0.2s}
.bc a:hover{color:var(--accent)}
.bc span{color:var(--t-30)}

/* ═══════════════════════════════════════════════
   TYPOGRAPHY SYSTEM
═══════════════════════════════════════════════ */
.h1{
  font-family:var(--ff-d);
  font-size:clamp(2rem,4.5vw,3.25rem);
  font-weight:normal;line-height:1.2;
  color:var(--accent);
  text-shadow:4px 4px 0px rgb(0, 0, 0);
}
.h2{
  font-family:var(--ff-d);
  font-size:clamp(1.5rem,3vw,2.25rem);
  font-weight:normal;line-height:1.25;
  color:var(--accent);
  text-shadow:3px 3px 0px rgb(0, 0, 0);
}
.h3{
  font-family:var(--ff-display);
  font-size:clamp(1.1rem,2vw,1.35rem);
  font-weight:500;line-height:1.3;color:var(--t-90);
}
.body-lead{
  font-size:clamp(1rem,1.6vw,1.0625rem);
  font-weight:400;color:var(--t-75);line-height:1.75;
}
.body{
  font-size:clamp(0.9375rem,1.4vw,1rem);
  font-weight:400;color:var(--t-75);line-height:1.7;
}
.body-sm{font-size:0.875rem;font-weight:400;color:var(--t-50);line-height:1.7}

/* ═══════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════ */
.btn-primary{
  display:inline-flex;align-items:center;gap:0.625rem;
  padding:0.875rem 1.75rem;
  background:var(--accent);color:var(--base);
  font-family:var(--ff-display);font-size:0.9375rem;font-weight:600;
  letter-spacing:-0.01em;border-radius:8px;
  transition:background 0.15s var(--ease),transform 0.15s var(--ease);
  white-space:nowrap;
}
.btn-primary:hover{background:var(--accent-lt)}
.btn-primary .arr{transition:transform 0.15s}
.btn-primary:hover .arr{transform:translateX(3px)}

.btn-text{
  display:inline-flex;align-items:center;gap:0.375rem;
  font-family:var(--ff-body);font-size:0.875rem;font-weight:400;
  color:var(--t-50);
  transition:color 0.2s;
}
.btn-text:hover{color:var(--t-100)}

/* ═══════════════════════════════════════════════
   SECTION 1 — HERO
═══════════════════════════════════════════════ */
.hero{
  min-height:100svh;
  padding:120px 2.5rem 80px;
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;
  gap:5rem;align-items:end;
  position:relative;
}

/* Left column — min-width:0 prevents grid blowout on narrow viewports */
.hero-left{position:relative;z-index:1;min-width:0}
.hero-byline{
  font-family:var(--ff-mono);font-size:0.7rem;
  letter-spacing:0.07em;text-transform:uppercase;color:var(--t-50);
  margin-top:1.25rem;
  overflow-wrap:break-word;word-break:break-word;
}
.hero-body{max-width:560px;margin:1.5rem 0 2rem}
.hero-ctas{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.trust-bar{
  margin-top:2rem;
  display:flex;align-items:center;gap:0;flex-wrap:wrap;
  font-family:var(--ff-mono);font-size:0.68rem;
  letter-spacing:0.07em;text-transform:uppercase;color:var(--t-50);
}
.trust-bar-item{display:flex;align-items:center;gap:0.5rem}
.trust-bar-item::before{content:'·';color:var(--accent);font-size:1rem;margin:0 0.625rem}
.trust-bar-item:first-child::before{display:none}

/* Right column — SEO Flow Diagram */
.hero-diagram{
  display:flex;flex-direction:column;align-items:center;
  position:relative;gap:0;
}
.flow-node{
  display:flex;align-items:center;gap:0;width:100%;max-width:280px;
}
.flow-box{
  flex:1;
  padding:0.75rem 1.25rem;
  background:rgba(255, 255, 255, 0.04);
  border:1px solid var(--bd-8);
  border-radius:8px;
  font-family:var(--ff-display);font-size:0.8125rem;font-weight:500;
  color:var(--t-75);text-align:center;
  transition:border-color 0.3s,color 0.3s;
}
.flow-box.final{
  background:var(--accent-10);
  border-color:var(--accent-30);
  color:var(--accent-lt);
  font-weight:600;
}
.flow-connector{
  display:flex;flex-direction:column;align-items:center;
  padding:0;width:100%;max-width:280px;
}
.flow-arrow-line{
  width:1px;height:28px;
  background:linear-gradient(to bottom,rgba(255,255,255,0.15),rgba(255,255,255,0.05));
}
.flow-arrow-head{
  width:0;height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid rgba(255,255,255,0.15);
}
.diagram-label{
  font-family:var(--ff-mono);font-size:0.65rem;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--t-30);
  margin-bottom:1.25rem;text-align:center;
}
.diagram-caption{
  font-family:var(--ff-mono);font-size:0.65rem;
  letter-spacing:0.07em;text-transform:uppercase;color:var(--t-30);
  margin-top:1.5rem;text-align:center;
}

/* ═══════════════════════════════════════════════
   SECTION 2 — WHY MOST SEO UNDERPERFORMS
═══════════════════════════════════════════════ */
.problem-body{max-width:680px}
.problem-emphasis{
  /* Slightly more air — design brief requirement */
  font-size:clamp(1rem,1.6vw,1.0625rem);
  font-weight:400;color:var(--t-75);
  line-height:2.1;
  font-style:italic;
  margin:1.75rem 0;
  padding-left:1.25rem;
  border-left:2px solid var(--accent-20);
}

/* ═══════════════════════════════════════════════
   SECTION 3 — WHAT SEO MEANS AT BIZCHAKRA
═══════════════════════════════════════════════ */
.seo-def-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:5rem;align-items:start;
}
.seo-border-list{
  list-style:none;
  border-left:1px solid var(--accent-30);
  padding-left:1.25rem;
  margin-top:0;
  display:flex;flex-direction:column;gap:0;
}
.seo-border-list li{
  font-family:var(--ff-body);font-size:0.9375rem;font-weight:400;
  color:var(--t-75);line-height:1.6;
  padding:0.625rem 0;
  border-bottom:1px solid var(--bd-8);
  transition:color 0.2s;
}
.seo-border-list li:last-child{border-bottom:none}
.seo-border-list li:hover{color:var(--t-100)}

/* ═══════════════════════════════════════════════
   SECTION 4 — NOT JUST ABOUT RANKINGS (Full framework)
═══════════════════════════════════════════════ */
.framework-flow{
  display:flex;align-items:center;justify-content:center;
  gap:0;flex-wrap:nowrap;
  margin:3rem auto;
  overflow-x:auto;padding:1rem 0;
  max-width:100%;
}
.fw-node{
  display:flex;flex-direction:column;align-items:center;
  gap:0.5rem;flex-shrink:0;
}
.fw-box{
  padding:0.75rem 1rem;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--bd-12);
  border-radius:8px;
  min-width:110px;
  font-family:var(--ff-display);font-size:0.78125rem;font-weight:500;
  color:var(--t-75);text-align:center;line-height:1.3;
  transition:border-color 0.3s,color 0.3s,background 0.3s;
}
.fw-box.accent-node{
  background:var(--accent-10);
  border-color:var(--accent);
  color:var(--accent-lt);
  font-weight:600;
}
.fw-num{
  font-family:var(--ff-mono);font-size:0.625rem;
  letter-spacing:0.1em;color:var(--t-30);
}
.fw-arrow{
  display:flex;align-items:center;
  padding:0 0.375rem;flex-shrink:0;
}
.fw-arrow svg{width:20px;height:12px;display:block}

/* ═══════════════════════════════════════════════
   SECTION 5 — PROCESS STEPS & COMPARISON
═══════════════════════════════════════════════ */
.comparison-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:var(--bd-8);
  border:1px solid var(--bd-8);border-radius:12px;
  overflow:hidden;
  margin:4rem 0;
}
.cg-col{padding:0}
.cg-header{
  padding:1rem 1.75rem;
  font-family:var(--ff-mono);font-size:0.72rem;
  letter-spacing:0.09em;text-transform:uppercase;
  border-bottom:1px solid var(--bd-8);
}
.cg-col-muted .cg-header{color:var(--t-50)}
.cg-col-clear .cg-header{
  color:var(--accent);
  border-bottom-color:var(--accent-30);
}
.cg-row{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;
}
.cg-item{
  padding:0.875rem 1.75rem;
  border-bottom:1px solid var(--bd-8);
  font-size:0.9rem;font-weight:400;line-height:1.5;
}
.cg-item:last-child,.cg-row:last-child .cg-item{border-bottom:none}
.cg-item-muted{color:var(--t-50);opacity:0.7}
.cg-item-clear{color:var(--t-75)}
.cg-row-wrap{
  display:grid;grid-template-columns:1fr 1fr;
  border-radius:0;overflow:hidden;
}
.cg-left{background:var(--card)}
.cg-right{background:rgba(255,255,255,0.02)}

.process-header {
  margin-bottom: 3.5rem;
}

.steps-container{
  position:relative;
  padding-left:4rem;
}
.steps-line{
  position:absolute;
  left:1.25rem;top:0;bottom:0;
  width:2px;
  background:linear-gradient(to bottom,var(--accent) var(--line-fill,0%),var(--bd-8) var(--line-fill,0%));
  transition:none;
}
.step{
  position:relative;
  margin-bottom:4rem;
  opacity:0.35;
  transform:translateY(6px);
  transition:opacity 0.4s var(--ease-out),transform 0.4s var(--ease-out);
}
.step.in-view{opacity:1;transform:translateY(0)}
.step:last-child{margin-bottom:0}

.step-num{
  position:absolute;
  left:-4rem;top:-0.125rem;
  width:2.5rem;height:2.5rem;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-display);font-size:1.25rem;font-weight:700;
  color:var(--accent);
  background:var(--base);
  border:2px solid var(--bd-8);
  border-radius:50%;
  line-height:1;
  transition:border-color 0.3s,color 0.3s;
  z-index:2;
}
.step.in-view .step-num{
  border-color:var(--accent);
}
.step-body .h3{margin-bottom:0.875rem;margin-top:0.1rem}
.step-body .body{max-width:620px}

.comparison-interlude{
  margin-left:-4rem;
  margin-bottom:4rem;
}

/* ═══════════════════════════════════════════════
   SECTION 6 — PROOF
═══════════════════════════════════════════════ */
.proof-inner{max-width:780px;margin:0 auto}
.proof-metric{
  font-family:var(--ff-display);
  font-size:clamp(3rem,8vw,5rem);
  font-weight:700;letter-spacing:-0.03em;
  color:var(--accent);line-height:1;
  margin-bottom:1rem;
}
.proof-detail{
  font-size:0.9375rem;font-weight:400;
  color:var(--t-50);line-height:1.7;
  max-width:540px;
}
.proof-quote{
  margin-top:2.5rem;
  padding:1.75rem 2rem;
  border-left:2px solid var(--accent-30);
  background:rgba(255,255,255,0.02);
  border-radius:0 8px 8px 0;
}
.proof-quote p{
  font-family:var(--ff-display);font-size:1.0625rem;font-weight:400;
  font-style:italic;color:var(--t-75);line-height:1.65;
}
.proof-quote cite{
  display:block;margin-top:0.75rem;
  font-family:var(--ff-mono);font-size:0.7rem;
  letter-spacing:0.07em;text-transform:uppercase;
  color:var(--t-50);font-style:normal;
}
.proof-placeholder{
  padding:2.5rem;border:1px dashed var(--bd-8);border-radius:8px;
  text-align:center;
}
.proof-placeholder p{
  font-family:var(--ff-mono);font-size:0.75rem;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--t-30);line-height:1.8;
}

/* ═══════════════════════════════════════════════
   SECTION 7 — THREE CLUSTERS
═══════════════════════════════════════════════ */
.clusters-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1.5rem;margin-top:3rem;
}
.cluster-card{
  background: rgba(20, 20, 25, 0.5);
  border: 1px solid rgba(255, 165, 0, 0.15);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 15px rgba(255, 165, 0, 0.05);
  border-radius: 20px;
  padding: 2.5rem;
  overflow: hidden;
  position: relative;
}
.cluster-label{
  font-family:var(--ff-mono);font-size:0.68rem;
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--accent);margin-bottom:0.875rem;
}
.cluster-title{
  font-family:var(--ff-display);font-size:1.125rem;font-weight:600;
  color:var(--t-100);margin-bottom:1.25rem;letter-spacing:-0.01em;
}
.cluster-list{
  list-style:none;
}
.cluster-list li{
  font-size:0.9rem;font-weight:400;color:var(--t-75);
  padding:0.6rem 0;line-height:1.5;
  border-bottom:1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  padding-left: 1.25rem;
}
.cluster-list li::before {
  content: "✦";
  color: var(--accent);
  position: absolute;
  left: 0;
  font-size: 0.75rem;
}
.cluster-list li:last-child{border-bottom:none}

/* ═══════════════════════════════════════════════
   SECTION 8 — BUSINESS TYPES PILLS
═══════════════════════════════════════════════ */
.pills-row{
  display:flex;flex-wrap:wrap;gap:0.625rem;
  justify-content:flex-start;
  margin-top:1.75rem;
}
.pill{
  padding:0.375rem 1rem;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--bd-8);
  border-radius:100px;
  font-family:var(--ff-mono);font-size:0.78125rem;font-weight:400;
  color:var(--t-75);
  transition:border-color 0.2s,color 0.2s;
}
.pill:hover{border-color:var(--bd-20);color:var(--t-100)}

/* ═══════════════════════════════════════════════
   SECTION 9 — DIFFERENTIATORS (editorial)
═══════════════════════════════════════════════ */
.diff-item{
  padding:2.5rem 0;
  border-bottom:1px solid var(--bd-8);
  max-width:680px;
}
.diff-item:last-child{border-bottom:none}
.diff-item .h3{
  position:relative;
  padding-left:1.25rem;
  margin-bottom:0.875rem;
}
.diff-item .h3::before{
  content:'';
  position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--accent);border-radius:2px;
}

/* ═══════════════════════════════════════════════
   SECTION 10 — AI SEARCH
═══════════════════════════════════════════════ */
.ai-paths{
  display:flex;flex-direction:column;gap:0.5rem;
  margin:2.5rem auto 0;max-width:580px;
}
.ai-path-row{
  display:flex;align-items:center;gap:1rem;
  padding:0.875rem 1.25rem;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--bd-8);border-radius:8px;
}
.ai-path-icon{
  width:20px;height:20px;flex-shrink:0;opacity:0.5;
}
.ai-path-label{
  font-size:0.875rem;font-weight:400;color:var(--t-75);flex:1;
}
.ai-path-arrow{
  font-family:var(--ff-mono);font-size:0.7rem;color:var(--t-30);
}
.ai-path-outcome{
  font-family:var(--ff-display);font-size:0.875rem;font-weight:600;
  color:var(--accent-lt);
}

/* ═══════════════════════════════════════════════
   SECTION 11 — FAQ
═══════════════════════════════════════════════ */
.faq-list{border-top:1px solid var(--bd-8)}
.faq-item{border-bottom:1px solid var(--bd-8)}
.faq-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:1.25rem 0;text-align:left;gap:2rem;
  background:none;border:none;transition:opacity 0.2s;
}
.faq-btn:hover{opacity:0.85}
.faq-q{
  font-family:var(--ff-display);font-size:1.0625rem;font-weight:500;
  color:var(--t-100);line-height:1.4;
}
.faq-ico{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--bd-8);position:relative;
  display:flex;align-items:center;justify-content:center;
  transition:border-color 0.2s,background 0.2s;
}
.faq-ico::before,.faq-ico::after{content:'';position:absolute;border-radius:2px;background:var(--t-50);transition:transform 0.3s var(--ease-out),background 0.2s,opacity 0.2s}
.faq-ico::before{width:9px;height:1px}
.faq-ico::after{width:1px;height:9px}
.faq-item.open .faq-ico{border-color:var(--accent);background:var(--accent-10)}
.faq-item.open .faq-ico::before{background:var(--accent)}
.faq-item.open .faq-ico::after{background:var(--accent);transform:scaleY(0)}
.faq-body{overflow:hidden;max-height:0;transition:max-height 0.4s var(--ease-out)}
.faq-body-inner{padding-bottom:1.5rem;font-size:0.9375rem;color:var(--t-75);line-height:1.75;max-width:680px}

/* ═══════════════════════════════════════════════
   SECTION 12 — CLOSING CTA
═══════════════════════════════════════════════ */
.closing-cta{
  text-align:center;
  padding:100px 2.5rem;
}
.closing-cta .h2{margin-bottom:1.25rem;max-width:600px;margin-left:auto;margin-right:auto}
.closing-cta .body{max-width:520px;margin:0 auto 2.5rem}
.closing-cta .btn-primary{
  font-size:1rem;padding:1rem 2rem;
}

/* ═══════════════════════════════════════════════
   SCROLL REVEAL & RESPONSIVE BREAKPOINTS
═══════════════════════════════════════════════ */
.rv{
  opacity:0;transform:translateY(20px);
  transition:opacity 0.4s var(--ease-out),transform 0.4s var(--ease-out);
}
.rv.in{opacity:1;transform:translateY(0)}
.d1{transition-delay:0.05s}
.d2{transition-delay:0.10s}
.d3{transition-delay:0.15s}
.d4{transition-delay:0.20s}
.d5{transition-delay:0.25s}

@media(max-width:1024px){
  .clusters-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:960px){
  .wrap,.wrap-text,.wrap-narrow{padding:0 1.75rem}
  .hero{padding:6.5rem 1.75rem 4rem}
  .sp{padding:72px 0}
  .sp-sm{padding:48px 0}
  .sp-lg{padding:88px 0}
  .clusters-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:2.5rem;min-height:auto}
  .hero-diagram{max-width:260px;margin:0 auto}
  .seo-def-grid{grid-template-columns:1fr;gap:2.5rem}
  .clusters-grid{grid-template-columns:1fr}
  .comparison-grid{grid-template-columns:1fr}
  .cg-row-wrap{grid-template-columns:1fr}
  .framework-flow{flex-wrap:wrap;justify-content:center;gap:0.375rem}
  .fw-arrow{transform:rotate(90deg)}
  .ranking-statement{max-width:100%}
}

@media(max-width:768px){
  .wrap,.wrap-text,.wrap-narrow{padding:0 1.5rem}
  .sp{padding:64px 0}
  .sp-sm{padding:40px 0}
  .sp-lg{padding:72px 0}
  .hero{padding:5.5rem 1.5rem 3rem}
  .hero-left,.hero-diagram{min-width:0;max-width:100%}
  .hero-body,.hero-byline,.body-lead,.body{max-width:100%;overflow-wrap:break-word;word-break:break-word}
  .steps-container{padding-left:3rem}
  .steps-line{left:0.875rem}
  .step-num{left:-3rem;width:2rem;height:2rem;font-size:1rem}
  .comparison-interlude{margin-left:-3rem}
  .closing-cta{padding:64px 1.5rem}
  .hero-ctas{flex-direction:column;align-items:stretch;gap:1rem}
  .btn-primary{
    width:100%;justify-content:center;
    white-space:normal;text-align:center;
    padding:0.875rem 1.25rem;font-size:0.875rem;
  }
  .closing-cta .btn-primary{width:100%;justify-content:center}
}

@media(max-width:480px){
  .steps-container{padding-left:2.5rem}
  .steps-line{left:0.625rem}
  .step-num{left:-2.5rem;width:1.875rem;height:1.875rem;font-size:0.875rem}
  .comparison-interlude{margin-left:0}
  .trust-bar{flex-direction:column;gap:0.5rem;align-items:flex-start}
  .trust-bar-item::before{display:none}
  .location-pills{gap:0.5rem}
}

@media(max-width:500px){
  .comparison-grid{grid-template-columns:1fr}
  .cg-row-wrap{grid-template-columns:1fr}
  .h1{font-size:1.875rem}
  .hero-diagram{display:none}
}

/* ═══════════════════════════════════════════════
   PREMIUM MICRO-ANIMATIONS & INTERACTIVE EFFECTS
═══════════════════════════════════════════════ */

/* Shimmer Sweep Animation Keyframes */
@keyframes shine {
  0% { left: -150%; }
  50% { left: 100%; }
  100% { left: 150%; }
}

/* Orange Glow Pulsing Keyframes */
@keyframes pulse-orange {
  0% { box-shadow: 0 0 8px rgba(255, 165, 0, 0.15); border-color: rgba(255, 165, 0, 0.3); }
  50% { box-shadow: 0 0 20px rgba(255, 165, 0, 0.5); border-color: rgba(255, 165, 0, 0.8); }
  100% { box-shadow: 0 0 8px rgba(255, 165, 0, 0.15); border-color: rgba(255, 165, 0, 0.3); }
}

/* Float Animation Keyframes */
@keyframes card-float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-4px); }
  100% { transform: translateY(0px); }
}

/* Apply floating behavior to key content nodes */
.flow-box.final, .fw-box.accent-node {
  animation: pulse-orange 3s infinite ease-in-out;
}

.cluster-card {
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out) !important;
}

.cluster-card::before, .cg-col::before, .diff-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.04) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  transition: none;
  pointer-events: none;
}

.cluster-card:hover::before {
  animation: shine 1.4s ease-in-out;
}

.cluster-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 165, 0, 0.08);
  border-color: var(--accent-30);
}

/* Hero Diagram Node Hover Transitions */
.flow-node {
  transition: transform 0.3s var(--ease-out);
}

.flow-node:hover {
  transform: scale(1.03);
}

.flow-node:hover .flow-box {
  border-color: var(--accent);
  box-shadow: 0 0 15px rgba(255, 165, 0, 0.15);
  color: var(--t-100);
}

/* Strategy Framework Node Hover States */
.fw-node {
  transition: transform 0.3s var(--ease-out);
}

.fw-node:hover {
  transform: translateY(-3px);
}

.fw-node:hover .fw-box {
  border-color: var(--accent-70);
  box-shadow: 0 5px 15px rgba(255, 165, 0, 0.1);
  color: var(--t-100);
}

/* Pills Staggered Float & Glow */
.pill {
  transition: transform 0.25s var(--ease-out), border-color 0.25s, background-color 0.25s, color 0.25s, box-shadow 0.25s;
}

.pill:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 6px 15px rgba(255, 165, 0, 0.15);
  background: var(--accent-10);
  border-color: var(--accent);
  color: var(--t-100);
}

/* AI Path Slide & Flow Animations */
.ai-path-row {
  transition: transform 0.3s var(--ease-out), border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
}

.ai-path-row:hover {
  transform: translateX(6px);
  border-color: var(--accent-70);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 15px rgba(255, 165, 0, 0.1);
}

.ai-path-row:hover .ai-path-icon {
  color: var(--accent);
  opacity: 1;
  transform: scale(1.15);
}

.ai-path-icon {
  transition: color 0.3s, opacity 0.3s, transform 0.3s;
}

/* FAQ Hover Micro-Shifts */
.faq-item {
  transition: background-color 0.3s ease;
}

.faq-item:hover {
  background-color: rgba(255, 255, 255, 0.01);
}

/* ═══════════════════════════════════════════════
   LOCAL SEO SPECIFIC STYLES
   ═══════════════════════════════════════════════ */
.seo-border-list {
  list-style: none;
  border-left: 1px solid var(--accent-30);
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.seo-border-list li {
  font-family: var(--ff-body);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--t-75);
  line-height: 1.6;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--bd-8);
  transition: color 0.2s;
}
.seo-border-list li:last-child {
  border-bottom: none;
}
.seo-border-list li:hover {
  color: var(--t-100);
}

.ranking-statement {
  margin: 2rem 0 0;
  max-width: 580px;
  padding-left: 1.25rem;
  border-left: 3px solid var(--accent);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  font-weight: 400;
  color: var(--t-90);
  line-height: 1.75;
}

.dont-section {
  background: rgba(255, 255, 255, 0.025);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dont-list {
  list-style: none;
  margin-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.dont-list li {
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  font-weight: 400;
  color: var(--t-75);
  line-height: 1.8;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  max-width: 680px;
}
.dont-list li:last-child {
  border-bottom: none;
}
.dont-footer {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--t-50);
  line-height: 1.7;
  max-width: 640px;
  margin-top: 2rem;
}

.location-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.75rem;
  margin-bottom: 2rem;
}
.location-pill {
  padding: 0.375rem 1.125rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--bd-8);
  border-radius: 100px;
  font-family: var(--ff-mono);
  font-size: 0.78125rem;
  font-weight: 400;
  color: var(--t-75);
  transition: transform 0.25s var(--ease-out), border-color 0.25s, background-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.location-pill:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 6px 15px rgba(255, 165, 0, 0.15);
  background: var(--accent-10);
  border-color: var(--accent);
  color: var(--t-100);
}

.editorial-item {
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--bd-8);
  max-width: 680px;
}
.editorial-item:first-child {
  padding-top: 0;
}
.editorial-item:last-child {
  border-bottom: none;
}
.editorial-item strong {
  font-family: var(--ff-display);
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  font-weight: 500;
  color: var(--t-90);
  line-height: 1.3;
  display: block;
  margin-bottom: 0.125rem;
}
.editorial-item .h3 {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.875rem;
}
.editorial-item .h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
}
.working-closing {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--bd-8);
  max-width: 620px;
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  color: var(--t-75);
  line-height: 1.85;
  font-style: italic;
}
.proof-outcome {
  margin-top: 1.25rem;
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.bc-sep {
  color: var(--t-30);
}

@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .step{opacity:1;transform:none;transition:none}
  .fw-box,.flow-box,.cluster-card{transition:none}
  .steps-line{background:var(--bd-8)!important}
}


/* ==========================================================================
   WEBSITE OPTIMIZATION UNIQUE STYLES (MIGRATED & CONFLICT-RESOLVED)
   ========================================================================== */

/* ── Split-screen visual ── */
.split-visual {
  display:grid; grid-template-columns:1fr 1fr;
  gap:1px; background:var(--bd-5);
  border:1px solid var(--bd-8); border-radius:12px;
  overflow:hidden;
  opacity:0;
  transition:opacity 0.4s var(--ease-out);
}
.split-panel {
  display:flex; flex-direction:column;
}
.split-panel-left  { background:rgba(255,255,255,0.025); opacity:.45 }
.split-panel-right { background:rgba(255,255,255,0.055) }
.split-header {
  padding:.875rem 1.25rem;
  font-family:var(--ff-mono); font-size:.68rem;
  letter-spacing:.09em; text-transform:uppercase;
  border-bottom:1px solid var(--bd-5);
}
.split-panel-left  .split-header { color:var(--t-50) }
.split-panel-right .split-header {
  color:var(--accent);
  border-bottom-color:rgba(255,165,0,0.2);
}
.split-row {
  display:flex; align-items:stretch;
}
.split-cell {
  flex:1; padding:.75rem 1.25rem;
  border-bottom:1px solid var(--bd-5);
  font-size:.8125rem; font-weight:400; line-height:1.5;
}
.split-row:last-child .split-cell { border-bottom:none }
.split-cell-label {
  font-family:var(--ff-mono); font-size:.62rem;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--t-30); display:block; margin-bottom:.3rem;
}
.split-panel-left  .split-cell { color:var(--t-50) }
.split-panel-right .split-cell { color:var(--t-75) }

/* ═══════════════════════════════════════════════
   S2 — WHY WEBSITES LOSE CUSTOMERS
   ═══════════════════════════════════════════════ */
.problem-body{max-width:680px}

/* ═══════════════════════════════════════════════
   S3 — WHAT WEBSITE OPTIMIZATION MEANS
   ═══════════════════════════════════════════════ */
.def-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:5rem; align-items:start;
}
.border-list {
  list-style:none;
  border-left:2px solid var(--accent-20);
  padding-left:1.25rem;
}
.border-list li {
  font-family:var(--ff-body); font-size:.9375rem; font-weight:400;
  color:var(--t-75); line-height:1.7;
  padding:.625rem 0;
  border-bottom:1px solid var(--bd-5);
  transition:color .2s;
}
.border-list li:last-child { border-bottom:none }
.border-list li:hover { color:var(--t-100) }

/* ═══════════════════════════════════════════════
   S4 — SYSTEM FLOW DIAGRAM
   ═══════════════════════════════════════════════ */
.opt-flow {
  display:flex; align-items:center; justify-content:center;
  flex-wrap:nowrap; gap:0;
  margin:2.5rem auto 0; width:100%; max-width:var(--full-w);
  overflow-x:auto;
}
.opt-node { display:flex; align-items:center; flex-shrink:0 }
.opt-box {
  padding:.6rem .9rem;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:8px;
  font-family:var(--ff-display); font-size:.75rem; font-weight:500;
  color:var(--t-75); text-align:center; white-space:nowrap;
  transition: transform 0.3s var(--ease-out), border-color 0.3s, color 0.3s;
}
.opt-box.final {
  background:var(--accent-10); border-color:var(--accent-30);
  color:var(--accent-lt); font-weight:600;
}
.opt-arr {
  display:flex; align-items:center; flex-shrink:0;
  padding:0 .35rem;
}
.opt-arr svg { width:16px; height:10px; display:block }

/* ═══════════════════════════════════════════════
   S5 — PROCESS STEPS & COMPARISON
   ═══════════════════════════════════════════════ */
.process-steps { max-width:var(--text-w); margin:0 auto }
.ps-item {
  opacity:0; transform:translateY(20px);
  transition:opacity .42s var(--ease-out), transform .42s var(--ease-out);
}
.ps-item.in { opacity:1; transform:translateY(0) }
.ps-step-lbl {
  font-family:var(--ff-mono); font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin-bottom:.875rem; display:block;
}
.ps-item .h3 { margin-bottom:.875rem }
.ps-item .body { max-width:640px }
.ps-separator {
  border:none; border-top:1px solid var(--bd-5);
  margin:3.5rem 0;
}
.ps-item:last-child + .ps-separator { display:none }

/* Comparison interlude */
.cmp-interlude { margin:0 0 3.5rem }
.cmp-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:1px; background:var(--bd-8);
  border:1px solid var(--bd-8); border-radius:12px;
  overflow:hidden;
}
.cmp-header {
  padding:1rem 1.75rem;
  font-family:var(--ff-mono); font-size:.72rem;
  letter-spacing:.09em; text-transform:uppercase;
  border-bottom:1px solid var(--bd-8);
}
.cmp-col-dim .cmp-header  { color:var(--t-50) }
.cmp-col-full .cmp-header { color:var(--accent); border-bottom-color:var(--accent-30) }
.cmp-rows { display:contents }
.cmp-row  { display:grid; grid-template-columns:1fr 1fr }
.cmp-cell {
  padding:.875rem 1.75rem; font-size:.9rem;
  font-weight:400; line-height:1.5;
  border-bottom:1px solid var(--bd-5);
}
.cmp-row:last-child .cmp-cell { border-bottom:none }
.cmp-cell-dim  { background:var(--card);  color:var(--t-50); opacity:.65 }
.cmp-cell-full { background:rgba(255,255,255,0.02); color:var(--t-75) }

/* ═══════════════════════════════════════════════
   S7 — PROOF SECTION
   ═══════════════════════════════════════════════ */
.proof-block {
  max-width:640px; margin:0 auto; text-align:center;
}
.proof-sep {
  width:40px; height:1px; background:var(--bd-8);
  margin:2rem auto;
}
.proof-result {
  font-family:var(--ff-display); font-size:clamp(2.5rem,6vw,3.75rem);
  font-weight:700; color:var(--accent); line-height:1;
  letter-spacing:-0.02em;
}
.proof-result-label {
  font-family:var(--ff-mono); font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--t-50); margin-top:.5rem;
}
.proof-narrative {
  font-style:italic; font-size:.9375rem;
  color:var(--t-50); line-height:1.75; max-width:560px;
  margin:0 auto;
}

/* ═══════════════════════════════════════════════
   S8 — SCOPE STACKED CLUSTERS
   ═══════════════════════════════════════════════ */
.clusters-stack { max-width:var(--text-w); margin:0 auto }
.cluster-item {
  padding:3rem 0;
  border-bottom:1px solid var(--bd-5);
  transition: border-color 0.3s;
}
.cluster-item:first-child { padding-top:0 }
.cluster-item:last-child { border-bottom:none }
.cluster-item:hover {
  border-bottom-color: var(--accent-30);
}
.cluster-framing {
  font-size:clamp(.9375rem,1.4vw,1rem);
  font-weight:400; color:var(--t-75); line-height:1.75;
  margin:.875rem 0 1.25rem;
}
.cluster-list {
  list-style:none;
  border-left:1px solid rgba(255,255,255,0.08);
  padding-left:1.25rem;
  display:flex; flex-direction:column;
}
.cluster-list li {
  font-size:.9375rem; font-weight:400; color:var(--t-75);
  padding:.5rem 0; line-height:1.8;
  border-bottom:1px solid var(--bd-5);
  position: relative;
  padding-left: 1.25rem;
}
.cluster-list li::before {
  content: "✦";
  color: var(--accent);
  position: absolute;
  left: 0;
  font-size: 0.75rem;
}
.cluster-list li:last-child { border-bottom:none }

/* ═══════════════════════════════════════════════
   S9 — WHAT WE DO NOT DO
   ═══════════════════════════════════════════════ */
.dont-list-opt {
  list-style:none; margin-top:2rem;
  max-width:600px;
  border-top:1px solid var(--bd-5);
}
.dont-list-opt li {
  font-size:clamp(.9375rem,1.4vw,1.0625rem);
  font-weight:400; color:var(--t-75);
  line-height:2.0;
  padding:10px 0;
  border-bottom:1px solid var(--bd-5);
}
.dont-list-opt li:last-child { border-bottom:none }
.dont-standalone-opt {
  margin-top:2rem; padding-top:1.25rem;
  font-size:clamp(.9375rem,1.4vw,1.0625rem);
  font-weight:400; color:var(--t-75);
  line-height:2.0; max-width:600px;
}
.dont-close-opt {
  margin-top:1.5rem; max-width:600px;
  font-style:italic; font-size:.9375rem;
  font-weight:400; color:var(--t-50);
  line-height:1.75;
}

/* ═══════════════════════════════════════════════
   S10 — PILL TAGS
   ═══════════════════════════════════════════════ */
.pill-row {
  display:flex; flex-wrap:wrap; gap:.625rem;
  margin-top:1.75rem; margin-bottom:2rem;
}
.pill {
  padding:.375rem 1.125rem;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:100px;
  font-family:var(--ff-body); font-size:.8125rem; font-weight:400;
  color:var(--t-75);
  transition: border-color 0.25s var(--ease-out), background-color 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.pill:hover {
  border-color:var(--accent);
  background: var(--accent-10);
  color: var(--t-100);
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 6px 15px rgba(255, 165, 0, 0.15);
}

/* ═══════════════════════════════════════════════
   S11 — WORKING TOGETHER
   ═══════════════════════════════════════════════ */
.working-close-lines {
  margin-top:2.5rem; padding-top:2rem;
  border-top:1px solid var(--bd-5);
  max-width:640px;
}
.just-line {
  font-size:clamp(.9375rem,1.4vw,1.0625rem);
  color:var(--t-75); line-height:2.0; display:block;
}
.just-line .acc-word { color:var(--accent); font-weight: 600; }

/* ═══════════════════════════════════════════════
   S12 — AI SEARCH
   ═══════════════════════════════════════════════ */
.ai-diagram-opt {
  display:flex; flex-direction:column;
  gap:.5rem; max-width:480px;
  margin:2.5rem auto 0;
}
.ai-row-opt {
  display:grid; grid-template-columns:1fr auto auto;
  align-items:center; gap:1rem;
  padding:.75rem 1.25rem;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--bd-8); border-radius:8px;
  transition: transform 0.3s var(--ease-out), border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
}
.ai-row-opt:hover {
  transform: translateX(6px);
  border-color: var(--accent-70);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 15px rgba(255, 165, 0, 0.1);
}
.ai-src-opt {
  font-size:.875rem; font-weight:400; color:var(--t-75);
}
.ai-arrow-opt {
  font-family:var(--ff-mono); font-size:.7rem; color:var(--t-30);
}
.ai-outcome-opt {
  font-family:var(--ff-display); font-size:.875rem;
  font-weight:600; color:var(--accent-lt);
  white-space:nowrap;
}

/* ═══════════════════════════════════════════════
   FAQ accordion
   ═══════════════════════════════════════════════ */
.faq-wrap { max-width:740px; margin:0 auto }
.faq-list { border-top:1px solid var(--bd-8) }
.faq-item { border-bottom:1px solid var(--bd-8); transition: background-color 0.3s; }
.faq-item:hover { background-color: rgba(255, 255, 255, 0.01); }
.faq-btn {
  width:100%; display:flex; align-items:center;
  justify-content:space-between;
  padding:1.375rem 0; text-align:left; gap:2rem;
  background:none; border:none; transition:opacity .2s;
}
.faq-btn:hover { opacity:.85 }
.faq-q {
  font-family:var(--ff-display); font-size:1.0625rem;
  font-weight:500; color:var(--t-100); line-height:1.4;
}
.faq-ico {
  flex-shrink:0; width:22px; height:22px; border-radius:50%;
  border:1px solid var(--bd-8); position:relative;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s, background .2s;
}
.faq-ico::before,.faq-ico::after {
  content:''; position:absolute; background:var(--t-75);
  transition:transform .25s var(--ease-out), background .2s, opacity .2s;
}
.faq-ico::before { width:8px; height:1px }
.faq-ico::after  { width:1px; height:8px }
.faq-item.open .faq-ico { border-color:var(--accent); background:var(--accent-10) }
.faq-item.open .faq-ico::before { background:var(--accent) }
.faq-item.open .faq-ico::after { background:var(--accent); transform:scaleY(0) }
.faq-body {
  overflow:hidden; max-height:0;
  transition:max-height .28s var(--ease-out);
}
.faq-body-inner {
  padding:0 0 1.5rem 0;
  font-size:clamp(.9375rem,1.4vw,1rem);
  font-weight:400; color:var(--t-75); line-height:1.75;
  max-width:680px;
}

/* ═══════════════════════════════════════════════
   CLOSING CTA
   ═══════════════════════════════════════════════ */
.cta-close {
  text-align:center;
  max-width:560px; margin:0 auto;
}

/* ═══════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════ */
footer { border-top:1px solid var(--bd-8); padding:2.5rem 0 }
.ftr-inner {
  display:flex; align-items:center;
  justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.ftr-brand {
  font-family:var(--ff-display); font-size:1.0625rem;
  font-weight:700; letter-spacing:-0.02em; color:var(--t-50);
}
.ftr-brand .acc { color:var(--accent) }
.ftr-links { display:flex; gap:1.5rem; list-style:none; flex-wrap:wrap }
.ftr-links a {
  font-family:var(--ff-mono); font-size:.7rem;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--t-30); transition:color .2s;
}
.ftr-links a:hover { color:var(--t-75) }
.ftr-copy {
  font-family:var(--ff-mono); font-size:.68rem;
  letter-spacing:.05em; color:var(--t-30);
}

/* ═══════════════════════════════════════════════
   S13  AI SEARCH (elevated)
   Simple three-source discovery visual
   ═══════════════════════════════════════════════ */
.ai-discovery {
  max-width: 520px;
  margin: 2.5rem auto 0;
}
.ai-sources {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.ai-source-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--bd-8);
  border-radius: 8px;
}
.ai-source-label {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--t-75);
  flex: 1;
}
.ai-source-arr {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  color: var(--t-30);
}
.ai-outcome {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.25rem;
  background: var(--accent-10);
  border: 1px solid var(--accent-30);
  border-radius: 8px;
  font-family: var(--ff-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-lt);
  text-align: center;
}

/* ═══════════════════════════════════════════════
   KEYFRAMES FOR ANIMATIONS
   ═══════════════════════════════════════════════ */
@keyframes shine {
  0% { left: -150%; }
  50% { left: 100%; }
  100% { left: 150%; }
}
@keyframes pulse-orange {
  0% { box-shadow: 0 0 8px rgba(255, 165, 0, 0.15); border-color: rgba(255, 165, 0, 0.3); }
  50% { box-shadow: 0 0 20px rgba(255, 165, 0, 0.5); border-color: rgba(255, 165, 0, 0.8); }
  100% { box-shadow: 0 0 8px rgba(255, 165, 0, 0.15); border-color: rgba(255, 165, 0, 0.3); }
}
.opt-box.final, .flow-box.final {
  animation: pulse-orange 3s infinite ease-in-out;
}

/* Staggered node hover effects */
.opt-node {
  transition: transform 0.3s var(--ease-out);
}
.opt-node:hover {
  transform: translateY(-3px);
}
.opt-node:hover .opt-box {
  border-color: var(--accent);
  box-shadow: 0 5px 15px rgba(255, 165, 0, 0.1);
  color: var(--t-100);
}

/* ═══════════════════════════════════════════════
   RESPONSIVE DESIGN BREAKPOINTS
   ═══════════════════════════════════════════════ */
@media (max-width:960px) {
  /* Nav */
  .nav-links,.nav-cta { display:none }
  .hbg                { display:flex }

  /* Wrap padding */
  .wrap,.wrap-text,.wrap-body { padding:0 1.75rem }

  /* Spacing */
  .sp   { padding:72px 0 }
  .sp-sm{ padding:48px 0 }
  .sp-lg{ padding:88px 0 }

  /* Hero */
  .hero {
    grid-template-columns:1fr;
    gap:3rem;
    padding:8rem 1.75rem 5rem;
    min-height:auto;
  }
  .hero-left { max-width:100% }
  .hero-ctas   { flex-direction:column; align-items:stretch }
  .btn-primary { width:100%; justify-content:center; white-space:normal; text-align:center }

  /* Split visual */
  .split-visual       { grid-template-columns:1fr; gap:0 }
  .split-panel-left   { display:none }

  /* Def grid */
  .def-grid { grid-template-columns:1fr; gap:2.5rem }

  /* Flow diagram becomes vertical */
  .opt-flow { flex-direction:column; overflow-x:visible; gap: 0.375rem; }
  .opt-arr  { transform:rotate(90deg); padding:.2rem 0 }
  .opt-node { flex-shrink:1; width: 100%; justify-content: center; }
  .opt-box { min-width: 150px; }

  /* Comparison grid column stacking */
  .cmp-grid { grid-template-columns:1fr }
  .cmp-row   { grid-template-columns:1fr }
  .cmp-col-dim .cmp-header { display:none }
  .cmp-cell-dim           { display:none }
  .cmp-grid::before {
    content:'Structured website experience';
    display:block;
    font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.09em;
    text-transform:uppercase; color:var(--accent);
    padding:1rem 1.75rem; border-bottom:1px solid var(--accent-30);
    background:var(--card);
  }

  /* Process steps and details */
  .clusters-stack,.process-steps,.faq-wrap { max-width:100% }
  .dont-list-opt,.dont-standalone-opt,.dont-close-opt  { max-width:100% }

  /* Footer stack */
  .ftr-inner { flex-direction:column; align-items:flex-start; gap:1.5rem }
  .ai-diagram-opt { max-width:100% }
  .ai-row-opt     { grid-template-columns:1fr auto }
}

@media (max-width:640px) {
  .hero { padding:6.5rem 1.25rem 3.5rem }
  .h1 { font-size:clamp(1.7rem,7vw,2.2rem) }
  .h2 { font-size:clamp(1.25rem,5.5vw,1.75rem) }
  .trust-bar { flex-direction:column; align-items:flex-start; gap:.5rem }
  .tb-item::before { display:none }
  .pill-row { gap:.4rem }
  .proof-result { font-size:2.5rem }
  .ai-row-opt { grid-template-columns:1fr; gap:.5rem }
  .ai-outcome-opt { text-align:left }
  .split-visual     { display:flex; flex-direction:column }
  .split-panel-left { display:flex; opacity:.45 }
  .ftr-links { gap:1.25rem }
  .just-line { font-size:.9375rem }
}

@media (prefers-reduced-motion:reduce) {
  .rv,.rv-fade,.ps-item { opacity:1 !important; transform:none !important; transition:none !important }
  .opt-node { transform: none !important; transition: none !important; }
  .pill:hover { transform: none !important; box-shadow: none !important; }
  .ai-row-opt:hover { transform: none !important; }
}

/* ── Heading Subheadings (.lbl) ── */
.lbl {
  font-family: var(--ff-display);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.lbl::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
  flex-shrink: 0;
}
.lbl-center {
  justify-content: center;
}
.lbl-center::before {
  display: block;
}
.lbl-center::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
  flex-shrink: 0;
}
.lbl-muted {
  color: var(--t-50);
}
.lbl-muted::before, .lbl-muted::after {
  background: currentColor;
}

/* ── Pull Quotes (.pq, .pq-center, .pq-featured) ── */
.pq {
  border-left: 3px solid var(--accent);
  padding-left: 1.25rem;
  margin: 2.25rem 0;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  line-height: 1.75;
  color: var(--t-100);
}
.pq-center {
  border-left: 3px solid var(--accent);
  padding-left: 1.25rem;
  margin: 2.5rem auto;
  max-width: 640px;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.7;
  color: var(--t-100);
}
.pq-featured {
  border-left: 3px solid var(--accent);
  padding-left: 1.5rem;
  margin: 2.75rem 0;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.75;
  color: var(--t-100);
  max-width: 700px;
}

/* ═══════════════════════════════════════════════
   SMM HORIZONTAL FLOW DIAGRAM OVERRIDES
   ═══════════════════════════════════════════════ */
.smm-framework {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0;
  margin: 2.5rem auto 0;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}
.smm-node {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-out);
}
.smm-node:hover {
  transform: translateY(-3px);
}
.smm-box {
  padding: 0.75rem 1.125rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--bd-8);
  border-radius: 10px;
  font-family: var(--ff-display);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--t-75);
  white-space: nowrap;
  text-align: center;
  transition: border-color 0.3s, box-shadow 0.3s, color 0.3s;
}
.smm-box.final {
  background: var(--accent-10);
  border-color: var(--accent-30);
  color: var(--accent-lt);
  font-weight: 600;
}
.smm-node:hover .smm-box {
  border-color: var(--accent);
  box-shadow: 0 5px 15px rgba(255, 165, 0, 0.1);
  color: var(--t-100);
}
.smm-arrow {
  padding: 0 0.4rem;
  flex-shrink: 0;
}
.smm-arrow svg {
  width: 18px;
  height: 11px;
  display: block;
}

/* SMM Responsive diagram layout (collapses to vertical on tablet/mobile) */
@media (max-width: 960px) {
  .smm-framework {
    flex-direction: column;
    overflow-x: visible;
    gap: 0.375rem;
  }
  .smm-arrow {
    transform: rotate(90deg);
    padding: 0.2rem 0;
  }
  .smm-node {
    flex-shrink: 1;
    width: 100%;
    justify-content: center;
  }
  .smm-box {
    min-width: 150px;
  }
}

/* ═══════════════════════════════════════════════
   SMM HERO & ALIGNMENT OVERRIDES (SAME TO SAME LAYOUT AS TEMPLATE)
   ═══════════════════════════════════════════════ */
.hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  max-width: 780px !important;
  margin: 0 auto !important;
  min-height: 100svh !important;
  padding: 130px 2.5rem 96px !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

.hero-bc {
  margin-bottom: 2.5rem !important;
}

.hero .label {
  justify-content: center !important;
}

.hero .label::before {
  display: block !important;
}

.hero .label::after {
  content: '' !important;
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  background: currentColor !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

.hero-byline {
  font-family: var(--ff-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: var(--t-50) !important;
  margin-top: 1.5rem !important;
}

.hero-body {
  max-width: 580px !important;
  margin: 2rem auto !important;
}

.hero-body p + p {
  margin-top: 1.25rem !important;
}

.hero-ctas {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1rem !important;
  margin-top: 0 !important;
  width: 100% !important;
}

.trust-bar {
  margin-top: 2.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  font-family: var(--ff-mono) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: var(--t-50) !important;
  gap: 0 !important;
  row-gap: 0.5rem !important;
}

.trust-bar-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.trust-bar-item::before {
  display: none !important;
}

.trust-bar-sep {
  color: var(--accent) !important;
  font-size: 1.125rem !important;
  margin: 0 0.75rem !important;
  line-height: 1 !important;
  display: inline !important;
}

.proof-strip {
  margin-top: 1.5rem !important;
  font-size: 0.875rem !important;
  font-style: italic !important;
  color: var(--t-50) !important;
  line-height: 1.75 !important;
  max-width: 520px !important;
  text-align: center !important;
}

/* Proof Section alignment */
.proof-inner {
  max-width: 600px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.proof-metric {
  font-family: var(--ff-display) !important;
  font-size: clamp(2.5rem, 5vw, 3.5rem) !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  margin: 1.25rem 0 0.5rem !important;
}

.proof-metric-label {
  font-family: var(--ff-mono) !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  color: var(--t-50) !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 1.5rem !important;
}

/* Responsive Alignment */
@media (max-width: 820px) {
  .hero {
    padding: 100px 1.5rem 64px !important;
    min-height: auto !important;
    text-align: left !important;
    align-items: flex-start !important;
  }
  .hero-body {
    text-align: left !important;
    margin-left: 0 !important;
  }
  .hero .bc, .hero .label {
    justify-content: flex-start !important;
  }
  .hero .label::before {
    display: block !important;
  }
  .hero .label::after {
    display: none !important;
  }
  .hero-ctas {
    align-items: flex-start !important;
  }
  .trust-bar {
    justify-content: flex-start !important;
  }
  .proof-strip {
    text-align: left !important;
    max-width: 100% !important;
  }
  .closing-cta {
    padding: 72px 0 !important;
  }
  .closing-cta-inner {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    text-align: left !important;
  }
  .closing-cta-inner .body {
    margin-left: 0 !important;
  }
  .closing-cta .h2 {
    text-align: left !important;
  }
  .proof-inner {
    text-align: left !important;
  }
}

/* ═══════════════════════════════════════════════
   SMM WRAP-PROSE & BLOCK CENTERING OVERRIDES
   ═══════════════════════════════════════════════ */
:root {
  --prose-width: 660px !important;
}

.wrap-prose {
  max-width: var(--prose-width) !important;
  margin: 0 auto !important;
  padding: 0 2.5rem !important;
}

.process-blocks, .service-clusters, .working-items, .no-lines {
  max-width: var(--prose-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ensure centering on S2, S6, S7, S11 headers and bodies */
.sp .wrap-prose {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ═══════════════════════════════════════════════
   SMM S9-S13 EXTENDED LAYOUTS & STYLES
   ═══════════════════════════════════════════════ */
:root {
  --bd-6: rgba(255, 255, 255, 0.06) !important;
  --lh-body: 1.8 !important;
}

/* ═══════════════════════════════════════════════
   S9  WHAT WE WORK ON (stacked, no cards)
   H3 left-accent treatment + separator lists
   ═══════════════════════════════════════════════ */
.service-clusters {
  max-width: var(--prose-width);
  margin: 2.5rem auto 0;
}
.service-cluster {
  padding: 2.5rem 0;
}
.service-cluster + .service-cluster {
  border-top: 1px solid var(--bd-6);
}
.service-cluster .step-h3 {
  margin-bottom: 1rem;
}
.cluster-intro {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--t-75);
  line-height: var(--lh-body);
  margin-bottom: 1.25rem;
}
/* List: no bullets, separator lines per spec - lighter */
.cluster-list {
  list-style: none;
}
.cluster-list li {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--t-75);
  line-height: 1.8;
  padding: 0.625rem 0 0.625rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  position: relative;
}
.cluster-list li:last-child {
  border-bottom: none;
}

/* ═══════════════════════════════════════════════
   S10  WHAT WE DON'T DO
   Lines with 2.0 line height - measured, deliberate
   ═══════════════════════════════════════════════ */
.dont-list {
  list-style: none;
  max-width: 580px;
  margin: 2rem 0 0;
}
.dont-list li {
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  font-weight: 400;
  color: var(--t-75);
  line-height: 2.0;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--bd-6);
}
.dont-list li:last-child {
  border-bottom: none;
}
.dont-closing {
  margin-top: 2.5rem;
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  color: var(--t-50);
  line-height: 1.8;
  max-width: 560px;
}

/* ═══════════════════════════════════════════════
   S11  LOCAL / SME (pills)
   ═══════════════════════════════════════════════ */
.type-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.75rem;
  margin-bottom: 2rem;
}
.type-pill {
  padding: 0.375rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--bd-8);
  border-radius: 100px;
  font-family: var(--ff-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--t-75);
}

/* ═══════════════════════════════════════════════
   S12  WORKING TOGETHER
   Three editorial items + no lines prose
   ═══════════════════════════════════════════════ */
.working-items {
  max-width: var(--prose-width);
  margin: 0 auto;
}
.working-item {
  padding: 2.25rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.working-item:first-child {
  padding-top: 0;
}
.working-item:last-child {
  border-bottom: none;
}
.working-item .step-h3 {
  margin-bottom: 0.875rem;
}
/* The "No" lines */
.no-lines {
  max-width: var(--prose-width);
  margin: 2.5rem auto 0;
}
.no-line {
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  font-weight: 400;
  color: var(--t-75);
  line-height: 1.8;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--bd-6);
}
.no-line:last-child {
  border-bottom: none;
  margin-top: 0.5rem;
}

/* H3 with left accent bar treatment */
.step-h3 {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 1.125rem;
}
.step-h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
}