/* Axionis landing — section layouts */

/* NAV */
.nav{ position:fixed; inset:0 0 auto 0; z-index:60; height:var(--nav-h);
  display:flex; align-items:center; transition:background .4s, backdrop-filter .4s, border-color .4s;
  border-bottom:1px solid transparent; }
.nav.is-stuck{ background:rgba(10,11,14,.72); backdrop-filter:blur(14px); border-bottom-color:var(--hair-2); }
.nav__in{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.brand{ display:inline-flex; align-items:center; gap:11px; font-family:'Space Grotesk',sans-serif; }
.brand__mark{ width:26px; height:26px; filter:drop-shadow(0 0 7px var(--ember-soft)); }
.brand b{ font-weight:700; letter-spacing:.16em; font-size:16px; }
.nav__links{ display:flex; align-items:center; gap:30px; }
.nav__links a:not(.btn){ font-size:14.5px; color:var(--bone-dim); transition:color .3s; }
.nav__links a:not(.btn):hover{ color:#fff; }

/* HERO */
.hero{ min-height:100svh; display:flex; align-items:center; padding:calc(var(--nav-h) + 40px) 0 60px; overflow:hidden; }
.hero__in{ position:relative; z-index:3; width:100%; }
.hero__copy{ max-width:680px; }
.hero__h1{ font-size:clamp(46px,9vw,116px); margin:18px 0 24px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin:34px 0 22px; }
.hero__pill{ display:inline-flex; align-items:center; gap:10px; font-size:13.5px; color:var(--bone-dim);
  letter-spacing:.02em; padding:9px 16px; border:1px solid var(--hair); border-radius:999px;
  background:rgba(14,15,18,.4); backdrop-filter:blur(4px); }

.scrollcue{ position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index:4;
  width:24px; height:40px; border:1px solid var(--hair); border-radius:14px; display:grid; justify-items:center; }
.scrollcue span{ width:3px; height:8px; margin-top:7px; background:var(--ember); border-radius:2px; animation:cue 1.8s var(--ease) infinite; }
@keyframes cue{ 0%{ transform:translateY(0); opacity:1 } 70%{ transform:translateY(15px); opacity:0 } 100%{ opacity:0 } }

/* MARQUEE */
.marquee{ overflow:hidden; border-block:1px solid var(--hair-2); padding:20px 0; background:var(--obsidian-2); }
.marquee__track{ display:flex; align-items:center; gap:34px; white-space:nowrap; width:max-content;
  font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:clamp(18px,2.4vw,30px); color:var(--bone);
  animation:scroll-x 34s linear infinite; }
.marquee__track span{ opacity:.9; }
.marquee__track i{ color:var(--ember); font-style:normal; font-size:.6em; opacity:.8; }
@keyframes scroll-x{ to{ transform:translateX(-50%); } }

/* SERVICES */
.services .h2{ margin-bottom:54px; }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card{ position:relative; border:1px solid var(--hair); border-radius:16px;
  background:linear-gradient(180deg,var(--coal),var(--obsidian)); overflow:hidden; isolation:isolate;
  transition:transform .55s var(--ease), border-color .45s; }
.card:hover,.card:focus-within{ transform:translateY(-6px); border-color:var(--ember-line); }
.card__img{ aspect-ratio:3/2; overflow:hidden; border-bottom:1px solid var(--hair-2); }
.card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.card:hover .card__img img,.card:focus-within .card__img img{ transform:scale(1.06); }
.card__body{ padding:24px 26px 30px; }
.card__no{ font-family:'Space Grotesk',sans-serif; font-size:13px; color:var(--ember); letter-spacing:.1em; }
.card h3{ font-size:21px; margin:14px 0 10px; }
.card p{ color:var(--bone-dim); font-size:15px; }

/* WHY */
.why .h2{ margin-bottom:54px; }
.why__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.why__col{ padding:30px 28px; border:1px solid var(--hair-2); border-radius:16px; }
.why__col--us{ border-color:var(--ember-line); background:radial-gradient(120% 120% at 0% 0%,var(--ember-soft),transparent 60%); }
.why__tag{ font-weight:600; font-size:13px; letter-spacing:.04em; color:var(--ash); margin-bottom:12px; text-transform:uppercase; }
.why__txt{ color:var(--bone-dim); font-size:16px; }
.why__col--us .why__txt{ color:var(--bone); }

/* GUARANTEE — premium USP panel with running light + bolt watermark */
.guarantee__card{ position:relative; overflow:hidden; border:1px solid var(--hair); border-radius:24px;
  padding:clamp(38px,6vw,84px);
  background:radial-gradient(130% 150% at 92% 4%, rgba(255,90,54,.13), transparent 52%), linear-gradient(180deg,var(--coal),var(--obsidian)); }
.guarantee__glow{ position:absolute; right:-8%; top:-44%; width:56%; height:170%; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 60% 50%, var(--ember-soft), transparent 62%); filter:blur(46px); }
.guarantee__bolt{ position:absolute; right:-2%; bottom:-30%; height:178%; width:auto; z-index:0; pointer-events:none; }
.guarantee__bolt path{ fill:var(--ember); opacity:.07; }
.guarantee__content{ position:relative; z-index:2; max-width:720px; }
.guarantee__h{ font-size:clamp(40px,6.6vw,88px); letter-spacing:-.03em; margin:14px 0 18px; }
.guarantee__lede{ max-width:54ch; }
.guarantee__pts{ list-style:none; display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.guarantee__pts li{ display:inline-flex; align-items:center; gap:9px; font-size:14px; color:var(--bone-dim);
  border:1px solid var(--hair); border-radius:999px; padding:9px 17px; background:rgba(14,15,18,.45); }
.guarantee__pts li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ember); box-shadow:0 0 8px var(--ember); }

/* OFFER — the 24h wedge */
.offer__card{ position:relative; overflow:hidden; border:1px solid var(--ember-line); border-radius:24px;
  padding:clamp(34px,5vw,66px); display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,58px); align-items:center;
  background:radial-gradient(130% 150% at 0% 0%, rgba(255,90,54,.13), transparent 52%), linear-gradient(180deg,var(--coal),var(--obsidian)); }
.offer__h{ font-size:clamp(30px,4.4vw,54px); letter-spacing:-.025em; margin:12px 0 16px; }
.offer__price{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(46px,6.4vw,78px); color:var(--ember); line-height:1; letter-spacing:-.03em; display:flex; align-items:baseline; gap:10px; }
.offer__from{ font-size:.32em; color:var(--ash); font-weight:500; }
.offer__net{ font-size:.28em; color:var(--ash); font-weight:500; }
.offer__sub{ margin:18px 0 26px; }
.offer__cta{ display:flex; gap:14px; flex-wrap:wrap; }
.offer__note{ font-size:13px; margin-top:16px; }
.offer__anchor{ font-size:14px; color:var(--bone-dim,#9aa0a6); margin:6px 0 -2px; font-weight:500; }
.offer__anchor::before{ content:"≈ "; }
.eyebrow--slots{ color:#FF5A36; display:inline-flex; align-items:center; gap:9px; }
.eyebrow--slots::before{ content:""; width:8px; height:8px; border-radius:50%; background:#FF5A36; flex:none; animation:offerSlotPulse 2s infinite; }
@keyframes offerSlotPulse{ 0%{ box-shadow:0 0 0 0 rgba(255,90,54,.5) } 70%{ box-shadow:0 0 0 8px rgba(255,90,54,0) } 100%{ box-shadow:0 0 0 0 rgba(255,90,54,0) } }
.offer__list{ list-style:none; display:grid; gap:13px; }
.offer__list li{ position:relative; padding-left:28px; color:var(--bone-dim); font-size:15.5px; }
.offer__list li::before{ content:""; position:absolute; left:0; top:7px; width:7px; height:7px; border-radius:50%; background:var(--ember); box-shadow:0 0 8px var(--ember); }
.offer__cond{ color:var(--ash) !important; font-size:13px !important; }
.offer__cond::before{ background:var(--ash) !important; box-shadow:none !important; }
@media (max-width:820px){ .offer__card{ grid-template-columns:1fr; } }

/* WORK BANNER → portfolio */
.workbanner__in{ display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; }

/* WORK (legacy tiles — unused) */
.work__lede{ margin:18px 0 50px; }
.work__grid{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:240px; gap:16px; }
.tile{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--hair-2); }
.tile--wide{ grid-column:span 2; grid-row:span 1; }
.tile img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease), filter .5s; filter:saturate(.92); }
.tile:hover img{ transform:scale(1.06); filter:saturate(1.05); }
.tile__meta{ position:absolute; left:18px; bottom:16px; font-size:13.5px; color:var(--bone-dim);
  background:rgba(10,11,14,.55); backdrop-filter:blur(6px); padding:7px 13px; border-radius:999px; }
.tile__meta b{ color:#fff; font-weight:600; }

/* PROCESS */
.process .h2{ margin-bottom:56px; }
.steps{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; position:relative; }
.step{ position:relative; padding-top:26px; border-top:1px solid var(--hair); }
.step__no{ font-family:'Space Grotesk',sans-serif; font-size:14px; color:var(--ember); letter-spacing:.1em; }
.step h3{ font-size:22px; margin:14px 0 12px; }
.step p{ color:var(--bone-dim); font-size:15.5px; max-width:32ch; }

/* CTA */
.cta{ text-align:center; overflow:hidden; }
.cta__in{ position:relative; z-index:2; display:grid; justify-items:center; gap:18px; }
.cta__h{ font-size:clamp(40px,7vw,82px); }
.cta__btns{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:10px; }

/* FOOTER */
.foot{ border-top:1px solid var(--hair-2); padding:44px 0; }
.foot__in{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; justify-content:space-between; }
.foot__legal{ font-size:13px; }
.foot__legal a:hover,.foot__copy a:hover{ color:var(--ember); }
.foot__copy{ font-size:13px; }
.foot__links{ display:flex; flex-wrap:wrap; gap:18px; font-size:13px; }
.foot__links a{ color:var(--ash); }
.foot__links a:hover{ color:var(--ember); }

/* RESPONSIVE */
@media (max-width:900px){
  /* zoom the hero video out on mobile so more of the bolt is visible */
  .hero__video{ object-fit:contain; object-position:center 42%; }
  .hero__bg{ background-size:contain; background-repeat:no-repeat; background-position:center 42%; }
  .cards,.why__grid,.steps{ grid-template-columns:1fr; }
  .workbanner__in{ flex-direction:column; align-items:flex-start; }
  .work__grid{ grid-template-columns:1fr 1fr; grid-auto-rows:200px; }
  .tile--wide{ grid-column:span 2; }
  .nav__links a:not(.btn){ display:none; }
}
@media (max-width:560px){
  .work__grid{ grid-template-columns:1fr; }
  .tile--wide{ grid-column:span 1; }
}