:root{
  --bg:#07070b; --fg:#ececf1; --mute:#8b8b99; --line:rgba(255,255,255,.08);
  --accent:#ffb454; --accent2:#ff6a3d;
  --pad:clamp(20px,5vw,72px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font:400 17px/1.6 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:-2}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.nav{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:20px var(--pad);
  backdrop-filter:blur(14px);background:linear-gradient(#07070bcc,#07070b00)}
.logo{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:.02em;font-size:18px}
.logo img{display:block;height:18px;width:auto}
.nav nav{display:flex;gap:28px;font-size:14px;color:var(--mute)}
.nav nav a{transition:color .2s}.nav nav a:hover{color:var(--fg)}

section{padding:clamp(80px,14vh,160px) var(--pad);max-width:1280px;margin:0 auto}
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;position:relative}
.eyebrow{color:var(--accent);font-size:13px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:28px}
h1{font-size:clamp(40px,8.2vw,112px);line-height:1.02;letter-spacing:-.035em;font-weight:600}
h1 em{font-style:normal;background:linear-gradient(100deg,var(--accent),var(--accent2) 60%,#c04bff);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shift 8s linear infinite}
@keyframes shift{to{background-position:200% 0}}
.lead{max-width:560px;margin:32px 0 44px;color:var(--mute);font-size:clamp(17px,1.6vw,20px)}
.cta{align-self:flex-start;display:inline-flex;gap:10px;padding:14px 26px;border:1px solid var(--line);border-radius:999px;background:#ffffff08;transition:.3s}
.cta:hover{border-color:var(--accent);background:#ffb45414;gap:16px}
.scroll{position:absolute;bottom:32px;left:var(--pad);width:1px;height:56px;background:linear-gradient(var(--accent),transparent);animation:drop 2.4s ease-in-out infinite;transform-origin:top}
@keyframes drop{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

h2{font-size:clamp(30px,5vw,64px);line-height:1.08;letter-spacing:-.03em;font-weight:600;margin-bottom:56px}
h2 span{color:var(--mute)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.card{--x:50%;--y:50%;position:relative;display:flex;flex-direction:column;min-height:340px;padding:32px;border:1px solid var(--line);border-radius:22px;background:#ffffff05;overflow:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--x) var(--y),hsl(var(--hue) 90% 60% / .18),transparent 60%);opacity:0;transition:opacity .3s}
.card:hover{transform:translateY(-6px);border-color:hsl(var(--hue) 80% 60% / .5)}
.card:hover::before{opacity:1}
.card>*{position:relative}
.num{font-size:13px;color:var(--mute);letter-spacing:.15em}
.card h3{font-size:38px;letter-spacing:-.02em;margin:auto 0 12px;font-weight:600}
.card p{color:var(--mute);font-size:16px}
.go{margin-top:28px;font-size:14px;color:hsl(var(--hue) 90% 70%);display:flex;justify-content:space-between}
.go i{font-style:normal;transition:transform .3s}.card:hover .go i{transform:translate(3px,-3px)}

.approach .intro{max-width:720px;margin:-24px 0 48px;color:var(--mute);font-size:clamp(17px,1.7vw,21px)}
.approach .note{max-width:720px;margin-top:40px;color:var(--mute)}
.approach ul{list-style:none;border-top:1px solid var(--line)}
.approach li{display:grid;grid-template-columns:minmax(140px,1fr) 2fr;gap:24px;padding:32px 0;border-bottom:1px solid var(--line)}
.approach b{font-size:clamp(22px,3vw,34px);font-weight:600;letter-spacing:-.02em}
.approach span{color:var(--mute);align-self:center}

.contact{text-align:center;padding-bottom:140px}
.mail{display:inline-block;font-size:clamp(22px,4.5vw,56px);letter-spacing:-.02em;background:linear-gradient(90deg,var(--fg),var(--fg)) 0 100%/0 1px no-repeat;transition:background-size .5s,color .3s}
.mail:hover{background-size:100% 1px;color:var(--accent)}

footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:28px var(--pad);border-top:1px solid var(--line);color:var(--mute);font-size:13px}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}

@media(max-width:640px){.nav nav{gap:16px}.approach li{grid-template-columns:1fr;gap:8px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}html{scroll-behavior:auto}}