@font-face{font-family:"Hexwake Title";font-display:swap;src:url(/assets/fonts/hexwake-title.ttf) format("truetype")}
@font-face{font-family:Manrope;font-weight:400;font-display:swap;src:url(/assets/fonts/manrope-400.ttf) format("truetype")}
@font-face{font-family:Manrope;font-weight:600;font-display:swap;src:url(/assets/fonts/manrope-600.ttf) format("truetype")}
:root{--night:#0e1317;--slate:#171e25;--stone:#232c35;--bone:#efe6d5;--ash:#b8ad9b;--muted:#8a8172;--gold:#e8b86b;--ember:#d9534f;--line:rgba(232,184,107,.22);color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--night);color:var(--bone);font:400 16px/1.65 Manrope,system-ui,sans-serif;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,figure{margin:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.bar{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:22px 40px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash)}
.bar .studio:hover{color:var(--gold)}
.hero{position:relative;min-height:min(860px,100vh);display:flex;align-items:center;overflow:hidden;isolation:isolate}
.ground{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;z-index:-2;animation:slow 40s ease-in-out infinite alternate}
.veil{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 70% 55%,rgba(14,19,23,.15),rgba(14,19,23,.85) 70%),linear-gradient(0deg,var(--night),transparent 30%)}
.hero-in{width:min(1180px,calc(100% - 80px));margin:0 auto;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.75fr);align-items:center;gap:40px;padding:120px 0 80px}
.sub{font-size:13px;letter-spacing:.42em;text-transform:uppercase;color:var(--ash)}
h1{font:400 clamp(54px,7.4vw,108px)/.9 "Hexwake Title",Georgia,serif;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:18px 0 8px;text-shadow:0 0 40px rgba(232,184,107,.25)}
.tagline{font:400 clamp(20px,2.2vw,28px)/1.3 "Hexwake Title",Georgia,serif;color:var(--bone)}
.intro{max-width:520px;margin-top:26px;color:var(--ash);font-size:17px}
.status{margin-top:28px;font-size:14px;color:var(--muted)}
.status span{display:inline-block;margin-right:10px;padding:6px 12px;border:1px solid var(--line);color:var(--gold);border-radius:4px}
.hunter{width:min(360px,100%);justify-self:center;filter:drop-shadow(0 30px 40px rgba(0,0,0,.7));animation:hover 6s ease-in-out infinite alternate}
section:not(.hero){width:min(1180px,calc(100% - 80px));margin:0 auto;padding:90px 0 0}
h2{font:400 clamp(30px,3.4vw,46px)/1.1 "Hexwake Title",Georgia,serif;color:var(--bone);text-align:center;letter-spacing:.04em}
h2:after{content:"";display:block;width:64px;height:1px;background:var(--gold);margin:22px auto 0;opacity:.7}
.steps{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.steps li{background:linear-gradient(180deg,var(--slate),rgba(23,30,37,.4));border:1px solid var(--line);border-radius:6px;padding:26px 24px 28px}
.steps img{width:72px;height:72px;object-fit:contain;margin-bottom:16px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.steps h3{font:400 22px/1.2 "Hexwake Title",Georgia,serif;color:var(--gold);margin-bottom:10px}
.steps p{color:var(--ash);font-size:15px}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px}
.trio figure{text-align:center;padding:16px 10px 26px;background:radial-gradient(circle at 50% 45%,rgba(217,83,79,.14),transparent 62%)}
.trio img{width:min(280px,90%);margin:0 auto;filter:drop-shadow(0 20px 26px rgba(0,0,0,.7))}
.trio figcaption{font:400 22px/1.2 "Hexwake Title",Georgia,serif;color:var(--bone);margin-top:6px}
.phones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:44px}
.phones figure{min-width:0}
.phones img{width:100%;aspect-ratio:390/844;object-fit:cover;border-radius:22px;border:6px solid #05080a;box-shadow:0 24px 40px -20px rgba(0,0,0,.8),0 0 0 1px var(--line)}
.phones figcaption{text-align:center;color:var(--muted);font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-top:14px}
.promise{text-align:center;padding-bottom:20px}
.promise p{max-width:640px;margin:0 auto;font:400 clamp(20px,2vw,26px)/1.45 "Hexwake Title",Georgia,serif;color:var(--ash)}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;width:min(1180px,calc(100% - 80px));margin:90px auto 0;padding:28px 0 44px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.foot a:hover{color:var(--gold)}
@keyframes slow{from{transform:scale(1)}to{transform:scale(1.06)}}
@keyframes hover{from{transform:translateY(0)}to{transform:translateY(-14px)}}
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr;text-align:center;padding-top:100px}
  .intro{margin-inline:auto}
  .hunter{width:260px;grid-row:1}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .phones{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .bar{padding:18px 20px}
  .hero-in,section:not(.hero),.foot{width:calc(100% - 36px)}
  h1{letter-spacing:.08em}
  .steps{grid-template-columns:1fr}
  .trio{grid-template-columns:1fr;gap:6px}
  .status span{display:block;margin:0 auto 10px;width:max-content}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}