/* =========================
   HIVARO – Modern UI Kit
   ========================= */
:root{
  /* New user-provided light palette */
  --color-bg-main: #F9FAFB;        /* sehr helles Grau */
  --color-bg-card: #FFFFFF;       /* Weiß */
  --color-primary: #5B8DEF;       /* sanftes Blau */
  --color-secondary: #A7C7E7;     /* helles Pastellblau */
  --color-accent: #F4B860;        /* warmes Gold */
  --color-text-main: #424242;     /* dunkles Grau */
  --color-text-muted: #6B7280;    /* Grau */
  --color-eggshell: #F0EAD6;     /* Eierschalen-Farbe für Titel/Brand */

  --bg: var(--color-bg-main);
  --panel: rgba(31,41,51,.04); /* subtle shadow for light panels */
  --panel2: rgba(31,41,51,.06);
  --text: var(--color-text-main);
  --muted: var(--color-text-muted);
  --stroke: rgba(31,41,51,.08);

  --a: var(--color-primary);
  --b: var(--color-secondary);
  --c: var(--color-accent);
  --ok:#2CF3A8;

  --shadow: 0 18px 60px rgba(86, 86, 86, 0.42);
  --r: 22px;
  --r2: 28px;

  --max: 1120px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --brand-font: 'Poppins', var(--sans);

  /* Stat background translucency
     Adjust `--stat-opacity` between 0 (fully transparent) and 1 (opaque white).
     Example:  --stat-opacity: 0.85; */
  --stat-opacity: 0.94;
} 

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--text);
  /* slightly larger base font for improved readability (scaled up) */
  font-size: 18px;
  line-height: 1.62;
  /* page background moved to `.background` to ensure image is visible */
  background: none;
  overflow-x:hidden;
} 

a{ color:inherit; text-decoration:none; }
a:hover{ opacity:.92; }

.container{
  width: min(var(--max), calc(100% - 40px));
  margin-inline:auto;
}

.skip{
  position:absolute;
  left:-999px; top:0;
  background:#fff; color:#000;
  padding:10px 12px; border-radius:10px;
}
.skip:focus{ left:12px; top:12px; z-index:9999; box-shadow: 0 6px 20px rgba(43,166,255,.12); }

/* Top background noise + grid */
.background{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:1;
  z-index:-1; /* sit behind content, above page background */
  /* Full-bleed site background (cover, centered, fixed) */
  background-image: url("img/hero.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
} 
.background::before{
  content:"";
  position:absolute; inset:0;
  /* soft radial accents moved from body */
  background-image:
    radial-gradient(900px 500px at 10% 10%, rgba(91,141,239,.06), transparent 45%),
    radial-gradient(700px 380px at 85% 30%, rgba(167,199,231,.04), transparent 45%),
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: auto, auto, 72px 72px;
  background-repeat: no-repeat;
  mask-image: radial-gradient(closest-side at 50% 40%, rgba(0,0,0,1), rgba(0,0,0,0));
  opacity:.35;
}
.background::after{
  content:"";
  position:absolute; inset:-40px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity:.14;
} 

/* Header */
.header{
  position:sticky; top:0; z-index:50;
  /* darker header for better contrast with the light page */
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(17,24,39,.98), rgba(10,14,20,.98));
  border-bottom:1px solid rgba(0,0,0,.12);
}
/* Header-specific typography and colors */
.header .brand b{ color:#9f3b3b; font-weight:800; }
.header .brand small{ color: rgba(255,255,255,.85); }
.header .nav a{ color: #fff; border-color: rgba(255,255,255,.06); background: rgba(255,255,255,.03); font-weight:600; }
.header .nav a:hover{ background: rgba(88, 88, 88, 0.06); }
.header .menu-btn{ color:#fff; border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.04); }
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:14px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  min-width: 180px;
}
.brand, .brand b, .brand small, .logo{ transition: transform .18s ease, font-size .18s ease; }
.logo{
  width:44px; height:44px;
  border-radius: 12px;
  background: radial-gradient(120% 120% at 25% 15%, var(--color-primary), var(--color-secondary) 55%, var(--color-accent) 120%);
  box-shadow: 0 10px 30px rgba(91,141,239,.06);
  position:relative;
}
.logo::after{
  content:"";
  position:absolute; inset:2px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.24);
}
.brand b{
  letter-spacing:.4px;
  font-size: 15px;
  font-family: var(--brand-font);
  font-weight: 700;
}
.brand small{
  display:block;
  font-size:12px;
  font-family: var(--brand-font);
  font-weight: 400;
  color: var(--muted);
  margin-top:2px;
}

/*
  B2 Branding-Element (`b2`)
  - Stil für das `<b2>HIVARO</b2>`-Element im Header (Branding; sichtbar, modern)
  - Wirkung: größere, starke Markenschrift mit Farbverlauf (Primary → Secondary)
  - Verwendet in: `index.html` innerhalb `.brand` (z. B. `<b2>HIVARO</b2>`)
  - Tipp: Fallback-Farbe (`--color-eggshell`) sorgt für Lesbarkeit bei älteren Browsern
*/
b2{
  display:inline-block;
  font-family: var(--brand-font);
  font-variant: small-caps;
  font-weight:700;
  font-size: 28px;
  letter-spacing: .06em;
  text-transform:none;
  color: var(--color-accent); /* Fallback to brand yellow */
  /* warm yellow gradient for brand wordmark */
  background: linear-gradient(90deg, var(--color-accent), #E8A43A);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,.08);
  transition: transform .22s ease, opacity .18s ease;
  position: relative;
  overflow: hidden;
}

/* Subtle sheen / shimmer */
b2::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.45) 48%, rgba(255,255,255,0.00) 60%);
  transform: translateX(-120%);
  mix-blend-mode: screen;
  filter: blur(4px);
  opacity: .65;
  transition: opacity .24s ease;
  animation: shimmer 6s linear infinite;
}

/* slower, stronger shimmer on hover */
b2:hover::after{ opacity: .95; filter: blur(2px); animation-duration: 3s; }

@keyframes shimmer{
  0%{ transform: translateX(-120%); }
  50%{ transform: translateX(20%); }
  100%{ transform: translateX(120%); }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce){
  b2::after{ animation: none; opacity: .0; }
}

b2:hover{ transform: translateY(-2px) scale(1.02); opacity:.98; }
.nav{
  display:flex; gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.nav a{
  padding:10px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(115, 115, 115, 0.04);
  transition: transform .18s ease, background .18s ease, border .18s ease;
  font-size: 13.5px;
  color: rgba(234,240,255,.92);
}
.nav a:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
}
.nav a.primary{
  border-color: rgba(43,166,255,.36);
  background: linear-gradient(135deg, rgba(43,166,255,.24), rgba(46,227,255,.12));
}
.menu-btn{
  display:none;
  padding:10px 12px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color:var(--text);
}

/* Fokus-Sichtbarkeit für Tastaturnutzer */
.btn:focus-visible,
.menu-btn:focus-visible,
.nav a:focus-visible,
.input:focus-visible{
  outline: none;
  border-color: rgba(43,166,255,.6);
  box-shadow: 0 0 0 4px rgba(43,166,255,.12);
  border-radius: 14px;
}

/* Hero */
.hero{
  padding: 52px 0 18px;
  position:relative;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  align-items:stretch;
}
.kicker{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--color-accent); /* warm gold kicker for emphasis */
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.h1{
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.02;
  font-weight:800; /* stronger heading weight for legibility */
  margin: 10px 0 10px;
  letter-spacing:-.02em;
} 
.sub{
  font-size: 18px;
  color: rgba(31,41,51,.86); /* darker subtext for readability */
  line-height: 1.62;
  max-width: 60ch;
  font-weight:500;
}  
.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
  transition: transform .18s ease, background .18s ease, border .18s ease;
  font-weight:600;
  font-size: 15px;
} 
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.08); border-color: rgba(17,24,39,.98)
    ; }
.btn.primary{
  /* Use the header background for the primary CTA to visually connect it to the header */
  border: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(17,24,39,.98), rgba(10,14,20,.98));
  color: #fff;
  box-shadow: 0 10px 30px rgba(45, 45, 45, 0.18);
}
/* Keep hover for primary CTA subtle and consistent with dark gradient */
.btn.primary:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(28,34,47,.98), rgba(14,18,24,.98));
  border-color: rgba(255,255,255,.08);
}
.btn .dot{
  width:10px; height:10px; border-radius:99px;
  background: radial-gradient(circle at 30% 30%, var(--b), var(--a));
  box-shadow: 0 0 0 3px rgba(46,227,255,.12);
}

/* Card / panels */
.panel,
.card{
  position: relative;
}

.panel::before,
.card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  background:
    radial-gradient(
      220px 120px at 20% 0%,
      rgba(91,141,239,.12),
      transparent 60%
    );
  opacity:.0;
  transition: opacity .4s ease;
  pointer-events:none;
}

.panel:hover::before,
.card:hover::before{
  opacity:.55;
}

.panel-inner{ padding: 18px; }

.badges{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:14px;
}
.badge{
  font-size: 14px;
  color: rgba(23, 23, 23, 0.832);
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

/* Showcase / images */
.showcase{
  min-height: 340px;
  position:relative;
  overflow: hidden;
  border-radius: var(--r);
}
.showcase .bild-erste-ebene-01{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(1.1) contrast(1.05);
  z-index:0;
}
.showcase::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(600px 300px at 20% 20%, rgba(46,227,255,.18), transparent 55%),
              radial-gradient(700px 420px at 80% 70%, rgba(77,216,255,.14), transparent 55%),
              linear-gradient(180deg, rgba(7,10,18,.10), rgba(7,10,18,.75));
} 
.showcase .overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  padding: 18px;
  z-index:1;
}
.meta{
  width:100%;
  display:flex;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}
.meta .chip{
  border-radius: 999px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.30);
  color: rgba(234,240,255,.92);
  font-size: 12px;
}

/* Sections */
.section{ padding: 26px 0; }
.section h2{
  font-size: 26px;
  margin: 0 0 12px;
  letter-spacing:-.01em;
} 
.section p{ color: rgba(31,41,51,.78); line-height:1.7; margin: 8px 0; }

.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.card{
  border-radius: var(--r);
  border: 1px solid var(--stroke);
  /* translucent white like sections/stats — adjust with `--stat-opacity` */
  background: rgba(255,255,255, var(--stat-opacity));
  padding: 16px;
  transition: transform .18s ease, border .18s ease, box-shadow .18s ease;
  min-height: 176px;
  color: var(--text);
  box-shadow: 0 8px 28px rgba(31,41,51,.06);
} 

.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(31,41,51,.10);
  border-color: rgba(31,41,51,.08);
} 
.card .icon{
  width:42px; height:42px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(43,166,255,.35), rgba(46,227,255,.18));
  border: 1px solid rgba(255,255,255,.18);
  display:grid; place-items:center;
  margin-bottom: 12px;
}
.card b{ display:block; margin: 2px 0 6px; }
.card small{ color: var(--muted); line-height:1.6; display:block; }

/* Angebotsprofil / Preisübersicht */
.offer-panel{ margin-top:18px; }
.offer-panel h3{ margin:0 0 8px; font-size:18px; }
.price-list{ list-style:none; padding:0; margin:10px 0 0; display:grid; gap:8px; }
.price-item{ padding:10px 12px; border-radius:12px; border:1px dashed rgba(31,41,51,.06); /* translucent white */ background: rgba(255,255,255, var(--stat-opacity)); display:flex; justify-content:space-between; align-items:center; }
.price-item strong{ color:var(--a); }

details.more{ margin-top:12px; }
details>summary{ cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.04); background: rgba(255,255,255,.02); }
details>summary::-webkit-details-marker{ display:none; }
details>summary .chev{ display:inline-flex; align-items:center; gap:6px; }
details>summary .chev svg{ width:18px; height:18px; display:block; transition: transform .22s ease, opacity .18s ease; transform: rotate(0deg); color: var(--muted); opacity:.92; }
details>summary:hover .chev svg{ opacity:1; transform: rotate(0deg) scale(1.06); }
details[open]>summary .chev svg{ transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce){
  details>summary .chev svg{ transition:none; }
}
.offer-panel .muted{ color: var(--muted); font-size: 13px; margin-top:8px; }
@media (max-width:980px){
  .price-item{ padding:12px; font-size:15px; }
}

/* Stats */
.stats{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.stat{
  padding: 14px 14px 12px;
  border-radius: var(--r);
  border: 1px solid var(--stroke);
  /* translucent white — change `--stat-opacity` in :root to adjust */
  background: rgba(255,255,255, var(--stat-opacity));
  color: var(--text);
  box-shadow: 0 6px 20px rgba(31,41,51,.06);
}
.stat .n{
  font-size: 24px;
  font-weight: 800;
  letter-spacing:-.02em;
} 
.stat .l{ color: var(--muted); font-size: 12.5px; margin-top:4px; }

/* Contact */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form{
  display:grid;
  gap: 10px;
}
.input{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: var(--text);
  outline:none;
}
textarea.input{ min-height: 120px; resize: vertical; }
.help{
  font-size: 12px;
  color: rgba(234,240,255,.62);
  line-height:1.5;
}
.kv{
  display:grid; gap:10px;
}
.kv .row{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  /* translucent white — controlled by `--stat-opacity` in :root */
  background: rgba(255,255,255, var(--stat-opacity));
  font-size: 15px;
} 
.kv .row b{ display:block; margin-bottom:4px; }
.kv .row span{ color: var(--muted); }

/* Footer (matches header theme) */
.footer{
  padding: 26px 0 34px;
  margin-top: 14px;
  /* Use same dark gradient as header for a consistent theme */
  background: linear-gradient(180deg, rgba(17,24,39,.98), rgba(10,14,20,.98));
  color: rgba(255,255,255,.92);
  border-top: 1px solid rgba(255,255,255,.04);
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}
.foot-links{
  display:flex; gap:10px; flex-wrap:wrap;
  color: rgba(234,240,255,.92);
  font-size: 13px;
}
.foot-links a{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  color: rgba(255,255,255,.92);
}
.copy{ color: rgba(234,240,255,.65); font-size: 13px; }

/* Legal page */
.legal {
  padding: 28px 0 20px;

  background:
    /* weißes Grundlayer */
    linear-gradient(
      rgba(255,255,255,0.85),
      rgba(255,255,255,0.85)
    ),

    /* dekorative Effekte */
    radial-gradient(900px 500px at 10% 10%, rgba(91,141,239,.06), transparent 45%),
    radial-gradient(700px 380px at 85% 30%, rgba(167,199,231,.04), transparent 45%),
    linear-gradient(to right, rgba(0,0,0,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.04) 1px, transparent 1px);

  background-size: auto, auto, auto, 72px 72px, 72px 72px;
  background-repeat: no-repeat;

  /* mask optional – sonst weglassen */
  mask-image: radial-gradient(circle at 50% 40%, #000 60%, transparent 100%);
}

.legal h1{
  font-size: 30px;
  margin: 0 0 10px;
}
.legal h2{
  font-size: 18px;
  margin-top: 18px;
}
.legal .box{
  /* Removed visible rectangle styling for legal pages per request */
  padding: 0; /* keep spacing minimal; content controls spacing */
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}
.legal ul{ margin: 8px 0 0 18px; color: var(--muted); line-height:1.7; }
.legal p{ color: var(--muted); line-height:1.75; }

/* Reveal animation */
.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.on{
  opacity:1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 980px){
  /* Keep header-inner relatively positioned so we can absolutely position the menu button */
  .header-inner{ position:relative; }

  /* Keep the menu button visually fixed inside the header while the nav expands */
  .menu-btn{
    position: absolute;
    right: 25px;
    top: 14px;
    z-index: 90;
  }
  .hero-grid{ grid-template-columns: 1fr; }
  .hero{ padding: 36px 0 12px; }
  .h1{ font-size: clamp(28px, 6.5vw, 42px); }
  .showcase{ 
    min-height: 260px; 
    width: 100%;
    aspect-ratio: 16 / 10;
  }
  .showcase .bild-erste-ebene-01{
    background-size: cover;
    background-position: center center;
  }
  .cards{ grid-template-columns: 1fr; }
  .stats{ grid-template-columns: repeat(2, 1fr); }
  .contact-grid{ grid-template-columns: 1fr; }
  .menu-btn{ display:inline-flex; }
  /* Sections on mobile: reduce padding & radius for better fit */
  .section .container{ padding: 16px; border-radius: 12px; }
  /* Mobile: make nav a side drawer, not part of header */
  .nav{ display:none; }
  .nav.open{
    display:flex;
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    width: min(360px, 86vw);
    padding: 72px 18px 18px 18px; /* leave space for header */
    flex-direction: column;
    /* distribute links across height */
    justify-content: space-between;
    gap: 12px;
    /* frosted glass feel (no visible border) */
    background: linear-gradient(180deg, rgba(10,14,22,.72), rgba(8,12,20,.72));
    backdrop-filter: blur(8px) saturate(1.08);
    box-shadow: -12px 0 40px rgba(0,0,0,.5);
    transform: translateX(100%);
    transition: transform .36s cubic-bezier(.2,.9,.2,1);
    z-index: 60;
  }
  .nav.open.opening{
    transform: translateX(0);
  }
  /* make menu button fixed so it stays visible while drawer opens */
  .menu-btn{
    position: fixed;
    right: 14px;
    top: 14px;
    z-index: 70;
  }

  /* Remove overlay (no darkening) */
  body.nav-open::before{ display:none; }

  /* Simplified nav: larger text, no decorative dots or borders */
  .nav a{
      padding: 16px 14px;
      border-radius: 10px;
      background: transparent;
      text-align: center;
      font-size: 24px; /* slightly reduced for balance */
      color: var(--text);
      letter-spacing: .08em;
      display:flex; align-items:center; justify-content:center;
      position:relative;
      transition: transform .18s ease, background .18s ease, color .18s ease;
      border: none; /* remove any borders */
    }

  .nav a:hover{
    transform: translateY(-3px);
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  }

  /* Primary link stronger and larger */
  .nav a.primary{
    font-weight:700;
    font-size: 26px; /* more prominent */
    background: linear-gradient(90deg, rgba(44,197,185,.06), rgba(51,235,217,.03));
    border: none;
    color: rgba(6,30,24, .98);
    -webkit-text-fill-color: rgba(6,30,24, .98);
  }
}

/* When mobile nav is open, keep hero heading prominent and add spacing so it's not covered */
@media (max-width: 980px){
  body.nav-open .h1{
    font-size: clamp(32px, 8.5vw, 48px);
    line-height: 1.04;
  }
  body.nav-open .hero{ padding-top: 72px; }
}

/* Brand slide+grow animation */
@keyframes brandSlideGrow {
  0% { transform: translateX(0) scale(1); }
  40% { transform: translateX(6px) scale(1.08); }
  70% { transform: translateX(12px) scale(1.14); }
  100% { transform: translateX(8px) scale(1.10); }
}

/* Variant for logo with slightly earlier timing */
@keyframes logoSlideGrow {
  0% { transform: translateX(0) scale(1); }
  40% { transform: translateX(4px) scale(1.06); }
  70% { transform: translateX(9px) scale(1.12); }
  100% { transform: translateX(6px) scale(1.08); }
}
/* Apply animation when toggled; keep transform-origin left-center for a natural slide */
.brand-anim{ transform-origin: left center; animation: brandSlideGrow 520ms cubic-bezier(.2,.9,.2,1) forwards; }
.logo-anim{ transform-origin: left center; animation: logoSlideGrow 520ms cubic-bezier(.2,.9,.2,1) forwards; }
/* Make sure the brand remains readable even after animation end */
@media (max-width:980px){
  body.nav-open .brand{ transform: translateX(8px) scale(1.08); }
  body.nav-open .logo{ transform: translateX(6px) scale(1.06); }
}
/* Enlarge brand/logo slightly while mobile nav is open so it remains readable */
@media (max-width: 980px){
  body.nav-open .brand{ transform: scale(1.08); }
  body.nav-open .logo{ transform: scale(1.08); }
  body.nav-open .brand b{ transform: scale(1.06); font-size: 17px; }
  body.nav-open .brand small{ transform: scale(1.02); font-size: 13px; }
}
@media (prefers-reduced-motion: reduce){
  *{
    animation: none !important;
    transition: none !important;
  }
}


@keyframes blueFloat {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: .28;
  }
  50% {
    transform: translate(-20px, -12px) scale(1.04);
    opacity: .36;
  }
  100% {
    transform: translate(0, 0) scale(1);
    opacity: .28;
  }
}

.background::before{
  animation: blueFloat 26s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes softPulse {
  0%,100%{
    box-shadow:
      0 10px 30px rgba(45,45,45,.18),
      0 0 0 0 rgba(91,141,239,.0);
  }
  50%{
    box-shadow:
      0 12px 36px rgba(45,45,45,.22),
      0 0 0 6px rgba(91,141,239,.12);
  }
}

.btn.primary{
  animation: softPulse 4.5s ease-in-out infinite;
}

.contact-intro{
  font-size: 18px;
  font-weight: 500;
  color: rgba(31,41,51,.88);
  position: relative;
  padding-left: 18px;
  margin-bottom: 18px;
}

.contact-intro::before{
  content:"";
  position:absolute;
  left:0;
  top:.35em;
  bottom:.35em;
  width:3px;
  border-radius: 4px;
  background: linear-gradient(
    180deg,
    rgba(91,141,239,.65),
    rgba(167,199,231,.35)
  );
}
.contact-intro{
  transition: opacity .6s ease, transform .6s ease;
}

.reveal.on .contact-intro{
  opacity: 1;
}
.contact-intro{
  opacity: .92;
}
.reveal.on .contact-intro{
  opacity: 1;
}
.contact-intro{
  color: rgba(15, 23, 42, .95); /* near-black */
  font-weight: 500;
}
.contact-intro{
  position: relative;
  padding: 12px 16px;
  border-radius: 10px;
  backdrop-filter: blur(6px);
}

.contact::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: rgba(255,255,255,.65);
  z-index:-1;
}

.section{
  position: relative;
  padding: 32px 28px;
  border-radius: 18px;
  backdrop-filter: blur(1px);
}