:root{
  --bg:#2E2E33;
  --line:#44444B;
  --white:#FFFFFF;
  --body:#D0D0D6;
  --muted:#9A9AA2;
  --link:#B9B9BF;
  --orange:#F7941D;
  --ink:#0B0B0C;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg)}
body{color:var(--white);font-family:Inter,system-ui,sans-serif}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--orange)}

.page{min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}

.header{border-bottom:1px solid var(--line)}
.header-inner{max-width:1200px;margin:0 auto;padding:20px 32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:14px;color:var(--white)}
.brand img{display:block}
.wordmark{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:24px;letter-spacing:.08em;text-transform:uppercase;color:var(--white)}
.accent{color:var(--orange)}
.button{background:var(--orange);color:var(--ink);font-size:15px;font-weight:600;padding:12px 22px;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.button:hover{color:var(--ink);filter:brightness(1.08)}

.hero{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:72px 32px;gap:36px}
.hero-logo{display:block;width:240px;max-width:100%;height:auto}
.hero-text{max-width:640px}
h1{margin:0 0 24px;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:88px;line-height:1;letter-spacing:.02em;text-transform:uppercase}
.gradient-text{
  display:inline-block;padding:0 .04em;color:#F6941D;
  background:radial-gradient(circle farthest-corner at 50% 50%,#F6961E 0%,#F6941D 25%,#EC7A20 55%,#DD5024 85%,#D33427 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero-text p{margin:0;font-size:20px;line-height:1.6;color:var(--body)}

.footer{border-top:1px solid var(--line)}
.footer-inner{max-width:1200px;margin:0 auto;padding:28px 32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;font-size:14px;color:var(--muted)}

@media (max-width:640px){
  h1{font-size:56px}
  .hero-logo{width:180px}
  .hero-text p{font-size:18px}
}