/* ============================================================
   GOO.AD DARK OVERRIDES
   Палитра: deep dark + magenta + cyan
   Применяется поверх cherry-red.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root{
  --g-bg: #0a0a14;
  --g-bg-elev: #13131f;
  --g-bg-card: #1a1a2e;
  --g-bg-card-hi: #20203a;
  --g-border: rgba(255,255,255,.08);
  --g-border-hi: rgba(255,42,109,.4);
  --g-magenta: #ff2a6d;
  --g-magenta-dim: #d62059;
  --g-cyan: #05d9e8;
  --g-cyan-dim: #04b8c4;
  --g-yellow: #ffd23f;
  --g-green: #3ee089;
  --g-text: #e8eaf0;
  --g-text-dim: #9094a8;
  --g-text-mute: #5a5d72;
  --g-mono: 'Space Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  --g-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --g-shadow-mag: 0 4px 24px rgba(255,42,109,.25);
  --g-shadow-cy: 0 4px 24px rgba(5,217,232,.20);
}

/* ===== Global reset ===== */
html, body{
  background: var(--g-bg) !important;
  color: var(--g-text) !important;
  font-family: var(--g-sans) !important;
  font-size: 15px;
  line-height: 1.6;
  background-image:
    radial-gradient(circle at 15% 5%, rgba(255,42,109,.10), transparent 50%),
    radial-gradient(circle at 85% 25%, rgba(5,217,232,.07), transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(255,42,109,.05), transparent 60%) !important;
  background-attachment: fixed !important;
}

body, .container-fluid, .container, .container-xxl, .container-xl{
  background-color: transparent !important;
}

h1, h2, h3, h4, h5, h6,
.card-title, .description-big{
  color: var(--g-text) !important;
  font-family: var(--g-sans) !important;
  font-weight: 700 !important;
  letter-spacing: -.3px;
}

h1{ font-size: 48px !important; }
h2{ font-size: 32px !important; }
h3{ font-size: 22px !important; }

p, .card-text, .about-description, .description-small, span:not(.key):not(.tag):not(.brand-dot){
  color: var(--g-text-dim) !important;
}

a{
  color: var(--g-cyan) !important;
  text-decoration: none !important;
}
a:hover{
  color: var(--g-magenta) !important;
}

/* ===== Header / Nav (cherry-red default) ===== */
header, .header-section, .top-header, .navbar{
  background: rgba(10,10,20,.85) !important;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--g-border) !important;
  box-shadow: none !important;
}
header a, .navbar a, .nav-link, .navbar-nav .nav-link{
  color: var(--g-text-dim) !important;
  font-weight: 500;
  font-size: 14px;
  transition: color .15s;
}
header a:hover, .navbar a:hover, .nav-link:hover{
  color: var(--g-magenta) !important;
}
.navbar-brand{
  color: var(--g-text) !important;
  font-weight: 800 !important;
  letter-spacing: -.5px;
}
.navbar-toggler{
  border: 1px solid var(--g-border) !important;
}
.navbar-toggler-icon{
  filter: invert(1) brightness(.9);
}

/* ===== Hero section ===== */
#home-banner, section#home-banner{
  background: transparent !important;
  background-color: transparent !important;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}
.home-banner-inner{
  background: transparent !important;
}
.home-banner-shape, .home-banner-bottom{
  display: none !important;
}

/* "G O O . A D" keyboard-style title */
.keyboard{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 24px !important;
  background: transparent !important;
  padding: 0 !important;
}
.keyboard .key{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 60px;
  height: 72px;
  padding: 0 18px;
  background: var(--g-bg-card) !important;
  border: 1px solid var(--g-border-hi) !important;
  border-radius: 10px !important;
  font-family: var(--g-mono) !important;
  font-weight: 700 !important;
  font-size: 36px !important;
  color: var(--g-magenta) !important;
  text-shadow: 0 0 18px rgba(255,42,109,.4);
  transition: transform .2s, border-color .2s;
}
.keyboard .key:hover{
  transform: translateY(-3px);
  border-color: var(--g-magenta) !important;
}

.description-big{
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--g-text) !important;
  background: linear-gradient(135deg, #fff 0%, var(--g-magenta) 60%, var(--g-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 16px !important;
  line-height: 1.2;
}
.description-small{
  font-size: 17px !important;
  color: var(--g-text-dim) !important;
  margin-bottom: 28px !important;
  line-height: 1.5;
}

/* ===== Buttons ===== */
.start-btn, .readmore-button, .learn-more-button, .demo-button, .btn-primary, .btn{
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px;
  padding: 14px 28px !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: var(--g-sans) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: .3px;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform .15s, box-shadow .2s;
}
.start-btn, .btn-primary{
  background: linear-gradient(135deg, var(--g-magenta) 0%, var(--g-magenta-dim) 100%) !important;
  color: #fff !important;
  box-shadow: var(--g-shadow-mag) !important;
}
.start-btn:hover, .btn-primary:hover{
  transform: translateY(-2px) !important;
  color: #fff !important;
  box-shadow: 0 8px 30px rgba(255,42,109,.45) !important;
}
.readmore-button, .learn-more-button{
  background: transparent !important;
  color: var(--g-cyan) !important;
  border: 1px solid var(--g-cyan) !important;
}
.readmore-button:hover, .learn-more-button:hover{
  background: var(--g-cyan) !important;
  color: var(--g-bg) !important;
  transform: translateY(-2px);
}
.demo-button{
  background: var(--g-bg-card) !important;
  color: var(--g-text-dim) !important;
  border: 1px solid var(--g-border) !important;
}
.demo-button:hover{
  border-color: var(--g-yellow) !important;
  color: var(--g-yellow) !important;
}
.start-btn span, .btn span{ display: none !important; }

/* ===== About section (Advertiser / Publisher 2-col) ===== */
.about-section{
  background: transparent !important;
  padding: 60px 0 !important;
}
.about-section .section-title{
  background: var(--g-bg-card) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: 16px !important;
  padding: 32px 28px !important;
  height: 100%;
  transition: border-color .2s, transform .2s;
}
.about-section .section-title:hover{
  border-color: var(--g-border-hi) !important;
  transform: translateY(-4px);
}
.about-section .section-title img.advertiser-image,
.about-section .section-title img.publisher-image{
  max-height: 180px;
  filter: drop-shadow(0 8px 24px rgba(255,42,109,.2));
}
.about-section h2{
  color: var(--g-text) !important;
  font-size: 26px !important;
  margin: 18px 0 12px !important;
}
.about-description{
  font-size: 15px !important;
  line-height: 1.7 !important;
}

/* ===== Ads (Formats) section ===== */
.ads-section{
  background: transparent !important;
  padding: 60px 0 !important;
}
.ads-section h2{
  margin-bottom: 12px !important;
}
.swich-bg{
  background: transparent !important;
}
.devider{
  width: 80px !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--g-magenta), var(--g-cyan)) !important;
  margin: 12px auto 30px !important;
  border-radius: 4px !important;
  border: none !important;
}

/* Switch advertiser/publisher */
.switches-container{
  background: var(--g-bg-card) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: 50px !important;
  padding: 4px !important;
  margin: 0 auto 40px !important;
  width: fit-content !important;
}
.switches-container label{
  color: var(--g-text-dim) !important;
  font-weight: 600 !important;
  font-size: 14px;
  padding: 10px 24px !important;
  cursor: pointer;
}
.switch-wrapper{
  background: transparent !important;
}
.switch{
  background: var(--g-magenta) !important;
  border-radius: 50px !important;
  box-shadow: var(--g-shadow-mag) !important;
}
.switch div{
  color: #fff !important;
  font-weight: 600 !important;
  padding: 10px 24px !important;
}

/* Ads format cards */
.ads-box, .card.ads-box{
  background: var(--g-bg-card) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: 14px !important;
  margin-bottom: 18px !important;
  padding: 24px !important;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  box-shadow: none !important;
}
.ads-box:hover, .card.ads-box:hover{
  border-color: var(--g-border-hi) !important;
  transform: translateY(-3px);
  box-shadow: var(--g-shadow-mag) !important;
}
.ads-box.white, .ads-box.gray, .card.ads-box.white, .card.ads-box.gray{
  background: var(--g-bg-card) !important;
}
.ads-box .card-body{
  background: transparent !important;
  padding: 16px !important;
}
.ads-box .card-title{
  font-size: 20px !important;
  color: var(--g-text) !important;
  margin-bottom: 10px !important;
}
.ads-box .card-text{
  color: var(--g-text-dim) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-bottom: 18px !important;
}
.ads-box .ads-img-margin img{
  border-radius: 10px;
  max-height: 200px;
  filter: drop-shadow(0 6px 18px rgba(5,217,232,.15));
}

/* Hero illustration block (circles + icons) */
.main-container{
  background: transparent !important;
}
.big-circle, .circle{
  border: 1px dashed rgba(255,42,109,.3) !important;
}
.center-logo{
  filter: drop-shadow(0 0 30px rgba(255,42,109,.5));
}
.icon-block{
  background: var(--g-bg-card) !important;
  border: 1px solid var(--g-border-hi) !important;
  border-radius: 50%;
  box-shadow: var(--g-shadow-mag);
}

/* ===== Cards generic ===== */
.card{
  background: var(--g-bg-card) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: 12px !important;
  color: var(--g-text) !important;
}
.card-header, .card-footer{
  background: var(--g-bg-elev) !important;
  border-color: var(--g-border) !important;
  color: var(--g-text) !important;
}

/* ===== Forms (login / register / contact) ===== */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
textarea, select, .form-control, .form-select{
  background: var(--g-bg-elev) !important;
  border: 1px solid var(--g-border) !important;
  color: var(--g-text) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  font-family: var(--g-sans) !important;
}
input:focus, textarea:focus, select:focus, .form-control:focus, .form-select:focus{
  border-color: var(--g-magenta) !important;
  box-shadow: 0 0 0 3px rgba(255,42,109,.15) !important;
  outline: none !important;
}
label, .form-label{
  color: var(--g-text-dim) !important;
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 6px;
}
::placeholder{ color: var(--g-text-mute) !important; }

/* ===== Tables ===== */
table, .table{
  background: var(--g-bg-card) !important;
  color: var(--g-text) !important;
  border-color: var(--g-border) !important;
}
th, .table th{
  background: var(--g-bg-elev) !important;
  color: var(--g-cyan) !important;
  border-color: var(--g-border) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .5px;
}
td, .table td{
  border-color: var(--g-border) !important;
  color: var(--g-text-dim) !important;
}

/* ===== Footer ===== */
footer, .footer-section, .footer{
  background: var(--g-bg-elev) !important;
  border-top: 1px solid var(--g-border) !important;
  color: var(--g-text-mute) !important;
  padding: 40px 0 !important;
}
footer a, .footer a{
  color: var(--g-text-dim) !important;
}
footer a:hover, .footer a:hover{
  color: var(--g-magenta) !important;
}
footer h3, footer h4, footer h5,
.footer h3, .footer h4, .footer h5{
  color: var(--g-text) !important;
}

/* ===== FAQ / Testimonials / About ===== */
.faq-section, .testimonial-section{
  background: transparent !important;
  padding: 60px 0 !important;
}
.accordion-item{
  background: var(--g-bg-card) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: 12px !important;
  margin-bottom: 10px;
}
.accordion-button{
  background: transparent !important;
  color: var(--g-text) !important;
  font-weight: 600 !important;
  padding: 16px 20px !important;
}
.accordion-button:not(.collapsed){
  background: var(--g-bg-elev) !important;
  color: var(--g-magenta) !important;
  box-shadow: none !important;
}
.accordion-button:focus{
  box-shadow: 0 0 0 3px rgba(255,42,109,.15) !important;
  border-color: var(--g-magenta) !important;
}
.accordion-body{
  background: transparent !important;
  color: var(--g-text-dim) !important;
  padding: 16px 20px !important;
}

/* ===== Login/Signup specific ===== */
.login-section, .register-section, .auth-section{
  background: transparent !important;
}
.title-login, .login-box{
  background: var(--g-bg-card) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: 14px !important;
  padding: 32px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
}
.title-image img{
  max-height: 50px;
}
.login-input{
  background: var(--g-bg-elev) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: 8px !important;
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: center;
  padding: 4px;
}
.icon_box{
  color: var(--g-magenta) !important;
  padding: 0 14px !important;
}
.txt_box, input.txt_box{
  background: transparent !important;
  border: none !important;
  color: var(--g-text) !important;
  padding: 12px 6px !important;
  flex: 1;
}
.login_btn, input.login_btn{
  background: linear-gradient(135deg, var(--g-magenta), var(--g-magenta-dim)) !important;
  color: #fff !important;
  border: none !important;
  width: 100% !important;
  padding: 13px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  letter-spacing: .3px;
  cursor: pointer;
  box-shadow: var(--g-shadow-mag);
  transition: transform .15s;
}
.login_btn:hover{
  transform: translateY(-2px);
}

/* ===== Misc utility ===== */
hr{
  border-color: var(--g-border) !important;
  opacity: 1 !important;
}
.bg-light, .bg-white, .bg-gray{
  background: var(--g-bg-card) !important;
  color: var(--g-text) !important;
}
.text-muted{ color: var(--g-text-mute) !important; }
.text-primary{ color: var(--g-magenta) !important; }
.text-secondary{ color: var(--g-cyan) !important; }
.text-dark{ color: var(--g-text) !important; }
.text-center, .text-start, .text-end{ }

/* ===== Mobile responsive ===== */
@media (max-width: 768px){
  h1{ font-size: 32px !important; }
  h2{ font-size: 24px !important; }
  .keyboard .key{
    min-width: 44px;
    height: 56px;
    font-size: 26px !important;
    padding: 0 12px;
  }
  .description-big{ font-size: 20px !important; }
  .description-small{ font-size: 15px !important; }
  #home-banner{ padding-top: 40px !important; padding-bottom: 40px !important; }
  .ads-box, .card.ads-box{ padding: 18px !important; }
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--g-bg); }
::-webkit-scrollbar-thumb{ background: var(--g-bg-card-hi); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover{ background: var(--g-magenta-dim); }