:root{--ink:#1d211f;--muted:#69706b;--paper:#f7f6f1;--line:#dbddd5;--lime:#ccff53;--coral:#ff896f;--blue:#93c7ff;--gold:#f4c54f}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif;font-size:15px;line-height:1.6}a{color:inherit;text-decoration:none}.container{width:min(1120px,calc(100% - 48px));margin:auto}.site-header{background:var(--paper);border-bottom:1px solid var(--line);position:relative;z-index:10}.nav-wrap{height:82px;display:flex;align-items:center;justify-content:space-between}.brand{font-size:21px;font-weight:800;letter-spacing:-1px;display:inline-flex;align-items:center;gap:8px}.brand-mark{font-family:Georgia,serif;background:var(--ink);color:var(--lime);width:27px;height:27px;border-radius:50%;display:grid;place-items:center;font-size:17px;font-style:italic}.main-nav{display:flex;gap:31px;align-items:center;font-size:13px;font-weight:700}.main-nav>a{color:#575d58}.main-nav>a:hover,.main-nav>a.active{color:var(--ink)}.nav-cta{background:var(--ink);color:#fff!important;padding:10px 16px;border-radius:99px}.nav-cta span,.button span{margin-left:8px}.menu-toggle{display:none;background:none;border:0;font-size:24px}.hero{overflow:hidden;background:#e5e7dc;min-height:580px}.hero-layout{display:grid;grid-template-columns:1.05fr .95fr;min-height:580px;align-items:center}.eyebrow{font:500 11px 'DM Mono',monospace;letter-spacing:1.3px;color:#535a54;margin:0 0 18px}.hero h1,.page-intro h1,.contact-section h1{font-size:clamp(46px,5.4vw,76px);line-height:1.03;letter-spacing:-4px;margin:0;font-weight:800}.hero h1 em,.page-intro h1 em,.contact-section h1 em{font-family:Georgia,serif;font-weight:400}.hero-text{font-size:17px;max-width:455px;margin:28px 0;color:#4f5551}.hero-actions{display:flex;align-items:center;gap:25px}.button{display:inline-block;padding:13px 18px;border-radius:3px;font-size:13px;font-weight:800;cursor:pointer;border:0}.button-dark{background:var(--ink);color:white}.button-light{background:white;color:var(--ink)}.button-accent{background:var(--lime);color:var(--ink)}.button-outline{border:1px solid #b9bbb4;background:transparent}.text-link{font-size:13px;font-weight:800;border-bottom:1px solid var(--ink);padding-bottom:3px}.hero-art{height:100%;position:relative;min-height:500px}.orb{position:absolute;border-radius:50%}.orb-one{width:360px;height:360px;background:var(--lime);top:83px;left:40px}.orb-two{width:205px;height:205px;background:var(--coral);bottom:30px;right:-15px}.window-card{position:absolute;z-index:2;width:300px;height:315px;left:90px;top:108px;background:#202522;color:#fff;padding:25px;box-shadow:15px 15px 0 rgba(29,33,31,.12)}.window-top{display:flex;gap:6px;margin-bottom:35px}.window-top i{height:7px;width:7px;border-radius:50%;background:#7c837d}.window-card p{font:500 10px 'DM Mono';letter-spacing:1px;color:#c5cdc1}.window-card strong{font-size:30px;letter-spacing:-1.5px;line-height:1.15}.chart{height:68px;display:flex;align-items:end;gap:10px;margin-top:21px}.chart span{display:block;width:17px;background:var(--lime)}.chart span:nth-child(1){height:19px}.chart span:nth-child(2){height:39px}.chart span:nth-child(3){height:30px}.chart span:nth-child(4){height:53px}.chart span:nth-child(5){height:43px}.chart span:nth-child(6){height:65px}.chart span:nth-child(7){height:57px}.float-card{position:absolute;z-index:3;bottom:67px;left:22px;background:#fff;padding:14px 18px;display:flex;gap:10px;align-items:center;box-shadow:0 9px 25px rgba(0,0,0,.1);font-size:12px}.float-card span{color:#6c9b00;font-size:18px}.float-card b,.float-card small{display:block;line-height:1.4}.float-card small{color:var(--muted)}.logo-strip{background:#fff;padding:24px 0;border-bottom:1px solid var(--line)}.logo-strip p{font:500 10px 'DM Mono';letter-spacing:1px;color:#777d77;text-align:center;margin:0 0 15px}.logos{display:flex;justify-content:space-between;align-items:center;color:#737973;font-size:17px;letter-spacing:-1px}.logos b:nth-child(2){font-size:14px;letter-spacing:2px}.logos b:nth-child(3){font-style:italic}.section{padding:105px 0}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:45px}.section-heading h2,.story h2{font-size:46px;line-height:1.08;letter-spacing:-2.5px;margin:0}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.product-card{background:#fff;padding:29px;min-height:300px;display:flex;flex-direction:column;border:1px solid #e6e7e2;transition:transform .2s,box-shadow .2s}.product-card:hover{transform:translateY(-5px);box-shadow:0 12px 25px rgba(0,0,0,.06)}.product-icon{width:45px;height:45px;border-radius:13px;display:grid;place-items:center;font-size:24px;font-weight:800;margin-bottom:27px}.icon-gold{background:#fff0ba}.icon-coral{background:#ffd1c9}.icon-blue{background:#d6eaff}.product-type,.plan-name{font:500 10px 'DM Mono';letter-spacing:1px;color:#747a75;margin:0}.product-card h3{font-size:25px;letter-spacing:-1px;margin:7px 0}.product-card>p:not(.product-type){font-size:13px;color:var(--muted);margin:0}.card-bottom{border-top:1px solid var(--line);margin-top:auto;padding-top:17px;font-size:12px;color:#656c66;display:flex;justify-content:space-between;align-items:center}.card-bottom b{color:var(--ink)}.card-bottom a{font-size:22px}.statement{background:var(--ink);color:#fff;padding:100px 0}.statement .eyebrow{color:#bec6bb}.statement h2{max-width:760px;font-size:52px;line-height:1.1;letter-spacing:-3px;margin:0 0 32px}.site-footer{background:#eef0e8;padding:55px 0 19px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}.site-footer p{color:#646b65;font-size:13px}.site-footer a:not(.brand){display:block;font-size:13px;margin:5px 0}.footer-label{font:500 10px 'DM Mono';letter-spacing:1px;margin:0 0 10px!important}.copyright{border-top:1px solid #d7d9d2;margin-top:40px;padding-top:18px;color:#737974;font-size:11px}.page-intro{padding:100px 0 75px;background:#e5e7dc}.page-intro>div>p:last-child{max-width:470px;font-size:17px;color:#535a54;margin:22px 0 0}.all-products .product-card{min-height:320px}.product-hero{padding:45px 0 75px;background:#e5e7dc}.back-link{font-size:13px;font-weight:700}.product-title{display:flex;align-items:center;gap:24px;margin-top:60px}.large-icon{width:80px;height:80px;border-radius:22px;font-size:40px;margin:0}.product-title h1{font-size:54px;letter-spacing:-3px;line-height:1;margin:0}.product-title>div:last-child>p:last-child{max-width:600px;font-size:16px;color:#555c56;margin:14px 0 0}.pricing{padding-top:90px}.pricing-note{font-size:13px;color:var(--muted);margin:0}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.price-card{background:#fff;border:1px solid #dcdfd6;padding:30px;position:relative;min-height:420px;display:flex;flex-direction:column}.price-card.popular{background:var(--ink);color:#fff;border-color:var(--ink)}.price-card.popular .plan-name,.price-card.popular>p{color:#c7cec6}.popular-label{position:absolute;right:20px;top:20px;background:var(--lime);color:var(--ink);font:500 9px 'DM Mono';letter-spacing:.6px;padding:5px 7px}.price-card h3{font-size:38px;letter-spacing:-2px;margin:10px 0}.price-card h3 small{font-size:12px;font-weight:500;letter-spacing:0}.price-card>p{font-size:13px;color:var(--muted);margin:0}.price-card hr{width:100%;border:0;border-top:1px solid var(--line);margin:25px 0 17px}.price-card.popular hr{border-color:#4d534f}.price-card ul{list-style:none;padding:0;margin:0 0 26px;font-size:12px;line-height:2.2}.price-card .button{margin-top:auto;text-align:center}.split{display:grid;grid-template-columns:1fr 1fr;gap:90px}.split>div:last-child{font-size:16px;color:#505752}.split>div:last-child p:first-child{margin-top:0}.values{background:#e5e7dc;padding:85px 0}.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:55px}.value-grid article{border-top:1px solid #afb4ac;padding-top:18px}.value-grid span{font:500 11px 'DM Mono';color:#676f67}.value-grid h3{font-size:23px;letter-spacing:-1px;margin:22px 0 8px}.value-grid p{font-size:13px;color:var(--muted);margin:0}.contact-section{padding:90px 0 105px}.contact-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:100px}.contact-section h1{font-size:62px}.contact-section>div>div>p:not(.eyebrow){font-size:16px;color:var(--muted);max-width:360px}.contact-details{margin-top:46px}.contact-details p{font-size:13px;margin:15px 0!important}.contact-details b,.contact-details a,.contact-details span{display:block}.contact-details b{font:500 10px 'DM Mono';letter-spacing:1px;color:#737a74}.contact-details a{text-decoration:underline;color:var(--ink)}.contact-form-wrap{background:#fff;border:1px solid var(--line);padding:34px}form{display:grid;grid-template-columns:1fr 1fr;gap:19px}label{font-size:12px;font-weight:800}label span{color:var(--muted);font-weight:400}input,textarea,select{width:100%;display:block;font:14px Manrope,sans-serif;margin-top:6px;padding:11px 12px;border:1px solid #cdd1c8;background:#fbfbf9;border-radius:2px;color:var(--ink)}textarea{height:115px;resize:vertical}label:has(textarea),form button{grid-column:1/-1}.form-errors{padding:11px;background:#ffe3dc;color:#872c1b;font-size:13px;margin-bottom:18px}.success{text-align:center;padding:60px 10px}.success span{background:var(--lime);display:grid;place-items:center;border-radius:50%;width:45px;height:45px;margin:auto;font-size:20px}.success h2{font-size:28px;letter-spacing:-1px;margin:15px 0 3px}.success p{color:var(--muted);font-size:14px}.empty-state{text-align:center;padding:140px 0}.empty-state h1{font-size:40px}
@media(max-width:700px){.container{width:min(100% - 32px,1120px)}.nav-wrap{height:70px}.menu-toggle{display:block}.main-nav{display:none;position:absolute;left:0;right:0;top:70px;background:var(--paper);border-bottom:1px solid var(--line);padding:15px 24px;flex-direction:column;align-items:stretch;gap:0}.main-nav.open{display:flex}.main-nav a{padding:11px 0}.nav-cta{text-align:center;margin-top:8px}.hero-layout,.contact-layout,.split{grid-template-columns:1fr;gap:40px}.hero{min-height:auto}.hero-copy{padding:78px 0 20px}.hero h1,.page-intro h1,.contact-section h1{letter-spacing:-2.5px}.hero-art{min-height:385px}.orb-one{width:280px;height:280px;top:20px;left:15%}.orb-two{width:140px;height:140px}.window-card{width:250px;height:270px;left:17%;top:60px;padding:20px}.window-card strong{font-size:25px}.float-card{bottom:23px;left:3%}.logos{gap:14px;flex-wrap:wrap;justify-content:center}.section{padding:70px 0}.section-heading{display:block;margin-bottom:30px}.section-heading .text-link{display:inline-block;margin-top:20px}.section-heading h2,.story h2{font-size:37px;letter-spacing:-2px}.product-grid,.pricing-grid,.value-grid{grid-template-columns:1fr}.statement{padding:70px 0}.statement h2{font-size:38px;letter-spacing:-2px}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}.page-intro{padding:70px 0 55px}.product-hero{padding:30px 0 55px}.product-title{margin-top:40px;align-items:flex-start}.product-title h1{font-size:44px}.pricing-note{margin-top:20px}.split{gap:30px}.values{padding:65px 0}.contact-section{padding:65px 0}.contact-layout{gap:45px}form{grid-template-columns:1fr}.contact-form-wrap{padding:23px}.hero-actions{gap:15px}.button{padding:12px 14px}}


/* Brand logo. Transparent PNG, trimmed to the artwork and sized to its
   natural 3.18:1 ratio, so object-fit: contain never crops it. */
.brand{display:inline-flex;align-items:center}
.brand-logo{width:166px;height:52px;display:block;object-fit:contain}
.site-footer .brand-logo{width:190px;height:60px}

/* Honeypot field on the contact form: hidden from people, visible to bots. */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:700px){
  .brand-logo{width:144px;height:45px}
}


/* ============================================================
   MOTION & INTERACTION LAYER
   Additive only - every rule here animates transform/opacity or
   adds a hover state. Nothing changes layout, so if this block is
   removed the site still renders exactly as before.
   Above-the-fold entrances are pure CSS (no flash of hidden text);
   below-the-fold reveals are driven by site.js.
   ============================================================ */

@keyframes tm-rise      { from { opacity:0; transform:translateY(26px) } to { opacity:1; transform:none } }
@keyframes tm-pop       { from { opacity:0; transform:translateY(30px) scale(.96) } to { opacity:1; transform:none } }
@keyframes tm-bar       { from { transform:scaleY(0) } to { transform:scaleY(1) } }
@keyframes tm-bob       { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-9px) } }
@keyframes tm-drift-a   { 0%,100% { transform:translate(0,0) scale(1) } 50% { transform:translate(14px,-18px) scale(1.05) } }
@keyframes tm-drift-b   { 0%,100% { transform:translate(0,0) scale(1) } 50% { transform:translate(-16px,12px) scale(1.07) } }
@keyframes tm-marquee   { from { transform:translateX(0) } to { transform:translateX(-50%) } }
@keyframes tm-glow      { 0%,100% { box-shadow:0 0 0 0 rgba(204,255,83,.55) } 50% { box-shadow:0 0 0 14px rgba(204,255,83,0) } }
@keyframes tm-nav-in    { from { opacity:0; transform:translateY(-8px) } to { opacity:1; transform:none } }

/* ---- Sticky header that reacts to scroll ---- */
.site-header{position:sticky;top:0;transition:box-shadow .35s ease,background-color .35s ease,border-color .35s ease}
.site-header.is-stuck{box-shadow:0 6px 26px rgba(29,33,31,.09);background:rgba(247,246,241,.88);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px)}
.site-header .brand-logo{transition:transform .4s cubic-bezier(.22,1,.36,1)}
.site-header.is-stuck .brand-logo{transform:scale(.93)}

/* Reading-progress bar, injected by site.js */
.tm-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--lime),var(--coral));z-index:60;pointer-events:none}

/* ---- Navigation ---- */
.main-nav>a:not(.nav-cta){position:relative}
.main-nav>a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .38s cubic-bezier(.22,1,.36,1)}
.main-nav>a:not(.nav-cta):hover::after,.main-nav>a:not(.nav-cta).active::after{transform:scaleX(1);transform-origin:left}
.nav-cta{transition:transform .28s cubic-bezier(.22,1,.36,1)}
.nav-cta:hover{transform:translateY(-2px)}
.nav-cta span{display:inline-block;transition:transform .28s}
.nav-cta:hover span{transform:translate(3px,-3px)}
.menu-toggle{transition:transform .3s}
.menu-toggle:active{transform:scale(.9)}
.main-nav.open{animation:tm-nav-in .32s cubic-bezier(.22,1,.36,1) backwards}

/* ---- Buttons and text links ---- */
.button{position:relative;overflow:hidden;transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s ease}
.button::after{content:"";position:absolute;top:0;left:0;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);transform:translateX(-160%) skewX(-18deg);transition:transform .65s cubic-bezier(.22,1,.36,1)}
.button:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(29,33,31,.2)}
.button:hover::after{transform:translateX(320%) skewX(-18deg)}
.button:active{transform:translateY(-1px)}
.button span{display:inline-block;transition:transform .28s cubic-bezier(.22,1,.36,1)}
.button:hover span{transform:translateX(5px)}
.text-link{position:relative;transition:color .25s}
.text-link span{display:inline-block;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.text-link:hover span{transform:translate(4px,-4px)}
.text-link::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.text-link:hover::after{transform:scaleX(1);transform-origin:left}

/* ---- Hero entrance (CSS only, so nothing flashes) ---- */
.hero-copy .eyebrow{animation:tm-rise .75s .05s cubic-bezier(.22,1,.36,1) backwards}
.hero-copy h1{animation:tm-rise .85s .16s cubic-bezier(.22,1,.36,1) backwards}
.hero-copy .hero-text{animation:tm-rise .85s .3s cubic-bezier(.22,1,.36,1) backwards}
.hero-actions{animation:tm-rise .85s .44s cubic-bezier(.22,1,.36,1) backwards}
.window-card{animation:tm-pop .95s .34s cubic-bezier(.22,1,.36,1) backwards}
.float-card{animation:tm-rise .8s .72s cubic-bezier(.22,1,.36,1) backwards,tm-bob 5.5s 1.6s ease-in-out infinite}
.orb-one{animation:tm-drift-a 15s ease-in-out infinite}
.orb-two{animation:tm-drift-b 12s ease-in-out infinite}
.hero-art{transition:transform .5s cubic-bezier(.22,1,.36,1);will-change:transform}
.window-card .window-top i{transition:transform .3s}
.window-card:hover .window-top i:nth-child(1){transform:scale(1.35)}
.window-card:hover .window-top i:nth-child(2){transform:scale(1.35);transition-delay:.05s}
.window-card:hover .window-top i:nth-child(3){transform:scale(1.35);transition-delay:.1s}

/* Chart bars grow from the baseline, one after another */
.chart span{transform-origin:bottom;animation:tm-bar .75s cubic-bezier(.22,1,.36,1) backwards;transition:opacity .3s}
.chart span:nth-child(1){animation-delay:.75s}
.chart span:nth-child(2){animation-delay:.83s}
.chart span:nth-child(3){animation-delay:.91s}
.chart span:nth-child(4){animation-delay:.99s}
.chart span:nth-child(5){animation-delay:1.07s}
.chart span:nth-child(6){animation-delay:1.15s}
.chart span:nth-child(7){animation-delay:1.23s}
.window-card:hover .chart span{opacity:.72}
.window-card:hover .chart span:hover{opacity:1}

/* ---- Trust strip becomes a seamless marquee (set up by site.js) ---- */
.logo-strip{overflow:hidden}
.logos.is-marquee{flex-wrap:nowrap;justify-content:flex-start;width:max-content;gap:58px;animation:tm-marquee 34s linear infinite}
.logos.is-marquee:hover{animation-play-state:paused}
.logos b{transition:color .3s,transform .3s}
.logos b:hover{color:var(--ink);transform:translateY(-2px)}

/* ---- Cards ---- */
.product-card{position:relative;overflow:hidden;transition:transform .42s cubic-bezier(.22,1,.36,1),box-shadow .42s ease,border-color .42s ease}
.product-card::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(204,255,83,.16),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none}
.product-card:hover{transform:translateY(-9px);box-shadow:0 20px 40px rgba(29,33,31,.1);border-color:#cdd1c6}
.product-card:hover::before{opacity:1}
.product-icon{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.product-card:hover .product-icon{transform:rotate(-8deg) scale(1.1)}
.product-card h3{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.product-card:hover h3{transform:translateX(3px)}
.card-bottom a{display:inline-block;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.product-card:hover .card-bottom a{transform:translate(4px,-4px)}

/* ---- Pricing ---- */
.price-card{transition:transform .42s cubic-bezier(.22,1,.36,1),box-shadow .42s ease}
.price-card:hover{transform:translateY(-8px);box-shadow:0 22px 44px rgba(29,33,31,.12)}
.price-card.popular .popular-label{animation:tm-glow 2.8s ease-in-out infinite}
.price-card ul li{transition:transform .3s}
.price-card:hover ul li{transform:translateX(3px)}
.price-card ul li:nth-child(2){transition-delay:.03s}
.price-card ul li:nth-child(3){transition-delay:.06s}
.price-card ul li:nth-child(4){transition-delay:.09s}

/* ---- Values / stats ---- */
.value-grid article{transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .4s}
.value-grid article:hover{transform:translateY(-6px);border-color:var(--ink)}
.value-grid span{display:inline-block}

/* ---- Forms ---- */
form input,form textarea,form select{transition:border-color .28s,box-shadow .28s,transform .28s}
form input:focus,form textarea:focus,form select:focus{box-shadow:0 0 0 3px rgba(204,255,83,.45);outline:none}
.contact-form-wrap{transition:box-shadow .4s}
.contact-form-wrap:focus-within{box-shadow:0 18px 44px rgba(29,33,31,.1)}
.success span{display:inline-block;animation:tm-pop .6s cubic-bezier(.34,1.56,.64,1) backwards}

/* ---- Footer ---- */
.site-footer a{transition:opacity .25s,transform .25s}
.site-footer .footer-grid div a:hover{opacity:.7;transform:translateX(3px)}

/* ---- JS-driven reveal for anything below the fold ---- */
.tm-reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.tm-reveal.is-in{opacity:1;transform:none}

/* ---- Keyboard accessibility ---- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:2px}

/* ---- Respect the system "reduce motion" setting ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .tm-reveal{opacity:1 !important;transform:none !important}
  .logos.is-marquee{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .hero-art{transform:none !important}
}

/* Reduced motion: also cancel animation delays. Without this, entrance
   animations keep their "backwards" fill during the delay, leaving hero text
   invisible for up to 0.7s before snapping in. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-delay:-1ms !important}
}


/* ============================================================
   FLOATING CONTACT BUTTONS
   Rendered by floating-buttons.php, configured in the admin panel.
   Collapsed to a single launcher; expands into a stack on click.
   ============================================================ */
.tm-float{position:fixed;right:20px;bottom:20px;z-index:70;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:12px}

.tm-float-toggle{width:56px;height:56px;border:0;border-radius:50%;background:var(--ink);color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 10px 26px rgba(29,33,31,.28);transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;padding:0}
.tm-float-toggle:hover{transform:scale(1.07)}
.tm-float-toggle:active{transform:scale(.96)}
.tm-float-toggle svg{width:26px;height:26px;fill:currentColor;grid-area:1/1;transition:opacity .25s,transform .35s cubic-bezier(.22,1,.36,1)}
.tm-float-close{opacity:0;transform:rotate(-90deg) scale(.6)}
.tm-float.is-open .tm-float-open{opacity:0;transform:rotate(90deg) scale(.6)}
.tm-float.is-open .tm-float-close{opacity:1;transform:none}

.tm-float-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column-reverse;gap:12px}
.tm-float-list li{opacity:0;transform:translateY(14px) scale(.85);pointer-events:none;transition:opacity .3s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i) * 40ms)}
.tm-float.is-open .tm-float-list li{opacity:1;transform:none;pointer-events:auto}

.tm-float-btn{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 20px rgba(29,33,31,.22);transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;position:relative}
.tm-float-btn:hover{transform:scale(1.09);box-shadow:0 12px 26px rgba(29,33,31,.3)}
.tm-float-btn svg{width:28px;height:28px;fill:currentColor}
.tm-float-whatsapp{background:#25d366}
.tm-float-telegram{background:#229ed9}
.tm-float-youtube{background:#f00}

/* Name slides out of the button on hover, and is read by screen readers. */
.tm-float-label{position:absolute;right:calc(100% + 10px);white-space:nowrap;background:var(--ink);color:#fff;font-size:12px;font-weight:700;padding:7px 11px;border-radius:4px;opacity:0;transform:translateX(8px);transition:opacity .25s,transform .25s;pointer-events:none}
.tm-float-btn:hover .tm-float-label,.tm-float-btn:focus-visible .tm-float-label{opacity:1;transform:none}

@media (max-width:700px){
  .tm-float{right:14px;bottom:14px;gap:10px}
  .tm-float-toggle{width:52px;height:52px}
  .tm-float-btn{width:48px;height:48px}
  .tm-float-btn svg{width:25px;height:25px}
  .tm-float-label{display:none}
}

@media (prefers-reduced-motion: reduce){
  .tm-float-list li{transition-delay:0s}
}


/* ---- Product category groups on the Products page ---- */
.category-block{margin-bottom:60px;scroll-margin-top:100px}
.category-block:last-child{margin-bottom:0}
.category-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:12px}
.category-heading h2{font-size:29px;letter-spacing:-1.3px;margin:0}
.category-heading span{font:500 11px 'DM Mono',monospace;letter-spacing:.8px;color:var(--muted);white-space:nowrap}
.category-intro{color:var(--muted);margin:0 0 26px;max-width:60ch}
.category-block .all-products{margin-top:22px}

@media (max-width:700px){
  .category-block{margin-bottom:44px}
  .category-heading h2{font-size:24px}
}


/* ============================================================
   CAMPAIGN PIPELINE ANIMATION
   Markup: pipeline.php   Behaviour: assets/js/pipeline.js

   The whole sequence is CSS keyframes on transform/opacity only, so it runs on
   the compositor and never touches layout. Nothing animates until .is-playing
   is added, and every animation uses "backwards" fill, so with JavaScript off
   the module simply renders in its finished state.
   ============================================================ */

.tm-pipe-section{padding-top:10px}

.tm-pipe{background:#fff;border:1px solid #e2e4dd;border-radius:8px;overflow:hidden;box-shadow:0 24px 60px rgba(29,33,31,.08);margin-top:34px}

/* ---- Window bar ---- */
.tm-pipe-bar{display:flex;align-items:center;gap:14px;padding:13px 18px;background:var(--ink);color:#fff}
.tm-pipe-dots{display:flex;gap:6px}
.tm-pipe-dots i{width:9px;height:9px;border-radius:50%;background:#4d534f;display:block}
.tm-pipe-bar .tm-pipe-file{margin:0;font:500 11px/1 'DM Mono',ui-monospace,monospace;letter-spacing:1px;color:#c5cdc1;flex:1}
.tm-pipe-live{display:inline-flex;align-items:center;gap:7px;font:800 10px/1 Manrope,Arial,sans-serif;letter-spacing:1.2px;color:var(--lime)}
.tm-pipe-live i{width:7px;height:7px;border-radius:50%;background:var(--lime);display:block}

/* ---- Stage layout ---- */
.tm-pipe-stage{display:grid;grid-template-columns:1fr 1.05fr 1fr;gap:0 8px;align-items:center;padding:30px 26px}

.tm-pipe-node{background:var(--paper);border:1px solid #e2e4dd;border-radius:6px;padding:18px}
.tm-pipe-node h3{font-size:19px;letter-spacing:-.7px;margin:8px 0 6px}
.tm-pipe-node p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}
.tm-pipe-tag{font:500 9px/1 'DM Mono',ui-monospace,monospace;letter-spacing:1.4px;color:#8b918a}

.tm-pipe-feed{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px}
.tm-pipe-feed li{display:flex;align-items:center;gap:8px;font:500 11px/1 'DM Mono',ui-monospace,monospace;color:#5f665f}
.tm-pipe-feed span{width:6px;height:6px;border-radius:50%;background:var(--lime);flex:none}

.tm-pipe-targets{display:grid;gap:14px}
.tm-pipe-target{position:relative;border-left-width:3px}
.tm-pipe-google{border-left-color:var(--blue)}
.tm-pipe-meta{border-left-color:var(--coral)}
.tm-pipe-metric{display:flex;flex-direction:column;gap:2px;margin-top:10px !important}
.tm-pipe-metric b{font-size:25px;letter-spacing:-1.2px;color:var(--ink);font-variant-numeric:tabular-nums}
.tm-pipe-metric small{font:500 10px/1 'DM Mono',ui-monospace,monospace;letter-spacing:.6px;color:#8b918a}

/* ---- Rails ---- */
.tm-pipe-rails{height:200px}
.tm-pipe-rails svg{width:100%;height:100%;display:block;overflow:visible}
.tm-pipe-rail{fill:none;stroke:#dfe2da;stroke-width:2;vector-effect:non-scaling-stroke}
.tm-pipe-flow{fill:none;stroke:var(--lime);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:6 94;stroke-dashoffset:0;opacity:0}
.tm-pipe-packet{fill:var(--ink);opacity:0}
.tm-pipe-emitter{fill:var(--lime);opacity:0}

/* ---- Result panel ---- */
.tm-pipe-result{display:grid;grid-template-columns:1fr 1.1fr;gap:30px;align-items:center;padding:26px;border-top:1px solid #e9ebe4;background:var(--paper)}
.tm-pipe-big{margin:6px 0 10px}
.tm-pipe-big b{font-size:52px;letter-spacing:-2.6px;line-height:1;font-variant-numeric:tabular-nums}
.tm-pipe-note{margin:0;color:var(--muted);font-size:13px;line-height:1.65;max-width:34ch}
.tm-pipe-chart svg{width:100%;height:auto;display:block}
.tm-pipe-bars rect{fill:#dfe2da;transform-box:fill-box;transform-origin:bottom;transform:scaleY(1)}
.tm-pipe-bars rect:nth-child(6){fill:#c3cbb8}
.tm-pipe-bars rect:nth-child(7){fill:var(--lime)}
.tm-pipe-area{fill:var(--lime);opacity:.16}
.tm-pipe-trend{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.tm-pipe-peak{fill:var(--ink)}

/* ============================================================
   The sequence. Every rule below is scoped to .is-playing, which
   assets/js/pipeline.js adds when the module scrolls into view.
   ============================================================ */

@keyframes tm-pipe-in     { from { opacity:0; transform:translateY(18px) } to { opacity:1; transform:none } }
@keyframes tm-pipe-pop    { from { opacity:0; transform:scale(.7) } to { opacity:1; transform:none } }
@keyframes tm-pipe-draw   { from { stroke-dashoffset:100 } to { stroke-dashoffset:0 } }
@keyframes tm-pipe-travel { from { offset-distance:0%; opacity:0 }
                            12%  { opacity:1 }
                            88%  { opacity:1 }
                            to   { offset-distance:100%; opacity:0 } }
@keyframes tm-pipe-dash   { from { stroke-dashoffset:100 } to { stroke-dashoffset:0 } }
@keyframes tm-pipe-grow   { from { transform:scaleY(0) } to { transform:scaleY(1) } }
@keyframes tm-pipe-blink  { 0%,100% { opacity:1 } 50% { opacity:.25 } }
@keyframes tm-pipe-ping   { 0% { transform:scale(.8); opacity:.9 } 70%,100% { transform:scale(1.9); opacity:0 } }

/* Header comes alive */
.tm-pipe.is-playing .tm-pipe-live i{animation:tm-pipe-blink 1.4s .2s ease-in-out infinite}

/* 1. Source node rises in, its event feed ticks */
.tm-pipe.is-playing .tm-pipe-source{animation:tm-pipe-in .7s .05s cubic-bezier(.22,1,.36,1) backwards}
.tm-pipe.is-playing .tm-pipe-feed li{animation:tm-pipe-in .5s cubic-bezier(.22,1,.36,1) backwards}
.tm-pipe.is-playing .tm-pipe-feed li:nth-child(1){animation-delay:.45s}
.tm-pipe.is-playing .tm-pipe-feed li:nth-child(2){animation-delay:.58s}
.tm-pipe.is-playing .tm-pipe-feed li:nth-child(3){animation-delay:.71s}
.tm-pipe.is-playing .tm-pipe-feed span{animation:tm-pipe-blink 1.6s linear infinite}
.tm-pipe.is-playing .tm-pipe-feed li:nth-child(2) span{animation-delay:.3s}
.tm-pipe.is-playing .tm-pipe-feed li:nth-child(3) span{animation-delay:.6s}

/* 2. Rails draw, then a lime pulse runs along them */
.tm-pipe.is-playing .tm-pipe-rail{stroke-dasharray:100;animation:tm-pipe-draw .8s .35s cubic-bezier(.22,1,.36,1) backwards}
.tm-pipe.is-playing .tm-pipe-flow{opacity:1;animation:tm-pipe-dash 2.6s 1.1s linear infinite}
.tm-pipe.is-playing .tm-pipe-flow:nth-of-type(4){animation-delay:1.5s}
.tm-pipe.is-playing .tm-pipe-emitter{animation:tm-pipe-pop .4s .9s cubic-bezier(.34,1.56,.64,1) backwards,
                                               tm-pipe-ping 2s 1.3s ease-out infinite}

/* 3. Data packets travel the curves.
      offset-path on an SVG child uses the SVG user coordinate system, so the
      packets stay locked to the rails at any container width. */
.tm-pipe.is-playing .tm-pipe-packet{animation:tm-pipe-travel 2.4s cubic-bezier(.5,0,.5,1) infinite backwards}
.tm-pipe-p1,.tm-pipe-p2,.tm-pipe-p3{offset-path:path("M0 100 C 70 100, 90 44, 240 44")}
.tm-pipe-p4,.tm-pipe-p5,.tm-pipe-p6{offset-path:path("M0 100 C 70 100, 90 156, 240 156")}
.tm-pipe.is-playing .tm-pipe-p1{animation-delay:1.0s}
.tm-pipe.is-playing .tm-pipe-p2{animation-delay:1.8s}
.tm-pipe.is-playing .tm-pipe-p3{animation-delay:2.6s}
.tm-pipe.is-playing .tm-pipe-p4{animation-delay:1.4s}
.tm-pipe.is-playing .tm-pipe-p5{animation-delay:2.2s}
.tm-pipe.is-playing .tm-pipe-p6{animation-delay:3.0s}

/* Older Safari has no motion path: drop the packets and let the flowing dash
   carry the movement instead. Nothing looks broken, it is just simpler. */
@supports not (offset-path: path("M0 0")){
  .tm-pipe-packet{display:none}
  .tm-pipe.is-playing .tm-pipe-flow{stroke-dasharray:10 30;animation-duration:1.8s}
}

/* 4. Targets light up as the packets land */
.tm-pipe.is-playing .tm-pipe-google{animation:tm-pipe-in .6s 1.35s cubic-bezier(.22,1,.36,1) backwards}
.tm-pipe.is-playing .tm-pipe-meta{animation:tm-pipe-in .6s 1.6s cubic-bezier(.22,1,.36,1) backwards}

/* 5. The chart answers: bars grow, the trend draws, the peak lands */
.tm-pipe.is-playing .tm-pipe-bars rect{animation:tm-pipe-grow .6s cubic-bezier(.22,1,.36,1) backwards}
.tm-pipe.is-playing .tm-pipe-bars rect:nth-child(1){animation-delay:1.9s}
.tm-pipe.is-playing .tm-pipe-bars rect:nth-child(2){animation-delay:2.0s}
.tm-pipe.is-playing .tm-pipe-bars rect:nth-child(3){animation-delay:2.1s}
.tm-pipe.is-playing .tm-pipe-bars rect:nth-child(4){animation-delay:2.2s}
.tm-pipe.is-playing .tm-pipe-bars rect:nth-child(5){animation-delay:2.3s}
.tm-pipe.is-playing .tm-pipe-bars rect:nth-child(6){animation-delay:2.4s}
.tm-pipe.is-playing .tm-pipe-bars rect:nth-child(7){animation-delay:2.5s}
.tm-pipe.is-playing .tm-pipe-trend{stroke-dasharray:100;animation:tm-pipe-draw 1.1s 2.2s cubic-bezier(.22,1,.36,1) backwards}
.tm-pipe.is-playing .tm-pipe-area{animation:tm-pipe-in .9s 2.6s ease backwards}
.tm-pipe.is-playing .tm-pipe-peak{animation:tm-pipe-pop .5s 3.2s cubic-bezier(.34,1.56,.64,1) backwards}
.tm-pipe.is-playing .tm-pipe-big b{animation:tm-pipe-in .7s .85s cubic-bezier(.22,1,.36,1) backwards}

/* ---- Narrow screens: stack, and turn the rails on their side ---- */
@media (max-width:860px){
  .tm-pipe-stage{grid-template-columns:1fr;gap:18px;padding:22px 18px}
  .tm-pipe-rails{height:150px;transform:rotate(90deg) scaleX(.42);transform-origin:center}
  .tm-pipe-result{grid-template-columns:1fr;gap:22px;padding:22px 18px}
  .tm-pipe-big b{font-size:42px}
}

/* ---- Reduced motion: the finished state, no movement ---- */
@media (prefers-reduced-motion: reduce){
  .tm-pipe *,.tm-pipe *::before,.tm-pipe *::after{animation:none !important;transition:none !important}
  .tm-pipe-packet,.tm-pipe-flow{display:none}
  .tm-pipe-emitter{opacity:1}
}
.tm-pipe.is-static .tm-pipe-packet,.tm-pipe.is-static .tm-pipe-flow{display:none}
.tm-pipe.is-static .tm-pipe-emitter{opacity:1}


/* ---- Single price per product ---- */
.card-price{display:inline-flex;align-items:baseline;gap:2px;font-size:13px;color:var(--muted)}
.card-price b{font-size:17px;letter-spacing:-.6px;color:var(--ink)}

.product-detail-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:50px;align-items:start}
.product-detail-copy .eyebrow{margin-bottom:18px}
.product-features{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.product-features li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.6;padding-bottom:12px;border-bottom:1px solid var(--line)}
.product-features li:last-child{border-bottom:0}

.price-panel{background:#fff;border:1px solid #dcdfd6;border-radius:6px;padding:30px;position:sticky;top:110px}
.price-panel .plan-name{font:500 10px/1 'DM Mono',ui-monospace,monospace;letter-spacing:1.4px;color:#8b918a;margin:0}
.price-panel h2{font-size:46px;letter-spacing:-2.2px;margin:12px 0 14px;line-height:1}
.price-panel h2 small{font-size:15px;letter-spacing:-.3px;color:var(--muted);font-weight:600;margin-left:2px}
.price-panel h2.price-on-request{font-size:34px}
.price-panel p{color:var(--muted);font-size:14px;line-height:1.65;margin:0}
.price-panel hr{border:0;border-top:1px solid var(--line);margin:22px 0}
.price-panel .button{width:100%;text-align:center}
.price-panel-link{display:inline-block;margin-top:16px;font-size:13px}

.related-products{padding-top:0}

@media (max-width:860px){
  .product-detail-grid{grid-template-columns:1fr;gap:30px}
  .price-panel{position:static;padding:24px}
  .price-panel h2{font-size:38px}
}


/* ============================================================
   HERO MOTION SEQUENCE
   Overrides the simpler hero entrance defined earlier in this file.

   Timeline (seconds from page load):
     0.00  aurora glow fades up behind the artwork
     0.10  eyebrow settles in, letter-spacing tightening
     0.25  headline lines slide out from behind their masks, one per line
     0.60  intro paragraph
     0.75  buttons
     0.45  orbs scale in, then drift forever
     0.55  dashboard card rises and its border sweeps
     0.95  window dots pop, one after another
     1.15  card title and heading
     1.35  chart bars grow from the baseline
     1.60  scan line sweeps the card once
     1.75  float card springs in, then breathes

   Everything animates transform/opacity only, and every rule uses "backwards"
   fill, so with CSS disabled or JS off the hero still renders complete.
   ============================================================ */

@keyframes tm-hero-line   { from { transform:translateY(105%) } to { transform:none } }
@keyframes tm-hero-fade   { from { opacity:0; transform:translateY(16px) } to { opacity:1; transform:none } }
@keyframes tm-hero-track  { from { opacity:0; letter-spacing:.42em } to { opacity:1; letter-spacing:normal } }
@keyframes tm-hero-orb    { from { opacity:0; transform:scale(.4) } to { opacity:1; transform:none } }
@keyframes tm-hero-card   { from { opacity:0; transform:translateY(34px) scale(.94) } to { opacity:1; transform:none } }
@keyframes tm-hero-dot    { from { opacity:0; transform:scale(0) } to { opacity:1; transform:none } }
@keyframes tm-hero-bar    { from { transform:scaleY(0) } to { transform:scaleY(1) } }
@keyframes tm-hero-scan   { 0% { transform:translateY(-100%); opacity:0 }
                            18% { opacity:.7 }
                            82% { opacity:.7 }
                            100% { transform:translateY(320%); opacity:0 } }
@keyframes tm-hero-aurora { 0%,100% { transform:translate(0,0) scale(1); opacity:.55 }
                            50% { transform:translate(-26px,18px) scale(1.12); opacity:.8 } }
@keyframes tm-hero-spark  { 0%,100% { transform:scale(1) rotate(0) } 50% { transform:scale(1.25) rotate(18deg) } }

/* Soft coloured glow drifting behind the artwork */
.hero{position:relative}
.hero-aurora{position:absolute;top:-10%;right:-6%;width:52%;height:120%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(204,255,83,.55),transparent 70%),
             radial-gradient(closest-side,rgba(255,137,111,.4),transparent 72%);
  background-position:20% 30%,72% 68%;background-size:70% 70%,60% 60%;background-repeat:no-repeat;
  filter:blur(28px);opacity:0;
  animation:tm-hero-fade 1.2s .05s ease backwards,tm-hero-aurora 16s 1.2s ease-in-out infinite}
.hero-layout{position:relative;z-index:1}

/* Eyebrow: fades in while its letter-spacing settles */
.hero-copy .eyebrow{animation:tm-hero-track .9s .1s cubic-bezier(.22,1,.36,1) backwards}

/* Headline: each line slides out from behind its own mask */
.hero-headline{margin-top:0}
.hero-line{display:block;overflow:hidden}
.hero-line i{display:block;font-style:inherit;
  animation:tm-hero-line .95s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay:calc(.25s + var(--line,0) * .12s)}

.hero-copy .hero-text{animation:tm-hero-fade .85s .6s cubic-bezier(.22,1,.36,1) backwards}
.hero-actions{animation:tm-hero-fade .85s .75s cubic-bezier(.22,1,.36,1) backwards}

/* Orbs scale in, then keep drifting */
.orb-one{animation:tm-hero-orb 1s .45s cubic-bezier(.34,1.56,.64,1) backwards,
                   tm-drift-a 15s 1.45s ease-in-out infinite}
.orb-two{animation:tm-hero-orb 1s .6s cubic-bezier(.34,1.56,.64,1) backwards,
                   tm-drift-b 12s 1.6s ease-in-out infinite}

/* Dashboard card assembles */
.window-card{overflow:hidden;animation:tm-hero-card 1s .55s cubic-bezier(.22,1,.36,1) backwards}
.window-card .window-top i{animation:tm-hero-dot .45s cubic-bezier(.34,1.56,.64,1) backwards}
.window-card .window-top i:nth-child(1){animation-delay:.95s}
.window-card .window-top i:nth-child(2){animation-delay:1.03s}
.window-card .window-top i:nth-child(3){animation-delay:1.11s}
.window-card>p{animation:tm-hero-fade .6s 1.15s cubic-bezier(.22,1,.36,1) backwards}
.window-card>strong{animation:tm-hero-fade .7s 1.25s cubic-bezier(.22,1,.36,1) backwards}

/* A single light sweep across the card, once */
.window-scan{position:absolute;left:0;right:0;top:0;height:40%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(204,255,83,.18),transparent);
  animation:tm-hero-scan 1.9s 1.6s cubic-bezier(.4,0,.5,1) backwards}

/* Chart bars grow, then site.js keeps them moving */
.chart span{height:var(--h,20px);transform-origin:bottom;
  transition:height .9s cubic-bezier(.22,1,.36,1);
  animation:tm-hero-bar .75s cubic-bezier(.22,1,.36,1) backwards}
.chart span:nth-child(1){animation-delay:1.35s}
.chart span:nth-child(2){animation-delay:1.43s}
.chart span:nth-child(3){animation-delay:1.51s}
.chart span:nth-child(4){animation-delay:1.59s}
.chart span:nth-child(5){animation-delay:1.67s}
.chart span:nth-child(6){animation-delay:1.75s}
.chart span:nth-child(7){animation-delay:1.83s}

/* Float card springs in and then breathes */
.float-card{animation:tm-hero-card .85s 1.75s cubic-bezier(.34,1.56,.64,1) backwards,
                      tm-bob 5.5s 2.8s ease-in-out infinite}
.float-card>span{display:inline-block;animation:tm-hero-spark 3.4s 2.9s ease-in-out infinite}

@media (max-width:860px){
  .hero-aurora{width:90%;right:-20%;filter:blur(34px)}
}

/* Reduced motion: show the finished hero, no movement at all */
@media (prefers-reduced-motion: reduce){
  .hero-aurora{animation:none;opacity:.5}
  .hero-line i{animation:none;transform:none}
  .window-scan{display:none}
  .chart span{transition:none}
}

/* Specificity fixes for the hero sequence.
   The base stylesheet sets .chart span:nth-child(n){height:..} (0,2,1), which
   outranks .chart span (0,1,1). Matching that weight lets --h drive the bars. */
.hero .chart span{height:var(--h,20px)}
/* The generic .hero-copy h1 entrance would double up with the line masks. */
.hero-copy h1.hero-headline{animation:none}