/* ---------------------------------------------------------
   01. PAGE FOUNDATION
   --------------------------------------------------------- */

:root{
  --seo-bg:#071426;
  --seo-bg-deep:#050f1d;
  --seo-bg-soft:#0a1b2f;
  --seo-panel:#0d2139;
  --seo-panel-2:#102946;
  --seo-blue:#2563eb;
  --seo-blue-light:#60a5fa;
  --seo-orange:#ff7a00;
  --seo-white:#ffffff;
  --seo-text:#e8eef7;
  --seo-muted:#9fb1c8;
  --seo-muted-2:#7489a3;
  --seo-border:rgba(148,163,184,.16);
  --seo-border-blue:rgba(59,130,246,.28);
  --seo-shadow:0 24px 70px rgba(0,0,0,.24);
  --seo-radius:18px;
  --seo-radius-lg:26px;
  --seo-max:1240px;
}

html{
  scroll-behavior:smooth;
}

body{
  overflow-x:hidden;
}

main{
  width:100%;
  overflow:hidden;
}

/* ---------------------------------------------------------
   02. HEADER 
   --------------------------------------------------------- */

.site-header{
  position:relative;
  z-index:100;
}

.site-header--sticky{
  position:sticky;
  top:0;
}

.seo-page .header-inner{
  min-width:0;
}

.seo-page .site-nav__link{
  white-space:nowrap;
}

/* ---------------------------------------------------------
   03. HERO
   --------------------------------------------------------- */

.page-hero{
  position:relative;
  isolation:isolate;
  min-height:0;
  display:flex;
  align-items:flex-start;
  overflow:hidden;
  background:
    radial-gradient(
      circle at 82% 38%,
      rgba(37,99,235,.18) 0,
      rgba(37,99,235,.08) 18%,
      transparent 40%
    ),
    radial-gradient(
      circle at 18% 88%,
      rgba(255,122,0,.09) 0,
      transparent 30%
    ),
    linear-gradient(
      135deg,
      var(--seo-bg-deep) 0%,
      var(--seo-bg) 52%,
      #0a1d34 100%
    );
  border-bottom:1px solid var(--seo-border);
}

/* subtle technical grid */
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  opacity:.28;
  background-image:
    linear-gradient(rgba(96,165,250,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(96,165,250,.045) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(
    90deg,
    black 0%,
    rgba(0,0,0,.72) 55%,
    transparent 100%
  );
}

/* large enterprise glow / ring */
.page-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:560px;
  height:560px;
  right:-150px;
  top:50%;
  transform:translateY(-50%);
  border:1px solid rgba(96,165,250,.12);
  border-radius:50%;
  box-shadow:
    0 0 0 70px rgba(59,130,246,.025),
    0 0 0 140px rgba(59,130,246,.018),
    0 0 100px rgba(37,99,235,.08);
  pointer-events:none;
}

.page-container{
  width:min(100%,var(--seo-max));
  margin-left:auto;
  margin-right:auto;
  padding-left:28px;
  padding-right:28px;
}

.page-hero .page-container{
  position:relative;
  z-index:2;
  padding-top:10px;
  padding-bottom:45px;
}

/* hero content max-width */
.page-hero .page-container > *{
  position:relative;
  z-index:2;
}

.page-hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#c7d7ea;
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.15em;
  line-height:1.2;
  text-transform:uppercase;
}

.page-hero__eyebrow::before{
  content:"";
  width:34px;
  height:2px;
  flex:0 0 34px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    var(--seo-orange),
    var(--seo-blue)
  );
}

.page-hero h1{
  max-width:900px;
  margin:20px 0 0;
  color:var(--seo-white);
  font-size:clamp(2.8rem,6vw,5.6rem);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.055em;
  text-wrap:balance;
}

.page-hero h1 span{
  color:var(--seo-blue-light);
}

.page-hero__lead{
  max-width:760px;
  margin:28px 0 0;
  color:var(--seo-muted);
  font-size:1.08rem;
  font-weight:400;
  line-height:1.82;
}

.page-hero__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-top:32px;
}

.page-hero__actions a,
.page-cta a{
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 23px;
  border-radius:10px;
  font-size:.9rem;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease,
    background .2s ease;
}

.page-hero__actions a:hover,
.page-cta a:hover{
  transform:translateY(-2px);
}

.page-hero__actions .btn-primary,
.page-cta .btn-primary{
  color:#fff;
  background:linear-gradient(
    135deg,
    var(--seo-orange),
    #ff9638
  );
  box-shadow:0 14px 34px rgba(255,122,0,.18);
}

.page-hero__actions .btn-primary:hover,
.page-cta .btn-primary:hover{
  box-shadow:0 18px 42px rgba(255,122,0,.27);
}

.page-hero__actions .btn-secondary{
  color:#d7e7fa;
  border:1px solid rgba(96,165,250,.30);
  background:rgba(13,37,64,.68);
  box-shadow:inset 0 1px rgba(255,255,255,.035);
}

.page-hero__actions .btn-secondary:hover{
  border-color:rgba(96,165,250,.52);
  background:rgba(18,49,83,.82);
}


/* ---------------------------------------------------------
   04. BREADCRUMBS
   --------------------------------------------------------- */

.page-breadcrumb{
  background:#08182a;
  border-bottom:1px solid var(--seo-border);
}

.page-breadcrumb ol{
  width:min(100%,var(--seo-max));
  margin:0 auto;
  padding:14px 28px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  list-style:none;
}

.page-breadcrumb li{
  display:inline-flex;
  align-items:center;
  color:var(--seo-muted-2);
  font-size:.78rem;
  line-height:1.4;
}

.page-breadcrumb li + li::before{
  content:"/";
  margin-right:8px;
  color:#526983;
}

.page-breadcrumb a{
  color:#9fc3eb;
  text-decoration:none;
}

.page-breadcrumb a:hover{
  color:#fff;
}

/* ---------------------------------------------------------
   05. SECTIONS
   --------------------------------------------------------- */

.page-section{
  position:relative;
   margin:0 !important;
 padding:60px 0 35px !important;
  background:var(--seo-bg);
}

.page-section--muted{
  background:
    linear-gradient(
      180deg,
      #091a2e 0%,
      #0a1d33 100%
    );
  border-top:1px solid rgba(148,163,184,.07);
  border-bottom:1px solid rgba(148,163,184,.07);
}

.page-section::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:min(100%,1240px);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(96,165,250,.09),
    transparent
  );
}

.page-prose{
    max-width:none;
  margin-top: 28px !important;
  margin-bottom: 0 !important;
}

.page-prose h2{
  max-width:850px;
  margin:0 0 22px;
  color:#fff;
  font-size:clamp(2rem,4vw,3.35rem);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.04em;
  text-wrap:balance;
}

.page-prose h3{
  color:#fff;
  font-size:1.25rem;
  line-height:1.25;
}

.page-prose p{
  margin:0 0 20px;
  color:var(--seo-muted);
  font-size:1rem;
  line-height:1.88;
}

.page-prose p:last-child{
  margin-bottom:0;
}

.page-prose a{
  color:#79b5fb;
  text-decoration:underline;
  text-decoration-color:rgba(121,181,251,.35);
  text-underline-offset:3px;
}

.page-prose a:hover{
  color:#fff;
}

/* ---------------------------------------------------------
   06. CONTENT CARDS
   --------------------------------------------------------- */

.page-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:40px;
}

.page-card{
  position:relative;
  min-height:190px;
  padding:27px 25px;
  border:1px solid var(--seo-border);
  border-radius:var(--seo-radius);
  background:
    linear-gradient(
      145deg,
      var(--seo-panel-2),
      var(--seo-panel)
    );
  box-shadow:
    0 18px 42px rgba(0,0,0,.13),
    inset 0 1px rgba(255,255,255,.025);
  overflow:hidden;
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.page-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:58px;
  height:2px;
  background:linear-gradient(
    90deg,
    var(--seo-orange),
    var(--seo-blue)
  );
}

.page-card::after{
  content:"";
  position:absolute;
  width:100px;
  height:100px;
  right:-70px;
  bottom:-70px;
  border-radius:50%;
  background:rgba(37,99,235,.08);
  pointer-events:none;
}

.page-card:hover{
  transform:translateY(-4px);
  border-color:var(--seo-border-blue);
  box-shadow:
    0 24px 55px rgba(0,0,0,.20),
    0 0 30px rgba(37,99,235,.05);
}

.page-card h3{
  margin:0 0 11px;
  color:#fff;
  font-size:1.08rem;
  font-weight:700;
  line-height:1.3;
}

.page-card p{
  margin:0;
  color:#9fb2c9;
  font-size:.92rem;
  line-height:1.72;
}

/* ---------------------------------------------------------
   07. PROCESS / STEPS
   --------------------------------------------------------- */

.page-steps{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin:40px 0 0;
  padding:0;
  list-style:none;
}

.page-steps::before{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:34px;
  height:1px;
  z-index:0;
  background:linear-gradient(
    90deg,
    rgba(255,122,0,.40),
    rgba(59,130,246,.55),
    rgba(59,130,246,.12)
  );
}

.page-steps li{
  position:relative;
  z-index:1;
  min-height:205px;
  padding:27px 23px 23px;
  border:1px solid var(--seo-border);
  border-radius:var(--seo-radius);
  background:#0d223b;
  box-shadow:0 15px 38px rgba(0,0,0,.12);
}

.page-steps li::before{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  margin-bottom:22px;
  border:1px solid rgba(96,165,250,.25);
  border-radius:50%;
  background:#102946;
  color:var(--seo-orange);
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.04em;
}

.page-steps li:nth-child(1)::before{content:"01";}
.page-steps li:nth-child(2)::before{content:"02";}
.page-steps li:nth-child(3)::before{content:"03";}
.page-steps li:nth-child(4)::before{content:"04";}
.page-steps li:nth-child(5)::before{content:"05";}

.page-steps h3{
  margin:0 0 10px;
  color:#fff;
  font-size:1.02rem;
  font-weight:700;
  line-height:1.3;
}

.page-steps p{
  margin:0;
  color:#9fb2c9;
  font-size:.9rem;
  line-height:1.68;
}

/* ---------------------------------------------------------
   08. FAQ
   --------------------------------------------------------- */

.page-faq{
  max-width:920px;
  display:grid;
  gap:10px;
  margin-top:34px;
}

.page-faq details{
  border:1px solid var(--seo-border);
  border-radius:14px;
  background:#0d223b;
  overflow:hidden;
  transition:border-color .2s ease;
}

.page-faq details:hover{
  border-color:rgba(96,165,250,.25);
}

.page-faq summary{
  position:relative;
  cursor:pointer;
  padding:20px 50px 20px 22px;
  color:#f5f8fc;
  font-size:.96rem;
  font-weight:700;
  line-height:1.5;
  list-style:none;
}

.page-faq summary::-webkit-details-marker{
  display:none;
}

.page-faq summary::after{
  content:"+";
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  color:var(--seo-blue-light);
  font-size:1.25rem;
  font-weight:400;
}

.page-faq details[open] summary::after{
  content:"−";
}

.page-faq details p{
  margin:0;
  padding:0 22px 22px;
  color:#9fb2c9;
  font-size:.92rem;
  line-height:1.78;
}

/* ---------------------------------------------------------
   09. RELATED LINKS
   --------------------------------------------------------- */

.page-related{
  display:flex;
  flex-wrap:wrap;
    gap:8px;
margin:10px 0 0;
margin-top: 30px;
  padding:2px;
  list-style:none;

}

.page-related li{
  margin:0;
  padding:0;
}

.page-related a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 15px;
  border:1px solid var(--seo-border);
  border-radius:999px;
  background:#0c2038;
  color:#b9d5f4;
  font-size:.8rem;
  font-weight:600;
  text-decoration:none;
  transition:
    border-color .2s ease,
    background .2s ease,
    transform .2s ease;
}

.page-related a:hover{
  transform:translateY(-1px);
  border-color:rgba(96,165,250,.32);
  background:#102946;
}

/* ---------------------------------------------------------
   10. CTA
   --------------------------------------------------------- */

.page-cta{
  position:relative;
  padding:88px 0;
  background:
    radial-gradient(
      circle at 50% 0,
      rgba(37,99,235,.15),
      transparent 43%
    ),
    linear-gradient(
      135deg,
      #0b1d34,
      #071426
    );
  border-top:1px solid var(--seo-border);
  overflow:hidden;
}

.page-cta::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:700px;
  height:700px;
  transform:translateX(-50%);
  border:1px solid rgba(96,165,250,.06);
  border-radius:50%;
  pointer-events:none;
}

.page-cta .page-container{
  position:relative;
  z-index:2;
  padding-top:54px;
  padding-bottom:54px;
  border:1px solid rgba(96,165,250,.20);
  border-radius:var(--seo-radius-lg);
  background:
    linear-gradient(
      145deg,
      rgba(16,43,74,.82),
      rgba(8,23,42,.90)
    );
  box-shadow:
    var(--seo-shadow),
    inset 0 1px rgba(255,255,255,.035);
  text-align:center;
}

.page-cta h2{
  max-width:800px;
  margin:0 auto;
  color:#fff;
  font-size:clamp(2rem,4vw,3.35rem);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.04em;
  text-wrap:balance;
}

.page-cta p{
  max-width:720px;
  margin:18px auto 28px;
  color:var(--seo-muted);
  font-size:1rem;
  line-height:1.78;
}

/* ---------------------------------------------------------
   11. MOBILE / TABLET
   --------------------------------------------------------- */

@media (max-width:1199px){

  .page-hero{
    min-height:600px;
  }


  .page-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .page-steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .page-steps::before{
    display:none;
  }
}

@media (max-width:767px){

  .page-container{
    padding-left:18px;
    padding-right:18px;
  }

  .page-hero{
    min-height:auto;
  }

  .page-hero::after{
    width:340px;
    height:340px;
    right:-190px;
    top:52%;
  }

  .page-hero .page-container{
    padding-top:60px;
    padding-bottom:58px;
  }

  .page-hero__eyebrow{
    font-size:.68rem;
    letter-spacing:.12em;
  }

  .page-hero__eyebrow::before{
    width:25px;
    flex-basis:25px;
  }

  .page-hero h1{
    max-width:100%;
    margin-top:17px;
    font-size:clamp(2.35rem,11vw,3.6rem);
    line-height:1.01;
    letter-spacing:-.045em;
  }

  .page-hero__lead{
    max-width:100%;
    margin-top:20px;
    font-size:.95rem;
    line-height:1.72;
  }

  .page-hero__actions{
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    margin-top:25px;
  }

  .page-hero__actions a{
    width:100%;
    min-height:48px;
  }

  /* turn the desktop decorative system card into a compact mobile card */
  .page-hero .page-container::after{
    position:relative;
    right:auto;
    top:auto;
    transform:none;
    display:block;
    width:100%;
    min-height:0;
    margin-top:34px;
    padding:19px 16px;
    border-radius:15px;
    font-size:.59rem;
    line-height:1.8;
    opacity:1;
  }

  .page-hero .page-container::before{
    position:relative;
    right:auto;
    top:auto;
    display:block;
    width:72%;
    margin:-44px auto 27px;
    transform:none;
  }

  .page-breadcrumb ol{
    padding:12px 18px;
    gap:5px;
  }

  .page-breadcrumb li{
    font-size:.7rem;
  }

  .page-section{
    padding:68px 0;
  }

  .page-section::before{
    display:none;
  }

  .page-prose{
    max-width:100%;
  }

  .page-prose h2{
    font-size:clamp(1.85rem,8vw,2.6rem);
    line-height:1.08;
  }

  .page-prose p{
    font-size:.94rem;
    line-height:1.78;
  }

  .page-grid{
    grid-template-columns:1fr;
    gap:13px;
    margin-top:28px;
  }

  .page-card{
    min-height:0;
    padding:22px 20px;
    border-radius:15px;
  }

  .page-card h3{
    font-size:1rem;
  }

  .page-card p{
    font-size:.88rem;
  }

  .page-steps{
    grid-template-columns:1fr;
    gap:12px;
    margin-top:28px;
  }

  .page-steps li{
    min-height:0;
    padding:22px 20px;
    border-radius:15px;
  }

  .page-steps li::before{
    margin-bottom:16px;
  }

  .page-faq{
    gap:8px;
    margin-top:26px;
  }

  .page-faq summary{
    padding:17px 45px 17px 17px;
    font-size:.9rem;
  }

  .page-faq summary::after{
    right:16px;
  }

  .page-faq details p{
    padding:0 17px 18px;
    font-size:.88rem;
    line-height:1.72;
  }

  .page-related{
    gap:8px;
  }

  .page-related a{
    min-height:38px;
    padding:0 12px;
    font-size:.73rem;
  }

  .page-cta{
    padding:60px 0;
  }

  .page-cta .page-container{
    padding:36px 19px;
    border-radius:19px;
  }

  .page-cta h2{
    font-size:clamp(1.9rem,8vw,2.6rem);
  }

  .page-cta p{
    font-size:.92rem;
    line-height:1.7;
  }

  .page-cta a{
    width:100%;
  }
}

@media (max-width:380px){

  .page-hero .page-container{
    padding-left:15px;
    padding-right:15px;
  }

  .page-container{
    padding-left:15px;
    padding-right:15px;
  }

  .page-hero h1{
    font-size:2.2rem;
  }

  .page-hero__lead{
    font-size:.9rem;
  }
}

/* ---------------------------------------------------------
   12. ACCESSIBILITY / REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  .page-card,
  .page-related a,
  .page-hero__actions a,
  .page-cta a{
    transition:none;
  }
}

/* ---------------------------------------------------------
   13. PRINT
   --------------------------------------------------------- */

@media print{

  .page-hero,
  .page-section,
  .page-cta{
    background:#fff !important;
    color:#111 !important;
  }

  .page-hero h1,
  .page-prose h2,
  .page-card h3,
  .page-steps h3,
  .page-faq summary,
  .page-cta h2{
    color:#111 !important;
  }

  .page-hero__lead,
  .page-prose p,
  .page-card p,
  .page-steps p,
  .page-faq details p,
  .page-cta p{
    color:#333 !important;
  }
}