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

    :root {
      --heading:  'Inter', sans-serif;
      --body:     'Inter', sans-serif;

      --hero-bg:  #858e9a;
      --hero-mid: #6e7a92;
      --navy:     #4a5468;
      --teal:     #9890b8;
      --white:    #ffffff;
      --off:      #f4f2f8;
      --light:    #ffffff;
      --border:   #dcdce8;
      --text:     #2a2a3a;
      --muted:    #5a5a72;
    }

    html { scroll-behavior: smooth; }

    /* USE CASES: hidden while use-cases.html is in progress.
       To publish, set useCasesEnabled: true in js/site-config.js */
    .use-cases-off .use-cases-nav,
    .use-cases-off .use-cases-banner {
      display: none !important;
    }

    body {
      font-family: var(--heading);
      color: var(--text);
      background: var(--white);
      overflow-x: hidden;
    }

    /* ── ANIMATIONS ── */
    @keyframes fadeUp   { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
    @keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
    @keyframes lineH    { from { transform:scaleX(0); } to { transform:scaleX(1); } }
    @keyframes lineV    { from { transform:scaleY(0); } to { transform:scaleY(1); } }
    @keyframes drift    { 0%,100% { transform:translateY(0px) rotate(0deg); } 50% { transform:translateY(-12px) rotate(1deg); } }

    .hero-content h1   { animation: fadeUp 1.1s cubic-bezier(.16,1,.3,1) .15s both; }
    .hero-eyebrow      { animation: fadeUp 1.1s cubic-bezier(.16,1,.3,1) .05s both; }
    .hero-content p    { animation: fadeUp 1.1s cubic-bezier(.16,1,.3,1) .35s both; }
    .hero-actions      { animation: fadeUp 1.1s cubic-bezier(.16,1,.3,1) .52s both; }
    .hero-scroll       { animation: fadeIn 1.2s ease 1.4s both; }
    .nav-inner         { animation: fadeIn .9s ease .1s both; }

    .hero-graphic      { animation: drift 7s ease-in-out infinite; }

    .reveal { opacity:1; transform:none; }
    .reveal.on { opacity:1; transform:none; }
    .reveal-stagger > * { opacity:1; transform:none; }


    /* ── NAV ── */
    nav {
      position: fixed; top:0; left:0; right:0; z-index:100;
      padding: 0 6%;
      background: rgba(255,255,255,.28);
      backdrop-filter: blur(12px);
      transition: background .35s, backdrop-filter .35s, box-shadow .35s;
    }
    nav.scrolled {
      background: rgba(58,66,84,.97);
      backdrop-filter: blur(14px);
      box-shadow: 0 1px 0 rgba(255,255,255,.08);
    }
    .nav-inner {
      display:flex; align-items:center; justify-content:space-between;
      height: 72px;
      border-bottom: 1px solid rgba(255,255,255,.10);
    }
    nav.scrolled .nav-inner { border-bottom-color: transparent; }

    .nav-logo {
      font-family: var(--heading);
      font-size: 1.15rem; font-weight: 600;
      letter-spacing: .16em; text-transform: uppercase;
      color: var(--white); text-decoration: none;
    }
    .nav-logo span { color: #c4bce0; }

    .nav-links { display:flex; gap:36px; list-style:none; }
    .nav-links a {
      font-family: var(--heading);
      font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
      color: rgba(255,255,255,.7); text-decoration:none;
      transition: color .2s;
    }
    .nav-links a:hover { color: var(--white); }

    .nav-cta {
      font-family: var(--heading);
      font-size: .72rem; font-weight: 600; letter-spacing: .12em;
      padding: 10px 22px;
      border: 1px solid rgba(255,255,255,.45);
      border-radius: 2px;
      color: var(--white); text-decoration:none;
      transition: background .2s, border-color .2s;
    }
    .nav-cta:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.8); }

    /* ── HERO ── */
    .hero {
      position: relative;
      min-height: 51vh;
      max-height: 580px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: linear-gradient(to right, #6a7280 0%, #555f72 35%, #706e8e 75%, #7e7898 100%);
      text-align: center;
    }

    /* subtle grid texture */
    .hero::before {
      content:'';
      position:absolute; inset:0;
      background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events:none;
    }

    .hero-left {
      position:relative; z-index:2;
      padding: 72px 8% 52px;
      max-width: 1100px;
      width: 100%;
    }

    .hero-eyebrow {
      font-family: var(--heading);
      font-size: .82rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
      color: rgba(255,255,255,.7);
      display:flex; align-items:center; justify-content:center; gap:14px;
      margin-bottom: 28px;
    }
    .hero-eyebrow::before {
      content:'';
      display:block; width:32px; height:1px;
      background: var(--teal);
    }
    .hero-eyebrow::after {
      content:'';
      display:block; width:32px; height:1px;
      background: var(--teal);
    }

    .hero-left h1 {
      font-family: var(--heading);
      font-size: clamp(2.8rem, 5vw, 4.8rem);
      font-weight: 700;
      color: var(--white);
      line-height: 1.08;
      letter-spacing: .01em;
      margin-bottom: 24px;
    }
    .hero-left h1 strong {
      font-style: normal;
      color: rgba(255,255,255,.55);
      font-weight: 300;
      display: inline;
    }

    .hero-content p {
      font-family: var(--heading);
      font-size: 1.1rem; font-weight: 300; letter-spacing: .08em;
      color: rgba(255,255,255,.8);
      line-height: 1.9;
      white-space: nowrap;
      margin: 0 auto 44px;
    }

    .hero-actions { display:flex; align-items:center; justify-content:center; gap:28px; }

    .btn-primary {
      font-family: var(--heading);
      font-size: .75rem; font-weight: 600; letter-spacing: .14em;
      padding: 15px 34px;
      background: transparent;
      color: var(--white);
      border: 1.5px solid rgba(255,255,255,0.8); border-radius: 50px;
      text-decoration:none; cursor:pointer;
      transition: background .25s, color .25s;
    }
    .btn-primary:hover { background: rgba(255,255,255,0.12); }

    .btn-ghost {
      font-family: var(--heading);
      font-size: .75rem; font-weight: 500; letter-spacing: .12em;
      color: rgba(255,255,255,.75);
      text-decoration:none;
      display:flex; align-items:center; gap:8px;
      transition: color .2s;
    }
    .btn-ghost::after { content:'→'; transition: transform .2s; }
    .btn-ghost:hover { color:var(--white); }
    .btn-ghost:hover::after { transform:translateX(4px); }

    .hero-right { display:none; }

    .hero-graphic {
      width: 100%; max-width: 460px;
    }

    /* scroll indicator */
    .hero-scroll {
      position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
      z-index:3; animation: fadeIn 1.2s ease 1.4s both;
    }
    .scroll-chevron {
      width:32px; height:20px;
      animation: chevronBounce 1.6s ease-in-out infinite;
    }
    .scroll-chevron svg { width:100%; height:100%; display:block; }
    @keyframes chevronBounce {
      0%, 100% { transform:translateY(0); opacity:.5; }
      50%       { transform:translateY(7px); opacity:1; }
    }

    /* ── MARQUEE ── */
    .marquee-wrap {
      background: linear-gradient(to bottom, #f8f7fc 0%, #eaebef 40%, #d8dae0 100%);
      padding: 28px 6% 32px;
    }
    .marquee-label {
      text-align: center;
      font-family: var(--heading);
      font-size: .65rem; font-weight: 600;
      letter-spacing: .22em; text-transform: uppercase;
      color: #6a6880 !important;
      margin-bottom: 16px;
    }
    .divider-row {
      display: flex; align-items: center;
      justify-content: center; flex-wrap: wrap;
      gap: 10px;
    }
    .divider-item {
      font-family: var(--heading);
      font-size: .72rem; font-weight: 600;
      letter-spacing: .1em; text-transform: uppercase;
      color: #4a5468 !important;
      padding: 7px 18px;
      border: 1px solid rgba(110,122,146,.3);
      border-radius: 50px;
      background: rgba(110,122,146,.15);
      backdrop-filter: blur(4px);
      transition: background .2s, border-color .2s;
    }
    .divider-item:hover {
      background: rgba(110,122,146,.28);
      border-color: rgba(74,84,104,.4);
    }

    /* ── SECTION SHELL ── */
    section { padding: 120px 10%; }

    .eyebrow {
      font-family:var(--heading); font-size:.68rem; font-weight:500; letter-spacing:.22em;
      text-transform:uppercase; color:#4a5468;
      display:flex; align-items:center; gap:14px;
      margin-bottom: 20px;
    }
    .eyebrow::before {
      content:''; display:block;
      width:24px; height:1px; background:#9890b8;
    }

    .section-title {
      font-family:var(--heading);
      font-size: clamp(2rem, 3.5vw, 3rem);
      font-weight:600; letter-spacing:.02em;
      line-height:1.15; color:var(--text);
    }

    /* ── ABOUT ── */
    .about { background:#ffffff; }

    .about-inner {
      display:grid; grid-template-columns:1fr 1fr;
      gap:100px; align-items:center;
      max-width:1100px; margin:0 auto;
    }

    .about-left .section-title { margin-bottom:28px; }

    .about-left p {
      font-size:1.2rem; font-weight:300; line-height:1.9;
      color:var(--muted); margin-bottom:20px;
    }

    .about-stat-row {
      display:grid; grid-template-columns:1fr 1fr;
      gap:1px; background:var(--border);
      border:1px solid var(--border);
      margin-top:44px;
    }
    .about-stat {
      background:var(--white);
      border: 1px solid var(--border);
      padding:28px 24px;
    }
    .about-stat .num {
      font-family:var(--heading);
      font-size:2.4rem; font-weight:700;
      color:#2a2a3a; line-height:1;
      margin-bottom:6px;
    }
    .about-stat .num span { color:#9890b8; }
    .about-stat .label {
      font-family:var(--heading);
      font-size:.68rem; font-weight:500; letter-spacing:.14em;
      text-transform:uppercase; color:var(--muted);
    }

    .about-right {
      position:relative;
    }
    .about-graphic-wrap {
      position:relative;
      background:var(--white);
      border:1px solid var(--border);
      padding:48px;
      display:flex; align-items:center; justify-content:center;
    }
    .about-graphic-wrap::before {
      content:'';
      position:absolute; top:-1px; left:40px; right:40px; height:2px;
      background:#9890b8;
    }

    /* ── SERVICES ── */





    .svc-card {
      position:relative; overflow:hidden;
      transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
      cursor:pointer;
    }
    .svc-card:hover { transform:translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.22); }

    .svc-card .svc-num {
      font-family:var(--heading); font-size:.65rem; font-weight:600;
      letter-spacing:.14em; color:#9890b8;
      margin-bottom:28px; display:block;
    }
    .svc-card h3 {
      font-family:var(--heading);
      font-size:1.25rem; font-weight:700;
      letter-spacing:.03em; margin-bottom:14px;
      color:#ffffff !important;
    }
    .svc-card p {
      font-size:1.05rem; font-weight:300; line-height:1.85;
      color:rgba(255,255,255,.75) !important;
    }

    .svc-card .svc-arrow {
      display:inline-block; margin-top:24px;
      font-family:var(--heading); font-size:.68rem;
      letter-spacing:.12em; color:#9890b8;
      opacity:0; transform:translateX(-6px);
      transition: opacity .25s, transform .25s;
    }
    .svc-card:hover .svc-arrow { opacity:1; transform:translateX(0); }

    /* ── HOW ── */
    .how { background:#f4f2f8; }
    .howsteps { background:#f8f7fc; padding:48px 8%; }
    .howsteps .section-title { color:var(--text) !important; }
    .howsteps .how-head { margin-bottom:48px; }
    .howsteps .section-title { color:#ffffff !important; }
    .howsteps h3 { color:#ffffff !important; }
    .howsteps p { color:rgba(255,255,255,.65) !important; }
    .howsteps em { color:rgba(255,255,255,.6) !important; font-weight:300; }
    .howsteps .how-inner {
      position:relative; overflow:hidden;
      max-width:1200px; margin:0 auto;
      border-radius:20px;
      padding:72px 72px 64px;
      border:1px solid rgba(255,255,255,.1);
      background:
        radial-gradient(ellipse 100% 70% at 20% 8%, rgba(255,255,255,.06) 0%, transparent 48%),
        radial-gradient(ellipse 90% 55% at 80% 92%, rgba(85,95,114,.4) 0%, transparent 52%),
        linear-gradient(155deg,
          #6a7280 0%,
          #555f72 32%,
          #5e6674 55%,
          #586272 78%,
          #525c6a 100%);
      box-shadow:
        0 6px 28px rgba(85,95,114,.2),
        0 1px 4px rgba(0,0,0,.06),
        inset 0 1px 0 rgba(255,255,255,.06);
    }
    .howsteps .how-inner::before {
      content:''; position:absolute; left:8%; right:8%; top:36%;
      height:1px; pointer-events:none;
      background:linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,.07) 40%,
        rgba(255,255,255,.1) 50%,
        rgba(255,255,255,.07) 60%,
        transparent 100%);
    }
    .howsteps .how-inner::after {
      content:''; position:absolute; inset:0; border-radius:inherit;
      pointer-events:none;
      background:radial-gradient(ellipse 120% 45% at 50% 100%,
        rgba(85,95,114,.35) 0%, transparent 55%);
    }
    .howsteps .how-top,
    .howsteps .how-cols { position:relative; z-index:1; }

    .how-inner { max-width:1100px; margin:0 auto; }
    .how-head  { margin-bottom:72px; }

    .how-steps {
      display:grid; grid-template-columns:repeat(4,1fr);
      position:relative;
    }
    .how-steps::before {
      content:''; position:absolute;
      top:21px; left:calc(12.5% + 20px); right:calc(12.5% + 20px);
      height:1px; background:var(--border);
    }

    .how-step { padding:0 20px 0 0; }

    .step-dot {
      width:42px; height:42px; border-radius:50%;
      border:1px solid var(--border);
      background:#ffffff;
      display:flex; align-items:center; justify-content:center;
      margin-bottom:28px; position:relative; z-index:1;
      transition: border-color .25s, background .25s;
    }
    .step-dot span {
      font-family:var(--heading); font-size:.68rem; font-weight:600;
      letter-spacing:.08em; color:var(--muted);
      transition: color .25s;
    }
    .how-step:hover .step-dot {
      border-color:#9890b8; background:#9890b8;
    }
    .how-step:hover .step-dot span { color:#ffffff; }

    .how-step h3 {
      font-family:var(--heading);
      font-size:1.1rem; font-weight:600;
      letter-spacing:.03em; margin-bottom:10px;
      color:#2a2a3a;
    }
    .how-step p {
      font-size:1rem; font-weight:300; line-height:1.85; color:#5a5a72;
    }

    /* ── WELCOME ── */
    .welcome {
      background:#4a5468;
      text-align:center; padding:140px 10%;
    }
    .welcome .eyebrow { justify-content:center; }
    .welcome .eyebrow::before { background:rgba(92,207,200,.5); }
    .welcome .section-title { color:var(--white); margin:0 auto 24px; max-width:640px; }
    .welcome p {
      font-size:1.2rem; font-weight:300; line-height:1.9;
      color:rgba(255,255,255,.55);
      max-width:560px; margin:0 auto 48px;
    }
    .btn-outline-light {
      display:inline-block;
      font-family:var(--heading); font-size:.75rem; font-weight:600; letter-spacing:.14em;
      padding:14px 36px;
      border:1px solid rgba(255,255,255,.3); border-radius:2px;
      color:rgba(255,255,255,.8); text-decoration:none;
      transition:border-color .2s, color .2s;
    }
    .btn-outline-light:hover { border-color:var(--white); color:var(--white); }

    /* ── CONTACT (split immersive — option C) ── */
    .contact { background:#f8f7fc; padding:80px 10%; }

    .contact-panel {
      max-width:1100px; margin:0 auto;
      display:grid; grid-template-columns:1fr 1fr;
      background:linear-gradient(135deg, #5a6478 0%, #4a5468 40%, #3b2441 100%);
      border-radius:20px; overflow:hidden;
      box-shadow:0 12px 48px rgba(58,66,84,.28);
    }

    .contact-left { padding:56px 48px; }
    .contact-pill {
      display:inline-block; font-family:var(--heading);
      font-size:.58rem; font-weight:600; letter-spacing:.12em;
      text-transform:uppercase; padding:6px 12px; border-radius:999px;
      margin-bottom:20px;
      background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
      color:rgba(255,255,255,.8);
    }
    .contact-left .section-title {
      color:#fff; margin-bottom:16px;
    }
    .contact-left > p {
      font-size:1.05rem; font-weight:300; line-height:1.85;
      color:rgba(255,255,255,.75); margin-bottom:36px;
    }
    .contact-detail { display:flex; flex-direction:column; gap:14px; }
    .contact-detail-item { display:block; }
    .contact-detail-item .cd-label {
      font-family:var(--heading); font-size:.62rem; font-weight:600;
      letter-spacing:.14em; text-transform:uppercase;
      color:rgba(255,255,255,.45); display:block; margin-bottom:4px;
    }
    .contact-detail-item a {
      font-size:1rem; font-weight:400; color:rgba(255,255,255,.88);
      text-decoration:none; transition:color .2s;
    }
    .contact-detail-item a:hover { color:#fff; }

    .contact-form-wrap {
      background:#fff; padding:48px 40px;
      border-radius:20px 0 0 20px;
      box-shadow:-8px 0 32px rgba(0,0,0,.12);
      align-self:stretch; display:flex; flex-direction:column; justify-content:center;
    }

    .form-row { margin-bottom:0; }
    .form-field {
      background:#f8f7fc; border:1px solid var(--border);
      border-radius:10px; padding:14px 16px; margin-bottom:12px;
      transition:border-color .2s, box-shadow .2s;
    }
    .form-field:focus-within {
      border-color:#9890b8;
      box-shadow:0 0 0 3px rgba(152,144,184,.15);
    }

    .form-field input,
    .form-field textarea {
      width:100%; border:none; outline:none;
      font-family:var(--heading); font-size:1rem; font-weight:300;
      color:var(--text); background:transparent;
      letter-spacing:.02em; resize:none;
    }
    .form-field input::placeholder,
    .form-field textarea::placeholder { color:#aaa; }
    .form-field textarea { min-height:108px; }

    .btn-submit {
      margin-top:8px; width:100%;
      font-family:var(--heading); font-size:.75rem; font-weight:600;
      letter-spacing:.12em; padding:16px; cursor:pointer;
      background:#4a5468; color:#fff;
      border:none; border-radius:8px;
      transition:background .25s;
    }
    .btn-submit:hover { background:#998fb7; }

    .form-note {
      margin-top:14px; font-family:var(--heading); font-weight:400;
      font-size:.66rem; letter-spacing:.06em; color:#aaa;
      text-align:center; line-height:1.7;
    }
    .form-note a { color:#9890b8; }

    @media (max-width:768px) {
      .contact-panel { grid-template-columns:1fr; }
      .contact-left { padding:40px 28px 32px; }
      .contact-form-wrap {
        border-radius:0 0 20px 20px;
        box-shadow:0 -4px 24px rgba(0,0,0,.08);
        padding:36px 28px;
      }
    }

    /* ── FOOTER ── */
    footer {
      background:var(--navy);
      border-top:1px solid rgba(255,255,255,.06);
    }

    .footer-top {
      display:grid; grid-template-columns:2fr 1fr 1fr;
      gap:60px; padding:64px 10% 48px;
      border-bottom:1px solid rgba(255,255,255,.06);
    }

    .footer-brand .nav-logo { display:block; margin-bottom:18px; }
    .footer-brand p {
      font-size:1rem; font-weight:300; line-height:1.85;
      color:rgba(255,255,255,.35); max-width:280px;
    }

    .footer-col h4 {
      font-family:var(--heading); font-size:.64rem; font-weight:600; letter-spacing:.2em;
      text-transform:uppercase; color:rgba(255,255,255,.3);
      margin-bottom:20px;
    }
    .footer-col ul { list-style:none; display:flex; flex-direction:column; gap:12px; }
    .footer-col ul a {
      font-size:1rem; font-weight:300;
      color:rgba(255,255,255,.5); text-decoration:none;
      transition:color .2s;
    }
    .footer-col ul a:hover { color:var(--white); }

    .footer-bottom {
      display:flex; justify-content:space-between; align-items:center;
      padding:22px 10%;
    }
    .footer-bottom p {
      font-family:var(--heading); font-size:.65rem; letter-spacing:.08em;
      color:rgba(255,255,255,.25);
    }
    .footer-social { display:flex; gap:22px; }
    .footer-social a {
      font-family:var(--heading); font-size:.65rem; letter-spacing:.1em;
      color:rgba(255,255,255,.3); text-decoration:none; transition:color .2s;
    }
    .footer-social a:hover { color:var(--teal); }

    /* ── RESPONSIVE ── */
    @media (max-width: 960px) {
      section { padding:90px 6%; }
      .hero { grid-template-columns:1fr; }
      .hero-right { display:none; }
      .hero-left { padding:140px 6% 80px; }
      .about-inner { grid-template-columns:1fr; gap:56px; }
      .about-right { display:none; }
      .services-head { flex-direction:column; align-items:flex-start; gap:16px; }
      .services-head p { text-align:left; }
      .services-grid { grid-template-columns:1fr 1fr; }
      .how-steps { grid-template-columns:1fr 1fr; gap:48px; }
      .how-steps::before { display:none; }
      .contact-panel { grid-template-columns:1fr; }
      .footer-top { grid-template-columns:1fr 1fr; }
      .footer-brand { grid-column:1/-1; }
    }

    @media (max-width: 600px) {
      nav .nav-links, nav .nav-cta { display:none; }
      .services-grid { grid-template-columns:1fr; }
      .how-steps { grid-template-columns:1fr; }
      .about-stat-row { grid-template-columns:1fr; }
      .footer-top { grid-template-columns:1fr; }
      .footer-bottom { flex-direction:column; gap:10px; text-align:center; }
    }

    /* ── APPROACH PILLARS ── */
    .how-sub { display:none; }
    .how-head .section-title em {
      font-style:italic;
      color:rgba(255,255,255,.55); font-weight:300;
      font-family:var(--heading);
    }
    .approach-pillars {
      display:grid; grid-template-columns:repeat(3,1fr);
      gap:40px; margin-top:48px;
      padding-top:36px;
    }
    .approach-pillar { display:flex; flex-direction:column; gap:16px; }
    .pillar-icon {
      width:28px; height:28px; color:#9890b8; flex-shrink:0;
    }
    .pillar-num { display:none; }
    .approach-pillar h3 {
      font-family:var(--heading); font-size:1.5rem; font-weight:700;
      color:var(--text); letter-spacing:.02em;
    }
    .approach-pillar p {
      font-family:var(--heading); font-size:1.15rem; font-weight:300;
      line-height:1.9; color:var(--muted);
    }
    .how-divider {
      height:1px; background:var(--border); margin:72px 0 0;
    }

    /* ── VISUALIZER ── */
    .visualizer { background:#f8f7fc; padding:48px 3% 80px; }
    .visualizer .section-title { color:#ffffff !important; }
    .visualizer .eyebrow { color:rgba(255,255,255,.6) !important; }
    .visualizer .eyebrow::before { background:rgba(255,255,255,.6) !important; }
    .viz-col-label { color:rgba(255,255,255,.8) !important; letter-spacing:.14em; font-size:.62rem; margin-bottom:12px; display:block; min-height:20px; }
    .visualizer-inner {
      max-width:100%; margin:0 auto;
      background:linear-gradient(to right, #6a7280 0%, #555f72 35%, #706e8e 75%, #7e7898 100%);
      border-radius:24px;
      padding:80px 72px;
      box-shadow: 0 12px 60px rgba(0,0,0,0.18), 0 2px 12px rgba(0,0,0,0.10);
    }
    .viz-sub {
      font-size:1.1rem; font-weight:300; line-height:1.9;
      color:rgba(255,255,255,.9); max-width:520px; margin-top:14px;
    }
    .viz-wrap {
      display:grid; grid-template-columns:220px 1fr 240px;
      gap:32px; margin-top:0; align-items:start;
    }
    .viz-left { display:flex; flex-direction:column; }
    .viz-right { display:flex; flex-direction:column; }
    .viz-col-label {
      font-family:var(--heading); font-size:.65rem; font-weight:600;
      letter-spacing:.18em; text-transform:uppercase;
      color:var(--muted); margin-bottom:14px;
    }
    .sys-grid { display:flex; flex-direction:column; gap:8px; }
    .sys-btn {
      font-family:var(--heading); font-size:.75rem; font-weight:500;
      letter-spacing:.06em; padding:10px 16px;
      background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
      border-radius:8px; color:rgba(255,255,255,.85); cursor:pointer;
      text-align:left; transition:all .2s;
    }
    .sys-btn:hover { border-color:rgba(255,255,255,.5); color:#fff; }
    .sys-btn.active {
      background:rgba(255,255,255,.25); border-color:rgba(255,255,255,.7);
      color:#fff;
    }
    .viz-canvas {
      position:relative; height:420px;
      background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
      border-radius:12px;
      overflow:hidden;
      box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    }
    .hub-ring {
      width:96px; height:96px; border-radius:50%;
      border:1.5px solid rgba(255,255,255,.5);
      display:flex; align-items:center; justify-content:center;
      position:absolute; left:50%; top:50%;
      transform:translate(-50%,-50%);
      z-index:10;
      background:rgba(100,110,130,.85);
      backdrop-filter:blur(4px);
      box-shadow: 0 0 0 12px rgba(100,110,130,.3);
      transition: box-shadow .35s ease, border-color .35s ease;
    }
    .hub-ring.active {
      border-color:rgba(255,255,255,.9);
      box-shadow: 0 0 0 12px rgba(100,110,130,.3), 0 4px 24px rgba(255,255,255,.25);
    }
    @keyframes hubPulseAnim {
      0%   { transform:translate(-50%,-50%) scale(1); }
      40%  { transform:translate(-50%,-50%) scale(1.08); }
      100% { transform:translate(-50%,-50%) scale(1); }
    }
    .hub-ring.pulse { animation: hubPulseAnim .5s ease; }
    .hub-core {
      text-align:center;
    }
    .hub-core span {
      font-family:var(--heading); font-size:.72rem; font-weight:700;
      letter-spacing:.08em; color:#fff; display:block;
    }
    .hub-core small {
      font-family:var(--heading); font-size:.58rem; font-weight:500;
      letter-spacing:.06em; color:rgba(255,255,255,.6); display:block; margin-top:2px;
    }
    .viz-lines {
      position:absolute; inset:0; z-index:1; pointer-events:none;
    }
    .viz-nodes { position:absolute; inset:0; z-index:3; pointer-events:none; }
    .viz-node {
      position:absolute; transform:translate(-50%,-50%);
      background:rgba(255,255,255,.35); border:1px solid rgba(255,255,255,.2);
      border-radius:8px; padding:7px 14px;
      font-family:var(--heading); font-size:.68rem; font-weight:600;
      letter-spacing:.04em; color:rgba(255,255,255,.5);
      white-space:nowrap;
      transition: all .35s ease;
      animation: nodeIn .3s ease both;
    }
    .viz-node.active {
      background:rgba(255,255,255,.97); border-color:rgba(255,255,255,.9);
      color:#1a1a2e;
      box-shadow: 0 4px 20px rgba(255,255,255,.2);
      transform:translate(-50%,-50%) scale(1.08);
    }
    @keyframes nodeIn {
      from { opacity:0; transform:translate(-50%,-50%) scale(.8); }
      to { opacity:1; transform:translate(-50%,-50%) scale(1); }
    }
    .viz-empty {
      position:absolute; inset:0; display:flex;
      align-items:center; justify-content:center;
      font-family:var(--heading); font-size:.75rem; font-weight:500;
      letter-spacing:.1em; color:rgba(152,144,184,.5);
      pointer-events:none;
    }
    .viz-output {
      min-height:200px; padding:20px;
      background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15);
      border-radius:12px; margin-bottom:12px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    }
    .viz-placeholder {
      font-family:var(--heading); font-size:.75rem; font-weight:400;
      color:rgba(255,255,255,.4); line-height:1.7;
    }
    .viz-output-item {
      display:flex; align-items:flex-start; gap:10px;
      padding:12px 0; border-bottom:1px solid rgba(255,255,255,.1);
    }
    .viz-output-item:last-child { border-bottom:none; }
    .viz-output-item.active .viz-output-dot { background:#fff; box-shadow:0 0 6px rgba(255,255,255,.6); }
    .viz-output-item.active .viz-output-text { color:rgba(255,255,255,1); }
    .viz-output-item.completed .viz-output-dot { background:#9890b8; box-shadow:0 0 4px rgba(152,144,184,.5); }
    .viz-output-item.completed .viz-output-text { color:rgba(255,255,255,.85); }
    .flow-tag {
      display:block; font-size:.68rem; font-weight:400;
      color:rgba(255,255,255,.55); margin-top:4px;
    }
    .viz-output-dot {
      width:6px; height:6px; border-radius:50%;
      background:#9890b8; flex-shrink:0; margin-top:5px;
    }
    .viz-output-text {
      font-family:var(--heading); font-size:.75rem; font-weight:500;
      color:#ffffff; line-height:1.6;
    }
    .btn-viz-cta {
      display:block; font-family:var(--heading); font-size:.75rem;
      font-weight:600; letter-spacing:.08em;
      padding:13px 16px; background:rgba(255,255,255,.15); color:#fff;
      border-radius:8px; text-decoration:none; text-align:center;
      transition:background .2s;
    }
    .btn-viz-cta:hover { background:rgba(255,255,255,.25); }

    /* ── SCORECARD ── */
    @keyframes scQuestionIn {
      from { opacity:0; transform:translateX(18px); }
      to { opacity:1; transform:translateX(0); }
    }
    .scorecard { background:#f8f7fc; padding:70px 10%; }
    .scorecard-inner {
      max-width:1100px; margin:0 auto;
      display:grid; grid-template-columns:1fr 1.25fr; gap:72px; align-items:center;
    }
    .sc-head { margin-bottom:0; text-align:left; }
    .sc-head .section-title {
      font-size:clamp(1.8rem, 2.4vw, 2.55rem);
      line-height:1.2;
    }
    .sc-title-line { white-space:nowrap; }
    .sc-sub {
      font-size:1.1rem; font-weight:300; line-height:1.9;
      color:var(--muted); max-width:520px; margin-top:14px;
    }
    .sc-wrap {
      border-radius:24px;
      padding:40px 36px 44px;
      background:
        radial-gradient(ellipse 75% 55% at 88% 12%, rgba(153,143,183,.14) 0%, transparent 52%),
        linear-gradient(155deg, #2a2038 0%, #3b2441 50%, #402039 100%);
      box-shadow:0 12px 56px rgba(42,32,56,.38), 0 2px 12px rgba(0,0,0,.12);
    }
    .sc-top {
      display:flex; align-items:center; justify-content:space-between;
      gap:20px; margin-bottom:32px;
    }
    .sc-step-label {
      font-family:var(--heading); font-size:.65rem; font-weight:600;
      letter-spacing:.16em; text-transform:uppercase;
      color:rgba(255,255,255,.75); white-space:nowrap;
    }
    .sc-steps { display:flex; gap:6px; flex:1; max-width:280px; margin-left:auto; }
    .sc-step-seg {
      flex:1; height:4px; border-radius:2px;
      background:rgba(255,255,255,.22);
      transition:background .35s ease, box-shadow .35s ease;
    }
    .sc-step-seg.done { background:#998fb7; }
    .sc-step-seg.current {
      background:rgba(153,143,183,.55);
      box-shadow:0 0 0 1px rgba(184,176,208,.4);
    }
    .sc-questions { position:relative; min-height:300px; }
    .sc-question {
      display:none; opacity:0;
    }
    .sc-question.active {
      display:block;
      animation:scQuestionIn .35s cubic-bezier(.16,1,.3,1) both;
    }
    .sc-q-num {
      font-family:var(--heading); font-size:.65rem; font-weight:600;
      letter-spacing:.18em; color:rgba(255,255,255,.55); margin-bottom:14px;
    }
    .sc-question h3 {
      font-family:var(--heading); font-size:1.25rem; font-weight:700;
      color:#fff; margin-bottom:22px; line-height:1.35;
    }
    .sc-options { display:flex; flex-direction:column; gap:9px; }
    .sc-opt {
      font-family:var(--heading); font-size:.84rem; font-weight:500;
      letter-spacing:.03em; padding:14px 18px;
      background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
      border-radius:10px; color:rgba(255,255,255,.92);
      text-align:left; cursor:pointer;
      transition:background .2s, border-color .2s, transform .2s, box-shadow .2s;
    }
    .sc-opt:hover {
      border-color:rgba(255,255,255,.5); color:#fff;
      background:rgba(255,255,255,.16); transform:translateY(-1px);
    }
    .sc-opt:focus-visible {
      outline:2px solid rgba(255,255,255,.8); outline-offset:2px;
    }
    .sc-opt.selected {
      background:#998fb7; border-color:#b0a8c8;
      color:#fff; box-shadow:0 4px 24px rgba(0,0,0,.22);
    }
    .sc-result { animation:scQuestionIn .4s cubic-bezier(.16,1,.3,1) both; }
    .sc-score-wrap {
      display:grid; grid-template-columns:220px 1fr; gap:40px; align-items:start;
    }
    .sc-gauge-col { display:flex; flex-direction:column; align-items:center; gap:20px; }
    .sc-score-circle {
      position:relative; width:200px; height:200px; flex-shrink:0;
    }
    .sc-score-circle::before {
      content:''; position:absolute; inset:8%;
      border-radius:50%;
      background:radial-gradient(circle, rgba(153,143,183,.4) 0%, transparent 70%);
      filter:blur(8px); z-index:0;
    }
    .sc-score-circle svg { width:100%; height:100%; position:relative; z-index:1; }
    .sc-score-num {
      position:absolute; top:50%; left:50%; transform:translate(-50%,-58%);
      font-family:var(--heading); font-size:2.6rem; font-weight:700; color:#fff;
      z-index:2;
    }
    .sc-score-label {
      position:absolute; top:50%; left:50%; transform:translate(-50%, 32%);
      font-family:var(--heading); font-size:.62rem; font-weight:500;
      letter-spacing:.12em; color:rgba(255,255,255,.65); white-space:nowrap;
      z-index:2;
    }
    .sc-maturity { width:100%; max-width:200px; }
    .sc-maturity-label {
      font-family:var(--heading); font-size:.58rem; font-weight:600;
      letter-spacing:.14em; text-transform:uppercase;
      color:rgba(255,255,255,.55); margin-bottom:8px; display:block;
    }
    .sc-maturity-track {
      height:5px; background:rgba(255,255,255,.18); border-radius:3px; overflow:hidden;
    }
    .sc-maturity-fill {
      height:100%; width:0; border-radius:3px;
      background:linear-gradient(90deg, #998fb7, #b8b0d0);
      transition:width 1.2s cubic-bezier(.16,1,.3,1) .15s;
    }
    .sc-grade-badge {
      display:inline-block; font-family:var(--heading); font-size:.72rem; font-weight:600;
      letter-spacing:.12em; text-transform:uppercase;
      padding:8px 16px; border-radius:999px; margin-bottom:14px;
      background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25);
      color:#fff;
    }
    .sc-grade-badge.tier-high { color:#e8e4f4; border-color:rgba(196,188,224,.45); }
    .sc-grade-badge.tier-mid { color:rgba(255,255,255,.95); border-color:rgba(255,255,255,.35); }
    .sc-grade-badge.tier-low { color:rgba(255,255,255,.9); background:rgba(26,18,32,.45); }
    .sc-score-text > p {
      font-size:.95rem; font-weight:300; line-height:1.85;
      color:rgba(255,255,255,.88); margin-bottom:22px;
    }
    .sc-insights { display:flex; flex-direction:column; gap:10px; margin-bottom:26px; }
    .sc-insight {
      display:flex; align-items:flex-start; gap:12px;
      padding:12px 14px; border-radius:10px;
      background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
      font-family:var(--heading); font-size:.78rem; font-weight:500;
      letter-spacing:.02em; line-height:1.5; color:rgba(255,255,255,.92);
    }
    .sc-insight-icon {
      flex-shrink:0; width:22px; height:22px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      font-size:.7rem; font-weight:700;
    }
    .sc-insight.positive .sc-insight-icon { background:rgba(153,143,183,.55); color:#fff; }
    .sc-insight.warning .sc-insight-icon { background:rgba(255,255,255,.2); color:#fff; }
    .sc-insight.negative .sc-insight-icon { background:rgba(74,84,104,.55); color:#fff; }
    .sc-insight.neutral .sc-insight-icon { background:rgba(255,255,255,.15); color:#fff; }
    .btn-sc-cta {
      display:inline-block; font-family:var(--heading); font-size:.75rem;
      font-weight:600; letter-spacing:.1em;
      padding:13px 28px;
      background:#998fb7; color:#fff;
      border:1px solid transparent;
      border-radius:8px; text-decoration:none;
      transition:background .2s, transform .2s;
      margin-bottom:12px;
    }
    .btn-sc-cta:hover { background:#8a80a8; }
    .btn-sc-cta:focus-visible { outline:2px solid #fff; outline-offset:2px; }
    .sc-restart {
      display:block; font-family:var(--heading); font-size:.68rem;
      font-weight:500; letter-spacing:.1em;
      color:rgba(255,255,255,.55);
      background:none; border:none; cursor:pointer; padding:0;
      text-decoration:underline;
    }
    .sc-restart:hover { color:rgba(255,255,255,.85); }
    @media (max-width:960px) {
      .scorecard-inner { grid-template-columns:1fr; gap:36px; }
      .sc-wrap { padding:28px 22px 32px; }
      .sc-top { flex-direction:column; align-items:flex-start; gap:14px; }
      .sc-steps { max-width:none; width:100%; margin-left:0; }
      .sc-questions { min-height:320px; }
      .sc-score-wrap { grid-template-columns:1fr; gap:32px; }
      .sc-gauge-col { margin:0 auto; }
      .sc-score-text { text-align:center; }
      .sc-grade-badge { margin-left:auto; margin-right:auto; }
      .btn-sc-cta { display:block; text-align:center; max-width:320px; margin-left:auto; margin-right:auto; }
      .sc-restart { margin:0 auto; }
    }

    /* ── DATA FLOW ── */
    .dataflow { background:#f4f2f8; padding:120px 10%; }
    .dataflow-inner { max-width:1000px; margin:0 auto; }
    .df-sub {
      font-size:1.1rem; font-weight:300; line-height:1.9;
      color:var(--muted); max-width:520px; margin-top:14px;
    }
    .df-scene {
      margin-top:56px; background:#f4f2f8;
      border:1px solid var(--border); padding:48px 40px 32px;
      position:relative;
    }
    .df-systems { display:flex; flex-direction:column; align-items:center; gap:0; }

    .df-system {
      display:flex; flex-direction:column; align-items:center;
      background:#fff; border:1px solid var(--border);
      padding:16px 24px; border-radius:4px; min-width:140px;
      transition: border-color .3s, box-shadow .3s;
      position:relative;
    }
    .df-system.active {
      border-color:#9890b8;
      box-shadow:0 0 0 3px rgba(152,144,184,.15);
    }
    .df-sys-icon { font-size:1.6rem; margin-bottom:6px; }
    .df-hub-icon { font-size:1.4rem; }
    .df-sys-name {
      font-family:var(--heading); font-size:.72rem; font-weight:700;
      letter-spacing:.08em; color:var(--text); margin-bottom:4px;
    }
    .df-sys-event {
      font-family:var(--heading); font-size:.62rem; font-weight:500;
      letter-spacing:.06em; color:var(--muted);
      transition: color .3s;
    }
    .df-system.active .df-sys-event { color:#9890b8; }

    .df-top-row { display:flex; align-items:center; gap:0; justify-content:center; margin-bottom:0; }

    .df-arrow {
      display:flex; align-items:center; position:relative;
      width:80px;
    }
    .df-arrow svg { width:100%; }

    .df-packet {
      position:absolute; top:-22px; left:50%; transform:translateX(-50%);
      background:#4a5468; color:#fff;
      font-family:var(--heading); font-size:.58rem; font-weight:600;
      letter-spacing:.06em; padding:3px 8px; border-radius:2px;
      white-space:nowrap; opacity:0;
      transition: opacity .3s;
    }
    .df-packet.show { opacity:1; }
    .df-packet-v {
      top:50%; left:24px; transform:translateY(-50%);
    }

    .df-arrows-split {
      display:flex; gap:80px; justify-content:center;
      margin:0;
    }
    .df-arrow-down {
      display:flex; flex-direction:column; align-items:center;
      position:relative; height:60px;
    }
    .df-arrow-down svg { height:100%; width:20px; }

    .df-bottom-row {
      display:flex; gap:40px; justify-content:center;
    }

    /* Timeline bar */
    .df-timeline { margin-top:36px; }
    .df-timeline-label {
      font-family:var(--heading); font-size:.68rem; font-weight:600;
      letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
      margin-bottom:8px;
    }
    .df-bar {
      height:32px; background:var(--border); border-radius:2px;
      position:relative; overflow:hidden; margin-bottom:6px;
    }
    .df-bar-fill {
      height:100%; border-radius:2px; width:0;
      display:flex; align-items:center; padding-left:12px;
      font-family:var(--heading); font-size:.68rem; font-weight:600;
      letter-spacing:.06em; color:#fff; white-space:nowrap;
      transition: width 1.5s cubic-bezier(.16,1,.3,1);
    }
    .df-bar-manual-fill { background:#c0b8c8; }
    .df-bar-auto-fill   { background:#9890b8; }
    .df-bar span {
      position:absolute; right:12px; top:50%; transform:translateY(-50%);
      font-family:var(--heading); font-size:.65rem; font-weight:600;
      letter-spacing:.06em; color:var(--text);
    }

    .df-replay {
      display:block; margin:20px auto 0;
      font-family:var(--heading); font-size:.72rem; font-weight:600;
      letter-spacing:.1em; padding:10px 24px;
      background:transparent; border:1px solid var(--border);
      border-radius:4px; color:var(--muted); cursor:pointer;
      transition:all .2s;
    }
    .df-replay:hover { border-color:#9890b8; color:#9890b8; }

    /* ── CASE STUDIES ── */
    .cases { background:linear-gradient(135deg, #3a4e68 0%, #2a3a52 100%); padding:120px 10%; }
    .cases-inner { max-width:1100px; margin:0 auto; }
    .cases-sub {
      font-size:1.1rem; font-weight:300; line-height:1.9;
      color:rgba(255,255,255,.6); max-width:480px; margin-top:14px;
    }
    .cases-grid {
      display:grid; grid-template-columns:repeat(3,1fr);
      gap:16px; background:transparent;
      border:none; margin-top:48px;
    }
    .case-card {
      background:rgba(255,255,255,.08); border:0.5px solid rgba(255,255,255,.15);
      padding:36px 28px;
      display:flex; flex-direction:column; gap:20px;
    }
    .case-tag {
      font-family:var(--heading); font-size:.65rem; font-weight:600;
      letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5);
    }
    .case-before-after {
      display:flex; align-items:center; gap:12px;
      padding:20px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
    }
    .case-col { flex:1; text-align:center; }
    .case-col-label {
      font-family:var(--heading); font-size:.6rem; font-weight:700;
      letter-spacing:.16em; text-transform:uppercase;
      margin-bottom:8px;
    }
    .case-col-label.before { color:rgba(255,255,255,.35); }
    .case-col-label.after  { color:#c4bce0; }
    .case-stat-big {
      font-family:var(--heading); font-size:2rem; font-weight:700;
      color:#ffffff; line-height:1;
    }
    .case-stat-big span {
      font-size:1rem; font-weight:500; color:var(--muted); margin-left:2px;
    }
    .case-stat-label {
      font-family:var(--heading); font-size:.62rem; font-weight:500;
      letter-spacing:.06em; color:rgba(255,255,255,.5); margin-top:6px; line-height:1.5;
    }
    .case-arrow-mid {
      font-size:1.2rem; color:rgba(255,255,255,.4); font-weight:700; flex-shrink:0;
    }
    .case-desc {
      font-size:1rem; font-weight:300; line-height:1.85; color:rgba(255,255,255,.65);
      flex:1;
    }
    .case-result {
      display:flex; align-items:center; gap:12px;
      padding:14px 16px; background:rgba(255,255,255,.08);
      border:0.5px solid rgba(255,255,255,.15); border-radius:4px;
    }
    .case-result-num {
      font-family:var(--heading); font-size:1.1rem; font-weight:700;
      color:#c4bce0; white-space:nowrap;
    }
    .case-result-label {
      font-family:var(--heading); font-size:.65rem; font-weight:500;
      letter-spacing:.06em; color:rgba(255,255,255,.5); line-height:1.4;
    }
    .cases-disclaimer {
      font-family:var(--heading); font-size:.65rem; font-weight:400;
      letter-spacing:.06em; color:rgba(255,255,255,.3); margin-top:20px;
      text-align:center;
    }

    @media (max-width:900px) {
      .cases-grid { grid-template-columns:1fr; }
      .df-bottom-row { flex-direction:column; align-items:center; }
      .df-arrows-split { gap:40px; }
    }


    /* ── SERVICES ── */
    .services { background:#f8f7fc; padding:80px 0; }
    .services-inner { max-width:100%; padding:0; }
    .services-head {
      display:flex; justify-content:space-between; align-items:flex-end;
      margin-bottom:64px; padding:0 12%;
    }
    .services-head .eyebrow { justify-content:flex-start; }
    .services-head .eyebrow::before { display:block; }
    .services-head .section-title { max-width:55%; }
    .services-sub {
      font-size:1rem; font-weight:300; line-height:1.8;
      color:var(--muted); text-align:right;
    }
    .services-sub-line { white-space:nowrap; }
    @media (max-width:900px) {
      .services-sub-line { white-space:normal; }
    }
    .services-grid {
      display:grid; grid-template-columns:repeat(3,1fr);
      gap:20px; background:transparent; border:none;
      padding:0 4%;
    }
    .svc-card {
      border-radius:14px; padding:56px 44px;
      display:flex; flex-direction:column; gap:20px;
      position:relative; overflow:hidden;
      border:none;
      transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    .svc-card:hover {
      transform:translateY(-6px);
      box-shadow: 0 16px 40px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.10);
    }
    .svc-card:nth-child(1) {
      background:linear-gradient(145deg, #4a5e78 0%, #3a4e68 45%, #2d3f58 100%);
      box-shadow:0 6px 28px rgba(45,63,88,.28), 0 2px 10px rgba(0,0,0,.08);
    }
    .svc-card:nth-child(2) {
      background:linear-gradient(135deg, #554878 0%, #4a3e68 40%, #3b2441 100%);
      box-shadow:0 6px 28px rgba(59,36,65,.26), 0 2px 10px rgba(0,0,0,.08);
    }
    .svc-card:nth-child(3) {
      background:linear-gradient(160deg, #6a4a5a 0%, #5a3a48 42%, #452838 100%);
      box-shadow:0 6px 28px rgba(69,40,56,.26), 0 2px 10px rgba(0,0,0,.08);
    }
    .svc-card:nth-child(1):hover { box-shadow:0 22px 52px rgba(45,63,88,.38), 0 4px 14px rgba(0,0,0,.12); }
    .svc-card:nth-child(2):hover { box-shadow:0 22px 52px rgba(59,36,65,.36), 0 4px 14px rgba(0,0,0,.12); }
    .svc-card:nth-child(3):hover { box-shadow:0 22px 52px rgba(69,40,56,.36), 0 4px 14px rgba(0,0,0,.12); }
    .svc-card-top {
      display:flex; align-items:flex-start;
      margin-bottom:4px;
    }
    .svc-num { display:none; }
    .svc-icon {
      width:36px; height:36px; color:rgba(0,0,0,0.5);
    }
    .svc-card h3 {
      font-family:var(--heading); font-size:1.3rem; font-weight:700;
      color:#ffffff !important; letter-spacing:.01em; line-height:1.2;
    }
    .svc-card p {
      font-size:1rem; font-weight:300; line-height:1.85;
      color:rgba(255,255,255,.75) !important; flex:1;
    }
    /* svc-link base — styled below */

    @media (max-width:1100px) {
      .services-grid { grid-template-columns:1fr 1fr; }
    }
    @media (max-width:600px) {
      .services-grid { grid-template-columns:1fr; }
    }


    /* ── AI ENHANCED ERP ── */
    .ai-erp { background:#f8f7fc; padding:0 10% 80px; }
    .ai-erp-inner { max-width:1200px; margin:0 auto; }
    .ai-erp-card {
      background:#1a1a2e; border-radius:16px;
      padding:44px 52px;
      display:grid; grid-template-columns:1fr auto;
      gap:48px; align-items:center;
      box-shadow:0 4px 24px rgba(0,0,0,0.12);
    }
    .ai-erp-left h2 {
      font-family:var(--heading); font-size:1.7rem; font-weight:700;
      color:#fff; margin-bottom:14px; letter-spacing:.02em;
    }
    .ai-erp-left p {
      font-family:var(--heading); font-size:.92rem; font-weight:300;
      color:rgba(255,255,255,.6); line-height:1.8; max-width:580px;
    }
    .btn-ai {
      font-family:var(--heading); font-size:.78rem; font-weight:600;
      letter-spacing:.1em; padding:14px 28px;
      background:#9890b8; color:#fff;
      border-radius:8px; text-decoration:none;
      white-space:nowrap; transition:background .2s;
    }
    .btn-ai:hover { background:#7a7098; }

    @media (max-width:768px) {
      .ai-erp-card { grid-template-columns:1fr; gap:24px; padding:32px 28px; }
    }


    .svc-card-ai {
      background:#1a1a2e !important;
    }
    .svc-card-ai:hover {
      background:#1a1a2e !important;
      filter: brightness(1.1);
    }
    .svc-card-ai h3 { color:#ffffff !important; }
    .svc-card-ai p  { color:rgba(255,255,255,.6) !important; }
    .btn-ai-card {
      display:inline-block;
      font-family:var(--heading); font-size:.75rem; font-weight:600;
      letter-spacing:.1em; padding:11px 22px;
      background:#9890b8; color:#fff;
      border-radius:8px; text-decoration:none;
      margin-top:8px; transition:background .2s;
    }
    .btn-ai-card:hover { background:#7a7098; }

    /* ── SERVICE CARDS ── */
    a.svc-card {
      text-decoration:none; color:inherit;
    }
    a.svc-card:focus-visible {
      outline:2px solid #fff; outline-offset:3px;
    }
    .svc-card {
      border-radius:14px; padding:56px 44px;
      display:flex; flex-direction:column; gap:16px;
      position:relative; overflow:hidden; cursor:pointer;
      transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
      box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    }
    .svc-card:hover {
      transform:translateY(-7px);
      box-shadow: 0 20px 48px rgba(0,0,0,0.22);
    }
    .svc-card:nth-child(1) {
      background:linear-gradient(145deg, #4a5e78 0%, #3a4e68 45%, #2d3f58 100%);
      box-shadow:0 6px 28px rgba(45,63,88,.28), 0 2px 10px rgba(0,0,0,.08);
    }
    .svc-card:nth-child(2) {
      background:linear-gradient(135deg, #554878 0%, #4a3e68 40%, #3b2441 100%);
      box-shadow:0 6px 28px rgba(59,36,65,.26), 0 2px 10px rgba(0,0,0,.08);
    }
    .svc-card:nth-child(3) {
      background:linear-gradient(160deg, #6a4a5a 0%, #5a3a48 42%, #452838 100%);
      box-shadow:0 6px 28px rgba(69,40,56,.26), 0 2px 10px rgba(0,0,0,.08);
    }
    .svc-card:nth-child(1):hover { box-shadow:0 22px 52px rgba(45,63,88,.38), 0 4px 14px rgba(0,0,0,.12); }
    .svc-card:nth-child(2):hover { box-shadow:0 22px 52px rgba(59,36,65,.36), 0 4px 14px rgba(0,0,0,.12); }
    .svc-card:nth-child(3):hover { box-shadow:0 22px 52px rgba(69,40,56,.36), 0 4px 14px rgba(0,0,0,.12); }
    .svc-card h3,
    .svc-card p,
    .svc-card .svc-link { position:relative; z-index:1; }

    .svc-card h3 {
      font-family:var(--heading); font-size:1.4rem; font-weight:700;
      color:#ffffff !important; letter-spacing:.02em; margin:0;
    }
    .svc-card p {
      font-family:var(--heading); font-size:1.05rem; font-weight:300;
      line-height:1.85; color:rgba(255,255,255,.75) !important; flex:1; margin:0;
    }
    .svc-link {
      font-family:var(--heading); font-size:.72rem; font-weight:600;
      letter-spacing:.1em; color:#ffffff !important; text-decoration:none;
    }
    .svc-card-top { display:none; }
    .svc-num { display:none; }
    .svc-icon { display:none; }


    /* ── HOW WE WORK REDESIGN ── */
    .how-top {
      margin-bottom: 60px;
      text-align: center;
    }
    .how-top .section-title {
      max-width: 900px;
      margin: 0 auto 20px;
      font-size: clamp(1.8rem, 3.2vw, 2.8rem);
    }
    .how-top-sub {
      font-family: var(--heading);
      font-size: .95rem; font-weight: 300; line-height: 1.85;
      color: rgba(255,255,255,.65);
      margin: 0 auto;
      max-width: none;
      white-space: nowrap;
    }
    @media (max-width: 900px) {
      .how-top-sub {
        white-space: normal;
        max-width: 36rem;
      }
    }
    .how-cols {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 36px;
    }
    .how-col h3 {
      font-family: var(--heading);
      font-size: 1.4rem; font-weight: 700;
      color: #ffffff; margin-bottom: 16px;
      line-height: 1.2;
    }
    .how-col p {
      font-family: var(--heading);
      font-size: .92rem; font-weight: 300;
      line-height: 1.85; color: rgba(255,255,255,.62);
    }
    @media (min-width:769px) {
      .how-col:not(:first-child) {
        padding-left:28px;
        border-left:1px solid rgba(255,255,255,.07);
      }
    }
    @media (max-width:768px) {
      .how-col {
        padding-top:20px;
        border-top:1px solid rgba(255,255,255,.07);
      }
      .how-col:first-child { padding-top:0; border-top:none; }
    }
    @media (max-width: 768px) {
      .how-cols { grid-template-columns: 1fr; gap: 32px; }
    }


    /* ── AI ENHANCEMENT ── */
    .ai-enhance {
      background: #f8f7fc;
      padding: 80px 8%;
    }
    .ai-enhance-inner { max-width:1200px; margin:0 auto; }
    .ai-enhance-card-wrap {
      background:linear-gradient(135deg, #2a2a3a 0%, #1a1a2e 100%);
      border-radius:20px;
      padding:72px 72px 64px;
      box-shadow: 0 12px 60px rgba(0,0,0,0.25), 0 2px 12px rgba(0,0,0,0.15);
    }
    .eyebrow-light {
      font-family:var(--heading); font-size:.72rem; font-weight:600;
      letter-spacing:.22em; text-transform:uppercase;
      color:rgba(255,255,255,.5);
      display:flex; align-items:center; gap:12px;
      margin-bottom:20px;
    }
    .eyebrow-light::before {
      content:''; display:block; width:24px; height:1px;
      background:rgba(255,255,255,.4);
    }
    .ai-enhance-head { margin-bottom:64px; }
    .ai-enhance-head .section-title { color:#ffffff; margin-bottom:20px; }
    .ai-enhance-sub {
      font-family:var(--heading); font-size:1rem; font-weight:300;
      line-height:1.85; color:rgba(255,255,255,.65);
      max-width:560px; margin-bottom:32px;
    }
    .btn-ai-outline {
      display:inline-block; font-family:var(--heading);
      font-size:.78rem; font-weight:600; letter-spacing:.1em;
      padding:13px 28px; color:#fff;
      border:1.5px solid rgba(255,255,255,.4); border-radius:50px;
      text-decoration:none; transition:border-color .2s, background .2s;
    }
    .btn-ai-outline:hover { border-color:#fff; background:rgba(255,255,255,.08); }
    .ai-enhance-grid {
      display:grid; grid-template-columns:repeat(3,1fr);
      gap:20px;
    }
    .ai-enhance-card {
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.1);
      border-radius:12px; padding:32px 28px;
      display:flex; flex-direction:column; gap:14px;
      transition: background .25s, border-color .25s;
    }
    .ai-enhance-card:hover {
      background:rgba(255,255,255,.1);
      border-color:rgba(255,255,255,.2);
    }
    .ai-card-icon {
      width:36px; height:36px; color:#9890b8;
    }
    .ai-card-icon svg { width:100%; height:100%; }
    .ai-enhance-card h3 {
      font-family:var(--heading); font-size:1.05rem; font-weight:700;
      color:#ffffff; letter-spacing:.02em;
    }
    .ai-enhance-card p {
      font-family:var(--heading); font-size:.9rem; font-weight:300;
      line-height:1.8; color:rgba(255,255,255,.6);
    }

    /* ── USE CASES BANNER ── */
    .uc-banner {
      background: linear-gradient(to right, #555f72 0%, #6e7a92 40%, #706e8e 70%, #7e7898 100%);
      padding: 44px 8%;
      text-align: center;
    }
    .uc-banner-inner {
      max-width: 720px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
    }
    .uc-banner h2 {
      font-family: var(--heading);
      font-size: clamp(1.25rem, 2.8vw, 1.65rem);
      font-weight: 700;
      color: var(--white);
      letter-spacing: .01em;
      line-height: 1.3;
    }
    .uc-banner-btn {
      display: inline-block;
      font-family: var(--heading);
      font-size: .78rem;
      font-weight: 500;
      letter-spacing: .08em;
      color: var(--white);
      text-decoration: none;
      padding: 11px 26px;
      border: 1px solid rgba(255,255,255,.5);
      border-radius: 8px;
      transition: background .2s, border-color .2s;
    }
    .uc-banner-btn:hover {
      background: rgba(255,255,255,.1);
      border-color: rgba(255,255,255,.85);
    }

    /* ── USE CASES ── */
    .usecases { background:#f8f7fc; padding:48px 10% 48px; }
    .usecases-inner { max-width:1100px; margin:0 auto; }
    .usecases-head { text-align:center; margin-bottom:56px; }
    .usecases-sub {
      font-family:var(--heading); font-size:1rem; font-weight:300;
      line-height:1.8; color:var(--muted); margin-top:12px;
    }
    .usecases-grid {
      display:grid; grid-template-columns:repeat(3,1fr);
      gap:20px;
    }
    .usecase-card {
      background:transparent;
      border:1px solid #c8c4d8;
      border-radius:12px; padding:32px 28px;
      display:flex; flex-direction:column; gap:16px;
      transition: border-color .25s, transform .25s;
    }
    .usecase-card:hover {
      border-color:#9890b8;
      transform: translateY(-3px);
    }
    .usecase-icon {
      width:32px; height:32px; color:#9890b8;
    }
    .usecase-icon svg { width:100%; height:100%; }
    .usecase-card h3 {
      font-family:var(--heading); font-size:1.05rem; font-weight:700;
      color:var(--text); letter-spacing:.02em;
    }
    .usecase-card ul {
      list-style:none; padding:0; margin:0;
      display:flex; flex-direction:column; gap:8px;
    }
    .usecase-card ul li {
      font-family:var(--heading); font-size:.88rem; font-weight:300;
      line-height:1.6; color:var(--muted);
      padding-left:16px; position:relative;
    }
    .usecase-card ul li::before {
      content:''; position:absolute; left:0; top:8px;
      width:5px; height:5px; border-radius:50%;
      background:#9890b8;
    }

    @media (max-width:900px) {
      .ai-enhance-grid { grid-template-columns:1fr; }
      .usecases-grid { grid-template-columns:1fr 1fr; }
    }
    @media (max-width:600px) {
      .usecases-grid { grid-template-columns:1fr; }
    }


    .btn-ai-lavender {
      display:inline-block; font-family:var(--heading);
      font-size:.78rem; font-weight:600; letter-spacing:.1em;
      padding:13px 32px; color:#fff;
      background:#9890b8; border-radius:8px;
      text-decoration:none; transition:background .2s;
    }
    .btn-ai-lavender:hover { background:#7a7098; }


    .svc-ai-card {
      background:linear-gradient(135deg, #1a1a2e 0%, #2a2038 40%, #3b2441 70%, #4a2848 100%);
      background-size:200% 200%;
      animation:aiGradientShift 5s ease infinite;
      cursor:pointer;
      transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
      border-radius:14px;
      padding:52px 44px;
      margin:20px 4% 0;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:48px;
      box-shadow:0 16px 64px rgba(42,32,56,.4), 0 0 0 1px rgba(153,143,183,.22), 0 2px 12px rgba(0,0,0,.12);
    }
    .svc-ai-content { flex:1; }
    .svc-ai-card { position:relative; overflow:hidden; }
    .svc-ai-card::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background:rgba(255,255,255,0.4); transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.16,1,.3,1); border-radius:20px 20px 0 0; }
    .svc-ai-card:hover::before { transform:scaleX(1); }
    .svc-ai-card:hover {
      transform:translateY(-8px);
      box-shadow:0 24px 72px rgba(42,32,56,.48), 0 0 0 1px rgba(196,188,224,.35), 0 4px 16px rgba(0,0,0,.15);
    }
    .svc-ai-card::after {
      content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
      background:radial-gradient(ellipse 55% 80% at 92% 18%, rgba(153,143,183,.2) 0%, transparent 58%);
    }
    .svc-ai-content, .svc-ai-card .btn-ai-lavender { position:relative; z-index:1; }
    .svc-ai-card h3 {
      font-family:var(--heading); font-size:1.5rem; font-weight:700;
      color:#ffffff; letter-spacing:.02em; margin-bottom:16px;
    }
    .svc-ai-card p {
      font-family:var(--heading); font-size:1rem; font-weight:300;
      line-height:1.85; color:rgba(255,255,255,.7);
    }
    @media (max-width:768px) {
      .svc-ai-card { flex-direction:column; align-items:flex-start; gap:24px; }
    }





    .svc-card::before {
      content:''; position:absolute;
      top:0; left:0; right:0; height:2px;
      background:rgba(255,255,255,0.4);
      transform:scaleX(0); transform-origin:left;
      transition:transform .4s cubic-bezier(.16,1,.3,1);
      border-radius:14px 14px 0 0;
      z-index:2;
    }
    .svc-card:hover::before { transform:scaleX(1); }
    .svc-card::after {
      content:''; position:absolute; inset:0; border-radius:inherit;
      pointer-events:none; z-index:0;
    }
    .svc-card:nth-child(1)::after {
      background:radial-gradient(ellipse 85% 65% at 100% 0%, rgba(180,190,210,.2) 0%, transparent 52%);
    }
    .svc-card:nth-child(2)::after {
      background:radial-gradient(ellipse 80% 70% at 0% 100%, rgba(153,143,183,.18) 0%, transparent 55%);
    }
    .svc-card:nth-child(3)::after {
      background:radial-gradient(ellipse 75% 60% at 100% 50%, rgba(200,170,185,.15) 0%, transparent 50%);
    }
    .svc-card:nth-child(1) { border:1px solid rgba(255,255,255,.08); }
    .svc-card:nth-child(2) { border:1px solid rgba(196,188,224,.1); }
    .svc-card:nth-child(3) { border:1px solid rgba(255,255,255,.06); }


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


    .viz-head-inner {
      display:flex; justify-content:center; align-items:center;
      gap:160px; margin-bottom:40px;
      max-width:1000px; margin-left:auto; margin-right:auto;
    }
    .viz-head-inner .section-title { flex:none; margin:0; white-space:nowrap; }
    .viz-head-inner .viz-sub { flex:none; margin:0; text-align:left; max-width:260px; line-height:1.6; }