:root{
  --ink:#0d0d0d; --cream:#f5f0e8; --lime:#c8f135; --coral:#ff4d4d; --violet:#7b2dff; --sky:#00c2ff;
  --gut:clamp(20px,4vw,48px);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{background:var(--ink);color:var(--cream);font-family:Heebo,system-ui,sans-serif;overflow-x:hidden;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
ul{list-style:none}

/* custom cursor only for mouse users */
.cursor,.cursor-ring{display:none}
@media (pointer:fine) and (prefers-reduced-motion:no-preference){
  body,a,button,.card{cursor:none}
  .cursor,.cursor-ring{display:block;position:fixed;top:0;left:0;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%);mix-blend-mode:exclusion}
  .cursor{width:14px;height:14px;background:var(--lime);z-index:9999;transition:width .3s,height .3s}
  .cursor-ring{width:40px;height:40px;border:2px solid var(--lime);z-index:9998;transition:width .3s,height .3s}
}

/* NAV */
nav{position:fixed;top:0;width:100%;z-index:100;padding:22px var(--gut);display:flex;justify-content:space-between;align-items:center;transition:background .3s,padding .3s}
nav.scrolled{background:rgba(13,13,13,.92);backdrop-filter:blur(12px);border-bottom:1px solid #1a1a1a;padding-block:14px}
.logo{font-family:Rubik,Heebo,sans-serif;font-weight:900;font-size:1.4rem;text-decoration:none;letter-spacing:-1px}
.logo span{color:var(--lime)}
nav ul{display:flex;gap:40px}
nav ul a{text-decoration:none;font-size:.95rem;font-weight:300;letter-spacing:1px;position:relative}
nav ul a::after{content:'';position:absolute;bottom:-4px;right:0;width:0;height:2px;background:var(--lime);transition:width .3s}
nav ul a:hover::after{width:100%}

/* HERO */
#hero{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:1fr 1fr;padding:0 var(--gut);position:relative;overflow:hidden}
.hero-bg-shape{position:absolute;border-radius:50%;filter:blur(80px);opacity:.18;animation:floatShape 8s ease-in-out infinite}
.shape1{width:500px;height:500px;background:var(--violet);top:-100px;right:-100px}
.shape2{width:400px;height:400px;background:var(--coral);bottom:-80px;left:0;animation-delay:3s}
.shape3{width:300px;height:300px;background:var(--sky);top:40%;right:40%;animation-delay:5s}
@keyframes floatShape{50%{transform:translate(30px,-30px) scale(1.05)}}

.hero-left{display:flex;flex-direction:column;justify-content:center;padding:130px 0 80px;position:relative;z-index:2}
.hero-tag{background:var(--lime);color:var(--ink);font-size:.8rem;font-weight:700;letter-spacing:2px;padding:6px 16px;border-radius:2px;margin-bottom:32px;width:fit-content;animation:slideDown .8s both}
.hero-title{font-family:Rubik,Heebo,sans-serif;font-weight:900;font-size:clamp(3.4rem,8vw,7rem);line-height:.98;letter-spacing:-2px;margin-bottom:32px;animation:slideUp .9s .1s both}
.hero-title .q{color:var(--lime)}
.hero-title em{font-style:normal;color:transparent;-webkit-text-stroke:2px var(--lime)}
.hero-sub{font-size:1.1rem;font-weight:300;line-height:1.7;color:#aaa;max-width:460px;margin-bottom:44px;animation:slideUp 1s .2s both}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;animation:slideUp 1s .3s both}

.btn-primary,.btn-outline{font-family:Heebo,sans-serif;font-size:1rem;border-radius:4px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:transform .2s,box-shadow .2s,border-color .3s}
.btn-primary{background:var(--lime);color:var(--ink);font-weight:700;padding:16px 36px;border:0}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(200,241,53,.35)}
.btn-outline{background:none;color:var(--cream);padding:16px 36px;border:1px solid rgba(255,255,255,.25)}
.btn-outline:hover{border-color:var(--cream)}
.btn-outline.small{font-size:.85rem;padding:12px 24px}

.hero-right{display:flex;align-items:center;justify-content:center;position:relative;z-index:2}
.hero-visual{width:420px;height:520px;position:relative;animation:fadeIn 1.2s .4s both}
.hero-card{position:absolute;border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);transition:transform .5s;background:#222}
.hero-card img{width:100%;height:100%;object-fit:cover}
.hc1{width:260px;height:320px;top:0;left:0;transform:rotate(-2deg)}
.hc2{width:200px;height:250px;bottom:20px;right:0;transform:rotate(4deg)}
.hc3{width:150px;height:180px;top:50px;right:30px;transform:rotate(-6deg);border-radius:8px;z-index:2}
.hero-card:hover{transform:rotate(0) scale(1.04)!important;z-index:10}

/* TICKER */
.ticker-wrap{background:var(--lime);color:var(--ink);padding:14px 0;overflow:hidden;white-space:nowrap;direction:ltr}
.ticker{display:inline-flex;animation:ticker 28s linear infinite}
.ticker-item{font-family:Rubik,Heebo,sans-serif;font-weight:900;padding:0 28px;direction:rtl}
.ticker-item::after{content:'✦';margin-inline-start:56px;opacity:.35}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ABOUT */
#about{padding:120px var(--gut);display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.section-label{font-size:.75rem;font-weight:700;letter-spacing:4px;color:var(--lime);margin-bottom:24px}
.about-title,.section-title,.contact-title{font-family:Rubik,Heebo,sans-serif;font-weight:900;line-height:1;letter-spacing:-2px}
.about-title{font-size:clamp(2.5rem,4.5vw,4.2rem);margin-bottom:28px}
.about-title span{color:var(--lime)}
.about-text{font-size:1.05rem;font-weight:300;line-height:1.8;color:#bbb;margin-bottom:40px;max-width:52ch}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.stat-box{background:#161616;padding:32px;transition:background .3s}
.stat-box:hover{background:#1e1e1e}
.stat-box.wide{grid-column:1/-1}
.stat-box:first-child{border-radius:0 16px 0 0}
.stat-box:nth-child(2){border-radius:16px 0 0 0}
.stat-box.wide{border-radius:0 0 16px 16px}
.stat-num{direction:ltr;text-align:right;font-family:Rubik,Heebo,sans-serif;font-weight:900;font-size:3rem;color:var(--lime);line-height:1;margin-bottom:8px}
.stat-label{font-size:.9rem;color:#888;font-weight:300}
.service-item{padding:20px 0;border-bottom:1px solid #1f1f1f;display:flex;justify-content:space-between;align-items:center;color:#ccc;transition:color .2s,padding-right .3s}
.service-item:hover{color:var(--cream);padding-right:12px}
.service-item span{color:var(--lime)}

/* PORTFOLIO */
#portfolio{padding:80px var(--gut)}
.portfolio-header{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:48px}
.section-title{font-size:clamp(2.5rem,4.5vw,4.2rem)}
.gallery-grid{columns:3 280px;column-gap:16px}
.card{display:block;width:100%;padding:0;border:0;font:inherit;color:inherit;break-inside:avoid;margin-bottom:16px;overflow:hidden;border-radius:12px;background:#161616;position:relative}
.card img{width:100%;transition:transform .6s cubic-bezier(.25,.46,.45,.94)}
.card:hover img{transform:scale(1.06)}
.card::after{content:'+';position:absolute;inset-inline-end:14px;bottom:14px;width:40px;height:40px;border-radius:50%;background:var(--lime);color:var(--ink);font-size:1.6rem;line-height:40px;text-align:center;opacity:0;transform:scale(.6);transition:.3s}
.card:hover::after,.card:focus-visible::after{opacity:1;transform:none}
.more{display:flex;margin:32px auto 0}

/* CONTACT */
#contact{padding:120px var(--gut);display:grid;grid-template-columns:1fr 1fr;gap:80px;background:#0a0a0a;margin-top:80px}
.contact-title{font-size:clamp(3rem,6vw,5.5rem);margin-bottom:32px}
.contact-title em{font-style:normal;color:var(--lime)}
.contact-info{display:flex;flex-direction:column;gap:20px}
.contact-row{display:flex;align-items:center;gap:16px;color:#aaa;text-decoration:none;transition:color .3s}
.contact-row:hover{color:var(--cream)}
.contact-icon{width:44px;height:44px;border-radius:50%;background:#1a1a1a;display:grid;place-items:center;font-size:1.1rem;flex-shrink:0;transition:.3s}
.contact-row:hover .contact-icon{background:var(--lime);color:var(--ink)}
.wa-card{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:320px;padding:clamp(28px,4vw,48px);border-radius:24px;background:var(--lime);color:var(--ink);text-decoration:none;transition:transform .3s,box-shadow .3s}
.wa-card:hover{transform:translateY(-6px) rotate(-.5deg);box-shadow:0 30px 70px -20px rgba(200,241,53,.45)}
.wa-card-big{font-family:Rubik,Heebo,sans-serif;font-weight:900;font-size:clamp(2rem,4vw,3.4rem);line-height:1.05;letter-spacing:-1.5px}
.wa-card-sub{font-weight:400;opacity:.75}
.wa-card-go{align-self:flex-start;background:var(--ink);color:var(--lime);font-weight:700;padding:14px 28px;border-radius:99px}

footer{padding:40px var(--gut);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid #1a1a1a;font-size:.85rem;color:#777}
footer a{color:var(--lime);text-decoration:none}

.wa-float{position:fixed;bottom:28px;left:28px;z-index:200;width:58px;height:58px;background:#25d366;border-radius:50%;display:grid;place-items:center;box-shadow:0 8px 24px rgba(37,211,102,.4);transition:transform .3s;animation:pulse 2.5s ease-in-out infinite}
.wa-float:hover{transform:scale(1.1)}
@keyframes pulse{50%{box-shadow:0 8px 40px rgba(37,211,102,.75)}}

/* lightbox */
.lb{position:fixed;inset:0;z-index:500;background:rgba(5,5,5,.95);display:grid;place-items:center;padding:24px}
.lb[hidden]{display:none}
.lb img{max-height:88vh;max-width:min(92vw,1100px);border-radius:8px;object-fit:contain}
.lb button{position:absolute;background:rgba(255,255,255,.1);color:#fff;border:0;border-radius:50%;width:48px;height:48px;font-size:28px;line-height:1;cursor:pointer;transition:.2s}
.lb button:hover{background:var(--lime);color:var(--ink)}
.lb-x{top:20px;inset-inline-start:20px}
.lb-n{top:50%;transform:translateY(-50%)}
.lb-n.next{inset-inline-end:20px}.lb-n.prev{inset-inline-start:20px}
.lb{touch-action:pinch-zoom;user-select:none}
.lb img{-webkit-user-drag:none}
.lb-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.75);font-size:.9rem;letter-spacing:.08em;direction:ltr}
@media (max-width:700px){.lb{padding:12px}.lb img{max-height:78vh;max-width:100%}.lb-n{top:auto;bottom:14px;transform:none;width:52px;height:52px}.lb-count{bottom:30px}}

@keyframes slideUp{from{opacity:0;transform:translateY(40px)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-20px)}}
@keyframes fadeIn{from{opacity:0}}
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s,transform .8s}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}html{scroll-behavior:auto}
}

@media (max-width:900px){
  nav ul{display:none}
  #hero{grid-template-columns:1fr}
  .hero-right{display:none}
  .hero-left{padding-top:110px}
  #about,#contact{grid-template-columns:1fr;gap:48px;padding-block:80px}
  .wa-float{bottom:18px;left:18px}
}
@media (max-width:600px){.gallery-grid{columns:2;column-gap:10px}.card{margin-bottom:10px}}