/* ============================================================
   DARK CROWN — Shared cinematic design system
   Near-black + teal/indigo glow · Newsreader italic serif headlines
   · Plus Jakarta Sans body · metallic white→zinc numbers
   ============================================================ */

:root{
  /* surfaces */
  --bg:#050507;
  --bg-2:#070809;
  --panel:#0C0E13;
  --panel-2:#10131A;
  --hair:rgba(255,255,255,.08);
  --hair-2:rgba(255,255,255,.05);

  /* accents */
  --teal:#16D2D4;
  --sky:#38BDF8;
  --indigo:#30338E;
  --indigo-2:#312F89;
  --amber:#FFAC20;            /* used very sparingly */

  /* text */
  --ink:#F5F7FA;
  --muted:#9BA3AE;
  --muted-2:#7E848D;

  /* metallic gradient for big numbers / accents */
  --metal:linear-gradient(180deg,#FFFFFF 0%,#A8ADB6 55%,#71757E 100%);
  --teal-grad:linear-gradient(180deg,#7FF3F4 0%,#16D2D4 55%,#0FA6A8 100%);

  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --maxw:1140px;
  --radius:18px;
}

*{ 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(--sans); font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:rgba(22,210,212,.28); color:#fff; }

/* cinematic ambient backdrop — fixed, sits behind everything */
.dc-atmos{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(58vw 48vh at 80% 6%, rgba(22,210,212,.07), transparent 60%),
    radial-gradient(56vw 50vh at 12% 94%, rgba(48,51,142,.09), transparent 62%),
    radial-gradient(40vw 42vh at 92% 72%, rgba(56,189,248,.05), transparent 60%);
}
.dc-atmos::before,.dc-atmos::after{
  content:""; position:absolute; border-radius:50%; filter:blur(80px); will-change:transform;
}
.dc-atmos::before{
  width:72vw; height:72vw; max-width:1040px; max-height:1040px; left:50%; top:-32vh; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(22,210,212,.13), rgba(48,51,142,.06) 45%, transparent 70%);
  animation:dc-aurora-a 28s var(--ease) infinite alternate;
}
.dc-atmos::after{
  width:62vw; height:62vw; max-width:920px; max-height:920px; right:-18vw; bottom:-26vh;
  background:radial-gradient(circle, rgba(48,51,142,.14), rgba(22,210,212,.04) 50%, transparent 72%);
  animation:dc-aurora-b 34s var(--ease) infinite alternate;
}
@keyframes dc-aurora-a{ 0%{ transform:translateX(-50%) translateY(0) scale(1) } 100%{ transform:translateX(-44%) translateY(4vh) scale(1.14) } }
@keyframes dc-aurora-b{ 0%{ transform:translate(0,0) scale(1) } 100%{ transform:translate(-5vw,-3vh) scale(1.16) } }
/* fine film grain for the cinematic feel */
.dc-grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main{ position:relative; z-index:2; }

/* ---------- layout ---------- */
.dc-wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.dc-section{ position:relative; padding:clamp(72px,11vw,150px) 0; }
.dc-section--tight{ padding:clamp(48px,7vw,90px) 0; }
.dc-center{ text-align:center; }

/* ---------- typography ---------- */
.dc-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.dc-eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--teal); box-shadow:0 0 10px var(--teal); flex:0 0 auto;
}
.dc-display{
  font-family:var(--serif); font-weight:500; font-style:italic;
  line-height:1.08; letter-spacing:-.01em; color:var(--ink); margin:0;
  font-size:clamp(2.1rem,5.4vw,4rem);
}
.dc-display--sm{ font-size:clamp(1.7rem,3.6vw,2.7rem); }
.dc-display{ text-shadow:0 1px 40px rgba(255,255,255,.04); }
.dc-display .ac{
  color:var(--teal);
  background:linear-gradient(180deg,#8FF5F6,#16D2D4 60%,#0FB4B6);
  -webkit-background-clip:text; background-clip:text;
  text-shadow:0 0 34px rgba(22,210,212,.4);
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){ .dc-display .ac{ color:var(--teal); } }
.dc-h3{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:1.5rem; margin:0; }
.dc-lead{
  font-family:var(--sans); font-size:clamp(1rem,1.3vw,1.12rem);
  color:var(--muted); max-width:60ch; margin:18px auto 0; line-height:1.7;
}
.dc-kicker-sans{ font-family:var(--sans); }
.dc-metal{
  background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .dc-metal{ color:var(--ink); }
}
.dc-num{
  font-family:var(--sans); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(2.2rem,4vw,3.2rem); line-height:1;
  background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- buttons ---------- */
.dc-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-weight:600; font-size:.95rem; letter-spacing:.01em;
  padding:13px 22px; border-radius:999px; cursor:pointer; overflow:hidden;
  border:1px solid var(--hair); color:var(--ink);
  background:rgba(255,255,255,.03);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:transform .25s var(--ease), border-color .3s var(--ease), box-shadow .35s var(--ease), background .3s var(--ease);
}
.dc-btn:hover{ transform:translateY(-2px); border-color:rgba(22,210,212,.5); }
.dc-btn--primary{
  border-color:rgba(22,210,212,.45);
  background:linear-gradient(180deg, rgba(22,210,212,.16), rgba(22,210,212,.06));
  box-shadow:0 0 0 1px rgba(22,210,212,.18), 0 10px 36px -14px rgba(22,210,212,.65);
}
.dc-btn--primary::after{ /* travelling glint */
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-18deg); animation:dc-glint 4s var(--ease) infinite;
}
.dc-btn--primary:hover{ box-shadow:0 0 0 1px rgba(22,210,212,.4), 0 14px 44px -12px rgba(22,210,212,.85); }
.dc-btn--ghost{ background:transparent; }
@keyframes dc-glint{ 0%{left:-60%} 55%,100%{left:130%} }

/* ---------- chips ---------- */
.dc-chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.dc-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-size:.78rem; font-weight:500; color:var(--ink);
  padding:8px 14px; border-radius:999px; border:1px solid var(--hair);
  background:rgba(255,255,255,.02); white-space:nowrap;
}
.dc-chip svg,.dc-chip .dot{ color:var(--teal); flex:0 0 auto; }
.dc-chip .dot{ width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal); }

/* ---------- cards / panels ---------- */
.dc-card{
  position:relative; border-radius:var(--radius); border:1px solid var(--hair);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  padding:26px; overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 12px 34px -26px rgba(0,0,0,.95);
  transition:transform .45s var(--ease-out), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.dc-card:hover{
  transform:translateY(-5px); border-color:rgba(22,210,212,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11), 0 34px 74px -34px rgba(0,0,0,.9), 0 0 0 1px rgba(22,210,212,.16), 0 0 56px -18px rgba(22,210,212,.4);
}
.dc-card__glow{
  position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s var(--ease);
  background:radial-gradient(380px 180px at var(--mx,50%) -10%, rgba(22,210,212,.14), transparent 70%);
}
.dc-card:hover .dc-card__glow{ opacity:1; }
.dc-hair{ height:1px; border:0; background:linear-gradient(90deg,transparent,var(--hair),transparent); margin:0; }

/* ---------- shared nav ---------- */
.dc-nav{ position:sticky; top:0; z-index:100; }
.dc-nav__bar{
  position:relative; border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
}
.dc-nav.is-stuck .dc-nav__bar{
  background:rgba(5,5,7,.72); border-bottom-color:var(--hair);
  -webkit-backdrop-filter:blur(16px) saturate(130%); backdrop-filter:blur(16px) saturate(130%);
}
.dc-nav__row{ display:flex; align-items:center; justify-content:space-between; height:74px; transition:height .4s var(--ease); }
.dc-nav.is-stuck .dc-nav__row{ height:62px; }
.dc-nav__logo img{ height:34px; width:auto; transition:height .4s var(--ease); }
.dc-nav.is-stuck .dc-nav__logo img{ height:30px; }
.dc-nav__links{ display:flex; align-items:center; gap:4px; }
.dc-nav__link{
  position:relative; padding:9px 14px; font-size:.9rem; font-weight:500; color:var(--muted);
  border-radius:9px; transition:color .25s var(--ease);
}
.dc-nav__link::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:1.5px; border-radius:2px;
  background:var(--teal); box-shadow:0 0 10px var(--teal);
  transform:scaleX(0); transform-origin:left; opacity:0; transition:transform .35s var(--ease-out), opacity .35s var(--ease);
}
.dc-nav__link:hover{ color:var(--ink); }
.dc-nav__link:hover::after{ transform:scaleX(.6); opacity:.6; }
.dc-nav__link.is-active{ color:var(--ink); }
.dc-nav__link.is-active::after{ transform:scaleX(1); opacity:1; }
.dc-nav__cta-mobile{ display:none; }
.dc-nav__burger{ display:none; width:42px; height:42px; border-radius:11px; border:1px solid var(--hair);
  background:rgba(255,255,255,.03); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.dc-nav__burger span{ width:18px; height:1.6px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease), opacity .3s var(--ease); }
.dc-nav.is-open .dc-nav__burger span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.dc-nav.is-open .dc-nav__burger span:nth-child(2){ opacity:0; }
.dc-nav.is-open .dc-nav__burger span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

/* ---------- shared footer ---------- */
.dc-footer{ position:relative; z-index:2; border-top:1px solid var(--hair); background:var(--bg-2); padding:64px 0 30px; }
.dc-footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1.2fr 1fr; gap:34px; }
.dc-footer__claim{ color:var(--muted); max-width:34ch; margin-top:16px; font-size:.92rem; }
.dc-footer__logo img{ height:40px; width:auto; }
.dc-footer h4{ font-family:var(--sans); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2); margin:0 0 14px; }
.dc-footer a{ display:block; color:var(--muted); padding:5px 0; font-size:.92rem; transition:color .2s var(--ease); }
.dc-footer a:hover{ color:var(--teal); }
.dc-footer__bottom{ margin-top:40px; padding-top:20px; border-top:1px solid var(--hair-2); display:flex; justify-content:space-between; gap:16px; color:var(--muted-2); font-size:.82rem; flex-wrap:wrap; }

/* ---------- reveal-on-scroll ---------- */
.dc-reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.dc-reveal.is-in{ opacity:1; transform:none; }
.dc-reveal[data-delay="1"]{ transition-delay:.08s; }
.dc-reveal[data-delay="2"]{ transition-delay:.16s; }
.dc-reveal[data-delay="3"]{ transition-delay:.24s; }
.dc-reveal[data-delay="4"]{ transition-delay:.32s; }
.dc-reveal[data-delay="5"]{ transition-delay:.40s; }

/* ---------- responsive ---------- */
@media (max-width:860px){
  .dc-nav__links{ position:fixed; inset:62px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:rgba(5,5,7,.96); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
    border-bottom:1px solid var(--hair); padding:10px 24px 18px; transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:transform .3s var(--ease), opacity .3s var(--ease); }
  .dc-nav.is-open .dc-nav__links{ transform:none; opacity:1; pointer-events:auto; }
  .dc-nav__link{ padding:13px 6px; font-size:1rem; }
  .dc-nav__link::after{ display:none; }
  .dc-nav__burger{ display:flex; }
  .dc-nav__cta-desktop{ display:none; }
  .dc-nav__cta-mobile{ display:inline-flex; justify-content:center; margin:10px 6px 2px; }
  .dc-footer__grid{ grid-template-columns:1fr 1fr; gap:28px; }
}
@media (max-width:600px){
  .dc-wrap{ padding:0 18px; }
  .dc-section{ padding:clamp(52px,13vw,80px) 0; }
  .dc-eyebrow{ font-size:11px; letter-spacing:.14em; }
  .dc-display{ font-size:clamp(2rem,8.6vw,2.6rem); line-height:1.1; }
  .dc-display--sm{ font-size:clamp(1.6rem,6.6vw,2rem); }
  .dc-lead{ font-size:1rem; }
  .dc-card{ padding:20px; }
  .dc-btn{ padding:12px 18px; font-size:.9rem; }
}
@media (max-width:520px){
  .dc-footer__grid{ grid-template-columns:1fr; }
}

/* ---------- premium FX layer (injected by dc.js) ---------- */
.dc-progress{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:200; border-radius:0 2px 2px 0;
  background:linear-gradient(90deg, var(--indigo), var(--teal) 60%, var(--sky));
  box-shadow:0 0 12px rgba(22,210,212,.8); transition:width .12s linear;
}
.dc-fx{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  background:radial-gradient(135% 130% at 50% 38%, transparent 60%, rgba(0,0,0,.5));
}
.dc-fx__spot{
  position:absolute; width:620px; height:620px; left:50%; top:32%;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(22,210,212,.09), rgba(56,189,248,.04) 40%, transparent 62%);
  opacity:0; transition:opacity .6s var(--ease), left .2s var(--ease-out), top .2s var(--ease-out);
  will-change:left,top;
}
.dc-fx.is-live .dc-fx__spot{ opacity:1; }

/* reveal: add a soft blur-in for extra polish */
.dc-reveal{ filter:blur(6px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out); }
.dc-reveal.is-in{ filter:blur(0); }

/* refined chip + ghost button */
.dc-chip{ box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
.dc-btn--ghost:hover{ background:rgba(22,210,212,.06); }

@media (max-width:760px){ .dc-fx{ display:none; } }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .dc-reveal{ opacity:1; transform:none; filter:none; }
  .dc-btn--primary::after{ animation:none !important; display:none; }
  .dc-atmos::before,.dc-atmos::after{ animation:none !important; }
  .dc-fx__spot{ display:none; }
  html{ scroll-behavior:auto; }
}
