/* ==========================================================================
   AD PHASE — Core stylesheet
   Written with logical properties throughout so the layout is natively RTL,
   not a mirrored LTR document. dir="rtl" on <html> drives all of it.
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  scroll-padding-top: var(--header-h);
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition: background var(--dur-med) var(--ease-in-out), color var(--dur-med) var(--ease-in-out);
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
svg{ display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
input,textarea,select{ font:inherit; color:inherit; }

::selection{ background:var(--brand); color:var(--on-brand); }

:focus-visible{
  outline: 2px solid var(--brand-strong);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- type -- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.15;
  margin:0;
  letter-spacing:0;
}
p{ margin:0; }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--fs-micro);
  color:var(--brand-strong);
  margin-bottom:var(--sp-4);
}
.eyebrow::before{
  content:"";
  width:20px;height:1px;
  background:var(--brand-strong);
  display:inline-block;
}

.lead{
  font-size:var(--fs-lead);
  color:var(--ink-soft);
  max-width:52ch;
}

.section-head{
  max-width:760px;
}
.section-head h2{ font-size:var(--fs-h2); }
.section-head .lead{ margin-top:var(--sp-3); }

.text-accent{ color:var(--brand-strong); }

/* -------------------------------------------------------------- layout -- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

section{ position:relative; }

.section-pad{ padding-block: clamp(2rem, 4vw, 3.25rem); }
.section-pad-sm{ padding-block: clamp(1.1rem, 2.2vw, 1.75rem); }

.grid{ display:grid; gap:var(--sp-6); }

.stack{ display:flex; flex-direction:column; }

.row{ display:flex; align-items:center; }

.hidden{ display:none !important; }

@media (max-width: 900px){
  .section-pad{ padding-block: clamp(2rem, 4vw, 3.25rem); }
  .section-pad-sm{ padding-block: var(--sp-7); }
}

/* ------------------------------------------------------------- buttons -- */
.btn{
  --btn-pad-b: .95em;
  --btn-pad-i: 1.7em;
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding: var(--btn-pad-b) var(--btn-pad-i);
  border-radius: var(--r-pill);
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--fs-small);
  white-space:nowrap;
  isolation:isolate;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.btn:active{ transform: translateY(1px) scale(.99); }

.btn-primary{
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: var(--brand-glow-sm);
}
.btn-primary:hover{ box-shadow: var(--brand-glow); transform: translateY(-2px); }

.btn-ghost{
  background: var(--glass-bg);
  color: var(--ink);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
.btn-ghost:hover{ border-color: var(--brand-line); transform: translateY(-2px); }

.btn-icon{
  width:1.6em;height:1.6em;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.14);
  flex-shrink:0;
}
.btn-ghost .btn-icon{ background: rgba(255,255,255,0.14); }
:root[data-theme="light"] .btn-ghost .btn-icon{ background: rgba(0,0,0,0.08); }
.btn-icon svg{ width:.85em; height:.85em; }

/* magnetic wrapper target */
.magnetic{ display:inline-block; will-change:transform; }

/* ------------------------------------------------------------ glass ui -- */
.glass{
  background: var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.card{
  background: var(--bg-soft);
  border:1px solid var(--line);
  border-radius: var(--r-md);
}

/* ------------------------------------------------------------- divider -- */
.rule{
  height:1px;
  background: var(--line);
  border:0;
  margin:0;
}

/* -------------------------------------------------------- skip-to-main -- */
.skip-link{
  position:fixed;
  inset-inline-start:var(--sp-4);
  top:-60px;
  background:var(--brand);
  color:var(--on-brand);
  padding:.8em 1.4em;
  border-radius:var(--r-sm);
  z-index:999;
  font-weight:700;
  transition: top var(--dur-fast);
}
.skip-link:focus{ top: var(--sp-4); }

/* --------------------------------------------------------- scrollbars -- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--bg-soft-2); border-radius:99px; border:2px solid var(--bg); }

/* ==========================================================================
   HEADER / NAVIGATION
   ========================================================================== */
.site-header{
  position:fixed;
  inset-inline:0;
  top:0;
  z-index:100;
  height:var(--header-h);
  display:flex;
  align-items:center;
  transition: height var(--dur-med) var(--ease-in-out), background var(--dur-med), border-color var(--dur-med);
  border-bottom:1px solid transparent;
}
.site-header::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(13,23,18,0.0);
  backdrop-filter: blur(0px);
  transition: background var(--dur-med), backdrop-filter var(--dur-med);
  z-index:-1;
}
:root[data-theme="light"] .site-header::before{ background: rgba(248,245,236,0.0); }

.site-header.is-scrolled{
  height:var(--header-h-shrunk);
  border-bottom-color:var(--line);
}
.site-header.is-scrolled::before{
  background: rgba(13,23,18,0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
:root[data-theme="light"] .site-header.is-scrolled::before{
  background: rgba(248,245,236,0.78);
}

.header-inner{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--sp-6);
}

.brand-mark{
  display:flex; align-items:center;
  flex-shrink:0;
}
.brand-mark img{ height:34px; width:auto; display:block; }
.header-inner .brand-mark img{ height:32px; transition: height var(--dur-med); }
.site-header.is-scrolled .brand-mark img{ height:26px; }
.footer-brand .brand-mark img{ height:38px; }

@media (max-width: 640px){
  .header-inner .brand-mark img{ height:22px; }
  .site-header.is-scrolled .brand-mark img{ height:20px; }
}

.main-nav{
  display:flex;
  align-items:center;
  gap: var(--sp-6);
}
.main-nav ul{ display:flex; align-items:center; gap: var(--sp-5); }
.main-nav a{
  position:relative;
  font-size:var(--fs-small);
  font-weight:600;
  color:var(--ink-soft);
  padding-block:.4em;
  white-space:nowrap;                       /* a nav label never wraps onto two lines */
  transition:color var(--dur-fast);
}
.main-nav a::after{
  content:"";
  position:absolute; inset-inline-start:0; bottom:-2px;
  width:0; height:2px;
  background:var(--brand-strong);
  transition:width var(--dur-fast) var(--ease-out);
}
.main-nav a:hover,
.main-nav a.is-active{ color:var(--ink); }
.main-nav a:hover::after,
.main-nav a.is-active::after{ width:100%; }

.nav-dropdown{ position:relative; }
.nav-dropdown > button{
  display:flex; align-items:center; gap:.4em;
  font-size:var(--fs-small); font-weight:600; color:var(--ink-soft);
}
.nav-dropdown > button:hover{ color:var(--ink); }
.nav-dropdown svg{ width:.7em; transition:transform var(--dur-fast); }
.nav-dropdown[aria-expanded="true"] svg{ transform:rotate(180deg); }

.dropdown-panel{
  position:absolute;
  top:calc(100% + 18px);
  inset-inline-start:50%;
  transform:translateX(-50%) translateY(-8px);
  min-width:280px;
  padding:var(--sp-3);
  border-radius:var(--r-md);
  opacity:0; visibility:hidden;
  transition:opacity var(--dur-fast), transform var(--dur-fast), visibility var(--dur-fast);
  box-shadow:var(--shadow-3);
}
:root[dir="rtl"] .dropdown-panel{ transform:translateX(50%) translateY(-8px); }
.nav-dropdown[aria-expanded="true"] .dropdown-panel{
  opacity:1; visibility:visible;
  transform:translateX(-50%) translateY(0);
}
:root[dir="rtl"] .nav-dropdown[aria-expanded="true"] .dropdown-panel{ transform:translateX(50%) translateY(0); }

.dropdown-panel a{
  display:flex; align-items:center; gap:.7em;
  padding:.75em .9em;
  border-radius:var(--r-sm);
  font-size:var(--fs-small); font-weight:600; color:var(--ink-soft);
  transition:background var(--dur-fast), color var(--dur-fast);
}
.dropdown-panel a:hover{ background:var(--glass-bg-2); color:var(--ink); }
.dropdown-panel a .ic{
  width:34px;height:34px; border-radius:10px; flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-deep); color:var(--brand-strong);
}
.dropdown-panel a .ic svg{ width:16px;height:16px; }

.header-actions{ display:flex; align-items:center; gap: var(--sp-4); }

/* theme toggle -------------------------------------------------------- */
.theme-toggle{
  position:relative;
  width:56px; height:30px;
  border-radius:999px;
  background: var(--glass-bg-2);
  border:1px solid var(--glass-border);
  flex-shrink:0;
}
.theme-toggle .knob{
  position:absolute;
  top:3px; inset-inline-start:3px;
  width:22px; height:22px;
  border-radius:50%;
  background: var(--brand-strong);
  display:flex; align-items:center; justify-content:center;
  transition: inset-inline-start var(--dur-med) var(--ease-in-out), background var(--dur-med);
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}
:root[data-theme="light"] .theme-toggle .knob{
  inset-inline-start:31px;
  background:#E8B94A;
}
.theme-toggle .knob svg{ width:12px;height:12px; color:#06130D; }
.theme-toggle .icon-sun,
.theme-toggle .icon-moon{
  position:absolute; top:50%; transform:translateY(-50%);
  width:13px; height:13px; color:var(--ink-faint);
}
.theme-toggle .icon-moon{ inset-inline-start:7px; }
.theme-toggle .icon-sun{ inset-inline-end:7px; }

.menu-toggle{
  display:none;
  width:44px;height:44px;
  border-radius:50%;
  align-items:center; justify-content:center;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  flex-shrink:0;
}
.menu-toggle span{
  position:relative;
  width:16px; height:2px; background:var(--ink);
  transition: background var(--dur-fast);
}
.menu-toggle span::before,
.menu-toggle span::after{
  content:""; position:absolute; inset-inline:0;
  height:2px; background:var(--ink);
  transition: transform var(--dur-fast), top var(--dur-fast), opacity var(--dur-fast);
}
.menu-toggle span::before{ top:-6px; }
.menu-toggle span::after{ top:6px; }
.menu-toggle.is-open span{ background:transparent; }
.menu-toggle.is-open span::before{ top:0; transform:rotate(45deg); }
.menu-toggle.is-open span::after{ top:0; transform:rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0;
  z-index:90;
  background:var(--bg);
  padding: calc(var(--header-h) + var(--sp-6)) var(--gutter) var(--sp-8);
  display:flex; flex-direction:column; gap:var(--sp-7);
  transform: translateY(-12px);
  opacity:0; visibility:hidden;
  transition: opacity var(--dur-med) var(--ease-in-out), transform var(--dur-med) var(--ease-in-out), visibility var(--dur-med);
}
.mobile-nav.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.mobile-nav ul{ display:flex; flex-direction:column; gap:var(--sp-5); }
.mobile-nav a{
  font-family:var(--font-display);
  font-size:1.5rem; font-weight:700; color:var(--ink);
}
.mobile-nav .sub-list{ margin-top:var(--sp-4); padding-inline-start:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3); }
.mobile-nav .sub-list a{ font-size: 1.0625rem; color:var(--ink-soft); font-weight:600; }

.header-cta{ font-size:var(--fs-micro); padding: .8em 1.3em; }

@media (max-width: 1240px){                /* 7 links need room: tighten before the hamburger takes over */
  .main-nav ul{ gap: var(--sp-4); }
  .header-cta{ padding: .75em 1.05em; }
}
@media (max-width: 1100px){
  .main-nav ul{ gap: var(--sp-3); }
  .main-nav a{ font-size: .9rem; }
}
@media (max-width: 1020px){
  .main-nav{ display:none; }
  .menu-toggle{ display:inline-flex; }
  .header-cta{ display:none; }
}

/* ==========================================================================
   HERO — cinematic layered depth scene
   Rocket lives in the background; content is the stable focal point;
   data cards float in the foreground at different parallax depths.
   ========================================================================== */
.hero{
  position:relative;
  min-height: 100svh;
  display:flex;
  align-items:center;
  padding-top: calc(var(--header-h) + var(--sp-6));
  padding-bottom: var(--sp-8);
  overflow:hidden;
  isolation:isolate;
  --par-x:0px; --par-y:0px;   /* pointer parallax, set by JS */
  --scroll:0;                 /* 0..1 scroll progress within hero */
}

/* every parallax layer reads --depth and the shared pointer offset
   (the rocket layer is excluded — it composes flight + parallax + scroll itself) */
.hero [data-depth]:not(.hero-rocket-layer){
  will-change: transform;
  transform: translate3d(calc(var(--par-x) * var(--depth)), calc(var(--par-y) * var(--depth)), 0);
}

/* ---- Layer 0: atmosphere / gradients ---------------------------------- */
.hero-atmos{
  position:absolute; inset:-12%;
  z-index:0;
  background:
    radial-gradient(60% 55% at 72% 30%, var(--brand-wash), transparent 60%),
    radial-gradient(48% 45% at 18% 82%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 65%),
    radial-gradient(90% 90% at 50% 8%, rgba(27,74,65,.55), transparent 60%);
  animation: atmosDrift 24s ease-in-out infinite alternate;
}
:root[data-theme="light"] .hero-atmos{
  background:
    radial-gradient(60% 55% at 72% 30%, rgba(28,122,76,.10), transparent 60%),
    radial-gradient(48% 45% at 18% 82%, rgba(28,122,76,.06), transparent 65%);
}
@keyframes atmosDrift{
  from{ transform: translate3d(calc(var(--par-x) * .04), calc(var(--par-y) * .04), 0) scale(1); }
  to{ transform: translate3d(calc(var(--par-x) * .04 - 2%), calc(var(--par-y) * .04 + 1.5%), 0) scale(1.05); }
}

/* ---- Layer 1: grid + starfield --------------------------------------- */
.hero-grid{
  position:absolute; inset:-5%; z-index:1;
  opacity:.5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 65% at 60% 35%, black, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 65% at 60% 35%, black, transparent 78%);
}
.hero .starfield{ z-index:1; }
.hero .starfield.layer-2{ z-index:1; }

/* ---- rocket trajectory (growth curve) -------------------------------- */
.hero-trail{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  pointer-events:none;
}
.hero-trail path{
  fill:none;
  stroke: var(--brand-line);
  stroke-width:1.5;
  stroke-dasharray: 5 9;
  stroke-linecap:round;
  opacity:.6;
}

/* ---- Layer 2: rocket, in the background ------------------------------ */
.hero-rocket-layer{
  position:absolute;
  z-index:2;
  /* anchored top-start; JS flies it across the section along the growth curve
     by setting --fx/--fy (in px). Falls back to a centred rest position. */
  top:0; left:0; /* physical left: JS positions in px, direction-independent */
  width:min(38vw, 460px); aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  transform: translate3d(calc(var(--fx, 0px) + var(--par-x) * .14), calc(var(--fy, 0px) + var(--par-y) * .14 + var(--scroll) * -30px), 0);
  will-change: transform;
}
.hero-orbit{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.hero-orbit .circle{ position:absolute; aspect-ratio:1; border-radius:50%; border:1px solid var(--glass-border); }
.orbit-outer{ width:100%; animation: spin 90s linear infinite; }
.orbit-inner{ width:66%; border-style:dashed; opacity:.5; animation: spin 60s linear infinite reverse; }
.rocket-figure{
  position:relative; z-index:2;
  width:52%;
  opacity:.72;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.5)) drop-shadow(0 0 90px color-mix(in srgb, var(--brand) 24%, transparent));
  /* organic life layered on top of the JS-driven flight: sway + breathing */
  animation: rocketCruise 9s ease-in-out infinite alternate;
  will-change: transform;
}
:root[data-theme="light"] .rocket-figure{
  opacity:.85;
  filter: drop-shadow(0 30px 50px rgba(20,32,25,.16)) drop-shadow(0 0 50px rgba(28,122,76,.18));
}
/* subtle life: gentle sway + scale breathing, not a bounce */
@keyframes rocketCruise{
  0%   { transform: rotate(-3deg) scale(.985); }
  50%  { transform: rotate(2.5deg) scale(1.015); }
  100% { transform: rotate(-1.5deg) scale(.995); }
}
/* the orbit rings stay centred in the layer; only the layer travels */
.hero-rocket-layer.is-flying .hero-orbit{ opacity:.5; }

/* ---- Layer 3–4: floating data cards --------------------------------- */
.hero-cards{ position:absolute; inset:0; z-index:6; pointer-events:none; }
.hero-card{
  position:absolute;
  padding: .85rem 1rem;
  border-radius: var(--r-md);
  background: rgba(18,32,25,.72);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-3);
  font-size: var(--fs-micro);
  will-change: transform;
}
:root[data-theme="light"] .hero-card{ background: rgba(255,255,255,.78); }
.hero-card .hc-label{ color:var(--ink-soft); font-weight:600; display:block; }
.hero-card .hc-sub{ color:var(--ink-faint); font-size:.72em; }
.hero-card .hc-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.5rem; }
.hero-card .hc-pill{ font-family:var(--font-display); font-weight:700; font-size:.78em; padding:.15em .55em; border-radius:var(--r-pill); }
.hero-card .hc-pill.up{ color:var(--brand-strong); background:var(--brand-wash); }
.hero-card .hc-big{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:var(--ink); display:flex; align-items:baseline; gap:.3em; direction:ltr; }
.hero-card .hc-big span{ font-size: 0.78rem; color:var(--ink-faint); font-weight:600; }
.hero-card .hc-mini{ font-family:var(--font-display); font-weight:800; color:var(--brand-strong); font-size: 1.0625rem; margin-inline-start:.4em; direction:ltr; }
.hc-spark{ width:112px; height:36px; display:block; }
.hc-spark path{ fill:none; stroke:var(--brand-strong); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 6px color-mix(in srgb, var(--brand) 50%, transparent)); }
.hc-bars{ display:flex; align-items:flex-end; gap:4px; height:36px; margin-top:.55rem; }
.hc-bars i{ width:9px; border-radius:3px 3px 1px 1px; background:linear-gradient(to top, var(--brand-deep), var(--brand-strong)); height:var(--h); }
.hc-meter{ height:7px; border-radius:99px; background:var(--glass-bg-2); overflow:hidden; margin-top:.2rem; width:150px; }
.hc-meter b{ display:block; height:100%; width:var(--v); background:var(--brand-strong); border-radius:inherit; }
.hc-ring{ --p:0; width:46px; aspect-ratio:1; border-radius:50%; flex-shrink:0;
  background:conic-gradient(var(--brand-strong) calc(var(--p)*1%), var(--glass-bg-2) 0); display:grid; place-items:center; }
.hc-ring b{ width:74%; aspect-ratio:1; border-radius:50%; background:var(--bg-elevated); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size: 0.85rem; color:var(--brand-strong); }
.hc-score, .hc-social{ display:flex; align-items:center; gap:.7rem; }
.hc-dot{ width:8px; height:8px; border-radius:50%; background:var(--brand-strong); box-shadow:0 0 10px var(--brand-strong); animation: pulseDot 2.4s ease-in-out infinite; }

/* positions — kept clear of the centre text column */
.hc-analytics{ top:20%; inset-inline-end:6%; }
.hc-score{    top:60%; inset-inline-end:10%; }
.hc-revenue{  top:30%; inset-inline-start:6%; }
.hc-conv{     top:66%; inset-inline-start:8%; }
.hc-social{   top:13%; inset-inline-start:22%; }

/* each floats on its own rhythm (layered on top of the JS parallax var) */
.hero-card[data-float="1"]{ animation: floatA 7s ease-in-out infinite; }
.hero-card[data-float="2"]{ animation: floatB 9s ease-in-out infinite; }
.hero-card[data-float="3"]{ animation: floatC 8s ease-in-out infinite; }
.hero-card[data-float="4"]{ animation: floatD 11s ease-in-out infinite; }
@keyframes floatA{ 0%,100%{ translate:0 0; rotate:-.6deg } 50%{ translate:0 -9px; rotate:.6deg } }
@keyframes floatB{ 0%,100%{ translate:0 0; rotate:.8deg } 50%{ translate:0 -14px; rotate:-.5deg } }
@keyframes floatC{ 0%,100%{ translate:0 0; rotate:-.4deg } 50%{ translate:0 -6px; rotate:.4deg } }
@keyframes floatD{ 0%,100%{ translate:0 0; rotate:1deg } 50%{ translate:0 -18px; rotate:-1deg } }

/* ---- Layer 5: hero content (stable focal point) --------------------- */
.hero-inner{
  position:relative;
  z-index:10;
  width:100%;
  display:flex;
  justify-content:center;
  text-align:center;
  /* content drifts up + fades slightly on scroll */
  translate: 0 calc(var(--scroll) * -40px);
  opacity: calc(1 - var(--scroll) * .6);
}
/* soft scrim keeps the headline legible over the rocket/cards behind it */
.hero-inner::before{
  content:"";
  position:absolute; z-index:-1;
  inset:-8% -6%;
  background: radial-gradient(58% 52% at 50% 46%, rgba(13,23,18,.78), rgba(13,23,18,.42) 55%, transparent 75%);
  pointer-events:none;
}
:root[data-theme="light"] .hero-inner::before{
  background: radial-gradient(58% 52% at 50% 46%, rgba(248,245,236,.82), rgba(248,245,236,.5) 55%, transparent 75%);
}
.hero-copy{ max-width: 60rem; }
.hero-copy .eyebrow{ justify-content:center; }

.hero-title{
  font-size: var(--fs-display);
  line-height:1.12;
  margin-inline:auto;
  margin-bottom: var(--sp-5);
  max-width: 20ch;
}
.hero-title .reveal-line{ display:block; overflow:hidden; }
.hero-title .reveal-line > span{ display:inline-block; will-change:transform; }

.hero-lead{
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-width: 54ch;
  margin-inline:auto;
  margin-bottom: var(--sp-6);
}
.hero-ctas{ display:flex; align-items:center; gap: var(--sp-4); flex-wrap:wrap; justify-content:center; }

.hero-scroll-cue{
  display:flex; align-items:center; gap:.8em;
  justify-content:center;
  margin-top: var(--sp-7);
  font-size:var(--fs-micro);
  color:var(--ink-faint);
  font-weight:600;
}
.hero-scroll-cue .line{
  width:1px; height:34px;
  background: linear-gradient(var(--brand-strong), transparent);
  position:relative; overflow:hidden;
}
.hero-scroll-cue .line::after{
  content:""; position:absolute; inset-inline:0; top:-100%;
  height:100%; background: linear-gradient(var(--ink), transparent);
  animation: cueDrop 2.4s var(--ease-in-out) infinite;
}

/* ---------------------------------------------------------- responsive -- */
@media (max-width: 1080px){
  .hero-rocket-layer{ width:min(64vw, 420px); }
  .hc-social{ display:none; }
  .hc-analytics{ inset-inline-end:2%; } .hc-conv{ inset-inline-start:2%; }
  .hc-score{ inset-inline-end:3%; } .hc-revenue{ inset-inline-start:2%; }
}
@media (max-width: 760px){
  .hero{ min-height:auto; text-align:center; }
  .hero-rocket-layer{ width:74vw; opacity:.7; }
  /* keep only two small, non-overlapping cards on phones */
  .hc-analytics{ top:11%; inset-inline-end:4%; scale:.82; }
  .hc-revenue{ bottom:6%; top:auto; inset-inline-start:4%; scale:.82; }
  .hc-score, .hc-conv, .hc-social{ display:none; }
  .hero-title{ font-size: var(--fs-display); }
}
@media (max-width: 420px){
  .hero-card{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .hero-atmos, .orbit-outer, .orbit-inner, .rocket-figure,
  .hero-card, .hero-scroll-cue .line::after{ animation:none !important; }
  .hero [data-depth]:not(.hero-rocket-layer){ transform:none !important; }
  .hero-inner{ translate:0 0 !important; opacity:1 !important; }
  /* rocket rests, unmoving, in the lower-start negative space */
  .hero-rocket-layer{ transform: translate3d(34vw, 46vh, 0) !important; }
}

/* ==========================================================================
   STATS STRIP
   ========================================================================== */
.stats-strip{
  border-block:1px solid var(--line);
}
.stats-grid{
  grid-template-columns: repeat(3, 1fr);
}
.stat{
  padding-block: var(--sp-7);
  text-align:center;
  position:relative;
}
.stat + .stat{ border-inline-start:1px solid var(--line); }
.stat .num{
  font-family:var(--font-display);
  font-size: var(--fs-stat);
  font-weight:800;
  color:var(--ink);
  display:flex; align-items:baseline; justify-content:center; gap:.1em;
}
.stat .num .suffix{ color:var(--brand-strong); font-size:.55em; }
.stat .label{ margin-top:var(--sp-2); color:var(--ink-soft); font-size:var(--fs-small); max-width:24ch; margin-inline:auto; }

@media (max-width: 760px){
  .stats-grid{ grid-template-columns:1fr; }
  .stat + .stat{ border-inline-start:0; border-top:1px solid var(--line); }
}

/* ==========================================================================
   INTRO / WHAT WE DO
   ========================================================================== */
.intro-layout{
  display:grid;
  grid-template-columns: .8fr 1.2fr;
  gap: var(--sp-8);
  align-items:start;
}
.intro-pillars{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.pillar{
  display:flex; align-items:flex-start; gap: var(--sp-3);
  padding: var(--sp-4) 0;
  border-top:1px solid var(--line);
}
.pillar .ic{
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-deep); color:var(--brand-strong);
}
.pillar .ic svg{ width:18px;height:18px; }
.pillar h4{ font-size: 1.0625rem; margin-bottom:.3em; }
.pillar p{ color:var(--ink-soft); font-size:var(--fs-small); }

@media (max-width: 900px){
  .intro-layout{ grid-template-columns:1fr; }
  .intro-pillars{ grid-template-columns:1fr; }
}

/* ==========================================================================
   SERVICES — editorial rows, not identical cards
   ========================================================================== */
.services-list{ border-top:1px solid var(--line); margin-top:var(--sp-7); }
.service-row{
  position:relative;
  display:grid;
  grid-template-columns: 90px 1fr auto;
  align-items:center;
  gap: var(--sp-6);
  padding-block: var(--sp-6);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  transition: padding var(--dur-med) var(--ease-in-out);
}
.service-row .index{
  font-family:var(--font-display);
  font-size: 1.125rem; font-weight:700;
  color:var(--ink-faint);
  transition: color var(--dur-fast);
}
.service-row .body h3{
  font-size:var(--fs-h3);
  transition: color var(--dur-fast), transform var(--dur-med) var(--ease-out);
}
.service-row .body p{
  color:var(--ink-soft);
  max-width:58ch;
  margin-top: var(--sp-2);
  font-size:var(--fs-small);
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition: max-height var(--dur-med) var(--ease-in-out), opacity var(--dur-med), margin var(--dur-med);
}
.service-row .arrow{
  width:52px;height:52px;border-radius:50%;
  border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;
  transform: rotate(135deg);
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
  flex-shrink:0;
}
.service-row .arrow svg{ width:18px;height:18px; }

.service-row .preview{
  position:absolute;
  inset-inline-end: var(--gutter);
  top:50%;
  transform: translateY(-50%) translateX(24px);
  width:180px; height:130px;
  border-radius: var(--r-md);
  opacity:0;
  pointer-events:none;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
  box-shadow: var(--shadow-3);
  z-index:0;
}
:root[dir="rtl"] .service-row .preview{ transform: translateY(-50%) translateX(-24px); }

.service-row:hover{ padding-inline-start: var(--sp-4); }
.service-row:hover .index{ color:var(--brand-strong); }
.service-row:hover .body h3{ color:var(--brand-strong); transform: translateX(-6px); }
:root[dir="rtl"] .service-row:hover .body h3{ transform: translateX(6px); }
.service-row:hover .body p{ max-height:6em; opacity:1; margin-top:var(--sp-2); }
.service-row:hover .arrow{ background:var(--brand); border-color:var(--brand); transform:rotate(0deg); color:var(--on-brand); }
.service-row:hover .preview{ opacity:1; transform: translateY(-50%) translateX(0); }

@media (max-width: 860px){
  .service-row{ grid-template-columns: 50px 1fr auto; gap:var(--sp-4); }
  .service-row .preview{ display:none; }
  .service-row .body p{ max-height:10em; opacity:1; margin-top:var(--sp-2); } /* always shown on touch */
}

/* ==========================================================================
   WHY US
   ========================================================================== */
.why-grid{ grid-template-columns:repeat(3,1fr); }
.why-card{
  padding: var(--sp-6);
  border-radius: var(--r-lg);
}
.why-card .ic{
  width:46px;height:46px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-deep); color:var(--brand-strong);
  margin-bottom: var(--sp-4);
}
.why-card .ic svg{ width:22px;height:22px; }
.why-card h3{ font-size: 1.125rem; margin-bottom:.5em; transition: color .35s var(--ease-out); }
.why-card p{ color:var(--ink-soft); font-size:var(--fs-small); transition: color .35s var(--ease-out); }

/* hover: the card lifts and fills with the brand's light green (same language as the active service card) */
.why-card{ position:relative; transition: transform .45s var(--ease-out), background-color .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .5s var(--ease-out); }
.why-card .ic{ transition: background-color .35s var(--ease-out), transform .5s var(--ease-out); }
@media (hover:hover){
  .why-grid .why-card:hover{
    transform: translateY(-8px); background: var(--brand); border-color: var(--brand);
    box-shadow: 0 32px 60px -30px color-mix(in srgb, var(--brand) 60%, transparent);
  }
  .why-grid .why-card:hover h3{ color:#0D1712; }
  .why-grid .why-card:hover p{ color:#2C3B10; }
  .why-grid .why-card:hover .ic{ background:#0F1A14; transform: rotate(-6deg) scale(1.08); }
}
.why-grid .why-card:active{ transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce){ .why-card, .why-card .ic{ transition:none; } .why-grid .why-card:hover{ transform:none; } }

@media (max-width: 900px){ .why-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 620px){ .why-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   PROCESS (genuine sequence → numbered)
   ========================================================================== */
.process-list{ position:relative; }
.process-step{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap: var(--sp-6);
  padding-block: var(--sp-6);
  border-top:1px solid var(--line);
}
.process-step:last-child{ border-bottom:1px solid var(--line); }
.process-step .n{
  font-family:var(--font-display);
  font-size: 2.1rem; font-weight:800;
  color: var(--brand);                                  /* phosphor numerals */
  -webkit-text-stroke: 0;
  text-shadow: 0 0 26px color-mix(in srgb, var(--brand) 30%, transparent);
}
:root[data-theme="light"] .process-step .n{ -webkit-text-stroke: 1px var(--brand-strong); text-shadow: none; }   /* keeps the numerals legible on ivory */
.process-step h3{ font-size: 1.125rem; margin-bottom:.4em; }
.process-step p{ color:var(--ink-soft); max-width:60ch; }

@media (max-width:700px){
  .process-step{ grid-template-columns: 60px 1fr; gap:var(--sp-4); }
  .process-step .n{ font-size:1.6rem; }
}

/* ==========================================================================
   PORTFOLIO / CASE STUDIES
   ========================================================================== */
.portfolio-feature{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--sp-7);
  align-items:stretch;
  border-radius: var(--r-lg);
  overflow:hidden;
  background:var(--bg-soft);
  border:1px solid var(--line);
}
.portfolio-feature .media{
  position:relative;
  min-height:360px;
  overflow:hidden;
}
.portfolio-feature .media img{
  width:100%; height:100%; object-fit:cover;
  transition: transform 1.2s var(--ease-out);
}
.portfolio-feature:hover .media img{ transform:scale(1.06); }
.portfolio-feature .media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(13,23,18,.55), transparent 60%);
}
.portfolio-feature .info{
  padding: var(--sp-7);
  display:flex; flex-direction:column; justify-content:center;
}
.portfolio-feature .tag{
  font-size:var(--fs-micro); color:var(--brand-strong); font-weight:700; margin-bottom:var(--sp-3);
}
.portfolio-feature h3{ font-size:var(--fs-h2); margin-bottom:var(--sp-3); }
.portfolio-feature p{ color:var(--ink-soft); margin-bottom:var(--sp-5); }

.portfolio-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.portfolio-card{
  position:relative;
  border-radius: var(--r-md);
  overflow:hidden;
  aspect-ratio: 4/5;
  background:var(--bg-soft);
  border:1px solid var(--line);
}
.portfolio-card img{
  width:100%; height:100%; object-fit:cover;
  transition: transform 1s var(--ease-out);
}
.portfolio-card:hover img{ transform:scale(1.08); }
.portfolio-card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(9,16,12,.86) 0%, rgba(9,16,12,.15) 55%, transparent 75%);
}
.portfolio-card .meta{
  position:absolute; inset-inline:0; bottom:0;
  padding: var(--sp-4);
  z-index:2;
  transform: translateY(10px);
  opacity:.85;
  transition: transform var(--dur-med) var(--ease-out);
}
.portfolio-card:hover .meta{ transform: translateY(0); opacity:1; }
.portfolio-card .meta .cat{ font-size:var(--fs-micro); color:var(--brand-strong); font-weight:700; }
.portfolio-card .meta h4{ font-size: 1.0625rem; color:#fff; margin-top:.3em; font-family:var(--font-display); }
.portfolio-card .accent-line{
  position:absolute; inset-inline:0; bottom:0; height:2px;
  background:var(--brand-strong);
  transform:scaleX(0); transform-origin: right;
  transition: transform var(--dur-med) var(--ease-out);
  z-index:3;
}
:root[dir="rtl"] .portfolio-card .accent-line{ transform-origin:left; }
.portfolio-card:hover .accent-line{ transform:scaleX(1); }

@media (max-width: 980px){
  .portfolio-feature{ grid-template-columns:1fr; }
  .portfolio-strip{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 560px){
  .portfolio-strip{ grid-template-columns:1fr 1fr; gap:var(--sp-3); }
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonial-track{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap: var(--sp-5);
}
.testimonial{
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  display:flex; flex-direction:column; gap:var(--sp-5);
}
.testimonial p{ font-size: 1.0625rem; color:var(--ink); }
.testimonial .who{ display:flex; align-items:center; gap:var(--sp-3); margin-top:auto; }
.testimonial .avatar{
  width:44px;height:44px;border-radius:50%;
  background:var(--brand-deep); color:var(--brand-strong);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700;
}
.testimonial .name{ font-weight:700; font-size:var(--fs-small); }
.testimonial .place{ color:var(--ink-faint); font-size:var(--fs-micro); }

@media (max-width: 900px){ .testimonial-track{ grid-template-columns:1fr; } }

/* ==========================================================================
   LOGO STRIP
   ========================================================================== */
.logo-strip{
  display:flex; align-items:center; justify-content:space-between; gap: var(--sp-7);
  flex-wrap:wrap;
  opacity:.75;
  filter: grayscale(1);
}
:root[data-theme="light"] .logo-strip{ opacity:.6; }
.logo-strip img{ height:30px; max-width:130px; width:auto; object-fit:contain; }

/* ==========================================================================
   BLOG PREVIEW
   ========================================================================== */
.blog-grid{ grid-template-columns:repeat(3,1fr); }
.blog-card{
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--bg-soft);
  border:1px solid var(--line);
  display:flex; flex-direction:column;
}
.blog-card .thumb{ aspect-ratio:16/10; overflow:hidden; }
.blog-card .thumb img{ width:100%;height:100%;object-fit:cover; transition:transform .8s var(--ease-out); }
.blog-card:hover .thumb img{ transform:scale(1.07); }
.blog-card .body{ padding: var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3); flex:1; }
.blog-card .cat{ font-size:var(--fs-micro); color:var(--brand-strong); font-weight:700; }
.blog-card h3{ font-size: 1.0625rem; }
.blog-card .meta{ margin-top:auto; display:flex; align-items:center; gap:var(--sp-3); color:var(--ink-faint); font-size:var(--fs-micro); }

@media (max-width: 900px){ .blog-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 620px){ .blog-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding-block: var(--sp-5);
  text-align:start;
  font-family:var(--font-display); font-weight:700; font-size: 1.0625rem;
}
.faq-q .plus{
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line-strong);
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.faq-q .plus::before,.faq-q .plus::after{
  content:""; position:absolute; background:var(--ink-soft);
}
.faq-q .plus::before{ width:12px; height:1.5px; }
.faq-q .plus::after{ width:1.5px; height:12px; transition:transform var(--dur-fast); }
.faq-item.is-open .faq-q .plus::after{ transform:rotate(90deg); scale:0; }
.faq-item.is-open .faq-q{ color:var(--brand-strong); }
.faq-a{
  max-height:0; overflow:hidden;
  transition: max-height var(--dur-med) var(--ease-in-out);
}
.faq-a p{ padding-bottom: var(--sp-5); color:var(--ink-soft); max-width:70ch; }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.final-cta{
  border-radius: var(--r-lg);
  padding: var(--sp-8) var(--gutter);
  text-align:center;
  position:relative;
  overflow:hidden;
  background: var(--brand-deep);
  isolation:isolate;
}
:root[data-theme="light"] .final-cta{ background: var(--brand-deep); }
.final-cta::before{
  content:"";
  position:absolute; inset:-40%;
  background: radial-gradient(closest-side, var(--brand-wash), transparent);
  z-index:-1;
  animation: bgShift 16s ease-in-out infinite alternate;
}
.final-cta h2{ font-size:var(--fs-h1); max-width:20ch; margin-inline:auto; }
.final-cta .lead{ margin-inline:auto; margin-top:var(--sp-4); margin-bottom:var(--sp-6); }
.final-cta .badge{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:var(--fs-micro); font-weight:700; color:var(--brand-strong);
  margin-bottom: var(--sp-4);
}

/* ==========================================================================
   CONTACT FORM
   ========================================================================== */
.contact-layout{
  display:grid;
  grid-template-columns: .8fr 1.2fr;
  gap: var(--sp-8);
  align-items:start;
}
.contact-info-card{
  padding: var(--sp-6);
  border-radius: var(--r-lg);
}
.contact-info-card .item{ display:flex; gap:var(--sp-3); padding-block:var(--sp-4); border-top:1px solid var(--line); }
.contact-info-card .item:first-of-type{ border-top:0; }
.contact-info-card .ic{
  width:40px;height:40px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-deep); color:var(--brand-strong);
}
.contact-info-card .ic svg{ width:18px;height:18px; }
.contact-info-card h4{ font-size: 0.95rem; margin-bottom:.2em; }
.contact-info-card p{ color:var(--ink-soft); font-size:var(--fs-small); }

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap: var(--sp-5);
}
.field{ display:flex; flex-direction:column; gap:.6em; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:var(--fs-small); font-weight:700; color:var(--ink-soft); }
.field input, .field textarea{
  width:100%;
  padding: 1em 1.2em;
  border-radius: var(--r-sm);
  background: var(--glass-bg);
  border:1px solid var(--glass-border);
  color:var(--ink);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-faint); }
.field input:focus, .field textarea:focus{ border-color:var(--brand-line); background:var(--glass-bg-2); outline:none; }
.field textarea{ resize:vertical; min-height:140px; }
.field .error{ font-size:var(--fs-micro); color:var(--danger); display:none; }
.field.has-error input, .field.has-error textarea{ border-color:var(--danger); }
.field.has-error .error{ display:block; }

.form-note{ font-size:var(--fs-micro); color:var(--ink-faint); margin-top:var(--sp-3); }
.form-success{
  display:none;
  align-items:center; gap:var(--sp-3);
  padding: var(--sp-5);
  border-radius:var(--r-md);
  background:var(--brand-deep); color:var(--brand-strong);
  font-weight:700;
}
.form-success.is-visible{ display:flex; }

.whatsapp-cta{
  display:flex; align-items:center; gap:var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  margin-top: var(--sp-6);
  background:#12331f;
  border:1px solid var(--brand-line);
}
:root[data-theme="light"] .whatsapp-cta{ background: var(--brand-deep); }
.whatsapp-cta .ic{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand); color:var(--on-brand); flex-shrink:0;
}
.whatsapp-cta .ic svg{ width:22px;height:22px; }

@media (max-width: 900px){
  .contact-layout{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
}

@media (max-width: 640px){
  .whatsapp-cta{ flex-direction:column; align-items:flex-start; text-align:start; }
  .whatsapp-cta .btn{ align-self:stretch; justify-content:center; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
/* footer styles live in css/footer.css */

.back-to-top{
  position:fixed;
  bottom: var(--sp-6);
  right: var(--sp-6);
  width:96px;height:96px;
  border-radius:50%;
  background:transparent;
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:8px;
  z-index:80;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
  overflow:visible;
}
.back-to-top::before{
  content:"";
  position:absolute; inset:10px;
  border-radius:50%;
  background: radial-gradient(circle, var(--brand-wash) 0%, transparent 72%);
  filter: blur(5px);
  z-index:0;
  pointer-events:none;
  transition: opacity var(--dur-fast);
}
:root[data-theme="light"] .back-to-top::before{
  background: radial-gradient(circle, rgba(19,30,23,0.10) 0%, transparent 72%);
}
.back-to-top:hover::before{ opacity:1.4; }
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover .btt-rocket{ transform: translateY(-3px); }

.btt-rocket{
  position:relative;
  width:60px; height:auto;
  z-index:2;
  animation: floatSmall 2.8s ease-in-out infinite;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.4)) drop-shadow(0 0 20px color-mix(in srgb, var(--brand) 40%, transparent));
  transition: transform var(--dur-fast) var(--ease-out);
}

.btt-flame{
  position:absolute;
  bottom:10px; left:50%;
  width:14px; height:34px;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  border-radius: 0 0 60% 60%;
  background: linear-gradient(to bottom, #fbffb0, var(--brand) 45%, transparent 92%);
  filter: blur(1.5px);
  opacity:0;
  z-index:1;
  pointer-events:none;
}

.btt-trail{
  position:absolute;
  bottom:10px; left:50%;
  width:5px; height:640px;
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom center;
  background: linear-gradient(to top, color-mix(in srgb, var(--brand) 55%, transparent), color-mix(in srgb, var(--brand) 0%, transparent) 75%);
  border-radius:6px;
  opacity:0;
  z-index:0;
  pointer-events:none;
}

/* ---- launch sequence (triggered by JS adding .is-launching) ---- */
.back-to-top.is-launching .btt-rocket{
  animation:
    bttShake .32s ease-in-out 1,
    bttLaunch .92s cubic-bezier(.56,0,.86,.35) .32s forwards;
}
.back-to-top.is-launching .btt-flame{
  animation:
    bttFlameIn .16s ease-out .14s forwards,
    bttFlameLaunch .8s cubic-bezier(.56,0,.86,.35) .32s forwards;
}
.back-to-top.is-launching .btt-trail{
  animation: bttTrail .9s cubic-bezier(.3,0,.7,1) .3s forwards;
}
.back-to-top.is-launching::before{
  animation: bttGlowPulse .4s ease-out .05s;
}


/* ==========================================================================
   PAGE HERO (inner pages) — cinematic full-bleed photo backdrop
   ========================================================================== */
.page-hero{
  position:relative;
  overflow:hidden;
  min-height:0;
  display:flex;
  align-items:center;
  padding-top: calc(var(--header-h) + var(--sp-5));
  padding-bottom: var(--sp-6);
}
.page-hero .bg-photo{
  position:absolute; inset:0;
  z-index:-3;
  background-image: var(--hero-photo, none);
  background-size:cover;
  background-position: center 35%;
  filter: saturate(.9);
}
.page-hero .bg-overlay{
  position:absolute; inset:0;
  z-index:-2;
  background:
    linear-gradient(to right, rgba(9,16,12,.18) 0%, rgba(9,16,12,.72) 55%, var(--bg) 96%),
    linear-gradient(to top, var(--bg) 0%, transparent 22%);
}
.page-hero .bg-grid{
  position:absolute; inset:0;
  z-index:-1;
  opacity:.35;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to left, black, transparent 70%);
  -webkit-mask-image: linear-gradient(to left, black, transparent 70%);
}
:root[data-theme="light"] .page-hero .bg-photo,
:root[data-theme="light"] .page-hero .bg-overlay{ display:none; }
:root[data-theme="light"] .page-hero .bg{
  position:absolute; inset:-20%; z-index:-1;
  background: radial-gradient(50% 55% at 82% 10%, var(--brand-wash), transparent 65%);
}

.page-hero-inner{ max-width:640px; position:relative; }
.page-hero-inner h1{ font-size:var(--fs-h1); max-width:16ch; }
.page-hero-inner .lead{ margin-top:var(--sp-4); }

.page-hero .spec-tag{
  position:absolute;
  top:0; left:0;
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-display); font-weight:700;
  font-size:var(--fs-micro); letter-spacing:.03em;
  color:var(--ink-faint);
  border:1px solid var(--line-strong);
  border-radius:var(--r-pill);
  padding:.5em 1em;
  backdrop-filter: blur(8px);
  background: var(--glass-bg);
}
.page-hero .spec-tag .dot{ width:5px;height:5px;border-radius:50%;background:var(--brand-strong); box-shadow:0 0 8px var(--brand-strong); }
.page-hero .corner-frame{
  position:absolute; inset-inline-end:0; top:0;
  width:120px; height:120px;
  border-top:1px solid var(--line-strong);
  border-inline-end:1px solid var(--line-strong);
  opacity:.5;
  pointer-events:none;
}
@media (max-width: 900px){
  .page-hero{ min-height:auto; }
  .page-hero .bg-overlay{
    background:
      linear-gradient(to top, var(--bg) 15%, rgba(9,16,12,.55) 55%, rgba(9,16,12,.25) 100%);
  }
  .page-hero .corner-frame{ display:none; }
}
.page-hero.centered{ min-height:0; }
.page-hero.centered .bg-overlay{
  background:
    radial-gradient(60% 85% at 50% 45%, rgba(9,16,12,.58), rgba(9,16,12,.88) 72%),
    linear-gradient(to top, var(--bg) 0%, transparent 25%);
}

/* feature trio used on service pages */
.feature-trio{ grid-template-columns:repeat(3,1fr); }
.feature-box{ padding:var(--sp-6); border-radius:var(--r-lg); }
.feature-box .ic{ width:44px;height:44px;border-radius:12px; background:var(--brand-deep); color:var(--brand-strong); display:flex;align-items:center;justify-content:center; margin-bottom:var(--sp-4); }
.feature-box .ic svg{ width:20px;height:20px; }
.feature-box h3{ font-size: 1.0625rem; margin-bottom:.5em; }
.feature-box p{ color:var(--ink-soft); font-size:var(--fs-small); }
@media (max-width: 900px){ .feature-trio{ grid-template-columns:1fr 1fr; } }
@media (max-width: 620px){ .feature-trio{ grid-template-columns:1fr; } }

/* deliverables checklist grid (service pages) */
.check-grid{ grid-template-columns:repeat(2,1fr); }
.check-item{ display:flex; gap:var(--sp-3); align-items:flex-start; padding: var(--sp-4) 0; border-top:1px solid var(--line); }
.check-item .ic{ width:30px;height:30px;border-radius:50%; background:var(--brand-deep); color:var(--brand-strong); display:flex;align-items:center;justify-content:center; flex-shrink:0; }
.check-item .ic svg{ width:14px;height:14px; }
.check-item h4{ font-size: 0.95rem; margin-bottom:.25em; }
.check-item p{ color:var(--ink-soft); font-size:var(--fs-small); }
@media (max-width:700px){ .check-grid{ grid-template-columns:1fr; } }

/* choose-us list (service pages) */
.choose-grid{ grid-template-columns:repeat(5,1fr); }
.choose-item{ text-align:center; padding: var(--sp-5) var(--sp-3); }
.choose-item .ic{ width:44px;height:44px;border-radius:12px; background:var(--brand-deep); color:var(--brand-strong); display:flex;align-items:center;justify-content:center; margin:0 auto var(--sp-4); }
.choose-item .ic svg{ width:20px;height:20px; }
.choose-item h4{ font-size: 0.95rem; margin-bottom:.4em; }
.choose-item p{ color:var(--ink-soft); font-size:var(--fs-micro); }
@media (max-width:980px){ .choose-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:620px){ .choose-grid{ grid-template-columns:1fr 1fr; } }

/* tools strip (service pages) */
.tools-grid{ grid-template-columns:repeat(4,1fr); }
.tool-card{ padding: var(--sp-5); border-radius:var(--r-md); text-align:center; }
.tool-card img{ height:32px; width:auto; margin:0 auto var(--sp-4); object-fit:contain; }
.tool-card h4{ font-size: 0.95rem; margin-bottom:.4em; }
.tool-card p{ color:var(--ink-soft); font-size:var(--fs-micro); }
@media (max-width:820px){ .tools-grid{ grid-template-columns:1fr 1fr; } }

/* about page */
.about-story{ display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--sp-8); align-items:center; }
.about-values{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .about-story{ grid-template-columns:1fr; } .about-values{ grid-template-columns:1fr 1fr; } }

/* blog full listing */
.blog-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); flex-wrap:wrap; margin-bottom:var(--sp-7); }
.blog-search{ position:relative; }
.blog-search input{
  padding: .9em 1.2em .9em 3em;
  border-radius:var(--r-pill);
  background:var(--glass-bg); border:1px solid var(--glass-border);
  color:var(--ink); min-width:260px;
}
:root[dir="rtl"] .blog-search input{ padding: .9em 3em .9em 1.2em; }
.blog-search svg{ position:absolute; inset-inline-start:1.1em; top:50%; transform:translateY(-50%); width:16px; color:var(--ink-faint); }
.blog-categories{ display:flex; gap:var(--sp-3); flex-wrap:wrap; }
.blog-categories button{
  padding:.6em 1.2em; border-radius:var(--r-pill);
  border:1px solid var(--line); font-size:var(--fs-small); font-weight:600; color:var(--ink-soft);
  transition: all var(--dur-fast);
}
.blog-categories button.is-active, .blog-categories button:hover{ background:var(--brand-deep); color:var(--brand-strong); border-color:var(--brand-line); }

.blog-featured{
  display:grid; grid-template-columns:1.1fr .9fr; gap:var(--sp-7); align-items:center;
  padding-bottom: var(--sp-8); margin-bottom: var(--sp-8); border-bottom:1px solid var(--line);
}
.blog-featured .media{ border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3; border:1px solid var(--line); }
.blog-featured .media img{ width:100%;height:100%;object-fit:cover; }
@media (max-width:900px){ .blog-featured{ grid-template-columns:1fr; } .blog-featured .media{ order:-1; } }

/* ==========================================================================
   NAV — services dropdown (8 services) + scrollable mobile drawer
   ========================================================================== */
.main-nav .nav-dropdown > button{ cursor:pointer; padding-block:.4em; }
.main-nav .nav-dropdown > button.is-active{ color:var(--ink); }
.main-nav .dropdown-panel{
  display:grid; grid-template-columns:1fr 1fr; gap:2px;
  min-width:min(560px, 92vw); padding:var(--sp-3);
  z-index:5;
  background:var(--bg-elevated);                       /* solid enough to read over any hero */
  border:1px solid var(--line-strong);
}
.main-nav .dropdown-panel::before{ content:""; position:absolute; inset-inline:0; top:-20px; height:20px; }   /* hover bridge */
.main-nav .dropdown-panel a{ position:relative; }
.main-nav .dropdown-panel a::after{ display:none; }
.main-nav .dropdown-panel a::before{
  content:""; width:7px; height:7px; border-radius:50%; flex-shrink:0;
  background:var(--brand-strong); opacity:.45; transition:opacity var(--dur-fast), transform var(--dur-fast);
}
.main-nav .dropdown-panel a:hover::before,
.main-nav .dropdown-panel a.is-active::before{ opacity:1; transform:scale(1.25); }
.main-nav .dropdown-panel a.is-active{ color:var(--ink); background:var(--brand-wash); }
.main-nav .dropdown-panel a.all{
  grid-column:1 / -1; justify-content:center; margin-top:var(--sp-2);
  border-top:1px solid var(--line); border-radius:0 0 var(--r-sm) var(--r-sm);
  color:var(--brand-strong); font-weight:700;
}
.main-nav .dropdown-panel a.all::before{ display:none; }
@media (hover:hover){
  .nav-dropdown:hover .dropdown-panel,
  .nav-dropdown:focus-within .dropdown-panel{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
  :root[dir="rtl"] .nav-dropdown:hover .dropdown-panel,
  :root[dir="rtl"] .nav-dropdown:focus-within .dropdown-panel{ transform:translateX(50%) translateY(0); }
  .nav-dropdown:hover svg{ transform:rotate(180deg); }
}
.mobile-nav{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
.mobile-nav .sub-list{ margin-top:var(--sp-3); gap:var(--sp-2); padding-inline-start:var(--sp-4); border-inline-start:2px solid var(--brand-line); }
.mobile-nav .sub-list a{ font-size: 1.0625rem; }