@import url('https://fonts.googleapis.com/css2?family=Anton&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:#08120f; --surface:#0d1c18; --card:#0f2320; --border:#1e3b34;
  --fg:#eaf7f1; --muted:#93b3a7; --lime:#c6ff3d; --mint:#3ee0b0; --indigo:#5b8cff;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:'Plus Jakarta Sans',system-ui,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.display{font-family:'Anton',Impact,sans-serif;font-weight:400;letter-spacing:.01em;text-transform:uppercase;line-height:.95}
.mono{font-family:'JetBrains Mono',monospace}
.muted{color:var(--muted)}
.gradient-text{background:linear-gradient(100deg,var(--lime),var(--mint) 45%,var(--indigo));-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--lime)}

/* aurora bg */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.32;animation:drift 22s ease-in-out infinite}
.blob.b1{width:46vw;height:46vw;left:-10vw;top:-8vw;background:var(--mint)}
.blob.b2{width:40vw;height:40vw;right:-8vw;top:24vh;background:var(--indigo);animation-delay:-6s}
.blob.b3{width:38vw;height:38vw;left:22vw;bottom:-14vw;background:var(--lime);animation-delay:-12s}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(6vw,-4vh,0) scale(1.15)}66%{transform:translate3d(-5vw,5vh,0) scale(.92)}}
.grid-overlay{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(circle at 50% 30%,#000,transparent 78%)}
.cursor-glow{position:fixed;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(198,255,61,.10),transparent 65%);transform:translate(-50%,-50%);transition:opacity .3s}
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:99;background:linear-gradient(90deg,var(--lime),var(--mint),var(--indigo))}

/* nav */
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(8,18,15,.72);border-bottom:1px solid rgba(30,59,52,.7)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;max-width:var(--max);margin:0 auto}
.brand{display:flex;align-items:center;gap:12px}
.brand .mark{width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:rgba(15,35,32,.7);display:grid;place-items:center;transition:transform .5s}
.brand:hover .mark{transform:rotate(14deg)}
.brand .mark img{height:24px;width:auto}
.brand span{font-size:20px}
.nav-links{display:none;gap:28px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.nav-links a{position:relative;font-family:'JetBrains Mono',monospace}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-6px;height:1px;width:0;background:var(--lime);transition:width .4s}
.nav-links a:hover{color:var(--fg)}.nav-links a:hover::after{width:100%}
@media(min-width:900px){.nav-links{display:flex}}

.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;font-weight:600;font-size:14px;padding:12px 22px;cursor:pointer;border:1px solid transparent;transition:transform .35s,box-shadow .35s,background .35s,color .35s}
.btn-lime{background:linear-gradient(100deg,var(--lime),var(--mint));color:#06150f;box-shadow:0 10px 30px -12px rgba(198,255,61,.6)}
.btn-lime:hover{transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(198,255,61,.75)}
.btn-ghost{border-color:var(--border);color:var(--fg);background:rgba(15,35,32,.5)}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-2px)}

/* hero */
section{position:relative}
.hero{padding:64px 0 40px}
.pill{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:999px;padding:8px 16px;font-size:13px;color:var(--muted);background:rgba(15,35,32,.5)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(198,255,61,.7);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(198,255,61,0)}100%{box-shadow:0 0 0 0 rgba(198,255,61,0)}}
h1.title{font-size:clamp(52px,11vw,150px);margin:26px 0 0;line-height:.86}
.hero-grid{display:grid;gap:32px;margin-top:40px;padding-top:32px;border-top:1px solid var(--border)}
@media(min-width:900px){.hero-grid{grid-template-columns:5fr 7fr}}
.rot{min-height:1.3em;position:relative}
.rot span{display:block;font-size:clamp(28px,4vw,42px);line-height:1.25}
.lead{font-size:18px;color:var(--muted);max-width:640px;line-height:1.65}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:52px}
@media(min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}
.tile{position:relative;border:1px solid var(--border);border-radius:22px;background:linear-gradient(180deg,rgba(15,35,32,.85),rgba(13,28,24,.7));overflow:hidden;transition:transform .5s,border-color .5s,box-shadow .5s}
.tile:hover{border-color:rgba(198,255,61,.45);box-shadow:0 24px 60px -30px rgba(62,224,176,.55);transform:translateY(-4px)}
.tile.pad{padding:26px}
.stat-n{font-size:clamp(34px,4vw,50px)}
.stat-l{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:8px}

/* marquee */
.marquee-wrap{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(13,28,24,.5);padding:16px 0}
.marquee{display:flex;gap:32px;width:max-content;animation:slide 32s linear infinite}
.marquee.rev{animation-direction:reverse}
.marquee-wrap:hover .marquee{animation-play-state:paused}
.marquee i{font-style:normal;color:var(--lime);font-size:15px;margin-left:32px}
.marquee b{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(20px,2.4vw,30px);color:rgba(234,247,241,.72);display:flex;align-items:center}
@keyframes slide{to{transform:translateX(-50%)}}

/* sections */
.sec{padding:88px 0}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.sec-head h2{font-size:clamp(34px,5.4vw,68px);margin:12px 0 0}
.sec-head p{max-width:380px;font-size:14px;color:var(--muted);margin:0}
.cards{display:grid;gap:16px}
@media(min-width:700px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.cards{grid-template-columns:repeat(3,1fr)}}
.svc{padding:32px;height:100%}
.svc .ico{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(198,255,61,.14);color:var(--lime);margin-bottom:22px;transition:.5s;font-size:20px}
.svc:hover .ico{transform:rotate(12deg);background:linear-gradient(100deg,var(--lime),var(--mint));color:#06150f}
.svc h3{font-family:'Anton',sans-serif;text-transform:uppercase;font-weight:400;font-size:24px;margin:0}
.svc p{color:var(--muted);font-size:14px;line-height:1.7;margin:12px 0 0}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tag{font-family:'JetBrains Mono',monospace;border:1px solid var(--border);border-radius:999px;padding:5px 12px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* work */
.proj{display:flex;flex-direction:column;height:100%}
.shot{position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--border);background:#07110e}
.shot img.thumb{width:100%;height:100%;object-fit:cover;object-position:top;opacity:.88;transition:transform .9s ease,opacity .6s}
.proj:hover .shot img.thumb{transform:scale(1.09);opacity:1}
.shot .fade{position:absolute;inset:0;background:linear-gradient(to top,var(--bg),transparent 60%);opacity:.5;transition:.5s}
.proj:hover .shot .fade{opacity:.25}
.wm{position:absolute;right:12px;top:12px;height:40px;width:auto;opacity:.6;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6));transition:.5s}
.proj:hover .wm{opacity:.95}
.chip{position:absolute;left:16px;top:16px;font-family:'JetBrains Mono',monospace;background:rgba(8,18,15,.72);color:var(--lime);border-radius:999px;padding:5px 12px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;backdrop-filter:blur(6px)}
.visit{position:absolute;right:16px;bottom:16px;font-family:'JetBrains Mono',monospace;background:linear-gradient(100deg,var(--indigo),var(--mint));color:#06150f;border-radius:999px;padding:7px 16px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:0;transform:translateY(10px);transition:.5s}
.proj:hover .visit{opacity:1;transform:none}
.proj-body{display:flex;justify-content:space-between;gap:16px;padding:24px}
.proj-body h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:20px;margin:0}
.proj-body p{margin:6px 0 0;font-size:14px;color:var(--muted)}
.arrow{color:var(--muted);transition:.5s;flex:none}
.proj:hover .arrow{color:var(--lime);transform:translate(4px,-4px)}
.placeholder{height:100%;display:grid;place-items:center;background:linear-gradient(120deg,var(--lime),var(--mint) 55%,var(--indigo));padding:24px;text-align:center}
.placeholder span{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:34px;color:#06150f}

.rows{margin-top:56px;border-bottom:1px solid var(--border)}
.row{display:flex;align-items:center;justify-content:space-between;padding:18px 8px;border-top:1px solid var(--border);transition:.4s}
.row:hover{padding-left:22px;background:rgba(198,255,61,.05)}
.row span{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(20px,2.6vw,30px);transition:.4s}
.row:hover span{color:var(--lime)}

/* process */
.steps{display:grid;gap:16px}
@media(min-width:700px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.steps{grid-template-columns:repeat(4,1fr)}}
.step .num{font-family:'Anton',sans-serif;font-size:52px;color:transparent;-webkit-text-stroke:1px rgba(198,255,61,.55)}
.step h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:20px;margin:22px 0 0}
.step p{color:var(--muted);font-size:14px;line-height:1.7;margin:12px 0 0}

/* about */
.about{display:grid;gap:16px}
@media(min-width:900px){.about{grid-template-columns:7fr 5fr}}
.about h2{font-size:clamp(30px,4.4vw,52px);margin:12px 0 0}
.about p{color:var(--muted);line-height:1.75}
.quote{border:1px solid var(--border);border-radius:24px;background:linear-gradient(130deg,var(--lime),var(--mint) 55%,var(--indigo));padding:36px;display:flex;flex-direction:column;justify-content:space-between;height:100%}
.quote p{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:30px;line-height:1.08;color:#06150f;margin:0}
.quote div{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(6,21,15,.75);margin-top:40px}
.link-lime{display:inline-flex;align-items:center;gap:8px;color:var(--lime);font-family:'JetBrains Mono',monospace;font-size:13px;margin-top:28px}
.link-lime:hover{text-decoration:underline}

/* contact */
.contact-box{padding:48px 26px;text-align:center}
.contact-box h2{font-size:clamp(38px,6.4vw,78px);margin:14px auto 0;max-width:900px}
.contact-box .lead{margin:22px auto 0;text-align:center}
.contact-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:34px}
form.enq{max-width:640px;margin:44px auto 0;text-align:left;display:grid;gap:14px}
form.enq input,form.enq textarea{width:100%;background:rgba(8,18,15,.6);border:1px solid var(--border);border-radius:14px;padding:14px 16px;color:var(--fg);font-family:inherit;font-size:15px;outline:none;transition:.3s}
form.enq input:focus,form.enq textarea:focus{border-color:var(--lime)}
form.enq textarea{min-height:130px;resize:vertical}
.form-msg{font-size:14px;margin:0;min-height:20px}
.form-msg.ok{color:var(--lime)}.form-msg.err{color:#ff8080}
footer{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--border);margin-top:56px;padding:28px 0;font-size:12px;color:var(--muted)}
@media(min-width:700px){footer{flex-direction:row}}

/* reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.reveal.left{transform:translateX(-32px)}
.reveal.right{transform:translateX(32px)}
.reveal.scale{transform:scale(.94)}
.reveal.in{opacity:1;transform:none}

.tilt{transform-style:preserve-3d;transition:transform .3s ease-out}

.wa-float{position:fixed;right:18px;bottom:18px;z-index:60;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#25d366;color:#fff;box-shadow:0 12px 30px -10px rgba(37,211,102,.8);transition:transform .3s}
.wa-float:hover{transform:scale(1.08)}