:root{
    --blue-deep:#0B1F6B;
    --blue-primary:#122E8C;
    --blue-signal:#2B4EE0;
    --badge-bg:#E8ECFC;
    --badge-text:#122E8C;
    --ink:#0B1F6B;
    --ink-muted:#6B7280;
    --line:#E7E9F3;
    --dot-off:#DCE1F5;
    --bg:#FFFFFF;
    --pill-bg:#F0F2FB;
    --why-navy-deep:#071238;
        --why-navy:#0B1F6B;
        --why-blue-card:#15308F;
        --why-blue-card-2:#17358F;
        --why-blue-signal:#4C7CFF;
        --why-ink:#FFFFFF;
        --why-ink-muted:rgba(255,255,255,0.68);
        --why-line:rgba(255,255,255,0.12);
        --footer-blue-signal:#4C7CFF;
        --footer-ink-muted:rgba(255,255,255,0.68);
        --footer-line:rgba(255,255,255,0.12);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:auto;}
  html,body{margin:0;padding:0;}

  body{
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    overflow-x:clip;
  }

  a{ text-decoration:none; color:inherit; }

  /* =====================================================
     NAVBAR
  ===================================================== */
  .navbar{
    position:sticky;
    top:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding:5px 5px;
  }
  .navbar::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:100vw;
    margin-left:-50vw;
    background:#fff;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    z-index:-1;
    pointer-events:none;
  }

  .logo{
    display:flex;
    align-items:center;
    gap:9px;
    font-weight:800;
    font-size:19px;
    letter-spacing:-0.01em;
    color:var(--ink);
  }
  .logo-icon{
    height:34px;
    width:auto;
    display:block;
    flex-shrink:0;
  }

  .nav-links{
    display:flex;
    align-items:center;
    gap:26px;
    list-style:none;
    margin:0; padding:0;
  }
  .nav-links a{
    font-size:14.5px;
    font-weight:500;
    color:var(--ink-muted);
    position:relative;
    padding:4px 0;
    transition:color 0.25s ease;
  }
  .nav-links a::after{
    content:"";
    position:absolute;
    left:0; bottom:-2px;
    width:0%; height:2px;
    background:var(--blue-signal);
    transition:width 0.25s ease;
  }
  .nav-links a:hover{ color:var(--ink); }
  .nav-links a:hover::after{ width:100%; }

  /* ---- 360 Digital Marketing animated nav item ---- */
  .nav-360{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:4px 0;
    font-size:14.5px;
    font-weight:500;
    color:var(--ink-muted);
    text-decoration:none;
    position:relative;
    transition:color 0.25s ease;
  }
  .nav-360::after{
    content:"";
    position:absolute;
    left:0; bottom:-2px;
    width:0%; height:2px;
    background:var(--blue-signal);
    transition:width 0.25s ease;
  }
  .nav-360:hover{ color:var(--ink); }
  .nav-360:hover::after{ width:100%; }

  .nav-360-icon{
    width:50px;
    height:50px;
    flex-shrink:0;
    overflow:visible;
  }

  .nav-360-num{ display:none; }

  .nav-360 .ring-dashed{
    transform-origin:50% 50%;
    transform-box:fill-box;
    animation:spin-cw 7s linear infinite;
    transition:stroke 0.3s ease;
  }
  .nav-360 .orbit-nodes{
    transform-origin:50% 50%;
    transform-box:fill-box;
    animation:spin-ccw 5s linear infinite;
  }
  .nav-360 .orbit-dot{
    transition:fill 0.3s ease;
  }
  .nav-360 .arrow-cycle{
    transform-origin:50% 50%;
    transform-box:fill-box;
    animation:spin-cw 9s linear infinite;
  }
  .nav-360 .center-badge{
    transform-origin:50% 50%;
    transform-box:fill-box;
    animation:pulse360 2.4s ease-in-out infinite;
  }
  .nav-360 .center-badge-glow{
    opacity:0;
    transition:opacity 0.3s ease;
  }

  @keyframes spin-cw{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
  }
  @keyframes spin-ccw{
    from{ transform:rotate(360deg); }
    to{ transform:rotate(0deg); }
  }
  @keyframes pulse360{
    0%, 100%{ transform:scale(1); }
    50%{ transform:scale(1.08); }
  }

  .nav-360:hover .ring-dashed{ animation-duration:2.2s; stroke:var(--blue-signal); }
  .nav-360:hover .orbit-nodes{ animation-duration:1.8s; }
  .nav-360:hover .orbit-dot{ fill:var(--blue-signal); }
  .nav-360:hover .arrow-cycle{ animation-duration:2.8s; }
  .nav-360:hover .center-badge-glow{ opacity:1; }

  @media (prefers-reduced-motion: reduce){
    .nav-360 .ring-dashed,
    .nav-360 .orbit-nodes,
    .nav-360 .arrow-cycle,
    .nav-360 .center-badge{ animation:none; }
  }

  .nav-cta{
    padding:11px 22px;
    border-radius:10px;
    background-color: #1b9cff;
    color:#fff;
    font-weight:600;
    font-size:14px;
    letter-spacing:0.01em;
    transition:transform 0.25s ease, box-shadow 0.25s ease;
  }
  .nav-cta:hover{
    animation:zoomPulse 0.6s ease-in-out;
    transform:translateY(-2px); 
    background: linear-gradient(90deg, #1b9cff 0%, #062086 100%);
  }

  .nav-menu{ display:contents; }

  .nav-toggle{
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    width:40px;
    height:40px;
    padding:0;
    border:none;
    background:transparent;
    cursor:pointer;
    z-index:60;
  }
  .nav-toggle span{
    display:block;
    width:22px;
    height:2px;
    border-radius:2px;
    background:var(--ink);
    transition:transform 0.3s ease, opacity 0.3s ease;
  }
  .navbar.is-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .navbar.is-open .nav-toggle span:nth-child(2){ opacity:0; }
  .navbar.is-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  @media (max-width:1180px){
    .navbar{ padding:14px 20px; position:sticky; }
    .nav-toggle{ display:flex; }

    .nav-menu{
      display:flex;
      flex-direction:column;
      align-items:stretch;
      gap:4px;
      position:absolute;
      top:100%;
      left:0;
      right:0;
      max-height:0;
      overflow:hidden;
      opacity:0;
      background:#fff;
      padding:0 20px;
      border-bottom:1px solid var(--line);
      box-shadow:0 18px 32px -18px rgba(11,31,107,0.28);
      transition:max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
    }
    .navbar.is-open .nav-menu{
      max-height:520px;
      opacity:1;
      padding:12px 20px 22px;
    }

    .nav-links{
      display:flex;
      flex-direction:column;
      align-items:stretch;
      gap:2px;
      width:100%;
    }
    .nav-links a{ display:block; padding:12px 4px; width:100%; font-size:16px; }
    .nav-links a::after{ display:none; }
    .nav-360{ padding:12px 4px; width:100%; }
    .nav-360::after{ display:none; }
    .nav-360-icon{ display:none; }
    .nav-360-num{ display:inline; }

    .nav-cta{
      display:block;
      width:100%;
      margin-top:8px;
      text-align:center;
      padding:12px 16px;
      font-size:14px;
    }
  }

  /* =====================================================
     HERO
  ===================================================== */
  .hero{
    position:relative;
    min-height:88vh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding: 24px;
    background:var(--bg);
  }

  .hero-bg{
    position:absolute;
    inset:0;
    z-index:0;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    opacity:0;
    transition:opacity 0.8s ease;
  }
  .hero-bg.is-active{ opacity:0.7; }

  .hero-scrim{
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(100deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.82) 32%, rgba(255,255,255,0.4) 58%, rgba(255,255,255,0) 82%);
    pointer-events:none;
  }
  @media (max-width:980px){
    .hero-scrim{ background:linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.8) 55%, rgba(255,255,255,0.55) 100%); }
  }

  .hero-inner{
    position:relative;
    z-index:2;
    width:100%;
    max-width:1180px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:48px;
  }

  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
      linear-gradient(rgba(18,46,140,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(18,46,140,0.05) 1px, transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:radial-gradient(70% 70% at 50% 45%, black 0%, transparent 75%);
            mask-image:radial-gradient(70% 70% at 50% 45%, black 0%, transparent 75%);
    pointer-events:none;
  }

  .orbit{
    position:absolute;
    top:50%; right:8%;
    width:620px; height:620px;
    margin-top:-310px;
    border:1px solid rgba(18,46,140,0.07);
    border-radius:50%;
    pointer-events:none;
  }
  .orbit.o2{ width:820px; height:820px; margin-top:-410px; border-color:rgba(18,46,140,0.05); }
  .orbit-node{
    position:absolute;
    width:8px; height:8px;
    border-radius:50%;
    background:var(--blue-signal);
    box-shadow:0 0 14px 4px rgba(43,78,224,0.35);
    top:50%; left:50%;
    transform-origin:310px 0px;
    animation:spin 18s linear infinite;
  }
  .orbit.o2 .orbit-node{
    transform-origin:410px 0px;
    animation-duration:26s;
    animation-direction:reverse;
    background:#7C93F0;
    box-shadow:0 0 10px 3px rgba(124,147,240,0.35);
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  .slider{
    position:relative;
    z-index:2;
    flex:1 1 520px;
    max-width:560px;
  }

  @keyframes floatY{
    0%, 100%{ transform:translateY(0); }
    50%{ transform:translateY(-14px); }
  }

  @media (max-width:980px){
    .hero-inner{ flex-direction:column; align-items:stretch; text-align:left; }
  }

  .track{
    position:relative;
    height:400px;
  }

  .slide{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    opacity:0;
    transform:translateX(48px);
    transition:opacity 0.55s cubic-bezier(.22,.68,.36,1), transform 0.55s cubic-bezier(.22,.68,.36,1);
    pointer-events:none;
  }
  .slide.is-active{
    opacity:1;
    transform:translateX(0);
    pointer-events:auto;
  }
  .slide.is-exit-left{
    transform:translateX(-48px);
  }

  .slide .anim{
    opacity:0;
    transform:translateY(18px);
  }
  .slide.is-active .anim{
    animation:riseIn 0.6s cubic-bezier(.22,.68,.36,1) forwards;
  }
  .slide.is-active .badge{ animation-delay:0.05s; }
  .slide.is-active .headline{ animation-delay:0.15s; }
  .slide.is-active .desc{ animation-delay:0.28s; }
  .slide.is-active .cta{ animation-delay:0.40s; }

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

  .badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 14px 7px 10px;
    border-radius:999px;
    background:var(--badge-bg);
    border:1px solid rgba(18,46,140,0.08);
    color:var(--badge-text);
    font-size:12px;
    font-weight:600;
    letter-spacing:0.04em;
    text-transform:uppercase;
    margin-bottom:22px;
  }
  .badge svg{ width:14px; height:14px; flex-shrink:0; }

  .headline{
    font-weight:800;
    font-size:clamp(32px, 4.6vw, 46px);
    line-height:1.15;
    letter-spacing:-0.02em;
    margin:0 0 18px;
    color:var(--ink);
  }

  .desc{
    font-size:16px;
    line-height:1.65;
    color:var(--ink-muted);
    max-width:440px;
    margin:0 0 32px;
    font-weight:400;
  }

  .cta{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 24px;
    border-radius:12px;
    background:var(--blue-deep);
    color:#fff;
    font-weight:600;
    font-size:14px;
    letter-spacing:0.02em;
    text-transform:uppercase;
    border:none;
    cursor:pointer;
    box-shadow:0 10px 30px -10px rgba(18,46,140,0.45);
    transition:transform 0.25s ease, box-shadow 0.25s ease;
  }
  .cta:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 34px -8px rgba(18,46,140,0.55);
  }
  .cta svg{
    width:16px; height:16px;
    transition:transform 0.25s ease;
  }
  .cta:hover svg{ transform:translateX(4px); }

  .controls{
    display:flex;
    align-items:center;
    gap:20px;
    margin-top:20px;
  }

  .arrow-btn{
    width:42px; height:42px;
    border-radius:50%;
    border:1px solid var(--line);
    background:#fff;
    color:var(--ink);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }
  .arrow-btn:hover{
    background:var(--badge-bg);
    border-color:rgba(18,46,140,0.2);
  }
  .arrow-btn:active{ transform:scale(0.94); }
  .arrow-btn svg{ width:16px; height:16px; }

  .dots{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .dot{
    width:26px; height:4px;
    border-radius:2px;
    background:var(--dot-off);
    border:none;
    cursor:pointer;
    padding:0;
    position:relative;
    overflow:hidden;
    transition:background 0.3s ease, width 0.3s ease;
  }
  .dot.is-active{
    width:38px;
    background:var(--dot-off);
  }
  .dot.is-active::after{
    content:"";
    position:absolute;
    left:0; top:0; bottom:0;
    width:0%;
    background:var(--blue-signal);
    animation:fill var(--duration,5.5s) linear forwards;
  }
  @keyframes fill{ to{ width:100%; } }

  .counter{
    margin-left:auto;
    font-size:12px;
    font-weight:600;
    color:var(--ink-muted);
    letter-spacing:0.05em;
  }

  @media (max-width:520px){
    .track{ height:440px; }
    .controls{ margin-top:32px; flex-wrap:wrap; }
    .counter{ margin-left:0; order:3; width:100%; margin-top:8px; }
  }

    /* =====================================================
     BRAND LOGO RUNNER (MARQUEE)
  ===================================================== */
  .logo-wall{
    padding: 24px;
    background:#FAFBFF;
  }

  .logo-wall-head{
    text-align:center;
    max-width:560px;
    margin:0 auto 52px;
  }

  .eyebrow{
    display:inline-block;
    font-size:12px;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--blue-signal);
    margin-bottom:12px;
  }

  .logo-wall-head h2{
    font-size:clamp(24px, 3vw, 32px);
    font-weight:800;
    letter-spacing:-0.02em;
    margin:0 0 10px;
    color:var(--ink);
  }

  .logo-wall-head p{
    font-size:15px;
    line-height:1.6;
    color:var(--ink-muted);
    margin:0;
  }

  /* ---- marquee shell ---- */
  .marquee{
    position:relative;
    width:100%;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  }

  .marquee-track{
    padding: 10px;
    display:flex;
    align-items:center;
    width:max-content;
    animation:scroll 26s linear infinite;
  }

  .marquee:hover .marquee-track{
    animation-play-state:paused;
  }

  @keyframes scroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }

  .logo-item{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    width:190px;
    height:110px;
    margin:0 14px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    cursor:pointer;
    transition:transform 0.35s cubic-bezier(.22,.68,.36,1), box-shadow 0.35s ease, border-color 0.35s ease;
  }

  .logo-item img{
    max-width:68%;
    max-height:52%;
    object-fit:contain;
    filter:grayscale(100%);
    opacity:0.6;
    transition:filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
  }

  .logo-item:hover{
    transform:translateY(-6px) scale(1.06);
    box-shadow:0 18px 34px -14px rgba(18,46,140,0.35);
    border-color:rgba(43,78,224,0.35);
  }

  .logo-item:hover img{
    filter:grayscale(0%);
    opacity:1;
    transform:scale(1.05);
  }

  @media (max-width:640px){
    .logo-wall{ padding:50px 16px; }
    .logo-item{ width:150px; height:92px; margin:0 10px; }
  }

  @media (prefers-reduced-motion: reduce){
    .marquee-track{ animation:none; }
  }

  /* =====================================================
     SERVICES SECTION
  ===================================================== */
  .services{
    position:relative;
    padding:50px 48px;
    background:#FAFBFF;
    overflow:hidden;
  }

  .services-head{
    text-align:center;
    max-width:640px;
    margin:0 auto 64px;
    opacity:0;
    transform:translateY(24px);
    transition:opacity 0.7s cubic-bezier(.22,.68,.36,1), transform 0.7s cubic-bezier(.22,.68,.36,1);
  }
  .services-head.in-view{ opacity:1; transform:translateY(0); }

  .eyebrow{
    display:inline-block;
    font-size:12px;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--blue-signal);
    margin-bottom:14px;
  }

  .services-head h2{
    font-size:clamp(28px, 3.6vw, 38px);
    font-weight:800;
    letter-spacing:-0.02em;
    margin:0 0 14px;
    color:var(--ink);
  }
  .services-head p{
    font-size:16px;
    line-height:1.65;
    color:var(--ink-muted);
    margin:0;
  }

  .services-grid{
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
  }

  .service-card{
    position:relative;
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    padding:36px 30px;
    cursor:pointer;
    overflow:hidden;
    opacity:0;
    transform:translateY(36px);
    transition:
      opacity 0.65s cubic-bezier(.22,.68,.36,1),
      transform 0.4s cubic-bezier(.22,.68,.36,1),
      box-shadow 0.4s ease,
      border-color 0.4s ease,
      background 0.4s ease;
  }
  .service-card.in-view{
    opacity:1;
    transform:translateY(0);
  }

  /* staggered reveal delay assigned via inline style / nth-child */
  .service-card:nth-child(1){ transition-delay:0s; }
  .service-card:nth-child(2){ transition-delay:0.08s; }
  .service-card:nth-child(3){ transition-delay:0.16s; }
  .service-card:nth-child(4){ transition-delay:0.24s; }
  .service-card:nth-child(5){ transition-delay:0.32s; }
  .service-card:nth-child(6){ transition-delay:0.40s; }

  /* hover: zoom + color shift */
  .service-card:hover{
    transform:translateY(-10px) scale(1.045);
    background:linear-gradient(150deg, var(--blue-deep) 0%, var(--blue-signal) 130%);
    border-color:transparent;
    box-shadow:0 24px 48px -16px rgba(18,46,140,0.45);
  }

  .service-icon{
    width:52px; height:52px;
    border-radius:14px;
    background:var(--badge-bg);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:22px;
    transition:background 0.4s ease, transform 0.4s ease;
  }
  .service-icon svg{
    width:24px; height:24px;
    color:var(--blue-primary);
    transition:color 0.4s ease;
  }
  .service-card:hover .service-icon{
    background:rgba(255,255,255,0.16);
    transform:scale(1.08) rotate(-4deg);
  }
  .service-card:hover .service-icon svg{ color:#fff; }

  .service-card h3{
    font-size:19px;
    font-weight:700;
    letter-spacing:-0.01em;
    margin:0 0 10px;
    color:var(--ink);
    transition:color 0.4s ease;
  }
  .service-card:hover h3{ color:#fff; }

  .service-card p{
    font-size:14.5px;
    line-height:1.65;
    color:var(--ink-muted);
    margin:0 0 20px;
    transition:color 0.4s ease;
  }
  .service-card:hover p{ color:rgba(255,255,255,0.85); }

  .service-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:13.5px;
    font-weight:600;
    color:var(--blue-primary);
    transition:color 0.4s ease, gap 0.3s ease;
  }
  .service-link svg{
    width:14px; height:14px;
    transition:transform 0.3s ease;
  }
  .service-card:hover .service-link{ color:#fff; }
  .service-card:hover .service-link svg{ transform:translateX(4px); }

  @media (max-width:980px){
    .services-grid{ grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width:640px){
    .services{ padding:50px 20px; }
    .services-grid{ grid-template-columns:1fr; }
  }

  @media (prefers-reduced-motion: reduce){
    .orbit-node{ animation:none; }
    .slide{ transition:opacity 0.3s ease; }
    .slide .anim{ opacity:1; transform:none; animation:none; }
    .dot.is-active::after{ animation:none; width:100%; }
    .services-head, .service-card{ opacity:1; transform:none; transition:none; }
  }


  /* =====================================================
     WHY GODIGITAL SECTION
  ===================================================== */
  

      .why{
    position:relative;
    padding:50px 20px;
    background:linear-gradient(160deg, var(--why-navy-deep) 0%, var(--why-navy) 55%, #0E2A80 130%);
    overflow:hidden;
  }

  /* ambient grid + glow, matches site language */
  .why::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size:56px 56px;
    -webkit-mask-image:radial-gradient(60% 50% at 50% 0%, black 0%, transparent 75%);
            mask-image:radial-gradient(60% 50% at 50% 0%, black 0%, transparent 75%);
    pointer-events:none;
  }

  .glow{
    position:absolute;
    top:-120px; left:50%;
    width:520px; height:520px;
    margin-left:-260px;
    background:radial-gradient(circle, rgba(76,124,255,0.35) 0%, rgba(76,124,255,0) 70%);
    pointer-events:none;
  }

  .why-inner{
    position:relative;
    z-index:2;
    max-width:420px;
    margin:0 auto;
  }

  /* ---- header block ---- */
  .why-head{
    opacity:0;
    transform:translateY(24px);
    transition:opacity 0.7s cubic-bezier(.22,.68,.36,1), transform 0.7s cubic-bezier(.22,.68,.36,1);
  }
  .why-head.in-view{ opacity:1; transform:translateY(0); }

  .why-head h2{
    font-size:clamp(28px, 6vw, 34px);
    font-weight:800;
    letter-spacing:-0.02em;
    margin:0 0 16px;
    color:var(--why-ink);
  }

  .why-head p{
    font-size:15.5px;
    line-height:1.65;
    color:var(--why-ink-muted);
    margin:0 0 40px;
    max-width:360px;
  }

  /* ---- stats ---- */
  .stats{
    display:flex;
    gap:52px;
    margin-bottom:56px;
    opacity:0;
    transform:translateY(24px);
    transition:opacity 0.7s cubic-bezier(.22,.68,.36,1) 0.1s, transform 0.7s cubic-bezier(.22,.68,.36,1) 0.1s;
  }
  .stats.in-view{ opacity:1; transform:translateY(0); }

  .stat-num{
    font-size:34px;
    font-weight:800;
    letter-spacing:-0.02em;
    color:var(--why-ink);
    line-height:1;
    margin-bottom:8px;
  }
  .stat-label{
    font-size:13px;
    font-weight:500;
    color:var(--why-ink-muted);
    letter-spacing:0.01em;
  }

  /* ---- intro + visual row ---- */
  .why-top{
    display:flex;
    flex-direction:column;
  }
  .why-visual{ display:none; }

  /* ---- bento cards ---- */
  .card-stack{
    display:flex;
    flex-direction:column;
    gap:22px;
  }

  .why-card{
    position:relative;
    background:linear-gradient(150deg, var(--why-blue-card) 0%, var(--why-blue-card-2) 100%);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:22px;
    padding:30px 28px 32px;
    opacity:0;
    transform:translateY(48px);
    transition:
      opacity 0.7s cubic-bezier(.22,.68,.36,1),
      transform 0.7s cubic-bezier(.22,.68,.36,1),
      box-shadow 0.35s ease,
      border-color 0.35s ease,
      background 0.35s ease;
    cursor:pointer;
  }
  .why-card.in-view{
    opacity:1;
    transform:translateY(0);
  }
  .why-card:nth-child(1){ transition-delay:0s; }
  .why-card:nth-child(2){ transition-delay:0.12s; }
  .why-card:nth-child(3){ transition-delay:0.24s; }

  .why-card:hover{
    transform:translateY(-6px) scale(1.015);
    border-color:rgba(255,255,255,0.22);
    box-shadow:0 22px 46px -18px rgba(3,10,40,0.65);
    background:linear-gradient(150deg, #1B3AA0 0%, #1B3AA0 100%);
  }

  .card-icon{
    width:46px; height:46px;
    border-radius:13px;
    background:rgba(255,255,255,0.1);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:20px;
    transition:transform 0.35s ease, background 0.35s ease;
  }
  .card-icon svg{
    width:24px; height:24px;
    color:#fff;
  }
  .why-card:hover .card-icon{
    transform:scale(1.08) rotate(-4deg);
    background:rgba(255,255,255,0.16);
  }

  .why-card h3{
    font-size:19px;
    font-weight:700;
    letter-spacing:-0.01em;
    margin:0 0 12px;
    color:var(--why-ink);
  }

  .why-card p{
    font-size:14.5px;
    line-height:1.65;
    color:var(--why-ink-muted);
    margin:0;
  }

  @media (min-width:820px){
    .why-inner{ max-width:1120px; }
    .why-top{
      flex-direction:row;
      align-items:center;
      justify-content:space-between;
      gap:56px;
      margin-bottom:56px;
    }
    .why-intro{ flex:1 1 420px; max-width:460px; }
    .why-intro .stats{ margin-bottom:0; }
    .why-visual{
      display:block;
      flex:1 1 420px;
      max-width:520px;
    }
    .why-visual img{
      width:100%;
      display:block;
      aspect-ratio:4/3;
      object-fit:cover;
      border-radius:24px;
      border:1px solid rgba(255,255,255,0.12);
      box-shadow:0 30px 60px -24px rgba(3,10,40,0.6);
    }
    .card-stack{
      flex-direction:row;
    }
    .why-card{ flex:1; }
  }

  @media (prefers-reduced-motion: reduce){
    .why-head, .stats, .why-card{ opacity:1; transform:none; transition:none; }
  }
  

 /* =====================================================
     CLIENT REVIEWS SECTION — trendy card redesign
  ===================================================== */
  .reviews{
    position:relative;
    padding:50px 0;
    background:
      radial-gradient(60% 50% at 15% 10%, rgba(43,78,224,0.07) 0%, rgba(43,78,224,0) 60%),
      radial-gradient(50% 50% at 90% 90%, rgba(124,147,240,0.08) 0%, rgba(124,147,240,0) 60%),
      #FAFBFF;
    overflow:hidden;
  }

  .reviews::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
      linear-gradient(rgba(18,46,140,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(18,46,140,0.04) 1px, transparent 1px);
    background-size:56px 56px;
    -webkit-mask-image:radial-gradient(60% 60% at 50% 0%, black 0%, transparent 75%);
            mask-image:radial-gradient(60% 60% at 50% 0%, black 0%, transparent 75%);
    pointer-events:none;
  }

  .reviews-head{
    position:relative;
    z-index:2;
    text-align:center;
    max-width:600px;
    margin:0 auto 56px;
    padding:0 24px;
    opacity:0;
    transform:translateY(24px);
    transition:opacity 0.7s cubic-bezier(.22,.68,.36,1), transform 0.7s cubic-bezier(.22,.68,.36,1);
  }
  .reviews-head.in-view{ opacity:1; transform:translateY(0); }

  .eyebrow{
    display:inline-block;
    font-size:12px;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--blue-signal);
    margin-bottom:14px;
  }

  .reviews-head h2{
    font-size:clamp(28px, 3.6vw, 36px);
    font-weight:800;
    letter-spacing:-0.02em;
    margin:0 0 14px;
    color:var(--ink);
  }
  .reviews-head p{
    font-size:16px;
    line-height:1.65;
    color:var(--ink-muted);
    margin:0;
  }

  /* ---- marquee shell ---- */
  .review-marquee{
    position:relative;
    z-index:2;
    width:100%;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
  }

  .review-track{
    display:flex;
    align-items:stretch;
    width:max-content;
    animation:reviewScroll 42s linear infinite;
  }

  .review-marquee:hover .review-track{
    animation-play-state:paused;
  }

  @keyframes reviewScroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }

:root{
    --blue-deep:#0B1F6B;
    --blue-primary:#122E8C;
    --blue-signal:#2B4EE0;
    --ink:#0B1F6B;
    --ink-muted:#6B7280;
    --line:#E7E9F3;
    --bg:#FFFFFF;
  }

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

  body{
    font-family:'Inter',sans-serif;
    background:#FFFFFF;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }

  /* =====================================================
     CLIENT REVIEWS SECTION — trendy card redesign
  ===================================================== */
  .reviews{
    position:relative;
    padding:50px 0;
    background:
      radial-gradient(60% 50% at 15% 10%, rgba(43,78,224,0.07) 0%, rgba(43,78,224,0) 60%),
      radial-gradient(50% 50% at 90% 90%, rgba(124,147,240,0.08) 0%, rgba(124,147,240,0) 60%),
      #FAFBFF;
    overflow:hidden;
  }

  .reviews::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
      linear-gradient(rgba(18,46,140,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(18,46,140,0.04) 1px, transparent 1px);
    background-size:56px 56px;
    -webkit-mask-image:radial-gradient(60% 60% at 50% 0%, black 0%, transparent 75%);
            mask-image:radial-gradient(60% 60% at 50% 0%, black 0%, transparent 75%);
    pointer-events:none;
  }

  .reviews-head{
    position:relative;
    z-index:2;
    text-align:center;
    max-width:600px;
    margin:0 auto 56px;
    padding:0 24px;
    opacity:0;
    transform:translateY(24px);
    transition:opacity 0.7s cubic-bezier(.22,.68,.36,1), transform 0.7s cubic-bezier(.22,.68,.36,1);
  }
  .reviews-head.in-view{ opacity:1; transform:translateY(0); }

  .eyebrow{
    display:inline-block;
    font-size:12px;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--blue-signal);
    margin-bottom:14px;
  }

  .reviews-head h2{
    font-size:clamp(28px, 3.6vw, 36px);
    font-weight:800;
    letter-spacing:-0.02em;
    margin:0 0 14px;
    color:var(--ink);
  }
  .reviews-head p{
    font-size:16px;
    line-height:1.65;
    color:var(--ink-muted);
    margin:0;
  }

  /* ---- marquee shell ---- */
  .review-marquee{
    position:relative;
    z-index:2;
    width:100%;
    overflow:hidden;
    padding:34px 0 26px;
    margin:-34px 0 -26px;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
  }

  .review-track{
    display:flex;
    align-items:stretch;
    width:max-content;
    animation:reviewScroll 42s linear infinite;
  }

  .review-marquee:hover .review-track{
    animation-play-state:paused;
  }

  @keyframes reviewScroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }

  /* ---- trendy card: gradient border + glass + spotlight glow ---- */
  .review-card{
    position:relative;
    flex:0 0 auto;
    width:310px;
    margin:0 14px;
    border-radius:24px;
    padding:1.5px;
    background:linear-gradient(155deg, rgba(43,78,224,0.18) 0%, rgba(18,46,140,0.06) 40%, rgba(124,147,240,0.22) 100%);
    cursor:pointer;
    transition:transform 0.45s cubic-bezier(.22,.68,.36,1), background 0.45s ease;
  }

  .card-glow{
    position:absolute;
    inset:-2px;
    border-radius:26px;
    background:radial-gradient(120px 120px at 50% 0%, rgba(43,78,224,0.35), transparent 70%);
    opacity:0;
    filter:blur(6px);
    transition:opacity 0.45s ease;
    pointer-events:none;
    z-index:0;
  }

  .review-card:hover{
    transform:translateY(-12px) scale(1.03);
    background:linear-gradient(155deg, rgba(43,78,224,0.55) 0%, rgba(18,46,140,0.25) 40%, rgba(124,147,240,0.65) 100%);
  }
  .review-card:hover .card-glow{ opacity:1; }

  .card-inner{
    position:relative;
    z-index:1;
    background:#ffffff;
    border-radius:22.5px;
    padding:28px 26px 24px;
    height:100%;
    display:flex;
    flex-direction:column;
    box-shadow:0 14px 34px -22px rgba(11,31,107,0.35);
    transition:box-shadow 0.45s ease;
  }
  .review-card:hover .card-inner{
    box-shadow:0 26px 54px -20px rgba(11,31,107,0.32);
  }

  .card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
  }

  .quote-mark{
    width:34px;
    height:26px;
  }

  .stars{
    display:flex;
    gap:2px;
  }
  .star{
    width:14px; height:14px;
    fill:#F5A623;
  }
  .star-empty{
    fill:#E7E9F3;
  }

  .review-quote{
    font-size:14.5px;
    line-height:1.7;
    font-weight:400;
    color:#3E4658;
    margin:0 0 24px;
    flex:1;
  }

  .reviewer-row{
    display:flex;
    align-items:center;
    gap:12px;
    position:relative;
  }

  .avatar-ring{
    width:50px; height:50px;
    border-radius:50%;
    background:conic-gradient(from 180deg, #2B4EE0, #7C93F0, #2B4EE0);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2.5px;
    flex-shrink:0;
    transition:transform 0.45s ease;
  }
  .review-card:hover .avatar-ring{ transform:scale(1.1) rotate(8deg); }

  .avatar{
    width:100%; height:100%;
    border-radius:50%;
    background:#fff;
    color:var(--blue-deep);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:800;
  }

  .reviewer-info{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
  }
  .reviewer-name{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:14.5px;
    font-weight:700;
    color:var(--blue-deep);
    white-space:nowrap;
  }
  .verified{
    width:13px; height:13px;
    flex-shrink:0;
  }
  .reviewer-title{
    font-size:12px;
    color:var(--ink-muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .brand-watermark{
    width:26px;
    height:26px;
    object-fit:contain;
    margin-left:auto;
    opacity:0.14;
    flex-shrink:0;
    transition:opacity 0.45s ease;
  }
  .review-card:hover .brand-watermark{ opacity:0.3; }

  @media (max-width:640px){
    .review-card{ width:260px; margin:0 10px; }
  }

  @media (prefers-reduced-motion: reduce){
    .review-track{ animation:none; }
    .reviews-head{ opacity:1; transform:none; transition:none; }
  }

 
  /* =====================================================
     FAQ SECTION
  ===================================================== */
  .faq{
    position:relative;
    padding:0 24px 50px;
    background:#FAFBFF;
    overflow:hidden;
  }

  @media (max-width:640px){
    .faq{ padding:0 20px 50px; }
  }
 
  .faq::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
      linear-gradient(rgba(18,46,140,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(18,46,140,0.04) 1px, transparent 1px);
    background-size:56px 56px;
    -webkit-mask-image:radial-gradient(60% 55% at 20% 0%, black 0%, transparent 75%);
            mask-image:radial-gradient(60% 55% at 20% 0%, black 0%, transparent 75%);
    pointer-events:none;
  }
 
  .faq-inner{
    position:relative;
    z-index:2;
    max-width:1180px;
    margin:0 auto;
  }
  .faq-list{ max-width:none; margin:0 auto; }
 
  .faq-head{
    text-align:center;
    opacity:0;
    transform:translateY(24px);
    transition:opacity 0.7s cubic-bezier(.22,.68,.36,1), transform 0.7s cubic-bezier(.22,.68,.36,1);
  }
  .faq-head.in-view{ opacity:1; transform:translateY(0); }
 
  .faq-head h2{
    font-size:clamp(28px, 4.4vw, 36px);
    font-weight:800;
    letter-spacing:-0.02em;
    line-height:1.15;
    margin:0 0 14px;
    color:var(--ink);
  }
 
  .faq-head p{
    font-size:15.5px;
    line-height:1.6;
    color:var(--ink-muted);
    margin:0 auto 32px;
    max-width:520px;
  }
 
  /* ---- scrollable category tabs ---- */
  .faq-tabs-wrap{
    position:relative;
    margin-bottom:28px;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.7s cubic-bezier(.22,.68,.36,1) 0.1s, transform 0.7s cubic-bezier(.22,.68,.36,1) 0.1s;
  }
  .faq-tabs-wrap.in-view{ opacity:1; transform:translateY(0); }
 
  .faq-tabs, .portfolio-tabs{
    display:flex;
    gap:10px;
    overflow-x:auto;
    scrollbar-width:none;
    padding:2px 2px 10px;
    scroll-behavior:smooth;
  }
  .faq-tabs::-webkit-scrollbar, .portfolio-tabs::-webkit-scrollbar{ display:none; }

  .faq-tab, .portfolio-tab{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:11px 20px;
    border-radius:999px;
    border:none;
    background:var(--pill-bg);
    color:var(--ink-muted);
    font-size:13.5px;
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;
    transition:background 0.3s ease, color 0.3s ease, transform 0.25s ease, box-shadow 0.3s ease;
  }
  .faq-tab:hover, .portfolio-tab:hover{ transform:translateY(-1px); }
  .faq-tab.is-active, .portfolio-tab.is-active{
    background:var(--blue-deep);
    color:#fff;
    box-shadow:0 10px 24px -10px rgba(11,31,107,0.5);
  }
 
  /* edge fade hint so people know it scrolls */
  .faq-tabs-wrap::after{
    content:"";
    position:absolute;
    top:0; right:0;
    width:36px;
    height:100%;
    background:linear-gradient(90deg, rgba(250,251,255,0) 0%, #FAFBFF 85%);
    pointer-events:none;
  }

  /* ---- accordion list ---- */
  .faq-list{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
 
  .faq-item{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 6px 20px -16px rgba(11,31,107,0.2);
    opacity:0;
    transform:translateY(18px);
    animation:itemIn 0.5s cubic-bezier(.22,.68,.36,1) forwards;
    transition:border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .faq-item:hover{
    border-color:rgba(43,78,224,0.28);
    box-shadow:0 14px 30px -18px rgba(11,31,107,0.35);
  }
  .faq-item.is-open{
    border-color:rgba(43,78,224,0.35);
  }
 
  @keyframes itemIn{
    to{ opacity:1; transform:translateY(0); }
  }
 
  .faq-question{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    width:100%;
    padding:20px 22px;
    background:none;
    border:none;
    text-align:left;
    font-family:'Inter', sans-serif;
    font-size:15px;
    font-weight:600;
    color:var(--ink);
    cursor:pointer;
  }
 
  .faq-chevron{
    flex-shrink:0;
    width:20px;
    height:20px;
    color:var(--blue-signal);
    transition:transform 0.35s cubic-bezier(.22,.68,.36,1);
  }
  .faq-item.is-open .faq-chevron{
    transform:rotate(180deg);
  }
 
  .faq-answer-wrap{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows 0.4s cubic-bezier(.22,.68,.36,1);
  }
  .faq-item.is-open .faq-answer-wrap{
    grid-template-rows:1fr;
  }
 
  .faq-answer-inner{
    overflow:hidden;
  }
 
  .faq-answer{
    padding:0 22px 20px;
    font-size:14.5px;
    line-height:1.7;
    color:var(--ink-muted);
    opacity:0;
    transform:translateY(-6px);
    transition:opacity 0.35s ease 0.05s, transform 0.35s ease 0.05s;
  }
  .faq-item.is-open .faq-answer{
    opacity:1;
    transform:translateY(0);
  }
 
  @media (prefers-reduced-motion: reduce){
    .faq-head, .faq-tabs-wrap, .faq-item{ opacity:1; transform:none; transition:none; animation:none; }
  }
  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
 
  body{
    font-family:'Inter',sans-serif;
    background:#FAFBFF;
    color:#0B1F6B;
    -webkit-font-smoothing:antialiased;
  }
  
*{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
 
  body{
    font-family:'Inter',sans-serif;
    background:#FAFBFF;
    -webkit-font-smoothing:antialiased;
  }
 
  .cta-section{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    padding:50px 20px;
  }
 
 /* =====================================================
     STILL HAVE QUESTIONS — split layout (CTA left, image right)
  ===================================================== */
  .cta-section{
    display:flex;
    justify-content:center;
    width:100%;
    padding:50px 24px;
  }
 
  .cta-row{
    display:flex;
    align-items:stretch;
    gap:28px;
    width:100%;
    max-width:1080px;
  }
 
  /* ---- left: CTA card ---- */
  .cta-block{
    position:relative;
    flex:1 1 50%;
    border-radius:28px;
    padding:44px 40px;
    overflow:hidden;
    background:linear-gradient(150deg, #001F7D 0%, #001F7D 60%, #13358B 100%);
    box-shadow:0 30px 60px -24px rgba(0,31,125,0.5);
    display:flex;
    flex-direction:column;
    justify-content:center;
    opacity:0;
    transform:translateY(28px);
    transition:opacity 0.7s cubic-bezier(.22,.68,.36,1), transform 0.7s cubic-bezier(.22,.68,.36,1);
  }
  .cta-block.in-view{
    opacity:1;
    transform:translateY(0);
  }
 
  .cta-blob{
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,0.08);
    pointer-events:none;
  }
  .cta-blob-1{
    width:160px; height:160px;
    top:-55px; right:-45px;
    animation:floatSlow 7s ease-in-out infinite;
  }
  .cta-blob-2{
    width:100px; height:100px;
    bottom:-30px; left:-30px;
    background:rgba(255,255,255,0.06);
    animation:floatSlow 8s ease-in-out infinite 1s;
  }
  .cta-blob-3{
    width:16px; height:16px;
    bottom:44px; right:38px;
    background:rgba(111,227,255,0.55);
    animation:floatSlow 5s ease-in-out infinite 0.5s;
  }
 
  @keyframes floatSlow{
    0%, 100%{ transform:translateY(0) scale(1); }
    50%{ transform:translateY(-12px) scale(1.05); }
  }
 
  .cta-content{
    position:relative;
    z-index:2;
  }
 
  .cta-title{
    font-size:32px;
    font-weight:800;
    line-height:1.18;
    letter-spacing:-0.01em;
    color:#fff;
    margin:0 0 16px;
  }
 
  .cta-desc{
    font-size:15.5px;
    line-height:1.65;
    color:rgba(255,255,255,0.82);
    margin:0 0 32px;
    max-width:360px;
  }
 
  .cta-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:fit-content;
    padding:16px 28px;
    border-radius:14px;
    border:none;
    background:#ffffff;
    color:#0B1F6B;
    font-family:'Inter', sans-serif;
    font-size:15.5px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 14px 30px -12px rgba(0,0,0,0.35);
    transition:background 0.3s ease, transform 0.3s cubic-bezier(.22,.68,.36,1), box-shadow 0.3s ease;
  }
  .cta-button svg{
    width:19px; height:19px;
    flex-shrink:0;
    transition:transform 0.3s ease;
  }
  .cta-button:hover{
    background:#F2F6FF;
    transform:translateY(-3px);
    box-shadow:0 18px 36px -10px rgba(0,0,0,0.4);
  }
  .cta-button:hover svg{
    transform:rotate(-8deg) scale(1.08);
  }
  .cta-button:active{
    transform:translateY(-1px) scale(0.98);
  }
 
  /* ---- right: image ---- */
  .cta-image-wrap{
    flex:1 1 50%;
    border-radius:28px;
    overflow:hidden;
    position:relative;
    min-height:260px;
    box-shadow:0 30px 60px -24px rgba(11,31,107,0.35);
    opacity:0;
    transform:translateY(28px);
    transition:opacity 0.7s cubic-bezier(.22,.68,.36,1) 0.12s, transform 0.7s cubic-bezier(.22,.68,.36,1) 0.12s;
  }
  .cta-image-wrap.in-view{
    opacity:1;
    transform:translateY(0);
  }
 
  .cta-image-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform 0.6s cubic-bezier(.22,.68,.36,1);
  }
  .cta-image-wrap:hover img{
    transform:scale(1.05);
  }
 
  @media (max-width:820px){
    .cta-row{
      flex-direction:column;
    }
    .cta-image-wrap{
      min-height:220px;
      order:-1;
    }
    .cta-block{
      padding:38px 28px;
    }
  }
 
  @media (prefers-reduced-motion: reduce){
    .cta-block, .cta-image-wrap{ opacity:1; transform:none; transition:none; }
    .cta-blob-1, .cta-blob-2, .cta-blob-3{ animation:none; }
  }
  /* =====================================================
     FOOTER
  ===================================================== */
  .footer{
    position:relative;
    background-color:var(--blue-deep);
    color:#fff;
    padding:50px 24px;
    overflow:hidden;
  }
 
  .footer::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size:52px 52px;
    -webkit-mask-image:radial-gradient(65% 55% at 20% 0%, black 0%, transparent 75%);
            mask-image:radial-gradient(65% 55% at 20% 0%, black 0%, transparent 75%);
    pointer-events:none;
  }
 
  .footer-glow{
    position:absolute;
    width:100%; height:100%;
    pointer-events:none;
  }
 
  .footer-inner{
    position:relative;
    z-index:2;
    max-width:1180px;
    margin:0 auto;
  }
 
  /* ---- top row: logo + icon actions ---- */
  .footer-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:26px;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.7s cubic-bezier(.22,.68,.36,1), transform 0.7s cubic-bezier(.22,.68,.36,1);
  }
  .footer-top.in-view{ opacity:1; transform:translateY(0); }
 
  .footer-logo{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .footer-logo img{
    width:160px;
    height: 80px;
    border-radius:8px;
  }
  .footer-logo-text{
    display:flex;
    flex-direction:column;
    line-height:1.1;
  }
  .footer-logo-name{
    font-size:16px;
    font-weight:800;
    letter-spacing:0.03em;
  }
  .footer-logo-tag{
    font-size:8px;
    font-weight:700;
    letter-spacing:0.08em;
    color:#9DB2FF;
  }
 
  .footer-actions{
    display:flex;
    gap:10px;
    margin-top:16px;
  }
  .footer-action{
    width:38px; height:38px;
    border-radius:50%;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.1);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    cursor:pointer;
    transition:background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  }
  .footer-action svg{ width:16px; height:16px; }
  .footer-action:hover{
    background:var(--footer-blue-signal);
    transform:translateY(-3px) scale(1.08);
    box-shadow:0 10px 22px -8px rgba(76,124,255,0.6);
  }
 
  /* ---- tagline ---- */
  .footer-tagline{
    font-size:15px;
    line-height:1.65;
    color:var(--footer-ink-muted);
    max-width:560px;
    margin:0 0 44px;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.7s cubic-bezier(.22,.68,.36,1) 0.08s, transform 0.7s cubic-bezier(.22,.68,.36,1) 0.08s;
  }
  .footer-tagline.in-view{ opacity:1; transform:translateY(0); }
 
  /* ---- columns grid ---- */
  .footer-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:32px;
    margin-bottom:36px;
  }
 
  .footer-col{
    opacity:0;
    transform:translateY(24px);
    transition:opacity 0.7s cubic-bezier(.22,.68,.36,1), transform 0.7s cubic-bezier(.22,.68,.36,1);
  }
  .footer-col.in-view{ opacity:1; transform:translateY(0); }
  .footer-col:nth-child(1){ transition-delay:0s; }
  .footer-col:nth-child(2){ transition-delay:0.08s; }
  .footer-col:nth-child(3){ transition-delay:0.16s; }
  .footer-col:nth-child(4){ transition-delay:0.24s; }
 
  .footer-col h4{
    font-size:12px;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:#9DB2FF;
    margin:0 0 18px;
  }
 
  .footer-links{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
 
  .footer-links a{
    color:var(--footer-ink-muted);
    text-decoration:none;
    font-size:14.5px;
    position:relative;
    display:inline-block;
    width:fit-content;
    transition:color 0.3s ease, transform 0.3s ease;
  }
  .footer-links a::after{
    content:"";
    position:absolute;
    left:0; bottom:-3px;
    width:0%; height:1.5px;
    background:var(--footer-blue-signal);
    transition:width 0.3s ease;
  }
  .footer-links a:hover{
    color:#fff;
    transform:translateX(3px);
  }
  .footer-links a:hover::after{ width:100%; }
 
  .footer-address{
    color:var(--footer-ink-muted);
    font-size:14.5px;
    line-height:1.6;
    margin:0 0 26px;
  }
 
  .footer-subscribe-label{
    font-size:13.5px;
    font-weight:700;
    margin:0 0 12px;
    color:#fff;
  }
 
  .footer-subscribe{
    display:flex;
    border-radius:10px;
    overflow:hidden;
    background:#fff;
  }
 
  .footer-subscribe input{
    flex:1;
    border:none;
    outline:none;
    padding:12px 14px;
    font-family:'Inter', sans-serif;
    font-size:14px;
    color:#0B1F6B;
    background:transparent;
    min-width:0;
  }
  .footer-subscribe input::placeholder{ color:#9AA3B8; }
 
  .footer-subscribe button{
    flex-shrink:0;
    width:44px;
    border:none;
    background:var(--footer-blue-signal);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background 0.3s ease, transform 0.2s ease;
  }
  .footer-subscribe button svg{
    width:17px; height:17px;
    transition:transform 0.3s ease;
  }
  .footer-subscribe button:hover{
    background:#3A63E0;
  }
  .footer-subscribe button:hover svg{
    transform:translateX(3px);
  }
  .footer-subscribe button.is-sent svg{
    animation:sentPulse 0.5s ease;
  }
  @keyframes sentPulse{
    0%{ transform:scale(1) translateX(0); }
    50%{ transform:scale(1.3) translateX(6px); opacity:0.4; }
    100%{ transform:scale(1) translateX(0); opacity:1; }
  }
 
  .footer-subscribe-msg{
    font-size:12.5px;
    color:#9DB2FF;
    margin-top:8px;
    height:16px;
    opacity:0;
    transition:opacity 0.3s ease;
  }
  .footer-subscribe-msg.is-visible{ opacity:1; }
 
  /* ---- divider + bottom bar ---- */
  .footer-divider{
    height:1px;
    background:var(--footer-line);
    margin-bottom:22px;
    transform-origin:left;
    transform:scaleX(0);
    transition:transform 0.9s cubic-bezier(.22,.68,.36,1) 0.2s;
  }
  .footer-divider.in-view{ transform:scaleX(1); }
 
  .footer-bottom{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    opacity:0;
    transition:opacity 0.7s ease 0.3s;
  }
  .footer-bottom.in-view{ opacity:1; }
 
  .footer-copyright{
    font-size:13px;
    color:var(--footer-ink-muted);
  }
 
  .footer-legal{
    display:flex;
    gap:22px;
  }
  .footer-legal a{
    font-size:13px;
    color:var(--footer-ink-muted);
    text-decoration:none;
    transition:color 0.3s ease;
  }
  .footer-legal a:hover{ color:#fff; }
 
  @media (max-width:900px){
    .footer-grid{ grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width:560px){
    .footer{ padding:50px 20px 28px; text-align:center; }
    .footer-top{ flex-direction:column; justify-content:center; text-align:center; }
    .footer-logo{ flex-direction:column; justify-content:center; }
    .footer-actions{ justify-content:center; }
    .footer-tagline{ margin-left:auto; margin-right:auto; }
    .footer-grid{ grid-template-columns:1fr; gap:34px; text-align:center; }
    .footer-links{ align-items:center; }
    .footer-links a{ margin:0 auto; }
    .footer-subscribe{ max-width:320px; margin:0 auto; }
    .footer-bottom{ flex-direction:column; align-items:center; justify-content:center; text-align:center; }
    .footer-legal{ justify-content:center; }
  }

  /* =====================================================
     VIDEO TESTIMONIALS SECTION
  ===================================================== */
  .video-reviews{
    position:relative;
    padding:50px 20px;
    background:#FAFBFF;
    overflow:hidden;
  }

  .video-reviews-head{
    text-align:center;
    max-width:680px;
    margin:0 auto 56px;
    opacity:0;
    transform:translateY(24px);
    transition:opacity 0.7s cubic-bezier(.22,.68,.36,1), transform 0.7s cubic-bezier(.22,.68,.36,1);
  }
  .video-reviews-head.in-view{ opacity:1; transform:translateY(0); }

  .video-reviews-head h2{
    font-size:clamp(26px, 3.4vw, 36px);
    font-weight:800;
    letter-spacing:-0.02em;
    line-height:1.2;
    margin:0 0 14px;
    color:var(--ink);
  }
  .video-reviews-head p{
    font-size:16px;
    line-height:1.65;
    color:var(--ink-muted);
    margin:0;
  }

  .video-marquee{
    position:relative;
    width:100%;
    overflow:hidden;
    padding:14px 0;
    margin:-14px 0;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
  }

  .video-track{
    display:flex;
    align-items:stretch;
    width:max-content;
    gap:24px;
    animation:videoScroll 36s linear infinite;
  }

  .video-marquee:hover .video-track{
    animation-play-state:paused;
  }

  @keyframes videoScroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(calc(-50% - 12px)); }
  }

  .video-phone{
    display:block;
    flex:0 0 auto;
    width:190px;
    opacity:0;
    transform:translateY(36px);
    transition:
      opacity 0.65s cubic-bezier(.22,.68,.36,1),
      transform 0.45s cubic-bezier(.22,.68,.36,1),
      box-shadow 0.35s ease;
  }
  .video-phone.in-view{ opacity:1; transform:translateY(0); }

  .video-phone:nth-child(1){ transition-delay:0s; }
  .video-phone:nth-child(2){ transition-delay:0.08s; }
  .video-phone:nth-child(3){ transition-delay:0.16s; }
  .video-phone:nth-child(4){ transition-delay:0.24s; }
  .video-phone:nth-child(5){ transition-delay:0.32s; }
  .video-phone:nth-child(6){ transition-delay:0.40s; }

  .video-phone-frame{
    position:relative;
    aspect-ratio:9/16;
    border-radius:22px;
    overflow:hidden;
    background:#0B1F6B;
    border:4px solid #0B1F6B;
    box-shadow:0 18px 34px -14px rgba(18,46,140,0.35);
    transition:transform 0.4s cubic-bezier(.22,.68,.36,1), box-shadow 0.4s ease, border-color 0.4s ease;
  }

  .video-phone-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  .video-play{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%, -50%);
    width:46px; height:46px;
    border-radius:50%;
    background:#E32E2E;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 18px -4px rgba(0,0,0,0.45);
    transition:transform 0.35s ease, background 0.35s ease;
  }
  .video-play svg{
    width:18px; height:18px;
    color:#fff;
    margin-left:2px;
  }

  .video-phone:hover .video-phone-frame{
    transform:translateY(-8px) scale(1.04);
    border-color:var(--blue-signal);
    box-shadow:0 26px 46px -16px rgba(18,46,140,0.5);
  }
  .video-phone:hover .video-play{
    transform:translate(-50%, -50%) scale(1.12);
    background:var(--blue-signal);
  }

  @media (max-width:980px){
    .video-phone{ width:150px; }
  }
  @media (max-width:640px){
    .video-reviews{ padding:50px 20px; }
    .video-phone{ width:130px; }
    .video-track{ gap:16px; }
  }

  @media (prefers-reduced-motion: reduce){
    .video-track{ animation:none; }
    .video-reviews-head, .video-phone{ opacity:1; transform:none; transition:none; }
  }

  @media (prefers-reduced-motion: reduce){
    .footer-top, .footer-tagline, .footer-col, .footer-divider, .footer-bottom{
      opacity:1; transform:none; transition:none;
    }
  }

  /* =====================================================
     SERVICES PAGE (services.html)
  ===================================================== */
  .header-logo-img{ height:80px; width:auto; aspect-ratio:1269/576; display:block; }

  /* ---- shared shell + heading utilities ---- */
  .section-shell{ max-width:1180px; margin:0 auto; padding:0 24px; }

  .section-heading{ margin-bottom:56px; }
  .section-heading h2{ font-size:clamp(28px, 3.6vw, 38px); font-weight:800; letter-spacing:-0.02em; margin:0 0 14px; color:var(--ink); }
  .section-heading p{ font-size:16px; line-height:1.65; color:var(--ink-muted); margin:0; }
  .section-heading.centered{ text-align:center; max-width:640px; margin-left:auto; margin-right:auto; }
  .section-heading.centered p{ margin-left:auto; margin-right:auto; }
  .section-heading.split{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; }
  .section-heading.split > div{ max-width:520px; }
  .section-heading.split p{ max-width:380px; }
  .eyebrow.light{ color:#9DB2FF; }

  /* ---- generic scroll-reveal used throughout the services page ---- */
  .reveal{ opacity:0; transform:translateY(28px); transition:opacity 0.7s cubic-bezier(.22,.68,.36,1), transform 0.7s cubic-bezier(.22,.68,.36,1); }
  .reveal.is-visible{ opacity:1; transform:translateY(0); }
  @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

  /* ---- hero ---- */
  .service-page-hero{ position:relative; padding:50px 24px; background:var(--bg); overflow:hidden; }
  .service-grid-bg{
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(18,46,140,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(18,46,140,0.05) 1px, transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:radial-gradient(70% 70% at 50% 30%, black 0%, transparent 75%);
            mask-image:radial-gradient(70% 70% at 50% 30%, black 0%, transparent 75%);
    pointer-events:none;
  }
  .service-hero-glow{ position:absolute; width:520px; height:520px; border-radius:50%; pointer-events:none; background:radial-gradient(circle, rgba(43,78,224,0.18) 0%, rgba(43,78,224,0) 70%); }
  .service-hero-glow.glow-one{ top:-160px; left:-140px; }
  .service-hero-glow.glow-two{ bottom:-200px; right:-160px; background:radial-gradient(circle, rgba(124,147,240,0.2) 0%, rgba(124,147,240,0) 70%); }

  .service-hero-inner{ position:relative; z-index:2; max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:56px; flex-wrap:wrap; }
  .service-hero-copy{ flex:1 1 480px; max-width:600px; }
  .service-kicker{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 10px; border-radius:999px; background:var(--badge-bg); border:1px solid rgba(18,46,140,0.08); color:var(--badge-text); font-size:12px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:22px; }
  .kicker-icon{ width:13px; height:13px; flex-shrink:0; color:var(--blue-signal); }
  .service-hero-copy h1{ font-size:clamp(32px, 4.6vw, 46px); font-weight:800; line-height:1.15; letter-spacing:-0.02em; margin:0 0 20px; color:var(--ink); }
  .service-hero-copy > p{ font-size:16.5px; line-height:1.7; color:var(--ink-muted); margin:0 0 32px; max-width:520px; }

  .service-hero-actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:26px; }
  .primary-action{ display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border-radius:12px; background:var(--blue-deep); color:#fff; font-weight:600; font-size:14.5px; letter-spacing:0.01em; box-shadow:0 14px 30px -12px rgba(18,46,140,0.5); transition:transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; }
  .primary-action span{ display:inline-block; transition:transform 0.25s ease; }
  .primary-action:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -10px rgba(18,46,140,0.55); background:linear-gradient(90deg, var(--blue-deep), var(--blue-signal)); }
  .primary-action:hover span{ transform:translateX(4px); }
  .secondary-action{ display:inline-flex; align-items:center; padding:15px 26px; border-radius:12px; border:1px solid var(--line); color:var(--ink); font-weight:600; font-size:14.5px; transition:border-color 0.25s ease, background 0.25s ease, color 0.25s ease; }
  .secondary-action:hover{ border-color:var(--blue-signal); background:var(--badge-bg); color:var(--blue-deep); }
  .service-trust-line{ display:flex; align-items:center; flex-wrap:nowrap; white-space:nowrap; font-size:13.5px; color:var(--ink-muted); font-weight:500; }
  .service-trust-line span{ display:inline-flex; align-items:center; color:var(--blue-signal); font-weight:700; margin:0 8px; }
  .service-trust-line span::before{ content:"\2022"; margin-right:6px; }

  .service-hero-visual{ position:relative; flex:1 1 420px; max-width:480px; display:flex; align-items:center; justify-content:center; }
  .visual-window{ position:relative; z-index:2; width:100%; background:#fff; border-radius:20px; border:1px solid var(--line); box-shadow:0 30px 60px -24px rgba(18,46,140,0.28); overflow:hidden; animation:floatY 6s ease-in-out infinite; }
  .visual-window-top{ display:flex; align-items:center; gap:6px; padding:12px 16px; background:#F3F5FC; border-bottom:1px solid var(--line); }
  .visual-window-top i{ width:9px; height:9px; border-radius:50%; background:#DCE1F5; display:block; font-style:normal; }
  .visual-window-top span{ margin-left:8px; font-size:11.5px; color:var(--ink-muted); font-weight:600; }
  .visual-body{ display:flex; min-height:220px; }
  .visual-sidebar{ width:52px; background:#F7F9FF; border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:center; gap:14px; padding:18px 0; }
  .visual-sidebar b{ width:22px; height:22px; border-radius:7px; background:var(--badge-bg); display:block; }
  .visual-main{ flex:1; padding:20px; display:flex; flex-direction:column; gap:20px; min-width:0; }
  .visual-code{ background:var(--blue-deep); border-radius:12px; padding:16px; font-family:'SFMono-Regular', Menlo, Consolas, monospace; font-size:11.5px; line-height:1.8; display:flex; flex-direction:column; }
  .visual-code span{ color:#7C93F0; }
  .visual-code em{ font-style:normal; color:#fff; padding-left:14px; }
  .visual-code strong{ font-weight:600; color:#4C7CFF; padding-left:14px; }
  .visual-chart{ display:flex; align-items:flex-end; gap:8px; height:80px; }
  .visual-chart span{ flex:1; height:var(--h); border-radius:6px 6px 0 0; background:linear-gradient(180deg, var(--blue-signal), #7C93F0); }

  .float-card{ position:absolute; z-index:3; display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 16px; box-shadow:0 18px 34px -16px rgba(18,46,140,0.35); animation:floatY 5s ease-in-out infinite; }
  .float-card small{ display:block; font-size:11px; color:var(--ink-muted); font-weight:600; }
  .float-card strong{ font-size:15px; color:var(--ink); }
  .float-growth{ top:-18px; right:-18px; }
  .float-secure{ bottom:-18px; left:-18px; animation-delay:1s; }
  .float-secure span{ width:26px; height:26px; border-radius:50%; background:#DFF5E6; color:#1FA35A; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex-shrink:0; }
  .float-secure div{ display:flex; flex-direction:column; }

  @media (max-width:980px){
    .service-hero-inner{ flex-direction:column; align-items:stretch; text-align:center; }
    .service-hero-copy{ max-width:640px; width:100%; }
    .service-hero-actions, .service-trust-line{ justify-content:center; }
    .service-hero-copy > p{ margin-left:auto; margin-right:auto; }
  }
  @media (max-width:640px){
    .float-card{ display:none; }
    .career-hero-photo{ display:none; }
  }
  @media (max-width:480px){
    .service-page-hero{ padding:20px 20px; }
    .service-hero-copy h1{ font-size:clamp(26px, 8vw, 34px); }
    .service-kicker{ white-space:normal; text-align:left; }
    .service-hero-actions{ flex-direction:column; align-items:stretch; }
    .service-hero-actions .cta, .service-hero-actions .secondary-action{ justify-content:center; text-align:center; }
    .service-trust-line{ font-size:11.5px; }
    .service-trust-line span{ margin:0 5px; }
  }
  @media (prefers-reduced-motion: reduce){
    .visual-window, .float-card{ animation:none; }
  }

  /* ---- stats bar ---- */
  .service-stats{ background:#FAFBFF; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:50px 24px; }
  .service-stats-inner{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; text-align:center; }
  .service-stat strong{ display:block; font-size:34px; font-weight:800; color:var(--blue-deep); letter-spacing:-0.02em; margin-bottom:6px; }
  .service-stat span{ font-size:13.5px; color:var(--ink-muted); font-weight:500; }
  @media (max-width:760px){ .service-stats-inner{ grid-template-columns:repeat(2, 1fr); gap:32px 20px; } }

  /* ---- capability grid ---- */
  .service-intro{ padding-top:50px; padding-bottom:50px; background:var(--bg); }
  .capability-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
  .capability-card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:20px; padding:34px 28px; transition:transform 0.35s cubic-bezier(.22,.68,.36,1), box-shadow 0.35s ease, border-color 0.35s ease; }
  .capability-card:hover{ transform:translateY(-8px); box-shadow:0 24px 48px -20px rgba(18,46,140,0.3); border-color:rgba(43,78,224,0.25); }
  .capability-icon{ width:50px; height:50px; border-radius:14px; background:var(--badge-bg); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
  .capability-icon svg{ width:23px; height:23px; color:var(--blue-primary); }
  .capability-number{ position:absolute; top:30px; right:28px; font-size:13px; font-weight:800; color:var(--line); letter-spacing:0.02em; }
  .capability-card h3{ font-size:18.5px; font-weight:700; letter-spacing:-0.01em; margin:0 0 12px; color:var(--ink); }
  .capability-card p{ font-size:14.5px; line-height:1.65; color:var(--ink-muted); margin:0; }
  @media (max-width:980px){ .capability-grid{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:640px){ .service-intro{ padding-top:50px; padding-bottom:50px; } .capability-grid{ grid-template-columns:1fr; } }

  /* ---- challenge band ---- */
  .challenge-band{ background:var(--bg); padding:50px 24px; }
  .challenge-inner{ max-width:1080px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; background:linear-gradient(120deg, var(--blue-deep) 0%, var(--blue-signal) 140%); border-radius:28px; padding:44px 40px; box-shadow:0 30px 60px -24px rgba(11,31,107,0.5); }
  .challenge-inner span{ display:block; font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.7); margin-bottom:8px; }
  .challenge-inner h2{ font-size:clamp(22px, 2.8vw, 30px); font-weight:800; letter-spacing:-0.01em; color:#fff; margin:0; max-width:560px; }
  .challenge-inner > a{ display:inline-flex; align-items:center; gap:8px; padding:14px 14px; border-radius:12px; background:#fff; color:var(--blue-deep); font-weight:700; font-size:14.5px; white-space:nowrap; transition:transform 0.25s ease, box-shadow 0.25s ease; }
  .challenge-inner > a:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(0,0,0,0.35); }
  @media (max-width:640px){
    .challenge-inner{ padding:32px 32px; }
  }

  /* ---- experience section ---- */
  .experience-section{ padding-top:50px; padding-bottom:50px; display:flex; gap:60px; align-items:flex-start; flex-wrap:wrap; background:#FAFBFF; }
  .experience-copy{ flex:1 1 440px; max-width:560px; }
  .experience-copy h2{ font-size:clamp(26px, 3.4vw, 34px); font-weight:800; letter-spacing:-0.02em; margin:0 0 16px; color:var(--ink); }
  .experience-copy > p{ font-size:15.5px; line-height:1.7; color:var(--ink-muted); margin:0 0 34px; }
  .experience-points{ display:flex; flex-direction:column; gap:20px; }
  .experience-points > div{ display:flex; gap:16px; align-items:flex-start; }
  .experience-points > div > span{ flex-shrink:0; width:36px; height:36px; border-radius:10px; background:var(--badge-bg); color:var(--blue-deep); font-size:12.5px; font-weight:800; display:flex; align-items:center; justify-content:center; }
  .experience-points p{ margin:0; font-size:14.5px; line-height:1.65; color:var(--ink-muted); padding-top:4px; }
  .experience-points strong{ color:var(--ink); }
  .experience-panel{ flex:1 1 380px; max-width:420px; background:linear-gradient(150deg, var(--why-blue-card) 0%, var(--why-blue-card-2) 100%); border-radius:24px; padding:40px 34px; color:#fff; }
  .panel-label{ font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#9DB2FF; margin-bottom:26px; }
  .framework-ring{ display:flex; align-items:center; justify-content:center; margin-bottom:26px; }
  .framework-ring > div{ position:relative; width:190px; height:190px; border-radius:50%; border:1.5px dashed rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; }
  .framework-ring > div::before{
    content:"";
    position:absolute;
    inset:-1.5px;
    border-radius:50%;
    border:1.5px dashed rgba(140,170,255,0.6);
    animation:spin-cw 24s linear infinite;
  }
  .framework-ring > div::after{
    content:"";
    position:absolute;
    top:50%; left:50%;
    width:8px; height:8px;
    margin:-4px 0 0 -4px;
    border-radius:50%;
    background:#8FB3FF;
    box-shadow:0 0 10px 3px rgba(76,124,255,0.7);
    animation:ring-orbit 7s linear infinite;
  }
  @keyframes ring-orbit{
    from{ transform:rotate(0deg) translateX(95px); }
    to{ transform:rotate(360deg) translateX(95px); }
  }
  .framework-ring strong{ position:relative; z-index:2; font-size:15px; font-weight:800; letter-spacing:0.04em; display:inline-block; animation:pulse360 2.6s ease-in-out infinite; }
  .framework-ring span{ position:absolute; z-index:2; font-size:11px; font-weight:600; color:#C6D2FF; background:rgba(255,255,255,0.08); padding:6px 12px; border-radius:999px; white-space:nowrap; animation:pill-glow 3.2s ease-in-out infinite; }
  .framework-ring span:nth-of-type(1){ top:-6px; left:50%; transform:translateX(-50%); }
  .framework-ring span:nth-of-type(2){ right:-18px; top:50%; transform:translateY(-50%); animation-delay:0.8s; }
  .framework-ring span:nth-of-type(3){ bottom:-6px; left:50%; transform:translateX(-50%); animation-delay:1.6s; }
  .framework-ring span:nth-of-type(4){ left:-18px; top:50%; transform:translateY(-50%); animation-delay:2.4s; }
  @keyframes pill-glow{
    0%, 100%{ background:rgba(255,255,255,0.08); color:#C6D2FF; }
    50%{ background:rgba(140,170,255,0.4); color:#fff; }
  }
  .experience-panel > p{ font-size:14px; line-height:1.65; color:rgba(255,255,255,0.75); margin:0; text-align:center; }
  @media (max-width:900px){ .experience-section{ padding-top:50px; padding-bottom:50px; } }
  @media (prefers-reduced-motion: reduce){
    .framework-ring > div::before, .framework-ring > div::after, .framework-ring strong, .framework-ring span{ animation:none; }
  }

  /* ---- industries (dark) ---- */
  .industry-section{ position:relative; padding:50px 0; background:linear-gradient(160deg, var(--why-navy-deep) 0%, var(--why-navy) 55%, #0E2A80 130%); overflow:hidden; }
  .industry-section::before{
    content:"";
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size:56px 56px;
    -webkit-mask-image:radial-gradient(60% 50% at 50% 0%, black 0%, transparent 75%);
            mask-image:radial-gradient(60% 50% at 50% 0%, black 0%, transparent 75%);
    pointer-events:none;
  }
  .industry-section .section-heading h2{ color:var(--why-ink); }
  .industry-section .section-heading p{ color:var(--why-ink-muted); }
  .industry-grid{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(5, 1fr); gap:18px; margin-top:48px; }
  .industry-card{
    position:relative;
    display:flex;
    gap:16px;
    align-items:flex-start;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:18px;
    padding:24px 22px;
    overflow:hidden;
    cursor:pointer;
    transition:transform 0.35s cubic-bezier(.22,.68,.36,1), background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  }
  .industry-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(120px 90px at 15% 0%, rgba(76,124,255,0.22), transparent 70%);
    opacity:0;
    transition:opacity 0.35s ease;
    pointer-events:none;
  }
  .industry-card:hover{
    transform:translateY(-6px);
    background:rgba(255,255,255,0.09);
    border-color:rgba(76,124,255,0.4);
    box-shadow:0 22px 44px -20px rgba(3,10,40,0.7);
  }
  .industry-card:hover::before{ opacity:1; }
  .industry-icon{
    position:relative;
    z-index:1;
    flex-shrink:0;
    width:42px; height:42px;
    border-radius:12px;
    background:rgba(76,124,255,0.16);
    color:#8FB3FF;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background 0.35s ease, color 0.35s ease, transform 0.35s ease;
  }
  .industry-icon svg{ width:20px; height:20px; }
  .industry-card:hover .industry-icon{ background:#4C7CFF; color:#fff; transform:scale(1.08) rotate(-4deg); box-shadow:0 8px 18px -4px rgba(76,124,255,0.6); }
  .industry-card > div{ position:relative; z-index:1; }
  .industry-card h3{ font-size:15px; font-weight:700; color:#fff; margin:0 0 6px; transition:color 0.3s ease; }
  .industry-card p{ font-size:13px; line-height:1.55; color:var(--why-ink-muted); margin:0; transition:color 0.3s ease; }
  .industry-card:hover p{ color:#D4DDFF; }
  @media (max-width:1080px){ .industry-grid{ grid-template-columns:repeat(3, 1fr); } }
  @media (max-width:640px){ .industry-grid{ grid-template-columns:1fr; } .industry-section{ padding:50px 0; } }

  /* ---- technology stack ---- */
  .technology-section{ padding-top:50px; padding-bottom:50px; background:var(--bg); }
  .technology-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
  .tech-card{ text-align:center; background:#FAFBFF; border:1px solid var(--line); border-radius:20px; padding:38px 24px; transition:transform 0.3s ease, box-shadow 0.3s ease; }
  .tech-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px -18px rgba(18,46,140,0.25); }
  .tech-orbit{ width:60px; height:60px; margin:0 auto 20px; border-radius:50%; border:1.5px dashed rgba(43,78,224,0.3); display:flex; align-items:center; justify-content:center; }
  .tech-orbit svg{ width:24px; height:24px; color:var(--blue-signal); filter:drop-shadow(0 0 8px rgba(43,78,224,0.4)); }
  .tech-card h3{ font-size:17px; font-weight:700; color:var(--ink); margin:0 0 10px; }
  .tech-card p{ font-size:14px; line-height:1.6; color:var(--ink-muted); margin:0; }
  @media (max-width:980px){ .technology-grid{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:640px){ .technology-section{ padding-top:50px; padding-bottom:50px; } .technology-grid{ grid-template-columns:1fr; } }

  /* ---- why godigital (services variant, dark) ---- */
  .why-service-section{ position:relative; padding:50px 0; background:linear-gradient(160deg, var(--why-navy-deep) 0%, var(--why-navy) 55%, #0E2A80 130%); overflow:hidden; }
  .why-service-section .section-heading h2{ color:var(--why-ink); }
  .why-service-section .section-heading p{ color:var(--why-ink-muted); }
  .reason-marquee{
    position:relative;
    width:100%;
    overflow:hidden;
    margin-top:48px;
    padding:10px 0;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
  }
  .reason-track{ display:flex; align-items:stretch; gap:20px; width:max-content; animation:reason-scroll 34s linear infinite; }
  .reason-marquee:hover .reason-track{ animation-play-state:paused; }
  @keyframes reason-scroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(calc(-50% - 10px)); }
  }
  .reason-card{ position:relative; flex:0 0 auto; width:250px; background:linear-gradient(150deg, var(--why-blue-card) 0%, var(--why-blue-card-2) 100%); border:1px solid rgba(255,255,255,0.08); border-radius:18px; padding:26px 22px 24px; transition:transform 0.3s ease, box-shadow 0.3s ease; }
  .reason-card:hover{ transform:translateY(-6px); box-shadow:0 22px 40px -18px rgba(3,10,40,0.6); }
  .reason-index{ display:block; font-size:12px; font-weight:800; color:#9DB2FF; letter-spacing:0.05em; margin-bottom:14px; }
  .reason-card h3{ font-size:16px; font-weight:700; color:#fff; margin:0 0 8px; }
  .reason-card p{ font-size:13.5px; line-height:1.6; color:var(--why-ink-muted); margin:0; }
  @media (max-width:640px){ .why-service-section{ padding:50px 0; } .reason-card{ width:220px; } }
  @media (prefers-reduced-motion: reduce){ .reason-track{ animation:none; } }

  /* ---- dedicated team ---- */
  .dedicated-section{ padding-top:50px; padding-bottom:50px; display:flex; gap:60px; flex-wrap:wrap; align-items:center; background:#FAFBFF; }
  .dedicated-main{ flex:1 1 400px; max-width:460px; }
  .dedicated-main h2{ font-size:clamp(26px, 3.2vw, 32px); font-weight:800; letter-spacing:-0.02em; margin:0 0 16px; color:var(--ink); }
  .dedicated-main > p{ font-size:15.5px; line-height:1.7; color:var(--ink-muted); margin:0 0 30px; }
  .dedicated-benefits{ flex:1 1 420px; display:flex; flex-direction:column; gap:20px; }
  .dedicated-benefits article{ display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 22px; transition:transform 0.3s ease, box-shadow 0.3s ease; }
  .dedicated-benefits article:hover{ transform:translateX(4px); box-shadow:0 16px 32px -18px rgba(18,46,140,0.3); }
  .dedicated-benefits article > span{ flex-shrink:0; width:38px; height:38px; border-radius:11px; background:var(--badge-bg); color:var(--blue-deep); font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; }
  .dedicated-benefits h3{ font-size:15.5px; font-weight:700; color:var(--ink); margin:0 0 6px; }
  .dedicated-benefits p{ font-size:13.5px; line-height:1.6; color:var(--ink-muted); margin:0; }
  @media (max-width:900px){ .dedicated-section{ padding-top:50px; padding-bottom:50px; } }

  /* ---- global presence ---- */
  .global-section{ padding:50px 0; background:var(--bg); }
  .global-inner{ display:flex; gap:56px; align-items:center; flex-wrap:wrap; }
  .global-map{ position:relative; flex:1 1 380px; max-width:460px; aspect-ratio:4/3; border-radius:24px; background:linear-gradient(150deg, var(--why-navy-deep) 0%, var(--why-navy) 100%); overflow:hidden; display:flex; align-items:center; justify-content:center; padding:24px; }
  .map-grid{ position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); background-size:36px 36px; }
  .map-dot{ position:absolute; width:8px; height:8px; border-radius:50%; background:#4C7CFF; box-shadow:0 0 12px 3px rgba(76,124,255,0.5); animation:map-dot-pulse 2.4s ease-in-out infinite; }
  .map-dot::before{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:50%;
    border:1.5px solid rgba(76,124,255,0.6);
    animation:map-ping 2.4s ease-out infinite;
  }
  .map-dot.d1{ top:22%; left:28%; }
  .map-dot.d2{ top:38%; left:58%; animation-delay:0.4s; }
  .map-dot.d2::before{ animation-delay:0.4s; }
  .map-dot.d3{ top:60%; left:22%; animation-delay:0.8s; }
  .map-dot.d3::before{ animation-delay:0.8s; }
  .map-dot.d4{ top:68%; left:70%; animation-delay:1.2s; }
  .map-dot.d4::before{ animation-delay:1.2s; }
  .map-dot.d5{ top:30%; left:80%; animation-delay:1.6s; }
  .map-dot.d5::before{ animation-delay:1.6s; }
  .map-dot.d6{ top:78%; left:44%; animation-delay:2s; }
  .map-dot.d6::before{ animation-delay:2s; }
  @keyframes map-dot-pulse{
    0%, 100%{ opacity:0.75; transform:scale(1); }
    50%{ opacity:1; transform:scale(1.25); }
  }
  @keyframes map-ping{
    0%{ transform:scale(0.6); opacity:0.8; }
    100%{ transform:scale(2); opacity:0; }
  }
  .map-route{ position:absolute; height:1px; background:rgba(76,124,255,0.35); transform-origin:left center; overflow:visible; }
  .map-route.r1{ top:28%; left:29%; width:120px; transform:rotate(18deg); }
  .map-route.r2{ top:45%; left:35%; width:150px; transform:rotate(-12deg); }
  .map-route.r3{ top:63%; left:24%; width:170px; transform:rotate(8deg); }
  .map-route::after{
    content:"";
    position:absolute;
    top:50%; left:0;
    width:6px; height:6px;
    margin-top:-3px;
    border-radius:50%;
    background:#B9CBFF;
    box-shadow:0 0 8px 2px rgba(76,124,255,0.8);
    animation:route-travel 3.2s linear infinite;
  }
  .map-route.r2::after{ animation-delay:1s; }
  .map-route.r3::after{ animation-delay:2s; }
  @keyframes route-travel{
    0%{ left:0%; opacity:0; }
    10%{ opacity:1; }
    90%{ opacity:1; }
    100%{ left:100%; opacity:0; }
  }
  .global-map strong{ position:relative; z-index:2; font-size:15px; font-weight:800; letter-spacing:0.1em; color:#fff; text-align:center; line-height:1.5; }
  .global-copy{ flex:1 1 420px; max-width:560px; }
  .global-copy h2{ font-size:clamp(26px, 3.2vw, 32px); font-weight:800; letter-spacing:-0.02em; margin:0 0 16px; color:var(--ink); }
  .global-copy p{ font-size:15px; line-height:1.7; color:var(--ink-muted); margin:0 0 16px; }
  .location-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
  .location-tags span{ padding:8px 16px; border-radius:999px; background:var(--badge-bg); color:var(--blue-deep); font-size:13px; font-weight:600; }
  @media (max-width:900px){ .global-section{ padding:50px 0; } }
  @media (prefers-reduced-motion: reduce){
    .map-dot, .map-dot::before, .map-route::after{ animation:none; }
  }

  /* ---- contact CTA ---- */
  .service-contact{ padding:50px 24px; }
  .service-contact-inner{ max-width:1080px; margin:0 auto; border-radius:28px; padding:48px 46px; background:linear-gradient(150deg, #001F7D 0%, #001F7D 60%, #13358B 100%); display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; box-shadow:0 30px 60px -24px rgba(0,31,125,0.5); }
  .service-contact-inner h2{ font-size:clamp(24px, 3vw, 30px); font-weight:800; letter-spacing:-0.01em; color:#fff; margin:14px 0; max-width:480px; }
  .service-contact-inner > div > p{ font-size:15px; line-height:1.65; color:rgba(255,255,255,0.8); margin:0; max-width:460px; }
  .contact-actions{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
  .contact-actions a{ display:inline-flex; align-items:center; gap:10px; font-size:16px; font-weight:700; color:#fff; padding:14px 24px; border-radius:12px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.16); transition:background 0.25s ease, transform 0.25s ease; }
  .contact-actions a svg{ width:18px; height:18px; flex-shrink:0; }
  .contact-actions a:hover{ background:#fff; color:var(--blue-deep); transform:translateY(-2px); }
  @media (max-width:760px){
    .service-contact-inner{ padding:38px 28px; }
    .contact-actions{ width:100%; }
    .contact-actions a{ text-align:center; }
    .contact-actions:has(.cta){ align-items:center; }
  }
  @media (max-width:480px){
    .contact-actions{ flex-direction:row; align-items:center; justify-content:flex-end; gap:12px; }
    .contact-actions a:not(.cta){ width:48px; height:48px; padding:0; border-radius:50%; justify-content:center; }
    .contact-actions a:not(.cta) span{ display:none; }
    .contact-actions:has(.cta){ justify-content:center; }
  }

  /* =====================================================
     ABOUT US PAGE (aboutus.html)
  ===================================================== */

  /* ---- hero ---- */
  .about-hero{ position:relative; padding:50px 24px 130px; background:linear-gradient(160deg, var(--why-navy-deep) 0%, var(--why-navy) 55%, #0E2A80 130%); overflow:hidden; }
  .about-hero .service-grid-bg{
    -webkit-mask-image:radial-gradient(60% 60% at 50% 20%, black 0%, transparent 75%);
            mask-image:radial-gradient(60% 60% at 50% 20%, black 0%, transparent 75%);
    background-image:
      linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  }
  .about-hero-inner{ position:relative; z-index:2; max-width:760px; margin:0 auto; text-align:center; }
  .about-hero-inner .eyebrow.light{ display:inline-block; margin-bottom:16px; }
  .about-hero-inner h1{ font-size:clamp(30px, 4.4vw, 44px); font-weight:800; line-height:1.2; letter-spacing:-0.02em; color:#fff; margin:0 0 18px; }
  .about-hero-inner p{ font-size:16.5px; line-height:1.7; color:var(--why-ink-muted); margin:0 auto; max-width:560px; }

  /* ---- mission / vision (overlaps hero bottom edge) ---- */
  .about-values{ position:relative; z-index:3; margin-top:-72px; padding-bottom:50px; }
  .value-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:28px; }
  .value-card{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:34px 30px; box-shadow:0 24px 48px -20px rgba(18,46,140,0.28); transition:transform 0.35s cubic-bezier(.22,.68,.36,1), box-shadow 0.35s ease; }
  .value-card:hover{ transform:translateY(-8px); box-shadow:0 30px 60px -20px rgba(18,46,140,0.35); }
  .value-icon{ width:50px; height:50px; border-radius:14px; background:var(--badge-bg); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
  .value-icon svg{ width:23px; height:23px; color:var(--blue-primary); }
  .value-card h3{ font-size:19px; font-weight:700; letter-spacing:-0.01em; margin:0 0 12px; color:var(--ink); }
  .value-card p{ font-size:14.5px; line-height:1.65; color:var(--ink-muted); margin:0; }
  @media (max-width:760px){ .about-hero{ padding-bottom:100px; } .value-grid{ grid-template-columns:1fr; } .about-values{ margin-top:-48px; padding-bottom:50px; } }

  /* ---- team ---- */
  .team-section{ padding-bottom:50px; }
  .team-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
  .team-card{ background:#fff; border:1px solid var(--line); border-radius:20px; text-align:center; padding:36px 24px 30px; transition:transform 0.35s cubic-bezier(.22,.68,.36,1), box-shadow 0.35s ease, border-color 0.35s ease; }
  .team-card:hover{ transform:translateY(-8px); box-shadow:0 24px 48px -20px rgba(18,46,140,0.3); border-color:rgba(43,78,224,0.25); }
  .team-avatar-ring{ width:96px; height:96px; border-radius:50%; background:conic-gradient(from 180deg, #2B4EE0, #7C93F0, #2B4EE0); display:flex; align-items:center; justify-content:center; padding:3px; margin:0 auto 20px; transition:transform 0.35s ease; }
  .team-card:hover .team-avatar-ring{ transform:scale(1.06) rotate(6deg); }
  .team-avatar{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; background:var(--badge-bg); }
  .team-card h3{ font-size:17px; font-weight:700; letter-spacing:-0.01em; margin:0 0 4px; color:var(--ink); }
  .team-card span{ font-size:13px; color:var(--blue-signal); font-weight:600; }
  @media (max-width:900px){ .team-grid{ grid-template-columns:1fr; max-width:340px; margin:0 auto; } }

  /* ---- culture ---- */
  .culture-section{ padding:0 24px 50px; }
  .culture-inner{ max-width:1080px; margin:0 auto; border-radius:28px; padding:48px 46px; background:linear-gradient(150deg, var(--why-navy-deep) 0%, var(--why-navy) 100%); display:flex; gap:48px; flex-wrap:wrap; align-items:center; box-shadow:0 30px 60px -24px rgba(7,18,56,0.5); }
  .culture-copy{ flex:1 1 380px; max-width:460px; }
  .culture-copy .eyebrow.light{ display:inline-block; margin-bottom:14px; }
  .culture-copy h2{ font-size:clamp(24px, 3vw, 30px); font-weight:800; letter-spacing:-0.01em; color:#fff; margin:0 0 16px; }
  .culture-copy p{ font-size:15px; line-height:1.7; color:var(--why-ink-muted); margin:0 0 28px; }
  .culture-copy .secondary-action{ border-color:rgba(255,255,255,0.2); color:#fff; }
  .culture-copy .secondary-action:hover{ background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.4); color:#fff; }
  .culture-tags{ flex:1 1 320px; display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }
  .culture-tag{ display:flex; align-items:center; gap:12px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:14px; padding:16px 18px; transition:background 0.3s ease, transform 0.3s ease, border-color 0.3s ease; }
  .culture-tag:hover{ background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.22); transform:translateY(-3px); }
  .culture-tag svg{ width:20px; height:20px; color:#8FB3FF; flex-shrink:0; }
  .culture-tag span{ font-size:13.5px; font-weight:600; color:#fff; }
  @media (max-width:640px){ .culture-inner{ padding:38px 28px; } .culture-tags{ grid-template-columns:1fr; } }

  /* ---- final CTA ---- */
  .about-cta{ padding:50px 24px; text-align:center; }
  .about-cta-inner{ max-width:640px; margin:0 auto; }
  .about-cta-inner .eyebrow{ display:inline-block; margin-bottom:14px; }
  .about-cta-inner h2{ font-size:clamp(28px, 3.6vw, 38px); font-weight:800; letter-spacing:-0.02em; margin:0 0 14px; color:var(--ink); }
  .about-cta-inner p{ font-size:16px; line-height:1.65; color:var(--ink-muted); margin:0 0 32px; }
  .about-cta-actions{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
  @media (max-width:640px){ .about-cta{ padding:50px 20px; } }

  /* =====================================================
     PORTFOLIO PAGE (portfolio.html)
  ===================================================== */

  /* ---- hero ---- */
  .portfolio-hero{ position:relative; padding-top:50px; padding-bottom:50px; padding-left:24px; padding-right:24px; background:var(--bg); overflow:hidden; }
  .portfolio-hero .service-grid-bg{
    -webkit-mask-image:radial-gradient(55% 65% at 15% 20%, black 0%, transparent 75%);
            mask-image:radial-gradient(55% 65% at 15% 20%, black 0%, transparent 75%);
  }
  .portfolio-hero-inner{ position:relative; z-index:2; max-width:1180px; margin:0 auto; }
  .portfolio-hero-inner h1{ font-size:clamp(32px, 4.6vw, 48px); font-weight:800; letter-spacing:-0.02em; line-height:1.15; color:var(--ink); margin:0 0 16px; }
  .portfolio-hero-inner p{ font-size:16.5px; line-height:1.7; color:var(--ink-muted); margin:0; max-width:620px; }

  /* ---- filter tabs + grid ---- */
  .portfolio-section{ padding-top:50px; padding-bottom:50px; }
  .portfolio-tabs-wrap{ position:relative; margin-bottom:36px; }
  .portfolio-tabs-wrap::after{
    content:"";
    position:absolute;
    top:0; right:0;
    width:36px;
    height:100%;
    background:linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--bg) 85%);
    pointer-events:none;
  }

  .portfolio-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
  .portfolio-card{ background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; transition:transform 0.35s cubic-bezier(.22,.68,.36,1), box-shadow 0.35s ease, border-color 0.35s ease; }
  .portfolio-card:hover{ transform:translateY(-8px); box-shadow:0 24px 48px -20px rgba(18,46,140,0.3); border-color:rgba(43,78,224,0.25); }
  .portfolio-thumb{ display:block; width:100%; height:190px; object-fit:cover; }
  .portfolio-card-body{ padding:26px 24px 28px; }
  .portfolio-category{ display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--blue-signal); margin-bottom:10px; }
  .portfolio-card h3{ font-size:19px; font-weight:700; letter-spacing:-0.01em; margin:0 0 10px; color:var(--ink); }
  .portfolio-card p{ font-size:14.5px; line-height:1.6; color:var(--ink-muted); margin:0 0 18px; }
  .portfolio-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
  .portfolio-tags span{ padding:5px 12px; border-radius:999px; background:var(--badge-bg); color:var(--blue-deep); font-size:12px; font-weight:600; }
  @media (max-width:980px){ .portfolio-grid{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:640px){ .portfolio-grid{ grid-template-columns:1fr; } .portfolio-section{ padding-bottom:50px; } }

  /* ---- CTA ---- */
  .portfolio-cta{ padding-top:0; padding-bottom:50px; padding-left:24px; padding-right:24px; }
  .portfolio-cta-inner{ position:relative; max-width:820px; margin:0 auto; border-radius:32px; padding:56px 40px; text-align:center; overflow:hidden; background:linear-gradient(150deg, var(--blue-deep) 0%, var(--blue-signal) 140%); box-shadow:0 30px 60px -24px rgba(11,31,107,0.5); }
  .portfolio-cta-inner::before{
    content:"";
    position:absolute;
    top:-100px; right:-80px;
    width:260px; height:260px;
    border-radius:50%;
    background:rgba(255,255,255,0.1);
    pointer-events:none;
  }
  .portfolio-cta-inner h2{ position:relative; z-index:2; font-size:clamp(26px, 3.4vw, 36px); font-weight:800; letter-spacing:-0.02em; color:#fff; margin:0 0 16px; }
  .portfolio-cta-inner p{ position:relative; z-index:2; font-size:15.5px; line-height:1.7; color:rgba(255,255,255,0.85); margin:0 auto 30px; max-width:480px; }
  .portfolio-cta-inner .primary-action{ position:relative; z-index:2; background:#fff; color:var(--blue-deep); }
  .portfolio-cta-inner .primary-action:hover{ background:#F2F6FF; color:var(--blue-deep); box-shadow:0 18px 36px -10px rgba(0,0,0,0.35); }
  @media (max-width:640px){ .portfolio-cta-inner{ padding:40px 26px; } }

  /* =====================================================
     CONTACT PAGE (contact.html)
  ===================================================== */

  /* ---- message form (overlaps hero bottom edge) ---- */
  .contact-form-wrap{ position:relative; z-index:3; margin-top:-72px; padding-top:0; padding-bottom:50px; padding-left:24px; padding-right:24px; }
  .contact-form-card{ max-width:640px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:24px; padding:44px 40px; box-shadow:0 30px 60px -24px rgba(18,46,140,0.3); }
  .contact-form-card h2{ font-size:clamp(22px, 2.6vw, 26px); font-weight:800; letter-spacing:-0.01em; color:var(--ink); margin:0 0 8px; }
  .contact-form-card > p{ font-size:14.5px; color:var(--ink-muted); margin:0 0 30px; }
  .form-group{ margin-bottom:20px; }
  .form-group label{ display:block; font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:8px; }
  .form-group input, .form-group textarea{ width:100%; border:1px solid var(--line); border-radius:12px; padding:13px 16px; font-family:'Inter', sans-serif; font-size:14.5px; color:var(--ink); background:#FAFBFF; transition:border-color 0.25s ease, box-shadow 0.25s ease; }
  .form-group input::placeholder, .form-group textarea::placeholder{ color:#9AA3B8; }
  .form-group input:focus, .form-group textarea:focus{ outline:none; border-color:var(--blue-signal); box-shadow:0 0 0 3px rgba(43,78,224,0.12); }
  .form-group textarea{ resize:vertical; min-height:110px; font-family:inherit; }
  .contact-submit{ width:100%; justify-content:center; border:none; cursor:pointer; font-family:inherit; font-size:15px; }
  .contact-form-msg{ margin-top:14px; font-size:13.5px; font-weight:600; color:#1FA35A; text-align:center; opacity:0; height:0; overflow:hidden; transition:opacity 0.3s ease; }
  .contact-form-msg.is-visible{ opacity:1; height:auto; }
  @media (max-width:640px){ .contact-form-wrap{ margin-top:-48px; padding-bottom:50px; } .contact-form-card{ padding:32px 24px; } }

  /* ---- contact info cards ---- */
  .contact-info-section{ padding-top:0; padding-bottom:50px; }
  .contact-info-section .capability-card{ text-align:center; }
  .contact-info-section .capability-icon{ margin-left:auto; margin-right:auto; }
  .contact-info-section .capability-card p a{ color:var(--blue-deep); font-weight:700; text-decoration:none; }
  .contact-info-section .capability-card p a:hover{ color:var(--blue-signal); }
  @media (max-width:640px){ .contact-info-section{ padding-bottom:50px; } }

  /* ---- map placeholder ---- */
  .contact-map-section{ padding-top:0; padding-bottom:50px; }
  .contact-map{ position:relative; max-width:1180px; margin:0 auto; aspect-ratio:16/6; border-radius:24px; overflow:hidden; background:var(--why-navy); box-shadow:0 30px 60px -24px rgba(11,31,107,0.35); }
  .contact-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
  .contact-map-label{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; color:#fff; }
  .contact-map-label svg{ width:32px; height:32px; color:#4C7CFF; }
  .contact-map-label span{ font-size:14px; font-weight:600; letter-spacing:0.02em; }
  @media (max-width:640px){ .contact-map-section{ padding-bottom:50px; } .contact-map{ aspect-ratio:4/3; } }

  /* ---- social row ---- */
  .social-section{ padding-top:0; padding-bottom:50px; text-align:center; }
  .social-marquee{ width:100%; overflow:visible; margin-top:8px; }
  .social-track{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; animation:none; }
  .social-track a[aria-hidden="true"]{ display:none; }
  .social-icon{ width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; transition:transform 0.3s ease, box-shadow 0.3s ease; }
  .social-icon svg{ width:22px; height:22px; }
  .social-icon:hover{ transform:translateY(-4px) scale(1.06); box-shadow:0 14px 26px -10px rgba(18,46,140,0.45); }
  .social-icon.whatsapp{ background:#25D366; }
  .social-icon.website{ background:#2B4EE0; }
  .social-icon.facebook{ background:#1877F2; }
  .social-icon.instagram{ background:linear-gradient(135deg, #F58529, #DD2A7B, #8134AF, #515BD4); }
  .social-icon.youtube{ background:#FF0000; }
  .social-icon.linkedin{ background:#0A66C2; }
  @media (max-width:640px){
    .social-section{ padding-bottom:50px; }
    .social-marquee{
      overflow:hidden;
      -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
              mask-image:linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
    }
    .social-track{ flex-wrap:nowrap; justify-content:flex-start; width:max-content; animation:social-scroll 14s linear infinite; }
    .social-marquee:hover .social-track{ animation-play-state:paused; }
    .social-track a[aria-hidden="true"]{ display:flex; }
  }
  @keyframes social-scroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce){ .social-track{ animation:none !important; } }

  /* =====================================================
     CAREERS PAGE (careers.html)
  ===================================================== */

  /* ---- hero photo ---- */
  .career-hero-photo{ flex:1 1 460px; max-width:560px; }
  .career-hero-photo img{ width:100%; display:block; border-radius:22px; border:1px solid var(--line); box-shadow:0 30px 60px -24px rgba(18,46,140,0.32); object-fit:cover; }

  /* ---- why join grid (4-up) ---- */
  .capability-grid.four-col{ grid-template-columns:repeat(4, 1fr); }
  @media (max-width:980px){ .capability-grid.four-col{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:640px){ .capability-grid.four-col{ grid-template-columns:1fr; } }

  /* ---- open positions ---- */
  .career-openings{ padding-top:0; padding-bottom:50px; }
  .career-search{ position:relative; max-width:600px; margin:0 auto 40px; }
  .career-search svg{ position:absolute; left:18px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--ink-muted); pointer-events:none; }
  .career-search input{ width:100%; border:1px solid var(--line); border-radius:14px; padding:14px 20px 14px 48px; font-family:'Inter', sans-serif; font-size:14.5px; color:var(--ink); background:#FAFBFF; transition:border-color 0.25s ease, box-shadow 0.25s ease; }
  .career-search input::placeholder{ color:#9AA3B8; }
  .career-search input:focus{ outline:none; border-color:var(--blue-signal); box-shadow:0 0 0 3px rgba(43,78,224,0.12); }

  .job-list{ display:flex; flex-direction:column; gap:16px; max-width:820px; margin:0 auto; }
  .job-card{ display:flex; align-items:center; justify-content:space-between; gap:20px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px 28px; transition:transform 0.3s cubic-bezier(.22,.68,.36,1), box-shadow 0.3s ease, border-color 0.3s ease; }
  .job-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -20px rgba(18,46,140,0.28); border-color:rgba(43,78,224,0.25); }
  .job-card-main h3{ font-size:17px; font-weight:700; letter-spacing:-0.01em; color:var(--ink); margin:0 0 12px; }
  .job-tags{ display:flex; gap:8px; flex-wrap:wrap; }
  .job-tags span{ padding:5px 12px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; }
  .job-tags .tag-role{ background:var(--badge-bg); color:var(--badge-text); }
  .job-tags .tag-loc{ background:#F1F3F9; color:var(--ink-muted); border:1px solid var(--line); }
  .job-card-arrow{ flex-shrink:0; width:40px; height:40px; border-radius:50%; background:var(--badge-bg); color:var(--blue-deep); display:flex; align-items:center; justify-content:center; transition:background 0.25s ease, color 0.25s ease; }
  .job-card-arrow svg{ width:16px; height:16px; transition:transform 0.25s ease; }
  .job-card:hover .job-card-arrow{ background:var(--blue-deep); color:#fff; }
  .job-card:hover .job-card-arrow svg{ transform:translateX(3px); }
  .job-empty-msg{ display:none; text-align:center; color:var(--ink-muted); font-size:14.5px; margin-top:8px; }
  .job-empty-msg.is-visible{ display:block; }

  @media (max-width:640px){
    .career-openings{ padding-bottom:50px; }
    .job-card{ padding:20px 22px; }
  }

  /* =====================================================
     APPLY PAGE (apply.html)
  ===================================================== */

  .apply-banner{ background:linear-gradient(120deg, var(--blue-deep) 0%, var(--blue-signal) 140%); padding:50px 24px 26px; }
  .apply-banner-inner{ max-width:720px; margin:0 auto; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
  .apply-banner-text h1{ font-size:clamp(22px, 3vw, 27px); font-weight:800; letter-spacing:-0.01em; color:#fff; margin:0 0 4px; }
  .apply-banner-text p{ font-size:14.5px; font-weight:500; color:rgba(255,255,255,0.82); margin:0; }
  .apply-close{ flex-shrink:0; width:32px; height:32px; display:flex; align-items:center; justify-content:center; color:#fff; opacity:0.85; transition:opacity 0.2s ease, transform 0.2s ease; }
  .apply-close:hover{ opacity:1; transform:scale(1.08); }
  .apply-close svg{ width:20px; height:20px; }

  .apply-wrap{ padding:50px 24px; }
  .apply-inner{ max-width:720px; margin:0 auto; }

  .apply-terms{ text-align:center; font-size:12.5px; color:var(--ink-muted); margin:16px 0 0; }
  .apply-terms a{ color:var(--blue-deep); font-weight:600; text-decoration:underline; }
  .apply-terms a:hover{ color:var(--blue-signal); }

  /* =====================================================
     360° DIGITAL MARKETING PAGE (360.html)
  ===================================================== */
  .marketing360-hero{
    position:relative;
    padding:50px 24px;
    background:var(--bg);
    overflow:hidden;
  }
  .marketing360-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
      linear-gradient(rgba(18,46,140,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(18,46,140,0.05) 1px, transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:radial-gradient(60% 60% at 50% 20%, black 0%, transparent 75%);
            mask-image:radial-gradient(60% 60% at 50% 20%, black 0%, transparent 75%);
    pointer-events:none;
  }

  .marketing360{
    position:relative;
    padding:50px 24px;
    background:var(--bg);
    max-width:1180px;
    margin:0 auto;
  }

  /* ---- hero flex ---- */
  .m360-hero-flex{
    position:relative;
    z-index:2;
    max-width:1180px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:56px;
  }

  /* ---- intro ---- */
  .m360-intro{
    flex:1 1 500px;
    max-width:600px;
  }
  .m360-intro h1{
    font-size:clamp(30px, 4.2vw, 42px);
    font-weight:800;
    letter-spacing:-0.02em;
    line-height:1.15;
    margin:16px 0;
    color:var(--ink);
  }
  .m360-intro > p{
    font-size:16.5px;
    line-height:1.7;
    color:var(--ink-muted);
    max-width:520px;
    margin:0 0 32px;
  }
  .m360-intro .service-hero-actions{
    margin-bottom:24px;
  }
  .m360-intro .service-trust-line{
    display:flex;
    flex-wrap:wrap;
    gap:6px 14px;
    margin-bottom:18px;
  }
  .m360-rating{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:13.5px;
    font-weight:600;
    color:var(--ink);
  }
  .m360-rating strong{ color:var(--blue-deep); }

  /* ---- hero orbit visual ---- */
  .m360-visual{
    flex:1 1 380px;
    max-width:400px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .m360-orbit-wrap{
    position:relative;
    width:100%;
    display:flex;
    justify-content:center;
  }
  .m360-orbit-svg{
    width:100%;
    height:auto;
    max-width:360px;
    overflow:visible;
  }
  .m360-orbit-svg .m360-ring-dashed{
    transform-origin:50% 50%;
    transform-box:fill-box;
    animation:spin-cw 16s linear infinite;
  }
  .m360-orbit-svg .m360-center-badge{
    transform-origin:50% 50%;
    transform-box:fill-box;
    animation:pulse360 2.8s ease-in-out infinite;
  }
  .m360-orbit-svg .m360-node{
    transform-origin:50% 50%;
    transform-box:fill-box;
    transition:transform 0.3s ease;
  }
  .m360-orbit-svg .m360-node:hover{ transform:scale(1.12); }
  .m360-orbit-svg .m360-node circle{ transition:stroke 0.3s ease, fill 0.3s ease; }
  .m360-orbit-svg .m360-node:hover circle{ stroke:var(--blue-signal); }
  .m360-orbit-caption{
    margin-top:18px;
    font-size:12.5px;
    font-weight:600;
    letter-spacing:0.02em;
    color:var(--ink-muted);
    text-align:center;
  }
  .m360-visual .float-card{ animation:floatY 5s ease-in-out infinite; }
  .m360-float-a{ top:6px; left:-12px; }
  .m360-float-b{ bottom:6px; right:-12px; animation-delay:1s; }

  @media (prefers-reduced-motion: reduce){
    .m360-orbit-svg .m360-ring-dashed, .m360-orbit-svg .m360-center-badge, .m360-visual .float-card{ animation:none; }
  }

  @media (max-width:980px){
    .m360-hero-flex{ flex-direction:column; text-align:center; gap:0; }
    .m360-intro{ flex:0 0 auto; max-width:640px; }
    .m360-intro > p{ margin-left:auto; margin-right:auto; }
    .m360-intro .service-hero-actions, .m360-intro .service-trust-line{ justify-content:center; }
    .m360-visual{ flex:0 0 auto; margin-top:12px; }
  }
  @media (max-width:520px){
    .m360-float-a, .m360-float-b{ display:none; }
  }

  /* ---- about ---- */
  .m360-about{
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:56px;
    align-items:start;
    margin-bottom:100px;
  }
  .m360-about-copy h2{
    font-size:clamp(26px, 3.2vw, 32px);
    font-weight:800;
    letter-spacing:-0.02em;
    margin:0 0 16px;
    color:var(--ink);
  }
  .m360-about-copy p{
    font-size:15.5px;
    line-height:1.75;
    color:var(--ink-muted);
    margin:0 0 16px;
  }
  .m360-about-copy p:last-child{ margin-bottom:0; }

  .m360-highlights{
    position:relative;
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    padding:32px 28px;
    box-shadow:0 24px 48px -32px rgba(18,46,140,0.25);
    overflow:hidden;
  }
  .m360-highlights::before{
    content:"";
    position:absolute;
    top:-60px; right:-60px;
    width:160px; height:160px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(43,78,224,0.1) 0%, rgba(43,78,224,0) 70%);
    pointer-events:none;
  }
  .m360-highlights h3{
    position:relative;
    font-size:15px;
    font-weight:700;
    letter-spacing:0.02em;
    text-transform:uppercase;
    color:var(--blue-signal);
    margin:0 0 20px;
  }

  .m360-highlight-list{
    position:relative;
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  .m360-highlight-list li{
    display:flex;
    align-items:center;
    gap:14px;
    font-size:14.5px;
    font-weight:600;
    color:var(--ink);
  }
  .hl-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px; height:38px;
    flex-shrink:0;
    border-radius:11px;
    background:var(--badge-bg);
    color:var(--blue-signal);
    transition:transform 0.3s ease, background 0.3s ease, color 0.3s ease;
  }
  .hl-icon svg{ width:18px; height:18px; }
  .m360-highlight-list li:hover .hl-icon{
    background:var(--blue-deep);
    color:#fff;
    transform:scale(1.08) rotate(-4deg);
  }

  /* ---- checklist (shared) ---- */
  .m360-checklist{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .m360-checklist li{
    position:relative;
    padding-left:30px;
    font-size:14.5px;
    line-height:1.5;
    color:var(--ink-muted);
    font-weight:500;
  }
  .m360-checklist li::before{
    content:"✓";
    position:absolute;
    left:0; top:-1px;
    width:20px; height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--badge-bg);
    color:var(--blue-signal);
    font-size:12px;
    font-weight:800;
  }

  /* ---- what is 360 ---- */
  .m360-what{
    margin-bottom:90px;
  }
  .m360-what .section-heading{ margin-bottom:20px; }
  .m360-what .section-heading.centered{ max-width:960px; }

  /* this page has no homepage scroll-reveal script, so cards must render visible by default */
  .marketing360 .service-card, .marketing360 .section-heading{
    opacity:1;
    transform:none;
  }
  .m360-lead{
    text-align:center;
    max-width:960px;
    margin:0 auto 48px;
    font-size:16px;
    font-weight:600;
    color:var(--ink);
  }
  .m360-what-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    max-width:960px;
    margin:0 auto 44px;
  }
  .m360-panel{
    background:#FAFBFF;
    border:1px solid var(--line);
    border-radius:20px;
    padding:32px 30px;
    transition:transform 0.35s cubic-bezier(.22,.68,.36,1), box-shadow 0.35s ease, border-color 0.35s ease;
  }
  .m360-panel:hover{
    transform:translateY(-6px);
    box-shadow:0 22px 44px -22px rgba(18,46,140,0.3);
    border-color:rgba(43,78,224,0.2);
  }
  .m360-panel-header{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:20px;
  }
  .m360-panel-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px; height:44px;
    flex-shrink:0;
    border-radius:12px;
    background:var(--badge-bg);
    color:var(--blue-signal);
    transition:transform 0.35s ease;
  }
  .m360-panel-icon svg{ width:20px; height:20px; }
  .m360-panel:hover .m360-panel-icon{ transform:scale(1.08) rotate(-4deg); }
  .m360-panel h3{
    font-size:18px;
    font-weight:700;
    letter-spacing:-0.01em;
    margin:0;
    color:var(--ink);
  }
  .m360-panel > p{
    font-size:14.5px;
    line-height:1.6;
    color:var(--ink-muted);
    margin:0 0 18px;
  }

  /* ---- includes icon list ---- */
  .m360-icon-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:13px;
  }
  .m360-icon-list li{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:14px;
    line-height:1.4;
    color:var(--ink-muted);
    font-weight:500;
  }
  .m360-icon-list .hl-icon{ width:32px; height:32px; border-radius:9px; }
  .m360-icon-list .hl-icon svg{ width:15px; height:15px; }

  /* ---- accent (dark) panel variant ---- */
  .m360-panel.m360-panel-accent{
    background:linear-gradient(150deg, var(--why-blue-card) 0%, var(--why-blue-card-2) 100%);
    border-color:transparent;
  }
  .m360-panel-accent:hover{
    box-shadow:0 26px 50px -20px rgba(11,20,60,0.55);
  }
  .m360-panel-accent h3{ color:#fff; }
  .m360-panel-accent > p{ color:rgba(255,255,255,0.75); }
  .m360-panel-accent .m360-panel-icon{
    background:rgba(255,255,255,0.14);
    color:#fff;
  }
  .m360-panel-accent .m360-checklist li{ color:rgba(255,255,255,0.88); }
  .m360-panel-accent .m360-checklist li::before{
    background:rgba(255,255,255,0.16);
    color:#fff;
  }
  .m360-outcome{
    max-width:720px;
    margin:0 auto;
    text-align:center;
    font-size:18px;
    font-weight:700;
    letter-spacing:-0.01em;
    line-height:1.5;
    color:var(--blue-deep);
    background:var(--badge-bg);
    border-radius:18px;
    padding:26px 32px;
  }

  /* ---- bottom CTAs ---- */
  .m360-bottom-cta{
    text-align:center;
    margin-top:56px;
  }
  .m360-bottom-cta h3{
    font-size:clamp(22px, 2.6vw, 28px);
    font-weight:800;
    letter-spacing:-0.02em;
    margin:0 0 22px;
    color:var(--ink);
  }
  .m360-closing{
    text-align:center;
    margin-top:90px;
    padding-top:30px;
    border-top:1px solid var(--line);
  }
  .m360-tagline{
    font-size:clamp(20px, 2.4vw, 26px);
    font-weight:800;
    letter-spacing:-0.01em;
    color:var(--ink);
    margin:0 0 24px;
  }

  @media (max-width:980px){
    .m360-about{ grid-template-columns:1fr; gap:40px; }
    .m360-what-grid{ grid-template-columns:1fr; }
  }
  @media (max-width:640px){
    .marketing360-hero{ padding:50px 20px; }
    .marketing360{ padding:50px 20px; }
    .m360-intro .service-hero-actions{ flex-direction:column; align-items:stretch; }
    .m360-intro .service-hero-actions .cta, .m360-intro .service-hero-actions .secondary-action{ justify-content:center; text-align:center; }
    .m360-panel{ padding:26px 22px; }
    .m360-outcome{ padding:22px 20px; font-size:16px; }
  }

  .apply-form .form-group select{ width:100%; border:1px solid var(--line); border-radius:12px; padding:13px 42px 13px 16px; font-family:'Inter', sans-serif; font-size:14.5px; color:var(--ink); background:#FAFBFF; appearance:none; -webkit-appearance:none; cursor:pointer; transition:border-color 0.25s ease, box-shadow 0.25s ease; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px; }
  .apply-form .form-group select:focus{ outline:none; border-color:var(--blue-signal); box-shadow:0 0 0 3px rgba(43,78,224,0.12); }
  .apply-form .form-group select:invalid{ color:#9AA3B8; }
  #applyRoleGroup.is-hidden{ display:none; }

  .upload-dropzone{ border:2px dashed var(--line); border-radius:16px; padding:36px 24px; text-align:center; cursor:pointer; transition:border-color 0.25s ease, background 0.25s ease; }
  .upload-dropzone:hover, .upload-dropzone.is-dragover{ border-color:var(--blue-signal); background:var(--badge-bg); }
  .upload-icon{ width:48px; height:48px; border-radius:50%; background:var(--badge-bg); color:var(--blue-deep); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
  .upload-icon svg{ width:22px; height:22px; }
  .upload-dropzone strong{ display:block; font-size:14.5px; font-weight:700; color:var(--ink); margin-bottom:6px; }
  .upload-dropzone span{ display:block; font-size:12.5px; color:var(--ink-muted); }
  .upload-filename{ margin-top:10px; font-weight:600; color:var(--blue-deep); }

  .apply-submit{ width:100%; justify-content:center; border:none; cursor:pointer; font-family:inherit; font-size:15px; text-transform:none; }
  .apply-submit svg{ width:16px; height:16px; flex-shrink:0; }
  .apply-form .contact-form-msg{ margin-top:14px; }

  @media (max-width:640px){
    .apply-wrap{ padding:50px 20px; }
    .upload-dropzone{ padding:28px 18px; }
  }