@font-face{font-family:Syne;src:url('fonts/Syne-ExtraBold.ttf');font-display:swap}
@font-face{font-family:Outfit;src:url('fonts/Outfit-Medium.ttf');font-display:swap}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;background:#09090b}
body{margin:0;background:#09090b;color:#f4f1ea;font-family:Outfit,ui-sans-serif,system-ui,sans-serif;font-size:1.0625rem;line-height:1.55}
button,a{font:inherit}
button:not(:disabled),[role=button]{cursor:pointer}
::selection{background:#c6f04a;color:#09090b}
img{outline:1px solid rgb(244 241 234/.08);outline-offset:-1px;max-width:100%;height:auto}
h1,h2,h3,h4{font-family:Syne,ui-sans-serif,system-ui,sans-serif;text-wrap:balance;letter-spacing:-.035em;line-height:.95;margin:0}
p{text-wrap:pretty}
.font-display{font-family:Syne}
.text-display{font-family:Syne;font-weight:700;letter-spacing:-.04em;line-height:.92;text-wrap:balance}
.container{width:100%;max-width:1440px;margin:auto;padding-left:20px;padding-right:20px}
.ink{background:#09090b;color:#f4f1ea}
.paper{background:#f3f0e8;color:#141311}
.muted{color:#a39e93}
.subtle{color:#6f6b63}
.ink-muted{color:#6b675f}
.lime{color:#c6f04a}
.bg-lime{background:#c6f04a;color:#09090b}
a{text-decoration:none;color:inherit}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:999px;padding:0 20px;font-size:.875rem;font-weight:600;transition:.18s;border:0}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:scale(.96)}
.btn-light{background:#f4f1ea;color:#09090b}
.btn-dark{background:#09090b;color:#f4f1ea}
.btn-outline{border:1px solid rgb(244 241 234/.12);color:#f4f1ea;background:transparent}
.btn-lime{background:#c6f04a;color:#09090b}
.btn-outline-dark{border:1px solid rgb(20 19 17/.1);background:#09090b;color:#f4f1ea}
.icon{width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Nav */
.nav-wrap{pointer-events:none;position:fixed;inset:0 0 auto;padding:12px 12px;z-index:90}
.nav{pointer-events:auto;max-width:1440px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:999px;background:rgb(9 9 11/.85);padding:8px 8px 8px 16px;box-shadow:0 0 0 1px rgb(244 241 234/.08);backdrop-filter:blur(12px)}
.brand{font-family:Syne;font-size:1.15rem;font-weight:700;letter-spacing:-.035em}
.navlinks{display:flex;align-items:center;gap:2px;border:1px solid rgb(244 241 234/.12);background:rgb(9 9 11/.4);padding:4px;border-radius:999px}
.navlinks a{border-radius:999px;padding:6px 14px;font-size:.8rem;font-weight:500;color:#a39e93}
.navlinks a:hover{color:#f4f1ea}
.navlinks a.active{background:#f4f1ea;color:#09090b}
.nav-actions{display:flex;align-items:center;gap:8px}
.menu-btn{display:none;width:44px;height:44px;border-radius:999px;border:1px solid rgb(244 241 234/.12);background:rgb(9 9 11/.5);color:#f4f1ea}
.mobile-overlay{display:none;position:fixed;inset:0;background:rgb(9 9 11/.7);z-index:80}
.drawer{display:none}

/* Hero */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero-art{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(to right,rgb(244 241 234/.05) 1px,transparent 1px),linear-gradient(to bottom,rgb(244 241 234/.05) 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(ellipse 70% 70% at 80% 40%,#000 20%,transparent 75%)}
.hero-orb{position:absolute;border-radius:999px}
.hero-orb-a{width:420px;height:420px;right:-80px;top:12%;background:rgb(198 240 74/.14)}
.hero-orb-b{width:280px;height:280px;right:18%;bottom:8%;background:rgb(244 241 234/.06)}
.hero-mark{position:absolute;right:6%;top:18%;width:min(42vw,420px);height:auto;color:rgb(198 240 74/.85)}
.hero-inner{position:relative;z-index:10;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:112px;padding-bottom:96px}
.eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:20px;font-size:.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#c6f04a}
.hero h1{max-width:1024px;font-size:clamp(2.4rem,7vw,6.2rem)}
.hero-copy{margin-top:24px;max-width:512px;font-size:1.05rem;line-height:1.55;color:#a39e93}
.lead-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:32px}
.see-work{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:.875rem;color:#a39e93}
.see-work:hover{color:#c6f04a}
.stats-row{display:flex;flex-wrap:wrap;gap:32px;margin-top:48px;border-top:1px solid rgb(244 241 234/.12);padding-top:24px}
.stat-num{font-family:Syne;font-size:1.875rem;font-weight:600}
.stat-label{margin-top:4px;font-size:.875rem;color:#a39e93}

/* Marquee */
.marquee{overflow:hidden;border-top:1px solid rgb(244 241 234/.12);border-bottom:1px solid rgb(244 241 234/.12);padding:16px 0}
.marquee.paper-marquee{border-color:rgb(20 19 17/.1);background:#f3f0e8;color:#141311}
.marquee-track{display:flex;width:max-content;gap:32px;animation:marquee 32s linear infinite;padding:0 16px}
.marquee-item{display:flex;flex-shrink:0;align-items:center;gap:32px;font-size:.8rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.diamond{display:inline-block;width:6px;height:6px;transform:rotate(45deg);background:#c6f04a}
.paper-marquee .diamond{background:#6b675f}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Sections */
section .section-inner{padding-top:64px;padding-bottom:64px}
.section-head{display:flex;flex-direction:column;gap:16px}
.section-head .right-copy{max-width:384px;font-size:.875rem;line-height:1.55;color:#a39e93}

/* Work grid - modern bento style */
.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.work-grid .featured{grid-column:span 2}
.project-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;min-height:340px;border-radius:28px;background:#111114;color:#f4f1ea;box-shadow:0 0 0 1px rgb(244 241 234/.08);transition:transform .25s ease,box-shadow .25s ease}
.project-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px -12px rgb(0 0 0/.5),0 0 0 1px rgb(198 240 74/.25)}
.project-card.large{min-height:440px}
.project-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;outline:none;transition:transform .5s ease}
.project-card:hover img{transform:scale(1.04)}
.project-card .gradient{position:absolute;inset:0;background:linear-gradient(to top,#09090b,rgb(9 9 11/.45),rgb(9 9 11/.1))}
.project-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:20px}
.project-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.tag{border:1px solid rgb(244 241 234/.12);background:rgb(9 9 11/.5);padding:4px 12px;border-radius:999px;font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;backdrop-filter:blur(8px)}
.project-index{font-family:Syne;font-size:.875rem;color:#a39e93}
.domain{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#a39e93}
.project-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:4px}
.project-title{font-family:Syne;font-size:1.5rem;font-weight:600;letter-spacing:-.035em}
.project-arrow{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border-radius:50%;border:1px solid rgb(244 241 234/.12);background:rgb(9 9 11/.4);transition:.2s}
.project-card:hover .project-arrow,.service:hover .project-arrow{background:#c6f04a;color:#09090b}

/* About */
.about{background:#f3f0e8;color:#141311}
.about .section-inner{padding-top:64px}
.about-grid{display:grid;grid-template-columns:7fr 5fr;gap:40px}
.about-copy{max-width:448px;margin-top:32px;font-size:1.02rem;line-height:1.55;color:#6b675f}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.stats-grid .stat-num{font-size:2.5rem}

/* Skills */
.skills{background:#f3f0e8;color:#141311}
.skills .section-inner{padding-top:0}
.skills-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:32px}
.skill-card{border-radius:22px;background:#09090b;color:#f4f1ea;padding:20px}
.skill-title{font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#c6f04a}
.skill-items{margin-top:12px;font-size:.875rem;line-height:1.55;color:#a39e93}

/* Process */
.process{background:#09090b}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:40px}
.process-card{border:1px solid rgb(244 241 234/.12);border-radius:22px;background:#111114;padding:20px}
.process-num{font-family:Syne;font-size:1.875rem;font-weight:600;color:#c6f04a}
.process-card h3{margin-top:20px;font-size:1.25rem}
.process-card p{margin-top:8px;font-size:.875rem;line-height:1.55;color:#a39e93}

/* Services */
.services{background:#09090b}
.services .section-inner{border-top:1px solid rgb(244 241 234/.12)}
.services-grid{display:grid;grid-template-columns:5fr 7fr;gap:40px}
.services-list{display:flex;flex-direction:column}
.service{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;border-bottom:1px solid rgb(244 241 234/.12);padding:24px 0}
.service:first-child{padding-top:0}
.service h3{font-size:1.5rem}
.service p{max-width:448px;margin-top:8px;font-size:.875rem;line-height:1.55;color:#a39e93}

/* Contact */
.contact{background:#f3f0e8;color:#141311}
.contact-grid{display:grid;grid-template-columns:5fr 7fr;gap:40px}
.contact-copy{max-width:448px;margin-top:20px;font-size:1.02rem;line-height:1.55;color:#6b675f}
.contact-card{border-radius:28px;background:#09090b;color:#f4f1ea;padding:20px}
.contact-form{display:flex;flex-direction:column;gap:16px}
.form-label{display:block}
.form-label span,.legend{display:block;margin-bottom:6px;font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#a39e93}
.input,.textarea{width:100%;border:1px solid rgb(244 241 234/.12);border-radius:16px;background:#111114;color:#f4f1ea;outline:none;padding:0 16px;font-family:Outfit;font-size:1rem}
.input{height:48px}
.textarea{padding-top:12px;resize:none}
.input::placeholder,.textarea::placeholder{color:#6f6b63}
.input:focus,.textarea:focus{box-shadow:0 0 0 2px #c6f04a}
.types{display:flex;flex-wrap:wrap;gap:8px}
.type-btn{border-radius:999px;padding:8px 14px;font-size:.78rem;font-weight:500;border:1px solid rgb(244 241 234/.12);background:#111114;color:#a39e93}
.type-btn.selected{background:#c6f04a;color:#09090b;border-color:#c6f04a}
.success{min-height:280px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;border-radius:22px;background:#c6f04a;color:#09090b;padding:28px}
.check{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#09090b;color:#c6f04a}
.success h3{margin-top:20px;font-size:1.5rem}
.success p{margin:8px 0 0;max-width:384px;font-size:.875rem;line-height:1.55;color:#6b675f}

/* Footer - polished */
.footer{background:#09090b;color:#f4f1ea}
.footer-inner{padding-top:80px;padding-bottom:48px}
.footer-cta{max-width:640px}
.footer-title{font-size:clamp(2.2rem,4vw,3.2rem)}
.footer-sub{margin-top:12px;max-width:420px;font-size:.9rem;line-height:1.55;color:#a39e93}
.footer-links{display:grid;grid-template-columns:1.7fr 1fr 1.25fr 1fr;gap:40px;margin-top:56px;border-top:1px solid rgb(244 241 234/.12);padding-top:40px}
.footer-heading{font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#a39e93}
.footer-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:.9rem}
.footer-list a{color:#a39e93;transition:color .15s}
.footer-list a:hover{color:#c6f04a}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:40px;border-top:1px solid rgb(244 241 234/.12);padding-top:24px;font-size:.75rem;color:#6f6b63}

/* Floating back to top */
.back-to-top{
  position:fixed;
  bottom:28px;
  right:28px;
  z-index:70;
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid rgb(244 241 234/.15);
  background:rgb(9 9 11/.9);
  color:#f4f1ea;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .25s ease,visibility .25s ease,transform .25s ease,background .2s,border-color .2s;
  backdrop-filter:blur(10px);
  box-shadow:0 8px 24px -8px rgb(0 0 0/.5);
}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:#c6f04a;color:#09090b;border-color:#c6f04a}
.back-to-top .icon{width:20px;height:20px}

.mobile-bar{display:none}

/* Work page */
.work-page{padding-top:112px}
.work-page-head{padding-bottom:40px}
.filter-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}
.filter-row::-webkit-scrollbar{display:none}
.filter{flex-shrink:0;border-radius:999px;padding:8px 16px;font-size:.78rem;font-weight:500;border:1px solid rgb(244 241 234/.12);background:#111114;color:#a39e93;cursor:pointer}
.filter.selected{background:#c6f04a;color:#09090b;border-color:#c6f04a}
.work-cta{margin-top:56px;border-radius:28px;background:#f3f0e8;color:#141311;padding:32px 40px}
.work-cta h2{font-size:2.25rem}
.work-cta p{margin-top:8px;font-size:.875rem;color:#6b675f}

/* Project detail */
.project-hero{position:relative;min-height:64svh;overflow:hidden}
.project-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;outline:none}
.project-overlay{position:absolute;inset:0;background:linear-gradient(to top,#09090b,rgb(9 9 11/.55),rgb(9 9 11/.25))}
.project-hero-inner{position:relative;min-height:64svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:112px;padding-bottom:56px}
.all-work{display:inline-flex;align-items:center;gap:8px;margin-bottom:24px;font-size:.875rem;color:#a39e93}
.all-work:hover{color:#c6f04a}
.project-live-top{align-self:flex-start;margin-bottom:24px}.project-meta{font-size:.7rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#a39e93}
.project-hero h1{margin-top:12px;font-size:clamp(2.6rem,7vw,5.6rem)}
.project-summary{margin-top:16px;max-width:672px;font-size:1.05rem;line-height:1.55;color:#a39e93}
.project-detail{display:grid;grid-template-columns:7fr 5fr;gap:40px;padding-top:48px;padding-bottom:64px}
.description{font-size:1.05rem;line-height:1.55;color:#a39e93}
.problem-result{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px}
.detail-label{font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#6f6b63}
.detail-text{margin-top:8px;font-size:.875rem;line-height:1.55;color:#a39e93}
.project-side{border:1px solid rgb(244 241 234/.12);border-radius:28px;background:#111114;padding:24px}
.detail-block+.detail-block{margin-top:20px}
.live-link{display:inline-flex;align-items:center;gap:6px;margin-top:4px;color:#f4f1ea}
.live-link:hover{color:#c6f04a}
.stack{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.stack span{border:1px solid rgb(244 241 234/.12);border-radius:999px;padding:4px 12px;font-size:.75rem;color:#a39e93}
.project-side .full-btn{width:100%;margin-top:24px}
.more-work{padding-bottom:96px}
.more-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px}
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.more-grid .project-card{min-height:340px}

/* Visual strip for home */
.visual-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:48px}
.visual-strip .strip-card{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3;background:#111114}
.visual-strip .strip-card img{width:100%;height:100%;object-fit:cover;outline:none}
.visual-strip .strip-card .strip-label{position:absolute;left:12px;bottom:12px;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#f4f1ea;background:rgb(9 9 11/.6);padding:4px 10px;border-radius:999px;backdrop-filter:blur(6px)}

/* Cursor */
.cursor-dot,.cursor-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:2000;mix-blend-mode:difference}
.cursor-dot{width:8px;height:8px;border-radius:50%;background:#c6f04a;box-shadow:0 0 12px rgba(198,240,74,.7)}
.cursor-ring{width:32px;height:32px;border:1.5px solid rgba(198,240,74,.65);border-radius:50%;transition:width .2s cubic-bezier(.22,1,.36,1),height .2s cubic-bezier(.22,1,.36,1),border-color .2s,background .2s}
.cursor-ring.is-hover{width:52px;height:52px;border-color:#c6f04a;background:rgba(198,240,74,.12)}
body.has-custom-cursor,body.has-custom-cursor a,body.has-custom-cursor button,body.has-custom-cursor .project-card{cursor:none}

/* Responsive */
@media(max-width:1023px){
  .navlinks{display:none}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center}
  .mobile-overlay{display:block;opacity:0;pointer-events:none;transition:opacity .2s}
  .mobile-overlay.open{opacity:1;pointer-events:auto}
  .drawer{position:fixed;inset:0 0 0 auto;z-index:85;width:min(88vw,360px);display:flex;flex-direction:column;background:#111114;padding:96px 24px 24px;transform:translateX(100%);transition:transform .2s;box-shadow:0 24px 60px -28px rgb(0 0 0/.55)}
  .drawer.open{transform:translateX(0)}
  .drawer .availability{font-size:.7rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#a39e93}
  .drawer nav{display:flex;flex-direction:column;gap:4px;margin-top:32px}
  .drawer nav a{font-family:Syne;border-radius:12px;padding:12px 8px;font-size:1.875rem;font-weight:600;letter-spacing:-.035em}
  .drawer-actions{margin-top:auto;display:flex;flex-direction:column;gap:8px}
  .drawer-actions .btn{width:100%;height:56px}
  .hero-mark{display:none}
  .hero-orb-a{width:200px;height:200px;top:auto;bottom:12%;right:-40px;opacity:.55}
  .hero-grid{mask-image:radial-gradient(ellipse 80% 50% at 80% 80%,#000 10%,transparent 70%)}
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .work-grid .featured{grid-column:span 2}
  .about-grid,.services-grid,.contact-grid,.project-detail{grid-template-columns:1fr}
  .skills-grid,.process-grid{grid-template-columns:repeat(2,1fr)}
  .contact-card{padding:20px}
  .more-grid{grid-template-columns:1fr 1fr}
  .footer-links{grid-template-columns:1fr 1fr}
  .footer-links .footer-brand{grid-column:span 2}
  .visual-strip{grid-template-columns:repeat(2,1fr)}
  .back-to-top{bottom:88px;right:16px}
}
@media(max-width:639px){
  .container{padding-left:20px;padding-right:20px}
  .nav-wrap{padding:12px}
  .nav{padding-left:16px}
  .nav-actions .whatsapp-top{display:none}
  .hero-inner{padding-bottom:112px}
  .hero h1{font-size:clamp(2.4rem,12vw,4.4rem)}
  .hero-copy{font-size:1rem}
  .stats-row{gap:24px}
  .section-inner,.about .section-inner{padding-top:64px;padding-bottom:64px}
  .work-grid,.skills-grid,.process-grid,.more-grid{grid-template-columns:1fr}
  .work-grid .featured{grid-column:auto}
  .project-card,.project-card.large{min-height:320px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stats-grid .stat-num{font-size:2.25rem}
  .footer-title{font-size:2.2rem}
  .footer-links{grid-template-columns:1fr}
  .footer-links .footer-brand{grid-column:auto}
  .footer-bottom{flex-direction:column;align-items:flex-start;padding-bottom:8px}
  .work-page{padding-top:112px}
  .work-cta{padding:28px 24px}
  .work-cta h2{font-size:1.875rem}
  .project-hero,.project-hero-inner{min-height:56svh}
  .project-hero-inner{padding-bottom:40px}
  .project-detail{padding-top:40px}
  .problem-result{grid-template-columns:1fr}
  .mobile-bar{display:block;position:fixed;inset:auto 0 0;z-index:90;border-top:1px solid rgb(244 241 234/.12);background:rgb(9 9 11/.95);padding:8px 8px max(8px,env(safe-area-inset-bottom));backdrop-filter:blur(12px)}
  .mobile-bar-inner{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .mobile-bar .btn{height:48px}
  .mobile-bar .btn-outline{background:transparent}
  .contact .section-inner{padding-bottom:112px}
  .cursor-dot,.cursor-ring{display:none}
  .visual-strip{grid-template-columns:1fr 1fr;gap:8px}
  .back-to-top{bottom:80px;right:12px;width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquee-track{animation:none}
  .project-card:hover{transform:none}
  .project-card:hover img{transform:none}
}
.mobile-lead{display:none}
@media(max-width:1023px){.desktop-lead{display:none}.mobile-lead{display:block;margin-top:32px}}

/* ========== Enhanced Card Structure & Animations (Omni-inspired) ========== */
.project-card {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.3s ease;
  will-change: transform;
}
.project-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.55), 0 0 0 1px rgba(198,240,74,0.3);
}
.project-card img {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.project-card:hover img {
  transform: scale(1.06);
}
.project-arrow {
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.project-card:hover .project-arrow {
  transform: rotate(45deg);
}

/* Staggered entrance */
.work-grid > div {
  opacity: 0;
  transform: translateY(28px);
  animation: cardIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.work-grid > div:nth-child(1) { animation-delay: 0.05s; }
.work-grid > div:nth-child(2) { animation-delay: 0.12s; }
.work-grid > div:nth-child(3) { animation-delay: 0.19s; }
.work-grid > div:nth-child(4) { animation-delay: 0.26s; }
.work-grid > div:nth-child(5) { animation-delay: 0.33s; }
.work-grid > div:nth-child(6) { animation-delay: 0.4s; }
@keyframes cardIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Service rows - smoother hover */
.service {
  transition: background 0.25s ease, padding-left 0.25s ease;
  border-radius: 12px;
  margin: 0 -12px;
  padding-left: 12px;
  padding-right: 12px;
}
.service:hover {
  background: rgba(244,241,234,0.04);
  padding-left: 16px;
}

/* Process cards hover lift */
.process-card {
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.process-card:hover {
  transform: translateY(-4px);
  border-color: rgba(198,240,74,0.35);
  box-shadow: 0 12px 32px -12px rgba(0,0,0,0.4);
}

/* Skill cards */
.skill-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.skill-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.5);
}

/* Industries section */
.industries { background: #09090b; }
.industries .section-inner { border-top: 1px solid rgb(244 241 234 / 0.12); }
.industries-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 40px;
}
.industry-card {
  border: 1px solid rgb(244 241 234 / 0.1);
  border-radius: 20px;
  background: #111114;
  padding: 22px 20px;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.industry-card:hover {
  transform: translateY(-4px);
  border-color: rgba(198,240,74,0.4);
  box-shadow: 0 12px 28px -12px rgba(0,0,0,0.45);
}
.industry-card h3 {
  font-family: Syne, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.industry-card p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #a39e93;
}

/* Better spacing consistency */
.section-inner { padding-top: 80px; padding-bottom: 80px; }
@media (max-width: 1023px) {
  .industries-grid { grid-template-columns: repeat(2, 1fr); }
  .section-inner { padding-top: 64px; padding-bottom: 64px; }
}
@media (max-width: 639px) {
  .industries-grid { grid-template-columns: 1fr; }
}

/* Soft glow on hero orb */
.hero-orb-a {
  filter: blur(60px);
  animation: orbPulse 8s ease-in-out infinite alternate;
}
.hero-orb-b {
  filter: blur(40px);
  animation: orbPulse 10s ease-in-out infinite alternate-reverse;
}
@keyframes orbPulse {
  from { opacity: 0.7; transform: scale(1); }
  to { opacity: 1; transform: scale(1.08); }
}

/* Nav subtle glass improvement */
.nav {
  transition: background 0.3s ease, box-shadow 0.3s ease;
}


/* ========== Scroll Reveal (section by section) ========== */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--delay, 0s);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Animated SVG icons */
.icon-lg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  fill: none;
}
.icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(198,240,74,0.12);
  color: #c6f04a;
  margin-bottom: 14px;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), background 0.3s;
}
.process-card:hover .icon-wrap,
.skill-card:hover .icon-wrap,
.industry-card:hover .icon-wrap {
  transform: scale(1.08) rotate(-4deg);
  background: rgba(198,240,74,0.22);
}
.icon-float {
  animation: iconFloat 3.5s ease-in-out infinite;
}
@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Process cards with icons */
.process-card .icon-wrap { margin-bottom: 16px; }

/* Soft gradient line under section heads */
.section-head h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 16px;
  border-radius: 2px;
  background: linear-gradient(90deg, #c6f04a, transparent);
}

/* Smoother work grid card entrance override when reveal is active */
.work-grid > div.reveal {
  animation: none;
}

/* Icons on paper (light) sections */
.about .icon-wrap,
.contact .icon-wrap {
  background: rgba(20,19,17,0.08);
  color: #141311;
}
.about .icon-wrap:hover {
  background: rgba(198,240,74,0.35);
  color: #09090b;
}

/* Ensure process numbers still look good with icons */
.process-card .process-num {
  margin-top: 4px;
}

/* Service icon alignment */
.service .icon-wrap {
  margin-bottom: 0;
}

/* Stronger hero entrance */
.hero-inner > * {
  opacity: 0;
  transform: translateY(24px);
  animation: heroIn 0.8s cubic-bezier(0.22,1,0.36,1) forwards;
}
.hero-inner > *:nth-child(1) { animation-delay: 0.1s; }
.hero-inner > *:nth-child(2) { animation-delay: 0.2s; }
.hero-inner > *:nth-child(3) { animation-delay: 0.3s; }
.hero-inner > *:nth-child(4) { animation-delay: 0.4s; }
.hero-inner > *:nth-child(5) { animation-delay: 0.5s; }
.hero-inner > *:nth-child(6) { animation-delay: 0.6s; }
@keyframes heroIn {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-inner > * { opacity: 1; transform: none; animation: none; }
}

/* ========== Stat cards ========== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 48px;
  border-top: none;
  padding-top: 0;
}
.stat-card {
  border-radius: 22px;
  background: #09090b;
  color: #f4f1ea;
  padding: 24px 20px;
  border: 1px solid rgba(244,241,234,0.08);
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease, border-color 0.3s;
}
.stat-card:hover {
  transform: translateY(-6px);
  border-color: rgba(198,240,74,0.35);
  box-shadow: 0 16px 40px -16px rgba(0,0,0,0.5);
}
.stat-card .icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(198,240,74,0.12);
  color: #c6f04a;
  margin-bottom: 16px;
}
.stat-card .stat-num {
  font-family: Syne, sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0;
}
.stat-card .stat-label {
  margin-top: 8px;
  font-size: 0.875rem;
  color: #a39e93;
  line-height: 1.4;
}

/* Skills: glass-style cards on light bg */
.skill-card {
  border: 1px solid rgba(244,241,234,0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.skill-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 36px -12px rgba(0,0,0,0.55);
}

/* Process: numbered timeline feel */
.process-card {
  position: relative;
  overflow: hidden;
}
.process-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #c6f04a, transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.process-card:hover::before { opacity: 1; }

/* Industries: subtle diagonal accent */
.industry-card {
  position: relative;
  overflow: hidden;
}
.industry-card::after {
  content: "";
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(198,240,74,0.06);
  transition: transform 0.4s ease;
}
.industry-card:hover::after {
  transform: scale(1.4);
}

/* Contact form polish */
.contact-form .btn {
  width: 100%;
  margin-top: 8px;
}
.type-btn {
  border: 1px solid rgba(244,241,234,0.12);
  background: #111114;
  color: #a39e93;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 500;
  transition: 0.2s;
}
.type-btn:hover { color: #f4f1ea; border-color: rgba(244,241,234,0.25); }
.type-btn.selected {
  background: #c6f04a;
  color: #09090b;
  border-color: #c6f04a;
}
.types { display: flex; flex-wrap: wrap; gap: 8px; }
.input, .textarea {
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input:focus, .textarea:focus {
  outline: none;
  border-color: rgba(198,240,74,0.5);
  box-shadow: 0 0 0 3px rgba(198,240,74,0.15);
}
.success {
  text-align: center;
  padding: 24px 12px;
}
.success .check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(198,240,74,0.15);
  color: #c6f04a;
  margin-bottom: 16px;
}
.success h3 { margin: 0 0 8px; font-size: 1.25rem; }
.success p { color: #a39e93; margin: 0; }

/* ========== Work page modern layout ========== */
.work-page-head {
  padding-top: 120px;
  padding-bottom: 40px;
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.filter {
  border: 1px solid rgba(244,241,234,0.12);
  background: transparent;
  color: #a39e93;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.8rem;
  font-weight: 500;
  transition: 0.2s;
}
.filter:hover { color: #f4f1ea; border-color: rgba(244,241,234,0.3); }
.filter.selected {
  background: #c6f04a;
  color: #09090b;
  border-color: #c6f04a;
}
.work-page .work-grid {
  gap: 18px;
}
.work-page .project-card {
  min-height: 300px;
  border-radius: 24px;
}
.work-page .project-card.large {
  min-height: 420px;
}
.work-cta {
  margin-top: 64px;
  border-radius: 28px;
  background: linear-gradient(135deg, #111114 0%, #1a1a1f 100%);
  border: 1px solid rgba(244,241,234,0.1);
  padding: 48px 40px;
  text-align: center;
}
.work-cta h2 {
  font-family: Syne, sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin: 0 0 12px;
}
.work-cta p {
  color: #a39e93;
  margin: 0 0 24px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.work-cta .lead-actions {
  justify-content: center;
}

/* Mobile refinements */
@media (max-width: 1023px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat-card .stat-num { font-size: 2.1rem; }
  .work-page-head { padding-top: 100px; }
}
@media (max-width: 639px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 18px 14px; border-radius: 18px; }
  .stat-card .stat-num { font-size: 1.85rem; }
  .stat-card .icon-wrap { width: 36px; height: 36px; border-radius: 10px; margin-bottom: 12px; }
  .work-cta { padding: 32px 20px; margin-top: 48px; }
  .filter { padding: 7px 12px; font-size: 0.75rem; }
  .work-page .project-card { min-height: 280px; }
  .work-page .project-card.large { min-height: 300px; }
  .section-inner { padding-top: 56px; padding-bottom: 56px; }
  .about-grid { gap: 24px; }
  .services-grid { gap: 24px; }
  .contact-grid { gap: 28px; }
  .process-grid { gap: 10px; }
  .skills-grid { gap: 10px; }
  .industries-grid { gap: 10px; }
  .service { padding: 18px 0; gap: 12px; }
  .service h3 { font-size: 1.2rem; }
  .hero-inner { padding-bottom: 88px; }
  .stats-row { gap: 20px; }
}


/* ========== Glass + grassy light refresh ========== */
:root{
  --grass:#8fbc3a;
  --grass-soft:#c5e07a;
  --lime:#c6f04a;
}

.nav-wrap{
  pointer-events:none;
  position:fixed;
  inset:0 0 auto;
  padding:12px 12px;
  z-index:90;
}
.nav-wrap::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(640px,80%);
  height:72px;
  background:radial-gradient(ellipse, rgba(198,240,74,.38), rgba(143,188,58,.18) 45%, transparent 72%);
  filter:blur(16px);
  z-index:0;
  pointer-events:none;
}
.nav{
  pointer-events:auto;
  max-width:1440px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-radius:999px;
  padding:8px 8px 8px 16px;
  position:relative;
  z-index:1;
  overflow:visible;
  background:rgba(9,9,11,.78);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(143,188,58,.65);
  box-shadow:
    0 0 0 1px rgba(198,240,74,.18),
    0 12px 40px -16px rgba(0,0,0,.5);
}
.nav::before{display:none;content:none}
.nav > *{position:relative;z-index:1}
.nav.is-scrolled{
  background:rgba(9,9,11,.88);
  border-color:rgba(198,240,74,.7);
}
.navlinks{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  border:1px solid rgba(198,240,74,.28);
}
.menu-btn{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  border-color:rgba(198,240,74,.35);
}

.hero-orb-a{background:rgb(198 240 74 / .14)}
.hero-orb-b{background:rgb(244 241 234 / .06)}
.hero{background:#09090b}

.project-card{
  background:rgba(17,17,20,.5);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 0 0 1px rgba(198,240,74,.16), 0 18px 40px -20px rgba(0,0,0,.55);
}
.tag{
  background:rgba(9,9,11,.45);
  backdrop-filter:blur(16px);
  border:1px solid rgba(198,240,74,.28);
}
.live-dot{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:#c6f04a;
  background:rgba(198,240,74,.12);
  border:1px solid rgba(198,240,74,.28);
  backdrop-filter:blur(10px);
  padding:4px 10px;border-radius:999px;
}
.live-dot::before{
  content:"";width:6px;height:6px;border-radius:50%;background:#c6f04a;
  animation:livePulse 1.8s ease-out infinite;
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(198,240,74,.45)}
  100%{box-shadow:0 0 0 8px rgba(198,240,74,0)}
}

/* Light glass cards (skills, process, industries, stats) */
.about,.skills,.contact,.faq-page{
  background:#f3f0e8;
  color:#141311;
}
.skill-card,
.stat-card{
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(143,188,58,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 10px 30px -18px rgba(80,100,40,.25);
  color:#141311;
}
.process-card,
.industry-card{
  background:rgba(17,17,20,.55);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.1);
  color:#f4f1ea;
}
.skill-title{color:#4f6f18}
.skill-items{color:#6b675f}
.process-card p,.industry-card p{color:#a39e93}
.stat-card .stat-label{color:#6b675f}
.process-num{color:#c6f04a}
.about .icon-wrap,.skills .icon-wrap,.process.paper .icon-wrap,.industries.paper .icon-wrap,.services.paper .icon-wrap{
  background:rgba(143,188,58,.18);
  color:#3f5a12;
}
.stat-card .icon-wrap{
  background:rgba(143,188,58,.2);
  color:#3f5a12;
}

.services.paper .service{
  border-bottom-color:rgba(20,19,17,.1);
  color:#141311;
}
.services.paper .service p{color:#6b675f}
.services.paper .section-inner{border-top-color:rgba(20,19,17,.1)}
.services.paper .muted{color:#6b675f}
.industries.paper .right-copy,.process.paper .right-copy{color:#6b675f}

.filter{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  border:1px solid rgba(198,240,74,.25);
}

.contact-card{
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,.38);
  backdrop-filter:blur(24px) saturate(170%);
  -webkit-backdrop-filter:blur(24px) saturate(170%);
  border:1px solid rgba(143,188,58,.35);
  color:#141311;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 18px 50px -24px rgba(70,90,30,.35);
}
.contact-card::before{
  content:"";
  position:absolute;inset:-40% -20% auto;
  height:140px;
  background:radial-gradient(ellipse at 50% 0%, rgba(198,240,74,.35), transparent 70%);
  pointer-events:none;
}
.contact-card > *{position:relative;z-index:1}
.contact-card .muted{color:#6b675f}
.contact-card .input,
.contact-card .textarea{
  background:rgba(255,255,255,.55);
  color:#141311;
  border:1px solid rgba(20,19,17,.12);
}
.contact-card .type-btn{
  background:rgba(255,255,255,.4);
  color:#6b675f;
  border:1px solid rgba(20,19,17,.12);
}
.contact-card .type-btn.selected{
  background:#c6f04a;
  color:#09090b;
  border-color:#c6f04a;
}
.contact-card .form-label span,
.contact-card .legend{color:#6b675f}

.work-cta{
  background:rgba(255,255,255,.4);
  backdrop-filter:blur(18px);
  border:1px solid rgba(143,188,58,.28);
  color:#141311;
}
.work-cta p{color:#6b675f}
.faq-page .work-cta .btn-outline{border-color:rgba(20,19,17,.15);color:#141311}

.back-to-top{
  background:rgba(9,9,11,.82);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(198,240,74,.55);
  color:#c6f04a;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.45);
}
.back-to-top .icon{stroke:#c6f04a;color:#c6f04a}
.back-to-top:hover{background:#c6f04a;color:#09090b;border-color:#c6f04a}
.back-to-top:hover .icon{stroke:#09090b;color:#09090b}

.visual-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:48px;
}
.visual-strip .strip-card{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  aspect-ratio:4/3;
  background:#111114;
  border:1px solid rgba(198,240,74,.18);
}
.visual-strip .strip-card img{width:100%;height:100%;object-fit:cover;outline:none}
.visual-strip .strip-card .strip-label{
  position:absolute;left:12px;bottom:12px;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:#f4f1ea;
  background:rgba(9,9,11,.45);
  padding:4px 10px;border-radius:999px;
  backdrop-filter:blur(10px);
  border:1px solid rgba(198,240,74,.25);
}

.faq-list{margin-top:36px;display:flex;flex-direction:column;gap:10px}
.faq-item{
  border-radius:18px;
  background:rgba(255,255,255,.48);
  backdrop-filter:blur(16px);
  border:1px solid rgba(143,188,58,.28);
  padding:4px 18px;
  color:#141311;
}
.faq-item summary{
  cursor:pointer;list-style:none;
  font-family:Syne,sans-serif;
  font-size:1.05rem;font-weight:600;
  letter-spacing:-.02em;
  padding:16px 0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";width:10px;height:10px;flex-shrink:0;
  border-right:2px solid #5d7c1c;
  border-bottom:2px solid #5d7c1c;
  transform:rotate(45deg);
  transition:transform .2s;
}
.faq-item[open] summary::after{transform:rotate(225deg)}
.faq-item p{margin:0 0 16px;color:#6b675f;font-size:.92rem;line-height:1.6;max-width:720px}

.footer{
  background:#09090b;
}
.footer-about{
  margin-top:12px;max-width:420px;font-size:.9rem;line-height:1.6;color:#a39e93;
}
.footer-socials{display:flex;gap:10px;margin-top:18px}
.footer-socials a{
  width:40px;height:40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(198,240,74,.3);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(10px);
  color:#c6f04a;
  transition:.2s;
}
.footer-socials a:hover{background:#c6f04a;color:#09090b;border-color:#c6f04a}
.footer-note{color:#6f6b63}
.drawer{
  background:rgba(18,22,14,.78);
  backdrop-filter:blur(22px) saturate(160%);
  border-left:1px solid rgba(198,240,74,.3);
}

@media(max-width:1023px){
  .visual-strip{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:639px){
  .visual-strip{grid-template-columns:1fr 1fr;gap:8px}
}
@media(prefers-reduced-motion:reduce){
  .live-dot::before{animation:none}
}

/* ========== Flam-like motion, space, thin borders, button hover ========== */
.section-inner{padding-top:120px;padding-bottom:120px}
.hero-inner{padding-top:128px;padding-bottom:120px}
.work-grid{gap:20px;margin-top:56px}
.skills-grid,.process-grid,.industries-grid,.stats-grid{gap:16px}

.hero-grid{
  animation:gridDrift 28s linear infinite;
}
@keyframes gridDrift{
  from{background-position:0 0}
  to{background-position:72px 72px}
}
.hero-mark{animation:markFloat 12s ease-in-out infinite}
@keyframes markFloat{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-14px) rotate(2deg)}
}
.hero-ring{
  position:absolute;right:8%;top:16%;
  width:min(46vw,460px);height:min(46vw,460px);
  border-radius:50%;
  border:1px dashed rgba(198,240,74,.35);
  animation:spin 36s linear infinite;
  pointer-events:none;
}
.hero-ring::after{
  content:"";
  position:absolute;left:50%;top:-6px;
  width:12px;height:12px;margin-left:-6px;
  border-radius:50%;background:#c6f04a;
  box-shadow:0 0 16px #c6f04a;
}
@keyframes spin{to{transform:rotate(360deg)}}

.marquee-track{animation-duration:42s}

.project-card,
.skill-card,
.process-card,
.industry-card,
.stat-card,
.contact-card,
.faq-item,
.work-cta,
.filter,
.service{
  border:1px solid rgba(198,240,74,.22);
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .25s ease;
}
.skill-card,.stat-card,.faq-item,.contact-card{
  border:1px solid rgba(90,120,40,.28);
}
.project-card{overflow:hidden}
.project-card::after{
  content:"";
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(198,240,74,.16) 50%,transparent 65%);
  transform:translateX(-120%);
}
.project-card:hover::after{animation:cardShine .85s ease}
@keyframes cardShine{
  to{transform:translateX(120%)}
}
.project-card:hover,
.process-card:hover,
.industry-card:hover,
.skill-card:hover,
.stat-card:hover{
  transform:translateY(-8px);
  border-color:rgba(198,240,74,.65);
  box-shadow:0 20px 48px -20px rgba(0,0,0,.45), 0 0 0 1px rgba(198,240,74,.2);
}

.btn{
  position:relative;
  overflow:hidden;
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease, filter .25s;
}
.btn-lime:hover{
  filter:none;
  transform:translateY(-3px);
  box-shadow:0 12px 32px -10px rgba(198,240,74,.7);
}
.btn-outline:hover,
.btn-outline-dark:hover{
  filter:none;
  transform:translateY(-3px);
  background:#c6f04a;
  color:#09090b;
  border-color:#c6f04a;
  box-shadow:0 12px 32px -12px rgba(198,240,74,.55);
}
.btn-light:hover{
  filter:none;
  transform:translateY(-3px);
  box-shadow:0 12px 28px -12px rgba(0,0,0,.35);
}
.btn:active{transform:scale(.97) translateY(0)}
.whatsapp-top:hover{transform:translateY(-2px)}
.footer-socials a:hover{transform:translateY(-3px) rotate(6deg)}
.navlinks a{transition:background .2s,color .2s,transform .2s}
.navlinks a:hover{transform:translateY(-1px);color:#c6f04a}

.see-work{transition:color .2s, gap .2s, transform .2s}
.see-work:hover{gap:10px;transform:translateX(4px)}

@media(max-width:639px){
  .section-inner{padding-top:72px;padding-bottom:72px}
  .hero-ring{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-grid,.hero-mark,.hero-ring,.marquee-track,.project-card::after{animation:none}
  .project-card:hover,.skill-card:hover,.process-card:hover,.industry-card:hover,.stat-card:hover,.btn:hover{transform:none}
}