
.seo-page{background:#fff;color:var(--text)}
.breadcrumbs{padding:18px 0;font-size:13px;color:#6b7280}
.breadcrumbs a{color:#536273;text-decoration:none}
.page-hero{background:linear-gradient(135deg,#071525,#123755);color:#fff;padding:95px 0 75px}
.page-hero .eyebrow{color:var(--orange)}
.page-hero h1{font-size:48px;line-height:1.1;max-width:850px;margin:12px 0 18px;letter-spacing:-1.5px}
.page-hero h1 em{color:var(--orange);font-style:normal}
.page-hero .lead{max-width:780px}
.page-content{padding:60px 0}
.content-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:38px;align-items:start}
.content-main h2{font-size:30px;margin:0 0 14px}
.content-main h3{font-size:21px;margin:30px 0 9px}
.content-main p,.content-main li{color:#5f6b7a;line-height:1.8}
.content-main ul{padding-left:22px}
.seo-card{background:#f7f9fb;border:1px solid var(--line);border-radius:16px;padding:26px;position:sticky;top:24px}
.seo-card h3{margin:0 0 12px}
.seo-card a{display:block;color:#26384b;text-decoration:none;font-weight:700;padding:10px 0;border-bottom:1px solid #e5e8ed}
.seo-card a:last-child{border-bottom:0}
.page-cta{background:#f7f9fb;padding:52px 0}
.page-cta .cta-box{background:var(--navy);color:#fff;border-radius:18px;padding:38px;text-align:center}
.page-cta h2{margin:0 0 10px;font-size:30px}
.faqs{margin-top:40px}
.faq{border-bottom:1px solid var(--line);padding:18px 0}
.faq h3{margin:0 0 7px;font-size:18px}
.faq p{margin:0}
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:28px}
.related a{border:1px solid var(--line);border-radius:12px;padding:18px;text-decoration:none;color:#172333;font-weight:800}
.related small{display:block;color:#687586;font-weight:500;margin-top:6px}
@media(max-width:850px){
  .page-hero{padding:75px 0 55px}
  .page-hero h1{font-size:38px}
  .content-grid{grid-template-columns:1fr}
  .seo-card{position:static}
  .related{grid-template-columns:1fr}
}
@media(max-width:600px){
  .page-hero h1{font-size:32px}
  .page-content{padding:42px 0}
  .page-cta .cta-box{padding:28px 20px}
}

/* =========================================================
   SEO LANDING PAGE ENHANCEMENTS
   ========================================================= */
.seo-page{min-height:100vh;overflow-x:hidden}
.seo-page ::selection{background:var(--orange);color:#fff}
.seo-page .site-header{background:linear-gradient(180deg,rgba(4,16,28,.78),rgba(4,16,28,0));padding:20px 0 55px}
.seo-page .nav{position:relative}
.seo-page .nav nav a{position:relative;transition:color .25s ease}
.seo-page .nav nav a::after{content:"";position:absolute;left:0;bottom:-8px;width:0;height:2px;background:var(--orange);transition:width .25s ease}
.seo-page .nav nav a:hover{color:#fff}
.seo-page .nav nav a:hover::after{width:100%}
.seo-page .logo{transition:transform .25s ease}
.seo-page .logo:hover{transform:translateY(-1px)}
.seo-page .nav .btn{transition:transform .2s ease,box-shadow .2s ease}
.seo-page .nav .btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(255,107,0,.32)}

.page-hero{position:relative;isolation:isolate;overflow:hidden;min-height:570px;display:flex;align-items:center;padding:145px 0 85px;background:
 radial-gradient(circle at 82% 22%,rgba(255,107,0,.18),transparent 25%),
 radial-gradient(circle at 12% 90%,rgba(38,112,166,.18),transparent 30%),
 linear-gradient(135deg,#04101c 0%,#071525 48%,#123755 100%)}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.24;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,black,transparent)}
.page-hero::after{content:"";position:absolute;width:420px;height:420px;right:-170px;bottom:-250px;border:1px solid rgba(255,255,255,.08);border-radius:50%;box-shadow:0 0 0 50px rgba(255,255,255,.018),0 0 0 100px rgba(255,255,255,.012);z-index:-1}
.page-hero .wrap{position:relative;z-index:1}
.breadcrumbs{display:flex;align-items:center;gap:5px;margin-bottom:25px;padding:0;font-size:12px;letter-spacing:.2px;color:#aebdca}
.breadcrumbs a{color:#dce5ec;transition:color .2s ease}
.breadcrumbs a:hover{color:var(--orange)}
.page-hero .eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border:1px solid rgba(255,107,0,.35);border-radius:100px;background:rgba(255,107,0,.08);font-size:11px;letter-spacing:1.5px}
.page-hero .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 12px rgba(255,107,0,.8)}
.page-hero h1{font-weight:850;text-wrap:balance;margin:18px 0 20px;max-width:920px}
.page-hero .lead{font-size:19px;line-height:1.75;color:#dce5ed;margin:0;max-width:790px}
.page-hero .actions{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}
.page-hero .actions .btn{min-width:145px;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.page-hero .actions .btn:hover{transform:translateY(-3px)}
.page-hero .actions .btn-orange:hover{box-shadow:0 16px 35px rgba(255,107,0,.3)}
.page-hero .actions .btn-outline:hover{background:rgba(255,255,255,.08);border-color:#fff}

.page-content{position:relative;background:#fff;padding:78px 0 85px}
.content-grid{grid-template-columns:minmax(0,1fr) 320px;gap:55px}
.content-main{min-width:0}
.content-main>h2{position:relative;font-size:31px;line-height:1.25;letter-spacing:-.6px;margin:0 0 18px;padding-left:17px;color:#101a28}
.content-main>h2::before{content:"";position:absolute;left:0;top:4px;width:4px;height:calc(100% - 8px);border-radius:5px;background:var(--orange)}
.content-main>p{font-size:16px;margin:0 0 17px}
.content-main>ul{margin:0 0 42px;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.content-main>ul li{position:relative;padding:15px 16px 15px 43px;background:#f8fafc;border:1px solid #e8edf2;border-radius:11px;font-size:14px;line-height:1.55;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.content-main>ul li::before{content:"✓";position:absolute;left:15px;top:14px;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:rgba(255,107,0,.1);color:var(--orange);font-weight:900;font-size:12px}
.content-main>ul li:hover{transform:translateY(-2px);border-color:#d8dfe7;box-shadow:0 10px 25px rgba(7,21,37,.06)}

.seo-card{top:28px;background:rgba(248,250,252,.95);box-shadow:0 18px 45px rgba(7,21,37,.07);padding:25px 23px;border-color:#e3e8ee}
.seo-card::before{content:"SEO SERVICE PAGES";display:inline-block;color:var(--orange);font-size:10px;letter-spacing:1.5px;font-weight:900;margin-bottom:9px}
.seo-card h3{font-size:21px;color:#111b29;margin:0 0 13px}
.seo-card a{position:relative;padding:12px 24px 12px 0;border-bottom:1px solid #e7ebf0;font-size:13px;line-height:1.4;transition:color .2s ease,padding-left .2s ease}
.seo-card a::after{content:"→";position:absolute;right:2px;color:#9aa6b4;transition:transform .2s ease,color .2s ease}
.seo-card a:hover{color:var(--orange);padding-left:5px}
.seo-card a:hover::after{color:var(--orange);transform:translateX(3px)}

.faqs{margin-top:52px;padding-top:4px}
.faqs>h2{margin-bottom:18px}
.faq{position:relative;padding:20px 22px;margin-bottom:10px;border:1px solid #e7ebf0;border-radius:12px;background:#fff;box-shadow:0 5px 18px rgba(7,21,37,.025);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.faq:hover{border-color:#d8dfe7;box-shadow:0 12px 28px rgba(7,21,37,.06);transform:translateY(-1px)}
.faq h3{position:relative;padding-right:25px;margin:0 0 8px;font-size:16px;line-height:1.45;color:#172333}
.faq h3::before{content:"Q";display:inline-grid;place-items:center;width:24px;height:24px;margin-right:9px;border-radius:7px;background:rgba(255,107,0,.1);color:var(--orange);font-size:11px;font-weight:900;vertical-align:-6px}
.faq p{font-size:14px;line-height:1.7;color:#667384}

.related{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:25px}
.related a{position:relative;overflow:hidden;background:#fff;box-shadow:0 8px 24px rgba(7,21,37,.04);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.related a::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.related a:hover{transform:translateY(-4px);border-color:#d8dfe7;box-shadow:0 16px 32px rgba(7,21,37,.08)}
.related a:hover::before{transform:scaleX(1)}
.related small{font-size:11px;color:#7a8795}

.page-cta{position:relative;overflow:hidden;padding:72px 0;background:#f5f7f9}
.page-cta::before{content:"";position:absolute;width:300px;height:300px;left:-180px;top:-160px;border-radius:50%;background:rgba(255,107,0,.08)}
.page-cta .cta-box{position:relative;overflow:hidden;padding:48px 35px;background:radial-gradient(circle at 85% 20%,#1c4b6d 0,#0d2941 35%,#071525 100%);box-shadow:0 20px 50px rgba(7,21,37,.13)}
.page-cta .cta-box::after{content:"";position:absolute;width:220px;height:220px;right:-80px;bottom:-130px;border:1px solid rgba(255,255,255,.1);border-radius:50%;box-shadow:0 0 0 35px rgba(255,255,255,.025)}
.page-cta h2{position:relative;z-index:1;font-size:31px;line-height:1.25}
.page-cta p{position:relative;z-index:1;color:#cdd8e2;max-width:650px;margin:0 auto 24px;line-height:1.7}
.page-cta .btn{position:relative;z-index:2;transition:transform .2s ease,box-shadow .2s ease}
.page-cta .btn:hover{transform:translateY(-3px);box-shadow:0 15px 30px rgba(255,107,0,.3)}

.seo-page footer{border-top:1px solid rgba(255,255,255,.04)}
.seo-page footer .logo{margin-bottom:6px}
.seo-page .footergrid a{transition:color .2s ease,transform .2s ease}
.seo-page .footergrid a:hover{color:var(--orange);transform:translateX(2px)}
.seo-page .floatwa{transition:transform .2s ease,box-shadow .2s ease}
.seo-page .floatwa:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 15px 35px rgba(0,0,0,.28)}

/* Add a subtle reading width and rhythm on large screens */
@media(min-width:1200px){
  .content-main>p{max-width:850px}
  .content-main>h2{margin-top:8px}
}

@media(max-width:900px){
  .page-hero{min-height:auto;padding:125px 0 68px}
  .page-hero .lead{font-size:17px}
  .content-grid{grid-template-columns:1fr;gap:40px}
  .seo-card{position:relative;top:auto}
  .seo-card a{display:inline-block;width:49%;vertical-align:top;padding-right:22px}
  .related{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:600px){
  .seo-page .site-header{padding:14px 0 35px}
  .page-hero{padding:105px 0 55px}
  .breadcrumbs{margin-bottom:18px;font-size:11px}
  .page-hero .eyebrow{font-size:9px;letter-spacing:1.1px}
  .page-hero h1{font-size:32px;line-height:1.12;letter-spacing:-1px;margin:15px 0}
  .page-hero .lead{font-size:15px;line-height:1.65}
  .page-hero .actions{display:grid;grid-template-columns:1fr;margin-top:23px}
  .page-hero .actions .btn{width:100%;padding:14px 18px}
  .page-content{padding:48px 0 58px}
  .content-main>h2{font-size:26px;padding-left:14px}
  .content-main>ul{grid-template-columns:1fr;gap:9px;margin-bottom:32px}
  .content-main>ul li{font-size:13px}
  .seo-card{padding:21px 18px}
  .seo-card a{width:100%;display:block}
  .related{grid-template-columns:1fr;gap:10px}
  .page-cta{padding:50px 0}
  .page-cta .cta-box{padding:35px 20px}
  .page-cta h2{font-size:25px}
  .page-cta p{font-size:14px}
}

@media(prefers-reduced-motion:reduce){
  .seo-page *, .seo-page *::before, .seo-page *::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* SEO footer service links */
footer .footergrid {
  align-items: start;
}

footer .footergrid > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

footer .footergrid > div > b {
  margin-bottom: 6px;
}

footer .footergrid a {
  color: inherit;
  text-decoration: none;
  transition: opacity .2s ease, transform .2s ease;
}

footer .footergrid a:hover {
  opacity: .85;
  transform: translateX(3px);
}

@media (max-width: 900px) {
  footer .footergrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  footer .footergrid {
    grid-template-columns: 1fr;
  }
}
