:root{
  --bg:#050505;--surface:#151515;--paper:#f4f4f2;--white:#fff;--ink:#101010;
  --muted:#666;--line:rgba(255,255,255,.10);--line-light:#e5e5e1;
  --blue:#2563eb;--blue-hover:#1d4ed8;--green:#16a34a;--radius:16px;
  --shadow:0 20px 60px rgba(0,0,0,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:var(--paper);color:var(--ink);line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:min(1160px,calc(100% - 40px));margin:0 auto}
.top{position:sticky;top:0;z-index:50;background:rgba(5,5,5,.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.top-inner{height:72px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:#fff;letter-spacing:-.02em;white-space:nowrap}
.brand img{width:34px;height:34px;border-radius:9px}
.nav{margin-left:auto;display:flex;align-items:center;gap:22px;color:#d8d8d8;font-size:14px}
.nav a:hover{color:#fff}
.lang{position:relative}
.lang-btn{background:#151515;border:1px solid var(--line);color:#fff;border-radius:10px;padding:9px 11px;cursor:pointer;font-weight:600}
.lang-menu{display:none;position:absolute;right:0;top:46px;background:#111;border:1px solid var(--line);border-radius:12px;padding:8px;min-width:170px;box-shadow:var(--shadow)}
.lang.open .lang-menu{display:grid}
.lang-menu a{color:#ddd;padding:8px 10px;border-radius:8px;font-size:14px}
.lang-menu a:hover{background:#1f1f1f;color:#fff}
.hero{background:
 radial-gradient(circle at 77% 26%,rgba(37,99,235,.18),transparent 27%),
 radial-gradient(circle at 16% 12%,rgba(255,255,255,.06),transparent 23%),
 var(--bg);color:#fff;padding:84px 0 64px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
.eyebrow,.kicker{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#9db9ff}
.hero h1{font-size:clamp(42px,6vw,72px);line-height:1.02;letter-spacing:-.055em;margin:18px 0 22px;max-width:820px}
.hero p{font-size:19px;color:#c8c8c8;max-width:720px;margin:0 0 28px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 20px;border-radius:12px;font-weight:750;border:1px solid transparent}
.btn.primary{background:var(--blue);color:#fff}
.btn.primary:hover{background:var(--blue-hover)}
.btn.secondary{border-color:rgba(255,255,255,.2);color:#fff;background:rgba(255,255,255,.04)}
.price-line{display:flex;align-items:baseline;gap:10px;margin-top:28px;flex-wrap:wrap}
.price-line strong{font-size:22px}
.price-line span{color:#999;font-size:14px}
.trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:24px;color:#bbb;font-size:13px}
.trust span::before{content:"✓";color:#8fbcff;font-weight:900;margin-right:7px}
.device-stage{position:relative;display:grid;place-items:center;min-height:570px}
.device-glow{position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(37,99,235,.16);filter:blur(45px)}
.phone{position:relative;width:min(315px,78vw);aspect-ratio:9/17.2;border-radius:40px;background:#0c0c0c;border:1px solid #3a3a3a;padding:10px;box-shadow:0 36px 90px rgba(0,0,0,.55);transform:rotate(2deg)}
.phone::before{content:"";position:absolute;top:17px;left:50%;transform:translateX(-50%);width:76px;height:20px;border-radius:20px;background:#050505;z-index:2}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:31px}
.section{padding:92px 0}
.section.white{background:#fff}
.section.dark{background:#0a0a0a;color:#fff}
.section-head{max-width:760px;margin-bottom:44px}
.section h2{font-size:clamp(34px,4.2vw,52px);line-height:1.08;letter-spacing:-.04em;margin:10px 0 16px}
.section-head p,.lead{font-size:18px;color:#666;margin:0}
.dark .section-head p,.dark .lead{color:#b9b9b9}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--line-light);border-radius:var(--radius);padding:26px;min-height:180px}
.card.dark-card{background:#151515;border-color:var(--line)}
.icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#eef3ff;color:var(--blue);font-weight:900;margin-bottom:20px}
.dark-card .icon{background:#172554;color:#9db9ff}
.card h3{margin:0 0 9px;font-size:19px}
.card p{margin:0;color:#6d6d6d}
.dark-card p{color:#aaa}
.split{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.panel{border-radius:24px;padding:38px;background:#fff;border:1px solid var(--line-light)}
.panel.dark-panel{background:#111;color:#fff;border-color:var(--line)}
.panel h2{font-size:36px}
.panel p{color:#666}
.dark-panel p{color:#aaa}
.checks{display:grid;gap:12px;margin:26px 0 0;padding:0;list-style:none}
.checks li{display:flex;gap:10px}
.checks li::before{content:"✓";color:var(--blue);font-weight:900}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.step{background:#fff;border:1px solid var(--line-light);border-radius:16px;padding:24px}
.step-num{font-size:12px;font-weight:800;color:var(--blue);letter-spacing:.13em;margin-bottom:15px}
.compat{background:linear-gradient(135deg,#0b0b0b,#141414);color:#fff;border-radius:28px;padding:44px;display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}
.compat p{color:#bbb}
.compat-list{display:grid;gap:12px}
.compat-list div{background:#191919;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.disabled-cta{display:inline-flex;margin-top:22px;border:1px solid rgba(255,255,255,.14);color:#aaa;padding:12px 16px;border-radius:10px;font-size:14px}
.pricing{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:stretch}
.price-card{border-radius:26px;background:#050505;color:#fff;padding:42px;border:1px solid #222}
.big-price{font-size:64px;font-weight:800;letter-spacing:-.06em;line-height:1}
.per{color:#aaa;margin-top:6px}
.price-card p{color:#bbb}
.note{font-size:13px;color:#8a8a8a;margin-top:18px}
.languages{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.pill{border:1px solid var(--line-light);background:#fff;border-radius:999px;padding:9px 13px;font-weight:650}
.faq{display:grid;gap:10px}
details{background:#fff;border:1px solid var(--line-light);border-radius:14px;padding:0 20px}
summary{cursor:pointer;font-weight:700;padding:20px 0}
details p{color:#666;margin:0 0 20px}
.footer{background:#050505;color:#aaa;padding:42px 0}
.footer-inner{display:flex;justify-content:space-between;gap:30px;align-items:center}
.footer .brand{color:#fff}
.footer-small{font-size:13px}
.mobile-menu{display:none;margin-left:auto;background:#151515;border:1px solid var(--line);color:#fff;border-radius:10px;width:42px;height:42px}
@media(max-width:900px){
  .nav{display:none}.mobile-menu{display:block}.top-inner{gap:10px}
  .hero{padding-top:58px}.hero-grid{grid-template-columns:1fr}.device-stage{min-height:470px}
  .cards{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}
  .split,.compat,.pricing{grid-template-columns:1fr}
}
@media(max-width:620px){
  .wrap{width:min(100% - 28px,1160px)}.top-inner{height:64px}
  .hero h1{font-size:42px}.hero p{font-size:17px}.device-stage{min-height:410px}
  .phone{width:240px}.cards,.steps{grid-template-columns:1fr}.section{padding:68px 0}
  .panel,.compat,.price-card{padding:28px}.footer-inner{align-items:flex-start;flex-direction:column}
}



/* VVKIOSK_PRODUCT_SCREEN_BEGIN */
.product-preview{
  min-height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.product-screen{
  position:relative;
  z-index:2;
  width:min(760px,58vw);
  max-width:none;
  height:auto;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    0 34px 90px rgba(0,0,0,.58),
    0 0 0 1px rgba(255,255,255,.03);
  transform:perspective(1200px) rotateY(-5deg) rotateX(1deg);
  transition:transform .3s ease, box-shadow .3s ease;
}

.product-screen:hover{
  transform:perspective(1200px) rotateY(-2deg) rotateX(0deg) scale(1.01);
  box-shadow:
    0 40px 105px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,255,255,.05);
}

@media(max-width:1100px){
  .hero-grid{
    grid-template-columns:1fr;
  }

  .product-preview{
    min-height:auto;
    margin-top:12px;
  }

  .product-screen{
    width:100%;
    max-width:920px;
    transform:none;
  }

  .product-screen:hover{
    transform:scale(1.005);
  }
}

@media(max-width:620px){
  .product-screen{
    border-radius:14px;
  }
}
/* VVKIOSK_PRODUCT_SCREEN_END */

/* VVKIOSK_HERO_PREMIUM_BEGIN */

.hero{
  padding:88px 0 72px;
}

.hero-grid{
  display:grid;
  grid-template-columns:1fr !important;
  gap:46px;
  align-items:start;
}

.hero-grid > div:first-child{
  width:min(100%, 1050px);
  margin:0 auto;
  text-align:center;
}

.hero .eyebrow{
  margin-bottom:18px;
}

.hero h1{
  max-width:1000px;
  margin:0 auto 24px;
  font-size:clamp(46px,5.1vw,78px);
  line-height:1.02;
  letter-spacing:-.055em;
  text-wrap:balance;
}

.hero p{
  max-width:820px;
  margin:0 auto 28px;
  font-size:20px;
  line-height:1.55;
  color:#c8c8c8;
}

.hero .actions{
  justify-content:center;
  margin:30px 0 22px;
}

.hero .price-line{
  justify-content:center;
  margin-top:22px;
}

.hero .trust{
  justify-content:center;
  margin-top:18px;
}

.product-preview{
  width:100%;
  min-height:0 !important;
  margin:2px auto 0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.product-preview .device-glow{
  width:min(880px,72vw);
  height:360px;
  opacity:.9;
  filter:blur(70px);
}

.product-screen{
  width:min(100%, 1260px) !important;
  max-width:1260px !important;
  height:auto;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:
    0 30px 90px rgba(0,0,0,.52),
    0 0 0 1px rgba(255,255,255,.025);
  transform:none !important;
  transition:transform .25s ease, box-shadow .25s ease;
}

.product-screen:hover{
  transform:translateY(-2px) scale(1.003) !important;
  box-shadow:
    0 38px 100px rgba(0,0,0,.60),
    0 0 0 1px rgba(255,255,255,.04);
}

@media(max-width:900px){
  .hero{
    padding:64px 0 54px;
  }

  .hero-grid{
    gap:34px;
  }

  .hero h1{
    font-size:clamp(40px,9vw,62px);
  }

  .hero p{
    font-size:18px;
  }

  .product-screen{
    border-radius:18px;
  }
}

@media(max-width:620px){
  .hero{
    padding:50px 0 42px;
  }

  .hero h1{
    font-size:40px;
    line-height:1.04;
  }

  .hero p{
    font-size:17px;
  }

  .hero .actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  .hero .btn{
    width:100%;
  }

  .hero .price-line{
    flex-direction:column;
    align-items:center;
    gap:3px;
  }

  .hero .trust{
    gap:10px 16px;
  }

  .product-screen{
    border-radius:14px;
  }
}

/* VVKIOSK_HERO_PREMIUM_END */

/* VVKIOSK_HOME_SECTIONS_PREMIUM_BEGIN */

/* General section rhythm */
.section{
  position:relative;
  padding:104px 0;
}

.section.white{
  background:
    linear-gradient(180deg,rgba(255,255,255,1),rgba(248,248,246,1));
}

.section.dark{
  background:
    radial-gradient(circle at 75% 18%,rgba(37,99,235,.10),transparent 28%),
    #090909;
}

.section-head{
  max-width:820px;
  margin:0 auto 52px;
  text-align:center;
}

.section-head .kicker{
  display:inline-block;
  margin-bottom:10px;
}

.section-head h2{
  margin:0 0 16px;
}

.section-head p{
  max-width:720px;
  margin:0 auto;
}

/* Feature cards */
.cards{
  gap:20px;
}

.card{
  position:relative;
  overflow:hidden;
  min-height:210px;
  padding:30px;
  border-radius:18px;
  background:rgba(255,255,255,.94);
  border:1px solid #e6e6e2;
  box-shadow:0 10px 35px rgba(0,0,0,.045);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.card::after{
  content:"";
  position:absolute;
  inset:auto -40px -70px auto;
  width:150px;
  height:150px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,235,.09),transparent 68%);
  pointer-events:none;
}

.card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 48px rgba(0,0,0,.075);
  border-color:#d6ddf1;
}

.card .icon{
  width:46px;
  height:46px;
  border-radius:13px;
  font-size:12px;
  letter-spacing:.05em;
}

.card h3{
  font-size:20px;
  margin-bottom:10px;
}

.card p{
  line-height:1.62;
}

/* Family / business */
.split{
  gap:22px;
}

.panel{
  min-height:100%;
  padding:44px;
  border-radius:26px;
  box-shadow:0 18px 55px rgba(0,0,0,.06);
}

.panel:not(.dark-panel){
  background:
    linear-gradient(145deg,#ffffff,#f6f6f3);
}

.panel.dark-panel{
  background:
    radial-gradient(circle at 88% 12%,rgba(37,99,235,.18),transparent 30%),
    #101010;
  box-shadow:0 24px 68px rgba(0,0,0,.18);
}

.panel h2{
  font-size:clamp(32px,3.4vw,46px);
  line-height:1.08;
  letter-spacing:-.04em;
  margin:12px 0 18px;
}

.panel p{
  font-size:17px;
  line-height:1.65;
}

.checks{
  gap:14px;
}

.checks li{
  align-items:flex-start;
  line-height:1.5;
}

.checks li::before{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:22px;
  height:22px;
  margin-top:1px;
  border-radius:50%;
  background:#eef3ff;
  color:#2563eb;
  font-size:12px;
}

.dark-panel .checks li::before,
.price-card .checks li::before{
  background:#172554;
  color:#9db9ff;
}

/* Steps */
.steps{
  gap:18px;
}

.step{
  position:relative;
  min-height:230px;
  padding:28px;
  border-radius:18px;
  background:#fff;
  box-shadow:0 12px 40px rgba(0,0,0,.05);
  transition:transform .22s ease, box-shadow .22s ease;
}

.step:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 50px rgba(0,0,0,.075);
}

.step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:11px;
  background:#eef3ff;
  margin-bottom:20px;
}

.step h3{
  font-size:20px;
  margin:0 0 10px;
}

.step p{
  color:#6c6c6c;
  line-height:1.62;
}

/* Compatibility CTA */
.compat{
  padding:52px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 32px 90px rgba(0,0,0,.28);
}

.compat h2{
  margin-top:10px;
}

.compat-list{
  gap:14px;
}

.compat-list div{
  display:flex;
  align-items:center;
  min-height:54px;
  padding:15px 17px;
  background:rgba(255,255,255,.045);
}

.disabled-cta{
  border-color:rgba(157,185,255,.26);
  background:rgba(37,99,235,.10);
  color:#dbe7ff;
  transition:.2s ease;
}

.disabled-cta:hover{
  background:rgba(37,99,235,.18);
  border-color:rgba(157,185,255,.42);
}

/* Price */
.pricing{
  align-items:center;
  gap:56px;
}

.big-price{
  font-size:clamp(58px,7vw,86px);
  line-height:.95;
}

.price-card{
  padding:46px;
  border-radius:28px;
  background:
    radial-gradient(circle at 90% 10%,rgba(37,99,235,.17),transparent 32%),
    #080808;
  box-shadow:0 32px 85px rgba(0,0,0,.20);
}

.price-card .checks{
  margin-top:0;
}

.price-card .checks li{
  font-size:17px;
}

.languages{
  gap:8px;
}

.pill{
  padding:8px 12px;
  background:#fff;
  border-color:#deded9;
  box-shadow:0 4px 14px rgba(0,0,0,.035);
}

/* FAQ */
.faq{
  max-width:900px;
  margin:0 auto;
  gap:12px;
}

details{
  padding:0 24px;
  border-radius:15px;
  box-shadow:0 8px 28px rgba(0,0,0,.035);
  transition:border-color .2s ease, box-shadow .2s ease;
}

details[open]{
  border-color:#ccd8f8;
  box-shadow:0 14px 38px rgba(0,0,0,.055);
}

summary{
  position:relative;
  list-style:none;
  padding:22px 34px 22px 0;
  font-size:16px;
}

summary::-webkit-details-marker{
  display:none;
}

summary::after{
  content:"+";
  position:absolute;
  right:2px;
  top:50%;
  transform:translateY(-50%);
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f0f3fb;
  color:#2563eb;
  font-size:18px;
  font-weight:700;
}

details[open] summary::after{
  content:"–";
}

details p{
  padding-right:34px;
  line-height:1.65;
}

/* Footer refinement */
.footer{
  padding:52px 0;
  border-top:1px solid rgba(255,255,255,.08);
}

.footer-inner{
  min-height:72px;
}

/* responsive */
@media(max-width:900px){
  .section{
    padding:82px 0;
  }

  .section-head{
    margin-bottom:40px;
  }

  .panel{
    padding:34px;
  }

  .compat{
    padding:36px;
  }

  .pricing{
    gap:34px;
  }
}

@media(max-width:620px){
  .section{
    padding:64px 0;
  }

  .section-head{
    margin-bottom:32px;
  }

  .card,
  .step{
    padding:24px;
  }

  .panel{
    padding:28px;
    border-radius:20px;
  }

  .compat{
    padding:28px;
    border-radius:22px;
  }

  .price-card{
    padding:30px;
    border-radius:22px;
  }
}

/* VVKIOSK_HOME_SECTIONS_PREMIUM_END */