/* ============================================================
   weYou enVoy — shared stylesheet
   Used by index2.html and all future per-industry / blog /
   comparison pages. Keep design tokens (--gold-*, --blue-*,
   --indigo-*, --teal-*, --violet-*) and section patterns
   (.hero, .pillars, .verticals, .proof, .faq, .contact-section,
    .footer, .btn-gold, .dark-glow, .pillar-card) reusable.
   ============================================================ */
    :root{
      --blue-900:#0a1931; --blue-deep:#040c16;
      --gold-500:#c9a227; --gold-400:#d4b85a; --gold-300:#e8d078; --gold-200:#f0e4a8;
      --indigo:#818cf8; --indigo-deep:#6366f1;
      --teal:#5eead4; --teal-deep:#14b8a6;
      --violet:#c084fc; --violet-deep:#a855f7;
      --cream:#f8f9fa; --cream-dark:#f1f3f5;
      --white:#fff;
      --text-dark:#0a0f1a; --text-body:#4a5568;
    }
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
    html{scroll-behavior:smooth}
    html,body,h1,h2,h3,h4,h5,h6,p,a,li,input,button,div,span,label{
      font-family:'Inter','Helvetica Neue',-apple-system,BlinkMacSystemFont,sans-serif !important;
    }
    body{
      color:var(--text-dark);line-height:1.6;-webkit-font-smoothing:antialiased;
      overflow-x:hidden;background:var(--cream);font-weight:400;
    }
    .container{max-width:1180px;margin:0 auto;padding:0 40px}
    @media(max-width:760px){.container{padding:0 24px}}
    .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

    .dark-section{position:relative;overflow:hidden}
    .dark-section .section-noise{
      position:absolute;inset:0;pointer-events:none;opacity:0.02;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    }

    /* sparks */
    .section-sparks{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
    .spark{
      position:absolute;border-radius:50%;will-change:transform,opacity;
      animation:sparkFlash var(--dur) ease-in-out infinite;animation-delay:var(--d);
    }
    @keyframes sparkFlash{
      0%,100%{opacity:0;transform:scale(0.3);box-shadow:none}
      45%{opacity:0;transform:scale(0.3)}
      50%{opacity:1;transform:scale(1.2);box-shadow:0 0 8px rgba(201,162,39,0.6),0 0 16px rgba(201,162,39,0.2)}
      55%{opacity:0.6;transform:scale(0.8)}
      60%{opacity:0;transform:scale(0.3);box-shadow:none}
    }

    /* stars */
    .section-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5}
    .star{
      position:absolute;border-radius:50%;background:#fff;opacity:0;
      will-change:transform,opacity;
      max-width:1.4px !important;max-height:1.4px !important;
      animation:starTwinkle var(--s-dur,4s) ease-in-out infinite;animation-delay:var(--s-d,0s);
    }
    .star.warm{background:#e8d078}
    .star.pale{background:#f5ecd0}
    .star.dim{max-width:0.7px !important;max-height:0.7px !important}
    @keyframes starTwinkle{
      0%{opacity:0;transform:scale(0.2)}
      12%{opacity:0}
      30%{opacity:0.8;transform:scale(1.3);box-shadow:0 0 4px 2px rgba(232,208,120,0.5)}
      45%{opacity:0.7;transform:scale(1);box-shadow:0 0 3px 1px rgba(255,255,255,0.35)}
      60%{opacity:0.35;transform:scale(0.6);box-shadow:none}
      78%{opacity:0;transform:scale(0.2)}
      100%{opacity:0}
    }

    @keyframes shine{to{background-position:200% center}}
    @keyframes pulse{0%,100%{opacity:0.4}50%{opacity:1}}

    /* HEADER */
    header{
      position:fixed;top:0;left:0;right:0;z-index:100;padding:0;
      background:rgba(255,255,255,0.94);
      backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
      border-bottom:1px solid rgba(10,25,49,0.05);
    }
    header .container{display:flex;justify-content:space-between;align-items:center;height:78px}
    .logo{
      display:inline-flex;align-items:baseline;gap:10px;text-decoration:none;line-height:1;
    }
    .logo .parent{
      font-size:15px;color:var(--text-body);letter-spacing:0.2px;
      font-weight:500;
      transition:color 0.3s;
    }
    .logo .parent .x{color:var(--gold-500);font-weight:600}
    .logo:hover .parent{color:var(--gold-500)}
    .logo .brand{
      font-weight:300;font-size:32px;color:var(--blue-deep);letter-spacing:-0.025em;
    }
    .logo .brand .V{font-weight:500;color:var(--gold-500)}

    nav{display:flex;align-items:center}
    nav ul{display:flex;list-style:none;gap:40px;align-items:center;margin:0;padding:0}
    nav a{
      font-size:12px;font-weight:500;color:#000;text-decoration:none;
      letter-spacing:0.08em;text-transform:uppercase;
      transition:color 0.3s;position:relative;
    }
    nav a::after{
      content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;
      background:var(--gold-500);transition:width 0.3s ease;
    }
    nav a:hover::after{width:100%}
    .header-contact{
      background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
      color:var(--blue-deep);font-weight:600;font-size:12px;letter-spacing:0.08em;
      text-transform:uppercase;padding:11px 26px;border-radius:24px;border:none;
      cursor:pointer;transition:all 0.3s;text-decoration:none;display:inline-block;
    }
    .header-contact:hover{
      box-shadow:0 0 24px rgba(201,162,39,0.4);
      transform:translateY(-1px);
    }
    .hamburger{display:none;background:none;border:none;cursor:pointer;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0}
    .hamburger span{display:block;width:22px;height:1.5px;background:var(--blue-deep);transition:transform 0.3s,opacity 0.3s}
    .hamburger.active span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
    .hamburger.active span:nth-child(2){opacity:0}
    .hamburger.active span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

    .mobile-nav{
      display:none;flex-direction:column;
      background:rgba(255,255,255,0.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
      border-top:1px solid rgba(0,0,0,0.04);
      padding:0;max-height:0;overflow:hidden;
      transition:max-height 0.35s cubic-bezier(0.4,0,0.2,1),padding 0.35s;
    }
    .mobile-nav.open{
      max-height:640px;padding:12px 0 20px;
    }
    .mobile-nav a{
      display:block;padding:14px 40px;
      font-size:14px;font-weight:500;color:var(--text-dark);
      text-decoration:none;letter-spacing:0.04em;
      transition:background 0.2s,color 0.2s;
    }
    .mobile-nav a:hover{background:rgba(201,162,39,0.06);color:var(--gold-500)}

    @media(max-width:880px){
      header .container{height:66px;justify-content:center;position:relative}
      .logo{gap:8px}
      .logo .brand{font-size:26px}
      .logo .parent{font-size:12px;letter-spacing:0.2px}
      nav ul{display:none}
      .header-contact{display:none}
      .hamburger{display:flex;position:absolute;right:24px;top:50%;transform:translateY(-50%)}
      .mobile-nav{display:flex}
    }


    /* HERO */
    .hero{
      padding:140px 0 100px;min-height:92vh;
      background:linear-gradient(180deg,var(--blue-deep) 0%,var(--blue-900) 100%);
      display:flex;align-items:center;position:relative;overflow:hidden;
    }
    .hero .container{position:relative;z-index:6;width:100%}

    .dark-glow{display:none}
    .hero-content{max-width:920px;margin:0 auto;text-align:center}

    /* staggered fade-up entrance */
    .hero-fade{
      opacity:0;transform:translateY(28px);
      animation:heroFadeUp 1s cubic-bezier(0.16,1,0.3,1) forwards;
      animation-delay:calc(var(--d) * 0.18s + 0.3s);
    }
    @keyframes heroFadeUp{
      to{opacity:1;transform:translateY(0)}
    }

    .hero h1{
      font-weight:200;
      font-size:clamp(52px,8vw,110px);line-height:1;letter-spacing:-0.045em;
      color:#fff;margin-bottom:24px;padding:0.02em 0;
      /* permanent low base glow so the wordmark is never fully dark */
      text-shadow:0 0 30px rgba(232,208,120,0.34);
      /* fade in once, then a slow gold halo — heroGlow scaled for the big wordmark,
         same 5s rhythm as the "prepared" accent's wordGlow */
      animation:heroFadeUp 1s cubic-bezier(0.16,1,0.3,1) calc(var(--d) * 0.18s + 0.3s) forwards,
                heroGlow 5s ease-in-out 3s infinite;
    }
    /* stacked shadows — thin 200-weight strokes need many layers to read as a glow */
    @keyframes heroGlow{
      0%,100%{text-shadow:0 0 30px rgba(232,208,120,0.34)}
      50%{text-shadow:
        0 0 24px rgba(232,208,120,0.95),
        0 0 48px rgba(232,208,120,0.62),
        0 0 92px rgba(232,208,120,0.44),
        0 0 150px rgba(232,208,120,0.28)}
    }
    .hero h1 .V{
      font-weight:500;color:var(--gold-300);
    }

    /* sparkling AI Communication System tag under the wordmark */
    .hero-tagline{
      display:flex;align-items:baseline;justify-content:center;gap:16px;
      margin:20px 0 30px;
    }
    .hero-tagline .tag-ai{
      font-size:clamp(46px,9vw,72px);font-weight:500;letter-spacing:0.06em;text-transform:uppercase;
      color:var(--gold-300);
      text-shadow:
        0 0 12px rgba(255,255,255,0.35),
        0 0 24px rgba(255,244,194,0.28),
        0 0 40px rgba(232,208,120,0.22);
      animation:aiStarGlitter 5s ease-in-out 1.5s infinite;
    }
    @keyframes aiStarGlitter{
      0%,100%{
        text-shadow:
          0 0 12px rgba(255,255,255,0.35),
          0 0 24px rgba(255,244,194,0.28),
          0 0 40px rgba(232,208,120,0.22);
      }
      50%{
        text-shadow:
          0 0 6px rgba(255,255,255,0.95),
          0 0 18px rgba(255,255,255,0.75),
          0 0 36px rgba(255,244,194,0.7),
          0 0 64px rgba(232,208,120,0.55),
          0 0 100px rgba(201,162,39,0.35),
          0 0 140px rgba(232,208,120,0.22);
      }
    }
    .hero-tagline .tag-static{
      font-size:clamp(19px,4.2vw,39px);font-weight:400;letter-spacing:0.12em;text-transform:uppercase;
      color:rgba(255,255,255,0.6);
    }
    @media(max-width:640px){
      /* stack so the enlarged tagline never overflows — AI over the caption, centred */
      .hero-tagline{flex-direction:column;align-items:center;gap:4px;margin:14px 0 22px}
      .hero-tagline .tag-ai{font-size:58px}
      .hero-tagline .tag-static{font-size:14px;letter-spacing:0.1em}
    }

    .hero h2{
      font-weight:300;
      font-size:clamp(21px,2.5vw,32px);line-height:1.5;letter-spacing:-0.012em;
      color:rgba(255,255,255,0.82);margin:0 auto;max-width:680px;
    }
    .hero h2 .amp{
      font-weight:400;margin:0 4px;color:var(--gold-300);
      background:linear-gradient(90deg,var(--gold-300) 0%,var(--cream) 50%,var(--gold-300) 100%);
      background-size:200% auto;
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
      animation:shine 8s linear infinite;
    }

    /* thin gold divider between tagline and subtext */
    .hero-divider{
      width:56px;height:1.5px;margin:36px auto;border-radius:2px;
      background:linear-gradient(90deg,transparent,var(--gold-400),transparent);
    }

    /* gold wave shine — accent words on dark backgrounds */
    .verticals h2 .em,
    .contact-section h2 .em{
      background:linear-gradient(90deg,var(--gold-300) 0%,var(--cream) 50%,var(--gold-300) 100%);
      background-size:200% auto;
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
      animation:shine 8s linear infinite;
      font-weight:400;
    }
    /* softer gold wave — cream sections so it stays visible on white */
    .pillars-head h2 .em,
    .proof-head h2 .em,
    .slug-card h3 .em,
    .faq-head h2 .em{
      background:linear-gradient(90deg,var(--gold-500) 0%,var(--gold-300) 50%,var(--gold-500) 100%);
      background-size:200% auto;
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
      animation:shine 10s linear infinite;
      font-weight:500;
    }

    /* h2 line-by-line reveal */
    .h2-line{
      display:inline;
      background-size:200% 100%;background-position:100% 0;
      -webkit-background-clip:text;background-clip:text;
      -webkit-text-fill-color:transparent;
      background-image:linear-gradient(90deg,rgba(255,255,255,0.88) 50%,rgba(255,255,255,0.4) 50%);
      animation:textReveal 1.2s cubic-bezier(0.16,1,0.3,1) forwards;
      animation-delay:0.9s;
    }
    .h2-bold{animation-delay:1.15s;font-weight:300}
    @keyframes textReveal{
      to{background-position:0 0}
    }

    .hero-text{
      font-size:clamp(21px,1.7vw,25px);color:rgba(255,255,255,0.72);line-height:1.6;font-weight:400;
      max-width:760px;margin:0 auto;letter-spacing:0.01em;
    }

    /* line-by-line dim→bright reveal for hero-text */
    .ht-line{
      display:inline;opacity:0.3;
      animation:lineReveal 0.8s ease-out forwards;
      animation-delay:calc(var(--l) * 0.25s + 1.6s);
    }
    .ht-strong{font-weight:400}
    @keyframes lineReveal{
      to{opacity:1}
    }

    /* subtle glow pulse on key word */
    .text-glow{
      animation:wordGlow 5s ease-in-out infinite 3s;
    }
    @keyframes wordGlow{
      0%,100%{text-shadow:none}
      50%{text-shadow:0 0 24px rgba(232,208,120,0.3)}
    }

    /* channels — dot-separated with sequential light-up */
    .hero-channels{
      font-size:clamp(11.5px,0.85vw,13px);color:rgba(255,255,255,0.45);line-height:1.7;font-weight:500;
      max-width:760px;margin:48px auto 0;letter-spacing:0.14em;text-transform:uppercase;
      display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:nowrap;white-space:nowrap;
    }
    .channel-lead{
      opacity:0;margin-right:12px;color:rgba(255,255,255,0.32);font-weight:500;
      animation:leadFade 0.5s ease-out forwards;animation-delay:2.2s;
    }
    @keyframes leadFade{to{opacity:1}}
    .channel-item{
      opacity:0.4;cursor:default;padding:0 2px;
      animation:channelLightUp 0.6s ease-out forwards, channelPulse 6s ease-in-out infinite;
      animation-delay:calc(var(--c) * 0.2s + 2.4s), calc(var(--c) * 1.5s + 4s);
      transition:color 0.4s,text-shadow 0.4s;
    }
    @keyframes channelLightUp{
      to{opacity:1;color:rgba(255,255,255,0.72)}
    }
    @keyframes channelPulse{
      0%,100%{color:rgba(255,255,255,0.72);text-shadow:none}
      50%{color:rgba(255,255,255,0.92);text-shadow:0 0 16px rgba(232,208,120,0.25)}
    }
    .channel-item:hover{
      color:rgba(255,255,255,0.9)!important;text-shadow:0 0 18px rgba(232,208,120,0.4)!important;
    }
    .channel-dot{
      width:3px;height:3px;border-radius:50%;background:var(--gold-400);
      display:inline-block;margin:0 12px;opacity:0;vertical-align:middle;
      animation:dotFade 0.4s ease-out forwards;
      animation-delay:2.6s;
    }
    @keyframes dotFade{to{opacity:0.5}}
    .channel-sep{
      margin:0 10px;color:rgba(255,255,255,0.15);font-weight:300;
      opacity:0;animation:dotFade 0.4s ease-out forwards;animation-delay:3.2s;
    }
    .channel-crm{
      font-weight:600;letter-spacing:0.12em;
      opacity:0;color:var(--gold-300);
      animation:crmReveal 1s ease-out forwards;animation-delay:3.4s;
    }
    @keyframes crmReveal{
      0%{opacity:0;text-shadow:none}
      60%{opacity:1;text-shadow:0 0 28px rgba(232,208,120,0.5)}
      100%{opacity:1;text-shadow:0 0 12px rgba(232,208,120,0.15)}
    }
    @media(max-width:760px){
      /* larger, roomier hero on mobile — keep the SAME desktop effects
         (shimmer reveal, gold glow, channel light-up) */
      .hero{padding:112px 0 80px;min-height:90vh}
      .hero-content{max-width:100%;padding:0 6px}
      .hero h1{font-size:clamp(60px,16vw,82px);margin-bottom:12px}
      .hero h2{font-size:18px;line-height:1.5;font-weight:400;max-width:300px}
      .h2-bold{font-weight:400}
      .hero-divider{width:46px;margin:26px auto}
      /* one balanced block on mobile (drop the desktop line-break) so it wraps to ~3 even
         lines with no orphaned word; desktop keeps its two-sentence split */
      .hero-text{font-size:21px;line-height:1.5;max-width:310px;text-wrap:balance}
      .hero-text br{display:none}
      /* narrow box → channels wrap to ~3 lines */
      .hero-channels{font-size:11.5px;margin:32px auto 0;letter-spacing:0.1em;gap:7px 0;flex-wrap:wrap;white-space:normal;max-width:270px}
      .channel-lead{margin-right:6px}
      .channel-dot{margin:0 7px;width:3px;height:3px}
      .channel-sep{margin:0 7px}
      .hero-fade{animation:heroFadeUp 0.8s ease-out forwards;animation-delay:calc(var(--d) * 0.12s + 0.1s)}
    }
    @media(max-width:400px){
      .hero h1{font-size:clamp(52px,14vw,66px)}
      .hero h2{font-size:17px;max-width:280px}
      .hero-text{font-size:20px;max-width:285px}
      .hero-channels{font-size:11px;max-width:250px}
    }

    .hero-actions{display:flex;gap:36px;align-items:center;margin-top:44px;flex-wrap:wrap;justify-content:center}

    .btn-gold{
      text-decoration:none;
      background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
      color:var(--blue-deep);font-weight:600;font-size:12px;letter-spacing:0.12em;
      text-transform:uppercase;padding:15px 34px;border-radius:26px;
      transition:all 0.3s;display:inline-flex;align-items:center;gap:14px;
      border:none;cursor:pointer;
    }
    .btn-gold:hover{box-shadow:0 0 32px rgba(201,162,39,0.35);transform:translateY(-1px)}
    .btn-gold .arrow{font-size:16px;transition:transform 0.3s;font-weight:300}
    .btn-gold:hover .arrow{transform:translateX(3px)}
    .btn-text{
      text-decoration:none;color:var(--gold-300);font-size:13px;letter-spacing:0.05em;font-weight:400;
      border-bottom:1px solid rgba(232,208,120,0.4);padding-bottom:4px;transition:all 0.3s;
    }
    .btn-text:hover{color:var(--cream);border-color:var(--cream)}

    /* SLUG GENERATOR — second section, cream */
    .slug-section{
      padding:120px 0;
      background:linear-gradient(180deg,#f8f9fa 0%,#f1f3f5 100%);
      position:relative;overflow:hidden;
    }
    .slug-section::before,.slug-section::after{display:none}
    .slug-inner{
      max-width:560px;margin:0 auto;text-align:center;position:relative;z-index:1;
    }
    .slug-card{
      position:relative;margin-top:8px;padding:48px 44px 40px;
      background:linear-gradient(180deg,#ffffff 0%,#f8f9fa 100%);
      border:1px solid rgba(201,162,39,0.20);border-radius:22px;text-align:center;
      box-shadow:0 1px 3px rgba(0,0,0,0.02),0 12px 32px rgba(201,162,39,0.10),0 40px 80px rgba(10,25,49,0.06);
      overflow:hidden;
    }
    @media(max-width:760px){.slug-card{padding:36px 26px 30px;border-radius:18px}.slug-form{flex-direction:column}.slug-form button{width:100%}}
    .slug-card::before{
      content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
      width:80px;height:2px;border-radius:0 0 2px 2px;
      background:linear-gradient(90deg,var(--gold-300),var(--gold-500),var(--gold-300));
      opacity:0.9;
    }
    .slug-card h3{
      font-size:26px;font-weight:300;color:var(--text-dark);
      letter-spacing:-0.018em;line-height:1.2;margin-bottom:12px;
    }
    .slug-card p{
      font-size:15px;color:var(--text-body);line-height:1.6;font-weight:300;
      max-width:380px;margin:0 auto 26px;
    }
    .label-cream{
      font-size:12px;font-weight:600;color:var(--gold-500);
      letter-spacing:0.06em;margin-bottom:24px;
      display:inline-flex;align-items:center;gap:14px;
    }
    .label-cream::before,.label-cream.center::after{
      content:'';width:32px;height:1px;background:var(--gold-500);opacity:0.6;display:inline-block;
    }
    .slug-inner h2{
      font-size:clamp(28px,3.4vw,40px);font-weight:300;
      color:var(--text-dark);line-height:1.18;margin-bottom:36px;letter-spacing:-0.02em;
    }
    .slug-inner h2 .em{font-weight:500;color:var(--indigo-deep)}
    .slug-hint{
      margin-top:16px;font-size:12px;color:var(--text-body);opacity:0.65;
      letter-spacing:0.06em;font-weight:400;
    }
    .slug-form{
      display:flex;gap:12px;max-width:640px;margin:0 auto;background:var(--white);
      border:1px solid rgba(10,25,49,0.08);border-radius:14px;padding:8px;
      box-shadow:0 2px 8px rgba(0,0,0,0.04),0 12px 36px rgba(99,102,241,0.06);
      transition:box-shadow 0.4s;
    }
    .slug-dot{width:10px;height:10px;border-radius:50%;background:rgba(0,0,0,0.08);transition:background 0.4s}
    .slug-dot.active{background:var(--gold-500)}
    .slug-form:focus-within{
      box-shadow:0 2px 8px rgba(0,0,0,0.04),0 12px 36px rgba(99,102,241,0.15),0 0 0 1px var(--indigo);
    }
    .slug-form input{
      flex:1;border:none;outline:none;padding:14px 18px;font-size:16px;font-weight:400;
      background:transparent;color:var(--text-dark);
    }
    .slug-form input::placeholder{color:#9aa3b5}
    .slug-form button{
      background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
      color:var(--blue-deep);font-weight:600;font-size:12px;letter-spacing:0.1em;
      text-transform:uppercase;padding:14px 28px;border-radius:10px;border:none;
      cursor:pointer;transition:all 0.3s;white-space:nowrap;
    }
    .slug-form button:hover{box-shadow:0 0 24px rgba(201,162,39,0.35)}

    /* PILLARS — same section CREAM */
    .pillars{padding:20px 0 130px;background:var(--cream);position:relative;overflow:hidden}
    .pillars::before{
      content:'';position:absolute;top:6%;left:-10%;width:520px;height:520px;border-radius:50%;
      background:radial-gradient(circle,rgba(99,102,241,0.22),transparent 65%);
      filter:blur(36px);pointer-events:none;z-index:0;
      animation:pillarOrb1 22s ease-in-out infinite;
    }
    .pillars::after{
      content:'';position:absolute;top:30%;right:-10%;width:460px;height:460px;border-radius:50%;
      background:radial-gradient(circle,rgba(20,184,166,0.20),transparent 65%);
      filter:blur(36px);pointer-events:none;z-index:0;
      animation:pillarOrb2 26s ease-in-out infinite;
    }
    .pillars-aura{display:none}
    .pillars-mesh{
      position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0.4;
      background-image:
        linear-gradient(rgba(10,25,49,0.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(10,25,49,0.025) 1px,transparent 1px);
      background-size:80px 80px;
      mask-image:radial-gradient(circle at 50% 50%,black 30%,transparent 75%);
      -webkit-mask-image:radial-gradient(circle at 50% 50%,black 30%,transparent 75%);
    }
    @keyframes pillarOrb1{
      0%,100%{transform:translate(0,0) scale(1)}
      33%{transform:translate(100px,80px) scale(1.1)}
      66%{transform:translate(60px,-40px) scale(0.95)}
    }
    @keyframes pillarOrb2{
      0%,100%{transform:translate(0,0) scale(1)}
      33%{transform:translate(-120px,60px) scale(1.08)}
      66%{transform:translate(-40px,-80px) scale(0.92)}
    }
    @keyframes pillarOrb3{
      0%,100%{transform:translate(0,0) scale(1)}
      33%{transform:translate(80px,-100px) scale(1.12)}
      66%{transform:translate(-100px,60px) scale(0.9)}
    }
    .pillars-head{max-width:760px;margin:0 auto 72px;text-align:center;position:relative;z-index:1}
    .pillars-head .label-cream{justify-content:center}
    .pillars-head h2{
      font-size:clamp(30px,3.6vw,42px);font-weight:300;
      color:var(--text-dark);line-height:1.18;margin-bottom:22px;letter-spacing:-0.022em;
    }
    .pillars-head h2 .em{font-weight:500;color:var(--gold-500)}
    .pillars-head .ornament{
      width:56px;height:1px;margin:0 auto 22px;position:relative;
      background:linear-gradient(90deg,transparent,var(--gold-500) 50%,transparent);opacity:0.7;
    }
    .pillars-head .ornament::before{
      content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
      width:5px;height:5px;border-radius:50%;background:var(--gold-500);box-shadow:0 0 8px rgba(201,162,39,0.4);
    }
    .pillars-head p{
      font-size:15.5px;color:var(--text-body);line-height:1.75;font-weight:300;max-width:540px;margin:0 auto;
    }
    .pillars-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;position:relative;z-index:1}
    @media(max-width:880px){.pillars-grid{grid-template-columns:1fr;gap:18px}}
    .pillar-card{
      padding:52px 38px 42px;
      background:#ffffff;
      border:1px solid rgba(0,0,0,0.04);border-radius:18px;
      transition:transform 0.5s cubic-bezier(0.22,1,0.36,1),box-shadow 0.5s cubic-bezier(0.22,1,0.36,1),border-color 0.5s cubic-bezier(0.22,1,0.36,1);
      position:relative;overflow:hidden;text-align:center;
      box-shadow:0 1px 3px rgba(0,0,0,0.03),0 6px 16px rgba(0,0,0,0.04);
      display:flex;flex-direction:column;z-index:1;
    }
    .pillar-card::before{
      content:'';position:absolute;top:0;left:50%;width:72px;height:2px;
      transform:translateX(-50%);
      transition:opacity 0.5s;
      opacity:1;border-radius:0 0 2px 2px;
    }
    .pillar-card:nth-child(1)::before{
      background:linear-gradient(90deg,var(--indigo),var(--indigo-deep));
      animation:barNeon1 3.6s ease-in-out infinite;
    }
    .pillar-card:nth-child(2)::before{
      background:linear-gradient(90deg,var(--teal),var(--teal-deep));
      animation:barNeon2 3.6s ease-in-out infinite;animation-delay:1.2s;
    }
    .pillar-card:nth-child(3)::before{
      background:linear-gradient(90deg,var(--violet),var(--violet-deep));
      animation:barNeon3 3.6s ease-in-out infinite;animation-delay:2.4s;
    }
    @keyframes barNeon1{
      0%,100%{width:72px;box-shadow:0 0 0 0 rgba(99,102,241,0)}
      50%{width:104px;box-shadow:0 0 18px 2px rgba(99,102,241,0.55),0 0 36px 4px rgba(99,102,241,0.25)}
    }
    @keyframes barNeon2{
      0%,100%{width:72px;box-shadow:0 0 0 0 rgba(20,184,166,0)}
      50%{width:104px;box-shadow:0 0 18px 2px rgba(20,184,166,0.55),0 0 36px 4px rgba(20,184,166,0.25)}
    }
    @keyframes barNeon3{
      0%,100%{width:72px;box-shadow:0 0 0 0 rgba(168,85,247,0)}
      50%{width:104px;box-shadow:0 0 18px 2px rgba(168,85,247,0.55),0 0 36px 4px rgba(168,85,247,0.25)}
    }
    .pillar-card::after{
      content:'';position:absolute;top:-50px;left:50%;transform:translateX(-50%);
      width:220px;height:220px;border-radius:50%;
      opacity:0;transition:opacity 0.6s;pointer-events:none;
    }
    .pillar-card:nth-child(1)::after{background:radial-gradient(circle,rgba(99,102,241,0.07),transparent 60%)}
    .pillar-card:nth-child(2)::after{background:radial-gradient(circle,rgba(20,184,166,0.07),transparent 60%)}
    .pillar-card:nth-child(3)::after{background:radial-gradient(circle,rgba(168,85,247,0.07),transparent 60%)}
    .pillar-card:hover{
      transform:translateY(-8px);
      box-shadow:0 2px 8px rgba(0,0,0,0.04),0 12px 36px rgba(0,0,0,0.07),0 28px 64px rgba(0,0,0,0.04);
    }
    .pillar-card:nth-child(1):hover{border-color:rgba(99,102,241,0.32);box-shadow:0 2px 8px rgba(0,0,0,0.04),0 12px 36px rgba(99,102,241,0.18),0 28px 80px rgba(99,102,241,0.15)}
    .pillar-card:nth-child(2):hover{border-color:rgba(20,184,166,0.32);box-shadow:0 2px 8px rgba(0,0,0,0.04),0 12px 36px rgba(20,184,166,0.18),0 28px 80px rgba(20,184,166,0.15)}
    .pillar-card:nth-child(3):hover{border-color:rgba(168,85,247,0.32);box-shadow:0 2px 8px rgba(0,0,0,0.04),0 12px 36px rgba(168,85,247,0.18),0 28px 80px rgba(168,85,247,0.15)}
    .pillar-card:hover::after{opacity:1}

    .pillar-card h3{
      font-size:26px;font-weight:300;color:var(--text-dark);
      margin-bottom:14px;letter-spacing:-0.02em;
      position:relative;z-index:1;
    }
    .pillar-card:nth-child(1) h3 .accent{color:var(--indigo-deep);font-weight:500}
    .pillar-card:nth-child(2) h3 .accent{color:var(--teal-deep);font-weight:500}
    .pillar-card:nth-child(3) h3 .accent{color:var(--violet-deep);font-weight:500}

    /* problem chip — the failure mode this card solves */
    .pillar-problem{
      font-size:10.5px;font-weight:500;letter-spacing:2px;text-transform:uppercase;
      color:var(--text-body);opacity:0.55;
      margin:0 auto 16px;display:inline-flex;align-items:center;gap:10px;
      position:relative;z-index:1;
    }
    .pillar-problem::before,.pillar-problem::after{
      content:'';width:14px;height:1px;background:currentColor;opacity:0.5;display:inline-block;
    }

    /* solution headline — the outcome promise (italic editorial) */
    .pillar-solution{
      font-family:'Inter',serif !important;
      font-style:italic;font-weight:300;
      font-size:17px;line-height:1.45;letter-spacing:-0.01em;
      color:var(--text-dark);
      margin:0 auto 22px;max-width:300px;
      position:relative;z-index:1;
    }
    .pillar-card:nth-child(1) .pillar-solution{color:var(--indigo-deep)}
    .pillar-card:nth-child(2) .pillar-solution{color:var(--teal-deep)}
    .pillar-card:nth-child(3) .pillar-solution{color:var(--violet-deep)}

    /* short ornament between solution headline and scenario */
    .pillar-divider{
      width:28px;height:1px;background:rgba(10,25,49,0.12);
      margin:0 auto 22px;position:relative;z-index:1;
    }

    /* scenario — a tiny narrative of enVoy in motion */
    .pillar-scenario{
      font-size:13.5px;color:var(--text-body);line-height:1.65;font-weight:300;
      margin:0 auto 26px;max-width:300px;
      position:relative;z-index:1;
    }
    .pillar-scenario em{
      font-style:normal;font-weight:500;color:var(--text-dark);
    }

    /* capability tags — small inline chips, replaces the bulleted feature dump */
    .pillar-caps{
      display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
      margin:0 auto 24px;position:relative;z-index:1;
    }
    .pillar-caps span{
      font-size:11px;font-weight:500;letter-spacing:0.04em;
      padding:6px 12px;border-radius:20px;
      background:rgba(10,25,49,0.04);color:var(--text-body);
      transition:all 0.3s;
    }
    .pillar-card:nth-child(1) .pillar-caps span{background:rgba(99,102,241,0.06);color:var(--indigo-deep)}
    .pillar-card:nth-child(2) .pillar-caps span{background:rgba(20,184,166,0.07);color:var(--teal-deep)}
    .pillar-card:nth-child(3) .pillar-caps span{background:rgba(168,85,247,0.06);color:var(--violet-deep)}
    .pillar-card:nth-child(1):hover .pillar-caps span{background:rgba(99,102,241,0.12)}
    .pillar-card:nth-child(2):hover .pillar-caps span{background:rgba(20,184,166,0.14)}
    .pillar-card:nth-child(3):hover .pillar-caps span{background:rgba(168,85,247,0.12)}

    /* outcome strip — "what you get" footer of each card */
    .pillar-outcome{
      margin-top:auto;padding-top:22px;
      border-top:1px solid rgba(10,25,49,0.06);
      font-size:13px;color:var(--text-body);line-height:1.6;font-weight:400;
      position:relative;z-index:1;
    }
    .pillar-outcome strong{
      display:block;font-size:10.5px;font-weight:600;
      letter-spacing:1.8px;text-transform:uppercase;
      color:var(--text-dark);margin-bottom:6px;opacity:0.6;
    }
    .pillar-card:nth-child(1) .pillar-outcome strong{color:var(--indigo-deep);opacity:0.85}
    .pillar-card:nth-child(2) .pillar-outcome strong{color:var(--teal-deep);opacity:0.85}
    .pillar-card:nth-child(3) .pillar-outcome strong{color:var(--violet-deep);opacity:0.85}

    /* INDUSTRIES — DARK */
    .verticals{
      padding:120px 0;
      background:linear-gradient(180deg,var(--blue-deep) 0%,var(--blue-900) 100%);
      position:relative;overflow:hidden;
    }
    .verticals .container{position:relative;z-index:6}
    .verticals-head{text-align:center;max-width:720px;margin:0 auto 64px}
    .label-dark{
      font-size:12px;font-weight:600;letter-spacing:0.06em;margin-bottom:24px;
      color:var(--gold-400);
      background:linear-gradient(90deg,var(--gold-400),var(--gold-200),var(--gold-400));
      background-size:200% auto;
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
      animation:shine 6s linear infinite;
      display:inline-flex;align-items:center;gap:14px;
    }
    .label-dark::before,.label-dark.center::after{
      content:'';width:32px;height:1px;background:var(--gold-500);opacity:0.6;display:inline-block;
    }
    .verticals-head .label-dark{justify-content:center}
    .verticals h2{
      font-size:clamp(30px,3.6vw,42px);font-weight:300;
      color:var(--cream);line-height:1.18;margin-bottom:22px;letter-spacing:-0.022em;
    }
    .verticals h2 .em{font-weight:400;color:var(--gold-300)}
    .verticals .v-lede{
      font-size:16px;color:rgba(255,255,255,0.72);line-height:1.8;font-weight:300;
      max-width:560px;margin:0 auto;
    }
    /* one full-width horizontal box per industry */
    .verticals-grid{
      display:flex;flex-direction:column;gap:14px;max-width:920px;margin:0 auto;
    }
    .vertical-cell{
      padding:24px 34px;
      background:linear-gradient(165deg,rgba(255,255,255,0.04) 0%,rgba(255,255,255,0.01) 100%);
      border:1px solid rgba(255,255,255,0.06);
      border-radius:16px;
      backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
      transition:all 0.45s cubic-bezier(0.4,0,0.2,1);
      position:relative;overflow:hidden;text-align:center;
      text-decoration:none;color:inherit;display:block;
    }
    .vertical-cell::before{
      content:'';position:absolute;inset:0;border-radius:16px;
      background:radial-gradient(ellipse at 30% 0%,rgba(201,162,39,0.1) 0%,transparent 60%);
      opacity:0;transition:opacity 0.5s;
    }
    .vertical-cell::after{
      content:'';position:absolute;top:-1px;left:20%;right:20%;height:1px;
      background:linear-gradient(90deg,transparent,rgba(201,162,39,0.3),transparent);
      opacity:0;transition:opacity 0.5s;
    }
    .vertical-cell:hover{
      transform:translateY(-4px);
      border-color:rgba(201,162,39,0.15);
      box-shadow:0 8px 40px rgba(0,0,0,0.3),0 0 60px rgba(201,162,39,0.08);
      background:linear-gradient(165deg,rgba(255,255,255,0.06) 0%,rgba(255,255,255,0.02) 100%);
    }
    .vertical-cell:hover::before{opacity:1}
    .vertical-cell:hover::after{opacity:1}
    .v-icon{
      margin:0 auto 14px;color:rgba(255,255,255,0.28);
      transition:color 0.4s,transform 0.4s;
    }
    .vertical-cell:hover .v-icon{color:var(--gold-400);transform:translateY(-2px)}
    .vertical-cell h3{
      font-size:25px;font-weight:600;color:rgba(255,255,255,0.94);margin:0 0 8px;
      transition:color 0.4s ease;letter-spacing:-0.015em;position:relative;z-index:1;
    }
    .vertical-cell:hover h3{color:var(--gold-300)}
    .vertical-upside{
      font-weight:400;color:var(--gold-300);font-size:14.5px;line-height:1.5;margin:0;
      position:relative;z-index:1;opacity:0.9;
    }
    .vertical-cell:hover .vertical-upside{opacity:1}
    .vertical-cell p{
      grid-column:2;font-size:13.5px;color:rgba(255,255,255,0.55);
      line-height:1.65;font-weight:300;margin:4px 0 0;position:relative;z-index:1;
    }
    .vertical-cell:hover p{color:rgba(255,255,255,0.72)}
    .vertical-cell .v-tag{
      font-size:10px;color:rgba(255,255,255,0.3);letter-spacing:1.8px;
      text-transform:uppercase;font-weight:500;margin-top:16px;
      position:relative;z-index:1;display:block;
      transition:color 0.4s;
    }
    .vertical-cell:hover .v-tag{color:rgba(255,255,255,0.5)}
    .v-arrow{display:none}

    /* HOW ENVOY OPERATES — end-to-end flow (cream, glazy) */
    .flow{padding:120px 0;background:var(--cream);position:relative;overflow:hidden}
    .flow-mesh{
      position:absolute;inset:0;pointer-events:none;
      background:
        radial-gradient(440px 340px at 16% 26%,rgba(201,162,39,0.06),transparent 70%),
        radial-gradient(480px 380px at 86% 76%,rgba(99,102,241,0.045),transparent 70%);
    }
    .flow-head{text-align:center;max-width:760px;margin:0 auto 76px;position:relative;z-index:1}
    .flow-head .label-cream{justify-content:center}
    .flow-head h2{
      font-size:clamp(30px,3.6vw,42px);font-weight:300;
      color:var(--text-dark);line-height:1.18;letter-spacing:-0.02em;
    }
    .flow-head h2 .em{font-weight:500;color:var(--gold-500)}
    .flow-sub{
      margin:18px auto 0;max-width:600px;
      font-size:15.5px;line-height:1.7;font-weight:300;color:var(--text-body);
    }

    .flow-track{position:relative;z-index:1;max-width:1040px;margin:0 auto}

    /* connector + a progress fill driven by the SAME JS tick as the active node,
       so the glowing head lands on a node exactly as it lights up */
    .flow-line{
      position:absolute;top:42px;left:12.5%;right:12.5%;height:2px;
      background:rgba(201,162,39,0.14);border-radius:2px;
    }
    .flow-fill{
      position:absolute;left:0;top:0;height:100%;width:calc(var(--p,0) * 100%);
      background:linear-gradient(90deg,rgba(201,162,39,0.30),rgba(201,162,39,0.7));
      border-radius:2px;
      transition:width 0.6s cubic-bezier(0.33,0,0.2,1);
    }
    /* the soft glowing head that rides the leading edge of the fill */
    .flow-fill::after{
      content:'';position:absolute;right:0;top:50%;width:8px;height:8px;
      transform:translate(50%,-50%);border-radius:50%;
      background:var(--gold-400);
      box-shadow:0 0 6px 2px rgba(201,162,39,0.30);
    }

    .flow-steps{
      list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
      gap:24px;position:relative;
    }
    .flow-step{
      text-align:center;padding:0 8px;
      opacity:0;transform:translateY(22px);
    }
    .flow-track.in .flow-step{
      animation:heroFadeUp 0.9s cubic-bezier(0.22,1,0.36,1) forwards;
      animation-delay:calc(var(--i) * 0.13s + 0.05s);
    }

    /* glazy node — glass disc with a soft top sheen */
    .flow-node{
      position:relative;width:84px;height:84px;margin:0 auto 24px;border-radius:50%;
      display:flex;align-items:center;justify-content:center;color:var(--text-body);
      background:linear-gradient(155deg,#ffffff 0%,#f3f4f0 100%);
      border:1px solid rgba(10,25,49,0.07);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        inset 0 -7px 15px rgba(10,25,49,0.03),
        0 10px 28px rgba(10,25,49,0.06);
      transition:transform 0.5s cubic-bezier(0.25,0.8,0.35,1),
                 color 0.5s ease,border-color 0.5s ease,box-shadow 0.5s ease,background 0.5s ease;
    }
    .flow-node::before{
      content:'';position:absolute;inset:3px;border-radius:50%;pointer-events:none;
      background:radial-gradient(120% 78% at 50% 6%,rgba(255,255,255,0.9),transparent 56%);
      opacity:0.7;transition:opacity 0.7s ease;
    }
    .flow-node svg{width:31px;height:31px;position:relative;z-index:1;transition:transform 0.7s cubic-bezier(0.22,1,0.36,1)}
    .flow-num{
      position:absolute;top:-8px;right:-6px;z-index:2;font-size:10px;font-weight:600;
      letter-spacing:0.5px;color:var(--gold-500);
      background:linear-gradient(155deg,#fff,#f3f4f0);
      padding:3px 7px;border-radius:20px;border:1px solid rgba(201,162,39,0.22);
      box-shadow:0 2px 6px rgba(10,25,49,0.06);
      transition:background 0.6s ease,color 0.6s ease,border-color 0.6s ease;
    }
    .flow-step h3{
      font-size:16px;font-weight:500;color:var(--text-dark);
      letter-spacing:-0.01em;margin-bottom:10px;
    }
    .flow-step p{
      font-size:13.5px;line-height:1.62;font-weight:300;color:var(--text-body);
      max-width:205px;margin:0 auto;
    }

    /* active — JS glides .is-active 1→2→3→4; glossy gold disc */
    .flow-step.is-active .flow-node,
    .flow-step:hover .flow-node{
      transform:translateY(-2px) scale(1.035);
      background:linear-gradient(155deg,#fffefa 0%,#fcf6e3 100%);
      border-color:rgba(201,162,39,0.45);color:var(--gold-500);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        0 0 0 4px rgba(201,162,39,0.05),
        0 12px 26px rgba(201,162,39,0.12);
    }
    .flow-step.is-active .flow-node::before,
    .flow-step:hover .flow-node::before{opacity:1}
    .flow-step.is-active .flow-node svg{transform:scale(1.02)}
    .flow-step.is-active .flow-num{background:linear-gradient(155deg,var(--gold-400),var(--gold-500));color:#fff;border-color:var(--gold-500)}

    /* glow-up — a soft, slow bloom when the fill head reaches the node (no pop) */
    .flow-node.reached{animation:flowGlowUp 1s cubic-bezier(0.33,0,0.2,1)}
    @keyframes flowGlowUp{
      0%{
        box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 0 0 2px rgba(201,162,39,0.05),0 12px 26px rgba(201,162,39,0.12);
      }
      45%{
        box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 0 0 6px rgba(201,162,39,0.07),0 0 24px 4px rgba(201,162,39,0.22);
      }
      100%{
        box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 0 0 4px rgba(201,162,39,0.05),0 12px 26px rgba(201,162,39,0.12);
      }
    }

    /* stats folded into the path */
    .flow-proof{
      display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
      gap:14px 0;margin-top:68px;position:relative;z-index:1;
    }
    .flow-proof .fp{
      font-size:13px;letter-spacing:0.04em;color:var(--text-body);font-weight:400;
      display:inline-flex;align-items:baseline;gap:7px;padding:0 30px;
    }
    .flow-proof .fp + .fp{border-left:1px solid rgba(10,25,49,0.10)}
    .flow-proof .fp b{font-size:22px;font-weight:300;color:var(--gold-500);letter-spacing:-0.02em}
    .flow-proof .fp b i{font-style:normal;font-size:14px;color:var(--gold-400)}

    @media(max-width:760px){
      .flow{padding:84px 0}
      .flow-head{margin-bottom:44px}
      .flow-head h2{font-size:clamp(25px,7vw,32px)}
      /* centred vertical flow — nodes and labels stacked on a single centre line */
      .flow-steps{grid-template-columns:1fr;gap:32px;text-align:center;max-width:none;margin:0 auto}
      .flow-step{display:block;text-align:center;padding:0}
      .flow-node{margin:0 auto 14px}
      .flow-step h3{
        position:relative;z-index:2;display:inline-block;margin:0;
        background:var(--cream);padding:3px 16px;
      }
      /* connector runs straight down the centre; nodes + labels paint over it (masking it) */
      .flow-line{
        top:42px;bottom:0;left:50%;right:auto;width:2px;height:auto;
        transform:translateX(-50%);
        background:rgba(201,162,39,0.14);
      }
      .flow-fill{
        width:100%;height:calc(var(--p,0) * 100%);
        background:linear-gradient(180deg,rgba(201,162,39,0.30),rgba(201,162,39,0.7));
        transition:height 0.6s cubic-bezier(0.33,0,0.2,1);
      }
      .flow-fill::after{top:auto;bottom:0;left:50%;right:auto;transform:translate(-50%,50%)}
      .flow-proof{flex-direction:column;gap:16px;margin-top:48px}
      .flow-proof .fp{padding:0}
      .flow-proof .fp + .fp{border-left:0}
    }

    @media(prefers-reduced-motion:reduce){
      .flow-fill{transition:none}
      .flow-node.reached{animation:none}
      .flow-track.in .flow-step{animation:none;opacity:1;transform:none}
      .flow-step.is-active .flow-node{transform:none}
    }

    /* FAQ — CREAM */
    .faq{padding:110px 0;background:var(--cream);position:relative;overflow:hidden}
    .faq::before{
      content:'';position:absolute;top:-20%;left:-10%;width:520px;height:520px;border-radius:50%;
      background:radial-gradient(circle,rgba(99,102,241,0.04),transparent 60%);pointer-events:none;
    }
    .faq::after{
      content:'';position:absolute;bottom:-20%;right:-10%;width:480px;height:480px;border-radius:50%;
      background:radial-gradient(circle,rgba(201,162,39,0.05),transparent 60%);pointer-events:none;
    }
    .faq-head{text-align:center;max-width:720px;margin:0 auto 56px;position:relative;z-index:1}
    .faq-head .label-cream{justify-content:center}
    .faq-head h2{
      font-size:clamp(30px,3.6vw,42px);font-weight:300;
      color:var(--text-dark);line-height:1.18;letter-spacing:-0.022em;margin-bottom:18px;
    }
    .faq-head h2 .em{font-weight:500;color:var(--gold-500)}
    .faq-head p{
      font-size:16px;color:var(--text-body);line-height:1.75;font-weight:300;
      max-width:560px;margin:0 auto;
    }
    .faq-grid{
      max-width:780px;margin:0 auto;
      display:grid;grid-template-columns:1fr;gap:12px;
      position:relative;z-index:1;
    }
    .faq-item{
      background:var(--white);border:1px solid rgba(10,25,49,0.06);border-radius:14px;
      transition:all 0.35s cubic-bezier(0.22,1,0.36,1);overflow:hidden;
      box-shadow:0 1px 3px rgba(0,0,0,0.02),0 4px 12px rgba(0,0,0,0.03);
    }
    .faq-item:hover{
      border-color:rgba(201,162,39,0.22);
      box-shadow:0 2px 6px rgba(0,0,0,0.03),0 12px 28px rgba(201,162,39,0.07);
    }
    .faq-item summary{
      list-style:none;cursor:pointer;
      padding:22px 26px;
      display:flex;align-items:center;justify-content:space-between;gap:18px;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary::marker{display:none}
    .faq-item summary h3{
      font-size:16px;font-weight:500;color:var(--text-dark);
      letter-spacing:-0.01em;line-height:1.45;margin:0;flex:1;
    }
    .faq-toggle{
      flex-shrink:0;width:26px;height:26px;border-radius:50%;position:relative;
      border:1px solid rgba(201,162,39,0.3);background:rgba(201,162,39,0.05);
      transition:all 0.5s cubic-bezier(0.22,1,0.36,1);
    }
    .faq-toggle::before,.faq-toggle::after{
      content:'';position:absolute;top:50%;left:50%;background:var(--gold-500);
      transition:transform 0.5s cubic-bezier(0.22,1,0.36,1),background 0.5s ease;
    }
    .faq-toggle::before{width:10px;height:1.5px;transform:translate(-50%,-50%)}
    .faq-toggle::after{width:1.5px;height:10px;transform:translate(-50%,-50%)}
    .faq-item[open] .faq-toggle{
      background:var(--gold-500);border-color:var(--gold-500);transform:rotate(180deg);
    }
    .faq-item[open] .faq-toggle::before,
    .faq-item[open] .faq-toggle::after{background:#fff}
    .faq-item[open] .faq-toggle::after{transform:translate(-50%,-50%) scaleY(0)}
    .faq-item{
      transition:border-color 0.5s cubic-bezier(0.22,1,0.36,1),box-shadow 0.5s cubic-bezier(0.22,1,0.36,1);
    }
    .faq-item[open]{
      border-color:rgba(201,162,39,0.25);
      box-shadow:0 2px 8px rgba(0,0,0,0.03),0 12px 32px rgba(201,162,39,0.08);
    }

    /* buttery smooth height — modern browsers (Chrome 129+, Safari 18+) */
    @supports (interpolate-size:allow-keywords){
      :root{interpolate-size:allow-keywords}
      .faq-item::details-content{
        block-size:0;overflow:hidden;opacity:0;
        transition:
          block-size 0.55s cubic-bezier(0.22,1,0.36,1),
          opacity 0.45s cubic-bezier(0.22,1,0.36,1),
          content-visibility 0.55s allow-discrete;
      }
      .faq-item[open]::details-content{block-size:auto;opacity:1}
    }

    /* fallback for older browsers — opacity-only fade (no transform shake) */
    @supports not (interpolate-size:allow-keywords){
      .faq-body{animation:faqFade 0.5s cubic-bezier(0.22,1,0.36,1) both}
      @keyframes faqFade{from{opacity:0}to{opacity:1}}
    }

    .faq-body{padding:0 26px 24px}
    .faq-body p{
      font-size:14.5px;color:var(--text-body);line-height:1.7;font-weight:400;margin:0;
    }
    .faq-body p strong{color:var(--text-dark);font-weight:500}

    /* CONTACT — DARK */
    .contact-section{
      padding:120px 0;
      background:linear-gradient(180deg,var(--blue-900) 0%,var(--blue-deep) 100%);
      position:relative;overflow:hidden;
    }
    .contact-section .container{position:relative;z-index:6;text-align:center;max-width:760px}
    .contact-section .label-dark{justify-content:center}
    .contact-section .label-dark::before{display:none}
    .contact-section h2{
      font-size:clamp(28px,3.4vw,42px);font-weight:300;
      color:var(--cream);line-height:1.22;letter-spacing:-0.02em;margin-bottom:28px;
      text-wrap:balance;
      max-width:720px;margin-left:auto;margin-right:auto;
    }
    .contact-section h2 .em{font-weight:400;color:var(--gold-300)}
    .contact-section p{
      font-size:17px;color:rgba(255,255,255,0.7);line-height:1.7;font-weight:300;
      max-width:560px;margin:0 auto 44px;
    }

    /* FOOTER */
    footer{
      padding:60px 0 40px;background:var(--blue-deep);color:rgba(255,255,255,0.6);
      border-top:1px solid rgba(201,162,39,0.08);
    }
    .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
    @media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}
    .foot-col h4{
      font-size:10.5px;letter-spacing:2.4px;text-transform:uppercase;
      color:var(--gold-400);margin-bottom:22px;font-weight:600;
    }
    .foot-col a{
      display:block;color:rgba(255,255,255,0.6);text-decoration:none;font-size:14px;
      margin-bottom:10px;transition:color 0.25s;font-weight:400;
    }
    .foot-col a:hover{color:var(--gold-300)}
    .foot-tag{
      font-weight:300;font-size:14px;color:rgba(255,255,255,0.55);
      margin-top:18px;max-width:320px;line-height:1.7;
    }
    .foot-logo-wrap{display:inline-flex;align-items:baseline;gap:10px;margin-bottom:18px}
    .foot-logo{
      font-weight:300;font-size:26px;color:var(--cream);letter-spacing:-0.025em;
      text-decoration:none;display:inline-flex;align-items:baseline;
    }
    .foot-logo .V{font-weight:500;color:var(--gold-400)}
    .foot-by{
      font-size:10px;color:rgba(255,255,255,0.4);letter-spacing:1.4px;
      font-weight:500;text-transform:uppercase;text-decoration:none;transition:color 0.25s;
    }
    .foot-by:hover{color:var(--gold-300)}
    .foot-bottom{
      padding-top:36px;border-top:1px solid rgba(255,255,255,0.06);
      display:flex;justify-content:space-between;font-size:12.5px;
      color:rgba(255,255,255,0.4);flex-wrap:wrap;gap:16px;font-weight:400;
    }

    /* ============================================================
       SUB-PAGES — industry / about / contact. Reusable across all
       per-sector and content pages. Built on the same tokens.
       ============================================================ */
    .subhero{
      padding:194px 0 116px;
      background:linear-gradient(180deg,var(--blue-deep) 0%,var(--blue-900) 100%);
      position:relative;overflow:hidden;text-align:center;
    }
    @media(max-width:880px){.subhero{padding:132px 0 76px}}
    .subhero .container{position:relative;z-index:6}
    .subhero .breadcrumb{
      font-size:34px;color:rgba(255,255,255,0.9);margin-bottom:30px;
      letter-spacing:-0.02em;text-align:left;font-weight:300;line-height:1.1;
    }
    @media(max-width:760px){.subhero .breadcrumb{font-size:24px}}
    .subhero .breadcrumb a{color:rgba(255,255,255,0.55);text-decoration:none;transition:color 0.25s}
    .subhero .breadcrumb a:hover{color:var(--gold-300)}
    .subhero .eyebrow{
      font-size:14px;font-weight:600;letter-spacing:0.04em;
      color:var(--gold-400);margin-bottom:24px;
      display:inline-flex;align-items:center;gap:13px;justify-content:center;
    }
    .subhero .eyebrow::before,.subhero .eyebrow::after{
      content:'';width:26px;height:1px;background:var(--gold-500);opacity:0.5;display:inline-block;
    }
    .subhero h1{
      font-size:clamp(30px,4vw,46px);font-weight:500;line-height:1.16;
      letter-spacing:-0.03em;color:#fff;max-width:820px;margin:0 auto 24px;text-wrap:balance;
    }
    .subhero h1 .em{font-weight:600;color:var(--gold-300)}
    .subhero p{
      font-size:18.5px;font-weight:300;line-height:1.7;color:rgba(255,255,255,0.78);
      max-width:660px;margin:0 auto;
    }

    .sub-section{padding:96px 0;position:relative}
    @media(max-width:760px){.sub-section{padding:64px 0}}
    .sub-section.cream{background:var(--cream)}
    .sub-head{text-align:center;max-width:680px;margin:0 auto 52px}
    .sub-head .label-cream,.sub-head .label-dark{justify-content:center}
    .sub-head h2{
      font-size:clamp(26px,3.2vw,38px);font-weight:500;color:var(--text-dark);
      line-height:1.22;letter-spacing:-0.02em;
    }
    .sub-head h2 .em{color:var(--gold-500);font-weight:600}
    .sub-head p{
      font-size:16px;color:var(--text-body);line-height:1.7;font-weight:300;
      margin:14px auto 0;max-width:540px;
    }
    /* single-line positioning statement (no feature list) */
    .sub-section .statement{
      text-align:center;max-width:900px;margin:0 auto;
      font-size:clamp(27px,3.8vw,44px);font-weight:300;
      color:var(--text-dark);line-height:1.26;letter-spacing:-0.025em;
    }
    .sub-section .statement .V{font-weight:500;color:var(--gold-500)}
    .sub-section .statement .em{color:var(--gold-500);font-weight:500}
    .sub-section .statement-sub{
      text-align:center;max-width:660px;margin:22px auto 0;
      font-size:16px;line-height:1.7;font-weight:300;color:var(--text-body);
    }
    .sub-section .statement-sub .em{color:var(--gold-500);font-weight:400;font-style:italic}
    /* hospital workflows — one engine, hub & spokes (no scatter of separate tools) */
    .engine{
      --r:226px;
      position:relative;width:min(calc(var(--r) * 2 + 110px), 100%);aspect-ratio:1;
      margin:48px auto 0;
    }
    .engine-ring{
      position:absolute;top:50%;left:50%;width:calc(var(--r) * 2);height:calc(var(--r) * 2);
      transform:translate(-50%,-50%);border:1px solid rgba(201,162,39,0.22);border-radius:50%;
    }
    .engine-spokes i{
      position:absolute;top:50%;left:50%;height:1px;width:var(--r);transform-origin:0 50%;
      transform:rotate(calc(var(--i) * (360deg / 11) - 90deg));
      background:linear-gradient(90deg,rgba(201,162,39,0.05),rgba(201,162,39,0.32));
    }
    .engine-hub{
      position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
      width:96px;height:96px;border-radius:50%;
      display:flex;align-items:center;justify-content:center;
      background:linear-gradient(155deg,#fff,#f3f4f0);border:1px solid rgba(201,162,39,0.30);
      box-shadow:0 10px 30px rgba(201,162,39,0.14),inset 0 1px 0 #fff;
      font-size:22px;font-weight:300;letter-spacing:-0.02em;color:var(--text-dark);
    }
    .engine-hub .V{color:var(--gold-500);font-weight:500}
    .engine-nodes{list-style:none}
    .engine-nodes li{
      position:absolute;top:50%;left:50%;
      --ang:calc(var(--i) * (360deg / 11) - 90deg);
      transform:rotate(var(--ang)) translate(var(--r)) rotate(calc(-1 * var(--ang)));
    }
    .engine-nodes li span{
      position:absolute;top:0;left:0;transform:translate(-50%,-50%);white-space:nowrap;
      font-size:13px;font-weight:500;color:#5f6368;
      background:#fff;padding:6px 13px;border-radius:20px;
      border:1px solid rgba(10,25,49,0.06);box-shadow:0 1px 3px rgba(10,25,49,0.16),0 1px 2px rgba(10,25,49,0.10);
    }
    @media(max-width:760px){
      .engine{--r:132px;margin-top:36px}
      .engine-hub{width:74px;height:74px;font-size:16px}
      .engine-nodes li span{font-size:10.5px;padding:4px 9px}
    }
    @media(max-width:400px){
      .engine{--r:116px}
      .engine-nodes li span{font-size:9.5px;padding:3px 7px}
    }

    /* MEDICAL — commercial sections (gap→outcome, features, integrations, security) */
    .impact{padding:96px 0;position:relative;overflow:hidden;background:linear-gradient(180deg,var(--blue-deep) 0%,var(--blue-900) 100%)}
    @media(max-width:760px){.impact{padding:68px 0}}
    .impact .container{position:relative;z-index:6}
    .impact-promise{
      text-align:center;max-width:760px;margin:0 auto 48px;
      font-size:clamp(24px,3vw,34px);font-weight:300;line-height:1.35;
      color:var(--cream);letter-spacing:-0.015em;
    }
    .impact-promise .em{color:var(--gold-300);font-weight:400}
    .impact-split{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:920px;margin:0 auto}
    .impact-col{padding:0 48px}
    .impact-col--win{border-left:1px solid rgba(201,162,39,0.16)}
    @media(max-width:760px){
      .impact-split{grid-template-columns:1fr;gap:30px}
      .impact-col{padding:0}
      .impact-col--win{border-left:0;border-top:1px solid rgba(201,162,39,0.16);padding-top:30px}
    }
    .impact-col ul{list-style:none}
    .impact-gap li,.impact-out li{font-size:13.5px;line-height:1.4;font-weight:300;padding:8px 0;display:flex;align-items:baseline;gap:10px}
    .impact-gap li{color:rgba(255,255,255,0.46);border-bottom:1px solid rgba(255,255,255,0.06)}
    .impact-gap li::before{content:'✕';color:rgba(255,255,255,0.3);font-size:10px}
    .impact-out li{color:rgba(255,255,255,0.82);border-bottom:1px solid rgba(201,162,39,0.13)}
    .impact-out li::before{content:'✔';color:var(--gold-400);font-size:10px}
    .impact-rev{text-align:center;margin:36px auto 0;font-size:17px;font-weight:300;color:rgba(255,255,255,0.72);position:relative;z-index:6}
    .impact-rev .em{color:var(--gold-300);font-weight:400}

    /* HANDLED AUTOMATICALLY — premium navy + gold (the layer between hospital & patient) */
    .auto-std{position:relative;overflow:hidden;padding:118px 0;background:linear-gradient(155deg,#060d1b 0%,#091529 56%,#0b1b34 100%)}
    @media(max-width:760px){.auto-std{padding:74px 0}}
    .auto-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(620px 440px at 80% 16%,rgba(201,162,39,0.16),transparent 70%),radial-gradient(560px 420px at 10% 92%,rgba(99,102,241,0.10),transparent 70%)}
    .auto-std .container{position:relative;z-index:2}
    .auto-head{text-align:center;max-width:720px;margin:0 auto 54px}
    .auto-eyebrow{font-size:12px;font-weight:600;letter-spacing:0.05em;color:var(--gold-400);margin-bottom:18px}
    .auto-head h2{font-size:clamp(28px,3.6vw,42px);font-weight:300;color:var(--cream);line-height:1.2;letter-spacing:-0.02em}
    .auto-head h2 .em{font-weight:500;color:var(--gold-300);background:linear-gradient(90deg,var(--gold-300),var(--gold-500));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
    .auto-lede{margin-top:20px;font-size:16px;font-weight:300;line-height:1.7;color:rgba(255,255,255,0.62)}
    .auto-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1080px;margin:0 auto}
    @media(max-width:960px){.auto-grid{grid-template-columns:1fr 1fr}}
    @media(max-width:560px){.auto-grid{grid-template-columns:1fr;max-width:420px}}
    .auto-box{
      position:relative;padding:34px 28px;border-radius:20px;text-align:center;
      background:linear-gradient(165deg,rgba(201,162,39,0.07) 0%,rgba(255,255,255,0.02) 100%);
      border:1px solid rgba(201,162,39,0.15);
      box-shadow:0 22px 56px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.05);
      backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
      transition:transform 0.5s cubic-bezier(0.22,1,0.36,1),border-color 0.5s ease,box-shadow 0.5s ease;
    }
    .auto-box:hover{transform:translateY(-6px);border-color:rgba(201,162,39,0.4);box-shadow:0 30px 70px rgba(0,0,0,0.5),0 0 48px rgba(201,162,39,0.16)}
    .auto-ico{
      display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:15px;
      background:linear-gradient(155deg,rgba(201,162,39,0.18),rgba(201,162,39,0.04));
      border:1px solid rgba(201,162,39,0.26);color:var(--gold-300);margin-bottom:20px;
    }
    .auto-ico svg{width:25px;height:25px}
    .auto-box h3{font-size:17px;font-weight:500;color:var(--cream);letter-spacing:-0.01em;margin-bottom:11px}
    .auto-box p{font-size:13.5px;font-weight:300;line-height:1.62;color:rgba(255,255,255,0.6)}

    /* engine circle on a dark section (departments) */
    .dark-section .engine-ring{border-color:rgba(201,162,39,0.24)}
    .dark-section .engine-hub{
      background:linear-gradient(155deg,rgba(255,255,255,0.10),rgba(255,255,255,0.03));
      border-color:rgba(201,162,39,0.4);color:#fff;
      box-shadow:0 10px 30px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .dark-section .engine-hub .V{color:var(--gold-300)}
    .dark-section .engine-nodes li span{
      background:#fff;border-color:transparent;
      color:#5f6368;box-shadow:0 2px 10px rgba(0,0,0,0.30);
    }

    /* pill rows — features / integrations / security */
    .pill-row{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:880px;margin:0 auto}
    .pill-row li{
      padding:11px 20px;border-radius:30px;font-size:14px;font-weight:400;letter-spacing:0.01em;
      background:var(--white);border:1px solid rgba(10,25,49,0.09);color:var(--text-dark);
      box-shadow:0 3px 10px rgba(10,25,49,0.04);
      display:inline-flex;align-items:center;
    }
    .pill-row.check li::before{content:'✔';color:var(--gold-500);font-weight:600;margin-right:9px}
    .dark-section .pill-row li{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.12);color:rgba(255,255,255,0.84);box-shadow:none}
    .dark-section .pill-row.check li::before{color:var(--gold-400)}
    .sec-note{
      text-align:center;max-width:560px;margin:30px auto 0;
      font-size:13.5px;line-height:1.6;font-weight:300;font-style:italic;color:rgba(255,255,255,0.5);
    }
    .sec-note.light{color:var(--text-body);opacity:0.72}

    /* WHAT IS ENVOY — engine across every channel */
    .whatis{padding:96px 0;position:relative;overflow:hidden;background:linear-gradient(180deg,var(--blue-900) 0%,var(--blue-deep) 100%)}
    @media(max-width:760px){.whatis{padding:66px 0}}
    .whatis .container{position:relative;z-index:6;text-align:center}
    .whatis-eyebrow{font-size:12px;font-weight:600;letter-spacing:0.06em;color:var(--gold-400);margin-bottom:20px}
    .whatis-options{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;max-width:600px;margin:0 auto 30px}
    .whatis-options li{font-size:13.5px;color:rgba(255,255,255,0.4);font-weight:300;padding:7px 15px;border:1px solid rgba(255,255,255,0.1);border-radius:30px}
    .whatis-answer{font-size:clamp(23px,3vw,33px);font-weight:300;line-height:1.34;color:var(--cream);letter-spacing:-0.015em;max-width:760px;margin:0 auto}
    .whatis-answer .em{color:var(--gold-300);font-weight:400}
    .whatis-channels{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;margin:34px auto 0}
    .whatis-channels li{font-size:14px;color:rgba(255,255,255,0.7);font-weight:400}
    .whatis-channels li:not(:first-child)::before{content:'·';color:var(--gold-400);margin:0 16px;opacity:0.7}

    /* WHAT IT ADDS UP TO — business outcome cards */
    .ceo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:940px;margin:40px auto 0}
    @media(max-width:760px){.ceo-grid{grid-template-columns:1fr 1fr;gap:14px}}
    .ceo-card{
      background:var(--white);border:1px solid rgba(10,25,49,0.08);border-radius:16px;
      padding:36px 22px;text-align:center;box-shadow:0 4px 18px rgba(10,25,49,0.04);
      transition:transform 0.45s cubic-bezier(0.22,1,0.36,1),box-shadow 0.45s ease;
    }
    .ceo-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(201,162,39,0.13)}
    .ceo-ico{
      display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;
      background:linear-gradient(155deg,#fffefa,#fcf6e3);border:1px solid rgba(201,162,39,0.26);
      color:var(--gold-500);margin-bottom:16px;
    }
    .ceo-ico svg{width:24px;height:24px}
    .ceo-card h3{font-size:16px;font-weight:500;color:var(--text-dark);letter-spacing:-0.01em}

    /* "on top of your HMS" — sub-line under the platform heading (cream) */
    .hms-note{
      text-align:center;max-width:600px;margin:16px auto 0;
      font-size:18px;font-weight:400;line-height:1.5;color:var(--text-dark);
    }
    .hms-note .em{color:var(--gold-500);font-weight:600}

    /* consolidated platform stack (does it all · fits · secured) */
    .platform-stack{display:flex;flex-direction:column;gap:32px;max-width:860px;margin:0 auto}
    .pill-sub{
      text-align:center;font-size:12px;letter-spacing:0.04em;font-weight:600;
      color:var(--text-body);opacity:0.75;margin-bottom:15px;
    }
    /* capability beats — calm editorial: numbered, airy, large light names */
    .does-list{list-style:none;max-width:720px;margin:0 auto}
    .does-list li{
      display:grid;grid-template-columns:54px 1fr;gap:28px;align-items:start;
      padding:30px 4px;border-top:1px solid rgba(10,25,49,0.09);
    }
    .does-list li:last-child{border-bottom:1px solid rgba(10,25,49,0.09)}
    .does-num{font-size:13px;font-weight:500;color:var(--gold-500);letter-spacing:0.08em;padding-top:8px}
    .does-name{font-size:22px;font-weight:400;color:var(--text-dark);letter-spacing:-0.015em;line-height:1.2;margin-bottom:9px}
    .does-how{font-size:15.5px;font-weight:300;color:var(--text-body);line-height:1.65;max-width:560px}
    @media(max-width:600px){
      .does-list li{grid-template-columns:32px 1fr;gap:16px;padding:24px 2px}
      .does-name{font-size:19px}
      .does-how{font-size:14.5px}
    }

    /* demo CTA folded into the wayfinding section */
    .connect-cta{text-align:center;margin-top:54px;position:relative;z-index:6}
    .connect-cta-note{margin-top:15px;font-size:13px;font-weight:300;color:rgba(255,255,255,0.5)}

    /* wayfinding — one simple guided path, desk to desk */
    .waypath{
      display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
      max-width:820px;margin:0 auto;position:relative;z-index:6;row-gap:14px;
    }
    .waypath span{font-size:16px;font-weight:400;color:rgba(255,255,255,0.84);letter-spacing:0.01em;white-space:nowrap}
    .waypath span:not(:first-child)::before{
      content:'→';color:var(--gold-400);opacity:0.65;margin:0 18px;font-size:14px;
    }
    @media(max-width:600px){
      .waypath span{font-size:14px}
      .waypath span:not(:first-child)::before{margin:0 11px}
    }

    .feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:920px;margin:0 auto}
    @media(max-width:760px){.feature-grid{grid-template-columns:1fr;gap:16px}}
    .feature{
      padding:36px 34px;background:#fff;border:1px solid rgba(0,0,0,0.05);border-radius:16px;
      text-align:center;
      box-shadow:0 1px 3px rgba(0,0,0,0.03),0 6px 16px rgba(0,0,0,0.03);
      transition:transform 0.4s cubic-bezier(0.22,1,0.36,1),box-shadow 0.4s cubic-bezier(0.22,1,0.36,1);
    }
    .feature:hover{transform:translateY(-4px);box-shadow:0 2px 8px rgba(0,0,0,0.04),0 14px 32px rgba(201,162,39,0.08)}
    .feature .f-num{
      font-size:11px;font-weight:600;letter-spacing:2px;color:var(--gold-500);
      text-transform:uppercase;margin-bottom:14px;display:block;
    }
    .feature h3{
      font-size:19.5px;font-weight:600;color:var(--text-dark);margin-bottom:10px;letter-spacing:-0.01em;
    }
    .feature p{font-size:15px;color:var(--text-body);line-height:1.7;font-weight:400}

    .prose{max-width:680px;margin:0 auto}
    .prose p{font-size:16.5px;color:var(--text-body);line-height:1.8;font-weight:300;margin-bottom:22px}
    .prose p:last-child{margin-bottom:0}
    .prose p strong{color:var(--text-dark);font-weight:600}
    .prose h3{
      font-size:20px;font-weight:600;color:var(--text-dark);margin:36px 0 14px;letter-spacing:-0.015em;
    }

    .eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:920px;margin:0 auto}
    @media(max-width:760px){.eco-grid{grid-template-columns:1fr;gap:16px}}
    .eco-card{
      padding:30px 28px;background:#fff;border:1px solid rgba(0,0,0,0.05);border-radius:16px;
      text-decoration:none;display:block;
      transition:transform 0.4s cubic-bezier(0.22,1,0.36,1),box-shadow 0.4s cubic-bezier(0.22,1,0.36,1),border-color 0.4s;
    }
    .eco-card:hover{transform:translateY(-4px);border-color:rgba(201,162,39,0.25);box-shadow:0 14px 32px rgba(201,162,39,0.10)}
    .eco-card .eco-name{font-size:17px;font-weight:600;color:var(--text-dark);margin-bottom:8px}
    .eco-card .eco-name .accent{color:var(--gold-500)}
    .eco-card p{font-size:13.5px;color:var(--text-body);line-height:1.6;font-weight:400}

    .contact-lines{
      display:flex;flex-direction:column;gap:4px;align-items:center;margin:0 auto;
    }
    .contact-lines a{
      font-size:19px;color:var(--gold-300);text-decoration:none;font-weight:400;
      transition:color 0.25s;
    }
    .contact-lines a:hover{color:var(--cream)}
    .contact-lines .c-place{font-size:14px;color:rgba(255,255,255,0.6);font-weight:300;margin-top:10px}

    /* ============================================================
       LIFECYCLE STRIP — top of each industry page. The operator
       sees their own journey in one line before they scroll.
       ============================================================ */
    .lifecycle{padding:58px 0;background:#fff;border-bottom:1px solid rgba(0,0,0,0.05)}
    .lifecycle-label{
      text-align:center;font-size:11px;font-weight:600;letter-spacing:2.5px;
      text-transform:uppercase;color:var(--gold-500);margin-bottom:10px;
    }
    .lifecycle-title{
      text-align:center;font-size:clamp(19px,2.4vw,26px);font-weight:300;
      color:var(--text-dark);letter-spacing:-0.018em;margin-bottom:30px;line-height:1.3;
    }
    .lifecycle-title strong{font-weight:600;color:var(--gold-500)}
    .lifecycle-flow{
      display:flex;flex-wrap:wrap;gap:9px 0;justify-content:center;align-items:center;
      max-width:980px;margin:0 auto;
    }
    .lifecycle-stage{
      font-size:12.5px;font-weight:500;color:var(--text-dark);
      background:var(--cream);border:1px solid rgba(0,0,0,0.07);border-radius:8px;
      padding:8px 13px;text-align:center;
    }
    .lifecycle-stage.key{
      background:linear-gradient(180deg,rgba(201,162,39,0.12),rgba(201,162,39,0.05));
      border-color:rgba(201,162,39,0.32);
    }
    .lifecycle-stage .ls-sub{
      display:block;font-size:10px;font-weight:400;color:var(--text-body);
      margin-top:3px;letter-spacing:0.01em;
    }
    .lifecycle-arrow{color:var(--gold-500);font-size:12px;font-weight:700;padding:0 7px}
    .lifecycle-caption{
      text-align:center;margin:30px auto 0;max-width:720px;
      font-size:13.5px;color:var(--text-body);line-height:1.7;font-weight:300;
    }
    .lifecycle-caption .pattern{
      display:block;margin-bottom:10px;color:var(--gold-500);font-weight:600;
      font-size:12px;letter-spacing:0.03em;
    }
    .lifecycle-caption strong{color:var(--text-dark);font-weight:600}
    @media(max-width:760px){
      .lifecycle-arrow{padding:0 4px}
      .lifecycle-stage{font-size:11.5px;padding:7px 10px}
    }

    /* ============================================================
       NAV DROPDOWN — homepage "Industries" → 6 vertical pages
       ============================================================ */
    .nav-item-drop{position:relative}
    .nav-dropdown{
      position:absolute;top:100%;left:50%;transform:translateX(-50%);
      padding-top:18px;opacity:0;visibility:hidden;
      transition:opacity 0.25s ease,visibility 0.25s;
    }
    .nav-item-drop:hover .nav-dropdown,
    .nav-item-drop:focus-within .nav-dropdown{opacity:1;visibility:visible}
    .nav-dropdown-inner{
      background:#fff;border:1px solid rgba(10,25,49,0.08);border-radius:12px;
      padding:8px;min-width:248px;
      box-shadow:0 14px 44px rgba(10,25,49,0.13);
      transform:translateY(-8px);transition:transform 0.25s cubic-bezier(0.22,1,0.36,1);
    }
    .nav-item-drop:hover .nav-dropdown-inner,
    .nav-item-drop:focus-within .nav-dropdown-inner{transform:translateY(0)}
    .nav-dropdown-inner a{
      display:block;padding:10px 16px;border-radius:8px;
      font-size:12.5px;font-weight:500;color:var(--text-dark);
      text-transform:none;letter-spacing:0.005em;transition:background 0.2s,color 0.2s;
    }
    .nav-dropdown-inner a::after{display:none}
    .nav-dropdown-inner a:hover{background:rgba(201,162,39,0.07);color:var(--gold-500)}
    .mobile-nav a.mn-sub{
      padding-left:58px;font-size:13px;color:var(--text-body);
    }
    .mobile-nav a.mn-sub:hover{color:var(--gold-500)}

    /* ============================================================
       CONNECT — in-premises routing. One "hi" reaches every
       department / desk / station. Real estate: the 3 layers.
       ============================================================ */
    .connect{
      padding:100px 0;
      background:linear-gradient(180deg,var(--blue-deep) 0%,var(--blue-900) 100%);
      position:relative;overflow:hidden;
    }
    @media(max-width:760px){.connect{padding:68px 0}}
    .connect .container{position:relative;z-index:6}
    .connect-head{text-align:center;max-width:680px;margin:0 auto 52px}
    .connect-head .label-dark{justify-content:center}
    .connect-head h2{
      font-size:clamp(26px,3.2vw,38px);font-weight:500;color:var(--cream);
      line-height:1.22;letter-spacing:-0.02em;
    }
    .connect-head h2 .em{color:var(--gold-300);font-weight:600}
    .connect-head p{
      font-size:16px;color:rgba(255,255,255,0.72);line-height:1.7;font-weight:300;
      margin:14px auto 0;max-width:580px;
    }
    .connect-grid{
      display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:940px;margin:0 auto;
    }
    @media(max-width:880px){.connect-grid{grid-template-columns:1fr 1fr}}
    @media(max-width:560px){.connect-grid{grid-template-columns:1fr}}
    .connect-node{
      padding:30px 28px;border-radius:14px;text-align:center;
      background:rgba(255,255,255,0.04);border:1px solid rgba(201,162,39,0.14);
      transition:border-color 0.4s ease,background 0.4s ease,transform 0.4s cubic-bezier(0.22,1,0.36,1);
    }
    .connect-node:hover{
      border-color:rgba(201,162,39,0.36);background:rgba(201,162,39,0.06);transform:translateY(-3px);
    }
    .connect-node h3{
      font-size:16.5px;font-weight:600;color:var(--gold-300);margin-bottom:8px;letter-spacing:-0.005em;
    }
    .connect-node p{
      font-size:14px;color:rgba(255,255,255,0.72);line-height:1.65;font-weight:300;
    }

    /* ============================================================
       MOBILE — centre all sub-page content on small screens
       ============================================================ */
    @media(max-width:760px){
      .feature,.connect-node{text-align:center}
      .feature .f-num{text-align:center}
      .prose,.prose p,.prose h3{text-align:center}
      .eco-card{text-align:center}
      .contact-lines{align-items:center}
    }

    /* ============================================================
       CONTACT FORM + WhatsApp button (contact page)
       ============================================================ */
    .contact-form{
      max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:13px;
    }
    .contact-form input,.contact-form textarea{
      width:100%;padding:15px 18px;font-size:15px;font-family:inherit;
      border:1px solid rgba(10,25,49,0.12);border-radius:10px;
      background:#fff;color:var(--text-dark);outline:none;
      transition:border-color 0.25s,box-shadow 0.25s;
    }
    .contact-form input::placeholder,.contact-form textarea::placeholder{color:#9aa3b5}
    .contact-form input:focus,.contact-form textarea:focus{
      border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(201,162,39,0.12);
    }
    .contact-form textarea{resize:vertical;min-height:96px;line-height:1.6}
    .cf-row{display:flex;gap:11px}
    .cf-row input{flex:1}
    .cf-cc{
      flex-shrink:0;width:122px;padding:15px 12px;font-size:15px;font-family:inherit;
      border:1px solid rgba(10,25,49,0.12);border-radius:10px;background:#fff;
      color:var(--text-dark);outline:none;cursor:pointer;
      transition:border-color 0.25s,box-shadow 0.25s;
    }
    .cf-cc:focus{border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(201,162,39,0.12)}
    .contact-form button{
      align-self:center;margin-top:8px;padding:12px 38px;border:none;border-radius:9px;cursor:pointer;
      background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
      color:var(--blue-deep);font-weight:600;font-size:11.5px;letter-spacing:0.1em;
      text-transform:uppercase;font-family:inherit;transition:all 0.3s;
    }
    .contact-form button:hover{box-shadow:0 0 24px rgba(201,162,39,0.35);transform:translateY(-1px)}
    .contact-or{
      max-width:520px;margin:24px auto 16px;text-align:center;
      font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--text-body);
      display:flex;align-items:center;gap:16px;
    }
    .contact-or::before,.contact-or::after{
      content:'';flex:1;height:1px;background:rgba(10,25,49,0.1);
    }
    .wa-btn{
      display:flex;align-items:center;justify-content:center;gap:9px;
      width:fit-content;max-width:100%;margin:0 auto;padding:11px 24px;border-radius:9px;
      background:#25D366;color:#fff;text-decoration:none;
      font-weight:600;font-size:12.5px;letter-spacing:0.02em;transition:all 0.3s;
    }
    .wa-btn:hover{box-shadow:0 0 26px rgba(37,211,102,0.45);transform:translateY(-1px)}
    .wa-btn svg{width:18px;height:18px;flex-shrink:0}

    /* ============================================================
       ABOUT — founding quote + credibility line
       ============================================================ */
    .about-quote{
      max-width:680px;margin:52px auto 0;text-align:center;
      font-family:'Inter',serif !important;font-style:italic;font-weight:300;
      font-size:19px;line-height:1.6;color:var(--text-dark);letter-spacing:-0.01em;
    }
    .about-quote cite{
      display:block;margin-top:18px;font-style:normal;font-weight:600;
      font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-500);
    }
    .about-creds{
      text-align:center;margin:38px auto 0;font-size:13.5px;color:var(--text-body);
      letter-spacing:0.03em;font-weight:300;
    }
    .about-creds strong{color:var(--text-dark);font-weight:600}

    /* ============================================================
       SLUG DEMO — scanning state + floating chatbot widget
       ============================================================ */
    .slug-dot{
      width:8px;height:8px;border-radius:50%;background:var(--gold-300);
      display:inline-block;animation:slugDot 1.2s ease-in-out infinite;
    }
    .slug-dot:nth-child(2){animation-delay:0.15s}
    .slug-dot:nth-child(3){animation-delay:0.3s}
    .slug-dot:nth-child(4){animation-delay:0.45s}
    @keyframes slugDot{
      0%,80%,100%{opacity:0.25;transform:scale(0.7)}
      40%{opacity:1;transform:scale(1)}
    }