*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{background:#070707}
::selection{background:rgba(76,154,82,.28);color:#fff}
.noscroll{scrollbar-width:none;-ms-overflow-style:none}
.noscroll::-webkit-scrollbar{display:none;width:0;height:0}
details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
.chev{transition:transform .35s ease}
details[open] .chev{transform:rotate(180deg)}
details[open] .faqcard{border-color:rgba(76,154,82,.35)}
.logo-track{display:flex;align-items:center;width:max-content;padding:18px 0;animation:logoscroll 32s linear infinite}
.logo-marquee:hover .logo-track{animation-play-state:paused}
.logo-item{display:inline-flex;align-items:center;gap:13px;margin-right:64px;color:#7c807f;flex:0 0 auto;transform-origin:center center;will-change:transform;transition:color .35s,opacity .35s;opacity:.78}
.logo-item:hover{color:#cfd3d2;opacity:1}
.logo-badge{width:40px;height:40px;border-radius:10px;border:1.5px solid currentColor;display:flex;align-items:center;justify-content:center;font-family:Prompt,sans-serif;font-weight:700;font-size:15px;letter-spacing:.5px;flex:0 0 auto}
.logo-word{font-family:Prompt,sans-serif;font-weight:600;font-size:18px;letter-spacing:-.3px;white-space:nowrap}
@keyframes logoscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* project cards: B&W by default, color + slight zoom on hover */
.proj-cols .proj-col > div,.recent-grid > div{transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity 1.1s cubic-bezier(.2,.8,.2,1)}
.proj-cols .proj-col > div img,.recent-grid > div img{filter:grayscale(1);transition:filter .45s ease}
.proj-cols .proj-col > div:hover,.recent-grid > div:hover{transform:scale(1.045);z-index:6}
.proj-cols .proj-col > div:hover img,.recent-grid > div:hover img{filter:grayscale(0)}
/* services + faq images: permanent B&W */
#services-img,#faq-img,#reviews-img{filter:grayscale(1)}
.reveal{opacity:0;transform:translateY(18px);transition:opacity 1.1s cubic-bezier(.2,.8,.2,1),transform 1.1s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}}
@keyframes plbar{0%{transform:translateX(-130%)}100%{transform:translateX(440%)}}
@keyframes plfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#preloader{transition:opacity .7s ease,visibility .7s ease}
.rev-track{display:flex;align-items:stretch;width:max-content;padding:6px 48px}
.rev-marquee{scrollbar-width:none;-ms-overflow-style:none;cursor:grab;user-select:none;-webkit-user-select:none}
.rev-marquee:active,.rev-marquee.dragging{cursor:grabbing}
.rev-marquee::-webkit-scrollbar{display:none;width:0;height:0}
/* skill tags: color shift on hover */
.tag{transition:color .3s ease,background .3s ease,border-color .3s ease,box-shadow .3s ease}
.tag:hover{color:#fff;background:rgba(76,154,82,.22);border-color:rgba(76,154,82,.6);box-shadow:0 0 18px rgba(76,154,82,.25)}
/* service icons: color shift when its card is hovered */
.svc-icon{transition:color .3s ease,background .3s ease,border-color .3s ease,box-shadow .3s ease}
.svc-grid > div:hover .svc-icon{color:#fff;background:rgba(76,154,82,.9);border-color:rgba(76,154,82,1);box-shadow:0 0 22px rgba(76,154,82,.5)}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 28px;border-radius:14px;font-family:Inder,sans-serif;font-weight:600;font-size:15px;line-height:1;color:#f4f5f4;text-decoration:none;cursor:pointer;background:linear-gradient(180deg,rgba(26,28,26,.5),rgba(8,10,8,.72));border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px) saturate(150%);-webkit-backdrop-filter:blur(10px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 8px 26px rgba(0,0,0,.5);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.btn::before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:radial-gradient(135% 125% at 14% 122%,rgba(255,255,255,.55),rgba(255,255,255,0) 55%);opacity:.5;z-index:-1;pointer-events:none;transition:opacity .35s}
.btn::after{content:"";position:absolute;left:0;right:0;top:0;height:48%;border-radius:14px 14px 0 0;background:linear-gradient(180deg,rgba(255,255,255,.14),transparent);z-index:-1;pointer-events:none}
.btn:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 36px rgba(0,0,0,.55),0 0 22px rgba(255,255,255,.1)}
.btn:hover::before{opacity:.9}
.btn-green{border-color:rgba(76,154,82,.6);box-shadow:inset 0 1px 0 rgba(180,235,190,.22),0 8px 26px rgba(0,0,0,.5),0 0 20px rgba(76,154,82,.4)}
.btn-green::before{background:radial-gradient(135% 125% at 14% 122%,rgba(132,216,142,.9),rgba(132,216,142,0) 55%);opacity:.72}
.btn-green::after{background:linear-gradient(180deg,rgba(170,230,180,.16),transparent)}
.btn-green:hover{border-color:rgba(120,200,130,.92);box-shadow:inset 0 1px 0 rgba(190,240,200,.28),0 14px 36px rgba(0,0,0,.55),0 0 32px rgba(76,154,82,.62)}
.behance-mobile{display:none}
@media(max-width:880px){
 .nav-links{display:none!important}
 .two-col,.svc-grid{grid-template-columns:1fr!important}
 .recent-grid{grid-template-columns:1fr 1fr!important}
 .proj-cols{display:grid!important;grid-template-columns:1fr 1fr!important;gap:14px!important;align-items:stretch!important}
 .proj-col{display:contents!important}
 .img-right{order:-1;min-height:340px!important}
 .hero-h{font-size:clamp(26px,7.6vw,40px)!important;width:auto!important;height:auto!important;max-width:100%!important;letter-spacing:-1px!important}
 .re-h{font-size:clamp(30px,8vw,42px)!important}
 .sec{padding:48px 22px!important}
 /* ---- mobile-only refinements ---- */
 .vtop{padding-top:56px!important}                 /* match the compact mobile header */
 #projects{display:none!important}                 /* skip projects: hero -> about */
 #site-header > div{padding:10px 14px!important;gap:8px!important}    /* compact header */
 #site-header svg[aria-label="Jeydro"]{height:30px!important;width:123px!important}
 #site-header > div > div{gap:8px!important}
 #lang-toggle{padding:7px 11px!important;font-size:12px!important}
 .btn{padding:12px 18px!important;font-size:13.5px!important}
 #site-header .btn-green{padding:10px 12px!important}   /* header CTA -> icon only */
 .cta-label{display:none!important}
 #services .two-col > div:last-child{display:none!important}   /* hide services image */
 .svc-grid > div{padding:22px 20px!important}
 .svc-icon{width:44px!important;height:44px!important;margin-bottom:14px!important}
 #services .svc-grid h3{font-size:18px!important;margin-bottom:7px!important}
 #services .svc-grid p{font-size:13.5px!important;line-height:1.55!important}
 .rev-card{width:78vw!important;max-width:300px!important;padding:22px!important;margin-right:14px!important}
 .rev-card p{font-size:14px!important;line-height:1.6!important}
 .rev-track{padding:6px 20px!important}
 .rev-marquee{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%)!important;mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%)!important}
 .behance-mobile{display:flex!important}
 /* recent-work cards: keep long project names tidy (max 2 lines + ellipsis) */
 .recent-grid a > div > span:first-child{min-width:0!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;font-size:11.5px!important;line-height:1.3!important}
}