:root{
  color-scheme: dark;

  --radius: 1.25rem;

  --bg: #0f1115;          
  --bg-elev: #151823;      
  --tile: #181c28;         
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);

  --text: #e8eaf0;
  --muted: #a8b0bd;

  --purple: #6A2CFF;
  --purple-2: #8A6BFF;

  /* Pattern controls (dense + staggered horizontally) */
  --pattern-size: 47px;
  --pattern-opacity: .28;
  --pattern-shift-x: px;   

  --hero-fade-size: 100px;
  --hero-fade-strength: .55;
}

*{ font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
html,body{ height:100% }

/* ================== LAYOUT / BACKGROUND ================== */
body{
  background: var(--bg);
  color: var(--text);
  padding-top: 100px;            
  position: relative;
}

body::after{
  content:"";
  position: fixed;
  inset: 0;

  background-image:
    url("../img/brand/gvm_logo_pattern_tile.png"),
    url("../img/brand/gvm_logo_pattern_tile.png");
  background-repeat: repeat, repeat;
  background-size:
    var(--pattern-size) var(--pattern-size),
    var(--pattern-size) var(--pattern-size);

  /* split X & Y so the X offset doesn't get normalized */
  background-position-x: 0, var(--pattern-shift-x);
  background-position-y: 0, 0;

  /* keep it fixed under all content */
  background-attachment: fixed, fixed;

  opacity: var(--pattern-opacity);
  pointer-events: none;
  z-index: -1;
}

/* ================== NAVBAR ================== */
.navbar{
  background: rgba(21, 24, 35, .78) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.navbar .nav-link{ color: var(--muted); }
.navbar .nav-link.active,
.navbar .nav-link:hover{ color: var(--text); }

/* Brand image sizing */
.navbar-brand{ padding:0; line-height:1; }
.navbar-brand img{
  height: 40px;
  width: auto;
  display: block;
  transition: transform .2s ease;
}
.navbar-brand:hover img{ transform: translateY(-1px); }
@media (min-width: 992px){
  .navbar-brand img{ height: 48px; }
}

/* ================== HERO ================== */
.hero{
  position: relative;
  padding-top: 7rem;
  padding-bottom: 4rem;
  background-image:
    linear-gradient(to bottom, rgba(15,17,21,.30), rgba(15,17,21,.55)),
    url("../img/brand/hero-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  box-shadow: inset 0 -40px 80px rgba(0,0,0,.20);
  overflow: hidden; /* keep fades tidy */
}
.lead{ color: var(--muted); }

/* Top & bottom fades so hero melts into page bg */
.hero::before,
.hero::after{
  content:"";
  position:absolute;
  left:0; right:0;
  pointer-events:none;
  z-index:0;
}
.hero::before{
  top:0;
  height: var(--hero-fade-size);
  background: linear-gradient(
    to bottom,
    rgba(15,17,21, var(--hero-fade-strength)) 0%,
    rgba(15,17,21, 0) 100%
  );
}
.hero::after{
  bottom:0;
  height: var(--hero-fade-size);
  background: linear-gradient(
    to top,
    rgba(15,17,21, var(--hero-fade-strength)) 0%,
    rgba(15,17,21, 0) 100%
  );
}

/* Wider hero paragraph on home so it wraps less */
.hero-copy{
  max-width: 820px;
}

/* Buttons (keep the look you liked) */
.btn{ border-radius:.9rem }
.btn-dark{ background:var(--purple); border-color:var(--purple); }
.btn-dark:hover{ background:#5d21ff; border-color:#5d21ff; }
.btn-outline-dark{ color:var(--text); border-color:var(--purple); }
.btn-outline-dark:hover{ background:var(--purple); border-color:var(--purple); color:#fff; }

/* ================== CARDS + FOOTER ================== */
.card{
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.card .text-muted{ color: var(--muted) !important; }

/* Footer — stronger contrast + white links */
footer{
  background: #0d1017 !important;
  border-top: 1px solid var(--border-strong) !important;
  color: var(--text);
  border-radius: var(--radius) var(--radius) 0 0;
}
footer p,
.footer-copy{ color: #dfe3ee; }
footer a,
.footer-link{
  color: #fff !important;
  text-decoration: none;
}
footer a:hover,
.footer-link:hover{
  color: var(--purple) !important;
  text-decoration: underline;
}

/* ================== FORMS (CONTACT) ================== */
.form-label{ color: var(--muted); }
.form-control, .form-select, textarea{
  background: var(--tile) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 14px;
}
.form-control::placeholder, textarea::placeholder{ color:#8f96a3; }
.form-control:focus, .form-select:focus, textarea:focus{
  border-color: var(--purple) !important;
  box-shadow: 0 0 0 .2rem rgba(106,44,255,.25) !important;
  background:#1a2030 !important;
}
/* Autofill dark fix */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--tile) inset !important;
  box-shadow: 0 0 0 1000px var(--tile) inset !important;
  transition: background-color 9999s ease-out;
}

/* ================== OPAQUE LOGO CAROUSEL ================== */
.logos-section .container-xxl{ max-width: 1400px; } 
.logo-surface{
  padding: 26px 0;                   
  background: #0d1017;               
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.logo-ticker{
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}
.logo-track{
  display: inline-flex;
  align-items: center;
  gap: 3.2rem;
  padding: 8px 2rem;
  will-change: transform;
  animation: tickerScroll 55s linear infinite;
}
@keyframes tickerScroll{
  from{ transform: translateX(0) }
  to  { transform: translateX(-50%) }
}
.logo-bare{
  display: block;
  max-height: 96px;                  
  height: auto;
  width: auto;
  filter: grayscale(100%) contrast(.95) brightness(.98);
  opacity: .98;
  transition: none !important;     
  cursor: default;   
}
.logo-bare:hover{
  filter: none;
  opacity: 1;
  transform: none !important; 
}

.card-ux{
  background: #171b27;               
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.card-title-ux{
  display: inline-flex;            
  align-items: center;
  gap: .6rem;
  margin: 0 0 1rem 0;
  line-height: 1.25;
}
.card-title-ux::before{
  content:"";
  width: .5rem;
  height: 1.15rem;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--purple), var(--purple-2));
  box-shadow: 0 0 0 3px rgba(106,44,255,.15);
  flex: 0 0 auto;
}

.list-ux{
  padding-left: 1.1rem;
}
.list-ux li{
  margin-bottom: .5rem;
}

.page-hero{ padding-top:7rem; padding-bottom:2rem }
.text-muted{ color: var(--muted) !important }

@media (max-width:576px){
  body{ padding-top:92px }
  .logo-track{ gap: 2rem }
  .logo-bare{ max-height: 72px }
}

.contact-aside{
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
}
.contact-aside svg{ color: #b6bff0; flex: 0 0 auto; }
.contact-aside .contact-link{
  color: #fff;
  text-decoration: none;
}
.contact-aside .contact-link:hover{
  color: var(--purple);
  text-decoration: underline;
}
.contact-aside hr{ border-color: var(--border); }

.gdpr-link{ color:#fff; text-decoration:underline }
.gdpr-link:hover{ color: var(--purple) }