:root{
  --color-bg:#070F2B;
  --color-surface:#0B153F;
  --color-surface-2:#101B4A;
  --color-border:rgba(146,144,195,.22);
  --color-text:#F4F6FF;
  --color-muted:rgba(244,246,255,.78);
  --color-soft:rgba(244,246,255,.12);
  --color-primary:#9290C3;
  --color-primary-2:#535C91;
  --color-accent:#1B1A55;
  --color-success:#56D364;
  --color-danger:#FF5A7A;
  --color-warning:#F7C948;
  --font-sans:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans","Helvetica Neue",sans-serif;
  --font-size-0:.875rem;
  --font-size-1:1rem;
  --font-size-2:1.125rem;
  --font-size-3:1.375rem;
  --font-size-4:1.75rem;
  --font-size-5:2.25rem;
  --font-size-6:3rem;
  --shadow-1:0 10px 30px rgba(0,0,0,.35);
  --shadow-2:0 16px 50px rgba(0,0,0,.45);
  --radius-1:12px;
  --radius-2:16px;
  --radius-3:22px;
  --space-0:.25rem;
  --space-1:.5rem;
  --space-2:.75rem;
  --space-3:1rem;
  --space-4:1.25rem;
  --space-5:1.75rem;
  --space-6:2.25rem;
  --space-7:3rem;
  --space-8:4rem;
  --container:1120px;
  --focus:0 0 0 3px rgba(146,144,195,.38);
}
*{box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-sans);
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(83,92,145,.35), transparent 60%),
    radial-gradient(900px 520px at 90% 15%, rgba(146,144,195,.22), transparent 60%),
    linear-gradient(180deg, #070F2B 0%, #060B20 60%, #070F2B 100%);
  color:var(--color-text);
  line-height:1.55;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.skip-link{
  position:absolute;left:-999px;top:var(--space-3);
  background:var(--color-primary);color:#0A0A16;
  padding:var(--space-2) var(--space-3);
  border-radius:999px;
}
.skip-link:focus{left:var(--space-3);outline:none;box-shadow:var(--focus)}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--space-4)}
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(7,15,43,.72);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--color-border);
}
.header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-3) 0;
  gap:var(--space-4);
}
.nav-toggle{
  appearance:none;
  border:1px solid rgba(146,144,195,.22);
  background:rgba(244,246,255,.06);
  color:var(--color-text);
  border-radius:999px;
  width:46px;height:46px;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.nav-toggle:hover{transform:translateY(-1px);background:rgba(146,144,195,.12);border-color:rgba(146,144,195,.35)}
.nav-toggle:focus{outline:none;box-shadow:var(--focus)}
.nav-toggle svg{width:22px;height:22px}
.nav-toggle [data-icon-close]{display:none}
.nav-toggle[aria-expanded="true"] [data-icon-burger]{display:none}
.nav-toggle[aria-expanded="true"] [data-icon-close]{display:block}
.brand{
  display:flex;align-items:center;gap:var(--space-2);
  text-decoration:none;
}
.brand-mark{
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-2) 70%);
  box-shadow:var(--shadow-1);
}
.brand-name{font-weight:800;letter-spacing:.2px}
.nav{
  display:flex;align-items:center;gap:var(--space-2);
}
.nav{
  flex-wrap:wrap;
}
.nav a{
  text-decoration:none;
  font-size:var(--font-size-0);
  color:var(--color-muted);
  padding:.55rem .75rem;
  border-radius:999px;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.nav a:hover{background:rgba(146,144,195,.14);color:var(--color-text);transform:translateY(-1px)}
.nav a:focus{outline:none;box-shadow:var(--focus)}
.nav-cta{
  border:1px solid rgba(146,144,195,.35);
  background:linear-gradient(135deg, rgba(146,144,195,.16), rgba(83,92,145,.14));
}
.hero{
  padding:var(--space-8) 0 var(--space-7);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:var(--space-6);
  align-items:start;
}
.badge-row{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.rating{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.45rem .75rem;border-radius:999px;
  background:rgba(146,144,195,.14);
  border:1px solid rgba(146,144,195,.26);
  color:var(--color-text);
  font-size:var(--font-size-0);
}
.stars{letter-spacing:1px;color:var(--color-warning)}
.trust{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.45rem .75rem;border-radius:999px;
  background:rgba(83,92,145,.14);
  border:1px solid rgba(146,144,195,.22);
  color:var(--color-muted);
  font-size:var(--font-size-0);
}
.hero h1{
  margin:var(--space-4) 0 var(--space-3);
  font-size:clamp(2rem,4.5vw,3.25rem);
  line-height:1.08;
  letter-spacing:-.6px;
}
.hero p{
  margin:0 0 var(--space-4);
  color:var(--color-muted);
  font-size:var(--font-size-2);
}
.pill-row{display:flex;gap:var(--space-2);flex-wrap:wrap;margin:var(--space-5) 0 0}
.pill{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.6rem .85rem;border-radius:999px;
  background:rgba(244,246,255,.06);
  border:1px solid rgba(146,144,195,.18);
  color:var(--color-muted);
  font-size:var(--font-size-0);
}
.grid-card{
  border-radius:var(--radius-3);
  background:linear-gradient(180deg, rgba(16,27,74,.86), rgba(11,21,63,.86));
  border:1px solid var(--color-border);
  box-shadow:var(--shadow-2);
}
.product-card{padding:var(--space-5)}
.product-figure{
  border-radius:var(--radius-2);
  background:radial-gradient(300px 180px at 50% 0%, rgba(146,144,195,.25), transparent 60%),
    linear-gradient(180deg, rgba(83,92,145,.18), rgba(27,26,85,.14));
  border:1px solid rgba(146,144,195,.18);
  padding:var(--space-4);
  margin:0 0 var(--space-4);
}
.product-figure img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:contain;
  border-radius:var(--radius-2);
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.42));
}
.price-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);
  margin:var(--space-4) 0 var(--space-3);
}
.price{
  display:flex;align-items:baseline;gap:var(--space-2);flex-wrap:wrap
}
.price strong{font-size:var(--font-size-4)}
.old-price{
  color:rgba(244,246,255,.55);
  text-decoration:line-through;
  font-size:var(--font-size-1);
}
.mini{
  font-size:var(--font-size-0);
  color:var(--color-muted);
}
form{
  display:grid;
  gap:var(--space-3);
}
.field{
  display:grid;
  gap:.45rem;
}
label{font-size:var(--font-size-0);color:var(--color-muted)}
input,textarea,select,button{
  font:inherit;
}
input,textarea{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(146,144,195,.24);
  background:rgba(7,15,43,.55);
  padding:.85rem .95rem;
  color:var(--color-text);
  outline:none;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
textarea{min-height:112px;resize:vertical}
input:focus,textarea:focus{box-shadow:var(--focus);border-color:rgba(146,144,195,.6)}
.error-text{
  min-height:1.05rem;
  font-size:.85rem;
  color:rgba(255,90,122,.95);
}
.hint{font-size:.85rem;color:rgba(244,246,255,.62)}
.consent{
  display:flex;gap:.65rem;align-items:flex-start;
  border-radius:16px;
  border:1px solid rgba(146,144,195,.18);
  background:rgba(244,246,255,.04);
  padding:var(--space-3);
}
.consent input{margin-top:.2rem;width:18px;height:18px}
.btn{
  appearance:none;
  border:none;
  border-radius:999px;
  padding:.95rem 1.15rem;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,opacity .16s ease;
  text-decoration:none;
}
.btn-primary{
  color:#0A0A16;
  background:linear-gradient(135deg, var(--color-primary) 0%, rgba(146,144,195,.84) 45%, var(--color-primary-2) 110%);
  box-shadow:0 14px 30px rgba(146,144,195,.18);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(146,144,195,.22)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{
  color:var(--color-text);
  background:rgba(244,246,255,.06);
  border:1px solid rgba(146,144,195,.22);
}
.btn-ghost:hover{transform:translateY(-2px);background:rgba(146,144,195,.12)}
.btn:focus{outline:none;box-shadow:var(--focus)}
.section{padding:var(--space-7) 0}
.section h2{
  margin:0 0 var(--space-3);
  font-size:clamp(1.6rem,2.6vw,2.2rem);
  letter-spacing:-.3px;
}
.section p.lead{
  margin:0 0 var(--space-5);
  color:var(--color-muted);
  max-width:72ch;
}
.cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-4);
}
.card{
  padding:var(--space-5);
  border-radius:var(--radius-2);
  background:rgba(11,21,63,.55);
  border:1px solid rgba(146,144,195,.18);
  box-shadow:var(--shadow-1);
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.card:hover{transform:translateY(-4px);border-color:rgba(146,144,195,.32);background:rgba(16,27,74,.6)}
.card h3{margin:0 0 var(--space-2);font-size:var(--font-size-2)}
.card p{margin:0;color:var(--color-muted)}
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-6);
  align-items:start;
}
.list{
  display:grid;gap:var(--space-2);
  padding:0;margin:0;list-style:none;
}
.list li{
  display:flex;gap:.75rem;align-items:flex-start;
  padding:var(--space-3);
  border-radius:16px;
  background:rgba(244,246,255,.04);
  border:1px solid rgba(146,144,195,.14);
}
.dot{
  width:10px;height:10px;border-radius:999px;
  margin-top:.45rem;
  background:var(--color-primary);
  box-shadow:0 0 0 4px rgba(146,144,195,.16);
  flex:0 0 auto;
}
.accordion{
  display:grid;
  gap:var(--space-3);
}
details{
  border-radius:var(--radius-2);
  background:rgba(11,21,63,.55);
  border:1px solid rgba(146,144,195,.18);
  padding:var(--space-4);
  box-shadow:var(--shadow-1);
}
summary{
  cursor:pointer;
  font-weight:700;
  list-style:none;
  outline:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"";
  width:12px;height:12px;
  border-right:2px solid rgba(244,246,255,.75);
  border-bottom:2px solid rgba(244,246,255,.75);
  transform:rotate(45deg);
  transition:transform .18s ease,border-color .18s ease,opacity .18s ease;
  opacity:.9;
  flex:0 0 auto;
  margin-left:var(--space-3);
}
details:hover summary::after{border-color:rgba(146,144,195,.95)}
details[open] summary::after{transform:rotate(-135deg)}
details[open]{border-color:rgba(146,144,195,.34)}
details p{margin:var(--space-3) 0 0;color:var(--color-muted)}
.cta{
  padding:var(--space-7) 0;
}
.cta-panel{
  padding:var(--space-6);
  border-radius:var(--radius-3);
  background:radial-gradient(500px 240px at 20% 0%, rgba(146,144,195,.26), transparent 62%),
    linear-gradient(180deg, rgba(16,27,74,.86), rgba(11,21,63,.86));
  border:1px solid rgba(146,144,195,.22);
  box-shadow:var(--shadow-2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-5);
}
.cta-panel h2{margin:0;font-size:clamp(1.5rem,2.2vw,2rem)}
.cta-panel p{margin:var(--space-2) 0 0;color:var(--color-muted);max-width:70ch}
.footer{
  border-top:1px solid rgba(146,144,195,.18);
  padding:var(--space-6) 0;
  background:rgba(7,15,43,.6);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:var(--space-6);
  align-items:start;
}
.footer a{color:rgba(244,246,255,.8);text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer small{color:rgba(244,246,255,.62)}
.legal-links{
  display:flex;flex-wrap:wrap;gap:var(--space-3);
}
.note{
  border-radius:var(--radius-2);
  border:1px solid rgba(146,144,195,.18);
  background:rgba(244,246,255,.04);
  padding:var(--space-4);
  color:rgba(244,246,255,.74);
}
.page{
  padding:var(--space-7) 0;
}
.prose{
  max-width:78ch;
}
.prose h1{margin:0 0 var(--space-3);font-size:clamp(2rem,3.6vw,2.75rem);line-height:1.12}
.prose h2{margin:var(--space-6) 0 var(--space-2);font-size:1.35rem}
.prose h3{margin:var(--space-5) 0 var(--space-2);font-size:1.15rem}
.prose p,.prose li{color:rgba(244,246,255,.78)}
.prose ul{padding-left:1.15rem}
.prose a{color:var(--color-primary)}
.prose a:hover{text-decoration:underline}
.success-wrap{
  min-height:72vh;
  display:grid;
  place-items:center;
  padding:var(--space-7) 0;
}
.success-card{
  width:min(820px,100%);
  border-radius:var(--radius-3);
  background:linear-gradient(180deg, rgba(16,27,74,.86), rgba(11,21,63,.86));
  border:1px solid rgba(146,144,195,.22);
  box-shadow:var(--shadow-2);
  padding:var(--space-6);
}
.success-card h1{margin:0 0 var(--space-2);font-size:clamp(1.75rem,3vw,2.3rem)}
.success-card p{margin:0 0 var(--space-4);color:var(--color-muted)}
.success-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-4);
}
.chip{
  display:flex;gap:var(--space-3);align-items:flex-start;
  border-radius:16px;
  border:1px solid rgba(146,144,195,.18);
  background:rgba(244,246,255,.04);
  padding:var(--space-4);
}
.chip strong{display:block;margin:0 0 .15rem}
.chip span{color:rgba(244,246,255,.7)}
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;
  padding:var(--space-4);
  z-index:80;
  display:none;
}
.cookie-inner{
  max-width:var(--container);
  margin:0 auto;
  border-radius:var(--radius-3);
  background:rgba(11,21,63,.92);
  border:1px solid rgba(146,144,195,.22);
  box-shadow:var(--shadow-2);
  padding:var(--space-4);
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:var(--space-4);
  align-items:center;
  backdrop-filter:saturate(160%) blur(10px);
}
.cookie-actions{
  display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:flex-end;
}
dialog{
  width:min(760px,100%);
  border-radius:var(--radius-3);
  border:1px solid rgba(146,144,195,.28);
  background:rgba(7,15,43,.96);
  color:var(--color-text);
  box-shadow:var(--shadow-2);
  padding:0;
}
dialog::backdrop{background:rgba(0,0,0,.6)}
.modal-head{
  padding:var(--space-5);
  border-bottom:1px solid rgba(146,144,195,.18);
}
.modal-head h2{margin:0 0 var(--space-2)}
.modal-head p{margin:0;color:var(--color-muted)}
.modal-body{
  padding:var(--space-5);
  display:grid;
  gap:var(--space-4);
}
.switch{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);
  border-radius:16px;
  border:1px solid rgba(146,144,195,.18);
  background:rgba(244,246,255,.04);
  padding:var(--space-4);
}
.switch strong{display:block}
.switch span{display:block;margin-top:.35rem;color:rgba(244,246,255,.7);font-size:.92rem}
.toggle{
  position:relative;
  width:52px;height:30px;
  flex:0 0 auto;
}
.toggle input{opacity:0;width:0;height:0}
.slider{
  position:absolute;inset:0;border-radius:999px;
  background:rgba(244,246,255,.16);
  border:1px solid rgba(146,144,195,.22);
  transition:background .18s ease,border-color .18s ease;
}
.slider::after{
  content:"";
  position:absolute;top:50%;left:4px;
  width:22px;height:22px;border-radius:999px;
  background:linear-gradient(180deg, rgba(244,246,255,.9), rgba(244,246,255,.7));
  transform:translateY(-50%);
  transition:transform .18s ease,background .18s ease;
  box-shadow:0 10px 18px rgba(0,0,0,.35);
}
.toggle input:checked + .slider{
  background:rgba(146,144,195,.35);
  border-color:rgba(146,144,195,.55);
}
.toggle input:checked + .slider::after{transform:translate(22px,-50%)}
.toggle input:disabled + .slider{opacity:.6}
.modal-actions{
  padding:var(--space-5);
  border-top:1px solid rgba(146,144,195,.18);
  display:flex;
  justify-content:flex-end;
  gap:var(--space-2);
  flex-wrap:wrap;
}
.inline-form{
  display:grid;
  gap:var(--space-3);
  border-radius:var(--radius-2);
  border:1px solid rgba(146,144,195,.18);
  background:rgba(244,246,255,.04);
  padding:var(--space-5);
}
.kpi-row{
  display:grid;
  gap:var(--space-3);
  margin-top:var(--space-5);
}
.kpi{
  border-radius:16px;
  border:1px solid rgba(146,144,195,.16);
  background:rgba(244,246,255,.03);
  padding:var(--space-4);
}
.kpi strong{display:block;font-size:1.25rem}
.kpi span{display:block;color:rgba(244,246,255,.7);margin-top:.25rem;font-size:.92rem}
@media (max-width:1200px){
  :root{--container:1040px}
}
@media (max-width:1024px){
  :root{--container:960px}
  .hero{padding:var(--space-7) 0 var(--space-6)}
}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:var(--space-5)}
  .cards{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .cta-panel{flex-direction:column;align-items:flex-start}
  .cookie-inner{grid-template-columns:1fr}
  .cookie-actions{justify-content:flex-start}
  .success-grid{grid-template-columns:1fr}
  .kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .header{gap:var(--space-3)}
  .nav-toggle{display:inline-flex}
  .nav{
    display:none;
  }
  body.nav-open{
    overflow:hidden;
  }
  body.nav-open .topbar{
    position:fixed;
    left:0;right:0;top:0;
    z-index:120;
  }
  body.nav-open .nav-toggle{
    position:relative;
    z-index:130;
  }
  body.nav-open .nav{
    display:flex;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:100vw;
    min-height:100dvh;
    height:100dvh;
    z-index:110;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:var(--space-2);
    padding:var(--space-6) var(--space-4);
    background:rgb(7,15,43);
  }
  body.nav-open .nav a{
    width:100%;
    padding:1rem 1rem;
    border-radius:16px;
    border:1px solid rgba(146,144,195,.18);
    background:rgba(244,246,255,.04);
    font-size:1.05rem;
  }
  body.nav-open .nav a:hover{
    transform:none;
    background:rgba(146,144,195,.12);
  }
  .hero p{font-size:1.05rem}
  .product-card{padding:var(--space-4)}
  .cta-panel{padding:var(--space-5)}
}
@media (max-width:640px){
  .container{padding:0 var(--space-3)}
  .hero{padding:var(--space-6) 0 var(--space-6)}
  .section{padding:var(--space-6) 0}
  .price-row{flex-direction:column;align-items:flex-start}
  .cookie-banner{padding:var(--space-3)}
  .cookie-inner{padding:var(--space-3)}
  .modal-head,.modal-body,.modal-actions{padding:var(--space-4)}
  body.nav-open .nav{padding-left:var(--space-3);padding-right:var(--space-3)}
}
@media (max-width:520px){
  .brand-name{font-size:1rem}
  .btn{width:100%}
  .cookie-actions .btn{width:auto}
  .pill-row{margin:var(--space-4) 0 0}
  .kpi-row{grid-template-columns:1fr}
  .success-card{padding:var(--space-5)}
}
@media (max-width:480px){
  :root{
    --space-4:1.1rem;
    --space-5:1.5rem;
    --space-6:2rem;
    --radius-3:20px;
  }
  input,textarea{padding:.8rem .9rem}
  details{padding:var(--space-3)}
}
@media (max-width:360px){
  .rating,.trust{padding:.4rem .6rem}
  .nav a{padding:.5rem .65rem}
  .product-figure{padding:var(--space-3)}
}
@media (max-width:320px){
  :root{
    --space-3:.9rem;
    --space-4:1rem;
    --space-7:2.5rem;
    --space-8:3.2rem;
  }
  .hero h1{letter-spacing:-.3px}
  .btn{padding:.9rem 1rem}
}