/* noqode.in — "Ember on graphite". One builder + AI. Phone first. */
:root{
  --bg:#0c0a09;--bg2:#13100e;--card:#1a1613;--card2:#221d19;--line:rgba(244,239,230,.10);--line2:rgba(244,239,230,.18);
  --ink:#f4efe6;--mute:#a8a29e;--dim:#78716c;--ember:#ff5a1f;--ember2:#ffb547;--good:#3ddc97;
  --r:22px;--r2:14px;--pad:clamp(16px,4vw,40px);--max:1240px;
  --fd:"Bricolage Grotesque",system-ui,sans-serif;--fb:"Hanken Grotesk",system-ui,sans-serif;--fm:"JetBrains Mono",ui-monospace,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--fb);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
::selection{background:var(--ember);color:#160b05}
:focus-visible{outline:2px solid var(--ember2);outline-offset:3px;border-radius:8px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--fm);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.mono b{color:var(--ember2);font-weight:500}
h1,h2,h3{font-family:var(--fd);font-weight:700;letter-spacing:-.035em;line-height:.98}
h2{font-size:clamp(38px,7vw,88px)}
h3{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;line-height:1.1}
.lede{font-size:clamp(17px,1.6vw,20px);color:var(--mute);max-width:60ch}
.em{color:var(--ember)}
.grain{position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;
  border:1px solid var(--line2);background:transparent;font-weight:600;font-size:16px;cursor:pointer;transition:transform .2s,background .2s,border-color .2s}
.btn:hover{border-color:var(--ink)}
.btn.pri{background:var(--ember);border-color:var(--ember);color:#170a04}
.btn.pri:hover{background:#ff6f3a}
.btn:active{transform:scale(.97)}
.btn svg{width:20px;height:20px}

/* top bar */
.top{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.top.solid{background:rgba(12,10,9,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;height:68px}
.logo{display:flex;align-items:center;gap:10px;font:700 24px/1 var(--fd);letter-spacing:-.04em}
.logo svg{width:30px;height:30px}
.nav{display:none;gap:26px;margin-left:auto;font-weight:500;color:var(--mute)}
.nav a:hover{color:var(--ink)}
.top .btn{display:none;min-height:42px;padding:0 18px;font-size:15px}

/* phone dock */
.dock{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:60;display:flex;gap:4px;padding:6px;
  background:rgba(26,22,19,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line2);border-radius:22px}
.dock a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px;border-radius:16px;font-size:11.5px;font-weight:600;color:var(--mute)}
.dock a svg{width:22px;height:22px}
.dock a.go{background:var(--ember);color:#170a04}
.dock a.on{color:var(--ink)}
body{padding-bottom:96px}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:110px 0 44px;overflow:hidden}
#gl{position:absolute;inset:0;width:100%;height:100%}
.hero .fallback{position:absolute;inset:0;background:radial-gradient(60% 50% at 70% 40%,rgba(255,90,31,.25),transparent 70%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(12,10,9,.94) 0%,rgba(12,10,9,.78) 45%,rgba(12,10,9,0) 74%),
  linear-gradient(180deg,rgba(12,10,9,.55) 0%,rgba(12,10,9,0) 30%,rgba(12,10,9,.2) 55%,rgba(12,10,9,.96) 88%)}
.hero .wrap{position:relative;z-index:2}
.hero h1{font-size:clamp(46px,9.6vw,136px);max-width:11ch}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 .ln span{display:inline-block}
.hero .lede{margin:22px 0 28px;color:#d6d0c8}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero .tag{display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;padding:7px 14px 7px 10px;border:1px solid var(--line2);border-radius:999px;background:rgba(12,10,9,.5)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 0 rgba(61,220,151,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(61,220,151,0)}100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:38px;max-width:640px}
.facts div{border-top:1px solid var(--line2);padding-top:10px}
.facts b{display:block;font:700 clamp(28px,4vw,44px)/1 var(--fd);letter-spacing:-.03em}
.facts span{font-size:13.5px;color:var(--mute)}

/* marquee of skills */
.marq{border-block:1px solid var(--line);overflow:hidden;padding:18px 0;background:var(--bg2)}
.marq .tr{display:flex;gap:44px;width:max-content;animation:mq 38s linear infinite;font:600 clamp(20px,3vw,30px)/1 var(--fd);letter-spacing:-.02em;white-space:nowrap}
.marq .tr span{display:flex;align-items:center;gap:44px;color:var(--mute)}
.marq .tr span::after{content:"";width:10px;height:10px;background:var(--ember);border-radius:3px;transform:rotate(45deg)}
@keyframes mq{to{transform:translateX(-50%)}}

/* sections */
section.s{padding:clamp(80px,12vw,150px) 0}
.sh{display:flex;flex-direction:column;gap:18px;margin-bottom:clamp(36px,6vw,70px)}
.sh .mono{display:flex;align-items:center;gap:10px}
.sh .mono::before{content:"";width:26px;height:1px;background:var(--ember)}

/* work cards */
.work{display:flex;flex-direction:column;gap:clamp(56px,9vw,120px)}
.case{display:grid;gap:26px;align-items:center}
.case .meta{display:flex;flex-direction:column;gap:14px}
.case .num{font:500 13px var(--fm);color:var(--ember2)}
.case h3{font-size:clamp(30px,4.6vw,58px);letter-spacing:-.035em;line-height:1}
.case .client{color:var(--mute);font-size:15px}
.case p{color:#cfc8bf;max-width:52ch}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:500 12.5px/1 var(--fm);padding:8px 11px;border:1px solid var(--line2);border-radius:999px;color:#d9d2c9;letter-spacing:.02em}
.more{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--ember);padding-bottom:3px;width:max-content}
.more svg{width:18px;height:18px;transition:transform .2s}
.more:hover svg{transform:translateX(4px)}

/* device frames */
.stage{position:relative;padding:0 0 9% 0}
.lap{position:relative;border-radius:14px;background:#0a0908;border:1px solid var(--line2);box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 6px rgba(255,255,255,.02);overflow:hidden}
.lap .bar{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line)}
.lap .bar i{width:9px;height:9px;border-radius:50%;background:#3a332e}
.scr{position:relative;overflow:hidden;aspect-ratio:16/10;background:#111}
.scr img{width:100%;height:auto;transform:translateY(0)}
@keyframes panL{0%,12%{transform:translateY(0)}88%,100%{transform:translateY(calc(-100% + var(--h,62.5vw)))}}
@keyframes panP{0%,12%{transform:translateY(0)}88%,100%{transform:translateY(calc(-100% + var(--hp,300px)))}}
.case:hover .lap .scr img,.case.play .lap .scr img,.shotbig.play .lap .scr img{animation:panL 9s cubic-bezier(.45,0,.3,1) infinite alternate}
.phn{position:absolute;right:0;bottom:0;width:26%;min-width:96px;border-radius:22px;padding:6px;background:#0a0908;border:1px solid var(--line2);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.9)}
.phn .scr{aspect-ratio:390/844;border-radius:16px}
.case:hover .phn .scr img,.case.play .phn .scr img,.shotbig.play .phn .scr img{animation:panP 10s cubic-bezier(.45,0,.3,1) infinite alternate}

/* private builds */
.priv{display:grid;gap:12px}
.pv{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:8px;transition:border-color .2s,transform .2s}
.pv:hover{border-color:var(--line2);transform:translateY(-3px)}
.pv .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:rgba(255,90,31,.12);color:var(--ember);margin-bottom:6px}
.pv .ic svg{width:22px;height:22px}
.pv b{font:700 20px/1.2 var(--fd);letter-spacing:-.02em}
.pv small{font:500 12px var(--fm);color:var(--ember2);letter-spacing:.04em;text-transform:uppercase}
.pv p{color:var(--mute);font-size:15.5px}

/* free tools */
.free{display:grid;gap:12px}
.ft{display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);transition:border-color .2s,transform .2s}
.ft:hover{border-color:var(--ember);transform:translateY(-3px)}
.ft .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--ember);color:#170a04;margin-bottom:4px}
.ft .ic svg{width:22px;height:22px}
.ft b{font:700 22px/1.15 var(--fd);letter-spacing:-.02em}
.ft p{color:var(--mute);font-size:15.5px}
.ft .go{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ember2)}
.ft .go svg{width:18px;height:18px}

/* try it bento */
.bento{display:grid;gap:12px}
.tile{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;min-height:320px;display:flex;flex-direction:column}
.tile .cap{position:relative;z-index:2;padding:20px 22px;display:flex;flex-direction:column;gap:6px;margin-top:auto;background:linear-gradient(180deg,transparent,rgba(12,10,9,.92) 45%)}
.tile .cap b{font:700 21px/1.15 var(--fd);letter-spacing:-.02em}
.tile .cap span{color:var(--mute);font-size:14.5px}
.tile .lbl{position:absolute;top:16px;left:16px;z-index:3;font:500 11.5px var(--fm);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:rgba(12,10,9,.7);border:1px solid var(--line2)}
.tile model-viewer{position:absolute;inset:0;width:100%;height:100%;--poster-color:transparent;background:radial-gradient(70% 60% at 50% 42%,#4a3a2e,#171310)}
.tile video,.tile .cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .play{position:absolute;inset:0;margin:auto;width:74px;height:74px;border-radius:50%;background:var(--ember);color:#170a04;display:grid;place-items:center;border:0;cursor:pointer;z-index:3;box-shadow:0 0 0 10px rgba(255,90,31,.18)}
.tile .play svg{width:28px;height:28px}
.scratch{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;background:radial-gradient(80% 70% at 50% 40%,#3a1d0f,#171210)}
.scratch .prize{display:flex;flex-direction:column;align-items:center;gap:10px}
.scratch .prize b{font:700 clamp(22px,2.6vw,28px)/1.15 var(--fd);max-width:16ch}
.scratch canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}
.dash{position:absolute;inset:0;background:#0f0d0c}
.dash img{width:100%;height:100%;object-fit:cover;object-position:top}

/* what we build */
.caps{display:grid;gap:12px}
.cap2{border:1px solid var(--line);border-radius:var(--r);padding:24px;background:linear-gradient(160deg,var(--card),var(--bg2))}
.cap2 .hd{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.cap2 .hd .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--ember);color:#170a04}
.cap2 .hd .ic svg{width:22px;height:22px}
.cap2 .hd b{font:700 22px/1.1 var(--fd);letter-spacing:-.02em}
.cap2 ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.cap2 li{font-size:14.5px;padding:7px 12px;border-radius:999px;background:rgba(244,239,230,.05);border:1px solid var(--line);color:#ddd6cd;cursor:pointer;transition:border-color .2s,color .2s}
.cap2 li:hover{border-color:var(--ember);color:var(--ink)}
.ask-any{margin-top:16px;padding:22px;border-radius:var(--r);border:1px dashed var(--line2);display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;justify-content:space-between}
.ask-any b{font:700 22px/1.2 var(--fd);letter-spacing:-.02em}

/* game */
.game{position:relative;border-radius:28px;overflow:hidden;border:1px solid var(--line2);background:radial-gradient(90% 80% at 50% 0%,#2a1a12,#0f0c0b 70%);min-height:560px;height:78svh;max-height:760px;touch-action:manipulation;user-select:none;-webkit-user-select:none}
#stack{position:absolute;inset:0;width:100%;height:100%}
.ghud{position:absolute;top:18px;left:0;right:0;z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;text-align:center}
.ghud .sc{font:800 clamp(56px,9vw,96px)/1 var(--fd);letter-spacing:-.05em}
.ghud .ft{font:500 13px var(--fm);letter-spacing:.06em;text-transform:uppercase;color:var(--ember2);min-height:18px}
.gov{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:24px;text-align:center;background:rgba(12,10,9,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.gov[hidden]{display:none}
.gov .in{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:440px}
.gov h3{font-size:clamp(30px,4vw,44px)}
.gov p{color:#d7d0c7}
.gov .best{font:500 13px var(--fm);color:var(--mute)}
.gov .row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

/* steps */
.steps{display:grid;gap:12px;counter-reset:s}
.step{position:relative;padding:26px 24px 24px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.step::before{counter-increment:s;content:"0" counter(s);font:500 13px var(--fm);color:var(--ember2)}
.step b{display:block;margin:10px 0 6px;font:700 24px/1.1 var(--fd);letter-spacing:-.02em}
.step p{color:var(--mute);font-size:15.5px}

/* start a project */
.start{position:relative;border-radius:32px;overflow:hidden;padding:clamp(26px,5vw,64px);background:
  radial-gradient(70% 90% at 100% 0%,rgba(255,90,31,.28),transparent 60%),radial-gradient(60% 70% at 0% 100%,rgba(255,181,71,.12),transparent 60%),var(--card);border:1px solid var(--line2)}
.start .grid{display:grid;gap:30px}
.start h2{font-size:clamp(40px,6.4vw,80px)}
.form{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field span{font:500 12.5px var(--fm);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.field textarea,.field input{width:100%;background:rgba(12,10,9,.65);border:1px solid var(--line2);border-radius:16px;padding:15px 16px;font-size:16.5px;outline:0;transition:border-color .2s}
.field textarea{min-height:150px;resize:vertical;line-height:1.5}
.field textarea:focus,.field input:focus{border-color:var(--ember)}
.ideas{display:flex;flex-wrap:wrap;gap:8px}
.ideas button{border:1px solid var(--line2);background:transparent;border-radius:999px;padding:8px 13px;font-size:14px;color:#d8d1c8;cursor:pointer}
.ideas button:hover{border-color:var(--ember)}
.two{display:grid;gap:12px}
.note{font-size:13.5px;color:var(--dim)}
.plan{display:none;flex-direction:column;gap:16px;padding:24px;border-radius:24px;background:rgba(12,10,9,.75);border:1px solid var(--line2)}
.plan.on{display:flex}
.plan h4{font:700 clamp(24px,3vw,32px)/1.1 var(--fd);letter-spacing:-.02em}
.plan .lst{display:grid;gap:14px}
.plan .lst div b{display:block;font:500 12px var(--fm);letter-spacing:.06em;text-transform:uppercase;color:var(--ember2);margin-bottom:6px}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.plan li{display:flex;gap:10px;color:#e2dbd2;font-size:15.5px}
.plan li::before{content:"";flex:none;width:7px;height:7px;margin-top:9px;border-radius:2px;background:var(--ember);transform:rotate(45deg)}
.think{display:none;align-items:center;gap:12px;color:var(--mute);font-size:15px}
.think.on{display:flex}
.think i{width:22px;height:22px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--ember);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.err{color:#ff8a65;font-size:15px;display:none}.err.on{display:block}
.sent{display:none;padding:20px;border-radius:18px;background:rgba(61,220,151,.1);border:1px solid rgba(61,220,151,.35)}
.sent.on{display:block}

/* project page */
.phead{padding:130px 0 40px}
.phead h1{font-size:clamp(48px,9vw,120px);margin:14px 0 18px}
.back{display:inline-flex;align-items:center;gap:8px;color:var(--mute);font-weight:500}
.back svg{width:18px;height:18px}
.shotbig{display:grid;gap:18px;margin:10px 0 60px}
.shotbig .lap .scr{aspect-ratio:16/10}
.pbody{display:grid;gap:40px;padding-bottom:40px}
.pbody .txt p{font-size:18px;color:#d9d2c9;margin-bottom:16px;max-width:64ch}
.side{display:flex;flex-direction:column;gap:22px}
.side .box{border-top:1px solid var(--line2);padding-top:14px}
.side .box .mono{margin-bottom:10px;display:block}
.nextp{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:34px 0;border-top:1px solid var(--line)}
.nextp b{font:700 clamp(28px,5vw,56px)/1 var(--fd);letter-spacing:-.035em}

/* footer */
footer{padding:60px 0 30px;border-top:1px solid var(--line);margin-top:40px}
footer .wrap{display:flex;flex-direction:column;gap:22px}
footer .big{font:800 clamp(64px,18vw,250px)/.85 var(--fd);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px var(--line2)}
footer .row{display:flex;flex-wrap:wrap;gap:12px 28px;color:var(--mute);font-size:14.5px}

/* reveal */
.rv{opacity:0;transform:translateY(34px)}
.js-off .rv,.rm .rv{opacity:1;transform:none}

/* tablet + desktop */
@media (min-width:760px){
  .two{grid-template-columns:1fr 1fr}
  .priv{grid-template-columns:repeat(2,1fr)}
  .caps{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .bento{grid-template-columns:repeat(2,1fr)}
  .free{grid-template-columns:repeat(2,1fr)}
  .plan .lst{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
  body{padding-bottom:0}
  .dock{display:none}
  .nav{display:flex}
  .top .btn{display:inline-flex}
  .case{grid-template-columns:5fr 7fr;gap:60px}
  .case:nth-child(even){grid-template-columns:7fr 5fr}
  .case:nth-child(even) .meta{order:2}
  .priv{grid-template-columns:repeat(3,1fr)}
  .free{grid-template-columns:repeat(4,1fr)}
  .caps{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(4,1fr)}
  .bento{grid-template-columns:repeat(6,1fr);grid-auto-rows:300px}
  .bento .t1{grid-column:span 3;grid-row:span 2}
  .bento .t2{grid-column:span 3}
  .bento .t3{grid-column:span 3}
  .bento .t4{grid-column:span 2}
  .bento .t5{grid-column:span 4}
  .tile{min-height:0}
  .phn{right:-2%}
  .start .grid{grid-template-columns:5fr 6fr;align-items:start}
  .pbody{grid-template-columns:8fr 4fr}
  .shotbig{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .scr img{transform:none!important}
}