:root{
  --bg: #ffffff;
  --bg-soft: #f5f5f7;
  --text: #1d1d1f;
  --text-soft: #6e6e73;
  --accent: #0071e3;
  --accent-dark: #0059b3;
  --radius-lg: 35px;
  --radius-md: 15px;
}

*{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{text-decoration:none;color:inherit;}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,0.8);
  backdrop-filter:saturate(180%) blur(20px);
}
.topbar-inner{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 32px;
}
.logo{font-weight:700;font-size:20px;letter-spacing:-0.02em;}
.nav{display:flex;gap:32px;}
.nav a{font-size:13px;font-weight:500;color:var(--text-soft);transition:color .2s;}
.nav a:hover{color:var(--text);}
.btn-login{
  background:var(--text);color:#fff;
  padding:9px 22px;border-radius:999px;
  font-size:13px;font-weight:600;
  transition:opacity .2s;
}
.btn-login:hover{opacity:.8;}

/* ---------- Hero ---------- */
.hero{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;gap:60px;
  padding:100px 32px 60px;
}
.hero-inner{flex:1;}
.eyebrow{
  display:inline-block;
  font-size:13px;font-weight:600;color:var(--accent);
  background:rgba(0,113,227,.08);
  padding:6px 16px;border-radius:999px;
  margin-bottom:20px;
}
.hero h1{
  font-size:56px;font-weight:800;letter-spacing:-0.03em;
  line-height:1.05;margin-bottom:20px;
}
.hero-sub{
  font-size:19px;color:var(--text-soft);max-width:460px;margin-bottom:32px;
}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;}

.btn-primary{
  background:var(--accent);color:#fff;
  padding:14px 28px;border-radius:var(--radius-md);
  font-weight:600;font-size:16px;
  display:inline-block;transition:background .2s, transform .2s;
  border:none;
}
.btn-primary:hover{background:var(--accent-dark);transform:translateY(-1px);}
.btn-secondary{
  background:var(--bg-soft);color:var(--text);
  padding:14px 28px;border-radius:var(--radius-md);
  font-weight:600;font-size:16px;
  display:inline-block;transition:background .2s;
}
.btn-secondary:hover{background:#e8e8ed;}
.btn-large{padding:18px 40px;font-size:18px;}

.hero-visual{flex:1;display:flex;justify-content:center;}
.device-card{
  position:relative;width:280px;height:380px;
  background:linear-gradient(160deg,#1d1d1f,#3a3a3c);
  border-radius:var(--radius-lg);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.device-glow{
  position:absolute;width:200px;height:200px;
  background:radial-gradient(circle, rgba(0,113,227,.5), transparent 70%);
  filter:blur(20px);
}
.device-screen{
  position:relative;width:220px;height:320px;
  background:linear-gradient(160deg,#0071e3,#00c6ff);
  border-radius:var(--radius-md);
}

/* ---------- Stats ---------- */
.stats{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:24px;padding:40px 32px;
}
.stat{
  background:var(--bg-soft);
  border-radius:var(--radius-md);
  padding:28px 20px;text-align:center;
}
.stat-num{display:block;font-size:28px;font-weight:800;letter-spacing:-0.02em;}
.stat-label{font-size:13px;color:var(--text-soft);}

/* ---------- Services ---------- */
.services{max-width:1200px;margin:80px auto;padding:0 32px;text-align:center;}
.services h2{font-size:36px;font-weight:800;letter-spacing:-0.02em;margin-bottom:12px;}
.section-sub{color:var(--text-soft);font-size:17px;max-width:520px;margin:0 auto 48px;}

/* ---------- Виджет "Перейти в панель" — показывается в шапке сайта, если
   в этом же браузере параллельно открыта сессия сотрудника/владельца ---------- */
.account-menu{position:relative;}
.account-menu-trigger{
  display:flex;align-items:center;gap:10px;background:var(--bg-soft);border:none;cursor:pointer;
  padding:5px 16px 5px 5px;border-radius:999px;font-family:inherit;transition:background .15s;
}
.account-menu-trigger:hover{background:#ececee;}
.account-avatar-ring{
  position:relative;width:36px;height:36px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.account-avatar-ring::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, #ff3b30, #ffd60a, #ff9500, #ff3b30, #ffd60a, #ff3b30);
  animation:staffRingSpin 3.2s linear infinite;
}
.account-avatar{
  position:relative;z-index:1;width:30px;height:30px;border-radius:50%;
  background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:12px;border:3px solid #fff;
}
@keyframes staffRingSpin{to{transform:rotate(360deg);}}
.account-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;text-align:left;display:block;}
.account-name-sub{display:block;font-size:11px;font-weight:500;color:var(--text-soft);text-align:left;}
.account-menu-dropdown{
  position:absolute;top:calc(100% + 10px);right:0;background:#fff;border-radius:16px;
  box-shadow:0 16px 46px rgba(0,0,0,.18);min-width:200px;padding:6px;z-index:200;display:none;
}
.account-menu-dropdown.cw-open{display:block;}
.account-menu-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  font-size:13px;font-weight:600;color:var(--text);text-decoration:none;
}
.account-menu-item:hover{background:var(--bg-soft);}
.account-menu-item svg{width:16px;height:16px;color:var(--text-soft);flex-shrink:0;}

/* ---------- Промокод на главной ---------- */
.promo-section{max-width:1200px;margin:0 auto;padding:0 32px;}
.promo-card{
  background:var(--bg-soft);border-radius:var(--radius-lg);
  padding:40px;text-align:center;max-width:520px;margin:0 auto;
}
.promo-card h2{font-size:28px;font-weight:800;letter-spacing:-0.02em;margin-bottom:8px;}
.promo-entry-row{display:flex;gap:10px;max-width:360px;margin:0 auto;}
.promo-entry-row input{
  flex:1;padding:14px 18px;border:1px solid #e5e5ea;border-radius:var(--radius-md);
  font-size:16px;font-family:inherit;text-transform:uppercase;letter-spacing:.05em;
  outline:none;background:#fff;
}
.promo-entry-row input:focus{border-color:var(--accent);}
.promo-entry-row .btn-primary{padding:14px 22px;white-space:nowrap;}
.promo-entry-message{margin-top:12px;font-size:13px;font-weight:600;min-height:1em;}
.promo-entry-message.error{color:#ff3b30;}

.promo-reward-line{
  font-size:16px;font-weight:700;color:var(--text);background:#fff;
  border-radius:var(--radius-md);padding:16px 20px;margin-bottom:12px;
}
.promo-login-hint{color:var(--text-soft);font-size:13px;margin-bottom:20px;}
.promo-login-form{display:flex;flex-direction:column;gap:10px;max-width:320px;margin:0 auto;}
.promo-login-form input{
  padding:14px 18px;border:1px solid #e5e5ea;border-radius:var(--radius-md);
  font-size:15px;font-family:inherit;outline:none;background:#fff;
}
.promo-login-form input:focus{border-color:var(--accent);}
.promo-login-form .btn-primary{border:none;cursor:pointer;font-family:inherit;}
.promo-login-msg{color:#ff3b30;font-size:13px;font-weight:600;min-height:1em;margin:0;}
.promo-register-link{
  display:inline-block;margin-top:16px;font-size:13px;font-weight:600;color:var(--accent);
  text-decoration:none;
}
.promo-register-link:hover{text-decoration:underline;}

@media (max-width:640px){
  .promo-card{padding:28px 20px;}
  .promo-entry-row{flex-direction:column;}
}

.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;text-align:left;
}
.card{
  background:var(--bg-soft);
  border-radius:var(--radius-lg);
  padding:32px;transition:transform .25s, box-shadow .25s;
}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.06);}
.card h3{font-size:19px;font-weight:700;margin-bottom:8px;}
.card p{font-size:15px;color:var(--text-soft);}
.card-icon{
  width:48px;height:48px;border-radius:14px;
  background:var(--accent);margin-bottom:20px;
  opacity:.9;
}

/* ---------- Shop promo ---------- */
.shop-promo{
  max-width:1200px;margin:80px auto;padding:0 32px;
  background:var(--bg-soft);
  border-radius:var(--radius-lg);
  display:flex;align-items:center;gap:40px;
  padding:60px;
}
.shop-promo-text{flex:1;}
.shop-promo h2{font-size:32px;font-weight:800;letter-spacing:-0.02em;margin:12px 0;}
.shop-promo p{color:var(--text-soft);margin-bottom:24px;max-width:400px;}
.shop-promo-grid{
  flex:1;display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.promo-tile{
  aspect-ratio:1;border-radius:var(--radius-md);
  background:linear-gradient(160deg,#e8e8ed,#d2d2d7);
}
.promo-tile:nth-child(2){background:linear-gradient(160deg,#0071e3,#00c6ff);}
.promo-tile:nth-child(3){background:linear-gradient(160deg,#1d1d1f,#3a3a3c);}

/* ---------- Delivery ---------- */
.delivery{max-width:1200px;margin:80px auto;padding:0 32px;}
.delivery h2{font-size:36px;font-weight:800;letter-spacing:-0.02em;text-align:center;margin-bottom:48px;}
.delivery-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;}
.delivery-col{padding:24px;}
.delivery-step{font-size:13px;font-weight:700;color:var(--accent);}
.delivery-col h3{font-size:19px;font-weight:700;margin:12px 0 8px;}
.delivery-col p{color:var(--text-soft);font-size:15px;}

/* ---------- CTA ---------- */
.cta-final{
  max-width:1200px;margin:40px auto 100px;padding:80px 32px;
  background:linear-gradient(160deg,#1d1d1f,#3a3a3c);
  border-radius:var(--radius-lg);
  text-align:center;color:#fff;
}
.cta-final h2{font-size:36px;font-weight:800;letter-spacing:-0.02em;margin-bottom:12px;}
.cta-final p{color:#a1a1a6;margin-bottom:28px;}

/* ---------- Footer ---------- */
.footer{border-top:1px solid #f0f0f0;padding:32px;}
.footer-inner{
  max-width:1200px;margin:0 auto;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;
  font-size:13px;color:var(--text-soft);
}
.footer-links{display:flex;gap:20px;}

@media (max-width:900px){
  .hero{flex-direction:column;padding-top:60px;}
  .hero h1{font-size:40px;}
  .shop-promo{flex-direction:column;padding:32px;}
  .stats{grid-template-columns:repeat(2,1fr);}
}

/* Динамический логотип в публичной шапке */
.logo .site-logo-img{
  display:block;
  max-width:180px;
  max-height:48px;
  width:auto;
  height:auto;
  object-fit:contain;
}