/* ============================================================
   Kelu — shared premium dark theme
   Used by every page so the header, footer, logo, buttons and
   design tokens are identical site-wide.
   Brand: deep forest green + gold, on a near-black green base.
   ============================================================ */

/* Plus Jakarta Sans — closest free match to Uber's proprietary "Uber Move".
   Used as a single family across the whole site (display + body). */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  /* Surfaces (dark) */
  --bg:        #070d18;   /* page base */
  --bg-2:      #0a1322;   /* alternating section */
  --panel:     #0f1b2d;   /* cards */
  --panel-2:   #16253c;   /* elevated / hover */
  --green:     #13233b;   /* brand deep green panels */
  --green-700: #1c2e4a;

  /* Accents */
  --gold:      #bae166;
  --gold-soft: #d3ee98;
  --gold-deep: #9cc43f;

  /* Light accent panels (the bright cards) */
  --light:       #f5f7fa;
  --light-2:     #eceff4;
  --light-ink:   #0f1b2d;
  --light-muted: #52607a;
  --light-line:  #e1e5ec;

  /* Text on dark */
  --ink:    #eef2f7;
  --soft:   #c3cbd8;
  --muted:  #8f9ab0;
  --faint:  #5c6880;

  /* Hairlines on dark */
  --line:   rgba(255,255,255,.10);
  --line-2: rgba(255,255,255,.06);

  --display:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --body:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --maxw:1200px;
  --radius:18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);line-height:1.65;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,.display{font-family:var(--display);letter-spacing:-.03em;color:var(--ink);line-height:1.06}
a{color:inherit;text-decoration:none}
img{max-width:100%}
::selection{background:var(--gold);color:var(--green)}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
@media (max-width:640px){.wrap{padding:0 20px}}

.eyebrow{font-family:var(--display);font-weight:600;font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);display:inline-block}

/* ---- Buttons -------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-weight:600;font-size:14.5px;
  padding:13px 24px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease,
             transform .18s ease,box-shadow .25s ease}
.btn:active{transform:translateY(1px)}
.btn-gold{background:var(--gold);color:var(--green)}
.btn-gold:hover{background:var(--gold-soft);transform:translateY(-1px);
  box-shadow:0 14px 30px -14px rgba(186,225,102,.6)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-dark{background:var(--green);color:#fff;border-color:var(--green)}
.btn-dark:hover{background:var(--green-700);transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.btn,.btn:active,.btn:hover{transform:none;box-shadow:none}}

/* round arrow button (bento / cards) */
.iconbtn{width:42px;height:42px;border-radius:50%;display:inline-grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--ink);flex:none;
  transition:background .18s ease,transform .18s ease,color .18s ease}
.iconbtn:hover{background:var(--gold);color:var(--green);transform:translateY(-2px)}
.iconbtn.on-light{background:#fff;border-color:var(--light-line);color:var(--light-ink)}
.iconbtn.on-light:hover{background:var(--gold);color:var(--green)}

/* ---- Logo mark ------------------------------------------ */
.brand{display:inline-flex;align-items:center;gap:11px}
.brand .mark{height:38px;width:auto;display:block;flex:none}
.brand .name{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.02em;color:var(--ink)}

/* ---- Shared header -------------------------------------- */
.site-header{position:sticky;top:0;z-index:60;
  background:rgba(7,13,24,.72);backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line-2)}
.site-header .wrap{display:flex;align-items:center;gap:30px;height:72px}
.site-header .nav{display:flex;gap:28px;margin-left:8px}
.site-header .nav a{color:var(--muted);font-weight:500;font-size:14.5px;
  font-family:var(--display);transition:color .15s ease}
.site-header .nav a:hover{color:var(--ink)}
.site-header .spacer{flex:1}
.header-cta{padding:11px 20px;font-size:14px}
@media (max-width:880px){.site-header .nav,.header-cta{display:none}}

/* scroll progress */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  transform:scaleX(0);transform-origin:0 50%;will-change:transform}

/* mobile nav */
.nav-toggle{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);border-radius:12px;cursor:pointer;
  align-items:center;justify-content:center;padding:0;transition:border-color .15s ease}
.nav-toggle:hover{border-color:var(--gold)}
.nav-toggle .bar{transition:transform .25s ease,opacity .2s ease;transform-origin:center}
.nav-toggle[aria-expanded="true"] .b1{transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .b2{opacity:0}
.nav-toggle[aria-expanded="true"] .b3{transform:translateY(-5px) rotate(-45deg)}
.nav-panel{display:none}
@media (max-width:880px){
  .nav-toggle{display:inline-flex}
  .nav-panel{display:block;position:fixed;inset:72px 0 auto 0;z-index:55;
    background:var(--bg);border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .3s ease}
  .nav-panel.open{max-height:88vh}
  .nav-panel .inner{display:flex;flex-direction:column;padding:8px 28px 22px}
  .nav-panel a{padding:14px 0;border-bottom:1px solid var(--line-2);color:var(--ink);
    font-family:var(--display);font-weight:500;font-size:16px}
  .nav-panel a.cta{border-bottom:0;margin-top:16px;justify-content:center;color:var(--green)}
  .nav-panel a.cta:hover{color:var(--green)}
  body.nav-open{overflow:hidden}
}

/* ---- Shared footer -------------------------------------- */
.site-footer{background:#07100b;color:var(--soft);padding:74px 0 0;
  border-top:1px solid var(--line-2);overflow:hidden}
.site-footer .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.site-footer .f-brand .brand{margin-bottom:14px}
.site-footer .f-brand p{color:var(--muted);font-size:14px;max-width:34ch;margin:0;line-height:1.65}
.site-footer .f-social{display:flex;gap:10px;margin-top:20px}
.site-footer .f-social a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--soft);transition:background .15s ease,color .15s ease,border-color .15s}
.site-footer .f-social a:hover{background:var(--gold);color:var(--green);border-color:var(--gold)}
.site-footer h5{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);margin:0 0 16px}
.site-footer .f-col a{display:block;color:var(--muted);font-size:14px;padding:5px 0;transition:color .15s ease}
.site-footer .f-col a:hover{color:var(--gold)}
.site-footer .legal{margin-top:52px;padding:24px 0;border-top:1px solid var(--line-2);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  color:var(--faint);font-size:12px;line-height:1.7}
.site-footer .legal b{color:var(--soft);font-weight:500}
/* giant brand wordmark */
.brand-giant{font-family:var(--display);font-weight:700;text-align:center;
  letter-spacing:-.04em;line-height:.8;margin:18px 0 -.12em;
  font-size:clamp(64px,18vw,300px);
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(7,51,36,0));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;user-select:none;white-space:nowrap}
@media (max-width:760px){.site-footer .foot-grid{grid-template-columns:1fr 1fr}
  .site-footer .f-brand{grid-column:1/-1}}

/* ---- Motion reveal (progressive) ------------------------ */
.motion-ready [data-anim="intro"],
.motion-ready [data-reveal],
.motion-ready [data-reveal-item],
.motion-ready .page-head > *{opacity:0}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
  .scroll-progress{display:none}
  .motion-ready [data-anim="intro"],
  .motion-ready [data-reveal],
  .motion-ready [data-reveal-item],
  .motion-ready .page-head > *{opacity:1 !important}
}