:root{
  --bg:#040406; --ink:#f4f4f4; --muted:#b6b6b6;
  --panel:#0c0c11;
  --red:#ff0f1b; --red-600:#bd0a12;
  --glass:rgba(255,255,255,.06); --glass-brd:rgba(255,255,255,.13);
  --shadow:0 28px 90px rgba(0,0,0,.55); --radius:16px; --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);
  background:
    radial-gradient(1000px 520px at 90% -10%, rgba(255,15,27,.22), transparent 60%),
    radial-gradient(1000px 520px at 10% -10%, rgba(255,15,27,.32), transparent 60%),
    var(--bg);
  line-height:1.6; overflow-x:hidden;
}
a{color:#fff;text-decoration:none}
.center{text-align:center}

/* Progress */
.scrollbar{position:fixed;left:0;top:0;height:4px;width:100%;background:rgba(255,255,255,.08);z-index:100}
.scrollbar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),#ff5a66);transition:width .2s ease}

/* Quick-rail */
.quickrail{
  position:fixed; top:50%; right:1rem; transform:translateY(-50%); z-index:85;
}
.quickrail ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem }
.quickrail a{
  display:inline-block; color:#fff; font-weight:700;
  border:1px solid var(--glass-brd); background:rgba(10,10,12,.9);
  padding:.55rem .75rem; border-radius:12px; box-shadow:var(--shadow);
}

/* Ambient background */
#bg{position:fixed;inset:0;z-index:-2;background:linear-gradient(180deg,#040406,#09090d)}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="1.2" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.035"/></svg>');mix-blend-mode:overlay}

/* Panels & Stage layout */
.panel{
  min-height:100dvh;height:100dvh;display:grid;place-items:center;
  padding:clamp(1rem,3vw,2rem);position:relative;overflow:hidden
}
.stage-inner{
  width:100%;max-width:1200px;margin:0 auto;height:100%;
  display:grid;grid-template-rows:auto 1fr;gap:1rem;
  align-items:center;justify-items:center;
}
.stage-head{text-align:center}
.stage-head .sub{color:#cfcfcf;margin:.1rem 0 0;font-size:.95rem}

/* Horizontal pager */
.h-pages{
  height:100%;
  width:100%;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start; /* show one page; start at left */
  overflow:hidden;            /* no peeking of next card */
  will-change:transform;
}
.h-page{
  flex:0 0 100%;
  height:100%;
  display:grid; place-items:center;
  padding:clamp(.6rem,2vw,1rem);
}
.h-dots{display:flex;gap:.35rem;justify-content:center;align-items:center;margin:.2rem 0}
.h-dots .dot{width:8px;height:8px;border-radius:50%;background:#777;opacity:.6}
.h-dots .dot.active{background:#fff;opacity:1}

/* Sheets (content cards per page) */
.sheet{
  width:min(100%, 1100px);
  border:1px solid var(--glass-brd); border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:clamp(.9rem,2vw,1.25rem); box-shadow:var(--shadow);
  margin-inline:auto;
}
.sheet.glass{background:linear-gradient(180deg, rgba(255,15,27,.12), rgba(255,255,255,.02))}
.sheet.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.8rem,2vw,1.2rem)}
@media (max-width: 900px){ .sheet.two-col{grid-template-columns:1fr} }

/* Hero */
.panel--hero{isolation:isolate}
.hero-media{position:absolute;inset:-3% -6%;z-index:-1;overflow:hidden}
.hero-img{position:absolute;inset:0;width:106%;height:106%;object-fit:cover;filter:contrast(1.08) saturate(1.14) brightness(.86)}
.hero-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 70%, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.7) 100%)}
.brand-hero{width:44px;height:44px;border-radius:8px;margin-bottom:.5rem}
.xl{font-size:clamp(2.6rem,7.2vw,5.2rem);line-height:1.05;margin:.2rem 0 .6rem;font-weight:800}
.lead{color:#d3d3d3;font-size:clamp(1.05rem,2.1vw,1.35rem);max-width:70ch;margin:0 auto 1rem}
.scroll-cue{position:absolute;left:50%;bottom:2rem;transform:translate(-50%,0);width:32px;height:52px;border:1px solid var(--glass-brd);border-radius:20px;display:grid;place-items:center;opacity:.95}
.scroll-cue span{width:4px;height:10px;background:#fff;border-radius:2px;animation:cue 1.6s infinite}
@keyframes cue{0%{transform:translateY(-6px);opacity:.7}60%{transform:translateY(8px);opacity:1}100%{transform:translateY(-6px);opacity:.7}}

/* Lists */
.bullets{margin:.6rem 0 0 1rem;padding:0;list-style:disc}
.bullets li{margin:.25rem 0}

.svc-sheet h3{margin:.2rem 0 .6rem}
.svc-list{
  margin:0; padding-left:1rem; list-style:disc; color:#eaeaea;
  columns:2; column-gap:1rem; font-size:clamp(.9rem, 1.9vw, 1rem); line-height:1.35;
}
@media (max-width: 900px){ .svc-list{ columns:1 } }

/* Services SLOT overlay */
.svc-slot{
  position:absolute; inset:0; display:none; place-items:center; z-index:10;
  background:rgba(7,7,10,.66); backdrop-filter:blur(2px);
}
.svc-slot.active{ display:grid }
.slot-bg-layers{position:absolute; inset:0; overflow:hidden}
.slot-grad{position:absolute; inset:-20% -10%; opacity:.55; filter:blur(20px)}
.slot-grad--a{background:
  radial-gradient(60% 50% at 70% 30%, rgba(255,15,27,.35), rgba(0,0,0,0) 70%),
  conic-gradient(from 0.25turn at 30% 70%, rgba(255,15,27,.2), rgba(0,0,0,0) 60%, rgba(255,15,27,.15));
  animation: swirlA 10s linear infinite;}
.slot-grad--b{background:
  radial-gradient(40% 35% at 20% 20%, rgba(255,15,27,.28), rgba(0,0,0,0) 70%),
  conic-gradient(from 0.8turn at 70% 40%, rgba(255,15,27,.22), rgba(0,0,0,0) 50%, rgba(255,15,27,.12));
  animation: swirlB 13s linear infinite reverse;}
.slot-grad--c{background:
  radial-gradient(50% 42% at 46% 60%, rgba(255,15,27,.18), rgba(0,0,0,0) 70%),
  conic-gradient(from 0.05turn at 55% 50%, rgba(255,15,27,.18), rgba(0,0,0,0) 55%, rgba(255,15,27,.1));
  mix-blend-mode:screen; animation: swirlC 17s linear infinite;}
@keyframes swirlA{to{transform:rotate(360deg)}}@keyframes swirlB{to{transform:rotate(-360deg)}}@keyframes swirlC{to{transform:rotate(360deg)}}
.slot-content{position:relative; z-index:4; text-align:center; padding:1rem}
.slot-tag{display:inline-block; font-weight:800; letter-spacing:.6px; font-size:.95rem; color:#000;
  background:linear-gradient(180deg,var(--red),var(--red-600)); padding:.45rem .7rem; border-radius:999px; box-shadow:0 8px 28px rgba(255,15,27,.25)}
.slot-line{margin-top:1rem; display:flex; align-items:center; gap:.8rem; justify-content:center}
.slot-dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(180deg,var(--red),var(--red-600));box-shadow:0 0 18px rgba(255,15,27,.6)}
.slot-text{font-size:clamp(1.2rem,2.6vw,1.7rem); font-weight:800; color:#fff; text-shadow:0 0 24px rgba(255,15,27,.35)}
.slot-hint{opacity:.9;margin-top:.6rem;font-size:.9rem;color:#e6e6e6}

/* Clients */
.clients-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:.8rem; width:min(100%,1100px); margin-inline:auto;
}
.client{display:grid;place-items:center;background:#0e0e12;border:1px solid var(--glass-brd);border-radius:14px;min-height:108px;box-shadow:var(--shadow);padding:1rem}
.client img{max-height:56px;max-width:80%}
.client--text{color:#ececec;font-weight:700;font-size:1.05rem;text-align:center}
@media (max-width: 900px){ .clients-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 520px){ .clients-grid{grid-template-columns:repeat(2,1fr)} .client{min-height:92px} .client img{max-height:44px} }

/* CTA */
.sheet.cta{text-align:center}
.cta .btn{margin:.25rem .35rem}

/* Buttons */
.btn{
  display:inline-block; font-weight:800; letter-spacing:.2px; color:#000;
  background:linear-gradient(180deg,var(--red),var(--red-600)); padding:.6rem .9rem; border-radius:999px;
  box-shadow:0 10px 30px rgba(255,15,27,.25);
}
.btn--ghost{background:transparent;color:#fff;border:1px solid var(--glass-brd)}

/* Footer */
.site-footer{border-top:1px solid var(--glass-brd);background:rgba(0,0,0,.6);padding:1.4rem 1rem;text-align:center;color:#a6a6a6}

/* Phones: quick-rail bottom */
@media (max-width: 820px){
  .quickrail{ top:auto; bottom:12px; left:0; right:0; transform:none; padding:0 .6rem; display:block }
  .quickrail ul{ display:flex; gap:.5rem; justify-content:center }
  .quickrail li{ flex:1 }
  .quickrail a{ display:block; text-align:center; padding:.6rem .5rem; font-size:.9rem }
  .scroll-cue{ bottom:74px }
}