:root {
  --accent:#7c4db1; --accent-soft:#d7b4f3; --ink:#17121c;
  --muted:#6c6572; --paper:#fbf9fd; --line:#e9e1ef;
  --hero:#1a1123; --hero2:#30203e;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--paper);font-family:Inter,Manrope,"Segoe UI",Arial,sans-serif}
a{color:inherit}
.wrap{width:min(1160px,calc(100% - 40px));margin:auto}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:24px 0}
.logo{width:135px;filter:brightness(0) invert(1)}
.topbar nav{display:flex;align-items:center;gap:22px}
.topbar nav>a{text-decoration:none;font-size:14px;font-weight:700}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;background:var(--accent);color:#fff;text-decoration:none;font-weight:800;box-shadow:0 14px 35px #30194942}
.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 79% 29%,color-mix(in srgb,var(--accent) 45%,transparent),transparent 32%),linear-gradient(135deg,var(--hero),var(--hero2));color:#fff}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;min-height:680px;gap:30px;padding:75px 0 90px}
.eyebrow{margin-bottom:18px;color:var(--accent-soft);font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.hero h1{max-width:690px;margin:0;font-size:clamp(48px,6vw,82px);line-height:1.02;letter-spacing:-.055em}
.hero h1 em{color:var(--accent-soft);font-style:normal}
.hero p{max-width:600px;margin:25px 0 32px;color:#ffffffc9;font-size:18px;line-height:1.72}
.product-price{display:flex;align-items:baseline;gap:8px;width:max-content;max-width:100%;margin:-12px 0 28px;padding:11px 17px;border:1px solid #ffffff33;border-radius:16px;background:#ffffff12}
.product-price span{color:#ffffffb8;font-size:13px;font-weight:700}
.product-price strong{font-size:22px}
.product-price small{color:#ffffffa8}
.hero-art img{display:block;width:108%;max-width:none;border-radius:28px;filter:drop-shadow(0 38px 45px #0008);transform:rotate(-2deg)}
.squadrax-page .hero-art{display:flex;align-items:center;justify-content:center;padding:40px 0}
.squadrax-page .phone-mockup{position:relative;width:min(315px,82%);padding:11px;border:2px solid #ffffff3d;border-radius:52px;background:linear-gradient(145deg,#f3eef7 0%,#bdb4c5 18%,#211c25 42%,#080709 100%);box-shadow:0 45px 70px #0009,0 0 0 1px #0008,inset 0 0 0 2px #ffffff2b;transform:rotate(3deg)}
.squadrax-page .phone-mockup::before,.squadrax-page .phone-mockup::after{content:"";position:absolute;right:-5px;width:4px;border-radius:0 4px 4px 0;background:#a99fb0}
.squadrax-page .phone-mockup::before{top:126px;height:64px}
.squadrax-page .phone-mockup::after{top:211px;height:88px}
.squadrax-page .phone-island{position:absolute;z-index:2;top:22px;left:50%;width:92px;height:25px;border-radius:99px;background:#070608;transform:translateX(-50%);box-shadow:0 1px 2px #ffffff2b}
.squadrax-page .phone-mockup img{display:block;width:100%;max-width:none;border-radius:42px;filter:none;transform:none}
.contact{display:block;margin-top:14px;color:#ffffffad;font-size:14px}
.section{padding:100px 0}
.section h2{max-width:760px;margin:0;font-size:clamp(38px,5vw,62px);line-height:1.08;letter-spacing:-.045em}
.lead{max-width:760px;color:var(--muted);font-size:18px;line-height:1.75}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.card{padding:30px;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 18px 44px #49345e0a}
.card b{display:block;margin-bottom:10px;font-size:20px}
.card p{margin:0;color:var(--muted);line-height:1.65}
.pricing{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:44px;padding:54px;border:1px solid var(--line);border-radius:32px;background:#fff;box-shadow:0 24px 65px #49345e10}
.pricing h2{font-size:clamp(36px,5vw,58px)}
.pricing-box{padding:30px;border-radius:24px;background:linear-gradient(135deg,var(--hero),var(--hero2));color:#fff}
.pricing-box span{display:block;color:#ffffffad;font-weight:700}
.pricing-box strong{display:block;margin:8px 0 2px;font-size:clamp(38px,5vw,58px);letter-spacing:-.04em}
.pricing-box small{color:#ffffffa8}
.pricing-box .button{margin-top:22px;background:#fff;color:var(--accent);box-shadow:none}
.price-note{margin-top:16px;color:var(--muted);font-size:13px;line-height:1.6}
.cta-panel{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:52px;border-radius:32px;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 72%,#fff));color:#fff}
.cta-panel h2{font-size:clamp(32px,4vw,50px)}
.cta-panel p{margin-bottom:0;color:#ffffffc7}
.cta-panel .button{background:#fff;color:var(--accent);box-shadow:none}
.other-products{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.other-products a{padding:12px 18px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--accent);font-weight:800;text-decoration:none}
.footer{padding:45px 0;color:#756d7a;font-size:14px}
.footer-row{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:30px}
.footer a{color:var(--accent);font-weight:800}
@media(max-width:820px){
  .topbar nav>a:not(.button){display:none}
  .hero-grid{grid-template-columns:1fr;min-height:auto;padding:55px 0 75px}
  .hero-art{order:0}
  .hero-art img{width:100%;max-width:650px;max-height:280px;margin:24px auto 0;object-fit:cover;transform:none}
  .squadrax-page .hero-art{padding:12px 0 4px}
  .squadrax-page .phone-mockup{width:min(270px,72vw);padding:9px;border-radius:44px;transform:rotate(2deg)}
  .squadrax-page .phone-mockup img{width:100%;max-width:none;max-height:none;margin:0;border-radius:36px;object-fit:contain}
  .squadrax-page .phone-island{top:18px;width:78px;height:22px}
  .features{grid-template-columns:1fr 1fr}
  .pricing{grid-template-columns:1fr;padding:36px}
  .cta-panel{align-items:flex-start;flex-direction:column}
}
@media(max-width:560px){
  .wrap{width:min(100% - 28px,1160px)}
  .logo{width:112px}
  .topbar{padding:18px 0}
  .topbar nav{gap:10px}
  .topbar nav .button{min-height:42px;padding:0 16px;font-size:12px}
  .hero h1{font-size:43px}
  .hero p,.lead{font-size:16px}
  .product-price{align-items:flex-start;flex-direction:column;gap:2px}
  .section{padding:74px 0}
  .features{grid-template-columns:1fr}
  .pricing{padding:28px 22px}
  .cta-panel{padding:32px 24px}
  .footer-row{flex-direction:column}
}