:root{--bg:#07080c;--fg:#eef1f7;--mute:#8a93a6;--line:rgba(255,255,255,.08);--a1:#7cf7d4;--a2:#6d7bff;--a3:#ff6fb5}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg);color-scheme:dark}
body{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.5}
a{color:inherit}
#field{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;background:radial-gradient(120% 80% at 70% 20%,#18204a 0%,#0b0d18 45%,var(--bg) 80%)}
.grain{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.06;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 type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero,main,footer{position:relative;z-index:2}
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(1.5rem,6vw,7rem);padding-bottom:6rem}
.eyebrow{font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;color:var(--mute);margin-bottom:1.6rem}
.title{font-weight:800;font-size:clamp(4rem,17vw,15rem);line-height:.86;letter-spacing:-.055em}
.line{display:block;overflow:hidden;padding-bottom:.28em;margin-bottom:-.2em}
.word{display:inline-block;padding:0 .04em .28em 0;margin-bottom:-.28em;transform:translateY(105%) rotate(4deg);opacity:0;animation:rise 1.3s cubic-bezier(.16,1,.3,1) var(--d) forwards}
.grad{background:linear-gradient(100deg,var(--a1) 0%,var(--a2) 45%,var(--a3) 90%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rise 1.3s cubic-bezier(.16,1,.3,1) var(--d) forwards,shift 9s ease-in-out 2s infinite alternate}
.claim{margin-top:clamp(2rem,4vw,3rem);font-size:clamp(1.25rem,2.6vw,2rem);font-weight:600;letter-spacing:-.01em;max-width:30ch}
.claim span{color:var(--mute);font-weight:400}
.reveal{opacity:0;transform:translateY(14px);filter:blur(6px);animation:fade 1.2s cubic-bezier(.16,1,.3,1) var(--d) forwards}
.scroll{position:absolute;left:50%;bottom:2rem;width:26px;height:42px;margin-left:-13px;border:1.5px solid rgba(255,255,255,.3);border-radius:14px}
.scroll span{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:var(--fg);animation:dot 2s ease-in-out infinite}
@keyframes rise{to{transform:none;opacity:1}}
@keyframes fade{to{opacity:1;transform:none;filter:none}}
@keyframes shift{to{background-position:100% 0}}
@keyframes dot{0%{opacity:0;transform:translateY(0)}40%{opacity:1}80%{opacity:0;transform:translateY(12px)}100%{opacity:0}}
section{padding:clamp(4rem,10vw,9rem) clamp(1.5rem,6vw,7rem)}
.sec{font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;color:var(--mute);font-weight:500;margin-bottom:2.2rem}
.projects{background:linear-gradient(180deg,transparent,rgba(7,8,12,.85) 18%,var(--bg))}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.25rem;perspective:1100px}
.card{position:relative;display:flex;flex-direction:column;min-height:300px;padding:1.8rem;border-radius:22px;text-decoration:none;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid var(--line);overflow:hidden;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .4s;--rx:0deg;--ry:0deg;--mx:50%;--my:50%;transform:rotateX(var(--rx)) rotateY(var(--ry))}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,var(--c1),transparent 40%,transparent 60%,var(--c2));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.35;transition:opacity .4s}
.glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--mx) var(--my),color-mix(in srgb,var(--c1) 28%,transparent),transparent 60%)}
.card:hover .glow,.card:focus-visible .glow{opacity:1}
.card:hover::before,.card:focus-visible::before{opacity:1}
.card:focus-visible{outline:2px solid var(--c1);outline-offset:4px}
.card>*{position:relative;transform:translateZ(30px)}
.tag{align-self:flex-start;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:.3rem .65rem;border-radius:99px;background:color-mix(in srgb,var(--c1) 18%,transparent);color:var(--c1);margin-bottom:auto}
.tag.dim{background:rgba(255,255,255,.07);color:var(--mute)}
.card h3{font-size:clamp(1.7rem,2.4vw,2.2rem);letter-spacing:-.03em;margin:3.5rem 0 .6rem;background:linear-gradient(90deg,#fff,color-mix(in srgb,var(--c1) 70%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent}
.card p{color:var(--mute);font-size:.98rem}
.go{margin-top:1.2rem;font-weight:600;color:var(--c1);font-size:.92rem}
.contact{background:var(--bg);text-align:left}
.mail{display:inline-block;font-size:clamp(1.6rem,6vw,4.5rem);font-weight:700;letter-spacing:-.04em;text-decoration:none;background:linear-gradient(90deg,var(--fg),var(--fg)) 0 100%/0 2px no-repeat;transition:background-size .5s cubic-bezier(.16,1,.3,1);word-break:break-all}
.mail:hover,.mail:focus-visible{background-size:100% 2px}
.where{margin-top:1rem;color:var(--mute)}
.legal{background:var(--bg);border-top:1px solid var(--line);padding:2rem clamp(1.5rem,6vw,7rem) 3rem;color:var(--mute);font-size:.88rem}
.legal summary{cursor:pointer;color:var(--fg);list-style:none;display:inline-block}
.legal summary::after{content:" +"}
.legal details[open] summary::after{content:" –"}
.legal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem;margin-top:1.5rem;max-width:900px}
.legal h4{color:var(--fg);margin-bottom:.5rem;font-size:.9rem}
.legal p+p{margin-top:.6rem}
.copy{margin-top:1.5rem}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.word,.reveal{opacity:1;transform:none;filter:none}html{scroll-behavior:auto}.scroll{display:none}}