/* =====================================================================
   360 HOTEL SOLUTIONS — seo.css
   Page-specific styles for the SEO solution page.
   Reuses the global theme (tokens, header, footer, .flow-step, .why,
   .results, .final-cta). Responsive rules at the bottom.
   ===================================================================== */

/* ===== GENERIC SUB-PAGE SECTION ===== */
.seo-section{padding:90px 0;background:var(--white);}
.seo-section.tint-cyan{background:var(--tint-cyan);}
.seo-section.tint-purple{background:var(--tint-purple);}

/* ===== HERO — Google local pack (SERP) mock ===== */
.seo-hero .hero-sub{max-width:520px;}
.seo-hero .hero-pills{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:470px;}

.seo-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:500px;padding:0 26px;}
.seo-serp{width:100%;max-width:404px;background:#fff;border-radius:18px;border:1px solid var(--gray);box-shadow:0 44px 90px -32px rgba(2,15,77,0.45);overflow:hidden;position:relative;z-index:2;}
.seo-serp-bar{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--gray);}
.seo-wordmark{font-size:17px;font-weight:700;letter-spacing:-0.5px;flex-shrink:0;}
.seo-wordmark .b{color:#4285F4;} .seo-wordmark .r{color:#EA4335;} .seo-wordmark .y{color:#FBBC05;} .seo-wordmark .g{color:#34A853;}
.seo-search{flex:1;background:var(--bg);border:1px solid var(--gray);border-radius:100px;padding:7px 14px;font-size:12px;color:var(--navy);display:flex;align-items:center;gap:8px;}
.seo-search svg{width:13px;height:13px;color:var(--blue);flex-shrink:0;}
.seo-serp-body{padding:13px 16px 16px;}
.seo-ad{padding-bottom:12px;border-bottom:1px solid var(--gray);margin-bottom:13px;}
.seo-ad-tag{font-size:10.5px;font-weight:800;color:#202124;}
.seo-ad-title{font-size:13px;color:#1a0dab;font-weight:600;margin:2px 0;}
.seo-ad-url{font-size:10.5px;color:var(--muted);}
.seo-map{height:108px;border-radius:10px;overflow:hidden;position:relative;margin-bottom:6px;border:1px solid var(--gray);}
.seo-map svg{width:100%;height:100%;display:block;}
.seo-map-pin{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);}
.seo-map-pin svg{width:26px;height:26px;}
.seo-local{display:flex;flex-direction:column;}
.seo-lrow{display:flex;align-items:center;gap:11px;padding:10px 2px;border-top:1px solid var(--gray);}
.seo-lrow.you{background:var(--tint-blue);border-radius:8px;border-top-color:transparent;padding:10px;margin-top:2px;}
.seo-lpin{width:22px;height:22px;border-radius:50%;background:var(--gray);color:var(--muted);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.seo-lrow.you .seo-lpin{background:var(--grad);color:#fff;}
.seo-lname{flex:1;font-size:12.5px;font-weight:700;color:var(--navy);line-height:1.25;}
.seo-lname small{display:block;font-size:10.5px;color:var(--muted);font-weight:500;margin-top:2px;}
.seo-lname .st{color:#fbbc04;}
.seo-ltag{font-size:9px;font-weight:800;color:#16a34a;background:rgba(22,163,74,0.12);padding:3px 8px;border-radius:5px;white-space:nowrap;}

/* floating stat badges over the SERP */
.seo-badge{position:absolute;z-index:3;background:#fff;border-radius:14px;padding:10px 14px;box-shadow:0 16px 36px -12px rgba(2,15,77,0.26);display:flex;align-items:center;gap:9px;white-space:nowrap;opacity:0;animation:float-in .6s ease forwards;}
.seo-badge .i{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.seo-badge .i svg{width:15px;height:15px;}
.seo-badge .num{font-size:15px;font-weight:800;line-height:1;}
.seo-badge .lbl{font-size:10px;color:var(--muted);font-weight:600;margin-top:2px;}
.seo-badge.b1{top:9%;left:-8px;animation-delay:.5s;} .seo-badge.b1 .i{background:rgba(52,168,83,0.14);color:#34A853;}
.seo-badge.b2{bottom:8%;right:-8px;animation-delay:.9s;} .seo-badge.b2 .i{background:rgba(14,99,255,0.1);color:var(--blue);}

/* ===== NAVY BAND — paid-boost → organic-takeover chart (reuses .why) ===== */
.seo-chart{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:20px;}
.seo-chart-title{color:#fff;font-size:13px;font-weight:700;margin-bottom:18px;}
.seo-chart-bars{display:flex;align-items:flex-end;gap:16px;height:170px;}
.seo-bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;}
.seo-bar .seg{border-radius:5px;width:100%;}
.seo-bar .org{background:var(--grad);}
.seo-bar .spo{background:rgba(123,46,255,0.5);}
.seo-bar .lbl{text-align:center;font-size:10px;color:var(--muted-light);font-weight:600;margin-top:7px;}
.seo-bar .o1{height:22px;} .seo-bar .o2{height:46px;} .seo-bar .o3{height:74px;} .seo-bar .o4{height:104px;}
.seo-bar .s1{height:54px;} .seo-bar .s2{height:36px;} .seo-bar .s3{height:18px;} .seo-bar .s4{height:8px;}
.seo-legend{display:flex;gap:18px;margin-top:16px;}
.seo-leg{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted-light);font-weight:600;}
.seo-leg .dot{width:11px;height:11px;border-radius:3px;}
.seo-leg .dot.org{background:var(--grad);} .seo-leg .dot.spo{background:rgba(123,46,255,0.6);}

/* ===== FEATURE GRID (reuses .flow-step card styling) ===== */
.seo-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

/* ===== CHANNELS → DIRECT FLOW ===== */
.seo-flow{display:flex;align-items:stretch;justify-content:center;gap:16px;flex-wrap:wrap;}
.seo-flow-card{flex:1 1 240px;max-width:320px;background:#fff;border:1px solid var(--gray);border-radius:18px;padding:22px;box-shadow:0 20px 44px -24px rgba(2,15,77,0.18);}
.seo-flow-card.result{background:var(--navy);border-color:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;}
.seo-flow-arrow{display:flex;align-items:center;color:var(--muted-light);flex-shrink:0;}
.seo-flow-arrow svg{width:24px;height:24px;}
.seo-flow-title{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--blue);margin-bottom:14px;}
.seo-flow-item{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--navy);font-weight:600;padding:7px 0;}
.seo-flow-item svg{width:16px;height:16px;color:var(--blue);flex-shrink:0;}
.seo-flow-card.result .big{font-size:21px;font-weight:800;color:#fff;line-height:1.2;}
.seo-flow-card.result .sub{font-size:12.5px;color:var(--cyan);font-weight:700;}
.seo-flow-card.result .ic{width:46px;height:46px;border-radius:13px;background:var(--grad);display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.seo-flow-card.result .ic svg{width:24px;height:24px;color:#fff;}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:920px){
  .seo-section{padding:56px 0;}
  .seo-visual{min-height:auto;padding:8px 0 0;}
  .seo-feature-grid{grid-template-columns:1fr 1fr;}
  .seo-badge.b1{left:-2px;} .seo-badge.b2{right:-2px;}
  .seo-flow{flex-direction:column;align-items:center;}
  .seo-flow-card{width:100%;max-width:420px;flex:none;}
  .seo-flow-arrow{transform:rotate(90deg);}
}

@media(max-width:640px){
  .seo-feature-grid{grid-template-columns:1fr;}
  .seo-badge{display:none;}
}