:root {
  --red: #9E3039;
  --red-dark: #6E1E27;
  --red-light: #C2414C;
  --plum: #2A1340;
  --cream: #FFF8EC;
  --ink: #3C3C3C;
  --sub: #6F6F6F;
  --gold: #FFC800;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); color: var(--ink); background: var(--cream); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--red); }
img { max-width: 100%; display: block; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* Morning-star (Auseklis) pattern */
.stars { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.08' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M50 18 L58 34 L76 26 L68 44 L84 50 L68 56 L76 74 L58 66 L50 82 L42 66 L24 74 L32 56 L16 50 L32 44 L24 26 L42 34 Z'/%3E%3Cpath d='M50 32 L54 46 L68 50 L54 54 L50 68 L46 54 L32 50 L46 46 Z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 160px; }

/* Nav */
nav { position: absolute; top: 0; left: 0; right: 0; z-index: 10; }
nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 900; font-size: 24px; }
.brand img { width: 38px; height: 38px; border-radius: 10px; }
nav .links a { color: #fff; opacity: .85; text-decoration: none; font-weight: 700; margin-left: 22px; font-size: 16px; }
nav .links a:hover { opacity: 1; }

/* Hero */
.hero { background: radial-gradient(1200px 900px at 15% 0%, var(--red-light) 0%, var(--red) 45%, var(--red-dark) 100%); color: #fff; overflow: hidden; position: relative; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 40px; padding-top: 120px; padding-bottom: 0; min-height: 680px; }
.kicker { display: inline-block; font-weight: 800; font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; background: rgba(255,255,255,.16); padding: 8px 16px; border-radius: 999px; margin-bottom: 22px; }
h1 { font-weight: 900; font-size: clamp(44px, 6.4vw, 76px); line-height: 1.02; letter-spacing: -1.5px; }
.hero p.lead { font-size: clamp(18px, 2vw, 22px); font-weight: 600; opacity: .9; margin: 22px 0 32px; max-width: 520px; }
.store { display: inline-flex; align-items: center; gap: 12px; background: #000; color: #fff; text-decoration: none; padding: 12px 22px 12px 18px; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.store svg { width: 28px; height: 28px; fill: #fff; }
.store small { display: block; font-size: 11px; font-weight: 600; opacity: .8; line-height: 1.1; }
.store b { display: block; font-size: 20px; line-height: 1.1; font-weight: 800; }
.free { display: inline-block; margin-left: 14px; font-weight: 800; font-size: 15px; opacity: .9; }
.hero-art { position: relative; height: 600px; align-self: end; }
.phone { position: absolute; width: 290px; background: #0E0E10; border-radius: 46px; padding: 9px; box-shadow: 0 40px 80px rgba(0,0,0,.4), inset 0 0 0 2px #2A2A2E; }
.phone img { border-radius: 38px; }
.hero-art .phone { left: 50%; transform: translateX(-30%) rotate(4deg); top: 30px; }
.hero-art .ciela { position: absolute; width: 300px; left: -10px; bottom: -20px; filter: drop-shadow(0 20px 30px rgba(0,0,0,.3)); transform: rotate(-6deg); }
.sticker { position: absolute; background: #fff; border-radius: 999px; padding: 10px 18px; font-weight: 900; font-size: 18px; box-shadow: 0 12px 30px rgba(0,0,0,.2); white-space: nowrap; }

/* Features */
section { padding: 96px 0; }
h2 { font-weight: 900; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -1px; }
.center { text-align: center; }
.sub { color: var(--sub); font-size: 19px; font-weight: 600; max-width: 620px; margin: 16px auto 0; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; }
.card { background: #fff; border-radius: 26px; padding: 28px; box-shadow: 0 2px 0 rgba(0,0,0,.04), 0 12px 30px rgba(158,48,57,.07); border: 2px solid #F1E6E2; }
.card .ico { font-size: 34px; width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 16px; }
.card h3 { font-weight: 900; font-size: 22px; margin-bottom: 6px; }
.card p { color: var(--sub); font-weight: 600; font-size: 16px; }

/* Talk band */
.talk { background: radial-gradient(1000px 800px at 70% 30%, #4A2368 0%, var(--plum) 55%, #160A24 100%); color: #fff; overflow: hidden; }
.talk .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: center; }
.talk .art { position: relative; height: 560px; }
.talk .art .phone { left: 50%; transform: translateX(-50%) rotate(-3deg); top: 0; }
.talk .art .ciela { position: absolute; width: 220px; right: 0; bottom: 10px; filter: drop-shadow(0 20px 30px rgba(0,0,0,.35)); }
.talk p { font-size: 19px; font-weight: 600; opacity: .88; margin-top: 18px; }
.talk ul { list-style: none; margin-top: 26px; }
.talk li { font-weight: 700; font-size: 18px; margin: 12px 0; display: flex; gap: 12px; align-items: center; }
.talk li span { width: 30px; height: 30px; border-radius: 50%; background: #CE82FF; color: #24112F; display: grid; place-items: center; font-weight: 900; font-size: 15px; flex: none; }

/* Plus */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 48px; }
.plan { border-radius: 28px; padding: 34px; }
.plan.free-plan { background: #fff; border: 2px solid #F1E6E2; }
.plan.plus-plan { background: linear-gradient(160deg, #3B1E54, #1B0C2B); color: #fff; }
.plan h3 { font-size: 28px; font-weight: 900; }
.plan .price { font-weight: 800; opacity: .8; margin: 4px 0 18px; }
.plan li { list-style: none; font-weight: 700; margin: 10px 0; padding-left: 30px; position: relative; }
.plan li::before { content: "✓"; position: absolute; left: 0; font-weight: 900; color: #58A700; }
.plan.plus-plan li::before { color: var(--gold); }
.badge { display: inline-block; background: var(--gold); color: #3C3C3C; font-weight: 900; font-size: 13px; padding: 4px 10px; border-radius: 8px; margin-left: 8px; vertical-align: middle; letter-spacing: .5px; }

/* Events */
.events { background: radial-gradient(1000px 800px at 50% 0%, var(--red-light), var(--red) 50%, var(--red-dark)); color: #fff; overflow: hidden; }
.events .trio { display: flex; justify-content: center; align-items: flex-end; margin-top: 40px; }
.events .trio img { width: 250px; filter: drop-shadow(0 20px 30px rgba(0,0,0,.3)); }
.events .trio img:nth-child(2) { width: 300px; margin: 0 -50px; position: relative; z-index: 2; }
.events .trio img:first-child { transform: rotate(-8deg); }
.events .trio img:last-child { transform: rotate(8deg); }
.belt { height: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='36' viewBox='0 0 120 60'%3E%3Crect width='120' height='60' fill='%239E3039'/%3E%3Cpath d='M0 30 L30 8 L60 30 L30 52 Z M60 30 L90 8 L120 30 L90 52 Z' fill='%23fff'/%3E%3Cpath d='M30 20 L40 30 L30 40 L20 30 Z M90 20 L100 30 L90 40 L80 30 Z' fill='%239E3039'/%3E%3Crect width='120' height='4' fill='%23fff'/%3E%3Crect y='56' width='120' height='4' fill='%23fff'/%3E%3C/svg%3E"); background-size: 72px 36px; }
.chips { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.chips span { background: #fff; color: var(--red); font-weight: 900; padding: 10px 18px; border-radius: 999px; }

/* CTA + footer */
.cta { text-align: center; }
.cta img { width: 200px; margin: 0 auto 10px; }
footer { background: #2B1418; color: rgba(255,255,255,.7); padding: 40px 0; font-weight: 600; font-size: 15px; }
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
footer a { color: #fff; text-decoration: none; margin-left: 20px; }
footer a:first-child { margin-left: 0; }

/* Doc pages */
.doc-head { background: radial-gradient(900px 600px at 15% 0%, var(--red-light), var(--red) 50%, var(--red-dark)); color: #fff; padding: 130px 0 56px; }
.doc-head h1 { font-size: clamp(38px, 5vw, 56px); }
.doc-head p { opacity: .85; font-weight: 600; margin-top: 10px; font-size: 18px; }
.doc { max-width: 760px; margin: 0 auto; padding: 56px 20px 90px; font-size: 18px; }
.doc h2 { font-size: 24px; letter-spacing: 0; margin: 36px 0 10px; }
.doc p, .doc li { color: #4A4A4A; margin: 10px 0; }
.doc ul { padding-left: 22px; }
.doc .contact { background: #fff; border: 2px solid #F1E6E2; border-radius: 22px; padding: 24px; display: flex; gap: 18px; align-items: center; }
.doc .contact img { width: 90px; flex: none; }
.doc .contact b { font-size: 20px; display: block; color: var(--ink); }

@media (max-width: 880px) {
  nav .links a:not(.keep) { display: none; }
  .hero .wrap, .talk .wrap, .plans { grid-template-columns: 1fr; }
  .hero .wrap { padding-top: 110px; min-height: 0; text-align: center; }
  .hero p.lead { margin-left: auto; margin-right: auto; }
  .free { display: block; margin: 14px 0 0; }
  .hero-art { height: 500px; }
  .hero-art .phone { width: 250px; }
  .hero-art .ciela { width: 210px; left: 0; }
  .grid { grid-template-columns: 1fr; }
  .talk .art { height: 520px; order: 2; }
  .events .trio img { width: 150px; }
  .events .trio img:nth-child(2) { width: 190px; margin: 0 -30px; }
  section { padding: 72px 0; }
  footer .wrap { flex-direction: column; }
}
@media (max-width: 400px) {
  .hero-art .phone { transform: translateX(-35%) rotate(4deg); }
}