:root{
  --bg: #0b1220;
  --bg-soft:#0e1528;
  --card: rgba(255,255,255,0.06);
  --card-strong: rgba(255,255,255,0.1);
  --text:#e6edf6;
  --muted:#9fb0c9;
  --accent:#6ee7ff;
  --accent-2:#7c5cff;
  --ok:#34d399;
  --warn:#f59e0b;
  --bad:#ef4444;
  --shadow: 0 10px 35px rgba(0,0,0,.35);
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 26px;
  --focus: 0 0 0 3px rgba(110,231,255,.35), 0 10px 25px rgba(110,231,255,.12);
}
:root.light{
  --bg:#f7fafc;
  --bg-soft:#f3f6fb;
  --card: rgba(2,6,23,0.06);
  --card-strong: rgba(2,6,23,0.12);
  --text:#0b1220;
  --muted:#48566b;
  --accent:#0ea5e9;
  --accent-2:#7c5cff;
  --ok:#059669;
  --warn:#b45309;
  --bad:#b91c1c;
  --shadow: 0 6px 22px rgba(15,23,42,.15);
  --focus: 0 0 0 3px rgba(14,165,233,.35), 0 8px 18px rgba(14,165,233,.15);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1000px 600px at 10% -10%, rgba(124,92,255,.25), transparent 60%),
    radial-gradient(1000px 600px at 90% -10%, rgba(110,231,255,.18), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%);
  line-height:1.6;
  letter-spacing:.2px;
  scroll-behavior: smooth;
}
a{color:var(--accent); text-decoration: none}
a:hover{text-decoration: underline}
.container{width:min(1120px, 92vw); margin-inline:auto}
.header{
  position:sticky; top:0; backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.0));
  padding:14px 0; z-index:50
}
:root.light .header{background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.0))}
nav{display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.3px}

/* Круглый логотип (фон из файла в корне) */
.brand .logo{
  width:34px; height:34px;
  border-radius:50%;
  display:block;
  background-image: url("arcveil-logo.png");
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  box-shadow: var(--shadow);
  border:1px solid var(--card-strong);
}
.brand .logo svg{display:none}

.nav-links{display:flex; gap:18px; flex-wrap:wrap; align-items:center}
.nav-links a{opacity:.9}
.theme{
  border:1px solid var(--card-strong); background:var(--card); color:var(--text);
  padding:8px 12px; border-radius:12px; cursor:pointer
}
.theme:focus{outline:none; box-shadow: var(--focus)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; background:var(--accent); color:#001018; padding:10px 14px; border-radius:10px}

/* Переключатель языка */
.lang-switch{display:flex; gap:6px; align-items:center}
.lang-btn{
  background:transparent; color:var(--text);
  border:1px solid var(--card-strong);
  border-radius:10px; padding:6px 10px; cursor:pointer;
  font-weight:700; font-size:.95rem;
}
.lang-btn.active{background:linear-gradient(135deg,var(--accent-2),var(--accent)); color:#fff; border:none}
.lang-btn:focus{outline:none; box-shadow: var(--focus)}

/* Hero */
.hero{padding:72px 0 40px}
.hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:28px}
@media (max-width: 900px){ .hero-grid{grid-template-columns:1fr} }
.h1{margin:12px 0 10px; font-size:clamp(28px,4.2vw,40px); line-height:1.2}

/* Cards / text */
.card{
  background: linear-gradient(180deg, var(--card), transparent 180%);
  border:1px solid var(--card-strong);
  border-radius: var(--radius);
  padding:22px; box-shadow: var(--shadow)
}
.card h3{margin:0 0 8px}
.muted{color:var(--muted)}
.small{font-size:.95rem}
.pill{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px;
  border-radius:999px; background:linear-gradient(135deg, rgba(124,92,255,.15), rgba(110,231,255,.12));
  border:1px solid var(--card-strong); font-weight:600; font-size:.95rem
}
.grid{display:grid; gap:22px}
.grid.cols-3{grid-template-columns: repeat(3, 1fr)}
@media (max-width: 980px){ .grid.cols-3{grid-template-columns: 1fr} }
.icon{width:18px; height:18px; display:inline-block}

/* Buttons */
.btn{
  background:transparent; border:1px solid var(--card-strong); color:var(--text);
  padding:10px 12px; border-radius:12px; cursor:pointer
}
.btn:focus{outline:none; box-shadow: var(--focus)}
.inline-input{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
input[type="text"], input[type="password"], input[type="email"], textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--card-strong);
  background:var(--card); color:var(--text)
}
input:focus, textarea:focus{outline:none; box-shadow: var(--focus)}

/* CTA */
.cta, .cta:link, .cta:visited{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 18px; border-radius:14px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color:#fff; border:none; text-decoration:none;
  font-weight:700; cursor:pointer; user-select:none;
  transition: transform .08s ease, box-shadow .2s ease, opacity .2s ease;
}
button.cta{appearance:none; -webkit-appearance:none; border:none}
.cta:hover{transform:translateY(-1px); text-decoration:none}
.cta:active{transform:translateY(0); opacity:.95}
.cta:focus-visible{outline:none; box-shadow: var(--focus)}
.cta--lg{padding:16px 22px; font-size:1.05rem; border-radius:16px}
.plan .cta{width:100%; margin-top:10px}
.cta .ico{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; flex:0 0 18px; pointer-events:none; display:block}
.cta .ico--left{margin-right:8px}
.cta .ico--right{margin-left:8px}

/* Meter */
.meter{height:12px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; border:1px solid var(--card-strong)}
.meter > span{display:block; height:100%; width:0%; transition: width .35s ease}
.m0{background:linear-gradient(90deg, var(--bad), #ef4444)}
.m1{background:linear-gradient(90deg, #f97316, var(--warn))}
.m2{background:linear-gradient(90deg, #f59e0b, #a3e635)}
.m3{background:linear-gradient(90deg, #22c55e, #34d399)}
.m4{background:linear-gradient(90deg, #10b981, #06b6d4)}

/* Tips / Accordion / Code */
.tip{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:12px; background:rgba(16,185,129,.1); border:1px dashed rgba(16,185,129,.35)}
.tip.bad{background:rgba(239,68,68,.1); border-color: rgba(239,68,68,.4)}
details{background:linear-gradient(180deg, var(--card), transparent 150%); border:1px solid var(--card-strong); border-radius:14px; padding:14px}
details summary{cursor:pointer; list-style:none; outline:none}
details summary::-webkit-details-marker{display:none}
details[open]{box-shadow: var(--shadow)}
.kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:.9rem; padding:10px 12px; background:rgba(2,6,23,.5); border:1px solid var(--card-strong);
  border-radius:12px; overflow:auto
}
:root.light .kbd{background:rgba(15,23,42,.06)}

/* Sections / Footer */
section{padding:40px 0}
.section-title{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px}
.section-title h2{margin:0}
.list{display:grid; gap:10px}
.footer{padding:26px 0 40px; color:var(--muted); font-size:.95rem}

/* Pricing */
.pricing .plan .price{font-weight:800; font-size:28px; margin:8px 0 6px;}
.pricing .plan .cur{font-weight:600; font-size:14px; color:var(--muted)}
.badge{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid var(--card-strong); font-weight:700
}
.plan-head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.plan-popular{
  border:1px solid rgba(124,92,255,.45);
  box-shadow: 0 10px 30px rgba(124,92,255,.18);
}

/* Modal */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; padding:18px; z-index:1000}
.modal.open{display:flex}
.modal__dialog{width:min(640px, 96vw); background:var(--bg-soft); border:1px solid var(--card-strong); border-radius:16px; padding:18px; box-shadow:var(--shadow); position:relative}
.modal__close{position:absolute; right:20px; top:20px; border:none; background:transparent; color:var(--text); font-size:18px; cursor:pointer}
.fld{display:block; margin:10px 0}
.fld input, .fld textarea{width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--card-strong); background:var(--card); color:var(--text)}
.fld input:focus, .fld textarea:focus{outline:none; box-shadow:var(--focus)}
.grid.two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:720px){ .grid.two{grid-template-columns:1fr} }
.modal__footer{display:flex; gap:12px; justify-content:flex-end; margin-top:10px}

/* На будущее: если перейдёшь на <img class="logo-img"> */
.logo-img{
  width:34px; height:34px; border-radius:50%;
  object-fit:cover; display:block;
  border:1px solid var(--card-strong);
  box-shadow: var(--shadow);
}