*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --green-deep:   #1a2e23;
    --green-mid:    #2d4a38;
    --green-soft:   #3d6b4f;
    --green-light:  #5a8a6a;
    --gold:         #c9a84c;
    --gold-light:   #e8c97a;
    --cream:        #f7f3ec;
    --cream-dark:   #ede7db;
    --text-dark:    #1a1a18;
    --text-mid:     #3d3d38;
    --text-soft:    #6b6b62;
    --white:        #ffffff;
    --radius:       16px;
    --radius-lg:    28px;
  }

  html { scroll-behavior: smooth; }

  body {
    font-family: 'Geologica', sans-serif;
    background: var(--cream);
    color: var(--text-dark);
    overflow-x: hidden;
    line-height: 1.6;
  }

  /* ─── UTILITIES ─────────────────────────────── */
  .container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
  .tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(201,168,76,0.12);
    border: 1px solid rgba(201,168,76,0.3);
    padding: 5px 14px;
    border-radius: 100px;
    margin-bottom: 20px;
  }
  .tag.white {
    color: var(--gold-light);
    background: rgba(201,168,76,0.15);
    border-color: rgba(201,168,76,0.25);
  }

  h1, h2, h3, h4 { font-family: 'Playfair Display', serif; line-height: 1.2; }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 32px;
    border-radius: 100px;
    font-family: 'Geologica', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
    border: none;
  }
  .btn-gold {
    background: linear-gradient(135deg, var(--gold), #b8922a);
    color: var(--white);
    box-shadow: 0 8px 32px rgba(201,168,76,0.4);
  }
  .btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(201,168,76,0.55);
  }
  .btn-outline {
    background: transparent;
    color: var(--white);
    border: 1.5px solid rgba(255,255,255,0.35);
  }
  .btn-outline:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.6);
  }
  .btn-dark {
    background: var(--green-deep);
    color: var(--white);
    box-shadow: 0 8px 24px rgba(26,46,35,0.3);
  }
  .btn-dark:hover {
    background: var(--green-mid);
    transform: translateY(-2px);
  }

  /* ─── HEADER ────────────────────────────────── */
  header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 18px 0;
    transition: all 0.3s ease;
  }
  header.scrolled {
    background: rgba(26,46,35,0.95);
    backdrop-filter: blur(12px);
    padding: 12px 0;
    box-shadow: 0 4px 24px rgba(0,0,0,0.2);
  }
  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
  }
  .logo-icon {
    width: 38px; height: 38px;
    background: linear-gradient(135deg, var(--gold), #b8922a);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
  }
  .logo-text {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: -0.02em;
  }
  .logo-text span { color: var(--gold-light); }
  nav { display: flex; align-items: center; gap: 8px; }
  nav a {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 100px;
    transition: all 0.2s;
  }
  nav a:hover { color: var(--white); background: rgba(255,255,255,0.1); }
  .nav-cta { margin-left: 8px; }

  /* ─── HERO ──────────────────────────────────── */
  .hero {
    min-height: 100vh;
    background: var(--green-deep);
    background-image:
      radial-gradient(ellipse 80% 60% at 70% 40%, rgba(61,107,79,0.5) 0%, transparent 70%),
      radial-gradient(ellipse 50% 80% at 10% 80%, rgba(45,74,56,0.6) 0%, transparent 60%);
    display: flex;
    align-items: center;
    padding: 120px 0 80px;
    position: relative;
    overflow: hidden;
  }
  .hero::before {
    content: '';
    position: absolute;
    top: -200px; right: -200px;
    width: 700px; height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,168,76,0.08) 0%, transparent 70%);
    pointer-events: none;
  }
  /* decorative dots grid */
  .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
  }
  .hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(201,168,76,0.15);
    border: 1px solid rgba(201,168,76,0.3);
    color: var(--gold-light);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 100px;
    margin-bottom: 28px;
  }
  .hero-badge::before { content: '✦'; color: var(--gold); }
  .hero h1 {
    font-size: clamp(38px, 5vw, 62px);
    color: var(--white);
    font-weight: 700;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
  }
  .hero h1 em {
    font-style: italic;
    color: var(--gold-light);
    display: block;
  }
  .hero-sub {
    font-size: 17px;
    color: rgba(255,255,255,0.7);
    line-height: 1.7;
    margin-bottom: 40px;
    font-weight: 300;
  }
  .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
  .hero-stats {
    display: flex;
    gap: 32px;
    margin-top: 52px;
    padding-top: 36px;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .stat-item {}
  .stat-num {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--gold-light);
    display: block;
  }
  .stat-label {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  /* Hero visual */
  .hero-visual {
    position: relative;
  }
  .hero-card {
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-lg);
    padding: 28px;
    position: relative;
  }
  .hero-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
  }
  .hc-dot { width:10px; height:10px; border-radius:50%; }
  .hc-dot.r { background:#ff6b6b; }
  .hc-dot.y { background:#ffd93d; }
  .hc-dot.g { background:#6bcb77; }
  .hc-title { color:rgba(255,255,255,0.4); font-size:13px; margin-left:auto; }
  .hc-date {
    text-align:center;
    color:rgba(255,255,255,0.5);
    font-size:12px;
    margin-bottom:16px;
    text-transform:uppercase;
    letter-spacing:0.1em;
  }
  /* mini calendar */
  .mini-cal {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 20px;
  }
  .cal-cell {
    aspect-ratio: 1;
    display:flex; align-items:center; justify-content:center;
    font-size:12px;
    border-radius: 8px;
    color: rgba(255,255,255,0.5);
    font-weight: 400;
  }
  .cal-cell.header { color: rgba(255,255,255,0.3); font-size:10px; font-weight:600; }
  .cal-cell.busy { background: rgba(201,168,76,0.25); color: var(--gold-light); font-weight:600; }
  .cal-cell.today { background: var(--gold); color:#fff; font-weight:700; border-radius:50%; }
  .cal-cell.free { color: rgba(255,255,255,0.25); }

  /* appointment cards */
  .appt-list { display:flex; flex-direction:column; gap:8px; }
  .appt {
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 12px 14px;
    display:flex; align-items:center; gap:12px;
    border-left: 3px solid transparent;
    transition: all 0.2s;
  }
  .appt.confirmed { border-left-color: #6bcb77; }
  .appt.pending   { border-left-color: var(--gold); }
  .appt-time { font-size:13px; font-weight:600; color:rgba(255,255,255,0.9); min-width:42px; }
  .appt-info { flex:1; }
  .appt-name { font-size:13px; color:rgba(255,255,255,0.85); font-weight:500; }
  .appt-service { font-size:11px; color:rgba(255,255,255,0.4); }
  .appt-price { font-size:13px; color:var(--gold-light); font-weight:600; }

  /* float badges */
  .float-badge {
    position:absolute;
    background: var(--white);
    border-radius: 14px;
    padding: 12px 18px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.3);
    display:flex; align-items:center; gap:10px;
    animation: float 3s ease-in-out infinite;
  }
  .float-badge:nth-child(2) { animation-delay: -1.5s; }
  .fb-1 { bottom:-24px; left:-40px; }
  .fb-2 { top:-20px; right:-30px; }
  .fb-3 { bottom:30px; left:-40px; animation-delay: -0.8s; }
  .fb-icon { font-size:20px; }
  .fb-text strong { display:block; font-size:13px; font-weight:600; color:var(--text-dark); }
  .fb-text span { font-size:11px; color:var(--text-soft); }
  @keyframes float {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }

  /* ─── PROBLEMS ──────────────────────────────── */
  .problems {
    padding: 100px 0;
    background: var(--white);
  }
  .problems-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 56px;
  }
  .problem-card {
    background: var(--cream);
    border-radius: var(--radius);
    padding: 32px;
    border: 1px solid var(--cream-dark);
    transition: transform 0.3s;
  }
  .problem-card:hover { transform: translateY(-4px); }
  .problem-emoji { font-size: 36px; margin-bottom: 16px; display: block; }
  .problem-card h3 {
    font-size: 18px;
    font-family: 'Geologica', sans-serif;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-dark);
  }
  .problem-card p { font-size: 14px; color: var(--text-soft); line-height: 1.7; }
  .problem-arrow {
    text-align:center;
    margin-top: 52px;
    font-size: 15px;
    color: var(--green-soft);
    font-weight: 600;
    display:flex; align-items:center; justify-content:center; gap:12px;
  }
  .problem-arrow::before, .problem-arrow::after {
    content:'';
    flex:1;
    height:1px;
    background: linear-gradient(to right, transparent, var(--cream-dark));
  }
  .problem-arrow::after { background: linear-gradient(to left, transparent, var(--cream-dark)); }

  /* ─── FEATURES ──────────────────────────────── */
  .features {
    padding: 100px 0;
    background: var(--cream);
  }
  .section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 64px;
  }
  .section-header h2 {
    font-size: clamp(30px, 4vw, 46px);
    color: var(--text-dark);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
  }
  .section-header p {
    font-size: 16px;
    color: var(--text-soft);
    line-height: 1.7;
  }

  /* Feature blocks — alternating */
  .feature-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 100px;
  }
  .feature-block:last-child { margin-bottom: 0; }
  .feature-block.reverse .feature-text { order: 2; }
  .feature-block.reverse .feature-visual { order: 1; }

  .feature-text h3 {
    font-size: clamp(24px, 3vw, 36px);
    color: var(--text-dark);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
  }
  .feature-text p {
    font-size: 15px;
    color: var(--text-soft);
    line-height: 1.8;
    margin-bottom: 28px;
  }
  .feature-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: var(--text-mid);
    line-height: 1.6;
  }
  .feature-list li::before {
    content: '✓';
    width: 22px; height: 22px;
    background: rgba(61,107,79,0.12);
    color: var(--green-soft);
    border-radius: 50%;
    display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:700;
    flex-shrink:0;
    margin-top:1px;
  }

  /* Feature visual cards */
  .fv-card {
    background: var(--green-deep);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: 0 32px 80px rgba(26,46,35,0.2);
    overflow: hidden;
    position: relative;
  }
  .fv-card::before {
    content: '';
    position:absolute;
    top:-80px; right:-80px;
    width:240px; height:240px;
    border-radius:50%;
    background: radial-gradient(circle, rgba(201,168,76,0.12), transparent 70%);
  }
  .fv-card.light {
    background: var(--white);
    box-shadow: 0 16px 64px rgba(26,46,35,0.1);
  }
  .fv-card.light::before { background: radial-gradient(circle, rgba(61,107,79,0.08), transparent 70%); }

  /* Telegram widget */
  .tg-header {
    display:flex; align-items:center; gap:10px;
    background: rgba(255,255,255,0.08);
    border-radius:12px; padding:14px 16px;
    margin-bottom:16px;
  }
  .tg-avatar {
    width:40px; height:40px; border-radius:50%;
    background: linear-gradient(135deg, var(--gold), #b8922a);
    display:flex; align-items:center; justify-content:center;
    font-size:18px;
  }
  .tg-name { color:var(--white); font-weight:600; font-size:14px; }
  .tg-status { color:rgba(255,255,255,0.4); font-size:12px; }
  .tg-messages { display:flex; flex-direction:column; gap:10px; }
  .tg-msg {
    padding:10px 14px; border-radius:14px; max-width:85%;
    font-size:13px; line-height:1.5;
  }
  .tg-msg.bot {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.85);
    border-bottom-left-radius:4px;
    align-self:flex-start;
  }
  .tg-msg.client {
    background: rgba(201,168,76,0.25);
    color: var(--gold-light);
    border-bottom-right-radius:4px;
    align-self:flex-end;
  }
  .tg-time { font-size:10px; color:rgba(255,255,255,0.3); text-align:right; margin-top:6px; }

  /* Finance widget */
  .finance-kpi {
    display:grid; grid-template-columns:1fr 1fr;
    gap:12px; margin-bottom:20px;
  }
  .kpi {
    background:rgba(255,255,255,0.06);
    border-radius:12px; padding:16px;
  }
  .kpi-label { font-size:11px; color:rgba(255,255,255,0.4); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.08em; }
  .kpi-value { font-size:22px; font-weight:700; color:var(--white); font-family:'Playfair Display',serif; }
  .kpi-delta { font-size:12px; margin-top:4px; }
  .kpi-delta.up { color:#6bcb77; }
  .kpi-delta.down { color:#ff6b6b; }
  .chart-bars {
    display:flex; align-items:flex-end; gap:6px; height:80px;
  }
  .bar-wrap { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
  .bar {
    width:100%; border-radius:6px 6px 0 0;
    background: linear-gradient(to top, rgba(201,168,76,0.5), rgba(201,168,76,0.8));
    transition: height 0.5s ease;
  }
  .bar-label { font-size:10px; color:rgba(255,255,255,0.3); }

  /* Online booking widget */
  .booking-steps {
    display:flex; flex-direction:column; gap:10px;
  }
  .bstep {
    background: var(--cream);
    border-radius:12px; padding:14px 16px;
    display:flex; align-items:center; gap:14px;
    border: 1px solid var(--cream-dark);
  }
  .bstep.active {
    background: var(--green-deep);
    border-color: var(--green-deep);
  }
  .bstep-num {
    width:28px; height:28px; border-radius:50%;
    background: var(--cream-dark);
    display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:700; color:var(--text-soft);
    flex-shrink:0;
  }
  .bstep.active .bstep-num { background:var(--gold); color:#fff; }
  .bstep-title { font-size:14px; font-weight:500; color:var(--text-dark); }
  .bstep.active .bstep-title { color:var(--white); }
  .bstep-sub { font-size:12px; color:var(--text-soft); }
  .bstep.active .bstep-sub { color:rgba(255,255,255,0.5); }

  /* Security widget */
  .sec-items { display:flex; flex-direction:column; gap:12px; }
  .sec-item {
    display:flex; align-items:center; gap:14px;
    background:rgba(255,255,255,0.06);
    border-radius:12px; padding:14px 16px;
  }
  .sec-icon { font-size:22px; flex-shrink:0; }
  .sec-title { font-size:14px; font-weight:500; color:rgba(255,255,255,0.9); }
  .sec-desc { font-size:12px; color:rgba(255,255,255,0.45); margin-top:2px; }
  .sec-check {
    margin-left:auto;
    width:22px; height:22px; border-radius:50%;
    background:#6bcb77;
    display:flex; align-items:center; justify-content:center;
    font-size:11px; color:#fff; font-weight:700;
    flex-shrink:0;
  }

  /* ─── WHO IS IT FOR ─────────────────────────── */
  .audience {
    padding: 100px 0;
    background: var(--white);
  }
  .audience-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:28px; margin-top:56px;
  }
  .aud-card {
    border-radius: var(--radius-lg);
    padding: 40px 32px;
    position:relative; overflow:hidden;
    border: 1px solid var(--cream-dark);
    background: var(--cream);
    transition: transform 0.3s, box-shadow 0.3s;
  }
  .aud-card:hover { transform:translateY(-6px); box-shadow:0 24px 64px rgba(26,46,35,0.12); }
  .aud-card.featured {
    background: var(--green-deep);
    border-color: transparent;
    color: var(--white);
  }
  .aud-card.featured::after {
    content:'';
    position:absolute; top:-60px; right:-60px;
    width:200px; height:200px; border-radius:50%;
    background:radial-gradient(circle,rgba(201,168,76,0.15),transparent 70%);
  }
  .aud-emoji { font-size:44px; display:block; margin-bottom:20px; }
  .aud-card h3 {
    font-size:22px; margin-bottom:12px;
    color:var(--text-dark);
  }
  .aud-card.featured h3 { color:var(--white); }
  .aud-card p { font-size:14px; line-height:1.7; color:var(--text-soft); }
  .aud-card.featured p { color:rgba(255,255,255,0.65); }
  .aud-features {
    list-style:none; margin-top:24px;
    display:flex; flex-direction:column; gap:10px;
  }
  .aud-features li {
    display:flex; align-items:center; gap:10px;
    font-size:13px; color:var(--text-mid);
  }
  .aud-card.featured .aud-features li { color:rgba(255,255,255,0.8); }
  .aud-features li::before {
    content:'→'; color:var(--green-soft); font-weight:700;
  }
  .aud-card.featured .aud-features li::before { color:var(--gold); }

  /* ─── PRICING ───────────────────────────────── */
  .pricing {
    padding: 100px 0;
    background: var(--cream);
  }
  .pricing-grid {
    display:grid; grid-template-columns:repeat(5,1fr);
    gap:16px; margin-top:56px;
    align-items:start;
  }
  .plan-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    border: 1.5px solid var(--cream-dark);
    transition: all 0.3s;
    position:relative;
  }
  .plan-card:hover { box-shadow:0 16px 48px rgba(26,46,35,0.1); transform:translateY(-4px); }
  .plan-card.popular {
    background: var(--green-deep);
    border-color: transparent;
    color:var(--white);
  }
  .plan-card.popular::before {
    content:'Популярный';
    position:absolute; top:-12px; left:50%; transform:translateX(-50%);
    background:var(--gold);
    color:#fff; font-size:11px; font-weight:700;
    padding:4px 16px; border-radius:100px;
    letter-spacing:0.06em; text-transform:uppercase;
    white-space:nowrap;
  }
  .plan-name {
    font-size:13px; font-weight:700; text-transform:uppercase;
    letter-spacing:0.1em; color:var(--text-soft);
    margin-bottom:12px;
  }
  .plan-card.popular .plan-name { color:rgba(255,255,255,0.5); }
  .plan-price {
    font-family:'Playfair Display',serif;
    font-size:38px; font-weight:700;
    color:var(--text-dark);
    margin-bottom:4px;
    line-height:1;
  }
  .plan-card.popular .plan-price { color:var(--white); }
  .plan-price sup { font-size:18px; vertical-align:top; margin-top:6px; display:inline-block; }
  .plan-period {
    font-size:13px; color:var(--text-soft);
    margin-bottom:24px;
  }
  .plan-card.popular .plan-period { color:rgba(255,255,255,0.45); }
  .plan-divider {
    height:1px; background:var(--cream-dark);
    margin-bottom:24px;
  }
  .plan-card.popular .plan-divider { background:rgba(255,255,255,0.1); }
  .plan-limit {
    font-size:14px; font-weight:600; margin-bottom:16px;
    color:var(--text-dark);
  }
  .plan-card.popular .plan-limit { color:var(--gold-light); }
  .plan-features {
    list-style:none; display:flex; flex-direction:column; gap:10px;
    margin-bottom:28px;
  }
  .plan-features li {
    display:flex; align-items:flex-start; gap:10px;
    font-size:13px; color:var(--text-mid); line-height:1.5;
  }
  .plan-card.popular .plan-features li { color:rgba(255,255,255,0.75); }
  .plan-features li .check { color:var(--green-soft); font-weight:700; flex-shrink:0; }
  .plan-features li .cross { color:#ccc; flex-shrink:0; }
  .plan-card.popular .plan-features li .check { color:var(--gold-light); }
  .plan-btn {
    display:block; width:100%; text-align:center;
    padding:14px; border-radius:100px;
    font-weight:600; font-size:14px;
    cursor:pointer; text-decoration:none;
    transition:all 0.2s;
    border:1.5px solid var(--cream-dark);
    color:var(--text-dark); background:transparent;
  }
  .plan-btn:hover { background:var(--cream); }
  .plan-card.popular .plan-btn {
    background:var(--gold);
    border-color:transparent;
    color:#fff;
    box-shadow:0 8px 24px rgba(201,168,76,0.4);
  }
  .plan-card.popular .plan-btn:hover { background:#b8922a; }
  .plan-free-note {
    text-align:center; margin-top:20px;
    font-size:13px; color:var(--text-soft);
  }
  .plan-free-note strong { color:var(--green-soft); }

  /* ─── HOW IT WORKS ──────────────────────────── */
  .how {
    padding: 100px 0;
    background: var(--green-deep);
    position:relative; overflow:hidden;
  }
  .how::before {
    content:'';
    position:absolute; inset:0;
    background-image: radial-gradient(circle,rgba(255,255,255,0.03) 1px,transparent 1px);
    background-size:40px 40px;
  }
  .how .section-header h2 { color:var(--white); }
  .how .section-header p { color:rgba(255,255,255,0.55); }
  .steps-grid {
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:32px; margin-top:64px; position:relative; z-index:1;
  }
  .steps-grid::before {
    content:'';
    position:absolute; top:32px; left:12.5%; right:12.5%; height:2px;
    background:linear-gradient(to right, transparent, rgba(201,168,76,0.4) 20%, rgba(201,168,76,0.4) 80%, transparent);
    pointer-events:none;
  }
  .step-item { text-align:center; }
  .step-num {
    width:64px; height:64px; border-radius:50%;
    background:rgba(201,168,76,0.15);
    border:2px solid rgba(201,168,76,0.35);
    display:flex; align-items:center; justify-content:center;
    font-family:'Playfair Display',serif;
    font-size:24px; font-weight:700; color:var(--gold-light);
    margin:0 auto 20px;
    position:relative; z-index:1;
    background: linear-gradient(135deg,rgba(201,168,76,0.2),rgba(201,168,76,0.05));
  }
  .step-title { font-size:16px; font-weight:600; color:var(--white); margin-bottom:10px; }
  .step-desc { font-size:14px; color:rgba(255,255,255,0.5); line-height:1.7; }

  /* ─── TESTIMONIALS ──────────────────────────── */
  .testimonials {
    padding: 100px 0;
    background: var(--cream);
  }
  .testi-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:24px; margin-top:56px;
  }
  .testi-card {
    background:var(--white);
    border-radius:var(--radius-lg); padding:32px;
    border:1px solid var(--cream-dark);
    position:relative;
  }
  .testi-card::before {
    content:'"';
    position:absolute; top:16px; right:24px;
    font-family:'Playfair Display',serif;
    font-size:80px; color:var(--cream-dark);
    line-height:1;
  }
  .testi-stars { color:var(--gold); font-size:16px; margin-bottom:16px; }
  .testi-text { font-size:15px; line-height:1.8; color:var(--text-mid); margin-bottom:24px; font-style:italic; }
  .testi-author { display:flex; align-items:center; gap:12px; }
  .testi-avatar {
    width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:20px;
    background:var(--cream-dark);
  }
  .testi-name { font-weight:600; font-size:14px; color:var(--text-dark); }
  .testi-role { font-size:12px; color:var(--text-soft); }

  /* ─── BLOG ──────────────────────────────────── */
  .blog-section { padding:100px 0; background:var(--cream); }
  .blog-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:24px; margin-top:56px;
  }
  .blog-card {
    background:var(--white);
    border:1px solid var(--cream-dark);
    border-radius:var(--radius-lg);
    padding:32px;
    display:flex; flex-direction:column;
    text-decoration:none;
    color:inherit;
    transition:transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  }
  .blog-card:hover {
    transform:translateY(-4px);
    box-shadow:0 14px 36px rgba(26,46,35,0.1);
    border-color:var(--gold-light);
  }
  .blog-card-tag {
    display:inline-block;
    font-size:11px; font-weight:700;
    color:var(--green-soft);
    background:rgba(61,107,79,0.08);
    padding:5px 12px; border-radius:100px;
    margin-bottom:18px;
    text-transform:uppercase; letter-spacing:0.05em;
    align-self:flex-start;
  }
  .blog-card h3 {
    font-family:'Playfair Display',serif;
    font-size:21px; line-height:1.3;
    color:var(--text-dark);
    margin-bottom:12px;
    letter-spacing:-0.01em;
  }
  .blog-card p {
    font-size:14px; line-height:1.7;
    color:var(--text-soft);
    margin-bottom:22px;
    flex:1;
  }
  .blog-card-meta {
    display:flex; align-items:center; justify-content:space-between;
    font-size:13px; color:var(--text-soft);
    padding-top:16px;
    border-top:1px solid var(--cream-dark);
  }
  .blog-card-read {
    color:var(--green-soft); font-weight:700;
  }
  .blog-all {
    display:flex; justify-content:center; margin-top:48px;
  }
  .blog-all a {
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 32px;
    background:transparent;
    color:var(--green-deep);
    border:1.5px solid var(--green-mid);
    border-radius:100px;
    font-size:15px; font-weight:700;
    text-decoration:none;
    transition:background 0.2s, color 0.2s;
  }
  .blog-all a:hover {
    background:var(--green-deep);
    color:var(--white);
  }

  /* ─── FAQ ───────────────────────────────────── */
  .faq { padding:100px 0; background:var(--white); }
  .faq-list { max-width:780px; margin:56px auto 0; display:flex; flex-direction:column; gap:0; }
  .faq-item {
    border-bottom:1px solid var(--cream-dark);
    overflow:hidden;
  }
  .faq-q {
    width:100%; background:none; border:none; cursor:pointer;
    padding:22px 0;
    display:flex; align-items:center; justify-content:space-between;
    font-family:'Geologica',sans-serif;
    font-size:16px; font-weight:500; color:var(--text-dark);
    text-align:left; gap:16px;
  }
  .faq-q:hover { color:var(--green-soft); }
  .faq-icon {
    width:28px; height:28px; border-radius:50%;
    background:var(--cream); color:var(--green-soft);
    display:flex; align-items:center; justify-content:center;
    font-size:16px; flex-shrink:0; transition:transform 0.3s;
    font-weight:400;
  }
  .faq-item.open .faq-icon { transform:rotate(45deg); background:var(--green-deep); color:#fff; }
  .faq-a {
    max-height:0; overflow:hidden;
    transition:max-height 0.4s ease, padding 0.3s ease;
    font-size:14px; line-height:1.8; color:var(--text-soft);
  }
  .faq-item.open .faq-a { max-height:300px; padding-bottom:20px; }

  /* ─── CTA ───────────────────────────────────── */
  .cta-section {
    padding:100px 0;
    background: var(--green-deep);
    text-align:center;
    position:relative; overflow:hidden;
  }
  .cta-section::before {
    content:'';
    position:absolute;
    top:50%; left:50%; transform:translate(-50%,-50%);
    width:800px; height:400px;
    border-radius:50%;
    background:radial-gradient(ellipse,rgba(201,168,76,0.1),transparent 70%);
    pointer-events:none;
  }
  .cta-section h2 {
    font-size:clamp(32px,5vw,52px);
    color:var(--white);
    margin-bottom:16px;
    letter-spacing:-0.02em;
    position:relative;
  }
  .cta-section h2 em { color:var(--gold-light); font-style:italic; }
  .cta-section p { font-size:17px; color:rgba(255,255,255,0.6); margin-bottom:40px; position:relative; }
  .cta-btns { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; position:relative; }
  .cta-note { font-size:13px; color:rgba(255,255,255,0.35); margin-top:20px; position:relative; }

  /* ─── FOOTER ────────────────────────────────── */
  footer {
    background:var(--text-dark);
    color:rgba(255,255,255,0.5);
    padding:60px 0 40px;
  }
  .footer-grid {
    display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
    gap:48px; margin-bottom:48px;
  }
  .footer-brand .logo-text { color:var(--white); font-size:20px; }
  .footer-brand p { font-size:13px; line-height:1.7; margin-top:14px; }
  .footer-col h4 { font-size:13px; font-weight:700; color:var(--white); margin-bottom:16px; text-transform:uppercase; letter-spacing:0.1em; }
  .footer-col a { display:block; font-size:13px; color:rgba(255,255,255,0.45); text-decoration:none; margin-bottom:10px; transition:color 0.2s; }
  .footer-col a:hover { color:var(--white); }
  .footer-bottom {
    border-top:1px solid rgba(255,255,255,0.08);
    padding-top:28px;
    display:flex; align-items:center; justify-content:space-between;
    font-size:12px;
  }
  .footer-bottom a { color:rgba(255,255,255,0.4); text-decoration:none; }
  .footer-bottom a:hover { color:var(--white); }

  /* ─── SCROLL ANIMATIONS ─────────────────────── */
  .reveal {
    opacity:0;
    transform:translateY(28px);
    transition:opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal.visible {
    opacity:1;
    transform:translateY(0);
  }
  .reveal-delay-1 { transition-delay:0.1s; }
  .reveal-delay-2 { transition-delay:0.2s; }
  .reveal-delay-3 { transition-delay:0.3s; }
  .reveal-delay-4 { transition-delay:0.4s; }

  /* Mobile */
  .mobile-menu-btn {
    display:none;
    background:none; border:none; cursor:pointer;
    padding:8px;
    position:relative;
    z-index:210;
  }
  .mobile-menu-btn span {
    display:block; width:24px; height:2px;
    background:var(--white); border-radius:2px; margin:5px 0;
    transition:all 0.3s;
  }
  .mobile-menu-btn.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
  .mobile-menu-btn.active span:nth-child(2) { opacity:0; }
  .mobile-menu-btn.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

  @media (max-width:1024px) {
    .pricing-grid { grid-template-columns:repeat(3,1fr); }
    .steps-grid { grid-template-columns:repeat(2,1fr); }
    .steps-grid::before { display:none; }
    .footer-grid { grid-template-columns:1fr 1fr; }
    nav { display:none; }
    .mobile-menu-btn { display:block; }
    nav.open {
      display:flex;
      flex-direction:column;
      position:fixed;
      top:0; left:0;
      width:100%; height:100%;
      min-height:100vh;
      min-height:-webkit-fill-available;
      background:#1a2e23;
      z-index:200;
      padding:80px 32px 40px;
      gap:8px;
      align-items:stretch;
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
    }
    nav.open a {
      font-size:18px;
      padding:14px 20px;
      border-bottom:1px solid rgba(255,255,255,0.1);
      border-radius:0;
      text-align:left;
    }
    nav.open .nav-cta {
      margin-left:0;
      margin-top:12px;
      text-align:center;
      border-radius:100px;
    }
  }
  @media (max-width:768px) {
    .hero-inner { grid-template-columns:1fr; gap:48px; }
    .hero-visual { display:none; }
    .problems-grid { grid-template-columns:1fr; }
    .feature-block { grid-template-columns:1fr; gap:40px; }
    .feature-block.reverse .feature-text { order:0; }
    .feature-block.reverse .feature-visual { order:0; }
    .audience-grid { grid-template-columns:1fr; }
    .pricing-grid { grid-template-columns:1fr; }
    .testi-grid { grid-template-columns:1fr; }
    .blog-grid { grid-template-columns:1fr; }
    .blog-section { padding:60px 0; }
    .steps-grid { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:1fr; }
    .footer-bottom { flex-direction:column; gap:12px; text-align:center; }
    .hero-stats { flex-wrap:wrap; gap:20px; }
    .reg-box { padding:32px 24px; }
    h1 { font-size:32px; }
    h2 { font-size:26px; }
    .hero { padding:100px 0 60px; }
    .container { padding:0 16px; }
  }