/* =================================================================
   Industry SEO — reusable template CSS
   Loaded on pages using the "Industry SEO" template.
   ================================================================= */

/* -- HERO -------------------------------------------------------- */
.ind-hero{position:relative;padding:40px 0 120px;overflow:hidden;background:var(--obsidian);}
.ind-hero > .container{position:relative;z-index:1;}
.ind-hero::before{content:'';position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 50% 70% at 85% 30%,rgba(22,192,183,0.08) 0%,transparent 60%),
    radial-gradient(ellipse 40% 60% at 10% 80%,rgba(33,62,89,0.25) 0%,transparent 60%);}
.ind-hero.hero-has-image{background-size:cover;background-position:center;}
.ind-hero.hero-has-image::before{
  background:
    linear-gradient(180deg,rgba(5,11,18,0.95) 0%,rgba(5,11,18,0.85) 30%,rgba(5,11,18,0.7) 55%,rgba(5,11,18,0.88) 100%),
    radial-gradient(ellipse 70% 50% at 50% 40%,rgba(22,192,183,0.06),transparent 60%);}
.ind-hero-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center;position:relative;z-index:1;}
.ind-hero-grid.ind-hero-solo{grid-template-columns:1fr;max-width:760px;}
.ind-hero-h1{font-size:clamp(38px,4vw,60px);font-weight:900;line-height:1.05;letter-spacing:-1.5px;margin-bottom:20px;}
.ind-hero-p{font-size:18px;color:var(--muted);line-height:1.75;margin-bottom:28px;max-width:480px;}
.ind-hero-proof{display:flex;align-items:center;gap:12px;margin-bottom:28px;padding:10px 18px;background:rgba(22,192,183,0.06);border:1px solid rgba(22,192,183,0.15);border-radius:40px;width:fit-content;}
.ind-hero-proof i{color:var(--teal);font-size:14px;}
.ind-hero-proof span{font-size:13px;font-weight:600;color:rgba(248,250,252,0.8);}
.ind-hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;}

/* -- SERP MOCKUP — interactive before/after ---------------------- */
.ind-serp-wrap{position:relative;}
.ind-serp{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,0.6),0 0 0 1px rgba(0,0,0,0.08);font-family:Arial,sans-serif;color:#202124;}
.ind-gbar{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid #ebebeb;}
.ind-glogo{font-size:20px;font-weight:700;letter-spacing:-1px;}
.ind-glogo span:nth-child(1){color:#4285f4;}.ind-glogo span:nth-child(2){color:#ea4335;}.ind-glogo span:nth-child(3){color:#fbbc04;}.ind-glogo span:nth-child(4){color:#4285f4;}.ind-glogo span:nth-child(5){color:#34a853;}.ind-glogo span:nth-child(6){color:#ea4335;}
.ind-searchbox{flex:1;background:#fff;border:1px solid #dfe1e5;border-radius:22px;padding:8px 14px;display:flex;align-items:center;gap:8px;font-size:13px;color:#202124;font-weight:500;}
.ind-searchbox i{color:#9aa0a6;font-size:12px;}
.ind-tabs{display:flex;gap:18px;padding:0 20px;font-size:11px;color:#5f6368;font-weight:600;border-bottom:1px solid #ebebeb;}
.ind-tabs span{padding:8px 0;}
.ind-tabs span.active{color:#1a73e8;border-bottom:3px solid #1a73e8;margin-bottom:-1px;}

/* Map area */
.ind-map{height:120px;background:linear-gradient(135deg,#e8f0e4 0%,#dce8e2 100%);position:relative;border-bottom:1px solid #ebebeb;overflow:hidden;}
.ind-map::before{content:'';position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(200,230,201,0.4) 1px,transparent 1px),
  linear-gradient(rgba(200,230,201,0.4) 1px,transparent 1px);background-size:40px 40px;}
.ind-pin{position:absolute;font-size:24px;color:#ea4335;filter:drop-shadow(0 3px 6px rgba(0,0,0,0.3));transition:all 0.6s cubic-bezier(0.16,1,0.3,1);}
.ind-pin.you{color:var(--teal);font-size:30px;filter:drop-shadow(0 3px 10px rgba(22,192,183,0.5));z-index:2;}

/* Results list */
.ind-results{padding:0;min-height:380px;display:flex;flex-direction:column;transition:opacity 0.28s ease,transform 0.28s ease;}
.ind-results.ind-results-exit{opacity:0;transform:translateY(8px);}
.ind-result{display:grid;grid-template-columns:32px 1fr auto;gap:14px;padding:14px 18px;border-bottom:1px solid #ebebeb;transition:all 0.6s cubic-bezier(0.16,1,0.3,1);position:relative;}
.ind-result:last-child{border-bottom:none;}
.ind-rank{font-size:14px;font-weight:700;color:#5f6368;display:flex;align-items:flex-start;padding-top:2px;transition:all 0.4s;}
.ind-name{font-size:15px;font-weight:600;color:#1a0dab;line-height:1.3;margin-bottom:3px;transition:color 0.3s;}
.ind-stars{display:flex;align-items:center;gap:4px;font-size:12px;color:#fbbc04;margin-bottom:2px;}
.ind-stars span{color:#70757a;font-weight:400;}
.ind-meta-line{font-size:12px;color:#70757a;}
.ind-meta-line i{font-size:9px;margin-right:4px;}
.ind-badge{align-self:center;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:0.5px;padding:4px 10px;border-radius:4px;opacity:0;transition:opacity 0.3s 0.4s;}

/* After state — your business at #1 */
.ind-result.client-after{background:rgba(22,192,183,0.08);border-left:3px solid var(--teal);}
.ind-result.client-after .ind-rank{color:var(--teal);font-weight:900;}
.ind-result.client-after .ind-name{color:var(--teal);font-weight:800;}
.ind-result.client-after .ind-badge{opacity:1;background:var(--teal);color:#050b12;}

/* Before state divider + buried result */
.ind-divider{padding:12px 18px;background:repeating-linear-gradient(-45deg,#fef7f0,#fef7f0 8px,#fff 8px,#fff 16px);font-size:10px;font-weight:800;color:#ea4335;text-transform:uppercase;letter-spacing:1.5px;border-top:2px dashed #ea4335;border-bottom:2px dashed #ea4335;display:flex;align-items:center;justify-content:center;gap:8px;}
.ind-result.client-before{background:rgba(234,67,53,0.08);border-left:4px solid #ea4335;position:relative;animation:indPulseBefore 2s ease-in-out infinite;}
@keyframes indPulseBefore{0%,100%{background:rgba(234,67,53,0.08);}50%{background:rgba(234,67,53,0.16);}}
.ind-result.client-before .ind-rank{color:#ea4335;font-weight:900;font-size:15px;}
.ind-result.client-before .ind-name{color:#ea4335;font-weight:800;}
.ind-arrow-label{position:absolute;left:-8px;top:50%;transform:translateY(-50%);background:#ea4335;color:#fff;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap;padding:3px 8px;border-radius:3px;writing-mode:vertical-rl;text-orientation:mixed;}

/* -- SERVICE CARDS (light section) ------------------------------- */
.ind-included{padding:120px 0;position:relative;z-index:2;background:#f4f7fb;color:#0a1220;}
.ind-included::before,.ind-included::after{content:'';position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(22,192,183,0.5) 50%,transparent 100%);pointer-events:none;}
.ind-included::before{top:0;}.ind-included::after{bottom:0;}
.ind-included-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:56px;flex-wrap:wrap;gap:20px;}
.ind-included-head h2{font-size:clamp(30px,3.4vw,46px);font-weight:900;letter-spacing:-0.5px;max-width:560px;line-height:1.1;color:#0a1220;}
.ind-included-head .btn-ghost{background:transparent;color:#0a1220;border:2px solid rgba(10,18,32,0.2);}
.ind-included-head .btn-ghost:hover{border-color:var(--teal);color:var(--teal);}
.ind-included-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.ind-inc-card{background:#fff;border:1px solid rgba(10,18,32,0.08);border-radius:16px;padding:32px 28px;transition:transform 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease;box-shadow:0 2px 6px rgba(10,18,32,0.04);}
.ind-inc-card:hover{border-color:rgba(22,192,183,0.4);transform:translateY(-4px);box-shadow:0 20px 40px rgba(10,18,32,0.08);}
.ind-inc-hex{width:52px;height:60px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:rgba(22,192,183,0.14);display:flex;align-items:center;justify-content:center;color:var(--teal);font-size:22px;margin-bottom:20px;transition:all 0.3s;}
.ind-inc-card:hover .ind-inc-hex{background:var(--teal);color:#050b12;}
.ind-inc-card h3{font-size:18px;font-weight:800;margin-bottom:10px;color:#0a1220;}
.ind-inc-card p{font-size:14px;color:#52647a;line-height:1.65;}

/* -- PAIN POINTS ------------------------------------------------- */
.ind-pain{padding:120px 0;background:var(--surface);position:relative;z-index:2;overflow:hidden;}
.ind-pain::before{content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(239,68,68,0.04) 1px,transparent 0);
  background-size:24px 24px;
  mask-image:radial-gradient(ellipse 60% 60% at 30% 50%,#000 40%,transparent 90%);
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 30% 50%,#000 40%,transparent 90%);}
.ind-pain-wrap{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.4fr;gap:60px;align-items:flex-start;}
.ind-pain-left{position:sticky;top:100px;}
.ind-pain-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:900;letter-spacing:2.4px;text-transform:uppercase;color:#f87171;margin-bottom:18px;}
.ind-pain-left h2{font-size:clamp(34px,3.8vw,52px);font-weight:900;letter-spacing:-1px;line-height:1.02;margin-bottom:20px;}
.ind-pain-left h2 em{font-style:normal;color:#f87171;position:relative;white-space:nowrap;}
.ind-pain-left h2 em::after{content:'';position:absolute;left:-4px;right:-4px;top:50%;height:3px;background:#f87171;transform:rotate(-2deg);}
.ind-pain-cta{display:flex;align-items:center;gap:18px;padding:22px 28px;background:rgba(22,192,183,0.08);border:1px solid rgba(22,192,183,0.25);border-radius:14px;text-decoration:none;transition:all 0.3s;max-width:440px;}
.ind-pain-cta:hover{border-color:rgba(22,192,183,0.5);transform:translateY(-2px);}
.ind-pain-cta-hex{width:44px;height:50px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:var(--teal);display:flex;align-items:center;justify-content:center;color:#050b12;font-size:18px;flex-shrink:0;}
.ind-pain-cta-body{flex:1;min-width:0;}
.ind-pain-cta-body strong{font-size:15px;font-weight:800;color:var(--text);display:block;margin-bottom:2px;}
.ind-pain-cta-body span{font-size:12px;color:var(--muted);font-weight:600;}
.ind-pain-cta-arrow{color:var(--teal);font-size:16px;}
.ind-pain-report{background:rgba(5,11,18,0.5);border:1px solid rgba(22,192,183,0.12);border-radius:18px;overflow:hidden;}
.ind-pain-dots{display:flex;gap:6px;padding:14px 20px;background:rgba(5,11,18,0.6);border-bottom:1px solid rgba(22,192,183,0.08);}
.ind-pain-dots span{width:10px;height:10px;border-radius:50%;background:rgba(248,250,252,0.12);}
.ind-pain-dots span:first-child{background:#f87171;}
.ind-pain-dots span:nth-child(2){background:#fbbf24;}
.ind-pain-dots span:nth-child(3){background:#22c55e;}
.ind-pain-title-bar{padding:10px 20px;font-size:11px;font-weight:700;color:var(--muted);font-family:var(--display-stat);letter-spacing:0.5px;}
.ind-pain-body{padding:6px 14px 14px;}
.ind-pain-row{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:flex-start;padding:16px 18px;background:rgba(239,68,68,0.04);border:1px solid rgba(239,68,68,0.12);border-radius:14px;margin-bottom:12px;}
.ind-pain-row:last-child{margin-bottom:0;}
.ind-pain-num{font-family:var(--display-stat);font-size:13px;font-weight:800;color:#f87171;background:rgba(239,68,68,0.1);padding:4px 8px;border-radius:6px;}
.ind-pain-item-title{font-size:15px;font-weight:800;color:var(--text);margin-bottom:4px;}
.ind-pain-desc{font-size:13px;color:var(--muted);line-height:1.55;}
.ind-pain-sev{align-self:center;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:1px;padding:4px 10px;border-radius:4px;}
.ind-pain-sev.crit{background:rgba(239,68,68,0.12);color:#f87171;}
.ind-pain-sev.warn{background:rgba(251,191,36,0.12);color:#fbbf24;}
.ind-pain-sev.low{background:rgba(34,211,153,0.1);color:#34d399;}

/* -- FAQ --------------------------------------------------------- */
.ind-faq{padding:100px 0;background:var(--obsidian);position:relative;z-index:2;}
.ind-faq-head{text-align:center;max-width:640px;margin:0 auto 56px;}
.ind-faq-head h2{font-size:clamp(30px,3.4vw,48px);font-weight:900;letter-spacing:-0.5px;line-height:1.08;}
.ind-faq .faq-items{max-width:860px;margin:0 auto;}
.ind-faq .faq-item{background:rgba(22,192,183,0.02);border:1px solid rgba(22,192,183,0.08);border-radius:14px;padding:22px 28px;cursor:pointer;margin-bottom:12px;transition:all 0.25s;}
.ind-faq .faq-item:hover{background:rgba(22,192,183,0.05);border-color:rgba(22,192,183,0.18);}
.ind-faq .faq-item.open{background:rgba(22,192,183,0.06);border-color:rgba(22,192,183,0.22);}
.ind-faq .faq-q{font-size:17px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:20px;}
.ind-faq .faq-plus{width:30px;height:34px;flex-shrink:0;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:rgba(22,192,183,0.12);display:flex;align-items:center;justify-content:center;color:var(--teal);font-size:14px;transition:all 0.3s;}
.ind-faq .faq-item.open .faq-plus{transform:rotate(45deg);background:var(--teal);color:#050b12;}
.ind-faq .faq-a{color:var(--muted);font-size:15px;line-height:1.7;max-height:0;overflow:hidden;transition:max-height 0.4s ease,padding 0.3s;}
.ind-faq .faq-item.open .faq-a{max-height:600px;padding-top:16px;}

/* -- EXTRA SEO CONTENT (custom fields — intro + read-more body) -- */
.ind-extra{padding:100px 0;background:var(--surface2);position:relative;z-index:2;}
.ind-extra-inner{max-width:860px;margin:0 auto;}
.ind-extra-inner h2{font-size:clamp(28px,3vw,42px);font-weight:900;letter-spacing:-1px;margin-bottom:22px;line-height:1.15;}
.ind-extra-intro,.ind-extra-intro p{font-size:18px;color:var(--muted);line-height:1.8;margin-bottom:8px;}
.ind-extra-intro a{color:var(--teal);font-weight:700;text-decoration:none;}
.ind-extra-intro a:hover{text-decoration:underline;}
.ind-extra-inner .seo-expandable a{color:var(--teal);font-weight:700;text-decoration:none;}
.ind-extra-inner .seo-expandable a:hover{text-decoration:underline;}
.ind-extra-inner .seo-expandable ul,.ind-extra-inner .seo-expandable ol{color:var(--muted);font-size:17px;line-height:1.8;margin:0 0 16px 24px;}
.ind-extra-inner .seo-expandable strong{color:var(--text);}
.ind-extra-inner .seo-expandable p{font-size:17px;color:var(--muted);line-height:1.8;margin-bottom:16px;}
.ind-extra-inner .seo-expandable h3{font-size:22px;font-weight:900;margin:36px 0 14px;}

/* -- SEO CONTENT + READ MORE ------------------------------------- */
.seo-content{padding:80px 0;background:var(--surface);position:relative;z-index:2;}
.seo-inner{max-width:860px;margin:0 auto;}
.seo-inner h2{font-size:clamp(28px,3vw,42px);font-weight:900;letter-spacing:-1px;margin-bottom:18px;}
.seo-inner h3{font-size:22px;font-weight:900;margin:40px 0 14px;}
.seo-inner p{font-size:17px;color:var(--muted);line-height:1.8;margin-bottom:16px;}
.seo-expandable{max-height:0;overflow:hidden;transition:max-height 0.5s ease,opacity 0.4s ease;opacity:0;}
.seo-expandable.expanded{max-height:4000px;opacity:1;}
.seo-read-more{display:inline-flex;align-items:center;gap:10px;margin-top:24px;padding:14px 28px;background:rgba(22,192,183,0.08);border:1px solid rgba(22,192,183,0.25);border-radius:10px;cursor:pointer;font-family:var(--font);font-size:15px;font-weight:800;color:var(--teal);transition:all 0.25s ease;}
.seo-read-more:hover{background:rgba(22,192,183,0.14);border-color:rgba(22,192,183,0.45);}
.seo-read-more i{font-size:12px;transition:transform 0.3s ease;}
.seo-read-more.active i{transform:rotate(180deg);}

/* -- RESPONSIVE -------------------------------------------------- */
@media(max-width:960px){
  .ind-hero-grid,.ind-pain-wrap{grid-template-columns:1fr;}
  .ind-included-grid{grid-template-columns:1fr 1fr;}
  .ind-pain-left{position:static;}}
@media(max-width:600px){
  .ind-included-grid{grid-template-columns:1fr;}
  .ind-hero{padding:40px 0 80px;}}