:root{
  --bg:#ffffff; 
  --ink:#0b0f14; 
  --muted:#6b7280; 
  --gold:#b99450; /* мягкое золото */
  --gold-2:#e7d3a1; 
  --line:#eaeaea;
  --card:#fcfcfd;
  --accent-shadow: 0 10px 30px rgba(185,148,80,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink); background:var(--bg); line-height:1.45; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding-top:80px; /* отступ под фиксированную шапку */ 
}
a{color:var(--ink); text-decoration:none}
.container{max-width:1200px; margin:0 auto; padding:0 20px}
.btn{display:inline-block; padding:14px 22px; border-radius:14px; border:1px solid var(--gold);
  color:#1a202c; background:linear-gradient(180deg, #fff, #fff 55%, #f7f4ed 100%);
  box-shadow:var(--accent-shadow); transition:.25s ease; font-weight:600}
.btn:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(185,148,80,.4)}
.btn.secondary{background:transparent; border-color:#d7d7d7; box-shadow:none; color:var(--ink)}
.btn.small{padding:10px 16px}
.tag{display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border:1px solid var(--line); border-radius:999px; font-size:12px; color:var(--muted)}
.tag .dot{width:8px; height:8px; background:var(--gold); border-radius:50%; display:inline-block;}

/* FIXED HEADER */
.site-header{
  position:fixed; top:0; left:0; right:0;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
  z-index:1000;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px;
}
.main-nav{display:flex; gap:18px; align-items:center}

/* HERO */
.hero{position:relative; overflow:hidden; padding:120px 0 80px; background:
  radial-gradient(1200px 600px at 60% -10%, rgba(233,224,206,.65),transparent 60%),
  radial-gradient(900px 400px at 20% 10%, rgba(238,229,205,.45),transparent 60%),
  linear-gradient(180deg,#fff, #fbfaf7 70%, #fff);
}
.hero .grid{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center}
.eyebrow{letter-spacing:.2em; font-size:12px; text-transform:uppercase; color:var(--muted)}
h1{font-size:clamp(36px,4.2vw,56px); line-height:1.05; margin:12px 0 14px}
.lead{font-size:18px; color:#3b3f46; max-width:640px}
.actions{display:flex; gap:14px; margin-top:22px}
.hero-art{position:relative; border-radius:28px; background:linear-gradient(160deg,#fff,#f7f3eb); border:1px solid #f0eae0; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,.06)}
.amulet{position:relative; aspect-ratio:1/1; border-radius:24px; background:
    radial-gradient(120px 120px at 50% 45%, rgba(255,240,210,.9), rgba(233,210,160,.25) 60%, transparent 70%),
    linear-gradient(180deg,#fff,#f7f3eb);
  border:1px solid #e9e1d3; display:grid; place-items:center;
  box-shadow:inset 0 0 40px rgba(185,148,80,.25), 0 24px 60px rgba(185,148,80,.15);
  animation:breath 4.5s ease-in-out infinite;
}
.amulet::after{content:"NZT108"; font-weight:700; letter-spacing:.18em; color:#7a5a24; opacity:.8}
.chips{display:flex; gap:12px; margin-top:14px; color:#6b7280; font-size:12px}
.chip{display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; background:#f6f7f9; color:#374151; margin-right:6px}
@keyframes breath{0%{transform:scale(.995)}50%{transform:scale(1.01)}100%{transform:scale(.995)}}

/* SECTIONS */
section{padding:80px 0; border-top:1px solid var(--line)}
h2{font-size:clamp(28px,3.2vw,40px); margin:0 0 14px}
.sub{color:#4b5563; max-width:800px}

.features{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:28px}
.card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:20px; transition:.25s}
.card:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.06)}
.card h3{margin:8px 0 6px; font-size:18px}
.kpi{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px}
.kpi .metric{background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px; text-align:center}
.metric .val{font-size:28px; font-weight:800; color:#1f2937}
.metric .cap{font-size:12px; color:var(--muted)}

/* Benefits table */
.benefits{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:18px; margin-top:20px}
.benefits th{background:linear-gradient(180deg,#fff,#f7f4ed); border-bottom:1px solid var(--line); padding:14px; text-align:left}
.benefits td{padding:14px; border-bottom:1px solid var(--line); vertical-align:top}
.benefits tr:hover td{background:#fff}

/* Product line */

body {font-family: Arial, sans-serif; margin:0; padding:0; background:#fff; color:#222;}
header {position:fixed; top:0; left:0; width:100%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,0.1); padding:15px 20px; z-index:100;}
header .container {display:flex; justify-content:space-between; align-items:center; max-width:1200px; margin:auto;}
header nav a {margin:0 10px; color:#222; text-decoration:none; font-weight:bold;}
header nav a:hover {color:#b99450;}
section {padding:100px 20px 60px; max-width:1000px; margin:auto;}
h2 {margin-bottom:10px;}
.variants {display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px;}
.variant {border:1px solid #eee; border-radius:12px; padding:20px; background:#fafafa; text-align:center; box-shadow:0 2px 10px rgba(0,0,0,0.05);}
.variant .badge {font-weight:bold; margin-bottom:8px;}
.btn {display:inline-block; margin-top:10px; padding:10px 16px; border-radius:8px; border:1px solid #ccc; font-weight:bold; text-decoration:none;}
.btn.orange {background:linear-gradient(180deg,#fff5ee,#ffcb8b);border-color:#ffb347;color:#7a4100;}
.btn.yellow {background:linear-gradient(180deg,#fffde7,#fff59d);border-color:#fdd835;color:#795548;}
.btn.green  {background:linear-gradient(180deg,#e8f5e9,#a5d6a7);border-color:#81c784;color:#2e7d32;}

/* How it works */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px}
.step{background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px}
.step .num{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(180deg,#fff,#f3eee5); border:1px solid #eadfc9; color:#7a5a24; font-weight:700; margin-bottom:8px}

/* Testimonials */
.testis{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px}
.quote{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px; font-size:15px}
.quote .who{margin-top:10px; color:var(--muted); font-size:13px}

/* CTA */
.cta{background:
  radial-gradient(900px 400px at 80% -10%, rgba(233,224,206,.6),transparent 60%),
  linear-gradient(180deg,#fff,#fbfaf6);
  padding:90px 0; text-align:center
}
.cta h2{margin-bottom:8px}
.cta p{color:#4b5563}
.cta .actions{justify-content:center}
.tail .actions{margin-top:14px}

/* Order form */
.order-section .lead-form{padding:22px; max-width:760px; margin:0 auto; background:#fff}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field label{font-size:12px; color:#6b7280; display:block; margin-bottom:6px}
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:12px; font:inherit; background:#fff;
}
.field .hint{display:block; font-size:11px; color:#9aa0a6; margin-top:6px}
.field.full{grid-column:1 / -1}
.checkline{display:flex; gap:10px; align-items:center; margin-top:12px}
.checkline input{accent-color:var(--gold)}
.lead-status{margin-left:10px; color:#6b7280; font-size:14px; display:inline-block}

/* Footer */
footer{padding:40px 0; border-top:1px solid var(--line); color:var(--muted); font-size:14px}
.footer{display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center}
.footer .links{display:flex; gap:12px}

/* Responsive */
@media (max-width: 980px){
  .hero .grid{grid-template-columns:1fr}
  .features, .kpi, .variants, .steps, .testis{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .main-nav{gap:12px; flex-wrap:wrap}
}
