:root{
  --bg:#050505; --bg2:#0b0b0b; --card:#111; --line:#1f1f1f; --line2:#2a2a2a;
  --text:#f5f5f5; --muted:#9a9a9a; --dim:#5c5c5c;
  --red:#E52D27; --red2:#ff3b34; --red-dark:#b91f1a;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--bg);color:var(--text);font-family:'Montserrat',sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--red);color:#fff}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.label{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--red)}
.label:before{display:none}
.display{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;line-height:.98;letter-spacing:.005em}
h2.display{font-size:clamp(40px,6.4vw,92px);margin:12px 0 18px}
.lead{color:var(--muted);font-size:clamp(16px,1.35vw,18.5px);max-width:620px}
.red{color:var(--red)}
.outline{-webkit-text-stroke:1.5px var(--text);color:transparent}
section{position:relative}

/* grain */
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:200;opacity:.06;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* preloader: GTM logo drawn in red light, then the screen splits in the middle */
.loader{position:fixed;inset:0;z-index:300;overflow:hidden}
.lp{position:absolute;inset:0;background:radial-gradient(ellipse 60% 45% at 50% 50%,#1a0605,#000 70%);display:flex;align-items:center;justify-content:center;will-change:transform}
.lp-l{clip-path:inset(0 50% 0 0)}
.lp-r{clip-path:inset(0 0 0 50%)}
.lg-svg{width:min(440px,76vw);height:auto;overflow:visible;filter:drop-shadow(0 0 8px rgba(229,45,39,.6)) drop-shadow(0 0 28px rgba(229,45,39,.35))}
.ic-fill{fill:#E52D27;opacity:0}
.ic-line{fill:none;stroke:#ff3b34;stroke-width:3;stroke-dasharray:100;stroke-dashoffset:100}
.ic-comet{fill:none;stroke:#ffe0de;stroke-width:4.5;stroke-linecap:round;stroke-dasharray:9 91;opacity:0;filter:drop-shadow(0 0 5px #ff3b34) drop-shadow(0 0 14px #E52D27)}
.ic-comet.run{opacity:1;animation:comet 1.2s linear infinite}
@keyframes comet{to{stroke-dashoffset:-100}}
.tri{fill:#fff;opacity:0}
.gtm{font-family:"Anton",sans-serif;font-size:150px;fill:#fff;fill-opacity:0;stroke:#ff3b34;stroke-width:2;stroke-dasharray:700;stroke-dashoffset:700}
.sub{font-family:"Montserrat",sans-serif;font-weight:800;font-size:24px;fill:#E52D27;opacity:0}
.seam{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;z-index:2;background:linear-gradient(transparent,#ff3b34 18%,#ffe0de 50%,#ff3b34 82%,transparent);box-shadow:0 0 22px 5px rgba(229,45,39,.75);transform:scaleY(0)}
.no-js .loader{display:none}

/* cursor */
.cursor,.cursor-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:250;border-radius:50%;transform:translate(-50%,-50%)}
.cursor{width:38px;height:38px;border:1px solid rgba(255,255,255,.35);transition:width .35s var(--ease),height .35s var(--ease),background .35s,border-color .35s;display:flex;align-items:center;justify-content:center}
.cursor span{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:0;transition:opacity .2s;color:#fff}
.cursor.hover{width:64px;height:64px;border-color:var(--red);background:rgba(229,45,39,.12)}
.cursor.view{width:96px;height:96px;background:var(--red);border-color:var(--red)}
.cursor.view span{opacity:1}
.cursor-dot{width:6px;height:6px;background:var(--red)}
.cursor,.cursor-dot{opacity:0}
body.cur-on .cursor,body.cur-on .cursor-dot{opacity:1}
@media (hover:none),(pointer:coarse){.cursor,.cursor-dot{display:none}}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:58px;padding:0 30px;border-radius:999px;background:var(--red);color:#fff;font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;overflow:hidden;isolation:isolate;will-change:transform;transition:box-shadow .4s var(--ease)}
.btn:before{content:"";position:absolute;inset:0;background:#fff;border-radius:inherit;transform:translateY(101%);transition:transform .55s var(--ease);z-index:-1}
.btn:after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:shine 4.5s var(--ease) infinite;z-index:1;pointer-events:none}
@keyframes shine{0%,70%{left:-80%}100%{left:130%}}
.btn:hover{box-shadow:0 14px 40px -8px rgba(229,45,39,.65)}
.btn:hover:before{transform:translateY(0)}
.btn:hover{color:#000}
.btn svg{width:20px;height:20px;flex-shrink:0;transition:transform .5s var(--ease)}
.btn:hover svg{transform:rotate(-12deg) scale(1.1)}
.btn.ghost{background:transparent;border:1px solid var(--line2)}
.btn.ghost:after{display:none}
.btn.ghost:before{background:var(--text)}
.btn.small{height:46px;padding:0 20px;font-size:11.5px}
.roll{position:relative;display:block;overflow:hidden;height:1.3em;line-height:1.3em}
.roll b{display:block;font-weight:inherit;transition:transform .55s var(--ease)}
.roll b:after{content:attr(data-t);position:absolute;left:0;top:100%;width:100%}
.btn:hover .roll b,a:hover>.roll b{transform:translateY(-100%)}

/* header */
header{position:fixed;top:0;left:0;right:0;z-index:100;transition:transform .5s var(--ease),background .4s,border-color .4s;border-bottom:1px solid transparent}
header.scrolled{background:rgba(5,5,5,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
header.hide{transform:translateY(-100%)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:84px}
.brand img{height:44px;width:auto}
nav{display:flex;gap:34px}
nav a{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color .3s}
nav a:hover{color:#fff}

/* hero */
.hero{min-height:100svh;display:flex;align-items:center;padding:100px 0 50px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-bg .grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 75%);opacity:.55}
.hero-bg .glow{position:absolute;width:900px;height:900px;border-radius:50%;background:radial-gradient(circle,rgba(229,45,39,.28),rgba(229,45,39,0) 60%);left:50%;top:40%;transform:translate(-50%,-50%);filter:blur(20px);will-change:transform}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;width:100%}
.hero h1{font-size:clamp(48px,5.5vw,86px);margin:16px 0 22px}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.16em 0 .04em;margin-top:-.16em}
.w>span{display:inline-block}
.hero .lead{max-width:540px}
.ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero-meta{display:flex;gap:28px;margin-top:32px;flex-wrap:wrap}
.hero-meta div{font-size:12px;color:var(--dim);letter-spacing:.14em;text-transform:uppercase;font-weight:700;display:flex;align-items:center;gap:10px}
.hero-meta i{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(229,45,39,.7);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(229,45,39,.7)}70%{box-shadow:0 0 0 10px rgba(229,45,39,0)}100%{box-shadow:0 0 0 0 rgba(229,45,39,0)}}

.stage{position:relative;height:620px;perspective:1800px}
.stack{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(-16deg) rotateX(8deg);will-change:transform}
.frame{position:absolute;border-radius:14px;overflow:hidden;background:#0d0d0d;border:1px solid var(--line2);box-shadow:0 40px 90px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.02)}
.frame .bar{height:30px;background:#151515;border-bottom:1px solid var(--line2);display:flex;align-items:center;gap:6px;padding:0 12px}
.frame .bar i{width:9px;height:9px;border-radius:50%;background:#2c2c2c}
.frame .bar i:first-child{background:var(--red)}
.frame .bar em{margin-left:12px;font-style:normal;font-size:10.5px;color:var(--dim);letter-spacing:.06em;font-weight:600;background:#0c0c0c;padding:3px 14px;border-radius:6px;flex:1;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.screen{position:relative;overflow:hidden;height:calc(100% - 30px)}
.screen img{width:100%;height:auto;will-change:transform}
.screen.auto img{animation:pan var(--dur,22s) ease-in-out infinite alternate}
@keyframes pan{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(calc(var(--shift,0px) * -1))}}
.stack .f1{width:72%;height:62%;left:6%;top:2%;transform:translateZ(-120px)}
.stack .f2{width:70%;height:60%;left:0;top:36%;transform:translateZ(40px)}
.stack .f3{height:74%;width:auto;aspect-ratio:9/19;right:-3%;top:22%;transform:translateZ(160px);border-radius:26px}
.stack .f3 .screen{height:100%}
.float-tag{position:absolute;z-index:5;background:rgba(15,15,15,.85);backdrop-filter:blur(10px);border:1px solid var(--line2);border-radius:14px;padding:12px 16px;font-size:12px;font-weight:700;display:flex;gap:10px;align-items:center;transform:translateZ(220px);animation:bob 6s ease-in-out infinite}
.float-tag svg{width:18px;height:18px;color:var(--red)}
.float-tag small{display:block;color:var(--dim);font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.float-tag.t1{left:4%;top:14%}
.float-tag.t2{right:10%;bottom:2%;animation-delay:-3s}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -14px}}
.scroll-hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:10px;letter-spacing:.3em;color:var(--dim);font-weight:700}
.scroll-hint i{width:1px;height:46px;background:linear-gradient(var(--red),transparent);animation:drop 2s var(--ease) infinite;transform-origin:top}
@keyframes drop{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* marquee */
.band{background:var(--red);transform:rotate(-2deg);margin:40px -20px 0;padding:18px 0;overflow:hidden;position:relative;z-index:3}
.band.dark{background:var(--bg2);transform:rotate(1.4deg);margin-top:-30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);z-index:2}
.track{display:flex;width:max-content;animation:marq 32s linear infinite}
.band.dark .track{animation-direction:reverse;animation-duration:60s}
.track span{font-family:'Anton',sans-serif;font-size:clamp(26px,3.2vw,44px);text-transform:uppercase;white-space:nowrap;padding:0 26px;display:flex;align-items:center;gap:52px}
.track span:after{content:"";width:14px;height:14px;background:#000;transform:rotate(45deg)}
.band.dark .track span{color:transparent;-webkit-text-stroke:1px #555}
.band.dark .track span:after{background:var(--red)}
@keyframes marq{to{transform:translateX(-50%)}}

/* manifesto */
.manifesto{padding:110px 0 60px}
.manifesto p.big{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(34px,5vw,74px);line-height:1.06;max-width:1100px}
.manifesto p.big .mw{opacity:.14;transition:opacity .2s}
.manifesto p.big .mw.r,.manifesto p.big em{color:var(--red);font-style:normal}
.stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:56px;border-top:1px solid var(--line)}
.stat{padding:34px 28px 0 0}
.stat+.stat{padding-left:28px;border-left:1px solid var(--line)}
.stat b{display:block;font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(56px,7vw,100px);line-height:1}
.stats.one{grid-template-columns:1fr}
.stats.one .stat{display:flex;align-items:flex-end;gap:30px;flex-wrap:wrap}
.stats.one .stat>span{font-size:clamp(16px,1.6vw,20px);max-width:420px;padding-bottom:14px;color:var(--text)}
.stat b sup{font-size:.4em;color:var(--red);vertical-align:top;margin-left:4px}
.stat>span{color:var(--muted);font-size:14px;letter-spacing:.04em}

/* work - horizontal */
.work{padding:120px 0 0}
.work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.work-head .lead{max-width:420px}
.hpin{overflow:hidden}
.htrack{display:flex;gap:40px;padding:70px 24px 120px max(24px,calc((100vw - 1240px)/2 + 24px));width:max-content}
.case{width:calc((min(100vw,1240px) - 88px) / 2);flex-shrink:0}
.case .frame{position:relative;width:100%;height:auto;aspect-ratio:16/10.5;transition:transform .7s var(--ease),border-color .4s}
.case:hover .frame{border-color:#3a3a3a}
.case .screen img{transition:transform var(--dur,6s) cubic-bezier(.45,.05,.35,1)}
.case:hover .screen img{transform:translateY(calc(var(--shift,0px) * -1))}
.case.play .screen img{transition:none;animation:pan calc(var(--dur,6s) * 1.6) ease-in-out infinite alternate}
.reduced .htrack{display:grid;grid-template-columns:1fr 1fr;width:auto;max-width:1240px;margin:0 auto;padding:70px 24px 60px;gap:70px 40px}
.reduced .case,.reduced .case.mob{width:100%}
.reduced .progress{display:none}
.case.mob .frame{width:auto;height:100%;aspect-ratio:9/18.5;border-radius:30px;margin:0 auto;border:7px solid #1a1a1a}
.case.mob .frame .screen{height:100%}
.case.mob{display:flex;flex-direction:column}
.case.mob .phone-row{display:flex;justify-content:center;aspect-ratio:16/10.5;min-height:0;overflow:hidden;background:radial-gradient(circle at 50% 60%,rgba(229,45,39,.12),transparent 60%);border:1px solid var(--line);border-radius:14px;padding:18px 0}
.case-info{display:flex;gap:28px;margin-top:28px;align-items:flex-start}
.case-info .num{font-family:'Anton',sans-serif;font-size:56px;line-height:.9;color:transparent;-webkit-text-stroke:1px #444}
.case-info h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(28px,2.6vw,40px);line-height:1}
.case-info .seg{font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:10px}
.case-info p{color:var(--muted);font-size:15px;margin-top:12px;max-width:560px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tags span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line2);color:#bdbdbd;padding:6px 12px;border-radius:999px}
.case.end{width:calc((min(100vw,1240px) - 88px) / 2);display:flex;flex-direction:column;justify-content:center;padding-right:60px}
.case.end h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(40px,4.4vw,68px);line-height:1;margin-bottom:28px}
.progress{position:absolute;left:24px;right:24px;bottom:60px;height:2px;background:var(--line);max-width:1240px;margin:0 auto}
.progress i{display:block;height:100%;background:var(--red);transform:scaleX(0);transform-origin:left}
.note{font-size:12px;color:var(--dim);letter-spacing:.06em;margin-top:18px}

/* intent demo */
.intent{padding:100px 0;background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.intent .wrap{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.demo{position:relative;display:grid;grid-template-columns:1fr 290px;gap:26px;align-items:center}
.mini-site{background:#0e0e0e;border:1px solid var(--line2);border-radius:18px;padding:26px 22px;box-shadow:0 30px 60px -20px #000}
.mini-site .ms-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.mini-site .ms-top b{font-family:'Anton',sans-serif;font-weight:400;font-size:18px;letter-spacing:.04em}
.mini-site .ms-top i{display:flex;gap:4px}
.mini-site .ms-top i:before,.mini-site .ms-top i:after{content:"";width:16px;height:2px;background:#333}
.mini-site h4{font-family:'Anton',sans-serif;font-weight:400;font-size:26px;line-height:1.05;text-transform:uppercase;margin-bottom:8px}
.mini-site p{font-size:12.5px;color:var(--dim);margin-bottom:20px}
.intent-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-radius:12px;border:1px solid var(--line2);font-size:13px;font-weight:700;margin-bottom:10px;transition:all .35s var(--ease);text-align:left}
.intent-btn:after{content:"\2192";color:var(--dim);transition:transform .35s var(--ease),color .35s}
.intent-btn:hover{border-color:#444}
.intent-btn.on{background:var(--red);border-color:var(--red)}
.intent-btn.on:after{color:#fff;transform:translateX(4px)}
.phone{width:290px;height:560px;border-radius:44px;background:#000;border:9px solid #1b1b1b;box-shadow:0 50px 100px -30px #000,0 0 0 1px #2a2a2a,inset 0 0 0 1px #2a2a2a;overflow:hidden;position:relative;display:flex;flex-direction:column}
.phone:before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:84px;height:22px;border-radius:20px;background:#000;z-index:3}
.p-head{padding:40px 16px 12px;background:#101010;border-bottom:1px solid #1d1d1d;display:flex;gap:10px;align-items:center}
.p-head .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#333,#1a1a1a);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.p-head b{font-size:13px;display:block;line-height:1.2}
.p-head small{font-size:10.5px;color:var(--dim)}
.p-body{flex:1;padding:16px 12px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;background:radial-gradient(circle at 20% 10%,#141414,#070707);overflow:hidden}
.bubble{align-self:flex-start;max-width:88%;background:#1c1c1c;border-radius:4px 16px 16px 16px;padding:10px 12px 8px;font-size:12.5px;line-height:1.45;opacity:0;transform:translateY(16px) scale(.96);transform-origin:left bottom;transition:all .5s var(--ease)}
.bubble.in{opacity:1;transform:none}
.bubble .tag{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:var(--red);padding:3px 7px;border-radius:5px;margin-bottom:6px}
.bubble time{display:block;text-align:right;font-size:9.5px;color:var(--dim);margin-top:4px}
.typing{align-self:flex-start;background:#1c1c1c;border-radius:16px;padding:12px 14px;display:none;gap:4px}
.typing.show{display:flex}
.typing i{width:6px;height:6px;border-radius:50%;background:#777;animation:dots 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dots{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.p-input{padding:10px 12px 18px;background:#0d0d0d;display:flex;gap:8px;align-items:center}
.p-input span{flex:1;height:34px;border-radius:20px;background:#1a1a1a}
.p-input i{width:34px;height:34px;border-radius:50%;background:var(--red)}
.try{margin-top:40px;padding-top:30px;border-top:1px solid var(--line)}
.try p{font-size:13px;color:var(--muted);margin-bottom:16px;font-weight:600}
.try .ctas{margin-top:0}

/* ads */
.ads{padding:100px 0 80px}
.ads-top{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end}
.flow{position:relative;margin-top:70px;height:360px;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:radial-gradient(ellipse at 70% 50%,rgba(229,45,39,.08),transparent 60%),#070707}
.flow canvas{width:100%;height:100%;display:block}
.flow .fl{position:absolute;top:24px;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.flow .fl.l{left:28px}.flow .fl.r{right:28px;color:var(--red)}
.flow .fl.m{left:50%;transform:translateX(-50%);color:#777}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
.pillar{position:relative;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:34px 30px;overflow:hidden;isolation:isolate}
.pillar:before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(229,45,39,.16),transparent 45%);opacity:0;transition:opacity .4s;z-index:-1}
.pillar:hover:before{opacity:1}
.pillar .ic{width:48px;height:48px;border-radius:14px;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;margin-bottom:26px}
.pillar .ic svg{width:22px;height:22px;color:var(--red)}
.pillar h3{font-size:19px;font-weight:800;margin-bottom:10px}
.pillar p{color:var(--muted);font-size:14.5px}
.honest{margin-top:22px;display:flex;gap:22px;align-items:center;border:1px dashed var(--line2);border-radius:22px;padding:26px 30px}
.honest b{font-family:'Anton',sans-serif;font-weight:400;font-size:28px;text-transform:uppercase;white-space:nowrap}
.honest p{color:var(--muted);font-size:14.5px}

/* process */
.process{padding:90px 0;border-top:1px solid var(--line)}
.process .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px}
.process .sticky{position:sticky;top:130px;align-self:start}
.steps{position:relative}
.steps .line{position:absolute;left:31px;top:10px;bottom:10px;width:1px;background:var(--line)}
.steps .line i{position:absolute;inset:0;background:var(--red);transform:scaleY(0);transform-origin:top}
.step{display:grid;grid-template-columns:64px 1fr;gap:28px;padding:0 0 70px}
.step:last-child{padding-bottom:0}
.step .n{width:64px;height:64px;border-radius:50%;background:var(--bg);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-family:'Anton',sans-serif;font-size:22px;position:relative;z-index:1;transition:all .5s var(--ease)}
.step.on .n{background:var(--red);border-color:var(--red)}
.step h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(26px,2.6vw,36px);line-height:1.05;margin:12px 0 10px}
.step p{color:var(--muted);font-size:15.5px;max-width:460px}

/* who */
.who{padding:10px 0 90px}
.who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:60px}
.who-card{position:relative;border:1px solid var(--line);border-radius:24px;padding:40px 32px 36px;min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--card);transform-style:preserve-3d;transition:border-color .4s;isolation:isolate}
.who-card:before{content:"";position:absolute;inset:0;background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%),rgba(229,45,39,.18),transparent 45%);opacity:0;transition:opacity .4s;z-index:-1}
.who-card:hover{border-color:#333}
.who-card:hover:before{opacity:1}
.who-card .big{position:absolute;top:20px;right:26px;font-family:'Anton',sans-serif;font-size:120px;line-height:1;color:transparent;-webkit-text-stroke:1px #262626;transition:-webkit-text-stroke-color .4s}
.who-card:hover .big{-webkit-text-stroke-color:var(--red)}
.who-card h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:40px;line-height:1;margin-bottom:12px}
.who-card p{color:var(--muted);font-size:14.5px}

/* faq */
.faq-sec{padding:90px 0;border-top:1px solid var(--line)}
.faq-sec .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}
.qa{border-bottom:1px solid var(--line)}
.qa button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;text-align:left;padding:28px 0;font-size:clamp(16px,1.5vw,19px);font-weight:700}
.qa .pm{position:relative;width:34px;height:34px;border-radius:50%;border:1px solid var(--line2);flex-shrink:0;transition:all .4s var(--ease)}
.qa .pm:before,.qa .pm:after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:#fff;transform:translate(-50%,-50%);transition:transform .4s var(--ease)}
.qa .pm:after{transform:translate(-50%,-50%) rotate(90deg)}
.qa.open .pm{background:var(--red);border-color:var(--red);transform:rotate(180deg)}
.qa.open .pm:after{transform:translate(-50%,-50%) rotate(0)}
.qa .ans{height:0;overflow:hidden;transition:height .5s var(--ease)}
.qa .ans p{color:var(--muted);padding:0 60px 28px 0;font-size:15.5px}

/* final */
.final{padding:100px 0 80px;text-align:center;overflow:hidden;border-top:1px solid var(--line)}
.final .huge{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(64px,13vw,210px);line-height:.9}
.final .huge .outline{display:block}
.final .lead{margin:30px auto 0}
.orb{position:relative;margin:60px auto 0;width:190px;height:190px;border-radius:50%;background:var(--red);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;will-change:transform;transition:box-shadow .4s}
.orb svg{width:34px;height:34px}
.orb:before{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(229,45,39,.4);animation:ring 2.4s var(--ease) infinite}
@keyframes ring{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.35);opacity:0}}
.orb:hover{box-shadow:0 20px 70px -10px rgba(229,45,39,.8)}
footer{border-top:1px solid var(--line);padding:34px 0;color:var(--dim);font-size:13px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
footer img{height:34px}

.wa-float{position:fixed;right:22px;bottom:22px;z-index:90;width:62px;height:62px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -6px rgba(229,45,39,.6);transition:transform .4s var(--ease)}
.wa-float:before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--red);animation:ring 2.4s var(--ease) infinite}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px;height:30px}

/* reveal helpers (only when JS is ready) */
.js .rv{opacity:0;transform:translateY(24px)}

/* responsive */
@media (max-width:1100px){
  .hero .wrap{grid-template-columns:1fr}
  .stage{height:520px;margin-top:10px}
  .intent .wrap,.ads-top,.process .wrap,.faq-sec .wrap{grid-template-columns:1fr;gap:50px}
  .process .sticky{position:static}
}
@media (max-width:1023px){
  nav{display:none}
  .htrack{flex-direction:column;width:auto;padding:60px 24px 40px;gap:80px}
  .case,.case.mob,.case.end{width:100%}
  .reduced .htrack{grid-template-columns:1fr}
  .case .frame{height:auto}
  .case.mob .phone-row{aspect-ratio:auto;height:540px}
  .case.end{padding:0}
  .progress{display:none}
  .who-grid,.pillars{grid-template-columns:1fr}
  .who-card{min-height:260px}
}
@media (max-width:700px){
  .wrap{padding:0 18px}
  header .wrap{height:70px}
  .brand img{height:36px}
  header .btn .roll{display:none}
  header .btn{width:46px;padding:0}
  .hero{padding:74px 0 60px;align-items:flex-start}
  .hero h1{margin:12px 0 18px}
  .ctas{margin-top:26px}
  .hero-meta{margin-top:22px}
  .wa-float{bottom:78px;right:16px;width:56px;height:56px}
  .stage{height:400px}
  .stack{transform:rotateY(-10deg) rotateX(6deg)}
  .float-tag{display:none}
  .ctas .btn{width:100%}
  .stats{grid-template-columns:1fr}
  .stat+.stat{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .stat{padding:28px 0}
  .stats.one .stat{gap:4px 20px}
  .stats.one .stat>span{padding-bottom:0}
  .demo{grid-template-columns:1fr}
  .phone{margin:0 auto}
  .case-info{gap:16px}
  .case-info .num{font-size:40px}
  .honest{flex-direction:column;align-items:flex-start}
  .qa .ans p{padding-right:0}
  .manifesto{padding:80px 0 50px}
  .intent,.ads,.process,.faq-sec{padding:70px 0}
  .final{padding:80px 0 70px}
  .who{padding:0 0 70px}
  .scroll-hint{display:none}
  .flow .fl.m{display:none}
  .flow .fl.r{top:auto;bottom:20px}
  .flow{height:300px}
}
@media (prefers-reduced-motion:reduce){
  .grain,.float-tag,.scroll-hint i{animation:none}
}

/* versus */
.versus{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:stretch;margin-top:22px}
.vs-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:34px 30px}
.vs-card.best{border-color:var(--red);background:linear-gradient(160deg,rgba(229,45,39,.14),var(--card) 55%);box-shadow:0 30px 70px -30px rgba(229,45,39,.45)}
.vs-tag{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.vs-card.best .vs-tag{color:var(--red)}
.vs-card h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(28px,2.6vw,38px);line-height:1.05;margin:10px 0 20px}
.vs-card:not(.best) h3{color:#8a8a8a}
.vs-card ul{list-style:none}
.vs-card li{position:relative;padding:12px 0 12px 30px;border-top:1px solid var(--line);color:var(--muted);font-size:15px}
.vs-card li:before{content:"\00d7";position:absolute;left:4px;top:10px;color:#666;font-weight:800;font-size:18px}
.vs-card.best li{color:#e8e8e8}
.vs-card.best li:before{content:"";left:4px;top:19px;width:10px;height:6px;border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}
.vs-mid{align-self:center;width:64px;height:64px;border-radius:50%;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-family:'Anton',sans-serif;font-size:20px;color:var(--red);background:var(--bg)}
@media (max-width:900px){
  .versus{grid-template-columns:1fr}
  .vs-mid{justify-self:center;margin:-8px 0}
}

/* hero rotating screens */
.screen.rot img{position:absolute;top:0;left:0;width:100%;opacity:0;transition:opacity 1.4s ease;animation:none!important}
.screen.rot img.on{opacity:1}
.frame .bar em.lbl{transition:opacity .4s}
.frame .bar em.lbl.fade{opacity:0}

/* phone-style notifications */
.notif-wrap{position:fixed;top:18px;right:18px;z-index:120;width:360px;pointer-events:none}
.notif{pointer-events:auto;cursor:pointer;display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;padding:13px 14px 12px;border-radius:22px;background:rgba(32,32,32,.78);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 50px -18px rgba(0,0,0,.85);color:#fff;transform:translateY(-140%) scale(.96);opacity:0;transition:transform .7s cubic-bezier(.2,1.25,.3,1),opacity .4s}
.notif.in{transform:none;opacity:1}
.notif.out{transform:translateY(-140%) scale(.96);opacity:0;transition:transform .5s cubic-bezier(.6,0,.8,.2),opacity .5s}
.notif .ic{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--red)}
.notif .ic svg{width:22px;height:22px;color:#fff}
.notif .ic.sale{background:#f5f5f5}.notif .ic.sale svg{color:#111}
.notif .ic.cal{background:#fff}
.notif .ic.cal b{font-family:'Montserrat',sans-serif;font-size:17px;font-weight:800;color:#111;line-height:1}
.notif .ic.cal{flex-direction:column;gap:1px}.notif .ic.cal small{font-size:8px;font-weight:800;color:var(--red);letter-spacing:.06em}
.notif .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:11.5px;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.notif b.t{display:block;font-size:14px;font-weight:700;margin-top:2px;line-height:1.3}
.notif p{font-size:13.5px;line-height:1.35;color:rgba(255,255,255,.88);margin-top:1px}
.notif .sim{display:block;font-size:9.5px;color:rgba(255,255,255,.35);letter-spacing:.12em;text-transform:uppercase;margin-top:6px;font-weight:700}
@media (max-width:700px){
  .notif-wrap{left:10px;right:10px;width:auto;top:10px}
}

/* ---------- demo: example law site in a browser ---------- */
.demo{grid-template-columns:1fr 290px;gap:28px}
.browser{border-radius:14px;overflow:hidden;border:1px solid var(--line2);background:#0d0d0d;box-shadow:0 40px 80px -30px #000}
.bbar{height:32px;background:#161616;border-bottom:1px solid var(--line2);display:flex;align-items:center;gap:6px;padding:0 12px}
.bbar i{width:9px;height:9px;border-radius:50%;background:#2c2c2c}.bbar i:first-child{background:var(--red)}
.bbar em{margin-left:10px;font-style:normal;font-size:10.5px;color:var(--dim);background:#0c0c0c;padding:3px 12px;border-radius:6px;flex:1;max-width:200px}
.sv-site{background:#0b1322;color:#f3efe6;font-family:Georgia,'Times New Roman',serif}
.sv-nav{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid rgba(200,164,92,.25)}
.sv-nav b{font-size:14px;letter-spacing:.18em;font-weight:700}.sv-nav b span{color:#c8a45c;margin-left:6px;font-weight:400}
.sv-nav ul{display:flex;gap:14px;list-style:none;font-family:'Montserrat',sans-serif;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#a9b0bd}
.sv-hero{padding:26px 22px 22px;background:linear-gradient(180deg,rgba(11,19,34,.78),rgba(11,19,34,.96) 70%),url(img/silva-bg.jpg) center/cover}
.sv-hero small{font-family:'Montserrat',sans-serif;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#c8a45c;font-weight:700}
.sv-hero h4{font-weight:400;font-size:23px;line-height:1.2;margin:10px 0 8px}
.sv-hero p{font-family:'Montserrat',sans-serif;font-size:11.5px;color:#a9b0bd;margin-bottom:16px}
.sv-site .intent-btn{position:relative;overflow:hidden;font-family:'Montserrat',sans-serif;border:1px solid rgba(200,164,92,.45);border-radius:6px;color:#f3efe6;background:rgba(11,19,34,.6);font-size:12.5px;padding:12px 14px;margin-bottom:8px;transition:background .5s,border-color .5s,color .5s}
.sv-site .intent-btn:after{color:#c8a45c}
.sv-site .intent-btn:hover{border-color:#c8a45c}
.sv-site .intent-btn.on{background:#c8a45c;border-color:#c8a45c;color:#0b1322}
.sv-site .intent-btn.on:after{color:#0b1322}
.sv-site .intent-btn span{position:relative;z-index:1}
.intent-btn.tap:before{content:"";position:absolute;left:var(--tx,50%);top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:rgba(255,255,255,.55);animation:tap .8s ease-out forwards}
@keyframes tap{from{transform:scale(0);opacity:1}to{transform:scale(22);opacity:0}}
.sv-note{display:block;font-style:normal;font-family:'Montserrat',sans-serif;font-size:10px;color:#6f7886;margin-top:10px}

/* ---------- demo: realistic WhatsApp ---------- */
.phone.wa{background:#075E54}
.wa-status{height:34px;background:#075E54;color:#fff;display:flex;justify-content:space-between;align-items:flex-end;padding:0 22px 4px;font-size:11px;font-weight:700;font-family:-apple-system,'Segoe UI',Roboto,sans-serif}
.wa-status .bat{width:20px;height:9px;border:1.5px solid #fff;border-radius:3px;position:relative}
.wa-status .bat:after{content:"";position:absolute;inset:1px 4px 1px 1px;background:#fff;border-radius:1px}
.wa-head{background:#075E54;color:#fff;display:flex;align-items:center;gap:8px;padding:6px 10px 10px;font-family:-apple-system,'Segoe UI',Roboto,sans-serif}
.wa-head .back{width:18px;height:18px}
.wa-head .av{width:32px;height:32px;border-radius:50%;background:#dfe5e7;color:#075E54;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.wa-head b{display:block;font-size:13.5px;line-height:1.2}
.wa-head small{font-size:10.5px;opacity:.85;transition:opacity .3s}
.wa-body{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:10px 10px 8px;overflow:hidden;background-color:#ECE5DD;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ddd4c6' stroke-width='1.2' stroke-linecap='round'%3E%3Ccircle cx='18' cy='20' r='7'/%3E%3Cpath d='M60 12l4 8 9 1-7 6 2 9-8-5-8 5 2-9-7-6 9-1z'/%3E%3Cpath d='M98 18c4-6 12-2 8 4l-8 8-8-8c-4-6 4-10 8-4z'/%3E%3Crect x='12' y='62' width='18' height='13' rx='3'/%3E%3Cpath d='M16 62v-3a5 5 0 0110 0v3'/%3E%3Cpath d='M52 66q8-10 16 0t16 0'/%3E%3Ccircle cx='100' cy='70' r='4'/%3E%3Cpath d='M92 70h-6M114 70h-6M100 62v-6M100 84v-6'/%3E%3Cpath d='M20 104l8-8 8 8-8 8z'/%3E%3Cpath d='M58 100h20M58 106h14'/%3E%3Cpath d='M96 98l14 10M110 98l-14 10'/%3E%3C/g%3E%3C/svg%3E")}
.wa-day{align-self:center;background:#e1f2fa;color:#54656f;font-size:9.5px;font-weight:700;letter-spacing:.05em;padding:4px 10px;border-radius:6px;margin-bottom:auto;box-shadow:0 1px .5px rgba(0,0,0,.1);font-family:-apple-system,'Segoe UI',Roboto,sans-serif}
.wa-msg{position:relative;max-width:84%;padding:6px 8px 5px;border-radius:8px;font-size:12.5px;line-height:1.38;color:#111b21;box-shadow:0 1px .5px rgba(0,0,0,.13);font-family:-apple-system,'Segoe UI',Roboto,sans-serif;opacity:0;transform:translateY(10px) scale(.97);transition:opacity .45s ease,transform .55s cubic-bezier(.2,1.2,.3,1)}
.wa-msg.in{opacity:1;transform:none}
.wa-msg.gone{opacity:0;transform:translateY(-8px);transition:opacity .5s,transform .5s}
.wa-msg.out{align-self:flex-end;background:#DCF8C6;border-top-right-radius:0}
.wa-msg.out:after{content:"";position:absolute;top:0;right:-7px;border-left:8px solid #DCF8C6;border-bottom:8px solid transparent}
.wa-msg.inc{align-self:flex-start;background:#fff;border-top-left-radius:0}
.wa-msg.inc:after{content:"";position:absolute;top:0;left:-7px;border-right:8px solid #fff;border-bottom:8px solid transparent}
.wa-meta{float:right;margin:6px 0 -2px 10px;font-size:9.5px;color:#667781;display:inline-flex;align-items:center;gap:3px}
.wa-meta svg{width:15px;height:10px;color:#8696a0;transition:color .4s}
.wa-meta.read svg{color:#53bdeb}
.wa-typing{align-self:flex-start;background:#fff;border-radius:0 8px 8px 8px;padding:10px 12px;display:none;gap:4px;box-shadow:0 1px .5px rgba(0,0,0,.13)}
.wa-typing.show{display:flex}
.wa-typing i{width:6px;height:6px;border-radius:50%;background:#9aa4a9;animation:dots 1.1s infinite}
.wa-typing i:nth-child(2){animation-delay:.15s}.wa-typing i:nth-child(3){animation-delay:.3s}
.wa-input{display:flex;align-items:flex-end;gap:6px;padding:6px 6px 14px;background:#ECE5DD}
.wa-input .field{flex:1;min-height:36px;background:#fff;border-radius:18px;padding:9px 14px;font-size:12.5px;line-height:1.35;color:#111b21;font-family:-apple-system,'Segoe UI',Roboto,sans-serif;box-shadow:0 1px .5px rgba(0,0,0,.1);transition:background .3s}
.wa-input .field.fill{background:#fffef5}
.wa-input .ph{color:#8696a0}
.wa-input .send{width:36px;height:36px;border-radius:50%;background:#00A884;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .2s}
.wa-input .send svg{width:17px;height:17px;margin-left:2px}
.wa-input .send.press{transform:scale(.82)}
@media (max-width:700px){
  .demo{grid-template-columns:1fr}
  .sv-nav ul{display:none}
}
.sv-burger{width:18px;height:12px;border-top:2px solid #c8a45c;border-bottom:2px solid #c8a45c;position:relative}
.sv-burger:after{content:"";position:absolute;left:0;right:0;top:3px;height:2px;background:#c8a45c}
.wa-who{line-height:1.2}

/* ---------- round 5 ---------- */
/* floating WhatsApp only on larger screens (phones already have the header button) */
@media (max-width:900px){.wa-float{display:none}}

/* 3D logo */
.logo3d{display:flex;align-items:center;gap:11px;perspective:600px}
.l3-icon{position:relative;width:46px;height:32px;border-radius:9px;background:linear-gradient(145deg,#ff4a43,#d42620);transform-style:preserve-3d;animation:l3sway 6s ease-in-out infinite;box-shadow:1px 1px 0 #b3201b,2px 2px 0 #a11d18,3px 3px 0 #8f1915,4px 4px 0 #7d1612,6px 9px 16px rgba(0,0,0,.65)}
.l3-icon:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(125deg,rgba(255,255,255,.4),rgba(255,255,255,0) 50%)}
.l3-icon i{position:absolute;left:50%;top:50%;margin:-8px 0 0 -5px;border-left:15px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;filter:drop-shadow(1px 1.5px 0 rgba(0,0,0,.3));z-index:1}
@keyframes l3sway{0%,100%{transform:rotateY(-20deg) rotateX(8deg)}50%{transform:rotateY(20deg) rotateX(-4deg)}}
.l3-txt b{display:block;font-family:'Anton',sans-serif;font-weight:400;font-size:27px;line-height:1;color:#fff;letter-spacing:.02em;text-shadow:0 1px 0 #cfcfcf,0 2px 0 #b5b5b5,0 3px 0 #9a9a9a,0 4px 0 #7f7f7f,0 7px 10px rgba(0,0,0,.75)}
.l3-txt small{display:block;font-size:7.5px;font-weight:800;letter-spacing:.22em;color:var(--red);margin-top:4px}
.brand:hover .l3-icon{animation-duration:1.6s}
@media (max-width:700px){.l3-icon{width:38px;height:27px}.l3-icon i{border-left-width:12px;border-top-width:7px;border-bottom-width:7px;margin:-7px 0 0 -4px}.l3-txt b{font-size:23px}}

/* demo: site in the back, phone in front (like the hero) */
.demo{display:block;position:relative;height:640px;max-width:620px;margin:0 auto;width:100%}
.demo .browser{position:absolute;left:0;top:0;width:84%;transform:perspective(1600px) rotateY(9deg);transform-origin:left center}
.demo .sv-hero>*{max-width:56%}
.demo .phone.wa{position:absolute;right:0;top:70px;z-index:2;transform:rotate(2.5deg);box-shadow:0 50px 100px -25px #000,0 0 0 1px #2a2a2a}
@media (max-width:700px){
  .demo{height:auto;display:flex;flex-direction:column;max-width:none}
  .demo .browser{position:relative;width:100%;transform:none}
  .demo .sv-hero>*{max-width:none}
  .demo .phone.wa{position:relative;align-self:flex-end;right:auto;top:auto;margin-top:-56px;margin-right:4px;transform:rotate(2deg)}
}

/* ads flow: side labels at the bottom */
.flow .fl.l,.flow .fl.r{top:auto;bottom:22px}
.flow .fl.r{font-size:12px}

/* who: 5 cards, 3 on top and 2 below */
.who-grid{grid-template-columns:repeat(6,1fr)}
.who-card{grid-column:span 2;min-height:280px}
.who-card:nth-child(4),.who-card:nth-child(5){grid-column:span 3}
@media (max-width:1023px){.who-grid{grid-template-columns:1fr}.who-card,.who-card:nth-child(4),.who-card:nth-child(5){grid-column:auto;min-height:220px}}
@media (max-width:700px){.flow .fl.l{top:20px;bottom:auto}.flow .fl.r{bottom:18px;right:20px;font-size:10.5px}}

/* demo on phones: same side-by-side composition as desktop, scaled down (like the hero) */
@media (max-width:700px){
  .demo-fit{position:relative}
  .demo{position:absolute;left:0;top:0;width:560px;height:640px;max-width:none;display:block;transform-origin:0 0;transform:scale(var(--s,.62))}
  .demo .browser{position:absolute;left:0;top:0;width:84%;transform:perspective(1600px) rotateY(9deg)}
  .demo .sv-hero>*{max-width:56%}
  .demo .phone.wa{position:absolute;right:0;top:70px;margin:0;align-self:auto;transform:rotate(2.5deg)}
}

/* new 3D logo image (black background drops out with screen blend) */
.brand-img{height:64px;width:auto;display:block}
footer .brand-img{height:48px}
@media (max-width:700px){.brand-img{height:42px}}