:root{
  --bg:#0A090D;
  --bg-2:#110F15;
  --panel:#16131B;
  --line:#26222D;
  --line-2:#3A3443;
  --text:#F4F1F6;
  --muted:#A7A0AE;
  --dim:#6F6877;
  --magenta:#E642F5;
  --magenta-deep:#B522CC;
  --dusk:#F2925F;
  --display:"Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --hand:"Caveat","Marker Felt","Comic Sans MS",cursive;
  --gutter:clamp(16px,4vw,56px);
  --max:1320px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--magenta);outline-offset:3px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
section{padding-block:clamp(64px,9vw,120px)}
.eyebrow{margin:0 0 18px;font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.eyebrow.pink{color:var(--magenta)}
.display{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:-.005em;text-wrap:balance}
.display em{font-style:normal;color:var(--magenta)}
.hand{font-family:var(--hand);font-weight:600;line-height:1.02;color:var(--text)}
.hand::after{content:"";display:block;width:56%;height:3px;margin-top:6px;margin-left:auto;background:var(--magenta);border-radius:2px;transform:rotate(-4deg)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 22px;border-radius:4px;border:1.5px solid var(--text);background:transparent;color:var(--text);font:600 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn .ar{transition:transform .2s}
.btn:hover .ar{transform:translateX(4px)}
.btn.solid{background:var(--text);color:var(--bg)}
.btn.solid:hover{background:#fff}
.btn.pink{background:var(--magenta);border-color:var(--magenta);color:#16041a}
.btn.pink:hover{background:#F06BFA;border-color:#F06BFA}
.btn:not(.solid):not(.pink):hover{background:var(--text);color:var(--bg)}
.btn[disabled]{opacity:.6;cursor:progress}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(10,9,13,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.logo{font-family:var(--body);font-weight:700;font-size:19px;letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.logo i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--magenta);margin-left:6px;vertical-align:middle}
.nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.nav ul a{text-decoration:none;font-size:13.5px;color:#D9D4DD}
.nav ul a:hover{color:var(--magenta)}
.nav .btn{padding:11px 16px;font-size:11px}
@media (max-width:960px){.nav ul{display:none}}
@media (max-width:420px){.nav .btn .lbl{display:none}.logo{font-size:17px}}

/* hero */
.hero{position:relative;overflow:hidden;padding-block:0;min-height:640px;display:flex;align-items:stretch}
.hero canvas{position:absolute;inset:0;width:100%;height:100%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,9,13,.94) 0%,rgba(10,9,13,.78) 34%,rgba(10,9,13,.1) 62%,rgba(10,9,13,0) 100%),linear-gradient(0deg,var(--bg) 0%,rgba(10,9,13,0) 22%);pointer-events:none}
.hero .wrap{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding-block:clamp(48px,7vw,96px) clamp(40px,5vw,72px)}
.hero h1{font-size:clamp(58px,7.4vw,108px)}
.hero .lede{max-width:46ch;margin:26px 0 0;font-size:17px;color:#DDD8E1}
.hero .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.proof{display:flex;align-items:center;gap:16px;margin-top:44px;font-size:13.5px;color:var(--muted);max-width:44ch}
.proof b{font-family:var(--display);font-size:44px;line-height:1;font-weight:800;color:var(--text)}
.devices{position:relative;height:100%;min-height:420px}
.laptop{position:absolute;right:4%;bottom:6%;width:min(560px,92%);transform:perspective(1400px) rotateY(-14deg) rotateX(4deg);transform-origin:right bottom;filter:drop-shadow(0 40px 50px rgba(0,0,0,.6))}
.laptop .screen{background:#050507;border:10px solid #17151b;border-bottom-width:14px;border-radius:14px 14px 0 0;overflow:hidden;aspect-ratio:16/10}
.laptop .screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.laptop .base{height:14px;margin:0 -7%;background:linear-gradient(180deg,#2c2931,#141217);border-radius:0 0 10px 10px}
.phone{position:absolute;right:-1%;bottom:0;width:min(150px,26%);aspect-ratio:9/19;background:#050507;border:6px solid #1b1920;border-radius:26px;overflow:hidden;transform:rotate(6deg);filter:drop-shadow(0 30px 40px rgba(0,0,0,.7))}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top}
.hero .hand{position:absolute;right:2%;top:4%;font-size:clamp(24px,2.2vw,32px);transform:rotate(-8deg);text-align:right;text-shadow:0 2px 12px rgba(0,0,0,.6)}
@media (max-width:980px){
  .hero{min-height:0}
  .hero::after{background:linear-gradient(180deg,rgba(10,9,13,.55) 0%,rgba(10,9,13,.88) 45%,var(--bg) 100%)}
  .hero .wrap{grid-template-columns:1fr}
  .devices{min-height:0;height:auto;aspect-ratio:16/11}
  .laptop{right:10%;bottom:4%;width:80%}
  .phone{right:2%;width:22%}
  .hero .hand{display:none}
}

/* clients */
.clients{padding-block:34px;border-block:1px solid var(--line);background:var(--bg-2)}
.clients .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px 36px;flex-wrap:wrap}
.clients span{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:.04em;text-transform:uppercase;color:#8E8796;white-space:nowrap;transition:color .2s}
.clients span:hover{color:var(--text)}
.clients .more{font-family:var(--body);font-weight:400;font-size:13px;letter-spacing:0;text-transform:none;color:var(--muted)}

/* section head */
.head{display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:20px 40px;margin-bottom:clamp(32px,4vw,52px)}
.head h2{font-size:clamp(44px,5.4vw,76px)}
.head p{margin:0;max-width:44ch;color:var(--muted)}
.arrows{display:flex;gap:12px;align-items:center}
.circle{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:transparent;color:var(--text);font-size:18px;cursor:pointer;display:grid;place-items:center}
.circle:hover{border-color:var(--magenta);color:var(--magenta)}
.link{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding-bottom:6px;border-bottom:1.5px solid var(--magenta);margin-left:18px}

/* work */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*22px)/4);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.rail::-webkit-scrollbar{display:none}
.work{scroll-snap-align:start;text-decoration:none;display:flex;flex-direction:column;gap:14px}
.shot{position:relative;aspect-ratio:4/3;max-width:100%;border-radius:4px;overflow:hidden;background:radial-gradient(120% 90% at 50% 100%,#2a1f33,#0f0d13 70%);display:grid;place-items:end center;padding:18px 18px 0}
.shot .mini{width:100%;background:#050507;border:6px solid #1c1a21;border-bottom:0;border-radius:8px 8px 0 0;overflow:hidden;aspect-ratio:16/9.6;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.work:hover .mini{transform:translateY(-6px)}
.work .meta{display:flex;justify-content:space-between;align-items:end;gap:10px}
.work b{display:block;font-size:16px}
.work small{display:block;color:var(--muted);font-size:13.5px}
.work .go{color:var(--muted);transition:color .2s,transform .2s}
.work:hover .go{color:var(--magenta);transform:translateX(3px)}
@media (max-width:1000px){.rail{grid-auto-columns:calc((100% - 22px)/2.15)}}
@media (max-width:560px){.rail{grid-auto-columns:84%}}

/* services */
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.svc{padding:30px 28px 34px 0;border-bottom:1px solid var(--line);display:grid;gap:10px;align-content:start}
.svc:not(:nth-child(3n+1)){padding-left:28px;border-left:1px solid var(--line)}
.svc h3{margin:0;font-family:var(--display);font-weight:700;font-size:30px;line-height:1;text-transform:uppercase}
.svc p{margin:0;color:var(--muted);font-size:15px;max-width:38ch}
.svc .tags{font-size:12px;letter-spacing:.06em;color:var(--dim)}
.svc a{color:var(--magenta);text-decoration:none}
.svc a:hover{text-decoration:underline}
@media (max-width:900px){
  .services{grid-template-columns:1fr 1fr}
  .svc:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .svc:nth-child(even){padding-left:24px;border-left:1px solid var(--line)}
}
@media (max-width:560px){.services{grid-template-columns:1fr}.svc:nth-child(even){padding-left:0;border-left:0}}

/* process */
.process-sec{padding-block:0;border-block:1px solid var(--line)}
.process-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);min-height:520px}
.studio{position:relative;overflow:hidden;background:#07060A;padding:clamp(24px,4vw,48px);display:flex;flex-direction:column;justify-content:flex-end}
.editor{position:absolute;inset:clamp(24px,4vw,48px) clamp(24px,4vw,48px) auto;border:1px solid var(--line);border-radius:8px;background:#0E0C12;font:12.5px/1.75 ui-monospace,Menlo,Consolas,monospace;color:#8C8594;overflow:hidden}
.editor .bar{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line)}
.editor .bar i{width:9px;height:9px;border-radius:50%;background:#2d2934}
.editor pre{margin:0;padding:14px 16px;white-space:pre;overflow:hidden}
.editor .k{color:var(--magenta)}
.editor .s{color:var(--dusk)}
.editor .c{color:#57505F}
.editor .caret{display:inline-block;width:7px;height:14px;background:var(--magenta);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.studio .hand{position:relative;font-size:clamp(28px,2.8vw,40px);color:#C8C2CE;max-width:12ch}
.studio .hand::after{margin-left:0}
.steps-side{padding:clamp(40px,6vw,80px) clamp(24px,5vw,72px)}
.steps-side h2{font-size:clamp(44px,5vw,72px)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(32px,4vw,52px)}
.step{padding:0 18px 0 0;display:grid;gap:10px;align-content:start}
.step + .step{padding-left:18px;border-left:1px solid var(--magenta-deep)}
.step svg{width:34px;height:34px;stroke:var(--text);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.step .n{font-family:var(--display);font-weight:700;font-size:20px;color:var(--magenta);margin-top:12px}
.step h3{margin:0;font-family:var(--display);font-weight:800;font-size:24px;text-transform:uppercase;line-height:1}
.step p{margin:0;font-size:14px;color:var(--muted)}
@media (max-width:1100px){.steps{grid-template-columns:1fr 1fr;row-gap:32px}.step:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:900px){.process-grid{grid-template-columns:1fr}.studio{min-height:0;gap:28px;justify-content:flex-start}.editor{position:relative;inset:auto}}
@media (max-width:480px){.steps{grid-template-columns:1fr}.step + .step{padding-left:0;border-left:0}}

/* about */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
.about h2{font-size:clamp(44px,5.4vw,76px)}
.about .copy p{margin:0 0 16px;font-size:17px;color:#DCD7E0;max-width:56ch}
.about .copy p:first-child{font-size:21px;line-height:1.45;color:var(--text)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.facts b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(40px,4vw,56px);line-height:1;font-variant-numeric:tabular-nums}
.facts b em{font-style:normal;color:var(--magenta)}
.facts span{display:block;margin-top:6px;font-size:13.5px;color:var(--muted);line-height:1.35}
@media (max-width:900px){.about{grid-template-columns:1fr}}
@media (max-width:480px){.facts{grid-template-columns:1fr 1fr}}

/* cta + form */
.cta{position:relative;overflow:hidden;border-top:1px solid var(--line)}
.cta canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bg) 0%,rgba(10,9,13,.55) 35%,rgba(10,9,13,.82) 100%);pointer-events:none}
.cta .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,90px);align-items:start}
.cta h2{font-size:clamp(50px,6vw,92px)}
.cta .intro p{color:#DCD7E0;max-width:42ch;margin:22px 0 0;font-size:17px}
.ticks{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:12px;font-size:15px}
.ticks li{display:flex;gap:12px;align-items:center}
.ticks svg{width:18px;height:18px;flex:none;stroke:var(--magenta);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cta .hand{margin-top:44px;font-size:30px;transform:rotate(-6deg);max-width:12ch}
.cta .hand::after{margin-left:0}
form.project{background:rgba(18,16,22,.92);border:1px solid var(--line-2);border-radius:8px;padding:clamp(22px,3vw,34px);display:grid;gap:16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
form.project h3{margin:0 0 4px;font-family:var(--display);font-weight:800;font-size:30px;text-transform:uppercase}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:grid;gap:6px;min-width:0}
.field label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.field label small{font-weight:400;letter-spacing:0;text-transform:none;color:var(--dim)}
.field input,.field select,.field textarea{width:100%;background:#0B0A0E;color:var(--text);border:1px solid var(--line-2);border-radius:4px;padding:12px 14px;font:16px/1.4 var(--body)}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--magenta);box-shadow:0 0 0 3px rgba(230,66,245,.18)}
.field .err{font-size:13px;color:#FF8FA3;min-height:0}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px}
.form-foot small{color:var(--dim);font-size:12.5px;max-width:34ch}
.status{margin:0;font-size:15px}
.status.ok{color:#9AF0B7}
.status.bad{color:#FF8FA3}
.done{display:grid;gap:12px;padding-block:24px}
.done h3{color:var(--magenta)}
@media (max-width:900px){.cta .wrap{grid-template-columns:1fr}.cta .hand{display:none}}
@media (max-width:520px){.row{grid-template-columns:1fr}}

/* footer */
footer{border-top:1px solid var(--line);padding-block:30px}
footer .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:20px 40px;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:24px;justify-content:center}
footer nav a{text-decoration:none;font-size:14px;color:#CFC9D4}
footer nav a:hover{color:var(--magenta)}
footer .r{text-align:right;font-size:13px;color:var(--muted);line-height:1.5}
footer .sub{display:block;margin-top:4px;font-size:12.5px;color:var(--dim)}
footer .sub a{color:var(--muted)}
@media (max-width:800px){footer .wrap{grid-template-columns:1fr}footer nav{justify-content:flex-start}footer .r{text-align:left}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}