/* ===========================================================
   Provel — Shared design system
   Imported by every page via <link rel="stylesheet" href="/assets/site.css">
   Page-specific styles live in each page's inline <style> block.
   =========================================================== */

/* Provel brand palette
   Surfaces: bg → bg2 → surface → surface2 (4 elevation steps)
   Borders:  border → border2
   Text:     text → muted2 → muted (3 steps)
   Accents:  blue (primary) · purple/pink (accent) · orange/green/yellow (functional)
   Hover:    --hover (single border hover token) */
:root{
  --bg:#010309;--bg-deep:#010309;--bg2:#0d0d10;--surface:#121217;--surface2:#1a1c22;
  --border:#22252b;--border2:#333740;--hover:#444955;
  --text:#f5f6f6;--muted:#8f9299;--muted2:#b4b6bb;
  --blue:#0953ff;--blue-deep:#0036b3;--blue-light:#3d72ff;--blue-glow:rgba(9,83,255,0.22);
  --purple:#fb8ccf;--purple-deep:#c75aa0;--purple-light:#fcaada;--purple-glow:rgba(251,140,207,0.22);
  --orange:#fb4d3d;--orange-glow:rgba(251,77,61,0.22);
  --green:#03cea4;--green-glow:rgba(3,206,164,0.20);
  --yellow:#f7b801;--yellow-glow:rgba(247,184,1,0.22);
  /* Legacy aliases for older pages — gradually being migrated to the tokens above */
  --magenta:#fb8ccf;--cyan:#3a4ab4;--rose:#fb8ccf;
  --mono:'Geist Mono',monospace;--sans:'Geist',sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}

/* Page-load + scroll-triggered animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulseBg{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes statusPulse{0%,100%{transform:scale(1);box-shadow:0 0 6px var(--orange),0 0 0 0 rgba(251,77,61,0.55)}50%{transform:scale(1.18);box-shadow:0 0 12px var(--orange),0 0 0 6px rgba(251,77,61,0)}}
@keyframes statusPulseGreen{0%,100%{transform:scale(1);box-shadow:0 0 6px var(--green),0 0 0 0 rgba(3,206,164,0.55)}50%{transform:scale(1.18);box-shadow:0 0 12px var(--green),0 0 0 6px rgba(3,206,164,0)}}

.reveal{opacity:0;transform:translateY(20px);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
.reveal.in-view{opacity:1;transform:none}
.reveal-stagger > *{opacity:0;transform:translateY(18px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
.reveal-stagger.in-view > *{opacity:1;transform:none}
.reveal-stagger.in-view > *:nth-child(1){transition-delay:.05s}
.reveal-stagger.in-view > *:nth-child(2){transition-delay:.13s}
.reveal-stagger.in-view > *:nth-child(3){transition-delay:.21s}
.reveal-stagger.in-view > *:nth-child(4){transition-delay:.29s}
.reveal-stagger.in-view > *:nth-child(5){transition-delay:.37s}
.reveal-stagger.in-view > *:nth-child(6){transition-delay:.45s}
.reveal-stagger.in-view > *:nth-child(7){transition-delay:.53s}
.reveal-stagger.in-view > *:nth-child(8){transition-delay:.61s}
.reveal-stagger.in-view > *:nth-child(9){transition-delay:.69s}

@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-stagger > *{opacity:1;transform:none;transition:none}
}

/* Subtle film-grain overlay */
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:0;opacity:0.4}
@media(prefers-reduced-motion:reduce){body::before{display:none}}

/* Top nav */
nav.topnav{position:fixed;top:0;left:0;right:0;height:56px;background:rgba(0,0,0,0.8);backdrop-filter:blur(12px) saturate(180%);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;z-index:100;animation:fadeIn .55s ease-out both;animation-delay:.05s}
.nav-logo a{display:flex;align-items:center;text-decoration:none}
.nav-logo svg{height:22px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:8px}
.nav-link{font-family:var(--mono);font-size:11px;color:var(--muted);border:1px solid var(--border2);padding:5px 12px;border-radius:20px;text-decoration:none;transition:color .15s,border-color .15s,background .15s;white-space:nowrap}
.nav-link:hover{color:var(--text);border-color:var(--hover);background:var(--surface)}
.nav-link:focus-visible{outline:2px solid #6e92ff;outline-offset:3px}
.nav-link.active{color:var(--text);border-color:var(--border2);background:var(--surface)}
.nav-link.cta{color:var(--bg);background:var(--text);border-color:var(--text)}
.nav-link.cta:hover{opacity:.88;background:var(--text)}
@media(max-width:680px){.nav-link.hide-sm{display:none}}
@media(prefers-reduced-motion:reduce){nav.topnav{animation:none}}

/* Section scaffold */
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
.narrow{max-width:960px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
.section{padding:100px 0;position:relative;z-index:1}
.section-tight{padding:60px 0;position:relative;overflow:hidden}
.section-head{margin-bottom:48px}

/* Typography */
h1,h2,h3{letter-spacing:-1px;font-weight:700;line-height:1.1}
h1{font-size:clamp(40px,7vw,72px);font-weight:700;line-height:1.04;letter-spacing:-2.5px;margin-bottom:24px;max-width:14ch}
h2{font-size:clamp(28px,4.4vw,44px);letter-spacing:-1.2px;margin-bottom:14px}
h2 .dim,h1 .dim{color:var(--muted2);font-weight:300}
.lede{font-size:16px;color:var(--muted2);line-height:1.65;max-width:640px}

/* Eyebrow label */
.eyebrow{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:1.8px;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;margin-bottom:16px}
.eyebrow::before{content:'';width:18px;height:1px;background:var(--border2)}
.eyebrow.eb-blue{color:#6e92ff}.eyebrow.eb-blue::before{background:var(--blue);box-shadow:0 0 8px var(--blue)}
.eyebrow.eb-purple{color:var(--muted2)}.eyebrow.eb-purple::before{background:var(--text);box-shadow:0 0 6px rgba(255,255,255,0.4)}
.eyebrow.eb-orange,.eyebrow.eb-red{color:#ff8c7a}.eyebrow.eb-orange::before,.eyebrow.eb-red::before{background:var(--orange);box-shadow:0 0 8px var(--orange)}
.eyebrow.eb-magenta,.eyebrow.eb-yellow{color:#ffd95c}.eyebrow.eb-magenta::before,.eyebrow.eb-yellow::before{background:var(--yellow);box-shadow:0 0 8px var(--yellow)}
.eyebrow.eb-green{color:#6cf2cc}.eyebrow.eb-green::before{background:var(--green);box-shadow:0 0 8px var(--green)}

/* Buttons */
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;border:none;border-radius:8px;padding:12px 20px;font-size:13px;font-weight:600;font-family:var(--sans);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,box-shadow .15s,transform .1s;box-shadow:0 6px 20px rgba(9,83,255,0.32),inset 0 1px 0 rgba(255,255,255,0.18)}
.btn-primary:hover{background:#1c66ff;box-shadow:0 8px 24px rgba(9,83,255,0.45),inset 0 1px 0 rgba(255,255,255,0.22)}
.btn-primary:active{transform:scale(.98)}
.btn-primary:focus-visible{outline:2px solid #6e92ff;outline-offset:3px}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;background:var(--surface);color:var(--text);border:1px solid var(--border2);border-radius:8px;padding:11px 18px;font-size:13px;font-family:var(--mono);text-decoration:none;transition:border-color .15s,background .15s}
.btn-ghost:hover{border-color:var(--hover);background:var(--surface2)}
.btn-ghost:focus-visible{outline:2px solid #6e92ff;outline-offset:3px}
.arrow{transition:transform .15s}
.btn-primary:hover .arrow,.btn-ghost:hover .arrow{transform:translateX(3px)}

/* Footer */
footer.foot{border-top:1px solid var(--border);padding:32px 24px;margin-top:80px;position:relative;z-index:1}
.foot-row{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:1px;position:relative;z-index:2}
.foot-row a{color:var(--muted);text-decoration:none;transition:color .15s}
.foot-row a:hover{color:var(--text)}
.foot-links{display:flex;gap:20px;flex-wrap:wrap}

/* Floating contact dock — bottom right, on every page */
.contact-dock{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;flex-direction:column;gap:10px;align-items:flex-end;animation:fadeUp .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:1.2s}
.cd-list{display:flex;flex-direction:column;gap:10px;align-items:flex-end;max-height:0;opacity:0;overflow:hidden;transform:translateY(8px);pointer-events:none;transition:max-height .35s cubic-bezier(.2,.7,.2,1),opacity .25s ease,transform .35s cubic-bezier(.2,.7,.2,1)}
.contact-dock.is-open .cd-list{max-height:320px;opacity:1;transform:none;pointer-events:auto}
.cd-list > *{opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.contact-dock.is-open .cd-list > *{opacity:1;transform:none}
.contact-dock.is-open .cd-list > *:nth-child(1){transition-delay:.05s}
.contact-dock.is-open .cd-list > *:nth-child(2){transition-delay:.12s}
.contact-dock.is-open .cd-list > *:nth-child(3){transition-delay:.19s}
.cd-btn{display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 12px;border-radius:999px;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:-0.1px;text-decoration:none;border:1px solid var(--border2);background:var(--surface);color:var(--text);transition:transform .15s,border-color .15s,box-shadow .15s,background .15s}
.cd-btn:hover{transform:translateX(2px);border-color:var(--hover)}
.cd-icon{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.cd-icon svg{width:15px;height:15px}
.cd-btn.cd-call .cd-icon{background:var(--blue);color:#fff;box-shadow:0 0 12px rgba(9,83,255,0.45)}
.cd-btn.cd-call:hover{box-shadow:0 6px 20px rgba(9,83,255,0.28);border-color:rgba(9,83,255,0.45)}
.cd-btn.cd-tg .cd-icon{background:linear-gradient(180deg,#37bbfe 0%,#007dbb 100%);color:#fff;box-shadow:0 0 12px rgba(34,158,217,0.5)}
.cd-btn.cd-tg:hover{box-shadow:0 6px 20px rgba(34,158,217,0.32);border-color:rgba(34,158,217,0.5)}
.cd-btn.cd-mail .cd-icon{background:var(--surface2);color:var(--text);border:1px solid var(--border2)}
.cd-btn.cd-mail:hover{border-color:var(--hover)}
.cd-status{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;background:rgba(0,0,0,0.7);border:1px solid var(--border2);backdrop-filter:blur(10px);font-family:var(--mono);font-size:11px;color:var(--muted2);letter-spacing:1.2px;text-transform:uppercase;cursor:pointer;user-select:none;transition:border-color .15s,color .15s,background .15s}
.cd-status:hover{border-color:var(--hover);color:var(--text)}
.contact-dock.is-open .cd-status{border-color:var(--hover);color:var(--text);background:rgba(0,0,0,0.85)}
.cd-status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:cdPulse 2.2s ease-in-out infinite}
.cd-caret{display:none}
@keyframes cdPulse{0%,100%{box-shadow:0 0 6px var(--green),0 0 0 0 rgba(3,206,164,0.5)}50%{box-shadow:0 0 12px var(--green),0 0 0 6px rgba(3,206,164,0)}}
@media(max-width:760px){
  .contact-dock{right:12px;bottom:12px;gap:8px}
  .cd-btn{padding:8px 14px 8px 10px;font-size:12px}
  .cd-icon{width:26px;height:26px}
  .cd-icon svg{width:13px;height:13px}
  .cd-status{font-size:10px;padding:7px 12px}
}
@media(prefers-reduced-motion:reduce){
  .contact-dock{animation:none}
  .cd-status-dot{animation:none}
  .cd-list,.cd-list > *,.cd-caret{transition:none}
}

/* Extra-small screens (<360px) */
@media(max-width:359px){
  .wrap,.narrow{padding:0 16px}
  h1{font-size:clamp(32px,9vw,40px);letter-spacing:-1.5px}
  h2{font-size:clamp(22px,7vw,28px)}
  .nav-links{gap:6px}
  .nav-link{padding:4px 9px;font-size:10px}
  .contact-dock{right:8px;bottom:8px}
}

/* ============================================================
   Skip-to-content link (accessibility — all pages)
   ============================================================ */
.skip-link{position:absolute;top:-60px;left:12px;background:var(--blue);color:#fff;font-family:var(--sans);font-size:13px;font-weight:600;padding:10px 18px;border-radius:6px;text-decoration:none;z-index:9999;transition:top .15s ease}
.skip-link:focus{top:12px}

/* ============================================================
   Mobile hamburger nav (all pages)
   ============================================================ */
.nav-hamburger{display:none;background:none;border:1px solid var(--border2);border-radius:8px;padding:6px 10px;cursor:pointer;color:var(--muted2);font-size:18px;line-height:1;flex-shrink:0;transition:border-color .15s,color .15s}
.nav-hamburger:hover{border-color:var(--hover);color:var(--text)}
.nav-hamburger:focus-visible{outline:2px solid #6e92ff;outline-offset:3px}

/* Mobile menu panel */
.nav-mobile-panel{display:none;position:fixed;top:56px;left:0;right:0;background:rgba(5,5,10,0.97);backdrop-filter:blur(16px) saturate(180%);border-bottom:1px solid var(--border);z-index:99;padding:16px 20px 24px;flex-direction:column;gap:8px;animation:fadeIn .2s ease-out both}
.nav-mobile-panel.is-open{display:flex}
.nav-mobile-panel .nav-link{display:block;text-align:left;width:100%;padding:11px 16px;font-size:13px;border-radius:10px}
.nav-mobile-panel .nav-link.cta{margin-top:4px}

@media(max-width:680px){
  .nav-hamburger{display:flex;align-items:center;justify-content:center}
  /* Hide the desktop pill links on mobile — hamburger replaces them */
  nav.topnav .nav-links .nav-link{display:none}
  /* Always show the CTA in the desktop pill row so it stays accessible if JS is off */
  nav.topnav .nav-links .nav-link.cta{display:inline-flex}
}
@media(prefers-reduced-motion:reduce){
  .nav-mobile-panel{animation:none}
}