:root{
  --navy:#0b1220;
  --navy-2:#13213f;
  --blue:#2563eb;
  --blue-light:#3b82f6;
  --blue-deep:#1d4ed8;
  --sky:#e8f0ff;
  --black:#0b1220;
  --gray:#566075;
  --line:#e6ebf3;
  --white:#ffffff;
  --bg:#f4f7fc;
  --grad:linear-gradient(135deg,#2563eb,#1e40af);
  --shadow:0 10px 30px rgba(15,28,60,.08);
  --shadow-lg:0 24px 60px rgba(15,28,60,.18);
  --shadow-blue:0 18px 40px rgba(37,99,235,.28);
  --radius:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(1180px,92%);margin:0 auto}
section{padding:80px 0}
body{font-family:'Plus Jakarta Sans',system-ui,Segoe UI,Roboto,sans-serif;color:var(--black);background:var(--bg);line-height:1.7;letter-spacing:-.01em}
h1,h2,h3,h4{font-family:'Sora',sans-serif;color:var(--navy);line-height:1.18;letter-spacing:-.02em;font-weight:700}
h2.title{font-size:clamp(1.8rem,3.5vw,2.6rem);text-align:center}
.sub{text-align:center;color:var(--gray);max-width:640px;margin:14px auto 50px}
.accent{color:var(--blue)}
.eyebrow{display:inline-block;color:var(--blue);font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:.78rem;margin-bottom:12px}

/* buttons */
.btn{display:inline-block;padding:13px 28px;border-radius:50px;font-weight:600;transition:.3s;cursor:pointer;border:none;font-size:.95rem}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue-light));color:#fff;box-shadow:0 8px 20px rgba(29,111,224,.3)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(29,111,224,.45)}
.btn-ghost{background:transparent;color:var(--navy);border:2px solid var(--line)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}

/* navbar */
header.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:.3s}
header.nav.scrolled{box-shadow:var(--shadow)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo{display:flex;align-items:center;gap:10px;font-family:'Sora';font-weight:700;font-size:1.25rem;color:var(--navy)}
.logo img{height:42px;width:auto}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none}
.nav-links a{font-weight:500;color:var(--navy);position:relative;padding:4px 0}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--blue);transition:.3s}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a.active{color:var(--blue)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer}
.burger span{width:26px;height:3px;background:var(--navy);border-radius:3px;transition:.3s}

/* hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(1100px 520px at 78% 12%,#dfeaff 0%,transparent 60%),linear-gradient(165deg,#ffffff 0%,#eef4ff 100%);padding:64px 0 84px}
.hero::before{content:'';position:absolute;top:-120px;right:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.18),transparent 70%);filter:blur(10px)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:24px;align-items:center}
.hero h1{font-size:clamp(2.1rem,4.5vw,3.4rem)}
.hero .tag{color:var(--blue);font-weight:600;letter-spacing:1px;margin-bottom:16px}
.hero p{color:var(--gray);margin:20px 0 30px;font-size:1.08rem}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap}
.hero-media{position:relative}
.hero-img{border-radius:24px;box-shadow:var(--shadow-lg);animation:float 5s ease-in-out infinite;position:relative;z-index:1}
.hero-media .glow{position:absolute;inset:auto -18px -18px auto;width:180px;height:180px;background:var(--grad);filter:blur(50px);opacity:.35;border-radius:50%;z-index:0}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* cards grid */
.grid{display:grid;gap:26px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px;transition:.35s cubic-bezier(.2,.7,.3,1);overflow:hidden}
.card::after{content:'';position:absolute;left:0;top:0;height:4px;width:100%;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:.4s}
.card:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg);border-color:transparent}
.card:hover::after{transform:scaleX(1)}
.card .icon{width:60px;height:60px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--sky),#d6e7fb);color:var(--blue);font-size:1.55rem;margin-bottom:18px;transition:.35s}
.card:hover .icon{background:var(--grad);color:#fff;transform:rotate(-6deg) scale(1.05);box-shadow:var(--shadow-blue)}
.card h3{font-size:1.2rem;margin-bottom:10px}
.card p{color:var(--gray);font-size:.95rem}

/* stats */
.stats{background:var(--navy);color:#fff}
.stats .grid-4{gap:20px}
.stat{text-align:center;padding:20px}
.stat .num{font-family:'Sora';font-size:2.6rem;font-weight:700;color:var(--blue-light)}
.stat .lbl{color:#aebfdb;letter-spacing:.5px;margin-top:6px}

/* why choose / list */
.feature-line{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.feature-line .dot{flex:none;width:26px;height:26px;border-radius:50%;background:var(--sky);color:var(--blue);display:grid;place-items:center;font-size:.8rem;font-weight:700;margin-top:3px}

/* process */
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;counter-reset:step}
.step{text-align:center;position:relative}
.step .circle{width:62px;height:62px;border-radius:50%;margin:0 auto 14px;background:#fff;border:2px solid var(--line);display:grid;place-items:center;font-family:'Sora';font-weight:700;color:var(--blue);font-size:1.3rem;transition:.3s}
.step:hover .circle{background:var(--blue);color:#fff;border-color:var(--blue);transform:scale(1.08)}
.step h4{font-size:.95rem;color:var(--navy)}

/* portfolio */
.port-card{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#fff;transition:.35s}
.port-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.port-thumb{height:180px;background:linear-gradient(135deg,var(--navy),var(--blue));display:grid;place-items:center;color:#fff;font-family:'Sora';font-size:1.4rem;letter-spacing:1px}
.port-body{padding:22px}
.port-body h3{font-size:1.15rem;margin-bottom:8px}
.port-body p{color:var(--gray);font-size:.9rem;margin-bottom:14px}

/* team — polished feedback-style cards */
.team-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-align:center;transition:.4s cubic-bezier(.2,.7,.3,1);box-shadow:var(--shadow);position:relative}
.team-card::before{content:'';position:absolute;left:0;top:0;width:100%;height:4px;transition:.4s}
.team-card:hover{transform:translateY(-12px);box-shadow:var(--shadow-lg)}
.team-card .photo-wrap{padding:28px 28px 0}
.team-card .photo{height:220px;border-radius:18px;overflow:hidden;position:relative}
.team-card .photo img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:.5s}
.team-card:hover .photo img{transform:scale(1.08)}
.team-card .photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(11,18,32,.25))}
.team-card .info{padding:22px 26px 26px}
.team-card .info h3{font-size:1.2rem;margin-bottom:6px}
.team-card .role{display:inline-block;background:var(--sky);color:var(--blue);font-weight:600;font-size:.82rem;padding:6px 14px;border-radius:50px;margin-bottom:14px}
.team-card .socials{justify-content:center;gap:10px}
.team-card .socials a{width:36px;height:36px;border-radius:50%;background:var(--bg);color:var(--gray);display:grid;place-items:center;font-size:.92rem;transition:.3s}
.team-card .socials a:hover{background:var(--blue);color:#fff;transform:translateY(-3px)}
.team-card .photo.avatar{background:linear-gradient(135deg,var(--sky),#d6e7fb);display:grid;place-items:center}
.team-card .photo.avatar i{font-size:5rem;color:var(--blue)}

/* testimonials */
.quote{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px 30px;transition:.35s;box-shadow:var(--shadow)}
.quote::before{content:'\201C';position:absolute;top:6px;right:22px;font-family:'Sora';font-size:5rem;line-height:1;color:var(--blue);opacity:.14}
.quote:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:transparent}
.stars{color:#f5b301;margin-bottom:12px;letter-spacing:2px}
.quote p{color:var(--navy);font-style:italic;margin-bottom:20px;font-size:1.02rem}
.quote .who{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--navy)}
.quote .who .av{width:42px;height:42px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-family:'Sora';font-weight:700;font-size:1rem;flex:none}

/* faq */
.faq-item{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:14px;overflow:hidden}
.faq-q{padding:20px 24px;font-weight:600;color:var(--navy);cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.faq-q .plus{color:var(--blue);font-size:1.4rem;transition:.3s}
.faq-item.open .plus{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;padding:0 24px;color:var(--gray)}
.faq-item.open .faq-a{max-height:200px;padding:0 24px 22px}

/* cta */
.cta{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;text-align:center;border-radius:24px;padding:60px 30px;margin:0 auto;width:min(1100px,92%)}
.cta h2{color:#fff}
.cta p{color:#cdddf6;margin:14px auto 26px;max-width:560px}
.cta .btn-primary{background:#fff;color:var(--blue)}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:start}
.info-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;gap:16px;align-items:center;margin-bottom:16px;transition:.3s}
.info-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.info-card .ic{flex:none;width:50px;height:50px;border-radius:12px;background:var(--sky);color:var(--blue);display:grid;place-items:center;font-size:1.2rem}
.info-card h4{color:var(--navy);font-size:1rem}
.info-card p,.info-card a{color:var(--gray);font-size:.92rem}
form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;color:var(--navy);margin-bottom:7px;font-size:.9rem}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-family:inherit;font-size:.95rem;transition:.25s;background:var(--bg)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(29,111,224,.12)}
.form-msg{display:none;background:#e7f7ec;color:#1d7a3f;border:1px solid #b6e6c5;padding:14px;border-radius:10px;margin-bottom:18px;font-weight:600}
.form-msg.show{display:block}
.map-wrap{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);margin-top:40px}
.map-wrap iframe{width:100%;height:380px;border:0;display:block}

/* page header */
.page-head{background:linear-gradient(160deg,var(--navy),var(--blue));color:#fff;padding:70px 0;text-align:center}
.page-head h1{color:#fff;font-size:clamp(2rem,4vw,3rem)}
.page-head p{color:#cdddf6;margin-top:10px}

/* footer */
footer{background:var(--navy);color:#c4d2ec;padding:60px 0 24px;margin-top:40px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:40px}
footer h4{color:#fff;margin-bottom:18px;font-size:1.05rem}
footer .logo{color:#fff;margin-bottom:16px}
footer a{color:#c4d2ec;transition:.25s}
footer a:hover{color:var(--blue-light);padding-left:4px}
footer ul{list-style:none}
footer li{margin-bottom:10px}
.socials{display:flex;gap:12px;margin-top:8px}
.socials a{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;transition:.3s}
.socials a:hover{background:var(--blue);transform:translateY(-4px)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;text-align:center;font-size:.88rem;color:#9fb2d4}

/* floating whatsapp + top */
.fab{position:fixed;right:22px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#fff;z-index:99;box-shadow:var(--shadow-lg);transition:.3s}
.fab:hover{transform:scale(1.1)}
.wa{bottom:24px;background:#25d366;font-size:1.7rem}
.top{bottom:90px;background:var(--blue);font-size:1.3rem;opacity:0;pointer-events:none}
.top.show{opacity:1;pointer-events:auto}

/* cookie */
.cookie{position:fixed;left:22px;bottom:24px;max-width:340px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-lg);border-radius:14px;padding:20px;z-index:120;font-size:.9rem;color:var(--gray)}
.cookie.hide{display:none}
.cookie b{color:var(--navy)}
.cookie .row{display:flex;gap:10px;margin-top:14px}
.cookie .btn{padding:8px 18px;font-size:.85rem}

/* reveal animation */
.reveal{opacity:0;transform:translateY(40px);transition:.7s cubic-bezier(.2,.7,.3,1)}
.reveal.visible{opacity:1;transform:none}

/* tech logos */
.tech{display:flex;flex-wrap:wrap;justify-content:center;gap:40px;align-items:center}
.tech span{font-family:'Sora';font-weight:700;color:var(--gray);font-size:1.3rem;opacity:.7;transition:.3s}
.tech span:hover{opacity:1;color:var(--blue);transform:translateY(-4px)}

@media(max-width:900px){
  .hero-grid,.contact-grid{grid-template-columns:1fr}
  .hero-img{order:-1;max-width:480px;margin:0 auto}
  .grid-3,.grid-4,.grid-2{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links{position:fixed;top:66px;right:0;flex-direction:column;background:#fff;width:240px;height:calc(100vh - 66px);padding:30px;transform:translateX(100%);transition:.35s;box-shadow:var(--shadow-lg);gap:22px;align-items:flex-start}
  .nav-links.open{transform:translateX(0)}
  .burger{display:flex}
}
@media(max-width:560px){
  .grid-3,.grid-4,.grid-2,.steps,.foot-grid{grid-template-columns:1fr}
  section{padding:56px 0}
}

/* ===== enhancements ===== */
.hero h1{font-weight:800}
.hero-img{aspect-ratio:5/4;width:100%;height:auto;max-height:440px;object-fit:cover;background:#fff}

/* service card with image header */
.card.media{padding:0;overflow:hidden}
.card.media .thumb{height:180px;overflow:hidden;position:relative}
.card.media .thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(11,18,32,.45))}
.card.media .thumb img{width:100%;height:100%;object-fit:cover;transition:.6s}
.card.media:hover .thumb img{transform:scale(1.09)}
.card.media .thumb .icon{position:absolute;left:18px;bottom:18px;margin:0;z-index:2;width:54px;height:54px;font-size:1.4rem;background:rgba(255,255,255,.92);backdrop-filter:blur(4px);box-shadow:var(--shadow);color:var(--blue)}
.card.media:hover .thumb .icon{background:var(--grad);color:#fff;transform:scale(1.06)}
.card.media .body{padding:24px 26px 30px}
.card.media .body h3{font-size:1.18rem;margin-bottom:10px}
.card.media .body p{color:var(--gray);font-size:.95rem}

/* about split section */
.split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.split .media-frame{border-radius:24px;overflow:hidden;box-shadow:var(--shadow-lg);position:relative}
.split .media-frame img{width:100%;aspect-ratio:4/3;object-fit:cover}
.media-frame.contain{background:#f4f8ff}
.media-frame.contain img{aspect-ratio:1/1;object-fit:contain;padding:26px}
.split .badge{position:absolute;left:20px;bottom:20px;background:#fff;border-radius:14px;padding:14px 20px;box-shadow:var(--shadow);display:flex;align-items:center;gap:12px}
.split .badge i{color:var(--blue);font-size:1.6rem}
.split .badge b{font-family:'Sora';color:var(--navy);font-size:1.3rem;display:block}
.split .badge span{color:var(--gray);font-size:.82rem}
.split h2{font-size:clamp(1.7rem,3.2vw,2.4rem);text-align:left}
.split .sub{text-align:left;margin:16px 0 24px}

/* portfolio image thumb */
.port-thumb.img{height:210px;padding:0;display:block}
.port-thumb.img img{width:100%;height:100%;object-fit:cover;transition:.5s}
.port-card:hover .port-thumb.img img{transform:scale(1.06)}

/* avatar icon for dummy profile */
.team-card .photo.avatar{display:grid;place-items:center;background:linear-gradient(135deg,var(--sky),#d6e7fb)}
.team-card .photo.avatar i{font-size:5.5rem;color:var(--blue)}

/* nicer eyebrow on home sections */
.center-eyebrow{display:block;text-align:center;color:var(--blue);font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:.78rem;margin-bottom:8px}

@media(max-width:900px){
  .split{grid-template-columns:1fr;gap:34px}
  .split .media-frame{order:-1}
}

/* ===== moving marquee (right -> left) ===== */
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:24px;width:max-content;animation:scroll-left 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee .quote{width:380px;flex:none;white-space:normal}
@keyframes scroll-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* tech logos marquee */
.tech.marquee-track{animation:scroll-left 28s linear infinite}

/* directional reveals */
.reveal-left{opacity:0;transform:translateX(-60px);transition:.8s cubic-bezier(.2,.7,.3,1)}
.reveal-right{opacity:0;transform:translateX(60px);transition:.8s cubic-bezier(.2,.7,.3,1)}
.reveal-left.visible,.reveal-right.visible{opacity:1;transform:none}

/* home team strip */
.team-grid-home{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

@media(max-width:900px){
  .marquee .quote{width:300px}
  .team-grid-home{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .team-grid-home{grid-template-columns:1fr}
  .hero-grid{gap:18px}
}

/* ===================================================================
   v4 — richer multi-color theme (white / blue / green / black / yellow / red)
   + static testimonials grid + inline svg social icons
=================================================================== */
:root{
  --green:#16a34a;
  --green-light:#22c55e;
  --yellow:#f59e0b;
  --yellow-light:#fbbf24;
  --red:#ef4444;
  --red-deep:#dc2626;
}
body{background:var(--bg)}

/* warmer, less washed-out section rhythm */
section:nth-of-type(even){background:linear-gradient(180deg,#ffffff,#f1f6ff)}
.hero{background:radial-gradient(1100px 520px at 80% 10%,#dbe7ff 0%,transparent 60%),linear-gradient(160deg,#ffffff 0%,#e9f1ff 60%,#eafff2 100%)}

/* colorful accent eyebrows */
.eyebrow,.center-eyebrow{
  background:linear-gradient(90deg,var(--blue),var(--green));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* svg social icons */
.socials a svg{width:18px;height:18px}
.socials a{color:#fff}
.socials a:nth-child(1):hover{background:#0a66c2;transform:translateY(-4px)}
.socials a:nth-child(2):hover{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#bc1888);transform:translateY(-4px)}
.socials a:nth-child(3):hover{background:#1877f2;transform:translateY(-4px)}
.fab.wa svg{width:30px;height:30px}
.fab.wa{display:grid;place-items:center}

/* multi-color service card icons */
.grid-3 .card.media:nth-child(1) .thumb .icon{color:var(--blue)}
.grid-3 .card.media:nth-child(2) .thumb .icon{color:var(--green)}
.grid-3 .card.media:nth-child(3) .thumb .icon{color:var(--red)}
.grid-3 .card.media:nth-child(4) .thumb .icon{color:var(--yellow)}
.grid-3 .card.media:nth-child(5) .thumb .icon{color:#7c3aed}
.grid-3 .card.media:nth-child(6) .thumb .icon{color:var(--blue-deep)}

/* colorful stat accents */
.stat:nth-child(1) .num{color:var(--blue-light)}
.stat:nth-child(2) .num{color:var(--green-light)}
.stat:nth-child(3) .num{color:var(--yellow-light)}
.stat:nth-child(4) .num{color:#fb7185}

/* green check feature dots */
.feature-line .dot{background:rgba(22,163,74,.12);color:var(--green)}

/* card top bar gets a vivid tri-color gradient */
.card::after{background:linear-gradient(90deg,var(--blue),var(--green),var(--yellow))}

/* CTA more vibrant */
.cta{background:linear-gradient(135deg,#0b1220,#1d4ed8 60%,#16a34a)}

/* ===== static testimonials grid ===== */
.testi-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:stretch}
.testi-grid .quote{height:100%}
.quote .who .av.c1{background:linear-gradient(135deg,#2563eb,#1d4ed8)}
.quote .who .av.c2{background:linear-gradient(135deg,#16a34a,#22c55e)}
.quote .who .av.c3{background:linear-gradient(135deg,#ef4444,#dc2626)}
.quote .who .av.c4{background:linear-gradient(135deg,#f59e0b,#fbbf24)}
.quote .stars{color:var(--yellow)}
.quote{border-top:3px solid transparent}
.testi-grid .quote:nth-child(1){border-top-color:var(--blue)}
.testi-grid .quote:nth-child(2){border-top-color:var(--green)}
.testi-grid .quote:nth-child(3){border-top-color:var(--red)}
.testi-grid .quote:nth-child(4){border-top-color:var(--yellow)}

/* buttons keep blue->green pop on ghost hover */
.btn-ghost:hover{border-color:var(--green);color:var(--green)}

/* ===== colorful team card top accents (feedback-style) ===== */
.team-grid-home .team-card:nth-child(1)::before,
.grid-4 .team-card:nth-child(1)::before{background:var(--green)}
.team-grid-home .team-card:nth-child(2)::before,
.grid-4 .team-card:nth-child(2)::before{background:var(--red)}
.team-grid-home .team-card:nth-child(3)::before,
.grid-4 .team-card:nth-child(3)::before{background:#f97316}
.team-grid-home .team-card:nth-child(4)::before,
.grid-4 .team-card:nth-child(4)::before{background:var(--blue)}
.team-grid-home .team-card:nth-child(1):hover,
.grid-4 .team-card:nth-child(1):hover{border-color:rgba(22,163,74,.35)}
.team-grid-home .team-card:nth-child(2):hover,
.grid-4 .team-card:nth-child(2):hover{border-color:rgba(239,68,68,.35)}
.team-grid-home .team-card:nth-child(3):hover,
.grid-4 .team-card:nth-child(3):hover{border-color:rgba(249,115,22,.35)}
.team-grid-home .team-card:nth-child(4):hover,
.grid-4 .team-card:nth-child(4):hover{border-color:rgba(37,99,235,.35)}

/* ===================================================================
   v5 — 3D-feel redesign: animated depth, moving team carousel,
   full responsive overhaul
=================================================================== */

/* prevent any decorative element from creating horizontal scroll */
html,body{overflow-x:hidden;width:100%}

/* respect reduced motion everywhere */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ---------- ambient floating depth (blobs) ---------- */
@keyframes blob-drift-a{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(26px,-22px,0) scale(1.08)}}
@keyframes blob-drift-b{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-24px,20px,0) scale(1.1)}}
@keyframes spin-slow{to{transform:rotate(360deg)}}
@keyframes pulse-soft{0%,100%{opacity:.55}50%{opacity:1}}

.hero{isolation:isolate}
.hero::after{content:'';position:absolute;bottom:-90px;left:-70px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(22,163,74,.16),transparent 70%);filter:blur(16px);animation:blob-drift-b 13s ease-in-out infinite;z-index:0}
.hero-grid{z-index:1}

.page-head{position:relative;overflow:hidden;isolation:isolate}
.page-head::before{content:'';position:absolute;top:-110px;right:-60px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.2),transparent 70%);filter:blur(6px);animation:blob-drift-a 12s ease-in-out infinite}
.page-head::after{content:'';position:absolute;bottom:-130px;left:8%;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(34,197,94,.28),transparent 70%);filter:blur(10px);animation:blob-drift-b 16s ease-in-out infinite}
.page-head h1,.page-head p{position:relative;z-index:1}

.cta{position:relative;overflow:hidden;isolation:isolate}
.cta::before{content:'';position:absolute;top:-70px;right:-50px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%);filter:blur(8px);animation:blob-drift-a 11s ease-in-out infinite}
.cta::after{content:'';position:absolute;bottom:-90px;left:-40px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(34,197,94,.22),transparent 70%);filter:blur(8px);animation:blob-drift-b 15s ease-in-out infinite}
.cta h2,.cta p,.cta .btn{position:relative;z-index:1}

/* soft floating dot-grid accent behind hero media for extra depth */
.hero-media{isolation:isolate}
.hero-media::before{content:'';position:absolute;top:-24px;left:-24px;width:120px;height:120px;background-image:radial-gradient(circle,rgba(37,99,235,.35) 1.6px,transparent 1.6px);background-size:14px 14px;opacity:.7;animation:pulse-soft 4s ease-in-out infinite;z-index:0}

/* ---------- 3D tilt-ready cards (JS adds inline transform on pointermove) ---------- */
.card,.card.media,.port-card,.quote,.team-card,.team-card-mini,.info-card{will-change:transform}
.card,.port-card,.info-card{transform-style:preserve-3d}

/* ---------- section rhythm: keep AOS but faster settle for snappier feel ---------- */
.reveal{transition:.6s cubic-bezier(.2,.7,.3,1)}

/* ===================================================================
   Team carousel — small round photos, moving right -> left
=================================================================== */
.team-marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);padding:8px 0 4px}
.team-track{display:flex;gap:26px;width:max-content;animation:scroll-left 34s linear infinite}
.team-marquee:hover .team-track{animation-play-state:paused}

.team-card-mini{flex:none;width:188px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 16px 22px;text-align:center;box-shadow:var(--shadow);transition:.35s cubic-bezier(.2,.7,.3,1);position:relative}
.team-card-mini::before{content:'';position:absolute;left:0;top:0;width:100%;height:4px;border-radius:20px 20px 0 0;background:var(--grad);opacity:0;transition:.3s}
.team-card-mini:hover{transform:translateY(-10px) scale(1.035);box-shadow:var(--shadow-lg);border-color:transparent}
.team-card-mini:hover::before{opacity:1}

.tm-ring{width:96px;height:96px;border-radius:50%;margin:0 auto 16px;position:relative;display:grid;place-items:center;isolation:isolate}
.tm-ring::before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,var(--blue),var(--green),var(--yellow),var(--red),var(--blue));animation:spin-slow 7s linear infinite;z-index:0}
.tm-photo{width:calc(100% - 6px);height:calc(100% - 6px);border-radius:50%;overflow:hidden;background:#fff;border:3px solid #fff;position:relative;z-index:1}
.tm-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.tm-photo svg{width:100%;height:100%;display:block}

.team-card-mini h3{font-size:1rem;margin-bottom:4px;line-height:1.3}
.team-card-mini .role{display:inline-block;background:var(--sky);color:var(--blue);font-weight:600;font-size:.72rem;padding:5px 12px;border-radius:50px;margin-bottom:12px;letter-spacing:.2px}
.team-card-mini .socials{justify-content:center;gap:8px;margin-top:0}
.team-card-mini .socials a{width:30px;height:30px}
.team-card-mini .socials a svg{width:14px;height:14px}

/* colorful ring accents cycling per card */
.team-card-mini:nth-child(6n+1) .role{background:rgba(37,99,235,.12);color:var(--blue)}
.team-card-mini:nth-child(6n+2) .role{background:rgba(22,163,74,.12);color:var(--green)}
.team-card-mini:nth-child(6n+3) .role{background:rgba(245,158,11,.14);color:#b45309}
.team-card-mini:nth-child(6n+4) .role{background:rgba(239,68,68,.12);color:var(--red-deep)}
.team-card-mini:nth-child(6n+5) .role{background:rgba(124,58,237,.12);color:#7c3aed}
.team-card-mini:nth-child(6n+6) .role{background:rgba(29,111,224,.12);color:var(--blue-deep)}

@media(max-width:560px){
  .team-card-mini{width:158px;padding:20px 12px 18px}
  .tm-ring{width:80px;height:80px}
}

/* ===================================================================
   Full responsive overhaul — extra breakpoints & fixes
=================================================================== */
@media(max-width:1100px){
  .grid-4{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1024px){
  .container{width:min(1180px,94%)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .foot-grid{gap:28px}
}
@media(max-width:700px){
  .hero{padding:44px 0 60px}
  section{padding:60px 0}
  .steps{grid-template-columns:repeat(2,1fr);gap:22px}
  .nav-inner{padding:10px 0}
  .logo{font-size:1.08rem}
  .logo img{height:36px}
  .hero-btns{gap:12px}
  .hero-btns .btn{flex:1;text-align:center;padding:13px 18px}
}
@media(max-width:640px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .cta{padding:44px 22px;border-radius:18px}
}
@media(max-width:480px){
  h2.title{font-size:clamp(1.5rem,7vw,2rem)}
  .grid-3,.grid-4,.grid-2{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr;text-align:left;gap:30px}
  .contact-grid{gap:26px}
  form{padding:22px}
  .info-card{padding:18px;gap:12px}
  .page-head{padding:52px 0}
  .cookie{left:14px;right:14px;max-width:none;bottom:16px}
  .fab{width:50px;height:50px;right:16px}
  .wa{bottom:18px}
  .top{bottom:78px}
  .card{padding:26px 20px}
  .quote{padding:26px 22px 22px}
  .marquee .quote{width:88vw;max-width:340px}
}
@media(max-width:380px){
  .hero h1{font-size:1.7rem}
  .team-card-mini{width:142px}
}

/* prevent any wide element from overflowing on small screens */
img,svg,video{max-width:100%;height:auto}
.tm-photo img,.tm-photo svg{height:100%}
table{max-width:100%}

/* ===================================================================
   v6 — bold, funky animated backgrounds behind every section
   (rotates: big floating bubbles / rainbow color-line sweep / hue-shifting blobs)
=================================================================== */
section{position:relative;overflow:hidden}
section::before,section::after{pointer-events:none}

/* ---- variant A: big floating bubbles, rise + sway, funky and clearly visible ---- */
@keyframes bubble-rise{
  0%{transform:translateY(0) translateX(0) scale(1);opacity:0}
  10%{opacity:1}
  50%{transform:translateY(-280px) translateX(18px) scale(1.12)}
  90%{opacity:.85}
  100%{transform:translateY(-580px) translateX(-14px) scale(1.28);opacity:0}
}
section:not(.hero):not(.page-head):not(.cta):not(.stats):nth-of-type(3n+1)::before{
  content:'';position:absolute;left:0;right:0;bottom:-60px;height:calc(100% + 120px);
  background-image:
    radial-gradient(circle, rgba(37,99,235,.55) 0 45%, transparent 72%),
    radial-gradient(circle, rgba(22,163,74,.5) 0 45%, transparent 72%),
    radial-gradient(circle, rgba(245,158,11,.55) 0 45%, transparent 72%),
    radial-gradient(circle, rgba(239,68,68,.48) 0 45%, transparent 72%),
    radial-gradient(circle, rgba(124,58,237,.48) 0 45%, transparent 72%),
    radial-gradient(circle, rgba(37,99,235,.4) 0 45%, transparent 72%),
    radial-gradient(circle, rgba(236,72,153,.42) 0 45%, transparent 72%);
  background-repeat:no-repeat;
  background-size:70px 70px,46px 46px,90px 90px,38px 38px,60px 60px,32px 32px,54px 54px;
  background-position:6% 100%,20% 100%,34% 100%,50% 100%,64% 100%,80% 100%,93% 100%;
  filter:blur(1px);
  animation:bubble-rise 11s ease-in infinite;
  z-index:-1;
}
section:not(.hero):not(.page-head):not(.cta):not(.stats):nth-of-type(3n+1)::after{
  content:'';position:absolute;left:0;right:0;bottom:-60px;height:calc(100% + 120px);
  background-image:
    radial-gradient(circle, rgba(22,163,74,.4) 0 45%, transparent 72%),
    radial-gradient(circle, rgba(37,99,235,.42) 0 45%, transparent 72%),
    radial-gradient(circle, rgba(245,158,11,.4) 0 45%, transparent 72%),
    radial-gradient(circle, rgba(236,72,153,.36) 0 45%, transparent 72%);
  background-repeat:no-repeat;
  background-size:48px 48px,30px 30px,42px 42px,26px 26px;
  background-position:13% 100%,44% 100%,68% 100%,88% 100%;
  filter:blur(1px);
  animation:bubble-rise 15s ease-in infinite 3.5s;
  z-index:-1;
}

/* ---- variant B: flowing rainbow color-line sweep, clearly animated ---- */
@keyframes line-flow{
  0%{background-position:0% 50%}
  100%{background-position:300% 50%}
}
section:not(.hero):not(.page-head):not(.cta):not(.stats):nth-of-type(3n+2)::before{
  content:'';position:absolute;inset:-40% -20%;
  background:repeating-linear-gradient(105deg,
    rgba(37,99,235,.28) 0 60px,
    rgba(22,163,74,.26) 60px 120px,
    rgba(245,158,11,.28) 120px 180px,
    rgba(239,68,68,.24) 180px 240px,
    rgba(124,58,237,.24) 240px 300px,
    transparent 300px 360px);
  background-size:220% 220%;
  animation:line-flow 9s linear infinite;
  z-index:-1;
}
section:not(.hero):not(.page-head):not(.cta):not(.stats):nth-of-type(3n+2)::after{
  content:'';position:absolute;inset:-40% -20%;
  background:repeating-linear-gradient(-70deg,
    rgba(236,72,153,.2) 0 40px,
    transparent 40px 100px,
    rgba(37,99,235,.18) 100px 140px,
    transparent 140px 200px);
  background-size:220% 220%;
  animation:line-flow 13s linear infinite reverse;
  z-index:-1;
}

/* ---- variant C: hue-shifting funky blobs ---- */
@keyframes hue-spin{0%{filter:blur(10px) hue-rotate(0deg) saturate(1.4)}100%{filter:blur(10px) hue-rotate(360deg) saturate(1.4)}}
section:not(.hero):not(.page-head):not(.cta):not(.stats):nth-of-type(3n+3)::before{
  content:'';position:absolute;top:-18%;left:-10%;width:56%;padding-bottom:56%;border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,235,.4),rgba(124,58,237,.3) 55%,transparent 75%);
  animation:blob-drift-a 9s ease-in-out infinite, hue-spin 8s linear infinite;z-index:-1;
}
section:not(.hero):not(.page-head):not(.cta):not(.stats):nth-of-type(3n+3)::after{
  content:'';position:absolute;bottom:-20%;right:-10%;width:50%;padding-bottom:50%;border-radius:50%;
  background:radial-gradient(circle,rgba(22,163,74,.4),rgba(245,158,11,.3) 55%,transparent 75%);
  animation:blob-drift-b 11s ease-in-out infinite, hue-spin 10s linear infinite reverse;z-index:-1;
}

/* keep real content above the ambient decoration */
section>.container,section>.cta,section>.steps{position:relative;z-index:1}

/* sections that already define their own bespoke decoration keep it
   (class selectors below simply win over the generic nth-of-type rules) */
.hero::before,.hero::after,
.page-head::before,.page-head::after,
.cta::before,.cta::after{z-index:0}

/* dark navy sections need lighter, glowier bubbles/lines to stay visible */
.stats::before{
  content:'';position:absolute;left:0;right:0;bottom:-60px;height:calc(100% + 120px);
  background-image:
    radial-gradient(circle, rgba(59,130,246,.65) 0 45%, transparent 72%),
    radial-gradient(circle, rgba(34,197,94,.6) 0 45%, transparent 72%),
    radial-gradient(circle, rgba(251,191,36,.6) 0 45%, transparent 72%),
    radial-gradient(circle, rgba(236,72,153,.5) 0 45%, transparent 72%),
    radial-gradient(circle, rgba(255,255,255,.3) 0 45%, transparent 72%);
  background-repeat:no-repeat;
  background-size:52px 52px,36px 36px,44px 44px,30px 30px,24px 24px;
  background-position:10% 100%,30% 100%,52% 100%,72% 100%,90% 100%;
  animation:bubble-rise 12s ease-in infinite;
  z-index:-1;
}
.stats::after{content:none}

footer{position:relative;overflow:hidden}
footer::before{
  content:'';position:absolute;left:0;right:0;bottom:-60px;height:calc(100% + 120px);
  background-image:
    radial-gradient(circle, rgba(59,130,246,.45) 0 45%, transparent 72%),
    radial-gradient(circle, rgba(34,197,94,.4) 0 45%, transparent 72%),
    radial-gradient(circle, rgba(236,72,153,.32) 0 45%, transparent 72%),
    radial-gradient(circle, rgba(255,255,255,.2) 0 45%, transparent 72%);
  background-repeat:no-repeat;
  background-size:40px 40px,28px 28px,22px 22px,16px 16px;
  background-position:9% 100%,40% 100%,66% 100%,86% 100%;
  animation:bubble-rise 16s ease-in infinite;
  pointer-events:none;z-index:0;
}
footer .container{position:relative;z-index:1}

/* keep marquees/cards crisp: don't let ambient bg clip their own hover motion */
.marquee,.team-marquee{position:relative;z-index:1}

@media (prefers-reduced-motion: reduce){
  section::before,section::after,.stats::before,footer::before{animation:none !important}
}

/* ===================================================================
   v7 — funky hover interactions across every clickable / card element
=================================================================== */
@keyframes glow-cycle{
  0%{box-shadow:0 0 0 3px rgba(37,99,235,.45),0 26px 55px rgba(37,99,235,.28)}
  25%{box-shadow:0 0 0 3px rgba(22,163,74,.45),0 26px 55px rgba(22,163,74,.28)}
  50%{box-shadow:0 0 0 3px rgba(245,158,11,.45),0 26px 55px rgba(245,158,11,.28)}
  75%{box-shadow:0 0 0 3px rgba(236,72,153,.45),0 26px 55px rgba(236,72,153,.28)}
  100%{box-shadow:0 0 0 3px rgba(37,99,235,.45),0 26px 55px rgba(37,99,235,.28)}
}

/* buttons: gradient shift + lift + glow */
.btn-primary{background-image:linear-gradient(90deg,var(--blue),var(--green),var(--blue));background-size:220% auto;background-position:0 0;transition:background-position .6s ease,transform .3s ease,box-shadow .3s ease}
.btn-primary:hover{background-position:100% 0;transform:translateY(-5px) scale(1.05);box-shadow:0 16px 36px rgba(37,99,235,.5)}
.btn-ghost{transition:transform .3s ease,border-color .3s,color .3s,box-shadow .3s}
.btn-ghost:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 12px 26px rgba(22,163,74,.18)}

/* service / feature / info cards: lift, tilt, glow ring cycling through the palette, icon pop */
.card,.card.media,.port-card,.quote,.info-card{transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s}
.card:hover,.card.media:hover{transform:translateY(-14px) scale(1.03) rotate(-.6deg);animation:glow-cycle 2.2s linear infinite}
.port-card:hover{transform:translateY(-10px) scale(1.02);animation:glow-cycle 2.2s linear infinite}
.quote:hover{transform:translateY(-10px) scale(1.02);animation:glow-cycle 2.2s linear infinite}
.info-card:hover{transform:translateY(-6px) scale(1.03);animation:glow-cycle 2.2s linear infinite}

.card .icon,.card.media .thumb .icon{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.card:hover .icon,.card.media:hover .thumb .icon{transform:rotate(-14deg) scale(1.18)}

.port-thumb.img img,.split .media-frame img,.team-card .photo img{transition:transform .6s ease,filter .6s ease}
.port-card:hover .port-thumb.img img{transform:scale(1.14) rotate(1deg);filter:saturate(1.35) brightness(1.05)}
.split .media-frame:hover img{transform:scale(1.07)}
.team-card:hover .photo img{transform:scale(1.08);filter:saturate(1.25)}

.quote .who .av{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.quote:hover .who .av{transform:rotate(360deg) scale(1.12)}

.info-card .ic{transition:transform .45s cubic-bezier(.34,1.56,.64,1),background .3s,color .3s}
.info-card:hover .ic{transform:rotate(-16deg) scale(1.18);background:var(--grad);color:#fff}

/* process steps: bouncy pop with rotate */
.step .circle{transition:transform .45s cubic-bezier(.34,1.56,.64,1),background .3s,box-shadow .3s}
.step:hover .circle{transform:scale(1.2) rotate(10deg);box-shadow:0 12px 26px rgba(37,99,235,.45)}

/* stats: numbers pop + glow */
.stat{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.stat:hover{transform:translateY(-8px) scale(1.08)}
.stat:hover .num{text-shadow:0 0 22px currentColor}

/* team mini-cards: ring spins fast + lift */
.team-card-mini{transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s}
.team-card-mini:hover{animation:glow-cycle 2.2s linear infinite}
.team-card-mini:hover .tm-ring::before{animation-duration:1s}

/* team full cards */
.team-card{transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s}
.team-card:hover{animation:glow-cycle 2.2s linear infinite}

/* social icons: bounce + rotate + color cycle */
.socials a{transition:transform .4s cubic-bezier(.34,1.56,.64,1),background .3s,color .3s}
.socials a:hover{transform:translateY(-6px) rotate(-10deg) scale(1.15)}

/* nav links: animated gradient underline */
.nav-links a::after{background:linear-gradient(90deg,var(--blue),var(--green),var(--yellow));background-size:200% auto;background-position:0 0;transition:width .35s ease,background-position .6s ease}
.nav-links a:hover::after{background-position:100% 0}

/* fab buttons: funky pulse ring on hover */
.fab{transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s}
.fab:hover{transform:scale(1.15) rotate(-6deg);box-shadow:0 0 0 8px rgba(37,99,235,.15),var(--shadow-lg)}

/* tech marquee items: pop + color on hover */
.tech span{transition:transform .3s cubic-bezier(.34,1.56,.64,1),color .3s}
.tech span:hover{transform:translateY(-6px) scale(1.15) rotate(-3deg)}

/* form fields: colorful focus glow */
.field input,.field select,.field textarea{transition:.25s}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--blue-light)}

@media (prefers-reduced-motion: reduce){
  .card:hover,.card.media:hover,.port-card:hover,.quote:hover,.info-card:hover,.team-card:hover,.team-card-mini:hover{animation:none !important}
}