.martech{height:calc(var(--do-svh, 1svh) * 460);position:relative;background:#101010}.martech-stage{position:sticky;top:0;height:calc(var(--do-svh, 1svh) * 100);min-height:580px;overflow:hidden;isolation:isolate}.martech-depth{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,#27303855,transparent 65%);pointer-events:none}.martech-logos{position:absolute;inset:0;pointer-events:none}.tool-tile{position:absolute;left:50%;top:50%;width:210px;height:245px;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:22px;padding:25px;background:var(--tile-bg);color:var(--brand);box-shadow:0 8px 50px #0003;will-change:transform,opacity;opacity:0;backface-visibility:hidden;transform-origin:center}.tool-symbol{width:84px;height:84px;background:var(--brand);mask:var(--logo) center / contain no-repeat;-webkit-mask:var(--logo) center / contain no-repeat}.tool-tile img{width:84px;height:84px;object-fit:contain}.tool-tile[data-tool="senuto"] .tool-symbol{width:160px}.tool-tile figcaption{font-size:19px;letter-spacing:-.035em;font-weight:500;color:#182125}.tool-tile[data-tool="klaviyo"]{background:#e8edd6}.tool-tile[data-tool="meta"]{height:205px;width:250px}.tool-tile[data-tool="canva"]{height:230px;width:230px}.tool-tile[data-tool="wordpress"]{height:235px}.martech-title{position:absolute;inset:0;z-index:100;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;pointer-events:none;mix-blend-mode:difference;color:#fffdf9}.martech-eyebrow{font-size:12px;letter-spacing:.07em;margin-bottom:30px}.martech-title h2{font-size:clamp(50px,7.6vw,120px);font-weight:400;line-height:1.06;letter-spacing:-.055em;margin:0;padding:0 4%}.martech-foot{position:absolute;bottom:36px;left:5%;right:5%;z-index:110;display:flex;justify-content:space-between;color:#bcc3c6;font-size:12px;mix-blend-mode:difference}.martech-scroll{display:flex;gap:22px}.martech-scroll>span{font-size:18px}.martech-static{height:auto;padding:70px 6%}.martech-static .martech-stage{position:relative;height:auto;min-height:0;overflow:visible}.martech-static .martech-title{position:relative;margin-bottom:40px}.martech-static .martech-logos{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:15px}.martech-static .tool-tile{position:relative;left:auto;top:auto;width:100%!important;height:150px!important;padding:15px;opacity:1!important;transform:none!important;gap:12px}.martech-static .tool-symbol,.martech-static .tool-tile img{width:50px;height:50px}.martech-static .tool-tile[data-tool="senuto"] .tool-symbol{width:100px}.martech-static .tool-tile figcaption{font-size:14px}.martech-static .martech-foot{position:relative;left:auto;right:auto;bottom:auto;margin-top:30px}.martech-static .martech-scroll{display:none}@media(max-width:700px){.martech{height:calc(var(--do-svh, 1svh) * 430)}.martech-title h2{font-size:9vw}.martech-eyebrow{font-size:11px;margin-bottom:24px}.tool-tile{width:150px;height:180px;gap:15px;padding:20px}.tool-symbol,.tool-tile img{width:58px;height:58px}.tool-tile figcaption{font-size:16px}.tool-tile[data-tool="meta"]{width:175px;height:145px}.tool-tile[data-tool="canva"]{width:160px;height:160px}.tool-tile[data-tool="wordpress"]{height:175px}.tool-tile[data-tool="senuto"] .tool-symbol{width:112px}.martech-foot{font-size:11px;left:6%;right:6%;bottom:25px}.martech-static{height:auto}}@media(prefers-reduced-motion:reduce){.martech{height:auto}}
.tool-tile[data-tool="senuto"] img{width:160px}@media(max-width:700px){.tool-tile[data-tool="senuto"] img{width:112px}}
.martech{height:calc(var(--do-svh, 1svh) * 540)}.martech-finale{position:absolute;inset:-1px;z-index:120;background:#dce7e8;color:#142226;transform-origin:50% 50%;transform:scale(.025);visibility:hidden;opacity:0;will-change:transform,opacity;box-shadow:0 0 90px #0004;pointer-events:none}.finale-content{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:90px 6%;opacity:0;will-change:transform,opacity}.finale-content h2{font-family:'DM Sans',Arial,sans-serif;font-weight:400;font-size:clamp(64px,min(9.5vw,15vh),155px);line-height:1.03;letter-spacing:-.065em;margin:0}.finale-content h2 span{color:#647f89}.finale-next{position:absolute;bottom:43px;font-size:13px;display:flex;gap:28px;align-items:center;color:#3b535b}.finale-next>span{font-size:22px}.martech-title,.martech-foot{will-change:opacity,transform}.martech-static{height:auto}.martech-static .martech-finale{position:relative;inset:auto;visibility:visible;opacity:1;transform:none;margin:60px -6vw -70px;min-height:calc(var(--do-svh, 1svh) * 70)}.martech-static .finale-content{min-height:calc(var(--do-svh, 1svh) * 70);opacity:1;transform:none}.martech-static .finale-content h2{font-size:clamp(46px,8vw,110px)}@media(max-width:700px){.martech{height:calc(var(--do-svh, 1svh) * 500)}.finale-content h2{font-size:clamp(42px,12.5vw,80px)}.finale-next{bottom:32px;font-size:12px}.martech-static{height:auto}}@media(prefers-reduced-motion:reduce){.martech{height:auto}}
/* The approach surface slides over the slower finale layer. */
.martech{isolation:isolate;z-index:0}.martech-stage{will-change:transform}.approach{position:relative;z-index:1;background:#101010;box-shadow:0 -32px 70px -45px #0009}.martech-static .martech-stage{transform:none!important}@media(prefers-reduced-motion:reduce){.martech-stage{will-change:auto;transform:none!important}.approach{box-shadow:none}}
/* Digital finale: a luminous data field behind the existing scroll transition. */
.martech-finale{overflow:hidden;background:#070b18;color:#f3f7ff;isolation:isolate}
.martech-finale::before,.martech-finale::after{content:"";position:absolute;pointer-events:none;z-index:-1}
.martech-finale::before{inset:-18%;background:radial-gradient(ellipse at 18% 65%,#006eff55,transparent 40%),radial-gradient(ellipse at 85% 28%,#7339ee55,transparent 38%),radial-gradient(ellipse at 55% 110%,#00d5ff33,transparent 43%);transform:translateY(var(--digital-shift,0px));will-change:transform}
.martech-finale::after{inset:-30% -20%;background-image:radial-gradient(circle,#8bcfffaa 1.3px,transparent 2px),linear-gradient(#5a99ee23 1px,transparent 1px),linear-gradient(90deg,#5a99ee23 1px,transparent 1px);background-size:112px 112px,56px 56px,56px 56px;transform:perspective(700px) rotateX(38deg) rotateZ(-12deg) translateY(var(--digital-shift,0px));mask-image:radial-gradient(ellipse at center,transparent 12%,#0008 52%,#000 85%);-webkit-mask-image:radial-gradient(ellipse at center,transparent 12%,#0008 52%,#000 85%)}
.finale-content{position:relative;background:radial-gradient(ellipse at 50% 45%,#070b185c,transparent 66%)}
.finale-content h2{text-shadow:0 4px 42px #070b18b3}
.finale-content h2 span{color:#94caff;background:linear-gradient(105deg,#a3ebff 5%,#83adff 48%,#c6acff 96%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.finale-next{color:#b9c9e7}
@media(prefers-reduced-motion:reduce){.martech-finale::before,.martech-finale::after{will-change:auto}}

/* A second scroll chapter rolls into the same digital screen. */
.martech{height:calc(var(--do-svh, 1svh) * 680)}
.finale-headings{display:grid;align-items:center;width:100%}
.finale-heading{grid-area:1/1;perspective:1000px}
.finale-content h2 .finale-line{display:block;overflow:hidden;white-space:nowrap;padding:.12em .08em;margin:-.08em 0;perspective:800px;color:inherit;background:none;-webkit-text-fill-color:currentColor}
.finale-content h2 .finale-glyph{display:inline-block;transform-origin:50% 55%;backface-visibility:hidden;color:inherit;background:none;-webkit-text-fill-color:currentColor;will-change:transform,opacity}
.finale-content h2 .finale-line:last-child{color:inherit}
.finale-heading:nth-child(2) .finale-glyph{transform:translateY(120%);opacity:0}
.martech-static{height:auto}
.martech-static .finale-headings{gap:45px}
.martech-static .finale-heading{grid-area:auto}
@media(max-width:700px){.martech{height:calc(var(--do-svh, 1svh) * 640)}.martech-static{height:auto}.finale-content h2{font-size:clamp(32px,10.7vw,75px)}}
@media(prefers-reduced-motion:reduce){.martech{height:auto}.finale-content h2 .finale-glyph{will-change:auto}}

/* The inversion circle shares the existing finale and its scroll timeline. */
.martech{height:calc(var(--do-svh, 1svh) * 880)}
.martech-finale .finale-content{z-index:2}
.finale-inversion{position:absolute;left:50%;top:50%;z-index:3;border-radius:50%;background:#efefef;mix-blend-mode:difference;pointer-events:none;visibility:hidden;will-change:transform}
.martech-static{height:auto}
.martech-static .finale-inversion{display:none}
@media(max-width:700px){.martech{height:calc(var(--do-svh, 1svh) * 840)}.martech-static{height:auto}}
@media(prefers-reduced-motion:reduce){.martech{height:auto}.finale-inversion{display:none}}
/* White finale; difference blending maps white to the next section's #101010. */
.martech-finale{background:#fff;color:#000}
.martech-finale::before,.martech-finale::after{display:none}
.martech-finale .finale-content{background:none}
.martech-finale .finale-content h2{color:#000;text-shadow:none}
.martech-finale .finale-content h2 span{color:inherit;background:none;-webkit-text-fill-color:currentColor}
.martech-finale .finale-next{color:#000}
/* Three tool chapters share one pinned scene. */
.tool-tile figcaption{text-align:center;line-height:1.15;max-width:100%;font-size:17px}
.tool-tile[data-tool="googletrends"] img{width:48px;height:48px}
.tool-tile[data-tool="bing"] img{width:40px;height:40px}
.martech{height:calc(var(--do-svh, 1svh) * 1180)}
.martech-title h2{display:grid;width:100%;font-size:clamp(48px,7vw,108px)}
.martech-chapter{grid-area:1/1;display:block;align-self:center;opacity:0}
.martech-chapter:first-child{opacity:1}
.martech-category{display:block;font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;margin-bottom:22px}
.martech-chapter-line{display:block;overflow:hidden;padding:.1em 0;margin:-.05em 0;perspective:700px}
.martech-chapter-line>span{display:block;will-change:transform;backface-visibility:hidden}
.martech-static{height:auto}
.martech-static .martech-stage{display:flex;flex-direction:column}
.martech-static .martech-title{order:-1}
.martech-static .martech-title h2{gap:36px;font-size:clamp(34px,6vw,70px)}
.martech-static .martech-chapter{grid-area:auto;opacity:1}
.martech-static .martech-chapter-line>span{will-change:auto}
@media(max-width:700px){.martech{height:calc(var(--do-svh, 1svh) * 1100)}.martech-title h2{font-size:10vw}.martech-category{font-size:11px;margin-bottom:18px}.martech-foot{font-size:10px;gap:20px}.martech-static{height:auto}}
@media(prefers-reduced-motion:reduce){.martech{height:auto}}

/* Circle-to-arc tools; stable viewport and native scrolling, no wheel capture. */
.martech-morph .martech-stage{min-height:0}
.martech-morph .martech-logos{pointer-events:none;z-index:90}
.martech-morph .tool-tile{width:100px!important;height:128px!important;padding:0;border:0;border-radius:12px;gap:0;cursor:pointer;pointer-events:auto;font:inherit;background:transparent!important;box-shadow:none;perspective:900px}
.martech-morph .tool-flip{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s}
.martech-morph .tool-front,.martech-morph .tool-back{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;padding:12px;border-radius:12px;backface-visibility:hidden;box-sizing:border-box;background:var(--tile-bg,#fff);box-shadow:0 6px 24px #0003}
.martech-morph .tool-back{transform:rotateY(180deg);background:#c8ff26;color:#101010;gap:6px;font-size:10px;line-height:1.25;overflow:auto}
.martech-morph .tool-back strong{font-size:12px}.martech-morph .tool-back span{font-size:10px}
.martech-morph .tool-tile.is-flipped .tool-flip{transform:rotateY(180deg)}
@media(hover:hover){.martech-morph .tool-tile:hover .tool-flip{transform:rotateY(180deg)}}
.martech-morph .tool-tile:focus-visible{outline:3px solid #c8ff26;outline-offset:5px}
.martech-morph .tool-symbol,.martech-morph .tool-tile img{width:45px!important;height:45px!important;object-fit:contain}
.martech-morph .tool-caption{color:#182125;font-size:11px;font-weight:600;line-height:1.1;text-align:center}
.martech-morph .morph-intro{position:absolute;top:50%;left:50%;width:min(44%,520px);transform:translate(-50%,-50%);z-index:95;text-align:center;pointer-events:none;color:#fff}
.martech-morph .morph-intro h2{font-size:clamp(28px,3.4vw,52px);line-height:1.06;letter-spacing:-.045em;font-weight:500;margin:0 0 20px}
.martech-morph .morph-intro p{font-size:clamp(13px,1.25vw,18px);line-height:1.5;color:#aeb2b2;margin:0}
.martech-morph .martech-title{justify-content:flex-start;padding-top:15vh;mix-blend-mode:normal;z-index:85}
.martech-morph .martech-title h2{font-size:clamp(36px,4.5vw,66px)}
.martech-morph .martech-eyebrow{color:#c8ff26;margin-bottom:20px}
.martech-morph .martech-foot{pointer-events:none}
@media(max-width:700px){.martech-morph .tool-tile{width:74px!important;height:96px!important}.martech-morph .tool-front,.martech-morph .tool-back{padding:7px;gap:6px}.martech-morph .tool-symbol,.martech-morph .tool-tile img{width:32px!important;height:32px!important}.martech-morph .tool-caption{font-size:9px}.martech-morph .morph-intro{width:52%}.martech-morph .morph-intro h2{font-size:26px}.martech-morph .morph-intro p{font-size:12px}.martech-morph .martech-title{padding-top:calc(var(--do-svh,1svh)*17)}.martech-morph .martech-title h2{font-size:36px}.martech-morph .tool-back strong{font-size:10px}.martech-morph .tool-back span{font-size:9px}}
.martech-morph.martech-static .tool-tile{width:100%!important;height:160px!important}
.martech-morph.martech-static .martech-title{padding-top:0}
@media(prefers-reduced-motion:reduce){.martech-morph .tool-flip{transition:none}}
