:root { --bg:#070707; --ink:#f4f4f4; --muted:#b0b0b0; --line:rgba(255,255,255,.16); --paper:#f4f4f4; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 Arial, Helvetica, sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button, input, select, textarea { font:inherit; color:inherit; }
h1, h2 { font-family:"Arial Black", Arial, sans-serif; letter-spacing:-.03em; text-transform:uppercase; line-height:1.05; margin:0; }
h1 { font-size:clamp(48px, 7.4vw, 96px); }
h2 { font-size:clamp(34px, 4.6vw, 62px); }
p { margin:0 0 12px; }
.wrap { width:min(1140px, calc(100% - 36px)); margin:0 auto; }
.header { position:sticky; top:0; z-index:20; background:rgba(7,7,7,.94); border-bottom:1px solid var(--line); }
.header-inner { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.logo { display:flex; align-items:center; gap:10px; color:#fff; }
.avatar { width:46px; height:46px; border:1px solid rgba(255,255,255,.7); border-radius:50%; display:grid; place-items:center; overflow:hidden; background:#070707; }
.avatar img { width:30px; height:26px; object-fit:contain; }
.word { font-family:"Arial Black", Arial, sans-serif; font-size:28px; letter-spacing:-.04em; line-height:1; }
.nav { display:flex; gap:8px; padding:6px; border:1px solid var(--line); border-radius:999px; }
.nav a { padding:8px 14px; border-radius:999px; font-size:14px; }
.nav a:hover { background:#fff; color:#111; }
.menu { display:none; background:transparent; color:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 12px; }
.sky { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.drop { position:absolute; top:-8vh; color:rgba(255,255,255,.55); font-size:11px; animation:fall linear infinite; display:flex; align-items:center; gap:4px; }
.drop img { width:14px; height:12px; }
@keyframes fall { from { transform:translateY(-10vh); opacity:0; } 12% { opacity:.8; } to { transform:translateY(110vh); opacity:.15; } }
main, footer, .header { position:relative; z-index:1; }
.hero { padding:62px 0 28px; display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:36px; align-items:end; }
html, body { max-width:100%; overflow-x:hidden; }
.hero > * { min-width:0; max-width:100%; }
.kicker-line { overflow:hidden; width:100%; max-width:100%; margin:14px 0 16px; }
.kicker-line span { display:inline-block; white-space:nowrap; animation:slide 16s linear infinite; }
.kicker { font-size:18px; margin:14px 0 16px; max-width:480px; }
.sub { font-family:"Arial Black", Arial, sans-serif; font-size:clamp(26px,3.6vw,42px); text-transform:uppercase; line-height:1.05; margin-top:12px; }
.muted { color:var(--muted); }
.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.btn { display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:999px; background:#fff; color:#111; padding:12px 18px; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease; }
.btn:hover { transform:translateY(-2px) scale(1.03); box-shadow:0 0 0 5px rgba(255,255,255,.12); }
.btn.ghost { background:transparent; color:#fff; border:1px solid #fff; }
.btn.ghost:hover { background:#fff; color:#111; }
.stage { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:24px; min-height:460px; padding:28px; background:#070707; }
.shine { position:absolute; top:-20%; width:22%; height:160%; left:-30%; pointer-events:none; background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-18deg); animation:across 3.6s linear infinite; }
@keyframes across { from { left:-30%; } to { left:120%; } }
.stage.follow .shine { animation:none; }
.typed:after { content:""; display:inline-block; width:1px; height:.9em; margin-left:2px; background:#fff; vertical-align:-1px; animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.phone { overflow:hidden; }
.app { transform-origin:50% 110%; animation:dock 5s ease-in-out infinite; }
.homebar { position:absolute; left:50%; bottom:10px; width:48px; height:4px; transform:translateX(-50%); border-radius:4px; background:#fff; }
@keyframes dock { 0%,42% { transform:none; } 58%,74% { transform:translateY(86px) scale(.46); } 90%,100% { transform:none; } }
.marquee { overflow:hidden; }
.marquee-track { display:flex; gap:10px; width:max-content; animation:slide 28s linear infinite; }
.extra-card { width:250px; flex:0 0 250px; }
@keyframes slide { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.dark-strip { width:min(1100px, calc(100% - 48px)); margin:36px auto 0; border-radius:24px; background:#070707; color:#f4f4f4; padding:28px 18px 32px; }
.face, .face b, .face span { color:#111; }
.face.back, .face.back b, .face.back span { color:#f4f4f4; }
.devices { position:relative; z-index:1; min-height:390px; }
.laptop { position:relative; width:min(100%, 340px); }
.screen { background:#0c0c0c; border:9px solid #d5d5d5; border-bottom-width:12px; border-radius:14px 14px 4px 4px; min-height:220px; padding:16px; }
.screen h3, .phone h3 { margin:18px 0 8px; line-height:1.1; }
.screen h3 { font-size:30px; }
.screen p, .phone p { color:#d0d0d0; }
.base { height:14px; background:linear-gradient(#e4e4e4, #9c9c9c); border-radius:0 0 12px 12px; }
.phone { position:absolute; right:6px; bottom:0; width:148px; height:286px; border-radius:30px; border:7px solid #f2f2f2; background:#0c0c0c; padding:28px 12px 12px; }
.phone h3 { font-size:18px; }
.strip { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; padding:22px 0 8px; }
.svc, .step, .faq { text-align:left; background:#111; color:#fff; border:1px solid var(--line); border-radius:16px; padding:16px; cursor:pointer; }
.svc b { display:block; margin:0 0 8px; }
.svc .muted { display:block; }
.paper h2 { margin-bottom:16px; }
.paper > .wrap > p { margin-bottom:22px; line-height:1.75; }
.svc:hover, .step:hover, .faq:hover { border-color:#fff; }
.more { max-height:0; overflow:hidden; opacity:0; transition:max-height .6s ease, opacity .6s ease, margin .6s ease; }
.open .more { max-height:240px; opacity:1; margin-top:8px; }
.faq { transition:background .35s ease, border-color .35s ease; }
.band { padding:72px 0; }
.paper { background:var(--paper); color:#141414; }
.split { display:grid; grid-template-columns:.9fr 1.1fr; gap:36px; }
.step, .faq { width:100%; display:grid; grid-template-columns:1fr 34px; gap:12px; background:transparent; border:0; border-top:1px solid var(--line); border-radius:0; }
.paper .item, .paper .faq { border-top-color:#ddd; }
.chev { width:28px; height:28px; border:1px solid currentColor; border-radius:50%; display:grid; place-items:center; transition:transform .35s ease, background .2s ease, color .2s ease; }
.open .chev { transform:rotate(90deg); background:#fff; color:#111; }
.extra-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.extra-card { background:#fff; border:1px solid #ddd; border-radius:16px; padding:16px; min-height:170px; }
.extra-card b { display:block; margin:0 0 8px; font-size:18px; }
.extra-card span { display:block; line-height:1.65; color:#333; }
.dark-strip .script-card { border-color:#333; color:#fff; }
.item h3, .step h3, .faq h3 { margin:0 0 6px; font-size:22px; }
.reviews { padding:72px 0 8px; }
.review-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:22px; }
.review { border:1px solid #ddd; border-radius:18px; padding:18px; background:#fff; min-height:210px; }
.review b { display:block; margin-bottom:4px; }
.review span { display:block; color:#666; font-size:14px; margin-bottom:12px; }
.review p { margin:0; line-height:1.7; }
.benefits { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
.flip { width:100%; min-width:0; height:210px; border:0; background:transparent; padding:0; perspective:1000px; cursor:pointer; text-align:left; }
.inner { position:relative; display:block; height:100%; transform-style:preserve-3d; transition:transform .7s ease; }
.flip.on .inner { transform:rotateY(180deg); }
.face { position:absolute; inset:0; padding:18px; border-radius:18px; border:1px solid #d7d7d7; background:#fff; backface-visibility:hidden; }
.face.back { transform:rotateY(180deg); background:#161616; color:#f4f4f4; }
.flip:hover .face { box-shadow:0 0 0 1px #111, 0 12px 24px rgba(0,0,0,.08); }
.sticker { position:absolute; right:14px; bottom:14px; width:28px; height:28px; border:1px solid currentColor; border-radius:50%; display:grid; place-items:center; }
.script-card { border:1px solid #d7d7d7; border-radius:18px; padding:18px; display:grid; align-items:center; font-family:"Segoe Script","Brush Script MT",cursive; font-size:34px; }
.contact-side { min-width:0; }
.contact { display:grid; grid-template-columns:.85fr 1.15fr; gap:28px; align-items:start; }
.contact-row { display:grid; grid-template-columns:auto 108px; gap:6px; align-items:center; justify-content:start; }
.qr { width:108px; height:108px; object-fit:contain; display:block; margin:0; }
.search { flex:1; max-width:460px; margin:0 22px; border:0; padding:0; background:transparent; box-shadow:none; display:block; }
.search:hover { border:0; transform:none; box-shadow:none; }
.search input { width:100%; background:#111 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 16px 50% / 18px no-repeat; color:#fff; border:1px solid rgba(255,255,255,.55); border-radius:999px; padding:12px 18px 12px 44px; }
.contact { align-items:start; }
.hand { display:block; white-space:normal; overflow:hidden; font-family:"Segoe Script","Brush Script MT",cursive; font-size:28px; line-height:1.25; color:#fff; min-height:4.2em; }
.consent { display:flex; align-items:center; gap:8px; font-size:14px; }
.consent input { width:auto; }
.consent a { text-decoration:underline; }
form { display:grid; grid-template-columns:1fr 1fr; gap:12px; border:1px solid var(--line); border-radius:20px; padding:22px; background:#101010; position:relative; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
form:hover { border-color:#fff; transform:translateY(-4px); box-shadow:0 0 0 1px #fff, 0 20px 50px rgba(255,255,255,.08); }
form h3 { grid-column:1 / -1; margin:0; font-size:28px; }
label { display:grid; gap:6px; font-size:14px; }
.name, .wide { grid-column:1 / 2; }
.wide { grid-column:1 / -1; }
input, select, textarea { width:100%; background:#070707; color:#fff; border:1px solid #2c2c2c; border-radius:12px; padding:12px; }
textarea { min-height:110px; }
.ok { grid-column:1 / -1; border:1px solid #8d8; border-radius:10px; padding:10px 12px; }
footer { border-top:1px solid var(--line); padding:34px 0 16px; background:#0c0c0c; }
.foot { display:grid; grid-template-columns:1.4fr .7fr 1fr; gap:24px; }
.foot a, .foot p { display:block; color:var(--muted); margin:0 0 8px; }
.bottom { display:flex; justify-content:space-between; margin-top:18px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; }
.inview { opacity:1 !important; transform:none !important; }
section.wait { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
@media (max-width:1100px) {
  h1 { font-size:40px; }
  h2 { font-size:30px; }
  .wrap { width:min(1140px, calc(100% - 24px)); }
  .header-inner { flex-wrap:wrap; min-height:64px; padding:10px 0; }
  .menu { display:inline-flex; margin-left:auto; }
  .search { order:3; flex:1 1 100%; max-width:none; margin:8px 0 4px; }
  .nav { display:none; position:absolute; left:12px; right:12px; top:108px; z-index:30; flex-direction:column; background:#111; border-radius:16px; padding:10px; }
  .nav.open { display:flex; }
  .hero, .split, .contact, .foot, .strip, .benefits, form { grid-template-columns:1fr; }
  .hero { padding-top:28px; }
  .stage { min-height:0; padding:16px; overflow:hidden; }
  .devices { height:auto; }
  .laptop, .phone { position:static; max-width:100%; }
  .laptop { width:100%; }
  .phone { width:168px; height:300px; margin:16px auto 0; }
  .screen h3 { font-size:24px; }
  .dark-strip { width:calc(100% - 24px); }
  .contact-row { grid-template-columns:1fr; }
  .qr { width:120px; height:120px; }
  .name, .wide, form h3, form .btn, .ok { grid-column:1 / -1; }
  .bottom { flex-direction:column; gap:8px; }
  .hand { font-size:24px; min-height:0; }
  .marquee-track { animation-duration:18s; }
}