/* GRBNK — лендинг для гостей на «/». Figma «GRBNK VPN WEB» → Section «Лендинг»:
   L-01…L-07 (1440) и LM-01…LM-07 (390), компоненты — 00 Design System → Patterns → Landing.
   Токены, шрифты, кнопки (.btn), логотип (.logo), .overline, .badge и .progress берутся из app.css.
   В макете обводки входят в раскладку (strokesIncludedInLayout), поэтому border + padding = как в Figma. */

.ld p,.ld h1,.ld h2,.ld h3{margin:0}
.ld ol,.ld ul{list-style:none;margin:0;padding:0}
.ld-wrap{width:min(1040px,calc(100% - 48px));margin-inline:auto}

/* Кнопки макета: у Primary нет обводки (Button/Primary: 222×48, а не 224) */
.ld .btn-primary{border-width:0}
.ld-link:focus-visible,.ld-qa summary:focus-visible,.ld .logo:focus-visible{outline:2px solid var(--primary-text);outline-offset:2px}

/* ── L-01 · Landing Header (Desktop 1040×72) ── */
.ld-header{display:flex;align-items:center;justify-content:space-between;height:72px}
.ld-nav,.ld-foot-links{display:flex;align-items:center;gap:4px}
/* Landing Nav Link: 48, padding 0 12, радиус 10; Hover — surface/hover, Pressed — surface/active, текст text/primary */
.ld-link{display:inline-flex;align-items:center;height:48px;padding:0 12px;border-radius:var(--r-ctl);
  font-size:14px;line-height:20px;font-weight:500;color:var(--text2);transition:background-color .15s ease,color .15s ease}
@media (hover:hover) and (pointer:fine){.ld-link:hover{background:var(--ctl);color:var(--text)}}
.ld-link:active{background:var(--track);color:var(--text)}

/* ── L-01 · Hero: текст 536 + витрина 440, gap 64, сверху 48, снизу 64 ── */
.ld-hero{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:64px;align-items:center;padding:48px 0 64px}
.ld-hero-text{display:flex;flex-direction:column;gap:24px;min-width:0}
.ld-h1{font:600 56px/60px var(--font-display);letter-spacing:-.025em;color:var(--text)}
.ld-lead{font-size:16px;line-height:24px;color:var(--text2)}
.ld-actions{display:flex;flex-wrap:wrap;gap:12px}
.ld-countries{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ld-countries-label{font-size:12px;line-height:16px;letter-spacing:.004em;color:var(--muted)}
.ld-chip{height:28px;padding:4px 10px;border:1px solid var(--ctl-border);border-radius:var(--r-full);
  font-size:13px;line-height:18px;letter-spacing:.002em;color:var(--text2)}

/* Landing Showcase: стиль Gradient/Hero Card (тот же пересчёт стопов, что у .card-hero в app.css) */
.ld-show{display:flex;flex-direction:column;gap:20px;padding:24px;border-radius:var(--r-xl);border:1px solid var(--border);overflow:hidden;
  background:linear-gradient(to bottom right,rgba(107,92,255,.18) 14.3%,rgba(91,79,215,.247) 21.4%,rgba(75,67,174,.315) 28.6%,rgba(60,54,134,.382) 35.7%,rgba(44,42,94,.449) 42.9%,rgba(28,29,53,.516) 50%,rgba(20,23,33,.55) 53.6%,rgba(26,65,68,.443) 60.7%,rgba(32,107,104,.337) 67.9%,rgba(38,148,139,.23) 75%,rgba(44,190,174,.123) 82.1%,rgba(47,211,192,.07) 85.7%);
  box-shadow:0 8px 32px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.06);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.ld-show-top{display:flex;align-items:center;justify-content:space-between;gap:8px;height:24px}
.ld-show-id{font:400 12px/16px var(--font-mono);color:var(--muted)}
.ld-show-title{font:600 20px/28px var(--font);letter-spacing:-.01em;color:var(--text)}
.ld-show-exp,.ld-show-dev{display:flex;flex-direction:column;gap:8px}
.ld-show-row{display:flex;align-items:center;gap:8px;height:20px;font-size:14px;line-height:20px;font-weight:500;color:var(--text)}
.ld-show-row .icon{width:16px;height:16px;color:var(--text2)}
.ld-show-row.is-dev{height:24px;font-size:16px;line-height:24px;font-weight:600;letter-spacing:-.005em}
.ld-show-row.is-dev .icon{color:var(--muted)}
.ld-show-date{font-size:12px;line-height:16px;font-weight:400;letter-spacing:.004em;color:var(--muted)}
.ld-segs{display:flex;gap:4px;height:4px}
.ld-segs i{flex:1;border-radius:2px;background:var(--track)}
.ld-segs i.on{background:var(--primary)}
.ld-show-meta,.ld-show-hint{font-size:12px;line-height:16px;letter-spacing:.004em;color:var(--muted)}
.ld-show-link{display:flex;flex-direction:column;gap:12px;padding:12px 14px;background:var(--well);border:1px solid var(--line);border-radius:var(--r-md)}
.ld-show-link-head{display:flex;align-items:center;gap:8px;height:16px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text2)}
.ld-show-link-head .icon{width:16px;height:16px;color:var(--accent)}
.ld-show-link-head .ld-chev-up{width:12px;height:12px;color:var(--muted);transform:rotate(180deg)}
.ld-show-link-row{display:flex;align-items:center;gap:8px;height:44px;padding:0 4px 0 12px;background:var(--surface);border:1px solid var(--ctl-border);border-radius:var(--r-ctl)}
.ld-show-url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 12px/16px var(--font-mono);color:var(--text)}
.ld-show-qr{display:grid;place-items:center;width:32px;height:32px;flex:none;color:var(--text2)}
.ld-show-qr .icon{width:16px;height:16px}
.ld-show-copy{flex:none;cursor:default;pointer-events:none}
.ld-show-copy .icon{width:14px;height:14px}

/* ── Секции L-02…L-06: 56 сверху и снизу, между шапкой и содержимым 32 ── */
.ld-sec{display:flex;flex-direction:column;gap:32px;padding:56px 0}
.ld-head{display:flex;flex-direction:column;gap:12px}
.ld-h2{font:600 32px/40px var(--font-display);letter-spacing:-.02em;color:var(--text)}
.ld-desc{font-size:16px;line-height:24px;color:var(--text2)}

/* L-02 · Как подключить: одна панель, шаги разделены линией */
.ld-steps{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden}
.ld-step{box-sizing:content-box;flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px;padding:28px}
.ld-step+.ld-step{border-left:1px solid var(--line)}
.ld-step-n{font:400 32px/40px var(--font-mono);color:var(--muted)}
.ld-step h3{font:600 20px/28px var(--font);letter-spacing:-.01em;color:var(--text)}
.ld-step p,.ld-feat p,.ld-cf p,.ld-qa p,.ld-note{font-size:14px;line-height:20px;color:var(--text2)}

/* L-03 · Landing Feature: Lead (карточки) и Compact (строки) */
.ld-lead-grid,.ld-compact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ld-feat{display:flex;flex-direction:column;gap:12px;padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.22)}
.ld-tag{font:400 12px/16px var(--font-mono);color:var(--muted)}
.ld-feat h3{font:600 24px/32px var(--font-display);letter-spacing:-.015em;color:var(--text)}
.ld-cf{display:flex;gap:12px;padding-top:20px;border-top:1px solid var(--line)}
.ld-cf .icon{color:var(--text2)}
.ld-cf>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.ld-cf h3{font:600 16px/24px var(--font);letter-spacing:-.005em;color:var(--text)}

/* L-04 · Landing Pricing Card, Layout=Row: 88, padding 20 20 20 28, gap 24; Featured — обводка primary 2 */
.ld-plans{display:flex;flex-direction:column;gap:12px}
.ld-plan{display:flex;align-items:center;gap:24px;height:88px;padding:0 20px 0 28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.ld-plan.is-featured{border:2px solid var(--primary)}
.ld-plan-days{width:140px;flex:none;font:600 20px/28px var(--font);letter-spacing:-.01em;color:var(--text)}
.ld-plan-price{display:flex;align-items:baseline;gap:12px;flex:none}
.ld-plan-price b{font:600 32px/40px var(--font-display);letter-spacing:-.02em;color:var(--text)}
.ld-plan-price span{font-size:13px;line-height:18px;letter-spacing:.002em;color:var(--text2)}
.ld-plan-benefit{flex:1;min-width:0;display:flex}
.ld-plan-btn{flex:none}
/* Badge / Soft: Neutral и Success, 22 */
.ld-badge{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--r-full);font-size:12px;line-height:16px;font-weight:500;
  background:var(--ctl);border:1px solid var(--ctl-border);color:var(--text2);white-space:nowrap}
.ld-badge.is-success{background:var(--success-soft);border-color:rgba(61,214,140,.32);color:var(--success)}
.ld-note{display:flex;align-items:center;gap:8px}
.ld-note .icon{width:16px;height:16px;color:var(--muted)}

/* L-05 · Рефералы: карточка 40/40, текст + код 400 */
.ld-ref{display:flex;align-items:center;gap:40px;padding:40px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.22)}
.ld-ref-text{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.ld-ref-code{width:400px;flex:none;display:flex;flex-direction:column;gap:12px}
/* Code Row: обводка border/default пунктиром 5/4 (в CSS dashed штрих другой длины, поэтому SVG; цвет = --ctl-border) */
.ld-code{display:flex;align-items:center;height:56px;padding:0 16px;border:1px solid transparent;border-radius:var(--r-md);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='.5' y='.5' style='width:calc(100%25 - 1px);height:calc(100%25 - 1px)' rx='11.5' fill='none' stroke='%23252A38' stroke-dasharray='5 4'/%3E%3C/svg%3E") border-box,var(--well) padding-box;
  font:400 24px/32px var(--font-mono);color:var(--text)}
.ld-code-link{display:flex;align-items:center;gap:8px;font:400 12px/16px var(--font-mono);color:var(--muted)}
.ld-code-link .icon{width:14px;height:14px}
.ld-hint{font-size:13px;line-height:18px;letter-spacing:.002em;color:var(--muted)}

/* L-06 · Вопросы: слева 304 (шапка + помощь), справа список FAQ Item, gap 64 */
.ld-faq{display:grid;grid-template-columns:304px minmax(0,1fr);grid-template-rows:auto 1fr;gap:16px 64px}
.ld-faq-head{grid-column:1;grid-row:1;gap:16px}
.ld-faq-help{grid-column:1;grid-row:2;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.ld-faq-list{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;gap:12px}
.ld-qa{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.ld-qa[open]{border-color:var(--ctl-border)}
.ld-qa summary{display:flex;align-items:center;gap:16px;padding:20px 24px;border-radius:var(--r-lg);cursor:pointer;list-style:none;
  font-size:16px;line-height:24px;font-weight:600;letter-spacing:-.005em;color:var(--text);-webkit-tap-highlight-color:transparent}
.ld-qa summary::-webkit-details-marker{display:none}
.ld-qa summary span{flex:1;min-width:0}
/* Стрелка поворачивается вместе с раскрытием (docs/animations.md: как у ссылки подключения) */
.ld-qa summary .icon{color:var(--text2);transition:transform 200ms var(--ease-out)}
.ld-qa[open] summary{padding-bottom:12px}
.ld-qa[open] summary .icon{transform:rotate(180deg)}
.ld-qa p{padding:0 24px 20px}

/* L-07 · Призыв */
.ld-cta{display:flex;align-items:center;gap:40px;padding:40px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.22)}
.ld-cta-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.ld-cta .ld-actions{flex:none;flex-wrap:nowrap}

/* Landing Footer (Desktop): линия сверху, 32 / 40, строки через 24 */
.ld-footer>.ld-wrap{display:flex;flex-direction:column;gap:24px;padding:32px 0 40px;border-top:1px solid var(--line)}
.ld-foot-top{display:flex;align-items:center;justify-content:space-between;gap:16px;height:48px}
.ld-foot-bottom{display:flex;justify-content:space-between;gap:16px;font-size:12px;line-height:16px;color:var(--muted)}
.ld-foot-bottom span:first-child{letter-spacing:.004em}

/* Между 861 и 1023 текст первого экрана слишком узкий — витрина уходит под него (в макете этих ширин нет) */
@media (max-width:1023px){
  .ld-hero{grid-template-columns:minmax(0,1fr)}
  .ld-show{width:100%;max-width:440px}
}

/* ── Телефон: LM-01…LM-07 (390) ── */
@media (max-width:860px){
  .ld-wrap{width:auto;margin:0;padding-inline:16px}
  .ld-header{height:64px}
  .ld-nav{display:none}
  .ld-login{height:48px;padding:0 20px;font-size:15px}

  .ld-hero{display:flex;flex-direction:column;align-items:stretch;gap:20px;padding:24px 16px 48px}
  .ld-hero-text{gap:20px}
  .ld-h1{font-size:32px;line-height:40px;letter-spacing:-.02em}
  .ld-actions{flex-direction:column;gap:12px}
  .ld-actions .btn{width:100%}
  .ld-show{max-width:none}

  .ld-sec{gap:20px;padding:40px 16px}
  .ld-head{gap:8px}
  .ld-h2{font-size:24px;line-height:32px;letter-spacing:-.015em}
  .ld-desc{font-size:14px;line-height:20px}

  .ld-steps{flex-direction:column;border-radius:var(--r-lg)}
  .ld-step{flex:none;padding:20px}
  .ld-step+.ld-step{border-left:0;border-top:1px solid var(--line)}

  .ld-lead-grid,.ld-compact{grid-template-columns:minmax(0,1fr)}
  .ld-lead-grid{gap:12px}
  .ld-feat{padding:24px}
  .ld-compact{padding-top:8px}

  /* Layout=Compact: 20 со всех сторон, строки через 16 */
  .ld-plan{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"days badge" "price price" "btn btn";
    align-items:center;gap:16px 8px;height:auto;padding:20px}
  .ld-plan-days{grid-area:days;width:auto}
  .ld-plan-benefit{grid-area:badge}
  .ld-plan-price{grid-area:price;gap:8px}
  .ld-plan-btn{grid-area:btn;width:100%}
  .ld-note{align-items:flex-start}

  /* Рефералы: блоки встают в один столбец в порядке макета LM-05 */
  .ld-ref{flex-direction:column;align-items:stretch;gap:0;padding:24px;border-radius:var(--r-lg)}
  .ld-ref-text,.ld-ref-code{display:contents}
  .ld-ref .ld-o1{order:1}.ld-ref .ld-o2{order:2;margin-top:8px}.ld-ref .ld-o3{order:3;margin-top:8px}.ld-ref .ld-o4{order:4;margin-top:20px}
  .ld-ref .ld-o5{order:5;margin-top:8px}.ld-ref .ld-o6{order:6;margin-top:8px}.ld-ref .ld-o7{order:7;margin-top:20px}.ld-ref .ld-o8{order:8;margin-top:20px}
  .ld-ref-btn{width:100%}

  .ld-faq{display:flex;flex-direction:column;gap:20px}
  .ld-faq-head{order:1;gap:8px}
  .ld-faq-list{order:2;gap:8px}
  .ld-faq-help{order:3;align-items:stretch;gap:12px}
  .ld-help-btn{height:48px;padding:0 20px;font-size:15px}
  .ld-help-btn .icon{width:20px;height:20px}
  .ld-qa summary{padding:20px 16px}
  .ld-qa[open] summary{padding-bottom:12px}
  .ld-qa p{padding:0 16px 20px}

  .ld-cta{flex-direction:column;align-items:stretch;gap:12px;padding:24px;border-radius:var(--r-lg)}
  .ld-cta-text{gap:12px}
  .ld-cta .ld-actions{padding-top:8px}

  /* Landing Footer (Mobile): линия на всю ширину, 24 / 32 */
  .ld-footer{border-top:1px solid var(--line)}
  .ld-footer>.ld-wrap{gap:16px;padding:24px 16px 32px;border-top:0}
  .ld-foot-top{flex-direction:column;align-items:flex-start;gap:8px;height:auto}
  .ld-foot-links{gap:0}
  .ld-foot-bottom{flex-direction:column;gap:4px}
}

@media (prefers-reduced-motion:reduce){
  .ld-qa summary .icon,.ld-link{transition:none}
}