:root { --ink: #0f1720; --ink2: #18222d; --cream: #f4efe6; --paper: #fbf8f3; --soft: #aab4bf; --muted: #4f5862; --acc: #ff5a36; --acc-dk: #c2410c; --line: rgba(244,239,230,.12); --line2: #e4ddd2; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
@supports (overflow: clip) { html { overflow-x: clip; } }
.hero { overflow: hidden; }
body { margin: 0; background: var(--ink); color: var(--cream); font: 400 17px/1.6 'Inter', system-ui, sans-serif; padding-bottom: 72px; }
h1, h2, h3 { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; margin: 0; line-height: 1.02; letter-spacing: -.03em; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.pad { padding-top: 96px; padding-bottom: 8px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 20px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -.02em; }
.top nav { display: flex; align-items: center; gap: 24px; font-size: 15px; }
.top nav a:not(.btn) { text-decoration: none; color: var(--soft); }
.top nav a:not(.btn):hover { color: var(--cream); }
@media (max-width: 860px) { .top nav a:not(.btn) { display: none; } }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border-radius: 999px; font: inherit; font-weight: 600; text-decoration: none; border: 1.5px solid rgba(244,239,230,.35); color: var(--cream); background: transparent; cursor: pointer; }
.btn.main { background: var(--acc); border-color: var(--acc); color: #fff; }
.top .cta { min-height: 42px; padding: 0 18px; font-size: 14px; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero { padding: 40px 0 90px; }
.hero.small { padding: 50px 0 80px; }
.herogrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 48px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--soft); }
.eyebrow:before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); }
.hero h1 { font-size: clamp(46px, 8vw, 96px); line-height: .98; letter-spacing: -.035em; margin-top: 18px; max-width: 13ch; }
.hero h1 em { font-style: normal; color: var(--acc); }
.hero p.l { font-size: 20px; color: #c9d0d8; max-width: 38ch; margin: 22px 0 0; }
.guarantee { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; border: 1px solid var(--line); border-radius: 999px; padding: 8px 18px 8px 8px; font-size: 15px; color: #c9d0d8; }
.guarantee b { background: var(--acc); color: #fff; border-radius: 999px; padding: 3px 12px; font-family: 'Space Grotesk', sans-serif; }
.phonewrap { position: relative; display: flex; justify-content: center; align-items: center; min-height: 640px; }
.ring { position: absolute; border-radius: 50%; border: 1px solid rgba(244,239,230,.09); }
.r1 { width: 500px; height: 500px; } .r2 { width: 360px; height: 360px; }
@media (max-width: 560px) { .r1 { width: min(340px, 88vw); height: min(340px, 88vw); } .r2 { width: min(260px, 68vw); height: min(260px, 68vw); } }
.phone { position: relative; width: 280px; height: 540px; border-radius: 44px; background: #05090d; border: 1px solid rgba(244,239,230,.18); padding: 12px; box-shadow: 0 40px 80px rgba(0,0,0,.45); }
.screen { height: 100%; border-radius: 34px; background: var(--paper); overflow: hidden; color: var(--ink); }
.ph-top { background: var(--cream); padding: 24px 18px 16px; }
.ph-top small { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.ph-top strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 20px; line-height: 1.05; margin: 8px 0 12px; }
.pill { display: inline-block; background: var(--acc); color: #fff; border-radius: 999px; padding: 7px 13px; font-size: 12px; font-weight: 700; margin-right: 6px; }
.pill.o { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.ph-img { height: 150px; background: linear-gradient(135deg, #d8cfc2, #ece5da); display: grid; place-items: center; color: var(--muted); font-size: 12px; font-weight: 600; }
.ph-cards { padding: 14px 18px; display: grid; gap: 10px; }
.ph-cards div { background: #fff; border: 1px solid var(--line2); border-radius: 14px; padding: 10px 12px; }
.ph-cards b { display: block; font-size: 14px; } .ph-cards span { font-size: 12px; color: var(--muted); }
.badge { position: absolute; background: var(--ink2); border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; font-size: 14px; color: var(--soft); box-shadow: 0 20px 40px rgba(0,0,0,.35); }
.badge em { font-style: normal; font-weight: 700; color: var(--acc); }
.b1 { left: 0; bottom: 0; } .b2 { right: 0; top: 0; }
@media (max-width: 560px) { .badge { display: none; } }
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-top: 22px; padding-bottom: 22px; font-family: 'Space Grotesk', sans-serif; font-size: 20px; }
.strip a { text-decoration: none; color: var(--soft); } .strip a:hover { color: var(--cream); }
.num { font-family: 'Space Grotesk', sans-serif; color: var(--acc); font-size: 14px; letter-spacing: .14em; }
.light .num { color: var(--acc-dk); }
section h2 { font-size: clamp(36px, 5.5vw, 60px); margin-top: 10px; max-width: 18ch; }
.sub { color: var(--soft); margin: 16px 0 0; max-width: 56ch; font-size: 18px; }
.light .sub { color: var(--muted); }
.steps { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; counter-reset: s; }
.steps li { counter-increment: s; background: var(--ink2); border: 1px solid var(--line); border-radius: 22px; padding: 28px; }
.steps li:before { content: "0" counter(s); display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 46px; color: var(--acc); line-height: 1; }
.steps b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 23px; margin-top: 16px; }
.steps span { display: block; color: var(--soft); margin-top: 8px; }
.light { background: var(--cream); color: var(--ink); border-radius: 40px 40px 0 0; margin-top: 96px; padding-bottom: 96px; }
.light .pad { padding-top: 90px; }
.gap { margin-top: 90px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; margin-top: 36px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid div { background: var(--paper); border: 1px solid var(--line2); border-radius: 20px; padding: 24px; color: var(--ink); }
.pad > .grid div { background: var(--ink2); border-color: var(--line); color: var(--cream); }
.pad > .grid div p { color: var(--soft); }
.grid h3 { font-size: 21px; } .grid p { margin: 8px 0 0; color: var(--muted); font-size: 16px; }
.aud { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; margin-top: 36px; }
.aud a { display: flex; flex-direction: column; gap: 10px; text-decoration: none; background: var(--ink); color: var(--cream); border-radius: 22px; padding: 26px; min-height: 230px; }
.aud a:hover { background: #1c2834; }
.aud b { font-family: 'Space Grotesk', sans-serif; font-size: 24px; }
.aud span { color: var(--soft); font-size: 15px; flex: 1; }
.aud i { font-style: normal; color: var(--acc); font-weight: 600; }
.aud.dark a { background: var(--ink2); border: 1px solid var(--line); }
.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; margin-top: 36px; }
.price { background: var(--ink); color: var(--cream); border-radius: 26px; padding: 30px; }
.price.feat { background: var(--acc); color: #fff; }
.price i { font-style: normal; font-weight: 600; opacity: .85; }
.price b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 62px; line-height: 1; margin: 14px 0 10px; }
.price span { opacity: .9; }
.note { color: var(--muted); font-size: 15px; margin-top: 16px; }
.link { color: var(--acc-dk); font-weight: 600; text-decoration: none; }
.projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; margin-top: 36px; }
.projects div { border: 1.5px dashed rgba(244,239,230,.25); border-radius: 22px; padding: 28px; min-height: 240px; display: flex; flex-direction: column; justify-content: flex-end; }
.projects b { font-family: 'Space Grotesk', sans-serif; font-size: 22px; } .projects span { color: var(--soft); }
.about { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 48px; }
.big { font-size: 19px; color: #c9d0d8; margin: 20px 0 0; }
.facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; align-content: start; }
.facts li { border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; color: var(--soft); }
.facts b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 19px; color: var(--cream); }
.ctabox { margin-top: 96px; background: var(--ink2); border: 1px solid var(--line); border-radius: 32px; padding: clamp(26px, 5vw, 56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 32px; align-items: center; }
.ctabox h2 { margin-top: 0; }
.ctabox.form { margin-top: 0; align-items: start; }
form { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
input, textarea, select { font: inherit; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--cream); background: var(--ink); border: 1px solid rgba(244,239,230,.18); border-radius: 14px; padding: 14px; }
textarea { min-height: 110px; resize: vertical; }
.fine { color: var(--soft); font-size: 14px; margin: 0; }
.foot { margin-top: 96px; border-top: 1px solid var(--line); padding: 40px 0 36px; color: var(--soft); font-size: 14px; }
.foot p { margin: 10px 0 18px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.foot nav a { text-decoration: none; } .foot nav a:hover { color: var(--cream); }
.bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(15,23,32,.96); border-top: 1px solid var(--line); z-index: 5; }
.bar .btn { flex: 1; min-height: 46px; }
@media (min-width: 760px) { .bar { display: none; } body { padding-bottom: 0; } }

/* ---- Motion & interaction (site.js) ---- */
.top { position: sticky; top: 0; z-index: 10; transition: background .3s, box-shadow .3s; }
.top:before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: transparent; transition: background .3s, backdrop-filter .3s; }
.top.stuck:before { background: rgba(15,23,32,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.btn { position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s, background .2s, border-color .2s; }
.btn:hover { transform: translateY(-2px); border-color: rgba(244,239,230,.7); }
.btn.main:hover { box-shadow: 0 12px 30px rgba(255,90,54,.35); }
.btn.main:after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); }
.btn.main:hover:after { animation: shine .8s ease; }
@keyframes shine { to { left: 130%; } }
.hero h1 em { background: linear-gradient(var(--acc), var(--acc)) 0 92% / 0 .08em no-repeat; animation: underline 1s .6s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes underline { to { background-size: 100% .08em; } }
.guarantee b { animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,90,54,.55); } 50% { box-shadow: 0 0 0 9px rgba(255,90,54,0); } }
.phonewrap { flex-direction: column; perspective: 1200px; }
.tilt { transition: transform .4s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; }
.phone { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.ring { animation: breathe 7s ease-in-out infinite; }
.r2 { animation-delay: -3.5s; }
@keyframes breathe { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: 1.05; opacity: .5; } }
.r1:after { content: ""; position: absolute; top: 50%; left: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 16px var(--acc); }
.r1 { animation: breathe 7s ease-in-out infinite, spin 24s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.badge { animation: bob 5s ease-in-out infinite; }
.b2 { animation-delay: -2.5s; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.b1 { bottom: 64px; }
.screen > * { transition: opacity .26s, transform .26s; }
.screen.swap > * { opacity: 0; transform: translateY(8px); }
.ph-img { transition: background .5s, color .5s; }
.pill { transition: transform .2s; } .phone:hover .pill:first-child { transform: scale(1.06); }
.chips { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.chips button { font: inherit; font-size: 14px; font-weight: 600; color: var(--soft); background: var(--ink2); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; min-height: 40px; cursor: pointer; transition: color .2s, background .2s, border-color .2s, transform .2s; }
.chips button:hover { color: var(--cream); transform: translateY(-1px); }
.chips button[aria-pressed="true"] { background: var(--acc); border-color: var(--acc); color: #fff; }
.strip { overflow: hidden; }
.strip .track { display: flex; width: max-content; animation: ticker 32s linear infinite; }
.strip:hover .track { animation-play-state: paused; }
.strip .run { display: flex; align-items: center; gap: 32px; padding: 22px 16px; font-family: 'Space Grotesk', sans-serif; font-size: 22px; }
.strip .run i { font-style: normal; color: var(--acc); font-size: 14px; }
.strip a { white-space: nowrap; transition: color .2s; }
@keyframes ticker { to { transform: translateX(-50%); } }
.steps li, .aud a, .price, .grid > div { transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, background .3s, border-color .3s; }
.steps li:hover, .aud a:hover, .price:hover, .grid > div:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(0,0,0,.28); }
.light .grid > div:hover, .light .aud a:hover { box-shadow: 0 24px 50px rgba(15,23,32,.16); }
.aud a i { transition: transform .25s; } .aud a:hover i { transform: translateX(6px); }
.steps li:hover:before { animation: wiggle .5s; }
@keyframes wiggle { 30% { transform: rotate(-8deg) scale(1.1); } 60% { transform: rotate(5deg); } }
.glow { position: relative; isolation: isolate; }
.glow:after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .3s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255,90,54,.16), transparent 70%); }
.glow:hover:after { opacity: 1; }
.price.feat.glow:after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.22), transparent 70%); }
.js .rise { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), transform .7s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), box-shadow .3s, background .3s; }
.js .rise.in { opacity: 1; transform: none; }
.js .rise.in:hover { transition-delay: 0ms; }
.js .steps li.rise.in:hover, .js .aud a.rise.in:hover, .js .price.rise.in:hover, .js .grid > div.rise.in:hover { transform: translateY(-6px); }
.hero .eyebrow, .hero h1, .hero p.l, .hero .btns, .hero .guarantee { animation: enter .8s cubic-bezier(.2,.7,.2,1) both; }
.hero h1 { animation-delay: .08s; } .hero p.l { animation-delay: .16s; } .hero .btns { animation-delay: .24s; } .hero .guarantee { animation-delay: .32s; }
.hero h1 em { animation: underline 1s .7s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes enter { from { opacity: 0; transform: translateY(22px); } }
input, textarea, select { transition: border-color .2s, box-shadow .2s; }
input:focus, textarea:focus, select:focus { border-color: var(--acc); box-shadow: 0 0 0 4px rgba(255,90,54,.15); outline: none; }
@media (max-width: 560px) { .r1:after { display: none; } .phonewrap { min-height: 0; padding: 30px 0 10px; } .chips { gap: 6px; } .chips button { padding: 8px 12px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .rise { opacity: 1; transform: none; }
  .hero h1 em { background-size: 100% .08em; }
  .strip .track { width: auto; } .strip .run[aria-hidden] { display: none; } .strip .run { flex-wrap: wrap; }
}
.btn { white-space: nowrap; }
@media (max-width: 360px) { .top .cta { padding: 0 14px; } .brand { font-size: 20px; } .bar .btn { padding: 0 12px; } }
.price i.from { display: block; margin-top: 14px; font-size: 15px; opacity: .7; }
.price i.from + b { margin-top: 0; }