/* ============================================================
   Evergreen OS — shared design system (YouAI-inspired)
   Airy near-white canvas, soft white cards, iridescent orb,
   periwinkle -> violet gradient. Apple-grade calm, HER warmth.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;550;600;650;700;750;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
@font-face{
  font-family:'Newsreader Variable';font-style:normal;font-display:optional;
  font-weight:200 700;src:url('/fonts/newsreader-latin-wght-normal.woff2') format('woff2');
}

:root{
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --serif:"Newsreader Variable",Georgia,"Times New Roman",serif;
  /* system font for big numbers: no download, no fallback flash, identical on desktop + phone */
  --num:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;

  /* ink */
  --ink:#15161d; --ink-2:#3c3e49; --slate:#63667a; --muted:#9296a5; --faint:#c0c3cf;

  /* surfaces */
  --backdrop:#f6f8ff; --canvas:#f6f8ff; --surface:#ffffff; --quiet:#eef1fa; --quiet-2:#e6eaf6;

  /* hairlines (barely there) */
  --line:rgba(20,22,45,.07); --line-soft:rgba(20,22,45,.045); --line-strong:rgba(20,22,45,.11);

  /* accent — periwinkle -> violet */
  --accent:#5d5bef; --accent-2:#7c6cff; --accent-ink:#4a48d6; --blue:#3b82f6;
  --grad:linear-gradient(122deg,#6366f1 0%,#7c6cff 46%,#5b8def 100%);
  --grad-text:linear-gradient(118deg,#6366f1 0%,#8b5cf6 52%,#5b8def 100%);

  /* orb pastels */
  --o1:#b3c0ff; --o2:#d9c2ff; --o3:#ffc7ee; --o4:#a9e9ff;

  /* status */
  --green:#16a370; --green-bg:#e6f6ee; --amber:#e8890c; --amber-bg:#fdf0dd;
  --red:#e5484d; --red-bg:#fdeaea; --sky:#2f8bef; --sky-bg:#e7f1fe; --violet-bg:#eeecfe;

  /* radius */
  --r-xs:10px; --r-sm:13px; --r:16px; --r-lg:22px; --r-xl:30px; --r-2xl:38px; --pill:999px;

  /* shadow — diffuse, low opacity */
  --sh-xs:0 1px 2px rgba(20,22,50,.05);
  --sh-sm:0 1px 3px rgba(20,22,50,.05),0 4px 14px -6px rgba(20,22,50,.1);
  --sh:0 2px 6px rgba(20,22,50,.05),0 18px 40px -18px rgba(20,22,50,.18);
  --sh-lg:0 30px 70px -24px rgba(20,22,50,.24),0 8px 24px -14px rgba(20,22,50,.12);
  --sh-frame:0 50px 100px -34px rgba(24,26,58,.3),0 12px 30px -16px rgba(24,26,58,.14);
  --sh-glow:0 16px 40px -14px rgba(93,91,239,.5);
}

.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
::selection{background:rgba(99,102,241,.18)}

/* big number, system font, consistent everywhere */
.hero-num{display:block;font-family:var(--num);font-weight:500;font-size:clamp(2.4rem,1.6rem + 2.6vw,3.4rem);line-height:1;letter-spacing:-.025em}
.hero-label{display:block;font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.09em;margin-top:10px}

/* white box "module" holding a big number + label */
.numboxes{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:34px}
.numbox{flex:1;min-width:180px;background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--sh-sm);padding:26px 30px}
.numbox b{display:block;font-family:var(--num);font-weight:500;font-size:clamp(2.4rem,1.6rem + 2.6vw,3.4rem);line-height:1;letter-spacing:-.025em}
.numbox span{display:block;font-family:var(--mono);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.09em;margin-top:12px}
@media(max-width:560px){.numboxes{gap:12px}.numbox{min-width:140px;padding:22px 22px}}

/* ============================================================
   The signature orb — iridescent pastel sphere
   ============================================================ */
.orb{
  border-radius:50%;position:relative;flex:none;overflow:hidden;
  background:
    radial-gradient(circle at 32% 24%, #ffffff 0%, rgba(255,255,255,0) 34%),
    radial-gradient(circle at 70% 26%, var(--o1) 0%, transparent 52%),
    radial-gradient(circle at 30% 74%, var(--o3) 0%, transparent 52%),
    radial-gradient(circle at 76% 72%, var(--o4) 0%, transparent 56%),
    linear-gradient(140deg, var(--o2), var(--o1));
  box-shadow:inset 0 1px 3px rgba(255,255,255,.85),inset 0 -6px 14px rgba(120,110,220,.25),0 10px 26px -8px rgba(120,110,230,.5);
}
.orb.glow::after{
  content:"";position:absolute;inset:-32%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle, var(--o2), transparent 66%);filter:blur(24px);opacity:.75;
}
.orb-xl{width:120px;height:120px} .orb-lg{width:64px;height:64px}
.orb-md{width:40px;height:40px} .orb-sm{width:30px;height:30px}

/* living swirl — a glossy sphere with colour orbiting within */
.orb.alive{animation:orb-breathe var(--pulse,6s) ease-in-out var(--pdelay,0s) infinite;will-change:filter,transform}
.orb.alive::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 70% 26%, var(--c2,#8f7bff), transparent 54%),
            radial-gradient(circle at 26% 72%, var(--c1,#7fd0ff), transparent 54%);
  mix-blend-mode:screen;opacity:.7;animation:orb-orbit var(--spin,5.5s) linear var(--odelay,0s) infinite;will-change:transform;
}
.orb.alive::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 32% 30%, var(--c3,#ff8fd8), transparent 54%),
            radial-gradient(circle at 76% 68%, var(--c2,#8f7bff), transparent 58%);
  mix-blend-mode:screen;opacity:.52;animation:orb-orbit var(--spin2,7.5s) linear var(--odelay2,-2s) infinite reverse;will-change:transform;
}
.orb.m-brand{--o1:#b3c0ff;--o2:#c9c2ff;--o3:#ffc7ee;--o4:#a9e9ff;--c1:#8f7bff;--c2:#ff8fd8;--c3:#7fd0ff}
.orb.m-sales{--o1:#a8f0d0;--o2:#bff0dd;--o3:#d9ffe6;--o4:#a9e9ff;--c1:#3fd8a0;--c2:#5fe0d8;--c3:#8fe8a8}
.orb.m-email{--o1:#ffd0b0;--o2:#ffd8c2;--o3:#ffe1c2;--o4:#ffc7a9;--c1:#ff9e5e;--c2:#ff8fa0;--c3:#ffc06e}
.orb.m-support{--o1:#a9e0ff;--o2:#bfe0ff;--o3:#c6f0ff;--o4:#c9d4ff;--c1:#5f8dff;--c2:#7fd8ff;--c3:#9f9dff}
@keyframes orb-orbit{to{transform:rotate(360deg)}}
@keyframes orb-breathe{0%,100%{filter:saturate(1) brightness(1);transform:scale(.99)}50%{filter:saturate(1.32) brightness(1.05);transform:scale(1.026)}}
@media(prefers-reduced-motion:reduce){.orb.alive,.orb.alive::before,.orb.alive::after{animation:none}}