/* =======================================================
   Absolve Digital — Services (elevated, original build)
   ======================================================= */
:root{
  --bg:#0A0A0B;
  --panel:#0f0f12;
  --txt:#F2F6FB;
  --muted:#CFE8FB;
  --glass:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.1);

  --b1:#33b5df;   /* aqua */
  --b2:#2a8bb2;   /* mid blue */

  --shadow:0 24px 80px rgba(51,181,223,.18);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--txt);
  background:
    radial-gradient(900px 380px at 20% -12%, rgba(51,181,223,.16), transparent 60%),
    var(--bg);
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{width:min(1180px,92%); margin:auto}
.section{padding:96px 0; position:relative}
.section-hd{text-align:center; margin-bottom:28px}
.section-hd h2{font-size:2rem; margin:0 0 .25rem}
.section-hd p{color:var(--muted); margin:0}

.btn{display:inline-flex; align-items:center; justify-content:center; border-radius:999px; font-weight:800; padding:.9rem 1.2rem; transition:.25s ease}
.btn-primary{background:linear-gradient(90deg,var(--b1),var(--b2)); color:#061423; box-shadow:0 10px 26px rgba(51,181,223,.25)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--glass); background:#0b0d10; color:#fff}
.btn-ghost:hover{border-color:rgba(255,255,255,.18)}

main{padding-top:78px}

/* FX background */
.fx-bg{position:fixed; inset:0; z-index:-1; pointer-events:none}
.layer{position:absolute; inset:0}
.stars,.twinkle{
  --dot:radial-gradient(2px 2px at 2px 2px, rgba(255,255,255,.7), transparent 70%);
  background:var(--dot),var(--dot),var(--dot),var(--dot),var(--dot),var(--dot);
  background-size:160px 160px, 240px 240px, 320px 320px, 380px 380px, 440px 440px, 520px 520px;
  opacity:.25; animation:drift 42s linear infinite;
}
.twinkle{opacity:.12; animation:drift 68s linear infinite reverse}
.gradient{
  background:
    radial-gradient(900px 380px at 20% -12%, rgba(51,181,223,.18), transparent 60%),
    radial-gradient(700px 320px at 85% 10%, rgba(42,139,178,.14), transparent 60%);
}
@keyframes drift{from{background-position:0 0} to{background-position:280px 220px}}

/* HERO */
/* HERO */
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center;
}
.hero-media img{
  border-radius:16px;
  box-shadow:0 24px 80px rgba(51,181,223,.25);
  border:1px solid rgba(255,255,255,.08);
  max-width:100%;
}.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center}
.kicker{text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; color:#9ed8ef}
.glow{font-size:clamp(2.1rem,5vw,3.5rem); line-height:1.05; margin:.35rem 0 .5rem}
.hi{background:linear-gradient(90deg,var(--b1),var(--b2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent}
.lede{color:var(--muted); max-width:62ch}
.cta-row{display:flex; gap:12px; margin:18px 0 0; flex-wrap:wrap}

/* Hero visual (signature rings) */
.rings{position:relative; width:360px; height:360px; margin:auto}
.r{position:absolute; border:1px solid rgba(255,255,255,.12); border-radius:50%}
.r1{inset:0; animation:spin 18s linear infinite}
.r2{inset:24px; animation:spin 24s linear infinite reverse}
.r3{inset:48px; animation:spin 30s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.dot{position:absolute; width:10px; height:10px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #e6f7ff, var(--b2) 70%); box-shadow:0 0 16px rgba(51,181,223,.8)}
.d1{top:10%; left:50%; transform:translate(-50%,-50%)}
.d2{bottom:15%; left:15%}
.d3{bottom:18%; right:22%}

/* Sticky tabs */
.sticky-tabs{position:sticky; top:70px; background:rgba(10,10,11,.7); backdrop-filter:blur(8px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); z-index:900}
.tabs{display:flex; gap:8px; padding:.6rem 0}
.tab{
  border:1px solid var(--glass); background:#0b0d10; color:#eafaff; padding:.6rem .9rem; border-radius:999px; font-weight:700; cursor:pointer; transition:.2s;
}
.tab:hover{border-color:rgba(51,181,223,.4)}
.tab.active{background:linear-gradient(90deg,var(--b1),var(--b2)); color:#061423;}

/* Service panels */
.service-panel{padding:72px 0}
.service-panel.alt{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02))}
.panel-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:26px; align-items:center}
.panel-copy h2{margin:0 0 .25rem}
.panel-copy .lead{color:var(--muted)}
.checks{padding-left:18px; color:var(--muted); margin:.7rem 0 1rem}
.panel-media img{border-radius:16px; border:1px solid var(--glass); box-shadow:var(--shadow)}
.micro-cta{display:flex; gap:10px; flex-wrap:wrap}

/* Pricing (Social Plans) */
.pricing{padding:56px 0}
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:#0b0d10; border:1px solid var(--glass); border-radius:16px; padding:20px; box-shadow:0 10px 40px rgba(0,0,0,.2)}
.price.card{min-height:360px; display:flex; flex-direction:column; justify-content:space-between; position:relative}
.price .label{position:absolute; top:.9rem; left:.9rem; background:#06111a; color:#e6faff; border-radius:999px; padding:.25rem .6rem; font-size:.75rem; font-weight:800}
.price h3{margin:1.6rem 0 .4rem; font-size:1.6rem}
.price h3 small{font-size:.9rem; color:#b7e1f9; font-weight:600}
.price ul{margin:0 0 1rem; padding-left:1.1rem; color:var(--muted)}
.price.popular{border-color:#8fdcff; box-shadow:var(--shadow); transform:translateY(-2px)}
.more-note{text-align:center; color:var(--muted); margin-top:.8rem}

/* Comparison */
.compare{padding:56px 0}
.table-wrap{overflow:auto}
.cmp{width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--glass); border-radius:12px; overflow:hidden}
.cmp thead th{background:#0b0d10; color:#bfe7ff; font-weight:800; text-align:left; padding:12px 14px; border-bottom:1px solid var(--glass)}
.cmp tbody td{padding:12px 14px; border-bottom:1px solid var(--glass); color:#eaf8ff}
.cmp tbody tr:last-child td{border-bottom:0}

/* FAQ */
.faq .faq-list details{border:1px solid var(--glass); border-radius:12px; padding:12px 14px; margin:10px 0; background:#0b0d10}
.faq .faq-list summary{cursor:pointer; font-weight:700}
.faq .faq-list p{color:var(--muted); margin:.5rem 0 0}

/* CTA panel */
.cta-panel{border:1px solid var(--glass); border-radius:18px; padding:32px; background:linear-gradient(180deg, rgba(51,181,223,.12), rgba(255,255,255,.02)); text-align:center; box-shadow:0 30px 90px rgba(51,181,223,.16)}

/* Reveal */
[data-reveal]{opacity:0; transform:translateY(16px); transition:opacity .5s, transform .5s}
.reveal{opacity:1; transform:none}

/* Responsive */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr; text-align:center}
  .panel-grid{grid-template-columns:1fr; text-align:left}
  .price-grid{grid-template-columns:1fr}
}
@media (max-width:680px){
  .tabs{flex-wrap:wrap; justify-content:center}
  .cta-row,.micro-cta{justify-content:center}
}