/* ==========================================================
   SocialFreedom — FOUNDER LUXURY (V6.5) — Production CSS (NO BLUE)
   FIXES:
   - No body transform (prevents iOS/iPadOS position:fixed bugs)
   - WhatsApp bubble: stable fixed + safe-area + always visible
   - WhatsApp bubble auto-hide in HERO (via .wa-hide)
   - Shared hero background band works (NOT commented out)
   - Kept existing luxury visuals + iPad lag fallback
   ========================================================== */

/* ---------------------------
   0) Design Tokens
---------------------------- */
:root{
  /* Layout */
  --max: 1120px;
  --pad: 20px;

  /* Radii */
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 26px;

  /* Typography */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;

  /* Scale */
  --s1: 8px;
  --s2: 12px;
  --s3: 16px;
  --s4: 20px;
  --s5: 26px;
  --s6: 36px;
  --s7: 54px;
  --s8: 74px;

  /* Headings */
  --h1: clamp(2.55rem, 4.8vw, 4.55rem);
  --h2: clamp(1.7rem, 2.7vw, 2.6rem);

  /* ===== Founder Luxury Palette (NO BLUE) ===== */
  --black0: #060606;  /* onyx base */
  --black1: #0B0B0C;  /* deep charcoal */
  --black2: #121214;  /* anthracite */
  --cacao:  #120D0A;  /* warm shadow */

  /* Text */
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --muted2: rgba(255,255,255,.55);

  /* Gold (balanced: luxury, not yellow) */
  --gold-hi:  #FFF3D6; /* highlight */
  --gold-1:   #F7E6C3; /* champagne */
  --gold-2:   #F2D6A0; /* warm */
  --gold-3:   #D7B06F; /* amber */
  --gold-4:   #B88646; /* deep gold edge */
  --gold-5:   #8A5A2C; /* shadow edge */

  /* Lines */
  --line: rgba(255,255,255,.10);
  --line2: rgba(255,255,255,.07);
  --goldLine: rgba(215,176,111,.22);
  --goldLine2: rgba(215,176,111,.14);

  /* Glass surfaces */
  --glassA: rgba(255,255,255,.075);
  --glassB: rgba(255,255,255,.026);
  --mirrorEdge: rgba(255,255,255,.05);

  /* Shadows */
  --shadowA: 0 36px 130px rgba(0,0,0,.66);
  --shadowB: 0 18px 60px rgba(0,0,0,.48);
  --shadowC: 0 12px 34px rgba(0,0,0,.40);

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);

  /* Premium block elevation */
  --elev-1: 0 14px 44px rgba(0,0,0,.44);
  --elev-2: 0 26px 90px rgba(0,0,0,.58);
  --edge-w: rgba(255,255,255,.08);
  --edge-g: rgba(215,176,111,.18);
  --sheen-w: rgba(255,255,255,.10);
  --sheen-g: rgba(215,176,111,.10);

  /* Alias (for compatibility) */
  --sqc-gold: var(--gold-2);
  --sqc-gold-dark: var(--gold-4);
}

/* ---------------------------
   1) Base + Reset
---------------------------- */
*{ box-sizing:border-box; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
p{ margin:0; }
ul{ margin:0; padding:0; }
li{ margin:0; }

html{
  scroll-behavior:smooth;
  background: var(--black0);
  background-color: var(--black0);
  color-scheme: dark;
}

html, body{
  overscroll-behavior-y: auto;
  overscroll-behavior-x: none;
}

body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  background-color: var(--black0);
  min-height: 100dvh;
  -webkit-text-size-adjust: 100%;

  background:
    radial-gradient(1200px 900px at 12% -15%, rgba(215,176,111,.14), transparent 62%),
    radial-gradient(900px 650px at 92% 10%, rgba(184,134,70,.10), transparent 60%),
    radial-gradient(1100px 820px at 50% 130%, rgba(18,13,10,.75), transparent 62%),
    linear-gradient(180deg, var(--black0) 0%, var(--black1) 55%, var(--black0) 100%);

  /* IMPORTANT FIX:
     Do NOT transform body, it breaks position:fixed on iOS/iPadOS. */
  transform: none;
  backface-visibility: visible;
}

/* ---------------------------
   Global Luxury Texture
---------------------------- */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background:
    radial-gradient(1200px 720px at 16% 10%, rgba(215,176,111,.10), transparent 60%),
    radial-gradient(980px 620px at 88% 16%, rgba(184,134,70,.075), transparent 58%),

    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.075) 0px,
      rgba(255,255,255,.075) 1px,
      rgba(255,255,255,0) 1px,
      rgba(255,255,255,0) 26px
    ),

    repeating-linear-gradient(
      90deg,
      rgba(215,176,111,.050) 0px,
      rgba(215,176,111,.050) 1px,
      rgba(215,176,111,0) 1px,
      rgba(215,176,111,0) 44px
    ),

    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.028) 0px,
      rgba(255,255,255,.028) 1px,
      rgba(255,255,255,0) 1px,
      rgba(255,255,255,0) 22px
    );

  mix-blend-mode: soft-light;
  opacity: .44;

  transform: translateZ(0);
  will-change: opacity;
}

@supports not (mix-blend-mode: soft-light){
  body::after{
    mix-blend-mode: normal;
    opacity: .16;
  }
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 0;
  opacity: .045;
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* keep content above overlays (exclude WhatsApp) */
body > *:not(.wa-fab):not(.wa-fab-mini){
  position: relative;
  z-index: 1;
}

/* Mobile: remove grain */
@media (max-width: 980px){
  body::before{ display:none; }
  body::after{
    opacity: .30;
    mix-blend-mode: soft-light;
  }
}

/* Tablet/iPad: reduce expensive blend/backdrop */
@media (max-width: 1024px){
  body::after{
    mix-blend-mode: normal !important;
    opacity: .18 !important;
  }
  body::before{ display:none !important; }

  .nav,
  .panel,
  .card,
  .cta-card,
  .hero-signature,
  .quote{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Container */
.container{
  width:100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* Skip link */
.skip{
  position:absolute; left:-999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  left: 16px; top: 16px; width:auto; height:auto;
  padding: 12px 14px;
  background: rgba(10,10,10,.92);
  border: 1px solid var(--goldLine);
  border-radius: var(--r-sm);
  z-index:99999;
}

/* Focus visible */
:focus-visible{
  outline: 3px solid rgba(215,176,111,.52);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* Reduce Motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto !important; }
  *, *::before, *::after{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Smooth anchor offset for sticky nav */
:target{ scroll-margin-top: 92px; }
@media (max-width: 980px){
  :target{ scroll-margin-top: 84px; }
}

/* ---------------------------
   2) Typography
---------------------------- */
.h2{
  font-size: var(--h2);
  line-height: 1.12;
  letter-spacing: -0.035em;
  font-weight: 950;
  margin: 0 0 12px;
}
.lead{
  font-size: 1.06rem;
  line-height: 1.68;
  color: var(--muted);
}
.lead strong{ color: var(--text); }

.smallprint{
  margin-top: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.60);
  font-size: .93rem;
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--goldLine);
  background: rgba(215,176,111,.06);
  color: rgba(242,214,160,.92);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .22px;
}
.micro{
  margin-top: 16px;
  color: rgba(242,214,160,.78);
  font-size: .95rem;
  letter-spacing: .18px;
}

/* ---------------------------
   3) Sections + Grids
---------------------------- */
.section{ padding: var(--s8) 0; }
.section-tight{ padding: 64px 0; }

.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items:start;
}
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.split{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 22px;
  align-items:stretch;
}

/* ---------------------------
   4) Navbar
---------------------------- */
.nav{
  position: sticky;
  top:0;
  z-index: 50;

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  background:
    linear-gradient(180deg, rgba(12,12,12,.84), rgba(6,6,6,.58));
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

.nav::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(242,214,160,.16),
    rgba(255,255,255,.06),
    rgba(242,214,160,.10),
    transparent
  );
  pointer-events:none;
  opacity: .9;
}

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 0;
  gap: 16px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  font-weight: 950;
  letter-spacing: -0.02em;
}
.brand small{
  display:block;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--muted2);
  margin-top: 2px;
}

.brand-logo{
  width: 48px;
  height: 48px;
  border-radius: var(--r-sm);
  object-fit: contain;

  background:
    radial-gradient(120% 90% at 25% 20%, rgba(255,255,255,.12), rgba(255,255,255,0) 58%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  padding: 6px;

  border: 1px solid rgba(215,176,111,.26);
  box-shadow:
    0 14px 40px rgba(0,0,0,.64),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 26px rgba(215,176,111,.10);

  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.35))
    drop-shadow(0 10px 18px rgba(0,0,0,.65));
}

.nav-links{
  display:flex;
  gap: 14px;
  align-items:center;
}
.nav-links a{
  text-decoration:none;
  color: rgba(255,255,255,.76);
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.nav-links a:hover{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.07);
  transform: translateY(-1px);
}

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

.burger{
  display:none;
  width:44px;
  height:44px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}

.mobile{
  display:none;
  padding: 10px 0 16px;
}
.mobile a{
  display:block;
  text-decoration:none;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  margin-top: 10px;
  color: rgba(255,255,255,.78);
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.mobile a:hover{
  transform: translateY(-1px);
  border-color: rgba(215,176,111,.18);
  background: rgba(255,255,255,.06);
}
.mobile.open{ display:block; }

/* ---------------------------
   5) Buttons
---------------------------- */
.btn{
  position: relative;
  isolation: isolate;
  z-index: 0;
  overflow: hidden;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  padding: 12px 16px;
  border-radius: 16px;
  text-decoration:none;

  font-weight: 900;
  letter-spacing: .14px;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.90);

  box-shadow:
    0 14px 38px rgba(0,0,0,.48),
    0 0 0 1px rgba(255,255,255,.04) inset;

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

  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0px); opacity:.97; }

.btn::before,
.btn::after{
  position:absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  content:"";
  pointer-events:none;
}

.btn-primary{
  color: #0B0B0C;
  border-color: rgba(255,255,255,.22);

  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 40%),
    linear-gradient(135deg,
      var(--gold-hi) 0%,
      var(--gold-1) 18%,
      var(--gold-2) 34%,
      var(--gold-3) 58%,
      var(--gold-4) 86%,
      var(--gold-5) 118%
    );

  box-shadow:
    0 30px 100px rgba(0,0,0,.68),
    0 14px 38px rgba(215,176,111,.16),
    inset 0 1px 0 rgba(255,255,255,.70),
    inset 0 -12px 20px rgba(0,0,0,.22);
}
.btn-primary::before{
  inset: 1px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 48%),
    radial-gradient(120% 90% at 18% 18%, rgba(255,255,255,.55), transparent 58%),
    radial-gradient(90% 70% at 86% 22%, rgba(255,255,255,.22), transparent 62%);
  opacity: .62;
}
.btn-primary::after{
  inset: 1px;
  opacity: .10;
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.btn-primary:hover{
  filter: brightness(1.03) saturate(1.04);
  box-shadow:
    0 38px 125px rgba(0,0,0,.72),
    0 18px 46px rgba(215,176,111,.18),
    inset 0 1px 0 rgba(255,255,255,.76),
    inset 0 -14px 22px rgba(0,0,0,.22);
}
.btn-primary:hover::before{ opacity: .72; }

.btn-outline{
  color: rgba(255,255,255,.92);
  border-color: rgba(215,176,111,.24);
  background:
    radial-gradient(140px 90px at 18% 0%, rgba(215,176,111,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 14px 42px rgba(0,0,0,.50),
    0 0 0 1px rgba(255,255,255,.04) inset;
}
.btn-outline:hover{
  border-color: rgba(215,176,111,.36);
  box-shadow:
    0 22px 70px rgba(0,0,0,.62),
    0 0 24px rgba(215,176,111,.10);
}

.btn-ghost{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.84);
}
.btn-ghost:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.14);
}

.hero-actions .btn{
  padding: 14px 28px;
  border-radius: 18px;
}

/* ---------------------------
   6) Hero
---------------------------- */
.hero{
  padding: 92px 0 82px;
  position: relative;
  overflow: hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:-20px;
  background: url("assets/hero.webp") center/cover no-repeat;
  opacity: 0.12;
  filter: blur(1.8px) saturate(1.02) contrast(1.06);
  transform: translateZ(0) scale(1.06);
  pointer-events:none;
  z-index: 0;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1000px 540px at 18% 10%, rgba(242,214,160,.12), transparent 60%),
    radial-gradient(920px 520px at 92% 12%, rgba(184,134,70,.08), transparent 58%);
  pointer-events:none;
  z-index: 1;
  transform: translateZ(0);
}
.hero > .container{ position: relative; z-index: 2; }

.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 34px;
  align-items:center;
}

.hero h1,
.hero-title{
  margin: 18px 0 14px;
  font-size: var(--h1);
  line-height: 1.02;
  letter-spacing: -0.055em;
  font-weight: 980;
  text-shadow:
    0 16px 72px rgba(0,0,0,.70),
    0 2px 14px rgba(215,176,111,.08);
}
.hero-title .accent{
  color: rgba(242,214,160,.95);
  text-shadow:
    0 10px 34px rgba(0,0,0,.65),
    0 0 26px rgba(215,176,111,.22);
}

.hero p{
  font-size: 1.16rem;
  line-height: 1.70;
  color: rgba(255,255,255,.76);
}
.hero p strong{ color: var(--text); }

.hero-actions{
  display:flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap:wrap;
}

/* ---------------------------
   6.1) Signature Panel
---------------------------- */
.hero-signature{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02) 46%, rgba(0,0,0,.12)),
    radial-gradient(980px 420px at 16% 0%, rgba(215,176,111,.12), transparent 62%),
    radial-gradient(860px 520px at 90% 18%, rgba(255,255,255,.03), transparent 62%),
    linear-gradient(180deg, var(--glassA), var(--glassB));
  box-shadow:
    0 36px 140px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.05) inset;
  padding: 22px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
}
.hero-signature::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 36%);
  opacity: .78;
}
.hero-signature > *{ position: relative; z-index: 1; }

.sig-kicker{
  display:inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(215,176,111,.18);
  background: rgba(215,176,111,.06);
  color: rgba(242,214,160,.94);
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .2px;
}
.sig-title{
  margin-top: 14px;
  font-weight: 980;
  letter-spacing: -0.03em;
  font-size: 1.22rem;
  color: rgba(255,255,255,.92);
}
.sig-text{
  margin-top: 10px;
  color: rgba(255,255,255,.72);
  line-height: 1.62;
  font-size: 1rem;
}
.sig-points{
  margin-top: 16px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.sig-point{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  color: rgba(255,255,255,.74);
}
.sig-point span{
  color: rgba(242,214,160,.92);
  font-weight: 980;
  line-height: 1.1;
  margin-top: 2px;
}
.sig-point b{
  color: rgba(255,255,255,.92);
  font-weight: 950;
  margin-right: 6px;
}

/* ---------------------------
   7) Panels + Cards
---------------------------- */
.panel{
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,.10);
  padding: 28px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: var(--elev-2), 0 0 0 1px rgba(255,255,255,.035) inset;
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.02) 44%, rgba(0,0,0,.08)),
    radial-gradient(900px 420px at 12% 0%, rgba(215,176,111,.10), transparent 62%),
    radial-gradient(860px 520px at 86% 14%, rgba(255,255,255,.035), transparent 62%),
    linear-gradient(180deg, var(--glassA), var(--glassB));
  position: relative;
}
.panel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  opacity: .95;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 34%),
    radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,.14), transparent 52%),
    radial-gradient(80% 70% at 18% 18%, rgba(215,176,111,.10), transparent 60%);
}
.panel::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.55),
    inset 1px 0 0 rgba(255,255,255,.04),
    inset -1px 0 0 rgba(0,0,0,.40);
  opacity: .85;
}
.panel > *{ position: relative; z-index: 1; }

.panel-accent{
  border-color: rgba(215,176,111,.20);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02) 46%, rgba(0,0,0,.10)),
    radial-gradient(900px 420px at 12% 0%, rgba(215,176,111,.14), transparent 62%),
    radial-gradient(860px 520px at 86% 14%, rgba(255,255,255,.03), transparent 62%),
    linear-gradient(180deg, var(--glassA), var(--glassB));
}

.card{
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,.095);
  padding: 24px;

  box-shadow: var(--elev-1), 0 0 0 1px rgba(255,255,255,.03) inset;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 52%, rgba(0,0,0,.10)),
    radial-gradient(820px 360px at 16% 0%, rgba(215,176,111,.09), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.040), rgba(255,255,255,.015));
  position: relative;

  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 34%),
    radial-gradient(110% 70% at 0% 0%, rgba(255,255,255,.10), transparent 55%);
  opacity: .75;
}
.card:hover{
  transform: translateY(-3px);
  border-color: rgba(215,176,111,.22);
  box-shadow: 0 34px 120px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.04) inset;
  filter: brightness(1.02);
}
.card h3{
  margin: 0 0 10px;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  font-weight: 950;
}
.card p{
  color: rgba(255,255,255,.72);
  line-height: 1.66;
}

.badge{
  display:inline-block;
  margin-top: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: .82rem;
  border: 1px solid var(--goldLine);
  background: rgba(215,176,111,.06);
  color: rgba(242,214,160,.92);
  font-weight: 900;
  letter-spacing: .18px;
}

.quote{
  margin-top: 16px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(215,176,111,.20);

  color: rgba(255,255,255,.76);
  line-height: 1.65;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 24px 90px rgba(0,0,0,.52);
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.02) 52%, rgba(0,0,0,.12)),
    radial-gradient(920px 360px at 12% 0%, rgba(215,176,111,.10), transparent 64%),
    rgba(215,176,111,.028);
  position: relative;
}
.quote::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 38%),
    radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,.10), transparent 55%);
  opacity: .75;
}
.quote b{ color: var(--text); }

.list{
  margin: 14px 0 0;
  padding-left: 18px;
  color: rgba(255,255,255,.72);
  line-height: 1.75;
}
.list li{ margin: 8px 0; }

/* ---------------------------
   7.6) Mini tri-cards (Problem/Lösung/Ergebnis)
---------------------------- */
.tri-mini{
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    rgba(0,0,0,.14);
  box-shadow: 0 18px 70px rgba(0,0,0,.50);
  padding: 18px;
}
.tri-mini h3{
  margin:0 0 10px;
  font-weight: 950;
  letter-spacing: -0.01em;
}
.tri-mini p{
  margin:0;
  color: rgba(255,255,255,.72);
  line-height: 1.62;
}
.tri-mini .mini-tag{
  display:inline-flex;
  width: fit-content;
  margin-bottom: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(215,176,111,.20);
  background: rgba(215,176,111,.06);
  color: rgba(242,214,160,.92);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18px;
}

/* ---------------------------
   7.7) Ways layout (stable)
---------------------------- */
.ways-grid{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 980px){
  .ways-grid{ grid-template-columns: 1fr; }
}
.ways-side{
  display:flex;
  flex-direction: column;
  gap: 18px;
}

/* Gateway / choice cards */
.choice-card{
  display:block;
  text-decoration:none;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 14px 44px rgba(0,0,0,.46);
  padding: 20px;
  transition: transform .18s var(--ease), border-color .18s, background .18s;
  position: relative;
  overflow: hidden;
}
.choice-card:hover{
  transform: translateY(-2px);
  border-color: rgba(215,176,111,.22);
  background: rgba(255,255,255,.05);
}
.choice-title{
  font-weight: 950;
  letter-spacing: -0.02em;
  font-size: 1.12rem;
  margin: 0 0 8px;
}
.choice-tag{
  color: rgba(242,214,160,.80);
  font-size: .95rem;
  margin: 0 0 10px;
}
.choice-text{
  color: rgba(255,255,255,.72);
  line-height: 1.62;
  margin: 0 0 14px;
}
.choice-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color: rgba(255,255,255,.86);
  font-weight: 900;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 12px;
}

.partner-wm{
  position:absolute;
  inset:-60px;
  background: url("assets/sqc-elite-bg.webp") center/cover no-repeat;
  opacity:.10;
  filter: blur(1px) saturate(1.05) contrast(1.05);
  pointer-events:none;
}
.choice-card.partner{
  border-color: rgba(215,176,111,.18);
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(242,214,160,.10), transparent 62%),
    rgba(255,255,255,.04);
}
.choice-card.partner:hover{
  border-color: rgba(215,176,111,.28);
}

/* ---------------------------
   8) Footer
---------------------------- */
.footer{
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 28px 0 40px;
  color: rgba(255,255,255,.62);
  font-size: 13px;
  background: rgba(255,255,255,.02);
}
.footer a{ color: rgba(255,255,255,.62); text-decoration:none; }
.footer a:hover{ color: rgba(255,255,255,.92); }
.footer-grid{
  display:flex;
  flex-wrap:wrap;
  gap: 14px 18px;
  align-items:center;
  justify-content:space-between;
}

/* ---------------------------
   9) WhatsApp Floating Bubble (stable)
---------------------------- */
.wa-fab,
.wa-fab-mini{
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 2147483647 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-flex !important;
  pointer-events: auto !important;
  transform: none !important;
}

@supports (padding: max(0px)){
  .wa-fab, .wa-fab-mini{
    right: max(18px, env(safe-area-inset-right)) !important;
    bottom: max(18px, env(safe-area-inset-bottom)) !important;
  }
}

.wa-fab{
  align-items: center;
  gap: 12px;

  padding: 12px 14px;
  border-radius: 999px;
  text-decoration: none;

  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    rgba(6,6,6,.62);

  border: 1px solid rgba(215,176,111,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    0 22px 80px rgba(0,0,0,.74),
    0 0 0 1px rgba(255,255,255,.05) inset;

  color: rgba(255,255,255,.90);

  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease), opacity .18s var(--ease), filter .18s var(--ease);
}
.wa-fab:hover{
  transform: translateY(-2px);
  border-color: rgba(215,176,111,.28);
  box-shadow:
    0 32px 120px rgba(0,0,0,.82),
    0 0 26px rgba(215,176,111,.12);
  filter: brightness(1.02);
}

.wa-fab__icon{
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  display:flex;
  align-items:center;
  justify-content:center;

  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 40%),
    linear-gradient(135deg,
      var(--gold-hi) 0%,
      var(--gold-1) 18%,
      var(--gold-2) 34%,
      var(--gold-3) 58%,
      var(--gold-4) 86%,
      var(--gold-5) 118%
    );
  color: #0A0A0A;
  font-size: 18px;
  font-weight: 980;

  box-shadow:
    0 14px 35px rgba(215,176,111,.14),
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -10px 18px rgba(0,0,0,.18);
}
.wa-fab__text strong{
  display:block;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.wa-fab__text small{
  display:block;
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255,255,255,.68);
}

/* hide bubble (footer / hero) */
.wa-fab.is-hidden,
.wa-fab.wa-hide{
  opacity: 0 !important;
  transform: translateY(14px) !important;
  pointer-events: none !important;
}

@media (max-width: 520px){
  .wa-fab{ padding: 10px; gap: 0; }
  .wa-fab__text{ display:none; }
}

/* ---------------------------
   10) Shared hero background band (System + Kontakt)
---------------------------- */
.sf-band{
  position: relative;
  overflow: hidden;
}
.sf-band > *{
  position: relative;
  z-index: 1;
}

/* Hero image — subtle, premium */
.sf-band.sf-band--hero::before{
  content:"";
  position:absolute;
  inset:-60px;
  background: url("assets/hero.webp") center/cover no-repeat;
  opacity: 0.11;
  filter: blur(2.2px) saturate(1.03) contrast(1.06);
  transform: scale(1.06);
  pointer-events:none;
  z-index: 0;
}

/* Gold atmosphere */
.sf-band.sf-band--hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1000px 520px at 16% 8%, rgba(242,214,160,.12), transparent 62%),
    radial-gradient(920px 520px at 92% 14%, rgba(184,134,70,.10), transparent 60%);
  opacity: .9;
  pointer-events:none;
  z-index: 0;
}

/* ---------------------------
   11) Responsive
---------------------------- */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }

  .nav-links, .nav-cta{ display:none; }
  .burger{ display:inline-flex; align-items:center; justify-content:center; }
  .mobile{ display:none; }
}

@media (max-width: 520px){
  :root{ --pad: 16px; }
  .section{ padding: 56px 0; }
  .section-tight{ padding: 46px 0; }
  .panel{ padding: 22px; }
  .card{ padding: 20px; }
}

.proof-frame{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  box-shadow: 0 14px 50px rgba(0,0,0,.45);
  overflow: hidden;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  aspect-ratio: 16 / 9;
}

.proof-frame:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 70px rgba(0,0,0,.6);
}

.proof-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0a0a0a;
}

.proof-frame::after{
  content: "Klick zum Vergrößern";
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.76);
  font-weight: 800;
  font-size: 12px;
  backdrop-filter: blur(8px);
}

/* CTA hierarchy helpers */
.btn-os{ box-shadow: 0 18px 60px rgba(0,0,0,.35); }
.hero-hint .link-muted{ color: rgba(255,255,255,.75); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.2);} 
.hero-hint .link-muted:hover{ color:#fff; border-bottom-color: rgba(255,255,255,.45);} 
.expect-block{ padding:14px 16px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03);} 
.expect-title{ font-weight:700; margin-bottom:6px; }
.expect-text{ color: rgba(255,255,255,.86); }