:root{
  --ink:#1A1614; --cream:#F6F0E4; --flame:#F26B2B; --cob:#4150B8; --cob-lt:#8E9BE8;
  --bg:#F6F0E4; --fg:#1A1614; --card:#FBF6EA; --dark:#1A1614;
  --line:rgba(26,22,20,.16);
  --r:28px; --sheet:clamp(24px,3.6vw,52px); --space:clamp(64px,8vw,120px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --display:"Bricolage Grotesque","Outfit",system-ui,sans-serif;
  --text:"Outfit",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#171310;--fg:#F6F0E4;--card:#221C17;--dark:#0C0907;--line:rgba(246,240,228,.16);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#171310;--fg:#F6F0E4;--card:#221C17;--dark:#0C0907;--line:rgba(246,240,228,.16);color-scheme:dark}
.dark{--line:rgba(246,240,228,.2)}
.cob{--line:rgba(255,255,255,.3)}
.fl-bg{--line:rgba(26,22,20,.25)}

.g-l{fill:none;stroke:var(--il-line,#1A1614);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.g-cl{fill:var(--il-c,#F6F0E4);stroke:var(--il-line,#1A1614);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.g-o{fill:var(--il-a,#F26B2B)}
.g-b{fill:var(--il-b,#4150B8)}
.g-k{fill:var(--il-line,#1A1614)}
.g-c{fill:var(--il-c,#F6F0E4)}
.g-t{fill:var(--il-line,#1A1614);opacity:.14}
.g-d{stroke-dasharray:3 5}
.g-ks{stroke:var(--il-c,#F6F0E4);stroke-width:1.2;stroke-linejoin:round}
.g-so{fill:none;stroke:var(--il-a,#F26B2B);stroke-width:7;stroke-linecap:round}
.g-lc{fill:none;stroke:var(--il-c,#F6F0E4);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.65 var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:30}
h1,h2,h3{font-family:var(--display);margin:0;font-weight:600;text-wrap:balance}
h2{font-size:clamp(2rem,3.9vw,3.4rem);line-height:1.04;letter-spacing:-.032em}
h3{font-size:1.3rem;line-height:1.15;letter-spacing:-.018em}
p{margin:0}a{color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--cob);outline-offset:3px;border-radius:4px}
.dark :focus-visible,.cob :focus-visible,footer :focus-visible{outline-color:var(--cream)}
.w{max-width:1240px;margin:0 auto;padding:0 clamp(20px,3vw,32px)}
section{padding:var(--space) 0 calc(var(--space) + var(--sheet));position:relative}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;color:#000;padding:8px 12px;z-index:60}
.dark{background:var(--dark);color:var(--cream)}
.cob{background:var(--cob);color:#fff}
.fl-bg{background:var(--flame);color:var(--ink)}

.sheet{margin-top:calc(var(--sheet) * -1);border-radius:var(--sheet) var(--sheet) 0 0;padding-top:var(--space)}
.sheet:not(.dark):not(.cob):not(.fl-bg){background:var(--bg)}
footer.sheet{padding:var(--space) 0 40px}

.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--bg) 84%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.site-header .w{display:flex;align-items:center;justify-content:space-between;height:72px;transition:height .45s var(--ease)}
.site-header.is-scrolled .w{height:60px}
.logo{font:700 1.5rem var(--display);text-decoration:none;letter-spacing:-.045em}
.logo i{display:inline-block;width:.46em;height:.46em;background:var(--flame);border-radius:50%;margin-left:3px;transition:transform .5s var(--ease)}
.logo:hover i{transform:translateY(-.18em) scale(1.15)}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.progress i{display:block;height:100%;background:var(--flame);transform-origin:0 50%;transform:scaleX(0)}
nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;align-items:center}
nav a:not(.btn){text-decoration:none;font-weight:400;font-size:.97rem;position:relative;padding:4px 0}
nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease)}
nav a:not(.btn):hover::after{transform:scaleX(1);transform-origin:0 50%}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:999px;padding:9px 18px;font:500 .95rem var(--text);color:var(--fg);cursor:pointer}
@media(max-width:900px){
  .burger{display:block}
  nav ul{position:absolute;left:0;right:0;top:100%;background:var(--bg);flex-direction:column;align-items:flex-start;padding:22px clamp(20px,3vw,32px) 30px;border-bottom:1px solid var(--line);gap:18px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .35s,transform .45s var(--ease),visibility .35s}
  nav ul.open{opacity:1;visibility:visible;transform:none}
}

.btn{--bg-h:var(--ink);display:inline-flex;align-items:center;gap:12px;padding:15px 28px;border:1px solid transparent;border-radius:999px;background:var(--cob);color:#fff;font:500 1rem/1 var(--text);text-decoration:none;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;transition:color .4s,border-color .4s}
.btn::before{content:"";position:absolute;inset:0;background:var(--bg-h);border-radius:inherit;transform:translateY(101%);transition:transform .55s var(--ease);z-index:-1}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn .arr{display:inline-block;transition:transform .5s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.btn.ghost{background:transparent;color:var(--fg);border-color:color-mix(in srgb,var(--fg) 38%,transparent);--bg-h:var(--fg)}
.btn.ghost:hover{color:var(--bg);border-color:var(--fg)}
.btn.ink{background:var(--ink);color:var(--cream);--bg-h:var(--cob)}
.btn.flame{background:var(--flame);color:var(--ink);--bg-h:var(--cream)}
.btn.sm{padding:11px 20px;font-size:.93rem}
@media(hover:none){.btn::before{display:none}.btn:hover{filter:brightness(.95)}}

details{border-top:1px solid var(--line)}details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:26px 0;font:600 clamp(1.12rem,2vw,1.42rem)/1.25 var(--display);letter-spacing:-.018em;transition:padding .4s var(--ease)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat;transition:transform .5s var(--ease),background-color .3s,border-color .3s,color .3s}
summary:hover::after{border-color:currentColor}
details[open] summary::after{transform:rotate(135deg);background-color:var(--flame);border-color:var(--flame);color:var(--ink)}
details p{padding:0 0 28px;max-width:46ch;opacity:.82}
@media(hover:hover){summary:hover{padding-left:6px}}

.two{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(36px,6vw,88px);align-items:start}
.two .sticky{position:sticky;top:120px}
@media(max-width:900px){.two{grid-template-columns:1fr}.two .sticky{position:static}}

.hero{padding:clamp(36px,5vw,72px) 0 calc(var(--space) + var(--sheet));overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(24px,3vw,56px);align-items:center;min-height:min(720px,calc(100svh - 120px))}
.tag{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:999px;padding:7px 16px;font-weight:400;font-size:.92rem;margin-bottom:34px}
.tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--flame)}
h1{font-size:clamp(2.3rem,4.5vw,4.25rem);line-height:1.03;letter-spacing:-.04em;max-width:14.5em}
mark{background:var(--flame);color:var(--ink);padding:0 .14em .02em;border-radius:.14em;display:inline-block;transform:rotate(-1.5deg)}
.hero .lead{font-size:clamp(1.05rem,1.5vw,1.25rem);max-width:31em;margin:34px 0 38px;opacity:.82}
.row{display:flex;gap:14px;flex-wrap:wrap}
.proof{display:flex;gap:8px 28px;flex-wrap:wrap;margin-top:40px;list-style:none;padding:0;font-size:.95rem}
.proof li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--flame);margin-right:10px;vertical-align:middle}

.stage{position:relative;width:100%;max-width:620px;margin-inline:auto;aspect-ratio:1/1;perspective:1600px}
.scene{position:absolute;inset:0;transform-style:preserve-3d}
.hl{position:absolute}
.hl svg{display:block;width:100%;height:auto;overflow:visible}
.l-sphere{left:46%;top:0;width:54%;transform:translateZ(-80px)}
.l-ring{left:-10%;top:31%;width:120%;transform:translateZ(-30px);color:var(--fg)}
.l-cube{left:3%;top:-1%;width:20%;transform:translateZ(70px)}
.l-browser{left:0;top:17%;width:76%;transform:translateZ(30px) rotateY(-14deg) rotateX(4deg) rotate(-1.5deg)}
.l-code{left:38%;top:66%;width:48%;transform:translateZ(110px) rotateY(-10deg) rotate(1.5deg)}
.l-phone{left:79%;top:32%;width:18%;transform:translateZ(130px) rotateY(-16deg) rotate(3deg)}
.l-chips{left:-2%;top:76%;width:38%;transform:translateZ(150px)}
.hl-b{animation:float 8s ease-in-out infinite}
.l-sphere .hl-b{animation-duration:11s}.l-cube .hl-b{animation-duration:7s;animation-delay:-2s}.l-code .hl-b{animation-duration:9s;animation-delay:-4s}.l-phone .hl-b{animation-duration:7.5s;animation-delay:-1s}.l-chips .hl-b{animation-duration:8.5s;animation-delay:-5s}
@keyframes float{50%{transform:translateY(-12px)}}
.stage.is-off .hl-b,.stage.is-off .badge{animation-play-state:paused}
.badge{position:absolute;right:-1%;top:-4%;width:21%;z-index:5;animation:spin 32s linear infinite}
.badge svg{display:block;width:100%;height:auto}
@keyframes spin{to{transform:rotate(360deg)}}
.hb-cursor{animation:cur 7s ease-in-out infinite}
@keyframes cur{0%,100%{transform:translate(196px,190px)}38%{transform:translate(120px,198px)}68%{transform:translate(262px,142px)}}
.hc-caret{animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hk-knob{animation:knob 5s ease-in-out infinite}
@keyframes knob{0%,45%{transform:translateX(0)}55%,95%{transform:translateX(-12px)}100%{transform:translateX(0)}}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .stage{max-width:460px;margin-top:20px}
}
@media(max-width:520px){.l-chips{display:none}.badge{width:24%}}

.about{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);align-items:center}
.lede{margin-top:26px;font-size:clamp(1.15rem,1.8vw,1.4rem);max-width:26em;opacity:.85}
.about-vis{position:relative;width:100%;max-width:440px;margin-left:auto;aspect-ratio:440/520}
.av-shapes{position:absolute;inset:0;color:var(--cream)}
.av-shapes svg{display:block;width:100%;height:100%}
.photo-slot{position:absolute;margin:0;left:13.6%;top:15.4%;width:68%;aspect-ratio:300/400;border-radius:999px 999px 0 0;overflow:hidden;background:var(--cob)}
.photo-slot svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.photo-slot img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover}
.av-half{position:absolute;left:1.8%;bottom:7.7%;width:21%;aspect-ratio:2/1;background:var(--cream);border-radius:999px 999px 0 0;animation:bob 6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-12px)}}
.stats{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.4fr;border-top:1px solid var(--line);margin-top:clamp(56px,7vw,100px)}
.stat{padding:30px 24px 8px 0}
.stat+.stat{padding-left:28px;border-left:1px solid var(--line)}
.stat b{display:block;font:600 clamp(2.6rem,5.6vw,4.8rem)/1 var(--display);letter-spacing:-.045em;color:var(--flame);font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:12px;max-width:20ch;font-size:.97rem;opacity:.85}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:44px}
.chips span{border:1px solid rgba(246,240,228,.32);border-radius:999px;padding:8px 20px;font-weight:400;transition:background .4s,color .4s,border-color .4s}
.chips span:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
@media(max-width:900px){.about{grid-template-columns:1fr}.about-vis{margin:8px auto 0;max-width:380px}}
@media(max-width:820px){.stats{grid-template-columns:1fr 1fr}.stat:nth-child(3){padding-left:0;border-left:0}.stat:nth-child(n+3){border-top:1px solid var(--line);margin-top:20px}}

#problemes{padding-bottom:calc(var(--space) * .55 + var(--sheet))}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-top:clamp(40px,5vw,72px)}
.card{--il-line:var(--fg);--il-c:var(--card);position:relative;border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:12px;min-height:360px;background:var(--card);overflow:hidden;transition:box-shadow .5s var(--ease),border-color .4s}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.6),transparent 62%);opacity:0;transition:opacity .5s;pointer-events:none}
.card>*{position:relative;z-index:1}
.card.fl{background:var(--flame);color:var(--ink);border-color:transparent;--il-line:#1A1614;--il-a:#F6F0E4;--il-b:#1A1614;--il-c:var(--flame)}
.card.cb{background:var(--cob);color:#fff;border-color:transparent;--il-line:#F6F0E4;--il-a:var(--flame);--il-b:#F6F0E4;--il-c:var(--cob)}
.card.dk{background:var(--dark);color:var(--cream);border-color:transparent;--il-line:#F6F0E4;--il-a:var(--flame);--il-b:var(--cob-lt);--il-c:var(--dark)}
.card.cb::before,.card.dk::before{background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.14),transparent 62%)}
.card .n{font:400 .95rem var(--text);opacity:.65;font-variant-numeric:tabular-nums}
.il{height:150px;margin:2px 0 10px}
.il svg{display:block;height:100%;width:auto;max-width:100%;overflow:visible}
.card p{max-width:34ch;flex:1;opacity:.88}
.card a{font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;align-self:flex-start;padding-bottom:2px}
.card a::after{content:"";position:absolute;inset:0;z-index:2}
.c1{grid-column:span 7}.c2{grid-column:span 5}.c3{grid-column:span 5}.c4{grid-column:span 7}.c5{grid-column:span 7}.c6{grid-column:span 5}
@media(max-width:900px){.grid>*{grid-column:1/-1!important}.card{min-height:0}}
.il svg *{transition:transform .8s var(--ease)}
.mv-h rect,.mv-arrow,.mv-bar1,.mv-bar2,.mv-bar3,.mv-bag,.mv-w1,.mv-w2,.mv-w3,.mv-old,.mv-new,.mv-card,.mv-cursor,.mv-needle,.mv-br{transform-box:fill-box;transform-origin:center}
.mv-needle{transform-box:view-box;transform-origin:92px 124px;transform:rotate(-26deg)}
.mv-bar1,.mv-bar2,.mv-bar3{transform-origin:50% 100%}
@media(hover:hover){
  .card:hover,.card:focus-within{box-shadow:0 30px 60px -34px rgba(26,22,20,.45)}
  .card:hover::before{opacity:1}
  .card:hover .mv-cursor{transform:translate(-22px,-14px)}
  .card:hover .mv-h rect{transform:scale(1.35)}
  .card:hover .mv-w2{transform:translateX(-12px)}
  .card:hover .mv-w3{transform:translateX(8px)}
  .card:hover .mv-w1{transform:translateX(5px)}
  .card:hover .mv-br{transform:scale(1.06)}
  .card:hover .mv-old{transform:translateX(-10px)}
  .card:hover .mv-new{transform:translate(8px,-6px)}
  .card:hover .mv-arrow{transform:rotate(180deg)}
  .card:hover .mv-hd{animation:dash 1.2s linear infinite}
  .card:hover .mv-needle{transform:rotate(16deg)}
  .card:hover .mv-bar1{transform:scaleY(1.25)}
  .card:hover .mv-bar2{transform:scaleY(1.18)}
  .card:hover .mv-bar3{transform:scaleY(1.1)}
  .card:hover .mv-bag{transform:translateX(-6px) rotate(-3deg)}
  .card:hover .mv-card{transform:translateY(-10px)}
}
@keyframes dash{to{stroke-dashoffset:-16}}

.why{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 44px}
.why>div{border-top:1px solid var(--line);padding-top:24px}
.why>div:nth-child(even){margin-top:48px}
.why h3{display:flex;gap:12px;align-items:baseline;margin-bottom:12px}
.why h3::before{content:"";width:10px;height:10px;background:var(--flame);border-radius:50%;flex:none}
.why p{opacity:.8}
.ex-vis{margin-top:clamp(32px,4vw,56px);max-width:520px}
.ex-vis svg{display:block;width:100%;height:auto;overflow:visible}
.ex-caret{animation:blink 1.1s steps(1) infinite}
.anim .ex-bar{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0)}
.ex-vis.typed .ex-bar{transform:none;transition:transform .8s var(--ease)}
.ex-card{transition:transform 1s var(--ease)}
@media(max-width:700px){.why{grid-template-columns:1fr}.why>div:nth-child(even){margin-top:0}}

.proj{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:clamp(20px,2.5vw,32px);background:var(--card)}
.proj:nth-of-type(even) .vis{order:2}
.vis{position:relative;min-height:clamp(320px,38vw,470px);display:grid;place-items:center;overflow:hidden;perspective:1300px;color:var(--cream)}
.vis[data-tone="flame"]{background:var(--flame);color:var(--ink)}
.vis[data-tone="cob"]{background:var(--cob)}
.vis[data-tone="ink"]{background:var(--ink)}
.vis-shape{position:absolute;pointer-events:none}
.vs-circle{width:66%;aspect-ratio:1;border-radius:50%;right:-14%;bottom:-26%;background:var(--cream)}
.vs-arch{width:44%;aspect-ratio:1/1.5;border-radius:999px 999px 0 0;left:6%;bottom:-8%;background:rgba(246,240,228,.16)}
.vs-dome{width:54%;aspect-ratio:2/1;border-radius:999px 999px 0 0;right:6%;bottom:-6%;background:var(--flame)}
.vs-dots{inset:0;background:radial-gradient(rgba(246,240,228,.2) 1px,transparent 1.6px) 0 0/22px 22px}
.vis-stage{position:relative;width:min(86%,500px);aspect-ratio:1.22/1;transform-style:preserve-3d}
.mock{position:absolute;left:var(--x);top:var(--y);width:var(--w);transform:translateZ(var(--z,0px))}
.mock-browser{background:#FFFAF0;border-radius:12px;overflow:hidden;box-shadow:0 40px 70px -28px rgba(0,0,0,.5),0 0 0 1px rgba(26,22,20,.1)}
.m-bar{display:flex;gap:6px;padding:9px 12px;border-bottom:1px solid rgba(26,22,20,.1);background:#FFFAF0}
.m-bar i{width:8px;height:8px;border-radius:50%;background:rgba(26,22,20,.2)}.m-bar i:first-child{background:var(--flame)}
.shot{position:relative;overflow:hidden;background:var(--cream)}
.mock-browser .shot{aspect-ratio:16/10}
.mock-phone{aspect-ratio:9/19;background:#1A1614;border-radius:clamp(14px,2.2vw,22px);padding:4px;box-shadow:0 40px 60px -26px rgba(0,0,0,.55),0 0 0 1px rgba(246,240,228,.12)}
.mock-phone .shot{height:100%;border-radius:clamp(11px,1.8vw,18px)}
.shot svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.shot img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:top}
.vis-cap{position:absolute;left:clamp(20px,2.4vw,32px);top:clamp(18px,2.2vw,28px);z-index:3;font:600 1.15rem/1.15 var(--display);letter-spacing:-.02em}
.vis-cap small{display:block;font:400 .88rem var(--text);letter-spacing:0;margin-top:6px;opacity:.8}
.proj dl{margin:0;padding:clamp(26px,3.2vw,48px);align-self:center}
.proj dt{font-weight:500;font-size:.88rem;opacity:.6;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.proj dt:first-child{margin-top:0;padding-top:0;border-top:0}
.proj dd{margin:4px 0 0}
@media(max-width:800px){.proj{grid-template-columns:1fr}.proj:nth-of-type(even) .vis{order:0}.vis{min-height:340px}}

.steps{--p:1;--il-h:84px;display:grid;grid-template-columns:repeat(5,1fr);gap:0 28px;margin:clamp(48px,6vw,84px) 0 0;padding:0;list-style:none;position:relative}
.anim .steps{--p:0}
.steps::before,.steps::after{content:"";position:absolute;left:0;right:0;top:calc(var(--il-h) + 18px + 22px)}
.steps::before{border-top:1px dashed rgba(255,255,255,.5)}
.steps::after{height:2px;margin-top:-1px;background:var(--cream);transform-origin:0 50%;transform:scaleX(var(--p))}
.steps li{padding:0 6px 0 0;position:relative}
.st-il{height:var(--il-h);margin-bottom:18px;--il-line:#F6F0E4;--il-a:var(--flame);--il-b:#F6F0E4;--il-c:var(--cob)}
.st-il svg{display:block;height:100%;width:auto;overflow:visible}
.steps b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--cream);color:var(--ink);font:600 1.05rem var(--display);margin-bottom:24px;position:relative;z-index:1}
.steps h3{margin-bottom:10px}
.steps p{opacity:.9;font-size:.98rem}
.anim .steps [data-dr]{stroke-dasharray:1;stroke-dashoffset:1}
.steps li.in [data-dr]{stroke-dashoffset:0;transition:stroke-dashoffset 1.5s var(--ease) .2s}
@media(max-width:900px){
  .steps{grid-template-columns:1fr;gap:44px;--il-h:64px}
  .steps::before,.steps::after{left:21px;right:auto;top:0;bottom:0}
  .steps::before{border-top:0;border-left:1px dashed rgba(255,255,255,.5)}
  .steps::after{width:2px;height:auto;margin:0 0 0 -1px;transform-origin:50% 0;transform:scaleY(var(--p))}
  .steps li{display:grid;grid-template-columns:44px 1fr;column-gap:28px;padding:0}
  .steps b{grid-column:1;grid-row:1/span 3;margin:0;align-self:start}
  .st-il{grid-column:2;margin-bottom:14px}
  .steps h3,.steps p{grid-column:2}
}

.big{font-size:clamp(1.2rem,2.1vw,1.65rem);line-height:1.4;margin:28px 0 36px;font-weight:400;max-width:30em}
.duo{--il-line:var(--fg);width:100%;max-width:500px;margin-left:auto}
.duo svg{display:block;width:100%;height:auto;overflow:visible}
@media(max-width:900px){.duo{margin:0 auto}}

.fl-bg h2{margin-bottom:26px}
.fl-bg .big{max-width:28ch}
form{background:var(--cream);color:var(--ink);border:1px solid rgba(26,22,20,.14);border-radius:var(--r);padding:clamp(24px,3vw,42px);display:grid;gap:18px;box-shadow:0 50px 90px -50px rgba(26,22,20,.6)}
label{display:grid;gap:7px;font-weight:500;font-size:.93rem}
input,select,textarea{font:inherit;font-weight:400;padding:14px 16px;border:1px solid rgba(26,22,20,.24);border-radius:14px;background:#FFFDF8;color:var(--ink);width:100%;transition:border-color .3s,box-shadow .3s}
input:hover,select:hover,textarea:hover{border-color:rgba(26,22,20,.5)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cob);box-shadow:0 0 0 4px rgba(65,80,184,.16)}
textarea{min-height:130px;resize:vertical}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:560px){.pair{grid-template-columns:1fr}}
.help{font-size:.88rem;opacity:.7;font-weight:400}
#ok{display:none;background:var(--ink);color:var(--cream);padding:15px 18px;border-radius:14px;font-weight:400}
form .btn{justify-self:start}

footer{background:var(--dark);color:var(--cream);overflow:hidden}
footer .mark{font:700 clamp(4.5rem,23vw,17rem)/.82 var(--display);letter-spacing:-.065em;margin:0 0 30px;overflow:hidden;padding-bottom:.06em}
footer .mark i{color:var(--flame);font-style:normal}
footer .legal{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;opacity:.8;font-size:.93rem}
footer .legal span:last-child{display:flex;gap:8px 22px;flex-wrap:wrap}
footer a{text-decoration:none}footer a:hover{text-decoration:underline;text-underline-offset:4px}
.fcta{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border-bottom:1px solid rgba(246,240,228,.2);padding-bottom:44px;margin-bottom:44px}
.fcta p{font:600 clamp(1.8rem,4.2vw,3.2rem)/1.02 var(--display);letter-spacing:-.035em}
.fcols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-bottom:64px}
.fcols .ft{font:500 .9rem var(--text);opacity:.6;margin-bottom:16px}
.fcols ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
@media(max-width:900px){.fcols{grid-template-columns:1fr 1fr}}@media(max-width:560px){.fcols{grid-template-columns:1fr;gap:28px}}
.wa{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:35;padding:12px 20px;--bg-h:var(--flame);box-shadow:0 12px 30px -12px rgba(0,0,0,.5)}
.wa:hover{color:var(--ink)}

html{-webkit-tap-highlight-color:transparent}
input,select,textarea{font-size:16px}
.btn,.burger,summary{min-height:44px}
@media(max-width:700px){.wa{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}footer.sheet{padding-bottom:calc(40px + 64px)}}

.vis-cap a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.more{margin-top:clamp(48px,6vw,88px)}
.more h3{font-size:clamp(1.3rem,2.2vw,1.7rem)}
.more ul{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.more li a,.more li span{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:8px 18px;font-size:.97rem;text-decoration:none;transition:background .4s,color .4s,border-color .4s}
.more li span{opacity:.85}
.more li a:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}

.about-p{margin-top:18px;max-width:34em;opacity:.84}
.about-p a{color:var(--flame);text-underline-offset:4px}
.all-r{margin-top:clamp(28px,4vw,44px)}

.sw{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .06em .14em;margin:-.04em -.06em -.14em}
.si{display:inline-block}
.anim [data-reveal],.anim [data-split],.anim [data-hero]{opacity:0}
.anim .progress i{will-change:transform}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
}