:root{
    --bg:#F4F7F6;
    --ink:#0A1118;
    --ink-2:#121A24;
    --green:#165FA3;
    --green-2:#99CA3C;
    --blue:#165FA3;
    --blue-light:#EBF3FA;
    --dark-1:#0A1826;
    --dark-2:#122538;
    --card:#EBF2F6;
    --muted:#576775;
    --white:#FFFFFF;
    --radius-lg:24px;
    --radius-md:18px;
    --radius-sm:14px;
  }

  *{box-sizing:border-box; margin:0; padding:0;}

  html{scroll-behavior:smooth;}

  /* ---------- Page Transition & Skeleton ---------- */
  .transition-curtain {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    background: var(--ink);
    z-index: 9999;
    transform: translateY(100%);
    pointer-events: none;
  }

  #skeleton-loader {
    position: fixed;
    inset: 0;
    background: var(--white);
    z-index: 9998;
    display: flex;
    flex-direction: column;
    padding: 60px 0;
  }

  .skeleton-nav {
    height: 60px; width: 80%;
    background: #f2f2f2; margin: 0 auto 100px;
    border-radius: 99px;
  }

  .skeleton-hero {
    display: flex; flex-direction: column; gap: 32px;
    padding: 0 60px;
  }

  .skeleton-text-lg { height: 120px; width: 70%; background: #f2f2f2; border-radius: 20px; }
  .skeleton-text-md { height: 30px; width: 45%; background: #f2f2f2; border-radius: 10px; }
  .skeleton-btns { display: flex; gap: 24px; }
  .skeleton-btn { height: 56px; width: 220px; background: #f2f2f2; border-radius: 99px; }

  #skeleton-loader * {
    position: relative;
    overflow: hidden;
    background: #f2f2f2;
  }

  #skeleton-loader *::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    animation: skeleton-shimmer 1.8s infinite;
  }

  @keyframes skeleton-shimmer {
    100% { transform: translateX(100%); }
  }

  /* WebGL Background */
  #webgl-bg {
    position: fixed;
    top: 0; left: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.4;
  }

  /* GSAP Ready Classes */
  .gsap-reveal { opacity: 0; transform: translateY(30px); }

  body{
    font-family:'Inter', sans-serif;
    background:var(--bg);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  input, textarea, select {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
  }

  h1,h2,h3,h4{
    font-family:'Manrope', sans-serif;
    letter-spacing:-0.02em;
    color:var(--ink-2);
  }

  a{text-decoration:none; color:inherit;}
  ul{list-style:none;}
  img,svg{display:block; max-width:100%;}
  button{font-family:inherit; cursor:pointer; border:none;}

  .wrap{
    max-width:1440px;
    margin:0 auto;
    padding:0 60px;
    width: 100%;
  }

  /* ---------- reusable pieces ---------- */
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border:1px solid rgba(22, 95, 163, 0.3);
    background:rgba(22, 95, 163, 0.06);
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    letter-spacing:0.08em;
    color:var(--blue);
    text-transform:uppercase;
  }

  .eyebrow.on-dark{
    color:var(--green-2);
    border-color:rgba(158,214,74,0.35);
    background:rgba(158,214,74,0.08);
  }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:8px 8px 8px 24px;
    border-radius:999px;
    font-weight:600;
    font-size:15px;
    white-space:nowrap;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  }
  .btn-icon{
    width:34px; height:34px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .btn-dark{
    background:var(--ink);
    color:#fff;
  }
  .btn-dark .btn-icon{background:var(--green-2); color:var(--ink);}
  .btn-dark:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(20,21,15,0.25);}

  .btn-outline{
    background:transparent;
    color:var(--ink);
    border:1.5px solid rgba(20,21,15,0.15);
    padding:8px 8px 8px 24px;
  }
  .btn-outline .btn-icon{background:var(--ink); color:#fff;}
  .btn-outline:hover{border-color:var(--ink); transform:translateY(-2px);}

  .btn-green{
    background:var(--green-2);
    color:var(--ink);
  }
  .btn-green .btn-icon{background:var(--ink); color:var(--green-2);}
  .btn-green:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(158,214,74,0.35);}

  .learn-more{
    display:inline-flex;
    align-items:center;
    align-self:flex-start;
    gap:12px;
    font-weight:600;
    font-size:13px;
    color:var(--ink-2);
    border:1.5px solid rgba(20,21,15,0.15);
    border-radius:999px;
    padding:6px 6px 6px 16px;
    transition:transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
  }
  .learn-more .circ{
    width:24px; height:24px;
    border-radius:50%;
    background:var(--ink);
    color:var(--white);
    display:flex; align-items:center; justify-content:center;
    font-size:9px;
    transition:transform 0.25s ease, background-color 0.25s ease;
  }
  .learn-more:hover{
    border-color:var(--ink);
    background-color:rgba(20, 21, 15, 0.03);
    transform:translateY(-2px);
  }
  .learn-more:hover .circ{
    background:var(--green);
    color:var(--ink);
    transform:translateX(2px);
  }

  /* floating dots */
  .dot-field{position:absolute; inset:0; pointer-events:none;}
  .fdot{position:absolute; border-radius:50%;}

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:100;
    background:rgba(244,247,246,0.85);
    backdrop-filter:blur(10px);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:32px; padding-bottom:32px;
  }
  .logo{
    display:flex; align-items:center; gap:12px;
    font-family:'Manrope', sans-serif;
    font-weight:800;
    font-size:24px;
    color:var(--ink-2);
  }
  .logo-mark{
    width:32px; height:32px;
    display:flex; align-items:center; justify-content:center;
    color:var(--green);
    font-size:26px;
  }
  .nav-links{
    display:flex; gap:32px;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size:16px;
  }
  .nav-links a{position:relative; color:var(--ink-2); transition:color .2s;}
  .nav-links a:hover,.nav-links a.active{color:var(--blue);}
  .nav-dropdown{position:relative;}
  .nav-dropdown-toggle{background:transparent; color:var(--ink-2); font:inherit; font-weight:700; padding:0; display:flex; align-items:center; gap:6px;}
  .nav-dropdown-toggle i{font-size:10px; transition:transform .2s ease;}
  .nav-dropdown:hover .nav-dropdown-toggle{color:var(--blue);}
  .nav-dropdown:hover .nav-dropdown-toggle i{transform:rotate(180deg);}
  .nav-dropdown-menu{
    position:absolute; top:calc(100% + 24px); left:-20px; z-index:110;
    min-width:260px; padding:16px;
    border:1px solid rgba(20,21,15,.08); border-radius:24px;
    background:#FFFFFF;
    box-shadow:0 30px 60px rgba(20,21,15,.12);
    opacity:0; visibility:hidden;
    transform:translateY(15px) scale(.98);
    transition:opacity .3s cubic-bezier(0.16, 1, 0.3, 1), transform .3s cubic-bezier(0.16, 1, 0.3, 1), visibility .3s;
  }
  .nav-dropdown-menu::before{
    content:""; position:absolute; top:-8px; left:40px;
    width:16px; height:16px; background:#fff;
    border-left:1px solid rgba(20,21,15,.08);
    border-top:1px solid rgba(20,21,15,.08);
    transform:rotate(45deg);
  }
  .nav-dropdown:hover .nav-dropdown-menu{opacity:1; visibility:visible; transform:translateY(0) scale(1);}

  .nav-dropdown-menu a{
    position:relative; display:flex; align-items:center; gap:12px;
    padding:10px 20px; border-radius:14px;
    font-size:14px; font-weight:700; color:var(--ink);
    transition: all 0.2s ease;
    font-family: 'Manrope', sans-serif;
  }
  .nav-dropdown-menu a:hover{
    background:var(--blue-light);
    color:var(--blue);
    transform:translateX(4px);
  }
  .nav-dropdown-menu a i.link-icon{
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    border-radius:10px; background:var(--bg); color:var(--ink); font-size:14px;
    transition: all 0.2s ease;
  }
  .nav-dropdown-menu a:hover i.link-icon{
    background:var(--blue); color:var(--white);
  }
  .services-menu{
    left:50%; transform:translateX(-50%) translateY(15px) scale(.98);
    display:grid; grid-template-columns:repeat(3, 300px); gap:20px;
    min-width:max-content; padding:32px;
  }
  .nav-dropdown:hover .services-menu{
    transform:translateX(-50%) translateY(0) scale(1);
  }
  .services-menu::before{left:50%; transform:translateX(-50%) rotate(45deg);}

  .dropdown-group{padding:0 16px;}
  .dropdown-group + .dropdown-group{border-left:1.5px solid rgba(20,21,15,.06);}
  .dropdown-group-title{
    display:block; margin:0 0 20px 16px;
    color:var(--muted); font-size:12.5px; font-weight:800;
    letter-spacing:.15em; text-transform:uppercase;
  }
  .services-menu a{
    display:flex; align-items:center; gap:18px;
    padding:16px; border-radius:20px;
    white-space:normal;
  }
  .services-menu a > i{
    width:48px; height:48px;
    display:flex; align-items:center; justify-content:center;
    flex:0 0 48px; border-radius:14px;
    background:var(--bg); color:var(--ink); font-size:18px;
    transition: all 0.3s ease;
  }
  .services-menu a span{display:grid; gap:3px;}
  .services-menu a b{font-size:15.5px; line-height:1.2; color:var(--ink);}
  .services-menu a small{color:var(--muted); font-size:12.5px; font-weight:500; line-height:1.3;}

  .services-menu a:hover{
    background:var(--blue-light);
    transform: translateY(-2px);
  }
  .services-menu a:hover > i{
    background:var(--blue); color:var(--white);
    transform: rotate(-10deg);
  }
  .services-menu a:hover small{color:var(--muted);}
  .coming-soon-link{display:flex; flex-direction:column; line-height:1.1;}
  .coming-soon-link small{margin-top:3px; color:#699b2c; font-size:8px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;}
  .nav-cta{display:none;}
  .burger{display:none; font-size:20px; background:none;}

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    padding:60px 0 90px;
    overflow:hidden;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:center;
  }
  .hero-copy h1{
    font-size:56px;
    line-height:1.08;
    font-weight:800;
    margin-top:26px;
  }
  .hero-copy h1 .accent{
    color:var(--green);
    position:relative;
    display:inline-block;
    min-width: 250px; /* Prevent layout jump */
  }
  #rotate-text {
    display: inline-block;
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  .text-fade-out {
    opacity: 0;
    transform: translateY(-10px);
  }
  .text-fade-in {
    opacity: 1;
    transform: translateY(0);
  }
  .hero-copy h1 .accent svg{
    position:absolute;
    left:0; bottom:-14px;
    width:100%;
    height:16px;
  }
  .hero-copy p{
    margin-top:22px;
    max-width:440px;
    color:var(--muted);
    font-size:16px;
    line-height:1.7;
  }
  .hero-ctas{
    display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;
  }

  .hero-art{
    position:relative;
    height:480px;
    display:flex; align-items:center; justify-content:center;
  }
  .hero-growth-visual{
    width:min(100%, 480px);
    height:100%;
    object-fit:contain;
    mix-blend-mode:multiply;
  }
  /* ---------- inner pages ---------- */
  .inner-hero{padding:90px 0 70px; background:linear-gradient(135deg, rgba(139,197,63,.16), transparent 62%);}
  .inner-hero .wrap{max-width:960px;}
  .inner-hero h1{font-size:52px; max-width:760px; margin:18px 0;}
  .inner-hero p{max-width:650px; color:var(--muted); font-size:17px; line-height:1.7;}
  .page-content{padding:72px 0;}
  .page-content .wrap{max-width:960px;}
  .content-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .info-card{padding:28px; border:1.5px solid rgba(20,21,15,.14); border-radius:var(--radius-md); background:var(--white);}
  .info-card i{color:var(--green); font-size:25px; margin-bottom:16px;}
  .info-card h3{font-size:18px; margin-bottom:8px;}
  .info-card p,.page-prose p{color:var(--muted); line-height:1.7;}
  .page-prose{max-width:760px; display:grid; gap:18px;}
  .page-prose h2{font-size:26px; margin-top:18px;}
  .contact-form{display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:28px; border-radius:var(--radius-md); background:var(--white); border:1.5px solid rgba(20,21,15,.14);}
  .contact-form label{display:grid; gap:7px; font-size:13px; font-weight:700;}
  .contact-form input,.contact-form textarea{width:100%; padding:12px; border:1.5px solid #d9ddd3; border-radius:10px; font:inherit;}
  .contact-form textarea,.contact-form .full{grid-column:1 / -1;}
  .legal-page{padding:90px 0;}
  .legal-page .wrap{max-width:800px;}
  .legal-page h1{font-size:42px; margin-bottom:22px;}
  @media (max-width:900px){.content-grid{grid-template-columns:1fr 1fr;}.inner-hero h1{font-size:42px;}}
  @media (max-width:640px){.inner-hero{padding:60px 0 45px;}.inner-hero h1{font-size:34px;}.content-grid,.contact-form{grid-template-columns:1fr;}.contact-form textarea,.contact-form .full{grid-column:auto;}}

  .stats-wrap{
    margin-top:70px;
  }
  .stats-showcase-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:18px;
  }
  .stat-card-neo{
    display:flex;
    align-items:center;
    gap:16px;
    min-width:0;
    padding:22px;
    background:var(--white);
    border:1.5px solid rgba(20,21,15,0.14);
    border-radius:var(--radius-md);
    box-shadow:0 5px 0 rgba(20,21,15,0.14);
  }
  .stat-icon-wrap{
    width:48px;
    height:48px;
    flex:0 0 48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:var(--green-2);
    color:var(--ink);
    font-size:20px;
  }
  .stat-card-content{
    display:flex;
    flex-direction:column;
    min-width:0;
  }
  .stat-large-num{
    font-family:'Manrope', sans-serif;
    font-size:28px;
    font-weight:800;
    line-height:1.1;
    color:var(--ink);
  }
  .stat-label-text{
    margin-top:4px;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    line-height:1.35;
  }
  .orbit{
    position:absolute;
    border:1px dashed rgba(20,21,15,0.18);
    border-radius:50%;
  }
  .orbit-1{width:400px; height:400px; animation:spin 40s linear infinite;}
  .orbit-2{width:320px; height:320px; animation:spin 30s linear infinite reverse;}

  @keyframes spin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
  @keyframes float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
  }

  .megaphone{
    width:280px; height:280px;
    position:relative;
    z-index:2;
    animation:float 5s ease-in-out infinite;
  }

  .badge{
    position:absolute;
    display:flex; align-items:center; gap:10px;
    background:rgba(139,197,63,0.18);
    padding:8px 16px 8px 8px;
    border-radius:999px;
    box-shadow:0 12px 30px rgba(20,21,15,0.1);
    font-size:13px;
    font-weight:700;
    z-index:3;
  }
  .badge .ic{
    width:34px; height:34px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:14px;
  }
  .badge.dark .ic{background:var(--ink);}
  .badge.green .ic{background:var(--green-2); color:var(--ink);}

  .badge-share{top:6%; right:2%;}
  .badge-growth{top:36%; right:-6%;}
  .badge-engage{top:64%; right:2%;}
  .badge-reach{top:90%; right:-4%;}

  /* ---------- trust bar ---------- */
  .trust{
    background:#EFEFEA;
    border-radius:var(--radius-lg);
    padding:26px 40px;
    display:flex;
    align-items:center;
    gap:44px;
    flex-wrap:wrap;
    justify-content:space-between;
  }
  .trust-label{
    font-size:13px; color:var(--muted); font-weight:600;
    flex-shrink:0;
    max-width:110px;
    line-height:1.4;
  }
  .trust-logos{
    display:flex; align-items:center; gap:44px; flex-wrap:wrap;
    opacity:0.75;
  }
  .trust-logos i{font-size:24px; color:var(--ink);}
  .trust-logos span{font-weight:800; font-size:19px; letter-spacing:-0.01em; color:var(--ink);}

  /* ---------- about us ---------- */
  .about-grid{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:60px;
    align-items:center;
  }
  .about-copy h2{
    font-size:38px;
    font-weight:800;
    margin:20px 0;
    line-height:1.2;
  }
  .about-copy p{
    color:var(--muted);
    font-size:15px;
    line-height:1.7;
    margin-bottom:16px;
  }
  .about-pillars {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 24px;
  }
  .pillar-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }
  .pillar-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(139, 197, 63, 0.12);
    border: 1.5px solid var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green);
    font-size: 14px;
    flex-shrink: 0;
  }
  .pillar-text h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px 0;
  }
  .pillar-text p {
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted);
    margin: 0;
  }
  .trust-stats {
    background: #EFEFEA;
    border-radius: var(--radius-lg);
    padding: 22px 40px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 20px;
    border: 1.5px solid rgba(20, 21, 15, 0.06);
  }
  .trust-stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .trust-stat-num {
    font-size: 28px;
    font-weight: 800;
    color: var(--green);
    font-family: 'Manrope', sans-serif;
  }
  .trust-stat-label {
    font-size: 12px;
    color: var(--muted);
    font-weight: 700;
    line-height: 1.3;
  }

  /* ---------- technology ---------- */
  .tech-section{
    position:relative;
    overflow:hidden;
    background:var(--white);
    border-top:1.5px solid #E2E2DC;
    border-bottom:1.5px solid #E2E2DC;
  }
  .tech-glow{
    position:absolute;
    top:50%; left:75%;
    transform:translate(-50%, -50%);
    width:500px; height:500px;
    background:radial-gradient(circle, rgba(139,197,63,0.1) 0%, rgba(247,247,242,0) 70%);
    pointer-events:none;
    z-index:1;
  }
  .tech-layout{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1fr 1.35fr;
    gap:50px;
    align-items:center;
  }
  .tech-text{
    display:flex;
    flex-direction:column;
    gap:16px;
    text-align:left;
    align-items:flex-start;
  }
  .tech-text h2{
    font-size:36px;
    font-weight:800;
    line-height:1.2;
  }
  .tech-text p{
    color:var(--muted);
    font-size:15px;
    line-height:1.6;
  }
  .tech-logos-static{
    display:flex;
    flex-wrap:wrap;
    gap:28px 42px;
    align-items:center;
    justify-content:flex-start;
  }
  .tech-logo-wrap{
    position:relative;
    cursor:pointer;
  }
  .tech-logo-wrap img{
    height:46px;
    width:auto;
    object-fit:contain;
    filter:grayscale(100%) opacity(0.55);
    transition:filter 0.3s ease, transform 0.3s ease;
  }
  .tech-logo-wrap:hover img{
    filter:grayscale(0%) opacity(1);
    transform:scale(1.15);
  }
  .tech-logo-wrap::after{
    content:attr(data-tooltip);
    position:absolute;
    bottom:-32px; left:50%;
    transform:translateX(-50%) translateY(6px);
    background:var(--ink);
    color:var(--white);
    font-size:11px;
    font-weight:600;
    padding:4px 8px;
    border-radius:6px;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.2s ease, transform 0.2s ease;
    z-index:10;
  }
  .tech-logo-wrap:hover::after{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }

  section{padding:45px 0;}

  /* ---------- services ---------- */
  .sec-head{
    text-align:center;
    max-width:560px;
    margin:0 auto 56px;
    display:flex; flex-direction:column; align-items:center; gap:18px;
  }
  .sec-head h2{font-size:38px; font-weight:800;}
  .sec-head p{color:var(--muted); font-size:15px; line-height:1.7;}

  .services-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:26px;
  }
  .service-card{
    background:var(--white);
    border:1.5px solid #E2E2DC;
    border-radius:30px;
    padding:22px 30px;
    display:flex; flex-direction:column; gap:14px;
    transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
  }
  .service-card:hover{
    border-color:var(--green);
    transform:translateY(-6px);
    box-shadow:0 15px 30px rgba(22, 95, 163, 0.12);
  }
  .service-icon{
    width:64px; height:64px;
    border-radius:18px;
    background:#fff;
    display:flex; align-items:center; justify-content:center;
    border:1.5px solid var(--ink); /* Black outline */
    box-shadow:0 8px 20px rgba(20,21,15,0.06);
    overflow:hidden;
  }
  .service-icon svg,
  .service-icon i{
    display:block;
    color:var(--ink);
    font-size:28px;
    transition:transform .3s ease;
  }
  .service-card:hover .service-icon svg,
  .service-card:hover .service-icon i{
    transform:scale(1.1);
  }
  .services-page #services {
    background: var(--white);
    border-bottom: 1.5px solid #E2E2DC;
    border-top: 1.5px solid #E2E2DC;
  }
  .service-card h3{font-size:19px; font-weight:700; line-height:1.3;}
  .service-card p{font-size:14px; color:var(--muted); line-height:1.6; flex-grow:1;}

  /* ---------- dark CTA banner ---------- */
  .cta-banner{
    background:linear-gradient(135deg, var(--dark-1), var(--dark-2));
    border-radius:var(--radius-lg);
    padding:64px;
    position:relative;
    overflow:hidden;
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    align-items:center;
    gap:30px;
  }
  .cta-banner h2{
    color:#fff; font-size:36px; font-weight:800; line-height:1.15;
  }
  .cta-banner h2 span{color:var(--green-2);}
  .cta-banner p{
    color:rgba(255,255,255,0.65);
    margin:18px 0 30px;
    max-width:380px;
    font-size:15px; line-height:1.7;
  }
  .bulb-wrap{
    position:relative;
    height:260px;
    display:flex; align-items:center; justify-content:center;
  }
  .bulb{width:150px; animation:float 4.5s ease-in-out infinite; position:relative; z-index:2;}
  .bulb-orbit{
    position:absolute;
    width:280px; height:280px;
    border-radius:50%;
    border:1px solid rgba(158,214,74,0.35);
    animation:spin 26s linear infinite;
  }

  /* ---------- case studies ---------- */
  .cs-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    gap:30px; margin-bottom:40px; flex-wrap:wrap;
  }
  .cs-head-left h2{font-size:34px; font-weight:800; margin-top:14px;}
  .cs-head-right{max-width:340px; color:var(--muted); font-size:14px; line-height:1.7; text-align:right;}

  .cs-card{
    background:linear-gradient(135deg, var(--dark-1), var(--dark-2));
    border-radius:var(--radius-lg);
    display:grid;
    grid-template-columns:repeat(3, 1fr);
  }
  .cs-col{
    padding:44px 40px;
    border-right:1px solid rgba(255,255,255,0.08);
    display:flex; flex-direction:column; gap:16px;
  }
  .cs-col:last-child{border-right:none;}
  .cs-icon{
    width:44px; height:44px;
    border-radius:12px;
    background:rgba(158,214,74,0.12);
    color:var(--green-2);
    display:flex; align-items:center; justify-content:center;
    font-size:18px;
  }
  .cs-type{color:rgba(255,255,255,0.55); font-size:13px; font-weight:600;}
  .cs-stat{color:var(--green-2); font-size:42px; font-weight:800; font-family:'Manrope',sans-serif;}
  .cs-desc{color:rgba(255,255,255,0.65); font-size:14px; line-height:1.6;}
  .cs-col .learn-more{color:#fff; margin-top:auto;}
  .cs-col .learn-more .circ{background:var(--green-2); color:var(--ink);}

  /* ---------- Full Width CTA Section ---------- */
  .full-cta-section {
    background: var(--ink);
    padding: 120px 0;
    margin: 80px 0 0;
    color: var(--white);
    position: relative;
    overflow: hidden;
  }

  .full-cta-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 30%, rgba(139, 197, 63, 0.15) 0%, transparent 60%);
    pointer-events: none;
  }

  .cta-content-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
  }

  .cta-left {
    display: flex;
    align-items: center;
    gap: 40px;
    flex: 1;
    min-width: 400px;
  }

  .cta-left .strip-icon {
    width: 100px;
    height: 100px;
    background: var(--green-2);
    border-radius: 30px;
    font-size: 42px;
    transform: rotate(-15deg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--ink);
    box-shadow: 0 20px 40px rgba(158, 214, 74, 0.2);
  }

  .cta-left h3 {
    font-size: 48px;
    line-height: 1.1;
    color: var(--white);
    font-weight: 800;
  }

  .cta-left p {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 15px;
    font-family: 'Manrope', sans-serif;
  }

  .btn-massive {
    padding: 24px 50px !important;
    font-size: 20px !important;
    background: var(--green-2) !important;
    color: var(--ink) !important;
    border: none !important;
  }

  .btn-massive .btn-icon {
    background: var(--ink) !important;
    color: var(--white) !important;
    width: 44px; height: 44px;
  }

  .btn-massive:hover {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 20px 50px rgba(158, 214, 74, 0.3);
  }

  @media (max-width: 1080px) {
    .cta-left h3 { font-size: 36px; }
    .cta-left { min-width: 100%; }
  }

  @media (max-width: 640px) {
    .full-cta-section { padding: 80px 0; }
    .cta-left { flex-direction: column; text-align: center; }
    .cta-left .strip-icon { transform: rotate(0); margin-bottom: 20px; }
    .cta-left h3 { font-size: 28px; }
    .cta-left p { font-size: 16px; }
    .btn-massive { width: 100%; justify-content: center; }
  }

  /* ---------- footer ---------- */
  footer {
    background: var(--white);
    padding: 80px 0 0;
    border-top: 1.5px solid var(--ink);
    color: var(--ink);
  }

  .footer-top {
    display: grid;
    grid-template-columns: 1fr 0.8fr 0.8fr 2.4fr; /* Increased card column width */
    gap: 40px;
    padding-bottom: 80px;
    align-items: start;
  }

  .footer-brand .logo {
    margin-bottom: 24px;
  }

  .footer-brand p {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
    max-width: 320px;
    margin-bottom: 30px;
  }

  .footer-col h4 {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 28px;
    color: var(--ink);
  }

  .footer-links {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .footer-links a {
    color: var(--muted);
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.2s ease;
  }

  .footer-links a:hover {
    color: var(--green);
    padding-left: 4px;
  }

  .footer-contact-box {
    background: var(--bg);
    border: 2px solid var(--ink);
    border-radius: 28px;
    padding: 34px 44px; /* Slightly adjusted padding for better alignment */
    box-shadow: 8px 8px 0 var(--ink);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    margin-top: -4px; /* Micro-adjustment to level the header with text links */
  }

  .footer-contact-box:hover {
    transform: translate(-4px, -4px);
    box-shadow: 14px 14px 0 var(--ink);
  }

  .footer-contact-box h4 {
    font-size: 28px;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
    text-transform: none; /* Correcting the capitalization */
  }

  .footer-contact-box p {
    color: var(--muted);
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 600;
    margin-bottom: 20px;
  }

  .contact-detail {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    font-size: 14px;
    font-weight: 600;
  }

  .contact-detail i {
    color: var(--green);
  }

  .footer-socials {
    display: flex;
    gap: 12px;
    margin-top: 24px;
  }

  .footer-socials a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    transition: all 0.3s ease;
    background: var(--white);
  }

  .footer-socials a:hover {
    background: var(--green-2);
    transform: translateY(-3px) rotate(8deg);
    box-shadow: 3px 3px 0 var(--ink);
  }

  .footer-bottom {
    border-top: 1.5px solid rgba(20, 21, 15, 0.08);
    padding: 30px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
  }

  .copyright {
    font-size: 14px;
    color: var(--muted);
    font-weight: 500;
  }

  .legal-links {
    display: flex;
    gap: 24px;
  }

  .legal-links a {
    font-size: 14px;
    color: var(--muted);
    font-weight: 500;
  }

  .legal-links a:hover {
    color: var(--ink);
    text-decoration: underline;
  }

  @media (max-width: 1080px) {
    .footer-top {
      grid-template-columns: 1fr 1fr;
      gap: 40px;
    }
  }

  @media (max-width: 640px) {
    .footer-top {
      grid-template-columns: 1fr;
    }
    .footer-bottom {
      flex-direction: column;
      text-align: center;
    }
  }

  .custom-cursor,.custom-cursor-ring{position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%; transform:translate(-100px,-100px);}
  .custom-cursor{width:8px; height:8px; margin:-4px; background:var(--ink); transition:width .2s ease,height .2s ease,background .2s ease;}
  .custom-cursor-ring{width:30px; height:30px; margin:-15px; border:1.5px solid var(--green); transition:transform .14s ease-out,width .2s ease,height .2s ease,border-color .2s ease;}
  .cursor-active .custom-cursor{width:14px; height:14px; margin:-7px; background:var(--green);}
  .cursor-active .custom-cursor-ring{width:42px; height:42px; margin:-21px; border-color:var(--ink);}
  @media (pointer:fine){body,a,button,input,textarea{cursor:none;}}

  /* ---------- trusted by / clients ---------- */
  .clients-section{
    padding:80px 0;
    background:var(--white);
    border-top:1px solid #E2E2DC;
    border-bottom:1px solid #E2E2DC;
  }
  .clients-grid{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:60px;
    align-items:center;
  }
  .clients-copy h2{
    font-size:36px;
    font-weight:800;
    margin:20px 0 16px;
    line-height:1.25;
  }
  .clients-copy p{
    color:var(--muted);
    font-size:15px;
    line-height:1.7;
  }
  .clients-marquee-container{
    display:flex;
    flex-direction:column;
    gap:20px;
    overflow:hidden;
    position:relative;
    width:100%;
    padding:10px 0;
  }
  .clients-marquee-container::before,
  .clients-marquee-container::after{
    content:"";
    position:absolute;
    top:0; bottom:0;
    width:80px;
    z-index:2;
    pointer-events:none;
  }
  .clients-marquee-container::before{
    left:0;
    background:linear-gradient(to right, var(--white), transparent);
  }
  .clients-marquee-container::after{
    right:0;
    background:linear-gradient(to left, var(--white), transparent);
  }
  .marquee-row{
    display:flex;
    width:100%;
    overflow:hidden;
  }
  .marquee-track{
    display:flex;
    gap:20px;
    width:max-content;
  }
  .marquee-left .marquee-track{
    animation:scroll-left 28s linear infinite;
  }
  .marquee-right .marquee-track{
    animation:scroll-right 28s linear infinite;
  }
  @keyframes scroll-left{
    0% { transform:translateX(0); }
    100% { transform:translateX(calc(-50% - 10px)); }
  }
  @keyframes scroll-right{
    0% { transform:translateX(calc(-50% - 10px)); }
    100% { transform:translateX(0); }
  }
  .client-logo-card{
    background:transparent;
    border:none;
    padding:8px;
    width:140px;
    height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:transform 0.3s ease;
  }
  .client-logo-card img{
    max-height:48px;
    max-width:110px;
    width:auto;
    height:auto;
    object-fit:contain;
    transition:transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
  }
  .client-logo-card:hover img{
    transform:scale(1.18) rotate(-6deg);
    filter:drop-shadow(0 8px 16px rgba(22, 95, 163, 0.25));
  }

  /* ---------- reveal animation ---------- */
  .reveal {
    opacity: 0;
    visibility: hidden;
    will-change: transform, opacity;
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(40px);
  }

  .reveal.reveal-left {
    transform: translateX(-50px);
  }

  .reveal.reveal-right {
    transform: translateX(50px);
  }

  .reveal.reveal-scale {
    transform: scale(0.95);
  }

  .reveal.show {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0) scale(1);
  }

  .delay-1 { transition-delay: 0.1s !important; }
  .delay-2 { transition-delay: 0.2s !important; }
  .delay-3 { transition-delay: 0.3s !important; }
  .delay-4 { transition-delay: 0.4s !important; }
  .delay-5 { transition-delay: 0.5s !important; }

  /* Staggered lag motion for groups */
  .lag-motion > * {
    opacity: 0;
  }

  .lag-motion.show > *:nth-child(1) { animation: fadeInUp 0.8s ease forwards 0.1s; }
  .lag-motion.show > *:nth-child(2) { animation: fadeInUp 0.8s ease forwards 0.25s; }
  .lag-motion.show > *:nth-child(3) { animation: fadeInUp 0.8s ease forwards 0.4s; }
  .lag-motion.show > *:nth-child(4) { animation: fadeInUp 0.8s ease forwards 0.55s; }
  .lag-motion.show > *:nth-child(5) { animation: fadeInUp 0.8s ease forwards 0.7s; }
  .lag-motion.show > *:nth-child(6) { animation: fadeInUp 0.8s ease forwards 0.85s; }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translate3d(0, 40px, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  /* Hero Specific Animations */
  .hero-copy h1 span.accent svg path {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    transition: stroke-dashoffset 1s ease-out 0.8s;
  }
  .reveal.show h1 span.accent svg path {
    stroke-dashoffset: 0;
  }

  .hero-growth-visual {
    transition: transform 0.2s ease-out; /* Smooth inertia for lag motion */
    will-change: transform;
  }
  .reveal.show .hero-growth-visual {
    animation: floating-hero 6s ease-in-out infinite;
  }

  @keyframes floating-hero {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-15px) rotate(1deg); }
    66% { transform: translateY(-5px) rotate(-1deg); }
  }

  /* Stat cards stagger */
  .stats-showcase-grid .stat-card-neo { opacity: 0; transform: scale(0.9); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
  .stats-showcase-grid.show .stat-card-neo { opacity: 1; transform: scale(1); }
  .stats-showcase-grid.show .stat-card-neo:nth-child(1) { transition-delay: 0.1s; }
  .stats-showcase-grid.show .stat-card-neo:nth-child(2) { transition-delay: 0.2s; }
  .stats-showcase-grid.show .stat-card-neo:nth-child(3) { transition-delay: 0.3s; }
  .stats-showcase-grid.show .stat-card-neo:nth-child(4) { transition-delay: 0.4s; }

  /* ---------- testimonials carousel ---------- */
  .testimonials-section {
    position: relative;
    padding: 60px 0;
    background: var(--bg);
    overflow: hidden;
  }
  .testimonials-section::before{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    right:-140px;
    top:30px;
    border-radius:50%;
    background:rgba(139,197,63,0.10);
    filter:blur(4px);
    pointer-events:none;
  }
  .testimonials-carousel-container {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
    padding: 20px 40px;
    margin-top: 20px;
  }
  .testimonials-carousel-container::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
  }
  .testimonial-card {
    flex: 0 0 380px;
    scroll-snap-align: start;
    background: var(--white);
    border: 1.5px solid var(--ink);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    box-shadow: 0 6px 0 var(--ink);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
    opacity: 0.95;
    transform: scale(1);
    will-change: transform, opacity;
  }
  .testimonial-card.active {
    opacity: 1;
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 10px 0 var(--ink);
  }
  .testimonial-card:hover {
    transform: translateY(-6px) scale(1.02);
    opacity: 1;
    box-shadow: 0 10px 0 var(--ink);
  }
  .test-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .test-brand-logo {
    display: flex;
    align-items: center;
  }
  .test-quote-mark {
    line-height: 1;
  }
  .testimonial-card.active .test-quote-mark{
    animation: quote-pulse 2.4s ease-in-out infinite;
  }
  .test-card-body {
    font-size: 13px;
    line-height: 1.65;
    color: var(--muted);
    font-weight: 500;
  }
  .test-card-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1.5px solid #E2E2DC;
    padding-top: 16px;
    margin-top: auto;
  }
  .test-author-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #E5E6F0;
  }
  .test-author-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .test-author-info h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
  }
  .test-author-info span {
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
  }
  .carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
  }
  .carousel-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(20, 21, 15, 0.15);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1.5px solid transparent;
    padding: 0;
  }
  .carousel-dots .dot.active {
    width: 20px;
    border-radius: 999px;
    background: var(--green-2);
    border-color: var(--ink);
  }
  .carousel-dots .dot:focus-visible{
    outline:3px solid rgba(139,197,63,0.45);
    outline-offset:3px;
  }
  @keyframes quote-pulse{
    0%, 100%{transform:translateY(0) rotate(0deg);}
    50%{transform:translateY(-4px) rotate(-4deg);}
  }
  @media (prefers-reduced-motion: reduce){
    .testimonials-carousel-container{scroll-behavior:auto;}
    .testimonial-card.active .test-quote-mark{animation:none;}
  }

  /* ---------- Premium Why Us Section ---------- */
  .why-us-section {
    padding: 120px 0;
    background: var(--white);
    border-top: 1.5px solid #E2E2DC;
    border-bottom: 1.5px solid #E2E2DC;
    position: relative;
    z-index: 1;
  }

  .why-us-layout {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 100px;
    align-items: center;
  }

  .why-us-text h2 {
    font-size: 64px;
    line-height: 1;
    margin: 24px 0;
    letter-spacing: -0.03em;
  }

  .why-us-text p {
    font-size: 18px;
    color: var(--muted);
    line-height: 1.6;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    max-width: 500px;
  }

  .why-highlights {
    margin-top: 40px;
    display: grid;
    gap: 32px;
  }

  .why-highlight-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
  }

  .h-count {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    color: var(--green);
    font-size: 14px;
    padding-top: 4px;
  }

  .why-highlight-item h4 {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 6px;
  }

  .why-highlight-item p {
    font-size: 14px;
    color: var(--muted);
  }

  /* Asymmetrical Grid for Cards */
  .why-us-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .why-card-premium {
    background: var(--bg);
    border: 2px solid var(--ink);
    border-radius: 32px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 6px 6px 0 var(--ink);
  }

  .why-card-premium:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 12px 12px 0 var(--ink);
    background: var(--white);
  }

  /* Asymmetrical height adjustment */
  .why-card-premium.alt {
    margin-top: 40px;
  }

  .why-icon-box {
    width: 56px;
    height: 56px;
    background: var(--green-2);
    border: 2px solid var(--ink);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--ink);
    margin-bottom: 24px;
    transition: transform 0.4s ease;
  }

  .why-card-premium:hover .why-icon-box {
    transform: rotate(-10deg) scale(1.1);
  }

  .why-card-premium h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 14px;
    position: relative;
    z-index: 2;
  }

  .why-card-premium p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
    position: relative;
    z-index: 2;
  }

  .card-bg-number {
    position: absolute;
    bottom: -20px;
    right: -10px;
    font-size: 120px;
    font-weight: 900;
    color: rgba(20, 21, 15, 0.03);
    pointer-events: none;
    line-height: 1;
    font-family: 'Manrope', sans-serif;
  }

  @media (max-width: 1200px) {
    .why-us-layout { gap: 60px; }
    .why-us-text h2 { font-size: 48px; }
  }

  @media (max-width: 1080px) {
    .why-us-layout { grid-template-columns: 1fr; }
    .why-us-text { text-align: center; }
    .why-us-text p { margin: 0 auto; }
    .why-highlights { justify-content: center; }
    .why-card-premium.alt { margin-top: 0; }
  }

  @media (max-width: 640px) {
    .why-us-cards { grid-template-columns: 1fr; }
    .why-us-text h2 { font-size: 32px; }
    .why-card-premium { padding: 30px; }
  }

  /* ---------- faq ---------- */
  .faq-section {
    position: relative;
    padding: 70px 0;
    background: var(--bg);
  }
  .faq-list {
    max-width: 800px;
    margin: 0 auto;
  }
  .faq-item {
    background: var(--white);
    border: 1.5px solid var(--ink);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 0 var(--ink);
    margin-bottom: 16px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
  }
  .faq-header {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    transition: background-color 0.2s ease;
  }
  .faq-header:hover {
    background-color: #FBFBF8;
  }
  .faq-icon {
    width: 24px;
    height: 24px;
    border: 1.5px solid var(--ink);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--ink);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
    flex-shrink: 0;
  }
  .faq-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s ease;
    padding: 0 24px;
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.65;
  }
  .faq-body p {
    margin: 0;
  }
  .faq-item.open {
    box-shadow: 0 6px 0 var(--ink);
  }
  .faq-item.open .faq-body {
    max-height: 300px;
    padding: 16px 24px 24px;
    border-top: 1.5px solid var(--ink);
  }
  .faq-item.open .faq-icon {
    transform: rotate(45deg);
    background-color: var(--green-2);
  }

  .faq-layout {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 100px;
    align-items: start;
  }

  .faq-info {
    position: sticky;
    top: 140px;
  }

  .faq-info h2 {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.1;
    margin: 24px 0;
    color: var(--ink);
  }

  .faq-info p {
    font-size: 18px;
    color: var(--muted);
    line-height: 1.6;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    max-width: 480px;
  }


  .carousel-controls {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
  }

  .prev-btn,
  .next-btn {
    width: 48px;
    height: 48px;
    background-color: var(--white);
    color: var(--ink);
    border: 2px solid var(--ink);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 2px 2px 0 var(--ink);
  }

  .prev-btn:hover,
  .next-btn:hover {
    background-color: var(--green-2);
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--ink);
  }
  .prev-btn:active,
  .next-btn:active {
    transform: translate(0, 0);
    box-shadow: 2px 2px 0 var(--ink);
  }


  /* ---------- responsive ---------- */
  @media (max-width: 1200px) {
    .nav-links { gap: 20px; }
    .hero-copy h1 { font-size: 48px; }
    .footer-top { grid-template-columns: 1.2fr 1fr 1fr 1.5fr; }
  }

  @media (max-width: 1080px){
    .wrap { padding: 0 40px; }
    .stats-showcase-grid{grid-template-columns:repeat(2, 1fr);}
    .services-grid{grid-template-columns:repeat(2,1fr);}
    .tech-layout{gap:40px;}
    .cta-banner{grid-template-columns:1fr; text-align:left;}
    .bulb-wrap{height:200px;}
    .cs-card{grid-template-columns:1fr; }
    .cs-col{border-right:none; border-bottom:1px solid rgba(255,255,255,0.08);}
    .cs-col:last-child{border-bottom:none;}
    .footer-top {
      grid-template-columns: 1fr 1fr;
      gap: 50px 40px;
    }
    .services-menu {
      grid-template-columns: repeat(2, 260px);
      left: auto;
      right: -100px;
      transform: translateY(15px) scale(.98);
    }
    .nav-dropdown:hover .services-menu { transform: translateY(0) scale(1); }
    .services-menu::before { left: 80%; }
    .process-grid{grid-template-columns:repeat(2, 1fr);}
  }

  @media (max-width: 900px){
    .about-grid{grid-template-columns:1fr; gap:40px;}
    .clients-grid{grid-template-columns:1fr; gap:40px;}
    .tech-layout{grid-template-columns:1fr; gap:30px;}
    .tech-text{text-align:center; align-items:center;}
    .tech-logos-static{justify-content:center; gap:20px 35px;}
    .nav{position:relative; padding-top:20px; padding-bottom:20px;}
    .nav-links{display:none;}
    .faq-layout {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    .faq-info {
      position: static;
      text-align: center;
    }
    .faq-info h2 { font-size: 32px; }
    .faq-info p { margin: 0 auto; }
    .nav-links.is-open{position:absolute; top:100%; left:0; right:0; z-index:120; display:flex; flex-direction:column; align-items:stretch; gap:0; padding:14px; background:var(--white); border:1px solid rgba(20,21,15,.12); border-radius:0 0 18px 18px; box-shadow:0 18px 35px rgba(20,21,15,.16);}
    .nav-links.is-open > a,.nav-links.is-open .nav-dropdown-toggle{width:100%; padding:12px; justify-content:space-between; font-family: 'Inter', sans-serif;}
    .nav-links.is-open .nav-dropdown-menu{display:none;}
    .nav-links.is-open .nav-dropdown.mobile-open .nav-dropdown-menu{position:static; display:block; min-width:0; margin:0 8px 8px; padding:8px; opacity:1; visibility:visible; transform:none; box-shadow:none; border: none; background: var(--bg);}
    .nav-links.is-open .nav-dropdown.mobile-open .nav-dropdown-menu::before{display:none;}
    .nav-links.is-open .nav-dropdown.mobile-open .services-menu{display:block; min-width:0;}
    .nav-links.is-open .nav-dropdown.mobile-open .dropdown-group{padding:8px; border:0;}
    .nav-links.is-open .nav-dropdown.mobile-open .dropdown-group + .dropdown-group{border-top:1px solid rgba(20,21,15,.10);}
    .burger{display:flex; width:42px; height:42px; align-items:center; justify-content:center; border:1.5px solid var(--ink); border-radius:12px; color:var(--ink); background:var(--white); font-size:17px;}
    .nav .btn-dark{display:none;}
    .hero-grid{grid-template-columns:1fr;}
    .hero-art{height:360px; margin-top:20px;}
    .hero-copy h1{font-size:40px;}
    .badge{font-size:11px; padding:6px 12px 6px 6px;}
    .badge .ic{width:28px;height:28px;font-size:12px;}

    .testimonial-card {
      flex: 0 0 calc(100vw - 80px);
    }
    .why-us-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }
  }

  @media (max-width: 640px){
    .wrap{padding:0 24px;}
    .nav { padding-top: 16px; padding-bottom: 16px; }
    .logo { font-size: 20px; }
    .logo-mark { width: 28px; height: 28px; font-size: 22px; }
    .faq-info h2 { font-size: 28px; }
    .faq-item { margin-bottom: 12px; }
    .faq-header { padding: 16px 20px; font-size: 14px; }
    .hero-copy h1 { font-size: 36px; }
    .footer-top { grid-template-columns: 1fr; gap: 40px; }
    .footer-contact-box { padding: 30px 24px; }
    .footer-contact-box h4 { font-size: 24px; }
    .trust-stats{padding:20px; gap:20px;}
    .services-grid{grid-template-columns:1fr;}
    .tech-logos-static{gap:16px 28px;}
    .tech-logo-wrap img{height:38px;}
    .nav-links{display:none;}
    .stats-wrap{margin-top:42px;}
    .stats-showcase-grid{grid-template-columns:1fr; gap:14px;}
    .stat-card-neo{padding:18px;}
    .trust{flex-direction:column; align-items:flex-start;}
    .trust-logos{gap:26px;}
    .cta-banner{padding:36px 24px;}
    .cta-banner h2{font-size:28px;}
    .cs-head-right{text-align:left;}
    .strip{padding:30px 24px; flex-direction:column; align-items:flex-start;}
    .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 15px; }
    .legal-links { flex-wrap: wrap; justify-content: center; gap: 10px 20px; }
    section{padding:35px 0;}

    .testimonial-card {
      flex: 0 0 calc(100vw - 48px);
      padding: 24px;
    }
    .why-us-grid {
      grid-template-columns: 1fr;
      gap: 20px;
    }
    .process-grid {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  }

  /* ---------- Premium Contact Form ---------- */
  .premium-contact-form {
    background: var(--white);
    border: 2px solid var(--ink);
    border-radius: 40px;
    padding: 60px;
    box-shadow: 12px 12px 0 var(--ink);
    margin-top: 40px;
  }

  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .form-group.full {
    grid-column: span 2;
  }

  .form-group label {
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    color: var(--ink);
  }

  .form-control {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid #E2E2DC;
    border-radius: 12px;
    font-family: inherit;
    font-size: 16px;
    transition: all 0.3s ease;
  }

  .form-control:focus {
    outline: none;
    border-color: var(--ink);
    background: #FBFBF8;
  }

  .iti { width: 100%; }

  .services-selection {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 10px;
  }

  .service-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border: 1.5px solid #E2E2DC;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
  }

  .service-item:hover { border-color: var(--ink); }
  .service-item input { width: 18px; height: 18px; accent-color: var(--green); }
  .service-item.selected { background: var(--green-2); border-color: var(--ink); }

  .captcha-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--bg);
    padding: 20px;
    border-radius: 12px;
    border: 2px dashed var(--ink);
  }

  .captcha-visual { font-size: 20px; font-weight: 800; color: var(--ink); }
  .captcha-input { width: 80px !important; text-align: center; }

  @media (max-width: 768px) {
    .form-grid { grid-template-columns: 1fr; }
    .form-group.full { grid-column: span 1; }
    .premium-contact-form { padding: 40px 20px; }
    .services-selection { grid-template-columns: 1fr 1fr; }
  }

  /* ---------- Premium Contact Layout ---------- */
  .contact-layout-premium {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 80px;
    background: var(--white);
    border: 2px solid var(--ink);
    border-radius: 40px;
    overflow: hidden;
    box-shadow: 15px 15px 0 var(--ink);
    margin: 40px 0;
  }

  .contact-info-panel {
    background: var(--ink);
    color: var(--white);
    padding: 60px;
    display: flex;
    flex-direction: column;
  }

  .contact-info-panel h2 { color: var(--white); font-size: 42px; margin-bottom: 20px; }
  .contact-info-panel p { color: rgba(255,255,255,0.6); font-size: 18px; line-height: 1.6; }

  .contact-methods { display: grid; gap: 32px; margin: 50px 0; }
  .contact-method-item { display: flex; gap: 20px; align-items: flex-start; }
  .contact-method-item i { 
    width: 48px; height: 48px; background: var(--green-2); color: var(--ink); 
    border-radius: 12px; display: flex; align-items: center; justify-content: center; 
    font-size: 20px; flex-shrink: 0;
  }
  .contact-method-item h4 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.5; margin-bottom: 4px; }
  .contact-method-item span { font-size: 18px; font-weight: 700; display: block; line-height: 1.4; }

  .social-links-contact { display: flex; gap: 15px; margin-top: auto; }
  .social-links-contact a {
    width: 44px; height: 44px; border: 1px solid rgba(255,255,255,0.2); 
    border-radius: 50%; display: flex; align-items: center; justify-content: center; 
    color: var(--white); transition: all 0.3s ease;
  }
  .social-links-contact a:hover { background: var(--green); color: var(--ink); border-color: var(--green); transform: translateY(-3px); }

  .contact-form-panel { padding: 60px; }
  .contact-form-advanced { display: grid; gap: 30px; }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
  
  .field-group { display: flex; flex-direction: column; gap: 10px; }
  .field-group.full-width { grid-column: span 2; }
  .field-group label { font-weight: 800; font-size: 13px; text-transform: uppercase; color: var(--ink); }
  .field-group input, .field-group select, .field-group textarea {
    padding: 16px 20px; border: 2px solid #E2E2DC; border-radius: 12px; 
    font-family: inherit; font-size: 16px; transition: all 0.3s ease;
  }
  .field-group input:focus, .field-group select:focus, .field-group textarea:focus { outline: none; border-color: var(--ink); background: #FBFBF8; }

  .services-selection-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 8px; }
  .service-option {
    display: flex; align-items: center; gap: 10px; padding: 12px 15px; 
    border: 1.5px solid #E2E2DC; border-radius: 10px; cursor: pointer; 
    font-size: 14px; font-weight: 600; transition: all 0.2s ease;
  }
  .service-option:hover { border-color: var(--ink); }
  .service-option.active { background: var(--green-2); border-color: var(--ink); }
  .service-option input { width: 18px; height: 18px; accent-color: var(--ink); }

  .captcha-wrap { margin-top: 10px; }
  .captcha-box { display: flex; align-items: center; gap: 15px; background: var(--bg); padding: 15px 25px; border-radius: 12px; border: 1.5px dashed var(--ink); }
  .captcha-visual { font-weight: 800; font-size: 20px; }
  .captcha-visual input { width: 80px !important; text-align: center; margin-left: 10px; }

  @media (max-width: 1080px) {
    .contact-layout-premium { grid-template-columns: 1fr; }
    .contact-info-panel, .contact-form-panel { padding: 40px; }
  }
  @media (max-width: 640px) {
    .form-grid { grid-template-columns: 1fr; }
    .field-group.full-width { grid-column: span 1; }
    .services-selection-grid { grid-template-columns: 1fr; }
    .contact-info-panel, .contact-form-panel { padding: 30px 20px; }
  }

  /* ---------- process section ---------- */
  .process-section {
    position: relative;
    padding: 70px 0;
    background: var(--bg);
    border-bottom: 1.5px solid #E2E2DC;
  }
  .process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
  }
  .process-card, .process-item {
    background: var(--white);
    border: 1.5px solid var(--ink);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    box-shadow: 0 6px 0 var(--ink);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
  }
  .process-card:hover, .process-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 0 var(--ink);
  }
  .process-num, .p-num {
    font-size: 38px;
    font-weight: 800;
    color: var(--green);
    font-family: 'Manrope', sans-serif;
    line-height: 1;
    margin-bottom: 16px;
    display: block;
  }
  .process-card h3, .process-item h4 {
    font-size: 16px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 10px 0;
  }
  .process-card p, .process-item p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
  }

  /* ---------- Service details section ---------- */
  .service-details-section {
    position: relative;
    padding: 70px 0;
    background: var(--white);
    border-top: 1.5px solid #E2E2DC;
    border-bottom: 1.5px solid #E2E2DC;
  }
  .service-details-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: start;
  }
  .service-main-content h2 {
    font-size: 32px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 20px;
  }
  .service-main-content p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
    margin-bottom: 30px;
  }
  .service-benefits {
    display: grid;
    gap: 20px;
  }
  .benefit-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }
  .benefit-icon {
    width: 38px;
    height: 38px;
    background: var(--card);
    border: 1.5px solid var(--ink);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    font-size: 16px;
    flex-shrink: 0;
  }
  .benefit-text h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
  }
  .benefit-text p {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--muted);
    margin: 0;
  }
  .service-side-box {
    background: var(--bg);
    border: 2px solid var(--ink);
    border-radius: var(--radius-lg);
    padding: 36px;
    box-shadow: 6px 6px 0 var(--ink);
  }
  .service-side-box h3 {
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 20px;
    border-bottom: 1.5px solid rgba(20, 21, 15, 0.1);
    padding-bottom: 12px;
  }
  .deliverables-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
  }
  .deliverables-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
  }
  .deliverables-list li i {
    color: var(--green);
    font-size: 16px;
  }

  @media (max-width: 900px) {
    .service-details-layout {
      grid-template-columns: 1fr;
      gap: 40px;
    }
  }

  /* ---------- Responsive Grid Helpers ---------- */
  .grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
  }
  .grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
  }

  @media (max-width: 900px) {
    .grid-2col {
      grid-template-columns: 1fr;
    }
  }
  @media (max-width: 1080px) {
    .grid-3col {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 640px) {
    .grid-3col {
      grid-template-columns: 1fr;
    }
    .testimonials-carousel-container {
      padding: 20px 24px;
    }
    .testimonial-card {
      flex: 0 0 280px;
    }
  }

  /* ---------- Premium Portfolio Layouts ---------- */
  .portfolio-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 40px;
    align-items: start;
    padding: 70px 0;
  }
  .portfolio-sidebar {
    position: sticky;
    top: 120px;
    background: var(--white);
    border: 1.5px solid var(--ink);
    border-radius: var(--radius-lg);
    padding: 30px 24px;
    box-shadow: 6px 6px 0 var(--ink);
  }
  .portfolio-sidebar h3 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--ink);
    border-bottom: 1.5px solid #E2E2DC;
    padding-bottom: 12px;
  }
  .sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .sidebar-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14.5px;
    color: var(--ink);
    border: 1.5px solid transparent;
    transition: all 0.2s ease;
  }
  .sidebar-menu a i {
    font-size: 16px;
    color: var(--muted);
  }
  .sidebar-menu a:hover {
    background: rgba(139, 197, 63, 0.08);
    color: var(--green);
    transform: translateX(4px);
  }
  .sidebar-menu a.active {
    background: var(--card);
    border-color: var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
  }
  .sidebar-menu a.active i {
    color: var(--ink);
  }

  .portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
  .project-card {
    background: var(--white);
    border: 1.5px solid var(--ink);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: 5px 5px 0 var(--ink);
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .project-card:hover {
    transform: translateY(-4px);
    box-shadow: 8px 8px 0 var(--ink);
  }
  .project-img-box {
    width: 100%;
    height: 220px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--ink);
    background: var(--bg);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .project-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .project-category {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--green);
  }
  .project-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
  }
  .project-desc {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
  }
  
  @media (max-width: 1080px) {
    .portfolio-layout {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    .portfolio-sidebar {
      position: relative;
      top: 0;
    }
  }
    @media (max-width: 640px) {
      .portfolio-grid {
        grid-template-columns: 1fr;
      }
      .project-img-box {
        height: 180px;
      }
    }

    /* ---------- Legal & Prose Pages ---------- */
    .legal-page {
      padding: 80px 0;
      background: var(--bg);
    }
    .page-prose {
      max-width: 800px;
      margin: 0 auto;
      background: var(--white);
      border: 1.5px solid var(--ink);
      border-radius: var(--radius-lg);
      padding: 60px 50px;
      box-shadow: 8px 8px 0 var(--ink);
    }
    .page-prose h1 {
      font-size: 38px;
      font-weight: 800;
      margin: 10px 0 30px;
      color: var(--ink);
    }
    .page-prose h2 {
      font-size: 22px;
      font-weight: 800;
      margin: 36px 0 16px;
      color: var(--ink);
      border-bottom: 1.5px solid #E2E2DC;
      padding-bottom: 8px;
    }
    .page-prose p {
      font-size: 15px;
      line-height: 1.7;
      color: var(--muted);
      margin-bottom: 16px;
    }
    .page-prose ul {
      list-style: none;
      padding: 0;
      margin: 0 0 24px 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .page-prose ul li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 14.5px;
      color: var(--muted);
      line-height: 1.6;
    }
    .page-prose ul li::before {
      content: "\f00c";
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      color: var(--green);
      font-size: 14px;
      margin-top: 3px;
    }
    @media (max-width: 640px) {
      .page-prose {
        padding: 40px 24px;
      }
      .page-prose h1 {
        font-size: 30px;
      }
    }