/*
 * homepage.css — Ragnar Academy
 * Layout, nav, hero, sections, responsive — sdileny pro EN/CS/ES/PT-BR homepage
 * Extrahováno z inline <style> Phase 2 Balík B (2026-04-21)
 * Co NENÍ zde: design tokeny (ra-design-system.css), coming-soon (coming-soon.css)
 */

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--ra-bg)}
::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:3px}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(10,10,15,.82);backdrop-filter:blur(22px);border-bottom:1px solid var(--ra-border)}
.nav-inner{height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-logo{font-size:15px;font-weight:850;letter-spacing:3px;text-transform:uppercase}
.nav-logo span{color:var(--ra-gold)}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-size:12px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:var(--ra-muted);position:relative;transition:color var(--ra-motion-fast)}
.nav-links a:hover{color:var(--ra-text)}
.nav-links .nav-join{padding:10px 18px;border-radius:10px;background:var(--ra-gold);color:#0b0b10;font-weight:800}
.nav-links .nav-join:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(201,168,76,.28)}
.menu-toggle{display:none;background:none;border:none;color:var(--ra-text);cursor:pointer;padding:4px}
.menu-toggle svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.75;fill:none}

/* ── LANG SWITCHER ── */
.lang-sw{position:relative}
.lang-btn{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:10px;border:1px solid var(--ra-border);background:rgba(255,255,255,.01);color:var(--ra-muted);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all var(--ra-motion-fast)}
.lang-btn:hover,.lang-sw.open .lang-btn{border-color:rgba(201,168,76,.24);color:var(--ra-text)}
.lang-btn svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.75;fill:none}
.lang-drop{position:absolute;top:calc(100% + 10px);right:0;padding:8px;background:rgba(14,14,20,.98);border:1px solid var(--ra-border);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.45);min-width:180px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all var(--ra-motion-fast);z-index:200}
.lang-sw.open .lang-drop{opacity:1;visibility:visible;transform:none}
.lang-opt{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;font-size:12px;color:var(--ra-muted);transition:all var(--ra-motion-fast);text-decoration:none;background:none;border:none;width:100%;cursor:pointer;font-family:inherit;text-align:left}
.lang-opt:hover{background:var(--ra-surface-200);color:var(--ra-text)}
.lang-opt.active{color:var(--ra-gold);font-weight:700;cursor:default}
.lang-opt.active:hover{background:transparent}
.lang-flag{font-size:16px;line-height:1;width:22px;text-align:center}
.lang-dot{width:6px;height:6px;border-radius:50%;background:var(--ra-gold);margin-left:auto;flex-shrink:0}

/* ── HERO ── */
.hero{padding-top:124px;padding-bottom:76px}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center}
.hero-copy .ra-pill{margin-bottom:22px}
.hero h1{font-size:clamp(48px,6vw,80px);line-height:.92;letter-spacing:-2.6px;font-weight:900;margin-bottom:16px}
.hero h1 .gold{color:var(--ra-gold)}
.hero-sub{font-size:16px;max-width:600px;margin-bottom:24px;color:var(--ra-muted)}
.hero-promise{padding:16px 20px;margin-bottom:28px;max-width:540px;background:linear-gradient(180deg,rgba(22,22,31,.78) 0%,rgba(17,17,24,.94) 100%)}
.hero-promise strong{display:block;color:var(--ra-text);font-size:13px;margin-bottom:10px}
.hero-promise ul{list-style:none;display:grid;gap:8px}
.hero-promise li{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:#d8d8e4}
.hero-promise li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ra-gold);margin-top:4px;flex-shrink:0}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-actions .ra-cta-primary,.hero-actions .ra-cta-secondary{min-width:170px}
.hero-visual{position:relative}
.hero-card{padding:12px;border-radius:26px;overflow:hidden}
.hero-frame{position:relative;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.07)}
.hero-frame::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 48%,rgba(10,10,15,.44) 100%)}
.hero-frame img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center top}
.hero-achievement{position:absolute;left:22px;bottom:22px;padding:11px 15px;border-radius:14px;background:rgba(10,10,15,.82);border:1px solid rgba(201,168,76,.18);backdrop-filter:blur(14px);z-index:2}
.hero-achievement .k{font-size:10px;text-transform:uppercase;letter-spacing:2px;color:var(--ra-gold);font-weight:800}
.hero-achievement .v{font-size:14px;font-weight:700}
.hero-corner{position:absolute;top:16px;right:16px;padding:9px 11px;border-radius:12px;background:rgba(10,10,15,.70);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(12px);z-index:2;font-size:11px;color:var(--ra-muted)}
.hero-corner strong{display:block;color:var(--ra-text);font-size:14px}

/* ── STATS BAR — open layout, not boxed ── */
.stats-bar{padding:6px 0 30px;border-top:1px solid var(--ra-border);border-bottom:1px solid var(--ra-border);background:linear-gradient(180deg,rgba(17,17,24,.98),rgba(10,10,15,.98))}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;max-width:1080px;margin:0 auto}
.stat-card{position:relative;padding:30px 18px 28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;background:transparent;border:none;border-radius:0;box-shadow:none}
.stat-card::after{content:'';position:absolute;top:24%;right:0;height:52%;width:1px;background:rgba(255,255,255,.08)}
.stat-card:last-child::after{display:none}
.stat-card .ra-icon-system{width:auto;height:auto;padding:0;background:transparent;border:none;border-radius:0;margin-bottom:2px}
.stat-card .ra-icon-system svg{width:28px;height:28px}
.stat-value{font-size:34px;line-height:1;font-weight:850;color:var(--ra-gold);letter-spacing:-1px}
.stat-label{margin-top:0;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ra-muted);max-width:140px}
.stats-grid .ra-interactive,.stats-grid .ra-interactive:hover{transform:none;border-color:transparent;box-shadow:none}

/* ── GRIDS ── */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ach-grid,.tech-grid,.test-grid,.tiers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* ── STEP CARDS ── */
.step-card,.ach-card,.tech-card,.test-card,.tier-card,.capture-box{position:relative;overflow:hidden}
.step-card,.ach-card,.tech-card,.test-card,.tier-card{padding:32px 28px}
.step-card::before,.ach-card::before,.tech-card::before,.test-card::before,.tier-card::before,.capture-box::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,0) 28%);pointer-events:none}
.step-card h3,.ach-card h3,.tech-card h3,.test-card h3{font-size:18px;font-weight:770;margin:14px 0 8px}
.step-card p,.ach-card p,.tech-card p,.test-card p{font-size:14px;color:var(--ra-muted)}
.step-num{width:42px;height:42px;border-radius:var(--ra-pill);background:var(--ra-gold-dim);color:var(--ra-gold);display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;border:1px solid rgba(201,168,76,.15)}

/* ── ABOUT ── */
.about-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:54px;align-items:center}
.about-photo{overflow:hidden;border-radius:24px}
.about-photo img{width:100%;display:block;aspect-ratio:4/5;object-fit:cover;object-position:center top}
.about-copy h2{font-size:clamp(30px,4vw,44px);line-height:1.08;letter-spacing:-1px;font-weight:850;margin:12px 0 18px}
.about-copy p{color:var(--ra-muted);margin-bottom:14px;font-size:15px;line-height:1.8}
.about-copy strong{color:var(--ra-text)}
.about-copy a{color:var(--ra-gold);border-bottom:1px solid rgba(201,168,76,.28)}
.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:22px}
.detail-item{padding:16px 18px}
.detail-label{font-size:10px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:var(--ra-muted);margin-bottom:4px}
.detail-value{font-size:14px;font-weight:700}

/* ── ACHIEVEMENTS ── */
.ach-card .year{margin-top:14px;font-size:11px;font-weight:800;letter-spacing:1.7px;text-transform:uppercase;color:var(--ra-gold)}

/* ── QUOTE ── */
.quote-section{padding:96px 0;background:linear-gradient(180deg,rgba(17,17,24,.9),rgba(17,17,24,1));border-top:1px solid var(--ra-border);border-bottom:1px solid var(--ra-border);position:relative;overflow:hidden}
.quote-section::before{content:'"';position:absolute;left:50%;top:8px;transform:translateX(-50%);font-size:180px;color:rgba(201,168,76,.06);line-height:1;font-family:Georgia,serif;pointer-events:none}
.quote-inner{width:min(860px,calc(100% - 48px));margin:0 auto;text-align:center;position:relative;z-index:1}
.quote-text{font-size:clamp(24px,4vw,40px);font-weight:350;line-height:1.35;letter-spacing:-.5px}
.quote-text em{color:var(--ra-gold);font-style:italic}
.quote-author{margin-top:14px;font-size:13px;color:var(--ra-muted);letter-spacing:1px}

/* ── VSL ── */
.vsl-wrap{max-width:820px;margin:0 auto 52px}
.vsl-card{padding:40px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.vsl-play{width:76px;height:76px;border-radius:var(--ra-pill);background:linear-gradient(180deg,#d5b25a,#c9a84c);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 22px rgba(201,168,76,.2)}
.vsl-play svg{width:28px;height:28px;fill:#0b0b10;margin-left:4px}
.vsl-card h3{font-size:24px;font-weight:830}
.vsl-card p{font-size:14px;color:var(--ra-muted)}

/* ── TIERS ── */
.tiers-grid{margin-top:10px}
.tier-card{display:flex;flex-direction:column}
.tier-card.popular{border-color:rgba(201,168,76,.34);background:linear-gradient(180deg,rgba(201,168,76,.08) 0%,rgba(17,17,24,1) 42%)}
.tier-badge{position:absolute;top:14px;right:14px}
.tier-name{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--ra-gold);margin-bottom:8px}
.tier-price{font-size:44px;font-weight:900;letter-spacing:-1.4px;margin-bottom:6px}
.tier-price span{font-size:15px;color:var(--ra-muted);font-weight:500}
.tier-desc{font-size:14px;color:var(--ra-muted);padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--ra-border)}
.tier-features{list-style:none;display:grid;gap:10px;flex:1}
.tier-features li{display:flex;align-items:flex-start;gap:10px;color:var(--ra-muted);font-size:14px}
.tier-features li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--ra-gold);margin-top:8px;flex-shrink:0}
.tier-note{margin:18px 0;padding:11px 12px;border-radius:10px;background:rgba(201,168,76,.06);border:1px solid rgba(201,168,76,.12);font-size:12px;color:var(--ra-muted)}
.tbtn{margin-top:20px;display:inline-flex;justify-content:center;align-items:center;padding:13px 18px;border-radius:12px;font-size:13px;font-weight:800;letter-spacing:1px;text-transform:uppercase;border:1px solid rgba(255,255,255,.12);transition:all var(--ra-motion-fast);text-decoration:none}
.tbtn:hover{transform:translateY(-1px)}
.tbtn.fill{background:linear-gradient(180deg,#d7b35a,#c9a84c);color:#0b0b10;border-color:rgba(255,255,255,.12)}
.tbtn.out{color:var(--ra-text)}
.tbtn.out:hover{border-color:rgba(201,168,76,.26);color:var(--ra-gold)}
/* Founding Member block */
.founding-wrap{display:flex;justify-content:center;margin-top:12px}
.founding-card{max-width:580px;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;padding:44px 40px}
.founding-badge{display:inline-flex;align-items:center;padding:6px 18px;border-radius:var(--ra-pill);background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.22);color:var(--ra-gold);font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:28px}
.founding-price{font-size:58px;font-weight:900;letter-spacing:-2px;margin-bottom:4px;line-height:1}
.founding-price span{font-size:16px;color:var(--ra-muted);font-weight:500}
.founding-desc{font-size:15px;color:var(--ra-text);line-height:1.75;margin:20px 0 28px;max-width:440px}
.founding-features{list-style:none;display:grid;gap:11px;margin-bottom:36px;width:100%;max-width:380px}
.founding-features li{display:flex;align-items:flex-start;gap:10px;color:#d8d8e4;font-size:14px;text-align:left}
.founding-features li strong{color:var(--ra-text);font-weight:700}
.founding-features li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--ra-gold);margin-top:8px;flex-shrink:0}
.founding-cta{width:100%;max-width:340px;justify-content:center;padding:16px 24px;font-size:13px}
#steps.ra-section,#patreon.ra-section{padding-top:72px;padding-bottom:72px}
#steps .ra-section-head,#patreon .ra-section-head{margin-bottom:26px}
#steps .ra-label,#patreon .ra-label{margin-bottom:10px;color:var(--ra-gold)}
#steps .ra-title,#patreon .ra-title{font-size:clamp(40px,5vw,58px);line-height:1.02;letter-spacing:-0.03em}
@media(max-width:820px){
  #steps.ra-section,#patreon.ra-section{padding-top:44px;padding-bottom:44px}
  #steps .ra-section-head,#patreon .ra-section-head{margin-bottom:18px}
  #steps .ra-title,#patreon .ra-title{font-size:clamp(32px,8vw,42px)}
  .step-card{padding:22px 18px}
  .founding-card{padding:26px 20px}
  .capture-box{padding:24px 20px}
  .capture-box h3{font-size:19px}
  .nl-form{margin-top:16px}
}

/* ── CAPTURE — stripped icon variant ── */
.capture-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;align-items:stretch}
.capture-box{text-align:center;padding:30px 28px}
.capture-box > .ra-icon-system{width:auto;height:auto;padding:0;margin:0 auto 14px;background:transparent;border:none;border-radius:0}
.capture-box > .ra-icon-system svg{width:34px;height:34px}
.capture-box h3{font-size:22px;font-weight:800;margin-bottom:10px}
.capture-box p{font-size:14px;color:var(--ra-muted);max-width:42ch;margin-inline:auto}
.nl-form{display:flex;gap:10px;margin-top:22px}
.nl-input{flex:1;padding:13px 14px;border-radius:12px;border:1px solid var(--ra-border);background:#0f0f15;color:var(--ra-text);outline:none;font-family:inherit;transition:border-color var(--ra-motion-fast),box-shadow var(--ra-motion-fast)}
.nl-input:focus{border-color:rgba(201,168,76,.24);box-shadow:0 0 0 3px rgba(201,168,76,.08)}
.nl-input::placeholder{color:var(--ra-muted)}
.nl-btn{padding:13px 20px;border:none;border-radius:12px;background:var(--ra-gold);color:#0b0b10;font-weight:800;cursor:pointer;font-family:inherit;transition:transform var(--ra-motion-fast),box-shadow var(--ra-motion-fast)}
.nl-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(201,168,76,.25)}
.nl-consent{margin-top:10px;font-size:11px;color:var(--ra-muted)}
.nl-consent a{color:var(--ra-gold)}
.nl-success{color:var(--ra-gold);font-weight:600;font-size:14px;padding:12px 0}

/* ── SOCIAL PANEL — stripped icon variant ── */
.social-panel{display:grid;gap:12px;margin-top:22px}
.social-panel a{display:flex;align-items:center;gap:14px;border-left:3px solid transparent;padding:18px 18px;text-align:left;background:linear-gradient(180deg,rgba(22,22,31,.78) 0%,rgba(17,17,24,.96) 100%)}
.social-panel a .ra-icon-system{width:auto;height:auto;padding:0;background:transparent;border:none;border-radius:0}
.social-panel a .ra-icon-system svg{width:20px;height:20px}
.social-panel a .soc-copy{display:flex;flex-direction:column;gap:2px}
.social-panel a .soc-copy strong{font-size:14px;color:var(--ra-text)}
.social-panel a .soc-copy span{font-size:11px;color:var(--ra-muted)}
.social-panel a .count{margin-left:auto;font-size:11px;font-weight:800;letter-spacing:1.2px;color:var(--ra-gold)}
.social-panel a.ig{border-left-color:#d7437b}
.social-panel a.fb{border-left-color:#1877f2}
.social-panel a.yt{border-left-color:#ff2a2a}
.social-panel a:hover{border-color:rgba(201,168,76,.18)}
.social-panel a.ig:hover{background:rgba(215,67,123,.04)}
.social-panel a.fb:hover{background:rgba(24,119,242,.04)}
.social-panel a.yt:hover{background:rgba(255,42,42,.04)}

/* ── TESTIMONIALS ── */
.test-stars{display:flex;gap:5px;color:var(--ra-gold);margin-bottom:14px;font-size:13px;letter-spacing:2px}
.test-author{display:flex;gap:12px;align-items:center;margin-top:20px}
.test-avatar{width:38px;height:38px;border-radius:var(--ra-pill);background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.16);display:flex;align-items:center;justify-content:center;color:var(--ra-gold);font-weight:800}
.test-meta strong{display:block;font-size:14px}
.test-meta span{font-size:12px;color:var(--ra-muted)}

/* ── TECHNIQUE — monumental, centered, no icon wrapper ── */
.tech-card{text-align:center;padding:30px 26px}
.tech-card .ra-icon-system{width:auto;height:auto;padding:0;margin:0 auto 16px;background:transparent;border:none;border-radius:0}
.tech-card .ra-icon-system svg{width:34px;height:34px}
.tech-card h3{font-size:19px}
.tech-card p{max-width:32ch;margin-inline:auto}

/* ── GLOSSARY BRIDGE ── */
.section-link-wrap{margin-top:30px;text-align:center}
.section-link{display:inline-flex;justify-content:center;text-align:center;width:auto;max-width:560px;padding:16px 22px;border-left:none;border-radius:16px;background:rgba(255,255,255,.02);box-shadow:none;color:var(--ra-text)}
.section-link:hover{transform:translateY(-1px);border-color:rgba(201,168,76,.18)}
.section-link div{display:grid;gap:4px}
.section-link small{display:block;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ra-gold);font-weight:800}
.section-link strong{font-size:15px}
.section-link span:last-child{font-size:13px;color:var(--ra-muted)}

/* ── FAQ ── */
.faq-wrap{width:min(820px,100%);margin:0 auto}
.faq-item{padding:0}
.faq-item + .faq-item{margin-top:12px}
.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;background:none;border:none;color:var(--ra-text);text-align:left;cursor:pointer;font-family:inherit}
.faq-question span{font-size:16px;font-weight:700}
.faq-icon{width:28px;height:28px;border-radius:var(--ra-pill);border:1px solid var(--ra-border);display:inline-flex;align-items:center;justify-content:center;color:var(--ra-gold);transition:transform var(--ra-motion-fast);flex-shrink:0;font-size:16px}
.faq-answer{max-height:0;overflow:hidden;transition:max-height var(--ra-motion-smooth)}
.faq-answer p{padding:0 24px 24px;color:var(--ra-muted);font-size:14px;line-height:1.75}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-item.open .faq-answer{max-height:280px}

/* ── FOOTER ── */
footer{padding:36px 0 56px;border-top:1px solid var(--ra-border)}
.footer-stack{text-align:center}
.f-logo{font-size:14px;font-weight:850;letter-spacing:3px;text-transform:uppercase}
.f-logo span{color:var(--ra-gold)}
.f-text{font-size:12px;color:var(--ra-muted);margin-top:6px}
.f-sponsor{display:inline-flex;align-items:center;gap:8px;color:var(--ra-muted);font-size:11px;margin-top:10px}
.f-sponsor a{color:var(--ra-gold);font-weight:600}
.f-code{background:var(--ra-gold-dim);color:var(--ra-gold);padding:3px 10px;border-radius:5px;font-weight:700;font-size:10px;letter-spacing:1px}
.f-disclosure{font-size:11px;color:var(--ra-muted);margin-top:8px;opacity:.6}
.f-social{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin:18px 0 14px}
.f-social a{display:inline-flex;align-items:center;gap:8px;color:var(--ra-muted);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;transition:color var(--ra-motion-fast),transform var(--ra-motion-fast)}
.f-social a:hover{color:var(--ra-gold);transform:translateY(-1px)}
.f-social svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.75;fill:none}
.f-links,.f-lang{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:14px}
.f-links a,.f-lang a,.f-lang span{font-size:11px;color:var(--ra-muted);letter-spacing:1px;text-transform:uppercase;transition:color var(--ra-motion-fast)}
.f-links a:hover,.f-lang a:hover{color:var(--ra-text)}
.f-lang .active{color:var(--ra-gold);font-weight:800}
.f-legal{font-size:11px;color:var(--ra-muted);margin-top:14px;opacity:.5}

/* ── RESPONSIVE ── */
@media (max-width:1080px){
  .hero-grid,.about-grid{grid-template-columns:1fr}
  .hero-copy{text-align:center}
  .hero-sub{margin-inline:auto}
  .hero-promise{margin-inline:auto;text-align:left}
  .hero-promise strong{text-align:center;margin-bottom:10px}
  .hero-promise ul{max-width:440px;margin:10px auto 0}
  .hero-actions{justify-content:center}
  .hero-card{max-width:560px;margin:0 auto}
  .hero-corner{display:none}
  .stats-grid,.steps-grid,.ach-grid,.tech-grid,.test-grid,.tiers-grid,.capture-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .nav-inner{height:66px}
  .menu-toggle{display:block}
  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;padding:18px 16px;background:rgba(10,10,15,.98);border-bottom:1px solid var(--ra-border);flex-direction:column;align-items:stretch}
  .nav-links.active{display:flex}
  .lang-sw{position:relative}
  .lang-btn{display:flex;padding:7px 10px;font-size:10px}
  .lang-drop{position:absolute;right:0;top:calc(100% + 8px);opacity:0;visibility:hidden;transform:translateY(-6px);background:rgba(14,14,20,.98);border:1px solid var(--ra-border);border-radius:14px;padding:8px;min-width:170px;box-shadow:0 18px 40px rgba(0,0,0,.55);z-index:300;display:block}
  .lang-sw.open .lang-drop{opacity:1;visibility:visible;transform:none}
  .lang-opt{padding:9px 11px;border-radius:10px;font-size:12px;width:100%;display:flex;background:none;border:none}
  .lang-opt.active{background:var(--ra-gold-dim);border-color:rgba(201,168,76,.25);color:var(--ra-gold)}
  .stats-grid,.steps-grid,.ach-grid,.tech-grid,.test-grid,.tiers-grid,.capture-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .stat-card{padding:22px 12px 20px}
  .stat-card::after{display:none}
  .tier-card.popular{order:-1}
}
@media (max-width:560px){
  .hero-actions{flex-direction:column;align-items:center}
  .hero-actions .ra-cta-primary,.hero-actions .ra-cta-secondary{width:min(320px,100%)}
  .hero-promise{padding:16px}
  .nl-form{flex-direction:column}
}
@media (max-width:390px){
  .stats-grid{grid-template-columns:1fr}
}


/* === homepage-additions-designer (merged) === */
/*
 * homepage-additions-designer.css — Ragnar Academy
 * Designer výstup: 2026-04-22
 * Autor: Designer role (Claude)
 * Vychází z: docs/homepage-designer-brief.md + docs/homepage-cs-copy-FINAL.md
 *
 * KDE POUŽÍT:
 *   Přidat <link> za homepage.css v cs/index.html (a klony EN/PT-BR/ES).
 *   Tento soubor nemodifikuje stávající třídy — pouze přidává nové.
 *   Implementace (HTML struktura) = Webmaster dle docs/homepage-webmaster-brief.md
 *
 * OBSAH:
 *   A. Hero — doplnění value boxu (4. bullet) — CSS-only, žádné změny
 *   B. Origin Story Teaser — nová sekce (CSS)
 *   C. Technique cards — color-coded top borders
 *   D. Achievement cards — color accents
 *   E. Newsletter capture box — visual upgrade
 *   F. Testimonials — "Komunita" restyle
 *   G. Responsive
 */

/* ============================================================
   A. HERO — reassure bar (kosmetická korekce)
   ============================================================ */
.hero-reassure {
  font-size: 12px;
  color: var(--ra-muted);
  margin-top: 16px;
  letter-spacing: .4px;
}

/* ============================================================
   B. ORIGIN STORY TEASER
   Pozice: mezi stats-bar a #steps
   HTML: <section class="origin-teaser ra-section">
   ============================================================ */
.origin-teaser {
  border-bottom: 1px solid var(--ra-border);
  padding-top: 80px;
  padding-bottom: 80px;
}

.origin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

/* Levý sloupec — copy */
.origin-copy .ra-label {
  margin-bottom: 14px;
}

.origin-copy h2 {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 870;
  line-height: 1.07;
  letter-spacing: -1.2px;
  margin-bottom: 20px;
}

.origin-copy p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ra-muted);
  margin-bottom: 28px;
  max-width: 48ch;
}

.origin-copy .ra-cta-secondary {
  font-size: 14px;
  font-weight: 700;
  padding: 13px 24px;
}

/* Pravý sloupec — pullquote */
.origin-pullquote {
  position: relative;
  padding: 40px 36px 36px;
  background: linear-gradient(
    160deg,
    rgba(201,168,76,.09) 0%,
    rgba(17,17,24,.98) 60%
  );
  border: 1px solid var(--ra-border-strong);
  border-radius: var(--ra-radius-lg);
  box-shadow: var(--ra-highlight), var(--ra-shadow-premium);
}

/* Velká dekorativní uvozovka */
.origin-pullquote::before {
  content: '\201C';
  position: absolute;
  top: 12px;
  left: 28px;
  font-size: 120px;
  line-height: 1;
  color: rgba(201,168,76,.12);
  font-family: Georgia, 'Times New Roman', serif;
  pointer-events: none;
}

.origin-pullquote blockquote {
  font-size: clamp(17px, 2.2vw, 22px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -.2px;
  color: var(--ra-text);
  position: relative;
  z-index: 1;
  font-style: italic;
  border: none;
  margin: 0;
  padding: 0;
}

.origin-pullquote figcaption {
  margin-top: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ra-gold);
}

/* ============================================================
   C. TECHNIQUE CARDS — color-coded top borders
   Přidej data-tech="heel-hook" atd. do .tech-card article
   Definuje --tech-accent per karta, border-top ji použije
   ============================================================ */

/* Base: top border */
.tech-card {
  border-top: 3px solid var(--tech-accent, var(--ra-border-strong));
  padding-top: 28px;
}

/* Subtle top glow odpovídající barvě */
.tech-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(180deg, var(--tech-glow, rgba(201,168,76,.05)) 0%, transparent 100%);
  pointer-events: none;
  border-radius: var(--ra-radius-md) var(--ra-radius-md) 0 0;
}

/* Icon inherits accent color */
.tech-card .ra-icon-system {
  color: var(--tech-accent, var(--ra-gold));
  transition: color var(--ra-motion-fast);
}

/* ── Per-technique color tokens ── */

/* Heel Hook — danger / red */
.tech-card[data-tech="heel-hook"] {
  --tech-accent: #d64040;
  --tech-glow:   rgba(214,64,64,.08);
}

/* Toe Hold — IBJJF legal / gold */
.tech-card[data-tech="toe-hold"] {
  --tech-accent: var(--ra-gold);
  --tech-glow:   rgba(201,168,76,.07);
}

/* Knee Bar — technical / steel blue */
.tech-card[data-tech="knee-bar"] {
  --tech-accent: #4a82cc;
  --tech-glow:   rgba(74,130,204,.07);
}

/* Saddle — control / dominance purple */
.tech-card[data-tech="saddle"] {
  --tech-accent: #8b60e8;
  --tech-glow:   rgba(139,96,232,.07);
}

/* 50/50 — strategic / teal */
.tech-card[data-tech="fifty-fifty"] {
  --tech-accent: #2baaa0;
  --tech-glow:   rgba(43,170,160,.07);
}

/* Outside Ashi — entry / warm orange */
.tech-card[data-tech="outside-ashi"] {
  --tech-accent: #d6843a;
  --tech-glow:   rgba(214,132,58,.07);
}

/* ============================================================
   D. ACHIEVEMENT CARDS — subtle color differentiation
   Přidej data-ach="gold|silver|bronze|blue|green|black" do .ach-card
   ============================================================ */
.ach-card {
  border-left: 3px solid var(--ach-accent, var(--ra-border));
  transition: border-color var(--ra-motion-fast);
}

.ach-card .ra-icon-system {
  color: var(--ach-accent, var(--ra-gold));
}

.ach-card .year {
  color: var(--ach-accent, var(--ra-gold));
}

/* Zlato */
.ach-card[data-ach="gold"] {
  --ach-accent: #c9a84c; /* var(--ra-gold) */
}

/* Stříbro */
.ach-card[data-ach="silver"] {
  --ach-accent: #9ca3af;
}

/* Bronz */
.ach-card[data-ach="bronze"] {
  --ach-accent: #b87333;
}

/* ADCC / modrá */
.ach-card[data-ach="blue"] {
  --ach-accent: #4a82cc;
}

/* Coaching / zelená */
.ach-card[data-ach="green"] {
  --ach-accent: #3a9e6e;
}

/* Černý pás / purple */
.ach-card[data-ach="black"] {
  --ach-accent: #8b60e8;
}

/* ============================================================
   E. NEWSLETTER CAPTURE BOX — visual upgrade
   Přidej třídu .nl-featured na .capture-box (ten s Ecomail formulářem)
   ============================================================ */
.capture-box.nl-featured {
  background: linear-gradient(
    150deg,
    rgba(201,168,76,.10) 0%,
    rgba(22,22,31,.95) 50%,
    rgba(17,17,24,.98) 100%
  );
  border: 1px solid var(--ra-border-strong);
  box-shadow: var(--ra-highlight), 0 22px 48px rgba(201,168,76,.08);
}

/* "Buď první v řadě" banner nad formulářem */
.nl-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--ra-pill);
  background: rgba(201,168,76,.12);
  border: 1px solid rgba(201,168,76,.22);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ra-gold);
  margin-bottom: 16px;
}

.nl-banner::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ra-gold);
  flex-shrink: 0;
  animation: nl-pulse 2s ease-in-out infinite;
}

@keyframes nl-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.85); }
}

/* Sub-note "1000+ grapplerů" */
.nl-social-proof {
  font-size: 12px;
  color: var(--ra-muted);
  margin-top: 12px;
}

.nl-social-proof strong {
  color: var(--ra-gold);
}

/* Upgraded H3 */
.capture-box.nl-featured h3 {
  font-size: 24px;
  letter-spacing: -.4px;
}

/* ============================================================
   F. TESTIMONIALS — "Komunita" restyle
   Přidej data-handle="@username" do .test-card, zobrazí se pod meta
   ============================================================ */
.test-card {
  padding: 28px 26px;
}

/* IG-style handle pod jménem */
.test-meta [data-handle] {
  display: block;
  font-size: 11px;
  color: var(--ra-gold);
  font-weight: 700;
  letter-spacing: .5px;
}

/* Zvýrazněný avatar — silnější border */
.test-avatar {
  border: 2px solid rgba(201,168,76,.28);
  font-size: 15px;
}

/* Hvězdičky — o trochu větší */
.test-stars {
  font-size: 14px;
  letter-spacing: 3px;
  margin-bottom: 16px;
}

/* Citace — jemnější italic */
.test-card > p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--ra-muted);
  font-style: italic;
}

/* ============================================================
   G. RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .origin-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .origin-copy p {
    max-width: 100%;
  }

  .origin-pullquote {
    max-width: 600px;
  }

  .origin-teaser {
    text-align: center;
  }

  .origin-copy .ra-cta-secondary {
    margin: 0 auto;
  }
}

@media (max-width: 820px) {
  .origin-teaser {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .origin-pullquote {
    padding: 28px 22px 22px;
  }

  .origin-pullquote blockquote {
    font-size: 16px;
  }

  .tech-card {
    border-top-width: 2px;
  }

  .capture-box.nl-featured h3 {
    font-size: 20px;
  }
}

@media (max-width: 560px) {
  .origin-grid {
    gap: 28px;
  }
}

/* ============================================================
   H. ECOMAIL WIDGET — DARK OVERRIDE
   The Ecomail embed injects its own white-background form.
   Override key properties so it blends into the dark surface.
   These selectors target the injected container structure.
   ============================================================ */
#f-1-43c2cd496486bcc27217c3e790fb4088,
#f-1-43c2cd496486bcc27217c3e790fb4088 > div,
#f-1-43c2cd496486bcc27217c3e790fb4088 form,
#f-1-43c2cd496486bcc27217c3e790fb4088 .ecomail-form,
#f-1-43c2cd496486bcc27217c3e790fb4088 .em-form {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--ra-text) !important;
}
#f-1-43c2cd496486bcc27217c3e790fb4088 input[type="email"],
#f-1-43c2cd496486bcc27217c3e790fb4088 input[type="text"] {
  background: var(--ra-surface-200) !important;
  background-color: var(--ra-surface-200) !important;
  color: var(--ra-text) !important;
  border: 1px solid var(--ra-border) !important;
  border-radius: var(--ra-radius-sm) !important;
}
#f-1-43c2cd496486bcc27217c3e790fb4088 input::placeholder {
  color: var(--ra-muted) !important;
}
#f-1-43c2cd496486bcc27217c3e790fb4088 label {
  color: var(--ra-text) !important;
}
#f-1-43c2cd496486bcc27217c3e790fb4088 p,
#f-1-43c2cd496486bcc27217c3e790fb4088 span {
  color: var(--ra-muted) !important;
}
/* If Ecomail renders an iframe, we can't override its internals —
   but we can prevent the wrapper from showing a white flash */
#ra-hp-nl { background: transparent; }