/* assets/css/global.css
   BMD / BulNation Maximum Design
*/

/* =========================
   Theme variables
   ========================= */

:root[data-theme="dark"]{
  --bg0:#0b0b0e;
  --bg1:#12141a;

  --text:#e8e8ee;
  --muted:#b8bac6;

  --glass-bg: rgba(255,255,255,.08);
  --glass-border: rgba(255,255,255,.16);

  --shadow: 0 22px 70px rgba(0,0,0,.55);
  --shadow-soft: 0 14px 40px rgba(0,0,0,.45);

  --accent:#ff2d2d;       /* BulNation red */
  --accent2:#ff4b6e;      /* neon-magenta secondary */
  --accent3:#4ea1ff;      /* cold blue */

  --radius:22px;
  --radius-sm:16px;

  --container: 1200px;

  --font-ui: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: "Orbitron", "Inter", system-ui, sans-serif;

  /* UI surfaces */
  --surface-bg: rgba(10,10,14,.55);        /* header/footer */
  --surface-bg-strong: rgba(10,10,14,.70); /* mobile nav */
  --surface-border: rgba(255,255,255,.08);

  --ui-bg: rgba(255,255,255,.04);          /* icon buttons */
  --ui-bg-hover: rgba(255,255,255,.06);
  --ui-border: rgba(255,255,255,.10);
  --ui-border-hover: rgba(255,255,255,.16);

  --nav-text: rgba(232,232,238,.88);

  /* Background glow */
  --glow1: rgba(255,45,45,.10);
  --glow2: rgba(78,161,255,.08);
  --glow3: rgba(255,75,110,.08);

  /* Theme toggle dot */
  --theme-dot-core: rgba(155, 15, 25, .95);   /* deep burgundy */
  --theme-dot-halo: rgba(255,45,45,.24);
  --theme-dot-ring: rgba(255,255,255,.16);
}

:root[data-theme="light"]{
  /* Light “Daylight Glass” (contrast-fixed) */
  --bg0:#f7f8fc;
  --bg1:#eef1f8;

  /* stronger contrast */
  --text:#12131a;
  --muted: rgba(18,19,26,.72);

  /* glass so it doesn't wash text out */
  --glass-bg: rgba(255,255,255,.78);
  --glass-border: rgba(0,0,0,.12);

  --shadow: 0 22px 70px rgba(0,0,0,.14);
  --shadow-soft: 0 14px 40px rgba(0,0,0,.12);

  --accent:#ff2d2d;
  --accent2:#ff4b6e;
  --accent3:#2f7cff;

  --radius:22px;
  --radius-sm:16px;

  --container: 1200px;

  --font-ui: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: "Orbitron", "Inter", system-ui, sans-serif;

  /* header/footer surfaces */
  --surface-bg: rgba(255,255,255,.70);
  --surface-bg-strong: rgba(255,255,255,.82);
  --surface-border: rgba(0,0,0,.12);

  /* UI buttons/icons */
  --ui-bg: rgba(255,255,255,.82);
  --ui-bg-hover: rgba(255,255,255,.92);
  --ui-border: rgba(0,0,0,.12);
  --ui-border-hover: rgba(0,0,0,.18);

  --nav-text: rgba(18,19,26,.82);

  /* background glow quieter */
  --glow1: rgba(255,45,45,.08);
  --glow2: rgba(47,124,255,.08);
  --glow3: rgba(255,75,110,.06);

  /* Theme toggle dot (light core) */
  --theme-dot-core: rgba(255,255,255,.95);
  --theme-dot-halo: rgba(47,124,255,.18);
  --theme-dot-ring: rgba(0,0,0,.12);
}

/* Safety fallback if html has no data-theme */
:root{
  --bg0:#0b0b0e;
  --bg1:#12141a;
  --text:#e8e8ee;
  --muted:#b8bac6;
  --glass-bg: rgba(255,255,255,.08);
  --glass-border: rgba(255,255,255,.16);
  --shadow: 0 22px 70px rgba(0,0,0,.55);
  --shadow-soft: 0 14px 40px rgba(0,0,0,.45);
  --accent:#ff2d2d;
  --accent2:#ff4b6e;
  --accent3:#4ea1ff;
  --radius:22px;
  --radius-sm:16px;
  --container: 1200px;
  --font-ui: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: "Orbitron", "Inter", system-ui, sans-serif;

  --surface-bg: rgba(10,10,14,.55);
  --surface-bg-strong: rgba(10,10,14,.70);
  --surface-border: rgba(255,255,255,.08);

  --ui-bg: rgba(255,255,255,.04);
  --ui-bg-hover: rgba(255,255,255,.06);
  --ui-border: rgba(255,255,255,.10);
  --ui-border-hover: rgba(255,255,255,.16);

  --nav-text: rgba(232,232,238,.88);

  --glow1: rgba(255,45,45,.10);
  --glow2: rgba(78,161,255,.08);
  --glow3: rgba(255,75,110,.08);

  --theme-dot-core: rgba(155, 15, 25, .95);
  --theme-dot-halo: rgba(255,45,45,.24);
  --theme-dot-ring: rgba(255,255,255,.16);
}

/* Basic reset */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color:var(--text);
  font-family:var(--font-ui);
  overflow-x:hidden;
  background: var(--bg1); /* fallback */
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;

  background:
    radial-gradient(1200px 700px at 15% 15%, var(--glow1), transparent 60%),
    radial-gradient(900px 600px at 85% 20%, var(--glow2), transparent 55%),
    radial-gradient(1000px 700px at 50% 95%, var(--glow3), transparent 60%),
    linear-gradient(135deg, var(--bg0), var(--bg1));
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font:inherit; }

/* Layout */
.page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.site-main{
  flex:1;
  padding-bottom:48px;
}
.container{
  width:min(var(--container), calc(100% - 40px));
  margin-inline:auto;
}

/* Glass utility */
.glass{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  position:relative;
  overflow:hidden;
}
.glass::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.22), rgba(255,255,255,0) 38%);
  opacity:.35;
  pointer-events:none;
}
.glass::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px 220px at 20% 10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(460px 220px at 90% 20%, rgba(255,255,255,.06), transparent 58%);
  opacity:.55;
  pointer-events:none;
}

/* Light glass: reduce washout */
:root[data-theme="light"] .glass::before{ opacity:.20; }
:root[data-theme="light"] .glass::after{ opacity:.28; }

/* Fallback if backdrop-filter unsupported */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .glass{
    background: rgba(20,20,26,.72);
  }
}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: var(--surface-bg);
  border-bottom: 1px solid var(--surface-border);
}
.header-row{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:240px;
}

.brand-mark{
  height:40px;              /* КЛЮЧОВО */
  width:auto;
  display:flex;
  align-items:center;
}


.brand-mark .logo{
  height:78px;
  width:auto;
  display:block;
}


/* Default (dark theme) */
.brand-mark .logo-light{ display:none; }

/* Light theme swap */
:root[data-theme="light"] .brand-mark .logo-dark{ display:none; }
:root[data-theme="light"] .brand-mark .logo-light{ display:block; }

.brand-text{
  display:flex;
  flex-direction:column;
  justify-content:center;   /* КЛЮЧОВО */
  line-height:1.05;
}


.brand-name{
  font-family: var(--font-display);
  letter-spacing:.06em;
  font-weight:700;
  font-size:14px;
  text-transform:uppercase;
  transform: translateY(-1px); /* микро-оптика */
}

.brand-tag{
  font-size:12px;
  color:var(--muted);
  opacity:.9;
}


.nav{
  display:flex;
  align-items:center;
  gap:18px;
}
.nav-link{
  font-size:13px;
  color: var(--nav-text);
  padding:10px 10px;
  border-radius:12px;
  position:relative;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.nav-link:hover{
  background: rgba(255,255,255,.10);
  transform: translateY(-1px);
}
:root[data-theme="light"] .nav-link:hover{
  background: rgba(0,0,0,.05);
}

.nav-link.is-active{
  color: inherit;
  background: rgba(255,45,45,.10);
  border: 1px solid rgba(255,45,45,.22);
}

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

.icon-btn{
  width:40px; height:40px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border: 1px solid var(--ui-border);
  background: var(--ui-bg);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.icon-btn:hover{
  transform: translateY(-1px);
  background: var(--ui-bg-hover);
  border-color: var(--ui-border-hover);
}

/* Theme toggle: tiny glass dot (subtle) */
.theme-dot{
  width:40px; height:40px;
  border-radius:14px;
  border: 1px solid var(--ui-border);
  background: var(--ui-bg);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.theme-dot:hover{
  transform: translateY(-1px);
  background: var(--ui-bg-hover);
  border-color: var(--ui-border-hover);
}
.theme-dot span{
  width:14px;
  height:14px;
  border-radius:999px;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.65), rgba(255,255,255,0) 55%),
              var(--theme-dot-core);
  box-shadow:
    0 0 0 1px var(--theme-dot-ring) inset,
    0 0 18px var(--theme-dot-halo);
}
.theme-dot:focus{ outline:none; }
.theme-dot:focus-visible{
  box-shadow: 0 0 0 3px rgba(255,45,45,.22);
}

/* Burger */
.burger{
  width:44px; height:44px;
  border-radius:14px;
  border: 1px solid var(--ui-border);
  background: var(--ui-bg);
  display:none;
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
}
.burger span{
  display:block;
  width:18px;
  height:2px;
  background: rgba(255,255,255,.88);
  border-radius:99px;
}
:root[data-theme="light"] .burger span{
  background: rgba(17,18,24,.88);
}

/* Mobile nav */
.mobile-nav{
  border-top: 1px solid var(--surface-border);
  background: var(--surface-bg-strong);
  padding:18px 0 22px;
}
.m-link{
  display:block;
  padding:12px 12px;
  border-radius:14px;
  border: 1px solid var(--surface-border);
  background: rgba(255,255,255,.08);
  margin:10px 0;
}
:root[data-theme="light"] .m-link{
  background: rgba(255,255,255,.62);
  border-color: rgba(0,0,0,.12);
}

.m-link.is-active{
  border-color: rgba(255,45,45,.24);
  background: rgba(255,45,45,.10);
}
.m-contact{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  color: var(--muted);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:44px;
  padding:0 16px;
  border-radius:16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color:#fff;
  font-weight:600;
  font-size:13px;
  letter-spacing:.01em;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
}
.btn:active{ transform: translateY(0); }

.btn-primary{
  border: 1px solid rgba(255,45,45,.35);
  background: linear-gradient(135deg, rgba(255,45,45,.95), rgba(255,75,110,.72));
  box-shadow: 0 18px 40px rgba(255,45,45,.18);
}
.btn-primary:hover{
  background: linear-gradient(135deg, rgba(255,45,45,1), rgba(255,75,110,.82));
  border-color: rgba(255,45,45,.48);
}
.btn-ghost{
  background: rgba(255,255,255,.04);
}

/* Light theme button contrast (fix CTA readability) */
:root[data-theme="light"] .btn{
  color: rgba(18,19,26,.92);
  border-color: rgba(0,0,0,.14);
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}
:root[data-theme="light"] .btn:hover{
  background: rgba(255,255,255,.96);
  border-color: rgba(0,0,0,.20);
}
:root[data-theme="light"] .btn-primary{
  color:#fff !important;
  border-color: rgba(180, 0, 18, .55);
  background: linear-gradient(135deg,
    rgba(155, 15, 25, .98),
    rgba(255,45,45,.92)
  );
  box-shadow:
    0 18px 40px rgba(155, 15, 25, .20),
    0 10px 24px rgba(0,0,0,.10);
}
:root[data-theme="light"] .btn-primary:hover{
  background: linear-gradient(135deg,
    rgba(155, 15, 25, 1),
    rgba(255,45,45, 1)
  );
  border-color: rgba(180,0,18,.70);
}


/* Sections */
.section{
  padding:70px 0;
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}
.section-title{
  margin:0;
  font-family: var(--font-display);
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:18px;
}
.section-sub{
  margin:0;
  color:var(--muted);
  max-width:640px;
  font-size:13px;
  line-height:1.55;
}

/* Grid helpers */
.grid{
  display:grid;
  gap:18px;
}
.cards-4{
  grid-template-columns: repeat(4, 1fr);
}

/* Footer */
.site-footer{
  margin-top:auto;
  padding:44px 0 22px;
  border-top: 1px solid var(--surface-border);
  background: var(--surface-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap:20px;
}
.footer-brand{
  font-family: var(--font-display);
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:700;
}
.footer-title{
  font-size:12px;
  color: inherit;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.footer-link{
  display:block;
  padding:8px 0;
  color: var(--muted);
  font-size:13px;
}
.footer-link:hover{ color: inherit; }
.footer-muted{ color:var(--muted); font-size:13px; margin-top:6px; }

.social-row{ display:flex; gap:10px; }
.social{
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius:14px;
  border: 1px solid var(--ui-border);
  background: var(--ui-bg);
  color: inherit;
  font-weight:700;
  font-size:12px;
}
.social:hover{
  background: var(--ui-bg-hover);
  color: inherit;
}

.footer-bottom{
  margin-top:18px;
  padding-top:16px;
  border-top: 1px solid var(--surface-border);
}

/* Responsive */
@media (max-width: 980px){
  .nav{ display:none; }
  .burger{ display:flex; flex-direction:column; }
  .cards-4{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .brand{ min-width:auto; }
}
@media (max-width: 560px){
  .cards-4{ grid-template-columns: 1fr; }
  .section{ padding:56px 0; }
  .header-row{ height:68px; }
  .brand-tag{ display:none; }
}

/* Beyond accent link (header + mobile + footer) */
.nav-link-beyond{
  border: 1px solid rgba(78,161,255,.22);
  background: rgba(78,161,255,.08);
  color: rgba(232,232,238,.95);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
:root[data-theme="light"] .nav-link-beyond{
  color: rgba(18,19,26,.86);
  background: rgba(47,124,255,.10);
  border-color: rgba(47,124,255,.22);
}

.nav-link-beyond:hover{
  background: rgba(78,161,255,.12);
  border-color: rgba(78,161,255,.32);
}
:root[data-theme="light"] .nav-link-beyond:hover{
  background: rgba(47,124,255,.14);
  border-color: rgba(47,124,255,.28);
}

.nav-link-beyond.is-active{
  color:#fff;
  background: rgba(78,161,255,.14);
  border: 1px solid rgba(78,161,255,.36);
}
:root[data-theme="light"] .nav-link-beyond.is-active{
  color: rgba(18,19,26,.92);
  background: rgba(47,124,255,.16);
  border-color: rgba(47,124,255,.34);
}

.nav-beyond-dot{
  font-size:12px;
  opacity:.9;
  transform: translateY(-1px);
}

.m-link-beyond{
  border-color: rgba(78,161,255,.22);
  background: rgba(78,161,255,.08);
}
:root[data-theme="light"] .m-link-beyond{
  border-color: rgba(47,124,255,.22);
  background: rgba(47,124,255,.10);
}

.m-link-beyond.is-active{
  border-color: rgba(78,161,255,.34);
  background: rgba(78,161,255,.14);
}
:root[data-theme="light"] .m-link-beyond.is-active{
  border-color: rgba(47,124,255,.32);
  background: rgba(47,124,255,.14);
}

.m-beyond-dot{ font-size:12px; opacity:.9; }

.footer-link-beyond{
  color: rgba(232,232,238,.92);
}
:root[data-theme="light"] .footer-link-beyond{
  color: rgba(18,19,26,.78);
}
.footer-link-beyond:hover{
  color: inherit;
}

.footer-microstats b{ font-weight:800; }
.footer-dot{ opacity:.55; padding:0 6px; }






/* --- Floating Notice (BMD) --- */
.fnotice{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  width: min(520px, calc(100vw - 36px));
}

.fnotice-card{
  padding: 12px 14px;
  box-shadow: var(--shadow);
  border-radius: 20px;
  overflow: hidden;
  transform-origin: bottom right;
  transition: transform .22s ease, opacity .22s ease;
}

/* Layout */
.fnotice-top{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.fnotice-badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  border: 1px solid rgba(78,161,255,.24);
  background: rgba(78,161,255,.10);
}
:root[data-theme="light"] .fnotice-badge{
  border-color: rgba(47,124,255,.22);
  background: rgba(47,124,255,.10);
}

.fnotice-title{
  font-family: var(--font-display);
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:12.5px;
  opacity:.95;
  flex: 1;
  min-width: 180px;
}

.fnotice-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

.fnotice-btn{
  width:36px;
  height:36px;
  border-radius:14px;
  border: 1px solid var(--ui-border);
  background: var(--ui-bg);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.fnotice-btn:hover{
  transform: translateY(-1px);
  background: var(--ui-bg-hover);
  border-color: var(--ui-border-hover);
}
.fnotice-btn-ghost{
  opacity: .9;
}

.fnotice-text{
  margin: 10px 0 0;
  color: rgba(232,232,238,.84);
  font-size:13px;
  line-height:1.55;
}
:root[data-theme="light"] .fnotice-text{
  color: rgba(18,19,26,.74);
}

.fnotice-hint{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top: 10px;
  color: var(--muted);
  font-size:12px;
  opacity:.92;
}
.fnotice-hint-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%),
              rgba(255,75,110,.85);
  box-shadow: 0 0 14px rgba(255,75,110,.18);
}

/* Mini (collapsed) button */
.fnotice-mini{
  display:none;
  width:46px;
  height:46px;
  border-radius:18px;
  border: 1px solid var(--ui-border);
  background: var(--ui-bg);
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.fnotice-mini:hover{
  transform: translateY(-1px);
  background: var(--ui-bg-hover);
  border-color: var(--ui-border-hover);
}
.fnotice-mini-dot{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:18px;
  filter: drop-shadow(0 0 12px rgba(255,75,110,.20));
}

/* Collapsed state */
.fnotice.is-collapsed{
  width: 46px;
}
.fnotice.is-collapsed .fnotice-card{
  padding: 0;
  border-radius: 18px;
}
.fnotice.is-collapsed .fnotice-body{
  display:none;
}
.fnotice.is-collapsed .fnotice-mini{
  display:block;
}

/* Hide state (smooth) */
.fnotice.is-hidden{
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(.98);
}

/* Mobile positioning a bit safer */
@media (max-width: 560px){
  .fnotice{
    right: 12px;
    bottom: 12px;
    width: min(520px, calc(100vw - 24px));
  }
  .fnotice.is-collapsed{ width:46px; }
}