:root{
  --navy:#071e4f;
  --navy-2:#0b3b78;
  --blue:#0b5fd7;
  --green:#13de80;
  --green-2:#02b887;
  --mint:#e9fff8;
  --mint-2:#cffff0;
  --cyan:#13cbd4;
  --ink:#081b46;
  --muted:#58709a;
  --line:#dce9f5;
  --white:#fff;
  --shadow:0 22px 65px rgba(31,77,116,.12);
  --soft-shadow:0 10px 30px rgba(17,63,96,.09);
  --radius-xl:32px;
  --radius-lg:24px;
  --radius-md:18px;
  --container:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Manrope,Inter,"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:#f9fffe;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,a{touch-action:manipulation}
.container{width:min(calc(100% - 44px),var(--container));margin-inline:auto}
.page-shell{overflow:hidden;background:
  radial-gradient(circle at 10% 15%,rgba(52,236,199,.16),transparent 18%),
  radial-gradient(circle at 92% 8%,rgba(26,215,117,.16),transparent 20%),
  linear-gradient(#fbfffe,#fff)}

.site-header{position:relative;z-index:30;padding:18px 0 8px;background:rgba(255,255,255,.72);backdrop-filter:blur(18px)}
.header-inner{display:grid;grid-template-columns:240px 1fr auto;align-items:center;gap:24px}
.brand img{width:215px;height:auto}
.desktop-nav{display:flex;justify-content:center;gap:34px;font-size:14px;font-weight:750;color:#203e70}
.desktop-nav a,.footer-nav a{transition:color .2s ease,transform .2s ease}
.desktop-nav a:hover,.footer-nav a:hover{color:var(--green-2)}
.header-actions{display:flex;align-items:center;gap:10px}
.chrome-chip{height:42px;display:inline-flex;align-items:center;gap:9px;padding:0 16px;border-radius:14px;background:#f4fbff;border:1px solid #dbeaf4;box-shadow:0 5px 14px rgba(27,63,101,.05);font-size:12px;font-weight:800;white-space:nowrap}
.chrome-dot,.chrome-mark{width:19px;height:19px;border-radius:50%;display:inline-block;background:conic-gradient(#e64b36 0 33%,#f6ca43 0 66%,#1ab66a 0);position:relative;box-shadow:inset 0 0 0 2px rgba(255,255,255,.75)}
.chrome-dot:after,.chrome-mark:after{content:"";position:absolute;inset:5px;border-radius:50%;background:#3489ff;border:2px solid #fff}
.btn{border:0;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 26px;border-radius:16px;font-size:15px;font-weight:900;letter-spacing:-.01em;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn-primary{color:#fff;background:linear-gradient(135deg,#06b976,#17e37d 55%,#06b881);box-shadow:0 12px 26px rgba(0,196,116,.28),inset 0 1px 0 rgba(255,255,255,.45)}
.btn-primary:hover{box-shadow:0 15px 30px rgba(0,196,116,.35);filter:saturate(1.05)}
.btn-small{min-height:42px;padding:0 17px;font-size:13px}
.menu-toggle,.mobile-nav{display:none}

.hero{position:relative;padding:20px 0 12px;min-height:580px;background:
  radial-gradient(circle at 5% 50%,rgba(33,229,185,.17),transparent 28%),
  radial-gradient(circle at 96% 44%,rgba(49,236,153,.18),transparent 28%)}
.hero:before,.features:before{content:"";position:absolute;left:-11%;right:-11%;bottom:0;height:220px;background:linear-gradient(135deg,rgba(153,255,230,.30),rgba(128,231,255,.10) 45%,rgba(112,247,181,.23));border-radius:50% 50% 0 0/34% 34% 0 0;transform:translateY(57%)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:31% 31% 38%;align-items:center;min-height:520px}
.hero-mascot-wrap,.hero-product-wrap{position:relative;align-self:end}
.hero-mascot{width:100%;max-height:510px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 24px 36px rgba(0,77,74,.14))}
.hero-product{width:116%;max-width:none;margin-left:-8%;filter:drop-shadow(0 25px 35px rgba(23,74,119,.13))}
.hero-copy{padding:0 10px 8px 18px;align-self:center}
.eyebrow{margin:0 0 12px;text-transform:uppercase;letter-spacing:.13em;color:#00966d;font-weight:900;font-size:12px}
.hero h1{font-size:64px;line-height:.97;letter-spacing:-.055em;margin:0 0 22px;color:var(--navy);font-weight:950}
.hero h1 span{background:linear-gradient(90deg,#00a988,#1dcf8f);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lede{font-size:18px;line-height:1.5;color:#25436f;margin:0 0 24px;max-width:440px}
.hero-cta-row{display:flex;gap:12px;align-items:center}
.hero-microcopy{margin-top:12px;display:flex;align-items:center;gap:9px;color:#61779b;font-weight:700;font-size:12px;flex-wrap:wrap}
.hero-microcopy i{width:4px;height:4px;background:#9bb0c9;border-radius:50%}
.hand-note{font-family:"Segoe Print","Comic Sans MS",cursive;font-weight:700;font-style:italic;color:#173f95;transform:rotate(-8deg);line-height:1.05;position:absolute;z-index:4;text-shadow:0 1px 0 rgba(255,255,255,.75)}
.note-left{left:-28px;top:20px;font-size:22px}
.note-good{right:-16px;bottom:58px;font-size:18px;transform:rotate(-9deg)}
.note-save{left:-20px;top:10px;font-size:18px;transform:rotate(-8deg)}
.note-adventure{right:-36px;bottom:76px;font-size:16px;transform:rotate(-8deg)}

.benefits{position:relative;z-index:4;padding:0 0 20px}
.benefit-bar{display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.93);border:1px solid #e3edf5;border-radius:20px;box-shadow:var(--soft-shadow);overflow:hidden}
.benefit-item{display:flex;align-items:center;gap:13px;padding:18px 22px;min-width:0}
.benefit-item:not(:last-child){border-right:1px solid #e6edf4}
.benefit-icon{width:46px;height:46px;flex:0 0 46px;border-radius:14px;background:linear-gradient(145deg,#eafff7,#c9ffea);display:grid;place-items:center;font-weight:950;color:#05a874;font-size:18px;box-shadow:inset 0 0 0 1px rgba(21,210,139,.08)}
.benefit-item strong{display:block;font-size:14px;margin-bottom:3px}
.benefit-item span{display:block;color:#6a7e9e;font-size:12px;line-height:1.35}

.section{position:relative;padding:48px 0}
.features{background:
  radial-gradient(circle at 8% 20%,rgba(129,243,218,.16),transparent 22%),
  radial-gradient(circle at 92% 16%,rgba(100,218,255,.15),transparent 25%),
  linear-gradient(180deg,#fff,#fbfffe)}
.section-head{position:relative;z-index:2;max-width:760px;margin:0 auto 28px}
.section-head.centered{text-align:center}
.section-head h2,.why-card h2,.premium-content h2,.install-copy h2{font-size:34px;line-height:1.06;letter-spacing:-.04em;margin:0 0 10px;color:var(--navy);font-weight:950}
.section-head p:not(.eyebrow){color:#5e7395;font-size:15px;line-height:1.55;margin:0}
.section-decoration{position:absolute;z-index:1}
.play-deco{left:8%;top:58px;width:100px;transform:rotate(-9deg);opacity:.75}
.feature-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feature-card{background:rgba(255,255,255,.88);border:1px solid #dce8f4;border-radius:20px;padding:24px 24px 26px;min-height:205px;box-shadow:0 13px 34px rgba(43,84,124,.06);transition:transform .25s ease,box-shadow .25s ease}
.feature-card:hover{transform:translateY(-5px);box-shadow:0 20px 45px rgba(43,84,124,.10)}
.feature-icon{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;font-size:28px;font-weight:950;margin-bottom:20px}
.feature-icon.blue{background:linear-gradient(145deg,#eff8ff,#d7eaff);color:#0b5fd7;box-shadow:inset 0 0 0 1px #d6e6f8}
.feature-card h3{font-size:17px;margin:0 0 8px;letter-spacing:-.02em}
.feature-card p{margin:0;color:#607596;font-size:14px;line-height:1.5}

.premium-section{padding:16px 0 12px}
.premium-card{position:relative;min-height:230px;border-radius:28px;overflow:hidden;box-shadow:0 24px 55px rgba(5,60,94,.18);border:1px solid rgba(96,255,202,.46)}
.premium-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.premium-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,38,83,.98) 0%,rgba(4,52,94,.91) 44%,rgba(4,72,92,.24) 76%,rgba(0,0,0,0) 100%)}
.premium-content{position:relative;z-index:2;color:white;padding:27px 42px 28px;max-width:68%}
.premium-kicker{display:inline-flex;background:#b9ffe8;color:#006950;font-weight:950;text-transform:uppercase;letter-spacing:.07em;padding:8px 15px;border-radius:999px;font-size:12px;margin-bottom:12px}
.premium-content h2{color:#fff;font-size:30px;margin-bottom:8px}
.premium-content>p{font-size:15px;color:#e5f6ff;line-height:1.4;margin:0 0 19px;max-width:630px}
.premium-features{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.premium-features div{display:grid;grid-template-columns:42px 1fr;align-items:center;gap:10px;min-width:0}
.premium-features strong{width:42px;height:42px;border-radius:12px;background:rgba(234,255,247,.94);color:#04715d;display:grid;place-items:center;font-size:18px}
.premium-features span{font-size:11px;line-height:1.25;color:#ecffff;font-weight:750}
.btn-premium{position:absolute;z-index:3;right:32px;bottom:26px;min-height:46px;padding:0 22px;background:linear-gradient(135deg,#8affba,#31ec91);color:#053c4b;box-shadow:0 10px 24px rgba(43,255,150,.28)}

.proof{padding-top:24px;padding-bottom:26px}
.proof-grid{display:grid;grid-template-columns:1fr 1.15fr .92fr;gap:16px;align-items:stretch}
.why-card,.compare-card,.story-card{background:#fff;border:1px solid #dce9f5;border-radius:22px;box-shadow:var(--soft-shadow);padding:24px}
.why-card h2{font-size:21px;line-height:1.18;margin-bottom:15px}
.check-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.check-list li{position:relative;padding-left:29px;color:#425d83;font-size:13px;line-height:1.35;font-weight:700}
.check-list li:before{content:"✓";position:absolute;left:0;top:-1px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#0ed47f;color:#fff;font-weight:950;font-size:12px}
.compare-card{padding:0;overflow:hidden}
.compare-head{display:grid;grid-template-columns:1fr 90px;align-items:center;padding:13px 18px;background:#f7fbff;border-bottom:1px solid #dfe9f2;font-size:12px}
.compare-head strong img{width:105px}
.compare-head span{text-align:center;font-weight:900;color:#576d90}
.compare-row{display:grid;grid-template-columns:1fr 44px 88px;align-items:center;min-height:38px;padding:0 14px;border-bottom:1px solid #edf1f5;font-size:12px;color:#405b80}
.compare-row:last-child{border-bottom:0}
.compare-row b{text-align:center;font-size:17px}.compare-row em{font-style:normal;text-align:center;color:#7e90aa;font-size:11px}
.yes{color:#09be74}.roadmap{color:#f0a515;font-size:22px!important}
.story-card{position:relative;text-align:center;padding:22px 24px 18px;overflow:hidden;background:linear-gradient(145deg,#fff,#f6fffc)}
.quote-mark{font-size:45px;color:#2db6ff;font-weight:900;line-height:.65}
.story-card h3{font-size:19px;line-height:1.25;margin:5px auto 9px;max-width:260px}
.story-card>p{color:#5f7698;font-size:13px;line-height:1.45;margin:0 auto 16px;max-width:290px}
.story-person{display:flex;align-items:center;justify-content:center;gap:10px;text-align:left}
.story-person img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 4px 12px rgba(30,73,111,.12)}
.story-person strong{display:block;font-size:12px}.story-person span{display:block;color:#7085a3;font-size:10px;margin-top:2px}
.story-note{right:4px;bottom:6px;font-size:14px;transform:rotate(-8deg)}

.install{padding:6px 0 18px}
.install-card{position:relative;display:grid;grid-template-columns:94px 1fr auto;align-items:center;gap:20px;min-height:112px;padding:14px 24px;border-radius:24px;border:1px solid #d7eaf4;background:linear-gradient(90deg,#edfff9,#f6fdff 55%,#eafff5);box-shadow:var(--soft-shadow);overflow:hidden}
.install-card:before{content:"";position:absolute;inset:auto -5% -55% 25%;height:140px;background:radial-gradient(ellipse at center,rgba(46,238,166,.18),transparent 70%)}
.install-mascot{width:112px;position:relative;z-index:1;margin-left:-10px;margin-bottom:-30px;align-self:end}
.install-copy,.install-action{position:relative;z-index:2}.install-copy h2{font-size:23px;margin-bottom:5px}.install-copy p{margin:0;color:#607697;font-size:13px}
.install-action{text-align:center}.install-action .btn{min-width:215px}.install-action>span{display:block;margin-top:7px;color:#627a9c;font-size:10px;font-weight:750}

.site-footer{background:linear-gradient(135deg,#062c64,#05234f 64%,#06444f);color:#fff;padding:26px 0 20px;position:relative;overflow:hidden}
.site-footer:after{content:"";position:absolute;left:25%;right:-15%;bottom:-130px;height:220px;border-radius:50%;background:linear-gradient(90deg,rgba(14,169,184,.22),rgba(18,214,124,.32));transform:rotate(-4deg)}
.footer-inner{position:relative;z-index:2;display:grid;grid-template-columns:240px 1fr auto;gap:28px;align-items:center}
.footer-brand img{width:180px;filter:brightness(0) invert(1)}
.footer-brand p{font-size:11px;color:#b8cbea;margin:6px 0 0}
.footer-nav{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;color:#d8e4f5;font-size:11px;font-weight:750}
.footer-note{font-family:"Segoe Print","Comic Sans MS",cursive;font-style:italic;font-size:14px;color:#e5f5ff;transform:rotate(-3deg);white-space:nowrap}
.copyright{position:relative;z-index:2;color:#a8beda;font-size:10px;margin-top:18px}

.toast{position:fixed;z-index:100;right:22px;bottom:22px;max-width:350px;padding:15px 17px;border-radius:16px;background:#071e4f;color:#fff;box-shadow:0 18px 44px rgba(0,0,0,.24);transform:translateY(130%);opacity:0;transition:.3s ease;pointer-events:none}
.toast.show{transform:translateY(0);opacity:1}.toast strong,.toast span{display:block}.toast strong{font-size:13px;margin-bottom:4px}.toast span{font-size:11px;color:#c8d8ee;line-height:1.35}

@media (max-width:1050px){
  .header-inner{grid-template-columns:210px 1fr auto}.brand img{width:190px}.chrome-chip{display:none}
  .hero-grid{grid-template-columns:30% 32% 38%}.hero h1{font-size:54px}.hero-lede{font-size:16px}
  .hand-note{display:none}.premium-content{max-width:74%;padding-left:30px}.proof-grid{grid-template-columns:1fr 1.12fr}.story-card{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;text-align:left;gap:16px}.story-card>p{margin:0}.story-person{justify-content:flex-start}.story-note{display:none}
}

@media (max-width:820px){
  .container{width:min(calc(100% - 28px),var(--container))}
  .header-inner{grid-template-columns:1fr auto}.desktop-nav{display:none}.brand img{width:180px}.header-actions .btn-small{display:none}.menu-toggle{display:inline-grid;width:42px;height:42px;border:1px solid #dce9f5;border-radius:13px;background:#fff;padding:10px;gap:4px}.menu-toggle span{display:block;height:2px;background:var(--navy);border-radius:99px}.mobile-nav{display:grid;position:absolute;left:14px;right:14px;top:72px;background:#fff;border:1px solid #dce9f5;border-radius:18px;box-shadow:var(--shadow);padding:10px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:.2s ease}.mobile-nav.open{opacity:1;transform:none;pointer-events:auto}.mobile-nav a{padding:12px 14px;border-radius:12px;font-weight:800;color:#29466f}.mobile-nav a:hover{background:#f0fff9}
  .hero{padding-top:12px}.hero-grid{grid-template-columns:1fr 1fr}.hero-copy{grid-column:1/-1;grid-row:1;text-align:center;padding:28px 8% 6px}.hero-copy .eyebrow{text-align:center}.hero h1{font-size:58px}.hero-lede{margin-inline:auto}.hero-cta-row{justify-content:center}.hero-microcopy{justify-content:center}.hero-mascot-wrap{grid-column:1;grid-row:2}.hero-product-wrap{grid-column:2;grid-row:2}.hero-product{width:120%;margin-left:-18%}
  .benefit-bar{grid-template-columns:1fr 1fr}.benefit-item:nth-child(2){border-right:0}.benefit-item:nth-child(-n+2){border-bottom:1px solid #e6edf4}
  .feature-grid{grid-template-columns:1fr 1fr}.play-deco{display:none}
  .premium-card{min-height:360px}.premium-bg{object-position:68% center}.premium-overlay{background:linear-gradient(90deg,rgba(3,38,83,.98) 0%,rgba(4,52,94,.91) 56%,rgba(4,72,92,.26) 82%,transparent 100%)}.premium-content{max-width:82%;padding:28px}.premium-features{grid-template-columns:1fr 1fr;max-width:520px}.btn-premium{left:28px;right:auto;bottom:22px}
  .proof-grid{grid-template-columns:1fr}.story-card{grid-column:auto;display:block;text-align:center}.story-card>p{margin:0 auto 16px}.story-person{justify-content:center}.install-card{grid-template-columns:74px 1fr}.install-action{grid-column:1/-1;padding-bottom:4px}.footer-inner{grid-template-columns:1fr;text-align:center}.footer-brand img{margin:auto}.footer-nav{order:3}.footer-note{white-space:normal}
}

@media (max-width:560px){
  .site-header{padding-top:10px}.brand img{width:155px}.hero-grid{display:block}.hero-copy{padding:24px 0 12px}.hero h1{font-size:47px}.hero-lede{font-size:15px}.hero-mascot-wrap{width:72%;margin:0 auto -12px}.hero-product-wrap{width:100%;margin:0 auto}.hero-product{width:112%;margin-left:-6%}.hero-microcopy{font-size:10px}.benefit-bar{grid-template-columns:1fr}.benefit-item{border-right:0!important;border-bottom:1px solid #e6edf4}.benefit-item:last-child{border-bottom:0}.section{padding:36px 0}.section-head h2{font-size:29px}.feature-grid{grid-template-columns:1fr}.feature-card{min-height:0}.premium-card{min-height:480px}.premium-bg{object-position:72% bottom}.premium-overlay{background:linear-gradient(180deg,rgba(3,38,83,.98) 0%,rgba(4,52,94,.91) 55%,rgba(4,72,92,.20) 83%,transparent 100%)}.premium-content{max-width:100%;padding:24px 22px}.premium-content h2{font-size:27px}.premium-features{grid-template-columns:1fr 1fr;gap:10px}.btn-premium{left:22px;bottom:20px}.why-card,.compare-card,.story-card{padding:20px}.compare-head{grid-template-columns:1fr 70px}.compare-row{grid-template-columns:1fr 34px 70px;padding-inline:10px}.install-card{grid-template-columns:62px 1fr;padding:15px}.install-mascot{width:84px}.install-copy h2{font-size:20px}.install-action .btn{width:100%}.footer-nav{gap:13px}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

/* =========================================================
   Motion layer — product demo, parallax, story steps, premium
   ========================================================= */
:root{
  --ease-spring:cubic-bezier(.2,.82,.23,1);
  --ease-soft:cubic-bezier(.22,.61,.36,1);
}

/* Initial hero reveal. JS adds .motion-ready after first paint. */
.hero-copy,
.hero-mascot,
.hero-product{
  will-change:transform,opacity;
}
body.motion-enabled:not(.motion-ready) .hero-copy{opacity:0;transform:translateY(22px)}
body.motion-enabled:not(.motion-ready) .hero-mascot{opacity:0;transform:translate3d(-38px,18px,0) scale(.96)}
body.motion-enabled:not(.motion-ready) .hero-product{opacity:0;transform:translate3d(28px,30px,0) scale(.965)}
body.motion-enabled.motion-ready .hero-copy{animation:heroCopyIn .76s var(--ease-spring) .08s both}
body.motion-enabled.motion-ready .hero-mascot{animation:heroMascotIn .9s var(--ease-spring) .18s both}
body.motion-enabled.motion-ready .hero-product{animation:heroProductIn .92s var(--ease-spring) .29s both}

@keyframes heroCopyIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes heroMascotIn{0%{opacity:0;transform:translate3d(-38px,18px,0) scale(.96)}72%{opacity:1;transform:translate3d(5px,-4px,0) scale(1.012)}100%{opacity:1;transform:none}}
@keyframes heroProductIn{0%{opacity:0;transform:translate3d(28px,30px,0) scale(.965)}72%{opacity:1;transform:translate3d(-4px,-4px,0) scale(1.006)}100%{opacity:1;transform:none}}

/* Subtle mouse parallax. Transform lives on wrappers so entrance keyframes stay intact. */
.hero-mascot-wrap,
.hero-product-wrap{
  --parallax-x:0px;
  --parallax-y:0px;
  transition:transform .24s var(--ease-soft);
}
.hero-mascot-wrap{transform:translate3d(calc(var(--parallax-x) * .72),calc(var(--parallax-y) * .72),0)}
.hero-product-wrap{transform:translate3d(var(--parallax-x),var(--parallax-y),0)}

/* Hero product demo overlays the already approved product artwork. */
.product-demo{position:absolute;inset:0;z-index:5;pointer-events:none}
.demo-popup-pulse{
  position:absolute;
  right:1.5%;top:10%;
  width:43%;height:63%;
  border-radius:20px;
  border:1px solid rgba(75,239,185,.88);
  background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(89,246,197,.08));
  box-shadow:0 0 0 1px rgba(255,255,255,.42) inset,0 0 28px rgba(26,226,161,.18);
  opacity:0;
  transform:translateX(18px) scale(.97);
  transition:opacity .48s var(--ease-soft),transform .55s var(--ease-spring),box-shadow .45s ease;
}
.product-demo.is-popup-open .demo-popup-pulse{opacity:1;transform:none;box-shadow:0 0 0 1px rgba(255,255,255,.56) inset,0 0 38px rgba(26,226,161,.27)}
.demo-record-pill{
  position:absolute;
  left:31%;top:27%;
  display:inline-flex;align-items:center;gap:8px;
  min-height:38px;padding:0 13px;
  color:#fff;background:rgba(8,19,38,.91);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  font-size:12px;font-weight:850;
  box-shadow:0 10px 24px rgba(5,25,45,.24),inset 0 1px rgba(255,255,255,.09);
  backdrop-filter:blur(10px);
  opacity:0;transform:translateY(-8px) scale(.96);
  transition:opacity .36s ease,transform .42s var(--ease-spring),background .3s ease;
}
.product-demo.is-recording .demo-record-pill{opacity:1;transform:none}
.demo-record-dot{width:9px;height:9px;border-radius:50%;background:#ff3f55;box-shadow:0 0 0 0 rgba(255,63,85,.45)}
.product-demo.is-recording .demo-record-dot{animation:recordPulse 1.05s ease-out infinite}
.demo-timer{font-variant-numeric:tabular-nums;color:#d8e5f2;font-size:11px;min-width:32px}
@keyframes recordPulse{0%{box-shadow:0 0 0 0 rgba(255,63,85,.45)}70%{box-shadow:0 0 0 7px rgba(255,63,85,0)}100%{box-shadow:0 0 0 0 rgba(255,63,85,0)}}
.demo-saved-chip{
  position:absolute;left:36%;top:27%;
  display:inline-flex;align-items:center;gap:7px;
  min-height:38px;padding:0 14px;border-radius:12px;
  color:#053f35;background:rgba(205,255,236,.96);
  border:1px solid rgba(34,212,149,.42);
  font-size:12px;font-weight:900;
  box-shadow:0 12px 28px rgba(0,157,109,.18);
  opacity:0;transform:translateY(8px) scale(.92);
  transition:opacity .38s ease,transform .46s var(--ease-spring);
}
.demo-saved-chip span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#0bd27d;color:#fff}
.product-demo.is-saved .demo-record-pill{opacity:0;transform:translateY(-7px) scale(.96)}
.product-demo.is-saved .demo-saved-chip{opacity:1;transform:none}

/* Storytelling on the existing benefit strip — no extra section added. */
.benefit-bar{position:relative;--story-progress:0%}
.benefit-bar:after{
  content:"";position:absolute;left:0;bottom:0;height:3px;width:var(--story-progress);
  background:linear-gradient(90deg,#0bd784,#24e3ac,#28c7de);
  box-shadow:0 -1px 14px rgba(18,216,139,.24);
  transition:width .58s var(--ease-soft);
}
.benefit-item{position:relative;transition:background .38s ease,transform .38s var(--ease-spring),box-shadow .38s ease}
.benefit-item .benefit-icon{transition:transform .4s var(--ease-spring),box-shadow .4s ease,filter .35s ease}
.benefit-item.story-active{background:linear-gradient(180deg,rgba(235,255,248,.82),rgba(255,255,255,.94));transform:translateY(-2px);box-shadow:0 14px 26px rgba(8,143,101,.07)}
.benefit-item.story-active .benefit-icon{transform:translateY(-3px) scale(1.08);filter:saturate(1.12);box-shadow:0 10px 22px rgba(16,211,137,.15),inset 0 0 0 1px rgba(21,210,139,.16)}
.benefit-item.story-done .benefit-icon:after{content:"✓";position:absolute;right:-5px;top:-5px;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:#0bd27d;color:#fff;font-size:10px;font-weight:950;box-shadow:0 3px 8px rgba(0,135,88,.18)}
.benefit-icon{position:relative}

/* Premium ambient glow and cinematic shimmer. */
.premium-card{isolation:isolate}
.premium-bg,.premium-overlay,.premium-content,.btn-premium{z-index:2}
.premium-bg{z-index:0}
.premium-overlay{z-index:1}
.premium-ambient{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .7s ease}
.premium-card.premium-live .premium-ambient{opacity:1}
.premium-orb{position:absolute;border-radius:50%;filter:blur(20px);mix-blend-mode:screen;opacity:.36}
.premium-orb-a{width:160px;height:160px;right:22%;top:-42px;background:rgba(39,255,187,.38);animation:premiumDriftA 8s ease-in-out infinite alternate}
.premium-orb-b{width:120px;height:120px;right:4%;bottom:-36px;background:rgba(43,205,255,.3);animation:premiumDriftB 7s ease-in-out infinite alternate}
.premium-spark{position:absolute;color:#fff6a0;text-shadow:0 0 14px rgba(255,235,92,.8);font-size:19px;opacity:.15;animation:premiumTwinkle 3.2s ease-in-out infinite}
.premium-spark-a{right:33%;top:20%;animation-delay:.2s}.premium-spark-b{right:16%;top:52%;font-size:13px;animation-delay:1.1s}.premium-spark-c{right:7%;top:20%;font-size:16px;animation-delay:1.8s}
.premium-card:after{content:"";position:absolute;z-index:3;inset:-45% auto -45% -28%;width:24%;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);opacity:0;pointer-events:none}
.premium-card.premium-live:after{animation:premiumSweep 7.2s ease-in-out 1.1s infinite}
.premium-card.premium-live .btn-premium{animation:premiumButtonBreath 4.8s ease-in-out infinite}
@keyframes premiumDriftA{to{transform:translate3d(22px,16px,0) scale(1.08)}}
@keyframes premiumDriftB{to{transform:translate3d(-22px,-10px,0) scale(1.12)}}
@keyframes premiumTwinkle{0%,100%{opacity:.12;transform:scale(.75) rotate(0)}50%{opacity:.95;transform:scale(1.15) rotate(15deg)}}
@keyframes premiumSweep{0%,70%{left:-28%;opacity:0}75%{opacity:1}90%{left:112%;opacity:.8}100%{left:112%;opacity:0}}
@keyframes premiumButtonBreath{0%,100%{box-shadow:0 10px 24px rgba(43,255,150,.28)}50%{box-shadow:0 12px 34px rgba(43,255,150,.45),0 0 22px rgba(106,255,187,.16)}}

/* Slight scroll-reveal polish for supporting cards, kept intentionally quiet. */
.motion-reveal{opacity:0;transform:translateY(18px);transition:opacity .62s var(--ease-soft),transform .7s var(--ease-spring)}
.motion-reveal.revealed{opacity:1;transform:none}

@media (max-width:820px){
  .demo-record-pill{left:24%;top:25%;transform:scale(.9)}
  .demo-saved-chip{left:29%;top:25%;transform:scale(.88)}
  .demo-popup-pulse{right:-4%;top:9%;width:49%;height:64%}
}
@media (max-width:560px){
  .product-demo{display:none}
  .hero-mascot-wrap,.hero-product-wrap,.hero-copy{transform:none!important}
  .benefit-bar:after{width:3px!important;height:var(--story-progress);left:auto;right:0;top:0;bottom:auto;transition:height .58s var(--ease-soft)}
}

@media (prefers-reduced-motion:reduce){
  body.motion-enabled:not(.motion-ready) .hero-copy,
  body.motion-enabled:not(.motion-ready) .hero-mascot,
  body.motion-enabled:not(.motion-ready) .hero-product{opacity:1;transform:none}
  body.motion-enabled.motion-ready .hero-copy,
  body.motion-enabled.motion-ready .hero-mascot,
  body.motion-enabled.motion-ready .hero-product,
  .product-demo .demo-record-dot,
  .premium-orb,.premium-spark,.premium-card:after,.premium-card .btn-premium{animation:none!important}
  .motion-reveal{opacity:1;transform:none}
}

/* =========================================================
   RU SEO page additions
   ========================================================= */
.language-link{
  width:38px;height:38px;display:inline-grid;place-items:center;
  border:1px solid #dce9f5;border-radius:12px;background:#fff;
  color:#29466f;font-size:12px;font-weight:900;letter-spacing:.04em;
  box-shadow:0 5px 14px rgba(27,63,101,.04);
  transition:color .2s ease,border-color .2s ease,transform .2s ease;
}
.language-link:hover{color:var(--green-2);border-color:#bdebd9;transform:translateY(-1px)}

.seo-guide{padding-top:38px;padding-bottom:34px;background:linear-gradient(180deg,#fbfffe,#f4fffb)}
.seo-guide-grid{display:grid;grid-template-columns:1.35fr .8fr;gap:22px;align-items:stretch}
.seo-guide-main,.seo-guide-side{
  background:#fff;border:1px solid #dce9f5;border-radius:24px;box-shadow:var(--soft-shadow)
}
.seo-guide-main{padding:34px 36px}
.seo-guide-main h2{font-size:34px;line-height:1.08;letter-spacing:-.04em;margin:0 0 18px;color:var(--navy);font-weight:950}
.seo-guide-main>p:not(.eyebrow){font-size:15px;line-height:1.7;color:#526b90;margin:0 0 14px}
.seo-guide-main>p:last-child{margin-bottom:0}
.seo-guide-side{padding:28px;background:linear-gradient(145deg,#f7fffc,#effaf7)}
.seo-guide-side h3{font-size:20px;line-height:1.2;letter-spacing:-.025em;margin:0 0 18px;color:var(--navy)}
.number-list{margin:0;padding:0;list-style:none;counter-reset:guide;display:grid;gap:13px}
.number-list li{counter-increment:guide;position:relative;padding-left:42px;color:#405d82;font-size:14px;line-height:1.45;font-weight:750}
.number-list li:before{content:counter(guide);position:absolute;left:0;top:-3px;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(145deg,#dffff2,#b9f6dd);color:#08745c;font-size:12px;font-weight:950;box-shadow:inset 0 0 0 1px rgba(24,181,126,.12)}
.guide-note{margin:20px 0 0;padding:14px 15px;border-radius:14px;background:#fff8e7;border:1px solid #f2dfad;color:#6d5c31;font-size:12px;line-height:1.55}

.faq-section{padding-top:48px;padding-bottom:54px;background:#fff}
.faq-heading{margin-bottom:24px}
.faq-grid{max-width:900px;margin:0 auto;display:grid;gap:12px}
.faq-item{background:#fff;border:1px solid #dce9f5;border-radius:18px;box-shadow:0 8px 24px rgba(31,77,116,.05);overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;position:relative;padding:18px 54px 18px 20px;font-size:15px;font-weight:900;color:var(--navy)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#effbf7;color:#07976d;font-size:18px;font-weight:900;transition:transform .2s ease,background .2s ease}
.faq-item[open] summary:after{content:"–";background:#dffff2}
.faq-item p{margin:0;padding:0 20px 19px;color:#566f94;font-size:14px;line-height:1.62;max-width:790px}

html[lang="ru"] .hero h1{font-size:58px}
html[lang="ru"] .hero-lede{font-size:17px}
html[lang="ru"] .desktop-nav{gap:26px}
html[lang="ru"] .premium-content h2{max-width:650px}
html[lang="ru"] .install-copy p{max-width:520px}

@media (max-width:1050px){
  html[lang="ru"] .hero h1{font-size:50px}
  .seo-guide-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .header-actions .language-link{display:inline-grid}
  .seo-guide-main{padding:28px}.seo-guide-side{padding:24px}
  .seo-guide-main h2{font-size:30px}
}
@media (max-width:560px){
  .header-actions .chrome-chip{display:none}
  .header-actions .language-link{width:40px;height:40px}
  html[lang="ru"] .hero h1{font-size:43px}
  html[lang="ru"] .hero-lede{font-size:15px}
  .seo-guide-main,.seo-guide-side{padding:20px;border-radius:20px}
  .seo-guide-main h2{font-size:27px}
  .faq-item summary{font-size:14px;padding-left:17px}.faq-item p{font-size:13px;padding-left:17px;padding-right:17px}
}
.guide-inline-link{display:inline-flex;align-items:center;gap:7px;color:#058d68;font-weight:900;border-bottom:1px solid #a6dfcb;padding-bottom:2px}
.guide-inline-link:hover{color:#066f57;border-color:#066f57}


/* =========================================================
   RU HOME HERO v1.4 — roomier 2-column composition
   Keeps the approved visual language while giving Russian
   copy enough horizontal measure to read naturally.
   ========================================================= */
body.ru-home .hero{padding:30px 0 18px;min-height:630px}
body.ru-home .hero-grid-ru{
  display:grid;
  grid-template-columns:minmax(430px,.92fr) minmax(0,1.08fr);
  gap:38px;
  align-items:center;
  min-height:555px;
}
body.ru-home .hero-grid-ru .hero-copy{
  grid-column:1;
  padding:0 0 10px;
  max-width:560px;
  align-self:center;
  position:relative;
  z-index:6;
}
body.ru-home .hero-grid-ru .hero-copy .eyebrow{max-width:500px;margin-bottom:15px}
body.ru-home .hero-grid-ru .hero-copy h1{
  max-width:570px;
  margin-bottom:22px;
  font-size:72px;
  line-height:.98;
}
body.ru-home .hero-grid-ru .hero-lede{
  max-width:545px;
  font-size:18px;
  line-height:1.58;
  margin-bottom:25px;
}
body.ru-home .hero-visual-ru{
  grid-column:2;
  position:relative;
  display:grid;
  grid-template-columns:minmax(185px,.37fr) minmax(360px,.63fr);
  align-items:end;
  min-width:0;
  min-height:540px;
}
body.ru-home .hero-visual-ru .hero-mascot-wrap{z-index:4;margin-right:-34px}
body.ru-home .hero-visual-ru .hero-product-wrap{z-index:3;min-width:0}
body.ru-home .hero-visual-ru .hero-mascot{width:122%;max-width:none;margin-left:-20%;max-height:470px}
body.ru-home .hero-visual-ru .hero-product{width:124%;margin-left:-16%}
body.ru-home .hero-visual-ru .note-left{left:-40px;top:46px;font-size:18px}
body.ru-home .hero-visual-ru .note-good{right:-10px;bottom:45px;font-size:15px}
body.ru-home .hero-visual-ru .note-save{left:8px;top:26px;font-size:16px}
body.ru-home .hero-visual-ru .note-adventure{right:-18px;bottom:68px;font-size:14px}

@media (max-width:1180px){
  body.ru-home .hero-grid-ru{grid-template-columns:minmax(390px,.9fr) minmax(0,1.1fr);gap:24px}
  body.ru-home .hero-grid-ru .hero-copy h1{font-size:64px}
  body.ru-home .hero-grid-ru .hero-lede{font-size:17px}
  body.ru-home .hero-visual-ru{grid-template-columns:minmax(150px,.34fr) minmax(320px,.66fr)}
  body.ru-home .hero-visual-ru .hero-mascot{width:120%;margin-left:-18%}
}

@media (max-width:960px){
  body.ru-home .hero{padding-top:20px}
  body.ru-home .hero-grid-ru{grid-template-columns:1fr;gap:8px;min-height:0}
  body.ru-home .hero-grid-ru .hero-copy{grid-column:1;grid-row:1;max-width:720px;margin:0 auto;text-align:center;padding:30px 5% 12px}
  body.ru-home .hero-grid-ru .hero-copy .eyebrow{max-width:none;text-align:center}
  body.ru-home .hero-grid-ru .hero-copy h1{max-width:none;font-size:62px}
  body.ru-home .hero-grid-ru .hero-lede{max-width:650px;margin-left:auto;margin-right:auto}
  body.ru-home .hero-grid-ru .hero-cta-row,body.ru-home .hero-grid-ru .hero-microcopy{justify-content:center}
  body.ru-home .hero-visual-ru{grid-column:1;grid-row:2;grid-template-columns:.38fr .62fr;min-height:440px;max-width:800px;width:100%;margin:0 auto}
  body.ru-home .hero-visual-ru .hero-mascot{max-height:400px}
}

@media (max-width:720px){
  body.ru-home .hero{min-height:0;padding-top:12px}
  body.ru-home .hero-grid-ru{display:block}
  body.ru-home .hero-grid-ru .hero-copy{padding:25px 0 14px}
  body.ru-home .hero-grid-ru .hero-copy h1{font-size:48px}
  body.ru-home .hero-grid-ru .hero-lede{font-size:15.5px;line-height:1.55}
  body.ru-home .hero-visual-ru{display:grid;grid-template-columns:.42fr .58fr;min-height:330px;margin-top:6px}
  body.ru-home .hero-visual-ru .hero-mascot{width:125%;margin-left:-24%;max-height:310px}
  body.ru-home .hero-visual-ru .hero-product{width:125%;margin-left:-17%}
  body.ru-home .hero-visual-ru .hand-note{display:none}
}

@media (max-width:480px){
  body.ru-home .hero-grid-ru .hero-copy h1{font-size:43px}
  body.ru-home .hero-grid-ru .hero-copy .eyebrow{font-size:10px;letter-spacing:.11em}
  body.ru-home .hero-grid-ru .hero-lede{font-size:15px}
  body.ru-home .hero-visual-ru{grid-template-columns:.4fr .6fr;min-height:280px}
}

/* =========================================================
   v1.5 — Desktop header polish + footer brand mark
   ========================================================= */
@media (min-width:821px){
  .site-header .container{
    width:min(calc(100% - 48px),1260px);
  }
  .header-inner{
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:22px;
  }
  .brand{
    display:flex;
    align-items:center;
    min-width:0;
  }
  .brand img{width:178px}
  .desktop-nav{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:nowrap;
    gap:22px;
    font-size:13px;
    font-weight:800;
    line-height:1.15;
  }
  .desktop-nav a{
    white-space:nowrap;
    flex:0 0 auto;
  }
  html[lang="ru"] .desktop-nav{gap:18px}
  .header-actions{
    flex-wrap:nowrap;
    gap:8px;
  }
  .header-actions>*{flex:0 0 auto}
  .header-actions .btn-small{
    min-height:40px;
    padding-inline:14px;
    font-size:12px;
  }
  .language-link{width:40px;height:40px}
}

@media (min-width:821px) and (max-width:1199px){
  .header-actions .chrome-chip{display:none}
  .brand img{width:164px}
  .desktop-nav{gap:15px;font-size:12px}
  html[lang="ru"] .desktop-nav{gap:13px}
  .header-inner{gap:16px}
  .header-actions .btn-small{padding-inline:12px;font-size:11.5px}
}

@media (min-width:1200px){
  .header-actions .chrome-chip{
    display:inline-flex;
    height:40px;
    padding-inline:12px;
    font-size:11px;
  }
  .brand img{width:184px}
  .desktop-nav{gap:26px;font-size:13px}
  html[lang="ru"] .desktop-nav{gap:22px}
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.footer-brand img{
  width:58px;
  height:58px;
  object-fit:contain;
  object-position:center;
  filter:brightness(0) invert(1);
  opacity:.96;
  flex:0 0 auto;
}
.footer-brand p{
  margin:0;
  color:#c7d8ec;
  font-size:11px;
  line-height:1.35;
  font-weight:700;
}

@media (max-width:820px){
  .footer-brand{justify-content:center}
  .footer-brand img{margin:0;width:54px;height:54px}
}

/* =========================================================
   v1.5.1 — Russian heading typography refinement
   Goal: keep Clipodilla character, reduce visual heaviness,
   improve Cyrillic readability on desktop and mobile.
   ========================================================= */
html[lang="ru"] .hero h1,
html[lang="ru"] .section-head h2,
html[lang="ru"] .why-card h2,
html[lang="ru"] .premium-content h2,
html[lang="ru"] .install-copy h2,
html[lang="ru"] .seo-guide-main h2,
html[lang="ru"] .seo-guide-side h3,
html[lang="ru"] .story-card h3{
  font-family:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  font-weight:700;
  letter-spacing:-.026em;
  text-wrap:balance;
}

html[lang="ru"] .hero h1{
  font-weight:700;
  letter-spacing:-.036em;
  line-height:1.01;
}

html[lang="ru"] .section-head h2,
html[lang="ru"] .seo-guide-main h2{
  font-weight:700;
  letter-spacing:-.024em;
  line-height:1.10;
}

html[lang="ru"] .premium-content h2,
html[lang="ru"] .why-card h2,
html[lang="ru"] .install-copy h2,
html[lang="ru"] .seo-guide-side h3,
html[lang="ru"] .story-card h3{
  font-weight:700;
  letter-spacing:-.018em;
}

/* Small UI headings should remain confident, but not faux-black. */
html[lang="ru"] .feature-card h3,
html[lang="ru"] .benefit-item strong,
html[lang="ru"] .faq-item summary{
  font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  font-weight:650;
  letter-spacing:-.008em;
}

/* Do not let decorative labels compete with the editorial hierarchy. */
html[lang="ru"] .eyebrow,
html[lang="ru"] .premium-kicker{
  font-weight:750;
}

/* =========================================================
   v1.5.2 — RU navigation typography + benefit-card hover
   ========================================================= */

/* Russian navigation: lighter, clearer Cyrillic rhythm. */
html[lang="ru"] .desktop-nav,
html[lang="ru"] .mobile-nav{
  font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
}
html[lang="ru"] .desktop-nav{
  font-weight:600;
  letter-spacing:-.005em;
}
html[lang="ru"] .desktop-nav a{
  font-weight:600;
}
html[lang="ru"] .mobile-nav a{
  font-weight:600;
  letter-spacing:-.004em;
}

/* Four key benefits: subtle premium lift on desktop hover. */
.benefit-bar{
  overflow:visible;
}
.benefit-item{
  border-radius:16px;
  transform:translateY(0);
  transform-origin:center;
  transition:
    transform .28s cubic-bezier(.2,.75,.25,1),
    box-shadow .28s ease,
    background-color .28s ease,
    border-color .28s ease;
  will-change:transform;
}
.benefit-item .benefit-icon{
  transition:
    transform .32s cubic-bezier(.2,.75,.25,1),
    box-shadow .32s ease,
    filter .32s ease;
}

@media (hover:hover) and (pointer:fine){
  .benefit-item:hover{
    z-index:3;
    transform:translateY(-7px);
    background:rgba(255,255,255,.98);
    box-shadow:
      0 18px 36px rgba(20,64,96,.13),
      0 5px 12px rgba(20,64,96,.06);
  }
  .benefit-item:hover .benefit-icon{
    transform:translateY(-2px) scale(1.055);
    filter:saturate(1.07);
    box-shadow:
      0 10px 20px rgba(15,194,127,.14),
      inset 0 0 0 1px rgba(21,210,139,.12);
  }
}

/* Keyboard users receive the same visual affordance. */
.benefit-item:focus-within{
  z-index:3;
  transform:translateY(-5px);
  background:rgba(255,255,255,.98);
  box-shadow:0 16px 32px rgba(20,64,96,.12);
}

@media (prefers-reduced-motion:reduce){
  .benefit-item,
  .benefit-item .benefit-icon{
    transition:none;
  }
  .benefit-item:hover,
  .benefit-item:focus-within,
  .benefit-item:hover .benefit-icon{
    transform:none;
  }
}