/* Анастасия — «Стильный треугольник» · объединённый CSS дизайн-системы
   Собран из: colors_and_type.css + ui_kits/stylist_site/site.css + ui_kits/stylist_site_v2/site.css
   Не редактировать вручную — пересобирать из _ds/ */


/* ==================== colors_and_type.css ==================== */
/* =========================================================================
   Анастасия — Стильный треугольник · Design Tokens
   Personal stylist brand for women 35–50. Warm neutrals, no cold contrasts,
   no shadows. Depth through color and space.
   ========================================================================= */

/* Локальные шрифты (self-hosted вместо Google Fonts) — файлы в assets/fonts/ */
/* Cormorant Garamond — заголовки, цены, цитаты */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/cormorant-garamond-cyrillic_latin-300.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/cormorant-garamond-cyrillic_latin-regular.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/cormorant-garamond-cyrillic_latin-500.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/cormorant-garamond-cyrillic_latin-600.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url('fonts/cormorant-garamond-cyrillic_latin-300italic.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/cormorant-garamond-cyrillic_latin-italic.woff2') format('woff2')}
/* Jost — надписи капсом, номера, подписи */
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/jost-cyrillic_latin-300.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/jost-cyrillic_latin-regular.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/jost-cyrillic_latin-500.woff2') format('woff2')}
/* DM Sans — основной текст (latin; кириллица — системный фолбэк, как и было) */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/dm-sans-latin-300.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/dm-sans-latin-regular.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/dm-sans-latin-500.woff2') format('woff2')}

:root {
  /* ---------- IVORY (primary background ramp) ---------- */
  --ivory-50:  #FBF8F4;
  --ivory-100: #F5EFE8;
  --ivory-200: #EAE2D8;
  --ivory-400: #D9CCBF;
  --ivory-600: #C4B0A0;
  --ivory-800: #8C7865;
  --ivory-900: #4A3D32;

  /* ---------- CARAMEL (primary accent — «Психика» circle) ---------- */
  --caramel-50:  #FDF5EC;
  --caramel-100: #F5E3C8;
  --caramel-200: #E8C99A;
  --caramel-400: #C4A882;  /* brand accent */
  --caramel-600: #A08060;
  --caramel-800: #7A5E42;
  --caramel-900: #4A3828;

  /* ---------- SAGE (supporting — «Тело» circle) ---------- */
  --sage-50:  #EEF3EF;
  --sage-100: #D4E5D8;
  --sage-200: #B0CDB8;
  --sage-400: #88AE94;
  --sage-600: #5E8A6A;
  --sage-800: #3A6045;
  --sage-900: #1E3C28;

  /* ---------- MAUVE (supporting — «Социум» circle) ---------- */
  --mauve-50:  #F5EEF2;
  --mauve-100: #E8D5E0;
  --mauve-200: #D4B5C4;
  --mauve-400: #B890A4;
  --mauve-600: #906878;
  --mauve-800: #6A4858;
  --mauve-900: #3E2835;

  /* ---------- GRAPHITE (neutral text / line) ---------- */
  --graphite-50:  #F4F3F1;
  --graphite-100: #E4E2DC;
  --graphite-200: #CCCAC4;
  --graphite-400: #A8A6A0;
  --graphite-600: #787670;
  --graphite-800: #484644;
  --graphite-900: #252422;

  /* ---------- Semantic: surfaces ---------- */
  --bg-primary:   var(--ivory-50);     /* page background */
  --bg-secondary: var(--ivory-100);    /* soft card / section */
  --bg-tertiary:  var(--ivory-200);    /* subtle wells */
  --bg-dark:      var(--graphite-900); /* reverse sections */

  /* ---------- Semantic: foreground ---------- */
  --fg-primary:   var(--graphite-900); /* body headings */
  --fg-secondary: var(--graphite-800); /* body copy */
  --fg-tertiary:  var(--graphite-600); /* meta / captions */
  --fg-muted:     var(--graphite-400); /* quiet labels */
  --fg-on-dark:   var(--ivory-50);

  /* ---------- Semantic: accent ---------- */
  --accent:            var(--caramel-400);
  --accent-hover:      var(--caramel-600);
  --accent-soft:       var(--caramel-100);
  --accent-ink:        var(--caramel-800); /* text on --accent-soft */

  /* ---------- Semantic: triangle system ---------- */
  --psyche: var(--caramel-200); /* #E8C99A */
  --body:   var(--sage-200);    /* #B0CDB8 */
  --social: var(--mauve-200);   /* #D4B5C4 */

  /* ---------- Semantic: lines ---------- */
  --line:         rgba(74, 61, 50, 0.14); /* warm hairline on ivory */
  --line-strong:  rgba(74, 61, 50, 0.28);
  --line-accent:  var(--caramel-400);

  /* ---------- Type — families ---------- */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-label:   'Jost', 'Futura', sans-serif;
  --font-body:    'DM Sans', 'Nunito Sans', system-ui, sans-serif;

  /* ---------- Type — scale (fluid-ish, opinionated) ---------- */
  --t-display:  clamp(48px, 6vw, 88px);   /* hero */
  --t-h1:       clamp(36px, 4vw, 56px);
  --t-h2:       clamp(28px, 3vw, 40px);
  --t-h3:       22px;
  --t-body-lg:  17px;
  --t-body:     15px;
  --t-small:    13px;
  --t-label:    11px;

  /* ---------- Type — tracking ---------- */
  --tr-display: -0.01em;
  --tr-label:   0.16em;
  --tr-sub:     0.08em;

  /* ---------- Radii ---------- */
  --r-chip:   4px;
  --r-card:   10px;
  --r-card-lg:16px;
  --r-pill:   30px;
  --r-full:   9999px;

  /* ---------- Spacing (8pt-ish, coarser) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 40px;
  --sp-6: 64px;
  --sp-7: 96px;

  /* ---------- Borders ---------- */
  --border-hair: 0.5px solid var(--line);
  --border-accent: 0.5px solid var(--caramel-400);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* ease-out */
  --dur-sm: 200ms;
  --dur-md: 300ms;
  --dur-lg: 400ms;
}

/* =========================================================================
   Semantic element styles — match README rules
   ========================================================================= */

html, body {
  background: var(--bg-primary);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-h1);
  letter-spacing: var(--tr-display);
  line-height: 1.1;
  color: var(--fg-primary);
}

.display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-display);
  letter-spacing: var(--tr-display);
  line-height: 1.05;
  color: var(--fg-primary);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h2);
  letter-spacing: var(--tr-display);
  line-height: 1.2;
}

h3, .h3 {
  font-family: var(--font-label);
  font-weight: 400;
  font-size: var(--t-h3);
  letter-spacing: var(--tr-sub);
  line-height: 1.3;
  text-transform: uppercase;
}

p { font-size: var(--t-body); line-height: 1.75; color: var(--fg-secondary); }
.p-lg { font-size: var(--t-body-lg); line-height: 1.7; }
.small { font-size: var(--t-small); color: var(--fg-tertiary); }

.eyebrow, .label {
  font-family: var(--font-label);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--accent);
}

.rule {
  width: 32px; height: 1.5px;
  background: var(--accent);
  border: 0;
}

/* =========================================================================
   Components — canonical snippets used throughout the system
   ========================================================================= */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--t-body);
  letter-spacing: 0.06em;
  padding: 12px 26px;
  border-radius: var(--r-pill);
  border: 0.5px solid transparent;
  cursor: pointer;
  transition: background var(--dur-sm) var(--ease),
              color var(--dur-sm) var(--ease),
              border-color var(--dur-sm) var(--ease),
              opacity var(--dur-sm) var(--ease);
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn-ghost:hover { background: var(--accent-soft); }

.tag {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-radius: var(--r-pill);
  padding: 5px 14px;
  font-size: 12px;
  letter-spacing: 0.06em;
  font-family: var(--font-body);
}

.card {
  background: var(--bg-primary);
  border: var(--border-hair);
  border-radius: var(--r-card-lg);
  padding: var(--sp-4);
}

/* =========================================================================
   Motion — fade-up used by the system (apply via .reveal, .reveal.in)
   ========================================================================= */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-lg) var(--ease), transform var(--dur-lg) var(--ease); }
.reveal.in { opacity: 1; transform: none; }


/* ==================== ui_kits/stylist_site/site.css ==================== */
/* ui_kits/stylist_site/site.css — site-only layout on top of the design tokens */

body { margin: 0; }

.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ---------- Nav ---------- */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; padding: 28px 0; border-bottom: 0.5px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.brand-name { display: block; font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--fg-primary); line-height: 1; }
.brand-sub { display: block; font-family: var(--font-label); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-tertiary); margin-top: 4px; }
.nav-links { display: flex; gap: 32px; list-style: none; padding: 0; margin: 0; }
.nav-links a { font-family: var(--font-label); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-secondary); text-decoration: none; }
.nav-links a:hover { color: var(--accent); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-size: 15px; letter-spacing: 0.06em; padding: 12px 26px; border-radius: 30px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn-ghost:hover { background: var(--caramel-50); }
.btn-sm { padding: 9px 20px; font-size: 13px; }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; padding: 90px 0 100px; align-items: center; }
.hero-text { max-width: 520px; }
.display { font-family: var(--font-display); font-weight: 300; font-size: clamp(42px, 5vw, 72px); line-height: 1.05; letter-spacing: -0.01em; color: var(--fg-primary); margin: 20px 0 24px; }
.display em { font-style: italic; color: var(--accent); font-weight: 400; }
.p-lg { font-size: 17px; line-height: 1.7; color: var(--fg-secondary); margin: 0 0 28px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-portrait { position: relative; }
.hero-portrait img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 16px; display: block; }
.hero-caption { position: absolute; left: 16px; bottom: 16px; right: 16px; background: rgba(251, 248, 244, 0.88); backdrop-filter: blur(8px); border-radius: 10px; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.hero-caption span:last-child { font-size: 13px; color: var(--fg-secondary); }

.eyebrow { font-family: var(--font-label); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.rule { width: 32px; height: 1.5px; background: var(--accent); margin: 12px 0 18px; }

h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.01em; line-height: 1.2; color: var(--fg-primary); margin: 0 0 20px; }
.muted { color: var(--fg-tertiary); }

/* ---------- System ---------- */
.system { padding: 100px 0; border-top: 0.5px solid var(--line); }
.system-head { max-width: 620px; margin: 0 auto 60px; text-align: center; }
.system-head .rule { margin-left: auto; margin-right: auto; }
.system-body { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center; }
.system-viz { display: flex; justify-content: center; }
.system-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.tab { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; background: transparent; border: 0.5px solid var(--line-strong); padding: 8px 14px; border-radius: 30px; color: var(--fg-secondary); cursor: pointer; transition: all 220ms var(--ease); }
.tab:hover { border-color: var(--accent); color: var(--accent); }
.tab-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.system-state { font-family: var(--font-display); font-weight: 400; font-size: 28px; color: var(--fg-primary); margin: 0 0 12px; text-transform: none; letter-spacing: -0.01em; }
.system-legend { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 8px; color: var(--fg-secondary); font-size: 14px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; vertical-align: middle; }

/* ---------- Services ---------- */
.services { padding: 100px 0; border-top: 0.5px solid var(--line); }
.services-head { max-width: 620px; margin: 0 auto 60px; text-align: center; }
.services-head .rule { margin-left: auto; margin-right: auto; }
.services-list { max-width: 920px; margin: 0 auto; }
.svc-row { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; padding: 28px 0; border-bottom: 0.5px solid var(--line); }
.svc-row:last-child { border-bottom: none; }
.svc-title { font-family: var(--font-display); font-weight: 400; font-size: 26px; letter-spacing: -0.01em; color: var(--fg-primary); margin-bottom: 6px; }
.svc-desc { font-size: 14px; line-height: 1.7; color: var(--fg-tertiary); max-width: 520px; }
.svc-bonus { font-size: 13px; color: var(--caramel-800); margin-top: 10px; }
.svc-right { display: flex; align-items: center; gap: 22px; }
.svc-prices { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.svc-old { font-size: 13px; color: var(--fg-muted); text-decoration: line-through; }
.svc-new { font-family: var(--font-label); font-size: 18px; color: var(--accent); letter-spacing: 0.04em; }

/* ---------- About ---------- */
.about { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 80px; padding: 100px 0; align-items: center; border-top: 0.5px solid var(--line); }
.about-portrait img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 16px; }
.about-bullets { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 10px; color: var(--fg-secondary); font-size: 15px; }

/* ---------- Contact ---------- */
.contact { padding: 100px 0; border-top: 0.5px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.contact-head h2 { font-size: clamp(26px, 3vw, 38px); }
.contact-form { display: flex; flex-direction: column; gap: 22px; }
.contact-form label { display: flex; flex-direction: column; gap: 6px; }
.contact-form .lbl { font-family: var(--font-label); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-tertiary); }
.contact-form input, .contact-form textarea { background: transparent; border: none; border-bottom: 0.5px solid var(--line-strong); padding: 10px 2px; font-family: var(--font-body); font-size: 15px; color: var(--fg-primary); outline: none; transition: border-color 220ms var(--ease); resize: none; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--accent); }
.contact-form textarea { border: 0.5px solid var(--line-strong); border-radius: 10px; padding: 12px 14px; }
.check { flex-direction: row !important; align-items: center; gap: 10px !important; color: var(--fg-secondary); font-size: 13px; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
.contact-form button { align-self: flex-start; }
.contact-done { padding: 40px; background: var(--bg-secondary); border-radius: 16px; border: 0.5px solid var(--line); }

/* ---------- Footer ---------- */
.footer { padding: 50px 0 40px; border-top: 0.5px solid var(--line); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; }
.footer-brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-body); font-size: 13px; color: var(--fg-secondary); }
.footer-links { display: flex; gap: 24px; list-style: none; padding: 0; margin: 0; justify-content: center; }
.footer-links a { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-tertiary); cursor: pointer; }
.footer-links a:hover { color: var(--accent); }
.footer-note { text-align: right; color: var(--fg-muted); }

@media (max-width: 880px) {
  .page { padding: 0 20px; }
  .hero, .about, .system-body, .contact { grid-template-columns: 1fr; gap: 50px; }
  .svc-row { grid-template-columns: 1fr; gap: 16px; }
  .svc-right { justify-content: space-between; }
  .footer { grid-template-columns: 1fr; text-align: center; }
  .footer-note { text-align: center; }
}


/* ==================== ui_kits/stylist_site_v2/site.css ==================== */
/* v2 — editorial / full-bleed layout · patterns adapted from lipedemaguru.com reference */

body { margin: 0; background: var(--bg-primary); }

.pagev2 { width: 100%; }

/* ===== Small-caps underline link-button — the signature CTA of this variant ===== */
.linkbtn {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg-primary);
  border-bottom: 1px solid var(--accent);
  padding: 4px 0;
  transition: color 220ms var(--ease), border-color 220ms var(--ease);
}
.linkbtn:hover { color: var(--accent); }
.linkbtn-light { color: #fff; border-bottom-color: rgba(255,255,255,0.6); }
.linkbtn-light:hover { color: var(--caramel-100); border-bottom-color: #fff; }

/* ===== Nav ===== */
.navv2 {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 56px;
}
.brandv2 { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.brandv2-wm { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: #fff; letter-spacing: 0.01em; }
.navv2-links { display: flex; gap: 32px; list-style: none; padding: 0; margin: 0; }
.navv2-links a { font-family: var(--font-label); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; text-decoration: none; opacity: 0.85; }
.navv2-links a:hover { opacity: 1; }
.navv2 .linkbtn { color: #fff; border-bottom-color: rgba(255,255,255,0.6); }

/* ===== Hero — full-bleed image band with veil ===== */
.herov2 { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: flex-start; padding: 0 56px 72px; color: #fff; overflow: hidden; }
.herov2-bg { position: absolute; inset: 0; z-index: 0; }
.herov2-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 30%; }
.herov2-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(37,36,34,0.35) 0%, rgba(37,36,34,0.55) 70%, rgba(37,36,34,0.7) 100%); }
.herov2-content { position: relative; z-index: 2; max-width: 760px; margin-top: 18vh; }
.herov2-stack { display: flex; flex-direction: column; font-family: var(--font-display); font-weight: 300; font-size: clamp(54px, 8vw, 120px); line-height: 0.95; letter-spacing: -0.02em; margin: 0 0 48px; color: #fff; }
.herov2-stack span { display: block; }
.herov2-stack .it { font-style: italic; color: var(--caramel-200); font-weight: 300; }

/* ===== Shared section headings — centered, large display ===== */
.secheadv2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(40px, 5vw, 72px); letter-spacing: -0.015em; line-height: 1.08;
  color: var(--fg-primary); text-align: center; margin: 0 auto 64px;
  max-width: 780px;
}

/* ===== Intro ===== */
.introv2 { padding: 140px 56px 120px; max-width: 980px; margin: 0 auto; text-align: center; }
.introv2-lead {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.01em; line-height: 1.2;
  color: var(--fg-primary); margin: 0 auto 32px; max-width: 820px;
}
.introv2-body { font-size: 17px; line-height: 1.7; color: var(--fg-secondary); max-width: 620px; margin: 0 auto 40px; }

/* ===== Stats ===== */
.statsv2 {
  background: var(--ivory-100);
  padding: 100px 56px;
  display: flex; align-items: center; justify-content: center; gap: 80px;
  flex-wrap: wrap;
}
.statv2 { text-align: center; }
.statv2-num {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(72px, 10vw, 144px); letter-spacing: -0.025em; line-height: 1;
  color: var(--accent); margin-bottom: 20px;
}
.statv2-cap { font-family: var(--font-label); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-secondary); line-height: 1.6; }
.statv2-divider { width: 1px; height: 140px; background: var(--line-strong); }

/* ===== Help ===== */
.helpv2 { padding: 140px 56px; max-width: 1120px; margin: 0 auto; }
.helpv2 .secheadv2 { text-align: left; margin-left: 0; }
.helpv2-list { list-style: none; padding: 0; margin: 0; border-top: 0.5px solid var(--line); }
.helpv2-list li { border-bottom: 0.5px solid var(--line); padding: 28px 0; }
.helpv2-list h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.01em; color: var(--fg-primary); margin: 0; line-height: 1.25; text-transform: none; }

/* ===== Services — stacked pricing tiles ===== */
.servv2 { background: var(--ivory-100); padding: 140px 56px; }
.servv2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; max-width: 1280px; margin: 0 auto; background: var(--line-strong); border: 0.5px solid var(--line-strong); }
.servv2-tile { background: var(--bg-primary); padding: 48px 40px; display: flex; flex-direction: column; }
.servv2-title { font-family: var(--font-display); font-weight: 400; font-size: 32px; letter-spacing: -0.01em; color: var(--fg-primary); margin: 0 0 28px; min-height: 84px; line-height: 1.15; text-transform: none; }
.servv2-pricewrap { margin-bottom: 28px; }
.servv2-old { display: block; font-family: var(--font-label); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-muted); text-decoration: line-through; margin-bottom: 6px; }
.servv2-price { font-family: var(--font-display); font-weight: 400; font-size: 44px; letter-spacing: -0.01em; color: var(--accent); line-height: 1; }
.servv2-lines { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; color: var(--fg-secondary); font-size: 15px; line-height: 1.5; }
.servv2-lines li { padding-left: 16px; position: relative; }
.servv2-lines li::before { content: '·'; position: absolute; left: 0; top: -4px; color: var(--accent); font-size: 22px; line-height: 1; }
.servv2-bonus { font-size: 13px; color: var(--caramel-800); margin: 0 0 28px; line-height: 1.5; }
.servv2-tile .linkbtn { margin-top: auto; align-self: flex-start; }

/* ===== Advantages ===== */
.advv2 { padding: 140px 56px; max-width: 1120px; margin: 0 auto; }
.advv2-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; }
.advv2-tile { text-align: center; }
.advv2-tile svg { margin: 0 auto 20px; display: block; }
.advv2-title { font-family: var(--font-display); font-weight: 400; font-size: 20px; color: var(--fg-primary); margin: 0 0 10px; text-transform: none; letter-spacing: 0; }
.advv2-tile p { font-size: 13px; line-height: 1.6; color: var(--fg-tertiary); margin: 0; }

/* ===== FAQ ===== */
.faqv2 { background: var(--ivory-100); padding: 140px 56px; }
.faqv2-list { list-style: none; padding: 0; margin: 0 auto; max-width: 900px; border-top: 0.5px solid var(--line); }
.faqv2-item { border-bottom: 0.5px solid var(--line); }
.faqv2-item button { background: transparent; border: none; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 24px 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.faqv2-item h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.01em; color: var(--fg-primary); margin: 0; line-height: 1.3; text-transform: none; }
.faqv2-toggle { font-family: var(--font-label); font-size: 24px; color: var(--accent); margin-left: 20px; flex-shrink: 0; }
.faqv2-item p { font-size: 15px; line-height: 1.75; color: var(--fg-secondary); margin: 0 0 24px; max-width: 720px; }

/* ===== CTA band ===== */
.ctav2 { position: relative; min-height: 560px; display: flex; align-items: center; justify-content: center; color: #fff; overflow: hidden; padding: 120px 56px; }
.ctav2-bg { position: absolute; inset: 0; z-index: 0; }
.ctav2-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.ctav2-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(37,36,34,0.45) 0%, rgba(37,36,34,0.65) 100%); }
.ctav2-content { position: relative; z-index: 2; text-align: center; max-width: 720px; }
.ctav2-eye { color: var(--caramel-200) !important; }
.ctav2-head { font-family: var(--font-display); font-weight: 300; font-size: clamp(46px, 6vw, 88px); line-height: 1; letter-spacing: -0.02em; color: #fff; margin: 18px 0 24px; }
.ctav2-note { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.8); margin: 0 0 40px; }

/* ===== Footer ===== */
.footv2 { background: var(--graphite-900); color: var(--ivory-100); padding: 80px 56px 40px; }
.footv2-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; max-width: 1180px; margin: 0 auto 60px; }
.footv2-cols h4 { font-family: var(--font-label); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--caramel-200); margin: 0 0 20px; }
.footv2-cols a { display: block; font-family: var(--font-body); font-size: 14px; color: var(--ivory-200); text-decoration: none; margin-bottom: 10px; opacity: 0.85; cursor: pointer; }
.footv2-cols a:hover { opacity: 1; color: var(--caramel-200); }
.footv2-brand { display: flex; align-items: center; gap: 14px; padding: 40px 0; border-top: 0.5px solid rgba(234,226,216,0.2); border-bottom: 0.5px solid rgba(234,226,216,0.2); max-width: 1180px; margin: 0 auto; font-family: var(--font-display); font-size: 18px; color: var(--ivory-100); }
.footv2-bottom { display: flex; justify-content: space-between; padding-top: 24px; max-width: 1180px; margin: 0 auto; font-size: 12px; color: rgba(234,226,216,0.6); font-family: var(--font-label); letter-spacing: 0.1em; }
.footv2-bottom a { color: inherit; text-decoration: none; cursor: pointer; }

@media (max-width: 980px) {
  .navv2 { padding: 20px 24px; }
  .navv2-links { display: none; }
  .herov2 { padding: 0 24px 56px; }
  .introv2, .helpv2, .advv2, .servv2, .faqv2, .ctav2, .footv2 { padding-left: 24px; padding-right: 24px; }
  .servv2-grid, .advv2-grid, .footv2-cols { grid-template-columns: 1fr; }
  .advv2-grid { grid-template-columns: repeat(2, 1fr); }
  .statsv2 { padding: 60px 24px; gap: 40px; }
  .statv2-divider { display: none; }
}