@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;550;600;650;700;750;800&display=swap');
:root{--bg:#f7f8fd;--surface:#fff;--ink:#10123f;--navy:#090b69;--accent:#5060ec;--muted:#686b85;--line:#dde0ee;--pale:#ebeeff;--font:'Golos Text',Arial,sans-serif;color-scheme:light}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.65}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:5px}button:disabled{cursor:default}::selection{background:#cad1ff;color:var(--navy)}img{display:block;max-width:100%}h1,h2,h3,p{margin:0}.wrap{width:calc(100% - 112px);max-width:1240px;margin:auto}.header{height:102px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:24px}.brand{display:inline-flex;align-items:center;gap:8px;font-size:33px;font-weight:700;letter-spacing:-1.5px;color:var(--navy);line-height:1}.brand img{width:44px;height:44px;object-fit:contain}.header nav{display:flex;gap:27px;font-size:14px;color:#555974}.header nav a:hover{color:var(--accent)}.header-cta{display:inline-flex;align-items:center;gap:24px;padding:10px 17px;border:1px solid #c2c7df;border-radius:6px;font-size:14px;color:var(--navy);transition:background .2s,color .2s}.header-cta:hover{background:var(--navy);color:white}.header-cta>span{font-size:20px}.hero{display:grid;grid-template-columns:.86fr 1.14fr;gap:42px;align-items:center;padding-top:65px;padding-bottom:75px;min-height:675px}.eyebrow{font-size:12px;font-weight:500;letter-spacing:1.4px;line-height:1.6}.hero .eyebrow{display:flex;align-items:center;gap:9px;letter-spacing:.8px;color:#5b6082}.platform-tag{border:1px solid #b6bee7;border-radius:4px;color:var(--navy);padding:3px 7px;font-size:12px}.hero h1{font-size:clamp(70px,8.3vw,125px);line-height:1;letter-spacing:-.066em;font-weight:600;margin:26px 0}.hero h1>span,.accent{color:var(--accent)}.hero-description{font-size:24px;line-height:1.4;letter-spacing:-.6px;margin-bottom:15px}.hero-detail{font-size:16px;line-height:1.75;color:var(--muted);max-width:460px}.hero-actions{display:flex;align-items:center;gap:25px;margin-top:30px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;gap:31px;padding:16px 23px;border-radius:6px;font-size:15px;font-weight:500;transition:background .2s,transform .2s}.primary{background:var(--navy);color:#fff;box-shadow:0 5px 15px #15177216}.primary:hover{background:var(--accent);transform:translateY(-2px)}.button>span{font-size:22px;line-height:1}.text-link{display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:500}.text-link:hover{color:var(--accent)}.hero-note{display:flex;align-items:center;gap:9px;font-size:12px;color:#777b94;margin-top:17px;flex-wrap:wrap}.hero-note svg{width:12px;height:12px}.hero-note>span{color:#a8acc2;margin:0 3px}.hero-visual{min-width:0;position:relative}.visual-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;letter-spacing:.8px;color:#737994;padding:0 5px;margin-bottom:14px}.hero-stage{position:relative;width:100%;animation:heroFloat 6s ease-in-out infinite;will-change:transform}@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}.hero-glow{position:absolute;inset:10% 6% 8% 6%;background:radial-gradient(ellipse at center,rgba(80,96,236,.25) 0%,rgba(9,11,105,.07) 55%,transparent 75%);filter:blur(30px);pointer-events:none;z-index:0;transform:translateZ(0);animation:heroGlowPulse 6s ease-in-out infinite}@keyframes heroGlowPulse{0%,100%{opacity:.5;transform:scale(.97)}50%{opacity:.95;transform:scale(1.03)}}.hero-screen{position:relative;z-index:1;width:100%;padding:9px;border:1px solid #c8d0ee;border-radius:12px;background:linear-gradient(180deg,#f0f3fd 0%,#e2e8fa 100%);box-shadow:0 18px 45px -10px rgba(9,11,105,.14),0 5px 15px -2px rgba(16,18,63,.06);cursor:pointer;text-align:left;overflow:hidden;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s cubic-bezier(.16,1,.3,1),border-color .3s ease}.hero-screen:hover{transform:translateY(-5px);border-color:#6577f3;box-shadow:0 28px 65px -10px rgba(9,11,105,.22),0 10px 26px -3px rgba(80,96,236,.16)}.hero-screen img{width:100%;height:auto;display:block;border-radius:6px;box-shadow:0 1px 4px rgba(16,18,63,.08)}.screen-glare{position:absolute;inset:0;border-radius:11px;background:linear-gradient(125deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.08) 32%,transparent 60%);pointer-events:none;opacity:.65;transition:opacity .35s ease}.hero-screen:hover .screen-glare{opacity:1}.zoom-cue{position:absolute;right:18px;bottom:18px;z-index:5;background:var(--navy);color:white;border-radius:6px;padding:8px 14px;font-size:12px;font-weight:500;box-shadow:0 5px 16px rgba(9,11,105,.35);opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s cubic-bezier(.16,1,.3,1);pointer-events:none}.hero-screen:hover .zoom-cue,.hero-screen:focus-visible .zoom-cue{opacity:1;transform:translateY(0)}.hero-caption{display:flex;align-items:flex-start;gap:15px;margin-top:33px;padding:0 3px}.caption-number{font-size:29px;color:var(--accent);line-height:1.2}.hero-caption p{color:#777c94;font-size:14px;line-height:1.6}.hero-caption strong{color:var(--ink);font-weight:500}.caption-tag{font-size:12px;letter-spacing:.6px;color:#8187a2;margin-left:auto;max-width:103px;line-height:1.5}.benefit-strip{background:var(--navy);color:#f4f5ff;padding:16px 0;overflow:hidden;position:relative;border-top:1px solid rgba(144,152,251,.15);border-bottom:1px solid rgba(144,152,251,.15)}.marquee{display:flex;overflow:hidden;user-select:none;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 4%,#000 96%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 4%,#000 96%,transparent 100%)}.marquee-track{display:flex;width:max-content;flex-shrink:0;animation:marqueeScroll 34s linear infinite;will-change:transform}.benefit-strip:hover .marquee-track{animation-play-state:paused}.marquee-group{display:flex;align-items:center;gap:30px;padding-right:30px;flex-shrink:0}.marquee-group span{font-size:12px;font-weight:550;letter-spacing:1px;white-space:nowrap;color:#eaedff}.marquee-star{font-size:20px!important;line-height:1;color:#8c97fa!important;user-select:none}@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}.section{padding-top:94px;padding-bottom:94px}.section-top{display:flex;align-items:center;justify-content:space-between;gap:24px}.section-top .eyebrow{color:#707692}.section-side{font-size:12px;color:#858aa3}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;margin-top:25px;margin-bottom:40px}h2{font-size:clamp(36px,3.95vw,58px);font-weight:550;line-height:1.15;letter-spacing:-.05em}.section-heading>p{font-size:16px;color:var(--muted);line-height:1.8;max-width:370px;min-width:275px;padding-bottom:3px}.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.feature{padding:28px;display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--line);border-radius:11px;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1),border-color .25s ease}.feature:hover{transform:translateY(-4px);border-color:#b8c4f5;box-shadow:0 16px 36px -10px rgba(9,11,105,.09),0 4px 12px -2px rgba(80,96,236,.05)}.feature-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.feature-top svg{width:30px;height:30px;stroke:var(--accent);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease}.feature:hover .feature-top svg{transform:scale(1.08)}.feature-top>span{font:12px monospace;color:#989cb5;font-weight:600}.feat-widget{background:#f6f8fe;border:1px solid #e1e6f7;border-radius:8px;padding:12px 13px;margin-bottom:20px;display:flex;flex-direction:column;gap:7px;font-size:12px;user-select:none}.mini-wave{display:flex;align-items:center;gap:3px;height:18px}.mini-wave span{display:block;width:3px;background:var(--accent);border-radius:2px;opacity:.85}.mini-wave span:nth-child(2n){height:14px}.mini-wave span:nth-child(2n+1){height:7px}.mini-wave span:nth-child(3n){height:18px}.mini-wave span:nth-child(5n){height:10px}.widget-badge{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:550;color:#3f4876}.badge-dot{width:6px;height:6px;border-radius:50%;background:#27c93f}.rec-row{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#d12e2e}.rec-dot{width:7px;height:7px;border-radius:50%;background:#ef4444;box-shadow:0 0 6px #ef444499}.rec-status{font-size:11px;color:#2e7d32;font-weight:500}.yt-item{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:550;color:#3b4372}.yt-badge{background:#ffebe9;color:#c92a2a;border:1px solid #ffc9c9;border-radius:3px;padding:1px 5px;font-size:10px;font-weight:700}.yt-result{font-size:11px;color:#636c92}.mode-chip-row{display:flex;align-items:center;gap:6px}.m-chip{padding:3px 7px;border-radius:4px;background:#e8ecfa;border:1px solid #d4daf2;font-size:11px;font-weight:500;color:#4a5482}.m-chip.active{background:var(--navy);color:#fff;border-color:var(--navy)}.mode-note{font-size:11px;color:#6d759a}.feat-widget-queue{gap:7px}.q-row{display:flex;align-items:center;gap:8px;font-size:11.5px;color:#3b4372}.q-icon{width:14px;height:14px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;line-height:1}.q-icon--done{color:#16a34a}.q-icon--prog{color:var(--accent);animation:qSpin 2s linear infinite}.q-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:500;color:#313860}.q-status{flex-shrink:0;margin-left:auto;font-size:10px;font-weight:600;padding:2px 7px;border-radius:4px}.q-status.done{background:#e4f4e7;color:#15803d;border:1px solid #c8ebd1}.q-status.prog{background:#e9edfd;color:var(--accent);border:1px solid #d4defc;font-variant-numeric:tabular-nums}@keyframes qSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.exp-row{display:flex;gap:6px}.exp-fmt{padding:2px 6px;background:#eef1fc;border:1px solid #d5dcf5;border-radius:3px;font-size:11px;font-weight:700;color:var(--navy);font-family:monospace}.exp-sub{font-size:11px;color:#646d95}.feature h3{font-size:24px;font-weight:550;letter-spacing:-.6px;line-height:1.25;margin-bottom:13px}.feature p{font-size:15px;line-height:1.75;color:var(--muted);margin-bottom:22px}.feature-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}.feature-tags span{padding:3px 7px;background:#f1f3fc;border:1px solid #e4e7f3;border-radius:3px;color:#697196;font-size:11px;letter-spacing:.2px}.showcase-grid{display:grid;grid-template-columns:1fr 1.26fr;gap:36px;align-items:start;margin-top:15px}.showcase-sidebar{display:flex;flex-direction:column;gap:14px}.showcase-tabs{display:flex;flex-direction:column;gap:5px}.showcase-tab{background:#ffffff;border:1px solid var(--line);border-radius:8px;padding:9px 13px;text-align:left;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;width:100%;display:flex;flex-direction:column}.showcase-tab:hover{border-color:#b5c1f0;background:#fafbff}.showcase-tab[aria-selected="true"]{border-color:var(--accent);background:#ffffff;box-shadow:0 8px 22px -5px rgba(80,96,236,.12),0 2px 6px -1px rgba(9,11,105,.04);padding:11px 13px 13px}.s-tab-top{display:flex;align-items:center;gap:9px}.s-tab-num{font:12px monospace;font-weight:700;color:#8c93b4;transition:color .2s}.showcase-tab[aria-selected="true"] .s-tab-num{color:var(--accent)}.s-tab-title{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.2px}.showcase-tab[aria-selected="true"] .s-tab-title{color:var(--navy)}.s-tab-badge{margin-left:auto;font-size:9.5px;font-weight:700;color:#1b8a3e;background:#e4f4e7;border:1px solid #c4ebd0;padding:2px 6px;border-radius:4px;letter-spacing:.3px;white-space:nowrap;flex-shrink:0}.s-tab-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s cubic-bezier(.16,1,.3,1),opacity .2s ease;opacity:0}.showcase-tab[aria-selected="true"] .s-tab-body{grid-template-rows:1fr;opacity:1}.s-tab-body-inner{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:5px;padding-top:7px}.s-tab-desc{font-size:13px;color:#4f577d;line-height:1.6;margin:0}.s-tab-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}.s-tab-tags span{font-size:10px;padding:2px 6px;border-radius:3px;background:#eef2ff;border:1px solid #d1daf8;color:var(--accent);font-weight:550}.showcase-export-bar{display:flex;align-items:center;gap:14px;padding-top:2px;flex-wrap:wrap}.showcase-note{font-size:12px;color:#7982a4}.export-button{display:inline-flex;align-items:center;gap:8px;border:1px solid #b7c2ea;background:#f3f6ff;color:var(--navy);border-radius:6px;padding:9px 15px;font-size:13px;font-weight:600;white-space:nowrap;transition:background .2s,border-color .2s,transform .15s}.export-button:hover{background:#fff;border-color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 12px rgba(9,11,105,.08)}.export-button svg{color:var(--accent);flex-shrink:0}.showcase-stage{position:sticky;top:32px;display:flex;flex-direction:column;gap:10px}.showcase-device{background:#ffffff;border:1px solid #ccd5f2;border-radius:10px;overflow:hidden;box-shadow:0 20px 48px -10px rgba(9,11,105,.13),0 4px 14px -2px rgba(16,18,63,.05)}.device-bar{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;background:linear-gradient(180deg,#f7f9fe 0%,#edf1fc 100%);border-bottom:1px solid #dbe2f6}.device-brand{display:flex;align-items:center;gap:8px}.device-title{font-size:11.5px;font-weight:550;color:#434c76;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}.device-win-actions{display:flex;align-items:center;gap:10px}.device-tag{font-size:9.5px;font-weight:700;color:var(--accent);background:#e3e8fc;border:1px solid #c9d2f6;padding:1px 6px;border-radius:3px;letter-spacing:.5px}.win-controls{display:flex;align-items:center;font-size:11px;color:#6d759a;line-height:1;user-select:none}.win-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:20px;border-radius:2px;font-family:sans-serif}.win-btn:hover{background:#dbe2f5;color:var(--navy)}.win-btn.win-close:hover{background:#e81123;color:white}.showcase-preview{display:block;width:100%;border:0;padding:0;background:#fff;cursor:pointer;position:relative;overflow:hidden}.showcase-preview img{width:100%;height:auto;display:block;transition:opacity .18s ease-out}.showcase-preview img.switching{opacity:.12}.showcase-preview .zoom-cue{position:absolute;right:14px;bottom:14px;background:var(--navy);color:white;border-radius:5px;padding:6px 12px;font-size:11.5px;font-weight:500;box-shadow:0 4px 12px rgba(9,11,105,.35);opacity:0;transform:translateY(4px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}.showcase-preview:hover .zoom-cue,.showcase-preview:focus-visible .zoom-cue{opacity:1;transform:translateY(0)}.showcase-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px}.showcase-pill{font-size:11px;font-weight:700;color:var(--navy);background:#e6ebfa;border:1px solid #d0daf5;border-radius:4px;padding:2px 7px;white-space:nowrap;font-family:monospace}.showcase-hint{font-size:12px;color:#7982a4}.control-section{background:var(--navy);color:white;padding:90px 0}.control-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:start}.control-copy>.eyebrow{color:#a2a9ec}.control-copy h2{font-size:clamp(38px,4.2vw,56px);line-height:1.1;letter-spacing:-.04em;margin:22px 0 18px}.control-copy h2>span{color:#919eff}.control-copy>p{font-size:16px;line-height:1.75;color:#b7bdeb;margin-bottom:28px}.control-features{display:flex;flex-direction:column;gap:16px;border-top:1px solid rgba(255,255,255,.12);padding-top:24px}.control-feat-item{display:flex;align-items:flex-start;gap:14px}.control-feat-item svg{width:22px;height:22px;stroke:#919eff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:2px}.control-feat-item strong{display:block;font-size:14.5px;font-weight:600;color:#fff;margin-bottom:2px}.control-feat-item span{display:block;font-size:13px;line-height:1.5;color:#a6aedb}.mode-card{border:1px solid #4a5198;background:#fff;color:var(--ink);border-radius:12px;padding:18px 26px 20px;box-shadow:0 20px 50px rgba(4,6,40,.28);display:flex;flex-direction:column}.mode-tabs{display:flex;background:#eef1fc;border-radius:8px;padding:4px;margin:0 -10px 18px}.mode-tabs button{width:50%;border:0;background:none;color:#5d678e;border-radius:6px;padding:10px 14px;font-size:14px;font-weight:600;transition:all .2s ease}.mode-tabs button:hover{color:var(--navy)}.mode-tabs button[aria-selected=true]{background:var(--navy);color:#fff;box-shadow:0 4px 14px rgba(9,11,105,.18)}.mode-header{display:flex;align-items:center;gap:15px;margin-bottom:14px}.mode-icon{width:46px;height:46px;border-radius:10px;background:#edf1fe;border:1px solid #d5defa;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent)}.mode-icon svg{width:26px;height:26px}.mode-header-meta{min-width:0}.mode-header-meta .eyebrow{font-size:11px;letter-spacing:1px;color:#7b84a6;display:block;line-height:1.4}.mode-card h3{font-size:22px;line-height:1.25;letter-spacing:-.6px;font-weight:600;color:var(--navy);margin:3px 0 0}.mode-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}.mode-chips span{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:4px;background:#edf2ff;border:1px solid #d4defc;color:var(--navy);letter-spacing:.3px}.mode-card p{color:var(--muted);font-size:14.5px;line-height:1.65;margin-bottom:14px}.mode-specs{background:#f6f8fe;border:1px solid #e1e6f7;border-radius:8px;padding:10px 14px;display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.mode-spec-item{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;gap:12px}.spec-label{color:#6a739b;font-weight:500}.spec-val{color:var(--navy);font-weight:600;font-family:monospace,sans-serif;font-size:12px}.mode-card ul{list-style:none;padding:0;margin:0 0 16px;color:#4b5477;font-size:13.5px;line-height:1.55;display:flex;flex-direction:column;gap:7px}.mode-card li{position:relative;padding:0 0 0 20px}.mode-card li:before{content:'✓';position:absolute;left:0;font-weight:700;color:#1b8a3e}.mode-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:13.5px;border-top:1px solid var(--line);padding-top:14px;margin-top:auto;color:var(--navy);font-weight:600}.mode-foot span{font-size:12px;font-weight:400;color:#7c85a5;text-align:right}.cloud-free .section-heading>p{max-width:440px}.cloud-free h2{font-size:clamp(34px,3.8vw,52px);line-height:1.15;letter-spacing:-.04em}.provider-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.provider-card{border:1px solid var(--line);background:#fff;border-radius:12px;padding:24px;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease,border-color .2s ease}.provider-card:hover{transform:translateY(-4px);border-color:#b5c3f3;box-shadow:0 16px 36px -10px rgba(9,11,105,.1),0 4px 12px -2px rgba(80,96,236,.06)}.provider-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.provider-top h3{font-size:22px;letter-spacing:-.6px;font-weight:700;color:var(--navy)}.provider-tag{font-size:10px;font-weight:700;border-radius:4px;padding:3px 7px;letter-spacing:.3px;white-space:nowrap}.provider-tag.tag--green{color:#15803d;background:#e6f6ea;border:1px solid #c7ebd0}.provider-tag.tag--purple{color:#6938b8;background:#f3ecfc;border:1px solid #e1d2f7}.provider-tag.tag--blue{color:var(--accent);background:#edf1fe;border:1px solid #d5defa}.provider-highlight{background:#f6f8fd;border:1px solid #e2e8f7;border-radius:8px;padding:11px 13px;margin-bottom:14px}.provider-highlight strong{display:block;font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-.3px;line-height:1.3}.provider-highlight span{display:block;font-size:12px;color:#6b7398;margin-top:2px}.provider-card p{font-size:13.5px;color:var(--muted);line-height:1.65;margin-bottom:14px}.provider-specs{background:#fff;border-top:1px solid #edf0fa;border-bottom:1px solid #edf0fa;padding:8px 0;margin-bottom:16px;display:flex;flex-direction:column;gap:5px}.provider-spec-item{display:flex;justify-content:space-between;align-items:center;font-size:12px;gap:8px}.ps-label{color:#767f9f;font-weight:500}.ps-val{color:var(--navy);font-weight:600}.provider-card a{font-size:13px;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:6px;margin-top:auto;transition:color .15s}.provider-card a:hover{color:var(--navy);text-decoration:none}.cloud-free-note{display:flex;align-items:flex-start;gap:14px;background:#edf1fc;border:1px solid #d4def7;border-radius:9px;padding:16px 20px;margin-top:28px}.cf-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--accent);flex-shrink:0;margin-top:1px}.cf-icon svg{width:20px;height:20px}.cloud-free-note p{font-size:13.5px;line-height:1.65;color:#454f76;margin:0}.cloud-free-note strong{color:var(--navy);font-weight:600}.compare-section{padding-top:0}.compare-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:34px;align-items:stretch}.compare-col{border-radius:14px;padding:30px;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease}.compare-col--bad{background:#f8f9fd;border:1px solid #dde1f0}.compare-col--good{background:#fff;border:2px solid var(--accent);box-shadow:0 16px 45px -8px rgba(80,96,236,.16),0 4px 14px -2px rgba(9,11,105,.05)}.col-header{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line)}.compare-col--good .col-header{border-bottom-color:#e6ebfa}.col-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.5px;padding:3px 9px;border-radius:4px;margin-bottom:12px}.col-pill--bad{background:#fee2e2;color:#b91c1c;border:1px solid #fca5a5}.col-pill--good{background:#dcfce7;color:#15803d;border:1px solid #86efac}.col-header h3{font-size:24px;font-weight:700;letter-spacing:-.5px;line-height:1.25;margin:0 0 6px}.compare-col--bad .col-header h3{color:#2b304f}.compare-col--good .col-header h3{color:var(--navy)}.col-header p{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0}.col-list{display:flex;flex-direction:column;gap:14px;flex:1}.col-card{border-radius:10px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;transition:transform .2s ease}.compare-col--bad .col-card{background:#fff;border:1px solid #e7eaf4}.compare-col--good .col-card{background:#f6f8fe;border:1px solid #dbe2fb}.col-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.col-card-tag{font-size:10px;font-weight:700;letter-spacing:.6px;color:#7b83a2}.compare-col--good .col-card-tag{color:var(--accent)}.col-card-icon{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.col-card-icon--bad{background:#fee2e2;color:#dc2626}.col-card-icon--good{background:#dcfce7;color:#16a34a}.col-card-icon svg{width:12px;height:12px}.col-card-title{font-size:15px;font-weight:700;letter-spacing:-.2px;line-height:1.35}.compare-col--bad .col-card-title{color:#3b4263}.compare-col--good .col-card-title{color:var(--navy)}.col-card p{font-size:13.5px;line-height:1.6;margin:0}.compare-col--bad .col-card p{color:#636a86}.compare-col--good .col-card p{color:#384168}.compare-cta{background:var(--navy);color:#fff;border-radius:12px;padding:34px 38px;margin-top:34px;display:flex;align-items:center;justify-content:space-between;gap:36px;border:1px solid #2e3575}.cta-copy{max-width:620px}.cta-kicker{font-size:11px;font-weight:700;letter-spacing:1.2px;color:#9aa7ff;display:block;margin-bottom:8px}.cta-copy h3{font-size:25px;font-weight:700;letter-spacing:-.5px;line-height:1.25;margin-bottom:8px;color:#fff}.cta-copy p{font-size:14.5px;line-height:1.6;color:#bac2ee;margin:0}.cta-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0}.cta-actions .button{background:#fff;color:var(--navy);font-weight:600;padding:13px 22px;box-shadow:0 4px 14px rgba(0,0,0,.15);border:1px solid #fff}.cta-actions .button:hover{background:var(--pale);color:var(--navy);transform:translateY(-2px)}.cta-subtext{font-size:11.5px;color:#9da7db;white-space:nowrap}.demo-section{background:#f0f4fd;border-top:1px solid #dbe2f6;border-bottom:1px solid #dbe2f6;padding:94px 0}
.faq-section-wrap{background:#f0f4fd;border-top:1px solid #dbe2f6;border-bottom:1px solid #dbe2f6;padding:94px 0}
.speakers-section{background:#f0f4fd;border-top:1px solid #dbe2f6;border-bottom:1px solid #dbe2f6;padding:94px 0}.speakers-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center}.speakers-copy .eyebrow{color:#69729b}.speakers-copy h2{font-size:clamp(34px,3.7vw,52px);line-height:1.15;letter-spacing:-.04em;margin:22px 0 16px}.speakers-lead{font-size:16px;line-height:1.75;color:var(--muted);margin-bottom:26px}.speakers-features{display:flex;flex-direction:column;gap:14px;margin-bottom:26px}.speaker-feat{display:flex;align-items:flex-start;gap:14px;background:#fff;border:1px solid #dbe1f4;border-radius:10px;padding:14px 16px;transition:transform .2s ease,border-color .2s ease}.speaker-feat:hover{transform:translateY(-2px);border-color:#b5c2f0}.sf-icon{width:36px;height:36px;border-radius:8px;background:#edf2fe;border:1px solid #d4defc;color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}.sf-icon svg{width:18px;height:18px}.sf-content strong{display:block;font-size:14.5px;font-weight:700;color:var(--navy);margin-bottom:2px}.sf-content p{font-size:13px;line-height:1.55;color:#5a6285;margin:0}.speakers-chips{display:flex;flex-wrap:wrap;gap:6px}.speakers-chips span{font-size:10.5px;font-weight:700;letter-spacing:.3px;padding:3px 8px;border-radius:4px;background:#fff;border:1px solid #d0daf5;color:var(--navy)}.speakers-widget{background:#fff;border:1px solid #cad4f3;border-radius:14px;box-shadow:0 22px 55px -12px rgba(9,11,105,.13),0 4px 14px -2px rgba(80,96,236,.06);overflow:hidden;display:flex;flex-direction:column}.sw-topbar{background:linear-gradient(180deg,#f8faff 0%,#edf2fc 100%);padding:10px 16px;border-bottom:1px solid #dbe2f6;display:flex;align-items:center;justify-content:space-between;gap:12px}.sw-file-info{display:flex;align-items:center;gap:8px;min-width:0}.sw-file-info svg{width:16px;height:16px;color:var(--accent);flex-shrink:0}.sw-filename{font-size:12px;font-weight:600;color:#353d66;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sw-count{font-size:10px;font-weight:700;background:#e2e8fc;color:var(--navy);border:1px solid #cad6f8;border-radius:3px;padding:1px 6px;letter-spacing:.3px;white-space:nowrap}.sw-status{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#15803d;white-space:nowrap}.sw-status-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px #22c55e88}.sw-body{padding:18px 20px;display:flex;flex-direction:column;gap:13px}.sw-msg{display:flex;flex-direction:column;gap:5px}.sw-msg-top{display:flex;align-items:center;gap:8px}.sw-badge{font-size:10px;font-weight:700;letter-spacing:.4px;padding:2px 7px;border-radius:4px;display:inline-flex;align-items:center;gap:4px}.sw-badge svg{width:11px;height:11px}.badge--s1{background:#edf2fe;color:#2f3fa8;border:1px solid #cfdbfc}.badge--s2{background:#e8f7ee;color:#15803d;border:1px solid #c3ebce}.badge--s3{background:#f6ecfe;color:#792bb5;border:1px solid #e4cefa}.sw-name{font-size:12.5px;font-weight:600;color:var(--ink)}.sw-time{font:11px monospace;color:#858dae;margin-left:auto}.sw-text{background:#f6f8fd;border:1px solid #e2e8f7;border-radius:8px;padding:9px 13px;font-size:13px;line-height:1.55;color:#2b3254;margin:0}.sw-footer{background:#eef2fd;border-top:1px solid #dce4f8;padding:11px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.sw-action{display:flex;align-items:center;gap:8px;font-size:12px;color:#454e76}.sw-action svg{width:14px;height:14px;color:var(--accent);flex-shrink:0}.sw-action strong{color:var(--navy);font-weight:600}.sw-confirm{font-size:10.5px;font-weight:700;color:#15803d;background:#dcfce7;border:1px solid #86efac;padding:2px 7px;border-radius:4px;letter-spacing:.2px;white-space:nowrap}.support-section{background:#f7f8fd;padding:94px 0}
.support-heading{margin-bottom:28px}
.support-heading h2{font-size:clamp(32px,3.5vw,46px);line-height:1.15;letter-spacing:-.04em;margin:0}
.support-grid{display:grid;grid-template-columns:1.22fr .78fr;gap:32px;align-items:stretch}
.author-card{background:#fff;border:1px solid #cad4f3;border-radius:14px;padding:24px;box-shadow:0 18px 45px -10px rgba(9,11,105,.08),0 4px 14px -2px rgba(80,96,236,.04);display:flex;gap:22px;align-items:flex-start}
.author-portrait{width:185px;height:250px;flex-shrink:0;border-radius:10px;overflow:hidden;position:relative;background:#cbd4ee;box-shadow:0 4px 12px rgba(9,11,60,.12)}
.author-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 16%;display:block}
.author-portrait-badge{position:absolute;bottom:0;inset-inline:0;padding:16px 10px 8px;background:linear-gradient(180deg,transparent 0%,rgba(9,11,60,.88) 100%);color:#fff}
.author-portrait-badge strong{display:block;font-size:12.5px;font-weight:700;line-height:1.2}
.author-portrait-badge span{display:block;font-size:11px;color:#cbd5ff;line-height:1.2}
.author-bio{display:flex;flex-direction:column;gap:10px;flex:1}
.author-bio-header{margin-bottom:2px}
.author-bio-header h3{font-size:18.5px;font-weight:700;color:var(--navy);margin:0 0 2px;letter-spacing:-.02em}
.author-bio-header span{font-size:12px;color:#6b759a;font-weight:500}
.author-bio p{font-size:13.5px;line-height:1.65;color:#454d6e;margin:0}
.author-bio strong{color:var(--navy);font-weight:600}
.author-gh-btn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--navy);padding:6px 12px;border:1px solid #c9d2f0;border-radius:6px;background:#f8faff;text-decoration:none;width:fit-content;margin-top:2px;transition:all .15s}
.author-gh-btn:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.donation-card{background:#fff;border:1px solid #cad4f3;border-radius:14px;padding:24px;box-shadow:0 18px 45px -10px rgba(9,11,105,.08),0 4px 14px -2px rgba(80,96,236,.04);display:flex;flex-direction:column;gap:15px;justify-content:space-between}
.donation-header{display:flex;align-items:center;gap:13px}
.donation-icon{width:40px;height:40px;border-radius:10px;background:#ffeef0;border:1px solid #ffd3d8;color:#e11d48;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.donation-icon svg{width:20px;height:20px}
.donation-header h3{font-size:18px;font-weight:700;letter-spacing:-.3px;color:var(--navy);margin:0 0 2px}
.donation-header p{font-size:12px;color:#6d769b;margin:0;line-height:1.4}
.donation-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.preset-btn{background:#f4f6fd;border:1px solid #d5def5;border-radius:8px;padding:8px 4px;text-align:center;font-size:13px;font-weight:700;color:var(--navy);cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.2}
.preset-btn span{font-size:10px;font-weight:500;color:#6b7499}
.preset-btn:hover{background:#eaeffc;border-color:var(--accent);color:var(--navy)}
.preset-btn.active{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 4px 12px rgba(9,11,105,.18)}
.preset-btn.active span{color:#b6c3ff}
.donation-custom-input{position:relative;width:100%}
.donation-custom-input input{width:100%;padding:9px 12px;border:1px solid #c2cde9;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--navy);font-family:var(--font);background:#fcfdff;outline:none;transition:border-color .2s}
.donation-custom-input input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(80,96,236,.15)}
.donation-submit-btn{width:100%;justify-content:center;padding:12px 14px;font-size:14px;font-weight:600;border:0;border-radius:8px;gap:6px;white-space:nowrap}
.donation-values{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11.5px;color:#667098}.dv-dot{color:#abb4d6;font-size:12px;user-select:none}

.donation-methods{border-top:1px solid #eef2fb;padding-top:10px;text-align:center}
.donation-methods span{font-size:11px;color:#7881a5;line-height:1.4;display:block}.faq-section{display:grid;grid-template-columns:1fr 1.35fr;gap:75px}.faq-heading .eyebrow{color:#79829e;font-size:12px}.faq-heading h2{margin-top:23px}.faq-list{border-top:1px solid #b9c4dd}details{border-bottom:1px solid #d9e1ef}summary{padding:23px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:25px;font-size:16px;line-height:1.45}summary::-webkit-details-marker{display:none}summary>span{font-size:23px;color:#8797b9;line-height:1.1;transition:transform .2s}details[open] summary>span{transform:rotate(45deg);color:var(--accent)}details p{color:var(--muted);font-size:16px;line-height:1.85;padding:0 36px 24px 0}details p a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}.footer-wrap{background:#f0f4fd;border-top:1px solid #dbe2f6;padding:48px 0 24px}.footer{border-top:none;padding-top:0}.footer-top{display:flex;justify-content:space-between;align-items:center;gap:25px}.footer .brand{font-size:44px;gap:10px}.footer .brand img{width:56px;height:56px}.footer-top p{font-size:16px;line-height:1.6;color:#818aa6;margin-right:auto;margin-left:25px}.footer-bottom{display:flex;justify-content:space-between;gap:25px;padding:38px 0 25px;font-size:12px;line-height:1.6;color:#929bb3}.image-dialog{width:fit-content;max-width:min(1520px,96vw);max-height:94dvh;border:1px solid #2e345e;border-radius:12px;padding:0;color:#f0f3ff;background:#10132b;box-shadow:0 25px 90px rgba(3,5,30,.75);overflow:hidden}.image-dialog::backdrop{background:rgba(8,10,36,.82);backdrop-filter:blur(6px)}.dialog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 18px;background:#171a3a;border-bottom:1px solid #272d54;font-size:13.5px}.dialog-title-wrap{display:flex;align-items:center;gap:12px;min-width:0}#image-dialog-title{font-weight:600;color:#eef1ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dialog-hint{font-size:11.5px;color:#858fb5;white-space:nowrap}.dialog-toolbar-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.dialog-toolbar a{font-size:12.5px;color:#8c9bf8;text-decoration:none;padding:5px 10px;border-radius:5px;background:rgba(80,96,236,.1);border:1px solid rgba(140,155,248,.25);transition:background .15s,color .15s}.dialog-toolbar a:hover{color:#fff;background:rgba(80,96,236,.25);border-color:#8c9bf8}.dialog-toolbar button{border:1px solid #333a69;background:#1f244b;color:#eaeeff;font-size:12.5px;font-weight:500;border-radius:5px;padding:5px 12px;cursor:pointer;transition:background .15s,border-color .15s}.dialog-toolbar button:hover{background:#2b3268;border-color:#5060ec}.dialog-btn-close{padding:5px 10px!important;font-weight:700!important;font-size:14px!important}.dialog-image-scroll{overflow:auto;max-height:calc(94dvh - 54px);background:#0a0c1e;display:flex;align-items:center;justify-content:center;padding:18px;box-sizing:border-box}.dialog-image-scroll img{display:block;max-width:100%;max-height:calc(94dvh - 90px);width:auto;height:auto;object-fit:contain;border-radius:6px;box-shadow:0 12px 40px rgba(0,0,0,.5);cursor:zoom-in;transition:transform .12s ease}.dialog-image-scroll.is-zoomed{display:block;padding:24px;text-align:center}.dialog-image-scroll.is-zoomed img{max-width:none;max-height:none;width:auto;height:auto;cursor:zoom-out;margin:0 auto}.skip{position:absolute;top:-80px;left:20px;z-index:20;background:var(--navy);color:white;padding:12px}.skip:focus{top:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1600px){.hero{padding-top:78px;padding-bottom:88px;gap:60px}.hero-screen{width:100%}.hero-caption{margin-top:44px}}
@media(max-width:1150px){.wrap{width:calc(100% - 64px)}.header nav{gap:18px}.header{gap:20px}.header-cta{gap:16px}.hero{gap:27px;padding-top:52px;padding-bottom:60px;min-height:630px}.hero h1{font-size:8.7vw}.hero .eyebrow{letter-spacing:0;font-size:12px}.hero-description{font-size:22px}.hero-visual{margin-right:0}.visual-meta{font-size:12px;letter-spacing:0}.visual-meta>span:last-child{display:none}.hero-caption{gap:11px}.caption-tag{display:none}.hero-caption p{font-size:14px}.hero-actions{gap:20px}.button{padding:14px 18px;gap:24px}.features-grid{gap:16px}.feature{padding:22px}.feature h3{font-size:22px}.section-heading{gap:32px}.section-heading>p{min-width:260px;max-width:320px}.control-grid{gap:42px}.mode-card{padding-left:20px;padding-right:20px}.mode-tabs{margin-left:-10px;margin-right:-10px}.showcase-grid{gap:32px}.speakers-grid{gap:36px}.sw-body{padding:16px 18px}.provider-card{padding:20px}.compare-columns{gap:18px}.compare-col{padding:24px 20px}.faq-section{gap:45px}}
@media(max-width:900px){.demo-section,.speakers-section,.support-section,.faq-section-wrap{padding:64px 0}.cta-section{padding:54px 0 64px}.header nav{gap:16px}.header nav a:first-child,.header nav a:last-child{display:none}.hero{grid-template-columns:1fr 1fr;gap:24px}.hero .eyebrow{flex-wrap:wrap;max-width:300px}.hero h1{font-size:9vw}.hero-caption p{font-size:12px}.features-grid{grid-template-columns:1fr 1fr;gap:14px}.feature{padding:20px}.feature h3{font-size:20px}.feature-tags span{font-size:11px}.section-heading{align-items:flex-start;flex-direction:column;gap:20px}.section-heading>p{max-width:590px}.control-grid{gap:30px}.control-copy p br{display:none}.control-copy p{max-width:none}.cloud-free .section-heading>p{max-width:620px}.provider-grid{grid-template-columns:1fr;gap:16px}.compare-columns{grid-template-columns:1fr;gap:20px}.compare-cta{flex-direction:column;align-items:flex-start;padding:26px 22px;gap:20px}.cta-actions{align-items:flex-start;width:100%}.cta-actions .button{width:100%;justify-content:center}.showcase-grid{grid-template-columns:1fr;gap:26px}.showcase-stage{position:static;order:-1}.showcase-device{max-width:760px;margin:0 auto;width:100%}.showcase-meta{max-width:760px;margin:0 auto;width:100%}.export-button{white-space:normal}.speakers-grid{grid-template-columns:1fr;gap:32px}.speakers-copy h2{font-size:38px}.support-grid{grid-template-columns:1fr;gap:24px}.support-heading h2{font-size:34px}.author-card{padding:20px}.donation-card{padding:20px}}
@media(max-width:700px){.wrap{width:calc(100% - 40px)}.header{height:80px;gap:18px}.brand{font-size:29px;gap:5px}.brand img{width:38px;height:38px}.header nav{display:none}.header-cta{font-size:14px;padding:8px 11px;gap:12px}.header-cta>span{font-size:18px}.hero{grid-template-columns:1fr;padding-top:36px;padding-bottom:42px;gap:36px;min-height:0}.hero .eyebrow{max-width:none;letter-spacing:.2px;gap:7px}.platform-tag{padding:2px 5px}.hero h1{font-size:clamp(70px,16vw,106px);margin:24px 0}.hero-description{font-size:22px}.hero-detail{font-size:16px;max-width:430px}.hero-actions{gap:22px;margin-top:27px}.button{font-size:14px;padding:15px 17px;gap:27px}.text-link{font-size:14px;gap:7px}.hero-note{font-size:12px;margin-top:16px}.hero-visual{width:100%;max-width:560px;justify-self:center}.visual-meta{font-size:12px;margin-bottom:17px;letter-spacing:.4px}.hero-stage{animation:none}.hero-glow{display:none}.hero-screen{padding:6px;border-radius:8px;transform:none;box-shadow:0 15px 35px #15164b1a}.hero-screen img{border-radius:4px}.hero-screen .zoom-cue{opacity:1;font-size:12px;right:12px;bottom:12px;padding:5px 8px}.hero-caption{margin-top:23px;gap:12px}.hero-caption p{font-size:14px}.caption-number{font-size:25px}.benefit-strip{padding:14px 0}.marquee-group{gap:20px;padding-right:20px}.marquee-group span{font-size:11px;letter-spacing:.8px}.section{padding-top:60px;padding-bottom:60px}.section-side{display:none}.section-top>.eyebrow{font-size:12px;letter-spacing:1px}.section-heading{display:block;margin-top:22px;margin-bottom:28px}h2{font-size:37px}.section-heading>p{margin-top:20px;font-size:16px;min-width:0}.features-grid{grid-template-columns:1fr;gap:14px}.feature{padding:22px}.feature-top{margin-bottom:16px}.feature h3{font-size:22px}.feature h3 br{display:none}.feature p{font-size:15px;margin-bottom:18px}.showcase-grid{gap:18px}.showcase-tab{padding:13px 14px}.s-tab-title{font-size:15px}.s-tab-desc{font-size:13px}.showcase-export-bar{flex-direction:column;align-items:stretch;gap:10px}.export-button{padding:10px 14px;font-size:13.5px;width:100%;justify-content:center}.showcase-note{text-align:center}.control-section{padding:58px 0}.control-grid{grid-template-columns:1fr;gap:30px}.control-copy h2{font-size:48px;margin:24px 0}.control-copy p{font-size:16px;max-width:none}.mode-card{min-height:0;padding-left:25px;padding-right:25px}.mode-tabs{margin-left:-15px;margin-right:-15px}.mode-icon{margin-top:23px;margin-bottom:15px}.mode-card h3{font-size:26px}.mode-card p{font-size:16px}.mode-card ul{font-size:14px}.mode-foot{font-size:14px}.mode-foot span{font-size:12px}.cloud-free h2{font-size:32px}.provider-grid{grid-template-columns:1fr;gap:14px}.provider-card{padding:20px}.cloud-free-note{padding:14px 16px;gap:10px}.cloud-free-note p{font-size:12.5px}.compare-section h2{font-size:35px}.compare-cta{padding:22px 18px}.cta-copy h3{font-size:22px}.compare-col{padding:20px 16px}.col-header h3{font-size:21px}.col-card{padding:13px 14px}.demo-section{background:#f0f4fd;border-top:1px solid #dbe2f6;border-bottom:1px solid #dbe2f6;padding:94px 0}
.faq-section-wrap{background:#f0f4fd;border-top:1px solid #dbe2f6;border-bottom:1px solid #dbe2f6;padding:94px 0}
.speakers-section{padding:56px 0}.speakers-copy h2{font-size:33px}.speakers-lead{font-size:15px}.speaker-feat{padding:12px 14px}.sw-body{padding:14px 15px;gap:11px}.sw-text{font-size:12.5px}.sw-footer{flex-direction:column;align-items:flex-start;gap:8px}.support-section{padding:48px 0}.author-card{flex-direction:column;align-items:center;gap:18px}.author-portrait{width:160px;height:210px}.author-bio{width:100%;text-align:left}.author-bio-header{text-align:center}.author-gh-btn{margin-top:4px}.donation-presets{grid-template-columns:repeat(2,1fr)}.donation-values{flex-wrap:wrap;gap:6px}.faq-section{grid-template-columns:1fr;gap:30px}.faq-heading h2{margin-top:18px}.faq-heading h2 br{display:none}.faq-heading .eyebrow{font-size:12px}summary{font-size:16px;padding:20px 0}details p{font-size:16px;padding-right:16px}.footer-top{flex-wrap:wrap;gap:22px}.footer .brand{font-size:35px;gap:7px}.footer .brand img{width:44px;height:44px}.footer-top p{font-size:14px;margin:0;flex:1}.footer-top .text-link{font-size:14px}.footer-bottom{font-size:12px;gap:15px;padding-top:28px;flex-wrap:wrap}.footer-bottom>span:nth-child(2){display:none}.image-dialog{width:96vw}.dialog-toolbar{padding:9px 12px;font-size:13px;flex-direction:column;align-items:stretch;gap:8px}.dialog-title-wrap{justify-content:space-between}.dialog-hint{display:none}.dialog-toolbar-actions{justify-content:flex-end;gap:8px}.dialog-image-scroll{padding:10px;max-height:calc(94dvh - 90px);display:flex;align-items:center;justify-content:center}.dialog-image-scroll img{max-width:100%;max-height:calc(94dvh - 110px);width:auto;height:auto}.dialog-image-scroll.is-zoomed{display:block;padding:10px}.dialog-image-scroll.is-zoomed img{max-width:none;max-height:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.cta-section{padding:80px 0 94px}
.tech-specs-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 30px;box-shadow:0 18px 45px -10px rgba(9,11,105,.08),0 4px 14px -2px rgba(80,96,236,.04);margin:0}
.specs-header{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #edf0fa;padding-bottom:16px;margin-bottom:20px;flex-wrap:wrap}
.specs-title-wrap{display:flex;flex-direction:column;gap:3px}
.specs-eyebrow{color:#767f9f;font-size:11px;letter-spacing:1px;font-weight:700}
.specs-title-wrap h3{font-size:20px;font-weight:700;color:var(--navy);letter-spacing:-.4px;margin:0}
.specs-badge{font-size:11px;font-weight:700;color:var(--accent);background:#edf2ff;border:1px solid #d4defc;padding:4px 10px;border-radius:5px;letter-spacing:.5px;font-family:monospace,sans-serif}
.specs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 24px}
.spec-col{display:flex;flex-direction:column;gap:8px}
.sc-label{font-size:11.5px;font-weight:700;color:#767f9f;letter-spacing:.4px;text-transform:uppercase}
.sc-tags{display:flex;flex-wrap:wrap;gap:6px}
.fmt-pill{font-size:11.5px;font-weight:700;font-family:monospace;padding:3px 8px;border-radius:4px;background:#f3f5fd;border:1px solid #dbe2f6;color:var(--navy)}
.fmt-pill--accent{background:#eef2ff;border-color:#c9d5fa;color:var(--accent)}
.sc-tags span:not(.fmt-pill){font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:4px;background:#f4f6fc;border:1px solid #d8e0f4;color:#3c446e}
.sc-text{font-size:13.5px;line-height:1.55;color:#4b5478;margin:0}
@media(max-width:900px){.specs-grid{grid-template-columns:repeat(2,1fr);gap:18px}.tech-specs-card{padding:22px 20px}}
@media(max-width:600px){.specs-grid{grid-template-columns:1fr;gap:16px}.specs-header{flex-direction:column;align-items:flex-start;gap:10px}}
.header-actions{display:flex;align-items:center;gap:16px}
.lang-switch{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;font-weight:500;color:#555974;padding:6px 11px;border-radius:8px;border:1px solid #dde2f3;background:#ffffff;line-height:1;transition:border-color .18s ease,box-shadow .18s ease}
.lang-switch:hover{border-color:#bcc6ec}
.lang-btn{color:#727a9c;text-decoration:none;transition:color .18s ease;padding:2px 4px;border-radius:4px;font-weight:500}
.lang-btn:hover{color:var(--accent)}
.lang-btn.is-active{color:var(--navy);font-weight:650;cursor:default}
.lang-divider{color:#ccd4ea;font-size:11px;user-select:none;padding:0 1px}

/* Scalable Dropdown Language Selector */
.lang-selector {
  position: relative;
  display: inline-block;
}
.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(80, 96, 236, 0.22);
  background: #ffffff;
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
  user-select: none;
}
.lang-trigger:hover {
  border-color: var(--accent);
  background: #f8faff;
}
.lang-selector.is-open .lang-trigger,
.lang-trigger[aria-expanded="true"] {
  border-color: var(--accent);
  background: #f4f6fe;
  box-shadow: 0 0 0 3px rgba(80, 96, 236, 0.12);
}
.lang-globe-icon {
  width: 15px;
  height: 15px;
  color: var(--accent);
  flex-shrink: 0;
}
.lang-current {
  letter-spacing: .5px;
  font-weight: 700;
}
.lang-chevron {
  width: 12px;
  height: 12px;
  color: #626e99;
  transition: transform .2s ease, color .2s ease;
  flex-shrink: 0;
}
.lang-selector.is-open .lang-chevron,
.lang-trigger[aria-expanded="true"] .lang-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 520px;
  max-width: calc(100vw - 32px);
  background: #ffffff;
  border: 1px solid rgba(80, 96, 236, 0.18);
  border-radius: 14px;
  box-shadow: 0 20px 48px -8px rgba(9, 11, 105, 0.2), 0 6px 16px rgba(9, 11, 105, 0.06);
  padding: 8px;
  z-index: 120;
  display: none;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lang-selector.is-open .lang-menu {
  display: block;
  animation: langMenuIn .16s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes langMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.lang-menu::-webkit-scrollbar {
  width: 5px;
}
.lang-menu::-webkit-scrollbar-thumb {
  background: #d5dcf5;
  border-radius: 4px;
}
.lang-menu-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px 6px;
}
.lang-menu-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 12.5px;
  color: #3b4266;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap;
}
.lang-menu-item:hover {
  background: #f0f3fe;
  color: var(--accent);
}
.lang-menu-item.is-active {
  background: #eef2fd;
  color: var(--navy);
  font-weight: 700;
  cursor: default;
}
.lmi-name {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lmi-code {
  font-size: 10px;
  font-weight: 700;
  font-family: monospace;
  padding: 1px 4px;
  border-radius: 3px;
  background: #eef2fd;
  color: #556094;
}
.lang-menu-item.is-active .lmi-code {
  background: var(--navy);
  color: #ffffff;
}
.lmi-check {
  color: var(--accent);
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  margin-left: -2px;
}

@media (max-width: 768px) and (min-width: 501px) {
  .lang-menu {
    width: 360px;
  }
  .lang-menu-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile Nav Drawer Language Grid */
.mobile-lang-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.mobile-lang-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #a7b5ff;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.mobile-lang-title svg {
  color: #8c9bf8;
}
.mobile-lang-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}
.mobile-lang-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(144, 160, 255, 0.2);
  color: #d6deff;
  font-size: 11.5px;
  font-weight: 500;
  text-decoration: none;
  transition: all .15s ease;
  white-space: nowrap;
}
.mobile-lang-chip:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(167, 181, 255, 0.45);
  color: #ffffff;
}
.mobile-lang-chip.is-active {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--navy);
  font-weight: 700;
}
.chip-name {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip-code {
  font-size: 9.5px;
  font-weight: 700;
  font-family: monospace;
  opacity: .7;
}
.mobile-lang-chip.is-active .chip-code {
  opacity: 1;
}

/* ==========================================================================
   Language Selector Country Flags (Vector SVG Data URIs)
   ========================================================================== */
.lmi-flag, .chip-flag, .lang-trigger-flag {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block;
}
.chip-flag {
  width: 16px;
  height: 12px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.lang-flag-en { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Cpath%20fill='%23b22234'%20d='M0%200h640v480H0z'%2F%3E%3Cpath%20stroke='%23fff'%20stroke-width='37'%20d='M0%2055.4h640M0%20129.2h640M0%20203.1h640M0%20277h640M0%20350.8h640M0%20424.6h640'%2F%3E%3Crect%20width='256'%20height='258.5'%20fill='%233c3b6e'%2F%3E%3Cg%20fill='%23fff'%3E%3Ccircle%20cx='40'%20cy='35'%20r='10'%2F%3E%3Ccircle%20cx='90'%20cy='35'%20r='10'%2F%3E%3Ccircle%20cx='140'%20cy='35'%20r='10'%2F%3E%3Ccircle%20cx='190'%20cy='35'%20r='10'%2F%3E%3Ccircle%20cx='65'%20cy='70'%20r='10'%2F%3E%3Ccircle%20cx='115'%20cy='70'%20r='10'%2F%3E%3Ccircle%20cx='165'%20cy='70'%20r='10'%2F%3E%3Ccircle%20cx='215'%20cy='70'%20r='10'%2F%3E%3Ccircle%20cx='40'%20cy='105'%20r='10'%2F%3E%3Ccircle%20cx='90'%20cy='105'%20r='10'%2F%3E%3Ccircle%20cx='140'%20cy='105'%20r='10'%2F%3E%3Ccircle%20cx='190'%20cy='105'%20r='10'%2F%3E%3Ccircle%20cx='65'%20cy='140'%20r='10'%2F%3E%3Ccircle%20cx='115'%20cy='140'%20r='10'%2F%3E%3Ccircle%20cx='165'%20cy='140'%20r='10'%2F%3E%3Ccircle%20cx='215'%20cy='140'%20r='10'%2F%3E%3Ccircle%20cx='40'%20cy='175'%20r='10'%2F%3E%3Ccircle%20cx='90'%20cy='175'%20r='10'%2F%3E%3Ccircle%20cx='140'%20cy='175'%20r='10'%2F%3E%3Ccircle%20cx='190'%20cy='175'%20r='10'%2F%3E%3Ccircle%20cx='65'%20cy='210'%20r='10'%2F%3E%3Ccircle%20cx='115'%20cy='210'%20r='10'%2F%3E%3Ccircle%20cx='165'%20cy='210'%20r='10'%2F%3E%3Ccircle%20cx='215'%20cy='210'%20r='10'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.lang-flag-ru { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='160'%20fill='%23fff'%2F%3E%3Crect%20y='160'%20width='640'%20height='160'%20fill='%230039a6'%2F%3E%3Crect%20y='320'%20width='640'%20height='160'%20fill='%23d52b1e'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-es { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='120'%20fill='%23c60b1e'%2F%3E%3Crect%20y='120'%20width='640'%20height='240'%20fill='%23ffc400'%2F%3E%3Crect%20y='360'%20width='640'%20height='120'%20fill='%23c60b1e'%2F%3E%3Cpath%20d='M140%20180h50v60a25%2025%200%200%201-50%200z'%20fill='%23c60b1e'%2F%3E%3Ccircle%20cx='165'%20cy='165'%20r='12'%20fill='%23c60b1e'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-de { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='160'%20fill='%23000'%2F%3E%3Crect%20y='160'%20width='640'%20height='160'%20fill='%23dd0000'%2F%3E%3Crect%20y='320'%20width='640'%20height='160'%20fill='%23ffce00'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-pt { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='256'%20height='480'%20fill='%23046a38'%2F%3E%3Crect%20x='256'%20width='384'%20height='480'%20fill='%23da291c'%2F%3E%3Ccircle%20cx='256'%20cy='240'%20r='76'%20fill='%23ffc400'%2F%3E%3Ccircle%20cx='256'%20cy='240'%20r='50'%20fill='%23fff'%2F%3E%3Cpath%20d='M236%20216h40v48a20%2020%200%200%201-40%200z'%20fill='%23002654'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-fr { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='213.3'%20height='480'%20fill='%23002654'%2F%3E%3Crect%20x='213.3'%20width='213.3'%20height='480'%20fill='%23fff'%2F%3E%3Crect%20x='426.6'%20width='213.4'%20height='480'%20fill='%23ed2939'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-ja { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='480'%20fill='%23fff'%2F%3E%3Ccircle%20cx='320'%20cy='240'%20r='144'%20fill='%23bc002d'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-it { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='213.3'%20height='480'%20fill='%23009246'%2F%3E%3Crect%20x='213.3'%20width='213.3'%20height='480'%20fill='%23fff'%2F%3E%3Crect%20x='426.6'%20width='213.4'%20height='480'%20fill='%23ce2b37'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-pl { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='240'%20fill='%23fff'%2F%3E%3Crect%20y='240'%20width='640'%20height='240'%20fill='%23dc143c'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-ko { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='480'%20fill='%23fff'%2F%3E%3Cpath%20d='M320%20144a96%2096%200%200%201%200%20192%2096%2096%200%200%201%200-192z'%20fill='%230047a0'%2F%3E%3Cpath%20d='M320%20144a96%2096%200%200%201%200%20192%2048%2048%200%200%201%200-96%2048%2048%200%200%200%200-96z'%20fill='%23cd2e3a'%2F%3E%3Cg%20fill='%23000'%3E%3Crect%20x='140'%20y='140'%20width='50'%20height='10'%20transform='rotate(35%20165%20145)'%2F%3E%3Crect%20x='140'%20y='160'%20width='50'%20height='10'%20transform='rotate(35%20165%20165)'%2F%3E%3Crect%20x='450'%20y='140'%20width='50'%20height='10'%20transform='rotate(-35%20475%20145)'%2F%3E%3Crect%20x='450'%20y='160'%20width='50'%20height='10'%20transform='rotate(-35%20475%20165)'%2F%3E%3Crect%20x='140'%20y='310'%20width='50'%20height='10'%20transform='rotate(-35%20165%20315)'%2F%3E%3Crect%20x='140'%20y='330'%20width='50'%20height='10'%20transform='rotate(-35%20165%20335)'%2F%3E%3Crect%20x='450'%20y='310'%20width='50'%20height='10'%20transform='rotate(35%20475%20315)'%2F%3E%3Crect%20x='450'%20y='330'%20width='50'%20height='10'%20transform='rotate(35%20475%20335)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.lang-flag-tr { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='480'%20fill='%23e30a17'%2F%3E%3Ccircle%20cx='280'%20cy='240'%20r='120'%20fill='%23fff'%2F%3E%3Ccircle%20cx='310'%20cy='240'%20r='96'%20fill='%23e30a17'%2F%3E%3Cpolygon%20points='360%2C240%20420%2C220%20380%2C265%20380%2C215%20420%2C260'%20fill='%23fff'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-zh { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='480'%20fill='%23de2910'%2F%3E%3Cpolygon%20points='120%2C60%20135%2C110%20185%2C110%20145%2C140%20160%2C190%20120%2C160%2080%2C190%2095%2C140%2055%2C110%20105%2C110'%20fill='%23ffde00'%2F%3E%3Cpolygon%20points='210%2C60%20216%2C75%20230%2C75%20220%2C84%20224%2C98%20212%2C89%20201%2C98%20205%2C84%20194%2C75%20208%2C75'%20fill='%23ffde00'%2F%3E%3Cpolygon%20points='250%2C105%20256%2C120%20270%2C120%20260%2C129%20264%2C143%20252%2C134%20241%2C143%20245%2C129%20234%2C120%20248%2C120'%20fill='%23ffde00'%2F%3E%3Cpolygon%20points='250%2C170%20256%2C185%20270%2C185%20260%2C194%20264%2C208%20252%2C199%20241%2C208%20245%2C194%20234%2C185%20248%2C185'%20fill='%23ffde00'%2F%3E%3Cpolygon%20points='210%2C215%20216%2C230%20230%2C230%20220%2C239%20224%2C253%20212%2C244%20201%2C253%20205%2C239%20194%2C230%20208%2C230'%20fill='%23ffde00'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-nl { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='160'%20fill='%23ae1c28'%2F%3E%3Crect%20y='160'%20width='640'%20height='160'%20fill='%23fff'%2F%3E%3Crect%20y='320'%20width='640'%20height='160'%20fill='%2321468b'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-hi { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='160'%20fill='%23ff9933'%2F%3E%3Crect%20y='160'%20width='640'%20height='160'%20fill='%23fff'%2F%3E%3Crect%20y='320'%20width='640'%20height='160'%20fill='%23138808'%2F%3E%3Ccircle%20cx='320'%20cy='240'%20r='48'%20fill='none'%20stroke='%23000080'%20stroke-width='8'%2F%3E%3Ccircle%20cx='320'%20cy='240'%20r='10'%20fill='%23000080'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-ar { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='160'%20fill='%2300732f'%2F%3E%3Crect%20y='160'%20width='640'%20height='160'%20fill='%23fff'%2F%3E%3Crect%20y='320'%20width='640'%20height='160'%20fill='%23000'%2F%3E%3Crect%20width='180'%20height='480'%20fill='%23ff0000'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-id { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='240'%20fill='%23ff0000'%2F%3E%3Crect%20y='240'%20width='640'%20height='240'%20fill='%23fff'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-vi { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='480'%20fill='%23da251d'%2F%3E%3Cpolygon%20points='320%2C120%20357%2C235%20478%2C235%20380%2C306%20418%2C421%20320%2C350%20222%2C421%20260%2C306%20162%2C235%20283%2C235'%20fill='%23ffff00'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-sv { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='480'%20fill='%23006aa7'%2F%3E%3Crect%20x='180'%20width='80'%20height='480'%20fill='%23fecc00'%2F%3E%3Crect%20y='200'%20width='640'%20height='80'%20fill='%23fecc00'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-cs { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='240'%20fill='%23fff'%2F%3E%3Crect%20y='240'%20width='640'%20height='240'%20fill='%23d7141a'%2F%3E%3Cpolygon%20points='0%2C0%20320%2C240%200%2C480'%20fill='%2311457e'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-ro { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='213.3'%20height='480'%20fill='%23002b7f'%2F%3E%3Crect%20x='213.3'%20width='213.3'%20height='480'%20fill='%23fcd116'%2F%3E%3Crect%20x='426.6'%20width='213.4'%20height='480'%20fill='%23ce1126'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-th { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='80'%20fill='%23a51931'%2F%3E%3Crect%20y='80'%20width='640'%20height='80'%20fill='%23f4f5f8'%2F%3E%3Crect%20y='160'%20width='640'%20height='160'%20fill='%232d2a4a'%2F%3E%3Crect%20y='320'%20width='640'%20height='80'%20fill='%23f4f5f8'%2F%3E%3Crect%20y='400'%20width='640'%20height='80'%20fill='%23a51931'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-fi { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='480'%20fill='%23fff'%2F%3E%3Crect%20x='170'%20width='100'%20height='480'%20fill='%23002f6c'%2F%3E%3Crect%20y='190'%20width='640'%20height='100'%20fill='%23002f6c'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-no { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='480'%20fill='%23ba0c2f'%2F%3E%3Crect%20x='160'%20width='120'%20height='480'%20fill='%23fff'%2F%3E%3Crect%20y='180'%20width='640'%20height='120'%20fill='%23fff'%2F%3E%3Crect%20x='190'%20width='60'%20height='480'%20fill='%2300205b'%2F%3E%3Crect%20y='210'%20width='640'%20height='60'%20fill='%2300205b'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-da { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='480'%20fill='%23c8102e'%2F%3E%3Crect%20x='190'%20width='70'%20height='480'%20fill='%23fff'%2F%3E%3Crect%20y='205'%20width='640'%20height='70'%20fill='%23fff'%2F%3E%3C%2Fsvg%3E"); }

/* ==========================================================================
   Language Selector Country Flags (Vector SVG Data URIs)
   ========================================================================== */
.lmi-flag, .chip-flag {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block;
}
.chip-flag {
  width: 16px;
  height: 12px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.lang-flag-en { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Cpath%20fill='%23b22234'%20d='M0%200h640v480H0z'%2F%3E%3Cpath%20stroke='%23fff'%20stroke-width='37'%20d='M0%2055.4h640M0%20129.2h640M0%20203.1h640M0%20277h640M0%20350.8h640M0%20424.6h640'%2F%3E%3Crect%20width='256'%20height='258.5'%20fill='%233c3b6e'%2F%3E%3Cg%20fill='%23fff'%3E%3Ccircle%20cx='40'%20cy='35'%20r='10'%2F%3E%3Ccircle%20cx='90'%20cy='35'%20r='10'%2F%3E%3Ccircle%20cx='140'%20cy='35'%20r='10'%2F%3E%3Ccircle%20cx='190'%20cy='35'%20r='10'%2F%3E%3Ccircle%20cx='65'%20cy='70'%20r='10'%2F%3E%3Ccircle%20cx='115'%20cy='70'%20r='10'%2F%3E%3Ccircle%20cx='165'%20cy='70'%20r='10'%2F%3E%3Ccircle%20cx='215'%20cy='70'%20r='10'%2F%3E%3Ccircle%20cx='40'%20cy='105'%20r='10'%2F%3E%3Ccircle%20cx='90'%20cy='105'%20r='10'%2F%3E%3Ccircle%20cx='140'%20cy='105'%20r='10'%2F%3E%3Ccircle%20cx='190'%20cy='105'%20r='10'%2F%3E%3Ccircle%20cx='65'%20cy='140'%20r='10'%2F%3E%3Ccircle%20cx='115'%20cy='140'%20r='10'%2F%3E%3Ccircle%20cx='165'%20cy='140'%20r='10'%2F%3E%3Ccircle%20cx='215'%20cy='140'%20r='10'%2F%3E%3Ccircle%20cx='40'%20cy='175'%20r='10'%2F%3E%3Ccircle%20cx='90'%20cy='175'%20r='10'%2F%3E%3Ccircle%20cx='140'%20cy='175'%20r='10'%2F%3E%3Ccircle%20cx='190'%20cy='175'%20r='10'%2F%3E%3Ccircle%20cx='65'%20cy='210'%20r='10'%2F%3E%3Ccircle%20cx='115'%20cy='210'%20r='10'%2F%3E%3Ccircle%20cx='165'%20cy='210'%20r='10'%2F%3E%3Ccircle%20cx='215'%20cy='210'%20r='10'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.lang-flag-ru { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='160'%20fill='%23fff'%2F%3E%3Crect%20y='160'%20width='640'%20height='160'%20fill='%230039a6'%2F%3E%3Crect%20y='320'%20width='640'%20height='160'%20fill='%23d52b1e'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-es { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='120'%20fill='%23c60b1e'%2F%3E%3Crect%20y='120'%20width='640'%20height='240'%20fill='%23ffc400'%2F%3E%3Crect%20y='360'%20width='640'%20height='120'%20fill='%23c60b1e'%2F%3E%3Cpath%20d='M140%20180h50v60a25%2025%200%200%201-50%200z'%20fill='%23c60b1e'%2F%3E%3Ccircle%20cx='165'%20cy='165'%20r='12'%20fill='%23c60b1e'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-de { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='160'%20fill='%23000'%2F%3E%3Crect%20y='160'%20width='640'%20height='160'%20fill='%23dd0000'%2F%3E%3Crect%20y='320'%20width='640'%20height='160'%20fill='%23ffce00'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-pt { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='256'%20height='480'%20fill='%23046a38'%2F%3E%3Crect%20x='256'%20width='384'%20height='480'%20fill='%23da291c'%2F%3E%3Ccircle%20cx='256'%20cy='240'%20r='76'%20fill='%23ffc400'%2F%3E%3Ccircle%20cx='256'%20cy='240'%20r='50'%20fill='%23fff'%2F%3E%3Cpath%20d='M236%20216h40v48a20%2020%200%200%201-40%200z'%20fill='%23002654'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-fr { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='213.3'%20height='480'%20fill='%23002654'%2F%3E%3Crect%20x='213.3'%20width='213.3'%20height='480'%20fill='%23fff'%2F%3E%3Crect%20x='426.6'%20width='213.4'%20height='480'%20fill='%23ed2939'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-ja { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='480'%20fill='%23fff'%2F%3E%3Ccircle%20cx='320'%20cy='240'%20r='144'%20fill='%23bc002d'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-it { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='213.3'%20height='480'%20fill='%23009246'%2F%3E%3Crect%20x='213.3'%20width='213.3'%20height='480'%20fill='%23fff'%2F%3E%3Crect%20x='426.6'%20width='213.4'%20height='480'%20fill='%23ce2b37'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-pl { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='240'%20fill='%23fff'%2F%3E%3Crect%20y='240'%20width='640'%20height='240'%20fill='%23dc143c'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-ko { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='480'%20fill='%23fff'%2F%3E%3Cpath%20d='M320%20144a96%2096%200%200%201%200%20192%2096%2096%200%200%201%200-192z'%20fill='%230047a0'%2F%3E%3Cpath%20d='M320%20144a96%2096%200%200%201%200%20192%2048%2048%200%200%201%200-96%2048%2048%200%200%200%200-96z'%20fill='%23cd2e3a'%2F%3E%3Cg%20fill='%23000'%3E%3Crect%20x='140'%20y='140'%20width='50'%20height='10'%20transform='rotate(35%20165%20145)'%2F%3E%3Crect%20x='140'%20y='160'%20width='50'%20height='10'%20transform='rotate(35%20165%20165)'%2F%3E%3Crect%20x='450'%20y='140'%20width='50'%20height='10'%20transform='rotate(-35%20475%20145)'%2F%3E%3Crect%20x='450'%20y='160'%20width='50'%20height='10'%20transform='rotate(-35%20475%20165)'%2F%3E%3Crect%20x='140'%20y='310'%20width='50'%20height='10'%20transform='rotate(-35%20165%20315)'%2F%3E%3Crect%20x='140'%20y='330'%20width='50'%20height='10'%20transform='rotate(-35%20165%20335)'%2F%3E%3Crect%20x='450'%20y='310'%20width='50'%20height='10'%20transform='rotate(35%20475%20315)'%2F%3E%3Crect%20x='450'%20y='330'%20width='50'%20height='10'%20transform='rotate(35%20475%20335)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.lang-flag-tr { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='480'%20fill='%23e30a17'%2F%3E%3Ccircle%20cx='280'%20cy='240'%20r='120'%20fill='%23fff'%2F%3E%3Ccircle%20cx='310'%20cy='240'%20r='96'%20fill='%23e30a17'%2F%3E%3Cpolygon%20points='360%2C240%20420%2C220%20380%2C265%20380%2C215%20420%2C260'%20fill='%23fff'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-zh { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='480'%20fill='%23de2910'%2F%3E%3Cpolygon%20points='120%2C60%20135%2C110%20185%2C110%20145%2C140%20160%2C190%20120%2C160%2080%2C190%2095%2C140%2055%2C110%20105%2C110'%20fill='%23ffde00'%2F%3E%3Cpolygon%20points='210%2C60%20216%2C75%20230%2C75%20220%2C84%20224%2C98%20212%2C89%20201%2C98%20205%2C84%20194%2C75%20208%2C75'%20fill='%23ffde00'%2F%3E%3Cpolygon%20points='250%2C105%20256%2C120%20270%2C120%20260%2C129%20264%2C143%20252%2C134%20241%2C143%20245%2C129%20234%2C120%20248%2C120'%20fill='%23ffde00'%2F%3E%3Cpolygon%20points='250%2C170%20256%2C185%20270%2C185%20260%2C194%20264%2C208%20252%2C199%20241%2C208%20245%2C194%20234%2C185%20248%2C185'%20fill='%23ffde00'%2F%3E%3Cpolygon%20points='210%2C215%20216%2C230%20230%2C230%20220%2C239%20224%2C253%20212%2C244%20201%2C253%20205%2C239%20194%2C230%20208%2C230'%20fill='%23ffde00'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-nl { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='160'%20fill='%23ae1c28'%2F%3E%3Crect%20y='160'%20width='640'%20height='160'%20fill='%23fff'%2F%3E%3Crect%20y='320'%20width='640'%20height='160'%20fill='%2321468b'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-hi { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='160'%20fill='%23ff9933'%2F%3E%3Crect%20y='160'%20width='640'%20height='160'%20fill='%23fff'%2F%3E%3Crect%20y='320'%20width='640'%20height='160'%20fill='%23138808'%2F%3E%3Ccircle%20cx='320'%20cy='240'%20r='48'%20fill='none'%20stroke='%23000080'%20stroke-width='8'%2F%3E%3Ccircle%20cx='320'%20cy='240'%20r='10'%20fill='%23000080'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-ar { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='160'%20fill='%2300732f'%2F%3E%3Crect%20y='160'%20width='640'%20height='160'%20fill='%23fff'%2F%3E%3Crect%20y='320'%20width='640'%20height='160'%20fill='%23000'%2F%3E%3Crect%20width='180'%20height='480'%20fill='%23ff0000'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-id { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='240'%20fill='%23ff0000'%2F%3E%3Crect%20y='240'%20width='640'%20height='240'%20fill='%23fff'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-vi { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='480'%20fill='%23da251d'%2F%3E%3Cpolygon%20points='320%2C120%20357%2C235%20478%2C235%20380%2C306%20418%2C421%20320%2C350%20222%2C421%20260%2C306%20162%2C235%20283%2C235'%20fill='%23ffff00'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-sv { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='480'%20fill='%23006aa7'%2F%3E%3Crect%20x='180'%20width='80'%20height='480'%20fill='%23fecc00'%2F%3E%3Crect%20y='200'%20width='640'%20height='80'%20fill='%23fecc00'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-cs { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='240'%20fill='%23fff'%2F%3E%3Crect%20y='240'%20width='640'%20height='240'%20fill='%23d7141a'%2F%3E%3Cpolygon%20points='0%2C0%20320%2C240%200%2C480'%20fill='%2311457e'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-ro { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='213.3'%20height='480'%20fill='%23002b7f'%2F%3E%3Crect%20x='213.3'%20width='213.3'%20height='480'%20fill='%23fcd116'%2F%3E%3Crect%20x='426.6'%20width='213.4'%20height='480'%20fill='%23ce1126'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-th { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='80'%20fill='%23a51931'%2F%3E%3Crect%20y='80'%20width='640'%20height='80'%20fill='%23f4f5f8'%2F%3E%3Crect%20y='160'%20width='640'%20height='160'%20fill='%232d2a4a'%2F%3E%3Crect%20y='320'%20width='640'%20height='80'%20fill='%23f4f5f8'%2F%3E%3Crect%20y='400'%20width='640'%20height='80'%20fill='%23a51931'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-fi { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='480'%20fill='%23fff'%2F%3E%3Crect%20x='170'%20width='100'%20height='480'%20fill='%23002f6c'%2F%3E%3Crect%20y='190'%20width='640'%20height='100'%20fill='%23002f6c'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-no { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='480'%20fill='%23ba0c2f'%2F%3E%3Crect%20x='160'%20width='120'%20height='480'%20fill='%23fff'%2F%3E%3Crect%20y='180'%20width='640'%20height='120'%20fill='%23fff'%2F%3E%3Crect%20x='190'%20width='60'%20height='480'%20fill='%2300205b'%2F%3E%3Crect%20y='210'%20width='640'%20height='60'%20fill='%2300205b'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-da { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='480'%20fill='%23c8102e'%2F%3E%3Crect%20x='190'%20width='70'%20height='480'%20fill='%23fff'%2F%3E%3Crect%20y='205'%20width='640'%20height='70'%20fill='%23fff'%2F%3E%3C%2Fsvg%3E"); }

/* ==========================================================================
   Language Selector Country Flags (Vector SVG Data URIs)
   ========================================================================== */
.lmi-flag, .chip-flag {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block;
}
.chip-flag {
  width: 16px;
  height: 12px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.lang-flag-en { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Cpath%20fill='%23b22234'%20d='M0%200h640v480H0z'%2F%3E%3Cpath%20stroke='%23fff'%20stroke-width='37'%20d='M0%2055.4h640M0%20129.2h640M0%20203.1h640M0%20277h640M0%20350.8h640M0%20424.6h640'%2F%3E%3Crect%20width='256'%20height='258.5'%20fill='%233c3b6e'%2F%3E%3Cg%20fill='%23fff'%3E%3Ccircle%20cx='40'%20cy='35'%20r='10'%2F%3E%3Ccircle%20cx='90'%20cy='35'%20r='10'%2F%3E%3Ccircle%20cx='140'%20cy='35'%20r='10'%2F%3E%3Ccircle%20cx='190'%20cy='35'%20r='10'%2F%3E%3Ccircle%20cx='65'%20cy='70'%20r='10'%2F%3E%3Ccircle%20cx='115'%20cy='70'%20r='10'%2F%3E%3Ccircle%20cx='165'%20cy='70'%20r='10'%2F%3E%3Ccircle%20cx='215'%20cy='70'%20r='10'%2F%3E%3Ccircle%20cx='40'%20cy='105'%20r='10'%2F%3E%3Ccircle%20cx='90'%20cy='105'%20r='10'%2F%3E%3Ccircle%20cx='140'%20cy='105'%20r='10'%2F%3E%3Ccircle%20cx='190'%20cy='105'%20r='10'%2F%3E%3Ccircle%20cx='65'%20cy='140'%20r='10'%2F%3E%3Ccircle%20cx='115'%20cy='140'%20r='10'%2F%3E%3Ccircle%20cx='165'%20cy='140'%20r='10'%2F%3E%3Ccircle%20cx='215'%20cy='140'%20r='10'%2F%3E%3Ccircle%20cx='40'%20cy='175'%20r='10'%2F%3E%3Ccircle%20cx='90'%20cy='175'%20r='10'%2F%3E%3Ccircle%20cx='140'%20cy='175'%20r='10'%2F%3E%3Ccircle%20cx='190'%20cy='175'%20r='10'%2F%3E%3Ccircle%20cx='65'%20cy='210'%20r='10'%2F%3E%3Ccircle%20cx='115'%20cy='210'%20r='10'%2F%3E%3Ccircle%20cx='165'%20cy='210'%20r='10'%2F%3E%3Ccircle%20cx='215'%20cy='210'%20r='10'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.lang-flag-ru { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='160'%20fill='%23fff'%2F%3E%3Crect%20y='160'%20width='640'%20height='160'%20fill='%230039a6'%2F%3E%3Crect%20y='320'%20width='640'%20height='160'%20fill='%23d52b1e'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-es { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='120'%20fill='%23c60b1e'%2F%3E%3Crect%20y='120'%20width='640'%20height='240'%20fill='%23ffc400'%2F%3E%3Crect%20y='360'%20width='640'%20height='120'%20fill='%23c60b1e'%2F%3E%3Cpath%20d='M140%20180h50v60a25%2025%200%200%201-50%200z'%20fill='%23c60b1e'%2F%3E%3Ccircle%20cx='165'%20cy='165'%20r='12'%20fill='%23c60b1e'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-de { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='160'%20fill='%23000'%2F%3E%3Crect%20y='160'%20width='640'%20height='160'%20fill='%23dd0000'%2F%3E%3Crect%20y='320'%20width='640'%20height='160'%20fill='%23ffce00'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-pt { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='256'%20height='480'%20fill='%23046a38'%2F%3E%3Crect%20x='256'%20width='384'%20height='480'%20fill='%23da291c'%2F%3E%3Ccircle%20cx='256'%20cy='240'%20r='76'%20fill='%23ffc400'%2F%3E%3Ccircle%20cx='256'%20cy='240'%20r='50'%20fill='%23fff'%2F%3E%3Cpath%20d='M236%20216h40v48a20%2020%200%200%201-40%200z'%20fill='%23002654'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-fr { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='213.3'%20height='480'%20fill='%23002654'%2F%3E%3Crect%20x='213.3'%20width='213.3'%20height='480'%20fill='%23fff'%2F%3E%3Crect%20x='426.6'%20width='213.4'%20height='480'%20fill='%23ed2939'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-ja { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='480'%20fill='%23fff'%2F%3E%3Ccircle%20cx='320'%20cy='240'%20r='144'%20fill='%23bc002d'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-it { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='213.3'%20height='480'%20fill='%23009246'%2F%3E%3Crect%20x='213.3'%20width='213.3'%20height='480'%20fill='%23fff'%2F%3E%3Crect%20x='426.6'%20width='213.4'%20height='480'%20fill='%23ce2b37'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-pl { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='240'%20fill='%23fff'%2F%3E%3Crect%20y='240'%20width='640'%20height='240'%20fill='%23dc143c'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-ko { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='480'%20fill='%23fff'%2F%3E%3Cpath%20d='M320%20144a96%2096%200%200%201%200%20192%2096%2096%200%200%201%200-192z'%20fill='%230047a0'%2F%3E%3Cpath%20d='M320%20144a96%2096%200%200%201%200%20192%2048%2048%200%200%201%200-96%2048%2048%200%200%200%200-96z'%20fill='%23cd2e3a'%2F%3E%3Cg%20fill='%23000'%3E%3Crect%20x='140'%20y='140'%20width='50'%20height='10'%20transform='rotate(35%20165%20145)'%2F%3E%3Crect%20x='140'%20y='160'%20width='50'%20height='10'%20transform='rotate(35%20165%20165)'%2F%3E%3Crect%20x='450'%20y='140'%20width='50'%20height='10'%20transform='rotate(-35%20475%20145)'%2F%3E%3Crect%20x='450'%20y='160'%20width='50'%20height='10'%20transform='rotate(-35%20475%20165)'%2F%3E%3Crect%20x='140'%20y='310'%20width='50'%20height='10'%20transform='rotate(-35%20165%20315)'%2F%3E%3Crect%20x='140'%20y='330'%20width='50'%20height='10'%20transform='rotate(-35%20165%20335)'%2F%3E%3Crect%20x='450'%20y='310'%20width='50'%20height='10'%20transform='rotate(35%20475%20315)'%2F%3E%3Crect%20x='450'%20y='330'%20width='50'%20height='10'%20transform='rotate(35%20475%20335)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.lang-flag-tr { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='480'%20fill='%23e30a17'%2F%3E%3Ccircle%20cx='280'%20cy='240'%20r='120'%20fill='%23fff'%2F%3E%3Ccircle%20cx='310'%20cy='240'%20r='96'%20fill='%23e30a17'%2F%3E%3Cpolygon%20points='360%2C240%20420%2C220%20380%2C265%20380%2C215%20420%2C260'%20fill='%23fff'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-zh { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='480'%20fill='%23de2910'%2F%3E%3Cpolygon%20points='120%2C60%20135%2C110%20185%2C110%20145%2C140%20160%2C190%20120%2C160%2080%2C190%2095%2C140%2055%2C110%20105%2C110'%20fill='%23ffde00'%2F%3E%3Cpolygon%20points='210%2C60%20216%2C75%20230%2C75%20220%2C84%20224%2C98%20212%2C89%20201%2C98%20205%2C84%20194%2C75%20208%2C75'%20fill='%23ffde00'%2F%3E%3Cpolygon%20points='250%2C105%20256%2C120%20270%2C120%20260%2C129%20264%2C143%20252%2C134%20241%2C143%20245%2C129%20234%2C120%20248%2C120'%20fill='%23ffde00'%2F%3E%3Cpolygon%20points='250%2C170%20256%2C185%20270%2C185%20260%2C194%20264%2C208%20252%2C199%20241%2C208%20245%2C194%20234%2C185%20248%2C185'%20fill='%23ffde00'%2F%3E%3Cpolygon%20points='210%2C215%20216%2C230%20230%2C230%20220%2C239%20224%2C253%20212%2C244%20201%2C253%20205%2C239%20194%2C230%20208%2C230'%20fill='%23ffde00'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-nl { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='160'%20fill='%23ae1c28'%2F%3E%3Crect%20y='160'%20width='640'%20height='160'%20fill='%23fff'%2F%3E%3Crect%20y='320'%20width='640'%20height='160'%20fill='%2321468b'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-hi { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='160'%20fill='%23ff9933'%2F%3E%3Crect%20y='160'%20width='640'%20height='160'%20fill='%23fff'%2F%3E%3Crect%20y='320'%20width='640'%20height='160'%20fill='%23138808'%2F%3E%3Ccircle%20cx='320'%20cy='240'%20r='48'%20fill='none'%20stroke='%23000080'%20stroke-width='8'%2F%3E%3Ccircle%20cx='320'%20cy='240'%20r='10'%20fill='%23000080'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-ar { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='160'%20fill='%2300732f'%2F%3E%3Crect%20y='160'%20width='640'%20height='160'%20fill='%23fff'%2F%3E%3Crect%20y='320'%20width='640'%20height='160'%20fill='%23000'%2F%3E%3Crect%20width='180'%20height='480'%20fill='%23ff0000'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-id { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='240'%20fill='%23ff0000'%2F%3E%3Crect%20y='240'%20width='640'%20height='240'%20fill='%23fff'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-vi { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='480'%20fill='%23da251d'%2F%3E%3Cpolygon%20points='320%2C120%20357%2C235%20478%2C235%20380%2C306%20418%2C421%20320%2C350%20222%2C421%20260%2C306%20162%2C235%20283%2C235'%20fill='%23ffff00'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-sv { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='480'%20fill='%23006aa7'%2F%3E%3Crect%20x='180'%20width='80'%20height='480'%20fill='%23fecc00'%2F%3E%3Crect%20y='200'%20width='640'%20height='80'%20fill='%23fecc00'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-cs { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='240'%20fill='%23fff'%2F%3E%3Crect%20y='240'%20width='640'%20height='240'%20fill='%23d7141a'%2F%3E%3Cpolygon%20points='0%2C0%20320%2C240%200%2C480'%20fill='%2311457e'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-ro { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='213.3'%20height='480'%20fill='%23002b7f'%2F%3E%3Crect%20x='213.3'%20width='213.3'%20height='480'%20fill='%23fcd116'%2F%3E%3Crect%20x='426.6'%20width='213.4'%20height='480'%20fill='%23ce1126'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-th { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='80'%20fill='%23a51931'%2F%3E%3Crect%20y='80'%20width='640'%20height='80'%20fill='%23f4f5f8'%2F%3E%3Crect%20y='160'%20width='640'%20height='160'%20fill='%232d2a4a'%2F%3E%3Crect%20y='320'%20width='640'%20height='80'%20fill='%23f4f5f8'%2F%3E%3Crect%20y='400'%20width='640'%20height='80'%20fill='%23a51931'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-fi { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='480'%20fill='%23fff'%2F%3E%3Crect%20x='170'%20width='100'%20height='480'%20fill='%23002f6c'%2F%3E%3Crect%20y='190'%20width='640'%20height='100'%20fill='%23002f6c'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-no { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='480'%20fill='%23ba0c2f'%2F%3E%3Crect%20x='160'%20width='120'%20height='480'%20fill='%23fff'%2F%3E%3Crect%20y='180'%20width='640'%20height='120'%20fill='%23fff'%2F%3E%3Crect%20x='190'%20width='60'%20height='480'%20fill='%2300205b'%2F%3E%3Crect%20y='210'%20width='640'%20height='60'%20fill='%2300205b'%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-da { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox='0%200%20640%20480'%3E%3Crect%20width='640'%20height='480'%20fill='%23c8102e'%2F%3E%3Crect%20x='190'%20width='70'%20height='480'%20fill='%23fff'%2F%3E%3Crect%20y='205'%20width='640'%20height='70'%20fill='%23fff'%2F%3E%3C%2Fsvg%3E"); }

/* ==========================================================================
   Language Selector Country Flags (Vector SVG Data URIs)
   ========================================================================== */
.lmi-flag, .chip-flag {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block;
}
.chip-flag {
  width: 16px;
  height: 12px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.lang-flag-en { background-image: url("data:image/svg+xml,%3Csvg%20xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox="0%200%20640%20480"%3E%3Cpath%20fill="%23b22234"%20d="M0%200h640v480H0z"%2F%3E%3Cpath%20stroke="%23fff"%20stroke-width="37"%20d="M0%2055.4h640M0%20129.2h640M0%20203.1h640M0%20277h640M0%20350.8h640M0%20424.6h640"%2F%3E%3Crect%20width="256"%20height="258.5"%20fill="%233c3b6e"%2F%3E%3Cg%20fill="%23fff"%3E%3Ccircle%20cx="40"%20cy="35"%20r="10"%2F%3E%3Ccircle%20cx="90"%20cy="35"%20r="10"%2F%3E%3Ccircle%20cx="140"%20cy="35"%20r="10"%2F%3E%3Ccircle%20cx="190"%20cy="35"%20r="10"%2F%3E%3Ccircle%20cx="65"%20cy="70"%20r="10"%2F%3E%3Ccircle%20cx="115"%20cy="70"%20r="10"%2F%3E%3Ccircle%20cx="165"%20cy="70"%20r="10"%2F%3E%3Ccircle%20cx="215"%20cy="70"%20r="10"%2F%3E%3Ccircle%20cx="40"%20cy="105"%20r="10"%2F%3E%3Ccircle%20cx="90"%20cy="105"%20r="10"%2F%3E%3Ccircle%20cx="140"%20cy="105"%20r="10"%2F%3E%3Ccircle%20cx="190"%20cy="105"%20r="10"%2F%3E%3Ccircle%20cx="65"%20cy="140"%20r="10"%2F%3E%3Ccircle%20cx="115"%20cy="140"%20r="10"%2F%3E%3Ccircle%20cx="165"%20cy="140"%20r="10"%2F%3E%3Ccircle%20cx="215"%20cy="140"%20r="10"%2F%3E%3Ccircle%20cx="40"%20cy="175"%20r="10"%2F%3E%3Ccircle%20cx="90"%20cy="175"%20r="10"%2F%3E%3Ccircle%20cx="140"%20cy="175"%20r="10"%2F%3E%3Ccircle%20cx="190"%20cy="175"%20r="10"%2F%3E%3Ccircle%20cx="65"%20cy="210"%20r="10"%2F%3E%3Ccircle%20cx="115"%20cy="210"%20r="10"%2F%3E%3Ccircle%20cx="165"%20cy="210"%20r="10"%2F%3E%3Ccircle%20cx="215"%20cy="210"%20r="10"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.lang-flag-ru { background-image: url("data:image/svg+xml,%3Csvg%20xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox="0%200%20640%20480"%3E%3Crect%20width="640"%20height="160"%20fill="%23fff"%2F%3E%3Crect%20y="160"%20width="640"%20height="160"%20fill="%230039a6"%2F%3E%3Crect%20y="320"%20width="640"%20height="160"%20fill="%23d52b1e"%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-es { background-image: url("data:image/svg+xml,%3Csvg%20xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox="0%200%20640%20480"%3E%3Crect%20width="640"%20height="120"%20fill="%23c60b1e"%2F%3E%3Crect%20y="120"%20width="640"%20height="240"%20fill="%23ffc400"%2F%3E%3Crect%20y="360"%20width="640"%20height="120"%20fill="%23c60b1e"%2F%3E%3Cpath%20d="M140%20180h50v60a25%2025%200%200%201-50%200z"%20fill="%23c60b1e"%2F%3E%3Ccircle%20cx="165"%20cy="165"%20r="12"%20fill="%23c60b1e"%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-de { background-image: url("data:image/svg+xml,%3Csvg%20xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox="0%200%20640%20480"%3E%3Crect%20width="640"%20height="160"%20fill="%23000"%2F%3E%3Crect%20y="160"%20width="640"%20height="160"%20fill="%23dd0000"%2F%3E%3Crect%20y="320"%20width="640"%20height="160"%20fill="%23ffce00"%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-pt { background-image: url("data:image/svg+xml,%3Csvg%20xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox="0%200%20640%20480"%3E%3Crect%20width="256"%20height="480"%20fill="%23046a38"%2F%3E%3Crect%20x="256"%20width="384"%20height="480"%20fill="%23da291c"%2F%3E%3Ccircle%20cx="256"%20cy="240"%20r="76"%20fill="%23ffc400"%2F%3E%3Ccircle%20cx="256"%20cy="240"%20r="50"%20fill="%23fff"%2F%3E%3Cpath%20d="M236%20216h40v48a20%2020%200%200%201-40%200z"%20fill="%23002654"%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-fr { background-image: url("data:image/svg+xml,%3Csvg%20xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox="0%200%20640%20480"%3E%3Crect%20width="213.3"%20height="480"%20fill="%23002654"%2F%3E%3Crect%20x="213.3"%20width="213.3"%20height="480"%20fill="%23fff"%2F%3E%3Crect%20x="426.6"%20width="213.4"%20height="480"%20fill="%23ed2939"%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-ja { background-image: url("data:image/svg+xml,%3Csvg%20xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox="0%200%20640%20480"%3E%3Crect%20width="640"%20height="480"%20fill="%23fff"%2F%3E%3Ccircle%20cx="320"%20cy="240"%20r="144"%20fill="%23bc002d"%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-it { background-image: url("data:image/svg+xml,%3Csvg%20xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox="0%200%20640%20480"%3E%3Crect%20width="213.3"%20height="480"%20fill="%23009246"%2F%3E%3Crect%20x="213.3"%20width="213.3"%20height="480"%20fill="%23fff"%2F%3E%3Crect%20x="426.6"%20width="213.4"%20height="480"%20fill="%23ce2b37"%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-pl { background-image: url("data:image/svg+xml,%3Csvg%20xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox="0%200%20640%20480"%3E%3Crect%20width="640"%20height="240"%20fill="%23fff"%2F%3E%3Crect%20y="240"%20width="640"%20height="240"%20fill="%23dc143c"%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-ko { background-image: url("data:image/svg+xml,%3Csvg%20xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox="0%200%20640%20480"%3E%3Crect%20width="640"%20height="480"%20fill="%23fff"%2F%3E%3Cpath%20d="M320%20144a96%2096%200%200%201%200%20192%2096%2096%200%200%201%200-192z"%20fill="%230047a0"%2F%3E%3Cpath%20d="M320%20144a96%2096%200%200%201%200%20192%2048%2048%200%200%201%200-96%2048%2048%200%200%200%200-96z"%20fill="%23cd2e3a"%2F%3E%3Cg%20fill="%23000"%3E%3Crect%20x="140"%20y="140"%20width="50"%20height="10"%20transform="rotate(35%20165%20145)"%2F%3E%3Crect%20x="140"%20y="160"%20width="50"%20height="10"%20transform="rotate(35%20165%20165)"%2F%3E%3Crect%20x="450"%20y="140"%20width="50"%20height="10"%20transform="rotate(-35%20475%20145)"%2F%3E%3Crect%20x="450"%20y="160"%20width="50"%20height="10"%20transform="rotate(-35%20475%20165)"%2F%3E%3Crect%20x="140"%20y="310"%20width="50"%20height="10"%20transform="rotate(-35%20165%20315)"%2F%3E%3Crect%20x="140"%20y="330"%20width="50"%20height="10"%20transform="rotate(-35%20165%20335)"%2F%3E%3Crect%20x="450"%20y="310"%20width="50"%20height="10"%20transform="rotate(35%20475%20315)"%2F%3E%3Crect%20x="450"%20y="330"%20width="50"%20height="10"%20transform="rotate(35%20475%20335)"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.lang-flag-tr { background-image: url("data:image/svg+xml,%3Csvg%20xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox="0%200%20640%20480"%3E%3Crect%20width="640"%20height="480"%20fill="%23e30a17"%2F%3E%3Ccircle%20cx="280"%20cy="240"%20r="120"%20fill="%23fff"%2F%3E%3Ccircle%20cx="310"%20cy="240"%20r="96"%20fill="%23e30a17"%2F%3E%3Cpolygon%20points="360%2C240%20420%2C220%20380%2C265%20380%2C215%20420%2C260"%20fill="%23fff"%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-zh { background-image: url("data:image/svg+xml,%3Csvg%20xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox="0%200%20640%20480"%3E%3Crect%20width="640"%20height="480"%20fill="%23de2910"%2F%3E%3Cpolygon%20points="120%2C60%20135%2C110%20185%2C110%20145%2C140%20160%2C190%20120%2C160%2080%2C190%2095%2C140%2055%2C110%20105%2C110"%20fill="%23ffde00"%2F%3E%3Cpolygon%20points="210%2C60%20216%2C75%20230%2C75%20220%2C84%20224%2C98%20212%2C89%20201%2C98%20205%2C84%20194%2C75%20208%2C75"%20fill="%23ffde00"%2F%3E%3Cpolygon%20points="250%2C105%20256%2C120%20270%2C120%20260%2C129%20264%2C143%20252%2C134%20241%2C143%20245%2C129%20234%2C120%20248%2C120"%20fill="%23ffde00"%2F%3E%3Cpolygon%20points="250%2C170%20256%2C185%20270%2C185%20260%2C194%20264%2C208%20252%2C199%20241%2C208%20245%2C194%20234%2C185%20248%2C185"%20fill="%23ffde00"%2F%3E%3Cpolygon%20points="210%2C215%20216%2C230%20230%2C230%20220%2C239%20224%2C253%20212%2C244%20201%2C253%20205%2C239%20194%2C230%20208%2C230"%20fill="%23ffde00"%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-nl { background-image: url("data:image/svg+xml,%3Csvg%20xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox="0%200%20640%20480"%3E%3Crect%20width="640"%20height="160"%20fill="%23ae1c28"%2F%3E%3Crect%20y="160"%20width="640"%20height="160"%20fill="%23fff"%2F%3E%3Crect%20y="320"%20width="640"%20height="160"%20fill="%2321468b"%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-hi { background-image: url("data:image/svg+xml,%3Csvg%20xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox="0%200%20640%20480"%3E%3Crect%20width="640"%20height="160"%20fill="%23ff9933"%2F%3E%3Crect%20y="160"%20width="640"%20height="160"%20fill="%23fff"%2F%3E%3Crect%20y="320"%20width="640"%20height="160"%20fill="%23138808"%2F%3E%3Ccircle%20cx="320"%20cy="240"%20r="48"%20fill="none"%20stroke="%23000080"%20stroke-width="8"%2F%3E%3Ccircle%20cx="320"%20cy="240"%20r="10"%20fill="%23000080"%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-ar { background-image: url("data:image/svg+xml,%3Csvg%20xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox="0%200%20640%20480"%3E%3Crect%20width="640"%20height="160"%20fill="%2300732f"%2F%3E%3Crect%20y="160"%20width="640"%20height="160"%20fill="%23fff"%2F%3E%3Crect%20y="320"%20width="640"%20height="160"%20fill="%23000"%2F%3E%3Crect%20width="180"%20height="480"%20fill="%23ff0000"%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-id { background-image: url("data:image/svg+xml,%3Csvg%20xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox="0%200%20640%20480"%3E%3Crect%20width="640"%20height="240"%20fill="%23ff0000"%2F%3E%3Crect%20y="240"%20width="640"%20height="240"%20fill="%23fff"%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-vi { background-image: url("data:image/svg+xml,%3Csvg%20xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox="0%200%20640%20480"%3E%3Crect%20width="640"%20height="480"%20fill="%23da251d"%2F%3E%3Cpolygon%20points="320%2C120%20357%2C235%20478%2C235%20380%2C306%20418%2C421%20320%2C350%20222%2C421%20260%2C306%20162%2C235%20283%2C235"%20fill="%23ffff00"%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-sv { background-image: url("data:image/svg+xml,%3Csvg%20xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox="0%200%20640%20480"%3E%3Crect%20width="640"%20height="480"%20fill="%23006aa7"%2F%3E%3Crect%20x="180"%20width="80"%20height="480"%20fill="%23fecc00"%2F%3E%3Crect%20y="200"%20width="640"%20height="80"%20fill="%23fecc00"%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-cs { background-image: url("data:image/svg+xml,%3Csvg%20xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox="0%200%20640%20480"%3E%3Crect%20width="640"%20height="240"%20fill="%23fff"%2F%3E%3Crect%20y="240"%20width="640"%20height="240"%20fill="%23d7141a"%2F%3E%3Cpolygon%20points="0%2C0%20320%2C240%200%2C480"%20fill="%2311457e"%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-ro { background-image: url("data:image/svg+xml,%3Csvg%20xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox="0%200%20640%20480"%3E%3Crect%20width="213.3"%20height="480"%20fill="%23002b7f"%2F%3E%3Crect%20x="213.3"%20width="213.3"%20height="480"%20fill="%23fcd116"%2F%3E%3Crect%20x="426.6"%20width="213.4"%20height="480"%20fill="%23ce1126"%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-th { background-image: url("data:image/svg+xml,%3Csvg%20xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox="0%200%20640%20480"%3E%3Crect%20width="640"%20height="80"%20fill="%23a51931"%2F%3E%3Crect%20y="80"%20width="640"%20height="80"%20fill="%23f4f5f8"%2F%3E%3Crect%20y="160"%20width="640"%20height="160"%20fill="%232d2a4a"%2F%3E%3Crect%20y="320"%20width="640"%20height="80"%20fill="%23f4f5f8"%2F%3E%3Crect%20y="400"%20width="640"%20height="80"%20fill="%23a51931"%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-fi { background-image: url("data:image/svg+xml,%3Csvg%20xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox="0%200%20640%20480"%3E%3Crect%20width="640"%20height="480"%20fill="%23fff"%2F%3E%3Crect%20x="170"%20width="100"%20height="480"%20fill="%23002f6c"%2F%3E%3Crect%20y="190"%20width="640"%20height="100"%20fill="%23002f6c"%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-no { background-image: url("data:image/svg+xml,%3Csvg%20xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox="0%200%20640%20480"%3E%3Crect%20width="640"%20height="480"%20fill="%23ba0c2f"%2F%3E%3Crect%20x="160"%20width="120"%20height="480"%20fill="%23fff"%2F%3E%3Crect%20y="180"%20width="640"%20height="120"%20fill="%23fff"%2F%3E%3Crect%20x="190"%20width="60"%20height="480"%20fill="%2300205b"%2F%3E%3Crect%20y="210"%20width="640"%20height="60"%20fill="%2300205b"%2F%3E%3C%2Fsvg%3E"); }
.lang-flag-da { background-image: url("data:image/svg+xml,%3Csvg%20xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox="0%200%20640%20480"%3E%3Crect%20width="640"%20height="480"%20fill="%23c8102e"%2F%3E%3Crect%20x="190"%20width="70"%20height="480"%20fill="%23fff"%2F%3E%3Crect%20y="205"%20width="640"%20height="70"%20fill="%23fff"%2F%3E%3C%2Fsvg%3E"); }

/* ==========================================================================
   New Landing Architecture & Section Styles (Option A)
   ========================================================================== */

/* Sticky Site Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 248, 253, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.site-header .header {
  height: 84px;
  border-bottom: none;
}
.brand-dot {
  color: var(--accent);
}
.mark-dark {
  color: var(--ink);
}
.compare-cta .brand-dot,
.control-section .brand-dot {
  color: #9aa7ff;
}
.site-header .header nav {
  display: flex;
  gap: clamp(14px, 1.8vw, 24px);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.site-header .header nav a {
  transition: color .18s ease;
}
.site-header .header nav a:hover {
  color: var(--accent);
}
.header-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 4px 12px rgba(9, 11, 105, 0.12);
  transition: background .18s, box-shadow .18s, transform .15s;
}
.header-download:hover {
  background: var(--accent);
  box-shadow: 0 6px 20px rgba(80, 96, 236, 0.28);
  transform: translateY(-1px);
  color: #fff;
}
.header-download svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

/* Hero refinements */
.hero {
  grid-template-columns: 1.08fr 0.92fr !important;
  gap: 42px !important;
  min-height: 590px !important;
}
.hero-copy {
  min-width: 0;
}
.hero-detail {
  max-width: 540px !important;
}
.hero-actions {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 28px !important;
  flex-wrap: nowrap !important;
}
.hero-stage {
  width: 100%;
}
.hero-screen {
  width: 100% !important;
}
.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}
.eyebrow-divider {
  color: #b6bad2;
  padding-inline: 2px;
}
.button-quiet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  border: 1px solid #c8d0ee;
  border-radius: 8px;
  background: #fff;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .2s ease;
}
.button-quiet:hover {
  background: var(--pale);
  border-color: var(--accent);
  color: var(--accent);
}
.hero-download {
  border-radius: 8px;
  padding: 15px 22px;
  gap: 10px;
  font-size: 14.5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.hero-download svg {
  flex-shrink: 0;
}

/* Section 01: Scenarios (JTBD) — Linear / Apple Polish */
.scenario-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.scenario-card {
  background: #ffffff;
  border: 1px solid rgba(80, 96, 236, 0.18);
  border-radius: 16px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  position: relative;
  text-decoration: none;
  color: inherit;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 10px 26px -10px rgba(9, 11, 105, 0.05);
  transition: 
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
    box-shadow 0.22s ease, 
    border-color 0.22s ease;
  cursor: pointer;
}
.scenario-card:hover {
  transform: translateY(-4px);
  border-color: #6e7df3;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 20px 45px -12px rgba(9, 11, 105, 0.14),
    0 8px 24px -4px rgba(80, 96, 236, 0.16);
}
.scenario-card .icon-tile {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: linear-gradient(180deg, #f0f3fe 0%, #e6ebfd 100%);
  border: 1px solid #d7e0fc;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(80, 96, 236, 0.08);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.scenario-card:hover .icon-tile {
  transform: scale(1.06);
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 6px 16px rgba(80, 96, 236, 0.28);
}
.scenario-card .icon-tile svg {
  width: 22px;
  height: 22px;
}
.card-index {
  position: absolute;
  right: 20px;
  top: 24px;
  font-family: 'JetBrains Mono', monospace, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--accent);
  background: #eef2fe;
  border: 1px solid #d4defc;
  padding: 3px 9px;
  border-radius: 20px;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.scenario-card:hover .card-index {
  background: var(--navy);
  color: #ffffff;
  border-color: var(--navy);
}
.scenario-card h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.2px;
  margin-top: 20px;
  margin-bottom: 10px;
  color: var(--navy);
}
.scenario-card p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 22px;
  flex-grow: 1;
}
.card-link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  transition: color 0.18s ease;
}
.card-link svg {
  transition: transform 0.2s ease;
  color: var(--accent);
}
.scenario-card:hover .card-link {
  color: var(--accent);
}
.scenario-card:hover .card-link svg {
  transform: translateX(4px);
}

/* Section: Editor */
.editor-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 36px;
  align-items: start;
}
.editor-visual {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.editor-screen-btn {
  position: relative;
  border: 1px solid #cad4f3;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  padding: 8px;
  box-shadow: 0 18px 45px -10px rgba(9,11,105,.12);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  text-align: left;
  display: block;
  width: 100%;
}
.editor-screen-btn:hover {
  border-color: #6577f3;
  transform: translateY(-3px);
  box-shadow: 0 24px 55px -12px rgba(9,11,105,.18);
}
.editor-screen-btn img {
  border-radius: 6px;
  display: block;
  width: 100%;
  height: auto;
}
.editor-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feature-row {
  display: flex;
  gap: 15px;
  padding: 16px 18px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
  transition: border-color .2s, box-shadow .2s;
}
.feature-row:hover {
  border-color: #b5c3f3;
  box-shadow: 0 6px 18px -4px rgba(9,11,105,.06);
}
.feature-row svg {
  color: var(--accent);
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}
.feature-row h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 4px;
}
.feature-row p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
}
.range-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 36px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 28px 32px;
  align-items: center;
  box-shadow: 0 10px 30px -10px rgba(9, 11, 105, 0.06);
}
.range-copy .mini-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--accent);
}
.range-copy h3 {
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
  margin: 8px 0;
}
.range-copy p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
}
.range-visual-box {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #f7f8fd;
  cursor: pointer;
  display: block;
  text-align: left;
  padding: 0;
  transition: border-color .2s;
}
.range-visual-box:hover {
  border-color: var(--accent);
}
.range-image-crop {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2.3;
}
.range-image-crop img {
  width: 320%;
  max-width: none;
  margin-left: -78%;
  margin-top: -47%;
}
.range-visual-note {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 9px 12px;
  color: var(--navy);
  background: #f4f6fc;
  border-top: 1px solid var(--line);
}

/* Section: Meeting */
.split-layout {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 54px;
  align-items: center;
}
.split-copy {
  display: flex;
  flex-direction: column;
}
.split-copy h2 {
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.2;
  letter-spacing: -.03em;
  margin-top: 14px;
  margin-bottom: 24px;
}
.split-copy .section-intro {
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 16px;
}
.split-copy .section-detail {
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 20px;
}
.fine-print {
  font-size: 12px;
  color: #79809f;
  line-height: 1.65;
  border-left: 2px solid #c5ccf2;
  padding-left: 12px;
  margin-top: 14px;
}

/* Section: Speakers (Dialogue Demo) */
.dialogue-stage {
  position: relative;
  width: 100%;
}
.dialogue-glow {
  position: absolute;
  inset: -16px -18px;
  background: radial-gradient(ellipse at 30% 25%, rgba(80, 96, 236, 0.28) 0%, rgba(139, 92, 246, 0.16) 45%, transparent 72%),
              radial-gradient(ellipse at 75% 80%, rgba(56, 189, 248, 0.22) 0%, transparent 65%);
  filter: blur(42px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
  border-radius: 28px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.dialogue-stage:hover .dialogue-glow {
  opacity: 1;
  transform: scale(1.02);
}
.dialogue-demo {
  position: relative;
  z-index: 2;
  background: #ffffff;
  border: 1px solid rgba(80, 96, 236, 0.22);
  border-radius: 14px;
  box-shadow: 
    0 24px 60px -15px rgba(9, 11, 105, 0.16),
    0 6px 18px -4px rgba(80, 96, 236, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.dialogue-stage:hover .dialogue-demo {
  border-color: rgba(80, 96, 236, 0.42);
  box-shadow: 
    0 32px 75px -16px rgba(9, 11, 105, 0.22),
    0 10px 24px -4px rgba(80, 96, 236, 0.18),
    inset 0 1px 0 #ffffff;
}
.demo-header {
  background: linear-gradient(180deg, #fcfdff 0%, #edf1fa 100%);
  padding: 9px 14px;
  border-bottom: 1px solid #dee3f4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  user-select: none;
}
.demo-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.demo-badge {
  font-size: 10.5px;
  font-weight: 700;
  background: #e2e8fc;
  color: var(--navy);
  border: 1px solid #cad6f8;
  border-radius: 4px;
  padding: 2px 7px;
  letter-spacing: .4px;
}
.demo-label {
  font-size: 11px;
  font-weight: 500;
  color: #737c9e;
}
.demo-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #15803d;
  background: rgba(220, 252, 231, 0.7);
  border: 1px solid #bbf7d0;
  padding: 2px 8px;
  border-radius: 20px;
  flex-shrink: 0;
}
.demo-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.7);
  display: inline-block;
}
.demo-controls {
  padding: 10px 18px;
  background: #f8fafe;
  border-bottom: 1px solid #e5eaf8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.segmented-control {
  display: inline-flex;
  background: #e7ecf9;
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
  border: 1px solid #d5def5;
}
.btn-seg {
  border: 0;
  background: transparent;
  color: #555e84;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 6px;
  transition: all .18s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.btn-seg:hover:not(.is-active) {
  color: var(--navy);
  background: rgba(255, 255, 255, 0.5);
}
.btn-seg.is-active, .btn-seg[aria-pressed="true"] {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 2px 6px rgba(9, 11, 105, 0.12), 0 1px 2px rgba(9, 11, 105, 0.08);
}
.names-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--navy);
  cursor: pointer;
  user-select: none;
}
.names-switch input {
  accent-color: var(--accent);
  cursor: pointer;
  width: 15px;
  height: 15px;
  margin: 0;
}
.dialogue-lines {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #ffffff;
}
.dialogue-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: transform 0.15s ease;
}
.dialogue-line:hover {
  transform: translateX(2px);
}
.dialogue-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11.5px;
  line-height: 1.4;
  color: #838cae;
  padding-top: 7px;
  flex-shrink: 0;
  width: 38px;
}
.dialogue-line>div {
  flex: 1;
  background: #f7f9fd;
  border: 1px solid #e3e8f7;
  border-radius: 9px;
  padding: 9px 13px;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.dialogue-line:hover>div {
  background: #fbfdff;
  border-color: #cad6f8;
  box-shadow: 0 3px 10px -2px rgba(80, 96, 236, 0.08);
}
.speaker-name {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 7px;
  margin-bottom: 5px;
  letter-spacing: .2px;
}
.speaker-one {
  background: #edf2fe;
  color: #2f3fa8;
  border: 1px solid #cfdbfc;
}
.speaker-two {
  background: #e8f7ee;
  color: #15803d;
  border: 1px solid #c3ebce;
}
.speaker-three {
  background: #f6ecfe;
  color: #792bb5;
  border: 1px solid #e4cefa;
}
.dialogue-line p {
  font-size: 13.5px;
  color: #222744;
  line-height: 1.5;
  margin: 0;
}
.dialogue-demo.is-plain .speaker-name {
  display: none;
}
.demo-footer {
  background: linear-gradient(180deg, #f4f7fe 0%, #edf2fc 100%);
  border-top: 1px solid #dce4f8;
  padding: 10px 18px;
  font-size: 11.5px;
  color: #555f84;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  user-select: none;
  flex-wrap: wrap;
}
.demo-footer-step {
  font-weight: 500;
  color: #4b5478;
}
.demo-footer-step.highlight {
  font-weight: 700;
  color: var(--accent);
}
.demo-footer-arrow {
  color: #8c98c7;
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .dialogue-glow {
    display: none;
  }
}

/* Section: YouTube */
.youtube-layout {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 36px;
  align-items: stretch;
}
.youtube-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}
.youtube-step {
  flex: 1;
  display: flex;
  gap: 16px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 4px 14px -3px rgba(9,11,105,.04);
}
.youtube-visual-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.youtube-visual-wrap .editor-screen-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
}
.youtube-visual-wrap .editor-screen-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
.youtube-visual-wrap .image-caption {
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 12px;
  color: var(--muted);
}
.feature-number {
  font-size: 12px;
  font-weight: 700;
  font-family: monospace;
  color: var(--accent);
  background: var(--pale);
  padding: 4px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}
.youtube-step h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 4px;
}
.youtube-step p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
}
.youtube-notice {
  margin-top: 28px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #eef2fc;
  border: 1px solid #d4def7;
  padding: 14px 18px;
  border-radius: 9px;
  color: #454e76;
  font-size: 13px;
  line-height: 1.6;
}
.youtube-notice svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Section: Batch */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  list-style: none;
  padding: 0;
  margin: 0 0 34px;
}
.steps-grid>li {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 14px -3px rgba(9,11,105,.04);
}
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--pale);
  color: var(--accent);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}
.steps-grid h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
  margin: 0;
}
.steps-grid p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}
.batch-showcase {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.library-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 30px -10px rgba(9,11,105,.07);
}
.library-card h3 {
  font-size: 21px;
  font-weight: 600;
  color: var(--navy);
  margin: 14px 0 10px;
}
.library-card>p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}
.library-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 14px 0;
  margin: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.6;
  color: #4b5478;
}
.library-note svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Section: Export — Style 1 Linear / Apple Polish */
.format-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.format-card {
  background: #ffffff;
  border: 1px solid rgba(80, 96, 236, 0.18);
  border-radius: 16px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 10px 26px -10px rgba(9, 11, 105, 0.05);
  transition: 
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
    box-shadow 0.22s ease, 
    border-color 0.22s ease;
  cursor: default;
}
.format-card:hover {
  transform: translateY(-4px);
  border-color: #6e7df3;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 20px 45px -12px rgba(9, 11, 105, 0.14),
    0 8px 24px -4px rgba(80, 96, 236, 0.16);
}
.format-card .card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.format-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--accent);
  background: linear-gradient(180deg, #f0f3fe 0%, #e6ebfd 100%);
  border: 1px solid #d4defc;
  padding: 6px 12px;
  border-radius: 10px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(80, 96, 236, 0.08);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.format-card:hover .format-badge {
  transform: scale(1.04);
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}
.format-badge svg {
  width: 16px;
  height: 16px;
}
.format-spec-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  color: #7d86aa;
  background: #f1f4fb;
  border: 1px solid #e1e7f6;
  padding: 3px 8px;
  border-radius: 6px;
}
.format-card h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.2px;
  color: var(--navy);
  margin-bottom: 8px;
  transition: color 0.2s ease;
}
.format-card:hover h3 {
  color: var(--accent);
}
.format-card p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 20px;
  flex-grow: 1;
}
.format-purpose {
  border-top: 1px solid rgba(80, 96, 236, 0.12);
  padding-top: 14px;
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--navy);
}
.purpose-tag {
  font-size: 11px;
  font-weight: 600;
  color: #4b5887;
  background: #f2f5fd;
  border: 1px solid #dde4f8;
  padding: 3px 8px;
  border-radius: 5px;
  letter-spacing: 0.1px;
  transition: background 0.15s ease, color 0.15s ease;
}
.format-card:hover .purpose-tag {
  background: #e8eeff;
  color: var(--navy);
}

/* Routing Container */
.export-routing {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: center;
  margin-top: 36px;
  padding: 34px 38px;
  background: radial-gradient(120% 120% at 0% 0%, #151d54 0%, #080b26 100%);
  border: 1px solid rgba(139, 160, 250, 0.28);
  border-radius: 20px;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 20px 50px -15px rgba(9, 11, 105, 0.35);
  position: relative;
  overflow: hidden;
}
.export-routing::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(80, 96, 236, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.routing-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #b3c5ff;
  background: rgba(80, 96, 236, 0.25);
  border: 1px solid rgba(139, 160, 250, 0.3);
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.routing-chip .chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6be4a8;
  box-shadow: 0 0 8px #6be4a8;
}
.export-routing h3 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
  margin-bottom: 8px;
}
.export-routing p {
  font-size: 14.5px;
  line-height: 1.6;
  color: #a4b0d4;
  margin: 0;
}
.routing-diagram {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  font-size: 12px;
  color: #ffffff;
  position: relative;
  z-index: 2;
}
.routing-source {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid rgba(139, 160, 250, 0.38);
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 8px 24px -6px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.routing-source:hover {
  transform: translateY(-2px);
  border-color: #7287ff;
}
.source-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
}
.source-title svg {
  width: 16px;
  height: 16px;
  color: #6be4a8;
}
.source-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: #9ab0ff;
}
.routing-connector-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #7287ff;
}
.routing-connector-line svg {
  width: 22px;
  height: 22px;
  animation: pulseArrow 1.8s infinite ease-in-out;
}
@keyframes pulseArrow {
  0%, 100% { transform: translateX(0); opacity: 0.7; }
  50% { transform: translateX(4px); opacity: 1; }
}
.routing-targets {
  display: grid;
  gap: 8px;
  width: 100%;
}
.target-card, .routing-targets > span, .routing-targets > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f8;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.target-card:hover, .routing-targets > span:hover, .routing-targets > div:hover {
  background: rgba(80, 96, 236, 0.22);
  border-color: rgba(139, 160, 250, 0.45);
  transform: translateX(4px);
}
.target-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.target-info svg, .routing-targets svg {
  width: 15px;
  height: 15px;
  color: #8da4ff;
}
.target-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  color: #6be4a8;
  background: rgba(107, 228, 168, 0.12);
  border: 1px solid rgba(107, 228, 168, 0.25);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Section: Additional Features (Details Accordion) */
.extras-layout {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 32px;
  align-items: start;
}
.extras-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.extra-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 18px;
  transition: border-color .2s;
}
.extra-item[open] {
  border-color: #aab8f8;
  box-shadow: 0 4px 16px -4px rgba(9,11,105,.08);
}
.extra-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  padding: 0;
}
.extra-item summary::-webkit-details-marker {
  display: none;
}
.extra-item summary svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  transition: transform .2s ease;
}
.extra-item[open] summary svg {
  transform: rotate(45deg);
}
.extra-item p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted);
  margin-top: 10px;
  margin-bottom: 6px;
}
.extras-preview {
  position: sticky;
  top: 110px;
  background: #fff;
  border: 1px solid #cad4f3;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 16px 40px -10px rgba(9,11,105,.1);
}
.extras-preview img {
  border-radius: 6px;
  width: 100%;
  display: block;
}
.extras-image-btn {
  border: 0;
  background: transparent;
  padding: 0;
  width: 100%;
  cursor: pointer;
  position: relative;
  display: block;
  border-radius: 6px;
  overflow: hidden;
  text-align: left;
}
.extras-image-btn:hover .zoom-cue,
.extras-image-btn:focus-visible .zoom-cue {
  opacity: 1;
  transform: translateY(0);
}
.extras-caption {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-top: 10px;
}
.extras-text-preview {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.extras-text-preview h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
  margin: 0;
}
.extras-text-preview p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* Responsive updates for new sections */
@media(max-width: 1150px) {
  .scenario-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .editor-layout {
    grid-template-columns: 1fr;
  }
  .youtube-layout {
    grid-template-columns: 1fr;
  }
  .batch-showcase {
    grid-template-columns: 1fr;
  }
  .extras-layout {
    grid-template-columns: 1fr;
  }
  .extras-preview {
    position: static;
  }
}

@media(max-width: 850px) {
  .download-extra {
    display: none;
  }
  .site-header .header nav {
    gap: 16px;
  }
  .range-card {
    grid-template-columns: 1fr;
  }
  .split-layout {
    grid-template-columns: 1fr;
  }
  .format-grid {
    grid-template-columns: 1fr;
  }
  .export-routing {
    grid-template-columns: 1fr;
  }
  .steps-grid {
    grid-template-columns: 1fr;
  }
}

@media(max-width: 600px) {
  .scenario-grid {
    grid-template-columns: 1fr;
  }
  .routing-diagram {
    flex-direction: column;
    align-items: stretch;
  }
  .routing-arrow {
    text-align: center;
    transform: rotate(90deg);
  }
}

/* Uniform Section Spacing & Alternating Backgrounds */
.section {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}
.section-alt {
  background: #f0f4fd !important;
  border-top: 1px solid #dbe2f6 !important;
  border-bottom: 1px solid #dbe2f6 !important;
}
.demo-section {
  background: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 72px 0 !important;
}
.cloud-free {
  padding-top: 52px !important;
  padding-bottom: 60px !important;
}
.cloud-free .section-heading {
  margin-top: 18px !important;
  margin-bottom: 26px !important;
}
/* Section: Cloud Free Providers — Style 1 Linear / Apple Polish */
.provider-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.provider-card {
  background: #ffffff;
  border: 1px solid rgba(80, 96, 236, 0.18);
  border-radius: 16px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 10px 26px -10px rgba(9, 11, 105, 0.05);
  transition: 
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
    box-shadow 0.22s ease, 
    border-color 0.22s ease;
  cursor: default;
}
.provider-card:hover {
  transform: translateY(-4px);
  border-color: #6e7df3;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 20px 45px -12px rgba(9, 11, 105, 0.14),
    0 8px 24px -4px rgba(80, 96, 236, 0.16);
}
.provider-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.provider-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-icon-tile {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(180deg, #f0f3fe 0%, #e6ebfd 100%);
  border: 1px solid #d4defc;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(80, 96, 236, 0.08);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.provider-card:hover .brand-icon-tile {
  transform: scale(1.06);
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}
.brand-icon-tile svg {
  width: 18px;
  height: 18px;
}
.provider-brand h3 {
  font-size: 23px;
  letter-spacing: -0.5px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
.provider-tag {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  padding: 3px 8px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.provider-tag.tag--green {
  color: #15803d;
  background: #edf9f0;
  border: 1px solid #c3ebd0;
}
.provider-tag.tag--green .pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
}
.provider-tag.tag--purple {
  color: #6938b8;
  background: #f4eefa;
  border: 1px solid #dfcff6;
}
.provider-tag.tag--blue {
  color: var(--accent);
  background: #eef2fe;
  border: 1px solid #d4defc;
}
.provider-card p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.68;
  margin-bottom: 18px;
  flex-grow: 1;
}

.provider-matrix-box {
  background: #ffffff;
  border: 1px solid #cdd8f6;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: 0 4px 14px -3px rgba(9, 11, 105, 0.05);
}
.matrix-row-grant {
  background: linear-gradient(90deg, #f2f6ff 0%, #eaf0fd 100%);
  padding: 13px 16px;
  border-bottom: 1px solid #d9e3f8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.matrix-rg-label {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: #49547d;
  display: flex;
  align-items: center;
  gap: 6px;
}
.matrix-rg-val {
  font-family: var(--font);
  font-size: 18.5px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.matrix-rg-val .plus {
  color: #16a34a;
  margin-right: 1px;
}

.matrix-row-cost {
  background: #ffffff;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.matrix-rc-label {
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
}
.matrix-rc-val {
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 700;
  color: #15803d;
  background: #eaf8ee;
  border: 1px solid #c2ebd0;
  padding: 2px 9px;
  border-radius: 5px;
}

.provider-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 13.5px;
  color: #4f587d;
}
.provider-features-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.provider-features-list svg {
  width: 16px;
  height: 16px;
  color: #16a34a;
  flex-shrink: 0;
}

.provider-card a {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  text-decoration: none;
  transition: color 0.18s ease;
}
.provider-card a svg {
  color: var(--accent);
  transition: transform 0.2s ease;
}
.provider-card:hover a {
  color: var(--accent);
}
.provider-card:hover a svg {
  transform: translate(2px, -2px);
}

/* Modernized Cloud Free Note */
.cloud-free-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: linear-gradient(135deg, #f0f4fe 0%, #e6edfc 100%);
  border: 1px solid #cad7fa;
  border-radius: 14px;
  padding: 18px 22px;
  margin-top: 30px;
  box-shadow: inset 0 1px 0 #ffffff, 0 8px 20px -8px rgba(9, 11, 105, 0.05);
}
.cloud-free-note .cf-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #ffffff;
  border: 1px solid #cad7fa;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0;
  box-shadow: 0 2px 6px rgba(80, 96, 236, 0.1);
}
.cloud-free-note .cf-icon svg {
  width: 18px;
  height: 18px;
}
.cloud-free-note p {
  font-size: 13.5px;
  line-height: 1.65;
  color: #3f4a75;
  margin: 0;
}
.cloud-free-note strong {
  color: var(--navy);
  font-weight: 700;
}

/* YouTube layout equal height & compact steps */
.youtube-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: stretch;
}
@media (min-width: 901px) {
  .youtube-layout {
    grid-template-columns: 1fr 1.08fr;
  }
}
.youtube-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}
.youtube-step {
  flex: 1;
  display: flex;
  gap: 14px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 4px 14px -3px rgba(9, 11, 105, 0.04);
}
.youtube-step h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 3px;
}
.youtube-step p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
.youtube-visual-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.youtube-visual-wrap .editor-screen-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
}
.youtube-visual-wrap .editor-screen-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

/* Batch section vertical layout */
.batch-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: stretch;
}
@media (min-width: 901px) {
  .batch-layout {
    grid-template-columns: 1.08fr 1fr;
  }
}
.batch-visual {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.batch-visual .editor-screen-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
}
.batch-visual .editor-screen-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
.batch-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}
.batch-step {
  flex: 1;
  display: flex;
  gap: 16px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 4px 14px -3px rgba(9, 11, 105, 0.04);
}
.batch-step .step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--pale);
  color: var(--accent);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  margin-bottom: 0;
}
.batch-step h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 3px;
}
.batch-step p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

/* FAQ 2-column layout */
.faq-section-wrap {
  background: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 72px 0 !important;
}
.faq-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  align-items: start;
}
.faq-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 20px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item[open] {
  border-color: #b5c3f3;
  box-shadow: 0 6px 18px -4px rgba(9, 11, 105, 0.06);
}
.faq-item summary {
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  gap: 12px;
  border: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary span {
  font-size: 20px;
  color: var(--accent);
  transition: transform .2s ease;
  line-height: 1;
}
.faq-item[open] summary span {
  transform: rotate(45deg);
}
.faq-item p {
  padding: 12px 0 2px 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
  border: none;
}
.faq-item p a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Responsive updates */
@media(max-width: 900px) {
  .hero-actions {
    flex-wrap: wrap !important;
  }
  .batch-layout {
    grid-template-columns: 1fr;
  }
  .faq-grid-2col {
    grid-template-columns: 1fr;
  }
}


/* === Refinements (Batch 4: Desktop Typography & Hero Elements) === */
@media (min-width: 901px) {
  .hero {
    grid-template-columns: 0.96fr 1.04fr !important;
    gap: 40px !important;
    min-height: 590px !important;
  }
}
.hero h1 {
  font-size: clamp(52px, 6.8vw, 105px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.055em !important;
  margin: 22px 0 20px !important;
}
@media (min-width: 901px) {
  html:not([lang="ru"]) .hero {
    grid-template-columns: 1.08fr 0.92fr !important;
  }
  html:not([lang="ru"]) .hero h1 {
    font-size: 57px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.04em !important;
    margin: 22px 0 20px !important;
    color: #10123f !important;
  }
  html:not([lang="ru"]) .hero h1 > span {
    color: var(--accent) !important;
  }
}
@media (min-width: 901px) and (max-width: 1180px) {
  html:not([lang="ru"]) .hero h1 {
    font-size: clamp(44px, 4.2vw, 54px) !important;
  }
}
.hero-note {
  font-size: 14px !important;
  color: #636885 !important;
}
.hero-caption {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 18px !important;
  padding: 0 4px !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: var(--muted) !important;
}
.caption-arrow {
  font-size: 26px !important;
  color: var(--accent) !important;
  align-self: flex-start !important;
  line-height: 1.1 !important;
  font-family: inherit !important;
}
.hero-caption p {
  margin: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: #555974 !important;
}
.caption-badge {
  margin-left: auto !important;
  white-space: nowrap !important;
  border: 1px solid #d0d7f2 !important;
  background: #fff !important;
  padding: 5px 12px !important;
  border-radius: 7px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  letter-spacing: .2px !important;
  box-shadow: 0 2px 6px rgba(9, 11, 105, 0.04) !important;
}

/* Speakers section bullets matching main text */
.speakers-lead {
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: var(--muted) !important;
}
.speakers-copy .check-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 20px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.speakers-copy .check-list li {
  position: relative !important;
  padding-left: 28px !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--muted) !important;
}
.speakers-copy .check-list li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 4px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #eef2fe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235060ec' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center center / 10px 10px !important;
  border: 1px solid #d2ddfc !important;
}

/* Desktop Font-Size Specifications */
@media (min-width: 900px) {
  /* 01 / ВАШИ ЗАДАЧИ: 18px titles, 13.5px text */
  .scenario-card h3 {
    font-size: 18px !important;
    line-height: 1.35 !important;
  }
  .scenario-card p {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }

  /* 03 / ВНУТРИ SLYSH!: 15px tab descriptions */
  .s-tab-desc {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  /* 08 / YOUTUBE: 15px step text */
  .youtube-step p,
  .youtube-features p {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  /* 09 / ПАКЕТНАЯ ОБРАБОТКА: 15px step text */
  .batch-step p {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  /* 10 / ЭКСПОРТ И АРХИВ: 15px format card & routing text */
  .format-card p,
  .export-routing p {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }
}

/* === Layout Rhythms: Section 03 Text Left; Alternating for 04, 05, 06, 07, 08; 670px Desktop Images === */
@media (min-width: 901px) {
  /* 03 / ВНУТРИ SLYSH!: Text/Tabs LEFT, Device Mockup RIGHT (670px) */
  .showcase-grid {
    grid-template-columns: minmax(0, 1fr) 670px !important;
    gap: 42px !important;
  }
  .showcase-sidebar {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  .showcase-stage {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 670px !important;
    max-width: 670px !important;
  }
  .showcase-device {
    width: 670px !important;
    max-width: 670px !important;
  }

  /* 04 / РЕДАКТОР: Screenshot LEFT (670px), Text RIGHT */
  .editor-layout {
    grid-template-columns: 670px minmax(0, 1fr) !important;
    gap: 42px !important;
    align-items: start !important;
  }

  /* 05 / ВСТРЕЧИ: Text LEFT, Screenshot RIGHT (670px) */
  .split-layout {
    grid-template-columns: minmax(0, 1fr) 670px !important;
    gap: 42px !important;
    align-items: start !important;
  }

  /* 06 / ДИАРИЗАЦИЯ И СПИКЕРЫ: Visual Demo LEFT (670px), Text Copy RIGHT */
  .speakers-grid {
    grid-template-columns: 670px minmax(0, 1fr) !important;
    gap: 42px !important;
  }
  .dialogue-stage,
  .dialogue-demo {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 670px !important;
    max-width: 670px !important;
  }
  .speakers-copy {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  /* 07 / YOUTUBE: Steps LEFT, Screenshot RIGHT (670px) */
  .youtube-layout {
    grid-template-columns: minmax(0, 1fr) 670px !important;
    gap: 42px !important;
    align-items: start !important;
  }

  /* 08 / ПАКЕТНАЯ ОБРАБОТКА: Screenshot LEFT (670px), Steps RIGHT */
  .batch-layout {
    grid-template-columns: 670px minmax(0, 1fr) !important;
    gap: 42px !important;
    align-items: start !important;
  }

  /* Unified Screenshot Sizes across Sections 03, 04, 05, 07, 08 - Exactly 670px on desktop */
  .editor-visual,
  .split-visual,
  .youtube-visual-wrap,
  .batch-visual {
    width: 670px !important;
    max-width: 670px !important;
    height: auto !important;
    margin: 0 !important;
  }
  .editor-visual .editor-screen-btn,
  .split-visual .editor-screen-btn,
  .youtube-visual-wrap .editor-screen-btn,
  .batch-visual .editor-screen-btn {
    width: 670px !important;
    max-width: 670px !important;
    aspect-ratio: 1024 / 665 !important;
    height: auto !important;
    flex: none !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    border-radius: 13px !important;
    background: #fff !important;
    border: 1px solid rgba(80, 96, 236, 0.22) !important;
    box-shadow: 0 24px 60px -15px rgba(9, 11, 105, 0.16), 0 6px 16px -4px rgba(80, 96, 236, 0.10) !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 2 !important;
  }
  .editor-visual .editor-screen-btn:hover,
  .split-visual .editor-screen-btn:hover,
  .youtube-visual-wrap .editor-screen-btn:hover,
  .batch-visual .editor-screen-btn:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(80, 96, 236, 0.5) !important;
    box-shadow: 0 32px 75px -16px rgba(9, 11, 105, 0.22), 0 10px 24px -4px rgba(80, 96, 236, 0.20) !important;
  }
  .editor-visual .editor-screen-btn .window-body,
  .split-visual .editor-screen-btn .window-body,
  .youtube-visual-wrap .editor-screen-btn .window-body,
  .batch-visual .editor-screen-btn .window-body {
    flex: 1 !important;
    min-height: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }
  .editor-visual .editor-screen-btn .window-body img,
  .split-visual .editor-screen-btn .window-body img,
  .youtube-visual-wrap .editor-screen-btn .window-body img,
  .batch-visual .editor-screen-btn .window-body img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    border-radius: 0 !important;
    display: block !important;
  }
}

@media (min-width: 901px) {
  .features-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    align-items: start !important;
  }
}
@media (max-width: 900px) and (min-width: 651px) {
  .features-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
  }
}
@media (max-width: 650px) {
  .features-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    align-items: start !important;
  }
}
details.feature {
  position: relative !important;
  display: block !important;
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  padding: 24px 24px 20px 24px !important;
  box-shadow: 0 4px 20px -6px rgba(9, 11, 105, 0.05) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
details.feature:hover {
  transform: translateY(-2px) !important;
  border-color: #9cb0f5 !important;
  box-shadow: 0 14px 32px -8px rgba(9, 11, 105, 0.10) !important;
}
details.feature[open] {
  border-color: var(--accent) !important;
  box-shadow: 0 16px 36px -10px rgba(80, 96, 236, 0.14) !important;
  transform: none !important;
}
summary.feature-summary {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  list-style: none !important;
  outline: none !important;
  cursor: pointer !important;
  user-select: none !important;
}
summary.feature-summary::-webkit-details-marker {
  display: none !important;
}
.feature-top {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: 100% !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}
.feature-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: #eef3ff !important;
  border: 1px solid #d8e3fc !important;
  color: var(--accent) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease !important;
}
details.feature:hover .feature-icon {
  background: #e2eafc !important;
}
details.feature[open] .feature-icon {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  color: #ffffff !important;
}
.feature-icon svg {
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}
.feature-num-bg {
  position: absolute !important;
  top: 6px !important;
  right: 14px !important;
  font-size: 95px !important;
  font-weight: 800 !important;
  line-height: 0.8 !important;
  letter-spacing: -4px !important;
  color: rgba(80, 96, 236, 0.08) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  user-select: none !important;
  pointer-events: none !important;
  z-index: 1 !important;
  transition: color .2s ease, transform .2s ease !important;
}
details.feature:hover .feature-num-bg {
  color: rgba(80, 96, 236, 0.14) !important;
  transform: scale(1.03) !important;
}
details.feature[open] .feature-num-bg {
  color: rgba(80, 96, 236, 0.18) !important;
}
.feature-kicker {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.9px !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.2 !important;
  position: relative !important;
  z-index: 2 !important;
}
summary.feature-summary h3.feature-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.3 !important;
  color: var(--navy) !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  width: 100% !important;
  transition: color .2s ease !important;
  position: relative !important;
  z-index: 2 !important;
}
details.feature:hover summary.feature-summary h3.feature-title {
  color: var(--accent) !important;
}
.feature-desc {
  font-size: 15px !important;
  line-height: 1.45 !important;
  color: var(--muted) !important;
  margin: 0 0 14px 0 !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.feature-toggle-bar {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--accent) !important;
  padding-top: 2px !important;
  width: fit-content !important;
  position: relative !important;
  z-index: 2 !important;
}
.feature-toggle-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 4px !important;
  background: #eef2fd !important;
  color: var(--accent) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transition: transform .2s ease, background .2s ease, color .2s ease !important;
}
details.feature:hover .feature-toggle-icon {
  background: #dfe6fa !important;
}
details.feature[open] .feature-toggle-icon {
  transform: rotate(45deg) !important;
  background: var(--navy) !important;
  color: #fff !important;
}
.cue-open { display: inline !important; }
.cue-close { display: none !important; }
details.feature[open] .cue-open { display: none !important; }
details.feature[open] .cue-close { display: inline !important; }

.feature-body {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  padding-top: 14px !important;
  margin-top: 12px !important;
  border-top: 1px solid #edf1fc !important;
  animation: fadeInBody .2s ease-out !important;
  position: relative !important;
  z-index: 2 !important;
}
@keyframes fadeInBody {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.feature-body-text {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--muted) !important;
  margin: 0 0 12px 0 !important;
  width: 100% !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.feature-body .feature-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  width: 100% !important;
}
.feature-body .feature-tags span {
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  background: #f2f5fd !important;
  border: 1px solid #e1e7f8 !important;
  color: #556288 !important;
}

/* === Author Section (Человек за проектом) === */
.author-section {
  background: #f7f8fd;
}
.author-section .section-heading {
  margin-bottom: 30px;
}
.author-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.15fr 1fr;
  gap: 28px;
  align-items: stretch;
}
.author-photo {
  position: relative;
  overflow: hidden;
  max-height: 440px;
  border-radius: 16px;
  background: #c8cce2;
  box-shadow: 0 12px 35px -10px rgba(9, 11, 105, 0.12);
}
.author-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top !important;
  display: block;
}
.author-photo > span {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--navy);
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.author-story {
  padding: 12px 0;
  display: flex;
  flex-direction: column;
}
.author-story .mini-label {
  font-size: 10px;
  letter-spacing: 1.4px;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.author-story h3 {
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -.6px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 16px 0;
}
.author-story > p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.75;
  margin: 0 0 14px 0;
}
.author-story .inline-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: 4px;
}
.author-story .inline-link:hover {
  color: var(--navy);
}
.support-card {
  padding: 28px;
  background: #ffffff;
  border: 1.5px solid rgba(80, 96, 236, 0.45);
  border-radius: 16px;
  box-shadow: 0 16px 40px -8px rgba(80, 96, 236, 0.16), 0 4px 14px -2px rgba(9, 11, 105, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  box-sizing: border-box;
}
.support-card-glow {
  position: absolute;
  inset: -1px;
  border-radius: 16px;
  pointer-events: none;
  box-shadow: 0 0 24px rgba(80, 96, 236, 0.14);
}
.support-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.support-heart-icon {
  width: 22px;
  height: 22px;
  color: var(--accent);
}
.support-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #15803d;
  background: #e8f7ee;
  border: 1px solid #c2ebd0;
  padding: 3px 8px;
  border-radius: 4px;
}
.support-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
}
.support-card h3 {
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.4px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 8px 0;
}
.support-card .support-lead {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 12px 0;
}
.support-features {
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.support-features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #3b4266;
}
.support-features svg {
  width: 15px;
  height: 15px;
  color: #16a34a;
  flex-shrink: 0;
  margin-top: 1px;
}
.support-btn-cloudtips {
  width: 100%;
  justify-content: center;
  padding: 13px 16px;
  font-size: 14.5px;
  font-weight: 600;
  border-radius: 8px;
  background: linear-gradient(135deg, #090b69 0%, #303796 100%);
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(9, 11, 105, 0.22);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  text-decoration: none;
}
.support-btn-cloudtips:hover {
  background: linear-gradient(135deg, #5060ec 0%, #3544c7 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(80, 96, 236, 0.32);
  color: #ffffff;
}
.support-chips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.pay-chip {
  font-size: 10.5px;
  font-weight: 600;
  color: #434c76;
  background: #f0f3fc;
  border: 1px solid #d7e0f8;
  border-radius: 4px;
  padding: 3px 8px;
}
.pay-chip--sbp {
  background: #edf2ff;
  border-color: #c9d6fb;
  color: var(--accent);
  font-weight: 700;
}
.support-legal-note {
  font-size: 11px;
  color: #7b85a5;
  line-height: 1.45;
  margin-top: 10px;
  margin-bottom: 0;
  text-align: center;
}
.support-legal-note a {
  color: var(--accent);
  text-decoration: underline;
}

@media (max-width: 1100px) {
  .author-grid {
    grid-template-columns: 0.8fr 1.15fr 1fr;
    gap: 22px;
  }
}
@media (max-width: 850px) {
  .author-grid {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 24px;
  }
  .author-photo {
    max-height: 380px;
  }
  .support-card {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 20px 24px;
    padding: 26px;
    align-items: center;
  }
  .support-card-glow {
    display: none;
  }
}
@media (max-width: 600px) {
  .author-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .author-photo {
    width: min(300px, 80vw) !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    max-height: none !important;
    margin: 0 auto !important;
  }
  .author-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
  }
  .support-card {
    display: flex;
    flex-direction: column;
    padding: 22px;
    grid-column: auto;
    gap: 16px;
  }
}

/* === Navy Accent Divider Band 1 (4 Pillars) === */
.navy-divider-band {
  background: var(--navy);
  color: #fff;
  padding: 30px 0;
  border-top: 1px solid rgba(144, 152, 251, 0.2);
  border-bottom: 1px solid rgba(144, 152, 251, 0.2);
  position: relative;
  z-index: 2;
}
.nd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: center;
}
.nd-item {
  display: flex;
  align-items: center;
  gap: 13px;
}
.nd-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(80, 96, 236, 0.18);
  border: 1px solid rgba(144, 152, 251, 0.25);
  color: #a7b3ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nd-item strong {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 3px;
  letter-spacing: -.2px;
}
.nd-item p {
  font-size: 12px;
  color: #bac3ea;
  line-height: 1.45;
  margin: 0;
}

/* === Tech Marquee Reverse Animation === */
.marquee-reverse {
  animation: marqueeReverse 36s linear infinite !important;
}
@keyframes marqueeReverse {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
.tech-strip {
  border-top: 1px solid rgba(144, 152, 251, 0.25) !important;
  border-bottom: 1px solid rgba(144, 152, 251, 0.25) !important;
  background: #080a56 !important;
}
.tech-strip .marquee-star {
  color: #7986f7 !important;
}

@media(max-width: 900px) {
  .nd-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}
@media(max-width: 600px) {
  .nd-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ==========================================================================
   21st DESIGN PATTERN: WINDOW CHROME + DUAL AMBIENT GLOW (OPTION A)
   ========================================================================== */

.mockup-ambient-wrapper {
  position: relative;
  width: 100%;
}

/* Dual Ambient Glow: Cyan (Sky) + Indigo (Slysh Accent) */
.ambient-glow {
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background: radial-gradient(ellipse at 50% 50%, rgba(56, 189, 248, 0.45) 0%, rgba(80, 96, 236, 0.38) 45%, transparent 72%);
  filter: blur(45px);
  z-index: 1;
  pointer-events: none;
  opacity: 0.72;
  transition: opacity 0.3s ease, transform 0.3s ease;
  border-radius: 28px;
}

.mockup-ambient-wrapper:hover .ambient-glow,
.hero-stage:hover .hero-glow {
  opacity: 0.95;
  transform: scale(1.04);
}

/* Enhanced Hero Glow using the same rich dual gradient */
.hero-glow {
  position: absolute;
  inset: -15px -20px;
  background: radial-gradient(ellipse at 50% 50%, rgba(56, 189, 248, 0.45) 0%, rgba(80, 96, 236, 0.38) 45%, transparent 72%);
  filter: blur(48px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.75;
  border-radius: 28px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Window Frame Component */
.app-window-frame {
  position: relative;
  z-index: 2;
  background: #ffffff;
  border: 1px solid rgba(80, 96, 236, 0.22);
  border-radius: 13px;
  box-shadow: 
    0 24px 60px -15px rgba(9, 11, 105, 0.16),
    0 6px 16px -4px rgba(80, 96, 236, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
}

.app-window-frame:hover {
  transform: translateY(-4px);
  border-color: rgba(80, 96, 236, 0.5);
  box-shadow: 
    0 32px 75px -16px rgba(9, 11, 105, 0.22),
    0 10px 24px -4px rgba(80, 96, 236, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.hero-screen.app-window-frame {
  padding: 0 !important;
  background: #ffffff !important;
  border-radius: 13px !important;
  border: 1px solid rgba(80, 96, 236, 0.22) !important;
}

/* Window Header Bar */
.window-header {
  background: linear-gradient(180deg, #fcfdff 0%, #edf1fa 100%);
  border-bottom: 1px solid #dee3f4;
  height: 36px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Traffic Light Dots */
.window-dots {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 65px;
  flex-shrink: 0;
}

.dot {
  width: 10.5px;
  height: 10.5px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15);
}

.dot-close {
  background: #ff5f56;
  border: 1px solid #e0443e;
}

.dot-min {
  background: #ffbd2e;
  border: 1px solid #dea123;
}

.dot-max {
  background: #27c93f;
  border: 1px solid #1aab29;
}

/* Window Title */
.window-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #2e3557;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 auto;
}

.window-title .app-icon {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.window-badge {
  font-family: 'JetBrains Mono', monospace, sans-serif;
  font-size: 10px;
  font-weight: 600;
  background: #e1e6fb;
  color: var(--accent);
  padding: 2px 7px;
  border-radius: 4px;
}

/* Window Meta / Status */
.window-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 65px;
  justify-content: flex-end;
  color: #7982a5;
  font-size: 11px;
  font-weight: 600;
}

.live-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
  animation: liveDotPulse 2s infinite ease-in-out;
}

@keyframes liveDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}

/* Window Body */
.window-body {
  position: relative;
  background: #fff;
  overflow: hidden;
  display: block;
  width: 100%;
}

.window-body img {
  width: 100%;
  height: auto;
  display: block;
}

/* Upgraded Glassmorphic Zoom Cue */
.zoom-cue {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 5;
  background: rgba(9, 11, 105, 0.82) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 20px !important;
  padding: 6px 14px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22) !important;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease !important;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero-screen:hover .zoom-cue,
.hero-screen:focus-visible .zoom-cue,
.editor-screen-btn:hover .zoom-cue,
.editor-screen-btn:focus-visible .zoom-cue,
.showcase-preview:hover .zoom-cue,
.showcase-preview:focus-visible .zoom-cue {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Showcase Device Integration */
.showcase-device {
  position: relative;
  z-index: 2;
  border-radius: 13px !important;
  border: 1px solid rgba(80, 96, 236, 0.22) !important;
  box-shadow: 0 24px 60px -15px rgba(9, 11, 105, 0.16), 0 6px 16px -4px rgba(80, 96, 236, 0.10) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.showcase-stage:hover .showcase-device {
  transform: translateY(-3px);
  border-color: rgba(80, 96, 236, 0.45) !important;
  box-shadow: 0 30px 70px -16px rgba(9, 11, 105, 0.22), 0 10px 24px -4px rgba(80, 96, 236, 0.18) !important;
}

@media (max-width: 640px) {
  .window-meta {
    display: none;
  }
  .window-title {
    font-size: 11px;
    max-width: calc(100% - 60px);
  }
  .window-dots {
    width: 50px;
    gap: 5px;
  }
  .dot {
    width: 9px;
    height: 9px;
  }
  .ambient-glow {
    filter: blur(28px);
    opacity: 0.55;
  }
}

/* ==========================================================================
   Section 10: Control & Privacy (Modernized Dark Style 1 Linear/Apple Polish)
   ========================================================================== */
.control-section {
  background: var(--navy) !important;
  color: #ffffff !important;
  padding: 94px 0 !important;
  position: relative;
  overflow: hidden;
}

.control-grid {
  display: grid !important;
  grid-template-columns: 1.05fr 0.95fr !important;
  gap: 56px !important;
  align-items: start !important;
}

.control-copy .eyebrow {
  color: #a2a9ec !important;
}

.control-copy h2 {
  font-size: clamp(38px, 4.2vw, 56px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.04em !important;
  margin: 20px 0 16px !important;
  color: #ffffff !important;
}

.control-copy h2 .accent {
  color: #919eff !important;
}

.control-copy > p {
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: #b7bdeb !important;
  margin-bottom: 26px !important;
  max-width: 540px;
}

.control-features {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  border-top: 1px solid rgba(144, 160, 255, 0.16) !important;
  padding-top: 24px !important;
}

.control-feat-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(144, 160, 255, 0.14) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

.control-feat-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(144, 160, 255, 0.32) !important;
  transform: translateY(-1px) !important;
}

.feat-icon-box {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: rgba(80, 96, 236, 0.25) !important;
  border: 1px solid rgba(144, 160, 255, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #9bb0ff !important;
}

.feat-icon-box svg {
  width: 17px !important;
  height: 17px !important;
  stroke: #9bb0ff !important;
}

.control-feat-item strong {
  display: block !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin-bottom: 2px !important;
}

.control-feat-item span {
  display: block !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #a6aedb !important;
}

/* Mode Stage & Ambient Glow */
.mode-stage {
  position: relative !important;
  width: 100% !important;
}

.mode-glow {
  position: absolute !important;
  inset: -18px -20px !important;
  background: radial-gradient(ellipse at 35% 25%, rgba(80, 96, 236, 0.42) 0%, rgba(139, 92, 246, 0.26) 45%, transparent 72%),
              radial-gradient(ellipse at 75% 85%, rgba(56, 189, 248, 0.28) 0%, transparent 65%) !important;
  filter: blur(44px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 0.85 !important;
  border-radius: 28px !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

.mode-stage:hover .mode-glow {
  opacity: 1 !important;
  transform: scale(1.02) !important;
}

/* Modern Dark Mode Card */
.mode-card {
  position: relative !important;
  z-index: 2 !important;
  background: linear-gradient(180deg, #10144f 0%, #0c0f3d 100%) !important;
  border: 1px solid rgba(144, 160, 255, 0.28) !important;
  border-radius: 14px !important;
  box-shadow: 
    0 26px 65px -15px rgba(0, 2, 35, 0.6),
    0 8px 24px -4px rgba(80, 96, 236, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: #e2e7ff !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.mode-stage:hover .mode-card {
  border-color: rgba(144, 160, 255, 0.45) !important;
  box-shadow: 
    0 32px 75px -15px rgba(0, 2, 35, 0.7),
    0 10px 28px -4px rgba(80, 96, 236, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.mode-window-bar {
  background: rgba(255, 255, 255, 0.04) !important;
  border-bottom: 1px solid rgba(144, 160, 255, 0.15) !important;
  padding: 9px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  user-select: none !important;
}

.mode-window-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #a7b5ff !important;
  letter-spacing: 0.5px !important;
}

.mode-status-live {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #4ade80 !important;
  background: rgba(34, 197, 94, 0.15) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  padding: 2px 8px !important;
  border-radius: 20px !important;
}

.mode-status-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
  display: inline-block;
}

.mode-card-content {
  padding: 22px 24px !important;
  display: flex !important;
  flex-direction: column !important;
}

.mode-tabs {
  display: flex !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(144, 160, 255, 0.18) !important;
  border-radius: 8px !important;
  padding: 3px !important;
  margin: 0 0 18px !important;
  gap: 3px !important;
}

.mode-tabs button {
  width: 50% !important;
  border: 0 !important;
  background: transparent !important;
  color: #9aa7dd !important;
  border-radius: 6px !important;
  padding: 9px 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.mode-tabs button:hover:not([aria-selected="true"]) {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.mode-tabs button[aria-selected="true"] {
  background: #5060ec !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(80, 96, 236, 0.45) !important;
}

.mode-header {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  margin-bottom: 14px !important;
}

.mode-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 10px !important;
  background: rgba(80, 96, 236, 0.2) !important;
  border: 1px solid rgba(144, 160, 255, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #9cb1ff !important;
}

.mode-icon svg {
  width: 26px !important;
  height: 26px !important;
}

.mode-header-meta .eyebrow {
  font-size: 11px !important;
  letter-spacing: 1px !important;
  color: #8c9be0 !important;
  display: block !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}

.mode-card h3 {
  font-size: 22px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.6px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin: 3px 0 0 !important;
}

.mode-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 14px !important;
}

.mode-chips span {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  background: rgba(80, 96, 236, 0.18) !important;
  border: 1px solid rgba(144, 160, 255, 0.22) !important;
  color: #d1dcff !important;
  letter-spacing: 0.3px !important;
}

.mode-card p {
  color: #b0badf !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  margin-bottom: 14px !important;
}

.mode-specs {
  background: rgba(0, 0, 0, 0.22) !important;
  border: 1px solid rgba(144, 160, 255, 0.15) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 16px !important;
}

.mode-spec-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 12.5px !important;
  gap: 12px !important;
}

.mode-spec-item .spec-label {
  color: #8692c2 !important;
  font-weight: 500 !important;
}

.mode-spec-item .spec-val {
  color: #e5ebff !important;
  font-weight: 600 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 12px !important;
}

.mode-card ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  color: #c0c9ea !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
}

.mode-card li {
  position: relative !important;
  padding-left: 26px !important;
}

.mode-card li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 3px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: rgba(34, 197, 94, 0.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center center / 9px 9px !important;
  border: 1px solid rgba(34, 197, 94, 0.35) !important;
}

.mode-foot {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  font-size: 13.5px !important;
  border-top: 1px solid rgba(144, 160, 255, 0.15) !important;
  padding-top: 14px !important;
  margin-top: auto !important;
  color: #d1dcff !important;
  font-weight: 600 !important;
}

.mode-foot span {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #8c98c7 !important;
  text-align: right !important;
}

@media (max-width: 900px) {
  .control-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
}

@media (max-width: 700px) {
  .mode-glow {
    display: none !important;
  }
  .control-section {
    padding: 58px 0 !important;
  }
}

/* ==========================================================================
   Section 06: Diarization & Speakers (Modernized Dark Style 1 Linear Polish)
   ========================================================================== */
.speakers-section {
  background: var(--navy) !important;
  color: #ffffff !important;
  padding: 94px 0 !important;
  position: relative !important;
  overflow: hidden !important;
  border-top: none !important;
  border-bottom: none !important;
}

.speakers-copy .eyebrow {
  color: #a2a9ec !important;
}

.speakers-copy h2 {
  color: #ffffff !important;
}

.speakers-copy h2 .accent {
  color: #919eff !important;
}

.speakers-lead {
  color: #b7bdeb !important;
}

.speakers-copy .check-list {
  list-style: none !important;
}

.speakers-copy .check-list li {
  color: #d1d7f8 !important;
}

.speakers-copy .check-list li::before {
  background: rgba(80, 96, 236, 0.25) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239bb0ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center center / 10px 10px !important;
  border: 1px solid rgba(144, 160, 255, 0.35) !important;
}

.speakers-chips span {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(144, 160, 255, 0.22) !important;
  color: #a7b5ff !important;
}

/* Dark Dialogue Demo Widget */
.dialogue-demo {
  background: linear-gradient(180deg, #10144f 0%, #0c0f3d 100%) !important;
  border: 1px solid rgba(144, 160, 255, 0.28) !important;
  border-radius: 14px !important;
  box-shadow: 
    0 26px 65px -15px rgba(0, 2, 35, 0.65),
    0 8px 24px -4px rgba(80, 96, 236, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.dialogue-stage:hover .dialogue-demo {
  border-color: rgba(144, 160, 255, 0.45) !important;
  box-shadow: 
    0 32px 75px -15px rgba(0, 2, 35, 0.72),
    0 10px 28px -4px rgba(80, 96, 236, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.demo-header {
  background: rgba(255, 255, 255, 0.04) !important;
  border-bottom: 1px solid rgba(144, 160, 255, 0.15) !important;
}

.demo-badge {
  background: rgba(80, 96, 236, 0.25) !important;
  border: 1px solid rgba(144, 160, 255, 0.35) !important;
  color: #a7b5ff !important;
}

.demo-label {
  color: #9da8db !important;
}

.demo-live-badge {
  background: rgba(34, 197, 94, 0.15) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  color: #4ade80 !important;
}

.demo-controls {
  background: rgba(0, 0, 0, 0.2) !important;
  border-bottom: 1px solid rgba(144, 160, 255, 0.14) !important;
}

.segmented-control {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(144, 160, 255, 0.18) !important;
}

.btn-seg {
  color: #8c97cc !important;
}

.btn-seg:hover:not(.is-active) {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.btn-seg.is-active, .btn-seg[aria-pressed="true"] {
  background: #5060ec !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(80, 96, 236, 0.4) !important;
}

.names-switch {
  color: #a2aee8 !important;
}

.names-switch input {
  accent-color: #5060ec !important;
}

.dialogue-lines {
  background: transparent !important;
}

.dialogue-time {
  color: #7b86ba !important;
}

.dialogue-line>div {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(144, 160, 255, 0.12) !important;
  color: #e2e7ff !important;
}

.dialogue-line:hover>div {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(144, 160, 255, 0.28) !important;
  box-shadow: 0 4px 14px -2px rgba(0, 2, 35, 0.4) !important;
}

.speaker-one {
  background: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
}

.speaker-two {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(34, 197, 94, 0.35) !important;
}

.speaker-three {
  background: rgba(192, 132, 252, 0.15) !important;
  color: #c084fc !important;
  border: 1px solid rgba(192, 132, 252, 0.35) !important;
}

.dialogue-line p {
  color: #e2e7ff !important;
}

.demo-footer {
  background: rgba(0, 0, 0, 0.25) !important;
  border-top: 1px solid rgba(144, 160, 255, 0.12) !important;
  color: #8c97ca !important;
}

.demo-footer-step.highlight {
  color: #38bdf8 !important;
}

.demo-footer-arrow {
  color: #6370a6 !important;
  stroke: #6370a6 !important;
}


/* ==========================================================================
   Section 13: Tech Specs & Final CTA (Modernized Dark Style 1 Linear Polish)
   ========================================================================== */
.cta-section {
  background: var(--navy) !important;
  color: #ffffff !important;
  padding: 94px 0 !important;
  position: relative !important;
  overflow: hidden !important;
  border-top: none !important;
}

.tech-specs-card {
  background: linear-gradient(180deg, #10144f 0%, #0c0f3d 100%) !important;
  border: 1px solid rgba(144, 160, 255, 0.28) !important;
  border-radius: 16px !important;
  padding: 34px 38px !important;
  box-shadow: 0 26px 70px -15px rgba(0, 2, 35, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  margin-bottom: 30px !important;
  color: #e2e7ff !important;
}

.specs-header {
  border-bottom: 1px solid rgba(144, 160, 255, 0.16) !important;
  padding-bottom: 18px !important;
  margin-bottom: 24px !important;
}

.specs-eyebrow {
  color: #9aa8f5 !important;
}

.specs-title-wrap h3 {
  color: #ffffff !important;
}

.specs-badge {
  background: rgba(80, 96, 236, 0.25) !important;
  border: 1px solid rgba(144, 160, 255, 0.35) !important;
  color: #9bb0ff !important;
}

.sc-label {
  color: #8f9cd3 !important;
}

.fmt-pill {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(144, 160, 255, 0.2) !important;
  color: #cdd5ff !important;
}

.fmt-pill--accent {
  background: rgba(80, 96, 236, 0.25) !important;
  border-color: rgba(144, 160, 255, 0.45) !important;
  color: #93a4ff !important;
}

.sc-tags span:not(.fmt-pill) {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(144, 160, 255, 0.2) !important;
  color: #cdd5ff !important;
}

.sc-text {
  color: #b7bfe8 !important;
}

.compare-cta {
  background: linear-gradient(135deg, rgba(80, 96, 236, 0.18) 0%, rgba(139, 92, 246, 0.1) 100%), #0c0f38 !important;
  border: 1px solid rgba(144, 160, 255, 0.35) !important;
  border-radius: 14px !important;
  padding: 34px 40px !important;
  box-shadow: 0 20px 50px -10px rgba(0, 2, 35, 0.5) !important;
  margin-top: 0 !important;
}

.cta-kicker {
  color: #a7b5ff !important;
}

.cta-copy h3 {
  color: #ffffff !important;
}

.cta-copy p {
  color: #b7bdeb !important;
}

.cta-actions .button {
  background: #ffffff !important;
  color: var(--navy) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 18px rgba(255, 255, 255, 0.2) !important;
  border: 1px solid #ffffff !important;
}

.cta-actions .button:hover {
  background: #e3e8ff !important;
  color: var(--navy) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 22px rgba(255, 255, 255, 0.3) !important;
}

.cta-subtext {
  color: #8c97ca !important;
}

@media (max-width: 700px) {
  .speakers-section,
  .cta-section {
    padding: 58px 0 !important;
  }
}

/* ==========================================================================
   Responsive Mobile Experience & Navigation Drawer
   ========================================================================== */
html, body {
  overflow-x: clip !important;
  width: 100% !important;
}

body.menu-open {
  overflow: hidden !important;
  touch-action: none !important;
}

.site-header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgba(247, 248, 253, 0.94) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--line) !important;
}

/* Scenario card h3 in single line */
.scenario-card h3 {
  white-space: nowrap !important;
  font-size: clamp(14.5px, 1.25vw, 17px) !important;
}
@media (max-width: 900px) {
  .scenario-card h3 {
    font-size: clamp(15px, 4.4vw, 18px) !important;
    white-space: nowrap !important;
  }
}

/* Mobile Hamburger Button */
.mobile-menu-toggle {
  display: none;
}

@media (max-width: 900px) {
  .site-header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }
  .site-header .header nav {
    display: none !important;
  }

  .mobile-menu-toggle {
    display: inline-flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    background: rgba(80, 96, 236, 0.08) !important;
    border: 1px solid rgba(80, 96, 236, 0.22) !important;
    cursor: pointer !important;
    transition: background .18s ease, border-color .18s ease !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }

  .mobile-menu-toggle:hover {
    background: rgba(80, 96, 236, 0.16) !important;
    border-color: rgba(80, 96, 236, 0.4) !important;
  }

  .mobile-menu-toggle .menu-bar {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    background: var(--navy) !important;
    border-radius: 2px !important;
    transition: transform .25s ease, opacity .25s ease !important;
  }

  .mobile-menu-toggle.is-active .menu-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg) !important;
  }

  .mobile-menu-toggle.is-active .menu-bar:nth-child(2) {
    opacity: 0 !important;
  }

  .mobile-menu-toggle.is-active .menu-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg) !important;
  }
}

/* Mobile Navigation Drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99999;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}

.mobile-nav.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 28, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mobile-nav-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(84vw, 360px);
  background: #0c0f38;
  border-left: 1px solid rgba(144, 160, 255, 0.22);
  box-shadow: -15px 0 45px rgba(0, 2, 35, 0.6);
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  padding: 22px 20px 24px 22px;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav.is-open .mobile-nav-panel {
  transform: translateX(0);
}

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(144, 160, 255, 0.16);
  margin-bottom: 16px;
  flex-shrink: 0;
}

.mobile-nav-header .brand {
  font-size: 26px !important;
  gap: 6px !important;
  color: #fff !important;
  text-decoration: none !important;
}

.mobile-nav-header .brand img {
  width: 34px !important;
  height: 34px !important;
}

.mobile-nav-header .brand-dot {
  color: #9aa7ff !important;
}

.mobile-nav-close {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(144, 160, 255, 0.2);
  color: #e2e8ff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .18s ease, color .18s ease;
  padding: 0;
}

.mobile-nav-close:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.mobile-nav-links a {
  display: block;
  padding: 12px 14px;
  font-size: 15.5px;
  font-weight: 500;
  color: #c9d2f8;
  text-decoration: none;
  border-radius: 10px;
  transition: background .18s ease, color .18s ease, padding-left .18s ease;
}

.mobile-nav-links a:hover,
.mobile-nav-links a:active {
  background: rgba(80, 96, 236, 0.22);
  color: #ffffff;
  padding-left: 18px;
}

.mobile-nav-footer {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(144, 160, 255, 0.16);
  margin-top: 20px;
  flex-shrink: 0;
}

.mobile-nav-footer .lang-switch {
  display: inline-flex;
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(144, 160, 255, 0.22);
  border-radius: 8px;
  padding: 6px 12px;
  gap: 8px;
  font-size: 13.5px;
}

.mobile-nav-footer .lang-btn {
  color: #a7b5ff;
  text-decoration: none;
}

.mobile-nav-footer .lang-btn.is-active {
  color: #ffffff;
  font-weight: 700;
}

.mobile-nav-footer .lang-divider {
  color: rgba(144, 160, 255, 0.4);
}

.mobile-nav-footer .button {
  width: 100% !important;
  justify-content: center !important;
  padding: 13px 18px !important;
  font-size: 14.5px !important;
  background: #ffffff !important;
  color: var(--navy) !important;
  border: 1px solid #ffffff !important;
  box-shadow: 0 4px 18px rgba(255, 255, 255, 0.2) !important;
}

/* Header Bar refinements on mobile */
@media (max-width: 900px) {
  .site-header .header {
    height: 66px !important;
    gap: 12px !important;
  }
  .header-actions {
    gap: 10px !important;
  }
}

@media (max-width: 500px) {
  .wrap {
    width: calc(100% - 28px) !important;
  }
  .site-header .header {
    height: 60px !important;
  }
  .brand {
    font-size: 24px !important;
    gap: 5px !important;
  }
  .brand img {
    width: 32px !important;
    height: 32px !important;
  }
  .header-download {
    padding: 7px 11px !important;
    font-size: 13px !important;
    gap: 6px !important;
  }
  .header-download svg {
    width: 15px !important;
    height: 15px !important;
  }
  .header-actions .lang-switch {
    display: none !important;
  }
}

/* Section 01 / Hero mobile refinements */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    gap: 20px !important;
    padding-top: 28px !important;
    padding-bottom: 36px !important;
  }
  .hero-visual {
    display: none !important;
  }
  .hero h1 {
    font-size: clamp(23px, 6.7vw, 36px) !important;
    white-space: nowrap !important;
    line-height: 1.15 !important;
    letter-spacing: -.03em !important;
    margin: 14px 0 14px !important;
  }
  .hero h1 br {
    display: none !important;
  }
  html:not([lang="ru"]) .hero h1 {
    font-size: clamp(23px, 6.2vw, 34px) !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    color: #10123f !important;
  }
  html:not([lang="ru"]) .hero h1 br {
    display: inline !important;
  }
  html:not([lang="ru"]) .hero h1 > span {
    color: var(--accent) !important;
  }
  .hero-description {
    font-size: clamp(16px, 3.8vw, 20px) !important;
    line-height: 1.45 !important;
  }
  .hero-detail {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-top: 20px !important;
  }
  .hero-actions .button {
    width: 100% !important;
    justify-content: center !important;
    padding: 15px 18px !important;
    box-sizing: border-box !important;
  }
  .hero-actions .text-link {
    justify-content: center !important;
    padding: 8px 0 !important;
  }
  .hero-caption {
    margin-top: 16px !important;
    font-size: 13px !important;
  }
}

/* Section 02 / Features & Subtitles */
@media (max-width: 900px) {
  details.feature {
    padding: 20px 20px 18px 20px !important;
  }
  details.feature h3 {
    font-size: 20px !important;
  }
}

@media (max-width: 500px) {
  details.feature {
    padding: 18px 16px 16px 16px !important;
    border-radius: 14px !important;
  }
  details.feature h3 {
    font-size: 18px !important;
  }
  .feature-top {
    margin-bottom: 14px !important;
  }
}

/* Section 03 / Inside Slysh! (Proportionally Scaled Device & Full-Width Native Tabs) */
@media (max-width: 900px) {
  .showcase-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .showcase-sidebar {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .showcase-stage {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .mockup-ambient-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border-radius: 13px !important;
  }
  .showcase-device {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .showcase-preview {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  .showcase-preview img,
  #gallery-image {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
  }
  .showcase-tabs {
    display: flex !important;
    flex-direction: column !important;
    overflow-x: visible !important;
    gap: 8px !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .showcase-tab {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    text-align: left !important;
  }
  .showcase-tab[aria-selected="true"] {
    padding: 13px 14px 14px 14px !important;
  }
  .s-tab-top {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .s-tab-title {
    font-size: 14.5px !important;
    font-weight: 600 !important;
  }
  .s-tab-badge {
    margin-left: auto !important;
    font-size: 9.5px !important;
  }
  .showcase-export-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .export-button {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Sections 04-08: Editor, Meetings, Speakers, YouTube, Batch Layouts on Mobile */
@media (max-width: 900px) {
  .editor-layout,
  .split-layout,
  .speakers-grid,
  .youtube-layout,
  .batch-layout {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .editor-sidebar,
  .split-copy,
  .speakers-copy,
  .youtube-features,
  .batch-features {
    width: 100% !important;
    max-width: 100% !important;
  }

  .editor-visual,
  .split-visual,
  .dialogue-stage,
  .dialogue-demo,
  .youtube-visual-wrap,
  .batch-visual {
    width: 100% !important;
    max-width: 100% !important;
  }

  .editor-visual .editor-screen-btn,
  .split-visual .editor-screen-btn,
  .youtube-visual-wrap .editor-screen-btn,
  .batch-visual .editor-screen-btn {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1024 / 665 !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  .dialogue-demo {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .dialogue-stage {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Section 09 / Formats & Routing Diagram on mobile */
@media (max-width: 900px) {
  .format-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .routing-diagram {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .routing-arrow {
    text-align: center !important;
    transform: rotate(90deg) !important;
    margin: 4px 0 !important;
  }
  .routing-source,
  .routing-destination {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 550px) {
  .format-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Section 10 / Engines & Providers */
@media (max-width: 900px) {
  .control-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .mode-card {
    padding-left: 20px !important;
    padding-right: 20px !important;
    min-height: auto !important;
  }
  .provider-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* Section 11 / Comparison */
@media (max-width: 900px) {
  .compare-columns {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .compare-cta {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 24px 20px !important;
    gap: 20px !important;
  }
  .cta-actions {
    width: 100% !important;
  }
  .cta-actions .button {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Section 12 / Author & Support */
@media (max-width: 750px) {
  .support-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
  .author-card {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 22px 18px !important;
  }
  .author-portrait {
    width: min(220px, 68vw) !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    margin: 0 auto !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }
  .author-portrait img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
  }
  .author-bio {
    text-align: left !important;
    width: 100% !important;
  }
  .author-bio-header {
    text-align: center !important;
  }
  .donation-card {
    padding: 22px 18px !important;
  }
  .donation-presets {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

@media (max-width: 480px) {
  .donation-presets {
    grid-template-columns: 1fr !important;
  }
}

/* Typography and headings on mobile */
@media (max-width: 700px) {
  h2 {
    font-size: clamp(26px, 6.5vw, 36px) !important;
    line-height: 1.15 !important;
  }
  .section-heading > p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  .section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* ==========================================================================
   Sticky Back to Top Button
   ========================================================================== */
.scroll-top-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 990;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(12, 15, 56, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(144, 160, 255, 0.32);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.2px;
  box-shadow: 0 10px 30px -5px rgba(9, 11, 105, 0.35), 0 4px 12px rgba(80, 96, 236, 0.2);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, visibility 0.25s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.scroll-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top-btn:hover {
  background: var(--accent);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-3px);
  box-shadow: 0 14px 36px -6px rgba(80, 96, 236, 0.45), 0 6px 16px rgba(9, 11, 105, 0.25);
  color: #ffffff;
}

.scroll-top-btn:active {
  transform: translateY(-1px) scale(0.97);
}

.scroll-top-btn svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.scroll-top-btn:hover svg {
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .scroll-top-btn {
    bottom: 20px;
    right: 18px;
    padding: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
  }
  .scroll-top-text {
    display: none;
  }
  .scroll-top-btn svg {
    width: 20px;
    height: 20px;
  }
}

/* ==========================================================================
   Hero Section: 3D Isometric Stand with Clean Physical Chassis Frame
   ========================================================================== */
.hero {
  align-items: start !important;
}

.hero-stage {
  perspective: 2450px !important;
  transform-style: preserve-3d !important;
  position: relative;
  width: 100%;
  animation: none !important;
}

.hero-3d-wrap {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transform: perspective(2450px) rotateX(10deg) rotateY(-17deg) rotateZ(0.5deg) scale(0.92) translateY(8px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 18px;
  will-change: transform;
}

.hero-3d-wrap .hero-glow {
  position: absolute;
  inset: -22px -28px;
  background: radial-gradient(ellipse at 50% 50%, rgba(56, 189, 248, 0.45) 0%, rgba(80, 96, 236, 0.38) 45%, transparent 72%);
  filter: blur(48px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.75;
  border-radius: 30px;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateZ(-20px);
}

.hero-3d-wrap:hover .hero-glow {
  opacity: 0.95;
  transform: translateZ(-20px) scale(1.04);
}

/* Clean Physical 3D Chassis Bezel */
.hero-3d-chassis {
  position: relative;
  z-index: 2;
  border-radius: 18px;
  padding: 9px;
  background: linear-gradient(145deg, #ffffff 0%, #edf2fc 45%, #d8e2f8 100%);
  border: 1px solid rgba(144, 160, 255, 0.45);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 -1px 2px rgba(80, 96, 236, 0.18) inset,
    0 4px 10px -2px rgba(9, 11, 105, 0.08),
    0 24px 60px -12px rgba(9, 11, 105, 0.20),
    0 10px 24px -4px rgba(80, 96, 236, 0.14);
  transform-style: preserve-3d;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.hero-3d-wrap:hover .hero-3d-chassis {
  border-color: rgba(80, 96, 236, 0.6);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 -1px 2px rgba(80, 96, 236, 0.24) inset,
    0 6px 14px -2px rgba(9, 11, 105, 0.10),
    0 32px 75px -14px rgba(9, 11, 105, 0.24),
    0 14px 30px -4px rgba(80, 96, 236, 0.18);
}

.hero-3d-chassis .hero-screen.app-window-frame {
  position: relative;
  z-index: 2;
  background: #ffffff !important;
  border: 1px solid rgba(80, 96, 236, 0.20) !important;
  border-radius: 11px !important;
  box-shadow: inset 0 1px 2px rgba(9, 11, 105, 0.05), 0 2px 5px rgba(9, 11, 105, 0.06) !important;
  overflow: hidden !important;
  transform: none !important;
  width: 100%;
}

.hero-caption {
  margin-top: 6px !important;
}

/* ==========================================================================
   Legal Documents & Compliance (152-FZ, Terms, Offer, Consent)
   ========================================================================== */
.legal-page-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.legal-header {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 50;
}

.legal-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 550;
  color: var(--navy);
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  transition: all 0.2s ease;
}

.legal-back-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--pale);
}

.legal-main {
  flex: 1;
  padding: 48px 0 80px;
}

.legal-container {
  max-width: 860px;
  margin: 0 auto;
}

.legal-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 48px 52px;
  box-shadow: 0 16px 45px -10px rgba(9, 11, 105, 0.06), 0 4px 14px -2px rgba(80, 96, 236, 0.03);
}

.legal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--pale);
  border: 1px solid rgba(80, 96, 236, 0.25);
  padding: 4px 10px;
  border-radius: 5px;
  margin-bottom: 16px;
}

.legal-title {
  font-size: clamp(28px, 3.8vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--navy);
  margin-bottom: 14px;
}

.legal-date {
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.legal-toc {
  background: #f7f9fe;
  border: 1px solid #dce4f8;
  border-radius: 12px;
  padding: 24px 28px;
  margin-bottom: 40px;
}

.legal-toc-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.legal-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}

.legal-toc-list li a {
  font-size: 13.5px;
  color: #3b4372;
  transition: color 0.15s ease;
  display: inline-block;
  line-height: 1.45;
}

.legal-toc-list li a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-article h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin: 36px 0 16px;
  padding-top: 24px;
  border-top: 1px solid #edf0fa;
}

.legal-article h2:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.legal-article h3 {
  font-size: 17px;
  font-weight: 650;
  color: var(--ink);
  margin: 20px 0 10px;
}

.legal-article p {
  font-size: 15px;
  line-height: 1.75;
  color: #333959;
  margin-bottom: 16px;
}

.legal-article ul, .legal-article ol {
  font-size: 15px;
  line-height: 1.75;
  color: #333959;
  margin: 0 0 18px 22px;
  padding: 0;
}

.legal-article li {
  margin-bottom: 8px;
}

.legal-callout {
  background: #f3f6ff;
  border-left: 4px solid var(--accent);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
  margin: 24px 0;
}

.legal-callout p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--navy);
  margin: 0;
}

.legal-callout strong {
  color: var(--navy);
  font-weight: 650;
}

.legal-requisites {
  background: #f8faff;
  border: 1px solid #d5def5;
  border-radius: 12px;
  padding: 22px 26px;
  margin-top: 40px;
}

.legal-requisites h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 12px;
}

.legal-requisites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 20px;
  font-size: 13.5px;
  color: #40486e;
}

.legal-requisite-item span {
  display: block;
  font-size: 11.5px;
  color: #7b84a6;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.legal-requisite-item strong {
  color: var(--ink);
  font-weight: 600;
}

/* Cookie Banner */
.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 980px;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(80, 96, 236, 0.35);
  box-shadow: 0 20px 50px -10px rgba(9, 11, 105, 0.22), 0 6px 18px rgba(16, 18, 63, 0.08);
  border-radius: 16px;
  padding: 20px 24px;
  transition: opacity 0.3s ease, transform 0.3s ease;
  will-change: transform, opacity;
}

.cookie-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.cookie-banner-text {
  flex: 1;
  font-size: 13.5px;
  line-height: 1.6;
  color: #3b4266;
}

.cookie-banner-text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 550;
}

.cookie-banner-text a:hover {
  color: var(--navy);
}

.cookie-banner-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.cookie-btn {
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 7px;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.cookie-btn-accept {
  background: var(--navy);
  color: #ffffff;
  border: 1px solid var(--navy);
}

.cookie-btn-accept:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(80, 96, 236, 0.3);
}

.cookie-btn-decline {
  background: #ffffff;
  color: #4a5276;
  border: 1px solid #c9d2ee;
}

.cookie-btn-decline:hover {
  background: var(--pale);
  color: var(--navy);
  border-color: #adbced;
}

/* Footer Legal Enhancement */
.footer-legal-block {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e1e6f5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 12.5px;
  color: #7982a4;
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-legal-links a {
  color: #555e84;
  transition: color 0.15s ease;
}

.footer-legal-links a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-legal-contact a {
  color: var(--accent);
  font-weight: 500;
}

@media (max-width: 800px) {
  .legal-card {
    padding: 32px 24px;
    border-radius: 12px;
  }
  .legal-toc-list {
    grid-template-columns: 1fr;
  }
  .cookie-banner-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .cookie-banner-actions {
    justify-content: flex-end;
  }
  .cookie-banner-actions .cookie-btn {
    flex: 1;
    text-align: center;
  }
  .footer-legal-block {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================================
   GitHub Integration: Subtle Links and Accent Specs Banner
   ========================================================= */

/* Header: subtle link next to download button */
.header-github-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #dce4fb;
  background: #f8faff;
  font-size: 13px;
  font-weight: 600;
  color: #4f587d;
  text-decoration: none;
  transition: all 0.18s ease;
}
.header-github-link:hover {
  background: #ffffff;
  border-color: #cad7fa;
  color: var(--navy);
  box-shadow: 0 2px 8px rgba(9, 11, 105, 0.06);
}
.header-github-link svg {
  color: var(--navy);
}

@media (max-width: 680px) {
  .header-github-link span {
    display: none;
  }
  .header-github-link {
    padding: 8px 10px;
  }
}
@media (max-width: 480px) {
  .header-github-link {
    display: none;
  }
}

/* Hero: quiet link in action buttons row */
.hero-github-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #556086;
  text-decoration: none;
  background: #f3f6fd;
  border: 1px solid #d8e2f8;
  transition: all 0.18s ease;
}
.hero-github-link:hover {
  background: #ffffff;
  border-color: #cad7fa;
  color: var(--navy);
  box-shadow: 0 2px 8px rgba(9, 11, 105, 0.06);
}
.hero-github-link svg {
  color: var(--navy);
}

/* Mobile Nav Drawer: GitHub row */
.mobile-nav-github {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 16px;
  border-radius: 8px;
  border: 1px solid #dce4fb;
  background: #f8faff;
  font-size: 13.5px;
  font-weight: 600;
  color: #4f587d;
  text-decoration: none;
  transition: all 0.18s ease;
  margin-top: 8px;
  width: 100%;
  box-sizing: border-box;
}
.mobile-nav-github:hover {
  background: #ffffff;
  border-color: #cad7fa;
  color: var(--navy);
}

/* CTA: subtle repository link inside bottom card */
.cta-btn-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cta-github-subtle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 13px 18px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #bac2ee;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-decoration: none;
  transition: all 0.18s ease;
}
.cta-github-subtle:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}
.cta-github-subtle svg {
  color: #ffffff;
}

/* Accent GitHub Banner inside .tech-specs-card */
.specs-github-banner {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(144, 160, 255, 0.22);
}
.specs-gh-card {
  background: linear-gradient(135deg, rgba(14, 18, 47, 0.95) 0%, rgba(22, 27, 71, 0.9) 60%, rgba(31, 39, 94, 0.85) 100%);
  border: 1px solid rgba(144, 160, 255, 0.35);
  border-radius: 12px;
  padding: 24px 28px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  box-shadow: 0 10px 28px -5px rgba(0, 2, 35, 0.4);
  position: relative;
  overflow: hidden;
}
.sgh-main {
  max-width: 650px;
}
.sgh-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.sgh-tag {
  font-family: var(--font, sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #34d399;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 2px 8px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sgh-tag .pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 6px #34d399;
}
.sgh-pill {
  font-family: var(--font, sans-serif);
  font-size: 11px;
  font-weight: 600;
  color: #bac2ee;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 2px 8px;
  border-radius: 5px;
}
.sgh-main h4 {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: #ffffff;
  letter-spacing: -0.3px;
}
.sgh-main p {
  font-size: 13.5px;
  line-height: 1.6;
  color: #c0c8f2;
  margin: 0;
}
.sgh-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.sgh-btn-primary {
  background: #ffffff;
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
  padding: 13px 22px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: all 0.18s ease;
  white-space: nowrap;
}
.sgh-btn-primary:hover {
  background: #f0f4fe;
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.sgh-sub-note {
  font-size: 12px;
  color: #9aa7dd;
  white-space: nowrap;
}

/* Author section Telegram contact action */
.author-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.author-tg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(36, 161, 222, 0.08);
  border: 1.5px solid #24a1de;
  color: var(--navy);
  padding: 9px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  transition: all 0.2s ease;
  line-height: 1;
}
.author-tg-btn:hover {
  background: #24a1de;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(36, 161, 222, 0.28);
}
.author-tg-btn svg {
  width: 17px;
  height: 17px;
  fill: #24a1de;
  flex-shrink: 0;
  transition: fill 0.2s ease;
}
.author-tg-btn:hover svg {
  fill: #ffffff;
}

@media (min-width: 901px) {
  .sgh-action {
    width: 290px;
    align-items: center;
  }
  .sgh-btn-primary {
    width: 290px !important;
    height: 54px !important;
    padding: 0 24px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    gap: 10px !important;
  }
  .sgh-sub-note {
    text-align: center;
  }
  .compare-cta .cta-actions {
    width: 290px;
    align-items: center;
    margin-right: 27px;
  }
  .compare-cta .button {
    width: 290px !important;
    height: 54px !important;
    padding: 0 24px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    gap: 10px !important;
  }
  .sgh-btn-primary svg,
  .compare-cta .button svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0 !important;
  }
  .cta-subtext {
    text-align: center;
  }
}

@media (max-width: 900px) {
  .specs-gh-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .sgh-action {
    align-items: flex-start;
    width: 100%;
  }
  .sgh-btn-primary,
  .compare-cta .button {
    width: 100%;
    height: 52px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
  }
}

/* =========================================================
   Modern Full-Width Streamlined Footer (Variant 3 Adapted)
   ========================================================= */
.footer-wrap {
  background: #f0f4fd;
  border-top: 1px solid #dbe2f6;
  padding: 52px 0 28px;
}
.footer-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 26px;
  border-bottom: 1px solid #dbe2f6;
  flex-wrap: wrap;
}
.footer-brand-group {
  display: flex;
  align-items: center;
  gap: 18px;
}
.footer-brand-group .brand {
  font-size: 34px;
  gap: 8px;
}
.footer-tagline-text {
  font-size: 14px;
  color: #687192;
  border-left: 1px solid #cad4f3;
  padding-left: 18px;
  margin: 0;
  line-height: 1.5;
}
.footer-quick-chips {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.footer-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 7px;
  background: #ffffff;
  border: 1px solid #cad3f0;
  color: #0c0f38;
  text-decoration: none;
  transition: all 0.15s ease;
}
.footer-chip-btn:hover {
  background: #090b69;
  border-color: #090b69;
  color: #ffffff;
}
.footer-chip-btn svg {
  flex-shrink: 0;
}
.footer-columns-grid {
  display: grid;
  grid-template-columns: 1.15fr 1.1fr 1.35fr;
  gap: 44px;
  padding: 34px 0 38px;
}
.footer-col-header-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #090b69;
  margin-bottom: 14px;
}
.footer-about-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #687192;
  margin: 0 0 14px;
}
.footer-badges-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.footer-badge-tag {
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  background: #e6ecfc;
  border: 1px solid #d4defa;
  border-radius: 6px;
  color: #3b4572;
}
.footer-nav-double-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}
.footer-nav-double-grid a {
  font-size: 14px;
  color: #555e84;
  text-decoration: none;
  transition: color 0.15s ease;
  display: inline-flex;
  align-items: center;
}
.footer-nav-double-grid a:hover {
  color: #5060ec;
}
.footer-compliance-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-compliance-list a {
  color: #555e84;
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.15s ease;
  display: inline-flex;
  align-items: center;
}
.footer-compliance-list a:hover {
  color: #5060ec;
}
.footer-inquiries-note {
  font-size: 12.5px;
  color: #6d7596;
  margin-top: 12px;
  line-height: 1.5;
}
.footer-inquiries-note a {
  color: #5060ec;
  font-weight: 600;
  text-decoration: none;
}
.footer-inquiries-note a:hover {
  text-decoration: underline;
}
.footer-sub-bottom-bar {
  border-top: 1px solid #dbe2f6;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 12.5px;
  color: #838ca9;
  flex-wrap: wrap;
}

@media (max-width: 1000px) {
  .footer-columns-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media (max-width: 640px) {
  .footer-wrap {
    padding: 38px 0 24px;
  }
  .footer-top-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 20px;
  }
  .footer-brand-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .footer-tagline-text {
    border-left: none;
    padding-left: 0;
  }
  .footer-quick-chips {
    width: 100%;
    gap: 8px;
  }
  .footer-chip-btn {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
    padding: 8px 10px;
    font-size: 12.5px;
  }
  .footer-columns-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 24px 0 28px;
  }
  .footer-nav-double-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
  }
  .footer-sub-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-top: 18px;
  }
}


/* ==========================================================================
   RTL (Right-to-Left) Support for Arabic (ar)
   ========================================================================== */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
  font-family: 'Segoe UI', Tahoma, 'Noto Sans Arabic', 'Geeza Pro', Arial, sans-serif;
}
[dir="rtl"] .lmi-name {
  text-align: right;
}
[dir="rtl"] .lang-menu {
  right: auto;
  left: 0;
}
[dir="rtl"] .hero-screen {
  text-align: right;
}
[dir="rtl"] .hero-screen .zoom-cue {
  right: auto;
  left: 18px;
}
[dir="rtl"] .footer-tagline-text {
  border-left: none;
  border-right: 1px solid var(--line);
  padding-left: 0;
  padding-right: 14px;
}
[dir="rtl"] .caption-arrow {
  display: inline-block;
  transform: scaleX(-1);
}
[dir="rtl"] .card-link svg {
  transform: scaleX(-1);
}