/* Duskrypt Intel brand layer, loaded after app.css.
   Matches duskrypt.com: near-black ground, warm cream type, one sunset-orange
   signal, Space Grotesk display face, and the "D" sunset mark with its
   horizontal cuts. Motion: a one-time intro, the mark's cuts breathing,
   a slow sunset glow in the hero, a scan line, and soft grain. All motion is
   off under prefers-reduced-motion. */
@font-face{font-family:"Space Grotesk";font-weight:400;font-style:normal;font-display:swap;src:url(vendor/sg-400.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:500;font-style:normal;font-display:swap;src:url(vendor/sg-500.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:700;font-style:normal;font-display:swap;src:url(vendor/sg-700.woff2) format("woff2")}

:root{--display:"Space Grotesk","Inter",system-ui,sans-serif;--sans:"Inter","Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --dusk:linear-gradient(100deg,#ffb36b 0%,#ff7a3d 35%,#ff4f7b 70%,#9b6bff 100%)}
:root,:root[data-theme="dark"]{
  --bg:#0a0a0a;--bg-glow:rgba(255,122,61,.10);
  --surface:#121110;--surface-2:#171513;--surface-3:#211e1b;--surface-hi:#161412;
  --line:rgba(242,239,233,.08);--line-2:rgba(242,239,233,.15);
  --fg:#f2efe9;--muted:#a8a29a;--faint:#6f6963;
  --accent:#ff7a3d;--accent-2:#ff4f7b;--accent-fg:#1a0b03;--accent-soft:rgba(255,122,61,.12);--glow:rgba(255,122,61,.40);
  --crit:#ff4d6a;--crit-soft:rgba(255,77,106,.13);--warn:#ffc260;--warn-soft:rgba(255,194,96,.12);
  --ok:#5fd3a0;--neutral:#9a938b;--novel:#b49cff;--novel-soft:rgba(180,156,255,.13);
  --c1:#ff7a3d;--c2:#ff4d6a;--c3:#ffc260;--c4:#5fd3a0;--c5:#b49cff;--c6:#f472b6;--c7:#6cb8ff;--c8:#e8d48a;--c9:#8f877e;
  --inner:inset 0 1px 0 rgba(255,240,225,.035)}
:root[data-theme="light"]{
  --bg:#f6f3ee;--bg-glow:rgba(232,98,42,.10);
  --surface:#fffdfa;--surface-2:#f8f4ee;--surface-3:#efe9e1;--surface-hi:#ffffff;
  --line:rgba(30,20,10,.09);--line-2:rgba(30,20,10,.16);
  --fg:#16120e;--muted:#635a51;--faint:#9a9087;
  --accent:#e2602a;--accent-2:#d93a66;--accent-fg:#fff;--accent-soft:rgba(226,96,42,.10);--glow:rgba(226,96,42,.28);
  --c1:#e2602a;--c2:#d93a66;--c3:#c98a12;--c4:#1f9a6c;--c5:#7357d8;--c6:#cc3d8a;--c7:#2f7fd1;--c8:#a08a2a;--c9:#7a7067}

body{background-image:radial-gradient(1100px 520px at 85% -10%,var(--bg-glow),transparent 62%),radial-gradient(800px 420px at 0% 0%,color-mix(in srgb,var(--accent-2) 6%,transparent),transparent 60%)}
/* film grain, very faint */
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,.brand b,.kpi .n,.pagehead h1,.hero h1{font-family:var(--display)}
.hero h1 em,.hero h1 .dk{background:var(--dusk);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:duskshift 9s ease-in-out infinite alternate}
@keyframes duskshift{to{background-position:100% 0}}

/* ---------- brand mark ---------- */
.dmark{display:block}
.dmark .cut{fill:#000}
.dmark.dm-live .cut{animation:cutdrift 4.5s ease-in-out infinite}
.dmark.dm-live .cut:nth-of-type(3){animation-delay:-.6s}.dmark.dm-live .cut:nth-of-type(4){animation-delay:-1.2s}.dmark.dm-live .cut:nth-of-type(5){animation-delay:-1.8s}
@keyframes cutdrift{50%{transform:translateY(-1.6px)}}
.logo{background:none!important;box-shadow:none!important;width:30px;height:30px;border-radius:0}
.logo .dmark{width:30px;height:30px;filter:drop-shadow(0 0 10px rgba(255,122,61,.35))}
.brand{gap:10px}
.brand b{font-size:1.05rem;letter-spacing:-.02em;font-weight:700;display:flex;align-items:center;gap:7px}
.brand .intel{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:2px 7px 2px 8px;border-radius:5px;color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent)}
.brand small{letter-spacing:.01em}
.nav a.on::after{background:var(--dusk);box-shadow:0 0 14px var(--glow)}

/* ---------- hero ---------- */
.hero{background:radial-gradient(520px 340px at 92% 60%,rgba(255,122,61,.20),transparent 70%),radial-gradient(420px 280px at 70% 110%,rgba(255,79,123,.12),transparent 70%),linear-gradient(180deg,var(--surface-hi),var(--surface));min-height:420px}
.hero::before{opacity:.32}
.hero h1{font-size:clamp(2rem,5vw,3.6rem);line-height:1.02;letter-spacing:-.035em;max-width:640px;font-weight:700}
.hero p{max-width:560px}
.hero-art{position:absolute;right:-40px;top:50%;width:min(440px,46%);aspect-ratio:1;transform:translateY(-50%);pointer-events:none;z-index:0;opacity:.9}
.hero-art .dmark{width:100%;height:100%;filter:drop-shadow(0 0 60px rgba(255,122,61,.35))}
.hero-art::after{content:"";position:absolute;inset:-20%;background:radial-gradient(closest-side,rgba(255,122,61,.28),transparent 70%);animation:sunpulse 6s ease-in-out infinite;z-index:-1}
@keyframes sunpulse{50%{transform:scale(1.08);opacity:.7}}
.hero-art .scan{position:absolute;left:12%;right:8%;height:2px;top:0;background:linear-gradient(90deg,transparent,rgba(255,200,160,.9),transparent);filter:blur(.5px);box-shadow:0 0 14px rgba(255,122,61,.8);animation:scan 5.5s cubic-bezier(.45,0,.55,1) infinite}
@keyframes scan{0%{top:14%;opacity:0}10%{opacity:1}85%{opacity:1}100%{top:86%;opacity:0}}
.hero>*:not(.hero-art){position:relative;z-index:1}
.hero .bigsearch{max-width:620px;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(8px)}
.hero .eyebrow{color:var(--accent)}
@media (max-width:860px){.hero-art{right:-90px;opacity:.28;width:360px}}

/* hero text rises in word by word on first paint */
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.4em);animation:wrise .7s var(--ease) forwards;animation-delay:calc(var(--k) * 70ms + 150ms)}
@keyframes wrise{to{opacity:1;transform:none}}

/* ---------- surfaces get a warm edge on hover ---------- */
.kpi:hover,.famcard:hover,.svc:hover,a.istat:hover,.feed:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.btn{background:linear-gradient(135deg,#ff8a4c,#ff6a3d 55%,#ff4f7b);color:#1a0b03;box-shadow:0 8px 22px -8px rgba(255,122,61,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.ghost{background:var(--surface);color:var(--fg)}
.live{background:var(--accent);animation:dpulse 2s infinite}
@keyframes dpulse{0%{box-shadow:0 0 0 0 rgba(255,122,61,.6)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ---------- footer + legal ---------- */
.foot{flex-direction:column;align-items:stretch;gap:14px;padding-block:28px 34px}
.foot-top{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between}
.foot-brand{display:flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none;font-family:var(--display);font-weight:700}
.foot-brand .dmark{width:22px;height:22px}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.78rem}
.foot-links a{color:var(--muted);text-decoration:none}
.foot-links a:hover{color:var(--accent)}
.legal{font-size:.68rem;line-height:1.55;color:var(--faint);max-width:980px}
.legal a{color:var(--muted)}

/* ---------- one-time intro ---------- */
#intro{position:fixed;inset:0;z-index:300;background:#0a0a0a;display:grid;place-items:center;animation:introout .6s 1.6s ease forwards}
@keyframes introout{to{opacity:0;visibility:hidden}}
#intro .in{display:flex;flex-direction:column;align-items:center;gap:18px}
#intro .dmark{width:96px;height:96px;filter:drop-shadow(0 0 40px rgba(255,122,61,.55))}
#intro .dmark .sun{animation:sunrise 1s cubic-bezier(.2,.8,.2,1) both}
#intro .dmark .cut{animation:cutin .9s cubic-bezier(.2,.8,.2,1) both}
#intro .dmark .cut:nth-of-type(3){animation-delay:.1s}#intro .dmark .cut:nth-of-type(4){animation-delay:.2s}#intro .dmark .cut:nth-of-type(5){animation-delay:.3s}
@keyframes sunrise{from{transform:translateY(22px);opacity:0}to{transform:none;opacity:1}}
@keyframes cutin{from{transform:scaleX(0)}to{transform:none}}
#intro .wm{font-family:var(--display);font-size:1.6rem;font-weight:700;color:#f2efe9;letter-spacing:-.02em;opacity:0;animation:wmin .7s .45s var(--ease) forwards;display:flex;gap:10px;align-items:center}
#intro .wm span{font-family:var(--mono);font-size:.8rem;letter-spacing:.3em;color:#ff7a3d;text-transform:uppercase}
@keyframes wmin{from{opacity:0;letter-spacing:.2em}to{opacity:1}}
@media (prefers-reduced-motion:reduce){#intro{display:none}.hero h1 .w{opacity:1;transform:none}}
/* the reveal wraps words in inline-block spans, so the gradient has to sit on each span */
.hero h1 em .w{background:var(--dusk);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:300% 100%}
.hero h1 em:has(.w){background:none;animation:none}
/* keep the art behind the copy: smaller and further right on mid widths */
@media (max-width:1100px){.hero-art{width:min(360px,40%);right:-60px;opacity:.55}}