/* ═══════════════ OPTIONS DIGITAL — PREMIUM HERO (scoped to .od-hero) ═══════════════
   Only affects the homepage hero. Everything is namespaced under .od-hero so it
   cannot leak into other sections. */

/* Root guard: prevents any horizontal scrollbar from the full-bleed hero. */
html{ overflow-x:hidden; }

.od-hero *{ margin:0; padding:0; box-sizing:border-box; }

.od-hero{
  --navy:#081622; --navy-deep:#050D16; --red:#DE1826; --blue:#1C6CD2;
  --steel:#24384D; --ink:#FFFFFF; --body:rgba(255,255,255,.72);
  position:relative; overflow:hidden; isolation:isolate;
  min-height:100vh; min-height:100svh; width:100%; max-width:100%;
  display:flex; align-items:center;
  background:
    radial-gradient(120% 120% at 78% 8%, #0b1e30 0%, var(--navy) 42%, var(--navy-deep) 100%);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--body);
  padding:120px 64px;
  -webkit-font-smoothing:antialiased;
}

/* ── Background layer: full-bleed photo (95% visible) ── */
.od-hero .od-photo{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url('../hero-office.jpg') center center / cover no-repeat;
  opacity:.98;
}
/* Soft scrim so the headline/CTA stay readable over the photo.
   Kept light on the right so the photo reads at ~95%. */
.od-hero .od-photo-scrim{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(5,13,22,.78) 0%, rgba(5,13,22,.55) 34%, rgba(5,13,22,.2) 62%, rgba(5,13,22,.05) 100%);
}

/* ── Background layer: panning dot-matrix ── */
.od-hero .od-grid{
  position:absolute; inset:-40% 0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(28,108,210,.9) 1px, transparent 1.4px);
  background-size:34px 34px;
  opacity:.05;
  -webkit-mask-image:radial-gradient(80% 70% at 45% 40%, #000 30%, transparent 85%);
          mask-image:radial-gradient(80% 70% at 45% 40%, #000 30%, transparent 85%);
  animation:od-grid-pan 34s linear infinite;
}
@keyframes od-grid-pan{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(34px,34px,0); }
}

/* ── Background layer: drifting blue glow behind headline ── */
.od-hero .od-glow-blue{
  position:absolute; z-index:0; pointer-events:none;
  width:60vw; height:60vw; max-width:820px; max-height:820px;
  left:22%; top:24%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(28,108,210,.5) 0%, rgba(28,108,210,.12) 40%, transparent 70%);
  filter:blur(30px); opacity:.9;
  animation:od-drift 30s ease-in-out infinite;
}
@keyframes od-drift{
  0%,100%{ transform:translate(-50%,-50%) translate(0,0) scale(1); }
  33%{ transform:translate(-50%,-50%) translate(5%,4%) scale(1.08); }
  66%{ transform:translate(-50%,-50%) translate(-4%,2%) scale(.96); }
}

/* ── Background layer: warm red glow low in a corner ── */
.od-hero .od-glow-red{
  position:absolute; z-index:0; pointer-events:none;
  width:46vw; height:46vw; max-width:620px; max-height:620px;
  left:-6%; bottom:-18%;
  background:radial-gradient(circle, rgba(222,24,38,.34) 0%, rgba(222,24,38,.08) 45%, transparent 70%);
  filter:blur(36px);
  animation:od-drift-red 38s ease-in-out infinite;
}
@keyframes od-drift-red{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(6%,-4%) scale(1.1); }
}

/* ── Background layer: angular "speed blades" ── */
.od-hero .od-blades{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.od-hero .od-blade{
  position:absolute; height:150%; top:-25%; border-radius:40px;
  background:linear-gradient(180deg, rgba(28,108,210,.16), rgba(8,22,34,0));
  filter:blur(6px); transform:rotate(18deg);
}
.od-hero .od-blade.b1{ left:58%; width:120px; opacity:.6; animation:od-blade-glow 22s ease-in-out infinite; }
.od-hero .od-blade.b2{ left:70%; width:64px;  opacity:.5; background:linear-gradient(180deg, rgba(28,108,210,.22), rgba(8,22,34,0)); animation:od-blade-glow 28s ease-in-out infinite reverse; }
.od-hero .od-blade.b3{ left:84%; width:40px;  opacity:.45; background:linear-gradient(180deg, rgba(222,24,38,.16), rgba(8,22,34,0)); animation:od-blade-glow 26s ease-in-out infinite; }
@keyframes od-blade-glow{ 0%,100%{ opacity:.35; } 50%{ opacity:.7; } }

/* ── Vignette so edges fall into darkness ── */
.od-hero .od-vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(130% 120% at 40% 40%, transparent 42%, rgba(5,13,22,.55) 82%, rgba(5,13,22,.9) 100%);
}

/* ── Content grid ── */
.od-hero .od-inner{
  position:relative; z-index:2;
  width:100%; max-width:1240px; margin:0 auto; min-width:0;
  display:grid; grid-template-columns:minmax(0,55fr) minmax(0,45fr); align-items:center; gap:40px;
}
.od-hero .od-content, .od-hero .od-visual{ min-width:0; }

/* ── LEFT column ── */
.od-hero .od-eyebrow{
  display:inline-block; font-size:12.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:#5aa0ef;
  margin-bottom:22px;
  opacity:0; animation:od-eyebrow-in 1.3s cubic-bezier(.16,1,.3,1) .25s forwards;
}
@keyframes od-eyebrow-in{
  from{ opacity:0; letter-spacing:.05em; transform:translateY(6px); }
  to{ opacity:1; letter-spacing:.18em; transform:none; }
}

.od-hero.od-hero h1{
  font-family:'Space Grotesk',sans-serif !important; font-weight:700;
  color:var(--ink); letter-spacing:-.02em; line-height:1.08;
  font-size:clamp(2.2rem, 1.2rem + 3.4vw, 4rem);
  margin-bottom:22px;
}
.od-hero h1 .od-line{ display:block; overflow:hidden; }
.od-hero h1 .od-line > span{
  display:block; transform:translateY(115%);
  animation:od-line-up 1.4s cubic-bezier(.16,1,.3,1) forwards;
}
.od-hero h1 .od-line:nth-child(1) > span{ animation-delay:.45s; }
.od-hero h1 .od-line:nth-child(2) > span{ animation-delay:.70s; }
.od-hero h1 .od-line:nth-child(3) > span{ animation-delay:.95s; }
@keyframes od-line-up{ to{ transform:translateY(0); } }

/* gradient text + self-drawing underline on "paying customers" */
.od-hero .od-accent{
  position:relative; white-space:nowrap;
  background:linear-gradient(92deg,#ff5a45 0%, var(--red) 55%, #ff7a3c 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.od-hero .od-accent::after{
  content:""; position:absolute; left:0; right:0; bottom:-.08em; height:.09em; border-radius:3px;
  background:linear-gradient(90deg,var(--red),#ff7a3c);
  transform:scaleX(0); transform-origin:left; opacity:.9;
  animation:od-underline 1.5s cubic-bezier(.16,1,.3,1) 2s forwards;
}
@keyframes od-underline{ to{ transform:scaleX(1); } }

.od-hero .od-sub{
  max-width:540px; font-size:clamp(15px,.9rem + .3vw,17.5px); line-height:1.62; color:var(--body);
  opacity:0; animation:od-fade-up 1.3s cubic-bezier(.16,1,.3,1) 1.35s forwards;
}

.od-hero .od-cta{
  display:flex; flex-wrap:wrap; gap:14px; margin-top:32px;
  opacity:0; animation:od-fade-up 1.3s cubic-bezier(.16,1,.3,1) 1.65s forwards;
}
.od-hero .od-btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Inter',sans-serif; font-weight:600; font-size:15px; text-decoration:none;
  padding:15px 26px; border-radius:12px; cursor:pointer; border:1px solid transparent;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, background .3s ease, border-color .3s ease;
}
.od-hero .od-btn svg{ width:18px; height:18px; }
.od-hero .od-btn-primary{
  background:linear-gradient(180deg,#f0303d,var(--red)); color:#fff;
  box-shadow:0 10px 30px rgba(222,24,38,.34), inset 0 1px 0 rgba(255,255,255,.18);
}
.od-hero .od-btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 44px rgba(222,24,38,.55), inset 0 1px 0 rgba(255,255,255,.25);
}
.od-hero .od-btn-ghost{
  background:rgba(255,255,255,.04); color:#fff; border-color:rgba(255,255,255,.25);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.od-hero .od-btn-ghost:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.45);
}

.od-hero .od-trust{
  display:flex; flex-wrap:wrap; gap:20px; margin-top:30px;
  font-size:13.5px; color:rgba(255,255,255,.62);
  opacity:0; animation:od-fade-up 1.3s cubic-bezier(.16,1,.3,1) 1.95s forwards;
}
.od-hero .od-trust span{ display:inline-flex; align-items:center; gap:7px; }
.od-hero .od-trust svg{ width:15px; height:15px; color:#3ad07d; flex:none; }

@keyframes od-fade-up{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

/* ── RIGHT column: animated logo stage ── */
.od-hero .od-visual{ position:relative; height:100%; min-height:440px; display:flex; align-items:center; justify-content:center; }

.od-hero .od-logo-stage{
  position:relative; width:min(440px,82%); aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  transform-style:preserve-3d; will-change:transform;
  opacity:0; animation:od-stage-in 1.6s cubic-bezier(.16,1,.3,1) .9s forwards;
}
@keyframes od-stage-in{
  from{ opacity:0; transform:scale(.82); }
  to{ opacity:1; transform:scale(1); }
}

/* soft glow behind the mark */
.od-hero .od-logo-glow{
  position:absolute; inset:16%; border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(28,108,210,.55) 0%, rgba(222,24,38,.16) 52%, transparent 72%);
  filter:blur(32px);
  animation:od-glow-pulse 6s ease-in-out infinite;
}
@keyframes od-glow-pulse{
  0%,100%{ transform:scale(1); opacity:.8; }
  50%{ transform:scale(1.14); opacity:1; }
}

/* the logo mark */
.od-hero .od-logo-img{
  position:relative; z-index:3; width:50%; height:auto; display:block;
  filter:drop-shadow(0 16px 42px rgba(0,0,0,.5));
  animation:od-logo-float 6.5s ease-in-out infinite;
}
@keyframes od-logo-float{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-14px) rotate(.5deg); }
}

/* orbital rings, each carrying a light dot */
.od-hero .od-orbit{
  position:absolute; top:50%; left:50%; z-index:1; border-radius:50%;
  transform:translate(-50%,-50%);
}
.od-hero .od-orbit .od-dot{
  position:absolute; top:-5px; left:50%; margin-left:-5px;
  width:10px; height:10px; border-radius:50%;
}
.od-hero .od-orbit-1{ width:58%; height:58%; border:1px solid rgba(90,160,239,.28); animation:od-spin 16s linear infinite; }
.od-hero .od-orbit-1 .od-dot{ background:#5aa0ef; box-shadow:0 0 14px 3px rgba(90,160,239,.85); }
.od-hero .od-orbit-2{ width:80%; height:80%; border:1px solid rgba(255,255,255,.1); animation:od-spin 26s linear infinite reverse; }
.od-hero .od-orbit-2 .od-dot{ width:7px; height:7px; margin-left:-3.5px; top:-3.5px; background:#fff; box-shadow:0 0 12px 3px rgba(255,255,255,.7); }
.od-hero .od-orbit-3{ width:100%; height:100%; border:1px dashed rgba(222,24,38,.22); animation:od-spin 40s linear infinite; }
.od-hero .od-orbit-3 .od-dot{ background:var(--red); box-shadow:0 0 14px 3px rgba(222,24,38,.85); }
@keyframes od-spin{
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to{ transform:translate(-50%,-50%) rotate(360deg); }
}

/* sweeping conic accent ring */
.od-hero .od-ring-conic{
  position:absolute; top:50%; left:50%; z-index:2; width:69%; height:69%;
  transform:translate(-50%,-50%); border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 62%, rgba(28,108,210,.75) 82%, rgba(90,160,239,.9) 90%, transparent 100%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation:od-spin-conic 7s linear infinite;
}
@keyframes od-spin-conic{
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to{ transform:translate(-50%,-50%) rotate(360deg); }
}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media(max-width:900px){
  .od-hero{ padding:110px 24px 80px; }
  .od-hero .od-inner{ grid-template-columns:1fr; gap:48px; }
  .od-hero .od-visual{ min-height:auto; }
  .od-hero .od-glow-blue{ left:50%; top:14%; opacity:.6; }
  .od-hero .od-logo-stage{ width:min(360px,72vw); margin:0 auto; }
  .od-hero h1, .od-hero .od-eyebrow{ text-align:left; }
}
@media(max-width:560px){
  .od-hero{ padding:100px 20px 64px; }
  .od-hero .od-cta{ width:100%; }
  .od-hero .od-btn{ flex:1; justify-content:center; }
  .od-hero .od-logo-stage{ width:min(280px,66vw); }
  .od-hero .od-accent{ white-space:normal; }
}

/* ═══════════════ REDUCED MOTION → simple fades ═══════════════ */
@media(prefers-reduced-motion:reduce){
  .od-hero *,
  .od-hero *::before,
  .od-hero *::after{
    animation:od-simple-fade .6s ease forwards !important;
    transition:none !important;
  }
  .od-hero h1 .od-line > span{ transform:none !important; }
  .od-hero .od-accent::after{ transform:scaleX(1) !important; }
  .od-hero .od-logo-stage{ transform:none !important; }
  @keyframes od-simple-fade{ from{ opacity:0; } to{ opacity:1; } }
}