/* ==========================================================================
   DigitalAdvero — base.css
   1. Design tokens (dark + light)   2. Reset & typography
   3. Page background stage          4. Layout helpers
   5. Buttons                        6. Reveal / motion utilities
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --container: 1200px;
  --gutter: clamp(18px, 4.5vw, 32px);
  --nav-h: 72px;
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 18px;
  --ease: cubic-bezier(.22, .85, .2, 1);
}

/* Dark is the brand default; it is also what renders before the theme script runs. */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #050912;
  --bg-band: rgba(110, 140, 255, .035);
  --card: rgba(255, 255, 255, .04);
  --card-solid: #0b1222;
  --card-hover: rgba(255, 255, 255, .07);
  --ink: #f2f5fb;
  --ink-soft: #c5ccdd;
  --muted: #8e99b0;
  --line: rgba(255, 255, 255, .085);
  --line-strong: rgba(255, 255, 255, .16);
  --accent: #5b93ff;
  --accent-2: #9dc3ff;
  --violet: #8f7cff;
  --cyan: #5fd0ff;
  --accent-text: #9dc3ff;
  --accent-soft: rgba(91, 147, 255, .14);
  --orb-a: rgba(58, 108, 255, .34);
  --orb-b: rgba(126, 96, 255, .26);
  --orb-c: rgba(60, 190, 255, .16);
  --glow-a: rgba(72, 120, 255, .30);
  --glow-b: rgba(140, 110, 255, .22);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 28px 60px -30px rgba(0, 0, 0, .75);
  --shadow-pop: 0 34px 90px -34px rgba(70, 120, 255, .55);
  --nav-bg: rgba(7, 11, 22, .60);
  --nav-bg-scrolled: rgba(7, 11, 22, .84);
  --nav-line: rgba(255, 255, 255, .09);
  --panel-bg: rgba(7, 11, 22, .94);
  --grid-line: rgba(140, 170, 255, .075);
  --grain-opacity: .05;
  --btn-grad: linear-gradient(135deg, #3565f5 0%, #6a4ff0 100%);
  --btn-shadow: 0 12px 32px -12px rgba(76, 112, 255, .75);
  --input-bg: rgba(255, 255, 255, .04);
  --danger: #ff8f80;
  --success: #6be4a8;
  --logo-dark-display: block;
  --logo-light-display: none;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6fc;
  --bg-band: rgba(58, 88, 200, .05);
  --card: rgba(255, 255, 255, .78);
  --card-solid: #ffffff;
  --card-hover: #ffffff;
  --ink: #0a1226;
  --ink-soft: #333e5a;
  --muted: #566280;
  --line: rgba(20, 35, 80, .10);
  --line-strong: rgba(20, 35, 80, .20);
  --accent: #2f5bff;
  --accent-2: #5b86ff;
  --violet: #6d4df2;
  --cyan: #0a9fd6;
  --accent-text: #2447d6;
  --accent-soft: rgba(47, 91, 255, .09);
  --orb-a: rgba(70, 110, 255, .20);
  --orb-b: rgba(130, 100, 255, .17);
  --orb-c: rgba(40, 170, 255, .14);
  --glow-a: rgba(72, 110, 255, .20);
  --glow-b: rgba(130, 100, 255, .15);
  --shadow-card: 0 1px 2px rgba(20, 35, 80, .05), 0 22px 50px -26px rgba(35, 60, 140, .28);
  --shadow-pop: 0 34px 80px -34px rgba(47, 91, 255, .38);
  --nav-bg: rgba(255, 255, 255, .72);
  --nav-bg-scrolled: rgba(255, 255, 255, .90);
  --nav-line: rgba(20, 35, 80, .10);
  --panel-bg: rgba(248, 250, 255, .97);
  --grid-line: rgba(40, 70, 160, .085);
  --grain-opacity: .04;
  --btn-grad: linear-gradient(135deg, #2f5bff 0%, #5b3fea 100%);
  --btn-shadow: 0 12px 30px -12px rgba(47, 91, 255, .55);
  --input-bg: rgba(255, 255, 255, .9);
  --danger: #c2371f;
  --success: #0f8a55;
  --logo-dark-display: none;
  --logo-light-display: block;
}

/* ---------- 2. Reset & typography ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
section[id] { scroll-margin-top: calc(var(--nav-h) + 8px); }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--ink); }

:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 4px; }
:root[data-theme="light"] :focus-visible { outline-color: var(--accent); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 300;
  padding: .7rem 1.1rem; border-radius: var(--radius-s);
  background: var(--ink); color: var(--bg); font-weight: 600; font-size: .9rem;
  transform: translateY(-160%); transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; }

/* ---------- 3. Page background stage ----------
   Fixed layers behind everything: large ambient orbs, an architectural grid and
   film grain. Only transform-animated radial gradients — no blur filters. */
.bg-stage { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-orb { position: absolute; border-radius: 50%; }
.bg-orb--a { width: 78vmax; height: 78vmax; top: -34vmax; left: -26vmax; background: radial-gradient(circle, var(--orb-a) 0%, transparent 62%); }
.bg-orb--b { width: 66vmax; height: 66vmax; top: 6vmax; right: -30vmax; background: radial-gradient(circle, var(--orb-b) 0%, transparent 62%); }
.bg-orb--c { width: 58vmax; height: 58vmax; bottom: -30vmax; left: 12vmax; background: radial-gradient(circle, var(--orb-c) 0%, transparent 62%); }
.bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 0%, transparent 78%);
}
.bg-grain {
  position: absolute; inset: 0; opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
:root[data-theme="light"] .bg-grain { /* dark grain on the light theme */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- 4. Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

.section { position: relative; isolation: isolate; overflow: hidden; padding: clamp(3.5rem, 6.5vw, 6.5rem) 0; }
/* Section-specific ambient light: two soft radial lights whose positions are set per section. */
.section::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(48% 42% at var(--gx1, 8%) var(--gy1, 0%), var(--glow-a), transparent 72%),
    radial-gradient(44% 40% at var(--gx2, 96%) var(--gy2, 100%), var(--glow-b), transparent 72%);
  opacity: var(--glow-o, .55);
  /* fade the light out towards the section edges so neighbouring sections blend instead of showing a seam */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
/* Hairline that catches light between sections */
.section + .section::after {
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--line-strong) 20%, color-mix(in srgb, var(--accent) 55%, transparent) 50%, var(--line-strong) 80%, transparent);
}
.section-band { background: linear-gradient(180deg, transparent, var(--bg-band) 14%, var(--bg-band) 86%, transparent); }

.section-head { max-width: 680px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .lede, .h2 + .lede { margin-top: 1.1rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem;
  font-family: var(--font-display); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-text);
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.center .eyebrow::after { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, currentColor, transparent); }

.h2 { font-size: clamp(1.95rem, 1.2rem + 3vw, 3.05rem); }
.lede { color: var(--muted); font-size: clamp(1rem, .95rem + .25vw, 1.12rem); max-width: 56ch; }
.center .lede { margin-left: auto; margin-right: auto; }
.text-gradient {
  background: linear-gradient(100deg, var(--accent-2) 0%, var(--accent) 45%, var(--violet) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-theme="light"] .text-gradient { background-image: linear-gradient(100deg, #2447d6 0%, #3a5cff 45%, #6d4df2 100%); }

/* Decorative curved light arc: a big circle with a gradient hairline that fades at both ends */
.arc {
  position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; padding: 1px;
  background: linear-gradient(var(--arc-angle, 135deg), transparent 5%, color-mix(in srgb, var(--accent-2) 75%, transparent) 42%, color-mix(in srgb, var(--violet) 65%, transparent) 60%, transparent 95%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .55;
}
:root[data-theme="light"] .arc { opacity: .5; }

/* ---------- 5. Buttons ---------- */
.btn {
  --tx: 0px; --ty: 0px;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .92rem 1.6rem; border-radius: var(--radius-m); border: 1px solid transparent;
  font-family: var(--font-body); font-weight: 600; font-size: .96rem; line-height: 1.2; white-space: nowrap;
  transform: translate(var(--tx), var(--ty));
  transition: transform .28s var(--ease), box-shadow .3s ease, background .3s ease, border-color .3s ease, color .3s ease;
}
.btn:active { scale: .98; }
.btn svg { width: 17px; height: 17px; flex-shrink: 0; transition: transform .3s var(--ease); }
.btn:hover svg.btn-arrow { transform: translateX(4px); }

.btn-primary { color: #fff; background: var(--btn-grad); box-shadow: var(--btn-shadow), inset 0 1px 0 rgba(255, 255, 255, .28); }
.btn-primary::before { /* light sweep */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .32) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.btn-primary:hover { box-shadow: 0 16px 40px -12px rgba(76, 112, 255, .85), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn-primary:hover::before { transform: translateX(120%); }

.btn-secondary {
  color: var(--ink); background: var(--card); border-color: var(--line-strong);
}
.btn-secondary:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: var(--accent-soft); }

.btn-sm { padding: .68rem 1.15rem; font-size: .88rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; }

.link-arrow { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--accent-text); }
.link-arrow svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- 6. Reveal / motion utilities ----------
   Content is only hidden when JS is running (html.js), so the page never ends up blank. */
/* Only opacity/transform carry the stagger delay; hover-related properties stay instant. */
.js .reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .8s var(--ease) var(--d, 0s), transform .8s var(--ease) var(--d, 0s),
              translate .4s var(--ease), border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.js .reveal--left { transform: translateX(-26px); }
.js .reveal--right { transform: translateX(26px); }
.js .reveal--scale { transform: scale(.94); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* scroll parallax: main.js writes --py on elements carrying data-py */
[data-py] { translate: 0 var(--py, 0px); }

/* brief cross-fade while the theme switches */
.theme-anim *, .theme-anim *::before, .theme-anim *::after {
  transition: background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease, fill .4s ease, stroke .4s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}