:root{
  --brand:#E3AC2E; --brand2:#F1C14B; --brand3:#C8961F;
  --bg:#0B0B0C; --text:#FFFFFF; --muted:rgba(255,255,255,.78);
  --glass:rgba(255,255,255,.06); --ring:rgba(255,255,255,.16);
  --gap-hero-contact: clamp(1.2vh, 3.4vh, 5.4vh);
  --gap-contact-copyright: clamp(0.8vh, 2.6vh, 4.2vh);
  --center-shift: -1.2vh;
  --logo-h: clamp(40px, 7vh, 84px);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;background:var(--bg);color:#fff}
@media(min-width:1024px){ html,body{overflow:hidden;} }

.hero{position:relative;min-height:100vh;display:grid;grid-template-rows:auto 1fr auto auto;isolation:isolate}
.hero::before{content:'';position:absolute;inset:0;z-index:-3;background:#0B0B0C center/cover no-repeat;transform:translate3d(var(--px,0),var(--py,0),0) scale(1.02);transition:transform 120ms ease-out;filter:saturate(1.02) contrast(1.04) brightness(.78) blur(.6px)}
.overlay{position:absolute;inset:0;z-index:-2;background:linear-gradient(to bottom,rgba(11,11,12,.25),rgba(11,11,12,.74))}
.auras{position:absolute;z-index:-1;filter:blur(90px);opacity:.25}
.a1{top:-15%;left:-10%;width:40rem;height:40rem;background:radial-gradient(circle,var(--brand),transparent 70%)}
.a2{top:10%;right:-12%;width:34rem;height:34rem;background:radial-gradient(circle,var(--brand2),transparent 70%)}
.a3{left:35%;bottom:-18%;width:44rem;height:44rem;background:radial-gradient(circle,var(--brand3),transparent 70%)}
@keyframes floaty{from{transform:translateY(0)}to{transform:translateY(-10px)}} .a1,.a2,.a3{animation:floaty 4.5s ease-in-out infinite alternate}
.rise{opacity:0;transform:translateY(8px);animation:rise .6s ease forwards;animation-delay:var(--d,0s)} @keyframes rise{to{opacity:1;transform:none}}

.nav{display:flex;align-items:center;justify-content:space-between;padding:22px clamp(16px,4vw,40px)}
.wordmark{height:var(--logo-h);width:auto;image-rendering:-webkit-optimize-contrast}
.nav-links{display:flex;gap:12px} .link{color:var(--muted);text-decoration:none;border:0;background:none;cursor:pointer} .link:hover{color:#fff}

.center{text-align:center;padding: clamp(18px,4vw,46px) clamp(16px,4vw,48px) 0; transform:translateY(var(--center-shift))}
.title{font-size:clamp(40px,5vw,88px);font-weight:800;letter-spacing:-.02em;margin:0}
.subtitle{color:var(--muted);margin:14px auto 0;max-width:54rem;font-size:clamp(19px,2.6vw,24px)}
.brand-grad{background:linear-gradient(90deg,var(--brand),var(--brand2),var(--brand3));-webkit-background-clip:text;background-clip:text;color:transparent}
.cta{margin-top:16px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{position:relative;overflow:hidden;padding:12px 18px;border-radius:14px;font-weight:700;text-decoration:none;font-size:15px;border:1px solid var(--ring);background:var(--glass);color:#fff;transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--brand2));border-color:transparent;color:#1a1200;box-shadow:0 0 22px rgba(227,172,46,.18)}
.shine::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.15) 45%, rgba(255,255,255,0) 60%); transform:translateX(-120%); transition: transform .7s ease;} .shine:hover::after{transform:translateX(120%)}
.btn.ghost{background:rgba(255,255,255,.07)}

.contact{padding: var(--gap-hero-contact) clamp(16px,4vw,48px) 0; max-width:980px;margin:0 auto;text-align:center}
.contact h2{font-size:clamp(24px,3.6vw,42px);margin:0 0 12px}
.contact-grid{display:grid;gap:12px;justify-items:center}
.contact-row{display:grid;grid-template-columns:70px 1fr;gap:0;width:100%;max-width:760px;text-decoration:none;border-radius:14px; overflow:hidden;background:rgba(15,15,16,.78); border:1px solid rgba(255,255,255,.16); box-shadow:0 8px 30px rgba(0,0,0,.18); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.contact-row:hover{transform:translateY(-1px); box-shadow:0 10px 34px rgba(0,0,0,.22); border-color: rgba(255,255,255,.28)}
.icon-box{display:grid;place-items:center;background:var(--brand);color:#1a1200; border-right:1px solid color-mix(in oklab,var(--brand) 58%, black)}
.content{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:12px 16px;color:#fff;text-align:left}
.content .label{color:rgba(255,255,255,.65);font-size:14px}
.content .value{font-weight:800;font-size:clamp(18px,2.4vw,24px)}

.messenger{margin-top:1.2vh}
.messenger .intro{font-weight:700}
.messenger .muted{color:rgba(255,255,255,.78); margin-top:-4px}
.messenger-links{display:flex;gap:10px;justify-content:center;margin-top:.6vh}
.pill{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid var(--ring);color:#fff;text-decoration:none;transition:transform .15s ease, box-shadow .15s ease}
.pill:hover{transform:translateY(-1px); box-shadow:0 6px 20px rgba(255,255,255,.08)}

.copyright{text-align:center;padding: var(--gap-contact-copyright) 16px 16px;color:rgba(255,255,255,.72)} .copyright .foot-link{color:rgba(255,255,255,.72); border:0;background:none;cursor:pointer} .copyright .foot-link:hover{color:#fff}

/* Small heights */
@media (max-height: 740px){
  :root{ --center-shift: -0.6vh; --gap-hero-contact: 1.2vh; }
  .title{ font-size: clamp(36px, 7vw, 78px); }
}