/* ===========================================================
   NexisLab — Shared Stylesheet
   Used by every page. Keep additions backwards-compatible.
=========================================================== */

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg-deep:#0a0d18;
  --bg-surface:#0f1322;
  --bg-card:#141a2c;
  --bg-card2:#19213a;
  --violet:#9d6fff;
  --violet-light:#c5b3ff;
  --violet-dim:#8347f5;
  --cyan:#3ee8ff;
  --cyan-dim:#0ad1f0;
  --lime:#d4f968;
  --pink:#ff7ac6;
  --amber:#ffc94d;
  --red:#ff7a7a;
  --text-primary:#f7f8fc;
  --text-secondary:#a3acc4;
  --text-muted:#5c6685;
  --border:rgba(157,111,255,0.18);
  --border-bright:rgba(157,111,255,0.55);
  --glow-v:rgba(157,111,255,0.4);
  --glow-c:rgba(62,232,255,0.32);
  --glass:rgba(20,26,44,0.55);
  --mono:'Space Mono',monospace;
  --display:'Space Grotesk',sans-serif;
  --body:'Inter',sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--bg-deep);color:var(--text-primary);overflow-x:hidden;line-height:1.6}
::-webkit-scrollbar{width:7px}
::-webkit-scrollbar-track{background:var(--bg-deep)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--violet),var(--cyan));border-radius:8px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ===== AMBIENT BG ===== */
.grid-bg{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(157,111,255,0.07) 1px,transparent 1px),linear-gradient(90deg,rgba(157,111,255,0.07) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(circle at 50% 30%,black 15%,transparent 65%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%,black 15%,transparent 65%);}
.noise-overlay{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.orb{position:fixed;border-radius:50%;filter:blur(130px);pointer-events:none;z-index:0;animation:orbFloat 18s ease-in-out infinite;opacity:0.7}
.orb-1{width:620px;height:620px;background:radial-gradient(circle,rgba(157,111,255,0.26),transparent 70%);top:-18%;right:-8%}
.orb-2{width:520px;height:520px;background:radial-gradient(circle,rgba(62,232,255,0.18),transparent 70%);bottom:0;left:-10%;animation-delay:-7s}
.orb-3{width:420px;height:420px;background:radial-gradient(circle,rgba(255,122,198,0.14),transparent 70%);top:48%;right:8%;animation-delay:-13s}
@keyframes orbFloat{0%,100%{transform:translateY(0) scale(1) rotate(0)}50%{transform:translateY(-55px) scale(1.08) rotate(3deg)}}
/* ===============================
   PREMIUM NAVIGATION
================================ */

.logo-img{
    height:90px;
    width:auto;
    display:block;
    transition:.4s ease;
}

.logo-img:hover{
    transform:scale(1.04);
}

/* NAVBAR */

nav{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1000;

    height:82px;
    padding:0 6%;

    display:flex;
    align-items:center;
    justify-content:space-between;

    background:rgba(15,23,42,.72);
    backdrop-filter:blur(22px) saturate(180%);
    -webkit-backdrop-filter:blur(22px) saturate(180%);

    border-bottom:1px solid rgba(255,255,255,.08);

    transition:.45s ease;
}

nav.scrolled{
    background:rgba(10,15,28,.92);

    border-bottom:1px solid rgba(139,92,246,.22);

    box-shadow:
        0 12px 40px rgba(0,0,0,.45),
        0 0 30px rgba(139,92,246,.08);
}

/* LOGO */

.nav-logo{
    display:flex;
    align-items:center;
    gap:.7rem;
    text-decoration:none;
}

.nav-logo .mark{
    width:42px;
    height:42px;

    border-radius:12px;

    background:linear-gradient(135deg,#8b5cf6,#06b6d4);

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;
    font-weight:700;

    box-shadow:
        0 8px 20px rgba(139,92,246,.35),
        0 0 25px rgba(139,92,246,.25);

    transition:.4s;
}

.nav-logo:hover .mark{
    transform:rotate(-8deg) scale(1.08);
}

.nav-logo .word{
    font-size:1.55rem;
    font-family:var(--display);
    font-weight:700;
    color:#fff;
    letter-spacing:-.4px;
}

.nav-logo .word span{
    color:#8b5cf6;
}

/* LINKS */

.nav-links{
    display:flex;
    align-items:center;
    gap:2rem;
    list-style:none;
}

.nav-links a{

    position:relative;

    color:rgba(255,255,255,.75);

    text-decoration:none;

    font-size:.92rem;
    font-weight:500;

    transition:.35s;
}

.nav-links a:hover,
.nav-links a.active{
    color:#fff;
}

/* Animated Underline */

.nav-links a::after{

    content:'';

    position:absolute;

    left:50%;
    bottom:-10px;

    transform:translateX(-50%);

    width:0;
    height:3px;

    border-radius:50px;

    background:linear-gradient(90deg,#8b5cf6,#06b6d4);

    transition:.35s;
}

.nav-links a:hover::after,
.nav-links a.active::after{
    width:100%;
}

/* CTA BUTTON */

.nav-cta{

    padding:.85rem 1.7rem;

    border-radius:14px;

    background:linear-gradient(135deg,#8b5cf6,#7c3aed);

    color:#fff!important;

    font-weight:600;

    box-shadow:
        0 10px 30px rgba(139,92,246,.35);

    transition:.35s!important;

    border:1px solid rgba(255,255,255,.08);
}

.nav-cta:hover{

    transform:translateY(-4px);

    box-shadow:
        0 15px 40px rgba(139,92,246,.45);

    background:linear-gradient(135deg,#9d6fff,#8b5cf6);
}

.nav-cta::after{
    display:none;
}

/* HAMBURGER */

.hamburger{

    display:none;

    flex-direction:column;

    gap:5px;

    cursor:pointer;
}

.hamburger span{

    width:28px;

    height:2.5px;

    border-radius:10px;

    background:#fff;

    transition:.35s;
}

/* MOBILE MENU */

.mobile-menu{

    display:none;

    position:fixed;

    left:0;
    right:0;
    top:82px;

    background:rgba(15,23,42,.96);

    backdrop-filter:blur(25px);

    padding:1.8rem 6%;

    flex-direction:column;

    gap:.35rem;

    border-bottom:1px solid rgba(255,255,255,.08);

    z-index:999;

    animation:menuFade .35s ease;
}

.mobile-menu.open{
    display:flex;
}

.mobile-menu a{

    color:rgba(255,255,255,.75);

    text-decoration:none;

    padding:14px 0;

    font-size:1rem;

    transition:.3s;
}

.mobile-menu a:hover{

    color:#8b5cf6;

    padding-left:10px;
}

.mobile-menu .mm-cta{

    color:#fff!important;

    background:linear-gradient(135deg,#8b5cf6,#7c3aed);

    margin-top:12px;

    padding:14px;

    text-align:center;

    border-radius:12px;
}

/* Mobile Animation */

@keyframes menuFade{

    from{
        opacity:0;
        transform:translateY(-15px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* Responsive */

@media(max-width:991px){

    .nav-links{
        display:none;
    }

    .hamburger{
        display:flex;
    }

    nav{
        height:78px;
    }

    .mobile-menu{
        top:78px;
    }

    .logo-img{
        height:75px;
    }

}

/* ===== PAGE WRAPPER ===== */
main{padding-top:74px;position:relative;z-index:1}
section{padding:84px 5%;position:relative;z-index:1}

.eyebrow{display:inline-flex;align-items:center;gap:0.6rem;font-family:var(--mono);font-size:0.7rem;
  color:var(--cyan);letter-spacing:3.5px;text-transform:uppercase;margin-bottom:0.9rem;font-weight:500}
.eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.sec-title{font-family:var(--display);font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:700;line-height:1.1;letter-spacing:-1px;margin-bottom:1.1rem}
.grad{background:linear-gradient(120deg,var(--violet-light),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sec-sub{color:var(--text-secondary);font-size:1.02rem;max-width:560px;line-height:1.8}
.center{text-align:center}
.center .sec-sub{margin:0 auto}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:0.65rem;padding:0.8rem 1.9rem;border-radius:10px;font-weight:600;
  font-size:0.88rem;cursor:pointer;text-decoration:none;transition:all .3s cubic-bezier(.25,.46,.45,.94);
  border:none;font-family:var(--body);letter-spacing:0.2px;position:relative}
.btn-primary{background:linear-gradient(135deg,var(--violet),var(--violet-dim));color:#fff;box-shadow:0 0 26px var(--glow-v);border:1px solid rgba(157,111,255,0.35)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 0 48px var(--glow-v)}
.btn-outline{background:transparent;border:1px solid rgba(157,111,255,0.35);color:var(--text-primary)}
.btn-outline:hover{background:rgba(157,111,255,0.08);border-color:var(--violet-light);transform:translateY(-3px)}
.btn-cyan{background:linear-gradient(135deg,var(--cyan),var(--cyan-dim));color:#05070d;box-shadow:0 0 26px var(--glow-c);border:1px solid rgba(62,232,255,0.35)}
.btn-cyan:hover{transform:translateY(-3px);box-shadow:0 0 48px var(--glow-c)}
.btn-block{width:100%;justify-content:center}
.btn-sm{padding:0.55rem 1.3rem;font-size:0.78rem}

/* ===== MARQUEE ===== */
.marquee-section{padding:26px 0;overflow:hidden;border-top:1px solid rgba(157,111,255,0.1);
  border-bottom:1px solid rgba(157,111,255,0.1);background:rgba(20,26,44,0.35);backdrop-filter:blur(8px);position:relative;z-index:1}
.marquee-track{display:flex;gap:4.5rem;white-space:nowrap;animation:marquee 30s linear infinite}
.marquee-item{display:flex;align-items:center;gap:0.75rem;font-family:var(--mono);font-size:0.82rem;font-weight:500;
  color:var(--text-muted);flex-shrink:0;letter-spacing:0.4px;transition:color .3s}
.marquee-item:hover{color:var(--violet-light)}
.marquee-item svg{color:var(--violet-light);width:17px;height:17px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== CARDS / GRIDS (generic, reused across pages) ===== */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.6rem;margin-top:3.2rem}
.cards-grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.cards-grid.tight{gap:1.2rem}
.info-card{background:var(--glass);backdrop-filter:blur(12px);border:1px solid rgba(157,111,255,0.12);
  border-radius:18px;padding:2rem;transition:all .4s cubic-bezier(.25,.46,.45,.94);position:relative;overflow:hidden}
.info-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--violet),var(--cyan),transparent);opacity:0;transition:opacity .5s}
.info-card:hover{border-color:var(--border-bright);transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,0.4),0 0 40px var(--glow-v)}
.info-card:hover::before{opacity:1}
.card-icon{width:54px;height:54px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  margin-bottom:1.1rem;background:rgba(157,111,255,0.1);border:1px solid rgba(157,111,255,0.18);font-size:1.4rem}
.card-icon.cyan{background:rgba(62,232,255,0.08);border-color:rgba(62,232,255,0.18)}
.card-icon.lime{background:rgba(212,249,104,0.08);border-color:rgba(212,249,104,0.2)}
.card-icon.pink{background:rgba(255,122,198,0.08);border-color:rgba(255,122,198,0.18)}
.card-title{font-family:var(--display);font-size:1.18rem;font-weight:600;margin-bottom:0.4rem}
.card-desc{color:var(--text-secondary);font-size:0.88rem;line-height:1.7}
.card-link{display:inline-flex;align-items:center;gap:0.4rem;color:var(--violet-light);font-size:0.83rem;
  font-weight:500;margin-top:1.1rem;cursor:pointer;text-decoration:none;transition:all .3s}
.card-link:hover{gap:0.8rem;color:var(--cyan)}

/* ===== CTA BLOCK ===== */
.cta-section{margin:0 5%;border-radius:24px;padding:64px 50px;
  background:linear-gradient(135deg,rgba(157,111,255,0.1),rgba(62,232,255,0.04));
  border:1px solid rgba(157,111,255,0.16);text-align:center;position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:600px;height:600px;
  border-radius:50%;background:radial-gradient(circle,rgba(157,111,255,0.1),transparent 70%);pointer-events:none}

/* ===== REVEAL ===== */
.reveal{opacity:0;transform:translateY(44px);transition:opacity .8s cubic-bezier(.25,.46,.45,.94),transform .8s cubic-bezier(.25,.46,.45,.94)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ===== PAGE HERO (used by sub-pages) ===== */
.page-hero{padding:70px 5% 50px;text-align:center}
.page-hero .eyebrow{justify-content:center;display:flex}
.breadcrumb{display:flex;align-items:center;justify-content:center;gap:0.5rem;font-family:var(--mono);
  font-size:0.72rem;color:var(--text-muted);margin-bottom:1.4rem;letter-spacing:0.5px}
.breadcrumb a{color:var(--text-muted);text-decoration:none;transition:.2s}
.breadcrumb a:hover{color:var(--violet-light)}
.breadcrumb .sep{color:var(--border-bright)}
.breadcrumb .here{color:var(--cyan)}
.updated-badge{display:inline-flex;align-items:center;gap:0.5rem;padding:0.4rem 1.1rem;border-radius:8px;
  background:rgba(157,111,255,0.08);border:1px solid rgba(157,111,255,0.18);font-family:var(--mono);font-size:0.72rem;
  color:var(--violet-light);margin-top:1rem}

/* ===== LEGAL / POLICY DOCUMENT LAYOUT ===== */
.legal-layout{display:grid;grid-template-columns:260px 1fr;gap:3rem;padding:10px 5% 90px;max-width:1280px;margin:0 auto;align-items:start}
.legal-toc{position:sticky;top:100px;background:var(--glass);border:1px solid rgba(157,111,255,0.1);border-radius:16px;padding:1.5rem}
.legal-toc-title{font-family:var(--mono);font-size:0.68rem;color:var(--text-muted);text-transform:uppercase;
  letter-spacing:2px;margin-bottom:0.9rem}
.legal-toc ul{list-style:none;display:flex;flex-direction:column;gap:0.55rem}
.legal-toc a{color:var(--text-secondary);font-size:0.82rem;text-decoration:none;transition:.2s;display:block;
  padding:0.25rem 0;border-left:2px solid transparent;padding-left:0.8rem}
.legal-toc a:hover,.legal-toc a.active{color:var(--violet-light);border-left-color:var(--violet)}
.legal-content{background:var(--glass);border:1px solid rgba(157,111,255,0.1);border-radius:20px;padding:3rem}
.legal-content h2{font-family:var(--display);font-size:1.45rem;font-weight:700;margin:2.2rem 0 1rem;
  padding-top:1.6rem;border-top:1px solid rgba(157,111,255,0.08);scroll-margin-top:100px}
.legal-content h2:first-child{margin-top:0;padding-top:0;border-top:none}
.legal-content h3{font-family:var(--display);font-size:1.08rem;font-weight:600;margin:1.4rem 0 0.7rem;color:var(--violet-light)}
.legal-content p{color:var(--text-secondary);font-size:0.92rem;line-height:1.85;margin-bottom:1rem}
.legal-content ul,.legal-content ol{color:var(--text-secondary);font-size:0.92rem;line-height:1.85;margin:0 0 1rem 1.3rem}
.legal-content li{margin-bottom:0.5rem}
.legal-content strong{color:var(--text-primary);font-weight:600}
.legal-content a{color:var(--cyan);text-decoration:underline;text-decoration-color:rgba(62,232,255,0.3)}
.legal-intro{color:var(--text-secondary);font-size:0.95rem;line-height:1.85;padding:1.3rem 1.5rem;
  background:rgba(157,111,255,0.05);border:1px solid rgba(157,111,255,0.12);border-radius:14px;margin-bottom:2rem}
.legal-table{width:100%;border-collapse:collapse;margin:1rem 0 1.5rem;font-size:0.86rem}
.legal-table th,.legal-table td{padding:0.7rem 1rem;text-align:left;border-bottom:1px solid rgba(157,111,255,0.1);color:var(--text-secondary)}
.legal-table th{color:var(--violet-light);font-family:var(--mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.6px}
@media(max-width:900px){
  .legal-layout{grid-template-columns:1fr}
  .legal-toc{position:relative;top:0}
  .legal-content{padding:1.8rem}
}

/* ===== ACCORDION (FAQ etc.) ===== */
.accordion{display:flex;flex-direction:column;gap:0.8rem;margin-top:2rem}
.accordion-item{background:var(--glass);border:1px solid rgba(157,111,255,0.1);border-radius:14px;overflow:hidden;transition:border-color .3s}
.accordion-item:hover{border-color:rgba(157,111,255,0.25)}
.accordion-item.open{border-color:var(--border-bright)}
.accordion-q{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.3rem 1.6rem;
  cursor:pointer;font-weight:600;font-size:0.94rem;font-family:var(--display)}
.accordion-icon{width:26px;height:26px;border-radius:8px;background:rgba(157,111,255,0.1);border:1px solid rgba(157,111,255,0.2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.3s;font-size:0.9rem;color:var(--violet-light)}
.accordion-item.open .accordion-icon{transform:rotate(45deg);background:var(--violet);color:#fff}
.accordion-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.accordion-a-inner{padding:0 1.6rem 1.5rem;color:var(--text-secondary);font-size:0.88rem;line-height:1.8}
.faq-cat-tabs{display:flex;gap:0.6rem;flex-wrap:wrap;justify-content:center;margin-top:1.8rem}
.faq-tab{padding:0.5rem 1.2rem;border-radius:9px;background:var(--glass);border:1px solid rgba(157,111,255,0.14);
  font-size:0.8rem;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:.25s;font-family:var(--body)}
.faq-tab:hover{border-color:var(--violet-light);color:var(--text-primary)}
.faq-tab.active{background:linear-gradient(135deg,var(--violet),var(--violet-dim));color:#fff;border-color:transparent}
.faq-group{margin-top:2.6rem}
.faq-group-title{font-family:var(--display);font-size:1.15rem;font-weight:600;margin-bottom:1rem;
  display:flex;align-items:center;gap:0.6rem}
.faq-group-title::before{content:'';width:4px;height:18px;background:linear-gradient(var(--violet),var(--cyan));border-radius:3px}

/* ===== FOOTER ===== */
footer{background:rgba(10,13,24,0.85);backdrop-filter:blur(16px);border-top:1px solid rgba(157,111,255,0.08);
  padding:56px 5% 28px;position:relative;z-index:1}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:2.2rem;margin-bottom:2.6rem}
.footer-desc{color:var(--text-muted);font-size:0.82rem;line-height:1.8;margin:0.9rem 0}
.social-links{display:flex;gap:0.55rem}
.social-btn{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,0.02);border:1px solid rgba(157,111,255,0.08);
  display:flex;align-items:center;justify-content:center;color:var(--text-muted);text-decoration:none;font-size:0.85rem;
  transition:.3s;cursor:pointer}
.social-btn:hover{background:rgba(157,111,255,0.08);border-color:var(--violet);color:var(--violet-light);transform:translateY(-3px)}
.footer-col h4{font-family:var(--display);font-size:0.84rem;font-weight:600;margin-bottom:0.9rem;color:var(--text-primary)}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:0.5rem}
.footer-col ul li a{color:var(--text-muted);font-size:0.8rem;text-decoration:none;cursor:pointer;transition:.2s}
.footer-col ul li a:hover{color:var(--violet-light);padding-left:0.25rem}
.footer-bottom{border-top:1px solid rgba(157,111,255,0.06);padding-top:1.4rem;display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:0.9rem}
.footer-bottom p{color:var(--text-muted);font-size:0.78rem}
.footer-legal-row{display:flex;gap:1.2rem;flex-wrap:wrap}
.footer-legal-row a{color:var(--text-muted);font-size:0.78rem;text-decoration:none;transition:.2s}
.footer-legal-row a:hover{color:var(--violet-light)}

/* ===== RESPONSIVE ===== */
@media(max-width:1100px){
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr;row-gap:2rem}
}
@media(max-width:900px){
  .nav-links{display:none}
  .hamburger{display:flex}
  .footer-grid{grid-template-columns:1fr 1fr}
  .cta-section{padding:40px 1.5rem;margin:0 5%}
}
@media(max-width:600px){
  section{padding:60px 5%}
  .footer-grid{grid-template-columns:1fr}
  .btn{padding:0.65rem 1.5rem;font-size:0.82rem}
  .legal-content{padding:1.4rem}
}


.footer-contact{display:flex;flex-direction:column;gap:0.55rem;margin:1.1rem 0 1.3rem}
.footer-contact-item{display:inline-flex;align-items:center;gap:0.5rem;color:var(--text-secondary);font-size:0.82rem;text-decoration:none;transition:color .25s ease}
.footer-contact-item svg{flex-shrink:0;color:var(--violet-light)}
.footer-contact-item:hover{color:var(--violet-light)}

/* =========================
   Premium Top Contact Bar
========================= */

.top-contact-bar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1001;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 5%;

    background:linear-gradient(90deg,#0f172a,#1e293b,#111827);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 8px 25px rgba(0,0,0,.18);
}

.top-contact-inner{
    width:100%;
    max-width:1300px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2rem;
    flex-wrap:wrap;
}

.top-contact-item{
    display:inline-flex;
    align-items:center;
    gap:.55rem;

    color:rgba(255,255,255,.88);
    text-decoration:none;

    font-size:.82rem;
    font-weight:500;
    letter-spacing:.3px;

    transition:.35s ease;
    position:relative;
}

.top-contact-item svg{
    width:16px;
    height:16px;
    color:var(--violet-light);
    transition:.35s ease;
}

/* Hover Effect */

.top-contact-item:hover{
    color:#fff;
    transform:translateY(-2px);
}

.top-contact-item:hover svg{
    color:#8b5cf6;
    transform:scale(1.15) rotate(-8deg);
}

/* Animated Underline */

.top-contact-item::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-4px;
    width:0;
    height:2px;
    border-radius:20px;
    background:linear-gradient(90deg,#8b5cf6,#a855f7,#ec4899);
    transition:.35s ease;
}

.top-contact-item:hover::after{
    width:100%;
}

/* Divider */

.top-contact-item:not(:last-child)::before{
    content:"";
    position:absolute;
    right:-1rem;
    top:50%;
    transform:translateY(-50%);
    width:1px;
    height:16px;
    background:rgba(255,255,255,.12);
}

/* Push navbar below contact bar */

#navbar{
    margin-top:45px;
}

.mobile-menu{
    margin-top:45px;
}

/* Mobile */

@media(max-width:640px){

    .top-contact-bar{
        height:auto;
        padding:10px 18px;
    }

    .top-contact-inner{
        justify-content:flex-start;
        gap:10px 20px;
    }

    .top-contact-item{
        font-size:.76rem;
    }

    .top-contact-item.address{
        width:100%;
    }

    .top-contact-item::before{
        display:none;
    }

    #navbar,
    .mobile-menu{
        margin-top:65px;
    }
}


/* ==========================================================
   NEXISLAB — PREMIUM LIGHT THEME
   Complete stylesheet: original CSS preserved above.
========================================================== */

/* ==========================================================
   NEXISLAB — PREMIUM LIGHT VISUAL SYSTEM
   Keep this stylesheet AFTER the existing style.css.
========================================================== */
:root{
  --bg-deep:#f7f8fc; --bg-surface:#fff; --bg-card:#fff; --bg-card2:#f1efff;
  --violet:#7357e8; --violet-light:#6345d8; --cyan:#079bb5; --lime:#729700;
  --pink:#d84e98; --amber:#b97700; --text-primary:#171827; --text-secondary:#596078; --text-muted:#8b92a6;
  --border:rgba(71,59,142,.12); --border-bright:rgba(115,87,232,.34);
  --glow-v:rgba(115,87,232,.16); --glow-c:rgba(7,155,181,.13); --glass:rgba(255,255,255,.82);
}
html{scroll-behavior:smooth}
body{background:radial-gradient(circle at 80% 0%,rgba(115,87,232,.065),transparent 30%),radial-gradient(circle at 5% 45%,rgba(7,155,181,.04),transparent 28%),#f7f8fc;color:var(--text-primary)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-3;background:linear-gradient(120deg,rgba(115,87,232,.015),transparent 45%,rgba(7,155,181,.018))}
nav{background:rgba(255,255,255,.82);border-bottom:1px solid rgba(30,35,60,.07);box-shadow:0 8px 30px rgba(30,35,60,.045);backdrop-filter:blur(18px)}
nav.scrolled{background:rgba(255,255,255,.95);border-color:rgba(115,87,232,.13);box-shadow:0 14px 42px rgba(30,35,60,.09)}
.nav-logo .word{color:#171827}.nav-logo .word span{color:var(--violet)}.nav-links a{color:#687087}.nav-links a:hover,.nav-links a.active{color:#171827}.nav-links a::after{background:linear-gradient(90deg,var(--violet),var(--cyan),var(--pink))}
.nav-cta,.btn-primary{background:linear-gradient(135deg,#7659e9,#5f42d2);box-shadow:0 12px 28px rgba(115,87,232,.2);border:1px solid rgba(115,87,232,.16);color:#fff}.nav-cta:hover,.btn-primary:hover{box-shadow:0 16px 40px rgba(115,87,232,.28)}
.btn-outline{background:rgba(255,255,255,.78);border:1px solid rgba(115,87,232,.2);color:#272a3b;box-shadow:0 5px 16px rgba(30,35,60,.035)}.btn-outline:hover{background:rgba(115,87,232,.055);border-color:var(--violet);color:var(--violet-light)}
.grid-bg{background-image:linear-gradient(rgba(115,87,232,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(115,87,232,.04) 1px,transparent 1px)}
.noise-overlay{opacity:.012;mix-blend-mode:multiply}
.grad{background:linear-gradient(105deg,#6446d7 0%,#7659e9 32%,#079bb5 68%,#d84e98 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:180% auto;animation:gradientText 8s ease-in-out infinite alternate}
@keyframes gradientText{to{background-position:100% 50%}}
.sec-title,.hero-slide-title,.hero-title{color:#181a2a}.sec-title .grad,.hero-slide-title .grad,.hero-title .grad{display:inline-block}
.eyebrow{color:var(--cyan)}.eyebrow::before{background:var(--cyan);box-shadow:0 0 10px rgba(7,155,181,.28)}
/* ===== HERO: image-led instead of empty terminal ===== */
.hero{background:radial-gradient(circle at 75% 30%,rgba(115,87,232,.06),transparent 34%)}
.hero-gradient-bg::before{background:conic-gradient(from 0deg at 50% 50%,rgba(115,87,232,.11),rgba(7,155,181,.08),rgba(216,78,152,.07),rgba(114,151,0,.05),rgba(115,87,232,.11));filter:blur(72px)}
.hero-gradient-bg::after{background:radial-gradient(ellipse 80% 60% at 50% 0%,transparent 0%,#f7f8fc 78%)}
.hero-slide-tag,.hero-badge{background:rgba(115,87,232,.055);border-color:rgba(115,87,232,.16);color:var(--violet-light)}
.hero-slide-sub,.hero-sub{color:var(--text-secondary)}
.hero-dots .hero-dot{background:rgba(115,87,232,.15)}.hero-dot.active{background:rgba(115,87,232,.3)}
.stat-item{border-left-color:rgba(115,87,232,.25)}.stat-label{color:var(--text-muted)}
.hero-showcase{position:relative;min-height:590px;display:flex;align-items:center;justify-content:center}
.hero-main-image{position:relative;width:min(100%,480px);aspect-ratio:4/5;border-radius:30px;overflow:hidden;border:1px solid rgba(115,87,232,.18);background:#eae7ff;box-shadow:0 32px 80px rgba(44,39,91,.14),0 10px 28px rgba(115,87,232,.08);transform:rotate(1.5deg);transition:transform .5s ease,box-shadow .5s ease}
.hero-main-image:hover{transform:rotate(0) translateY(-6px);box-shadow:0 42px 95px rgba(44,39,91,.17),0 16px 36px rgba(115,87,232,.1)}
.hero-main-image img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.95) contrast(.98)}
.hero-image-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,26,62,.02) 20%,rgba(30,26,62,.08) 55%,rgba(30,26,62,.76) 100%)}
.hero-image-label{position:absolute;top:18px;left:18px;padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.82);backdrop-filter:blur(12px);font:600 .62rem var(--mono);letter-spacing:1.2px;color:#292b3c;border:1px solid rgba(255,255,255,.75)}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#69a300;box-shadow:0 0 0 4px rgba(105,163,0,.12);margin-right:6px}
.hero-image-caption{position:absolute;left:24px;right:24px;bottom:22px;color:#fff;display:flex;flex-direction:column;gap:5px}.hero-image-caption strong{font:600 1.35rem var(--display);letter-spacing:-.4px}.hero-image-caption span{font-size:.78rem;color:rgba(255,255,255,.75);line-height:1.5}
.hero-float-card{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:13px 16px;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);border:1px solid rgba(115,87,232,.13);border-radius:15px;box-shadow:0 16px 38px rgba(30,35,60,.12);animation:floatCard 5s ease-in-out infinite}.hero-float-card b{display:block;font:700 .84rem var(--display)}.hero-float-card small{display:block;color:var(--text-muted);font-size:.66rem;margin-top:2px}.hero-float-top{top:12%;right:-2%;}.hero-float-bottom{bottom:13%;left:-3%;animation-delay:-2.2s}.mini-icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-weight:800}.mini-icon.violet{background:rgba(115,87,232,.1);color:var(--violet)}.mini-icon.cyan{background:rgba(7,155,181,.1);color:var(--cyan)}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.hero-color-orbit{position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none}.orbit-a{width:90px;height:90px;border:1px solid rgba(216,78,152,.25);right:2%;bottom:6%}.orbit-b{width:55px;height:55px;border:1px solid rgba(7,155,181,.3);left:4%;top:12%}
/* ===== VISUAL STORY STRIP ===== */
.visual-story-grid{display:grid;grid-template-columns:1.55fr 1fr 1fr;gap:16px;margin:0 0 3rem;padding-top:1rem}
.visual-story-card{position:relative;min-height:250px;border-radius:22px;overflow:hidden;border:1px solid rgba(115,87,232,.13);background:#eeeaff;box-shadow:0 12px 36px rgba(30,35,60,.07);transition:transform .45s ease,box-shadow .45s ease}.visual-story-card:hover{transform:translateY(-7px);box-shadow:0 24px 55px rgba(30,35,60,.12)}.visual-story-card img{width:100%;height:100%;min-height:250px;object-fit:cover;display:block;transition:transform .6s ease;filter:saturate(.9)}.visual-story-card:hover img{transform:scale(1.05)}.visual-story-overlay{position:absolute;inset:auto 0 0;padding:26px 22px 20px;color:#fff;background:linear-gradient(transparent,rgba(16,18,31,.84));display:flex;flex-direction:column;gap:4px}.visual-story-overlay span{font:600 .6rem var(--mono);letter-spacing:1.6px;color:rgba(255,255,255,.68)}.visual-story-overlay strong{font:600 1.05rem var(--display)}.accent-story{transform:translateY(22px)}.accent-story:hover{transform:translateY(15px)}
/* ===== PORTFOLIO ===== */
.portfolio-slider-wrap{padding:2rem 0 2.6rem}.portfolio-card{border-color:rgba(115,87,232,.14);box-shadow:0 12px 30px rgba(30,35,60,.06);background:#fff}.portfolio-card:hover{border-color:rgba(115,87,232,.35);box-shadow:0 22px 45px rgba(30,35,60,.12)}.portfolio-card::after{background:linear-gradient(180deg,transparent 40%,rgba(12,14,26,.78))}.portfolio-card-tag{background:rgba(255,255,255,.82);color:var(--violet-light);border-color:rgba(255,255,255,.7);backdrop-filter:blur(8px)}
/* ===== CARDS / PROCESS / TESTIMONIALS ===== */
.info-card,.process-item,.testimonial-card,.testi-mini,.stats-band-item{background:rgba(255,255,255,.84);border-color:rgba(115,87,232,.1);box-shadow:0 8px 28px rgba(30,35,60,.045)}
.info-card:hover,.process-item:hover,.testimonial-card:hover{border-color:rgba(115,87,232,.28);box-shadow:0 22px 52px rgba(30,35,60,.11)}
.card-icon{background:rgba(115,87,232,.055);border-color:rgba(115,87,232,.12)}.card-link{color:var(--violet-light)}
.path-line{background:repeating-linear-gradient(90deg,var(--violet) 0,var(--violet) 8px,transparent 8px,transparent 16px);opacity:.28}.path-node{background:#fff}.path-step:nth-child(2) .path-node{border-color:var(--cyan)}.path-step:nth-child(3) .path-node{border-color:var(--lime)}.path-step:nth-child(4) .path-node{border-color:var(--pink)}
.testi-feature{background:linear-gradient(145deg,rgba(115,87,232,.09),rgba(7,155,181,.035));border-color:rgba(115,87,232,.22)}
.stats-band{border-color:rgba(115,87,232,.12);box-shadow:0 12px 30px rgba(30,35,60,.04)}.stats-band-num{background:linear-gradient(110deg,var(--violet-light),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
/* ===== WHY SECTION becomes bright editorial panel ===== */
.why-section{background:linear-gradient(135deg,#fff 0%,#f3f0ff 48%,#eefbfd 100%);border-color:rgba(115,87,232,.13);box-shadow:0 22px 60px rgba(30,35,60,.08)}.why-section::before{background:radial-gradient(ellipse 60% 80% at 15% 50%,rgba(115,87,232,.08),transparent 70%),radial-gradient(ellipse 40% 60% at 90% 20%,rgba(7,155,181,.08),transparent 60%)}.why-title{color:#171827}.why-feature{background:rgba(255,255,255,.65);border-color:rgba(115,87,232,.1);box-shadow:0 8px 24px rgba(30,35,60,.04)}
/* ===== CAPA / SERVICE INDEX ===== */
.capa-card,.capa-hero{background:rgba(255,255,255,.8);border-color:rgba(115,87,232,.1);box-shadow:0 8px 25px rgba(30,35,60,.04)}.capa-card:hover{border-color:rgba(115,87,232,.3);box-shadow:0 18px 45px rgba(30,35,60,.1)}
.svc-row{border-bottom-color:rgba(115,87,232,.11)}.svc-row:hover{background:linear-gradient(90deg,rgba(115,87,232,.065),transparent 72%)}.svc-title-icon{background:rgba(115,87,232,.055);border-color:rgba(115,87,232,.15)}.svc-stat-num{color:var(--violet-light)}.svc-arrow{border-color:rgba(115,87,232,.18);color:var(--violet-light)}
/* ===== CTA / FOOTER ===== */
.cta-section{background:linear-gradient(135deg,rgba(115,87,232,.065),rgba(7,155,181,.035),rgba(216,78,152,.035));border-color:rgba(115,87,232,.13);box-shadow:0 20px 55px rgba(30,35,60,.07)}
footer{background:#f1f2f7;border-top-color:rgba(115,87,232,.09)}.footer-col h4{color:#25283a}.footer-col ul li a,.footer-desc,.footer-bottom p,.footer-legal-row a{color:#858da3}.footer-col ul li a:hover,.footer-legal-row a:hover{color:var(--violet-light)}.social-btn{background:#fff;border-color:rgba(115,87,232,.1);color:#858da3}.social-btn:hover{background:rgba(115,87,232,.06);border-color:var(--violet);color:var(--violet-light)}
/* ===== COLORFUL SECTION EYEBROWS ===== */
section:nth-of-type(3) .eyebrow{color:var(--violet-light)}section:nth-of-type(4) .eyebrow{color:var(--cyan)}section:nth-of-type(5) .eyebrow{color:var(--pink)}section:nth-of-type(6) .eyebrow{color:var(--lime)}section:nth-of-type(7) .eyebrow{color:var(--amber)}
::selection{background:rgba(115,87,232,.18);color:#171827}
@media(max-width:900px){.hero-showcase{min-height:520px}.hero-main-image{width:min(82vw,430px)}.hero-float-top{right:0}.hero-float-bottom{left:0}.visual-story-grid{grid-template-columns:1fr 1fr}.story-large{grid-column:1/-1}.accent-story{transform:none}.accent-story:hover{transform:translateY(-7px)}}
@media(max-width:600px){.hero-showcase{min-height:470px}.hero-main-image{width:82%;border-radius:24px}.hero-float-card{padding:10px 12px}.hero-float-card b{font-size:.72rem}.hero-float-card small{font-size:.58rem}.hero-float-top{top:8%;right:-1%}.hero-float-bottom{bottom:8%;left:-1%}.visual-story-grid{grid-template-columns:1fr;gap:12px}.story-large{grid-column:auto}.visual-story-card,.visual-story-card img{min-height:230px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* ==============================================================
   NEXISLAB — WHITE THEME / HOMEPAGE STRUCTURE POLISH
   IMPORTANT: load this file AFTER style.css and premium-light.css.
   This layer fixes the homepage-specific sections, including
   legacy inline dark-theme styles.
================================================================ */

/* ---------- PAGE RHYTHM ---------- */

main{
  background:
    radial-gradient(circle at 92% 8%,rgba(118,87,232,.045),transparent 24rem),
    radial-gradient(circle at 6% 42%,rgba(7,155,181,.035),transparent 22rem);
}

main > section{
  padding:clamp(72px,8vw,112px) 5%;
}

main > section + section{
  border-top:1px solid rgba(30,35,60,.045);
}

/* Give every major section a subtle visual identity without dark blocks. */
main > section:nth-of-type(even){
  background:linear-gradient(180deg,rgba(247,248,252,.72),rgba(255,255,255,.96));
}

main > section:nth-of-type(odd){
  background:rgba(255,255,255,.72);
}

/* Never allow legacy dark inline section backgrounds to win. */
main > section[style*="background:rgba(20,26,44"],
main > section[style*="background: rgba(20,26,44"],
main > section[style*="background:rgb(20,26,44"]{
  background:
    radial-gradient(circle at 50% 0%,rgba(118,87,232,.055),transparent 38rem),
    linear-gradient(180deg,#f7f8fc 0%,#fff 72%) !important;
}

/* ---------- SECTION HEADINGS ---------- */

.center.reveal{
  max-width:920px;
  margin-left:auto;
  margin-right:auto;
}

.sec-title{
  color:#16182a;
  font-size:clamp(2.25rem,4.4vw,3.65rem);
  letter-spacing:-1.8px;
  line-height:1.04;
  text-wrap:balance;
}

.sec-title .grad{
  background:
    linear-gradient(100deg,#6847d9 0%,#3f7ee8 46%,#079bb5 72%,#d94f99 100%);
  -webkit-background-clip:text;
  background-clip:text;
}

.sec-sub{
  color:#667087;
  font-size:1.02rem;
  line-height:1.85;
  max-width:650px;
}

.eyebrow{
  color:#6847d9;
  font-size:.68rem;
  letter-spacing:3.2px;
  font-weight:700;
}

.eyebrow::before{
  background:linear-gradient(135deg,#7657e8,#079bb5);
  box-shadow:0 0 0 4px rgba(118,87,232,.07);
}

/* ---------- HERO ---------- */

.hero{
  min-height:min(860px,calc(100vh - 130px));
  padding-top:clamp(90px,9vw,130px);
  padding-bottom:clamp(70px,8vw,110px);
}

.hero::after{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  right:-180px;
  top:20%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(118,87,232,.10),transparent 68%);
  pointer-events:none;
}

.hero-gradient-bg::after{
  background:
    radial-gradient(ellipse 75% 55% at 50% 0%,transparent 0%,rgba(247,248,252,.88) 76%);
}

.hero-gradient-bg::before{
  opacity:.65;
}

.hero h1{
  color:#141627;
  letter-spacing:-2.8px;
}

.hero p{
  color:#5f687d;
}

.hero .hero-stats,
.hero .hero-stat,
.hero .hero-card{
  border-color:rgba(118,87,232,.12);
  box-shadow:0 16px 45px rgba(30,35,60,.08);
}

/* ---------- MARQUEE ---------- */

.marquee-section{
  padding:20px 0;
  background:#fff;
  border-top:1px solid rgba(118,87,232,.10);
  border-bottom:1px solid rgba(118,87,232,.10);
  box-shadow:0 5px 20px rgba(30,35,60,.035);
}

.marquee-track{
  gap:5rem;
}

.marquee-item{
  color:#8a92a7;
}

.marquee-item svg{
  color:#7657e8;
}

.marquee-item:nth-child(3n) svg{color:#079bb5}
.marquee-item:nth-child(4n) svg{color:#d94f99}
.marquee-item:nth-child(5n) svg{color:#6f9300}

/* ==============================================================
   WHY CHOOSE US
   Replaces the heavy dark rectangle visible in the screenshot.
================================================================ */

section > .why-section{
  margin:0 auto;
  max-width:1380px;
  border-radius:32px;
  padding:clamp(34px,5vw,70px);
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 20%,rgba(118,87,232,.12),transparent 24rem),
    radial-gradient(circle at 92% 18%,rgba(7,155,181,.10),transparent 22rem),
    linear-gradient(135deg,#ffffff 0%,#f7f4ff 52%,#f2fbfd 100%);
  border:1px solid rgba(118,87,232,.14);
  box-shadow:
    0 25px 70px rgba(30,35,60,.09),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.why-section::before{
  opacity:1;
  background:
    linear-gradient(115deg,rgba(255,255,255,.7),transparent 42%),
    radial-gradient(circle at 76% 80%,rgba(217,79,153,.055),transparent 22rem);
}

.why-inner{
  max-width:1180px;
  margin:auto;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,5rem);
}

.why-tag{
  color:#079bb5;
  font-family:var(--mono);
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  font-size:.68rem;
}

.why-title{
  color:#151729;
  font-size:clamp(2.7rem,5vw,4.7rem);
  line-height:.98;
  letter-spacing:-2.5px;
}

.why-title span{
  background:linear-gradient(100deg,#6847d9,#3d83e9,#079bb5);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.why-collage{
  min-height:330px;
  margin-top:2rem;
}

.why-photo{
  border:8px solid #fff;
  border-radius:8px;
  box-shadow:
    0 18px 35px rgba(30,35,60,.16),
    0 4px 10px rgba(30,35,60,.08);
}

.why-photo-inner{
  overflow:hidden;
  border-radius:2px;
}

.why-deco-ring{
  border-color:rgba(118,87,232,.32);
}

.why-deco-dot{
  background:#079bb5;
  box-shadow:0 0 0 5px rgba(7,155,181,.08);
}

.why-deco-star{
  color:#d7a800;
}

.why-deco-badge{
  background:#fff !important;
  color:#6847d9 !important;
  border:1px solid rgba(118,87,232,.15) !important;
  box-shadow:0 10px 25px rgba(30,35,60,.09);
  border-radius:999px !important;
}

.why-features{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.why-feature{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:1rem;
  align-items:start;
  padding:1.15rem 1.25rem;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(118,87,232,.11);
  border-radius:16px;
  box-shadow:0 8px 25px rgba(30,35,60,.045);
  transition:.3s ease;
}

.why-feature:hover{
  transform:translateY(-3px);
  border-color:rgba(118,87,232,.26);
  box-shadow:0 18px 35px rgba(30,35,60,.09);
}

.why-feature-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(118,87,232,.10),rgba(7,155,181,.08));
  border:1px solid rgba(118,87,232,.12);
  font-size:1.3rem;
}

.why-feature-title{
  color:#202236;
  font-family:var(--display);
  font-size:1rem;
  font-weight:700;
  line-height:1.35;
  margin-bottom:.35rem;
}

.why-feature-desc{
  color:#69738a;
  font-size:.83rem;
  line-height:1.65;
}

/* ---------- SERVICES ---------- */

.capa-section{
  max-width:1180px;
  margin:0 auto;
}

.capa-head{
  max-width:780px;
  margin:0 auto 3rem;
  text-align:center;
}

.capa-head .eyebrow{
  justify-content:center;
}

.svc-row{
  border-bottom:1px solid rgba(118,87,232,.11);
  border-radius:14px;
  padding:1.25rem 1rem;
  transition:.3s ease;
}

.svc-row:hover{
  background:linear-gradient(90deg,rgba(118,87,232,.055),rgba(7,155,181,.025),transparent);
}

.svc-title{
  color:#202236;
}

.svc-num{
  color:#9aa1b2;
}

.svc-desc{
  color:#69738a;
}

.svc-title-icon{
  background:rgba(118,87,232,.065);
  border-color:rgba(118,87,232,.14);
}

.svc-stat-num{
  color:#6847d9;
}

.svc-stat-label{
  color:#8d95a8;
}

.svc-arrow{
  background:#fff;
  color:#6847d9;
  border-color:rgba(118,87,232,.16);
}

/* ---------- 4-STEP PROCESS ---------- */

.path-wrap{
  max-width:1180px;
  margin:3.8rem auto 0;
  padding:1rem 0 0;
}

.path-line{
  background:linear-gradient(90deg,#7657e8,#079bb5,#6f9300,#d94f99);
  opacity:.22;
  height:2px;
}

.path-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.25rem;
}

.path-step{
  position:relative;
  padding:0 1rem;
}

.path-node{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  margin:0 auto 1.5rem;
  background:#fff;
  border:2px solid #7657e8;
  border-radius:50%;
  color:#6847d9;
  font-family:var(--display);
  font-weight:700;
  font-size:.95rem;
  box-shadow:0 8px 22px rgba(118,87,232,.13);
  position:relative;
  z-index:2;
}

.path-step:nth-child(2) .path-node{
  border-color:#079bb5;
  color:#078aa2;
}

.path-step:nth-child(3) .path-node{
  border-color:#6f9300;
  color:#648500;
}

.path-step:nth-child(4) .path-node{
  border-color:#d94f99;
  color:#c7448b;
}

.path-step-title{
  color:#202236;
  font-family:var(--display);
  font-size:1rem;
  font-weight:700;
  margin-bottom:.45rem;
}

.path-step-desc{
  color:#69738a;
  font-size:.82rem;
  line-height:1.7;
}

.path-step-dur{
  color:#9aa1b2;
  font-family:var(--mono);
  font-size:.68rem;
  margin-top:.85rem;
}

/* ---------- STATS BAND ---------- */

.stats-band{
  max-width:1180px;
  margin-left:auto !important;
  margin-right:auto !important;
  background:#fff;
  border:1px solid rgba(118,87,232,.12);
  border-radius:20px;
  box-shadow:0 14px 40px rgba(30,35,60,.065);
  overflow:hidden;
}

.stats-band-item{
  background:#fff;
  border-right:1px solid rgba(118,87,232,.10);
}

.stats-band-item:nth-child(2){background:linear-gradient(180deg,#fff,#f7fdff)}
.stats-band-item:nth-child(3){background:linear-gradient(180deg,#fff,#fbfff3)}
.stats-band-item:nth-child(4){background:linear-gradient(180deg,#fff,#fff8fc)}

.stats-band-num{
  font-size:2.8rem;
  background:linear-gradient(100deg,#6847d9,#3d83e9,#079bb5);
  -webkit-background-clip:text;
  background-clip:text;
}

.stats-band-label{
  color:#7f879a;
}

/* ---------- PORTFOLIO ---------- */

.portfolio-slider-wrap{
  padding:2rem 0 2.8rem;
}

.portfolio-card{
  border:1px solid rgba(118,87,232,.13);
  background:#fff;
  box-shadow:0 12px 32px rgba(30,35,60,.065);
}

.portfolio-card::after{
  background:linear-gradient(180deg,transparent 36%,rgba(12,14,26,.82));
}

.portfolio-card-tag{
  color:#6847d9;
  background:rgba(255,255,255,.88);
  border-color:rgba(255,255,255,.9);
}

/* ---------- TESTIMONIALS / GENERIC CARDS ---------- */

.testimonial-card,
.testi-mini,
.process-item{
  background:#fff;
  border:1px solid rgba(118,87,232,.10);
  box-shadow:0 10px 30px rgba(30,35,60,.05);
}

.testimonial-card:hover,
.testi-mini:hover,
.process-item:hover{
  border-color:rgba(118,87,232,.25);
  box-shadow:0 18px 42px rgba(30,35,60,.09);
}

/* ---------- CTA ---------- */

.cta-section{
  max-width:1180px;
  margin:0 auto;
  padding:clamp(48px,6vw,72px) 30px;
  background:
    radial-gradient(circle at 20% 0%,rgba(118,87,232,.10),transparent 32%),
    radial-gradient(circle at 80% 100%,rgba(7,155,181,.08),transparent 32%),
    linear-gradient(135deg,#fff,#f7f4ff 58%,#f3fbfd);
  border:1px solid rgba(118,87,232,.13);
  box-shadow:0 20px 55px rgba(30,35,60,.08);
}

.cta-section .sec-title{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}

/* ---------- OFFER / PROMO ---------- */

.offer-section{
  background:linear-gradient(135deg,#fff8f5,#fff,#fff8fc) !important;
  border:1px solid rgba(217,79,153,.14) !important;
  box-shadow:0 20px 55px rgba(30,35,60,.07) !important;
}

.offer-right{
  background:rgba(255,255,255,.90) !important;
  border-color:rgba(217,79,153,.16) !important;
  box-shadow:0 12px 30px rgba(30,35,60,.06);
}

.offer-right-title{
  color:#202236 !important;
}

.offer-right-sub{
  color:#737c91 !important;
}

.offer-input,
.offer-phone-code,
.offer-select{
  background:#fff !important;
  color:#202236 !important;
  border-color:rgba(217,79,153,.18) !important;
}

.offer-input::placeholder{
  color:#a0a7b6 !important;
}

.offer-select option{
  background:#fff !important;
  color:#202236 !important;
}

.offer-list li{
  color:#69738a !important;
}

.offer-meta{
  color:#8d95a8 !important;
}

/* ---------- FOOTER ---------- */

footer{
  background:#f7f8fc;
}

/* ---------- INLINE UTILITY FIXES ---------- */

/* Existing inline spacing such as style="margin-top:2.6rem" should not
   make sections feel randomly spaced. */
main .center.reveal[style*="margin-top"]{
  margin-top:2.5rem !important;
}

/* Inline "display:flex; justify-content:center" headings get a consistent width. */
.eyebrow[style*="justify-content:center"]{
  display:flex !important;
  justify-content:center !important;
}

/* ---------- RESPONSIVE ---------- */

@media(max-width:900px){
  .why-inner{
    grid-template-columns:1fr;
  }

  .why-collage{
    max-width:560px;
    margin-left:auto;
    margin-right:auto;
  }

  .path-steps{
    grid-template-columns:1fr 1fr;
    gap:2rem 1rem;
  }

  .path-line{
    display:none;
  }

  .path-node{
    margin-left:0;
  }
}

@media(max-width:700px){
  main > section{
    padding:64px 5%;
  }

  .why-section{
    border-radius:22px;
    padding:30px 22px !important;
  }

  .why-title{
    font-size:clamp(2.5rem,12vw,3.6rem);
  }

  .why-collage{
    min-height:300px;
    transform:scale(.92);
    transform-origin:center top;
    margin-bottom:-20px;
  }

  .why-feature{
    grid-template-columns:46px 1fr;
    padding:1rem;
  }

  .why-feature-icon{
    width:42px;
    height:42px;
  }

  .path-steps{
    grid-template-columns:1fr;
    gap:1.6rem;
  }

  .path-step{
    padding:0;
  }

  .path-node{
    margin:0 0 .9rem;
  }

  .stats-band{
    grid-template-columns:1fr 1fr;
  }

  .stats-band-item{
    border-right:0;
    border-bottom:1px solid rgba(118,87,232,.10);
  }

  .stats-band-item:nth-child(odd){
    border-right:1px solid rgba(118,87,232,.10);
  }
}

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

/* ==============================================================
   NEXISLAB — VISUAL RICHNESS V2
   Richer color system + tasteful corner photography.
   CSS-only: no HTML changes required.
================================================================ */

/* ---------- COLOR SYSTEM ---------- */

:root{
  --nl-purple:#7057e8;
  --nl-blue:#3f82e8;
  --nl-cyan:#08a7bd;
  --nl-pink:#df579d;
  --nl-green:#77a900;
  --nl-ink:#151729;
  --nl-muted:#68738a;
  --nl-soft:#f6f7fc;
}

/* ---------- SECTION COLOR "TOUCHES" ---------- */

main > section:nth-of-type(1){
  background:
    radial-gradient(circle at 8% 15%,rgba(112,87,232,.08),transparent 25rem),
    radial-gradient(circle at 92% 85%,rgba(8,167,189,.055),transparent 23rem),
    #fff;
}

main > section:nth-of-type(2){
  background:
    linear-gradient(180deg,#f7f5ff 0%,#fff 62%);
}

main > section:nth-of-type(3){
  background:
    radial-gradient(circle at 90% 20%,rgba(223,87,157,.055),transparent 22rem),
    #fff;
}

main > section:nth-of-type(4){
  background:
    linear-gradient(180deg,#f3fbfc 0%,#fff 70%);
}

main > section:nth-of-type(5){
  background:
    radial-gradient(circle at 8% 70%,rgba(119,169,0,.045),transparent 20rem),
    #fff;
}

/* Give different content groups their own accent family. */
.services-section .eyebrow,
.capa-section .eyebrow{
  color:var(--nl-purple);
}

.path-wrap + .eyebrow,
.process-section .eyebrow{
  color:var(--nl-cyan);
}

.portfolio-section .eyebrow{
  color:var(--nl-pink);
}

/* ---------- COLORFUL SECTION DIVIDERS ---------- */

main > section::after{
  content:"";
  display:block;
  width:92px;
  height:3px;
  margin:52px auto -66px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--nl-purple),var(--nl-cyan),var(--nl-pink));
  opacity:.32;
}

main > section:last-of-type::after{
  display:none;
}

/* ---------- PROCESS: PREMIUM PALETTE ---------- */

.path-wrap{
  position:relative;
  padding:2rem 0 1rem;
}

.path-wrap::before,
.path-wrap::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}

.path-wrap::before{
  width:190px;
  height:190px;
  left:-110px;
  top:10px;
  background:radial-gradient(circle,rgba(112,87,232,.09),transparent 68%);
}

.path-wrap::after{
  width:220px;
  height:220px;
  right:-120px;
  bottom:-30px;
  background:radial-gradient(circle,rgba(8,167,189,.08),transparent 68%);
}

.path-step{
  padding:1.35rem 1.2rem 1.5rem;
  border-radius:20px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(30,35,60,.055);
  box-shadow:0 8px 26px rgba(30,35,60,.035);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}

.path-step:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 42px rgba(30,35,60,.085);
}

.path-step:nth-child(1){
  border-top:3px solid var(--nl-purple);
}

.path-step:nth-child(2){
  border-top:3px solid var(--nl-cyan);
}

.path-step:nth-child(3){
  border-top:3px solid var(--nl-green);
}

.path-step:nth-child(4){
  border-top:3px solid var(--nl-pink);
}

.path-node{
  margin-left:0;
}

.path-step:nth-child(1) .path-node{
  box-shadow:0 10px 24px rgba(112,87,232,.17);
  background:linear-gradient(145deg,#fff,#f5f1ff);
}

.path-step:nth-child(2) .path-node{
  box-shadow:0 10px 24px rgba(8,167,189,.15);
  background:linear-gradient(145deg,#fff,#effcfe);
}

.path-step:nth-child(3) .path-node{
  box-shadow:0 10px 24px rgba(119,169,0,.13);
  background:linear-gradient(145deg,#fff,#f8fdea);
}

.path-step:nth-child(4) .path-node{
  box-shadow:0 10px 24px rgba(223,87,157,.14);
  background:linear-gradient(145deg,#fff,#fff3f9);
}

.path-step-title{
  font-size:1.08rem;
}

.path-step-desc{
  min-height:66px;
}

/* ---------- CORNER IMAGE: PROCESS SECTION ---------- */

.path-wrap .path-step:first-child::after{
  content:"";
  position:absolute;
  width:96px;
  height:96px;
  left:-118px;
  top:-28px;
  border-radius:22px;
  background:
    linear-gradient(145deg,rgba(112,87,232,.08),rgba(255,255,255,.15)),
    url("https://images.unsplash.com/photo-1553877522-43269d4ea984?auto=format&fit=crop&w=260&q=75")
    center/cover;
  border:6px solid rgba(255,255,255,.9);
  box-shadow:0 15px 32px rgba(30,35,60,.10);
  transform:rotate(-8deg);
  opacity:.88;
}

/* ---------- WHY SECTION: CORNER PHOTO ---------- */

.why-section{
  position:relative;
}

.why-section::after{
  content:"";
  position:absolute;
  right:-26px;
  bottom:-32px;
  width:170px;
  height:170px;
  border-radius:34px;
  background:
    linear-gradient(145deg,rgba(112,87,232,.10),rgba(8,167,189,.04)),
    url("https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=420&q=78")
    center/cover;
  border:9px solid rgba(255,255,255,.88);
  box-shadow:0 22px 45px rgba(30,35,60,.12);
  transform:rotate(7deg);
  opacity:.9;
  pointer-events:none;
}

.why-section::before{
  content:"";
  position:absolute;
  left:-55px;
  top:18px;
  width:110px;
  height:110px;
  border-radius:50%;
  background:
    linear-gradient(145deg,rgba(8,167,189,.09),rgba(255,255,255,.3)),
    url("https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=300&q=70")
    center/cover;
  border:7px solid rgba(255,255,255,.9);
  box-shadow:0 15px 35px rgba(30,35,60,.09);
  transform:rotate(-9deg);
  opacity:.78;
  pointer-events:none;
}

/* ---------- SERVICES: SOFT COLOR CARDS ---------- */

.svc-row{
  position:relative;
  overflow:hidden;
}

.svc-row::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  border-radius:0 4px 4px 0;
  background:linear-gradient(180deg,var(--nl-purple),var(--nl-cyan));
  opacity:0;
  transition:.3s ease;
}

.svc-row:nth-child(3n)::before{
  background:linear-gradient(180deg,var(--nl-cyan),var(--nl-green));
}

.svc-row:nth-child(4n)::before{
  background:linear-gradient(180deg,var(--nl-pink),var(--nl-purple));
}

.svc-row:hover::before{
  opacity:1;
}

.svc-title-icon{
  box-shadow:0 8px 20px rgba(112,87,232,.08);
}

/* Decorative image tucked behind the service list. */
.capa-section{
  position:relative;
}

.capa-section::after{
  content:"";
  position:absolute;
  right:-50px;
  top:120px;
  width:155px;
  height:205px;
  border-radius:28px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.12),rgba(112,87,232,.08)),
    url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=420&q=75")
    center/cover;
  border:8px solid rgba(255,255,255,.92);
  box-shadow:0 20px 45px rgba(30,35,60,.10);
  transform:rotate(6deg);
  opacity:.62;
  pointer-events:none;
}

/* ---------- STATS: COLORFUL MINI PANELS ---------- */

.stats-band{
  position:relative;
}

.stats-band-item{
  position:relative;
  overflow:hidden;
}

.stats-band-item::after{
  content:"";
  position:absolute;
  width:90px;
  height:90px;
  right:-28px;
  bottom:-32px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(112,87,232,.12),transparent 68%);
}

.stats-band-item:nth-child(2)::after{
  background:radial-gradient(circle,rgba(8,167,189,.12),transparent 68%);
}

.stats-band-item:nth-child(3)::after{
  background:radial-gradient(circle,rgba(119,169,0,.12),transparent 68%);
}

.stats-band-item:nth-child(4)::after{
  background:radial-gradient(circle,rgba(223,87,157,.12),transparent 68%);
}

/* ---------- PORTFOLIO: IMAGE-RICH BACKGROUND ---------- */

.portfolio-slider-wrap{
  position:relative;
}

.portfolio-slider-wrap::before{
  content:"";
  position:absolute;
  left:-80px;
  bottom:15px;
  width:145px;
  height:145px;
  border-radius:30px;
  background:
    linear-gradient(145deg,rgba(112,87,232,.10),rgba(8,167,189,.05)),
    url("https://images.unsplash.com/photo-1558655146-d09347e92766?auto=format&fit=crop&w=360&q=75")
    center/cover;
  border:8px solid rgba(255,255,255,.9);
  box-shadow:0 20px 40px rgba(30,35,60,.10);
  transform:rotate(-7deg);
  opacity:.72;
  pointer-events:none;
}

.portfolio-card{
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}

.portfolio-card:hover{
  transform:translateY(-7px);
  box-shadow:0 24px 50px rgba(30,35,60,.13);
}

/* ---------- CTA: WARMER COLOR ---------- */

.cta-section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 15% 20%,rgba(112,87,232,.13),transparent 25rem),
    radial-gradient(circle at 85% 80%,rgba(223,87,157,.10),transparent 22rem),
    linear-gradient(135deg,#ffffff 0%,#f7f3ff 48%,#eefbfd 100%);
}

.cta-section::after{
  content:"";
  position:absolute;
  right:-28px;
  bottom:-42px;
  width:185px;
  height:185px;
  border-radius:38px;
  background:
    linear-gradient(145deg,rgba(112,87,232,.04),rgba(8,167,189,.06)),
    url("https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&w=420&q=75")
    center/cover;
  border:9px solid rgba(255,255,255,.88);
  box-shadow:0 22px 45px rgba(30,35,60,.11);
  transform:rotate(8deg);
  opacity:.72;
  pointer-events:none;
}

/* Keep CTA text above decorative image. */
.cta-section > *{
  position:relative;
  z-index:2;
}

/* ---------- FLOATING COLOR ORBS ---------- */

.why-section,
.capa-section,
.portfolio-slider-wrap,
.path-wrap,
.cta-section{
  isolation:isolate;
}

.why-section .why-inner,
.capa-section > *,
.portfolio-slider-wrap > *,
.path-wrap > *,
.cta-section > *{
  position:relative;
  z-index:2;
}

/* ---------- MOBILE: HIDE LARGE CORNER PHOTOS ---------- */

@media(max-width:1000px){
  .capa-section::after{
    right:-30px;
    opacity:.34;
  }

  .path-wrap .path-step:first-child::after{
    display:none;
  }

  .why-section::before{
    left:-30px;
    opacity:.45;
  }

  .why-section::after{
    right:-45px;
    opacity:.48;
  }
}

@media(max-width:700px){
  main > section::after{
    margin-top:42px;
    margin-bottom:-52px;
  }

  .capa-section::after,
  .portfolio-slider-wrap::before,
  .cta-section::after{
    display:none;
  }

  .why-section::before{
    width:72px;
    height:72px;
    left:-22px;
    top:10px;
  }

  .why-section::after{
    width:100px;
    height:100px;
    right:-28px;
    bottom:-20px;
  }

  .path-step{
    padding:1.1rem;
  }
}

/* Extracted page-specific CSS. Navbar/topbar styles intentionally removed. */

/* =========================================================
   MAIN VISUAL
========================================================= */

.quote-visual{
  position:relative;
  isolation:isolate;

  min-width:0;
  overflow:hidden;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:clamp(2rem,4vw,4rem);

  background:
    radial-gradient(
      circle at 15% 15%,
      rgba(139,92,246,.18),
      transparent 30%
    ),
    radial-gradient(
      circle at 85% 20%,
      rgba(6,182,212,.16),
      transparent 30%
    ),
    radial-gradient(
      circle at 50% 100%,
      rgba(236,72,153,.13),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f7f5ff 38%,
      #f4fbff 70%,
      #fff7fc 100%
    );

  border-right:1px solid rgba(109,74,255,.12);
}


/* =========================================================
   SOFT GRID
========================================================= */

.quote-visual::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;

  background-image:
    linear-gradient(
      rgba(109,74,255,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(6,182,212,.035) 1px,
      transparent 1px
    );

  background-size:34px 34px;

  mask-image:
    radial-gradient(
      ellipse at center,
      black 20%,
      transparent 78%
    );
}


/* =========================================================
   MOVING LIGHT
========================================================= */

.quote-visual::after{
  content:"";
  position:absolute;

  width:360px;
  height:360px;

  top:-160px;
  right:-120px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(6,182,212,.22),
      rgba(109,74,255,.08) 45%,
      transparent 70%
    );

  filter:blur(20px);
  z-index:-1;

  animation:quoteOrbMove 9s ease-in-out infinite alternate;
}

@keyframes quoteOrbMove{
  0%{
    transform:translate(0,0) scale(1);
  }
  50%{
    transform:translate(-50px,35px) scale(1.12);
  }
  100%{
    transform:translate(-20px,70px) scale(.95);
  }
}


/* =========================================================
   CENTRAL GLOW
========================================================= */

.quote-visual-glow{
  position:absolute;

  width:clamp(180px,28vw,360px);
  height:clamp(180px,28vw,360px);

  left:50%;
  top:38%;

  transform:translate(-50%,-50%);

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(109,74,255,.20) 0%,
      rgba(59,130,246,.12) 32%,
      rgba(6,182,212,.08) 50%,
      transparent 72%
    );

  filter:blur(25px);

  animation:quoteGlowPulse 5s ease-in-out infinite;

  z-index:0;
}

@keyframes quoteGlowPulse{
  0%,100%{
    opacity:.55;
    transform:translate(-50%,-50%) scale(.9);
  }

  50%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.12);
  }
}


/* =========================================================
   SPARKLES
========================================================= */

.quote-sparkle{
  position:absolute;

  width:7px;
  height:7px;

  border-radius:50%;

  background:var(--q-cyan);

  box-shadow:
    0 0 8px var(--q-cyan),
    0 0 20px rgba(6,182,212,.45);

  animation:
    sparkleTwinkle 3s ease-in-out infinite,
    sparkleFloat 6s ease-in-out infinite;

  z-index:1;
}

.quote-sparkle:nth-child(2){
  background:var(--q-pink);
  box-shadow:
    0 0 8px var(--q-pink),
    0 0 20px rgba(236,72,153,.35);

  animation-delay:.7s;
}

.quote-sparkle:nth-child(3){
  background:var(--q-violet);
  box-shadow:
    0 0 8px var(--q-violet),
    0 0 20px rgba(109,74,255,.4);

  animation-delay:1.4s;
}

@keyframes sparkleTwinkle{
  0%,100%{
    opacity:.25;
    transform:scale(.65);
  }

  50%{
    opacity:1;
    transform:scale(1.25);
  }
}

@keyframes sparkleFloat{
  0%,100%{
    margin-top:0;
  }

  50%{
    margin-top:-14px;
  }
}


/* =========================================================
   MASCOT / IMAGE
========================================================= */

.quote-mascot{
  position:relative;
  z-index:2;

  width:min(100%,250px);
  max-height:260px;

  object-fit:contain;

  filter:
    drop-shadow(0 20px 30px rgba(80,60,180,.14))
    drop-shadow(0 5px 15px rgba(6,182,212,.08));

  animation:
    quoteMascotFloat 5s ease-in-out infinite;

  transition:
    transform .45s ease,
    filter .45s ease;
}

.quote-mascot:hover{
  transform:
    translateY(-8px)
    rotate(1deg)
    scale(1.025);

  filter:
    drop-shadow(0 28px 45px rgba(80,60,180,.20))
    drop-shadow(0 8px 20px rgba(6,182,212,.15));
}

@keyframes quoteMascotFloat{
  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-8px);
  }
}


/* =========================================================
   VISUAL TEXT
========================================================= */

.quote-visual-text{
  position:relative;
  z-index:3;

  width:100%;
  max-width:360px;

  text-align:center;

  margin-top:clamp(1rem,2vw,1.8rem);

  padding:0 .5rem;
}

.quote-visual-title{
  margin:0 0 .65rem;

  font-family:var(--q-display);

  font-size:clamp(1.35rem,2.4vw,2rem);

  line-height:1.15;

  font-weight:800;

  letter-spacing:-.035em;

  color:var(--q-dark);

  background:
    linear-gradient(
      100deg,
      var(--q-violet),
      var(--q-blue) 45%,
      var(--q-cyan) 75%,
      var(--q-pink)
    );

  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;

  background-size:220% auto;

  animation:gradientText 6s ease infinite;
}

@keyframes gradientText{
  0%,100%{
    background-position:0% 50%;
  }

  50%{
    background-position:100% 50%;
  }
}

.quote-visual-sub{
  width:100%;
  max-width:330px;

  margin:0 auto;

  color:var(--q-muted);

  font-family:var(--q-body);

  font-size:.86rem;

  line-height:1.7;

  overflow-wrap:anywhere;
}


/* =========================================================
   STATS
========================================================= */

.quote-visual-stats{
  width:100%;
  max-width:390px;

  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:.7rem;

  margin-top:1.8rem;

  position:relative;
  z-index:3;
}

.quote-visual-stat{
  min-width:0;

  padding:.85rem .55rem;

  text-align:center;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.95),
      rgba(248,249,255,.75)
    );

  border:1px solid rgba(109,74,255,.13);

  border-radius:15px;

  box-shadow:
    0 10px 25px rgba(55,45,120,.07),
    inset 0 1px 0 rgba(255,255,255,.9);

  backdrop-filter:blur(10px);

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}

.quote-visual-stat:nth-child(1){
  border-top:2px solid var(--q-violet);
}

.quote-visual-stat:nth-child(2){
  border-top:2px solid var(--q-cyan);
}

.quote-visual-stat:nth-child(3){
  border-top:2px solid var(--q-pink);
}

.quote-visual-stat:hover{
  transform:translateY(-5px);

  border-color:rgba(109,74,255,.3);

  box-shadow:
    0 18px 35px rgba(55,45,120,.12);
}

.quote-visual-stat-num{
  display:block;

  font-family:var(--q-display);

  font-size:clamp(1rem,2vw,1.35rem);

  font-weight:800;

  background:
    linear-gradient(
      100deg,
      var(--q-violet),
      var(--q-blue),
      var(--q-cyan)
    );

  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.quote-visual-stat-label{
  display:block;

  margin-top:.18rem;

  color:#8990a8;

  font-family:var(--q-body);

  font-size:.61rem;

  font-weight:600;

  text-transform:uppercase;

  letter-spacing:.07em;

  overflow-wrap:anywhere;
}


/* =========================================================
   FORM SIDE — IMPORTANT FIX
========================================================= */

.quote-form,
.quote-content,
.quote-panel,
.quote-form-panel{
  min-width:0;
  max-width:100%;
  overflow:hidden;
}


/* Every common form wrapper */
.quote-form input,
.quote-form textarea,
.quote-form select,
.quote-form button,
.quote-content input,
.quote-content textarea,
.quote-content select,
.quote-content button,
.quote-panel input,
.quote-panel textarea,
.quote-panel select,
.quote-panel button{
  max-width:100%;
  box-sizing:border-box;
}


/* =========================================================
   FORM GRID FIX
========================================================= */

.form-row{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr);

  gap:1rem;

  width:100%;
}


/* Prevent long labels/content from breaking layout */
.form-group{
  min-width:0;
  width:100%;
}

.form-label{
  display:block;

  max-width:100%;

  overflow-wrap:anywhere;
}

.form-input,
.form-textarea,
.form-select{
  width:100%;
  min-width:0;
  max-width:100%;
}


/* =========================================================
   BRIGHT FORM INPUTS
========================================================= */

.form-input,
.form-textarea,
.form-select{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      rgba(248,249,255,.95)
    );

  border:1px solid rgba(109,74,255,.15);

  color:var(--q-text);

  border-radius:13px;

  padding:.82rem 1rem;

  box-shadow:
    0 4px 14px rgba(55,45,120,.035),
    inset 0 1px 0 rgba(255,255,255,.9);

  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
}

.form-input:hover,
.form-textarea:hover,
.form-select:hover{
  border-color:rgba(59,130,246,.25);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus{
  border-color:var(--q-violet);

  outline:none;

  box-shadow:
    0 0 0 4px rgba(109,74,255,.08),
    0 10px 25px rgba(109,74,255,.08);

  transform:translateY(-1px);
}

.form-input::placeholder,
.form-textarea::placeholder{
  color:#a0a6ba;
}


/* =========================================================
   BUDGET BUTTONS
========================================================= */

.budget-option,
.budget-btn,
.form-budget button{
  background:#fff;

  border:1px solid rgba(109,74,255,.14);

  color:#606881;

  border-radius:11px;

  transition:
    .25s ease;

  cursor:pointer;
}

.budget-option:hover,
.budget-btn:hover,
.form-budget button:hover{
  border-color:var(--q-violet);

  color:var(--q-violet);

  background:
    linear-gradient(
      135deg,
      #fff,
      #f5f2ff
    );

  transform:translateY(-2px);

  box-shadow:
    0 8px 20px rgba(109,74,255,.09);
}

.budget-option.active,
.budget-btn.active,
.form-budget button.active{
  color:#fff;

  border-color:transparent;

  background:
    linear-gradient(
      100deg,
      var(--q-violet),
      var(--q-blue),
      var(--q-cyan)
    );

  box-shadow:
    0 10px 25px rgba(109,74,255,.2);
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.btn-primary{
  position:relative;

  width:100%;

  min-height:52px;

  overflow:hidden;

  border:0;

  border-radius:13px;

  color:#fff;

  font-family:var(--q-display);

  font-weight:700;

  background:
    linear-gradient(
      100deg,
      #6947f5,
      #496ff5 45%,
      #08a9d0 100%
    );

  box-shadow:
    0 14px 30px rgba(86,72,220,.20);

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.btn-primary::before{
  content:"";

  position:absolute;

  top:0;
  left:-120%;

  width:70%;
  height:100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.38),
      transparent
    );

  transform:skewX(-20deg);

  animation:buttonShine 4s ease-in-out infinite;
}

@keyframes buttonShine{
  0%,55%{
    left:-120%;
  }

  75%,100%{
    left:140%;
  }
}

.btn-primary:hover{
  transform:translateY(-3px);

  box-shadow:
    0 20px 40px rgba(86,72,220,.28);
}

.btn-primary:active{
  transform:translateY(-1px);
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:900px){

  .quote-visual{
    min-height:480px;

    padding:
      2.5rem
      1.5rem;
      
    border-right:0;
    border-bottom:1px solid rgba(109,74,255,.12);
  }

  .quote-mascot{
    width:min(210px,70vw);
  }

  .quote-visual-stats{
    max-width:420px;
  }
}


@media(max-width:700px){

  .quote-visual{
    min-height:auto;

    padding:
      2.5rem
      1.2rem
      2.2rem;
  }

  .quote-visual-title{
    font-size:1.5rem;
  }

  .quote-visual-sub{
    font-size:.82rem;
  }

  .quote-visual-stats{
    gap:.5rem;
  }

  .quote-visual-stat{
    padding:.75rem .35rem;
    border-radius:12px;
  }

  .quote-visual-stat-num{
    font-size:1rem;
  }

  .quote-visual-stat-label{
    font-size:.55rem;
  }

  .form-row{
    grid-template-columns:1fr;
  }
}


@media(max-width:480px){

  .quote-visual{
    padding:
      2rem
      1rem;
  }

  .quote-mascot{
    width:180px;
    max-height:210px;
  }

  .quote-visual-text{
    margin-top:1rem;
  }

  .quote-visual-title{
    font-size:1.35rem;
  }

  .quote-visual-sub{
    font-size:.78rem;
    line-height:1.6;
  }

  .quote-visual-stats{
    grid-template-columns:1fr;
    max-width:220px;
  }

  .quote-visual-stat{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
  }

  .quote-visual-stat-label{
    margin-top:0;
  }
}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media(max-width:360px){

  .quote-visual{
    padding:
      1.6rem
      .8rem;
  }

  .quote-visual-title{
    font-size:1.2rem;
  }

  .quote-visual-sub{
    font-size:.74rem;
  }

  .quote-visual-stats{
    max-width:200px;
  }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media(prefers-reduced-motion:reduce){

  .quote-visual::after,
  .quote-visual-glow,
  .quote-mascot,
  .quote-sparkle,
  .quote-visual-title,
  .btn-primary::before{
    animation:none !important;
  }

  .quote-mascot{
    transform:none !important;
  }
}

.quote-form-side{padding:2.4rem 2.4rem 2rem}
.quote-eyebrow{font-family:var(--mono);font-size:0.68rem;color:var(--cyan);letter-spacing:3px;text-transform:uppercase;margin-bottom:0.5rem}
.quote-title{font-family:var(--display);font-size:1.5rem;font-weight:700;line-height:1.25;margin-bottom:0.4rem}
.quote-sub{color:var(--text-secondary);font-size:0.84rem;margin-bottom:1.5rem}
.quote-row{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem}
.quote-group{display:flex;flex-direction:column;gap:0.35rem;margin-bottom:0.95rem}
.quote-label{font-size:0.74rem;font-weight:500;color:var(--text-secondary)}
.quote-input,.quote-select,.quote-textarea{background:rgba(255,255,255,0.03);border:1px solid rgba(157,111,255,0.16);
  border-radius:10px;padding:0.68rem 0.95rem;color:var(--text-primary);font-size:0.84rem;font-family:var(--body);
  width:100%;transition:.25s;outline:none}
.quote-input:focus,.quote-select:focus,.quote-textarea:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(157,111,255,0.12)}
.quote-select option{background:var(--bg-card)}
.quote-textarea{height:70px;resize:vertical}
.quote-budget-pills{display:flex;gap:0.5rem;flex-wrap:wrap}
.quote-budget-pill{padding:0.45rem 0.9rem;border-radius:8px;border:1px solid rgba(157,111,255,0.16);background:rgba(255,255,255,0.02);
  font-size:0.74rem;color:var(--text-secondary);cursor:pointer;transition:.25s;font-family:var(--body)}
.quote-budget-pill:hover{border-color:var(--violet-light);color:var(--text-primary)}
.quote-budget-pill.active{background:linear-gradient(135deg,var(--violet),var(--violet-dim));color:#fff;border-color:transparent}
.quote-submit{width:100%;margin-top:0.4rem}
.quote-success{display:none;text-align:center;padding:2.5rem 1rem}
.quote-success.show{display:block}
.quote-success-icon{width:60px;height:60px;border-radius:50%;background:rgba(212,249,104,0.1);border:1px solid rgba(212,249,104,0.3);
  display:flex;align-items:center;justify-content:center;margin:0 auto 1.1rem;font-size:1.6rem}
@media(max-width:760px){
  .quote-modal{grid-template-columns:1fr;max-height:92vh}
  .quote-visual{padding:1.8rem 1.2rem;display:none}
  .quote-row{grid-template-columns:1fr}
  .quote-form-side{padding:2rem 1.5rem 1.6rem}
}

.footer-contact{display:flex;flex-direction:column;gap:0.55rem;margin:1.1rem 0 1.3rem}
.footer-contact-item{display:inline-flex;align-items:center;gap:0.5rem;color:var(--text-secondary);font-size:0.82rem;text-decoration:none;transition:color .25s ease}
.footer-contact-item svg{flex-shrink:0;color:var(--violet-light)}
.footer-contact-item:hover{color:var(--violet-light)}


/* =========================
   Premium Top Contact Bar
========================= */


/* Hover Effect */


/* Animated Underline */


/* Divider */


/* Push navbar below contact bar */


/* Mobile */


:root{
  --about-bg:#f7f8fc;
  --about-white:#ffffff;
  --about-surface:#fbfbfe;
  --about-surface-2:#f3f0ff;
  --about-ink:#171a2b;
  --about-text:#30374c;
  --about-muted:#69738a;
  --about-soft:#929bad;
  --about-violet:#7054e8;
  --about-violet-light:#8167ef;
  --about-violet-deep:#5a40c9;
  --about-cyan:#079db7;
  --about-pink:#d9529b;
  --about-lime:#76a000;
  --about-amber:#d39a00;
  --about-border:rgba(55,61,95,.10);
  --about-border-v:rgba(112,84,232,.20);
  --about-shadow:0 18px 48px rgba(31,36,61,.075);
  --about-shadow-hover:0 25px 65px rgba(31,36,61,.12);
}

/* ---------- HERO ---------- */

.about-hero{
  padding:130px 5% 80px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:60px;
  align-items:center;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 72%,rgba(112,84,232,.075),transparent 25rem),
    radial-gradient(circle at 92% 18%,rgba(7,157,183,.055),transparent 23rem),
    linear-gradient(135deg,#fff 0%,#faf9ff 58%,#f1fbfd 100%);
  border-bottom:1px solid rgba(55,61,95,.055);
}

.about-hero::before{
  content:"";
  position:absolute;
  left:-38px;
  bottom:22px;
  width:140px;
  height:165px;
  border-radius:28px;
  background:
    url("https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=420&q=76")
    center/cover;
  border:8px solid rgba(255,255,255,.95);
  box-shadow:0 20px 45px rgba(31,36,61,.10);
  transform:rotate(-7deg);
  opacity:.46;
  pointer-events:none;
}

.about-hero::after{
  content:"";
  position:absolute;
  right:-30px;
  top:42px;
  width:112px;
  height:112px;
  border-radius:50%;
  background:
    url("https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=340&q=76")
    center/cover;
  border:7px solid rgba(255,255,255,.95);
  box-shadow:0 16px 36px rgba(31,36,61,.09);
  transform:rotate(8deg);
  opacity:.40;
  pointer-events:none;
}

.about-hero > *{
  position:relative;
  z-index:2;
}

/* ---------- HERO CARD STACK ---------- */

.about-card-stack{
  position:relative;
  width:340px;
  height:360px;
  margin:0 auto;
}

.about-card-bg{
  position:absolute;
  width:250px;
  height:280px;
  border-radius:20px;
  background:linear-gradient(145deg,#f1edff,#edfafd);
  border:1px solid rgba(112,84,232,.12);
  box-shadow:0 12px 30px rgba(31,36,61,.045);
}

.about-card-bg:nth-child(1){
  bottom:0;
  right:0;
  transform:rotate(6deg);
}

.about-card-bg:nth-child(2){
  bottom:14px;
  right:14px;
  transform:rotate(3deg);
}

.about-main-card{
  position:absolute;
  bottom:20px;
  right:20px;
  width:250px;
  padding:1.8rem;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(112,84,232,.18);
  border-radius:20px;
  box-shadow:0 25px 60px rgba(31,36,61,.11);
  backdrop-filter:blur(14px);
}

.about-stat-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.9rem;
}

.a-stat{
  padding:.9rem;
  background:linear-gradient(145deg,#faf9ff,#f2fbfd);
  border-radius:13px;
  border:1px solid rgba(112,84,232,.10);
}

.a-stat-num{
  font-family:var(--display);
  font-size:1.6rem;
  font-weight:700;
  background:linear-gradient(100deg,var(--about-violet),var(--about-cyan));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.a-stat-label{
  font-size:.68rem;
  color:var(--about-soft);
}

/* ---------- TEAM GRID ---------- */

.team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.6rem;
  margin-top:3.2rem;
}

.team-card{
  background:rgba(255,255,255,.90);
  border:1px solid var(--about-border);
  border-radius:18px;
  padding:2rem;
  text-align:center;
  transition:.35s;
  box-shadow:0 10px 30px rgba(31,36,61,.045);
}

.team-card:nth-child(3n/**/+1){
  background:linear-gradient(145deg,#fff,#f8f5ff);
}

.team-card:nth-child(3n/**/+2){
  background:linear-gradient(145deg,#fff,#f3fbfd);
}

.team-card:nth-child(3n){
  background:linear-gradient(145deg,#fff,#fff6fb);
}

.team-card:hover{
  border-color:var(--about-border-v);
  transform:translateY(-5px);
  box-shadow:var(--about-shadow-hover);
}

.team-avatar{
  width:74px;
  height:74px;
  border-radius:16px;
  margin:0 auto 1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--display);
  font-size:1.6rem;
  font-weight:700;
  color:#fff;
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 10px 24px rgba(31,36,61,.10);
}

.team-name{
  color:var(--about-ink);
  font-weight:600;
  font-size:.96rem;
  margin-bottom:.15rem;
}

.team-role{
  color:var(--about-violet);
  font-size:.76rem;
  margin-bottom:.55rem;
}

.team-bio{
  color:var(--about-muted);
  font-size:.78rem;
  line-height:1.6;
}

/* ---------- TIMELINE ---------- */

.timeline{
  display:flex;
  flex-direction:column;
  gap:0;
  margin-top:2.4rem;
  position:relative;
}

.timeline::before{
  content:"";
  position:absolute;
  left:20px;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(
    to bottom,
    var(--about-violet),
    var(--about-cyan),
    var(--about-pink)
  );
  border-radius:2px;
  opacity:.45;
}

.tl-item{
  display:grid;
  grid-template-columns:60px 1fr;
  gap:1.2rem;
  padding:0 0 2.2rem;
  position:relative;
}

.tl-item > div:last-child{
  background:rgba(255,255,255,.82);
  border:1px solid var(--about-border);
  border-radius:18px;
  padding:1rem 1.15rem;
  box-shadow:0 9px 25px rgba(31,36,61,.04);
}

.tl-dot{
  width:40px;
  height:40px;
  border-radius:12px;
  background:linear-gradient(145deg,#fff,#f0ecff);
  border:2px solid rgba(112,84,232,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--about-violet);
  flex-shrink:0;
  z-index:1;
  position:relative;
  box-shadow:0 8px 22px rgba(112,84,232,.10);
}

.tl-year{
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--about-cyan);
  margin-bottom:.4rem;
}

.tl-title{
  font-family:var(--display);
  font-weight:600;
  font-size:1.05rem;
  margin-bottom:.3rem;
  color:var(--about-ink);
}

.tl-desc{
  color:var(--about-muted);
  font-size:.86rem;
  line-height:1.65;
}

/* ---------- TEAM INTRO / PHOTO COLLAGE ---------- */

.team-intro-row{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:3.4rem;
  align-items:center;
  margin-top:1rem;
  position:relative;
}

.team-collage{
  position:relative;
  height:340px;
}

.team-collage::before{
  content:"";
  position:absolute;
  width:110px;
  height:110px;
  left:-35px;
  bottom:-20px;
  border-radius:26px;
  background:
    url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=320&q=74")
    center/cover;
  border:7px solid #fff;
  box-shadow:0 16px 35px rgba(31,36,61,.09);
  transform:rotate(-8deg);
  opacity:.35;
}

.team-photo{
  position:absolute;
  background:#fff;
  border:2px solid rgba(112,84,232,.13);
  border-radius:8px;
  padding:8px 8px 22px;
  box-shadow:0 16px 42px rgba(31,36,61,.11);
  transition:transform .4s cubic-bezier(.25,.46,.45,.94);
}

.team-photo:hover{
  transform:scale(1.06) rotate(0deg)!important;
  z-index:10;
  box-shadow:0 22px 56px rgba(112,84,232,.18);
}

.team-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:4px;
  display:block;
}

.team-deco{
  position:absolute;
  pointer-events:none;
}

.team-deco-sun{
  font-size:1.6rem;
  color:var(--about-amber);
  animation:teamTwinkle 2.6s infinite;
}

.team-deco-bubble{
  font-size:1.3rem;
  animation:teamTwinkle 3s infinite .5s;
}

@keyframes teamTwinkle{
  0%,100%{opacity:.4;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.1)}
}

.team-intro-stats{
  display:flex;
  gap:2.2rem;
  margin-top:1.8rem;
  flex-wrap:wrap;
}

.team-intro-stats>div{
  border-left:2px solid rgba(112,84,232,.25);
  padding-left:.85rem;
}

.team-intro-stats>div:nth-child(2){
  border-left-color:rgba(7,157,183,.30);
}

.team-intro-stats>div:nth-child(3){
  border-left-color:rgba(217,82,155,.25);
}

/* ---------- FEATURE ROWS ---------- */

.feature-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3.4rem;
  align-items:center;
  margin-top:4.2rem;
}

.feature-row.reverse .feature-text{order:2}
.feature-row.reverse .feature-panel{order:1}

.feature-title{
  font-family:var(--display);
  font-size:1.7rem;
  font-weight:700;
  letter-spacing:-.5px;
  margin:.5rem 0 1rem;
  color:var(--about-ink);
}

.feature-desc{
  color:var(--about-muted);
  line-height:1.8;
  font-size:.92rem;
  margin-bottom:.9rem;
}

.feature-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.55rem;
  margin-top:1rem;
}

.feature-list li{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  color:var(--about-muted);
  font-size:.86rem;
  line-height:1.5;
}

.feature-list li::before{
  content:"✓";
  color:var(--about-lime);
  font-weight:700;
  flex-shrink:0;
}

.feature-panel{
  position:relative;
  min-height:300px;
  border-radius:24px;
  overflow:hidden;
  background:
    radial-gradient(circle at 30% 25%,rgba(112,84,232,.16),transparent 38%),
    linear-gradient(145deg,#f5f2ff,#eefbfd);
  border:1px solid rgba(112,84,232,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--about-shadow);
}

.feature-panel:nth-child(2){
  background:
    radial-gradient(circle at 70% 30%,rgba(7,157,183,.13),transparent 38%),
    linear-gradient(145deg,#f0fbfd,#fff4fa);
}

.feature-panel-glow{
  position:absolute;
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(112,84,232,.18),transparent 70%);
  filter:blur(20px);
  animation:teamGlowPulse 4s ease-in-out infinite;
}

@keyframes teamGlowPulse{
  0%,100%{opacity:.55;transform:scale(1)}
  50%{opacity:.9;transform:scale(1.15)}
}

.feature-panel-icon{
  position:relative;
  z-index:1;
  font-size:4.4rem;
  filter:drop-shadow(0 10px 25px rgba(112,84,232,.20));
}

.feature-badge{
  position:absolute;
  z-index:2;
  font-family:var(--mono);
  font-size:.68rem;
  padding:.45rem .8rem;
  border-radius:9px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(112,84,232,.16);
  color:var(--about-violet);
  box-shadow:0 8px 20px rgba(31,36,61,.07);
  backdrop-filter:blur(8px);
  animation:teamBadgeFloat 5s ease-in-out infinite;
}

@keyframes teamBadgeFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

/* ---------- FEATURE IMAGE PANELS ---------- */

.feature-panel.has-photo{
  padding:0;
}

.feature-panel-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  opacity:.42;
}

.feature-panel-overlay{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(160deg,rgba(255,255,255,.18),rgba(112,84,232,.18)),
    linear-gradient(160deg,rgba(255,255,255,.20),rgba(240,248,252,.62));
}

.feature-panel.has-photo .feature-badge{
  background:rgba(255,255,255,.90);
}

/* ---------- REPUTATION / RECOGNITION ---------- */

.reputation-section{
  margin:0 5%;
  border-radius:30px;
  overflow:hidden;
  position:relative;
  background:
    radial-gradient(ellipse 65% 55% at 15% 20%,rgba(112,84,232,.10),transparent 70%),
    radial-gradient(ellipse 55% 45% at 88% 82%,rgba(7,157,183,.08),transparent 68%),
    linear-gradient(145deg,#fff,#f7f4ff 58%,#eefbfd);
  border:1px solid rgba(112,84,232,.14);
  padding:80px 5% 100px;
  isolation:isolate;
  box-shadow:var(--about-shadow);
}

.reputation-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%,rgba(112,84,232,.07),transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 90%,rgba(7,157,183,.055),transparent 65%);
  pointer-events:none;
}

.reputation-section::after{
  content:"";
  position:absolute;
  right:-34px;
  top:-28px;
  width:140px;
  height:140px;
  border-radius:30px;
  background:
    url("https://images.unsplash.com/photo-1551836022-d5d88e9218df?auto=format&fit=crop&w=380&q=74")
    center/cover;
  border:8px solid #fff;
  box-shadow:0 20px 42px rgba(31,36,61,.10);
  transform:rotate(7deg);
  opacity:.42;
  z-index:0;
}

.reputation-particles{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

.reputation-head{
  position:relative;
  z-index:1;
  text-align:center;
  margin-bottom:4.4rem;
}

.reputation-tag{
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--about-cyan);
  letter-spacing:3px;
  text-transform:uppercase;
  margin-bottom:1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
}

.reputation-tag::before,
.reputation-tag::after{
  content:"";
  width:24px;
  height:1px;
  background:var(--about-cyan);
  opacity:.5;
}

.reputation-title{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-2px;
  line-height:1.02;
  font-size:clamp(2.2rem,6.5vw,5.2rem);
  color:var(--about-ink);
  text-transform:uppercase;
}

.reputation-title span{
  background:linear-gradient(120deg,var(--about-violet),var(--about-cyan),var(--about-pink));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.badge-field{
  position:relative;
  z-index:1;
  height:380px;
  max-width:980px;
  margin:0 auto;
}

.rep-badge{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:linear-gradient(160deg,#fff,#f5f2ff);
  border:2px solid rgba(112,84,232,.18);
  box-shadow:0 18px 46px rgba(31,36,61,.09);
  transition:transform .4s cubic-bezier(.25,.46,.45,.94),box-shadow .4s,border-color .4s;
  padding:1.1rem;
}

.rep-badge:nth-child(2),
.rep-badge:nth-child(4){
  background:linear-gradient(160deg,#fff,#f1fbfd);
}

.rep-badge:nth-child(5){
  background:linear-gradient(160deg,#fff,#fff4fa);
}

.rep-badge:hover{
  transform:scale(1.1) rotate(0deg)!important;
  z-index:20;
  border-color:var(--about-violet);
  box-shadow:0 26px 60px rgba(112,84,232,.16);
}

.rep-badge.circle{border-radius:50%}

.rep-badge.hex{
  clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0% 50%);
  border-radius:8px;
}

.rep-badge-line1{
  font-family:var(--mono);
  font-size:.6rem;
  color:var(--about-soft);
  letter-spacing:1px;
  text-transform:uppercase;
  margin-bottom:.3rem;
}

.rep-badge-main{
  font-family:var(--display);
  font-weight:700;
  font-size:.92rem;
  line-height:1.15;
  color:var(--about-ink);
}

.rep-badge-sub{
  font-family:var(--mono);
  font-size:.58rem;
  color:var(--about-violet);
  letter-spacing:.5px;
  margin-top:.35rem;
}

.rep-badge-stars{
  color:var(--about-amber);
  font-size:.7rem;
  letter-spacing:1.5px;
  margin-top:.25rem;
}

/* ---------- HERO PHOTO COLLAGE ---------- */

.about-card-stack{
  width:340px;
  height:360px;
}

.about-main-card{
  z-index:3;
}

.about-hero-photo{
  position:absolute;
  border-radius:18px;
  overflow:hidden;
  border:8px solid #fff;
  box-shadow:0 20px 48px rgba(31,36,61,.13);
  transition:transform .4s cubic-bezier(.25,.46,.45,.94);
}

.about-hero-photo:hover{
  transform:scale(1.05) rotate(0deg)!important;
  z-index:5;
}

.about-hero-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.about-hero-photo.p1{
  width:170px;
  height:200px;
  top:4px;
  left:0;
  transform:rotate(-7deg);
  z-index:1;
}

.about-hero-photo.p2{
  width:148px;
  height:175px;
  top:54px;
  left:128px;
  transform:rotate(5deg);
  z-index:2;
}

/* ---------- RESPONSIVE ---------- */

@media(max-width:900px){
  .about-hero{
    grid-template-columns:1fr;
    padding:110px 5% 55px;
  }

  .about-card-stack{
    display:none;
  }

  .team-intro-row{
    grid-template-columns:1fr;
    gap:2rem;
  }

  .team-collage{
    height:260px;
  }

  .feature-row{
    grid-template-columns:1fr;
    gap:2rem;
  }

  .feature-row.reverse .feature-text,
  .feature-row.reverse .feature-panel{
    order:initial;
  }

  .feature-panel{
    min-height:220px;
  }

  .feature-badge{
    font-size:.62rem;
    padding:.35rem .6rem;
  }

  .reputation-section{
    padding:60px 5% 70px;
    margin:0;
  }

  .badge-field{
    height:auto;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1rem;
    max-width:420px;
  }

  .rep-badge{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    transform:rotate(0deg)!important;
    width:100%!important;
    height:160px!important;
  }

  .rep-badge.hex{
    clip-path:none;
    border-radius:16px;
  }

  .reputation-section::after{
    opacity:.22;
  }
}

@media(max-width:600px){
  .about-hero{
    padding-top:95px;
  }

  .about-hero::before{
    width:90px;
    height:110px;
    left:-28px;
    opacity:.24;
  }

  .about-hero::after{
    width:76px;
    height:76px;
    right:-16px;
    opacity:.22;
  }

  .team-grid{
    grid-template-columns:1fr;
  }

  .team-intro-stats{
    gap:1.2rem;
  }

  .timeline::before{
    left:17px;
  }

  .tl-item{
    grid-template-columns:50px 1fr;
    gap:.8rem;
  }

  .tl-item > div:last-child{
    padding:.9rem;
  }

  .reputation-title{
    letter-spacing:-1px;
  }

  .reputation-section::after{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* =========================================================
   ABOUT INTRO — LIGHT MODERN HERO
   ========================================================= */

.about-intro-section {
  position: relative;
  overflow: hidden;
  min-height: 680px;
  padding: 90px 5%;
  background:
    radial-gradient(
      circle at 8% 20%,
      rgba(124, 92, 246, 0.13),
      transparent 30%
    ),
    radial-gradient(
      circle at 88% 80%,
      rgba(34, 211, 238, 0.12),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #ffffff 0%,
      #fbfaff 45%,
      #f7fbff 100%
    );
  border-top: 1px solid rgba(99, 102, 241, 0.08);
  border-bottom: 1px solid rgba(99, 102, 241, 0.08);
  isolation: isolate;
}


/* -----------------------------------------
   BACKGROUND GLOWS
   ----------------------------------------- */

.about-intro-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: -1;
}

.about-intro-bg-glow.glow-purple {
  width: 360px;
  height: 360px;
  left: -160px;
  top: 100px;
  background: rgba(124, 92, 246, 0.16);
}

.about-intro-bg-glow.glow-cyan {
  width: 400px;
  height: 400px;
  right: -180px;
  bottom: -160px;
  background: rgba(34, 211, 238, 0.14);
}


/* -----------------------------------------
   MAIN TWO-COLUMN LAYOUT
   ----------------------------------------- */

.about-intro-inner {
  position: relative;
  z-index: 2;

  max-width: 1380px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(480px, 0.9fr);

  align-items: center;
  gap: clamp(55px, 7vw, 110px);
}


/* =========================================================
   LEFT VISUAL
   ========================================================= */

.about-intro-visual {
  position: relative;
  min-height: 530px;

  display: flex;
  align-items: center;
  justify-content: center;
}


/* -----------------------------------------
   IMAGE CONTAINER
   ----------------------------------------- */

.about-intro-image-wrap {
  position: relative;

  width: min(100%, 610px);
  height: 500px;

  border-radius: 34px;
  overflow: visible;

  transform: rotate(-2deg);

  background: #ffffff;

  border: 1px solid rgba(99, 102, 241, 0.12);

  box-shadow:
    0 35px 80px rgba(31, 41, 78, 0.15),
    0 10px 30px rgba(124, 92, 246, 0.08);

  transition:
    transform 0.5s ease,
    box-shadow 0.5s ease;
}

.about-intro-image-wrap:hover {
  transform: rotate(0deg) translateY(-6px);

  box-shadow:
    0 45px 100px rgba(31, 41, 78, 0.18),
    0 15px 40px rgba(124, 92, 246, 0.13);
}


/* -----------------------------------------
   IMAGE
   ----------------------------------------- */

.about-intro-image {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  border-radius: 33px;
}


/* -----------------------------------------
   IMAGE OVERLAY
   ----------------------------------------- */

.about-image-gradient {
  position: absolute;
  inset: 0;

  border-radius: 33px;

  background:
    linear-gradient(
      180deg,
      rgba(12, 10, 30, 0.02) 25%,
      rgba(12, 10, 30, 0.08) 55%,
      rgba(12, 10, 30, 0.62) 100%
    );

  pointer-events: none;
}


/* -----------------------------------------
   IMAGE LABEL
   ----------------------------------------- */

.about-image-label {
  position: absolute;

  left: 28px;
  bottom: 26px;

  display: flex;
  align-items: center;
  gap: 9px;

  padding: 10px 16px;

  color: #ffffff;

  font-family: var(--mono, monospace);
  font-size: 0.67rem;
  font-weight: 600;

  letter-spacing: 2px;

  background: rgba(15, 18, 35, 0.62);

  border: 1px solid rgba(255, 255, 255, 0.22);

  border-radius: 999px;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.about-label-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #22d3ee;

  box-shadow:
    0 0 0 4px rgba(34, 211, 238, 0.15),
    0 0 15px rgba(34, 211, 238, 0.7);
}


/* =========================================================
   FLOATING IMAGE CARDS
   ========================================================= */

.about-floating-card {
  position: absolute;

  z-index: 5;

  display: flex;
  flex-direction: column;

  min-width: 145px;

  padding: 18px 20px;

  background: rgba(255, 255, 255, 0.94);

  border: 1px solid rgba(99, 102, 241, 0.12);

  border-radius: 18px;

  box-shadow:
    0 20px 45px rgba(31, 41, 78, 0.14);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.about-floating-card strong {
  font-family: var(--display, sans-serif);

  font-size: 1.65rem;
  font-weight: 800;

  line-height: 1;

  background:
    linear-gradient(
      110deg,
      #6846e8,
      #3278e8,
      #11aeca
    );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
}

.about-floating-card span {
  margin-top: 7px;

  color: #64708b;

  font-size: 0.72rem;
  font-weight: 600;
}


/* PROJECT CARD */

.card-projects {
  right: -35px;
  top: 55px;

  transform: rotate(5deg);
}

.card-projects:hover {
  transform: rotate(2deg) translateY(-5px);
}


/* RATING CARD */

.card-rating {
  left: -35px;
  bottom: 45px;

  transform: rotate(-5deg);
}

.card-rating:hover {
  transform: rotate(-2deg) translateY(-5px);
}


/* =========================================================
   DECORATIVE SHAPES
   ========================================================= */

.about-deco-circle {
  position: absolute;

  width: 120px;
  height: 120px;

  right: 3%;
  bottom: 1%;

  border-radius: 50%;

  border: 1px solid rgba(124, 92, 246, 0.25);

  background:
    radial-gradient(
      circle,
      rgba(124, 92, 246, 0.08),
      transparent 70%
    );

  z-index: -1;
}

.about-deco-dots {
  position: absolute;

  width: 100px;
  height: 100px;

  left: 1%;
  top: 3%;

  opacity: 0.5;

  background-image:
    radial-gradient(
      #7c5cf6 1.5px,
      transparent 1.5px
    );

  background-size: 14px 14px;

  mask-image:
    linear-gradient(
      135deg,
      black,
      transparent
    );

  -webkit-mask-image:
    linear-gradient(
      135deg,
      black,
      transparent
    );
}


/* =========================================================
   RIGHT CONTENT
   ========================================================= */

.about-intro-content {
  position: relative;

  max-width: 620px;

  padding: 20px 0;
}


/* -----------------------------------------
   EYEBROW
   ----------------------------------------- */

.about-intro-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 22px;

  color: #6547e9;

  font-family: var(--mono, monospace);

  font-size: 0.72rem;
  font-weight: 700;

  letter-spacing: 3px;
  text-transform: uppercase;
}

.about-intro-eyebrow span {
  width: 9px;
  height: 9px;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      #6846e8,
      #18b8d8
    );

  box-shadow:
    0 0 0 5px rgba(104, 70, 232, 0.08);
}


/* -----------------------------------------
   HEADING
   ----------------------------------------- */

.about-intro-title {
  margin: 0;

  color: #11152a;

  font-family: var(--display, sans-serif);

  font-size: clamp(3.2rem, 5vw, 5.3rem);

  font-weight: 800;

  line-height: 0.98;

  letter-spacing: -3.5px;
}

.about-intro-title span {
  display: inline-block;

  background:
    linear-gradient(
      110deg,
      #6645e8 0%,
      #3975e8 45%,
      #0eacc8 75%,
      #cf5aa5 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
}


/* -----------------------------------------
   DESCRIPTION
   ----------------------------------------- */

.about-intro-description {
  max-width: 570px;

  margin: 27px 0 30px;

  color: #64708b;

  font-size: 1.02rem;

  line-height: 1.8;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.about-intro-actions {
  display: flex;
  align-items: center;
  gap: 13px;

  flex-wrap: wrap;

  margin-bottom: 38px;
}

.about-intro-btn {
  min-height: 54px;

  padding: 0 23px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;

  border-radius: 14px;

  text-decoration: none;

  font-size: 0.88rem;
  font-weight: 700;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

.about-intro-btn span {
  font-size: 1.1rem;

  transition: transform 0.3s ease;
}


/* PRIMARY */

.about-intro-btn.primary {
  color: #ffffff;

  background:
    linear-gradient(
      110deg,
      #6945e8,
      #5661e8
    );

  box-shadow:
    0 14px 30px rgba(105, 69, 232, 0.25);
}

.about-intro-btn.primary:hover {
  transform: translateY(-3px);

  box-shadow:
    0 20px 40px rgba(105, 69, 232, 0.32);
}

.about-intro-btn.primary:hover span {
  transform: translateX(4px);
}


/* SECONDARY */

.about-intro-btn.secondary {
  color: #252b42;

  background: rgba(255, 255, 255, 0.8);

  border: 1px solid rgba(99, 102, 241, 0.17);

  box-shadow:
    0 8px 20px rgba(31, 41, 78, 0.06);
}

.about-intro-btn.secondary:hover {
  transform: translateY(-3px);

  background: #ffffff;

  border-color: rgba(99, 102, 241, 0.35);

  box-shadow:
    0 15px 30px rgba(31, 41, 78, 0.10);
}

.about-intro-btn.secondary:hover span {
  transform: translate(3px, -3px);
}


/* =========================================================
   STATS
   ========================================================= */

.about-intro-stats {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(90px, 1fr));

  max-width: 600px;

  padding-top: 25px;

  border-top: 1px solid rgba(99, 102, 241, 0.13);
}

.about-intro-stat {
  display: flex;
  flex-direction: column;

  gap: 5px;

  padding-left: 16px;

  border-left: 2px solid rgba(99, 102, 241, 0.13);
}

.about-intro-stat:first-child {
  padding-left: 0;
  border-left: 0;
}

.about-intro-stat strong {
  color: #171b32;

  font-family: var(--display, sans-serif);

  font-size: 1.55rem;

  font-weight: 800;
}

.about-intro-stat:nth-child(1) strong {
  color: #6547e9;
}

.about-intro-stat:nth-child(2) strong {
  color: #3180e8;
}

.about-intro-stat:nth-child(3) strong {
  color: #0ca9c5;
}

.about-intro-stat:nth-child(4) strong {
  color: #c34e9e;
}

.about-intro-stat span {
  color: #7b849a;

  font-size: 0.68rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.7px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

  .about-intro-inner {
    grid-template-columns: 1fr 1fr;
    gap: 45px;
  }

  .about-intro-image-wrap {
    height: 440px;
  }

  .about-intro-title {
    font-size: clamp(2.8rem, 5vw, 4.2rem);
  }

  .card-projects {
    right: -20px;
  }

  .card-rating {
    left: -20px;
  }

}


@media (max-width: 850px) {

  .about-intro-section {
    padding: 70px 6%;
  }

  .about-intro-inner {
    grid-template-columns: 1fr;
    gap: 65px;
  }

  .about-intro-visual {
    min-height: 450px;
  }

  .about-intro-image-wrap {
    width: min(100%, 650px);
    height: 450px;
  }

  .about-intro-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
  }

  .about-intro-eyebrow {
    justify-content: center;
  }

  .about-intro-description {
    margin-left: auto;
    margin-right: auto;
  }

  .about-intro-actions {
    justify-content: center;
  }

  .about-intro-stats {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }

}


@media (max-width: 600px) {

  .about-intro-section {
    min-height: auto;
    padding: 55px 20px 65px;
  }

  .about-intro-inner {
    gap: 50px;
  }

  .about-intro-visual {
    min-height: 360px;
  }

  .about-intro-image-wrap {
    height: 340px;
    border-radius: 25px;
  }

  .about-intro-image {
    border-radius: 24px;
  }

  .about-image-gradient {
    border-radius: 24px;
  }

  .about-floating-card {
    min-width: 120px;
    padding: 13px 15px;
  }

  .about-floating-card strong {
    font-size: 1.3rem;
  }

  .about-floating-card span {
    font-size: 0.62rem;
  }

  .card-projects {
    right: -5px;
    top: 20px;
  }

  .card-rating {
    left: -5px;
    bottom: 20px;
  }

  .about-intro-title {
    font-size: 2.7rem;
    letter-spacing: -2px;
  }

  .about-intro-description {
    font-size: 0.94rem;
  }

  .about-intro-stats {
    grid-template-columns: 1fr 1fr;
    gap: 22px 15px;
  }

  .about-intro-stat:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

}


@media (max-width: 420px) {

  .about-intro-image-wrap {
    height: 300px;
  }

  .about-intro-visual {
    min-height: 320px;
  }

  .about-intro-title {
    font-size: 2.35rem;
  }

  .about-intro-btn {
    width: 100%;
  }

}

@media(max-width:480px){
  .about-hero{padding:2.6rem 1.1rem;border-radius:18px}
  .about-hero-bars{width:75%;opacity:.35}
  .about-hero-glow.g1,.about-hero-glow.g2{filter:blur(60px);opacity:.4}
  .about-hero-stats{gap:1.2rem 1.4rem}
  .about-hero-stats span{font-size:1.3rem}
  .about-hero-cta .btn{width:100%;text-align:center}
}
.about-hero{position:relative;min-height:640px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:26px;background:radial-gradient(ellipse at 50% 0%,rgba(139,92,246,0.18),transparent 60%),linear-gradient(180deg,#0c0a14,#100c1c 60%,#0a0812);padding:4rem 2rem;margin-top:2rem}

.about-hero-glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;pointer-events:none}
.about-hero-glow.g1{width:340px;height:340px;background:var(--violet);top:-60px;left:-60px;animation:aboutFloat 9s ease-in-out infinite}
.about-hero-glow.g2{width:300px;height:300px;background:var(--cyan);bottom:-80px;right:-40px;animation:aboutFloat 11s ease-in-out infinite reverse}
@keyframes aboutFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-24px)}}

.about-hero-bars{position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(60%,420px);height:70%;opacity:.8;pointer-events:none}
.about-hero-bars .bar{fill:var(--violet-light);filter:drop-shadow(0 0 10px var(--violet));transform-origin:center;animation:barPulse 2.4s ease-in-out infinite}
.about-hero-bars .b1{animation-delay:0s}
.about-hero-bars .b2{animation-delay:.3s;fill:var(--cyan);filter:drop-shadow(0 0 10px var(--cyan))}
.about-hero-bars .b3{animation-delay:.6s}
.about-hero-bars .b4{animation-delay:.9s;fill:var(--cyan);filter:drop-shadow(0 0 10px var(--cyan))}
.about-hero-bars .b5{animation-delay:1.2s}
@keyframes barPulse{0%,100%{transform:scaleY(0.35)}50%{transform:scaleY(1)}}

.about-hero-l{position:absolute;top:50%;transform:translateY(-50%);width:70px;height:110px;opacity:.5;pointer-events:none}
.about-hero-l path{stroke:var(--cyan);stroke-width:3;filter:drop-shadow(0 0 8px var(--cyan))}
.about-hero-l.l-left{left:6%}
.about-hero-l.l-right{right:6%}
.about-hero-l.l-right path{stroke:var(--violet-light);filter:drop-shadow(0 0 8px var(--violet))}

.about-hero-content{position:relative;z-index:2;max-width:720px;text-align:center}
.about-hero-sub{color:var(--text-secondary);font-size:1.02rem;line-height:1.75;max-width:560px;margin:1.4rem auto 2rem}
.about-hero-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.6rem}

.about-hero-stats{display:flex;justify-content:center;gap:2.4rem;flex-wrap:wrap;border-top:1px solid rgba(139,92,246,0.16);padding-top:1.8rem}
.about-hero-stats div{display:flex;flex-direction:column;align-items:center;gap:.2rem}
.about-hero-stats span{font-family:var(--display);font-size:1.6rem;font-weight:700;background:linear-gradient(135deg,var(--violet-light),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.about-hero-stats small{font-size:0.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}

@media(max-width:800px){
  .about-hero{min-height:auto;padding:3.4rem 1.4rem}
  .about-hero-l{display:none}
  .about-hero-stats{gap:1.4rem 1.8rem}
}
@media(prefers-reduced-motion:reduce){
  .about-hero-glow,.about-hero-bars .bar{animation:none!important}
}

/* =========================================================
   PREMIUM ABOUT HERO — LARGE RIGHT IMAGE
========================================================= */

.about-hero{
  grid-template-columns: 1fr 1fr !important;
  min-height: 650px;
  padding: 100px 6% 90px !important;
}


/* Right visual area */
.about-card-stack{
  position:relative !important;

  width:520px !important;
  height:520px !important;

  margin:0 auto !important;

  display:block !important;
}


/* ---------------------------------------------------------
   LARGE MAIN IMAGE
--------------------------------------------------------- */

.about-hero-photo.p1{
  position:absolute !important;

  width:420px !important;
  height:480px !important;

  top:5px !important;
  left:20px !important;

  border-radius:32px !important;

  border:10px solid rgba(255,255,255,.96) !important;

  overflow:hidden !important;

  transform:rotate(-3deg) !important;

  z-index:2 !important;

  box-shadow:
    0 35px 80px rgba(48,43,95,.16),
    0 12px 30px rgba(104,73,232,.10) !important;
}


/* Image itself */
.about-hero-photo.p1 img{
  width:100% !important;
  height:100% !important;

  object-fit:cover !important;

  display:block !important;

  transition:transform .6s ease !important;
}


/* Nice zoom on hover */
.about-card-stack:hover .p1 img{
  transform:scale(1.035);
}


/* ---------------------------------------------------------
   SECOND SMALL FLOATING IMAGE
--------------------------------------------------------- */

.about-hero-photo.p2{
  position:absolute !important;

  width:180px !important;
  height:220px !important;

  right:-15px !important;
  bottom:35px !important;
  left:auto !important;
  top:auto !important;

  border-radius:24px !important;

  border:8px solid #fff !important;

  overflow:hidden !important;

  transform:rotate(6deg) !important;

  z-index:5 !important;

  box-shadow:
    0 25px 55px rgba(42,47,75,.17) !important;
}


.about-hero-photo.p2 img{
  width:100% !important;
  height:100% !important;

  object-fit:cover !important;

  display:block !important;
}


/* ---------------------------------------------------------
   SOFT BACK PANELS
--------------------------------------------------------- */

.about-card-bg{
  position:absolute !important;

  width:390px !important;
  height:450px !important;

  border-radius:34px !important;

  background:
    linear-gradient(
      145deg,
      #eeeaff,
      #eafafd
    ) !important;

  border:1px solid rgba(104,73,232,.10) !important;

  box-shadow:
    0 20px 50px rgba(50,55,90,.06) !important;
}


/* First back panel */
.about-card-bg:nth-of-type(3){
  top:25px !important;
  left:55px !important;

  transform:rotate(4deg) !important;

  z-index:0 !important;
}


/* Second back panel */
.about-card-bg:nth-of-type(4){
  top:10px !important;
  left:40px !important;

  transform:rotate(1.5deg) !important;

  z-index:1 !important;
}


/* ---------------------------------------------------------
   STATS CARD
--------------------------------------------------------- */

.about-main-card{
  position:absolute !important;

  width:300px !important;

  right:-5px !important;
  bottom:5px !important;

  padding:1.6rem !important;

  border-radius:24px !important;

  background:
    rgba(255,255,255,.96) !important;

  border:
    1px solid rgba(104,73,232,.14) !important;

  box-shadow:
    0 30px 70px rgba(38,42,70,.16),
    0 10px 25px rgba(104,73,232,.07) !important;

  backdrop-filter:blur(18px);

  z-index:6 !important;
}


/* Stats heading */
.about-main-card > div:first-child{
  color:#202338 !important;

  font-size:1.05rem !important;
}


/* ---------------------------------------------------------
   STAT BOXES
--------------------------------------------------------- */

.a-stat{
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f6f3ff
    ) !important;

  border:
    1px solid rgba(104,73,232,.10) !important;

  border-radius:15px !important;

  padding:1rem !important;

  transition:
    transform .25s ease,
    box-shadow .25s ease !important;
}


.a-stat:hover{
  transform:translateY(-4px);

  box-shadow:
    0 12px 28px rgba(67,72,105,.10);
}


/* Different subtle colors */
.a-stat:nth-child(1){
  background:
    linear-gradient(
      145deg,
      #fff,
      #f3efff
    ) !important;
}

.a-stat:nth-child(2){
  background:
    linear-gradient(
      145deg,
      #fff,
      #effbfe
    ) !important;
}

.a-stat:nth-child(3){
  background:
    linear-gradient(
      145deg,
      #fff,
      #f5f9e9
    ) !important;
}

.a-stat:nth-child(4){
  background:
    linear-gradient(
      145deg,
      #fff,
      #fff1f8
    ) !important;
}


/* Numbers */
.a-stat-num{
  font-size:1.65rem !important;
  font-weight:800 !important;

  background:
    linear-gradient(
      100deg,
      #6849e8,
      #287ee9,
      #08a8c5
    ) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;

  -webkit-text-fill-color:transparent !important;
}


/* ---------------------------------------------------------
   DECORATIVE ORBS
--------------------------------------------------------- */

.about-card-stack::before{
  content:"";

  position:absolute;

  width:90px;
  height:90px;

  top:-25px;
  right:45px;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      rgba(104,73,232,.16),
      rgba(8,168,197,.12)
    );

  filter:blur(1px);

  z-index:0;
}


.about-card-stack::after{
  content:"";

  position:absolute;

  width:18px;
  height:18px;

  top:110px;
  right:-30px;

  border-radius:50%;

  background:#08a8c5;

  box-shadow:
    0 0 0 8px rgba(8,168,197,.08),
    0 0 30px rgba(8,168,197,.25);

  z-index:7;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:900px){

  .about-hero{
    grid-template-columns:1fr !important;

    min-height:auto;

    padding:
      80px 6% 70px !important;
  }

  .about-card-stack{
    width:430px !important;
    max-width:100% !important;
    height:460px !important;
  }

  .about-hero-photo.p1{
    width:340px !important;
    height:400px !important;

    left:15px !important;
  }

  .about-hero-photo.p2{
    width:145px !important;
    height:180px !important;

    right:-5px !important;
  }

  .about-main-card{
    width:260px !important;
    right:0 !important;
    bottom:0 !important;
  }
}


@media(max-width:560px){

  .about-card-stack{
    height:400px !important;
  }

  .about-hero-photo.p1{
    width:290px !important;
    height:350px !important;

    left:0 !important;
  }

  .about-hero-photo.p2{
    width:120px !important;
    height:150px !important;
  }

  .about-main-card{
    width:230px !important;

    padding:1.1rem !important;
  }

  .a-stat{
    padding:.75rem !important;
  }

  .a-stat-num{
    font-size:1.3rem !important;
  }
}/* =========================================================
   ABOUT HERO — PREMIUM LIGHT COLOR THEME
   White + Lavender + Cyan + Purple
========================================================= */

.about-hero{
  position:relative;
  overflow:hidden;

  background:
    radial-gradient(
      circle at 8% 15%,
      rgba(112,84,232,.13),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 82%,
      rgba(8,174,199,.12),
      transparent 30%
    ),
    radial-gradient(
      circle at 65% 5%,
      rgba(222,82,157,.055),
      transparent 24%
    ),
    linear-gradient(
      135deg,
      #ffffff 0%,
      #fbfaff 45%,
      #f4fbfd 100%
    ) !important;

  color:#25283b !important;
  border-bottom:1px solid rgba(88,76,150,.08);
}


/* Very subtle grid — gives the section some texture */
.about-hero::after{
  content:"";
  position:absolute;
  inset:0;

  background-image:
    linear-gradient(
      rgba(78,85,120,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(78,85,120,.035) 1px,
      transparent 1px
    );

  background-size:72px 72px;

  pointer-events:none;
  z-index:0;
}


/* Soft decorative glow */
.about-hero::before{
  content:"";
  position:absolute;

  width:520px;
  height:520px;

  right:-220px;
  top:-220px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(112,84,232,.12) 0%,
      rgba(112,84,232,.045) 38%,
      transparent 70%
    );

  pointer-events:none;
  z-index:0;
}


/* Make actual hero content sit above decorations */
.about-hero > *{
  position:relative;
  z-index:2;
}


/* =========================================================
   SMALL LABEL
========================================================= */

.about-hero .eyebrow,
.about-hero .section-label,
.about-hero .about-label{
  color:#6849e8 !important;
  letter-spacing:3px;
}


/* =========================================================
   MAIN HEADING
========================================================= */

.about-hero h1,
.about-hero .hero-title{
  color:#15182a !important;
}


/* Gradient only on the highlighted part */
.about-hero h1 span,
.about-hero .hero-title span{
  background:
    linear-gradient(
      100deg,
      #6545e8 0%,
      #287ee9 45%,
      #08a8c5 72%,
      #d653a0 100%
    ) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
}


/* =========================================================
   HERO PARAGRAPH
========================================================= */

.about-hero p{
  color:#68738b !important;
}


/* Slightly stronger first paragraph */
.about-hero p:first-of-type{
  color:#5f6981 !important;
}


/* =========================================================
   BUTTONS
========================================================= */

.about-hero .btn-primary,
.about-hero .primary-btn{
  background:
    linear-gradient(
      135deg,
      #7250e8,
      #6040d9
    ) !important;

  color:#fff !important;

  border:none !important;

  box-shadow:
    0 12px 28px rgba(104,73,232,.24) !important;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.about-hero .btn-primary:hover,
.about-hero .primary-btn:hover{
  transform:translateY(-3px);

  box-shadow:
    0 18px 38px rgba(104,73,232,.30) !important;
}


.about-hero .btn-secondary,
.about-hero .secondary-btn{
  background:#ffffff !important;
  color:#30354a !important;

  border:1px solid rgba(72,79,110,.14) !important;

  box-shadow:
    0 8px 22px rgba(42,48,78,.06) !important;
}

.about-hero .btn-secondary:hover,
.about-hero .secondary-btn:hover{
  border-color:rgba(104,73,232,.25) !important;
  color:#6849e8 !important;
  transform:translateY(-2px);
}


/* =========================================================
   "BY THE NUMBERS" CARD
========================================================= */

.about-main-card{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      rgba(250,249,255,.96)
    ) !important;

  border:1px solid rgba(104,73,232,.14) !important;

  box-shadow:
    0 25px 60px rgba(45,50,80,.12),
    0 5px 20px rgba(104,73,232,.05) !important;

  color:#25283b !important;
}


/* Card heading */
.about-main-card > div:first-child{
  color:#25283b !important;
}


/* =========================================================
   STAT BOXES
========================================================= */

.a-stat{
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f7f5ff
    ) !important;

  border:1px solid rgba(104,73,232,.11) !important;

  box-shadow:
    0 8px 22px rgba(45,50,80,.045);
}

.a-stat:nth-child(2){
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f0fbfd
    ) !important;

  border-color:rgba(8,168,197,.12) !important;
}

.a-stat:nth-child(3){
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f5f9e9
    ) !important;

  border-color:rgba(120,168,0,.12) !important;
}

.a-stat:nth-child(4){
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #fff3f9
    ) !important;

  border-color:rgba(214,82,157,.12) !important;
}


/* Numbers */
.a-stat-num{
  background:
    linear-gradient(
      100deg,
      #6849e8,
      #287ee9,
      #08a8c5
    ) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
}


/* Labels */
.a-stat-label{
  color:#7b8498 !important;
}


/* =========================================================
   HERO PHOTO CARDS
========================================================= */

.about-hero-photo{
  background:#ffffff !important;

  border:7px solid #ffffff !important;

  box-shadow:
    0 22px 48px rgba(42,48,78,.13) !important;
}


/* Slight color wash behind photos */
.about-card-bg{
  background:
    linear-gradient(
      145deg,
      #eeeaff,
      #eafafd
    ) !important;

  border:1px solid rgba(104,73,232,.10) !important;
}


/* =========================================================
   DECORATIVE COLORS
========================================================= */

.about-hero .dot,
.about-hero .accent-dot{
  background:#08a8c5 !important;
}

.about-hero .purple{
  color:#6849e8 !important;
}

.about-hero .cyan{
  color:#08a8c5 !important;
}

.about-hero .pink{
  color:#d653a0 !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:900px){

  .about-hero{
    background:
      radial-gradient(
        circle at 10% 10%,
        rgba(112,84,232,.10),
        transparent 20rem
      ),
      linear-gradient(
        145deg,
        #ffffff,
        #f7f9fd
      ) !important;
  }

}
  /* =========================================================
   NEXISLAB ABOUT PAGE — FINAL LIGHT SECTION POLISH
   Paste this AFTER the existing About-page CSS.
   This specifically fixes:
   1. dark/gray section backgrounds
   2. oversized TOP SHELF area
   3. weak-looking value cards
   4. flat timeline
   5. spacing + visual hierarchy
========================================================= */

:root{
  --about-ink:#15182a;
  --about-text:#384158;
  --about-muted:#68738b;
  --about-violet:#6849e8;
  --about-violet-2:#8b67f3;
  --about-cyan:#08a8c5;
  --about-pink:#df4f9b;
  --about-lime:#78a800;
  --about-amber:#d79c00;
  --about-bg:#f8f9fd;
  --about-card:#ffffff;
  --about-line:rgba(43,49,78,.10);
  --about-shadow:0 18px 55px rgba(42,48,78,.08);
  --about-shadow-sm:0 10px 30px rgba(42,48,78,.06);
}

/* =========================================================
   GLOBAL ABOUT PAGE SURFACES
========================================================= */

main{
  background:#f8f9fd;
}

main > section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 20%,rgba(104,73,232,.045),transparent 25rem),
    radial-gradient(circle at 92% 80%,rgba(8,168,197,.045),transparent 25rem),
    #f8f9fd !important;
  color:var(--about-text);
}

main > section[style]{
  background:
    radial-gradient(circle at 12% 15%,rgba(104,73,232,.055),transparent 24rem),
    radial-gradient(circle at 88% 85%,rgba(8,168,197,.045),transparent 25rem),
    #f8f9fd !important;
}

/* Subtle technical grid — much lighter than the old gray grid */
main > section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.38;
  background-image:
    linear-gradient(rgba(80,88,120,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(80,88,120,.035) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,transparent,black 12%,black 88%,transparent);
}

main > section > *{
  position:relative;
  z-index:1;
}

/* =========================================================
   TOP SHELF / RECOGNITION
========================================================= */

main > section:has(.reputation-section){
  padding:34px 0 72px !important;
  background:#f8f9fd !important;
}

.reputation-section{
  width:min(1320px,calc(100% - 56px));
  min-height:0 !important;
  margin:0 auto !important;
  padding:70px 6% 74px !important;
  border-radius:32px !important;
  border:1px solid rgba(104,73,232,.13) !important;
  background:
    radial-gradient(circle at 15% 20%,rgba(104,73,232,.10),transparent 28rem),
    radial-gradient(circle at 88% 78%,rgba(8,168,197,.09),transparent 26rem),
    linear-gradient(135deg,#ffffff 0%,#faf9ff 52%,#f3fbfd 100%) !important;
  box-shadow:0 25px 70px rgba(42,48,78,.09) !important;
  isolation:isolate;
}

/* Decorative corner blobs */
.reputation-section::before{
  content:"";
  position:absolute;
  width:210px;
  height:210px;
  right:-80px;
  top:-80px;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(104,73,232,.14),rgba(104,73,232,0) 68%);
  z-index:-1;
  pointer-events:none;
}

.reputation-section::after{
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  left:-75px;
  bottom:-70px;
  border-radius:42px;
  background:
    url("https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=500&q=75")
    center/cover;
  border:8px solid rgba(255,255,255,.92);
  box-shadow:0 18px 45px rgba(42,48,78,.11);
  transform:rotate(-7deg);
  opacity:.34;
  z-index:-1;
}

.reputation-head{
  margin-bottom:34px !important;
  text-align:center;
}

.reputation-tag{
  color:var(--about-cyan) !important;
  font-size:.68rem !important;
  font-weight:700;
  letter-spacing:3px;
  margin-bottom:12px !important;
}

.reputation-title{
  max-width:760px;
  margin:0 auto !important;
  color:var(--about-ink) !important;
  font-size:clamp(2.5rem,5vw,4.8rem) !important;
  line-height:.98 !important;
  letter-spacing:-2.5px !important;
}

.reputation-title span{
  display:inline-block;
  margin-top:7px;
  background:linear-gradient(100deg,var(--about-violet),var(--about-cyan),var(--about-pink)) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}

/* ---------- Recognition badges: turn scattered tiny bubbles
    into an intentional premium grid ---------- */

.badge-field{
  width:min(940px,100%);
  height:auto !important;
  min-height:0 !important;
  margin:32px auto 0 !important;
  display:grid !important;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  align-items:stretch;
}

.rep-badge{
  position:relative !important;
  inset:auto !important;
  left:auto !important;
  top:auto !important;
  width:auto !important;
  height:148px !important;
  transform:none !important;
  border-radius:22px !important;
  clip-path:none !important;
  padding:20px !important;
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(104,73,232,.13) !important;
  box-shadow:0 12px 32px rgba(42,48,78,.065) !important;
  overflow:hidden;
}

.rep-badge::before{
  content:"";
  position:absolute;
  width:90px;
  height:90px;
  right:-34px;
  top:-34px;
  border-radius:50%;
  background:rgba(104,73,232,.07);
}

.rep-badge:nth-child(2)::before,
.rep-badge:nth-child(4)::before{
  background:rgba(8,168,197,.08);
}

.rep-badge:nth-child(5)::before{
  background:rgba(223,79,155,.08);
}

.rep-badge:nth-child(6)::before{
  background:rgba(215,156,0,.08);
}

.rep-badge:hover{
  transform:translateY(-6px) !important;
  border-color:rgba(104,73,232,.28) !important;
  box-shadow:0 22px 48px rgba(104,73,232,.12) !important;
}

.rep-badge > div{
  position:relative;
  z-index:1;
}

.rep-badge-line1{
  color:#8a93a7 !important;
  font-size:.62rem !important;
  letter-spacing:1.5px;
}

.rep-badge-main{
  color:var(--about-ink) !important;
  font-size:1rem !important;
  line-height:1.25 !important;
}

.rep-badge-sub{
  color:var(--about-violet) !important;
}

.rep-badge-stars{
  color:var(--about-amber) !important;
  margin-top:7px !important;
}

/* =========================================================
   VALUES / OUR DNA
========================================================= */

main > section:has(.cards-grid){
  padding:90px 5% 105px !important;
}

main > section:has(.cards-grid) .center{
  margin-bottom:38px;
}

main > section:has(.cards-grid) .sec-title{
  color:var(--about-ink) !important;
}

.cards-grid{
  width:min(1280px,100%);
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:repeat(4,1fr);
  gap:20px !important;
}

.info-card{
  min-height:270px;
  padding:28px 26px !important;
  border-radius:22px !important;
  background:#fff !important;
  border:1px solid var(--about-line) !important;
  box-shadow:var(--about-shadow-sm) !important;
  color:var(--about-text);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}

.info-card:nth-child(1){
  background:linear-gradient(150deg,#fff 55%,#f6f2ff) !important;
  border-top:3px solid var(--about-violet) !important;
}

.info-card:nth-child(2){
  background:linear-gradient(150deg,#fff 55%,#f0fbfd) !important;
  border-top:3px solid var(--about-cyan) !important;
}

.info-card:nth-child(3){
  background:linear-gradient(150deg,#fff 55%,#f7fbea) !important;
  border-top:3px solid var(--about-lime) !important;
}

.info-card:nth-child(4){
  background:linear-gradient(150deg,#fff 55%,#fff2f8) !important;
  border-top:3px solid var(--about-pink) !important;
}

.info-card:hover{
  transform:translateY(-7px);
  box-shadow:var(--about-shadow) !important;
  border-color:rgba(104,73,232,.18) !important;
}

.card-icon{
  width:52px !important;
  height:52px !important;
  border-radius:15px !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  margin-bottom:24px !important;
  background:#f1edff !important;
  border:1px solid rgba(104,73,232,.12);
}

.card-icon.cyan{
  background:#eafafd !important;
  border-color:rgba(8,168,197,.13);
}

.card-icon.lime{
  background:#f3f8e5 !important;
  border-color:rgba(120,168,0,.13);
}

.card-title{
  color:var(--about-ink) !important;
  font-size:1.12rem !important;
  font-weight:700;
  margin-bottom:10px !important;
}

.card-desc{
  color:var(--about-muted) !important;
  font-size:.86rem !important;
  line-height:1.72 !important;
}

/* =========================================================
   STORY / TIMELINE
========================================================= */

main > section:has(.timeline){
  padding:95px 5% 110px !important;
}

main > section:has(.timeline) .sec-title{
  color:var(--about-ink) !important;
  margin-bottom:48px;
}

.timeline{
  width:min(1220px,100%);
  margin:0 auto !important;
  gap:0 !important;
}

.timeline::before{
  left:25px !important;
  width:2px !important;
  background:linear-gradient(
    to bottom,
    var(--about-violet),
    var(--about-cyan),
    var(--about-pink)
  ) !important;
  opacity:.45;
}

.tl-item{
  grid-template-columns:52px 1fr !important;
  gap:28px !important;
  padding:0 0 25px !important;
}

.tl-dot{
  width:50px !important;
  height:50px !important;
  border-radius:15px !important;
  background:#fff !important;
  border:2px solid rgba(104,73,232,.25) !important;
  color:var(--about-violet) !important;
  font-weight:700;
  box-shadow:0 10px 24px rgba(104,73,232,.10) !important;
}

.tl-item > div:last-child{
  min-height:125px;
  padding:24px 28px !important;
  border-radius:20px !important;
  background:#fff !important;
  border:1px solid var(--about-line) !important;
  box-shadow:var(--about-shadow-sm) !important;
  transition:transform .3s ease,box-shadow .3s ease;
}

.tl-item:nth-child(2) > div:last-child{
  background:linear-gradient(100deg,#fff,#faf9ff) !important;
}

.tl-item:nth-child(3) > div:last-child{
  background:linear-gradient(100deg,#fff,#f4fbfd) !important;
}

.tl-item:nth-child(4) > div:last-child{
  background:linear-gradient(100deg,#fff,#fff8ee) !important;
}

.tl-item:nth-child(5) > div:last-child{
  background:linear-gradient(100deg,#fff,#fff3f9) !important;
}

.tl-item:hover > div:last-child{
  transform:translateX(6px);
  box-shadow:var(--about-shadow) !important;
}

.tl-year{
  color:var(--about-cyan) !important;
  font-weight:700;
  letter-spacing:1px;
}

.tl-title{
  color:var(--about-ink) !important;
  font-size:1.08rem !important;
  margin-bottom:8px !important;
}

.tl-desc{
  color:var(--about-muted) !important;
  line-height:1.7 !important;
}

/* =========================================================
   FEATURE PANELS — REMOVE DARK OVERLAY
========================================================= */

.feature-panel{
  background:
    radial-gradient(circle at 25% 25%,rgba(104,73,232,.13),transparent 42%),
    linear-gradient(145deg,#f5f2ff,#eefbfd) !important;
  border:1px solid rgba(104,73,232,.13) !important;
  box-shadow:var(--about-shadow) !important;
}

.feature-panel-overlay{
  background:
    linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.48)) !important;
}

.feature-panel-img{
  opacity:.30 !important;
}

.feature-badge{
  background:rgba(255,255,255,.92) !important;
  color:var(--about-ink) !important;
  border:1px solid rgba(104,73,232,.13) !important;
  box-shadow:0 10px 25px rgba(42,48,78,.08) !important;
}

/* =========================================================
   INLINE DARK TEXT / BACKGROUND OVERRIDES
========================================================= */

[style*="background:rgba(14,19,32"],
[style*="background: rgba(14,19,32"],
[style*="background:rgba(20,26,44"],
[style*="background: rgba(20,26,44"]{
  background:#f8f9fd !important;
}

[style*="color:var(--text-secondary)"]{
  color:var(--about-muted) !important;
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:1000px){
  .cards-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .badge-field{
    grid-template-columns:repeat(2,1fr);
  }

  .rep-badge{
    height:150px !important;
  }
}

@media(max-width:700px){
  main > section:has(.cards-grid),
  main > section:has(.timeline){
    padding-left:5% !important;
    padding-right:5% !important;
  }

  .reputation-section{
    width:calc(100% - 24px);
    padding:50px 22px 58px !important;
    border-radius:24px !important;
  }

  .reputation-title{
    font-size:clamp(2.1rem,11vw,3.4rem) !important;
    letter-spacing:-1.5px !important;
  }

  .badge-field{
    grid-template-columns:1fr !important;
    gap:13px;
  }

  .rep-badge{
    height:128px !important;
  }

  .cards-grid{
    grid-template-columns:1fr !important;
  }

  .info-card{
    min-height:auto;
  }

  .timeline::before{
    left:21px !important;
  }

  .tl-item{
    grid-template-columns:44px 1fr !important;
    gap:15px !important;
  }

  .tl-dot{
    width:44px !important;
    height:44px !important;
    border-radius:13px !important;
  }

  .tl-item > div:last-child{
    padding:20px !important;
  }

  .reputation-section::after{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .info-card,
  .tl-item > div:last-child,
  .rep-badge{
    transition:none !important;
  }
}

/* Navbar + Top Contact Bar CSS only
   Extracted from the supplied page.
   Page/content/footer styles removed.
*/

.hero{min-height:92vh;display:grid;grid-template-columns:1.1fr 0.9fr;gap:3rem;align-items:start;padding:118px 5% 70px;position:relative;overflow:hidden}

/* ===== ANIMATED GRADIENT BACKGROUND ===== */
.hero-gradient-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-gradient-bg::before{content:'';position:absolute;inset:-20%;
  background:conic-gradient(from 0deg at 50% 50%,
    rgba(157,111,255,0.16),rgba(62,232,255,0.1),rgba(255,122,198,0.1),
    rgba(212,249,104,0.08),rgba(157,111,255,0.16));
  animation:gradientSpin 26s linear infinite;filter:blur(60px)}
@keyframes gradientSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.hero-gradient-bg::after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,transparent 0%,var(--bg-deep) 75%)}

/* ===== FLOATING SVG PARTICLES ===== */
.hero-particles{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.particle{position:absolute;border-radius:50%;opacity:0;animation:particleFloat linear infinite}
@keyframes particleFloat{
  0%{opacity:0;transform:translateY(0) translateX(0) scale(0.6)}
  10%{opacity:1}
  90%{opacity:1}
  100%{opacity:0;transform:translateY(-420px) translateX(var(--drift,30px)) scale(1.1)}
}

/* ===== HERO SLIDER ===== */
.hero-slider{position:relative}
.hero-slide{display:none;opacity:0;transform:translateX(18px);transition:opacity .5s cubic-bezier(.25,.46,.45,.94),transform .5s cubic-bezier(.25,.46,.45,.94)}
.hero-slide.active{display:block}
.hero-slide.active.in{opacity:1;transform:translateX(0)}
.hero-slide-tag{display:inline-flex;align-items:center;gap:0.6rem;padding:0.4rem 1.3rem;border-radius:8px;
  background:rgba(157,111,255,0.1);border:1px solid rgba(157,111,255,0.22);font-size:0.74rem;font-weight:500;
  color:var(--violet-light);margin-bottom:1.6rem;font-family:var(--mono);letter-spacing:0.5px}
.hero-slide-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--lime);animation:pulse 2.2s infinite;box-shadow:0 0 10px var(--lime)}
.hero-slide-title{font-family:var(--display);font-size:clamp(2.6rem,6vw,4.6rem);font-weight:700;line-height:1.04;letter-spacing:-2.5px;margin-bottom:1.4rem}
.hero-slide-sub{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--text-secondary);max-width:560px;margin-bottom:2.4rem;line-height:1.8}
.hero-slide-btns{display:flex;gap:1.1rem;flex-wrap:wrap;margin-bottom:2.6rem}
.hero-slide-stats{display:flex;gap:2.6rem;flex-wrap:wrap}
.hero-dots{display:flex;gap:0.6rem;margin-top:2.2rem}
.hero-dot{width:34px;height:4px;border-radius:3px;background:rgba(157,111,255,0.2);border:none;cursor:pointer;
  padding:0;transition:.35s;position:relative;overflow:hidden}
.hero-dot.active{background:rgba(157,111,255,0.35)}
.hero-dot.active::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--violet),var(--cyan));
  animation:dotFill 6s linear forwards}
@keyframes dotFill{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}

.hero-badge{display:inline-flex;align-items:center;gap:0.6rem;padding:0.4rem 1.3rem;border-radius:8px;background:rgba(157,111,255,0.1);border:1px solid rgba(157,111,255,0.22);font-size:0.74rem;font-weight:500;color:var(--violet-light);margin-bottom:1.8rem;animation:fadeUp .7s ease both;font-family:var(--mono);letter-spacing:0.5px}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--lime);animation:pulse 2.2s infinite;box-shadow:0 0 10px var(--lime)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.hero-title{font-family:var(--display);font-size:clamp(2.6rem,6vw,4.6rem);font-weight:700;line-height:1.04;letter-spacing:-2.5px;margin-bottom:1.4rem;animation:fadeUp .9s ease .1s both}
.hero-sub{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--text-secondary);max-width:560px;margin-bottom:2.4rem;line-height:1.8;animation:fadeUp .9s ease .2s both}
.hero-btns{display:flex;gap:1.1rem;flex-wrap:wrap;margin-bottom:3rem;animation:fadeUp .9s ease .3s both}
.hero-stats{display:flex;gap:2.6rem;flex-wrap:wrap;animation:fadeUp .9s ease .4s both}
.stat-item{text-align:left;border-left:2px solid rgba(157,111,255,0.25);padding-left:0.9rem}
.stat-num{font-family:var(--display);font-size:2.2rem;font-weight:700}
.stat-label{font-size:0.68rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.6px;font-weight:500}
@keyframes fadeUp{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:translateY(0)}}
.hero-visual{animation:fadeUp 1s ease .25s both;margin-top:0.4rem}
.console{background:var(--bg-card);border:1px solid var(--border-bright);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,0.55),0 0 60px rgba(157,111,255,0.1);overflow:hidden}
.console-head{display:flex;align-items:center;gap:0.5rem;padding:0.8rem 1.1rem;background:rgba(255,255,255,0.02);border-bottom:1px solid rgba(157,111,255,0.12)}
.console-dot{width:9px;height:9px;border-radius:50%}
.console-title{margin-left:0.6rem;font-family:var(--mono);font-size:0.72rem;color:var(--text-muted)}
.console-body{padding:1.3rem 1.4rem;font-family:var(--mono);font-size:0.82rem;line-height:1.95;min-height:260px}
.cl-prompt{color:var(--lime)}.cl-path{color:var(--cyan)}.cl-comment{color:var(--text-muted)}.cl-string{color:var(--amber)}.cl-key{color:var(--violet-light)}
.cl-cursor{display:inline-block;width:7px;height:1em;background:var(--cyan);vertical-align:middle;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.console-stat-row{display:flex;gap:0.7rem;margin-top:1rem;flex-wrap:wrap}
.console-pill{font-family:var(--mono);font-size:0.66rem;padding:0.3rem 0.7rem;border-radius:6px;background:rgba(157,111,255,0.08);border:1px solid rgba(157,111,255,0.18);color:var(--violet-light)}
.console-pill.ok{color:var(--lime);border-color:rgba(212,249,104,0.25);background:rgba(212,249,104,0.06)}
.hero-scroll{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:0.5rem;color:var(--text-muted);font-size:0.62rem;letter-spacing:3px;text-transform:uppercase;animation:bounce 2.8s infinite;opacity:0.55;font-family:var(--mono)}
.scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,var(--violet),transparent)}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(10px)}}
.process-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.6rem;margin-top:3.2rem}
.process-item{padding:1.7rem 1.5rem;background:var(--glass);border-radius:16px;border:1px solid rgba(157,111,255,0.1);transition:all .35s}
.process-item:hover{border-color:var(--border-bright);transform:translateY(-5px);box-shadow:0 18px 50px rgba(0,0,0,0.3)}
.process-num{font-family:var(--mono);font-size:0.72rem;color:var(--cyan);letter-spacing:1px;margin-bottom:0.8rem;font-weight:700}
.process-name{font-family:var(--display);font-size:1.06rem;font-weight:600;margin-bottom:0.4rem}
.process-desc{color:var(--text-secondary);font-size:0.84rem;line-height:1.65}
.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.6rem;margin-top:3.2rem}
.testimonial-card{background:var(--glass);border:1px solid rgba(157,111,255,0.1);border-radius:18px;padding:2rem;transition:all .35s}
.testimonial-card:hover{border-color:var(--border-bright);transform:translateY(-5px)}
.stars{color:var(--amber);font-size:0.85rem;letter-spacing:2px;margin-bottom:0.7rem}
.testimonial-text{color:var(--text-secondary);font-size:0.92rem;line-height:1.8;margin-bottom:1.3rem}
.testimonial-author{display:flex;align-items:center;gap:0.8rem}
.author-avatar{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.82rem;color:#05070d;flex-shrink:0}
.author-name{font-weight:600;font-size:0.88rem}.author-role{color:var(--text-muted);font-size:0.74rem}
.trust-strip{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center;margin-top:2rem;padding-top:1.6rem;border-top:1px solid rgba(157,111,255,0.1)}
.ts-item{font-family:var(--mono);font-size:0.74rem;color:var(--text-muted)}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding:120px 5% 60px}.hero-visual{display:none}}

/* ===== HERO IMAGE SLOT (optional) =====
   To swap the terminal mock for a real photo/illustration, replace
   .hero-visual's inner contents with: <img src="assets/img/hero.jpg" class="hero-img" alt="...">
   This class is ready to use — just drop a file in assets/img/ and update the markup. */
.hero-img{width:100%;height:auto;border-radius:20px;border:1px solid var(--border-bright);
  box-shadow:0 30px 80px rgba(0,0,0,0.55),0 0 60px rgba(157,111,255,0.12);object-fit:cover;aspect-ratio:4/5;display:block}

/* ===== PREMIUM SERVICE INDEX (replaces bento grid) ===== */
.service-index{margin-top:3.4rem;border-top:1px solid rgba(157,111,255,0.14)}
.svc-row{display:grid;grid-template-columns:64px 1fr auto 200px 44px;align-items:center;gap:2rem;
  padding:1.9rem 1.4rem;border-bottom:1px solid rgba(157,111,255,0.14);position:relative;cursor:pointer;
  transition:background .4s cubic-bezier(.25,.46,.45,.94)}
.svc-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(180deg,var(--violet),var(--cyan));
  transition:width .4s cubic-bezier(.25,.46,.45,.94)}
.svc-row:hover{background:linear-gradient(90deg,rgba(157,111,255,0.08),transparent 70%)}
.svc-row:hover::before{width:3px}
.svc-num{font-family:var(--mono);font-size:0.92rem;color:var(--text-muted);font-weight:500;transition:color .4s}
.svc-row:hover .svc-num{color:var(--cyan)}
.svc-main{min-width:0}
.svc-title{font-family:var(--display);font-size:1.5rem;font-weight:600;letter-spacing:-0.4px;
  display:flex;align-items:center;gap:0.9rem;transition:transform .4s cubic-bezier(.25,.46,.45,.94)}
.svc-row:hover .svc-title{transform:translateX(10px)}
.svc-title-icon{width:34px;height:34px;border-radius:9px;background:rgba(157,111,255,0.1);border:1px solid rgba(157,111,255,0.22);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.4s}
.svc-row:hover .svc-title-icon{background:var(--violet);border-color:transparent;box-shadow:0 0 22px var(--glow-v)}
.svc-row:hover .svc-title-icon svg{stroke:#fff!important}
.svc-desc{color:var(--text-secondary);font-size:0.86rem;margin-top:0.5rem;max-width:480px;line-height:1.6;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .45s cubic-bezier(.25,.46,.45,.94),opacity .35s,margin .4s}
.svc-row:hover .svc-desc{max-height:60px;opacity:1;margin-top:0.6rem}
.svc-tags{display:none;gap:1.2rem;flex-wrap:wrap;align-items:center}
.svc-stat{text-align:right;flex-shrink:0}
.svc-stat-num{font-family:var(--display);font-size:1.5rem;font-weight:700;color:var(--violet-light);line-height:1}
.svc-stat-label{font-size:0.66rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-top:0.2rem}
.svc-arrow{width:44px;height:44px;border-radius:12px;border:1px solid rgba(157,111,255,0.2);
  display:flex;align-items:center;justify-content:center;color:var(--violet-light);transition:.4s;flex-shrink:0}
.svc-row:hover .svc-arrow{background:linear-gradient(135deg,var(--violet),var(--cyan));color:#fff;
  transform:translateX(4px) rotate(-45deg);border-color:transparent}
@media(max-width:760px){
  .svc-row{grid-template-columns:40px 1fr 38px;gap:1rem;padding:1.5rem 0.8rem}
  .svc-stat{display:none}
  .svc-title{font-size:1.15rem;gap:0.6rem}
  .svc-title-icon{width:28px;height:28px}
  .svc-row:hover .svc-title{transform:translateX(4px)}
  .svc-desc{max-width:none}
}

/* ===== PROCESS — CONNECTED PATH ===== */
.path-wrap{position:relative;margin-top:3.6rem;padding-top:1rem}
.path-line{position:absolute;top:46px;left:6%;right:6%;height:2px;
  background:repeating-linear-gradient(90deg,var(--violet) 0,var(--violet) 8px,transparent 8px,transparent 16px);opacity:0.4}
.path-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;position:relative}
.path-step{display:flex;flex-direction:column;align-items:flex-start}
.path-node{width:52px;height:52px;border-radius:50%;background:var(--bg-card);border:2px solid var(--violet);
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:1.1rem;
  color:var(--violet-light);position:relative;z-index:2;margin-bottom:1.3rem;transition:.35s}
.path-step:nth-child(2) .path-node{border-color:var(--cyan);color:var(--cyan)}
.path-step:nth-child(3) .path-node{border-color:var(--lime);color:var(--lime)}
.path-step:nth-child(4) .path-node{border-color:var(--pink);color:var(--pink)}
.path-step:hover .path-node{transform:scale(1.1);box-shadow:0 0 30px currentColor}
.path-step-title{font-family:var(--display);font-weight:600;font-size:1.05rem;margin-bottom:0.5rem}
.path-step-desc{color:var(--text-secondary);font-size:0.85rem;line-height:1.65}
.path-step-dur{font-family:var(--mono);font-size:0.66rem;color:var(--text-muted);margin-top:0.7rem;letter-spacing:0.5px}
@media(max-width:900px){.path-line{display:none}.path-steps{grid-template-columns:1fr 1fr;gap:2.2rem}}
@media(max-width:560px){.path-steps{grid-template-columns:1fr}}

/* ===== TESTIMONIAL SHOWCASE ===== */
.testi-showcase{display:grid;grid-template-columns:1.3fr 1fr;gap:1.6rem;margin-top:3.2rem;align-items:stretch}
.testi-feature{background:linear-gradient(150deg,rgba(157,111,255,0.12),rgba(62,232,255,0.04));border:1px solid var(--border-bright);
  border-radius:22px;padding:2.6rem;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.testi-feature::before{content:'"';position:absolute;top:-1rem;left:1.5rem;font-family:var(--display);font-size:9rem;
  color:var(--violet);opacity:0.12;line-height:1}
.testi-feature-quote{font-family:var(--display);font-size:1.35rem;font-weight:500;line-height:1.55;position:relative;z-index:1;margin-bottom:1.6rem}
.testi-feature-author{display:flex;align-items:center;gap:1rem;position:relative;z-index:1}
.testi-feature-avatar{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:1.1rem;color:#05070d;flex-shrink:0;background-size:cover;background-position:center;
  /* To use a real client photo instead of initials: add style="background-image:url('assets/img/client.jpg')" to this element and remove the text inside it */}
.testi-side{display:flex;flex-direction:column;gap:1.2rem}
.testi-mini{background:var(--glass);border:1px solid rgba(157,111,255,0.1);border-radius:16px;padding:1.4rem;flex:1;transition:.3s}
.testi-mini:hover{border-color:var(--border-bright);transform:translateX(4px)}
.testi-mini-text{color:var(--text-secondary);font-size:0.82rem;line-height:1.65;margin-bottom:0.9rem}
@media(max-width:900px){.testi-showcase{grid-template-columns:1fr}}

/* ===== STATS BAND ===== */
.stats-band{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid rgba(157,111,255,0.12);border-radius:20px;
  overflow:hidden;margin-top:0}
.stats-band-item{padding:2.2rem 1.6rem;text-align:center;border-right:1px solid rgba(157,111,255,0.12);background:var(--glass);transition:.3s}
.stats-band-item:last-child{border-right:none}
.stats-band-item:hover{background:rgba(157,111,255,0.06)}
.stats-band-num{font-family:var(--display);font-size:2.6rem;font-weight:700;color:var(--violet-light)}
.stats-band-label{font-size:0.74rem;color:var(--text-muted);margin-top:0.3rem;text-transform:uppercase;letter-spacing:1px}
@media(max-width:700px){.stats-band{grid-template-columns:1fr 1fr}.stats-band-item{border-bottom:1px solid rgba(157,111,255,0.12)}}

/* ===== PORTFOLIO DUAL-DIRECTION SLIDER ===== */
.portfolio-avatars{display:flex;align-items:center;justify-content:center;gap:0.9rem;margin-top:1.6rem;flex-wrap:wrap}
.portfolio-avatars .stack{display:flex}
.portfolio-avatars .stack .avatar-img{margin-left:-14px;border:2px solid var(--bg-deep);animation:none;opacity:1;transform:none}
.portfolio-avatars .stack .avatar-img:first-child{margin-left:0}
.portfolio-avatars-label{font-family:var(--mono);font-size:0.78rem;color:var(--text-secondary);letter-spacing:0.3px}

.portfolio-slider-wrap{position:relative;margin-top:3rem;padding:2.6rem 0;overflow:hidden}
.portfolio-particles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.portfolio-row{position:relative;z-index:1;overflow:hidden;margin-bottom:1.2rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.portfolio-track{display:flex;gap:1.2rem;width:max-content;will-change:transform}
.row-left .portfolio-track{animation:portfolioLeft 32s linear infinite}
.row-right .portfolio-track{animation:portfolioRight 32s linear infinite;transform:translateX(-50%)}
.portfolio-row:hover .portfolio-track{animation-play-state:paused}
@keyframes portfolioLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes portfolioRight{from{transform:translateX(-50%)}to{transform:translateX(0)}}

.portfolio-card{position:relative;width:260px;height:330px;border-radius:18px;overflow:hidden;flex-shrink:0;
  border:1px solid rgba(157,111,255,0.16);background:var(--bg-card2);
  transition:transform .4s cubic-bezier(.25,.46,.45,.94),border-color .4s}
.portfolio-card:hover{transform:translateY(-6px);border-color:var(--border-bright)}
.portfolio-card img{width:100%;height:100%;object-fit:cover;display:block}
.portfolio-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,10,18,0.92))}
.portfolio-card-tag{position:absolute;top:0.9rem;left:0.9rem;z-index:1;font-family:var(--mono);font-size:0.62rem;
  padding:0.3rem 0.65rem;border-radius:6px;background:rgba(10,13,24,0.55);border:1px solid rgba(157,111,255,0.3);
  color:var(--violet-light);letter-spacing:0.5px;backdrop-filter:blur(6px)}
.portfolio-card-label{position:absolute;bottom:1.1rem;left:1.1rem;right:1.1rem;z-index:1}
.portfolio-card-title{font-family:var(--display);font-weight:600;font-size:1rem;color:#fff}
.portfolio-card-sub{font-size:0.74rem;color:rgba(255,255,255,0.65);margin-top:0.15rem}
@media(max-width:700px){.portfolio-card{width:200px;height:260px}}
/* ===== ANIMATED AVATARS (DiceBear illustrated avatars) ===== */
.avatar-img{border-radius:14px;object-fit:cover;display:block;flex-shrink:0;background:rgba(157,111,255,0.08);
  border:1px solid rgba(157,111,255,0.18);transition:transform .4s cubic-bezier(.25,.46,.45,.94),box-shadow .4s,border-color .4s;
  opacity:0;animation:avatarIn .6s cubic-bezier(.25,.46,.45,.94) forwards}
.avatar-img:hover{transform:scale(1.08) rotate(-2deg);box-shadow:0 8px 24px rgba(157,111,255,0.35);border-color:var(--violet-light)}
@keyframes avatarIn{from{opacity:0;transform:scale(0.7) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
.avatar-img.lg{width:54px;height:54px;border-radius:16px}
.avatar-img.md{width:44px;height:44px}
.avatar-img.sm{width:34px;height:34px;border-radius:9px}
.avatar-img.xs{width:26px;height:26px;border-radius:7px}
/* ===== WHY NEXISLAB BRAND SECTION (duck.design style) ===== */
.why-section{margin:0 5%;border-radius:28px;overflow:hidden;position:relative;
  background:linear-gradient(140deg,rgba(157,111,255,0.14) 0%,rgba(20,26,44,0.95) 45%,rgba(62,232,255,0.08) 100%);
  border:1px solid rgba(157,111,255,0.22);padding:72px 60px}
.why-section::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 80% at 20% 50%,rgba(157,111,255,0.12),transparent 70%),
             radial-gradient(ellipse 40% 60% at 85% 20%,rgba(62,232,255,0.09),transparent 60%);
  pointer-events:none}
.why-inner{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;position:relative;z-index:1}
.why-left{}
.why-tag{font-family:var(--mono);font-size:0.7rem;color:var(--cyan);letter-spacing:3px;text-transform:uppercase;
  margin-bottom:1.2rem;display:flex;align-items:center;gap:0.5rem}
.why-tag::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.why-title{font-family:var(--display);font-size:clamp(2.2rem,4.5vw,3.4rem);font-weight:700;line-height:1.1;
  letter-spacing:-1.5px;color:var(--text-primary);margin-bottom:1.6rem}
.why-title span{display:block;background:linear-gradient(120deg,var(--violet-light),var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Photo collage - polaroid style */
.why-collage{position:relative;height:340px;width:100%}
.why-photo{position:absolute;background:var(--bg-card2);border:2px solid rgba(157,111,255,0.2);
  border-radius:6px;padding:10px 10px 30px;box-shadow:0 16px 48px rgba(0,0,0,0.5);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  transition:transform .4s cubic-bezier(.25,.46,.45,.94)}
.why-photo:hover{transform:scale(1.06) rotate(0deg)!important;z-index:10;box-shadow:0 24px 60px rgba(157,111,255,0.3)}
.why-photo-inner{width:100%;height:100%;border-radius:3px;display:flex;align-items:center;justify-content:center;
  font-size:2.8rem;position:relative;overflow:hidden}
.why-photo-inner::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,13,24,0.4))}
.why-photo:nth-child(1){width:140px;height:160px;left:2%;top:5%;transform:rotate(-8deg);z-index:2}
.why-photo:nth-child(2){width:150px;height:170px;left:28%;top:0%;transform:rotate(3deg);z-index:3}
.why-photo:nth-child(3){width:145px;height:165px;left:55%;top:8%;transform:rotate(-4deg);z-index:2}
.why-photo:nth-child(4){width:135px;height:155px;left:14%;top:48%;transform:rotate(6deg);z-index:1}

/* Floating decorative elements */
.why-deco{position:absolute;pointer-events:none}
.why-deco-ring{width:50px;height:50px;border-radius:50%;border:2px solid rgba(157,111,255,0.35);
  display:flex;align-items:center;justify-content:center}
.why-deco-ring::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--violet-light)}
.why-deco-dot{width:12px;height:12px;border-radius:50%;background:var(--cyan);box-shadow:0 0 16px var(--cyan);
  animation:sparkleTwinkle 2s infinite}
.why-deco-star{color:var(--amber);font-size:1.4rem;animation:sparkleTwinkle 2.8s infinite 0.4s}
.why-deco-badge{background:rgba(212,249,104,0.12);border:1px solid rgba(212,249,104,0.3);border-radius:10px;
  padding:0.5rem 0.9rem;font-family:var(--mono);font-size:0.68rem;color:var(--lime);
  animation:sparkleTwinkle 3.2s infinite 1s}

/* Right side - feature list */
.why-features{display:flex;flex-direction:column;gap:2.2rem}
.why-feature{display:flex;gap:1.2rem;align-items:flex-start}
.why-feature-icon{width:44px;height:44px;border-radius:12px;background:rgba(157,111,255,0.1);
  border:1px solid rgba(157,111,255,0.22);display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;flex-shrink:0;transition:.35s}
.why-feature:hover .why-feature-icon{background:var(--violet);border-color:transparent;transform:scale(1.1);
  box-shadow:0 0 24px var(--glow-v)}
.why-feature-title{font-family:var(--display);font-weight:700;font-size:1.05rem;margin-bottom:0.35rem;
  color:var(--text-primary)}
.why-feature-desc{color:var(--text-secondary);font-size:0.86rem;line-height:1.65}
@media(max-width:900px){
  .why-section{padding:44px 24px;margin:0}
  .why-inner{grid-template-columns:1fr;gap:3rem}
  .why-collage{height:260px}
  .why-photo:nth-child(1){width:110px;height:128px}
  .why-photo:nth-child(2){width:120px;height:138px}
  .why-photo:nth-child(3){width:115px;height:132px}
  .why-photo:nth-child(4){width:105px;height:120px}
}


/* ===== TABBED PRICING PACKAGES ===== */
.pkg-tabs{display:flex;gap:0.7rem;flex-wrap:wrap;justify-content:center;margin-top:2.2rem}
.pkg-tab{padding:0.65rem 1.6rem;border-radius:10px;border:1px solid rgba(157,111,255,0.18);background:var(--glass);
  font-size:0.86rem;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:.3s;font-family:var(--body)}
.pkg-tab:hover{border-color:var(--violet-light);color:var(--text-primary)}
.pkg-tab.active{background:linear-gradient(135deg,var(--violet),var(--violet-dim));color:#fff;border-color:transparent;
  box-shadow:0 0 24px var(--glow-v)}
.pkg-panels{margin-top:3rem;position:relative}
.pkg-panel{display:none;animation:pkgFadeIn .5s ease both}
.pkg-panel.active{display:grid}
@keyframes pkgFadeIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.pkg-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.8rem}
.pkg-card{background:var(--glass);border:1px solid rgba(157,111,255,0.12);border-radius:20px;overflow:hidden;
  transition:all .4s cubic-bezier(.25,.46,.45,.94);display:flex;flex-direction:column}
.pkg-card:hover{transform:translateY(-6px);border-color:var(--border-bright);box-shadow:0 26px 64px rgba(0,0,0,0.4),0 0 36px var(--glow-v)}
.pkg-card.featured{border-color:var(--violet);box-shadow:0 0 40px var(--glow-v)}
.pkg-head{padding:1.6rem 1.8rem;background:linear-gradient(135deg,rgba(157,111,255,0.18),rgba(62,232,255,0.06));
  display:flex;align-items:center;gap:0.9rem;border-bottom:1px solid rgba(157,111,255,0.14)}
.pkg-head-icon{width:42px;height:42px;border-radius:11px;background:rgba(157,111,255,0.18);border:1px solid rgba(157,111,255,0.3);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.2rem}
.pkg-head-title{font-family:var(--display);font-weight:700;font-size:1.08rem}
.pkg-price-row{padding:1.6rem 1.8rem 0.4rem;display:flex;align-items:baseline;gap:0.7rem}
.pkg-price{font-family:var(--display);font-size:2.4rem;font-weight:700;color:var(--lime)}
.pkg-price-old{font-family:var(--mono);font-size:1.05rem;color:var(--text-muted);text-decoration:line-through;text-decoration-color:var(--red)}
.pkg-price-suffix{font-size:0.8rem;color:var(--text-secondary);font-weight:500}
.pkg-save-badge{display:inline-block;margin:0 1.8rem 1.2rem;padding:0.22rem 0.7rem;border-radius:6px;
  background:rgba(212,249,104,0.1);border:1px solid rgba(212,249,104,0.25);color:var(--lime);
  font-family:var(--mono);font-size:0.66rem;font-weight:600;width:fit-content}
.pkg-features{list-style:none;padding:0 1.8rem;display:flex;flex-direction:column;gap:0.7rem;flex:1}
.pkg-features li{display:flex;align-items:flex-start;gap:0.6rem;font-size:0.84rem;color:var(--text-secondary);line-height:1.5}
.pkg-check{color:var(--lime);flex-shrink:0;margin-top:0.1rem}
.pkg-cta{margin:1.6rem 1.8rem 1.8rem}
@media(max-width:760px){.pkg-tabs{gap:0.5rem}.pkg-tab{padding:0.5rem 1.1rem;font-size:0.78rem}}

/* ===== DISCOUNT OFFER SECTION ===== */
.offer-section{margin:0 5%;border-radius:24px;overflow:hidden;position:relative;
  background:linear-gradient(120deg,#2a0a12,#3d0f0a 45%,#1a0608);border:1px solid rgba(255,122,122,0.25)}
.offer-section::before{content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 20% 30%,rgba(255,90,90,0.25),transparent 55%),
  radial-gradient(circle at 80% 70%,rgba(255,122,198,0.15),transparent 50%);pointer-events:none}
.offer-strip{position:relative;z-index:1;background:linear-gradient(90deg,#ff7a4d,#ffb14d);padding:0.6rem 1.5rem;
  text-align:center;font-family:var(--mono);font-size:0.78rem;font-weight:600;color:#3a1500;letter-spacing:0.3px}
.offer-strip .offer-close{margin-left:0.8rem;cursor:pointer;text-decoration:underline;font-weight:700}
.offer-body{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr 1fr;gap:2.5rem;padding:3.2rem 3rem}
.offer-left{position:relative}
.offer-big-num{font-family:var(--display);font-size:5.5rem;font-weight:800;line-height:0.9;color:#fff;
  display:flex;align-items:flex-start;gap:0.3rem;letter-spacing:-2px}
.offer-big-num .pct{font-size:2.2rem;align-self:flex-start;margin-top:0.3rem;color:#ffb14d}
.offer-tagline{font-family:var(--display);font-size:1.3rem;font-weight:600;color:#ff9e8a;margin:0.6rem 0 1.4rem}
.offer-pill{display:inline-block;background:rgba(255,122,122,0.18);border:1px solid rgba(255,122,122,0.4);
  color:#ffb3a8;padding:0.5rem 1.2rem;border-radius:8px;font-weight:600;font-size:0.88rem;margin-bottom:1.3rem}
.offer-list{list-style:none;display:flex;flex-direction:column;gap:0.6rem}
.offer-list li{display:flex;align-items:center;gap:0.6rem;color:#e8c5bc;font-size:0.88rem}
.offer-list li::before{content:'✓';color:#ffb14d;font-weight:700}
.offer-right{background:rgba(10,13,24,0.55);border:1px solid rgba(255,122,122,0.22);border-radius:18px;padding:2rem;
  backdrop-filter:blur(10px)}
.offer-right-title{font-family:var(--display);font-size:1.3rem;font-weight:700;color:#fff;margin-bottom:0.3rem}
.offer-right-sub{color:#e8c5bc;font-size:0.82rem;margin-bottom:1.4rem}
.offer-input{width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,122,122,0.25);border-radius:10px;
  padding:0.85rem 1.1rem;color:#fff;font-size:0.88rem;margin-bottom:0.9rem;outline:none;transition:.25s;font-family:var(--body)}
.offer-input::placeholder{color:#a8857d}
.offer-input:focus{border-color:#ff9e8a;box-shadow:0 0 0 3px rgba(255,122,122,0.15)}
.offer-phone-row{display:flex;gap:0.6rem;margin-bottom:0.9rem}
.offer-phone-code{width:80px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,122,122,0.25);border-radius:10px;
  color:#fff;font-size:0.84rem;padding:0 0.6rem;flex-shrink:0}
.offer-phone-row .offer-input{margin-bottom:0}
.offer-select{width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,122,122,0.25);border-radius:10px;
  padding:0.85rem 1.1rem;color:#fff;font-size:0.88rem;margin-bottom:1.2rem;outline:none;font-family:var(--body)}
.offer-select option{background:#1a0608}
.offer-btn{width:100%;padding:0.9rem;border-radius:10px;border:none;background:linear-gradient(135deg,#ffb14d,#ff7a4d);
  color:#3a1500;font-weight:700;font-size:0.92rem;cursor:pointer;transition:.3s;font-family:var(--body)}
.offer-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,150,70,0.35)}
.offer-meta{display:flex;align-items:center;justify-content:space-between;margin-top:1.1rem;font-size:0.74rem;color:#c9a499;flex-wrap:wrap;gap:0.6rem}
.offer-success{display:none;text-align:center;padding:1.5rem 0}
.offer-success.show{display:block}
@media(max-width:900px){.offer-body{grid-template-columns:1fr;padding:2.2rem 1.6rem}.offer-big-num{font-size:4rem}}

/* ===== HEADER QUOTE TRIGGER BUTTON ===== */
.nav-quote-btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.55rem 1.3rem;border-radius:10px;
  background:transparent;border:1px solid rgba(62,232,255,0.4);color:var(--cyan)!important;font-weight:600;
  font-size:0.8rem;cursor:pointer;transition:all .3s;font-family:var(--body);letter-spacing:0.2px}
.nav-quote-btn:hover{background:rgba(62,232,255,0.1);transform:translateY(-2px);box-shadow:0 0 20px var(--glow-c)}
.nav-quote-btn svg{flex-shrink:0}
.mm-quote-btn{color:var(--cyan)!important;font-weight:600;display:flex;align-items:center;gap:0.5rem}

/* ===== QUOTE POPUP MODAL ===== */
.quote-overlay{position:fixed;inset:0;z-index:3000;background:rgba(6,7,14,0.78);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;padding:4%;opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility .35s ease}
.quote-overlay.open{opacity:1;visibility:visible}
.quote-modal{background:linear-gradient(150deg,var(--bg-card2),var(--bg-card));border:1px solid var(--border-bright);
  border-radius:26px;max-width:840px;width:100%;max-height:90vh;overflow-y:auto;position:relative;
  box-shadow:0 50px 120px rgba(0,0,0,0.6),0 0 90px var(--glow-v);
  display:grid;grid-template-columns:0.85fr 1.15fr;
  transform:translateY(30px) scale(0.96);transition:transform .4s cubic-bezier(.25,.46,.45,.94)}
.quote-overlay.open .quote-modal{transform:translateY(0) scale(1)}
.quote-close{position:absolute;top:1.2rem;right:1.2rem;width:34px;height:34px;border-radius:10px;z-index:5;
  background:rgba(255,255,255,0.06);border:1px solid rgba(157,111,255,0.2);display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text-secondary);transition:.25s}
.quote-close:hover{color:#fff;border-color:var(--violet-light);background:rgba(157,111,255,0.15);transform:rotate(90deg)}
/* =========================================================
   NEXISLAB — HIGH-END AI QUOTE SECTION
   Bright / White / Violet / Cyan / Pink / Blue
   Fully responsive + animated
========================================================= */

:root{
  --q-white:#ffffff;
  --q-bg:#f7f9ff;
  --q-dark:#15172b;
  --q-text:#20243a;
  --q-muted:#68708c;

  --q-violet:#6d4aff;
  --q-purple:#8b5cf6;
  --q-blue:#3b82f6;
  --q-cyan:#06b6d4;
  --q-pink:#ec4899;
  --q-orange:#f59e0b;
  --q-green:#22c55e;

  --q-border:rgba(109,74,255,.14);
  --q-shadow:0 30px 80px rgba(55,45,120,.15);

  --q-display:'Space Grotesk',sans-serif;
  --q-body:'Inter',sans-serif;
}


/* =========================================================
   MAIN VISUAL
========================================================= */

.quote-visual{
  position:relative;
  isolation:isolate;

  min-width:0;
  overflow:hidden;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:clamp(2rem,4vw,4rem);

  background:
    radial-gradient(
      circle at 15% 15%,
      rgba(139,92,246,.18),
      transparent 30%
    ),
    radial-gradient(
      circle at 85% 20%,
      rgba(6,182,212,.16),
      transparent 30%
    ),
    radial-gradient(
      circle at 50% 100%,
      rgba(236,72,153,.13),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f7f5ff 38%,
      #f4fbff 70%,
      #fff7fc 100%
    );

  border-right:1px solid rgba(109,74,255,.12);
}


/* =========================================================
   SOFT GRID
========================================================= */

.quote-visual::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;

  background-image:
    linear-gradient(
      rgba(109,74,255,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(6,182,212,.035) 1px,
      transparent 1px
    );

  background-size:34px 34px;

  mask-image:
    radial-gradient(
      ellipse at center,
      black 20%,
      transparent 78%
    );
}


/* =========================================================
   MOVING LIGHT
========================================================= */

.quote-visual::after{
  content:"";
  position:absolute;

  width:360px;
  height:360px;

  top:-160px;
  right:-120px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(6,182,212,.22),
      rgba(109,74,255,.08) 45%,
      transparent 70%
    );

  filter:blur(20px);
  z-index:-1;

  animation:quoteOrbMove 9s ease-in-out infinite alternate;
}

@keyframes quoteOrbMove{
  0%{
    transform:translate(0,0) scale(1);
  }
  50%{
    transform:translate(-50px,35px) scale(1.12);
  }
  100%{
    transform:translate(-20px,70px) scale(.95);
  }
}


/* =========================================================
   CENTRAL GLOW
========================================================= */

.quote-visual-glow{
  position:absolute;

  width:clamp(180px,28vw,360px);
  height:clamp(180px,28vw,360px);

  left:50%;
  top:38%;

  transform:translate(-50%,-50%);

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(109,74,255,.20) 0%,
      rgba(59,130,246,.12) 32%,
      rgba(6,182,212,.08) 50%,
      transparent 72%
    );

  filter:blur(25px);

  animation:quoteGlowPulse 5s ease-in-out infinite;

  z-index:0;
}

@keyframes quoteGlowPulse{
  0%,100%{
    opacity:.55;
    transform:translate(-50%,-50%) scale(.9);
  }

  50%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.12);
  }
}


/* =========================================================
   SPARKLES
========================================================= */

.quote-sparkle{
  position:absolute;

  width:7px;
  height:7px;

  border-radius:50%;

  background:var(--q-cyan);

  box-shadow:
    0 0 8px var(--q-cyan),
    0 0 20px rgba(6,182,212,.45);

  animation:
    sparkleTwinkle 3s ease-in-out infinite,
    sparkleFloat 6s ease-in-out infinite;

  z-index:1;
}

.quote-sparkle:nth-child(2){
  background:var(--q-pink);
  box-shadow:
    0 0 8px var(--q-pink),
    0 0 20px rgba(236,72,153,.35);

  animation-delay:.7s;
}

.quote-sparkle:nth-child(3){
  background:var(--q-violet);
  box-shadow:
    0 0 8px var(--q-violet),
    0 0 20px rgba(109,74,255,.4);

  animation-delay:1.4s;
}

@keyframes sparkleTwinkle{
  0%,100%{
    opacity:.25;
    transform:scale(.65);
  }

  50%{
    opacity:1;
    transform:scale(1.25);
  }
}

@keyframes sparkleFloat{
  0%,100%{
    margin-top:0;
  }

  50%{
    margin-top:-14px;
  }
}


/* =========================================================
   MASCOT / IMAGE
========================================================= */

.quote-mascot{
  position:relative;
  z-index:2;

  width:min(100%,250px);
  max-height:260px;

  object-fit:contain;

  filter:
    drop-shadow(0 20px 30px rgba(80,60,180,.14))
    drop-shadow(0 5px 15px rgba(6,182,212,.08));

  animation:
    quoteMascotFloat 5s ease-in-out infinite;

  transition:
    transform .45s ease,
    filter .45s ease;
}

.quote-mascot:hover{
  transform:
    translateY(-8px)
    rotate(1deg)
    scale(1.025);

  filter:
    drop-shadow(0 28px 45px rgba(80,60,180,.20))
    drop-shadow(0 8px 20px rgba(6,182,212,.15));
}

@keyframes quoteMascotFloat{
  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-8px);
  }
}


/* =========================================================
   VISUAL TEXT
========================================================= */

.quote-visual-text{
  position:relative;
  z-index:3;

  width:100%;
  max-width:360px;

  text-align:center;

  margin-top:clamp(1rem,2vw,1.8rem);

  padding:0 .5rem;
}

.quote-visual-title{
  margin:0 0 .65rem;

  font-family:var(--q-display);

  font-size:clamp(1.35rem,2.4vw,2rem);

  line-height:1.15;

  font-weight:800;

  letter-spacing:-.035em;

  color:var(--q-dark);

  background:
    linear-gradient(
      100deg,
      var(--q-violet),
      var(--q-blue) 45%,
      var(--q-cyan) 75%,
      var(--q-pink)
    );

  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;

  background-size:220% auto;

  animation:gradientText 6s ease infinite;
}

@keyframes gradientText{
  0%,100%{
    background-position:0% 50%;
  }

  50%{
    background-position:100% 50%;
  }
}

.quote-visual-sub{
  width:100%;
  max-width:330px;

  margin:0 auto;

  color:var(--q-muted);

  font-family:var(--q-body);

  font-size:.86rem;

  line-height:1.7;

  overflow-wrap:anywhere;
}


/* =========================================================
   STATS
========================================================= */

.quote-visual-stats{
  width:100%;
  max-width:390px;

  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:.7rem;

  margin-top:1.8rem;

  position:relative;
  z-index:3;
}

.quote-visual-stat{
  min-width:0;

  padding:.85rem .55rem;

  text-align:center;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.95),
      rgba(248,249,255,.75)
    );

  border:1px solid rgba(109,74,255,.13);

  border-radius:15px;

  box-shadow:
    0 10px 25px rgba(55,45,120,.07),
    inset 0 1px 0 rgba(255,255,255,.9);

  backdrop-filter:blur(10px);

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}

.quote-visual-stat:nth-child(1){
  border-top:2px solid var(--q-violet);
}

.quote-visual-stat:nth-child(2){
  border-top:2px solid var(--q-cyan);
}

.quote-visual-stat:nth-child(3){
  border-top:2px solid var(--q-pink);
}

.quote-visual-stat:hover{
  transform:translateY(-5px);

  border-color:rgba(109,74,255,.3);

  box-shadow:
    0 18px 35px rgba(55,45,120,.12);
}

.quote-visual-stat-num{
  display:block;

  font-family:var(--q-display);

  font-size:clamp(1rem,2vw,1.35rem);

  font-weight:800;

  background:
    linear-gradient(
      100deg,
      var(--q-violet),
      var(--q-blue),
      var(--q-cyan)
    );

  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.quote-visual-stat-label{
  display:block;

  margin-top:.18rem;

  color:#8990a8;

  font-family:var(--q-body);

  font-size:.61rem;

  font-weight:600;

  text-transform:uppercase;

  letter-spacing:.07em;

  overflow-wrap:anywhere;
}


/* =========================================================
   FORM SIDE — IMPORTANT FIX
========================================================= */

.quote-form,
.quote-content,
.quote-panel,
.quote-form-panel{
  min-width:0;
  max-width:100%;
  overflow:hidden;
}


/* Every common form wrapper */
.quote-form input,
.quote-form textarea,
.quote-form select,
.quote-form button,
.quote-content input,
.quote-content textarea,
.quote-content select,
.quote-content button,
.quote-panel input,
.quote-panel textarea,
.quote-panel select,
.quote-panel button{
  max-width:100%;
  box-sizing:border-box;
}


/* =========================================================
   FORM GRID FIX
========================================================= */

.form-row{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr);

  gap:1rem;

  width:100%;
}


/* Prevent long labels/content from breaking layout */
.form-group{
  min-width:0;
  width:100%;
}

.form-label{
  display:block;

  max-width:100%;

  overflow-wrap:anywhere;
}

.form-input,
.form-textarea,
.form-select{
  width:100%;
  min-width:0;
  max-width:100%;
}


/* =========================================================
   BRIGHT FORM INPUTS
========================================================= */

.form-input,
.form-textarea,
.form-select{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      rgba(248,249,255,.95)
    );

  border:1px solid rgba(109,74,255,.15);

  color:var(--q-text);

  border-radius:13px;

  padding:.82rem 1rem;

  box-shadow:
    0 4px 14px rgba(55,45,120,.035),
    inset 0 1px 0 rgba(255,255,255,.9);

  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
}

.form-input:hover,
.form-textarea:hover,
.form-select:hover{
  border-color:rgba(59,130,246,.25);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus{
  border-color:var(--q-violet);

  outline:none;

  box-shadow:
    0 0 0 4px rgba(109,74,255,.08),
    0 10px 25px rgba(109,74,255,.08);

  transform:translateY(-1px);
}

.form-input::placeholder,
.form-textarea::placeholder{
  color:#a0a6ba;
}


/* =========================================================
   BUDGET BUTTONS
========================================================= */

.budget-option,
.budget-btn,
.form-budget button{
  background:#fff;

  border:1px solid rgba(109,74,255,.14);

  color:#606881;

  border-radius:11px;

  transition:
    .25s ease;

  cursor:pointer;
}

.budget-option:hover,
.budget-btn:hover,
.form-budget button:hover{
  border-color:var(--q-violet);

  color:var(--q-violet);

  background:
    linear-gradient(
      135deg,
      #fff,
      #f5f2ff
    );

  transform:translateY(-2px);

  box-shadow:
    0 8px 20px rgba(109,74,255,.09);
}

.budget-option.active,
.budget-btn.active,
.form-budget button.active{
  color:#fff;

  border-color:transparent;

  background:
    linear-gradient(
      100deg,
      var(--q-violet),
      var(--q-blue),
      var(--q-cyan)
    );

  box-shadow:
    0 10px 25px rgba(109,74,255,.2);
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.btn-primary{
  position:relative;

  width:100%;

  min-height:52px;

  overflow:hidden;

  border:0;

  border-radius:13px;

  color:#fff;

  font-family:var(--q-display);

  font-weight:700;

  background:
    linear-gradient(
      100deg,
      #6947f5,
      #496ff5 45%,
      #08a9d0 100%
    );

  box-shadow:
    0 14px 30px rgba(86,72,220,.20);

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.btn-primary::before{
  content:"";

  position:absolute;

  top:0;
  left:-120%;

  width:70%;
  height:100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.38),
      transparent
    );

  transform:skewX(-20deg);

  animation:buttonShine 4s ease-in-out infinite;
}

@keyframes buttonShine{
  0%,55%{
    left:-120%;
  }

  75%,100%{
    left:140%;
  }
}

.btn-primary:hover{
  transform:translateY(-3px);

  box-shadow:
    0 20px 40px rgba(86,72,220,.28);
}

.btn-primary:active{
  transform:translateY(-1px);
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:900px){

  .quote-visual{
    min-height:480px;

    padding:
      2.5rem
      1.5rem;
      
    border-right:0;
    border-bottom:1px solid rgba(109,74,255,.12);
  }

  .quote-mascot{
    width:min(210px,70vw);
  }

  .quote-visual-stats{
    max-width:420px;
  }
}


@media(max-width:700px){

  .quote-visual{
    min-height:auto;

    padding:
      2.5rem
      1.2rem
      2.2rem;
  }

  .quote-visual-title{
    font-size:1.5rem;
  }

  .quote-visual-sub{
    font-size:.82rem;
  }

  .quote-visual-stats{
    gap:.5rem;
  }

  .quote-visual-stat{
    padding:.75rem .35rem;
    border-radius:12px;
  }

  .quote-visual-stat-num{
    font-size:1rem;
  }

  .quote-visual-stat-label{
    font-size:.55rem;
  }

  .form-row{
    grid-template-columns:1fr;
  }
}


@media(max-width:480px){

  .quote-visual{
    padding:
      2rem
      1rem;
  }

  .quote-mascot{
    width:180px;
    max-height:210px;
  }

  .quote-visual-text{
    margin-top:1rem;
  }

  .quote-visual-title{
    font-size:1.35rem;
  }

  .quote-visual-sub{
    font-size:.78rem;
    line-height:1.6;
  }

  .quote-visual-stats{
    grid-template-columns:1fr;
    max-width:220px;
  }

  .quote-visual-stat{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
  }

  .quote-visual-stat-label{
    margin-top:0;
  }
}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media(max-width:360px){

  .quote-visual{
    padding:
      1.6rem
      .8rem;
  }

  .quote-visual-title{
    font-size:1.2rem;
  }

  .quote-visual-sub{
    font-size:.74rem;
  }

  .quote-visual-stats{
    max-width:200px;
  }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media(prefers-reduced-motion:reduce){

  .quote-visual::after,
  .quote-visual-glow,
  .quote-mascot,
  .quote-sparkle,
  .quote-visual-title,
  .btn-primary::before{
    animation:none !important;
  }

  .quote-mascot{
    transform:none !important;
  }
}

.quote-form-side{padding:2.4rem 2.4rem 2rem}
.quote-eyebrow{font-family:var(--mono);font-size:0.68rem;color:var(--cyan);letter-spacing:3px;text-transform:uppercase;margin-bottom:0.5rem}
.quote-title{font-family:var(--display);font-size:1.5rem;font-weight:700;line-height:1.25;margin-bottom:0.4rem}
.quote-sub{color:var(--text-secondary);font-size:0.84rem;margin-bottom:1.5rem}
.quote-row{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem}
.quote-group{display:flex;flex-direction:column;gap:0.35rem;margin-bottom:0.95rem}
.quote-label{font-size:0.74rem;font-weight:500;color:var(--text-secondary)}
.quote-input,.quote-select,.quote-textarea{background:rgba(255,255,255,0.03);border:1px solid rgba(157,111,255,0.16);
  border-radius:10px;padding:0.68rem 0.95rem;color:var(--text-primary);font-size:0.84rem;font-family:var(--body);
  width:100%;transition:.25s;outline:none}
.quote-input:focus,.quote-select:focus,.quote-textarea:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(157,111,255,0.12)}
.quote-select option{background:var(--bg-card)}
.quote-textarea{height:70px;resize:vertical}
.quote-budget-pills{display:flex;gap:0.5rem;flex-wrap:wrap}
.quote-budget-pill{padding:0.45rem 0.9rem;border-radius:8px;border:1px solid rgba(157,111,255,0.16);background:rgba(255,255,255,0.02);
  font-size:0.74rem;color:var(--text-secondary);cursor:pointer;transition:.25s;font-family:var(--body)}
.quote-budget-pill:hover{border-color:var(--violet-light);color:var(--text-primary)}
.quote-budget-pill.active{background:linear-gradient(135deg,var(--violet),var(--violet-dim));color:#fff;border-color:transparent}
.quote-submit{width:100%;margin-top:0.4rem}
.quote-success{display:none;text-align:center;padding:2.5rem 1rem}
.quote-success.show{display:block}
.quote-success-icon{width:60px;height:60px;border-radius:50%;background:rgba(212,249,104,0.1);border:1px solid rgba(212,249,104,0.3);
  display:flex;align-items:center;justify-content:center;margin:0 auto 1.1rem;font-size:1.6rem}
@media(max-width:760px){
  .quote-modal{grid-template-columns:1fr;max-height:92vh}
  .quote-visual{padding:1.8rem 1.2rem;display:none}
  .quote-row{grid-template-columns:1fr}
  .quote-form-side{padding:2rem 1.5rem 1.6rem}
}

.footer-contact{display:flex;flex-direction:column;gap:0.55rem;margin:1.1rem 0 1.3rem}
.footer-contact-item{display:inline-flex;align-items:center;gap:0.5rem;color:var(--text-secondary);font-size:0.82rem;text-decoration:none;transition:color .25s ease}
.footer-contact-item svg{flex-shrink:0;color:var(--violet-light)}
.footer-contact-item:hover{color:var(--violet-light)}
.top-contact-bar{
  position:fixed;top:0;left:0;right:0;z-index:1001;
  height:40px;display:flex;align-items:center;justify-content:center;
  background:rgba(139,92,246,0.07);border-bottom:1px solid rgba(139,92,246,0.12);
  padding:0 5%;
}

/* =========================
   Premium Top Contact Bar
========================= */

.top-contact-bar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1001;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 5%;

    background:linear-gradient(90deg,#0f172a,#1e293b,#111827);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 8px 25px rgba(0,0,0,.18);
}

.top-contact-inner{
    width:100%;
    max-width:1300px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2rem;
    flex-wrap:wrap;
}

.top-contact-item{
    display:inline-flex;
    align-items:center;
    gap:.55rem;

    color:rgba(255,255,255,.88);
    text-decoration:none;

    font-size:.82rem;
    font-weight:500;
    letter-spacing:.3px;

    transition:.35s ease;
    position:relative;
}

.top-contact-item svg{
    width:16px;
    height:16px;
    color:var(--violet-light);
    transition:.35s ease;
}

/* Hover Effect */

.top-contact-item:hover{
    color:#fff;
    transform:translateY(-2px);
}

.top-contact-item:hover svg{
    color:#8b5cf6;
    transform:scale(1.15) rotate(-8deg);
}

/* Animated Underline */

.top-contact-item::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-4px;
    width:0;
    height:2px;
    border-radius:20px;
    background:linear-gradient(90deg,#8b5cf6,#a855f7,#ec4899);
    transition:.35s ease;
}

.top-contact-item:hover::after{
    width:100%;
}

/* Divider */

.top-contact-item:not(:last-child)::before{
    content:"";
    position:absolute;
    right:-1rem;
    top:50%;
    transform:translateY(-50%);
    width:1px;
    height:16px;
    background:rgba(255,255,255,.12);
}

/* Push navbar below contact bar */

#navbar{
    margin-top:45px;
}

.mobile-menu{
    margin-top:45px;
}

/* Mobile */

@media(max-width:640px){

    .top-contact-bar{
        height:auto;
        padding:10px 18px;
    }

    .top-contact-inner{
        justify-content:flex-start;
        gap:10px 20px;
    }

    .top-contact-item{
        font-size:.76rem;
    }

    .top-contact-item.address{
        width:100%;
    }

    .top-contact-item::before{
        display:none;
    }

    #navbar,
    .mobile-menu{
        margin-top:65px;
    }
}

/* ==========================================================
   NEXISLAB — MOBILE HEADER / CONTACT BAR FIX
   IMPORTANT: load this AFTER style.css / responsive overrides.
   Fixes the fixed-header stacking issue visible at 400px width.
========================================================== */

:root{
  --contact-h:45px;
  --nav-h:78px;
}

/* ---------- CONTACT BAR ---------- */

.top-contact-bar{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:1100 !important;
  height:var(--contact-h) !important;
  min-height:var(--contact-h) !important;
  padding:0 clamp(12px,4vw,5%) !important;
  overflow:hidden !important;
}

.top-contact-inner{
  width:100% !important;
  max-width:1300px !important;
  height:100% !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-template-rows:1fr !important;
  align-items:center !important;
  justify-content:stretch !important;
  gap:0 clamp(8px,2vw,28px) !important;
  flex-wrap:nowrap !important;
}

.top-contact-item{
  min-width:0 !important;
  width:100% !important;
  max-width:100% !important;
  justify-content:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  font-size:clamp(.68rem,.9vw,.82rem) !important;
  line-height:1 !important;
}

.top-contact-item svg{
  flex:0 0 auto !important;
  width:15px !important;
  height:15px !important;
}

.top-contact-item.address{
  grid-column:auto !important;
  width:100% !important;
}

.top-contact-item:not(:last-child)::before{
  right:calc(clamp(8px,2vw,28px) / -2) !important;
}

/* ---------- NAVBAR ----------
   Do NOT use margin-top on a fixed element.
   Fixed nav must be moved with top.
---------- */

#navbar,
nav#navbar{
  position:fixed !important;
  top:var(--contact-h) !important;
  left:0 !important;
  right:0 !important;
  z-index:1050 !important;
  margin-top:0 !important;
  height:var(--nav-h) !important;
  min-height:var(--nav-h) !important;
  padding-left:clamp(14px,5vw,6%) !important;
  padding-right:clamp(14px,5vw,6%) !important;
}

#navbar .logo-img{
  height:clamp(54px,7vw,75px) !important;
  width:auto !important;
  max-width:min(180px,42vw) !important;
  object-fit:contain !important;
}

#navbar .nav-links{
  min-width:0;
}

#navbar .hamburger{
  display:none;
  width:44px;
  height:44px;
  flex:0 0 44px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  margin:0;
  padding:9px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(255,255,255,.06);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

#navbar .hamburger span{
  display:block;
  width:25px;
  height:2.5px;
  flex:0 0 2.5px;
  background:#fff;
  border-radius:999px;
}

/* ---------- MOBILE NAV ---------- */

@media (max-width:991px){

  :root{
    --nav-h:68px;
  }

  #navbar{
    top:var(--contact-h) !important;
    height:var(--nav-h) !important;
    min-height:var(--nav-h) !important;
  }

  #navbar .nav-links{
    display:none !important;
  }

  #navbar .hamburger{
    display:flex !important;
  }

  #navbar .logo-img{
    height:58px !important;
    max-width:150px !important;
  }

  /* Menu begins directly below BOTH fixed bars */
  .mobile-menu{
    position:fixed !important;
    top:calc(var(--contact-h) + var(--nav-h)) !important;
    left:0 !important;
    right:0 !important;
    bottom:auto !important;
    width:100% !important;
    max-height:calc(100dvh - var(--contact-h) - var(--nav-h)) !important;
    margin:0 !important;
    padding:12px clamp(16px,5vw,28px) max(18px,env(safe-area-inset-bottom)) !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    z-index:1090 !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
  }

  .mobile-menu.open{
    display:flex !important;
  }

  .mobile-menu a{
    width:100% !important;
    min-height:46px !important;
    display:flex !important;
    align-items:center !important;
    padding:11px 4px !important;
    font-size:.94rem !important;
  }

  .mobile-menu .mm-quote-btn,
  .mobile-menu .mm-cta{
    justify-content:center !important;
    text-align:center !important;
  }

}

/* ---------- TABLET / PHONE CONTACT BAR ---------- */

@media (max-width:640px){

  :root{
    --contact-h:76px;
    --nav-h:66px;
  }

  .top-contact-bar{
    height:var(--contact-h) !important;
    min-height:var(--contact-h) !important;
    padding:7px 12px !important;
  }

  .top-contact-inner{
    height:100% !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-template-rows:34px 27px !important;
    gap:2px 6px !important;
  }

  .top-contact-item{
    justify-content:flex-start !important;
    gap:4px !important;
    font-size:.69rem !important;
    letter-spacing:0 !important;
  }

  .top-contact-item svg{
    width:13px !important;
    height:13px !important;
  }

  .top-contact-item.address{
    grid-column:1 / -1 !important;
    justify-content:center !important;
    font-size:.67rem !important;
  }

  .top-contact-item:not(:last-child)::before{
    display:none !important;
  }

  #navbar{
    top:var(--contact-h) !important;
  }

  #navbar .logo-img{
    height:55px !important;
    max-width:140px !important;
  }

  #navbar .hamburger{
    width:42px !important;
    height:42px !important;
    flex-basis:42px !important;
  }

  #navbar .hamburger span{
    width:24px !important;
  }
}

/* ---------- SMALL PHONES ----------
   Keep all 3 numbers readable by using compact type.
---------- */

@media (max-width:380px){

  :root{
    --contact-h:96px;
    --nav-h:64px;
  }

  .top-contact-bar{
    height:var(--contact-h) !important;
    min-height:var(--contact-h) !important;
    padding:7px 10px !important;
  }

  .top-contact-inner{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:30px 30px 22px !important;
    gap:2px 8px !important;
  }

  .top-contact-item{
    font-size:.68rem !important;
    justify-content:center !important;
  }

  .top-contact-item:nth-child(3){
    grid-column:1 / -1 !important;
  }

  .top-contact-item.address{
    grid-column:1 / -1 !important;
    font-size:.62rem !important;
  }

  #navbar .logo-img{
    height:52px !important;
    max-width:128px !important;
  }

  #navbar .hamburger{
    width:40px !important;
    height:40px !important;
    flex-basis:40px !important;
  }

}

/* ---------- VERY SMALL DEVICES ----------
   280px–320px: stack the contact numbers cleanly.
---------- */

@media (max-width:320px){

  :root{
    --contact-h:126px;
    --nav-h:62px;
  }

  .top-contact-bar{
    height:var(--contact-h) !important;
    min-height:var(--contact-h) !important;
  }

  .top-contact-inner{
    grid-template-columns:1fr !important;
    grid-template-rows:repeat(3,27px) 25px !important;
    gap:0 !important;
  }

  .top-contact-item,
  .top-contact-item:nth-child(3),
  .top-contact-item.address{
    grid-column:1 !important;
    width:100% !important;
    justify-content:center !important;
  }

  .top-contact-item{
    font-size:.66rem !important;
  }

  .top-contact-item.address{
    font-size:.59rem !important;
  }

  #navbar .logo-img{
    height:49px !important;
    max-width:120px !important;
  }

  #navbar .hamburger{
    width:39px !important;
    height:39px !important;
    flex-basis:39px !important;
  }

  #navbar .hamburger span{
    width:22px !important;
  }
}

/* ---------- DESKTOP ----------
   Contact bar + nav remain visually separate.
---------- */

@media (min-width:992px){

  #navbar{
    top:var(--contact-h) !important;
    margin-top:0 !important;
  }

  .mobile-menu{
    top:calc(var(--contact-h) + var(--nav-h)) !important;
    margin-top:0 !important;
  }

}

/* ---------- ACCESSIBILITY / TOUCH ---------- */

@media (hover:none) and (pointer:coarse){
  #navbar .hamburger{
    min-width:44px;
    min-height:44px;
  }

  .top-contact-item:hover{
    transform:none !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .mobile-menu,
  #navbar,
  .hamburger span{
    animation:none !important;
    transition:none !important;
  }
}

/* ==========================================================
   NEXISLAB — FINAL LIGHT MOBILE HEADER + HERO OVERRIDES
   Fixes: invisible hamburger, dark top-bar text, light header,
   tighter hero spacing, and a much larger mobile hero heading.
========================================================== */

.top-contact-bar{
  background:linear-gradient(180deg,#ffffff 0%,#f5f7ff 100%) !important;
  border-bottom:1px solid rgba(30,34,55,.10) !important;
  box-shadow:0 4px 18px rgba(30,34,55,.08) !important;
  color:#1c2133 !important;
}

.top-contact-item,
.top-contact-item:hover{
  color:#20243a !important;
}

.top-contact-item svg,
.top-contact-item:hover svg{
  color:#6d4aff !important;
}

.top-contact-item:not(:last-child)::before{
  background:rgba(30,34,55,.12) !important;
}

#navbar,
nav#navbar{
  background:rgba(255,255,255,.96) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
  border-bottom:1px solid rgba(30,34,55,.08) !important;
  box-shadow:0 10px 28px rgba(30,34,55,.07) !important;
}

#navbar .hamburger{
  display:none;
  background:#ffffff !important;
  border:1px solid rgba(30,34,55,.14) !important;
  box-shadow:0 5px 16px rgba(30,34,55,.08) !important;
}

#navbar .hamburger span{
  background:#15182a !important;
  width:25px !important;
  height:3px !important;
  border-radius:999px !important;
}

.logo-fallback{
  display:none;
  align-items:center;
  font-family:var(--display,'Space Grotesk',sans-serif);
  font-size:1.45rem;
  font-weight:700;
  letter-spacing:-.8px;
  color:#15182a;
  text-decoration:none;
  white-space:nowrap;
}
.logo-fallback span{
  color:#6d4aff;
}

/* Avoid the double vertical offset caused by main padding + hero padding. */

.hero{
  min-height:calc(100vh - var(--contact-h) - var(--nav-h)) !important;
  padding-top:clamp(70px,8vh,110px) !important;
}

.hero-slide-title,
.hero-title{
  font-size:clamp(3.1rem,7vw,5.6rem) !important;
  line-height:.98 !important;
  letter-spacing:-3px !important;
}

@media (max-width:991px){
  #navbar .hamburger{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  .mobile-menu{
    background:#ffffff !important;
    color:#20243a !important;
    border-top:1px solid rgba(30,34,55,.08) !important;
    box-shadow:0 18px 35px rgba(30,34,55,.12) !important;
  }

  .mobile-menu a{
    color:#20243a !important;
    border-bottom:1px solid rgba(30,34,55,.07);
  }

  .hero{
    grid-template-columns:1fr !important;
    min-height:calc(100vh - var(--contact-h) - var(--nav-h)) !important;
    padding:clamp(42px,8vh,72px) 5% 60px !important;
    align-items:center !important;
  }

  .hero-slide-title,
  .hero-title{
    font-size:clamp(3rem,11.5vw,5.2rem) !important;
    line-height:.96 !important;
    letter-spacing:-2.6px !important;
    margin-bottom:1.2rem !important;
    max-width:100% !important;
  }

  .hero-slide-sub,
  .hero-sub{
    font-size:1rem !important;
    line-height:1.65 !important;
  }
}

@media (max-width:640px){
  .hero{
    padding-top:34px !important;
    padding-bottom:48px !important;
  }

  .hero-slide-tag,
  .hero-badge{
    font-size:.66rem !important;
    padding:.38rem .9rem !important;
    margin-bottom:1.25rem !important;
  }

  .hero-slide-title,
  .hero-title{
    font-size:clamp(2.85rem,12.5vw,4.2rem) !important;
    line-height:.94 !important;
    letter-spacing:-2.3px !important;
  }

  .hero-slide-sub,
  .hero-sub{
    max-width:100% !important;
    margin-bottom:1.7rem !important;
  }

  .hero-slide-btns,
  .hero-btns{
    gap:.7rem !important;
    margin-bottom:2rem !important;
  }

  .hero-stats,
  .hero-slide-stats{
    gap:1.2rem !important;
  }
}

@media (max-width:380px){
  .hero-slide-title,
  .hero-title{
    font-size:clamp(2.55rem,13.2vw,3.7rem) !important;
    letter-spacing:-2px !important;
  }
}

/* ==========================================================
   NEXISLAB — CLEAN TOP CONTACT BAR
   ========================================================== */
.top-contact-bar{
  background:#f8f9ff !important;
  color:#182033 !important;
  border-bottom:1px solid rgba(93,76,170,.12) !important;
  box-shadow:0 2px 12px rgba(20,24,45,.045) !important;
  height:48px !important;
  min-height:48px !important;
  padding:0 !important;
  overflow:hidden !important;
}

.top-contact-inner{
  width:min(1240px,calc(100% - 32px)) !important;
  height:48px !important;
  margin:0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:22px !important;
}

.top-contact-phones{
  display:flex !important;
  align-items:center !important;
  gap:0 !important;
  min-width:0 !important;
}

.top-contact-item{
  width:auto !important;
  min-width:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  padding:0 17px !important;
  color:#26304a !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1 !important;
  letter-spacing:.01em !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  border-right:1px solid rgba(93,76,170,.13) !important;
  transition:color .2s ease,transform .2s ease !important;
}

.top-contact-item:first-child{
  padding-left:0 !important;
}

.top-contact-item:hover{
  color:#7054d8 !important;
  transform:translateY(-1px) !important;
}

.top-contact-item svg,
.top-contact-address svg{
  color:#7657e8 !important;
  stroke:currentColor !important;
  flex:0 0 auto !important;
}

.top-contact-address{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:7px 12px !important;
  border:1px solid rgba(118,87,232,.15) !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#39415a !important;
  font-size:11.5px !important;
  font-weight:600 !important;
  line-height:1 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  box-shadow:0 2px 8px rgba(50,45,100,.04) !important;
  transition:border-color .2s ease,box-shadow .2s ease,color .2s ease !important;
}

.top-contact-address:hover{
  color:#7054d8 !important;
  border-color:rgba(118,87,232,.32) !important;
  box-shadow:0 4px 14px rgba(80,65,160,.09) !important;
}

.address-icon{
  width:23px !important;
  height:23px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:50% !important;
  background:#f0ecff !important;
}

/* Keep the navbar directly below the redesigned 48px bar. */
:root{
  --contact-h:48px !important;
}

@media (max-width:991px){
  .top-contact-bar{
    height:72px !important;
    min-height:72px !important;
    padding:0 10px !important;
  }

  .top-contact-inner{
    width:100% !important;
    height:72px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:39px 33px !important;
    gap:0 !important;
  }

  .top-contact-phones{
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
  }

  .top-contact-item{
    flex:1 1 0 !important;
    padding:0 8px !important;
    font-size:10.5px !important;
  }

  .top-contact-item:first-child{
    padding-left:5px !important;
  }

  .top-contact-address{
    justify-self:center !important;
    max-width:100% !important;
    padding:6px 11px !important;
    font-size:10px !important;
  }

  :root{
    --contact-h:72px !important;
  }
}

@media (max-width:420px){
  .top-contact-item{
    gap:4px !important;
    padding:0 4px !important;
    font-size:9.2px !important;
  }

  .top-contact-item svg{
    width:12px !important;
    height:12px !important;
  }

  .top-contact-address{
    font-size:9px !important;
    padding:5px 9px !important;
  }

  .address-icon{
    width:20px !important;
    height:20px !important;
  }

  .address-icon svg{
    width:12px !important;
    height:12px !important;
  }
}

@media (max-width:320px){
  .top-contact-item{
    font-size:8.5px !important;
  }

  .top-contact-address{
    font-size:8.4px !important;
  }
}