:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#646464;
  --line:#e9e9e9;
  --orange:#ff7a00;
  --orange-2:#ff9f1c;
  --yellow:#ffd400;
  --cyan:#00c8c8;
  --cyan-dark:#008f91;
  --magenta:#e8007c;
  --shadow:0 22px 55px rgba(0,0,0,.12);
  --radius:28px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--text);
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px clamp(18px,4vw,58px);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.brand{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:clamp(30px,4vw,48px);
  font-weight:900;
  letter-spacing:-.06em;
  line-height:1;
}
.brand-dot{width:9px;height:9px;border-radius:2px;display:inline-block;margin-top:24px}
.dot-cyan{background:var(--cyan)}
.dot-magenta{background:var(--magenta)}
.nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nav a{
  padding:10px 14px;
  color:#303030;
  font-weight:700;
  border-radius:999px;
  transition:.2s ease;
}
.nav a:hover{background:#f3f3f3;color:#000}
.menu-btn{display:none;background:transparent;border:0;gap:5px;flex-direction:column;padding:8px}
.menu-btn span{display:block;width:26px;height:3px;background:#111;border-radius:99px}

.section-pad{padding:clamp(54px,8vw,110px) clamp(18px,5vw,72px)}
.hero{
  position:relative;
  overflow:hidden;
  min-height:calc(100vh - 80px);
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(310px,.98fr);
  gap:clamp(30px,5vw,70px);
  align-items:center;
}
.hero-bg-shape{
  position:absolute;
  height:56px;
  width:390px;
  transform:rotate(-45deg);
  border-radius:4px;
  right:-60px;
  opacity:.95;
  box-shadow:0 16px 40px rgba(0,0,0,.13);
}
.shape-orange{top:105px;background:linear-gradient(90deg,#ff5f00,var(--orange));}
.shape-yellow{top:165px;background:linear-gradient(90deg,#ffd400,#ffe45a);right:-5px}
.shape-cyan{top:225px;background:linear-gradient(90deg,#00d4cf,#00a8a9);right:-105px}
.hero-content{position:relative;z-index:2}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 14px;
  color:var(--orange);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:13px;
}
h1,h2,h3,p{margin-top:0}
h1{
  max-width:780px;
  font-size:clamp(46px,8vw,98px);
  line-height:.95;
  letter-spacing:-.075em;
  margin-bottom:20px;
}
h2{
  font-size:clamp(32px,5vw,62px);
  line-height:1;
  letter-spacing:-.055em;
  margin-bottom:18px;
}
h3{font-size:24px;margin-bottom:10px;letter-spacing:-.03em}
p{color:var(--muted);line-height:1.65;font-size:17px}
.hero-copy{max-width:650px;font-size:clamp(18px,2vw,24px);color:#202020;font-weight:600}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:32px 0}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:14px 22px;
  border-radius:999px;
  font-weight:900;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background:linear-gradient(135deg,var(--orange),var(--orange-2));
  color:#fff;
  box-shadow:0 15px 30px rgba(255,122,0,.28);
}
.btn-secondary{background:#fff;color:#111;border:1px solid var(--line)}
.btn-large{font-size:18px;padding:16px 28px}
.hero-stats{display:grid;grid-template-columns:1fr .85fr;gap:16px;max-width:680px}
.stat-card,.price-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.07);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
  padding:22px;
  min-height:160px;
}
.big-stat{position:relative;display:grid;grid-template-columns:auto auto 1fr;align-items:end;gap:8px;overflow:hidden}
.big-stat strong{font-size:clamp(68px,10vw,116px);letter-spacing:-.08em;line-height:.8}
.big-stat span:not(.old-speed){font-size:clamp(24px,3vw,42px);font-weight:900;align-self:center}
.big-stat small{grid-column:2/4;color:#222;font-size:20px;margin-left:8px}
.old-speed{font-size:42px!important;color:#9b9b9b;font-weight:900;text-decoration:line-through;opacity:.7;align-self:center}
.price-card{display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,#fff,#fff6eb)}
.price-card small{text-transform:uppercase;color:var(--orange);font-weight:900;letter-spacing:.08em}
.price-card strong{font-size:clamp(70px,11vw,130px);line-height:.85;color:var(--orange);letter-spacing:-.08em}
.price-card span{font-size:24px;font-weight:900;color:#111}
.image-frame{
  position:relative;
  z-index:1;
  background:#fff;
  padding:14px;
  border-radius:34px;
  box-shadow:0 28px 80px rgba(0,0,0,.15);
  border:1px solid rgba(0,0,0,.06);
}
.image-frame img{
  width:100%;
  border-radius:24px;
  object-fit:contain;
  background:#fff;
}
.section-heading{text-align:center;max-width:850px;margin:0 auto 34px}
.logo-strip{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:34px;
}
.logo-strip span{
  padding:12px 18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  font-weight:900;
  box-shadow:0 10px 25px rgba(0,0,0,.06);
}
.logo-strip span:nth-child(1){background:var(--cyan);color:#fff;border-color:transparent}
.logo-strip span:nth-child(3){background:#043b4b;color:#fff;border-color:transparent}
.logo-strip span:nth-child(5){background:#111;color:#fff;border-color:transparent}
.logo-strip span:nth-child(6){background:#fff;color:#ef242b;border-color:#f0f0f0}
.cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.info-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  min-height:230px;
  box-shadow:0 18px 45px rgba(0,0,0,.07);
  transition:.2s ease;
}
.info-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card-icon{font-size:38px;margin-bottom:22px;display:inline-flex}
.worldcup{padding-top:20px}
.worldcup-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  background:
    radial-gradient(circle at 10% 20%,rgba(255,212,0,.32),transparent 28%),
    radial-gradient(circle at 82% 20%,rgba(0,200,200,.22),transparent 30%),
    linear-gradient(135deg,#111,#272727);
  color:#fff;
  border-radius:36px;
  padding:clamp(32px,5vw,64px);
  overflow:hidden;
  position:relative;
}
.worldcup-card:after{
  content:"";
  position:absolute;
  right:-70px;
  top:50%;
  width:240px;
  height:240px;
  transform:translateY(-50%) rotate(45deg);
  background:linear-gradient(90deg,var(--orange),var(--yellow),var(--cyan));
  opacity:.18;
}
.worldcup-card h2{max-width:780px;color:#fff}
.worldcup-card p:not(.eyebrow){max-width:780px;color:#e7e7e7}
.visual-banner{overflow:hidden;background:#fafafa;border-block:1px solid var(--line);padding:16px 0}
.banner-track{display:flex;gap:18px;white-space:nowrap;animation:move 22s linear infinite;width:max-content}
.banner-track span{font-size:clamp(22px,4vw,44px);font-weight:900;color:#111;letter-spacing:-.06em;padding:0 6px}
.banner-track span:nth-child(odd){color:var(--orange)}
@keyframes move{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.contact-card{
  display:grid;
  grid-template-columns:1fr auto;
  gap:28px;
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:36px;
  padding:clamp(30px,5vw,60px);
  box-shadow:var(--shadow);
}
.contact-card p{max-width:720px}
.footer{
  padding:32px clamp(18px,5vw,72px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
}
.footer p{margin:0;font-size:14px;color:#777}

@media (max-width:980px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:70px}
  .hero-visual{max-width:720px;margin:auto}
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .worldcup-card,.contact-card{grid-template-columns:1fr}
}
@media (max-width:720px){
  .nav{
    display:none;
    position:absolute;
    top:100%;
    left:16px;
    right:16px;
    flex-direction:column;
    align-items:stretch;
    background:#fff;
    border:1px solid var(--line);
    border-radius:22px;
    padding:12px;
    box-shadow:var(--shadow);
  }
  .nav.open{display:flex}
  .menu-btn{display:flex}
  .hero-stats{grid-template-columns:1fr}
  .cards-grid{grid-template-columns:1fr}
  .hero-bg-shape{opacity:.28;right:-180px}
  h1{font-size:52px}
  .old-speed{font-size:32px!important}
  .footer{display:block;text-align:center}
  .footer p+p{margin-top:8px}
}