/*
Theme Name: theme-final new
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/


/* =====================================================================
   SMART SIGNAL — BRAZIL THEME (FULL FILE)
   - Dark background.jpg supported (adds premium BR overlay)
   - Fixes mobile "shift right" (no horizontal overflow)
   - Keeps your existing components (glass cards, popups, VIP, result UI)
   ===================================================================== */

/* =========================
   0) Reset + Safe defaults
========================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
html, body { overflow-x: hidden; }
.app-wrapper { width: 100%; overflow-x: clip; }

/* =========================
   1) Tokens (Brazil vibe)
========================= */
:root{
  /* BR palette */
  --br-green: #00E676;
  --br-green2:#00C853;
  --br-yellow:#FFD54F;
  --br-blue:  #00B0FF;

  /* base */
  --bg0:#05080f;
  --bg1:#070c18;

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);

  --glass: rgba(255,255,255,.055);
  --glass2: rgba(255,255,255,.10);
  --stroke: rgba(255,255,255,.12);
  --stroke2: rgba(255,255,255,.18);

  --radius: 16px;
  --radius2: 22px;

  --shadow: 0 18px 60px rgba(0,0,0,.50);
  --shadow2: 0 10px 30px rgba(0,0,0,.36);

  /* Your existing tokens (kept, unified) */
  --cp-bg:#0e1621;--cp-panel:#1c2532;--cp-panel-2:#111a24;--cp-text:#e3eefc;--cp-muted:#8aa4c0;
  --cp-accent:#3ba3ff;--cp-border:#243244;--cp-hover:#223044;--cp-shadow:0 10px 30px rgba(0,0,0,.45);

  --ex-panel:#1c2532;--ex-panel-2:#111a24;--ex-text:#e3eefc;--ex-muted:#8aa4c0;
  --ex-border:#243244;--ex-accent:#3ba3ff;--ex-hover:#223044;--ex-shadow:0 10px 30px rgba(0,0,0,.45);

  --md-panel:#1c2532;--md-panel-2:#111a24;--md-text:#e3eefc;--md-muted:#8aa4c0;
  --md-border:#243244;--md-accent:#3ba3ff;--md-hover:#223044;--md-shadow:0 10px 30px rgba(0,0,0,.45);
  --md-badge:#2a3750;

  --c-text:#eef3fb;
  --c-muted:#aebbd1;

  --vip-bg:#0e1621;
  --vip-panel:#111a24;
  --vip-br:#233042;
  --vip-text:#e9f2ff;
  --vip-muted:#9fb1c8;
  --vip-accent:#59e1b7;
  --vip-gold:#ffd76a;
}

/* =========================
   2) Base + Background (dark jpg + BR overlay)
========================= */
body{
  font-family: Arial, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, sans-serif;
  color: var(--text);
  background: none;
}

/* Background image layer */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -9999;
  pointer-events: none;
  background: url('../images/background.jpg') no-repeat center / cover;
  transform: translateZ(0);
}

/* Premium BR overlay (optimized for dark image) */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -9998;
  pointer-events: none;
  background:
    radial-gradient(1100px 760px at 12% -10%, rgba(0,230,118,.26), transparent 55%),
    radial-gradient(900px 620px at 88% 12%, rgba(0,176,255,.20), transparent 60%),
    radial-gradient(900px 650px at 16% 98%, rgba(255,213,79,.18), transparent 62%),
    linear-gradient(180deg, rgba(5,8,15,.58), rgba(7,12,24,.86));
}

.app-wrapper{
  min-height: 100vh;
  padding: 16px;
  background: transparent;
}

/* =========================
   3) Header (clean, BR vibe, no overflow)
========================= */
.header{
  position: sticky;
  top: 0;
  z-index: 999;
  margin: 0 auto 14px;
  padding: 10px 0;

  background: rgba(5,8,15,.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.10);

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.logo{
  height: 42px;
  width: auto;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.35));
}

/* Bonus CTA block */
.bonus-welcome-icon,
.bonus-welcome-icon:hover,
.bonus-welcome-icon:active,
.bonus-welcome-icon:focus { text-decoration: none; }

.bonus-welcome-icon{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(240px 120px at 20% 0%, rgba(255,213,79,.24), transparent 60%),
    radial-gradient(260px 140px at 90% 30%, rgba(0,230,118,.22), transparent 65%),
    linear-gradient(135deg, rgba(0,230,118,.16), rgba(0,176,255,.10));

  box-shadow: var(--shadow2);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, filter .15s ease;

  transform: none !important;  /* critical mobile fix */
  min-width: 0;
  max-width: 100%;
}

.bonus-welcome-icon:focus-visible{
  outline: 2px solid rgba(0,230,118,.55);
  outline-offset: 2px;
}

.bonus-welcome-icon:hover{
  border-color: rgba(0,230,118,.42);
  box-shadow: 0 0 18px rgba(0,230,118,.14), 0 0 18px rgba(255,213,79,.12), var(--shadow2);
  transform: translateY(-1px);
}

.bonus-welcome-icon:active{ transform: translateY(0); }

.bonus-welcome-icon .bonus{
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  transition: transform .18s ease;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
}
.bonus-welcome-icon:hover .bonus{ transform: scale(1.12); }

/* text */
.h-btn__end{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.h-btn__text{
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.h-btn__text-small{
  color: rgba(255,255,255,.76);
  font-size: 12px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* =========================
   4) Main layout + headings (kept)
========================= */
.main{display:flex;flex-direction:column;align-items:center;gap:20px;padding:60px 16px 0}
.main-heading{color:#fff;text-align:center;margin-top:-20px;margin-bottom:-10px}
.main-heading h1{font-size:27px;font-weight:800;margin-bottom:6px;letter-spacing:-.2px}
.main-heading p{font-size:15px;color:#ccc;opacity:.72}

/* =========================
   5) Glass Card (form) — polished BR
========================= */
.glass-card{
  width:100%;max-width:420px;color:#fff;
  backdrop-filter:blur(16px);
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:12px;
  box-shadow:0 16px 52px rgba(0,0,0,.42);
  transition:opacity .25s ease, filter .25s ease;
}

.field-block{display:flex;flex-direction:column;gap:4px;cursor:pointer}
.field-block label{font-size:14px;color:rgba(255,255,255,.76)}
.field-block input{
  padding:10px 12px;font-size:15px;border-radius:10px;color:#fff;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.12);
  pointer-events:none;
}

/* Submit button */
.submit-btn{
  margin-top:10px;padding:12px;font-size:15px;border-radius:12px;border:0;font-weight:900;
  cursor:not-allowed;background:#2c3e50;color:#9aa5b3;transition:.2s;
}
.submit-btn.active{
  background: linear-gradient(135deg, rgba(0,230,118,.92), rgba(255,213,79,.55));
  color:#062018;
  cursor:pointer;
  box-shadow: 0 10px 30px rgba(0,230,118,.18);
}

/* =========================
   6) Glass Signal (analysis card) — polished BR
========================= */
.glass-signal{
  width:100%;max-width:420px;color:#fff;position:relative;z-index:2;
  backdrop-filter:blur(16px);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;
  box-shadow:0 16px 52px rgba(0,0,0,.40);
  transition:margin-top .28s ease, box-shadow .28s ease, transform .28s ease;
  will-change:margin-top,transform;
}

body.analysis-open .glass-signal{
  margin-top:calc(-1.02 * var(--raise, 0px));
  z-index:10; box-shadow:0 22px 70px rgba(0,0,0,.55);
}
body.analysis-open .glass-card{opacity:.65;filter:blur(1px);pointer-events:none}

.signal-top{display:flex;justify-content:space-between;align-items:center;padding:6px 6px 10px;border-bottom:1px solid #243244}
.signal-title{display:flex;gap:8px;align-items:center;font-weight:800}
.signal-title img{width:16px;height:16px}
.signal-title span,.signal-model span{font-size:15px;color:#cfd9e6}

.signal-bottom{font-size:15px;color:#cfd9e6;padding-top:10px;width:100%;text-align:center}
.signal-bottom svg.wave-loader{width:28px;height:28px;stroke:#fff;transition:opacity .2s ease, transform .2s ease}

/* default state */
.sig-analysis{display:none}
body.analysis-open .wave-loader{display:none}
body.analysis-open .sig-analysis{display:block}
.wave-loader{transition:opacity .2s ease, transform .2s ease}
body.analysis-open .wave-loader{opacity:0;transform:scale(.96)}

/* =========================
   7) FAQ (kept + polish)
========================= */
.faq-section{max-width:420px;margin:40px auto 0;color:#fff}
.faq-title{font-size:24px;font-weight:900;margin-bottom:16px;text-align:left}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(16px);
  border-radius:12px;overflow:hidden;transition:.3s ease;
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
}
.faq-question{
  width:100%;padding:14px 16px;background:none;border:0;color:#fff;
  font-size:15px;font-weight:600;display:flex;justify-content:space-between;align-items:center;cursor:pointer;
}
.arrow-icon{width:20px;height:20px;transition:transform .3s ease}
.faq-item.open .arrow-icon{transform:rotate(180deg)}
.faq-answer{
  max-height:0;opacity:0;padding:0 16px;font-size:14px;color:#c9d5e6;overflow:hidden;transition:.3s ease;
}
.faq-item.open .faq-answer{max-height:300px;opacity:1;padding:0 16px 14px}

/* =========================
   8) Language dropdown (kept)
========================= */
.lang-dropdown{position:absolute;top:100%;right:0;margin-top:8px}
.lang-btn{
  display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;
  background:rgba(255,255,255,.08);backdrop-filter:blur(12px);color:#fff;
  font-size:14px;font-weight:600;text-transform:uppercase;border:1px solid rgba(255,255,255,.12);
  cursor:pointer;transition:background .2s ease;
}
.lang-btn:hover{background:rgba(255,255,255,.12)}
.lang-flag{width:18px;height:18px;border-radius:50%;object-fit:cover}
.lang-caret{width:8px;height:6px;opacity:.7;transform-origin:50% 50%;transition:transform .2s ease}
.lang-dropdown.open .lang-caret{transform:rotate(180deg)}
.lang-menu{
  position:absolute;top:calc(100% + 6px);right:0;width:200px;max-height:260px;background:#fff;color:#000;
  border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.25);padding:8px 0;display:none;flex-direction:column;overflow-y:auto;z-index:1000;
}
.lang-menu.open{display:flex;animation:fadeIn .2s ease}
.lang-menu li{list-style:none}
.lang-menu button{
  display:flex;align-items:center;width:100%;background:none;border:0;padding:10px 16px;gap:10px;
  font-weight:600;font-size:14px;cursor:pointer;transition:background .15s ease;
}
.lang-menu button:hover{background:#f1f1f1}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* =========================
   9) Currency Pair Popup (kept)
========================= */
.cp-overlay{position:fixed;inset:0;background:rgba(4,10,16,.55);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:1000;padding:16px}
.cp-overlay[aria-hidden="false"]{display:flex}
.cp{width:100%;max-width:420px;background:var(--cp-panel);border:1px solid var(--cp-border);border-radius:16px;box-shadow:var(--cp-shadow);overflow:hidden;position:relative;color:var(--cp-text)}
.cp-header{padding:12px 12px 8px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 60%);border-bottom:1px solid var(--cp-border)}
.cp-tabs{display:flex;gap:8px}
.cp-tab{flex:1 1 auto;display:flex;align-items:center;justify-content:center;height:36px;border-radius:10px;background:var(--cp-panel-2);border:1px solid var(--cp-border);cursor:pointer;user-select:none}
.cp-tab[aria-selected="true"]{outline:2px solid var(--cp-accent);background:#0f2032}
.cp-tab img{width:18px;height:18px;display:block}
.cp-search-row{display:flex;gap:8px;align-items:center;margin-top:10px}
.cp-search{position:relative;flex:1 1 auto}
.cp-search input{width:100%;height:38px;padding:0 34px 0 36px;background:var(--cp-panel-2);color:var(--cp-text);border:1px solid var(--cp-border);border-radius:12px;outline:none}
.cp-search input::placeholder{color:var(--cp-muted)}
.cp-icon-left{position:absolute;left:10px;top:50%;transform:translateY(-50%);opacity:.8}
.cp-fav{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;background:var(--cp-panel-2);border:1px solid var(--cp-border);border-radius:12px;cursor:pointer}
.cp-fav[aria-pressed="true"]{outline:2px solid var(--cp-accent)}
.cp-headrow{display:grid;grid-template-columns:1fr 56px;gap:8px;padding:10px 12px;color:var(--cp-muted);font-size:12px;text-transform:uppercase;letter-spacing:.03em}
.cp-list{max-height:min(60vh,520px);overflow:auto;padding-bottom:10px}
.cp-item{display:grid;grid-template-columns:1fr 56px;gap:8px;align-items:center;height:44px;padding:0 12px;border-top:1px solid var(--cp-border)}
.cp-item:hover{background:var(--cp-hover)}
.cp-title{display:flex;align-items:center;gap:8px;min-width:0}
.cp-title .cp-star{width:18px;height:18px;opacity:.9;cursor:pointer}
.cp-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-market{text-align:right;color:var(--cp-muted);font-size:12.5px}

/* =========================
   10) Expiry Popup (kept)
========================= */
.ex-overlay{position:fixed;inset:0;background:rgba(4,10,16,.55);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:1000;padding:16px}
.ex-overlay[aria-hidden="false"]{display:flex}
.ex{width:100%;max-width:420px;background:var(--ex-panel);border:1px solid var(--ex-border);border-radius:18px;box-shadow:var(--ex-shadow);overflow:hidden;color:var(--ex-text)}
.ex-header{padding:12px 14px;border-bottom:1px solid var(--ex-border);background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 60%)}
.ex-title{font-weight:700}
.ex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px}
.ex-chip{
  height:40px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--ex-panel-2);
  border:1px solid var(--ex-border);color:var(--ex-text);font-weight:700;letter-spacing:.01em;cursor:pointer;user-select:none;
  transition:background .12s ease, outline-color .12s ease, transform .06s ease;
}
.ex-chip:hover{background:var(--ex-hover)}
.ex-chip:active{transform:translateY(1px)}
.ex-chip[aria-selected="true"]{outline:2px solid var(--ex-accent);background:#0f2032}
.ex-chip:focus-visible{outline:2px solid var(--ex-accent)}

/* =========================
   11) Model Popup (kept)
========================= */
.md-overlay{position:fixed;inset:0;background:rgba(4,10,16,.55);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:1000;padding:16px}
.md-overlay[aria-hidden="false"]{display:flex}
.md{width:100%;max-width:420px;background:var(--md-panel);border:1px solid var(--md-border);border-radius:18px;box-shadow:var(--md-shadow);overflow:hidden;color:var(--md-text)}
.md-header{padding:12px 14px;border-bottom:1px solid var(--md-border);background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 60%)}
.md-title{font-weight:700}
.md-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:12px}
.md-chip{
  min-height:56px;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;text-align:center;
  border-radius:12px;background:var(--md-panel-2);border:1px solid var(--md-border);color:var(--md-text);
  font-weight:700;letter-spacing:.01em;cursor:pointer;user-select:none;padding:6px 8px;
  transition:background .12s ease, outline-color .12s ease, transform .06s ease;
}
.md-chip:hover{background:var(--md-hover)}
.md-chip:active{transform:translateY(1px)}
.md-chip[aria-selected="true"]{outline:2px solid var(--md-accent);background:#0f2032}
.md-chip.is-disabled{opacity:.55;cursor:not-allowed;filter:saturate(.7);background:var(--md-panel-2);border-style:dashed}
.md-chip .md-badge{font-size:11px;line-height:1;color:var(--md-muted);background:var(--md-badge);border:1px solid var(--md-border);padding:4px 6px;border-radius:8px}

/* =========================
   12) Signal Steps + Progress (kept)
========================= */
.signal-model{color:#8aa4c0}
:root{
  --step-bg:rgba(20,24,31,.7);
  --step-br:rgba(120,140,180,.25);
  --step-next:rgba(140,160,200,.18);
  --step-active-grad:linear-gradient(135deg, rgba(86,161,255,.25), rgba(72,227,194,.25));
  --step-active-ring:#5ec7ff;
  --step-done:rgba(80,180,120,.18);
  --step-done-ring:#4ade80;
}
#sigSteps{display:grid;gap:10px}
#sigSteps .sig-step{
  display:flex;align-items:center;gap:12px;position:relative;
  background:var(--step-bg);border:1px solid var(--step-br);border-radius:14px;padding:14px 16px;
  backdrop-filter:blur(6px);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
#sigSteps .sig-step .icon{width:28px;height:28px;display:grid;place-items:center;flex:0 0 28px}
#sigSteps .sig-step .icon svg{width:22px;height:22px;opacity:.8}
#sigSteps .sig-step .check{width:24px;height:24px;display:grid;place-items:center;flex:0 0 24px}
#sigSteps .sig-step .check svg{width:18px;height:18px;opacity:0;transform:scale(.8);transition:.25s ease}
#sigSteps .sig-step > div{flex:1;min-width:0}
#sigSteps .sig-step b{font-weight:700;font-size:12px;letter-spacing:.2px}
#sigSteps .sig-step .sub{font-size:12px;opacity:.7}
#sigSteps .sig-step.is-next{background:linear-gradient(0deg,var(--step-next),var(--step-next)),var(--step-bg);border-color:rgba(120,140,180,.35)}
#sigSteps .sig-step.is-active{background:var(--step-active-grad),var(--step-bg);border-color:var(--step-active-ring);box-shadow:0 0 0 1px rgba(94,199,255,.25),0 8px 24px rgba(66,160,255,.12)}
#sigSteps .sig-step.is-active .icon svg{opacity:1;filter:drop-shadow(0 0 6px rgba(94,199,255,.45))}
#sigSteps .sig-step.is-active::after{content:"";position:absolute;inset:-1px;border-radius:14px;border:1px solid rgba(94,199,255,.35);pointer-events:none;animation:pulse-ring 1.2s ease-out infinite}
#sigSteps .sig-step.is-done{background:linear-gradient(0deg,var(--step-done),var(--step-done)),var(--step-bg);border-color:var(--step-done-ring)}
#sigSteps .sig-step.is-done .check svg{opacity:1;transform:scale(1)}
#sigSteps .sig-step:active{transform:translateY(1px)}
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(94,199,255,.35)}100%{box-shadow:0 0 0 12px rgba(94,199,255,0)}}

.sig-progress{
  position:relative;height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:10px;
}
.sig-progress .bar{
  height:100%;width:0%;
  border-radius:inherit;
  transition:width .35s cubic-bezier(.22,1,.36,1);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.22) 0 8px, rgba(255,255,255,0) 8px 16px),
    linear-gradient(90deg,#55a6ff,#48e3c2);
  animation:prog-stripes 1.2s linear infinite;
}
.sig-progress::after{
  content:"";position:absolute;inset:0;transform:translateX(-60%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  animation:prog-shine 2.2s ease-in-out infinite;pointer-events:none;
}
@keyframes prog-stripes{to{background-position:40px 0,0 0}}
@keyframes prog-shine{50%{transform:translateX(60%)}100%{transform:translateX(160%)}}

/* =========================
   13) Result UI (kept + tiny polish)
========================= */
.trade-badge{
  margin:10px auto 16px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 24px;
  border-radius:14px;
  font-size:16px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  user-select:none;
  backdrop-filter:blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 24px rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.18);
}
.trade-badge.buy{ color:#05221a; background:linear-gradient(180deg, rgba(96,243,196,.85), rgba(64,213,176,.82)); }
.trade-badge.sell{ color:#2a0c0c; background:linear-gradient(180deg, rgba(255,153,153,.88), rgba(248,118,118,.84)); }

.sig-result{ padding-top:8px; }
.sig-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.sig-grid .kv{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:12px 12px 11px;
  backdrop-filter:blur(12px);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:transform .08s ease, background .15s ease, border-color .15s ease;
}
.sig-grid .kv:hover{ background:rgba(255,255,255,.085); border-color:rgba(255,255,255,.16); transform:translateY(-1px); }
.sig-grid .k{ color:#b9c8dd; font-size:12px; letter-spacing:.04em; }
.sig-grid .v{ color:#eaf1fb; font-weight:800; margin-top:2px; }
.sig-grid .pct{ color:#eafbf4; font-weight:900; font-size:22px; }

.sig-actions{ display:flex; gap:10px; justify-content:center; margin:16px 0 6px; }
.btn{
  background:rgba(255,255,255,.06);
  color:#e3eefc;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:10px 14px;
  font-weight:700;
  backdrop-filter:blur(10px);
  transition:background .15s ease, border-color .15s ease, transform .05s ease;
}
.btn:hover{ background:rgba(255,255,255,.095); border-color:rgba(255,255,255,.18); }
.btn:active{ transform:translateY(1px); }
.btn.btn-ghost{ opacity:.95; }

/* RG2 (kept) */
#sigResult.rg2{ padding:10px 10px 8px; }
.rg2-ribbon{
  display:block;
  margin:8px auto 12px;
  padding:12px 24px;
  max-width:calc(100% - 36px);
  text-align:center;
  border-radius:12px;
  font-weight:900; letter-spacing:.06em; text-transform:uppercase;
  color: #ffffff;
  background:var(--glass2);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 8px 22px rgba(0,0,0,.20);
}
.rg2-ribbon.buy{ background:#32ac41; border-color:rgba(57,215,181,.42); }
.rg2-ribbon.sell{ background:#f3382c; border-color:rgba(255,139,139,.42); }
.rg2-pair{ text-align:center; color:var(--c-text); font-weight:700; font-size:18px; margin:4px 0 12px; }
.rg2-counters{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:10px; }
.rg2-counter{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:14px 14px 12px;
  backdrop-filter:blur(12px);
  text-align:center;
  box-shadow:0 8px 20px rgba(0,0,0,.20);
}
.rg2-counter .k{ color:var(--c-muted); font-size:12px; letter-spacing:.04em; }
.rg2-counter .v{ color:var(--c-text); font-weight:900; font-size:24px; }

.rg2-list{ display:flex; flex-direction:column; gap:8px; }
.rg2-list .row{
  display:grid; grid-template-columns: 1fr auto; align-items:center;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:10px 12px;
  backdrop-filter:blur(10px);
}
.rg2-list .k{ color:var(--c-muted); font-size:12px; letter-spacing:.04em; text-align:left; justify-self:start; padding-left:8px; }
.rg2-list .v{ color:var(--c-text); font-weight:800; text-align:right; justify-self:end; padding-right:8px; }

.rg2-actions{ display:flex; gap:10px; justify-content:center; margin:16px 0 4px; }
.rg2-btn{
  background:rgba(255,255,255,.055);
  color:var(--c-text);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:10px 14px;
  font-weight:800;
  backdrop-filter:blur(8px);
  transition:background .15s ease, border-color .15s ease, transform .05s ease;
}
.rg2-btn:hover{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18); }
.rg2-btn:active{ transform:translateY(1px); }
.rg2-btn.ghost{ opacity:.95; }

@media (max-width:380px){ .rg2-counters{ grid-template-columns:1fr; } }

.sig-dir-icon{ display:flex; justify-content:center; align-items:center; margin:-20px 0 -8px; }
.sig-dir-icon svg{ width:70px; height:70px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }

/* =========================
   14) VIP Bottom Sheet (kept)
========================= */
.vip-overlay{position:fixed;inset:0;display:none;z-index:1200;}
.vip-overlay[aria-hidden="false"]{display:block;}
.vip-backdrop{position:absolute;inset:0;background:rgba(2,8,15,.55);backdrop-filter:blur(2px);opacity:0;transition:opacity .25s;}
.vip-overlay[aria-hidden="false"] .vip-backdrop{opacity:1;}
.vip-sheet{
  position:absolute;left:0;right:0;bottom:0;
  margin:0 auto;max-width:520px;width:100%;
  height:min(86vh,720px);
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent 10%), var(--vip-panel);
  border:1px solid var(--vip-br);
  border-bottom:none;
  border-top-left-radius:22px;border-top-right-radius:22px;
  color:var(--vip-text);
  box-shadow:0 -24px 64px rgba(0,0,0,.5);
  transform:translateY(100%);
  transition:transform .32s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.vip-overlay[aria-hidden="false"] .vip-sheet{ transform:translateY(0); }

.vip-grabber{ width:48px;height:5px;border-radius:999px; background:#2a3a4f;opacity:.85;margin:10px auto 2px; }
.vip-head{display:flex;align-items:center;justify-content:space-between;padding:8px 16px 6px;}
.vip-title-wrap{display:flex;align-items:center;gap:8px;}
.vip-title-wrap h3{font-size:16px;font-weight:800;letter-spacing:.02em;}
.vip-close{ border:none;background:transparent;border-radius:10px;padding:6px;cursor:pointer; }
.vip-close:hover svg path{fill:#c8d4e3}
.vip-body{padding:8px 16px 16px;overflow:auto;}

.vip-hero{
  padding:10px 12px 6px;border-radius:16px;border:1px solid var(--vip-br);
  background: radial-gradient(60% 60% at 50% 0%, rgba(89,225,183,.18), transparent 60%), #0f1722;
}
.vip-hero .vip-badge{
  display:inline-block;background:#14302a;color:#c9ffe9;border:1px solid #245c4d;
  padding:6px 10px;border-radius:999px;font-size:12px;letter-spacing:.02em;margin-bottom:8px;
}
.vip-hero h4{font-size:18px;margin:0 0 6px 0;font-weight:900;}
.vip-hero .vip-sub{color:var(--vip-muted);font-size:13px;}

.vip-compare{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 6px;}
.vip-card{border:1px solid var(--vip-br);border-radius:14px;background:#0f1722;padding:10px;}
.vip-card.free .vip-card-title{color:#ffffff;}
.vip-card.vip{background:linear-gradient(180deg, rgba(255,215,106,.08), transparent 30%), #0f1722;}
.vip-card.vip .vip-card-title{color:var(--vip-gold);}
.vip-card-title{font-weight:900;margin-bottom:6px;}
.vip-card ul{list-style:none;display:grid;gap:6px;font-size:13px;color:var(--vip-muted);}
.vip-card ul li b{color:#dff3ff;}

.vip-feats{display:grid;gap:10px;margin:10px 0;}
.vf{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--vip-br);border-radius:12px;background:#0f1722;padding:10px;}
.vf .i{font-size:18px;line-height:1;flex:0 0 auto;margin-top:2px;}
.vf b{font-weight:900;}
.vf small{color:var(--vip-muted);}

.vip-cta{display:grid;gap:10px;margin-top:10px;}
.vip-primary{background:var(--vip-accent);color:#04201a;border:none;border-radius:12px;padding:12px 14px;font-weight:900;cursor:pointer;}
.vip-primary:hover{filter:brightness(1.05)}
.vip-secondary{background:#111a24;border:1px solid var(--vip-br);color:#e9f2ff;border-radius:12px;padding:10px 14px;cursor:pointer;}
.vip-note{color:var(--vip-muted);font-size:12px;text-align:center;}
.vip-note a{color:#a7d7ff;text-decoration:none;border-bottom:1px dashed rgba(167,215,255,.5);}
.vip-note a:hover{border-bottom-color:transparent;}

.vip-features{display:flex;flex-direction:column;gap:12px}
.vip-feature{
  display:grid;grid-template-columns:40px 1fr;align-items:center;gap:12px;
  padding:12px 14px;border:1px solid rgba(255,255,255,.08);
  background: rgba(15, 20, 30, 0.55);border-radius:12px;backdrop-filter: blur(8px);
}
.vip-feature:hover{border-color: rgba(80, 200, 255, .25);background: rgba(15, 20, 30, 0.65);transition: background .2s ease, border-color .2s ease;}
.vip-icon{width:24px;height:24px;display:block;filter: drop-shadow(0 2px 8px rgba(80, 200, 255, .25));opacity:.95;}
.vf-text{min-width:0}
.vf-title{color:#eaf2ff;font-weight:900;letter-spacing:.2px}
.vf-sub{margin-top:2px;color:#9fb3cb;font-size:13px;line-height:1.25}

.vip-h3{margin:18px 0 12px;font-size:16px;font-weight:800;letter-spacing:.3px;color:#eaf2ff}

.vip-how{
  margin-top:16px;padding:14px;border:1px solid rgba(255,255,255,.08);
  background: rgba(15, 20, 30, .55);border-radius:12px;backdrop-filter: blur(8px);
}
.vip-how h4{margin:0 0 6px;font-size:14px;font-weight:800;color:#eaf2ff;letter-spacing:.2px}
.vip-how-text{margin:0;color:#9fb3cb;font-size:13px;line-height:1.35}

.vip-sep{height:1px;background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);margin:14px 0;}

.vip-btn{position:relative;}
.vip-btn, .vip-btn::before, .vip-btn::after, .vip-btn > *:not(.vip-indicator){
  animation:none !important;
  transform:none !important;
}
.vip-indicator{
  position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:50%;
  background:#ff4d4f;box-shadow:0 0 0 0 rgba(255,77,79,.6);
  display:none;pointer-events:none;z-index:2;animation: vipPulse 1.6s ease-out infinite;
}
@keyframes vipPulse{
  0%{box-shadow:0 0 0 0 rgba(255,77,79,.6); transform:scale(1);}
  70%{box-shadow:0 0 0 10px rgba(255,77,79,0); transform:scale(1.05);}
  100%{box-shadow:0 0 0 0 rgba(255,77,79,0); transform:scale(1);}
}

/* =========================
   15) Responsive (header + safety)
========================= */
@media (max-width: 720px){
  .app-wrapper{ padding: 12px; }
  .logo{ height: 38px; }
  .h-btn__text, .h-btn__text-small{ max-width: 160px; }
}
@media (max-width: 520px){
  .header{ gap: 10px; }
  .bonus-welcome-icon{ padding: 9px 10px; gap: 8px; }
  .bonus-welcome-icon .bonus{ width: 34px; height: 34px; }
  .h-btn__text{ font-size: 12px; max-width: 140px; }
  .h-btn__text-small{ font-size: 11px; max-width: 140px; }
}
@media (max-width: 380px){
  .h-btn__text-small{ display:none; }
  .h-btn__text{ max-width: 120px; }
}

/* Extra safety: never allow a single element to force page width */
*{ max-width: 100%; }


/* =========================
   Layout helpers
========================= */
.container{
  width: min(1200px, calc(100% - 28px));
  margin-inline: auto;
}

.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

/* Nav */
.header__nav{
  display:flex;
  align-items:center;
  gap: 14px;
}
.header__link{
  padding: 10px 10px;
  border-radius: 12px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .2px;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
.header__link:hover{
  color: var(--text);
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}

/* Header responsive */
@media (max-width: 920px){
  .header__nav{ display:none; }
  .header{ padding: 10px 0; }
}
@media (max-width: 520px){
  .train-btn__sub{ display:none; }
  .train-btn{ padding: 10px 12px; }
  .bonus-welcome-icon{ padding: 10px 10px; }
}

/* =========================
   Home grid: left materials, center bot, right FAQ
========================= */
.home-layout{
  width: min(1200px, calc(100% - 28px));
  margin: 0 auto;
  padding: 0 0 26px;
  display: grid;
  grid-template-columns: 360px minmax(320px, 1fr) 360px;
  gap: 18px;
  align-items: start;
}

.home-side{
  position: relative;
}

.home-center{
  width: 100%;
}

@media (max-width: 1180px){
  .home-layout{
    grid-template-columns: 320px minmax(320px, 1fr) 320px;
  }
}

@media (max-width: 980px){
  .home-layout{
    grid-template-columns: 1fr;
  }
  .home-side--left{ order: 2; }
  .home-center{ order: 1; }
  .home-side--right{ order: 3; }
}

/* Make side blocks look like glass cards */
.chek-section,
.faq-section{
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  padding: 14px;
}

.chek-title,
.faq-title{
  margin: 4px 0 12px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .2px;
}



























/* =========================================================
   BRAZIL POLISH PATCH (paste at END of your main css)
   ========================================================= */

/* tokens */
:root{
  --br-green:#00E676;
  --br-green2:#00C853;
  --br-yellow:#FFD54F;
  --br-blue:#00B0FF;

  --bg-0:#081014;
  --bg-1:#0b151b;

  --glass: rgba(255,255,255,.08);
  --glass-2: rgba(255,255,255,.10);
  --stroke: rgba(255,255,255,.14);
  --stroke-2: rgba(0,230,118,.22);

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);

  --r12: 12px;
  --r16: 16px;
  --r20: 20px;

  --shadow: 0 18px 50px rgba(0,0,0,.45);
}

body{
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 15% 15%, rgba(0,230,118,.18), transparent 60%),
    radial-gradient(900px 600px at 85% 20%, rgba(255,213,79,.14), transparent 55%),
    radial-gradient(900px 700px at 55% 90%, rgba(0,176,255,.12), transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
}

/* =========================
   HEADER: lighter + cleaner
========================= */
.header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8,16,20,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.header__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.header__brand{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 170px;
}
.header .logo{ height: 34px; width: auto; }

.header__nav{
  flex: 1;
  display:flex;
  justify-content: center;
  gap: 18px;
}

.header__nav a{
  color: rgba(255,255,255,.78);
  font-weight: 600;
  font-size: 15px;
  padding: 10px 12px;
  border-radius: 12px;
  transition: .2s ease;
}
.header__nav a:hover{
  color: #fff;
  background: rgba(255,255,255,.08);
}

.header__actions{
  display:flex;
  align-items:center;
  gap: 12px;
}

/* CTA button */
.header .btn,
.header__actions .btn,
.header__actions a.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,230,118,.28);
  background: linear-gradient(180deg, rgba(0,230,118,.20), rgba(0,200,83,.12));
  color: #eafff4;
  box-shadow: 0 10px 26px rgba(0,230,118,.12);
  transition: .18s ease;
}
.header .btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,213,79,.35);
  box-shadow: 0 14px 34px rgba(255,213,79,.10);
}

/* =========================
   MAIN GRID: make bot center dominant
========================= */
.home-grid{
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 18px 54px;
  display:grid;
  grid-template-columns: 1fr 1.08fr 1fr;
  gap: 22px;
  align-items: start;
}

@media (max-width: 1024px){
  .home-grid{ grid-template-columns: 1fr; }
  .header__nav{ display:none; } /* later can add burger */
}

/* =========================
   GLASS CARDS: more contrast
========================= */
.card, .panel, .glass, .faq, .materials, .bot-card,
#faq, #materials, .widget, .box{
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: var(--r20);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.card__title, h1, h2, h3{
  letter-spacing: .2px;
}

h1{
  font-size: 34px;
  line-height: 1.1;
  margin: 0 0 8px;
}
.subtitle, .muted{
  color: var(--muted);
}

/* highlight center bot column */
.home-grid > :nth-child(2){
  transform: translateY(-4px);
}
.home-grid > :nth-child(2) .card,
.home-grid > :nth-child(2) .panel,
.home-grid > :nth-child(2) .bot-card{
  border-color: var(--stroke-2);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.07));
}

/* =========================
   Inputs + selects look premium
========================= */
input, select, textarea{
  width: 100%;
  color: var(--text);
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 12px 14px;
  outline: none;
  transition: .15s ease;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(0,230,118,.45);
  box-shadow: 0 0 0 4px rgba(0,230,118,.10);
}

/* primary action in bot */
button, .btn-primary, .bot button{
  border: 0;
  border-radius: 16px;
  padding: 12px 16px;
  font-weight: 800;
  color: #06110d;
  background: linear-gradient(90deg, var(--br-yellow), var(--br-green));
  box-shadow: 0 14px 32px rgba(0,0,0,.35);
  transition: .18s ease;
}
button:hover, .btn-primary:hover, .bot button:hover{
  transform: translateY(-1px);
}

/* =========================
   FAQ accordion buttons clearer
========================= */
.faq button, .faq .acc-btn, .faq .accordion__header{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  color: rgba(255,255,255,.86);
}
.faq button:hover{ border-color: rgba(255,213,79,.30); }

/* =========================
   Materials list buttons nicer
========================= */
.materials a, .materials button, .materials .item{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  color: rgba(255,255,255,.86);
}
.materials a:hover{ border-color: rgba(0,176,255,.30); }














































/* === Header must be flush to top === */
:root{ --header-h: 88px; } /* подгони если надо */

.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0 !important;
  z-index: 999;
}

/* компенсация высоты хедера, чтобы контент не залезал под него */
.app-wrapper{
  padding-top: calc(var(--header-h) + 28px);
}

/* WP admin bar fix */
body.admin-bar .header{ top: 32px; }
@media (max-width: 782px){
  body.admin-bar .header{ top: 46px; }
}

/* на всякий: убираем возможный верхний отступ у первого блока */
.app-wrapper > :first-child{
  margin-top: 0 !important;
}


































/* ===== Header (jogodobichobr-like) ===== */
:root{
  --hdr-bg: rgba(6,12,14,.86);
  --hdr-stroke: rgba(255,255,255,.10);
  --hdr-text: rgba(255,255,255,.92);
  --hdr-muted: rgba(255,255,255,.68);
  --chip-bg: rgba(255,255,255,.06);
  --chip-stroke: rgba(255,255,255,.10);
}

.header{
  background: var(--hdr-bg);
  border-bottom: 1px solid var(--hdr-stroke);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.header__container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 18px 10px;
}

.header__top{
  display:flex;
  align-items:center;
  gap: 18px;
}

.header__brand{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 220px;
}
.header .logo{ height: 34px; width:auto; display:block; }

.brand__text{ display:flex; flex-direction:column; line-height:1.1; }
.brand__text strong{ color: var(--hdr-text); font-size: 14px; letter-spacing:.2px; }
.brand__text small{ color: var(--hdr-muted); font-size: 12px; margin-top: 2px; }

.header__nav{
  flex: 1;
  display:flex;
  justify-content:center;
  gap: 18px;
}
.header__nav a{
  color: rgba(255,255,255,.78);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  transition: .18s ease;
}
.header__nav a:hover{
  color:#fff;
  background: rgba(255,255,255,.07);
}

.header__actions{
  display:flex;
  align-items:center;
  gap: 10px;
}

.btn-ghost{
  color: rgba(255,255,255,.80);
  font-weight: 700;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.btn-ghost:hover{ background: rgba(255,255,255,.07); }

.btn-cta{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,230,118,.28);
  background: linear-gradient(180deg, rgba(0,230,118,.22), rgba(0,200,83,.10));
  box-shadow: 0 12px 30px rgba(0,230,118,.12);
  color: #ecfff5;
}
.cta__icon{ font-size: 18px; }
.cta__text{ display:flex; flex-direction:column; line-height:1.05; }
.cta__text strong{ font-size: 13px; letter-spacing:.2px; }
.cta__text small{ font-size: 12px; opacity:.85; margin-top: 2px; }

.header__sub{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

.sub__chips{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-stroke);
  color: rgba(255,255,255,.78);
  font-size: 12px;
  font-weight: 600;
}

.sub__right{
  display:flex;
  align-items:center;
  gap: 10px;
  white-space: nowrap;
}
.sub__link{
  color: rgba(255,255,255,.78);
  font-weight: 700;
  font-size: 12.5px;
}
.sub__link:hover{ color:#fff; }
.dot{
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,.30);
}

/* burger + mobile */
.header__burger{
  display:none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.header__burger span{
  display:block;
  height: 2px;
  width: 18px;
  background: rgba(255,255,255,.86);
  margin: 4px auto;
  border-radius: 2px;
}

.header__mobile{
  margin-top: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.header__mobile a{
  display:block;
  padding: 10px 10px;
  border-radius: 12px;
  color: rgba(255,255,255,.82);
  font-weight: 700;
}
.header__mobile a:hover{ background: rgba(255,255,255,.06); }

@media (max-width: 980px){
  .header__nav{ display:none; }
  .btn-ghost{ display:none; }
  .header__burger{ display:block; }
  .header__sub{ display:none; }
}