/* =========================================================
   AbsolvDocs — High-performance page styles
   Goals: one scrollbar, zero jank, GPU-only animations
   ========================================================= */

:root{
  --brand:#D50000;
  --brand-2:#FF1744;
  --bg:#070709;
  --panel:#0F0F14;
  --panel2:#141419;
  --text:#F5F5F7;
  --muted:#CFCFD6;
  --line:rgba(255,255,255,.10);
  --grad:linear-gradient(90deg,var(--brand-2),var(--brand));
}

/* Base */
*{box-sizing:border-box}
html,body{min-height:100%; background:var(--bg); color:var(--text); font-family:Poppins,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
html,body{overflow-x:hidden}               /* <<< kills second scrollbar */
a{color:inherit; text-decoration:none}     /* keep your anchor look */
h1,h2,h3{margin:0}
.page{overflow-x:hidden}                   /* extra guard */

/* Progress (full width; no layout thrash) */
.progress{position:fixed; top:0; left:0; right:0; height:3px; background:rgba(255,255,255,.05); z-index:9000}
.progress__bar{display:block; height:100%; width:0; background:var(--grad); will-change:transform}

/* Containers */
.section{position:relative}
.container,.adx-container{max-width:1200px; margin:0 auto; padding:0 24px}
.grad-red{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ================= HERO ================= */
.adx-hero{
  position:relative; padding:130px 0 96px; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(1000px 360px at 80% -10%, rgba(255,23,68,.18), transparent 60%),
    radial-gradient(800px 360px at 10% -20%, rgba(213,0,0,.14), transparent 60%),
    linear-gradient(180deg,#0A0A0F,#070709);
}
.adx-hero__bg{position:absolute; inset:0; z-index:0; pointer-events:none}
.adx-hero__halo{position:absolute; inset:-30% -20% auto -20%; height:60vh; background:conic-gradient(from 200deg at 50% 50%, rgba(255,23,68,.12), transparent 35%, rgba(213,0,0,.09), transparent 70%); filter:blur(70px); animation:halo 24s linear infinite; opacity:.95; will-change:transform}
@keyframes halo { to { transform:rotate(360deg) } }
.adx-hero__vignette{position:absolute; inset:0; background:radial-gradient(1200px 600px at 50% 20%, transparent 55%, rgba(0,0,0,.45) 85%)}

.adx-hero__grid{
  position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center;
  max-width:100%; overflow:hidden;    /* <<< prevents spill */
}
.adx-eyebrow{color:#EAEAEA; text-transform:uppercase; letter-spacing:.12em; font-size:.82rem; margin-bottom:12px; opacity:.95}
.adx-headline{font-size:clamp(2.35rem,5vw,3.7rem); font-weight:800; line-height:1.08; letter-spacing:-.01em}
.t-accent{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.t-rose{color:#ffd6db}
.adx-underline{height:3px; width:min(340px,45%); margin:14px 0 12px; background:var(--grad); border-radius:999px; animation:underline-sweep 2.2s ease-in-out infinite; will-change:transform}
@keyframes underline-sweep { 50% { transform:scaleX(1.06) } }
.adx-lede{color:#EFEFF3; font-size:1.06rem; margin-top:6px; max-width:700px; opacity:.96}
.adx-cta{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap}

/* Buttons (unchanged look) */
.adx-btn{display:inline-block; font-weight:700; border-radius:14px; padding:12px 18px; transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease; will-change:transform}
.adx-btn--brand{background:var(--grad); color:#fff; box-shadow:0 10px 24px rgba(213,0,0,.25)}
.adx-btn--brand:hover{transform:translateY(-1px); box-shadow:0 14px 34px rgba(213,0,0,.35)}
.adx-btn--ghost{border:1px solid var(--line); background:rgba(255,255,255,.02)}
.adx-btn--ghost:hover{opacity:.92}

/* HERO video (fixed: no border, no caption) */
.adx-hero__video{
  margin:0;
  padding:0;
  border:none;
  background:transparent;
}
.adx-hero__video video{
  display:block;
  width:100%;
  height:auto;
  border:none;
  outline:none;
  background:transparent;
  border-radius:16px;   /* keep smooth corners */
  box-shadow:none;
}
.adx-hero__video figcaption{
  display:none;
}

/* ================= SERVICES ================= */
.adx-services{background:linear-gradient(180deg,#0A0A10,#08080C); padding:70px 0 84px}
.adx-hd{text-align:center; margin-bottom:26px}
.adx-hd p{color:#D9D9DE; margin-top:8px}
.adx-service-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.adx-service-card{background:linear-gradient(180deg,#14141C,#0E0E14); border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:12px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 14px 28px rgba(0,0,0,.55); will-change:transform}
.adx-service-card:hover{transform:translateY(-3px); border-color:rgba(255,23,68,.35); background:linear-gradient(180deg,#181822,#101018); box-shadow:0 16px 34px rgba(213,0,0,.20), 0 22px 50px rgba(0,0,0,.6)}
.adx-ic{width:38px; height:38px; color:#fff; opacity:.95}
.adx-sub{color:#E6E6EA}
.adx-list{margin:0; padding:0 0 0 16px}
.adx-list li{margin:6px 0}
.adx-link{margin-top:auto; font-weight:700; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ================= PROCESS ================= */
.process{padding:74px 0 86px; background:linear-gradient(180deg,#0A0A10,#07070B)}
.section-hd{text-align:center; margin-bottom:24px}
.section-hd p{color:#D6D6DB; margin-top:8px}
.rail{position:relative; margin-top:18px}
.rail__line{position:absolute; left:12px; top:20px; bottom:20px; width:4px; background:rgba(255,255,255,.12); border-radius:999px}
.rail__progress{position:absolute; left:0; top:0; width:100%; height:0; background:var(--grad); border-radius:999px; box-shadow:0 0 18px rgba(213,0,0,.35)}
.rail__steps{list-style:none; margin:0; padding:0 0 0 60px; display:grid; gap:18px}
.rail__steps li{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px; transition:transform .2s ease; will-change:transform}
.rail__steps li:hover{transform:translateY(-2px)}
.rail__steps .dot{width:14px; height:14px; border-radius:50%; background:var(--grad); box-shadow:0 0 10px rgba(213,0,0,.38); margin-bottom:8px}

/* =========== NEW: HOW YOUR DOCUMENTS FEEL (cards) =========== */
.feel{padding:84px 0; background:linear-gradient(180deg,#08080D,#07070B)}
.feel-grid{max-width:1200px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.feel-card{background:linear-gradient(180deg,#14141C,#0E0E14); border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:18px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.feel-card[data-float]{transform:translateZ(0); transition:transform .25s ease}
.feel-card[data-float]:hover{transform:translateY(-4px)}
.feel-hd{font-weight:800; margin-bottom:10px}
.feel-list{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.tick{display:inline-block; width:16px; height:16px; border-radius:50%; margin-right:8px; vertical-align:-3px; background:var(--grad)}
.feel-list li{color:#E9E9EF}

/* ================= FAQ / CTA ================= */
.faq{background:linear-gradient(180deg,#09090E,#08080C)}
.accordion details{background:linear-gradient(180deg,#14141C,#0E0E14); border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:14px 16px; margin:10px 0; transition:transform .18s ease, border-color .18s ease}
.accordion summary{cursor:pointer; font-weight:700}
.accordion details:hover{border-color:rgba(255,23,68,.28)}
.accordion details[open]{transform:translateY(-1px)}

.cta{padding:96px 0 116px; background:linear-gradient(180deg,#09090E,#070709)}
.cta__wrap{text-align:center}
.cta__wrap p{color:#EDEDF2; margin:8px auto 22px; max-width:720px}

/* Reveal (cheap) */
[data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; will-change:transform,opacity}
.reveal{opacity:1; transform:none}

/* Responsive */
@media (max-width:1080px){
  .adx-hero__grid{grid-template-columns:1fr}
  .adx-service-grid{grid-template-columns:repeat(2,1fr)}
  .feel-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .adx-headline{font-size:2.15rem}
  .adx-lede{font-size:1rem}
  .adx-service-grid{grid-template-columns:1fr}
  .feel-grid{grid-template-columns:1fr}
  .adx-hero{padding-top:110px}
  .adx-hero__video video{aspect-ratio:16/9}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .adx-hero__halo,.underline-sweep,.reveal,.adx-btn,.rail__steps li{animation:none !important; transition:none !important}
}