:root { --ink:#0b0b0d; --paper:#f2f0e8; --lime:#caff2f; --violet:#7668ff; --line:#29292d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:#f6f5ef; font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.shell { width:min(1240px, calc(100% - 52px)); margin-inline:auto; }
.header { height:90px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.logo { display:flex; align-items:center; gap:14px; perspective:500px; }
.logo-name { position:relative; font-size:16px; font-weight:900; letter-spacing:.18em; white-space:nowrap; background:linear-gradient(180deg,#fff 0%,#d9d9dc 42%,#77777d 50%,#f8f8fa 73%,#aaaab0 100%); background-clip:text; -webkit-background-clip:text; color:transparent; text-shadow:0 1px 0 #fff,0 3px 0 #35353a,0 6px 10px rgba(0,0,0,.9); transform:rotateX(5deg); }
.logo-name::after { content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px; background:linear-gradient(90deg,transparent,#e20b11 25%,#ff4b51 50%,#e20b11 75%,transparent); box-shadow:0 0 12px rgba(226,11,17,.8); }
.logo-name b { background:linear-gradient(180deg,#ff777b 0%,#f0141b 38%,#780006 52%,#ff3b42 82%,#b00007 100%); background-clip:text; -webkit-background-clip:text; color:transparent; text-shadow:0 2px 0 #610005,0 5px 12px rgba(226,11,17,.55); }
.symbol-crop { display:block; position:relative; width:54px; height:54px; overflow:hidden; border-radius:15px; background:linear-gradient(145deg,#fff,#c8c8cc); border:1px solid rgba(255,255,255,.75); flex:0 0 auto; transform:rotateY(-12deg) rotateX(7deg); box-shadow:1px 1px 0 #b9b9bd,3px 3px 0 #6f6f75,7px 8px 18px rgba(0,0,0,.8),0 0 22px rgba(226,11,17,.18); }
.symbol-crop::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(255,255,255,.75),transparent 35%,transparent 66%,rgba(226,11,17,.18)); pointer-events:none; }
.symbol-crop img { position:absolute; width:93px; max-width:none; left:-19px; top:-10px; filter:contrast(1.18) saturate(1.18) drop-shadow(2px 4px 2px rgba(0,0,0,.25)); }
nav { display:flex; align-items:center; gap:34px; font-size:12px; text-transform:uppercase; letter-spacing:.1em; }
.contact-link { border:1px solid #49494e; border-radius:100px; padding:13px 18px; }
.hero { padding:90px 0 70px; min-height:680px; }
.hero-label,.mini { font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.hero-label { display:flex; align-items:center; gap:10px; color:#a9a9ae; }
.hero-label span { width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 18px var(--lime); }
.hero h1 { font-size:clamp(64px,10vw,142px); line-height:.82; letter-spacing:-.075em; margin:70px 0 50px; }
em { font-family:Georgia,serif; font-weight:400; color:#9388ff; }
.hero-foot { display:flex; justify-content:flex-end; align-items:center; gap:100px; }
.hero-foot p { color:#9f9fa5; line-height:1.65; max-width:460px; font-size:17px; }
.down { width:62px; height:62px; border:1px solid #4a4a50; border-radius:50%; display:grid; place-items:center; font-size:24px; }
.catalog { background:#050506; color:#f4f3ed; padding:110px 0 130px; }
.catalog-head { display:flex; justify-content:space-between; align-items:end; }
.catalog h2,.about h2,.final-cta h2 { font-size:clamp(54px,7.5vw,104px); letter-spacing:-.065em; line-height:.9; margin:20px 0 0; }
.catalog-head p { max-width:400px; color:#8f8f94; line-height:1.6; margin:0; }
.filter-row { display:flex; gap:8px; flex-wrap:wrap; margin:60px 0 28px; padding-bottom:22px; border-bottom:1px solid #29292d; }
.filter-row button { color:#a7a7ac; border:1px solid #39393e; background:transparent; border-radius:100px; padding:11px 18px; cursor:pointer; }
.filter-row button.active { background:var(--lime); color:#09090a; border-color:var(--lime); }
.filter-row small { margin-left:8px; color:#777; }
.product-grid { display:grid; gap:22px; }
.product-card { min-width:0; min-height:650px; border:1px solid #29292d; border-radius:32px; background:#111113; display:grid; grid-template-columns:1fr 480px; align-items:center; overflow:hidden; padding:44px 60px; position:relative; }
.product-card::before { content:""; position:absolute; width:420px; height:420px; right:-80px; top:10%; background:radial-gradient(circle,rgba(118,104,255,.16),transparent 66%); pointer-events:none; }
.product-info { display:flex; flex-direction:column; align-items:flex-start; max-width:490px; position:relative; z-index:2; }
.product-info .number { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:var(--lime); color:#09090a; font-size:13px; font-weight:800; margin-bottom:32px; }
.product-info div>span { text-transform:uppercase; font-size:10px; letter-spacing:.18em; color:#9b9ba1; }
.product-info h3 { font-size:clamp(42px,5vw,72px); letter-spacing:-.055em; line-height:.95; margin:10px 0 20px; }
.product-info p { max-width:390px; color:#8e8e94; line-height:1.6; margin:0; }
.product-info>a { display:flex; align-items:center; justify-content:space-between; min-width:250px; border-radius:100px; padding:15px 20px; font-size:12px; font-weight:700; }
.choose-button { margin-top:40px; background:var(--lime); color:#0a0a0b; }
.product-info>.demo-button { margin-top:10px; color:#f0f0f2; background:#202024; border:1px solid #3b3b40; }
.details-button { margin-top:10px; min-width:250px; padding:14px 20px; color:#e7e7e9; background:transparent; border:1px solid #424247; border-radius:100px; cursor:pointer; text-align:left; transition:.2s; }
.details-button:hover { color:#fff; border-color:#77777f; background:#1a1a1d; }
.phone { justify-self:center; width:310px; height:594px; padding:12px; border-radius:48px; position:relative; display:block; background:linear-gradient(145deg,#33343a,#080809 38%,#26272c); border:2px solid #44454b; box-shadow:0 35px 70px rgba(0,0,0,.55),inset 0 0 0 2px #09090a; z-index:1; transition:transform .3s; }
.phone:hover { transform:translateY(-7px) rotate(1deg); }
.phone-screen { display:block; width:100%; height:100%; overflow:hidden; border-radius:36px; background:white; }
.phone-screen img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.phone-notch { position:absolute; width:116px; height:27px; left:50%; top:11px; transform:translateX(-50%); background:#080809; border-radius:0 0 18px 18px; z-index:3; }
.phone-speaker { position:absolute; width:38px; height:4px; left:50%; top:17px; transform:translateX(-50%); background:#27282c; border-radius:10px; z-index:4; }
.phone-home { position:absolute; width:92px; height:4px; left:50%; bottom:18px; transform:translateX(-50%); background:rgba(0,0,0,.55); border-radius:10px; z-index:4; }
.about { padding:130px 0; }.about>div { display:flex; justify-content:space-between; align-items:end; }
.about h2 { margin-top:35px; }.about p { max-width:340px; line-height:1.6; color:#99999f; margin-bottom:8px; }
.final-cta { background:var(--lime); color:#0b0b0d; text-align:center; padding:110px 0; }
.final-cta h2 { font-size:clamp(60px,9vw,122px); margin:25px 0 45px; }.final-cta em { color:#5c50d9; }
.final-cta a { display:inline-flex; justify-content:space-between; gap:70px; background:#0b0b0d; color:white; border-radius:100px; padding:17px 22px; min-width:255px; font-size:13px; }
footer { min-height:170px; display:flex; justify-content:space-between; align-items:center; font-size:9px; letter-spacing:.14em; color:#8e8e94; }
footer .logo-name { font-size:18px; }
footer .symbol-crop { width:60px; height:60px; }
footer .symbol-crop img { width:93px; left:-19px; top:-10px; }
.modal-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.8); backdrop-filter:blur(8px); }
.details-modal { width:min(620px,100%); position:relative; background:#121214; border:1px solid #37373c; border-radius:26px; padding:34px; box-shadow:0 35px 100px rgba(0,0,0,.65); }
.modal-close { position:absolute; right:22px; top:22px; width:42px; height:42px; display:grid; place-items:center; color:#fff; background:#1d1d20; border:1px solid #3d3d43; border-radius:50%; font-size:24px; cursor:pointer; }
.modal-category { color:var(--lime); font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.details-modal h2 { margin:9px 55px 4px 0; font-size:36px; letter-spacing:-.04em; }
.details-modal>p { margin:0 0 24px; color:#8f8f95; }
.features { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.features div { min-height:52px; display:flex; align-items:center; gap:10px; padding:12px; color:#d2d2d6; background:#18181b; border:1px solid #34343a; border-radius:13px; font-size:12px; font-weight:700; text-transform:uppercase; }
.features div span { width:24px; height:24px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:var(--lime); color:#09090a; }
.modal-choose,.modal-demo { display:flex; align-items:center; justify-content:space-between; width:100%; padding:16px 19px; border-radius:100px; font-size:12px; font-weight:700; }
.modal-choose { margin-top:22px; background:var(--lime); color:#09090a; }
.modal-demo { margin-top:9px; background:#202024; color:#f3f3f5; border:1px solid #3b3b40; }
:is(.contact-link,.down,.filter-row button,.choose-button,.demo-button,.details-button,.modal-choose,.modal-demo,.final-cta a) { position:relative; overflow:hidden; transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,filter .22s ease; }
:is(.contact-link,.down,.filter-row button,.choose-button,.demo-button,.details-button,.modal-choose,.modal-demo,.final-cta a)::after { content:""; position:absolute; inset:-40% auto -40% -45%; width:32%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent); transform:skewX(-18deg); transition:left .48s ease; pointer-events:none; }
:is(.contact-link,.down,.filter-row button,.choose-button,.demo-button,.details-button,.modal-choose,.modal-demo,.final-cta a):hover { transform:translateY(-3px) scale(1.015); box-shadow:0 12px 26px rgba(0,0,0,.3),0 0 18px rgba(202,255,47,.14); filter:brightness(1.08); }
:is(.contact-link,.down,.filter-row button,.choose-button,.demo-button,.details-button,.modal-choose,.modal-demo,.final-cta a):hover::after { left:120%; }
:is(.contact-link,.down,.filter-row button,.choose-button,.demo-button,.details-button,.modal-choose,.modal-demo,.final-cta a):active { transform:translateY(0) scale(.98); }
:is(.contact-link,.down,.filter-row button,.choose-button,.demo-button,.details-button,.modal-choose,.modal-demo,.final-cta a):focus-visible { outline:2px solid var(--lime); outline-offset:4px; }
.modal-close { transition:transform .22s ease,background .22s ease,border-color .22s ease; }
.modal-close:hover { transform:rotate(90deg) scale(1.08); background:#2b2b30; border-color:#77777e; }

@media(max-width:760px){
  .shell{width:calc(100% - 30px)}.header{height:72px}.header .logo{gap:8px}.header .logo-name{font-size:11px;letter-spacing:.12em}.header .symbol-crop{width:40px;height:40px;border-radius:11px}.header .symbol-crop img{width:69px;left:-14px;top:-7px}nav>a:not(.contact-link){display:none}.contact-link{padding:10px 11px;font-size:9px}
  .hero{padding-top:70px;min-height:610px}.hero h1{font-size:clamp(58px,21vw,84px);margin:70px 0 50px}.hero-foot{display:block}.down{margin:28px 0 0 auto}
  .catalog{padding:80px 0}.catalog-head{display:block}.catalog-head p{margin-top:30px}.filter-row{margin-top:40px}.product-grid{gap:16px}.product-card{grid-template-columns:1fr;min-height:0;padding:38px 24px 30px;gap:40px}.product-info h3{font-size:48px}.choose-button{margin-top:28px}.phone{width:276px;height:530px}.details-modal{padding:28px 20px}.features{grid-template-columns:1fr}
  .about{padding:90px 0}.about>div{display:block}.about p{margin-top:35px}.final-cta{padding:85px 0}footer{padding:38px 0;min-height:220px;align-items:flex-start;flex-direction:column}
}
@media(max-width:430px){.product-card{border-radius:24px}.product-info h3{font-size:42px}.phone{width:248px;height:476px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.phone,:is(.contact-link,.down,.filter-row button,.choose-button,.demo-button,.details-button,.modal-choose,.modal-demo,.final-cta a),.modal-close{transition:none}:is(.contact-link,.down,.filter-row button,.choose-button,.demo-button,.details-button,.modal-choose,.modal-demo,.final-cta a)::after{display:none}}