@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  --cream: #FAF6EC;
  --cream-2: #F2ECDD;
  --ink: #0B0B12;
  --blue: #1D2BE3;
  --blue-deep: #12189E;
  --blue-soft: #DCE0FF;
  --yellow: #FFD93D;
  --pink: #FF5C8A;
  --green: #35D07F;
  --white: #FFFFFF;
  --shadow: 6px 6px 0px var(--ink);
  --shadow-sm: 4px 4px 0px var(--ink);
  --shadow-lg: 10px 10px 0px var(--ink);
  --ease: cubic-bezier(.2,.9,.3,1.2);
  --bounce: cubic-bezier(.34,1.56,.64,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;} *{animation-duration:.001s !important; transition-duration:.001s !important;}}

body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Space Grotesk',sans-serif;
  overflow-x:hidden;
}
::selection{background:var(--yellow); color:var(--ink);}

h1,h2,h3,.disp{
  font-family:'Archivo Black',sans-serif;
  text-transform:uppercase;
  line-height:0.98;
  letter-spacing:-.01em;
}
.mono{font-family:'JetBrains Mono',monospace; font-weight:700; letter-spacing:.04em; text-transform:uppercase;}

.wrap{max-width:1280px; margin:0 auto; padding:0 6vw;}

/* -------- cursor blob -------- */
#blob{
  position:fixed; top:0; left:0; width:34px; height:34px; border-radius:50%;
  background:var(--yellow); border:3px solid var(--ink);
  pointer-events:none; z-index:9999; transform:translate(-50%,-50%);
  transition:width .25s var(--bounce), height .25s var(--bounce), background .25s, opacity .3s;
  display:none;
  mix-blend-mode:normal;
}
@media (hover:hover) and (pointer:fine){ #blob{display:block;} }
#blob.big{ width:64px; height:64px; background:var(--pink); }

/* -------- shared bits -------- */
.tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  background:var(--yellow);
  border:2.5px solid var(--ink);
  border-radius:100px;
  padding:8px 16px;
  box-shadow:var(--shadow-sm);
  transform:rotate(-2deg);
  animation:wiggle 4s ease-in-out infinite;
}
.tag.pink{background:var(--pink); color:var(--white);}
.tag.blue{background:var(--blue); color:var(--white);}
@keyframes wiggle{0%,100%{transform:rotate(-2deg);}50%{transform:rotate(2deg);}}

.btn{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:.95rem;
  padding:16px 30px;
  border-radius:100px;
  border:3px solid var(--ink);
  background:var(--white);
  color:var(--ink);
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  box-shadow:var(--shadow);
  transition:transform .18s var(--bounce), box-shadow .18s var(--bounce);
}
.btn:hover{transform:translate(-3px,-3px) rotate(-1deg); box-shadow:9px 9px 0 var(--ink);}
.btn:active{transform:translate(3px,3px) rotate(0); box-shadow:1px 1px 0 var(--ink);}
.btn.yellow{background:var(--yellow);}
.btn.blue{background:var(--blue); color:var(--white);}
.btn.dark{background:var(--ink); color:var(--cream);}

/* -------- nav -------- */
nav{
  position:sticky; top:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 6vw;
  background:var(--cream);
  border-bottom:3px solid var(--ink);
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:'Archivo Black',sans-serif;
  font-size:1.05rem;
  z-index:10;
}
.brand img{height:40px; width:auto; border-radius:8px; border:2.5px solid var(--ink); object-fit:contain;}
@keyframes spin-slow{from{transform:rotate(0);}to{transform:rotate(360deg);}}
.nav-links{display:flex; gap:6px; list-style:none;}
.nav-links a{
  color:var(--ink); text-decoration:none; font-weight:700; font-size:.86rem; text-transform:uppercase;
  padding:9px 16px; border-radius:100px; border:2px solid transparent;
  transition:border-color .25s, background .25s, transform .2s var(--bounce);
}
.nav-links a:hover{border-color:var(--ink); background:var(--yellow); transform:translateY(-2px) rotate(-2deg);}
.hamburger{display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:10;}
.hamburger span{width:24px; height:3px; background:var(--ink); border-radius:2px;}

.mobile-menu{
  position:fixed; inset:0; background:var(--blue); z-index:600;
  display:flex; flex-direction:column; justify-content:center; gap:22px; padding:0 8vw;
  transform:translateY(-100%); transition:transform .5s var(--ease);
}
.mobile-menu.open{transform:translateY(0);}
.mobile-menu a{color:var(--white); text-decoration:none; font-family:'Archivo Black',sans-serif; font-size:2.2rem;}
.mobile-menu .mclose{position:absolute; top:24px; right:6vw; color:var(--white); font-size:2rem; cursor:pointer;}

/* -------- hero -------- */
.hero{
  background:var(--blue); color:var(--white); position:relative; overflow:hidden;
  padding:64px 6vw 0; border-bottom:3px solid var(--ink);
}
.hero-inner{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding-top:16px; padding-bottom:64px;
}
.hero .logo-big{
  width:auto; height:110px; border-radius:16px; border:3px solid var(--white);
  margin-bottom:26px; box-shadow:var(--shadow); object-fit:contain;
  opacity:0; transform:scale(.5) rotate(-40deg) translateZ(0);
  transition:opacity .8s var(--bounce), transform .8s var(--bounce);
  animation:float3d 5s ease-in-out infinite 1s;
}
.hero.loaded .logo-big{opacity:1; transform:scale(1) rotate(0);}
@keyframes float3d{
  0%,100%{ transform: translateY(0) rotate3d(1,1,0,0deg); }
  50%{ transform: translateY(-14px) rotate3d(1,1,0,10deg); }
}
.hero h1{font-size:clamp(2.3rem,8vw,5.6rem); color:var(--white);}
.hero h1 .line{overflow:hidden; display:block;}
.hero h1 .line span{display:block; transform:translateY(115%) rotate(4deg); transition:transform .9s var(--bounce);}
.hero h1 .line:nth-child(2) span{transition-delay:.12s;}
.hero.loaded h1 .line span{transform:translateY(0) rotate(0);}
.hero h1 mark{
  background:var(--yellow); color:var(--ink); padding:0 12px; display:inline-block;
  transform:rotate(-2deg); animation:wiggle 3.4s ease-in-out infinite;
}
.hero p.sub{
  margin-top:26px; max-width:520px; font-size:1.08rem; color:var(--blue-soft); font-weight:500; line-height:1.6;
  opacity:0; transform:translateY(14px); transition:opacity .8s var(--ease) .5s, transform .8s var(--ease) .5s;
}
.hero.loaded p.sub{opacity:1; transform:translateY(0);}
.hero-buttons{
  margin-top:34px; display:flex; gap:16px; flex-wrap:wrap; justify-content:center;
  opacity:0; transform:translateY(14px); transition:opacity .8s var(--ease) .65s, transform .8s var(--ease) .65s;
}
.hero.loaded .hero-buttons{opacity:1; transform:translateY(0);}
.hero-status{
  margin-top:36px; display:flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono',monospace; font-size:.74rem; font-weight:700; color:var(--white); letter-spacing:.08em;
  opacity:0; transition:opacity .8s .8s;
}
.hero.loaded .hero-status{opacity:1;}
.hero-status .dot{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(53,208,127,.3); animation:pulse 1.8s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

.sticker{position:absolute; z-index:1; user-select:none; pointer-events:none; will-change:transform;}
.sticker svg{width:100%; height:100%; display:block;}
.sticker.spin{animation:spin-slow linear infinite;}
.sticker.pulse{animation:pulse2 2.4s ease-in-out infinite;}
@keyframes pulse2{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}

/* marquee ticker */
.marquee{
  background:var(--ink); color:var(--yellow); border-top:3px solid var(--ink); border-bottom:3px solid var(--ink);
  overflow:hidden; white-space:nowrap; padding:14px 0;
}
.marquee-track{display:inline-flex; gap:40px; animation:marquee 18s linear infinite;}
.marquee-track span{
  font-family:'Archivo Black',sans-serif; font-size:1.1rem; display:inline-flex; align-items:center; gap:40px;
  text-transform:uppercase;
}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* -------- reveal -------- */
.reveal{opacity:0; transform:translateY(50px) scale(.96); transition:opacity .7s var(--bounce), transform .7s var(--bounce);}
.reveal.in{opacity:1; transform:translateY(0) scale(1);}

/* -------- section shell -------- */
section{position:relative; padding:100px 0;}
section.light{background:var(--cream);}
section.blue{background:var(--blue); color:var(--white); border-top:3px solid var(--ink); border-bottom:3px solid var(--ink);}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:56px; flex-wrap:wrap;}
.section-head h2{font-size:clamp(2rem,5vw,3.4rem);}
.section-head .desc{max-width:320px; font-weight:500; font-size:.98rem; padding-bottom:6px;}
section.light .section-head .desc{color:#4b4b57;}
section.blue .section-head .desc{color:var(--blue-soft);}

/* -------- services (3D tilt cards) -------- */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; perspective:1400px;}
.service-card{
  background:var(--white); color:var(--ink);
  border:3px solid var(--ink); border-radius:22px;
  padding:30px 26px; cursor:pointer;
  box-shadow:var(--shadow);
  transform-style:preserve-3d;
  transition:transform .12s linear, box-shadow .25s var(--bounce);
  min-height:190px; display:flex; flex-direction:column; justify-content:space-between;
}
.service-card:hover{box-shadow:var(--shadow-lg);}
.service-card .num{font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--blue); font-size:.78rem;}
.service-card h3{font-size:1.2rem; margin-top:20px; text-transform:none; font-family:'Space Grotesk',sans-serif; font-weight:700;}
.service-card .arrow{
  align-self:flex-end; width:36px; height:36px; border-radius:50%;
  background:var(--yellow); border:2.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center; margin-top:16px;
  transition:transform .3s var(--bounce);
}
.service-card:hover .arrow{transform:rotate(45deg) scale(1.15);}

/* -------- modal -------- */
.modal-overlay{
  position:fixed; inset:0; z-index:1000; background:rgba(11,11,18,.6);
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
  display:flex; align-items:flex-end; justify-content:center;
}
.modal-overlay.open{opacity:1; pointer-events:all;}
.modal-panel{
  background:var(--cream); border:3px solid var(--ink); border-bottom:none;
  border-radius:30px 30px 0 0; width:min(720px,94vw); max-height:88vh; overflow-y:auto;
  padding:50px 6vw 70px; transform:translateY(100%); transition:transform .5s var(--bounce);
}
.modal-overlay.open .modal-panel{transform:translateY(0);}
.modal-close{
  position:sticky; top:0; float:right; width:42px; height:42px; border-radius:50%;
  background:var(--pink); color:var(--white); border:3px solid var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-weight:700;
  transition:transform .3s var(--bounce);
}
.modal-close:hover{transform:rotate(90deg);}
.modal-panel h3{font-size:2rem; max-width:520px; margin-top:8px;}
.modal-panel .lead{font-weight:500; font-size:1.02rem; line-height:1.7; margin:20px 0 26px; max-width:540px;}
.modal-panel ul{list-style:none; margin-bottom:26px;}
.modal-panel ul li{padding:14px 0; border-top:2px dashed var(--ink); font-weight:500; display:flex; gap:10px;}
.modal-panel ul li::before{content:'✦'; color:var(--blue); flex-shrink:0;}
.modal-price{font-family:'Archivo Black',sans-serif; font-size:1.5rem; color:var(--blue); margin-bottom:22px;}

/* -------- portfolio: 3D tilt polaroids -------- */
.portfolio-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:34px; perspective:1400px;}
.project-card{cursor:pointer; transform-style:preserve-3d;}
.project-card .frame{
  background:var(--white); border:3px solid var(--ink); border-radius:18px;
  padding:14px 14px 60px; box-shadow:var(--shadow);
  transform:rotate(var(--r,0deg));
  transition:transform .15s linear, box-shadow .25s var(--bounce);
  transform-style:preserve-3d;
}
.project-card:nth-child(1) .frame{--r:-2deg;}
.project-card:nth-child(2) .frame{--r:1.5deg;}
.project-card:nth-child(3) .frame{--r:1deg;}
.project-card:nth-child(4) .frame{--r:-1.5deg;}
.project-card:hover .frame{box-shadow:var(--shadow-lg);}
.project-card .swatch{
  aspect-ratio:16/10; border-radius:10px; border:2.5px solid var(--ink);
  background:var(--pc,var(--blue-soft));
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.project-card .browser-bar{
  position:absolute; top:0; left:0; right:0; height:26px;
  background:#e8e4d8; border-bottom:2px solid var(--ink);
  display:flex; align-items:center; gap:5px; padding:0 10px; z-index:2;
}
.project-card .browser-bar span{width:7px; height:7px; border-radius:50%; background:#c7c2b3; border:1.5px solid var(--ink);}
.project-card .site-frame{
  position:absolute; top:26px; left:0; width:250%; height:250%;
  transform:scale(.4); transform-origin:top left;
  border:none; pointer-events:none; background:#fff;
}
.project-card .site-mockup{
  position:absolute; top:26px; left:0; right:0; bottom:0;
  background:#0a0a0a; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:16px; text-align:center;
}
.project-card .site-mockup img{width:44px; height:44px; border-radius:50%; border:2px solid #fff; object-fit:cover;}
.project-card .site-mockup h5{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.82rem; line-height:1.3; max-width:92%;}
.project-card .site-mockup .stats{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:.58rem; color:#FFD93D; margin-top:4px;}
.project-card .site-shot{
  position:absolute; top:26px; left:0; right:0; bottom:0;
  width:100%; height:calc(100% - 26px); object-fit:contain; object-position:center;
  background:#FAF6EC;
}
.project-card .swatch .mark{font-family:'Archivo Black',sans-serif; font-size:2.4rem; color:rgba(11,11,18,.14); transition:transform .4s var(--bounce);}
.project-card:hover .swatch .mark{transform:scale(1.15) rotate(-4deg);}
.project-card .cat{
  position:absolute; top:34px; left:10px;
  font-family:'JetBrains Mono',monospace; font-size:.62rem; font-weight:700;
  background:var(--ink); color:var(--cream); padding:5px 10px; border-radius:100px;
  z-index:3;
}
.project-card .live-badge{
  position:absolute; top:34px; right:10px;
  font-family:'JetBrains Mono',monospace; font-size:.62rem; font-weight:700;
  background:var(--green); color:var(--ink); padding:5px 10px; border-radius:100px;
  border:2px solid var(--ink);
  animation:pulse 1.8s infinite;
  z-index:3;
}
.project-card .cap{margin-top:14px; padding:0 6px;}
.project-card .cap h4{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.1rem;}
.project-card .cap span{font-size:.8rem; color:#6a6a75; font-weight:500;}

/* -------- lead form -------- */
.form-shell{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:start;
}
.form-left h2{font-size:clamp(2.1rem,5.4vw,3.6rem);}
.form-left p{margin-top:20px; color:var(--blue-soft); font-weight:500; max-width:400px; line-height:1.7;}
.form-left .whatsapp{margin-top:30px;}
.form-left .float-badges{display:flex; gap:14px; margin-top:40px; flex-wrap:wrap;}
.contact-people{
  display:flex; flex-direction:column; gap:12px; margin-top:36px;
  padding-top:28px; border-top:2px dashed rgba(11,11,18,.18);
}
.contact-people .cp-row{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  font-size:.92rem;
}
.contact-people .cp-name{font-weight:700; color:var(--ink);}
.contact-people .cp-role{font-family:'JetBrains Mono',monospace; font-size:.68rem; color:#7a7a86; text-transform:uppercase; letter-spacing:.04em;}
.contact-people .cp-phone{
  color:var(--blue); font-weight:700; text-decoration:none; font-family:'JetBrains Mono',monospace; font-size:.86rem;
}
.contact-people .cp-phone:hover{text-decoration:underline;}
.mini-badge{
  background:var(--white); color:var(--ink); border:2.5px solid var(--ink); border-radius:100px;
  padding:8px 16px; font-family:'JetBrains Mono',monospace; font-size:.7rem; font-weight:700;
  box-shadow:var(--shadow-sm); transform:rotate(-2deg); animation:wiggle 5s ease-in-out infinite;
}
.mini-badge:nth-child(2){transform:rotate(2deg); animation-delay:.5s;}
.mini-badge:nth-child(3){transform:rotate(-1deg); animation-delay:1s;}

.contact-form{
  background:var(--cream); border:3px solid var(--ink); border-radius:24px; padding:38px;
  box-shadow:var(--shadow-lg); color:var(--ink);
  transform:rotate(-.6deg);
  transition:transform .4s var(--bounce);
}
.contact-form:hover{transform:rotate(0deg);}
form{display:flex; flex-direction:column; gap:20px;}
.field label{display:block; font-family:'JetBrains Mono',monospace; font-size:.72rem; font-weight:700; margin-bottom:8px; text-transform:uppercase;}
.field input, .field select, .field textarea{
  width:100%; background:var(--white); border:2.5px solid var(--ink); border-radius:12px;
  padding:12px 14px; font-family:'Space Grotesk',sans-serif; font-size:.96rem; outline:none;
  transition:box-shadow .2s, transform .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{box-shadow:4px 4px 0 var(--blue); transform:translate(-2px,-2px);}
.field textarea{resize:none; height:70px;}
form .btn{align-self:flex-start; margin-top:6px;}

/* -------- footer -------- */
footer{background:var(--ink); color:var(--cream); padding:44px 0;}
footer .finner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
footer .footer-contact{
  display:flex; gap:24px; flex-wrap:wrap;
  margin-top:26px; padding-top:26px; border-top:2px dashed rgba(250,246,236,.18);
  font-family:'JetBrains Mono',monospace; font-size:.78rem; color:#9a9aa5;
}
footer .footer-contact .fc-item{display:flex; flex-direction:column; gap:4px;}
footer .footer-contact .fc-role{color:#77778a; font-size:.68rem; text-transform:uppercase; letter-spacing:.04em;}
footer .footer-contact a{color:var(--yellow); font-weight:700; text-decoration:none;}
footer .footer-contact a:hover{text-decoration:underline;}
footer .fbrand{font-family:'Archivo Black',sans-serif; display:flex; align-items:center; gap:10px;}
footer .fbrand img{height:34px; width:auto; border-radius:6px; object-fit:contain;}
footer .fmeta{font-family:'JetBrains Mono',monospace; font-size:.75rem; color:#9a9aa5;}
footer .fsocial{display:flex; gap:14px;}
footer .fsocial a{color:var(--cream); text-decoration:none; font-size:.78rem; font-weight:700; border-bottom:2px solid var(--yellow);}

/* -------- responsive -------- */
@media (max-width:900px){
  .nav-links{display:none;}
  .hamburger{display:flex;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .portfolio-grid{grid-template-columns:1fr;}
  .form-shell{grid-template-columns:1fr;}
  section{padding:70px 0;}
}
@media (max-width:560px){
  .services-grid{grid-template-columns:1fr;}
}