/* =====================================================================
   Optimize Reality — Base Styles
   ---------------------------------------------------------------------
   - Design tokens
   - Resets / layout helpers
   - Topbar, hero, buttons, sections
   - CTA footer styles
   - Animated background blobs (orange #cc4824)
   - Full-window video modal
   - Small overrides (remove hairlines)
===================================================================== */

/* =======================================================
   TOKENS
======================================================= */
:root{
  --bg:#000;
  --surface:#0b0b0b;
  --text:#fff;
  --muted:#cfcfcf;
  --green:#348075;
  --orange:#d83712;         /* CTA stripe color */

  --container: 1200px;

  --display: "Inter", "Helvetica Neue", Arial, sans-serif;
  --body: "Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  --radius-xl: 10px;
  --shadow-sm: 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.35);

  --cta-space-desktop: 120px;
  --cta-space-mobile: 88px;

  /* Desktop equal width for topbar/footer buttons */
  --action-btn-width: 192px;
}

/* Light theme token overrides */
body.light{
  --bg:#fff;
  --surface:#f8f9fa;
  --text:#0b0b0b;
  --muted:#4a4a4a;
}

/* =======================================================
   RESET / BASE
======================================================= */
*{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;display:block;height:auto}
html,body{background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}

/* Keep content above the global background */
.page{position:relative; z-index:1}

/* =======================================================
   HELPERS / UTILITIES
======================================================= */
.container{max-width:var(--container);margin-inline:auto;padding-inline:32px}
.center{text-align:center}
.c-orange{color:var(--orange)}

/* =======================================================
   VIDEO
======================================================= */
.video{position:relative;margin-top:24px}
.intro-video{width:100%;aspect-ratio:16/9;border-radius:8px;display:block}

/* =======================================================
   TOPBAR
======================================================= */
.topbar{position:fixed;inset:0 0 auto 0;background:var(--bg);z-index:1000;box-shadow:none}
body.light .topbar{box-shadow:none}
.topbar-inner{display:flex;align-items:center;gap:24px;padding-block:18px}
body{padding-top:80px}

.brand{display:flex;align-items:center;gap:12px}
.brand-text{font-family:var(--body);font-size:12px;line-height:1.1;opacity:.0}
.headerlogo{display:grid;place-items:center;height:40px;width:auto}
.Logo_v2{height:40px;width:auto;display:block}

/* Responsive header logo */
.headerlogo picture,
.headerlogo img{display:block;height:40px;width:auto}
@media (max-width:640px){
  .headerlogo img{height:56px}
  .topbar-inner{padding-block:12px}
}

/* Right-side controls */
.actions{margin-left:auto;display:flex;gap:10px}

/* =======================================================
   ICON THEME BUTTON
======================================================= */
.icon-btn{
  height:48px;width:56px;
  border:1.5px solid var(--green);
  border-radius:10px;
  background:rgba(52,128,117,0.06) no-repeat center/24px 24px;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  transition:background-color .2s, box-shadow .2s, transform .15s, border-color .2s;
}
.icon-btn.sun{background-image:url("images/Sun.svg")}
.icon-btn.sun:hover{background-image:url("images/Sun_white.svg");background-color:var(--green);transform:translateY(-1px)}
.icon-btn.moon{background-image:url("images/Moon.svg")}
.icon-btn.moon:hover{background-image:url("images/Moon_white.svg");background-color:var(--green);transform:translateY(-1px)}
body.light .icon-btn,
body.light .btn,
body.light .btn-mitglied,
body.light .btn-video{box-shadow:none}

/* =======================================================
   HERO
======================================================= */
.hero{position:relative;overflow:hidden;background:transparent}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:48px;padding-block:84px 96px}
.h1{font-family:var(--display);font-weight:800;font-size:clamp(32px,6vw,80px);line-height:1.05;letter-spacing:-0.5px;margin-bottom:20px}
.lede{font-family:var(--body);font-size:18px;line-height:1.7;color:var(--muted);max-width:520px;margin-bottom:28px}

/* =======================================================
   BUTTONS
======================================================= */
.btn,.btn-video{
  padding:clamp(6px,.9vw,10px) clamp(14px,1.6vw,18px);
  border:1.5px solid var(--green);
  border-radius:10px;
  font-family:var(--body);
  font-weight:600;
  font-size:clamp(14px,1.6vw,16px);
  color:var(--green);
  background:rgba(52,128,117,0.06);
  backdrop-filter:saturate(120%);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:background .2s,color .2s,box-shadow .2s,transform .15s;
  white-space:nowrap;width:100%;
  box-shadow:var(--shadow-sm);
}
.btn-mitglied{
  padding:clamp(6px,.9vw,10px) clamp(14px,1.6vw,18px);
  border:1.5px solid var(--green);
  border-radius:10px;
  font-family:var(--body);font-weight:600;font-size:clamp(14px,1.6vw,16px);
  color:var(--green);background:rgba(52,128,117,0.06);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:background .2s,color .2s,box-shadow .2s,transform .15s;
  white-space:nowrap;width:auto;box-shadow:var(--shadow-sm);
}
.btn:hover,.btn-mitglied:hover,.btn-video:hover{
  background:var(--green);color:var(--text);box-shadow:0 8px 24px rgba(52,128,117,0.35);
  transform:translateY(-1px);
}
body.light .btn:hover,
body.light .btn-mitglied:hover,
body.light .btn-video:hover{background:var(--green); color:#fff; box-shadow:none; transform:translateY(-1px)}

.btn-mitglied .arrow{display:inline-block;translate:0 1px;transform:translateY(1px)}
.card .btn-video{margin-top:22px}

/* Footer CTA button: white outline; white on hover; black text on hover in light mode */
.cta .btn{
  width:auto;background:transparent !important;color:#fff !important;border-color:#fff !important;box-shadow:none !important;
}
.cta .btn:hover,
.cta .btn:focus-visible{
  background:#fff !important;color:var(--bg) !important;border-color:#fff !important;box-shadow:none !important;transform:translateY(-1px);
}
body.light .cta .btn:hover,
body.light .cta .btn:focus-visible{ color:#000 !important; }

@media (max-width:640px){ .btn-mitglied,.cta .btn{width:100%} }

/* Desktop only: equalize topbar + footer button width */
@media (min-width:641px){
  .topbar .topbar-btn,
  .cta .btn{ width:auto !important; min-width:var(--action-btn-width); flex-shrink:0; }
}

/* =======================================================
   HERO LOGO
======================================================= */
.herologo{display:grid;place-items:center}
.Logo_v1{max-width:100%;height:auto;width:clamp(220px,50vw,480px)}

/* Mobile: place hero logo above the copy */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:24px}
  .herologo{order:-1; justify-self:center}
}

/* =======================================================
   INTRO / VIDEO
======================================================= */
.intro{padding-block:60px 96px;display:grid;gap:28px}
.intro-headline{display:grid;grid-template-columns:1fr;gap:16px;align-items:start;text-align:center;justify-items:center}
.h2{font-family:var(--display);font-weight:800;font-size:clamp(32px,4vw,48px);line-height:1.15;margin-bottom:0}
.intro-copy{font-family:var(--body);font-size:16px;line-height:1.6;color:var(--muted);margin-left:auto;margin-right:auto;text-align:center}

/* =======================================================
   WHAT IS OR
======================================================= */
.or-explainer{
  padding-block:56px 68px;
  background:transparent;
  text-align:center;
  /* borders removed below in overrides */
}
.or-inner{max-width:900px;margin-inline:auto}
.or-copy{font-family:var(--body);font-size:18px;line-height:1.7;color:var(--muted);margin-top:8px}
.or-points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 24px;margin-top:22px;list-style:none;padding:0}
.or-points li{font-family:var(--body);font-size:16px;line-height:1.6;color:var(--muted);text-align:center}
.or-points li span{color:var(--text);font-weight:700}
@media (max-width:900px){.or-points{grid-template-columns:1fr}}

/* =======================================================
   USE CASES & CARDS
======================================================= */
.usecases{padding-block:96px 128px;position:relative;background:transparent;overflow:hidden;text-align:center}
.h3{font-family:var(--display);font-weight:800;font-size:36px;line-height:1.2;margin-bottom:40px}

.cards{display:grid;grid-template-columns:repeat(12,1fr);column-gap:32px;row-gap:28px;align-items:stretch}
.card{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:28px 24px;border-radius:var(--radius-xl);
  background:var(--surface);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:var(--shadow-sm);
  transition:transform .18s, box-shadow .2s, border-color .2s;
  grid-column:span 4;
}
body.light .card{ background:#fff;border:1px solid rgba(0,0,0,0.08);box-shadow:0 1px 0 rgba(0,0,0,0.02) inset }
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(255,255,255,0.14)}
body.light .card:hover{box-shadow:0 10px 30px rgba(0,0,0,0.08);border-color:rgba(0,0,0,0.12)}
.card-title{font-family:var(--body);font-weight:800;font-size:21px;margin-top:14px;margin-bottom:10px}
.card-text{font-family:var(--body);font-size:16px;line-height:1.65;color:var(--muted);margin-top:8px;flex:1}

@media (min-width:901px){
  .cards > .card:nth-child(1){grid-column:1 / span 4}
  .cards > .card:nth-child(2){grid-column:5 / span 4}
  .cards > .card:nth-child(3){grid-column:9 / span 4}
  .cards > .card:nth-child(4){grid-column:3 / span 4}
  .cards > .card:nth-child(5){grid-column:7 / span 4}
}
@media (min-width:640px) and (max-width:900px){
  .cards{grid-template-columns:repeat(2,minmax(260px,1fr));gap:28px}
  .card{grid-column:auto}
}
@media (max-width:639px){
  .cards{grid-template-columns:1fr;gap:22px}
  .card{grid-column:auto}
}

/* =======================================================
   CTA STRIPE & FOOTER
======================================================= */
.cta{ background: var(--orange) !important; border: none !important; color: #fff }
body.light .cta{ background: var(--orange) !important; border: none !important; color: #fff }
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:var(--cta-space-desktop)}
.cta-title{font-family:var(--display);font-weight:800;font-size:36px;line-height:1.2;max-width:900px;color:#fff}
@media (max-width:640px){ .cta-inner{flex-direction:column;align-items:flex-start;padding-block:var(--cta-space-mobile)} }

/* =======================================================
   RESPONSIVE GLOBAL
======================================================= */
@media (max-width:1200px){.container{padding-inline:24px}}
@media (max-width:1024px){.intro-headline{grid-template-columns:1fr}}
@media (max-width:640px){.h3{font-size:28px}}

/* =======================================================
   ANIMATED BACKGROUND BLOBS (GLOBAL)
   Pure orange (#cc4824) with motion across the screen
======================================================= */
.bg-blobs{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}

/* Base blob (rgb of #cc4824) */
.blob{
  position:absolute;
  width:clamp(420px, 55vw, 900px);
  height:clamp(420px, 55vw, 900px);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(204, 72, 36, 0.55) 0%,
      rgba(204, 72, 36, 0.30) 38%,
      rgba(204, 72, 36, 0.00) 70%);
  filter: blur(90px);
  opacity:.52;
  will-change: transform, border-radius, opacity, filter;
  animation: glow 9s ease-in-out infinite alternate, morph 28s ease-in-out infinite alternate;
}
.blob1{ top:-12vh; left:-14vw; animation: glow 9s ease-in-out infinite alternate,  morph 28s ease-in-out infinite alternate, travel1 60s linear infinite alternate }
.blob2{ top:44vh;  left:58vw;  animation: glow 10s ease-in-out infinite alternate, morph 30s ease-in-out infinite alternate, travel2 70s linear infinite alternate }
.blob3{ top:78vh;  left:10vw;  animation: glow 11s ease-in-out infinite alternate, morph 32s ease-in-out infinite alternate, travel3 55s linear infinite alternate }

@keyframes travel1{
  0%{transform:translate(-22vw,-10vh) scale(1)}
  50%{transform:translate(12vw,6vh) scale(1.1)}
  100%{transform:translate(50vw,18vh) scale(1)}
}
@keyframes travel2{
  0%{transform:translate(10vw,0) scale(1.05)}
  50%{transform:translate(-18vw,-12vh) scale(1.18)}
  100%{transform:translate(-40vw,10vh) scale(1.05)}
}
@keyframes travel3{
  0%{transform:translate(-8vw,0) scale(1)}
  50%{transform:translate(18vw,-14vh) scale(1.15)}
  100%{transform:translate(42vw,12vh) scale(1)}
}
@keyframes morph{
  0%{border-radius:50% 50% 46% 54% / 52% 48% 54% 46%}
  50%{border-radius:62% 38% 58% 42% / 44% 56% 45% 55%}
  100%{border-radius:50% 50% 46% 54% / 52% 48% 54% 46%}
}
@keyframes glow{
  0%{opacity:.40;filter:blur(90px) saturate(1)}
  50%{opacity:.64;filter:blur(104px) saturate(1.15)}
  100%{opacity:.40;filter:blur(90px) saturate(1)}
}
body.light .blob{ opacity:.38 }
@media (prefers-reduced-motion: reduce){ .blob{ animation:none } }

/* =======================================================
   VIDEO MODAL
======================================================= */
body.modal-open{ overflow:hidden }
.modal{
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.92);
  display: grid; place-items: center;
}
.modal[hidden]{ display:none }
.modal-video{
  width: 100vw; height: 100vh;
  object-fit: contain; background: #000; outline: none;
}
.modal-close{
  position: fixed; top: 16px; right: 20px;
  height: 44px; width: 44px; border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.08); color: #fff;
  font-size: 28px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background .2s, transform .15s;
  z-index: 2100;
}
.modal-close:hover{ background: rgba(255,255,255,0.18); transform: translateY(-1px) }
body.light .modal{ background: rgba(0,0,0,0.92) }

/* =======================================================
   SMALL OVERRIDES
   - remove hairline borders around OR section
======================================================= */
.or-explainer, body.light .or-explainer{
  border-top: none !important;
  border-bottom: none !important;
}

/* =======================================================
   MOBILE TYPOGRAPHY OVERRIDE (exact behavior requested)
   - Left-align all text on mobile
   - In Use Cases: title left, card contents centered
======================================================= */
@media (max-width: 640px){

  /* 1) Left-align ALL site text on mobile */
  body, .page, .container,
  header, section, footer,
  .hero-copy, .intro, .intro-headline, .intro-copy,
  .or-explainer, .or-inner, .or-copy, .or-points,
  .cta, .cta-inner, .cta-title,
  h1, h2, h3, h4, h5, h6, p, li {
    text-align: left !important;
  }

  /* 2) Use Cases: keep the section + heading left */
  .usecases,
  .usecases .h3 {
    text-align: left !important;
  }

  /* 3) …but CENTER everything inside each card */
  .usecases .card {
    text-align: center !important;       /* center card text */
    align-items: center !important;       /* center flex children */
  }

  .usecases .card-title,
  .usecases .card-text,
  .usecases .btn-video {
    text-align: center !important;
    margin-left: auto;                    /* ensure inner blocks center */
    margin-right: auto;
  }

  .usecases .card .Icon {
    align-self: center !important;        /* keep the icon centered */
  }
}

/* =======================================================
   CONTACT SECTION — same width as .container
======================================================= */
.contact {
  padding-block: 100px;
  background: var(--surface);
  color: var(--text);
}

.contact-inner {
  /* Make the whole section as wide as everything else */
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 32px;

  /* Keep center alignment like the rest of the site */
  text-align: center;
  font-family: var(--body);
}

/* Title, subhead, and text stay centered */
.contact h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 48px);
  margin-bottom: 0.5em;
  line-height: 1.15;
}

.contact .subhead {
  font-family: var(--body);
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 1.5em;
}

.contact-copy {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 2em;
}

.benefits {
  margin: 0 auto 2.5em;
  max-width: 700px;
  list-style: none;
  padding: 0;
  font-family: var(--body);
  font-size: 16px;
  color: var(--muted);
  text-align: left;
}

.benefits li {
  margin-bottom: 0.6em;
  line-height: 1.6;
  position: relative;
  padding-left: 1.2em;
}

.benefits li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--orange);
}

.contact-form {
  background: rgba(255,255,255,0.03);
  padding: 2em;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  font-family: var(--body);
  margin-inline: auto;
  max-width: 800px;
  text-align: left;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2em;
}

.form-field.full {
  grid-column: span 2;
}

.form-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4em;
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 0.75em 1em;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--orange);
  background: rgba(255,255,255,0.1);
}

.contact-form .btn {
  margin-top: 1.5em;
  width: 100%;
}

body.light .contact-form {
  background: rgba(0,0,0,0.02);
  box-shadow: 0 1px 0 rgba(0,0,0,0.05) inset;
}

body.light .form-field input,
body.light .form-field textarea {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.1);
}

body.light .form-field input:focus,
body.light .form-field textarea:focus {
  border-color: var(--orange);
  background: rgba(0,0,0,0.05);
}

@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* Contact Section */
.contact {
  padding: 100px 0;
  background: var(--bg-alt, rgba(255,255,255,0.05));
}

.contact-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}

.contact h2 {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 0.5em;
}

.contact .subhead {
  text-align: center;
  font-weight: 600;
  color: var(--text-muted, #777);
  margin-bottom: 1.5em;
}

.contact-copy {
  text-align: center;
  margin-bottom: 1.8em;
  line-height: 1.6;
}

.benefits {
  margin: 0 auto 2.5em;
  max-width: 600px;
  list-style: none;
  padding: 0;
}

.benefits li {
  margin-bottom: 0.6em;
  line-height: 1.5;
  position: relative;
  padding-left: 1.2em;
}

.benefits li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent, #cc4824);
}

.contact-form {
  background: var(--card-bg, rgba(0,0,0,0.1));
  padding: 2em;
  border-radius: 1.5rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2em;
}

.form-field.full {
  grid-column: span 2;
}

.form-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4em;
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 0.75em 1em;
  border-radius: 0.8em;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: inherit;
  font: inherit;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent, #cc4824);
  background: rgba(255,255,255,0.1);
}

.contact-form .btn {
  margin-top: 1.5em;
  width: 100%;
}

/* =======================================================
   FOOTER — ORANGE THEME
======================================================= */

.footer {
  background: var(--orange);
  color: #fff;
  padding: 2.5em 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;
  text-align: center;
  font-family: var(--body);
}

.footer-logo {
  width: 120px;
  height: auto;
  display: block;
}

.footer-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
}

/* Fix mobile video poster visibility */
@media (max-width: 768px) {
  .intro-video {
    aspect-ratio: auto;           /* prevent Safari poster bug */
    height: auto;
    background: url("images/video-preview.webp") center/cover no-repeat; /* fallback poster image */
  }
}


.video-wrapper {
    margin-top: 12px;
}

.btn-video {
    all: unset;
    cursor: pointer;
    background: #007bff;
    color: white;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
    display: inline-block;
}

.btn-video:hover {
    background: #0056b3;
}

/* Optional: smooth open */
details[open] summary ~ * {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.embed-target {
    margin-top: 12px;
    border-radius: 8px;
    overflow: hidden;
}