/* Legalio — design tokens, typography, layout, buttons, shared sections. Generated from the pre-refactor inline CSS. */
/* ============================================================
   Legalio — Design System
   ============================================================ */
:root{
  --ink:#0F1C39;
  --ink-2:#122341;
  --ink-3:#1D3058;
  --ink-4:#294269;
  --paper:#F5F3EE;
  --paper-2:#FBFAF6;
  --paper-3:#EDEAE2;
  --line:rgba(10,18,38,.12);
  --line-2:rgba(10,18,38,.07);
  --line-d:rgba(255,255,255,.10);
  --line-d2:rgba(255,255,255,.06);
  --muted:#6C7079;
  --muted-2:#8A8F98;
  --muted-d:#9BA1AC;
  --muted-d2:#6A7079;
  --gold:#C69A4C;
  --gold-2:#E2C079;
  --gold-soft:rgba(198,154,76,.12);
  --gold-line:rgba(198,154,76,.32);
  /* desaturated data-viz — mockups only */
  --dv-teal:#4E8F82;
  --dv-red:#C05F45;
  --dv-amber:#CFA04E;
  --dv-slate:#5E6E80;
  --dv-green:#5B9A72;
  --dv-violet:#7B6E9E;
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:22px;
  --maxw:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
  font-synthesis-weight:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  font-size:17px;line-height:1.6;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:#fff}
/* Typography */
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:400;letter-spacing:-.02em;line-height:1.04;margin:0}
.serif{font-family:'Fraunces',Georgia,serif}
.mono{font-family:'JetBrains Mono',monospace}
.eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--gold);opacity:.7}
.eyebrow.center::after{content:"";width:22px;height:1px;background:var(--gold);opacity:.7}
/* Layout */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.section{padding:120px 0;position:relative}
.section.tight{padding:88px 0}
/* subtle warm gold wash on light sections — ties them to the navy sections' gold blooms */
.section:not(.dark){isolation:isolate}
.section:not(.dark)::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(940px 520px at 86% -12%, rgba(198,154,76,.13), transparent 60%),
    radial-gradient(800px 580px at 2% 114%, rgba(198,154,76,.08), transparent 62%);
}
.dark{
  color:var(--paper);position:relative;isolation:isolate;
  background:
    radial-gradient(1200px 620px at 84% -8%, rgba(198,154,76,.11), transparent 58%),
    radial-gradient(1000px 720px at -6% 14%, rgba(58,92,152,.26), transparent 56%),
    radial-gradient(1100px 780px at 50% 116%, rgba(198,154,76,.07), transparent 60%),
    linear-gradient(176deg,#14264A 0%,#0F1C39 42%,#132B52 100%);
}
/* soft drifting aurora — large, low-opacity, never touches text contrast */
.dark::before{
  content:"";position:absolute;inset:-10% -5%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(620px 420px at 20% 22%, rgba(198,154,76,.10), transparent 62%),
    radial-gradient(680px 480px at 88% 40%, rgba(72,108,176,.22), transparent 60%),
    radial-gradient(520px 520px at 62% 96%, rgba(226,192,121,.08), transparent 60%);
  filter:blur(6px);opacity:.9;
  animation:aurora 22s ease-in-out infinite alternate;
}
.dark.alt{
  background:
    radial-gradient(1000px 640px at 12% -10%, rgba(72,108,176,.24), transparent 56%),
    radial-gradient(1100px 720px at 96% 30%, rgba(198,154,76,.10), transparent 58%),
    radial-gradient(900px 760px at 40% 120%, rgba(58,92,152,.18), transparent 60%),
    linear-gradient(184deg,#122444 0%,#122645 46%,#0E1B34 100%);
}
.dark.alt::before{animation-duration:26s;animation-direction:alternate-reverse}
.dark .wrap{position:relative;z-index:1}
@keyframes aurora{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(1.5%,-2%,0) scale(1.05)}
  100%{transform:translate3d(-1.5%,1.5%,0) scale(1.02)}
}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.dark .muted{color:var(--muted-d)}
.muted{color:var(--muted)}
.center{text-align:center}
.lede{font-size:20px;line-height:1.55;color:var(--muted);letter-spacing:-.01em;max-width:620px}
.dark .lede{color:var(--muted-d)}
/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:9px;justify-content:center;
  font-family:'Inter';font-size:15px;font-weight:600;letter-spacing:-.01em;
  padding:13px 22px;border-radius:10px;cursor:pointer;border:1px solid transparent;
  transition:transform .35s var(--ease),background .3s,box-shadow .3s,border-color .3s,color .3s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--ink);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.06) inset}
.btn-primary:hover{background:#000;box-shadow:0 14px 34px -12px rgba(11,12,14,.55)}
.dark .btn-primary,.hero .btn-primary,.final .btn-primary,.nav .btn-primary{
  background:linear-gradient(135deg,#E8CD8C 0%,#C69A4C 52%,#A9812F 100%);color:#201604;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 26px -14px rgba(198,154,76,.55)}
.dark .btn-primary:hover,.hero .btn-primary:hover,.final .btn-primary:hover,.nav .btn-primary:hover{
  background:linear-gradient(135deg,#F2D89C 0%,#D3A85A 52%,#B98F3B 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 18px 44px -14px rgba(198,154,76,.6)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(11,12,14,.03)}
.dark .btn-ghost,.hero .btn-ghost,.final .btn-ghost{color:#fff;border-color:var(--line-d)}
.dark .btn-ghost:hover,.hero .btn-ghost:hover,.final .btn-ghost:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.04)}
.btn .arw{transition:transform .35s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}
.hero .btn-primary{position:relative;overflow:hidden}
.hero .btn-primary::after{content:"";position:absolute;top:0;left:-120%;width:65%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);
  animation:ctaSheen 4.5s ease-in-out infinite}
@keyframes ctaSheen{0%,72%{left:-120%}86%,100%{left:160%}}
/* Reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
[data-delay="1"]{transition-delay:.08s}
[data-delay="2"]{transition-delay:.16s}
[data-delay="3"]{transition-delay:.24s}
[data-delay="4"]{transition-delay:.32s}
[data-delay="5"]{transition-delay:.40s}
[data-delay="6"]{transition-delay:.48s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}*{animation:none!important}}
/* ============ SECTION HEADER ============ */
.shead{max-width:720px}
.shead.center{margin:0 auto;text-align:center}
.shead h2{font-size:clamp(30px,4vw,50px);font-weight:400;margin:16px 0 0;letter-spacing:-.022em}
.shead h2 em,.hero h1 em,.final h2 em,.gold-em{
  font-style:italic;
  background-image:linear-gradient(100deg,#F1D695 0%,#D3A85A 46%,#B0842F 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.dark .shead h2 em,.gold-em{
  background-image:linear-gradient(100deg,#F6DFA6 0%,#E2C079 45%,#C69A4C 100%);
}
.shead p{margin:20px 0 0;font-size:18px;color:var(--muted);line-height:1.55}
.dark .shead p{color:var(--muted-d)}
.shead.center p{margin-left:auto;margin-right:auto}
.eyebrow.center{justify-content:center}
/* ============ FINAL CTA ============ */
/* golden gradient — the warm crescendo just before the footer */
.final{color:#3A2A08;text-align:center;position:relative;overflow:hidden;padding:130px 0;
  background:
    radial-gradient(900px 520px at 50% -16%, rgba(255,246,220,.60), transparent 60%),
    radial-gradient(820px 640px at 10% 26%, rgba(255,235,188,.45), transparent 58%),
    radial-gradient(860px 680px at 92% 76%, rgba(168,124,42,.42), transparent 60%),
    linear-gradient(165deg,#ECC978 0%,#D3A85A 46%,#B4882F 100%);
}
.final::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(640px 440px at 28% 18%, rgba(255,255,255,.30), transparent 62%),
    radial-gradient(640px 480px at 76% 84%, rgba(150,110,36,.28), transparent 60%);
  animation:aurora 24s ease-in-out infinite alternate}
.final .fcontent{position:relative;max-width:760px;margin:0 auto}
.final h2{font-size:clamp(34px,5vw,62px);font-weight:400;letter-spacing:-.025em;color:#241A06}
.final h2 em{font-style:italic;color:var(--ink);-webkit-text-fill-color:var(--ink);background:none}
.final p{margin:26px auto 34px;font-size:19px;color:#4A3712;line-height:1.55;max-width:560px}
.final .hero-cta{justify-content:center}
.final .fmini{margin-top:26px;font-family:'JetBrains Mono';font-size:12px;color:#5A4718;letter-spacing:.03em}
/* on gold, the primary CTA turns dark for punch; the ghost gets a dark outline */
.final .btn-primary{background:var(--ink);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 14px 34px -16px rgba(20,15,4,.6)}
.final .btn-primary:hover{background:#0A1327;box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 20px 44px -16px rgba(20,15,4,.66)}
.final .btn-ghost{color:#2A1F08;border-color:rgba(36,26,6,.32)}
.final .btn-ghost:hover{color:#241A06;border-color:rgba(36,26,6,.6);background:rgba(255,255,255,.16)}
/* scroll progress */
.progress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-2));width:0;z-index:200;transition:width .1s linear}