/*
Theme Name: Promen Tech
Theme URI: https://promentech.com
Author: Promen Tech
Description: AI-native growth studio theme -- dynamic blog and case studies, Contact Form 7 lead capture, dark gradient design system.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: promentech
*/


  :root{
    --canvas:#000000; --raised:#0a0a0a; --surface:#101010;
    --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.14);
    --ink:#ffffff; --muted:rgba(255,255,255,.58); --muted-2:rgba(255,255,255,.40);
    --grad:linear-gradient(135deg,#EDEFFF 0%,#CAD0FB 20%,#A6F1DB 45%,#CBF274 70%,#E6FB66 100%);
    --mint:#A6F1DB; --lav:#CAD0FB; --lime:#E6FB66;
    --display:"Clash Display","Hanken Grotesk",sans-serif;
    --body:"Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;
    --maxw:1180px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--canvas); color:var(--ink); font-family:var(--body);
    line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
    font-size:16px;
  }
  ::selection{background:rgba(166,241,219,.25); color:#fff}
  a{color:inherit; text-decoration:none}
  img,svg{display:block}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
  section{position:relative}

  /* ---------- atmosphere ---------- */
  .grain{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.04; mix-blend-mode:screen;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
  .cursor-glow{position:fixed; top:0; left:0; width:520px; height:520px; z-index:0; pointer-events:none;
    transform:translate(-50%,-50%); border-radius:50%; opacity:.5; transition:opacity .4s;
    background:radial-gradient(circle, rgba(166,241,219,.16), rgba(202,208,251,.06) 40%, transparent 70%);
    filter:blur(8px);}
  .content{position:relative; z-index:2}

  /* ---------- type ---------- */
  h1,h2,h3{font-family:var(--display); font-weight:600; line-height:1.02; letter-spacing:-.02em}
  .eyebrow{font-size:12.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
    color:var(--muted); display:inline-flex; align-items:center; gap:10px}
  .eyebrow::before{content:""; width:22px; height:1px; background:var(--grad)}
  .gradient-text{background:var(--grad); background-size:220% 220%; -webkit-background-clip:text;
    background-clip:text; color:transparent; animation:shimmer 7s linear infinite}
  .lead{color:var(--muted); font-size:1.15rem; max-width:60ch}

  /* ---------- buttons ---------- */
  .btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--body); font-weight:600;
    font-size:.96rem; padding:14px 26px; border-radius:100px; cursor:pointer; border:1px solid transparent;
    transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .3s, background-position .5s; will-change:transform}
  .btn-primary{background:var(--grad); background-size:180% 180%; color:#06210f;
    box-shadow:0 10px 40px -14px rgba(166,241,219,.6)}
  .btn-primary:hover{transform:translateY(-2px); background-position:100% 0; box-shadow:0 16px 50px -12px rgba(166,241,219,.8)}
  .btn-ghost{color:#fff; background:linear-gradient(var(--canvas),var(--canvas)) padding-box, var(--line-2) border-box;
    border:1px solid transparent}
  .btn-ghost:hover{transform:translateY(-2px);
    background:linear-gradient(var(--canvas),var(--canvas)) padding-box, var(--grad) border-box}
  .btn .arr{transition:transform .3s}
  .btn:hover .arr{transform:translateX(4px)}

  /* ---------- nav ---------- */
  header{position:fixed; top:0; left:0; right:0; z-index:50; transition:all .4s}
  .nav{display:flex; align-items:center; justify-content:space-between; padding:18px 0}
  header.scrolled{background:rgba(0,0,0,.6); backdrop-filter:blur(16px); border-bottom:1px solid var(--line)}
  header.scrolled .nav{padding:12px 0}
  .brand{display:flex; align-items:center; gap:12px; font-family:var(--display); font-weight:600; font-size:1.18rem; letter-spacing:-.01em}
  .brand .mark{width:34px; height:34px; border-radius:9px; overflow:hidden; box-shadow:0 4px 18px -6px rgba(166,241,219,.5)}
  .nav-links{display:flex; gap:34px; align-items:center}
  .nav-links a{font-size:.95rem; color:var(--muted); transition:color .25s; position:relative}
  .nav-links a:hover{color:#fff}
  .nav-links a::after{content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0; background:var(--grad); transition:width .3s}
  .nav-links a:hover::after{width:100%}
  .nav-cta{display:flex; align-items:center; gap:18px}
  .menu-btn{display:none; background:none; border:0; color:#fff; cursor:pointer}

  /* ---------- hero ---------- */
  .hero{padding:190px 0 90px; overflow:hidden}
  .mesh{position:absolute; inset:-20% -10% auto -10%; height:900px; z-index:0; filter:blur(90px); opacity:.5; pointer-events:none}
  .blob{position:absolute; border-radius:50%}
  .blob.b1{width:520px;height:520px;left:6%;top:2%;background:radial-gradient(circle,#CAD0FB,transparent 65%);animation:drift1 18s ease-in-out infinite}
  .blob.b2{width:480px;height:480px;right:8%;top:0;background:radial-gradient(circle,#A6F1DB,transparent 65%);animation:drift2 22s ease-in-out infinite}
  .blob.b3{width:560px;height:420px;left:38%;top:32%;background:radial-gradient(circle,#E6FB66,transparent 62%);animation:drift3 26s ease-in-out infinite}
  .hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:50px; align-items:center; position:relative; z-index:2}
  .hero h1{font-size:clamp(2.7rem,6vw,4.7rem); margin:22px 0 0}
  .hero .lead{margin:24px 0 34px; font-size:1.2rem}
  .hero-actions{display:flex; gap:14px; flex-wrap:wrap}
  .chips{display:flex; gap:22px; flex-wrap:wrap; margin-top:34px; padding-top:26px; border-top:1px solid var(--line)}
  .chip{display:flex; align-items:center; gap:9px; font-size:.9rem; color:var(--muted)}
  .chip b{color:#fff; font-weight:600}
  .chip .dot{width:7px;height:7px;border-radius:50%;background:var(--grad)}
  /* hero visual */
  .hero-visual{position:relative; display:grid; place-items:center; min-height:380px}
  .halo{position:absolute; width:360px;height:360px;border-radius:50%;background:var(--grad);filter:blur(70px);opacity:.45;animation:pulse 8s ease-in-out infinite}
  .hero-logo{width:248px;height:248px;border-radius:30%;overflow:hidden;position:relative;
    box-shadow:0 40px 100px -30px rgba(166,241,219,.55), inset 0 0 0 1px rgba(255,255,255,.08);
    animation:float 7s ease-in-out infinite}
  .orbit{position:absolute; inset:-40px; border:1px dashed var(--line-2); border-radius:50%; animation:spin 40s linear infinite}
  .orbit::before{content:""; position:absolute; top:-5px; left:50%; width:10px;height:10px;border-radius:50%;background:var(--lime); box-shadow:0 0 16px var(--lime)}
  .orbit.o2{inset:-78px; animation-duration:60s; animation-direction:reverse; opacity:.6}
  .orbit.o2::before{background:var(--lav); box-shadow:0 0 16px var(--lav)}

  /* ---------- marquee ---------- */
  .marquee-sec{padding:42px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .marquee-label{text-align:center; font-size:.82rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2); margin-bottom:26px}
  .marquee{display:flex; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .marquee-track{display:flex; gap:64px; padding-right:64px; animation:marquee 26s linear infinite; white-space:nowrap}
  .marquee:hover .marquee-track{animation-play-state:paused}
  .marquee-track span{font-family:var(--display); font-weight:500; font-size:1.5rem; color:rgba(255,255,255,.55); letter-spacing:-.01em}

  /* ---------- generic section head ---------- */
  .sec{padding:110px 0}
  .sec-head{max-width:680px; margin-bottom:56px}
  .sec-head h2{font-size:clamp(2rem,4vw,3rem); margin:18px 0 16px}
  .sec-head p{color:var(--muted); font-size:1.1rem}

  /* ---------- stats band ---------- */
  .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:64px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .stat .num{font-family:var(--display); font-weight:600; font-size:clamp(2.4rem,4vw,3.4rem); line-height:1}
  .stat .num.g{background:var(--grad);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 7s linear infinite}
  .stat p{color:var(--muted); margin-top:10px; font-size:.96rem}

  /* ---------- cards / services ---------- */
  .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
  .card{position:relative; background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:20px;
    padding:30px; transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s, background .4s; overflow:hidden}
  .card::after{content:""; position:absolute; inset:0; border-radius:20px; padding:1px; opacity:0; transition:opacity .4s;
    background:var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none}
  .card:hover{transform:translateY(-6px); background:rgba(255,255,255,.04)}
  .card:hover::after{opacity:1}
  .card:hover{box-shadow:0 30px 70px -40px rgba(166,241,219,.5)}
  .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:20px;
    background:rgba(255,255,255,.05); border:1px solid var(--line)}
  .ic svg{width:22px;height:22px;stroke:#06210f}
  .ic{background:var(--grad)}
  .card h3{font-size:1.28rem; margin-bottom:10px; letter-spacing:-.01em}
  .card p{color:var(--muted); font-size:.97rem}
  .card .kx{position:absolute; top:24px; right:26px; font-family:var(--display); font-size:.82rem; color:var(--muted-2)}

  /* ---------- results ---------- */
  .results{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
  .result{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)); border:1px solid var(--line); border-radius:20px; padding:32px; transition:transform .4s, border-color .4s}
  .result:hover{transform:translateY(-6px); border-color:var(--line-2)}
  .result .tag{font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2)}
  .result .big{font-family:var(--display); font-weight:600; font-size:2.6rem; margin:18px 0 8px; line-height:1}
  .result .big.g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .result p{color:var(--muted); font-size:.96rem}

  /* ---------- process ---------- */
  .timeline{position:relative; margin-top:20px; padding-left:34px}
  .timeline::before{content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:linear-gradient(180deg,var(--lav),var(--mint),var(--lime))}
  .step{position:relative; padding:0 0 46px 24px}
  .step:last-child{padding-bottom:0}
  .step::before{content:""; position:absolute; left:-34px; top:4px; width:16px;height:16px;border-radius:50%;background:#000;border:2px solid var(--mint); box-shadow:0 0 0 4px rgba(0,0,0,1),0 0 16px rgba(166,241,219,.6)}
  .step .n{font-family:var(--display); color:var(--muted-2); font-size:.85rem; letter-spacing:.1em}
  .step h3{font-size:1.4rem; margin:6px 0 8px}
  .step p{color:var(--muted); max-width:54ch}

  /* ---------- testimonials ---------- */
  .quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
  .quote{background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:20px; padding:30px; transition:transform .4s, border-color .4s}
  .quote:hover{transform:translateY(-5px); border-color:var(--line-2)}
  .quote .mk{font-family:var(--display); font-size:3rem; line-height:.6; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .quote p{font-size:1.04rem; margin:14px 0 22px; color:rgba(255,255,255,.85)}
  .quote .who{display:flex; align-items:center; gap:12px}
  .quote .av{width:38px;height:38px;border-radius:50%;background:var(--grad)}
  .quote .who b{display:block; font-weight:600; font-size:.95rem}
  .quote .who span{font-size:.85rem; color:var(--muted)}

  /* ---------- pricing ---------- */
  .pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start}
  .plan{position:relative; background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:22px; padding:34px; transition:transform .4s}
  .plan:hover{transform:translateY(-6px)}
  .plan .pname{font-family:var(--display); font-size:1.3rem}
  .plan .price{font-family:var(--display); font-weight:600; font-size:2.7rem; margin:16px 0 4px}
  .plan .per{color:var(--muted); font-size:.9rem}
  .plan ul{list-style:none; margin:24px 0 28px; display:grid; gap:12px}
  .plan li{display:flex; gap:10px; font-size:.95rem; color:rgba(255,255,255,.78)}
  .plan li svg{flex:none; width:18px;height:18px;stroke:var(--mint); margin-top:3px}
  .plan .btn{width:100%; justify-content:center}
  .plan.feat{background:rgba(255,255,255,.04)}
  .plan.feat::before{content:""; position:absolute; inset:0; border-radius:22px; padding:1.5px;
    background:conic-gradient(from var(--a,0deg),#CAD0FB,#A6F1DB,#E6FB66,#CAD0FB);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
    animation:rotate-border 6s linear infinite}
  .badge{position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--grad); color:#06210f; font-weight:700; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; padding:5px 14px; border-radius:100px}

  /* ---------- final cta ---------- */
  .cta-panel{position:relative; border-radius:28px; padding:80px 40px; text-align:center; overflow:hidden;
    border:1px solid var(--line); background:rgba(255,255,255,.02)}
  .cta-panel .cmesh{position:absolute; inset:-40%; background:var(--grad); filter:blur(110px); opacity:.28; animation:pulse 9s ease-in-out infinite}
  .cta-panel h2{font-size:clamp(2.2rem,5vw,3.6rem); position:relative}
  .cta-panel p{color:var(--muted); font-size:1.15rem; margin:18px auto 32px; max-width:48ch; position:relative}
  .cta-panel .hero-actions{justify-content:center; position:relative}

  /* ---------- faq ---------- */
  .faq{max-width:820px; margin:0 auto}
  .q{border-bottom:1px solid var(--line)}
  .q button{width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:26px 4px; background:none; border:0; color:#fff; cursor:pointer; text-align:left; font-family:var(--display); font-weight:500; font-size:1.18rem; letter-spacing:-.01em}
  .q .ans{max-height:0; overflow:hidden; transition:max-height .45s ease; color:var(--muted)}
  .q .ans p{padding:0 4px 26px; max-width:64ch; font-size:1.02rem}
  .q .pm{flex:none; width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2); display:grid; place-items:center; transition:transform .4s, background .4s, color .4s}
  .q.open .pm{transform:rotate(45deg); background:var(--grad); color:#06210f; border-color:transparent}

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--line); padding:70px 0 40px; position:relative}
  .foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px}
  .foot-brand p{color:var(--muted); font-size:.95rem; margin:16px 0 20px; max-width:34ch}
  .socials{display:flex; gap:12px}
  .socials a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line); display:grid; place-items:center; color:var(--muted); transition:all .3s}
  .socials a:hover{color:#06210f; background:var(--grad); border-color:transparent; transform:translateY(-2px)}
  .socials svg{width:17px;height:17px}
  .fcol h4{font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin-bottom:18px}
  .fcol a{display:block; color:var(--muted); font-size:.95rem; padding:7px 0; transition:color .25s}
  .fcol a:hover{color:#fff}
  .foot-bottom{display:flex; justify-content:space-between; align-items:center; margin-top:54px; padding-top:26px; border-top:1px solid var(--line); color:var(--muted-2); font-size:.88rem; flex-wrap:wrap; gap:12px}

  /* ---------- reveal ---------- */
  .reveal{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.8,.2,1) var(--d,0s), transform .8s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
  .reveal.in{opacity:1; transform:none}

  /* ---------- keyframes ---------- */
  @keyframes shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
  @keyframes pulse{0%,100%{transform:scale(1);opacity:.45}50%{transform:scale(1.12);opacity:.6}}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes marquee{to{transform:translateX(-50%)}}
  @keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,40px)}}
  @keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,30px)}}
  @keyframes drift3{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-40px)}}
  @keyframes rotate-border{to{--a:360deg}}
  @property --a{syntax:'<angle>'; inherits:false; initial-value:0deg}

  /* ===== The Promen Tech effect (dashboard showcase) ===== */
  .effect-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:48px; align-items:center}
  .effect-h{font-size:clamp(1.8rem,3.4vw,2.6rem); margin:16px 0 14px}
  .effect-p{color:var(--muted); font-size:1.08rem; margin-bottom:24px; max-width:48ch}
  .checks{list-style:none; display:grid; gap:14px; margin-bottom:26px}
  .checks li{display:flex; gap:12px; align-items:flex-start; color:rgba(255,255,255,.82); font-size:1rem}
  .checks li i{flex:none; width:22px; height:22px; background:var(--grad);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
  .social-proof{display:flex; align-items:center; gap:16px; margin-bottom:26px}
  .avatars{display:flex}
  .avatars span{width:38px; height:38px; border-radius:50%; border:2px solid #000; margin-left:-10px; background:var(--grad)}
  .avatars span:first-child{margin-left:0}
  .avatars span:nth-child(2){background:linear-gradient(135deg,#CAD0FB,#A6F1DB)}
  .avatars span:nth-child(3){background:linear-gradient(135deg,#A6F1DB,#E6FB66)}
  .avatars span:nth-child(4){background:linear-gradient(135deg,#E6FB66,#CAD0FB)}
  .stars{color:#E6FB66; letter-spacing:3px; font-size:.95rem; line-height:1}
  .sp-text{font-size:.88rem; color:var(--muted)}
  .sp-text b{color:#fff}
  .dash{position:relative; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); border:1px solid var(--line); border-radius:24px; padding:26px; overflow:hidden; box-shadow:0 40px 90px -50px rgba(166,241,219,.45)}
  .dash::before{content:""; position:absolute; inset:0; border-radius:24px; padding:1px; background:linear-gradient(140deg,rgba(202,208,251,.45),transparent 42%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none}
  .dash-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px}
  .dash-title{font-family:var(--display); font-weight:600; font-size:1.08rem}
  .dash-sub{color:var(--muted-2); font-size:.8rem; margin-top:2px}
  .live{display:inline-flex; align-items:center; gap:7px; font-size:.76rem; color:var(--mint); background:rgba(166,241,219,.1); padding:5px 12px; border-radius:100px; border:1px solid rgba(166,241,219,.22)}
  .live-dot{width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 8px var(--mint); animation:blink 1.8s ease-in-out infinite}
  .dash-hero-stat{display:flex; align-items:flex-end; gap:14px}
  .big-pct{font-family:var(--display); font-weight:600; font-size:3.1rem; line-height:.85}
  .pct-label{color:var(--muted); font-size:.8rem; line-height:1.25; padding-bottom:7px}
  .chart{position:relative; margin:8px -4px 0}
  .chart svg{width:100%; height:auto; display:block}
  .dash-kpis{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px}
  .kpi{display:flex; align-items:center; gap:14px; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:14px; padding:13px 14px}
  .kpi b{font-family:var(--display); font-weight:600; font-size:1.3rem; line-height:1; display:block}
  .kpi span{font-size:.76rem; color:var(--muted)}
  .donut{width:54px; height:54px; flex:none}
  .bars-mini{width:54px; height:46px; flex:none}
  .metric-row{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:34px}
  .metric{position:relative; background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:20px; padding:26px; overflow:hidden; transition:transform .4s,border-color .4s}
  .metric:hover{transform:translateY(-5px); border-color:var(--line-2)}
  .metric-num{font-family:var(--display); font-weight:600; font-size:2.4rem; line-height:1}
  .metric-label{color:var(--muted); font-size:.94rem; margin:10px 0 18px; max-width:30ch}
  .spark{width:100%; height:46px; display:block}

  /* slide-in reveals (smooth, unhurried) */
  .rv-l,.rv-r{opacity:0; transition:opacity 1s cubic-bezier(.16,1,.3,1) var(--d,0s), transform 1.15s cubic-bezier(.16,1,.3,1) var(--d,0s); will-change:transform,opacity}
  .rv-l{transform:translateX(-64px)}
  .rv-r{transform:translateX(64px)}
  .rv-l.in,.rv-r.in{opacity:1; transform:none}

  /* chart draw-in (plays when its card reveals) */
  .draw{stroke-dasharray:1300; stroke-dashoffset:1300}
  .in .draw{animation:draw 1.9s cubic-bezier(.16,1,.3,1) .12s forwards}
  .area-fill{opacity:0}
  .in .area-fill{animation:fadein 1.3s ease .3s forwards}
  .dot-c{opacity:0}
  .in .dot-c{animation:fadein .5s ease 1.55s forwards}
  .donut-val{stroke-dasharray:301.6; stroke-dashoffset:301.6}
  .in .donut-val{animation:donut65 1.6s cubic-bezier(.16,1,.3,1) .3s forwards}
  .bar-r{transform-box:fill-box; transform-origin:bottom; transform:scaleY(0)}
  .in .bar-r{animation:bargrow .85s cubic-bezier(.16,1,.3,1) forwards}
  .in .bar-r:nth-child(2){animation-delay:.08s}
  .in .bar-r:nth-child(3){animation-delay:.16s}
  .in .bar-r:nth-child(4){animation-delay:.24s}
  .in .bar-r:nth-child(5){animation-delay:.32s}
  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes fadein{to{opacity:1}}
  @keyframes donut65{to{stroke-dashoffset:105.6}}
  @keyframes bargrow{to{transform:scaleY(1)}}
  @keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

  /* ---------- responsive ---------- */
  @media(max-width:900px){
    .hero-grid,.stats,.grid-3,.results,.quotes,.pricing,.foot-grid{grid-template-columns:1fr}
    .effect-grid,.metric-row{grid-template-columns:1fr}
    .rv-l,.rv-r{transform:translateY(28px)}
    .stats{gap:34px}
    .hero-visual{min-height:300px; margin-top:10px}
    .nav-links{display:none}
    .menu-btn{display:block}
    .foot-grid{gap:34px}
    .hero{padding:140px 0 70px}
    .sec{padding:80px 0}
  }
  @media(max-width:600px){
    .quotes,.results,.grid-3,.pricing{grid-template-columns:1fr}
    .foot-bottom{flex-direction:column; align-items:flex-start}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important; transition:none!important}
    .reveal{opacity:1; transform:none}
  }

  /* ===== multi-page chrome ===== */
  .page-hero{padding:168px 0 56px; position:relative; overflow:hidden}
  .crumb{font-size:.85rem; color:var(--muted-2); letter-spacing:.04em; margin-bottom:14px}
  .crumb a{color:var(--muted)} .crumb a:hover{color:#fff}
  .page-hero h1{font-size:clamp(2.4rem,5.5vw,4rem); margin:8px 0 18px}
  .page-hero .lead{font-size:1.18rem}
  .nav-links a.active{color:#fff}
  .nav-links a.active::after{width:100%}
  .mobile-nav{position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.93); backdrop-filter:blur(18px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; opacity:0; pointer-events:none; transition:opacity .35s}
  .mobile-nav.open{opacity:1; pointer-events:auto}
  .mobile-nav a{font-family:var(--display); font-weight:500; font-size:1.9rem; color:#fff; padding:10px}
  .mobile-nav .mclose{position:absolute; top:22px; right:22px; background:none; border:0; color:#fff; cursor:pointer}
  .mobile-nav .btn{margin-top:18px}

  /* values / team */
  .team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
  .member{background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:20px; padding:26px; text-align:center; transition:transform .4s,border-color .4s}
  .member:hover{transform:translateY(-6px); border-color:var(--line-2)}
  .member .face{width:84px; height:84px; border-radius:50%; margin:0 auto 16px; background:var(--grad)}
  .member:nth-child(4n+2) .face{background:linear-gradient(135deg,#CAD0FB,#A6F1DB)}
  .member:nth-child(4n+3) .face{background:linear-gradient(135deg,#A6F1DB,#E6FB66)}
  .member:nth-child(4n) .face{background:linear-gradient(135deg,#E6FB66,#CAD0FB)}
  .member h4{font-family:var(--display); font-weight:600; font-size:1.08rem}
  .member span{color:var(--muted); font-size:.86rem}

  /* alternating service blocks */
  .svc-block{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-bottom:34px}
  .svc-block:nth-child(even) .svc-visual{order:-1}
  .svc-visual{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); border:1px solid var(--line); border-radius:24px; padding:30px; min-height:260px; display:grid; place-items:center; position:relative; overflow:hidden}
  .svc-visual::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 20%, rgba(166,241,219,.12), transparent 55%); pointer-events:none}
  .svc-num{font-family:var(--display); color:var(--muted-2); font-size:.85rem; letter-spacing:.12em}
  .svc-block h3{font-size:clamp(1.6rem,3vw,2.2rem); margin:8px 0 14px}
  .svc-block p{color:var(--muted); margin-bottom:20px}
  .mini-list{list-style:none; display:grid; gap:11px}
  .mini-list li{display:flex; gap:11px; color:rgba(255,255,255,.8); font-size:.96rem}
  .mini-list li::before{content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--grad); margin-top:8px}
  .svc-visual svg{width:100%; height:auto}
  .donut-lg{width:170px; height:170px}

  /* blog */
  .featured-post{display:grid; grid-template-columns:1.05fr .95fr; border:1px solid var(--line); border-radius:24px; overflow:hidden; margin-bottom:30px}
  .featured-post .fimg{background:var(--grad); min-height:300px; position:relative}
  .featured-post .fbody{padding:42px; display:flex; flex-direction:column; justify-content:center; gap:14px}
  .blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
  .post{background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:20px; overflow:hidden; transition:transform .4s,border-color .4s; display:flex; flex-direction:column}
  .post:hover{transform:translateY(-6px); border-color:var(--line-2)}
  .post .thumb{height:168px; background:var(--grad)}
  .post:nth-child(3n+2) .thumb{background:linear-gradient(135deg,#CAD0FB,#A6F1DB)}
  .post:nth-child(3n) .thumb{background:linear-gradient(135deg,#A6F1DB,#E6FB66)}
  .post .pbody{padding:24px; display:flex; flex-direction:column; gap:11px; flex:1}
  .cat{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:#06210f; background:var(--grad); align-self:flex-start; padding:4px 11px; border-radius:100px; font-weight:700}
  .post h3{font-family:var(--display); font-weight:600; font-size:1.18rem; line-height:1.2}
  .post p{color:var(--muted); font-size:.92rem; flex:1}
  .pmeta{display:flex; gap:14px; color:var(--muted-2); font-size:.8rem; margin-top:4px}
  .newsletter{border:1px solid var(--line); border-radius:24px; padding:48px; text-align:center; position:relative; overflow:hidden; background:rgba(255,255,255,.02)}
  .newsletter .cmesh{position:absolute; inset:-40%; background:var(--grad); filter:blur(110px); opacity:.22}
  .nl-form{display:flex; gap:12px; max-width:480px; margin:22px auto 0; position:relative; flex-wrap:wrap; justify-content:center}
  .nl-form input{flex:1; min-width:240px; background:rgba(255,255,255,.05); border:1px solid var(--line-2); border-radius:100px; padding:14px 22px; color:#fff; font-family:var(--body)}
  .nl-form input:focus{outline:none; border-color:rgba(166,241,219,.5)}

  /* contact */
  .contact-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:start}
  .form{display:grid; gap:16px}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
  .field{display:grid; gap:8px}
  .field label{font-size:.85rem; color:var(--muted)}
  .field input,.field select,.field textarea{background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:12px; padding:13px 15px; color:#fff; font-family:var(--body); font-size:.98rem; transition:border-color .25s, background .25s; width:100%}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:rgba(166,241,219,.5); background:rgba(255,255,255,.05)}
  .field textarea{resize:vertical; min-height:130px}
  .form .btn{justify-content:center}
  .form-note{font-size:.8rem; color:var(--muted-2)}
  .form-success{display:none; background:rgba(166,241,219,.08); border:1px solid rgba(166,241,219,.3); color:#cdf7e6; padding:18px; border-radius:14px}
  /* honeypot — visually hidden bot trap */
  .hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none}
  /* hero lead-capture form (replaces the hero logo animation) */
  .hero-form{position:relative; z-index:2; background:var(--surface); border:1px solid var(--line-2);
    border-radius:22px; padding:26px 24px; box-shadow:0 30px 80px -42px rgba(0,0,0,.85);}
  .hero-form .form{gap:13px}
  .hero-form-head{margin-bottom:2px}
  .hf-pill{display:inline-flex; align-items:center; gap:8px; font-size:.72rem; font-weight:600;
    letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:12px}
  .hf-pill .dot{width:7px; height:7px; border-radius:50%; background:var(--grad)}
  .hf-title{font-size:1.5rem; line-height:1.08; margin:0 0 6px}
  .hf-sub{font-size:.92rem; color:var(--muted); margin:0; line-height:1.5}
  .hero-form .field input,.hero-form .field select,.hero-form .field textarea{padding:11px 14px}
  .hero-form textarea{min-height:78px}
  .hero-form .form .btn{width:100%}
  .contact-info{display:grid; gap:14px}
  .cinfo{background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:16px; padding:20px; display:flex; gap:14px; align-items:center}
  .cinfo .ci{width:42px; height:42px; border-radius:11px; background:var(--grad); display:grid; place-items:center; flex:none}
  .cinfo .ci svg{width:20px; height:20px; stroke:#06210f; fill:none; stroke-width:2}
  .cinfo b{display:block; font-size:.95rem} .cinfo span{color:var(--muted); font-size:.88rem}
  .mapbox{height:220px; border-radius:18px; border:1px solid var(--line); margin-top:14px; position:relative; overflow:hidden; background:radial-gradient(circle at 28% 30%, rgba(202,208,251,.22), transparent 55%), radial-gradient(circle at 72% 72%, rgba(230,251,102,.16), transparent 55%), #0a0a0a}
  .mapbox span{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:18px; height:18px; border-radius:50% 50% 50% 0; rotate:-45deg; background:var(--grad); box-shadow:0 0 24px rgba(166,241,219,.6)}

  /* comparison table */
  .cmp{width:100%; border-collapse:collapse; margin-top:8px; font-size:.95rem}
  .cmp th,.cmp td{text-align:left; padding:16px 14px; border-bottom:1px solid var(--line)}
  .cmp thead th{font-family:var(--display); font-weight:600; font-size:1rem}
  .cmp td.c,.cmp th.c{text-align:center}
  .cmp tbody tr:hover td{background:rgba(255,255,255,.02)}
  .cmp .yes{color:var(--mint); font-weight:600}
  .cmp .no{color:var(--muted-2)}
  .cmp-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:20px}

  /* chips */
  .chipbar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:34px}
  .fchip{font-size:.88rem; color:var(--muted); border:1px solid var(--line-2); padding:9px 18px; border-radius:100px; cursor:pointer; transition:all .25s}
  .fchip:hover,.fchip.on{color:#06210f; background:var(--grad); border-color:transparent}

  @media(max-width:900px){
    .team-grid,.blog-grid{grid-template-columns:1fr 1fr}
    .svc-block,.contact-grid,.featured-post{grid-template-columns:1fr}
    .svc-block:nth-child(even) .svc-visual{order:0}
    .page-hero{padding:130px 0 40px}
  }
  @media(max-width:600px){
    .team-grid,.blog-grid{grid-template-columns:1fr}
    .form-row{grid-template-columns:1fr}
  }

  /* ===== varied layouts (per-page personality) ===== */
  .ahero{padding:172px 0 64px; position:relative; overflow:hidden}
  .ahero-grid{display:grid; grid-template-columns:1.5fr .9fr; gap:50px; align-items:end; position:relative; z-index:2}
  .ahero h1{font-size:clamp(2.5rem,6vw,4.4rem); margin:14px 0 0; line-height:1.02}
  .ahero .lead{margin-top:22px}
  .ahero-side{border-left:1px solid var(--line); padding-left:26px; display:grid; gap:22px}
  .ahero-side .row b{font-family:var(--display); font-weight:600; font-size:2rem; display:block; line-height:1}
  .ahero-side .row span{color:var(--muted); font-size:.9rem}
  .watermark{position:absolute; right:-1%; top:14%; font-family:var(--display); font-weight:700; font-size:clamp(7rem,20vw,18rem); line-height:.8; color:rgba(255,255,255,.035); pointer-events:none; z-index:0; letter-spacing:-.04em}

  .ed-list{border-top:1px solid var(--line)}
  .ed-item{display:grid; grid-template-columns:120px 1fr; gap:30px; padding:30px 0; border-bottom:1px solid var(--line); align-items:start; transition:padding-left .4s, background .4s}
  .ed-item:hover{padding-left:14px; background:linear-gradient(90deg,rgba(255,255,255,.025),transparent)}
  .ed-num{font-family:var(--display); font-weight:600; font-size:2.4rem; line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
  .ed-item h3{font-family:var(--display); font-weight:600; font-size:1.4rem; margin-bottom:8px}
  .ed-item p{color:var(--muted); max-width:62ch}

  .miles{margin-top:6px}
  .mile{display:grid; grid-template-columns:140px 1fr; gap:30px; padding:26px 0; border-bottom:1px solid var(--line)}
  .mile .yr{font-family:var(--display); font-weight:600; font-size:1.7rem; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
  .mile h3{font-family:var(--display); font-weight:600; font-size:1.2rem; margin-bottom:6px}
  .mile p{color:var(--muted); max-width:58ch}

  .bento{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(168px,auto); gap:18px}
  .bento .tile{background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:20px; padding:26px; position:relative; overflow:hidden; transition:transform .4s,border-color .4s; display:flex; flex-direction:column; justify-content:flex-start}
  .bento .tile:hover{transform:translateY(-5px)}
  .bento .tile::after{content:""; position:absolute; inset:0; border-radius:20px; padding:1px; opacity:0; transition:opacity .4s; background:var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none}
  .bento .tile:hover::after{opacity:1}
  .col-2{grid-column:span 2} .col-4{grid-column:span 4} .row-2{grid-row:span 2}
  .bento .tile h3{font-family:var(--display); font-weight:600; font-size:1.25rem; margin-bottom:8px}
  .bento .tile p{color:var(--muted); font-size:.95rem}
  .tile.lead-tile{background:linear-gradient(155deg,rgba(202,208,251,.12),rgba(255,255,255,.02)); justify-content:space-between}
  .tface{width:54px; height:54px; border-radius:50%; background:var(--grad); margin-bottom:14px}
  .bento .tile:nth-child(3n) .tface{background:linear-gradient(135deg,#CAD0FB,#A6F1DB)}
  .bento .tile:nth-child(3n+1) .tface{background:linear-gradient(135deg,#A6F1DB,#E6FB66)}
  .tile .spark{margin-top:18px}

  .split{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:24px; overflow:hidden}
  .split > div{padding:38px}
  .split .old{border-right:1px solid var(--line)}
  .split .new{background:linear-gradient(180deg,rgba(166,241,219,.06),transparent)}
  .split h3{font-family:var(--display); font-weight:600; font-size:1.35rem; margin-bottom:20px}
  .split ul{list-style:none; display:grid; gap:14px}
  .split li{display:flex; gap:12px; font-size:1rem; align-items:flex-start}
  .split li::before{flex:none; font-weight:700; margin-top:1px}
  .split .old li{color:var(--muted-2)} .split .old li::before{content:"\00d7"; color:var(--muted-2)}
  .split .new li{color:rgba(255,255,255,.85)} .split .new li::before{content:"\2713"; color:var(--mint)}

  .stat-strip{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:34px; position:relative; z-index:2}
  .stat-strip > div{padding:30px 28px; border-right:1px solid var(--line)}
  .stat-strip > div:last-child{border-right:0}
  .stat-strip .s-num{font-family:var(--display); font-weight:600; font-size:clamp(2.2rem,4vw,3rem); line-height:1}
  .stat-strip .s-lab{color:var(--muted); margin-top:8px; font-size:.95rem}

  .story{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center}
  .story-img{border-radius:24px; overflow:hidden; border:1px solid var(--line); position:relative; aspect-ratio:4/3}
  .story-img img{width:100%; height:100%; object-fit:cover; display:block}
  .story-chip{position:absolute; left:20px; bottom:20px; background:rgba(0,0,0,.55); backdrop-filter:blur(10px); border:1px solid var(--line-2); border-radius:14px; padding:13px 18px}
  .story-chip b{font-family:var(--display); font-size:1.5rem; display:block; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
  .story-chip span{color:var(--muted); font-size:.8rem}

  .case-tile{justify-content:flex-end}
  .case-tile .ctag{font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2)}
  .case-tile .cbig{font-family:var(--display); font-weight:600; font-size:2.6rem; line-height:1; margin:8px 0 6px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
  .case-tile.feature{background:linear-gradient(150deg,rgba(202,208,251,.14),rgba(230,251,102,.05),rgba(255,255,255,.02))}
  .case-tile.feature .cbig{font-size:clamp(3rem,5vw,4.2rem)}
  .case-tile .cmesh-sm{position:absolute; right:-15%; top:-25%; width:55%; height:120%; background:radial-gradient(circle,rgba(166,241,219,.22),transparent 60%); pointer-events:none}

  @media(max-width:900px){
    .ahero-grid{grid-template-columns:1fr; gap:28px}
    .ahero-side{border-left:0; border-top:1px solid var(--line); padding-left:0; padding-top:24px}
    .story,.split,.stat-strip{grid-template-columns:1fr}
    .split .old{border-right:0; border-bottom:1px solid var(--line)}
    .stat-strip > div{border-right:0; border-bottom:1px solid var(--line)}
    .stat-strip > div:last-child{border-bottom:0}
    .bento{grid-template-columns:repeat(2,1fr)}
    .col-2,.col-4{grid-column:span 2} .row-2{grid-row:span 1}
    .watermark{display:none}
    .ed-item,.mile{grid-template-columns:60px 1fr; gap:18px}
    .ed-num{font-size:1.8rem} .mile .yr{font-size:1.3rem}
  }
  @media(max-width:600px){
    .bento{grid-template-columns:1fr} .col-2,.col-4{grid-column:span 1}
  }

  /* ===== premium type system: Geist (display) + Hanken (body) + Geist Mono (labels) ===== */
  :root{
    --display:"Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  h1,h2,h3,h4{font-family:var(--display); text-wrap:balance}
  h1,.hero h1,.page-hero h1,.ahero h1{font-weight:600; letter-spacing:-.032em}
  h2,.sec-head h2,.cta-panel h2,.newsletter h2,.featured-post h2{font-weight:600; letter-spacing:-.026em}
  h3,.effect-h{font-weight:600; letter-spacing:-.018em}
  .lead{font-weight:400}
  /* brand wordmark stays a clean sans to match the logo mark */
  .brand{font-family:var(--body); font-weight:600; letter-spacing:-.01em}
  /* technical labels & meta -> mono */
  .eyebrow{font-family:var(--mono); font-weight:500; font-size:11.5px; letter-spacing:.18em}
  .crumb,.marquee-label,.kx,.svc-num,.step .n,.dash-sub,.dash-title,.live,.tag,.ctag,.cat,.pmeta,.post-hero-meta,.fchip,.kpi span,.member span,.chip,.stat-strip .s-lab{font-family:var(--mono)}
  .dash-title{font-weight:500; letter-spacing:.04em; font-size:.82rem; text-transform:uppercase}
  .cat{font-weight:500; letter-spacing:.05em}
  .member span{letter-spacing:.04em; font-size:.78rem}
  .stat-strip .s-lab,.kpi span{letter-spacing:.02em}
  /* numbers, prices, names keep the serif for editorial weight */
  .stat .num,.big-pct,.metric-num,.cbig,.s-num,.ed-num,.mile .yr,.price,.pname,.kpi b,.quote .mk,.marquee-track span,.member h4,.post h3,.story-chip b,.result .big{font-family:var(--display)}

  /* ===== premium polish: motion, transitions, focus, cursor ===== */
  html.lenis,html.lenis body{height:auto}
  .lenis.lenis-smooth{scroll-behavior:auto !important}
  .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
  .lenis.lenis-stopped{overflow:hidden}

  .scroll-progress{position:fixed; top:0; left:0; height:2px; width:0; z-index:100; background:var(--grad); box-shadow:0 0 12px rgba(166,241,219,.6)}

  @view-transition{ navigation:auto }
  ::view-transition-old(root){ animation:vt-out .38s cubic-bezier(.4,0,.2,1) both }
  ::view-transition-new(root){ animation:vt-in .55s cubic-bezier(.16,1,.3,1) both }
  @keyframes vt-out{ to{ opacity:0; transform:translateY(-6px) } }
  @keyframes vt-in{ from{ opacity:0; transform:translateY(14px) } }

  .skip-link{position:fixed; top:-60px; left:16px; z-index:200; background:var(--grad); color:#06210f; font-weight:600; padding:10px 16px; border-radius:10px; transition:top .25s}
  .skip-link:focus{top:16px; outline:none}
  :focus-visible{outline:2px solid var(--mint); outline-offset:3px; border-radius:4px}

  /* refined reveal: add a soft blur clearing */
  .reveal,.rv-l,.rv-r{filter:blur(7px); transition:opacity .85s cubic-bezier(.2,.8,.2,1) var(--d,0s), transform 1s cubic-bezier(.2,.8,.2,1) var(--d,0s), filter .9s ease var(--d,0s)}
  .reveal.in,.rv-l.in,.rv-r.in{filter:blur(0)}
  /* headline curtain reveal (only the big heros) */
  .hero h1.reveal,.page-hero h1.reveal,.ahero h1.reveal{clip-path:inset(0 0 112% 0); filter:blur(12px); transform:translateY(6px); opacity:1}
  .hero h1.reveal.in,.page-hero h1.reveal.in,.ahero h1.reveal.in{clip-path:inset(0 0 -12% 0); filter:blur(0); transform:none; transition:clip-path 1.05s cubic-bezier(.16,1,.3,1) var(--d,0s), filter 1s ease var(--d,0s), transform 1.05s cubic-bezier(.16,1,.3,1) var(--d,0s)}

  /* cursor-tracking spotlight on cards */
  .card,.tile,.result,.post,.member,.quote{--mx:50%; --my:0%}
  .card::before,.tile::before,.result::before,.post::before,.member::before,.quote::before{content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; transition:opacity .45s; pointer-events:none; background:radial-gradient(240px circle at var(--mx) var(--my), rgba(166,241,219,.10), transparent 62%); z-index:0}
  .card:hover::before,.tile:hover::before,.result:hover::before,.post:hover::before,.member:hover::before,.quote:hover::before{opacity:1}
  .card > *,.tile > *,.result > *,.post > *,.member > *,.quote > *{position:relative; z-index:1}

  .cursor-glow{transition:opacity .4s, width .5s cubic-bezier(.16,1,.3,1), height .5s cubic-bezier(.16,1,.3,1)}
  .cursor-glow.hot{width:680px; height:680px; opacity:.8}
  .btn.mag{will-change:transform}
  .mesh{will-change:transform; transition:transform .5s cubic-bezier(.16,1,.3,1)}

  .nf{min-height:72vh; display:grid; place-items:center; text-align:center; position:relative; overflow:hidden}
  .nf .wrap{text-align:center}
  .nf .lead{margin-left:auto; margin-right:auto}
  .big404{font-family:var(--display); font-weight:500; font-size:clamp(6rem,22vw,17rem); line-height:.85; letter-spacing:-.03em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

  @media(prefers-reduced-motion:reduce){
    .reveal,.rv-l,.rv-r{filter:none!important}
    .hero h1.reveal,.page-hero h1.reveal,.ahero h1.reveal{clip-path:none!important; filter:none!important; transform:none!important}
    .scroll-progress{display:none}
    .mesh{transition:none}
    ::view-transition-old(root),::view-transition-new(root){animation:none}
  }

  /* ===== image covers + article ===== */
  .post .thumb,.featured-post .fimg{position:relative}
  .post .thumb img,.featured-post .fimg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
  .page-hero .cat{display:inline-block; margin-bottom:14px}
  .article{max-width:760px; margin:0 auto}
  .article .cat{display:inline-block; margin-bottom:6px}
  .post-hero-meta{display:flex; gap:12px; align-items:center; color:var(--muted); font-size:.92rem; flex-wrap:wrap}
  .article-cover{width:100%; aspect-ratio:16/8; border-radius:22px; border:1px solid var(--line); overflow:hidden; margin:8px 0 34px}
  .article-cover img{width:100%; height:100%; object-fit:cover; display:block}
  .article p{color:rgba(255,255,255,.78); font-size:1.1rem; line-height:1.78; margin-bottom:18px}
  .article h2{font-family:var(--display); font-weight:600; font-size:1.7rem; margin:38px 0 14px; letter-spacing:-.01em}
  .article h3{font-family:var(--display); font-weight:600; font-size:1.25rem; margin:26px 0 10px}
  .article ul{list-style:none; display:grid; gap:11px; margin:0 0 22px}
  .article ul li{display:flex; gap:12px; color:rgba(255,255,255,.78); font-size:1.06rem}
  .article ul li::before{content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--grad); margin-top:11px}
  .pullquote{position:relative; font-family:var(--display); font-weight:500; font-size:1.55rem; line-height:1.35; color:#fff; padding:6px 0 6px 26px; margin:32px 0}
  .pullquote::before{content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:3px; background:var(--grad)}
  .article figure{margin:30px 0}
  .article .figbox{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); border:1px solid var(--line); border-radius:18px; padding:24px}
  .article figcaption{color:var(--muted-2); font-size:.85rem; text-align:center; margin-top:10px}
  .author-box{display:flex; gap:16px; align-items:center; background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:18px; padding:22px; margin:40px 0 0}
  .author-box .face{width:56px; height:56px; border-radius:50%; background:var(--grad); flex:none}
  .author-box b{font-family:var(--display); font-size:1.02rem}
  .author-box span{color:var(--muted); font-size:.92rem}

  /* ===== extra exceptional motion (additive only) ===== */
  /* word-by-word rise on inner-page titles */
  h1 .w{display:inline-block; overflow:hidden; vertical-align:top; line-height:1.06}
  h1 .w .wi{display:inline-block; transform:translateY(116%); transition:transform .95s cubic-bezier(.16,1,.3,1); transition-delay:var(--wd,0s); will-change:transform}
  h1.in .w .wi{transform:translateY(0)}
  /* soft light sheen sweeping across primary buttons on hover */
  .btn-primary{position:relative; overflow:hidden}
  .btn-primary::after{content:""; position:absolute; top:0; left:-130%; width:55%; height:100%; transform:skewX(-18deg); pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent)}
  .btn-primary:hover::after{animation:sheenx .85s ease}
  @keyframes sheenx{from{left:-130%}to{left:160%}}
  /* directional wipe-in on cover images as they enter */
  .reveal img,.rv-l img,.rv-r img{clip-path:inset(0 0 0 100%); transition:clip-path 1.1s cubic-bezier(.16,1,.3,1) var(--d,.05s)}
  .reveal.in img,.rv-l.in img,.rv-r.in img{clip-path:inset(0 0 0 0)}
  @media (prefers-reduced-motion: reduce){
    h1 .w .wi{transform:none!important; transition:none!important}
    .btn-primary:hover::after{animation:none!important; opacity:0}
    .reveal img,.rv-l img,.rv-r img{clip-path:none!important; transition:none!important}
  }

  /* ===== final refinement pass ===== */
  /* contrast: lift muted text for legibility/authority */
  :root{ --muted:rgba(255,255,255,.64); --muted-2:rgba(255,255,255,.48) }
  /* never hide primary content if JS is off or an observer misfires */
  html:not(.js) .reveal, html:not(.js) .rv-l, html:not(.js) .rv-r, html:not(.js) h1 .wi{opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important}
  /* typography: hierarchy + readability */
  h3,h4{line-height:1.18}
  .card h3{line-height:1.2}
  .lead{line-height:1.6}
  .card p,.result p,.quote p,.plan li,.step p,.ed-item p,.mile p{line-height:1.62}
  /* anchored sections clear the fixed nav */
  section[id]{scroll-margin-top:96px}
  /* spacing & breathing room */
  .sec-head{margin-bottom:60px}
  .card{padding:32px; background:rgba(255,255,255,.03)}
  .ic{box-shadow:0 8px 24px -10px rgba(166,241,219,.45)}
  /* case-study cards -> enterprise framing */
  .result{padding:34px; position:relative; overflow:hidden}
  .result::before{content:""; position:absolute; left:0; top:0; height:3px; width:48px; background:var(--grad)}
  .result .big{font-size:clamp(2.6rem,4.2vw,3.1rem); margin-top:22px}
  /* testimonials */
  .quote p{font-size:1.08rem; line-height:1.6}
  .quote .av{box-shadow:0 6px 18px -8px rgba(166,241,219,.55)}
  /* line-balance big headings */
  .hero h1,.page-hero h1,.ahero h1,.sec-head h2,.cta-panel h2{text-wrap:balance}
  /* mobile */
  @media(max-width:900px){ .stats{grid-template-columns:repeat(2,1fr); gap:30px 24px} }
  @media(max-width:600px){ .cta-panel{padding:56px 22px} .cta-panel p{font-size:1.05rem} .sec-head{margin-bottom:42px} }
  @media(max-width:560px){ .stats{grid-template-columns:1fr} }
  @media(max-width:380px){ .hero h1{font-size:2.35rem} }
  /* hero trust rating */
  .rating{display:inline-flex; align-items:center; gap:9px; margin-bottom:18px; font-size:.92rem; color:var(--muted)}
  .rating .stars{color:#E6FB66; letter-spacing:2px; font-size:.95rem}
  .rating b{color:#fff; font-weight:600}
  /* footer contact */
  .foot-contact{display:flex; flex-direction:column; gap:7px; margin:0 0 20px}
  .foot-contact a{color:var(--muted); font-size:.95rem; transition:color .25s}
  .foot-contact a:hover{color:#fff}
  /* case-study meta row */
  .case-meta{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:18px; overflow:hidden}
  .case-meta > div{padding:22px 24px; border-right:1px solid var(--line)}
  .case-meta > div:last-child{border-right:0}
  .case-meta span{display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); margin-bottom:7px}
  .case-meta b{font-family:var(--display); font-weight:600; font-size:1.02rem; line-height:1.3}
  @media(max-width:760px){ .case-meta{grid-template-columns:repeat(2,1fr)} .case-meta>div:nth-child(2){border-right:0} .case-meta>div:nth-child(1),.case-meta>div:nth-child(2){border-bottom:1px solid var(--line)} }
  @media(max-width:430px){ .case-meta{grid-template-columns:1fr} .case-meta>div{border-right:0; border-bottom:1px solid var(--line)} .case-meta>div:last-child{border-bottom:0} }

  /* ===== WordPress integration: CF7 field reset + pagination + alignment ===== */
  .field .wpcf7-form-control-wrap{display:block}
  .field .wpcf7-form-control{background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:12px; padding:13px 15px; color:#fff; font-family:var(--body); font-size:.98rem; transition:border-color .25s, background .25s; width:100%}
  .field .wpcf7-form-control:focus{outline:none; border-color:rgba(166,241,219,.5); background:rgba(255,255,255,.05)}
  .field textarea.wpcf7-form-control{resize:vertical; min-height:130px}
  .hero-form .field .wpcf7-form-control{padding:11px 14px}
  .hero-form textarea.wpcf7-form-control{min-height:78px}
  .wpcf7-not-valid-tip{color:#ff9b9b; font-size:.82rem; margin-top:6px}
  .wpcf7-response-output{margin:16px 0 0; border-radius:14px; padding:16px 18px; font-size:.92rem; border:1px solid var(--line)}
  .wpcf7-mail-sent-ok{background:rgba(166,241,219,.08); border-color:rgba(166,241,219,.3); color:#cdf7e6}
  .wpcf7-validation-errors,.wpcf7-mail-sent-ng,.wpcf7-spam-blocked{background:rgba(255,120,120,.08); border-color:rgba(255,120,120,.3); color:#ffd7d7}
  .nl-form .wpcf7-form-control-wrap{flex:1; min-width:240px}
  .nl-form input.wpcf7-form-control{width:100%; background:rgba(255,255,255,.05); border:1px solid var(--line-2); border-radius:100px; padding:14px 22px; color:#fff; font-family:var(--body)}
  .nl-form .wpcf7-response-output{flex-basis:100%; max-width:480px; margin:12px auto 0}
  form.wpcf7-form br{display:none}

  .navigation.pagination{margin-top:40px; display:flex; justify-content:center}
  .navigation.pagination .nav-links{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
  .navigation.pagination a,.navigation.pagination span{font-family:var(--mono); font-size:.85rem; color:var(--muted); border:1px solid var(--line-2); padding:9px 16px; border-radius:100px; transition:all .25s}
  .navigation.pagination a:hover{color:#fff}
  .navigation.pagination span.current{color:#06210f; background:var(--grad); border-color:transparent}