/* ============================================================
   VEYRA — shared design system
   Dark theme, green accent, Space Grotesk + IBM Plex Mono
   ============================================================ */

:root{
  --bg:#060709;
  --bg-2:#0b0d10;
  --bg-3:#08090b;
  --line:rgba(255,255,255,.08);
  --line-soft:rgba(255,255,255,.06);
  --text:#e8eaed;
  --text-2:#9aa0a6;
  --text-3:#6b7280;
  --text-strong:#d5d9dd;
  --green:#00e07f;
  --green-2:#5cf0ac;
  --green-ink:#04130b;
  --red:#ff5c5c;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'Space Grotesk',system-ui,-apple-system,Segoe UI,sans-serif;
  --maxw:1440px;
  --pad:56px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--green);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--green-2)}
img,svg{max-width:100%}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
input,textarea,button{font-family:inherit}
::placeholder{color:var(--text-3)}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}

.wrap{max-width:var(--maxw);margin:0 auto}
.accent{color:var(--green)}
.mono{font-family:var(--mono)}
.hide-mobile{}
.hide-desktop{display:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:15px;border-radius:10px;padding:14px 30px;
  border:1px solid transparent;cursor:pointer;transition:all .15s ease;line-height:1;
}
.btn-primary{background:var(--green);color:var(--green-ink);box-shadow:0 0 28px rgba(0,224,127,.22)}
.btn-primary:hover{background:var(--green-2);color:var(--green-ink)}
.btn-ghost{border-color:rgba(255,255,255,.15);color:var(--text)}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}
.btn-outline{border-color:rgba(0,224,127,.5);color:var(--green)}
.btn-outline:hover{background:var(--green);color:var(--green-ink)}
.btn-sm{padding:10px 22px;font-size:14px;border-radius:8px}
.btn-block{display:flex;width:100%}

/* ---------- header ---------- */
.site-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--pad);border-bottom:1px solid var(--line-soft);
  position:sticky;top:0;z-index:50;background:rgba(6,7,9,.82);backdrop-filter:blur(10px);
}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-icon{width:28px;height:28px;border-radius:8px;display:block}
.brand-name{font-weight:600;font-size:18px;letter-spacing:.3px;color:var(--text)}
.nav{display:flex;gap:30px;font-size:14px}
.nav a{color:var(--text-2)}
.nav a:hover{color:var(--text)}
.nav a.active{color:var(--green)}
.header-cta{display:flex;align-items:center;gap:16px;flex-shrink:0}
.header-cta .login{color:var(--text-2);font-size:14px}
.header-cta .login:hover{color:var(--text)}
.burger{display:none;background:none;border:none;padding:6px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--text);margin:4px 0;border-radius:2px;transition:.2s}

/* mobile drawer */
.mobile-nav{
  display:none;position:fixed;inset:0;z-index:60;background:rgba(6,7,9,.98);
  backdrop-filter:blur(6px);flex-direction:column;padding:24px var(--pad);
}
.mobile-nav.open{display:flex}
.mobile-nav .mn-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:40px}
.mobile-nav .mn-close{background:none;border:none;color:var(--text);font-size:30px;cursor:pointer;line-height:1}
.mobile-nav a{font-size:22px;color:var(--text);padding:14px 0;border-bottom:1px solid var(--line-soft)}
.mobile-nav a.active{color:var(--green)}
.mobile-nav .mn-cta{margin-top:auto;display:grid;gap:12px}

/* announcement bar */
.announce{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:10px var(--pad);background:var(--bg-2);border-bottom:1px solid var(--line-soft);
  font-size:13px;color:var(--text-2);
}
.announce .a-left{display:inline-flex;align-items:center;gap:8px}
.announce .a-right{display:flex;gap:14px;align-items:center;flex-shrink:0}
.lang-pill{border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:3px 10px;font-size:12px;color:var(--text);cursor:pointer}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:blink 1.6s infinite;flex-shrink:0}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* breadcrumb */
.crumb{padding:14px var(--pad);font-family:var(--mono);font-size:11.5px;letter-spacing:1px;color:var(--text-3);border-bottom:1px solid var(--line-soft)}
.crumb .sep{color:#3a3f45}
.crumb .here{color:var(--green)}

/* ---------- generic section helpers ---------- */
.section{padding:80px var(--pad)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;color:var(--green);margin-bottom:14px}
.h1{margin:0;font-size:52px;font-weight:600;letter-spacing:-2px;line-height:1.07}
.h2{margin:0;font-size:38px;font-weight:600;letter-spacing:-1.2px}
.lead{margin:16px 0 0;font-size:18px;color:var(--text-2);line-height:1.6}
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:30px;transition:border-color .15s ease}
.card:hover{border-color:rgba(0,224,127,.4)}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;color:var(--green);margin-bottom:12px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.check{display:flex;gap:11px;align-items:baseline;font-size:14.5px;color:var(--text-strong)}
.check span{color:var(--green)}

/* help/article search — animated collapse (grid-row trick) */
.help-article{
  display:grid;grid-template-rows:1fr;opacity:1;transform:translateY(0);
  margin-bottom:14px;overflow:hidden;
  transition:grid-template-rows .35s ease,opacity .3s ease,transform .3s ease,margin .35s ease;
}
.help-article>*{min-height:0;overflow:hidden;}
.ha-inner{min-height:0;overflow:hidden;}
.help-article.is-hidden{
  grid-template-rows:0fr;opacity:0;transform:translateY(-6px);
  margin-bottom:0;pointer-events:none;
}
.help-empty{
  opacity:0;transform:translateY(8px);pointer-events:none;height:0;overflow:hidden;
  transition:opacity .35s ease,transform .35s ease;
  text-align:center;border:1px dashed rgba(255,255,255,.15);border-radius:14px;
}
.help-empty.is-visible{opacity:1;transform:translateY(0);pointer-events:auto;height:auto;padding:50px 30px;}

/* form controls */
.field{
  background:var(--bg);border:1px solid rgba(255,255,255,.12);border-radius:10px;
  padding:14px 16px;font-size:15px;color:var(--text);outline:none;width:100%;
  transition:border-color .15s ease;
}
.field:focus{border-color:var(--green)}
textarea.field{resize:vertical;min-height:110px}

/* Browser autofill: Chrome/Safari force a light background + dark text on
   autofilled inputs, which breaks the dark theme (white field, invisible
   dial code). Override it by painting over with an inset shadow and setting
   the text fill colour. The long transition delay stops the yellow flash. */
.field:-webkit-autofill,
.field:-webkit-autofill:hover,
.field:-webkit-autofill:focus,
.field:-webkit-autofill:active,
.iti input:-webkit-autofill,
.iti input:-webkit-autofill:hover,
.iti input:-webkit-autofill:focus,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text)!important;
  caret-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--bg) inset!important;
  box-shadow:0 0 0 1000px var(--bg) inset!important;
  border:1px solid rgba(255,255,255,.12)!important;
  -webkit-background-clip:text;
  transition:background-color 9999s ease-in-out 0s!important;
}
.field:-webkit-autofill:focus,
.iti input:-webkit-autofill:focus{border-color:var(--green)!important}
/* Firefox autofill */
.field:autofill,
input:autofill{
  color:var(--text)!important;
  box-shadow:0 0 0 1000px var(--bg) inset!important;
  -webkit-text-fill-color:var(--text)!important;
}
.form-card{background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:36px}
.form-grid{display:grid;gap:14px}

/* feature strip */
.strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.strip-item{padding:30px 36px;border-right:1px solid var(--line-soft)}
.strip-item:last-child{border-right:none}
.strip-item .tag{margin-bottom:8px}
.strip-item .label{font-size:16.5px;font-weight:600}

/* CTA banner */
.cta-banner{
  margin:0 var(--pad) 70px;
  background:linear-gradient(135deg,rgba(0,224,127,.1),rgba(0,224,127,.02)),var(--bg-2);
  border:1px solid rgba(0,224,127,.3);border-radius:16px;padding:36px 40px;
  display:flex;justify-content:space-between;align-items:center;gap:30px;
}
.cta-banner .cta-text{font-size:24px;font-weight:600;letter-spacing:-.5px}
.cta-banner .btn{flex-shrink:0}

/* ---------- price ticker ---------- */
.ticker{overflow:hidden;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:var(--bg-3)}
.ticker-track{display:flex;gap:48px;white-space:nowrap;padding:11px 0;font-family:var(--mono);font-size:12.5px;width:max-content;animation:tick 40s linear infinite}
.ticker-track span{color:var(--text-2)}
.ticker-track b{color:var(--green);font-weight:500}
.ticker-track b.down{color:var(--red)}
@keyframes tick{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ---------- footer ---------- */
.site-footer{padding:70px var(--pad) 30px;border-top:1px solid var(--line-soft);background:var(--bg-3)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px}
.footer-brand .brand{margin-bottom:12px}
.footer-tag{font-size:14px;color:var(--text-2);margin-bottom:18px}
.footer-addr{font-size:13.5px;color:var(--text-3);line-height:1.7}
.footer-col h4{font-size:15px;font-weight:600;margin:0 0 16px}
.footer-col .links{display:grid;gap:10px;font-size:14px}
.footer-col .links a{color:var(--text-2)}
.footer-col .links a:hover{color:var(--text)}
.risk{border:1px solid rgba(255,92,92,.25);border-radius:12px;padding:22px 26px;margin-bottom:36px}
.risk .risk-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--red);margin-bottom:10px}
.risk p{margin:0;font-size:13px;color:var(--text-2);line-height:1.7}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:24px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--text-3);flex-wrap:wrap}
.footer-bottom .fb-links{display:flex;gap:22px;flex-wrap:wrap}
.footer-bottom a{color:var(--text-3)}
.footer-bottom a:hover{color:var(--text-2)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  :root{--pad:32px}
  .h1{font-size:44px}
  .h2{font-size:32px}
}

@media (max-width:860px){
  :root{--pad:20px}
  .nav,.header-cta .login,.header-cta .btn{display:none}
  .burger{display:block}
  .hide-desktop{display:revert}
  .hide-mobile{display:none !important}

  .h1{font-size:32px;letter-spacing:-1.2px}
  .h2{font-size:25px;letter-spacing:-.8px}
  .lead{font-size:15px}
  .section{padding:44px var(--pad)}

  .grid-3,.grid-2,.grid-4{grid-template-columns:1fr;gap:12px}
  .strip{grid-template-columns:1fr 1fr}
  .strip-item{padding:20px;border-bottom:1px solid var(--line-soft)}
  .strip-item:nth-child(2n){border-right:none}

  .announce{font-size:11.5px}
  .announce .a-left{line-height:1.4}

  .cta-banner{flex-direction:column;text-align:center;margin:0 var(--pad) 40px;padding:28px 22px}
  .cta-banner .cta-text{font-size:19px}
  .cta-banner .btn{width:100%}

  .footer-grid{grid-template-columns:1fr;gap:30px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:14px}
  .form-card{padding:24px}
  .card{padding:24px}
}

/* two-column layouts collapse */
.split{display:grid;gap:60px}
.split.cols-2{grid-template-columns:1fr 1fr}
.split.hero{grid-template-columns:1.05fr .95fr;align-items:center}
.split.contact{grid-template-columns:.9fr 1.1fr;align-items:start}
.split.markets{grid-template-columns:1.2fr .8fr;align-items:start}
.split.company-num{grid-template-columns:.9fr 1.1fr;align-items:center}
@media (max-width:960px){
  .split.cols-2,.split.hero,.split.contact,.split.markets,.split.company-num{grid-template-columns:1fr;gap:36px}
}

/* SweetAlert dark tuning */
.swal2-popup{font-family:var(--sans) !important}

/* ============================================================
   ARTICLE PAGE UPGRADE (help article)
   ============================================================ */
#readProgress{position:fixed;top:0;left:0;height:3px;width:0;z-index:99;
  background:linear-gradient(90deg,#007a45,var(--green));box-shadow:0 0 10px rgba(0,224,127,.5)}
.article-layout{display:grid;grid-template-columns:240px minmax(0,720px) 240px;
  gap:56px;max-width:1320px;margin:0 auto;padding:60px 40px;align-items:start}
.article-rail{position:sticky;top:80px}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.rise-1{animation:rise .5s ease both}
.rise-2{animation:rise .5s ease .08s both}
.rise-3{animation:rise .5s ease .16s both}
.toc-label{font-family:var(--mono);font-size:10.5px;letter-spacing:2px;color:var(--text-3);margin-bottom:16px}
.toc a{display:block;font-size:13.5px;color:var(--text-2);border-left:2px solid var(--line);
  padding:7px 0 7px 14px;transition:all .25s}
.toc a:hover{color:var(--text);border-left-color:rgba(0,224,127,.5)}
.toc a.active{color:var(--green);border-left-color:var(--green)}
.article-badge{background:rgba(0,224,127,.12);color:var(--green);font-size:12.5px;font-weight:600;padding:5px 14px;border-radius:999px}
.article-meta{font-family:var(--mono);font-size:12px;color:var(--text-3)}
.author-row{display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:36px;flex-wrap:wrap}
.action-chip{border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:8px 12px;
  font-size:13px;color:var(--text-2);cursor:pointer;transition:all .25s;background:none;font-family:inherit}
.action-chip:hover{border-color:var(--green);color:var(--green)}
#articleBody{font-size:17px;line-height:1.85;color:#c9ced4}
#articleBody .lead{font-size:19px;color:var(--text);margin:0 0 20px}
#articleBody p{margin:0 0 20px}
#articleBody h2{margin:36px 0 14px;font-size:26px;font-weight:600;color:var(--text);letter-spacing:-.5px;scroll-margin-top:90px}
.stat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0}
.stat-card{border:1px solid rgba(0,224,127,.25);border-radius:12px;padding:18px;background:rgba(0,224,127,.04);text-align:center}
.stat-card b{display:block;font-family:var(--mono);font-size:22px;color:var(--green)}
.stat-card span{font-size:12.5px;color:var(--text-2)}
.callout{border:1px solid rgba(0,224,127,.3);border-radius:12px;padding:20px 24px;
  background:rgba(0,224,127,.05);margin:22px 0;display:flex;gap:14px;font-size:15px;line-height:1.7;color:var(--text-strong)}
.callout::before{content:"✓";color:var(--green);font-size:18px}
.helpful{margin-top:44px;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:26px 30px;
  background:var(--bg-2);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.helpful button{border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:10px 20px;
  font-size:14px;cursor:pointer;transition:all .25s;color:var(--text-2);background:none;font-family:inherit}
.helpful button.picked{border-color:var(--green);background:rgba(0,224,127,.12);color:var(--green)}
.related-card{display:block;border:1px solid var(--line);border-radius:12px;padding:16px;
  background:var(--bg-2);color:var(--text);transition:border-color .25s}
.related-card:hover{border-color:rgba(0,224,127,.45)}
.related-card small{font-size:11.5px;color:var(--text-3)}
@media(max-width:1100px){
  .article-layout{grid-template-columns:minmax(0,1fr);gap:30px;padding:40px var(--pad)}
  .article-rail{position:static}
  .article-rail--right{display:none}
}
@media(max-width:640px){.stat-cards{grid-template-columns:1fr}}

/* ============================================================
   intl-tel-input — dark Veyra theme
   ============================================================ */
.iti{width:100%;display:block}
.iti__tel-input,.iti input,.iti input[type=tel]{width:100%}
/* the phone field keeps the .field look */
.iti .field{padding-left:12px}
.iti--separate-dial-code .field{padding-left:96px}
/* flag/dropdown button */
.iti__selected-country,.iti__selected-flag{
  background:rgba(255,255,255,.04);border-radius:10px 0 0 10px;padding:0 10px;
}
.iti__selected-country:hover,.iti__selected-flag:hover{background:rgba(255,255,255,.08)}
.iti--separate-dial-code .iti__selected-dial-code{color:var(--text);font-family:var(--mono);font-size:14px}
/* dropdown list */
.iti__dropdown-content,.iti__country-list{
  background:var(--bg-2);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);color:var(--text);
}
.iti__country{color:var(--text);padding:9px 12px}
.iti__country.iti__highlight,.iti__country:hover{background:rgba(0,224,127,.12)}
.iti__dial-code{color:var(--text-3)}
.iti__search-input{
  background:var(--bg);border:none;border-bottom:1px solid var(--line);
  color:var(--text);padding:12px 14px;font-family:var(--sans);
}
.iti__divider{border-color:var(--line)}
/* arrow */
.iti__arrow{border-top-color:var(--text-3)}
.iti__arrow--up{border-bottom-color:var(--text-3)}

/* ============================================================
   LANGUAGE SWITCHER (desktop dropdown + mobile bottom sheet)
   ============================================================ */
.lang-switch{position:relative;display:inline-block}
.lang-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.14);
  border-radius:999px;padding:6px 13px;cursor:pointer;background:rgba(255,255,255,.03);
  color:var(--text);font:inherit;font-size:13px;font-weight:500;transition:border-color .2s}
.lang-btn:hover,.lang-switch.open .lang-btn{border-color:var(--green)}
.lang-btn .flag{font-size:15px;line-height:1}
.lang-btn .chev{font-size:10px;color:var(--text-3);transition:transform .2s}
.lang-switch.open .chev{transform:rotate(180deg)}

.lang-menu{position:absolute;top:calc(100% + 8px);right:0;width:230px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:14px;padding:8px;z-index:210;
  box-shadow:0 24px 60px rgba(0,0,0,.65);
  opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease}
.lang-switch.open .lang-menu{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.lang-menu .label{font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--text-3);padding:8px 12px 6px}
.lang-row{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border-radius:10px;
  cursor:pointer;background:none;border:none;font:inherit;text-align:left;transition:background .15s}
.lang-row:hover{background:rgba(255,255,255,.05)}
.lang-row.selected{background:rgba(0,224,127,.08)}
.lang-row .flag{font-size:17px;line-height:1}
.lang-row .name{display:block;font-size:14px;font-weight:500;color:var(--text)}
.lang-row.selected .name{color:var(--green)}
.lang-row .native{display:block;font-size:11.5px;color:var(--text-3)}
.lang-row .check{margin-left:auto;color:var(--green);font-size:14px;opacity:0}
.lang-row.selected .check{opacity:1}
.lang-backdrop{display:none}
.lang-close{display:none;background:none;border:none;color:var(--text-2);font-size:26px;line-height:1;cursor:pointer;padding:0 4px}

/* mobile: menu becomes a bottom sheet */
@media(max-width:768px){
  .lang-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);z-index:209;
    opacity:0;pointer-events:none;transition:opacity .2s}
  .lang-switch.open .lang-backdrop{opacity:1;pointer-events:auto}
  .lang-menu{position:fixed;top:auto;bottom:0;left:0;right:0;width:auto;border-radius:20px 20px 0 0;
    border:none;border-top:1px solid var(--line);padding:10px 14px 26px;
    transform:translateY(100%);opacity:1;scale:1;transition:transform .28s ease}
  .lang-switch.open .lang-menu{transform:translateY(0)}
  .lang-menu::before{content:"";display:block;width:40px;height:4px;border-radius:99px;
    background:rgba(255,255,255,.18);margin:6px auto 14px}
  .lang-menu .label{display:flex;justify-content:space-between;align-items:center;font-size:16px;
    letter-spacing:0;color:var(--text);font-family:var(--sans);font-weight:600;text-transform:none;padding:4px 12px 12px}
  .lang-menu .label span{font-size:0}
  .lang-menu .label span::after{content:"Choose language";font-size:16px}
  html[lang="de"] .lang-menu .label span::after{content:"Sprache wählen"}
  html[lang="fr"] .lang-menu .label span::after{content:"Choisir la langue"}
  .lang-close{display:block}
  .lang-row{padding:14px 12px;min-height:44px;box-sizing:border-box}
  .lang-row .flag{font-size:20px} .lang-row .name{font-size:15.5px}
}

/* toast */
.lang-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);
  z-index:9999;display:flex;align-items:center;gap:10px;
  background:var(--bg-2);border:1px solid rgba(0,224,127,.4);border-radius:12px;
  padding:13px 20px;font-size:14.5px;color:var(--text);
  box-shadow:0 18px 50px rgba(0,0,0,.55);opacity:0;
  transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.lang-toast.show{opacity:1;transform:translate(-50%,0)}
.lang-toast .lang-toast-badge{display:inline-flex;align-items:center;line-height:1;font-size:18px}

/* ============================================================
   LUXE-MINIMAL POLISH (site-wide)
   Restrained motion + refined micro-detail. One signature:
   a gentle scroll reveal, quiet until it earns attention.
   ============================================================ */

/* site-wide reading/scroll progress bar (thin, top) */
#siteProgress{position:fixed;top:0;left:0;height:2px;width:0;z-index:120;
  background:linear-gradient(90deg,#007a45,var(--green));
  box-shadow:0 0 8px rgba(0,224,127,.45);transition:width .1s linear;pointer-events:none}

/* scroll-reveal: elements start lowered + faded, settle when in view.
   Staggered by depth so a row resolves left-to-right, not all at once. */
[data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.06s}
[data-reveal-delay="2"]{transition-delay:.12s}
[data-reveal-delay="3"]{transition-delay:.18s}
[data-reveal-delay="4"]{transition-delay:.24s}

/* refined card: subtle lift + a whisper of green on hover, not a hard border flip */
.card{transition:transform .3s cubic-bezier(.22,.61,.36,1),border-color .3s ease,box-shadow .3s ease}
.card:hover{transform:translateY(-3px);border-color:rgba(0,224,127,.28);
  box-shadow:0 14px 40px -20px rgba(0,224,127,.25),0 8px 30px -12px rgba(0,0,0,.5)}

/* section eyebrow refinement (used across pages) */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:2.5px;color:var(--green);
  text-transform:uppercase;display:inline-block;margin-bottom:14px;position:relative;padding-left:26px}
.eyebrow::before{content:"";position:absolute;left:0;top:50%;width:18px;height:1px;
  background:linear-gradient(90deg,var(--green),transparent)}

/* primary buttons: gentle press + glow so CTAs feel tactile */
.btn-primary{transition:transform .18s ease,box-shadow .25s ease,background .15s ease}
.btn-primary:hover{box-shadow:0 10px 30px -10px rgba(0,224,127,.5)}
.btn-primary:active{transform:translateY(1px)}

/* quiet link underline grow on nav */
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:0;
  background:var(--green);transition:width .25s ease}
.nav a:hover::after,.nav a.active::after{width:100%}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1!important;transform:none!important;transition:none}
  .card:hover{transform:none}
  #siteProgress{display:none}
}