/* =========================================================
   JF Modern Stack Consulting LLC — Service pages (Azure / AWS)
   ========================================================= */

/* Body backgrounds per brand */
.page-service--azure{
  background:
    radial-gradient(1400px 700px at 85% -10%, rgba(0,120,212,.18), transparent 60%),
    radial-gradient(1000px 500px at 5% 20%, rgba(80,230,255,.12), transparent 60%),
    var(--bg);
}
.page-service--aws{
  background:
    radial-gradient(1400px 700px at 85% -10%, rgba(255,153,0,.16), transparent 60%),
    radial-gradient(1000px 500px at 5% 20%, rgba(255,200,100,.10), transparent 60%),
    var(--bg);
}

/* ---------- Service Hero ---------- */
.svc-hero{
  position:relative; padding: 10rem 0 5rem;
  min-height: 640px;
  display:flex; align-items:center;
  overflow:hidden;
}
.svc-hero__bg{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.svc-hero__photo{
  position:absolute; inset:0;
  background-image: var(--svc-hero-bg);
  background-size: cover; background-position: center;
  filter: grayscale(1) contrast(1.1) brightness(.85);
  opacity:.85;
  z-index:0;
}
.svc-hero__photo::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,10,10,.25) 0%, rgba(10,10,10,.55) 70%, var(--bg) 100%);
}
.svc-hero__bg .orb{ z-index:1; }
.svc-hero__bg .wave{ z-index:2; }
.svc-hero--cio .svc-hero__photo{ filter: grayscale(1) contrast(1.1) brightness(.85) blur(8px); }
.svc-hero--ai .svc-hero__photo{ filter: grayscale(1) contrast(1.1) brightness(.95) blur(6px); opacity:1; }

/* Plan groups (used in plans with sub-categories like cloud-assessments) */
.plan__group{ margin: .9rem 0 .2rem; }
.plan__group h4{
  font-family:"Space Grotesk","Inter",sans-serif;
  font-size:.78rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent);
  margin: 0 0 .45rem; padding-bottom:.4rem;
  border-bottom:1px solid var(--line);
}
.plan__group + .plan__list{ margin-top:.2rem; }
.orb{
  position:absolute; border-radius:50%; filter: blur(60px);
  opacity:.55; animation: orbFloat 12s ease-in-out infinite;
}
.orb--blue  { background:#0078d4; width:520px; height:520px; top:-120px; right:-120px; }
.orb--cyan  { background:#50e6ff; width:360px; height:360px; bottom:-80px; left:10%; animation-delay:-4s; }
.orb--orange{ background:#ff9900; width:520px; height:520px; top:-120px; right:-100px; }
.orb--amber { background:#f8cd78; width:340px; height:340px; bottom:-80px; left:8%; animation-delay:-6s; }

@keyframes orbFloat{
  0%,100%{ transform: translateY(0) translateX(0) scale(1);}
  50%    { transform: translateY(-24px) translateX(12px) scale(1.04);}
}

.wave{
  position:absolute; left:0; right:0; bottom:-1px;
  width:100%; height:180px; display:block;
}

.svc-hero__inner{ position:relative; z-index:1; text-align:center; max-width:900px; }
.svc-hero__title{
  font-family:"Space Grotesk","Inter",sans-serif;
  font-size: clamp(2.2rem, 4.5vw + .5rem, 4rem);
  font-weight:700; letter-spacing:-.02em; line-height:1.08;
  margin:.6rem auto 1.2rem;
}
.svc-hero__sub{
  max-width:62ch; margin:0 auto 2rem; font-size:1.1rem; color:var(--ink-dim);
}

.chip--az  { border-color: rgba(80,230,255,.35); background: rgba(0,120,212,.12); color:#9cdcff; }
.chip--az  .chip__dot{ background:#50e6ff; box-shadow: 0 0 0 3px rgba(80,230,255,.2); }
.chip--aws { border-color: rgba(255,153,0,.35); background: rgba(255,153,0,.10); color:#ffcf8a; }
.chip--aws .chip__dot{ background:#ff9900; box-shadow: 0 0 0 3px rgba(255,153,0,.22); }

.grad--aws{ background: linear-gradient(135deg,#ff9900 0%,#ffbf5c 55%,#ffd7a1 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }

.svc-hero__logos{
  display:flex; flex-wrap:wrap; justify-content:center; gap:2rem;
  margin-top:3rem; padding-top:2rem; border-top:1px solid var(--line);
}
.svc-hero__logos span{
  font-family:"Space Grotesk"; font-size:.95rem; color:var(--ink-mute); letter-spacing:.05em;
  opacity:.8; transition: color .2s, opacity .2s;
}
.svc-hero__logos span:hover{ color:var(--ink); opacity:1; }

/* ---------- Feature grid ---------- */
.feat-grid{
  display:grid; gap:1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
}
.feat-grid--center{
  display:flex; flex-wrap:wrap; justify-content:center;
}
.feat-grid--center > .feat{ flex: 1 1 220px; max-width: 320px; }
.feat{
  padding:1.7rem 1.5rem; border:1px solid var(--line);
  border-radius: var(--radius-lg); background: rgba(255,255,255,.025);
  transition: transform .3s var(--t), border-color .3s, background .3s;
  position:relative; overflow:hidden;
}
.feat:hover{ transform: translateY(-4px); border-color: rgba(80,230,255,.35); background: rgba(80,230,255,.04); }
.feat--aws:hover{ border-color: rgba(255,153,0,.4); background: rgba(255,153,0,.05); }
.feat__ico{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center; font-size:1.2rem;
  background: rgba(80,230,255,.1); color:#50e6ff;
  border:1px solid rgba(80,230,255,.25);
  margin-bottom:1rem;
}
.feat--aws .feat__ico{
  background: rgba(255,153,0,.12); color:#ffb347;
  border-color: rgba(255,153,0,.3);
}
.feat h3{ margin-bottom:.5rem; font-size:1.15rem; }

/* ---------- Plans (Azure) ---------- */
.plans{
  display:grid; gap:1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.plan{
  position:relative; display:flex; flex-direction:column; gap:1.2rem;
  padding:2rem 1.8rem; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), var(--surface);
  border:1px solid var(--line);
  transition: transform .35s var(--t), border-color .35s, box-shadow .35s;
}
.plan:hover{ transform: translateY(-6px); border-color: rgba(80,230,255,.35); }
.plan--featured{
  border-color: rgba(255,255,255,.45);
  box-shadow: 0 20px 60px -20px rgba(179,179,179,.4);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(179,179,179,.05)),
    var(--surface);
}
.plan__ribbon{
  position:absolute; top:-12px; right:1.6rem;
  padding:.35rem .8rem; font-size:.72rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  background: var(--grad); color:#0a0a0a; border-radius:999px;
}
.plan__tag{
  font-family:"Space Grotesk"; font-size:.72rem; letter-spacing:.25em;
  text-transform:uppercase; color:var(--accent);
}
.plan__head h3{ margin:.5rem 0 .4rem; font-size:1.3rem; }
.plan__head p{ font-size:.92rem; }
.plan__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:.55rem;
  flex:1;
}
.plan__list li{
  padding-left:1.5rem; position:relative; font-size:.93rem; color:var(--ink);
}
.plan__list li::before{
  content:"✓"; position:absolute; left:0; top:0;
  color:var(--accent); font-weight:700;
}
.btn--full{ width:100%; justify-content:center; }

/* ---------- Stack ---------- */
.stack{
  display:grid; gap:1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.stack__col{
  padding:1.5rem; border:1px solid var(--line); border-radius: var(--radius-lg);
  background: rgba(255,255,255,.02);
  display:flex; flex-direction:column; gap:.5rem;
}
.stack__col h4{
  font-family:"Space Grotesk"; font-size:.75rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent-2); margin-bottom:.6rem;
}
.stack__col span{
  padding:.55rem .9rem; border-radius:8px;
  background: rgba(255,255,255,.03); border:1px solid var(--line);
  font-size:.88rem; color:var(--ink);
  transition: background .2s, border-color .2s;
}
.stack__col span:hover{ background: rgba(80,230,255,.06); border-color: rgba(80,230,255,.3); }
.stack--aws .stack__col h4{ color:#ff9900; }
.stack--aws .stack__col span:hover{ background: rgba(255,153,0,.08); border-color: rgba(255,153,0,.3); }

/* ---------- Steps ---------- */
.steps{
  counter-reset: step;
  list-style:none; margin:0; padding:0;
  display:grid; gap:1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.steps li{
  position:relative; padding:1.8rem 1.5rem 1.6rem;
  border:1px solid var(--line); border-radius: var(--radius-lg);
  background: rgba(255,255,255,.02);
  counter-increment: step;
}
.steps li::before{
  content: counter(step, decimal-leading-zero);
  position:absolute; top:1rem; right:1.3rem;
  font-family:"Space Grotesk"; font-weight:700; font-size:1.8rem;
  background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:.6;
}
.steps li strong{
  display:block; font-family:"Space Grotesk"; font-size:1.1rem;
  margin-bottom:.4rem;
}
.steps li p{ font-size:.92rem; }

/* ---------- Pillars (AWS) ---------- */
.pillars{
  display:grid; gap:1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.pillars--center{
  display:flex; flex-wrap:wrap; justify-content:center;
}
.pillars--center > .pillar{ flex: 0 1 240px; }
.pillar{
  padding:1.5rem; border:1px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,153,0,.03), transparent 60%), rgba(255,255,255,.02);
  transition: transform .3s var(--t), border-color .3s;
}
.pillar:hover{ transform: translateY(-4px); border-color: rgba(255,153,0,.4); }
.pillar span{
  display:inline-block; font-family:"Space Grotesk"; font-size:.75rem; letter-spacing:.25em;
  color:#ff9900; margin-bottom:.8rem;
}
.pillar h4{ font-size:1.05rem; margin-bottom:.4rem; }
.pillar p{ font-size:.9rem; }

/* ---------- Partnership ---------- */
.partner-grid{
  display:grid; gap:1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom:2.5rem;
}
.partner-card{
  position:relative;
  padding:2rem 1.8rem; border:1px solid var(--line);
  border-radius: var(--radius-lg); background: var(--surface);
  display:flex; flex-direction:column; gap:1rem;
  transition: transform .35s var(--t), border-color .35s;
}
.partner-card:hover{ transform: translateY(-5px); border-color: rgba(255,153,0,.4); }
.partner-card--featured{
  border-color: rgba(255,153,0,.5);
  background:
    linear-gradient(180deg, rgba(255,153,0,.08), rgba(255,153,0,.02)),
    var(--surface);
  box-shadow: 0 20px 60px -20px rgba(255,153,0,.25);
}
.partner-card h3{ font-size:1.25rem; }
.partner-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.partner-card li{ padding-left:1.4rem; position:relative; font-size:.92rem; color:var(--ink); }
.partner-card li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:8px; height:8px; border-radius:50%; background:#ff9900;
}

.partner-cta{
  display:grid; grid-template-columns: 1fr auto; gap:2rem;
  padding:2rem; border:1px solid var(--line); border-radius: var(--radius-lg);
  background:
    radial-gradient(600px 200px at 80% 20%, rgba(255,153,0,.1), transparent 60%),
    rgba(255,255,255,.02);
  align-items:center;
}
.partner-cta h3{ font-size:1.25rem; margin-bottom:.4rem; }

/* ---------- CTA band ---------- */
.cta-band{
  background:
    radial-gradient(800px 400px at 80% 20%, rgba(255,255,255,.1), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg-3));
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.cta-band--aws{
  background:
    radial-gradient(800px 400px at 80% 20%, rgba(255,153,0,.12), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg-3));
}
.cta-band__inner{
  display:grid; grid-template-columns: 1fr auto; gap:2rem; align-items:center;
}
.cta-band__inner h2{ margin:.8rem 0 .5rem; }

/* AWS button variant */
.btn--aws{
  background: linear-gradient(135deg,#ff9900 0%,#ffb347 55%,#ffcf8a 100%);
  color:#1a0a00;
  box-shadow: 0 10px 30px -10px rgba(255,153,0,.55);
}
.btn--aws:hover{ box-shadow: 0 18px 42px -10px rgba(255,153,0,.7); }

/* ---------- Responsive ---------- */
@media (max-width: 820px){
  .cta-band__inner, .partner-cta{ grid-template-columns: 1fr; }
  .svc-hero{ padding: 8rem 0 3rem; }
  .svc-hero__logos{ gap:1rem 1.4rem; }
}