/* tektiv motion layer — v1 (staging) Everything here is additive. Hidden/animated states only apply under html.mo-on, which is set in unless the visitor prefers reduced motion. If motion.js fails to load, the head failsafe removes .mo-on after 4s. */ :root{ --ink:#0B1426; --ink2:#101D36; --coral:#FF6B5B; --sky:#7C9EE8; --ez:cubic-bezier(.16,1,.3,1); --ez2:cubic-bezier(.65,0,.35,1); } /* self-hosted brand fonts (SIL OFL), same origin + preloaded; display:optional means the text never re-flows when the font arrives, so fonts can never cause layout shift */ @font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:optional;src:url(/css/fonts/manrope-v20-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:optional;src:url(/css/fonts/jetbrains-mono-v24-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @property --p{syntax:'';inherits:false;initial-value:0;} /* metric-matched fallback (fitted against 832 real headings/paragraphs from this site). Fonts load with display=optional + preload, so there is never a swap; this fallback is only what a slow first visit sees, and it is sized to look near-identical. */ @font-face{font-family:'Manrope Fallback';font-weight:100 600;src:local('Arial'),local('ArialMT');size-adjust:102.74%;ascent-override:103.76%;descent-override:29.2%;line-gap-override:0%;} @font-face{font-family:'Manrope Fallback';font-weight:700;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:100.19%;ascent-override:106.4%;descent-override:29.94%;line-gap-override:0%;} @font-face{font-family:'Manrope Fallback';font-weight:800 900;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:100.25%;ascent-override:106.33%;descent-override:29.93%;line-gap-override:0%;} :root{--f:'Manrope','Manrope Fallback',system-ui,sans-serif;} /* ─── scroll progress ─── */ .mo-prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:300;background:linear-gradient(90deg,var(--n),#FFD27A);transform-origin:0 50%;transform:scaleX(0);pointer-events:none;} /* ─── HERO ─── */ .mo-hero{position:relative;overflow:hidden;background: radial-gradient(60% 70% at 78% 40%,rgba(232,160,32,.16),transparent 70%), radial-gradient(50% 60% at 20% 90%,rgba(124,158,232,.12),transparent 70%),var(--ink); color:#fff;padding:10rem 0 5.5rem;min-height:auto;isolation:isolate;} .mo-ink{position:absolute;inset:0;width:100%;height:100%;z-index:-2;opacity:0;transition:opacity 1.6s ease;} .mo-ink.ready{opacity:1;} .mo-hero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(80% 70% at 60% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(80% 70% at 60% 40%,#000 20%,transparent 75%);} .mo-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:120px;z-index:-1;pointer-events:none;background:linear-gradient(transparent,var(--ink));} .mo-hero .hero-grid{grid-template-columns:1.05fr 1fr;gap:3.5rem;} .mo-eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--m);font-size:.68rem;letter-spacing:.04em;color:rgba(255,255,255,.82);padding:.4rem .95rem;border-radius:999px;border:1px solid rgba(232,160,32,.35);background:rgba(232,160,32,.08);margin-bottom:1.6rem;backdrop-filter:blur(6px);} .mo-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--n);box-shadow:0 0 0 0 rgba(232,160,32,.6);animation:mo-ping 2.2s infinite;} @keyframes mo-ping{0%{box-shadow:0 0 0 0 rgba(232,160,32,.55);}70%{box-shadow:0 0 0 10px rgba(232,160,32,0);}100%{box-shadow:0 0 0 0 rgba(232,160,32,0);}} .mo-hero h1{color:#fff;max-width:640px;margin-bottom:1.1rem;} .mo-h1-main{display:block;font-size:clamp(2.35rem,5.6vw,4.3rem);line-height:1.02;letter-spacing:-.045em;font-weight:800;} .mo-h1-main em{font-style:normal;color:var(--n);position:relative;white-space:nowrap;} .mo-h1-main em::after{content:'';position:absolute;left:0;right:0;bottom:.02em;height:.09em;border-radius:99px;background:linear-gradient(90deg,var(--n),#FFD27A);transform-origin:0 50%;transform:scaleX(1);} .mo-on .mo-h1-main em::after{transform:scaleX(0);animation:mo-draw 1.1s var(--ez) .5s forwards;} @keyframes mo-draw{to{transform:scaleX(1);}} .mo-h1-sub{display:block;margin-top:1rem;font-size:clamp(1rem,1.6vw,1.2rem);font-weight:600;letter-spacing:-.01em;line-height:1.4;color:rgba(255,255,255,.72);} .mo-rot{position:relative;font-family:var(--m);font-size:clamp(.8rem,1.2vw,.92rem);line-height:1.6;color:var(--n);margin:0 0 1.4rem;min-height:1.6em;} .mo-rot .mo-rot-l{display:block;} .mo-on .mo-rot .mo-rot-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} .mo-rot .mo-type{display:none;} .mo-on .mo-rot .mo-type{display:inline;} .mo-rot .mo-type::before{content:'> ';color:rgba(255,255,255,.4);} .mo-rot .mo-caret{display:inline-block;width:.55em;height:1.05em;vertical-align:-.15em;margin-left:2px;background:var(--n);animation:bl 1s step-end infinite;} .mo-hero .hero-p{color:rgba(255,255,255,.74);max-width:540px;} .mo-hero .bo{color:#fff;border-color:rgba(255,255,255,.35);} .mo-hero .bo:hover{background:#fff;color:var(--bg-dark);} .mo-hero .bn{box-shadow:0 0 0 0 rgba(232,160,32,.5),0 10px 30px -8px rgba(232,160,32,.55);} .mo-ticks{display:flex;gap:1.4rem;flex-wrap:wrap;} .mo-ticks div{display:flex;align-items:center;gap:.35rem;font-size:.78rem;color:rgba(255,255,255,.7);font-weight:600;} /* ─── build console (hero visual) ─── */ .mo-stage{position:relative;perspective:1400px;padding-bottom:3.4rem;} .mo-con{position:relative;aspect-ratio:5/4;border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 80px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ez);display:flex;flex-direction:column;overflow:hidden;} .mo-con-bar{display:flex;align-items:center;gap:.4rem;padding:.65rem .8rem;border-bottom:1px solid rgba(255,255,255,.08);} .mo-con-bar>i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18);} .mo-con-bar>i:nth-child(1){background:#FF5F57;}.mo-con-bar>i:nth-child(2){background:#FFBD2E;}.mo-con-bar>i:nth-child(3){background:#28CA41;} .mo-url{flex:1;margin:0 .6rem;display:flex;align-items:center;gap:.4rem;height:24px;padding:0 .7rem;border-radius:7px;background:rgba(0,0,0,.28);font-family:var(--m);font-size:.66rem;color:rgba(255,255,255,.8);overflow:hidden;white-space:nowrap;} .mo-url svg{flex-shrink:0;opacity:.6;} .mo-url .mo-caret{display:inline-block;width:5px;height:12px;background:var(--n);animation:bl 1s step-end infinite;} .mo-live{font-family:var(--m);font-size:.56rem;font-weight:700;letter-spacing:.1em;padding:.2rem .45rem;border-radius:4px;color:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.15);transition:all .4s;} .mo-con[data-s="live"] .mo-live,.mo-con[data-s="click"] .mo-live{color:#0B1426;background:#28CA41;border-color:#28CA41;} .mo-vp{position:relative;flex:1;margin:.8rem;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.02);transition:background .8s var(--ez);display:flex;flex-direction:column;gap:5%;padding:5%;} .mo-con[data-s="live"] .mo-vp,.mo-con[data-s="click"] .mo-vp{background:var(--bg-b,#fff);} .mo-vp i{display:block;border-radius:5px;border:1.5px dashed rgba(232,160,32,.55);background:transparent;transition:background .6s var(--ez),border-color .6s,transform .8s var(--ez),opacity .6s;transform:scale(.96);opacity:.0;} .mo-con[data-s] .mo-vp i{opacity:1;transform:none;} .mo-con[data-s="build"] .mo-vp i,.mo-con[data-s="live"] .mo-vp i,.mo-con[data-s="click"] .mo-vp i{border-color:transparent;background:rgba(255,255,255,.14);} .mo-con[data-s="live"] .mo-vp i,.mo-con[data-s="click"] .mo-vp i{background:var(--ln,#E5E7EB);} .ms-nav{display:flex;align-items:center;gap:6%;height:7%;} .ms-nav i{height:55%;width:10%;} .ms-nav i.lg{width:14%;height:100%;border-radius:4px;} .ms-nav i.ct{margin-left:auto;width:16%;height:100%;border-radius:99px;} .mo-con[data-s="live"] .ms-nav i.lg,.mo-con[data-s="click"] .ms-nav i.lg{background:var(--b);} .mo-con[data-s="live"] .ms-nav i.ct,.mo-con[data-s="click"] .ms-nav i.ct{background:var(--b);} .ms-hero{display:grid;grid-template-columns:1fr 1fr;gap:6%;flex:1.3;} .ms-copy{display:flex;flex-direction:column;justify-content:center;gap:9%;} .ms-copy i{height:9%;} .ms-copy i.l1{width:95%;height:13%;}.ms-copy i.l2{width:70%;height:13%;}.ms-copy i.l3{width:85%;} .ms-copy i.bt{width:48%;height:15%;border-radius:99px;margin-top:4%;position:relative;overflow:visible;} .mo-con[data-s="live"] .ms-copy i.l1,.mo-con[data-s="live"] .ms-copy i.l2,.mo-con[data-s="click"] .ms-copy i.l1,.mo-con[data-s="click"] .ms-copy i.l2{background:var(--tx,#111827);} .mo-con[data-s="live"] .ms-copy i.bt,.mo-con[data-s="click"] .ms-copy i.bt{background:var(--b);box-shadow:0 6px 16px -6px var(--b);} .ms-copy i.bt::after{content:'';position:absolute;inset:-6px;border-radius:99px;border:2px solid var(--b);opacity:0;} .mo-con[data-s="click"] .ms-copy i.bt{transform:scale(.94);} .mo-con[data-s="click"] .ms-copy i.bt::after{animation:mo-ripple .7s var(--ez) forwards;} @keyframes mo-ripple{0%{opacity:1;transform:scale(.9);}100%{opacity:0;transform:scale(1.5);}} .ms-media{position:relative;height:auto!important;border-radius:8px!important;overflow:hidden;} .ms-media::before{content:'';position:absolute;inset:-40%;opacity:0;transition:opacity .8s;background:conic-gradient(from 0deg,var(--b),var(--b2,#fff),var(--b),var(--b2,#fff),var(--b));animation:mo-spin 6s linear infinite;filter:blur(18px);} .ms-media::after{content:'';position:absolute;left:50%;top:50%;width:28%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.6);border-radius:50%;background:rgba(255,255,255,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l8 5-8 5z' fill='%230B1426'/%3E%3C/svg%3E") center/55% no-repeat;opacity:0;transition:all .6s var(--ez) .2s;box-shadow:0 8px 24px rgba(0,0,0,.25);} .mo-con[data-s="live"] .ms-media::before,.mo-con[data-s="click"] .ms-media::before{opacity:1;} .mo-con[data-s="live"] .ms-media::after,.mo-con[data-s="click"] .ms-media::after{opacity:1;transform:translate(-50%,-50%) scale(1);} @keyframes mo-spin{to{transform:rotate(360deg);}} .ms-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:5%;flex:.7;} .ms-cards i{height:auto!important;} .mo-con[data-s="build"] .mo-vp i{transition-delay:calc(var(--d,0)*70ms);} .ms-cursor{position:absolute;left:0;top:0;width:18px;height:18px;z-index:3;opacity:0;transform:translate(var(--cx,80%),var(--cy,90%));transition:transform 1.1s var(--ez2),opacity .4s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));pointer-events:none;} .mo-con[data-s="live"] .ms-cursor,.mo-con[data-s="click"] .ms-cursor{opacity:1;} .ms-toast{position:absolute;right:5%;bottom:6%;z-index:4;display:flex;align-items:center;gap:.45rem;padding:.5rem .75rem;border-radius:10px;background:#0B1426;color:#fff;font-size:.66rem;font-weight:700;box-shadow:0 12px 30px -8px rgba(0,0,0,.5);opacity:0;transform:translateY(12px) scale(.95);transition:all .5s var(--ez);} .ms-toast b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#28CA41;} .mo-con[data-s="click"] .ms-toast{opacity:1;transform:none;transition-delay:.35s;} .mo-hud{display:flex;gap:.6rem;justify-content:space-between;padding:0 .8rem .8rem;} .mo-ring{flex:1;display:flex;align-items:center;gap:.5rem;padding:.45rem .55rem;border-radius:10px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.07);min-width:0;} .mo-ring svg{flex-shrink:0;transform:rotate(-90deg);} .mo-ring circle{fill:none;stroke-width:4;} .mo-ring .bg{stroke:rgba(255,255,255,.1);} .mo-ring .fg{stroke:#28CA41;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.4s var(--ez);} .mo-ring span{display:flex;flex-direction:column;line-height:1.15;min-width:0;} .mo-ring b{font-family:var(--m);font-size:.8rem;color:#fff;} .mo-ring small{font-size:.55rem;color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .mo-hero .hero-badge{left:-1.4rem;right:auto;bottom:0;background:rgba(16,29,54,.82);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 18px 40px -12px rgba(0,0,0,.6);transform:translateZ(60px);animation:mo-float 6s ease-in-out infinite;} .mo-hero .hero-badge-title{color:#fff;}.mo-hero .hero-badge-sub{color:rgba(255,255,255,.6);} .mo-hero .hero-badge-icon{background:rgba(232,160,32,.16);} @keyframes mo-float{0%,100%{translate:0 0;}50%{translate:0 -8px;}} /* ─── proof marquee + stats band (dark, continuous with hero) ─── */ .mo-on .proof-strip{background:var(--ink);border-bottom:1px solid rgba(255,255,255,.07);border-top:1px solid rgba(255,255,255,.07);padding:1.1rem 0;overflow:hidden; position:relative;} .mo-on .proof-strip::before,.mo-on .proof-strip::after{content:'';position:absolute;top:0;bottom:0;width:14%;z-index:2;pointer-events:none;} .mo-on .proof-strip::before{left:0;background:linear-gradient(90deg,var(--ink),transparent);} .mo-on .proof-strip::after{right:0;background:linear-gradient(-90deg,var(--ink),transparent);} .mo-on .proof-inner{flex-wrap:nowrap;justify-content:flex-start;max-width:none;width:max-content;gap:3rem;} .mo-on .proof-inner.mo-mq{animation:mo-mq 38s linear infinite;} .mo-on .proof-strip:hover .proof-inner.mo-mq{animation-play-state:paused;} .mo-on .proof-strip .proof-label{color:rgba(255,255,255,.45);white-space:nowrap;} .mo-on .proof-strip .proof-item{color:#fff;white-space:nowrap;} .mo-on .proof-strip .mo-sep{width:6px;height:6px;border-radius:2px;background:var(--n);transform:rotate(45deg);align-self:center;flex-shrink:0;} @keyframes mo-mq{to{transform:translateX(-50%);}} .mo-on .stats{background:var(--ink);border:0;padding:2.8rem 2.5rem 3.4rem;} .mo-on .stats-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;} .mo-on .stat{position:relative;display:grid;grid-template-columns:76px 1fr;align-items:center;gap:1rem;text-align:left;padding:1rem 1.1rem;border-radius:14px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.08);} .mo-on .stat::before{content:'';grid-area:1/1;width:76px;height:76px;border-radius:50%; background:conic-gradient(var(--sc,var(--n)) calc(var(--p)*1%),rgba(255,255,255,.08) 0); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px)); transition:--p 1.8s var(--ez);} .mo-on .stat.mo-in::before{--p:var(--pt,0);} .mo-on .stat-n{grid-area:1/1;justify-self:center;font-size:1.15rem;} .mo-on .stat-n.red{color:var(--coral);}.mo-on .stat .stat-n.amb{color:var(--n);} .mo-on .stat:has(.red){--sc:var(--coral);} .mo-on .stat-l{grid-area:1/2;margin:0;font-size:.76rem;line-height:1.45;color:rgba(255,255,255,.66);} /* ─── generic reveals ─── */ .mo-on .rv{transition:opacity .9s var(--ez),transform .9s var(--ez),filter .9s var(--ez),background .3s,border-color .3s,box-shadow .3s;} .mo-on .rv.hide{opacity:0;transform:translateY(34px) scale(.98);filter:blur(6px);} .mo-on .rv.vi{opacity:1;transform:none;filter:none;} .mo-w{display:inline-block;-webkit-clip-path:inset(-.15em -.3em -.3em -.3em);clip-path:inset(-.15em -.3em -.3em -.3em);} .mo-w>span{display:inline-block;transform:translateY(125%) rotate(4deg);transform-origin:0 100%;transition:transform 1s var(--ez);transition-delay:calc(var(--i)*55ms);} .mo-split.mo-in .mo-w>span{transform:none;} .mo-on .tag.mo-typing{position:relative;} .mo-on .tag.mo-typing>span:first-child::after{content:'_';position:absolute;margin-left:1px;animation:bl 1s step-end infinite;} /* icon strokes draw in */ .mo-on .mo-draw path,.mo-on .mo-draw circle,.mo-on .mo-draw rect,.mo-on .mo-draw polyline,.mo-on .mo-draw line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--ez) .25s;} .mo-on .vi .mo-draw *,.mo-on .mo-in .mo-draw *{stroke-dashoffset:0;} /* ─── cards: spotlight + tilt ─── */ .mo-on .card::before,.mo-on .diag-card::before,.mo-on .case::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;z-index:0; background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(232,160,32,.14),transparent 45%);} .mo-on .card:hover::before,.mo-on .diag-card:hover::before,.mo-on .case:hover::before{opacity:1;} .mo-on .diag-card,.mo-on .case{position:relative;} .mo-on .card>*,.mo-on .case>*{position:relative;z-index:1;} .mo-on .rv.vi.mo-tilt:hover{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px);transition:transform .15s linear,box-shadow .3s,border-color .3s,background .3s;} .mo-on .card img{transition:transform 1.2s var(--ez);} .mo-on .card:hover img{transform:scale(1.06);} .mo-on .card-cta{transition:letter-spacing .4s var(--ez),color .3s;} .mo-on .card:hover .card-cta{letter-spacing:.03em;} .mo-on .diag-card{transition:transform .5s var(--ez),border-color .3s,box-shadow .3s,opacity .9s var(--ez),filter .9s var(--ez);overflow:hidden;} .mo-on .diag-card:hover{border-color:rgba(232,160,32,.45);box-shadow:0 10px 30px -12px rgba(27,45,79,.25);} /* ─── CTA strips ─── */ .mo-on .ctb{position:relative;overflow:hidden;background:var(--ink);padding:4rem 2.5rem;isolation:isolate;} .mo-on .ctb::before{content:'';position:absolute;left:50%;top:50%;width:1400px;height:1400px;margin:-700px 0 0 -700px;z-index:-1; background:conic-gradient(from 0deg,transparent 0 20%,rgba(232,160,32,.22) 30%,transparent 42%,rgba(124,158,232,.14) 62%,transparent 75%);animation:mo-spin 22s linear infinite;filter:blur(40px);} .mo-on .ctb::after{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(60% 80% at 50% 50%,#000,transparent);mask-image:radial-gradient(60% 80% at 50% 50%,#000,transparent);} .mo-on .ctb h2{font-size:clamp(1.6rem,4vw,2.6rem);letter-spacing:-.03em;} .mo-on .ctb-amber{position:relative;overflow:hidden;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.07) 0 14px,transparent 14px 28px),var(--n);background-size:40px 40px,auto;animation:mo-stripe 2.4s linear infinite;padding:3rem 2.5rem;} @keyframes mo-stripe{to{background-position:40px 0,0 0;}} /* ─── process timeline: scroll-linked fill ─── */ .mo-on .tl::after{content:'';position:absolute;left:20px;top:0;width:2px;height:100%;background:linear-gradient(180deg,#FFD27A,var(--n));transform-origin:50% 0;transform:scaleY(var(--tlp,0));box-shadow:0 0 12px rgba(232,160,32,.7);} .mo-on .ts .td{transition:all .5s var(--ez);} .mo-on .ts.mo-pass .td{background:var(--n);color:var(--bg-dark);box-shadow:0 0 0 6px rgba(232,160,32,.18),0 0 24px rgba(232,160,32,.5);} .mo-on .ts .pill{transition:transform .5s var(--ez),background .3s;} .mo-on .ts.mo-pass .pill{background:rgba(232,160,32,.16);} /* ─── case studies ─── */ .mo-on .case img{transition:object-position 5s ease-in-out,transform 1.2s var(--ez);} .mo-on .case:hover img{object-position:bottom;} .mo-on .case-bar .case-url{position:relative;overflow:hidden;} .mo-on .case-bar .case-url::after{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(232,160,32,.25);} .mo-on .case.vi .case-bar .case-url::after{animation:mo-load 1.6s var(--ez) .3s forwards;} @keyframes mo-load{0%{width:0;opacity:1;}80%{width:100%;opacity:1;}100%{width:100%;opacity:0;}} /* ─── blog carousel bars grow ─── */ .mo-on #blog-track svg rect+rect{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.08);transition:transform 1.1s var(--ez);} .mo-on #blog-track .vi svg rect+rect{transform:none;} .mo-on #blog-track .vi svg rect:nth-child(3n){transition-delay:.12s;} .mo-on #blog-track .vi svg rect:nth-child(3n+1){transition-delay:.24s;} .mo-on #blog-track a:hover svg rect+rect{transform:scaleY(1.08);} /* ─── magnetic buttons ─── */ .mo-on .btn.mo-mag{transform:translate(var(--bx,0),var(--by,0));transition:transform .35s var(--ez),background .3s,box-shadow .3s,color .3s;} /* ─── MOTION SHOWCASE ─── */ .mo-show{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:5rem 0 5.5rem;isolation:isolate;} .mo-show::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 60% at 50% 100%,rgba(232,160,32,.18),transparent 70%),radial-gradient(40% 50% at 10% 10%,rgba(124,158,232,.12),transparent 70%);} .mo-show .tt{color:#fff;}.mo-show .sb{color:rgba(255,255,255,.72);} .mo-show .tag{color:var(--n);} .mo-phones{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2.8rem;align-items:start;} .mo-ph{display:flex;flex-direction:column;align-items:center;text-align:center;} .mo-ph:nth-child(2){margin-top:2.5rem;} .mo-scr{position:relative;width:100%;max-width:250px;aspect-ratio:9/16;border-radius:30px;overflow:hidden;background:#000;border:6px solid #1c2640;box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08);margin-bottom:1.3rem;} .mo-ph h3{font-size:1rem;font-weight:800;margin-bottom:.35rem;color:#fff;} .mo-ph p{font-size:.82rem;line-height:1.6;color:rgba(255,255,255,.62);max-width:260px;} .mo-show-cta{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:3rem;} .mo-show .bo{color:#fff;border-color:rgba(255,255,255,.35);}.mo-show .bo:hover{background:#fff;color:var(--bg-dark);} /* shared social chrome */ .sx{position:absolute;inset:0;font-family:var(--f);} .sx,.sx *,.sx *::after{animation-play-state:paused!important;} .mo-scr.play .sx,.mo-scr.play .sx *,.mo-scr.play .sx *::after{animation-play-state:running!important;} .sx-top{position:absolute;left:10px;right:10px;top:10px;z-index:5;display:flex;gap:4px;} .sx-top i{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden;position:relative;} .sx-top i::after{content:'';position:absolute;inset:0;background:#fff;transform-origin:0 50%;transform:scaleX(0);} .sx-top i:nth-child(1)::after{animation:sx-bar 6s linear infinite;} .sx-top i:nth-child(2)::after{animation:sx-bar2 6s linear infinite;} @keyframes sx-bar{0%{transform:scaleX(0);}50%,100%{transform:scaleX(1);}} @keyframes sx-bar2{0%,50%{transform:scaleX(0);}100%{transform:scaleX(1);}} .sx-who{text-shadow:0 1px 3px rgba(0,0,0,.45);position:absolute;left:12px;top:20px;z-index:5;display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;color:#fff;} .sx-who b{width:22px;height:22px;border-radius:50%;background:conic-gradient(#E8A020,#FF6B5B,#7C9EE8,#E8A020);padding:2px;} .sx-who b::after{content:'';display:block;width:100%;height:100%;border-radius:50%;background:#0B1426;border:2px solid #000;box-sizing:border-box;} .sx-side{position:absolute;right:10px;bottom:70px;z-index:5;display:flex;flex-direction:column;gap:14px;} .sx-side svg{display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));} .sx-heart{animation:sx-heart 3s var(--ez) infinite;transform-origin:50% 50%;} @keyframes sx-heart{0%,70%{transform:scale(1);fill:none;}76%{transform:scale(1.35);fill:#FF3B5C;stroke:#FF3B5C;}90%,100%{transform:scale(1);fill:#FF3B5C;stroke:#FF3B5C;}} /* phone 1 — kinetic type reel */ .k1{background:#E8A020;animation:k1-bg 6s linear infinite;display:grid;place-items:center;} @keyframes k1-bg{0%,24.9%{background:#E8A020;}25%,49.9%{background:#0B1426;}50%,74.9%{background:#FF6B5B;}75%,100%{background:#F5F1E8;}} .k1 .kw{position:absolute;left:0;right:0;top:50%;text-align:center;font-weight:800;letter-spacing:-.05em;line-height:.9;padding:0 14px;opacity:0;transform:translateY(-50%);color:#0B1426;text-transform:uppercase;} .k1 .kw1{font-size:40px;animation:k1-a 6s var(--ez) infinite;} .k1 .kw2{font-size:33px;color:#E8A020;animation:k1-b 6s var(--ez) infinite;} .k1 .kw3{font-size:36px;color:#fff;animation:k1-c 6s var(--ez) infinite;} .k1 .kw4{font-size:34px;animation:k1-d 6s var(--ez) infinite;} .k1 .kw4 small{display:block;font-size:12px;letter-spacing:.2em;margin-top:10px;font-family:var(--m);font-weight:700;} @keyframes k1-a{0%{opacity:0;transform:translateY(-50%) scale(2.4) rotate(-8deg);}4%,21%{opacity:1;transform:translateY(-50%) scale(1) rotate(-4deg);}25%,100%{opacity:0;transform:translateY(-50%) scale(.6);}} @keyframes k1-b{0%,25%{opacity:0;transform:translateY(-10%) skewY(10deg);}29%,46%{opacity:1;transform:translateY(-50%) skewY(0);}50%,100%{opacity:0;transform:translateY(-90%);}} @keyframes k1-c{0%,50%{opacity:0;letter-spacing:.4em;}54%,71%{opacity:1;letter-spacing:-.05em;}75%,100%{opacity:0;}} @keyframes k1-d{0%,75%{opacity:0;transform:translateY(-50%) translateX(60%);}79%,96%{opacity:1;transform:translateY(-50%) translateX(0);}100%{opacity:0;}} .k1 .bar{position:absolute;left:0;right:0;bottom:22%;height:8px;background:#0B1426;transform-origin:0 50%;animation:k1-bar 1.5s var(--ez2) infinite alternate;} @keyframes k1-bar{0%{transform:scaleX(0);}100%{transform:scaleX(1);}} /* phone 2 — logo sting */ .k2{background:radial-gradient(circle at 50% 42%,#1B2D4F,#05080f 70%);} .k2 svg.mark{position:absolute;left:50%;top:40%;width:44%;transform:translate(-50%,-50%);overflow:visible;} .k2 .mk-o{fill:none;stroke:#E8A020;stroke-width:4;stroke-dasharray:1;stroke-dashoffset:1;animation:k2-draw 5s var(--ez2) infinite;} .k2 .mk-f{fill:#E8A020;opacity:0;transform-origin:50% 50%;transform-box:fill-box;animation:k2-fill 5s var(--ez) infinite;} @keyframes k2-draw{0%{stroke-dashoffset:1;}30%,85%{stroke-dashoffset:0;}100%{stroke-dashoffset:0;opacity:0;}} @keyframes k2-fill{0%,28%{opacity:0;transform:scale(.4) rotate(-40deg);}40%,85%{opacity:1;transform:none;}100%{opacity:0;}} .k2 .burst{position:absolute;left:50%;top:40%;width:0;height:0;} .k2 .burst i{position:absolute;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:#FFD27A;opacity:0;animation:k2-burst 5s var(--ez) infinite;transform:rotate(var(--a)) translateY(0);} @keyframes k2-burst{0%,32%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(1);}34%{opacity:1;}55%{opacity:0;transform:rotate(var(--a)) translateY(-95px) scale(.3);}100%{opacity:0;}} .k2 .ring{position:absolute;left:50%;top:40%;width:50%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(232,160,32,.6);transform:translate(-50%,-50%) scale(.5);opacity:0;animation:k2-ring 5s var(--ez) infinite;} @keyframes k2-ring{0%,33%{opacity:0;transform:translate(-50%,-50%) scale(.5);}36%{opacity:1;}60%,100%{opacity:0;transform:translate(-50%,-50%) scale(2.2);}} .k2 .wm{position:absolute;left:0;right:0;top:61%;text-align:center;font-family:var(--m);font-weight:800;font-size:22px;color:#fff;letter-spacing:-.02em;} .k2 .wm span{display:inline-block;opacity:0;transform:translateY(14px);animation:k2-ch 5s var(--ez) infinite;animation-delay:calc(var(--i)*60ms);} @keyframes k2-ch{0%,40%{opacity:0;transform:translateY(14px);}50%,85%{opacity:1;transform:none;}100%{opacity:0;}} .k2 .tl2{position:absolute;left:0;right:0;top:70%;text-align:center;font-size:9px;letter-spacing:.35em;text-transform:uppercase;color:rgba(255,255,255,.55);opacity:0;animation:k2-tl 5s ease infinite;} @keyframes k2-tl{0%,55%{opacity:0;letter-spacing:.8em;}65%,85%{opacity:1;letter-spacing:.35em;}100%{opacity:0;}} /* phone 3 — promo loop */ .k3{background:linear-gradient(170deg,#F5F1E8,#EDE4D3);color:#0B1426;overflow:hidden;} .k3 .blob{position:absolute;width:140%;aspect-ratio:1;left:-20%;top:-35%;border-radius:42% 58% 63% 37%/41% 44% 56% 59%;background:#E8A020;animation:k3-blob 8s ease-in-out infinite;} @keyframes k3-blob{0%,100%{border-radius:42% 58% 63% 37%/41% 44% 56% 59%;transform:rotate(0);}50%{border-radius:61% 39% 45% 55%/55% 62% 38% 45%;transform:rotate(25deg);}} .k3 .pct{position:absolute;left:0;right:0;top:17%;text-align:center;font-weight:800;font-size:84px;letter-spacing:-.07em;line-height:1;color:#0B1426;animation:k3-pop 4s var(--ez) infinite;} .k3 .pct sup{font-size:.42em;vertical-align:.95em;letter-spacing:0;} .k3 .off{position:absolute;left:0;right:0;top:40%;text-align:center;font-family:var(--m);font-weight:800;font-size:15px;letter-spacing:.3em;color:#fff;background:#0B1426;padding:6px 0;transform:rotate(-4deg) scaleX(0);animation:k3-off 4s var(--ez) infinite;} @keyframes k3-pop{0%{transform:scale(.3);opacity:0;}12%{transform:scale(1.08);opacity:1;}20%,88%{transform:scale(1);opacity:1;}100%{transform:scale(1);opacity:0;}} @keyframes k3-off{0%,15%{transform:rotate(-4deg) scaleX(0);}28%,88%{transform:rotate(-4deg) scaleX(1);}100%{transform:rotate(-4deg) scaleX(1);opacity:0;}} .k3 .eq{position:absolute;left:14%;right:14%;top:56%;height:18%;display:flex;align-items:flex-end;gap:5px;} .k3 .eq i{flex:1;background:#0B1426;border-radius:3px 3px 0 0;height:30%;animation:k3-eq 1.1s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-130ms);} .k3 .eq i:nth-child(odd){background:#FF6B5B;} @keyframes k3-eq{0%{height:18%;}100%{height:100%;}} .k3 .cta{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);white-space:nowrap;padding:10px 20px;border-radius:99px;background:#0B1426;color:#fff;font-weight:800;font-size:12px;animation:k3-cta 1.6s ease-in-out infinite;} .k3 .cta::after{content:'';position:absolute;inset:-5px;border-radius:99px;border:2px solid #0B1426;animation:k3-rip 1.6s ease-out infinite;} @keyframes k3-cta{0%,100%{transform:translateX(-50%) scale(1);}50%{transform:translateX(-50%) scale(1.06);}} @keyframes k3-rip{0%{opacity:.8;transform:scale(1);}100%{opacity:0;transform:scale(1.35);}} /* ─── responsive ─── */ @media(max-width:1050px){ .mo-on .stats-inner{grid-template-columns:repeat(2,1fr);} } @media(max-width:900px){ .mo-hero{padding:8.5rem 0 4rem;} .mo-hero .hero-grid{grid-template-columns:1fr;gap:3rem;} .mo-stage{max-width:520px;margin:0 auto;width:100%;} .mo-hero .hero-badge{left:.6rem;right:auto;bottom:0;} .mo-phones{grid-template-columns:1fr;gap:3rem;} .mo-ph:nth-child(2){margin-top:0;} } @media(max-width:560px){ .mo-on .stats{padding:2rem 1.2rem 2.6rem;} .mo-on .stats-inner{grid-template-columns:1fr;} .mo-on .stat{grid-template-columns:64px 1fr;} .mo-on .stat::before{width:64px;height:64px;} .mo-hud{gap:.35rem;} .mo-ring{padding:.35rem .4rem;gap:.35rem;} .mo-ring svg{width:22px;height:22px;} .mo-ring small{font-size:.5rem;} .mo-url{font-size:.6rem;margin:0 .3rem;} .mo-rot{min-height:3.2em;} .mo-eyebrow{font-size:.6rem;} .mo-scr{max-width:230px;} .mo-on .ctb{padding:3rem 1.4rem;} } @media(prefers-reduced-motion:reduce){ .mo-eyebrow .dot,.mo-hero .hero-badge,.sx *,.sx *::after,.sx *::before{animation:none!important;} /* static posters for the showcase phones */ .k1{background:#0B1426;}.k1 .kw4{opacity:1;color:#E8A020;}.k1 .bar{transform:none;background:#E8A020;} .k2 .mk-o{stroke-dashoffset:0;}.k2 .mk-f{opacity:1;}.k2 .wm span,.k2 .tl2{opacity:1;transform:none;} .k3 .pct{opacity:1;}.k3 .off{transform:rotate(-4deg);}.k3 .eq i:nth-child(n){height:calc(30% + var(--i)*8%);} .sx-top i::after{transform:none;} } /* ═══ /services/motion-graphics/ ═══ */ .mo-hero .crumbs{color:rgba(255,255,255,.5);}.mo-hero .crumbs a{color:rgba(255,255,255,.7);}.mo-hero .crumbs a:hover{color:#fff;} .mo-stack{position:relative;height:560px;} .mo-stack .mo-scr{position:absolute;margin:0;} .mo-stack .s1{left:50%;top:0;width:250px;max-width:none;transform:translateX(-50%);z-index:3;} .mo-stack .s2{left:4%;top:90px;width:190px;max-width:none;transform:rotate(-9deg);z-index:2;opacity:.9;animation:mo-float 7s ease-in-out infinite;} .mo-stack .s3{right:4%;top:120px;width:190px;max-width:none;transform:rotate(8deg);z-index:1;opacity:.9;animation:mo-float 6s ease-in-out -3s infinite;} .mo-web{display:grid;grid-template-columns:1fr 1.1fr;gap:3rem;align-items:center;margin-top:4rem;padding-top:3rem;border-top:1px solid rgba(255,255,255,.08);} .mo-web h3{font-size:1.25rem;font-weight:800;margin-bottom:.6rem;color:#fff;} .mo-web p{color:rgba(255,255,255,.66);font-size:.9rem;line-height:1.75;margin-bottom:.8rem;} .mo-web .mo-con{max-width:560px;width:100%;justify-self:end;} .mo-fmt-wrap{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;margin-top:2rem;} .mo-fmt{position:relative;height:380px;display:grid;place-items:center;border-radius:16px;background:var(--ink);overflow:hidden;} .mo-fmt::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:32px 32px;} .mo-fmt-box{position:relative;width:180px;height:320px;border-radius:12px;border:2px solid var(--n);background:linear-gradient(160deg,rgba(232,160,32,.25),rgba(232,160,32,.05));box-shadow:0 0 40px rgba(232,160,32,.25);animation:mo-fmt 10s var(--ez2) infinite;display:grid;place-items:center;} @keyframes mo-fmt{0%,20%{width:180px;height:320px;}25%,45%{width:270px;height:270px;}50%,70%{width:240px;height:300px;}75%,95%{width:360px;height:203px;}100%{width:180px;height:320px;}} .mo-fmt-box span{position:absolute;font-family:var(--m);font-weight:800;font-size:1.3rem;color:#fff;opacity:0;text-align:center;line-height:1.3;} .mo-fmt-box span small{display:block;font-size:.62rem;font-weight:400;color:rgba(255,255,255,.6);letter-spacing:.08em;} .mo-fmt-box span:nth-child(1){animation:mo-fl1 10s infinite;}.mo-fmt-box span:nth-child(2){animation:mo-fl2 10s infinite;} .mo-fmt-box span:nth-child(3){animation:mo-fl3 10s infinite;}.mo-fmt-box span:nth-child(4){animation:mo-fl4 10s infinite;} @keyframes mo-fl1{0%,20%{opacity:1;}23%,97%{opacity:0;}100%{opacity:1;}} @keyframes mo-fl2{0%,25%{opacity:0;}28%,45%{opacity:1;}48%,100%{opacity:0;}} @keyframes mo-fl3{0%,50%{opacity:0;}53%,70%{opacity:1;}73%,100%{opacity:0;}} @keyframes mo-fl4{0%,75%{opacity:0;}78%,95%{opacity:1;}98%,100%{opacity:0;}} .mo-fmt-list{display:flex;flex-direction:column;gap:.1rem;} .mo-fmt-list div{display:grid;grid-template-columns:70px 1fr;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--gb);font-size:.86rem;color:var(--tl);} .mo-fmt-list b{font-family:var(--m);color:var(--bg-dark);} .mo-pk .card{padding:1.8rem;display:flex;flex-direction:column;} .mo-pk .card ul{list-style:none;display:flex;flex-direction:column;gap:.45rem;margin:.9rem 0 1.2rem;flex:1;} .mo-pk .card li{display:flex;gap:.55rem;font-size:.83rem;color:var(--tl);align-items:flex-start;} .mo-pk .card li svg{flex-shrink:0;margin-top:.3rem;} .mo-pk .price{font-family:var(--m);font-size:.78rem;font-weight:700;color:var(--n);margin-bottom:.3rem;} @media(max-width:900px){ .mo-stack{height:470px;}.mo-stack .s1{width:220px;}.mo-stack .s2,.mo-stack .s3{width:150px;} .mo-web,.mo-fmt-wrap{grid-template-columns:1fr;gap:2rem;}.mo-web .mo-con{justify-self:center;} } @media(max-width:560px){.mo-fmt{height:300px;}.mo-fmt-box{animation-name:mo-fmt-s;} @keyframes mo-fmt-s{0%,20%{width:140px;height:249px;}25%,45%{width:210px;height:210px;}50%,70%{width:190px;height:237px;}75%,95%{width:280px;height:158px;}100%{width:140px;height:249px;}}} @media(prefers-reduced-motion:reduce){.mo-fmt-box,.mo-fmt-box span,.mo-stack .s2,.mo-stack .s3{animation:none!important;}.mo-fmt-box span:nth-child(1){opacity:1;}} /* ═══ sitewide: light page heroes (.hero-parent / .hero-cluster) ═══ */ .mo-on .hero-parent,.mo-on .hero-cluster{position:relative;overflow:hidden;isolation:isolate;} .mo-on .hero-parent::before,.mo-on .hero-cluster::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:linear-gradient(rgba(27,45,79,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(27,45,79,.06) 1px,transparent 1px);background-size:56px 56px; -webkit-mask-image:radial-gradient(70% 80% at 85% 20%,#000 10%,transparent 70%);mask-image:radial-gradient(70% 80% at 85% 20%,#000 10%,transparent 70%);} .mo-on .hero-parent::after,.mo-on .hero-cluster::after{content:'';position:absolute;z-index:-1;pointer-events:none;width:620px;height:620px;right:-160px;top:-220px;border-radius:50%; background:radial-gradient(circle,rgba(232,160,32,.22),rgba(232,160,32,0) 65%);animation:mo-drift 16s ease-in-out infinite alternate;} @keyframes mo-drift{0%{transform:translate(0,0) scale(1);}50%{transform:translate(-120px,60px) scale(1.12);}100%{transform:translate(-40px,140px) scale(.95);}} .mo-on .hero-parent h1 .h,.mo-on .hero-cluster h1 .h{background:linear-gradient(90deg,#E8A020,#FFD27A) 0 94%/0% .08em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:mo-ul 1.1s var(--ez) .45s forwards;} @keyframes mo-ul{to{background-size:100% .08em;}} .mo-on .hero-parent-img{animation:mo-pan 22s ease-in-out infinite alternate;} @keyframes mo-pan{from{object-position:50% 25%;}to{object-position:50% 75%;}} .mo-on .hero-corner-badge{animation:mo-float 5s ease-in-out infinite;} .mo-on .crumbs a{transition:color .2s;} .mo-on .fit-item{transition:transform .4s var(--ez),border-color .3s;} .mo-on .fit-item:hover{transform:translateX(6px);border-color:rgba(232,160,32,.5);} .mo-on .fit-item svg path{stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .8s var(--ez) .2s;} .mo-on .fit-item.mo-in svg path{stroke-dashoffset:0;} @media(prefers-reduced-motion:reduce){.hero-parent::after,.hero-cluster::after,.hero-parent-img,.hero-corner-badge{animation:none!important;}} /* ═══ demo-brand phones (invented brands: Hearthmoor Bakehouse, Pellora Physio, Rivetspin Studio) ═══ */ .sx .ph{position:absolute;inset:0;background:#111 center/cover no-repeat;} .k1 .ph{opacity:.42;mix-blend-mode:multiply;} .k1 .kw4{font-size:30px;letter-spacing:-.04em;} .k1 .kw4 small{font-size:9px;letter-spacing:.16em;} .sx-who b{background:#0B1426 center/cover no-repeat;} .sx-who b::after{display:none;} .sx-who b{padding:0;border:2px solid transparent;background-clip:padding-box;box-shadow:0 0 0 2px #E8A020;} .sx-concept{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:6;white-space:nowrap;font-family:var(--m);font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.85);background:rgba(0,0,0,.45);padding:3px 8px;border-radius:99px;backdrop-filter:blur(4px);} /* Pellora: teal logo reveal over a dimmed clinic photo */ .k2{background:#06121a;} .k2 .ph{opacity:.28;filter:blur(2px) saturate(.6);transform:scale(1.08);} .k2::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(20,184,166,.28),rgba(6,18,26,.85) 70%);z-index:0;} .k2>*:not(.ph){position:absolute;z-index:1;} .k2 .mk-o{stroke:#2DD4BF;} .k2 .mk-f{fill:none;stroke:#2DD4BF;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;} .k2 .burst i{background:#99F6E4;} .k2 .ring{border-color:rgba(45,212,191,.6);} .k2 .wm{font-family:var(--f);font-size:26px;letter-spacing:-.03em;} /* Rivetspin: red neon promo over the studio photo */ .k3{background:#0a0506;color:#fff;} .k3 .ph{opacity:.7;} .k3::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,5,6,.2),rgba(10,5,6,.85) 70%);} .k3>*:not(.ph){z-index:1;} .k3 .blob{background:#EF4444;opacity:.55;mix-blend-mode:screen;} .k3 .pct{color:#fff;text-shadow:0 6px 30px rgba(239,68,68,.6);} .k3 .off{background:#EF4444;color:#fff;} .k3 .eq i{background:#fff;}.k3 .eq i:nth-child(odd){background:#EF4444;} .k3 .cta{background:#fff;color:#0a0506;}.k3 .cta::after{border-color:#fff;} /* ═══ /portfolio/ ═══ */ .pf-hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:3rem;align-items:center;} .pf-hero{padding-bottom:3.5rem;} .pf-wall{position:relative;height:470px;perspective:1600px;} .pf-frame{background:#fff;border:1px solid var(--gb);border-radius:12px;overflow:hidden;box-shadow:0 24px 60px -24px rgba(27,45,79,.35);} .pf-frame .case-bar{padding:.45rem .7rem;} .pf-scroll{position:relative;height:var(--fh,300px);overflow:hidden;background:var(--bg-alt);} .pf-scroll img{width:100%;height:auto;display:block;} .mo-on .pf-scroll img{animation:pf-scroll var(--ft,34s) ease-in-out infinite alternate;animation-delay:var(--fd,0s);} @keyframes pf-scroll{0%,6%{transform:translateY(0);}94%,100%{transform:translateY(calc(-100% + var(--fh,300px)));}} .pf-wall .pf-frame{position:absolute;width:46%;} .pf-wall .w0{left:0;top:30px;--fh:300px;--ft:30s;transform:rotateY(10deg) rotateX(2deg);z-index:2;} .pf-wall .w1{left:27%;top:0;--fh:340px;--ft:36s;--fd:-6s;z-index:4;width:48%;} .pf-wall .w2{right:0;top:60px;--fh:300px;--ft:33s;--fd:-12s;transform:rotateY(-10deg) rotateX(2deg);z-index:3;} .pf-wall .w3{left:14%;top:250px;--fh:170px;--ft:28s;--fd:-3s;z-index:5;width:40%;box-shadow:0 30px 70px -20px rgba(27,45,79,.45);} .mo-on .pf-wall .pf-frame{animation:mo-float 7s ease-in-out infinite;} .mo-on .pf-wall .w1{animation-duration:8s;animation-delay:-2s;}.mo-on .pf-wall .w2{animation-duration:6.5s;animation-delay:-4s;}.mo-on .pf-wall .w3{animation-duration:9s;animation-delay:-1s;} .pf-proof{background:var(--ink);color:#fff;padding:2.6rem 2.5rem 2rem;} .pf-proof-in{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;} .pf-proof-in>div{padding:1.1rem 1.2rem;border-radius:14px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.08);} .pf-proof b{display:block;font-family:var(--m);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;color:var(--n);line-height:1.1;} .pf-proof span{display:block;font-size:.78rem;color:rgba(255,255,255,.68);margin-top:.3rem;line-height:1.45;} .pf-proof-note{max-width:1100px;margin:1rem auto 0;font-size:.66rem;color:rgba(255,255,255,.4);font-family:var(--m);} .pf-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:.5rem 0 2.2rem;} .pf-tabs button{font-family:var(--f);font-weight:700;font-size:.8rem;padding:.55rem 1.1rem;border-radius:999px;border:1px solid var(--gb);background:#fff;color:var(--tl);cursor:pointer;transition:all .25s var(--ez);} .pf-tabs button:hover{border-color:var(--n);color:var(--bg-dark);} .pf-tabs button[aria-selected="true"]{background:var(--bg-dark);border-color:var(--bg-dark);color:#fff;} .pf-group.pf-hide{display:none;} .pf-case{display:grid;grid-template-columns:1.05fr 1fr;gap:3rem;align-items:start;margin:3rem 0 4rem;} .pf-case.pf-flip .pf-case-media{order:2;} .pf-case-media{position:sticky;top:120px;} .pf-case-media .pf-frame{--fh:520px;--ft:40s;} .pf-case-bd.case{border:0;box-shadow:none;background:transparent;border-radius:0;overflow:visible;} .pf-case-bd h3{font-size:clamp(1.15rem,2vw,1.4rem);font-weight:800;color:var(--bg-dark);margin:.2rem 0 1rem;line-height:1.25;} .pf-case-bd>p{font-size:.88rem;color:var(--tl);line-height:1.75;margin-bottom:.9rem;} .pf-case-bd .pf-k{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--n);margin:1rem 0 .3rem;} .pf-ms{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin:.4rem 0 .5rem;} .pf-ms>div{padding:.75rem .7rem;border-radius:10px;background:var(--bg-alt);border:1px solid var(--gb);} .pf-ms .mv{font-size:1.15rem;}.pf-ms .ml{font-size:.66rem;line-height:1.35;margin-top:.15rem;} .pf-case-bd .pf-note{font-size:.68rem;color:var(--td);font-family:var(--m);margin:.4rem 0 1rem;line-height:1.5;} .pf-rail{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:2.4rem max(2.5rem,calc((100vw - 1100px)/2 + 2.5rem)) 1.5rem;scrollbar-width:thin;scrollbar-color:rgba(232,160,32,.5) transparent;} .pf-vid{flex:0 0 220px;scroll-snap-align:start;margin:0;} .pf-phone{position:relative;aspect-ratio:9/16;border-radius:28px;overflow:hidden;background:#000;border:6px solid #1c2640;box-shadow:0 30px 60px -28px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08);transition:transform .5s var(--ez);} .pf-phone video{width:100%;height:100%;object-fit:cover;display:block;} .pf-vid:hover .pf-phone{transform:translateY(-6px);} .pf-vid figcaption{margin-top:.8rem;text-align:center;} .pf-vid figcaption b{display:block;font-size:.66rem;font-family:var(--m);letter-spacing:.1em;text-transform:uppercase;color:var(--n);} .pf-vid figcaption span{display:block;font-size:.84rem;font-weight:700;color:#fff;margin-top:.15rem;} .pf-flow{background:#fff;border:1px solid var(--gb);border-radius:16px;padding:1.8rem;margin-top:1.4rem;} .pf-flow-hd{display:grid;grid-template-columns:1fr 1.3fr;gap:2rem;align-items:start;margin-bottom:1.6rem;} .pf-flow-hd h3{font-size:1.1rem;font-weight:800;color:var(--bg-dark);margin-top:.2rem;} .pf-flow-hd p{font-size:.86rem;color:var(--tl);line-height:1.7;} .pf-chain{--cyc:calc(var(--c) * .7s + 1.6s);display:flex;align-items:flex-start;} .pf-node{flex:0 0 auto;width:118px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;position:relative;} .pf-node svg{width:52px;height:52px;padding:14px;border-radius:14px;background:var(--bg-alt);border:1px solid var(--gb);color:var(--bg-dark);box-sizing:border-box;} .pf-node span{font-size:.7rem;font-weight:700;color:var(--tl);line-height:1.3;} .mo-on .pf-flow.vi .pf-node svg{animation:pf-lit var(--cyc) ease infinite;animation-delay:calc(var(--n) * .7s);} @keyframes pf-lit{0%{background:var(--bg-alt);box-shadow:none;border-color:var(--gb);}6%,30%{background:var(--n);border-color:var(--n);box-shadow:0 0 0 6px rgba(232,160,32,.18),0 10px 24px -8px rgba(232,160,32,.6);}45%,100%{background:var(--bg-alt);box-shadow:none;border-color:var(--gb);}} .pf-wire{flex:1;min-width:18px;height:2px;margin-top:25px;position:relative;background:repeating-linear-gradient(90deg,var(--gb) 0 6px,transparent 6px 11px);} .pf-wire::after{content:'';position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--n);box-shadow:0 0 10px rgba(232,160,32,.8);opacity:0;} .mo-on .pf-flow.vi .pf-wire::after{animation:pf-pulse var(--cyc) linear infinite;animation-delay:calc(var(--w) * .7s + .35s);} @keyframes pf-pulse{0%{left:0;opacity:0;}3%{opacity:1;}20%{left:calc(100% - 8px);opacity:1;}24%,100%{left:calc(100% - 8px);opacity:0;}} @media(max-width:900px){ .pf-hero-grid{grid-template-columns:1fr;} .pf-wall{height:380px;max-width:560px;} .pf-case{grid-template-columns:1fr;gap:1.6rem;margin:2rem 0 3rem;} .pf-case.pf-flip .pf-case-media{order:0;} .pf-case-media{position:relative;top:0;} .pf-case-media .pf-frame{--fh:340px;} .pf-proof-in{grid-template-columns:repeat(2,1fr);} .pf-flow-hd{grid-template-columns:1fr;gap:.6rem;} .pf-chain{flex-direction:column;align-items:flex-start;} .pf-node{flex-direction:row;width:auto;text-align:left;gap:.9rem;} .pf-wire{flex:0 0 22px;width:2px;min-width:0;height:22px;margin:0 0 0 25px;background:repeating-linear-gradient(180deg,var(--gb) 0 5px,transparent 5px 9px);} .pf-wire::after{display:none;} } @media(max-width:560px){ .pf-wall{height:320px;}.pf-wall .w2,.pf-wall .w3{display:none;} .pf-wall .w0{width:58%;--fh:250px;}.pf-wall .w1{left:36%;width:62%;--fh:290px;} .pf-ms{grid-template-columns:repeat(2,1fr);} .pf-proof{padding:2rem 1.2rem 1.6rem;} .pf-vid{flex-basis:190px;} .pf-rail{padding:2rem 1.2rem 1.2rem;} } @media(prefers-reduced-motion:reduce){.pf-scroll img,.pf-wall .pf-frame,.pf-node svg,.pf-wire::after{animation:none!important;}} /* ═══ homepage: real-site wall in the hero, build demo beside the process ═══ */ .mo-stage-wall{perspective:1600px;} .mo-stage-wall .pf-wall{display:block;} .mo-hero .pf-frame{border-color:rgba(255,255,255,.12);box-shadow:0 40px 80px -30px rgba(0,0,0,.75);} .mo-hero .pf-frame .case-bar{background:#f4f2ee;} .mo-stage-wall .hero-badge{z-index:6;} .mo-proc{display:grid;grid-template-columns:1fr minmax(320px,.8fr);gap:3rem;align-items:start;margin-top:2rem;} .mo-proc .tl{max-width:none;margin-top:0!important;} .mo-proc-vis{position:sticky;top:130px;background:var(--ink);border-radius:22px;padding:1.3rem 1.3rem 1.1rem;box-shadow:0 40px 80px -40px rgba(11,20,38,.6);} .mo-proc-cap{display:flex;align-items:center;gap:.5rem;font-family:var(--m);font-size:.66rem;letter-spacing:.06em;color:rgba(255,255,255,.75);margin-bottom:.9rem;} .mo-proc-cap .dot{width:7px;height:7px;border-radius:50%;background:#28CA41;box-shadow:0 0 0 0 rgba(40,202,65,.6);animation:mo-ping 2.2s infinite;} .mo-proc-vis p{font-size:.78rem;line-height:1.6;color:rgba(255,255,255,.6);margin-top:.9rem;} @media(max-width:900px){ .mo-proc{grid-template-columns:1fr;gap:1.6rem;} .mo-proc-vis{position:relative;top:0;order:-1;} } /* ═══ homepage: lead CTA band (replaces the industry-stats band) ═══ */ .mo-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} .mo-lead{position:relative;overflow:hidden;isolation:isolate;background:var(--ink);color:#fff;padding:4.2rem 0 4.6rem;} .mo-lead::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(55% 80% at 85% 40%,rgba(232,160,32,.2),transparent 70%),radial-gradient(40% 60% at 5% 100%,rgba(124,158,232,.12),transparent 70%);} .mo-lead::after{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(70% 90% at 80% 50%,#000,transparent 75%);mask-image:radial-gradient(70% 90% at 80% 50%,#000,transparent 75%);} .mo-lead-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:3.5rem;align-items:center;} .mo-lead-eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--m);font-size:.68rem;color:rgba(255,255,255,.8);padding:.4rem .95rem;border-radius:999px;border:1px solid rgba(40,202,65,.35);background:rgba(40,202,65,.08);margin-bottom:1.3rem;} .mo-lead-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:#28CA41;animation:mo-ping-g 2.2s infinite;} @keyframes mo-ping-g{0%{box-shadow:0 0 0 0 rgba(40,202,65,.55);}70%{box-shadow:0 0 0 10px rgba(40,202,65,0);}100%{box-shadow:0 0 0 0 rgba(40,202,65,0);}} .mo-lead-h{font-weight:800;font-size:clamp(1.7rem,3.8vw,2.7rem);line-height:1.08;letter-spacing:-.035em;color:#fff;margin-bottom:1rem;} .mo-lead-p{font-size:1rem;line-height:1.75;color:rgba(255,255,255,.72);max-width:540px;margin-bottom:1.6rem;} .mo-lead-form{display:flex;gap:.5rem;max-width:560px;padding:.45rem;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 50px -24px rgba(232,160,32,.45);transition:border-color .3s,box-shadow .3s;} .mo-lead-form:focus-within{border-color:rgba(232,160,32,.7);box-shadow:0 0 0 4px rgba(232,160,32,.15),0 20px 50px -24px rgba(232,160,32,.6);} .mo-lead-form input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;font:600 1rem var(--f);padding:.7rem .8rem;} .mo-lead-form input::placeholder{color:rgba(255,255,255,.4);} .mo-lead-form .btn{flex-shrink:0;padding:.85rem 1.3rem;} .mo-on .mo-lead-form .btn{animation:mo-cta-glow 2.8s ease-in-out infinite;} @keyframes mo-cta-glow{0%,100%{box-shadow:0 0 0 0 rgba(232,160,32,.0),0 8px 22px -8px rgba(232,160,32,.6);}50%{box-shadow:0 0 0 6px rgba(232,160,32,.18),0 8px 26px -6px rgba(232,160,32,.8);}} .mo-lead-ticks{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin:1.1rem 0 .9rem;} .mo-lead-ticks span{display:flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;color:rgba(255,255,255,.78);} .mo-lead-alt{font-size:.8rem;font-weight:700;color:var(--n);} .mo-lead-alt:hover{text-decoration:underline;} .mo-lead-cards{display:flex;flex-direction:column;gap:.9rem;} .mo-lead-card{position:relative;overflow:hidden;display:flex;gap:1rem;align-items:flex-start;padding:1.2rem 1.3rem;border-radius:16px;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);} .mo-lead-card:nth-child(2){margin-left:1.6rem;}.mo-lead-card:nth-child(3){margin-left:3.2rem;} .mo-lead-ic{flex-shrink:0;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(232,160,32,.14);color:var(--n);} .mo-lead-card h3{font-size:1.05rem;font-weight:800;color:#fff;margin-bottom:.2rem;} .mo-lead-card p{font-size:.82rem;line-height:1.55;color:rgba(255,255,255,.66);} .mo-lead-up{position:absolute;right:1rem;top:1rem;width:18px;height:18px;opacity:0;} .mo-lead-up::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328CA41' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E") center/contain no-repeat;} .mo-on .mo-lead-card.vi .mo-lead-up{animation:mo-up 3.2s var(--ez) infinite;} .mo-on .mo-lead-card.vi:nth-child(2) .mo-lead-up{animation-delay:.6s;}.mo-on .mo-lead-card.vi:nth-child(3) .mo-lead-up{animation-delay:1.2s;} @keyframes mo-up{0%{opacity:0;transform:translate(-6px,6px);}20%,70%{opacity:1;transform:none;}100%{opacity:0;transform:translate(4px,-4px);}} .mo-on .mo-lead-card.vi::after{content:'';position:absolute;left:0;top:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,rgba(232,160,32,.12),transparent);animation:mo-sweep 4s ease-in-out infinite;} .mo-on .mo-lead-card.vi:nth-child(2)::after{animation-delay:.8s;}.mo-on .mo-lead-card.vi:nth-child(3)::after{animation-delay:1.6s;} @keyframes mo-sweep{0%{transform:translateX(-100%);}60%,100%{transform:translateX(260%);}} /* ═══ homepage: motion showcase with the overlapping phone stack ═══ */ .mo-show-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;} .mo-show-list{display:flex;flex-direction:column;gap:1.1rem;margin:1.6rem 0 .4rem;} .mo-show-list .mo-ph{flex-direction:row;align-items:flex-start;text-align:left;gap:1rem;margin:0;} .mo-show-list .mo-ph:nth-child(2){margin-top:0;} .mo-ph-n{flex-shrink:0;font-family:var(--m);font-weight:800;font-size:.8rem;color:var(--n);border:1px solid rgba(232,160,32,.4);border-radius:8px;padding:.3rem .45rem;margin-top:.1rem;} .mo-show-list .mo-ph h3{margin-bottom:.2rem;} .mo-show-list .mo-ph p{max-width:none;} .mo-show-grid .mo-show-cta{justify-content:flex-start;margin-top:1.6rem;} @media(max-width:900px){ .mo-lead-grid,.mo-show-grid{grid-template-columns:1fr;gap:2.2rem;} .mo-lead-card:nth-child(n){margin-left:0;} } @media(max-width:560px){ .mo-lead{padding:3rem 0 3.4rem;} .mo-lead-form{flex-direction:column;} .mo-lead-form .btn{justify-content:center;} } @media(prefers-reduced-motion:reduce){.mo-lead-eyebrow .dot,.mo-lead-up,.mo-lead-card::after{animation:none!important;}}