/* ============================================
   Ostvelira — Digital Brutalism Lite
   ============================================ */

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

:root{
  --c-bg: #f5f1e6;
  --c-bg-raw: #ece3cd;
  --c-surface: #fffdf8;
  --c-ink: #1b1a16;
  --c-ink-soft: #34322b;
  --c-concrete: #5c584c;
  --c-concrete-light: #8b8677;
  --c-yellow: #e3b23c;
  --c-yellow-deep: #c8941f;
  --c-teal: #1f5951;
  --c-teal-deep: #123a34;
  --c-line: #d9cfae;
  --c-line-dark: rgba(255,253,248,.15);
  --c-danger: #b34632;

  --shadow-sm: 0 1px 2px rgba(27,26,22,.08);
  --shadow-md: 0 6px 16px -4px rgba(27,26,22,.14), 0 2px 6px -2px rgba(27,26,22,.08);
  --shadow-lg: 0 24px 48px -16px rgba(18,58,52,.28), 0 10px 20px -10px rgba(27,26,22,.16);

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-xl: 36px;

  --font-head: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --space-1: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
  --space-2: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  --space-3: clamp(1.5rem, 1.2rem + 1vw, 2.5rem);
  --space-4: clamp(2.5rem, 2rem + 2vw, 4rem);
  --space-5: clamp(4rem, 3rem + 3vw, 7rem);

  --container-max: 1200px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--c-bg);
  color: var(--c-ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
input, textarea{ font-family: inherit; }

h1,h2,h3,h4{ font-family: var(--font-head); font-weight:600; line-height:1.12; margin:0; color: var(--c-ink); }

.section-label, .hero__eyebrow, .intro__label{
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .08em;
  color: var(--c-teal-deep);
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
  display:block;
}
.section-title{
  font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem);
  margin-bottom: var(--space-3);
  max-width: 46ch;
}


.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding: .9rem 1.6rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-weight:600;
  font-size: .95rem;
  border: 2px solid transparent;
  min-height:48px;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn--primary{
  background: var(--c-teal);
  color: var(--c-surface);
  box-shadow: var(--shadow-md);
}
.btn--primary:hover{ background: var(--c-teal-deep); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn--ghost{
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-ink);
}
.btn--ghost:hover{ background: var(--c-ink); color: var(--c-surface); transform: translateY(-2px); }
.btn--on-dark{ border-color: var(--c-surface); color: var(--c-surface); }
.btn--on-dark.btn--ghost:hover{ background: var(--c-surface); color: var(--c-teal-deep); }


.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
  transition: box-shadow .3s ease;
}
.site-header--scrolled{ box-shadow: var(--shadow-md); }
.site-header__inner{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: .9rem var(--space-3);
  display:grid;
  grid-template-columns: 44px 1fr 44px;
  align-items:center;
  gap: var(--space-2);
}
.site-header__logo{ grid-column:2; justify-self:center; }
.site-header__toggle{
  grid-column:1;
  width:44px; height:44px;
  background:none; border:none;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
}
.site-header__toggle span{
  width:22px; height:2px; background: var(--c-ink); transition: all .3s ease;
}
.nav{ grid-column:3; justify-self:end; }
.nav__list{ display:flex; gap: var(--space-3); }
.nav__link{
  font-family: var(--font-head);
  font-weight:500;
  font-size:.92rem;
  padding:.4rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color .25s ease, color .25s ease;
}
.nav__link:hover, .nav__link--active{ border-color: var(--c-yellow-deep); color: var(--c-teal-deep); }

@media (max-width: 900px){
  .nav{ display:none; }
  .site-header__inner{ grid-template-columns: 44px 1fr 44px; }
}
@media (min-width: 901px){
  .site-header__toggle{ display:none; }
}


.mobile-menu{
  position: fixed; inset:0; z-index: 900;
  background: linear-gradient(160deg, var(--c-teal-deep), var(--c-teal) 65%, var(--c-yellow-deep));
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition: opacity .4s ease;
}
.mobile-menu--open{ opacity:1; pointer-events:auto; }
.mobile-menu__close{
  position:absolute; top: var(--space-3); right: var(--space-3);
  width:48px; height:48px; border-radius:50%;
  background: rgba(255,253,248,.15); border:none; color:#fff;
  font-size:1.3rem; display:flex; align-items:center; justify-content:center;
  transition: background .25s ease, transform .25s ease;
}
.mobile-menu__close:hover{ background: rgba(255,253,248,.3); transform: rotate(90deg); }
.mobile-menu__list{ display:flex; flex-direction:column; align-items:center; gap: var(--space-3); text-align:center; }
.mobile-menu__link{
  font-family: var(--font-head); font-size: clamp(1.6rem, 6vw, 2.4rem); font-weight:600;
  color:#fff; position:relative; transition: opacity .25s ease;
}
.mobile-menu__link:hover{ opacity:.7; }


.hero{
  position:relative;
  min-height: 100svh;
  display:flex; align-items:center;
  background: radial-gradient(ellipse at top left, rgba(31,89,81,.25), transparent 55%),
              radial-gradient(ellipse at bottom right, rgba(227,178,60,.18), transparent 55%),
              var(--c-ink);
  color: var(--c-surface);
  padding: calc(var(--space-5) + 60px) var(--space-3) var(--space-4);
  overflow:hidden;
}
.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--c-line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-line-dark) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 85%);
  pointer-events:none;
}
.hero__inner{ position:relative; max-width: 900px; margin:0 auto; text-align:center; z-index:2;}
.hero .hero__eyebrow{ color: var(--c-yellow); }
.hero__title{
  font-size: clamp(2.4rem, 1.6rem + 4.2vw, 4.6rem);
  margin: var(--space-2) 0;
  color: var(--c-surface);
}
.hero__subtitle{
  font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem);
  max-width: 60ch; margin: 0 auto var(--space-3);
  color: rgba(245,241,230,.85);
}
.hero__actions{ display:flex; gap: var(--space-2); justify-content:center; flex-wrap:wrap; }

.hero__visual{ position:absolute; right: 6%; bottom:10%; z-index:1; opacity:.9; }
.hero__radar{ position:relative; width:180px; height:180px; }
.hero__radar-ring{
  position:absolute; inset:0; border-radius:50%;
  border: 2px dashed rgba(227,178,60,.5);
  animation: spin 18s linear infinite;
}
.hero__radar-ring--2{
  inset: 25px; border-color: rgba(245,241,230,.35);
  animation-duration: 12s; animation-direction: reverse;
}
.hero__radar-dot{
  position:absolute; top:50%; left:50%;
  width:14px; height:14px; margin:-7px 0 0 -7px;
  background: var(--c-yellow); border-radius:50%;
  box-shadow: 0 0 0 0 rgba(227,178,60,.6);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes spin{ to{ transform: rotate(360deg);} }
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(227,178,60,.55); }
  70%{ box-shadow: 0 0 0 30px rgba(227,178,60,0); }
  100%{ box-shadow: 0 0 0 0 rgba(227,178,60,0); }
}
@media (max-width: 700px){ .hero__visual{ display:none; } }


.marquee{
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg-raw);
  overflow:hidden;
  padding: var(--space-1) 0;
}
.marquee__track{
  display:flex; gap: var(--space-4);
  width: max-content;
  animation: marquee 28s linear infinite;
}
.marquee__item{
  font-family: var(--font-mono);
  font-size: .85rem;
  letter-spacing:.1em;
  color: var(--c-concrete);
  white-space:nowrap;
}
@keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }


.intro{ padding: var(--space-5) var(--space-3); }
.intro__inner{ max-width: 780px; margin:0 auto; }
.intro__title{ font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); margin-bottom: var(--space-3); }
.intro__body{ display:flex; flex-direction:column; gap: var(--space-2); }
.intro__text{ color: var(--c-ink-soft); font-size:1.05rem; }
.intro__text:first-of-type{ font-size:1.2rem; font-weight:500; color: var(--c-ink); }


.bento{ background: var(--c-bg-raw); padding: var(--space-5) var(--space-3); border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); }
.bento__inner{ max-width: var(--container-max); margin:0 auto; }
.bento__grid{
  container-type: inline-size;
  container-name: bento;
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
.card{
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card__image{ width:100%; aspect-ratio: 4/3; object-fit:cover; }
.card__body{ padding: var(--space-2); display:flex; flex-direction:column; gap:.6rem; flex:1; }
.card__tag{
  font-family: var(--font-mono); font-size:.75rem; letter-spacing:.06em;
  color: var(--c-teal); text-transform:uppercase;
}
.card__title{ font-size: 1.25rem; }
.card__text{ color: var(--c-concrete); font-size:.96rem; }

@container bento (min-width: 700px){
  .bento__grid{ grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(150px, auto); }
  .card--large{ grid-column: span 2; grid-row: span 2; }
  .card--wide{ grid-column: span 4; }
  .card--wide .card__body{ flex-direction:row; align-items:flex-start; gap: var(--space-3); }
  .card--wide .card__image{ width:280px; aspect-ratio:4/3; flex-shrink:0; }
}
@container bento (min-width: 1000px){
  .card--wide{ grid-column: span 2; }
}


.features{ padding: var(--space-5) var(--space-3); }
.features__inner{ max-width: 980px; margin:0 auto; }
.features__list{
  container-type: inline-size;
  container-name: features;
  display:flex; flex-direction:column;
}
.feature{
  display:flex; flex-direction:column; gap: var(--space-1);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--c-line);
}
.feature:last-child{ border-bottom: 1px solid var(--c-line); }
.feature__icon{
  width:52px; height:52px; border-radius: var(--radius-md);
  background: var(--c-teal); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; flex-shrink:0;
}
.feature__title{ font-size:1.15rem; margin-bottom:.4rem; }
.feature__text{ color: var(--c-concrete); }

@container features (min-width: 560px){
  .feature{ flex-direction:row; align-items:flex-start; gap: var(--space-2); }
}


.compare{ background: var(--c-ink); color: var(--c-surface); padding: var(--space-5) var(--space-3); }
.compare__inner{ max-width: var(--container-max); margin:0 auto; }
.compare .section-label{ color: var(--c-yellow); }
.compare .section-title{ color: var(--c-surface); }
.compare__intro{ max-width:70ch; color: rgba(245,241,230,.75); margin-bottom: var(--space-3); }
.compare__grid{
  container-type: inline-size;
  container-name: compare;
  display:grid; grid-template-columns:1fr; gap: var(--space-2);
}
.compare__col{
  background: rgba(245,241,230,.05);
  border: 1px solid var(--c-line-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}
.compare__col--alt{ background: rgba(227,178,60,.08); border-color: rgba(227,178,60,.3); }
.compare__title{ display:flex; align-items:center; gap:.6rem; font-size:1.2rem; margin-bottom: var(--space-2); color: var(--c-yellow); }
.compare__list li{ position:relative; padding-left:1.4rem; margin-bottom:.75rem; color: rgba(245,241,230,.85); }
.compare__list li::before{ content:"—"; position:absolute; left:0; color: var(--c-yellow); }

@container compare (min-width: 700px){
  .compare__grid{ grid-template-columns: 1fr 1fr; }
}


.scenarios{ padding: var(--space-5) 0; }
.scenarios__inner{ max-width: var(--container-max); margin:0 auto; padding: 0 var(--space-3); }
.scenarios__note{ color: var(--c-concrete); max-width:70ch; margin-bottom: var(--space-3); font-size:.95rem; }
.scenario-swiper{ padding-bottom: 3rem; }
.scenario__card{
  background: var(--c-surface); border:1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: var(--space-3); height:100%; min-height:220px;
  box-shadow: var(--shadow-sm);
  display:flex; flex-direction:column; gap: var(--space-1);
}
.scenario__label{ font-family: var(--font-mono); font-size:.78rem; color: var(--c-teal); text-transform:uppercase; letter-spacing:.06em; }
.scenario__text{ color: var(--c-ink-soft); }
.scenario-swiper .swiper-pagination-bullet-active{ background: var(--c-teal); }
.scenario-swiper .swiper-button-next, .scenario-swiper .swiper-button-prev{ color: var(--c-teal); }


.format{ padding: var(--space-5) var(--space-3); }
.format__inner{
  max-width: var(--container-max); margin:0 auto;
  display:grid; grid-template-columns:1fr; gap: var(--space-3);
  align-items:center;
}
.format__text{ color: var(--c-ink-soft); margin-bottom: var(--space-2); }
.format__figure img{ border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width:100%; aspect-ratio:4/3; object-fit:cover; }
@media (min-width: 860px){
  .format__inner{ grid-template-columns: 1fr 1fr; }
  .format--flip .format__inner{ grid-template-columns: 1fr 1fr; }
  .format--flip .format__figure{ order:1; }
  .format--flip .format__content{ order:2; }
}


.audience{ background: var(--c-bg-raw); padding: var(--space-5) var(--space-3); border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); }
.audience__inner{ max-width: var(--container-max); margin:0 auto; }
.audience__grid{ display:grid; grid-template-columns:1fr; gap: var(--space-3); }
.audience__text{ color: var(--c-ink-soft); font-size:1.05rem; }
.audience__checklist li{ display:flex; align-items:flex-start; gap:.7rem; margin-bottom: .9rem; font-weight:500; }
.audience__checklist i{ color: var(--c-teal); margin-top:.2rem; }
@media (min-width: 860px){ .audience__grid{ grid-template-columns: 1fr 1fr; } }


.cta-banner{
  background: linear-gradient(120deg, var(--c-teal-deep), var(--c-teal) 60%, var(--c-yellow-deep));
  color: var(--c-surface);
  padding: var(--space-5) var(--space-3);
  text-align:center;
}
.cta-banner__inner{ max-width: 700px; margin:0 auto; }
.cta-banner__title{ font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); margin-bottom: var(--space-2); color:#fff; }
.cta-banner__text{ color: rgba(255,253,248,.85); margin-bottom: var(--space-3); }
.cta-banner__actions{ display:flex; gap: var(--space-2); justify-content:center; flex-wrap:wrap; }


.site-footer{ background: var(--c-ink); color: var(--c-surface); }
.site-footer__inner{
  max-width: var(--container-max); margin:0 auto;
  padding: var(--space-5) var(--space-3);
  display:grid; grid-template-columns:1fr; gap: var(--space-4);
}
.site-footer__logo{ filter: brightness(0) invert(1); margin-bottom: var(--space-2); }
.site-footer__text{ color: rgba(245,241,230,.7); max-width:46ch; margin-bottom: var(--space-2); }
.site-footer__cols{ display:grid; grid-template-columns: 1fr; gap: var(--space-3); }
.footer__heading{ font-size:.9rem; text-transform:uppercase; letter-spacing:.06em; color: var(--c-yellow); margin-bottom: var(--space-2); font-family: var(--font-mono); }
.footer__link, .footer__text{ display:block; color: rgba(245,241,230,.75); margin-bottom:.6rem; transition: color .25s ease; font-size:.95rem; }
.footer__link:hover{ color: var(--c-yellow); }
.footer__text i{ margin-right:.4rem; color: var(--c-yellow); }
.site-footer__bottom{
  border-top: 1px solid var(--c-line-dark);
  padding: var(--space-2) var(--space-3);
  text-align:center;
  font-size:.85rem;
  color: rgba(245,241,230,.5);
}
@media (min-width: 860px){
  .site-footer__inner{ grid-template-columns: 1fr 1fr; }
  .site-footer__cols{ grid-template-columns: repeat(3, 1fr); }
}


.page-hero{
  background: var(--c-ink);
  color: var(--c-surface);
  padding: calc(90px + var(--space-4)) var(--space-3) var(--space-4);
}
.page-hero__inner{ max-width: 800px; margin:0 auto; text-align:center; }
.page-hero__title{ font-size: clamp(2rem, 1.5rem + 3vw, 3.4rem); color:#fff; margin: var(--space-2) 0; }
.page-hero__subtitle{ color: rgba(245,241,230,.8); max-width:60ch; margin:0 auto; font-size:1.1rem; }
.page-hero--slim{ padding-bottom: var(--space-3); }
.page-hero--image{ padding-bottom:0; }
.page-hero__figure{ max-width: var(--container-max); margin: var(--space-4) auto 0; padding: 0 var(--space-3); transform: translateY(40%); }
.page-hero__figure img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.page-hero--image{ margin-bottom: calc(var(--space-4) + 6%); }


.editorial{ background: var(--c-bg); }
.editorial__inner{ max-width: 900px; margin:0 auto; padding: var(--space-5) var(--space-3); display:flex; flex-direction:column; gap: var(--space-5); }
.editorial__section{ }
.editorial__section--alt{ background: var(--c-bg-raw); margin: 0 calc(-1 * var(--space-3)); padding: var(--space-4) var(--space-3); border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); }
.editorial__label{ font-family: var(--font-mono); font-size:.8rem; color: var(--c-yellow-deep); margin-bottom: var(--space-1); }
.editorial__heading{ font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.1rem); margin-bottom: var(--space-2); }
.editorial__lead{ font-size:1.2rem; font-weight:500; color: var(--c-ink); margin-bottom: var(--space-2); }
.editorial__grid{ display:grid; grid-template-columns:1fr; gap: var(--space-3); align-items:center; }
.editorial__grid--reverse{ }
.editorial__figure img{ width:100%; aspect-ratio: 3/4; object-fit:cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.editorial__text-col p{ color: var(--c-ink-soft); margin-bottom: var(--space-2); }
.editorial__quote{
  font-family: var(--font-head); font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
  font-weight:600; line-height:1.4; text-align:center;
  border-top: 2px solid var(--c-ink); border-bottom: 2px solid var(--c-ink);
  padding: var(--space-3) 0; margin:0;
}
@media (min-width: 780px){
  .editorial__grid{ grid-template-columns: 1fr 1fr; }
  .editorial__grid--reverse .editorial__figure{ order:1; }
  .editorial__grid--reverse .editorial__text-col{ order:2; }
}


.timeline-section{ padding: var(--space-5) var(--space-3); }
.timeline-section__inner{ max-width: var(--container-max); margin:0 auto; }
.timeline{ display:flex; flex-direction:column; }
.timeline__item{
  display:grid; grid-template-columns: 90px 1fr; gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: 1px dashed var(--c-line);
}
.timeline__item:last-child{ border-bottom: 1px dashed var(--c-line); }
.timeline__marker{
  font-family: var(--font-mono); font-weight:600; color: var(--c-teal);
  display:flex; align-items:flex-start; font-size:.95rem;
}
.timeline__content h3{ font-size:1.1rem; margin-bottom:.35rem; }
.timeline__content p{ color: var(--c-concrete); margin:0; }
.timeline--horizontal{ display:grid; grid-template-columns:1fr; gap: var(--space-2); }
.timeline--horizontal .timeline__item{ grid-template-columns: 56px 1fr; border-top:none; padding:0; }
.timeline--horizontal .timeline__marker{
  width:56px; height:56px; border-radius:50%;
  background: var(--c-teal); color:#fff;
  align-items:center; justify-content:center; font-size:1.2rem;
}
@media (min-width: 780px){
  .timeline--horizontal{ grid-template-columns: repeat(3, 1fr); }
  .timeline--horizontal .timeline__item{ flex-direction:column; text-align:center; grid-template-columns:1fr; justify-items:center; }
  .timeline--horizontal .timeline__marker{ margin-bottom: var(--space-1); }
}


.contact-split{ display:grid; grid-template-columns:1fr; }
.contact-split__map{ min-height:340px; background: var(--c-bg-raw); }
.contact-split__map iframe{ width:100%; height:100%; min-height:340px; filter: grayscale(15%); }
.contact-split__form{ padding: var(--space-4) var(--space-3); }
.contact-split__title{ font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); margin-bottom: var(--space-1); }
.contact-split__text{ color: var(--c-concrete); margin-bottom: var(--space-3); }
@media (min-width: 900px){
  .contact-split{ grid-template-columns: 1fr 1fr; min-height: 640px; }
  .contact-split__map{ min-height: auto; }
  .contact-split__map iframe{ min-height:auto; }
  .contact-split__form{ padding: var(--space-5) var(--space-4); display:flex; flex-direction:column; justify-content:center; }
}


.form__group{ margin-bottom: var(--space-2); display:flex; flex-direction:column; gap:.4rem; }
.form__label{ font-family: var(--font-head); font-size:.9rem; font-weight:600; }
.form__input{
  padding: .85rem 1rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--c-line);
  background: var(--c-surface);
  font-size:1rem; min-height:48px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.form__input:focus{ outline:none; border-color: var(--c-teal); box-shadow: 0 0 0 3px rgba(31,89,81,.15); }
.form__input--textarea{ min-height:120px; resize:vertical; }
.form__input--error{ border-color: var(--c-danger); }
.form__group--checkbox{ flex-direction:row; align-items:flex-start; gap:.7rem; }
.form__group--checkbox input{ width:22px; height:22px; margin-top:2px; accent-color: var(--c-teal); flex-shrink:0; }
.form__group--checkbox label{ font-size:.9rem; color: var(--c-concrete); }
.form__submit{ width:100%; margin-top: var(--space-1); }
.iti{ display:block; }


.legal-hero{ background: var(--c-ink); color:#fff; padding: calc(90px + var(--space-3)) var(--space-3) var(--space-3); text-align:center; }
.legal-hero__inner h1{ color:#fff; font-size: clamp(1.8rem, 1.4rem + 2vw, 2.6rem); margin-bottom:.5rem; }
.legal-hero__inner p{ font-family: var(--font-mono); color: var(--c-yellow); font-size:.9rem; }

.legal__toc-toggle{
  display:flex; width:100%; justify-content:space-between; align-items:center;
  background: var(--c-bg-raw); border:none; border-bottom:1px solid var(--c-line);
  padding: 1rem var(--space-3); font-family: var(--font-head); font-weight:600;
  min-height:52px;
}
.legal{
  max-width: var(--container-max); margin:0 auto;
  padding: var(--space-4) var(--space-3);
  display:grid; grid-template-columns: 1fr; gap: var(--space-3);
}
.legal__sidebar{ display:none; }
.legal__sidebar--open{ display:block; }
.legal__toc{ display:flex; flex-direction:column; gap:.3rem; background: var(--c-surface); border:1px solid var(--c-line); border-radius: var(--radius-md); padding: var(--space-2); }
.legal__toc-title{ font-family: var(--font-mono); text-transform:uppercase; font-size:.75rem; letter-spacing:.06em; color: var(--c-concrete-light); margin-bottom:.5rem; }
.legal__toc-link{ padding:.5rem .6rem; border-radius: var(--radius-sm); font-size:.92rem; color: var(--c-ink-soft); transition: background .25s ease, color .25s ease; }
.legal__toc-link:hover{ background: var(--c-bg-raw); }
.legal__toc-link--active{ background: var(--c-teal); color:#fff; }
.legal__content{ display:flex; flex-direction:column; gap: var(--space-4); min-width:0; }
.legal__section h2{ font-size: 1.4rem; margin-bottom: var(--space-1); scroll-margin-top: 100px; }
.legal__section p{ color: var(--c-ink-soft); margin-bottom: var(--space-1); }
.legal__section a{ color: var(--c-teal); text-decoration:underline; }

@media (min-width: 900px){
  .legal__toc-toggle{ display:none; }
  .legal{ grid-template-columns: 260px 1fr; align-items:start; }
  .legal__sidebar{ display:block; position:sticky; top:110px; }
}


.impressum{ max-width: 900px; margin:0 auto; padding: var(--space-4) var(--space-3); display:flex; flex-direction:column; gap: var(--space-3); }
.impressum__block h2{ font-size:1.25rem; margin-bottom: var(--space-1); border-bottom:2px solid var(--c-yellow); display:inline-block; padding-bottom:.3rem; }
.impressum__block p{ color: var(--c-ink-soft); }
.impressum__block a{ color: var(--c-teal); text-decoration:underline; }
.impressum__table{ width:100%; border-collapse:collapse; margin-top: var(--space-1); }
.impressum__table th, .impressum__table td{ text-align:left; padding:.7rem .9rem; border:1px solid var(--c-line); font-size:.95rem; }
.impressum__table th{ background: var(--c-bg-raw); width:35%; font-family: var(--font-head); }


.thanks{ padding: calc(90px + var(--space-4)) var(--space-3) var(--space-5); text-align:center; }
.thanks__inner{ max-width: 620px; margin:0 auto; }
.thanks__icon{ font-size:3rem; color: var(--c-teal); display:block; margin-bottom: var(--space-2); }
.thanks__title{ font-size: clamp(1.8rem, 1.4rem + 2vw, 2.6rem); margin-bottom: var(--space-2); }
.thanks__text{ color: var(--c-concrete); margin-bottom: var(--space-3); }
.thanks__next{ background: var(--c-bg-raw); border-radius: var(--radius-lg); padding: var(--space-3); text-align:left; margin-bottom: var(--space-3); }
.thanks__next-title{ font-size:1.1rem; margin-bottom: var(--space-2); }
.thanks__list li{ display:flex; gap:.7rem; margin-bottom:.8rem; color: var(--c-ink-soft); }
.thanks__list i{ color: var(--c-teal); margin-top:.2rem; }


.cookie-consent{ position: fixed; bottom: 20px; right: 20px; z-index: 1000; font-family: var(--font-body); }
.cookie-consent__bell{
  width:56px; height:56px; border-radius:50%;
  background: var(--c-teal); color:#fff; border:none;
  font-size:1.3rem; display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-lg); position:relative;
  transition: transform .25s ease, background .25s ease;
}
.cookie-consent__bell:hover{ transform: scale(1.06); background: var(--c-teal-deep); }
.cookie-consent__badge{
  position:absolute; top:2px; right:2px;
  width:14px; height:14px; border-radius:50%;
  background: var(--c-yellow-deep); border: 2px solid var(--c-surface);
}
.cookie-consent__badge[hidden]{ display:none; }
.cookie-consent__panel{
  position:absolute; bottom: 68px; right:0;
  width: min(360px, 90vw);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  opacity:0; transform: translateY(16px); pointer-events:none;
  transition: opacity .3s ease, transform .3s ease;
  max-height: 70vh; overflow-y:auto;
}
.cookie-consent__panel--open{ opacity:1; transform: translateY(0); pointer-events:auto; }
.cookie-consent__header{ display:flex; justify-content:space-between; align-items:center; margin-bottom: var(--space-1); }
.cookie-consent__header h3{ font-size:1.05rem; }
.cookie-consent__close{ background:none; border:none; font-size:1.1rem; color: var(--c-concrete); width:36px; height:36px; }
.cookie-consent__text{ font-size:.85rem; color: var(--c-concrete); margin-bottom: var(--space-2); }
.cookie-consent__text a{ color: var(--c-teal); text-decoration:underline; }
.cookie-consent__row{ display:flex; justify-content:space-between; align-items:center; gap: var(--space-1); padding: .7rem 0; border-top:1px solid var(--c-line); }
.cookie-consent__row strong{ font-size:.9rem; }
.cookie-consent__row p{ font-size:.78rem; color: var(--c-concrete); margin:.2rem 0 0; }
.cookie-consent__actions{ display:flex; gap:.6rem; margin-top: var(--space-2); }
.cookie-consent__actions .btn{ flex:1; padding:.7rem; font-size:.85rem; min-height:44px; }

.switch{ position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; }
.switch__slider{ position:absolute; inset:0; background: var(--c-line); border-radius:999px; transition: background .25s ease; cursor:pointer; }
.switch__slider::before{ content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition: transform .25s ease; }
.switch input:checked + .switch__slider{ background: var(--c-teal); }
.switch input:checked + .switch__slider::before{ transform: translateX(18px); }
.switch input:disabled + .switch__slider{ background: var(--c-teal); opacity:.6; cursor:not-allowed; }


[data-aos]{ transition-property: transform, opacity; }


@media (max-width: 480px){
  .site-header__inner{ padding: .7rem var(--space-2); }
  .hero{ padding-top: calc(70px + var(--space-4)); }
  .cookie-consent{ right:12px; bottom:12px; }
  .cookie-consent__panel{ right:-6px; }
}