/* ================== THEME / BASE ================== */
:root{
  --bg:#0b0c0e;
  --surface:#14151a;
  --surface-2:#101116;
  --text:#e9eaf0;
  --muted:#a3a6b3;
  --accent:#00b7ff;                     /* baby blue */
  --accent-weak:rgba(0,183,255,.10);
  --line:#262833;
  --radius:18px;
  --shadow:0 12px 28px rgba(0,0,0,.35);
}

/* Lenis manages scrolling */
html{ scroll-behavior:auto !important }

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font:16px/1.65 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);

  /* Body owns the ONLY background so the page looks continuous */
  background:
    radial-gradient(900px 600px at 110% -10%, var(--accent-weak), transparent 55%),
    radial-gradient(800px 600px at -10% 110%, var(--accent-weak), transparent 55%),
    var(--bg);
  background-repeat:no-repeat;
  background-size:cover;

  padding-top:env(safe-area-inset-top, 0);
}

.container{ width:min(1100px, 100%); margin:0 auto; padding:0 20px }
a{ color:inherit; text-decoration:none }
.link{ text-decoration:underline dotted }

/* ================== CURSOR GLOW ================== */
@media (pointer:fine){
  body::before{
    content:""; position:fixed; inset:0; pointer-events:none;
    background: radial-gradient(560px at var(--mx,50%) var(--my,50%),
                rgba(0,183,255,.18), rgba(0,183,255,0) 60%);
    opacity:var(--glow,0); transition:opacity .35s ease;
    mix-blend-mode:screen; z-index:1; /* under UI, over bg */
  }
  .card, .btn, .nav a, .brand{ position:relative; z-index:2 }
}
@media (prefers-reduced-motion: reduce){ body::before{ display:none !important } }

/* ================== HEADER / NAV ================== */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
  padding-top:calc(env(safe-area-inset-top, 0));

  /* transparent at top so it blends with page */
  background:transparent;
  backdrop-filter:none;
  border-bottom:none; box-shadow:none;
}

/* soft blur once you scroll a bit */
.site-header.is-scrolled{
  background:linear-gradient(to bottom, rgba(11,12,14,.72), rgba(11,12,14,.45));
  backdrop-filter:saturate(115%) blur(10px);
  border-bottom:1px solid var(--line);
}

.brand{ font-weight:900; letter-spacing:.8px; text-transform:uppercase }
.brand span{ color:var(--accent) }

/* desktop nav layout */
.nav{ display:flex; align-items:center; gap:12px }

/* glassy pill links */
.nav a{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 16px; border-radius:14px;
  color:var(--text);
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
  transition:background .18s, border-color .18s, transform .12s, color .18s;
  font-weight:600;
}
.nav a:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.10) }
.nav a:active{ transform:translateY(1px) }
.nav a.active{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14) }
.nav .btn{ background:var(--accent); color:#0b0c0e; border-color:transparent; font-weight:800 }

/* hamburger (mobile) */
.nav-toggle{
  display:none; position:relative; width:38px; height:34px;
  border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.04);
}
.nav-toggle .bar{ position:absolute; left:8px; right:8px; height:2px; background:#d7d9e3; border-radius:2px }
.nav-toggle .bar:nth-child(1){ top:9px } .nav-toggle .bar:nth-child(2){ top:16px } .nav-toggle .bar:nth-child(3){ top:23px }

/* ================== HOME — ROCKY HERO ================== */
.hero--rocky{
  min-height:140vh; display:flex; align-items:flex-start; padding-top:14vh;

  /* make sure hero NEVER paints its own bg */
  background:none !important;
}
.kicker{
  color:var(--muted); letter-spacing:.18em; text-transform:uppercase;
  font-size:.8rem; margin:0 0 18px; opacity:.85;
}
.headline{
  margin:0; font-weight:800; line-height:1.02; letter-spacing:-.02em;
  font-size:clamp(40px, 8vw, 120px);
}
.headline span{ color:var(--accent) }
.hero--rocky a{ text-decoration:underline dotted }

/* CTA row below hero (desktop) */
.contact-cta{
  margin: clamp(260px, 42vh, 520px) auto 0;
  display:flex; align-items:flex-end; gap:0.35em;
  font-weight:800; letter-spacing:-.01em;
  font-size:clamp(28px, 5vw, 72px);
  color:#e9eaf0; text-decoration:none !important;
}
.contact-cta .cta-emoji{ height:1em; width:auto; position:relative; top:0.14em; filter: drop-shadow(0 8px 24px rgba(0,0,0,.35)) }
.contact-cta span{ line-height:1; text-shadow:0 1px 0 rgba(0,0,0,.25) }

/* ================== CONTENT / CARDS ================== */
.page{ padding:44px 0; background:transparent !important; box-shadow:none !important }
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px; box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  position:relative; overflow:hidden;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(0,0,0,.45) }
.card:active{ transform:translateY(1px) scale(.99) }

/* spotlight on hovered card */
.card::after{
  content:""; position:absolute; inset:-2px; pointer-events:none;
  background: radial-gradient(240px circle at var(--cx,50%) var(--cy,50%),
              rgba(0,183,255,.18), rgba(0,183,255,0) 60%);
  opacity:var(--spot,0); transition:opacity .2s ease; mix-blend-mode:screen;
}

.tap{ cursor:pointer }
.grid{ display:grid; gap:22px }
.grid.two{ grid-template-columns:1fr 1fr }
@media (max-width:900px){ .grid.two{ grid-template-columns:1fr } }

.bullets{ margin:0; padding-left:18px }
.bullets li{ margin:8px 0 }
.tags{ display:flex; flex-wrap:wrap; gap:10px }
.tags span{
  padding:8px 12px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--text); font-size:14px;
}
.job{ padding:18px 0; border-bottom:1px dashed var(--line) }
.job:last-child{ border-bottom:none }
.job-head{ display:flex; align-items:baseline; gap:12px; justify-content:space-between; flex-wrap:wrap }
.job h3{ margin:0 }
.job h3 span{ color:var(--accent) }
.meta{ color:var(--muted); font-size:.95rem }

.site-footer{
  color:var(--muted); padding:24px 0; margin-top:20px;
  background:transparent !important; border-top:none !important; box-shadow:none !important;
}

/* fade-in helper */
.fade-in{ animation:fadeUp .5s ease both }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }

/* ================== MOBILE ================== */
@media (max-width: 820px){
  .nav-toggle{ display:block }
  .nav{
    position:fixed; top:68px; right:16px;
    display:none; flex-direction:column; align-items:stretch;
    gap:10px; padding:12px;
    background:rgba(11,12,14,.95);
    border:1px solid var(--line); border-radius:16px;
    box-shadow:0 12px 28px rgba(0,0,0,.45);
    backdrop-filter:saturate(120%) blur(8px);
  }
  .nav.open{ display:flex }
  .nav a{ height:44px; padding:0 14px }
  .nav .btn{ text-align:center }

  .headline{ font-size:clamp(36px, 10vw, 96px); line-height:1.06 }

  /* Push CTA far below first screen */
  .hero--rocky{ min-height:190svh; padding-top:12svh }
  .contact-cta{ margin: clamp(300px, 72svh, 700px) auto 0; font-size: clamp(26px, 7vw, 64px) }
}

/* tiny phones */
@media (max-width: 380px){
  .headline{ font-size:clamp(32px, 11vw, 84px) }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
}