/* InvestKomek — лендинг. Светлая палитра: синий как основной цвет действия,
     зелёный из логотипа — точечный акцент. Тёмная тема мягкая, без чёрного. */
  :root{
    --paper:#F6F7FC; --card:#FFFFFF; --ink:#131C3D; --muted:#5C6683; --line:#E4E8F3;
    --brand:#2B4AD8; --brand-deep:#1E36A8; --brand-soft:#EDF1FF; --brand-ink:#FFFFFF;
    --accent:#0FA971; --accent-deep:#0B8459; --accent-soft:#E8F7F1;
    --tint-1:#EEF2FF; --tint-2:#F6F7FC;
    --deep:#1B2757; --deep-ink:#FFFFFF; --deep-muted:#B7C0E0;
    --shadow-s:0 1px 2px rgba(19,28,61,.05), 0 6px 18px rgba(19,28,61,.06);
    --shadow-l:0 2px 4px rgba(19,28,61,.05), 0 22px 54px rgba(19,28,61,.10);
    --radius:16px;
  }
  :root[data-theme="dark"]{
      --paper:#141B36; --card:#1C2449; --ink:#E9ECF8; --muted:#9BA5C7; --line:#2C3565;
      --brand:#7A91FF; --brand-deep:#A4B5FF; --brand-soft:#232C5E; --brand-ink:#0E1430;
      --accent:#2FD69B; --accent-deep:#5FE3B5; --accent-soft:#17332A;
      --tint-1:#1A2246; --tint-2:#141B36;
      --deep:#232C5E; --deep-ink:#FFFFFF; --deep-muted:#AEB8DC;
      --shadow-s:0 1px 3px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.22);
      --shadow-l:0 2px 6px rgba(0,0,0,.4), 0 22px 54px rgba(0,0,0,.32);
  }
  *{box-sizing:border-box}
  [hidden]{display:none !important}
  html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none !important; transition:none !important} }
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font:16px/1.65 "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block}
  a{color:inherit}
  .wrap{width:min(1120px, 100% - 40px); margin-inline:auto}
  @media (max-width:560px){ .wrap{width:min(1120px, 100% - 32px)} }
  section{padding:72px 0}
  @media (max-width:760px){ section{padding:52px 0} }
  h1,h2,h3{line-height:1.2; letter-spacing:-.02em; margin:0}
  h2{font-size:clamp(26px, 3.4vw, 38px); font-weight:800}
  h3{font-size:19px; font-weight:700}
  p{margin:0}
  .lead{color:var(--muted); font-size:clamp(16px, 1.6vw, 18px); max-width:62ch}
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase; color:var(--brand-deep);
  }
  .eyebrow::before{content:""; width:22px; height:2px; background:var(--accent); border-radius:2px}
  .shead{display:flex; flex-direction:column; gap:14px; margin-bottom:36px; max-width:70ch}
  .tinted{background:var(--tint-1); border-block:1px solid var(--line)}
  .on-card{background:var(--card); border-block:1px solid var(--line)}

  /* ───── buttons ───── */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    font:inherit; font-weight:700; font-size:15.5px; text-decoration:none; cursor:pointer;
    padding:14px 24px; border-radius:999px; border:1px solid transparent; transition:.18s ease;
    white-space:nowrap;
  }
  .btn-primary{background:var(--brand); color:var(--brand-ink); box-shadow:0 8px 20px rgba(43,74,216,.22)}
  .btn-primary:hover{transform:translateY(-1px); box-shadow:0 12px 26px rgba(43,74,216,.30)}
  .btn-ghost, .btn-line{border-color:var(--line); background:var(--card); color:var(--ink)}
  .btn-ghost:hover, .btn-line:hover{border-color:var(--brand); color:var(--brand-deep)}
  .btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible,
  select:focus-visible, textarea:focus-visible, summary:focus-visible{
    outline:2px solid var(--brand); outline-offset:2px;
  }
  .btn-sm{padding:10px 18px; font-size:14px}

  /* ───── header ───── */
  .topbar{
    position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--card) 88%, transparent);
    backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line);
  }
  @supports not (backdrop-filter: blur(4px)){ .topbar{background:var(--card)} }
  .topbar-in{display:flex; align-items:center; gap:22px; padding:12px 0; min-height:64px}
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none}
  .brand img{height:32px; width:auto}
  .nav{display:flex; gap:22px; margin-left:8px}
  .nav a{color:var(--muted); text-decoration:none; font-size:14.5px; font-weight:600}
  .nav a:hover{color:var(--ink)}
  .topbar-cta{margin-left:auto; display:flex; align-items:center; gap:14px}
  .topbar-phone{color:var(--ink); text-decoration:none; font-weight:700; font-size:15px; white-space:nowrap}
  .topbar-phone:hover{color:var(--brand-deep)}
  .langs{display:flex; gap:4px; align-items:center; font-size:13px; font-weight:700}
  .langs a{color:var(--muted); text-decoration:none; padding:4px 7px; border-radius:6px}
  .langs a[aria-current="true"]{background:var(--brand-soft); color:var(--brand-deep)}
  .langs a:hover{color:var(--ink)}
  @media (max-width:1000px){ .nav{display:none} }
  @media (max-width:640px){ .topbar-phone{display:none} .topbar-in{min-height:58px} }

  /* ───── hero ───── */
  .hero{
    position:relative; overflow:hidden; padding:76px 0 84px;
    background:linear-gradient(170deg, var(--tint-1) 0%, var(--tint-2) 72%);
  }
  .hero::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(720px 420px at 86% 6%, rgba(43,74,216,.10), transparent 62%),
      radial-gradient(560px 380px at 4% 94%, rgba(15,169,113,.10), transparent 60%);
  }
  .hero::after{
    content:""; position:absolute; right:-80px; top:50%; transform:translateY(-50%);
    width:500px; height:500px; pointer-events:none; opacity:.05;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='70,0 20,50 70,100 92,100 42,50 92,0' fill='%231B2757'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .hero .wrap{position:relative; z-index:1}
  .hero-grid{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:56px; align-items:center}
  @media (max-width:960px){ .hero-grid{grid-template-columns:1fr; gap:40px} .hero{padding:52px 0 60px} }
  .badge{
    display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px;
    background:var(--brand-soft); border:1px solid color-mix(in srgb, var(--brand) 22%, transparent);
    color:var(--brand-deep); font-size:13px; font-weight:700;
  }
  .hero h1{margin:18px 0 18px; font-size:clamp(32px, 4.6vw, 54px); font-weight:800; letter-spacing:-.03em}
  .hero h1 em{font-style:normal; color:var(--brand-deep)}
  .hero-sub{color:var(--muted); font-size:clamp(16px, 1.8vw, 19px); max-width:56ch}
  .hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
  .hero-trust{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:26px; color:var(--muted); font-size:14px}
  .hero-trust span{display:inline-flex; align-items:center; gap:8px}
  .hero-trust span::before{
    content:""; width:16px; height:16px; flex:none; border-radius:50%;
    background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%230B8459' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
  }

  .quote-card{
    background:var(--card); color:var(--ink); border-radius:20px; padding:26px;
    box-shadow:var(--shadow-l); border:1px solid var(--line);
  }
  .quote-card h2{font-size:17px; font-weight:700; letter-spacing:0}
  .qc-note{color:var(--muted); font-size:13.5px; margin-top:4px}
  .qc-rows{margin:20px 0 0; padding:0; list-style:none; display:grid; gap:2px}
  .qc-rows li{display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px dashed var(--line)}
  .qc-rows li:last-child{border-bottom:0}
  .qc-k{color:var(--muted); font-size:14.5px}
  .qc-v{font-weight:800; font-size:19px; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
  .qc-v.accent{color:var(--accent-deep)}
  .qc-foot{margin-top:20px; display:grid; gap:10px}
  .qc-foot .btn{width:100%}
  .qc-fine{color:var(--muted); font-size:12.5px; line-height:1.5}

  /* ───── stats ───── */
  .stats{background:var(--card); border-block:1px solid var(--line)}
  .stats-in{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:30px 0}
  @media (max-width:760px){ .stats-in{grid-template-columns:repeat(2,1fr); gap:22px 16px; padding:26px 0} }
  .stat b{display:block; font-size:clamp(24px,2.8vw,32px); font-weight:800; letter-spacing:-.02em; color:var(--ink)}
  .stat:first-child b{color:var(--accent-deep)}
  .stat span{display:block; color:var(--muted); font-size:14px; margin-top:4px}

  /* ───── cards ───── */
  .cards{display:grid; gap:20px}
  .cols-2{grid-template-columns:repeat(2,1fr)}
  .cols-3{grid-template-columns:repeat(3,1fr)}
  .cols-4{grid-template-columns:repeat(4,1fr)}
  @media (max-width:980px){ .cols-4{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:1fr 1fr} }
  @media (max-width:700px){ .cols-2,.cols-3,.cols-4{grid-template-columns:1fr} }
  .card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:26px; box-shadow:var(--shadow-s); display:flex; flex-direction:column; gap:12px;
  }
  .card p{color:var(--muted); font-size:15px}
  .card ul{margin:0; padding-left:18px; color:var(--muted); font-size:14.5px; display:grid; gap:6px}
  .ico{
    width:42px; height:42px; border-radius:12px; background:var(--brand-soft);
    display:grid; place-items:center; color:var(--brand-deep); flex:none;
  }
  .ico svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
  .card-link{
    margin-top:auto; padding-top:6px; color:var(--brand-deep); font-weight:700; font-size:14.5px;
    text-decoration:none; display:inline-flex; align-items:center; gap:6px;
  }
  .card-link:hover{gap:10px}
  a.card{text-decoration:none; transition:.18s ease}
  a.card:hover{border-color:var(--brand); transform:translateY(-2px)}

  /* ───── steps ───── */
  .steps{counter-reset:step; display:grid; gap:2px}
  .step{display:grid; grid-template-columns:56px 1fr; gap:20px; padding:22px 0; border-top:1px solid var(--line)}
  .step:last-child{border-bottom:1px solid var(--line)}
  .step-n{
    counter-increment:step; width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
    background:var(--brand-soft); color:var(--brand-deep); font-weight:800; font-size:16px;
  }
  .step-n::before{content:counter(step)}
  .step h3{margin-bottom:6px}
  .step p{color:var(--muted); font-size:15px; max-width:76ch}

  /* ───── program table ───── */
  .prog{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:24px; align-items:start}
  @media (max-width:860px){ .prog{grid-template-columns:1fr} }
  .ptable{width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
  .ptable caption{text-align:left; padding:18px 22px 0; font-weight:700; font-size:16px}
  .ptable th, .ptable td{padding:13px 22px; text-align:left; font-size:15px; border-top:1px solid var(--line)}
  .ptable tr:first-child th, .ptable tr:first-child td{border-top:0}
  .ptable th{color:var(--muted); font-weight:600; width:48%}
  .ptable td{font-weight:700; font-variant-numeric:tabular-nums}
  .notes{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px}
  .notes h3{margin-bottom:12px}
  .notes ul{margin:0; padding-left:20px; display:grid; gap:10px; color:var(--muted); font-size:14.5px}

  /* ───── consultant ───── */
  .who{
    display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:32px; align-items:center;
    background:var(--card); border:1px solid var(--line); border-radius:20px; padding:32px; box-shadow:var(--shadow-s);
  }
  @media (max-width:860px){ .who{grid-template-columns:1fr; padding:26px} }
  .who-pic{
    aspect-ratio:4/3; border-radius:16px; display:grid; place-items:center; text-align:center; padding:24px;
    background:linear-gradient(160deg, var(--brand-soft), var(--accent-soft)); color:var(--ink);
    border:1px solid var(--line);
  }
  .who-pic b{display:block; font-size:22px; font-weight:800; letter-spacing:-.02em}
  .who-pic span{display:block; color:var(--muted); font-size:14px; margin-top:6px}
  .who-list{margin:14px 0 0; padding-left:20px; color:var(--muted); display:grid; gap:8px; font-size:15px}
  .who-cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}

  /* ───── faq ───── */
  .faq{display:grid; gap:10px}
  .faq details{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:0 20px}
  .faq details[open]{border-color:var(--brand)}
  .faq summary{cursor:pointer; list-style:none; padding:18px 30px 18px 0; font-weight:700; font-size:16.5px; position:relative}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{
    content:""; position:absolute; right:2px; top:50%; width:11px; height:11px; margin-top:-7px;
    border-right:2.2px solid var(--muted); border-bottom:2.2px solid var(--muted);
    transform:rotate(45deg); transition:.2s;
  }
  .faq details[open] summary::after{transform:rotate(-135deg); margin-top:-2px; border-color:var(--brand-deep)}
  .faq .answer{padding:0 0 20px; color:var(--muted); font-size:15px; display:grid; gap:10px}
  .faq .answer a{color:var(--brand-deep); font-weight:600}

  /* ───── form ───── */
  .form-sec{background:linear-gradient(170deg, var(--tint-1), var(--tint-2)); border-top:1px solid var(--line)}
  .form-grid{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:48px; align-items:start}
  @media (max-width:900px){ .form-grid{grid-template-columns:1fr; gap:32px} }
  .contacts{margin:26px 0 0; padding:0; list-style:none; display:grid; gap:14px}
  .contacts li{display:flex; gap:12px; align-items:flex-start}
  .contacts .ico{background:var(--accent-soft); color:var(--accent-deep)}
  .contacts b{display:block; font-size:16px}
  .contacts a{color:var(--ink); text-decoration:none; font-weight:700}
  .contacts a:hover{color:var(--brand-deep)}
  .contacts span{color:var(--muted); font-size:14px}
  form.lead-form{
    background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:20px;
    padding:28px; box-shadow:var(--shadow-l); display:grid; gap:16px;
  }
  @media (max-width:520px){ form.lead-form{padding:22px} }
  .f-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  @media (max-width:620px){ .f-row{grid-template-columns:1fr} }
  .field{display:grid; gap:6px}
  .field label{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
  .field input, .field select, .field textarea{
    font:inherit; font-size:15.5px; color:var(--ink); background:var(--paper);
    border:1px solid var(--line); border-radius:10px; padding:12px 14px; width:100%;
  }
  .field textarea{resize:vertical; min-height:92px}
  .field input:focus, .field select:focus, .field textarea:focus{
    border-color:var(--brand); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
  }
  .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
  .consent{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--muted); line-height:1.5}
  .consent input{margin-top:3px; width:17px; height:17px; flex:none; accent-color:var(--brand)}
  .consent a{color:var(--brand-deep)}
  .form-note{font-size:12.5px; color:var(--muted); text-align:center}
  .form-msg{border-radius:10px; padding:12px 14px; font-size:14.5px; font-weight:600; background:#FDECEC; color:#A32020}
  :root[data-theme="dark"] .form-msg{background:#3A1C1C; color:#FFB4B4}
  .form-done{display:grid; gap:12px; justify-items:center; text-align:center; padding:26px 6px}
  .form-done .ico{width:56px; height:56px; border-radius:50%; background:var(--accent-soft); color:var(--accent-deep)}
  .form-done .ico svg{width:28px; height:28px}
  .form-done h3{font-size:22px}
  .form-done p{color:var(--muted); font-size:15px; max-width:40ch}
  .form-done a{color:var(--brand-deep)}

  /* ───── footer ───── */
  footer{background:var(--card); border-top:1px solid var(--line); padding:44px 0 34px; font-size:14.5px}
  .foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:32px}
  @media (max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr; gap:26px} }
  @media (max-width:460px){ .foot-grid{grid-template-columns:1fr} }
  footer img{height:30px; width:auto; margin-bottom:14px}
  footer p{color:var(--muted); max-width:44ch; font-size:14px}
  footer h4{margin:0 0 12px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
  .foot-links{list-style:none; margin:0; padding:0; display:grid; gap:9px}
  .foot-links a{text-decoration:none; color:var(--ink); font-weight:600}
  .foot-links a:hover{color:var(--brand-deep)}
  .foot-bottom{
    margin-top:34px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:13px;
    display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between;
  }
  /* логотип подбирается под фон: на светлой теме — версия с тёмными буквами */
  .logo-on-light{display:block} .logo-on-dark{display:none}
  :root[data-theme="dark"] .logo-on-light{display:none}
  :root[data-theme="dark"] .logo-on-dark{display:block}

  /* переключатель темы */
  .theme-btn{
    appearance:none; border:1px solid var(--line); background:var(--card); color:var(--muted);
    width:34px; height:34px; border-radius:50%; display:grid; place-items:center; cursor:pointer; padding:0;
  }
  .theme-btn:hover{border-color:var(--brand); color:var(--brand-deep)}
  .theme-btn svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round}
  .theme-btn .moon{display:block} .theme-btn .sun{display:none}
  :root[data-theme="dark"] .theme-btn .moon{display:none}
  :root[data-theme="dark"] .theme-btn .sun{display:block}
  @media (max-width:420px){ .theme-btn{display:none} }

  /* ───── floating whatsapp ───── */
  .wa-fab{
    position:fixed; right:18px; bottom:18px; z-index:60; width:54px; height:54px; border-radius:50%;
    background:#25D366; display:grid; place-items:center; box-shadow:0 10px 26px rgba(19,28,61,.22);
  }
  .wa-fab svg{width:28px; height:28px; fill:#fff}
  @media (max-width:520px){ .wa-fab{width:50px; height:50px; right:14px; bottom:14px} }
  .skip{position:absolute; left:-9999px}
  .skip:focus{left:12px; top:12px; z-index:100; background:var(--brand); color:#fff; padding:10px 16px; border-radius:8px}