/* ──────────────────────────────────────────────────────────────────────────
   Advios marketing surface.

   OTC Material 3 theme tokens, ported verbatim from the Developer Workbench:
     wwwroot/css/otc.dark.plum.css   (dark — the base layer, :root)
     wwwroot/css/otc.light.paper.css (light — [data-otc-theme="light"])
   Syncfusion's material3.css is not loaded: these pages carry no .e-* controls,
   so only the token layer applies.

   Typography follows the OTC marketing surface: Poppins 200 for the lead-in and
   the emphasis word hollow — transparent fill over a 2px gold stroke, set ~1.6x
   larger. Poppins' even geometric stroke is what lets an outline that large read
   as drawn form rather than an effect. Everything else stays small, light and
   wide-tracked so the hollow word is the only gesture on the page.

   Both pages are single-screen by design. Scrolling is released only below
   640px, where one viewport can no longer hold the content honestly.

   Dark only, deliberately. The product ships both OTC themes, but this surface
   commits to Plum: the atmosphere is screen-blended light on near-black and the
   hero is a hollow stroke, and neither has a light-ground equivalent — on Paper
   the orbs can only darken the page and the stroke flattens to brass. The Paper
   tokens are therefore not shipped here rather than shipped and worked around.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --scene:#0f0d15; --ink:#16131f; --base:#221e30; --surface:#2f2a3e;
  --surface2:#393245; --raise:#2a2537; --card:#171420;
  --text:#f4f2f0; --muted:#b6afc0; --faint:#9c96a2;
  --line:rgba(255,255,255,.13); --line-strong:rgba(255,255,255,.24);
  --gold:#d3b66a; --gold-d:#bc9150; --gold-l:#ecd581; --gold-text:#d3b66a;
  --primary-solid:#d3b66a; --on-primary:#241c10;
  --focus-ring:0 0 0 3px rgba(211,182,106,.55);
  --ghost-hover:rgba(255,255,255,.07);
  --scrim:rgba(14,12,20,.92);
  --e-font-family:'Poppins',system-ui,sans-serif;

  --orb-1:rgba(92,78,140,.95); --orb-2:rgba(62,56,82,.90); --orb-3:rgba(64,58,112,.95);
  --orb-blend:screen; --orb-alpha:.85; --orb-blur:80px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; overflow: hidden; }

body {
  font-family: var(--e-font-family);
  background: var(--ink);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  transition: background .4s ease, color .4s ease;
}

/* Atmosphere — three drifting colour clouds */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--ink); pointer-events: none; }

.orb {
  position: absolute; border-radius: 50%;
  filter: blur(var(--orb-blur));
  mix-blend-mode: var(--orb-blend);
  opacity: var(--orb-alpha);
  will-change: transform;
}
.orb-1 { width:62vw; height:62vw; top:-20%; left:-14%;
  background: radial-gradient(circle at center, var(--orb-1), transparent 68%);
  animation: float1 30s ease-in-out infinite; }
.orb-2 { width:52vw; height:52vw; top:12%; left:50%;
  background: radial-gradient(circle at center, var(--orb-2), transparent 70%);
  animation: float2 36s ease-in-out infinite; }
.orb-3 { width:58vw; height:58vw; top:44%; left:2%;
  background: radial-gradient(circle at center, var(--orb-3), transparent 68%);
  animation: float3 33s ease-in-out infinite; }

@keyframes float1 {
  0%{transform:translate(0,0) scale(1)} 33%{transform:translate(16vw,12vh) scale(1.12)}
  66%{transform:translate(5vw,26vh) scale(.95)} 100%{transform:translate(0,0) scale(1)}
}
@keyframes float2 {
  0%{transform:translate(0,0) scale(1)} 33%{transform:translate(-20vw,10vh) scale(1.1)}
  66%{transform:translate(-7vw,-15vh) scale(.92)} 100%{transform:translate(0,0) scale(1)}
}
@keyframes float3 {
  0%{transform:translate(0,0) scale(1)} 33%{transform:translate(18vw,-12vh) scale(.94)}
  66%{transform:translate(29vw,7vh) scale(1.15)} 100%{transform:translate(0,0) scale(1)}
}

@media (prefers-reduced-motion: reduce) {
  .orb { animation: none; }
  .page { animation: none; opacity: 1; }
  body, .navpanel, .burger span { transition: none; }
}

/* Layout */
.page {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  min-height: 100vh;
  opacity: 0; animation: fadein 1.4s ease .2s forwards;
}
@keyframes fadein { to { opacity: 1; } }

.inner { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 60px; }

/* Header */
.top { width: 100%; padding: 32px 0; }

.brand { display: flex; align-items: center; gap: 22px; text-decoration: none; width: fit-content; }
.mark { height: 64px; width: 64px; flex: none; color: var(--gold); opacity: .94; }

.brand-text {
  display: flex; flex-direction: column; justify-content: center;
  gap: 6px; line-height: 1.12;
}
.brand-text span {
  font-size: .89rem; font-weight: 300; letter-spacing: 1.4px; color: var(--text);
}
.brand-text span:last-child { color: var(--gold); }

/* Floating burger */
.burger {
  position: fixed; top: 44px; right: 48px; z-index: 40;
  width: 34px; height: 26px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.burger span {
  display: block; height: 1px; width: 100%;
  background: var(--muted);
  transition: transform .32s ease, opacity .22s ease, background .25s ease;
}
.burger:hover span { background: var(--gold); }
.burger[aria-expanded="true"] span { background: var(--gold); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(12px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-12px) rotate(-45deg); }

.navpanel {
  position: fixed; inset: 0; z-index: 30;
  background: var(--scrim);
  backdrop-filter: blur(14px);
  display: grid; place-items: center;
  opacity: 0; transition: opacity .3s ease;
}
/* The attribute must beat the display above it: an author `display: grid` wins
   over the browser's [hidden] rule, which would leave an invisible full-viewport
   overlay on z-index 30 eating every click on the page beneath it. */
.navpanel[hidden] { display: none; }
.navpanel.is-open { opacity: 1; }
.navinner { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }

.navlink {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 200; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.navlink:hover, .navlink:focus-visible { color: var(--gold); border-bottom-color: var(--gold-d); }
.navlink.is-current { color: var(--gold); }

/* Main */
.center { flex: 1; display: flex; align-items: center; padding: 0 0 6vh; }

.hero { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; text-align: left; }

/* The lead-in runs two lines now, so it sits smaller than a single-line version
   would — which also widens the gap to the hollow word rather than narrowing it. */
.headline {
  font-size: clamp(1.35rem, 2.7vw, 3.4rem);
  font-weight: 200; letter-spacing: 2px; text-transform: uppercase;
  line-height: 1.2; color: var(--text);
}
/* eFTI keeps its official lowercase e, so it opts out of the headline's caps.
   Weight, not colour, carries the emphasis: gold stays reserved for the hollow
   word, and a second accent in the same line would compete with it. */
.headline .lit { text-transform: none; font-weight: 600; }

.headline em {
  display: block; margin-top: 2px; font-style: normal;
  font-size: clamp(3rem, 5.2vw, 9.5rem);
  font-weight: 700; letter-spacing: 3px;
  color: var(--gold);
}

/* Hollow only where the browser can draw the outline — otherwise the word would
   be transparent with nothing in its place. */
@supports (-webkit-text-stroke: 2px currentColor) {
  .headline em { color: transparent; -webkit-text-stroke: 2px var(--gold); }
}

.herolink {
  display: inline-flex; align-items: center; gap: 11px; width: fit-content;
  font-size: .72rem; font-weight: 400; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 3px;
  transition: border-color .25s ease, color .25s ease;
}
.herolink:hover, .herolink:focus-visible { color: var(--gold-l); border-bottom-color: var(--gold-d); }
.herolink svg { width: 22px; height: 8px; overflow: visible; transition: transform .25s ease; }
.herolink:hover svg { transform: translateX(5px); }

.description {
  font-size: .82rem; font-weight: 300; line-height: 1.9;
  color: var(--faint); max-width: 520px;
}

/* ── How it works ───────────────────────────────────────────────────────── */

.process { display: flex; flex-direction: column; gap: 30px; width: 100%; }

.eyebrow {
  font-size: .58rem; letter-spacing: 4px; text-transform: uppercase; color: var(--muted);
}

.process-title {
  font-size: clamp(1.4rem, 2.3vw, 2.4rem);
  font-weight: 200; letter-spacing: 2px; text-transform: uppercase;
  line-height: 1.25; color: var(--text);
}
.process-title em {
  font-style: normal; font-weight: 700; letter-spacing: 3px; color: var(--gold);
}
@supports (-webkit-text-stroke: 1.4px currentColor) {
  .process-title em { color: transparent; -webkit-text-stroke: 1.4px var(--gold); }
}

.diagram { width: 100%; }
.diagram svg { display: block; width: 100%; height: auto; max-width: 100%; }

.d-line   { stroke: var(--line-strong); fill: none; }
.d-faint  { stroke: var(--line); fill: none; }
.d-gold   { stroke: var(--gold); fill: none; }
/* A lifted surface, not the page ground: the orbs light the ground, so filling
   the card with --ink would read as a hole punched in the atmosphere. */
.d-fill   { fill: var(--surface); fill-opacity: .92; }
.d-label  { fill: var(--text); font-size: 13px; font-weight: 400; letter-spacing: 2.2px; text-transform: uppercase; }
.d-sub    { fill: var(--faint); font-size: 11px; font-weight: 300; letter-spacing: .6px; }
.d-tag    { fill: var(--muted); font-size: 10.5px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; }

/* No rule above the pillars: the diagram already ends on a hairline, and a
   second one so close reads as noise. The separation is spacing instead. */
.pillars {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px;
  padding-top: 38px;
}
.pillar h2 {
  font-size: .72rem; font-weight: 400; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}
.pillar p { font-size: .76rem; font-weight: 300; line-height: 1.85; color: var(--faint); }

/* Footer */
.bottom { width: 100%; padding: 18px 0 26px; border-top: 1px solid var(--line); }
.bottom .inner { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }

.contact { display: flex; flex-direction: column; gap: 5px; }
.contact-label {
  margin-bottom: 4px; font-size: .58rem; letter-spacing: 4px;
  text-transform: uppercase; color: var(--muted);
}
.contact a, .contact .place {
  font-size: .72rem; font-weight: 300; color: var(--faint);
  text-decoration: none; letter-spacing: .5px;
}
.contact a { transition: color .25s ease; }
.contact a:hover, .contact a:focus-visible { color: var(--gold); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 3px; }

.copy {
  font-size: .58rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--faint); text-align: right; line-height: 2;
}

/* Responsive */
@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 640px) {
  html, body { overflow: auto; }
  .page { min-height: 100svh; }
  .inner { padding: 0 30px; }
  .top { padding: 28px 0; }
  .burger { top: 34px; right: 26px; }
  .brand { gap: 16px; }
  .mark { height: 44px; width: 44px; }
  .brand-text span { font-size: .68rem; }
  .center { padding: 40px 0 70px; align-items: flex-start; }
  .description { max-width: 100%; }
  .headline em { -webkit-text-stroke-width: 1.5px; }
  .bottom .inner { flex-direction: column; align-items: flex-start; }
  .copy { text-align: left; }
}