:root{
  --blue:#0a6cff;
  --blue-glow:rgba(10,108,255,.55);
  --white:#fff;
  --ink:#04122e;
  --f-display:"Satoshi","Inter Tight","Helvetica Neue",Arial,sans-serif;
  --f-body:"Satoshi","Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  --f-label:"Inter","Helvetica Neue",Arial,sans-serif;
  --pad:clamp(20px,4.4vw,70px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--white);font-family:var(--f-body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul{list-style:none}

.hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;isolation:isolate}

/* Background: CSS sky fallback sits under the photo; photo covers it once assets/hero.jpg exists */
.hero__bg{
  position:absolute;inset:0;z-index:-2;
  background:
    url("../assets/hero.jpg") center bottom/cover no-repeat,
    linear-gradient(180deg,#041a45 0%,#07306e 22%,#0f5db3 42%,#3f9ad6 58%,#f0a46a 74%,#e07a4a 80%,#1b2a52 88%,#07142e 100%);
}
.hero__shade{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(2,12,36,.55) 0%,rgba(2,12,36,0) 22%),
    linear-gradient(0deg,rgba(2,10,28,.7) 0%,rgba(2,10,28,0) 22%);
}

/* NAV */
.nav{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:clamp(20px,2.2vw,34px) var(--pad);z-index:5}
.nav__links{display:flex;gap:clamp(18px,2.3vw,36px);margin-left:auto;margin-right:clamp(24px,2.6vw,40px)}
.nav__links a{font-size:clamp(13px,1.05vw,16px);font-weight:500;opacity:.95;transition:opacity .2s,color .2s}
.nav__links a:hover{opacity:1;color:#8cc0ff}
.btn:focus-visible,.nav a:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* NAME BLOCK */
.intro{position:absolute;left:var(--pad);top:clamp(110px,15.5vh,170px);z-index:3}
.intro__role{font-family:var(--f-label);font-size:clamp(12px,1.05vw,16px);letter-spacing:.14em;text-transform:uppercase;line-height:1.65;font-weight:400;opacity:.95}
.name{position:relative;font-family:var(--f-display);line-height:.8;margin-top:clamp(6px,.8vw,12px);font-size:clamp(88px,15.2vw,244px);letter-spacing:-.035em}
.name span{display:block}
.name__solid{font-weight:900;color:#fff}
.name__outline{
  font-weight:900;color:transparent;margin-top:.06em;
  -webkit-text-stroke:max(1.5px,.012em) #3f8dff;
}

/* decor */
.arc{position:absolute;left:calc(var(--pad) + 3vw);top:8vh;width:clamp(260px,32vw,520px);z-index:1;opacity:.9;pointer-events:none}
.spark{position:absolute;border-radius:50%;z-index:2;pointer-events:none}
.spark--a{left:36.3%;top:42%;width:14px;height:14px;background:radial-gradient(circle,#fff 0%,rgba(160,210,255,.9) 35%,transparent 70%);box-shadow:0 0 18px 4px rgba(120,190,255,.7)}
.spark--b{left:40.3%;top:43.5%;width:5px;height:5px;background:#7fc2ff;box-shadow:0 0 10px rgba(127,194,255,.9)}
.spark--c{left:27.8%;top:21%;width:4px;height:4px;background:#cfe6ff;box-shadow:0 0 8px rgba(207,230,255,.9)}

/* PITCH */
.pitch{position:absolute;left:66.2%;top:28.5%;z-index:3;max-width:clamp(280px,31vw,480px)}
.pitch__title{font-family:var(--f-body);font-weight:500;font-size:clamp(24px,2.4vw,38px);line-height:1.2;letter-spacing:-.01em}
.pitch__rule{display:block;width:64px;height:4px;border-radius:2px;background:var(--blue);margin:clamp(14px,1.5vw,22px) 0 clamp(18px,1.9vw,28px)}
.pitch__text{font-family:var(--f-body);font-weight:400;font-size:clamp(15px,1.45vw,22px);line-height:1.55;color:rgba(255,255,255,.88)}
.pitch__cta{display:flex;gap:clamp(12px,1.2vw,20px);margin-top:clamp(24px,2.7vw,40px);flex-wrap:wrap}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:10px;height:clamp(44px,3.3vw,52px);padding:0 clamp(22px,1.9vw,30px);border-radius:999px;font-family:var(--f-body);font-weight:600;font-size:clamp(14px,1.05vw,16px);transition:transform .2s ease,box-shadow .25s ease,background .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn--primary{
  color:#fff;
  background:linear-gradient(180deg,#2a85ff 0%,#0a62f0 100%);
  box-shadow:0 10px 28px -6px var(--blue-glow),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--primary:hover{box-shadow:0 14px 34px -6px rgba(10,108,255,.75),inset 0 1px 0 rgba(255,255,255,.4)}
.btn--glass{
  color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.04) 100%),rgba(30,34,44,.62);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 24px -8px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.22);
}
.btn--glass:hover{background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.07) 100%),rgba(30,34,44,.7)}

/* BOTTOM */
.loc{position:absolute;left:var(--pad);bottom:clamp(22px,3.2vh,38px);display:flex;align-items:center;gap:12px;z-index:3;font-family:var(--f-label);font-weight:500;font-size:clamp(12px,1vw,15px);letter-spacing:.06em}
.loc i{display:block;width:clamp(120px,15vw,235px);height:1px;background:rgba(255,255,255,.4);margin-left:8px}
.strip{position:absolute;right:var(--pad);bottom:clamp(22px,3.2vh,38px);display:flex;align-items:center;gap:clamp(12px,1.5vw,24px);z-index:3;font-family:var(--f-label);font-size:clamp(10px,.9vw,13px);letter-spacing:.2em;opacity:.9}
.strip b{font-weight:400;opacity:.6}

/* single page-load moment: the name */
@media (prefers-reduced-motion:no-preference){
  .name__solid,.name__outline{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  .name__outline{animation-delay:.12s}
  .spark--a{animation:twinkle 3.2s ease-in-out infinite}
}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.45}}

/* TABLET */
@media (max-width:1024px){
  .nav__links{gap:16px}
  .pitch{left:auto;right:var(--pad);top:auto;bottom:18vh;max-width:min(420px,52vw)}
}
/* MOBILE */
@media (max-width:720px){
  .nav__links{display:none}
  .intro{top:100px}
  .name{font-size:clamp(76px,24vw,150px)}
  .arc{display:none}
  .pitch{left:var(--pad);right:var(--pad);bottom:14vh;max-width:none}
  .strip{display:none}
  .loc i{display:none}
}