@font-face{font-family:Gotham;font-weight:200;font-display:swap;src:url(fonts/gotham-200.woff2) format('woff2')}
@font-face{font-family:Gotham;font-weight:300;font-display:swap;src:url(fonts/gotham-300.woff2) format('woff2')}
@font-face{font-family:Gotham;font-weight:400;font-display:swap;src:url(fonts/gotham-400.woff2) format('woff2')}
@font-face{font-family:Gotham;font-weight:500;font-display:swap;src:url(fonts/gotham-500.woff2) format('woff2')}
@font-face{font-family:Gotham;font-weight:700;font-display:swap;src:url(fonts/gotham-700.woff2) format('woff2')}
@font-face{font-family:Gotham;font-weight:800;font-display:swap;src:url(fonts/gotham-800.woff2) format('woff2')}
@font-face{font-family:Instr;font-style:italic;font-weight:400;font-display:swap;src:url(fonts/serif-i.woff2) format('woff2')}
:root{--bg:#0E0B0A;--bg2:#141010;--card:#1a1210;--line:#2f231d;--fg:#F1E8DF;--mut:#b9aca1;--dim:#8c7d72;--cu:#EEA279;--cu2:#8F4B3B;--g:linear-gradient(90deg,#8F4B3B,#EEA279);--pad:clamp(20px,5.6vw,80px)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg)}
body{background:var(--bg);color:var(--fg);font-family:Gotham,system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.5}
a{color:inherit;text-decoration:none}img,svg{display:block;max-width:100%}
.it{font-family:Instr,Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--cu)}
.grad{background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent}
.eb{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--cu);margin-bottom:22px}
.eb::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cu)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 34px;border-radius:99px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transition:transform .25s,box-shadow .25s,background .25s;white-space:nowrap}
.btn.y{background:var(--cu);color:#14100E}.btn.y:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(238,162,121,.35)}
.btn.o{border:1.5px solid #5b4a40}.btn.o:hover{border-color:var(--cu);color:var(--cu)}
.btn.k{background:#14100E;color:var(--cu)}.btn.k:hover{transform:translateY(-2px)}
header{position:fixed;inset:0 0 auto 0;z-index:50;height:84px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;transition:background .3s,backdrop-filter .3s,border-color .3s;border-bottom:1px solid transparent}
header.s{background:rgba(14,11,10,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
header img{height:44px;width:44px;border-radius:12px}
nav{display:flex;gap:40px;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
nav a{transition:color .2s}nav a:hover{color:var(--cu)}
header .btn{height:48px;padding:0 26px;background:var(--g);color:#14100E}
/* hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:130px var(--pad) 90px;background:#111}
.curve{position:absolute;right:-6vw;top:-4vh;width:min(62vw,980px);height:auto;z-index:0;opacity:.95}
.curve path{stroke-dasharray:2600;stroke-dashoffset:2600;animation:draw 2.4s .2s cubic-bezier(.3,.7,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero .t{position:relative;z-index:3;max-width:760px}
h1{font-size:clamp(46px,7.1vw,100px);font-weight:300;line-height:1.02;letter-spacing:-.04em}
h1 b{font-weight:800}h1 .it{font-size:1.16em;line-height:.9}
.hero p{font-size:clamp(16px,1.5vw,20px);font-weight:300;line-height:1.65;color:var(--mut);margin:30px 0 40px;max-width:520px}
.row{display:flex;gap:14px;flex-wrap:wrap}
.dev{position:absolute;right:max(4vw,24px);top:50%;width:min(29vw,420px);aspect-ratio:400/520;transform:translateY(-46%);z-index:2;border-radius:26px;background:#14100E;border:1px solid #3a2c25;box-shadow:0 40px 100px rgba(0,0,0,.6);padding:min(1.6vw,22px);animation:fl 7s ease-in-out infinite}
.mob{position:absolute;right:min(22vw,330px);top:calc(50% + 8vh);width:min(13.5vw,190px);aspect-ratio:190/340;z-index:3;border-radius:24px;background:#14100E;border:1px solid #5b4036;box-shadow:0 30px 80px rgba(0,0,0,.7);padding:min(.8vw,11px);animation:fl 6s -2s ease-in-out infinite}
@keyframes fl{50%{translate:0 -12px}}
.scr{width:100%;height:100%;border-radius:16px;overflow:hidden;position:relative;background:linear-gradient(160deg,#a8623f,#2a1710);display:grid;place-items:center}
.scr.b{background:linear-gradient(160deg,#EEA279,#5a2f20)}
.scr img{width:34%;border-radius:0;opacity:.95}
.scr::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,rgba(255,236,214,.35),transparent 60%);animation:sh 8s ease-in-out infinite alternate}
@keyframes sh{to{transform:translate(18%,22%)}}
.scr small{position:absolute;left:14px;bottom:12px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.85);z-index:2}
.hint{position:absolute;left:var(--pad);bottom:34px;z-index:3;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:12px}
.hint i{width:1px;height:34px;background:linear-gradient(var(--cu),transparent);animation:ln 2s ease-in-out infinite}
@keyframes ln{50%{transform:scaleY(.4);transform-origin:top}}
/* sections */
section{position:relative}
.app{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(30px,6vw,80px);padding:clamp(90px,12vw,150px) var(--pad) clamp(70px,8vw,100px);border-bottom:1px solid #2a1f19}
.app .l{font-size:20px;color:var(--cu);border-bottom:1.5px solid var(--cu);display:inline-block;height:34px;align-self:start;justify-self:start}
.app p{font-size:clamp(22px,2.6vw,34px);font-weight:300;line-height:1.45;letter-spacing:-.02em;color:#e6d9cd}.app p .it{font-size:1.18em}
.num{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:clamp(60px,7vw,90px) var(--pad)}
.num b{display:block;font-size:clamp(44px,6vw,82px);font-weight:300;letter-spacing:-.04em;line-height:1.05}
.num span{font-size:15px;font-weight:300;line-height:1.6;color:var(--mut)}
.lv{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:0 var(--pad) clamp(80px,9vw,120px)}
.lv>a{border-radius:22px;padding:clamp(28px,3vw,44px);min-height:380px;background:linear-gradient(160deg,#1d130f,#120d0b);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;transition:transform .35s,border-color .35s}
.lv>a:nth-child(2){background:linear-gradient(160deg,#5a2f20,#2a1710)}
.lv>a:hover{transform:translateY(-6px);border-color:#6b4536}
.lv em{font-size:clamp(54px,6vw,80px);font-weight:200;font-style:normal;color:var(--cu);line-height:1}
.lv h3{font-size:clamp(30px,3.3vw,44px);font-weight:300;line-height:1.05;letter-spacing:-.03em}.lv h3 b{font-weight:800;display:block}
.lv p{font-size:15px;font-weight:300;line-height:1.65;color:#cdbfb3;margin-top:14px}
.lv ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;list-style:none}.lv li{font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border:1px solid #4a3a31;border-radius:99px;color:var(--mut)}
.work{padding:0 0 clamp(80px,9vw,130px) var(--pad)}
.work h2,.proc h2{font-size:clamp(34px,4.6vw,62px);font-weight:300;letter-spacing:-.035em;line-height:1.08;margin-bottom:46px}.work h2 .it,.proc h2 .it{font-size:1.16em}
.rail{display:flex;gap:20px;overflow-x:auto;padding-right:var(--pad);scroll-snap-type:x mandatory;scrollbar-width:none}.rail::-webkit-scrollbar{display:none}
.tile{flex:0 0 clamp(210px,19vw,260px);aspect-ratio:9/16;border-radius:16px;overflow:hidden;position:relative;scroll-snap-align:start;background:linear-gradient(160deg,var(--a,#7a3f2c),var(--b,#1a0f0b));display:flex;flex-direction:column;justify-content:flex-end;padding:20px;transition:transform .4s}
.tile:hover{transform:translateY(-6px)}
.tile img{position:absolute;left:50%;top:38%;width:30%;transform:translate(-50%,-50%);opacity:.9}
.tile::before{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(0deg,rgba(14,11,10,.75),transparent)}
.tile b{position:relative;font-size:17px;font-weight:700;line-height:1.2}.tile span{position:relative;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-top:6px}
.tile.more{background:#1a1210;border:1px dashed #5b4036;align-items:center;justify-content:center;text-align:center;gap:16px}.tile.more::before{display:none}
.tile.more b{font-size:20px}.tile.more .btn{height:46px;padding:0 24px}
.proc{margin:0 var(--pad) clamp(80px,9vw,120px);border-radius:30px;padding:clamp(34px,6vw,80px);background:linear-gradient(135deg,#1c120e,#3a1f16);display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px)}
.proc h2{margin-bottom:0}
.st{padding:22px 0;border-top:1px solid #5b4036;display:grid;grid-template-columns:56px 1fr;font-size:15px;font-weight:300;line-height:1.6;color:#cdbfb3}.st b{display:block;font-size:22px;font-weight:500;color:var(--fg);margin-bottom:4px}.st em{color:var(--cu);font-style:normal}
.cta{margin:0 var(--pad) 100px;border-radius:30px;padding:clamp(40px,7vw,110px) clamp(26px,5vw,70px);background:var(--cu);color:#14100E;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.cta h2{font-size:clamp(38px,5.6vw,80px);font-weight:300;line-height:1.02;letter-spacing:-.04em}.cta h2 b{font-weight:800}.cta h2 .it{font-size:1.14em;color:#14100E}
.cta .btn{height:66px;padding:0 44px}
footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:0 var(--pad) 40px;font-size:13px;color:var(--dim)}footer a:hover{color:var(--cu)}
.wa{position:fixed;right:20px;bottom:20px;z-index:60;width:58px;height:58px;border-radius:50%;background:var(--cu);display:grid;place-items:center;box-shadow:0 12px 36px rgba(0,0,0,.5);transition:transform .25s}.wa:hover{transform:scale(1.08)}
.wa svg{width:28px;height:28px;fill:#14100E}
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}.rv.in{opacity:1;transform:none}
@media(max-width:1000px){nav{display:none}.dev{width:38vw}.mob{right:30vw;width:18vw}.curve{width:90vw;opacity:.5}.app{grid-template-columns:1fr}.num{grid-template-columns:repeat(2,1fr)}.lv{grid-template-columns:1fr}.lv>a{min-height:0;gap:34px}.proc{grid-template-columns:1fr}}
@media(max-width:640px){.hero{flex-direction:column;align-items:flex-start;justify-content:flex-start;padding-top:118px;padding-bottom:60px}.dev{display:none}.mob{position:relative;right:auto;top:auto;width:46vw;max-width:220px;margin:44px auto 0;animation:fl 6s ease-in-out infinite}.curve{top:auto;bottom:-6vh;width:150vw;right:-55vw;opacity:.5}.hero .btn{width:100%}.row{flex-direction:column}header .btn{height:42px;padding:0 18px;font-size:11px}header img{height:38px;width:38px}.cta{flex-direction:column;align-items:flex-start}.cta .btn{width:100%}.hint{display:none}.num{gap:26px 16px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.curve path{stroke-dashoffset:0}.rv{opacity:1;transform:none}html{scroll-behavior:auto}}