/* ============================================================
   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:24px;font-weight:500;letter-spacing:0.08em;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:13px;font-weight:400;letter-spacing:0.28em;text-transform:uppercase;
      color:rgba(255,255,255,0.55);
    }
    @media(max-width:640px){
      .hero-tagline{gap:12px;margin:16px 0 24px}
      .hero-tagline .tag-ai{font-size:20px;letter-spacing:0.06em}
      .hero-tagline .tag-static{font-size:11px;letter-spacing:0.24em}
    }

    .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(15.5px,1.2vw,18px);color:rgba(255,255,255,0.68);line-height:2;font-weight:400;
      max-width:500px;margin:0 auto;letter-spacing:0.015em;
    }

    /* 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){
      .hero{padding:100px 0 60px;min-height:auto}
      .hero-content{max-width:100%;padding:0 8px}
      .hero h1{font-size:clamp(52px,14vw,72px);margin-bottom:14px;animation:heroFadeUp 0.8s ease-out 0.1s forwards}
      .hero h2{font-size:clamp(16px,4vw,20px);line-height:1.55;font-weight:400}
      .h2-line{animation:none;background:none;-webkit-text-fill-color:currentColor;color:rgba(255,255,255,0.85)}
      .h2-bold{font-weight:400}
      .hero-divider{width:32px;margin:20px auto}
      .hero-text{font-size:14px;line-height:1.8;max-width:320px}
      .ht-line{animation:none;opacity:0.85}
      .ht-strong{opacity:1}
      .text-glow{animation:none}
      .hero-channels{font-size:10px;margin:28px auto 0;letter-spacing:0.06em;gap:4px 0;flex-wrap:wrap;white-space:normal}
      .channel-lead{margin-right:6px}
      .channel-item{animation:none;opacity:1;color:rgba(255,255,255,0.6)}
      .channel-dot{margin:0 5px;width:2.5px;height:2.5px;opacity:0.5;animation:none}
      .channel-sep{margin:0 5px;opacity:1;animation:none}
      .channel-crm{opacity:1;animation:none;color:var(--gold-400)}
      .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(44px,12vw,56px)}
      .hero h2{font-size:15px}
      .hero-text{font-size:13px;max-width:280px}
      .hero-channels{font-size:9px}
    }

    .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:11px;font-weight:600;color:var(--gold-500);
      letter-spacing:3px;text-transform:uppercase;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:11px;font-weight:600;letter-spacing:3px;text-transform:uppercase;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;
    }
    .verticals-grid{
      display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;
    }
    @media(max-width:880px){.verticals-grid{grid-template-columns:1fr 1fr;gap:16px}}
    @media(max-width:560px){.verticals-grid{grid-template-columns:1fr;gap:14px}.vertical-cell{padding-bottom:48px}}
    .vertical-cell{
      padding:36px 32px 32px;
      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:left;
      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-bottom:18px;color:rgba(255,255,255,0.25);
      transition:color 0.4s,transform 0.4s;
    }
    .vertical-cell:hover .v-icon{color:var(--gold-400);transform:translateY(-2px)}
    .vertical-cell h3{
      font-size:20px;font-weight:600;color:rgba(255,255,255,0.92);margin-bottom:8px;
      transition:color 0.4s ease;letter-spacing:-0.01em;position:relative;z-index:1;
    }
    .vertical-cell:hover h3{color:var(--gold-300)}
    .vertical-upside{
      font-weight:400;color:var(--gold-300);font-size:13.5px;margin-bottom:14px;line-height:1.55;
      position:relative;z-index:1;opacity:0.85;
    }
    .vertical-cell:hover .vertical-upside{opacity:1}
    .vertical-cell p{
      font-size:13px;color:rgba(255,255,255,0.55);
      line-height:1.7;font-weight:300;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:20px;
      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{
      position:absolute;bottom:20px;right:20px;
      font-size:18px;color:rgba(255,255,255,0.1);
      transition:color 0.4s,transform 0.4s;
    }
    .vertical-cell:hover .v-arrow{color:var(--gold-400);transform:translateX(4px)}

    /* PROOF — CREAM */
    .proof{padding:110px 0;background:var(--cream);position:relative;overflow:hidden}
    .proof-head{text-align:center;max-width:720px;margin:0 auto 60px}
    .proof-head .label-cream{justify-content:center}
    .proof-head h2{
      font-size:clamp(30px,3.6vw,42px);font-weight:300;
      color:var(--text-dark);line-height:1.18;letter-spacing:-0.02em;
    }
    .proof-head h2 .em{font-weight:500;color:var(--gold-500)}
    .proof-grid{
      display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
      background:rgba(10,25,49,0.06);border:1px solid rgba(10,25,49,0.06);
      border-radius:12px;overflow:hidden;
    }
    @media(max-width:760px){.proof-grid{grid-template-columns:repeat(2,1fr)}}
    .proof-stat{padding:38px 24px;background:var(--white);text-align:center;transition:background 0.3s}
    .proof-stat:hover{background:#fafaf7}
    .proof-num{
      font-weight:200;font-size:54px;color:var(--gold-500);
      line-height:1;letter-spacing:-0.025em;margin-bottom:12px;
    }
    .proof-num .small{font-size:30px;font-weight:300;color:var(--gold-400)}
    .proof-label{
      font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
      color:var(--text-body);font-weight:500;
    }

    /* 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:13px;font-weight:600;letter-spacing:2.6px;text-transform:uppercase;
      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;
    }

    .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)}
    }