:root{
  --red:#e8231c;--red-deep:#b5120d;--orange:#ff6a13;--amber:#ffb01f;
  --ink:#0c0b0a;--ink-2:#2a2623;--mute:#6e6761;--line:#ece7e2;--paper:#fff;--cream:#fff7f0;
  --display:'Bricolage Grotesque',system-ui,sans-serif;--body:'DM Sans',system-ui,sans-serif;
  --r:22px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit}
.wrap{width:min(1200px,100% - 40px);margin:0 auto}
h1,h2,h3{font-family:var(--display);line-height:.98;letter-spacing:-.025em;font-weight:800}
.kicker{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.kicker::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(232,35,28,.15)}
.grad{background:linear-gradient(95deg,var(--red) 10%,var(--orange) 60%,var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.55rem;background:var(--red);color:#fff;font-weight:700;text-decoration:none;padding:.95rem 1.5rem;border-radius:999px;border:0;cursor:pointer;font:inherit;font-weight:700;box-shadow:0 10px 30px -10px rgba(232,35,28,.7),inset 0 -2px 0 rgba(0,0,0,.15);transition:transform .25s cubic-bezier(.2,.9,.3,1.3),box-shadow .25s}
.btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 36px -10px rgba(232,35,28,.8)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.sm{padding:.6rem 1.05rem;font-size:.92rem}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(3px)}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,box-shadow .3s,backdrop-filter .3s}
.nav.solid{background:rgba(255,255,255,.82);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);box-shadow:0 1px 0 var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{display:flex;align-items:center;gap:.55rem;font-family:var(--display);font-weight:800;font-size:1.35rem;text-decoration:none;letter-spacing:-.03em}
.logo svg{width:30px;height:30px}
.logo b{color:var(--red)}
.logo span{display:inline-flex}
.nav-links{display:flex;align-items:center;gap:1.8rem}
.nav-links a:not(.btn){text-decoration:none;font-weight:600;font-size:.95rem;color:var(--ink-2)}
.nav-links a:not(.btn):hover{color:var(--red)}
@media(max-width:820px){.nav-links a:not(.btn){display:none}}

/* hero */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,560px) 1fr;align-items:center;gap:2rem;padding:110px max(20px,calc((100% - 1200px)/2)) 60px;overflow:hidden}
.hero::before{content:'';position:absolute;inset:-20% -10% auto auto;width:900px;height:900px;background:radial-gradient(circle,rgba(255,106,19,.16),transparent 62%);pointer-events:none}
.hero-copy{position:relative;z-index:3}
.hero h1{font-size:clamp(3rem,7.4vw,6.4rem);margin:1.1rem 0 1.4rem}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line span{display:inline-block;transform:translateY(105%);animation:rise 1s cubic-bezier(.2,.8,.2,1) forwards}
.hero h1 .line:nth-child(2) span{animation-delay:.12s}
.hero h1 .line:nth-child(3) span{animation-delay:.24s}
@keyframes rise{to{transform:none}}
.hero p.lede{font-size:clamp(1.08rem,1.6vw,1.3rem);color:var(--ink-2);max-width:520px;opacity:0;animation:fade .9s .5s forwards}
.hero .cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem;opacity:0;animation:fade .9s .7s forwards}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-note{margin-top:1.6rem;display:flex;align-items:center;gap:.7rem;font-size:.9rem;color:var(--mute);opacity:0;animation:fade .9s .9s forwards}
.pulse-dot{width:10px;height:10px;border-radius:50%;background:#19c36b;box-shadow:0 0 0 0 rgba(25,195,107,.6);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(25,195,107,0)}100%{box-shadow:0 0 0 0 rgba(25,195,107,0)}}

/* post wall */
.wall-stage{position:absolute;top:0;bottom:0;right:0;width:56%;perspective:1400px;z-index:1;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%),linear-gradient(90deg,transparent 0,#000 18%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%),linear-gradient(90deg,transparent 0,#000 18%);mask-composite:intersect}
.wall{position:absolute;inset:-14% -24% -14% 4%;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;transform:rotateX(18deg) rotateY(-14deg) rotateZ(6deg);transform-style:preserve-3d;will-change:transform;transition:transform .1s linear}
.wall-col{display:flex;flex-direction:column;gap:18px;animation:drift 38s linear infinite}
.wall-col:nth-child(2){animation-duration:46s;animation-direction:reverse}
.wall-col:nth-child(3){animation-duration:42s}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.post{background:#fff;border-radius:20px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 24px 50px -24px rgba(40,10,0,.35);overflow:hidden;border:1px solid var(--line);transform:translateZ(0)}
.post-head{display:flex;align-items:center;gap:.55rem;padding:.6rem .7rem}
.av{width:30px;height:30px;border-radius:50%;padding:2px;background:conic-gradient(var(--red),var(--orange),var(--amber),var(--red));flex:none}
.av i{display:block;width:100%;height:100%;border-radius:50%;border:2px solid #fff;background:var(--c,#f3c5a8)}
.post-head .who{font-size:.78rem;line-height:1.2}
.post-head .who b{display:block;font-weight:700}
.post-head .who span{color:var(--mute)}
.post-media{position:relative;aspect-ratio:4/5;background:#f2ebe5}
.post-media video,.post-media img{width:100%;height:100%;object-fit:cover}
.pts{position:absolute;right:10px;top:10px;background:var(--red);color:#fff;font-weight:800;font-size:.75rem;padding:.3rem .55rem;border-radius:999px;box-shadow:0 6px 16px -4px rgba(232,35,28,.7);transform:scale(0);animation:pop 6s infinite}
@keyframes pop{0%,12%{transform:scale(0) rotate(-12deg)}18%{transform:scale(1.15) rotate(4deg)}22%,70%{transform:scale(1) rotate(0)}78%,100%{transform:scale(0)}}
.post-foot{display:flex;align-items:center;gap:.8rem;padding:.55rem .75rem .7rem;font-size:.78rem;font-weight:600}
.post-foot svg{width:18px;height:18px}
.post-foot .heart{color:var(--red)}
.post-foot .tag{margin-left:auto;color:var(--mute);font-weight:500}

/* floating toasts */
.toast{position:absolute;z-index:4;display:flex;align-items:center;gap:.65rem;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:16px;padding:.65rem .9rem .65rem .65rem;box-shadow:0 20px 40px -18px rgba(40,10,0,.4);font-size:.84rem;line-height:1.25;opacity:0;transform:translateY(16px) scale(.96);transition:opacity .5s,transform .6s cubic-bezier(.2,.9,.3,1.25)}
.toast.on{opacity:1;transform:none}
.toast .ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,var(--red),var(--orange));color:#fff;flex:none}
.toast .ic svg{width:18px;height:18px}
.toast b{display:block}
.toast span{color:var(--mute)}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:100px;min-height:auto}
  .wall-stage{position:relative;width:auto;height:520px;margin:0 -20px}
  .wall{inset:-10% -40% -10% -20%;transform:rotateX(16deg) rotateZ(5deg)}
  .toast.t3{display:none}
}

/* tapes */
.tapes{position:relative;height:330px;overflow:hidden;margin:10px 0}
.tape{position:absolute;left:-10%;width:120%;padding:1.05rem 0;display:flex;overflow:hidden;white-space:nowrap;box-shadow:0 18px 40px -18px rgba(120,30,0,.55)}
.tape .run{display:flex;animation:marquee 30s linear infinite;will-change:transform}
.tape.rev .run{animation-direction:reverse;animation-duration:36s}
.tape span{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,2.6vw,2.1rem);letter-spacing:-.01em;text-transform:uppercase;padding:0 1.4rem;display:flex;align-items:center;gap:2.8rem}
.tape span::after{content:'';width:22px;height:22px;background:currentColor;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.tape.a{top:70px;background:var(--orange);color:var(--ink);transform:rotate(-4deg)}
.tape.b{top:170px;background:var(--ink);color:#fff;transform:rotate(3deg)}
.tape.b span::after{color:var(--orange)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* sections */
section.block{padding:120px 0}
.sec-head{max-width:760px;margin-bottom:3.5rem}
.sec-head h2{font-size:clamp(2.4rem,5.4vw,4.4rem);margin:.9rem 0 1.1rem}
.sec-head p{font-size:1.15rem;color:var(--ink-2);max-width:600px}
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* scroll story */
.story{position:relative;height:340vh}
.story-pin{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3rem;width:min(1200px,100% - 40px);margin:0 auto}
.story-steps{position:relative;height:340px}
.step{position:absolute;inset:0;opacity:0;transform:translateY(30px);transition:opacity .6s,transform .7s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.step.on{opacity:1;transform:none;pointer-events:auto}
.step .num{font-family:var(--display);font-weight:800;font-size:1rem;color:#fff;background:var(--red);width:42px;height:42px;border-radius:14px;display:grid;place-items:center;margin-bottom:1.3rem;box-shadow:0 10px 24px -8px rgba(232,35,28,.7)}
.step h3{font-size:clamp(2.2rem,4.4vw,3.6rem);margin-bottom:1rem}
.step p{font-size:1.15rem;color:var(--ink-2);max-width:470px}
.story-bar{display:flex;gap:8px;margin-top:2rem;position:absolute;bottom:-60px;left:0}
.story-bar i{display:block;width:46px;height:5px;border-radius:5px;background:var(--line);overflow:hidden;position:relative}
.story-bar i b{position:absolute;inset:0;background:var(--red);transform-origin:left;transform:scaleX(0)}
.phone-stage{perspective:1600px;display:grid;place-items:center;height:100%}
.phone{position:relative;width:310px;height:640px;border-radius:52px;background:#111;padding:12px;box-shadow:0 0 0 2px #2b2b2b,0 60px 100px -40px rgba(80,10,0,.55),inset 0 0 0 2px #444;transform-style:preserve-3d;will-change:transform}
.phone::before{content:'';position:absolute;top:22px;left:50%;width:96px;height:28px;margin-left:-48px;background:#000;border-radius:20px;z-index:5}
.screen{position:relative;width:100%;height:100%;border-radius:41px;overflow:hidden;background:#fff}
.scr{position:absolute;inset:0;padding:62px 18px 18px;opacity:0;transform:scale(1.04);transition:opacity .55s,transform .7s cubic-bezier(.2,.8,.2,1)}
.scr.on{opacity:1;transform:none}
.scr-title{font-family:var(--display);font-weight:800;font-size:1.25rem;margin-bottom:.8rem;display:flex;justify-content:space-between;align-items:center}
.scr-title small{font-family:var(--body);font-size:.72rem;font-weight:700;background:var(--cream);color:var(--red);padding:.25rem .55rem;border-radius:999px}
.cam{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/5}
.cam video{width:100%;height:100%;object-fit:cover}
.cam .rec{position:absolute;left:12px;top:12px;background:rgba(0,0,0,.45);color:#fff;font-size:.7rem;font-weight:700;padding:.25rem .5rem;border-radius:999px;display:flex;gap:.35rem;align-items:center}
.cam .rec::before{content:'';width:7px;height:7px;border-radius:50%;background:#ff3b30;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
.shutter{display:flex;align-items:center;justify-content:space-between;margin-top:1rem}
.shutter .sb{width:62px;height:62px;border-radius:50%;border:4px solid var(--red);display:grid;place-items:center}
.shutter .sb i{width:46px;height:46px;border-radius:50%;background:var(--red)}
.shutter .earn{font-weight:800;color:var(--red);font-size:.9rem}
.ring-wrap{display:grid;place-items:center;margin:.6rem 0 1rem}
.ring{width:190px;height:190px;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .val{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-family:var(--display);font-weight:800;font-size:2.4rem;line-height:1}
.ring .val small{display:block;font-family:var(--body);font-size:.72rem;color:var(--mute);font-weight:600;margin-top:.25rem}
.reward{display:flex;align-items:center;gap:.7rem;padding:.7rem;border:1px solid var(--line);border-radius:16px;margin-bottom:.55rem;font-size:.85rem}
.reward .em{width:38px;height:38px;border-radius:12px;background:var(--cream);display:grid;place-items:center;font-size:1.2rem}
.reward b{display:block}
.reward span{color:var(--mute);font-size:.76rem}
.reward .go{margin-left:auto;font-weight:800;color:var(--red);font-size:.78rem}
.lb-row{display:flex;align-items:center;gap:.7rem;padding:.62rem .4rem;border-bottom:1px solid var(--line);font-size:.86rem}
.lb-row .rk{width:24px;font-family:var(--display);font-weight:800;color:var(--mute)}
.lb-row:nth-child(-n+3) .rk{color:var(--red)}
.lb-row .bar{flex:1;height:6px;background:var(--line);border-radius:6px;overflow:hidden}
.lb-row .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--orange));border-radius:6px}
.lb-row b{width:48px;text-align:right}
.lb-area{background:var(--ink);color:#fff;border-radius:18px;padding:.9rem 1rem;margin-bottom:.8rem}
.lb-area small{color:#ffb38a;font-weight:700;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.lb-area div{font-family:var(--display);font-weight:800;font-size:1.5rem}
@media(max-width:900px){
  .story{height:auto}
  .story-pin{position:relative;height:auto;grid-template-columns:1fr;padding:80px 0}
  .story-steps{height:auto}
  .step{position:relative;opacity:1;transform:none;margin-bottom:3rem}
  .story-bar{display:none}
  .phone-stage{order:-1;margin-bottom:2rem}
  .phone{width:270px;height:560px}
  .shutter .earn:last-child{display:none}
}

/* map */
.mapsec{position:relative;height:300vh;background:#f5f2ef}
.map-pin{position:sticky;top:0;height:100svh;overflow:hidden}
#cloutmap{position:absolute;inset:0}
#cloutmap canvas{outline:none}
.map-fallback{position:absolute;inset:0;background:#efebe7 center/cover no-repeat}
.map-veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(246,243,240,.97) 0,rgba(246,243,240,.85) 26%,rgba(246,243,240,0) 50%),linear-gradient(270deg,rgba(246,243,240,.85) 0,rgba(246,243,240,0) 30%),radial-gradient(ellipse at 55% 55%,transparent 40%,rgba(246,243,240,.6) 100%)}
@media(max-width:700px){.map-veil{background:linear-gradient(180deg,rgba(246,243,240,.97) 0,rgba(246,243,240,.85) 38%,rgba(246,243,240,0) 58%)}}
.map-copy{position:absolute;left:max(20px,calc((100% - 1200px)/2));top:110px;z-index:5;max-width:520px;pointer-events:none}
.map-copy h2{font-size:clamp(2.4rem,5.4vw,4.6rem);margin:.9rem 0 1rem}
.map-copy p{font-size:1.15rem;color:var(--ink-2);max-width:440px}
.map-lines{position:absolute;right:max(20px,calc((100% - 1200px)/2));bottom:70px;z-index:5;text-align:right;pointer-events:none}
.map-lines div{font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,2.6vw,2.2rem);opacity:0;transform:translateY(20px);transition:all .7s cubic-bezier(.2,.8,.2,1)}
.map-lines div.on{opacity:1;transform:none}
.map-lines div:last-child{color:var(--red)}
.drop{position:absolute;left:50%;top:0;width:44px;height:60px;margin-left:-22px;z-index:6;pointer-events:none;opacity:0;filter:drop-shadow(0 12px 14px rgba(150,20,0,.35))}
.drop svg{width:100%;height:100%}
.splash{position:absolute;left:50%;width:0;height:0;z-index:6;pointer-events:none}
.splash i{position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;background:var(--red);opacity:0}
.store-tag{position:absolute;z-index:7;transform:translate(-50%,-140%);background:var(--ink);color:#fff;font-weight:700;font-size:.82rem;padding:.45rem .75rem;border-radius:12px;white-space:nowrap;opacity:0;transition:opacity .5s;pointer-events:none}
.store-tag::after{content:'';position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:var(--ink)}
.store-tag.on{opacity:1}
.store-tag em{font-style:normal;color:#ffb38a}
.clout-meter{position:absolute;left:max(20px,calc((100% - 1200px)/2));bottom:70px;z-index:5;background:#fff;border-radius:20px;padding:1rem 1.2rem;box-shadow:0 30px 60px -30px rgba(80,20,0,.45);border:1px solid var(--line);min-width:250px}
.clout-meter small{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--mute)}
.clout-meter .big{font-family:var(--display);font-weight:800;font-size:2.6rem;line-height:1.05}
.clout-meter .big em{font-style:normal;font-size:1rem;color:#19a35a;margin-left:.4rem}
.clout-meter .spark{height:34px;margin-top:.3rem}
@media(max-width:700px){.map-copy{top:90px}.map-lines{bottom:auto;top:62%;right:20px}.clout-meter{bottom:24px;left:20px;right:20px;min-width:0}}

/* features */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feat{position:relative;border:1px solid var(--line);border-radius:var(--r);padding:1.8rem 1.6rem;background:#fff;overflow:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s;transform-style:preserve-3d}
.feat:hover{box-shadow:0 30px 60px -30px rgba(120,30,0,.35)}
.feat .fi{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--cream);color:var(--red);margin-bottom:1.2rem}
.feat .fi svg{width:26px;height:26px}
.feat h3{font-size:1.45rem;margin-bottom:.55rem;letter-spacing:-.02em}
.feat p{color:var(--ink-2);font-size:1rem}
.feat.hot{background:var(--red);color:#fff;border-color:var(--red)}
.feat.hot .fi{background:rgba(255,255,255,.16);color:#fff}
.feat.hot p{color:rgba(255,255,255,.85)}
.feat.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.feat.dark .fi{background:rgba(255,255,255,.08);color:var(--orange)}
.feat.dark p{color:rgba(255,255,255,.72)}
@media(max-width:900px){.feat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.feat-grid{grid-template-columns:1fr}}

/* compare */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cmp{border-radius:var(--r);padding:2.2rem;border:1px solid var(--line)}
.cmp h3{font-size:1.7rem;margin-bottom:1.2rem}
.cmp ul{list-style:none}
.cmp li{display:flex;gap:.7rem;padding:.6rem 0;border-top:1px solid var(--line);font-size:1.02rem}
.cmp li::before{content:'';flex:none;width:20px;height:20px;margin-top:3px;border-radius:50%;background:#ddd center/12px no-repeat}
.cmp.old{background:#faf8f6;color:var(--mute)}
.cmp.old li::before{background-color:#d8d2cc;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
.cmp.new{background:linear-gradient(160deg,#fff,#fff3ea);border-color:#ffd9c4}
.cmp.new li{border-color:#ffe4d4}
.cmp.new li::before{background-color:var(--red);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E")}
@media(max-width:800px){.compare{grid-template-columns:1fr}}

/* CTA */
.cta-band{position:relative;background:var(--ink);color:#fff;border-radius:36px;padding:clamp(3rem,7vw,6rem) clamp(1.5rem,6vw,5rem);overflow:hidden;text-align:center}
.cta-band::before,.cta-band::after{content:'';position:absolute;border-radius:50%;filter:blur(10px)}
.cta-band::before{width:520px;height:520px;left:-160px;bottom:-280px;background:radial-gradient(circle,rgba(232,35,28,.7),transparent 65%)}
.cta-band::after{width:520px;height:520px;right:-160px;top:-280px;background:radial-gradient(circle,rgba(255,106,19,.6),transparent 65%)}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{font-size:clamp(2.4rem,6vw,5rem);margin:1rem auto 1.2rem;max-width:900px}
.cta-band p{color:rgba(255,255,255,.75);font-size:1.15rem;max-width:560px;margin:0 auto 2rem}
.cta-band .kicker{color:#ffb38a}
.cta-band .kicker::before{background:#ffb38a;box-shadow:0 0 0 4px rgba(255,179,138,.18)}
.rings{position:absolute;left:50%;top:50%;width:0;height:0;z-index:0!important}
.rings i{position:absolute;left:-40px;top:-40px;width:80px;height:80px;border-radius:50%;border:2px solid rgba(255,106,19,.5);animation:ring 4.5s cubic-bezier(.1,.6,.3,1) infinite}
.rings i:nth-child(2){animation-delay:1.5s}.rings i:nth-child(3){animation-delay:3s}
@keyframes ring{from{transform:scale(.3);opacity:1}to{transform:scale(12);opacity:0}}

/* footer */
.footer{padding:70px 0 40px}
.footer .wrap{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-end}
.footer nav{display:flex;flex-wrap:wrap;gap:1.4rem}
.footer nav a{text-decoration:none;font-weight:600;color:var(--ink-2)}
.footer nav a:hover{color:var(--red)}
.footer small{display:block;color:var(--mute);margin-top:.6rem}
.mail a{font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,3vw,2rem);text-decoration:none;color:var(--red)}

/* sub pages */
.page-head{padding:150px 0 40px}
.page-head h1{font-size:clamp(2.6rem,6vw,4.8rem);margin-top:.9rem}
.prose{max-width:760px;padding-bottom:80px}
.prose h2{font-size:1.6rem;margin:2.4rem 0 .7rem;letter-spacing:-.02em}
.prose p,.prose li{color:var(--ink-2);margin-bottom:.8rem}
.prose ul{padding-left:1.2rem}
.prose .upd{color:var(--mute);font-size:.92rem}

/* demo form */
.demo-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:start;padding-bottom:100px}
.form-card{background:#fff;border:1px solid var(--line);border-radius:28px;padding:clamp(1.4rem,4vw,2.6rem);box-shadow:0 40px 80px -50px rgba(120,30,0,.4)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.1rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field.full{grid-column:1/-1}
.field label{font-weight:700;font-size:.9rem}
.field label .req{color:var(--red)}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s;width:100%}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 4px rgba(232,35,28,.12)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-msg{margin-top:1rem;font-weight:600;min-height:1.4em}
.form-msg.err{color:var(--red)}
.done{text-align:center;padding:2rem 0}
.done .tick{width:76px;height:76px;border-radius:50%;background:var(--red);display:grid;place-items:center;margin:0 auto 1.2rem;box-shadow:0 16px 40px -12px rgba(232,35,28,.7)}
.done h2{font-size:2.4rem;margin-bottom:.6rem}
.side-list{list-style:none;margin-top:1.6rem}
.side-list li{display:flex;gap:1rem;margin-bottom:1.4rem}
.side-list .n{flex:none;width:40px;height:40px;border-radius:13px;background:var(--cream);color:var(--red);font-family:var(--display);font-weight:800;display:grid;place-items:center}
.side-list b{display:block;font-size:1.05rem}
.side-list span{color:var(--ink-2)}
@media(max-width:860px){.demo-grid{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .hero h1 .line span{transform:none}
}