/* Shared subpage layout — legal, about, team, intern, forms */

body.page-sub {
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 226, 0, 0.05) 0%, transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(255, 226, 0, 0.04) 0%, transparent 24%),
    linear-gradient(180deg, #06080c 0%, #0a1018 42%, #06080c 100%);
  color: #eef2f6;
}

body.page-sub .nav::before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.55) 70%, transparent 100%);
}

body.page-sub-light {
  background: #f4f6f8;
  color: #07111b;
}

body.page-sub-light .nav::before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 70%, transparent 100%);
}

/* ── Verado-Atmosphäre — gleicher Hintergrund/Gradient-Overlay wie V8 Verado Hero ── */
body.page-entwicklung,
body.page-legal,
body.page-about {
  position: relative;
  isolation: isolate;
  background-color: #060a10;
  color: #eef2f6;
}

body.page-entwicklung main,
body.page-legal main,
body.page-about main {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow-x: clip;
}

body.page-entwicklung main::before,
body.page-legal main::before,
body.page-about main::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1800' height='900' viewBox='0 0 1800 900'%3E%3Cg fill='none'%3E%3Cpath d='M-80 130 C170 54 320 214 570 126 C820 38 1010 170 1245 90 C1480 10 1600 90 1880 34' stroke='%236a7d8c' stroke-opacity='.22' stroke-width='1.25'/%3E%3Cpath d='M-90 160 C170 82 325 242 575 154 C825 66 1015 198 1250 118 C1485 38 1605 118 1885 62' stroke='%236a7d8c' stroke-opacity='.16' stroke-width='1'/%3E%3Cpath d='M-90 190 C170 112 325 272 575 184 C825 96 1015 228 1250 148 C1485 68 1605 148 1885 92' stroke='%236a7d8c' stroke-opacity='.11' stroke-width='1'/%3E%3Cpath d='M-110 770 C155 680 340 850 610 754 C880 658 1030 810 1305 700 C1580 590 1650 730 1910 650' stroke='%236a7d8c' stroke-opacity='.20' stroke-width='1.25'/%3E%3Cpath d='M-110 812 C155 722 340 892 610 796 C880 700 1030 852 1305 742 C1580 632 1650 772 1910 692' stroke='%236a7d8c' stroke-opacity='.13' stroke-width='1'/%3E%3Cpath d='M-130 604 C170 548 372 640 662 590 C952 540 1120 640 1398 568 C1676 496 1735 556 1915 514' stroke='%23FFE200' stroke-opacity='.18' stroke-width='1.3'/%3E%3Cpath d='M-120 104 C170 70 392 132 662 96 C932 60 1120 142 1398 88 C1676 34 1760 84 1925 50' stroke='%23FFE200' stroke-opacity='.14' stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E") center center / cover no-repeat,
    radial-gradient(circle at 68% 46%, rgba(255, 226, 0, 0.035) 0%, transparent 42%),
    radial-gradient(circle at 16% 22%, rgba(110, 130, 148, 0.08) 0%, transparent 34%),
    linear-gradient(180deg, #050810 0%, #070d14 48%, #050810 100%);
}

body.page-entwicklung main::after,
body.page-legal main::after,
body.page-about main::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0.34;
  background:
    radial-gradient(circle at 78% 42%, rgba(255, 226, 0, 0.05) 0 118px, transparent 119px),
    radial-gradient(circle at 78% 42%, transparent 0 182px, rgba(110, 130, 148, 0.08) 183px 184px, transparent 185px),
    radial-gradient(circle at 78% 42%, transparent 0 248px, rgba(110, 130, 148, 0.05) 249px 250px, transparent 251px),
    conic-gradient(from 35deg at 78% 42%, transparent 0deg, transparent 24deg, rgba(255, 226, 0, 0.07) 35deg, transparent 48deg, transparent 112deg, rgba(110, 130, 148, 0.08) 124deg, transparent 138deg, transparent 220deg, rgba(255, 226, 0, 0.05) 236deg, transparent 252deg, transparent 360deg);
  filter: grayscale(0.15) brightness(0.52);
}

body.page-entwicklung .nav::before,
body.page-legal .nav::before,
body.page-about .nav::before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.55) 70%, transparent 100%);
}

/* Mini-Hero der Legal-Seiten übernimmt dieselbe Atmosphäre statt Fotohintergrund */
.oct-sub-hero.oct-sub-hero--atmo::before {
  background: rgba(0, 0, 0, 0.20);
}

/* Inhalt & Footer müssen über der fixierten Atmosphäre liegen, nicht darunter */
body.page-entwicklung .oct-dev-page {
  position: relative;
  z-index: 2;
}

body.page-about .oct-about-page {
  position: relative;
  z-index: 2;
}

body.page-legal .oct-sub-hero,
body.page-legal .oct-sub-main {
  position: relative;
  z-index: 2;
}

body.page-entwicklung .oct-footer-bg,
body.page-legal .oct-footer-bg,
body.page-about .oct-footer-bg {
  position: relative;
  z-index: 3;
}

.oct-sub-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(168px, 19vh, 220px) var(--edge) clamp(56px, 7vh, 84px);
}

.oct-sub-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(6, 8, 12, 0.92) 0%, rgba(6, 8, 12, 0.72) 42%, rgba(6, 8, 12, 0.88) 100%),
    var(--oct-sub-hero-image, url("../img/bgland.jpg")) center center / cover no-repeat fixed;
}

.oct-sub-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 226, 0, 0.55), transparent);
}

.oct-sub-hero__inner {
  position: relative;
  z-index: 2;
  width: min(var(--max), calc(100% - var(--edge) * 2));
  margin-inline: auto;
}

.oct-sub-kicker {
  display: block;
  margin: 0 0 18px;
  font-size: clamp(18px, 1.5vw, 24px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--y);
  text-shadow: 0 0 18px rgba(255, 226, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.48);
}

.oct-sub-title {
  margin: 0 0 24px;
  max-width: 14ch;
  font-size: clamp(34px, 4.6vw, 52px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.6px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 8px 26px rgba(0, 0, 0, 0.42);
}

.oct-sub-title::after {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  margin: 18px 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 226, 0, 0.98), rgba(255, 226, 0, 0.84));
  box-shadow: 0 0 16px rgba(255, 226, 0, 0.14);
}

.oct-sub-lead {
  margin: 22px 0 0;
  max-width: 660px;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.68;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}

.oct-sub-main {
  padding: clamp(48px, 6vh, 72px) var(--edge) clamp(72px, 8vh, 110px);
}

.oct-sub-shell {
  width: min(var(--max), calc(100% - var(--edge) * 2));
  margin-inline: auto;
}

.oct-sub-card {
  background: rgba(255, 255, 255, 0.97);
  color: #07111b;
  border: 1px solid rgba(7, 17, 27, 0.08);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  padding: clamp(1.75rem, 3vw, 2.75rem);
}

.oct-sub-card--dark {
  background: rgba(14, 18, 26, 0.88);
  color: #eef2f6;
  border-color: rgba(255, 255, 255, 0.1);
}

.oct-sub-card.oct-legal {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.oct-legal {
  color: rgba(255, 255, 255, 0.82);
}

.oct-legal h1,
.oct-legal h2,
.oct-legal h3 {
  margin: 0 0 0.65rem;
  color: #fff;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.oct-legal h2 {
  font-size: 18px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
}

.oct-legal h3 {
  margin-top: 1.35rem;
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
  color: #fff;
}

.oct-legal h2::after {
  content: none;
  display: none;
}

.oct-legal h2.oct-legal-numbered::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-top: 0.45rem;
  border-radius: 999px;
  background: var(--y);
}

.oct-legal h1:first-child,
.oct-legal h2:first-child,
.oct-legal h3:first-child {
  margin-top: 0;
}

.oct-legal p,
.oct-legal li {
  margin: 0 0 0.75rem;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.74);
}

.oct-legal ul {
  margin: 0 0 0.75rem 1.15rem;
}

.oct-legal a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.35);
}

.oct-legal a:hover {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.55);
}

.oct-legal-block {
  margin: 0 0 2rem;
  padding-top: 0.15rem;
}

.oct-legal-block + .oct-legal-block {
  margin-top: 0.35rem;
}

.oct-legal-block:last-child {
  margin-bottom: 0;
}

.oct-legal-block > h2 {
  margin-top: 0;
  margin-bottom: 0.65rem;
}

.oct-legal-address,
.oct-legal-contact {
  margin: 0 0 1rem;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.84);
}

.oct-legal-address strong,
.oct-legal-contact strong,
.oct-legal p strong {
  color: #fff;
  font-weight: 700;
}

.oct-legal-contact span {
  display: inline;
}

.oct-legal h2 .oct-legal-num,
.oct-legal-num {
  color: #fff;
  font-weight: 800;
  margin-right: 0.35em;
}

.oct-legal ul {
  color: rgba(255, 255, 255, 0.74);
}

.oct-legal li {
  margin-bottom: 0.45rem;
}

.oct-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}

.oct-about-media {
  position: relative;
  min-height: 360px;
  border-radius: 16px;
  overflow: hidden;
}

.oct-about-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.oct-about-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(6, 8, 12, 0.55) 100%);
}

.oct-about-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.oct-about-stat {
  padding: 1.25rem;
  border-radius: 12px;
  background: rgba(255, 226, 0, 0.08);
  border: 1px solid rgba(255, 226, 0, 0.18);
}

.oct-about-stat strong {
  display: block;
  font-size: 1.5rem;
  color: var(--y);
  margin-bottom: 0.35rem;
}

.oct-about-stat span {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
}

.oct-team-layout {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.oct-team-lead {
  display: flex;
  justify-content: center;
}

.oct-team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 2.5vw, 2rem);
}

.oct-team-person {
  text-align: center;
}

.oct-team-person__photo {
  position: relative;
  width: min(100%, 240px);
  margin: 0 auto 1.25rem;
  aspect-ratio: 1;
}

.oct-team-person--lead .oct-team-person__photo {
  width: min(100%, 300px);
}

.oct-team-person__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.32s ease;
}

.oct-team-person__photo::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  transition: inset 0.32s ease, border-color 0.32s ease;
  pointer-events: none;
}

.oct-team-person:hover .oct-team-person__photo::after {
  inset: -9px;
  border-color: var(--y);
}

.oct-team-person:hover .oct-team-person__photo img {
  transform: scale(1.03);
}

.oct-team-person__name {
  margin: 0 0 0.65rem;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: #fff;
}

.oct-team-person__role {
  margin: 0;
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

.oct-team-person--lead .oct-team-person__name {
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
}

@media (max-width: 900px) {
  .oct-team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .oct-team-grid {
    grid-template-columns: 1fr;
    max-width: 320px;
    margin-inline: auto;
  }
}

.oct-intern-login {
  max-width: 460px;
  margin-inline: auto;
}

.oct-intern-login label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}

.oct-intern-login input {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font: inherit;
}

.oct-intern-login input:focus {
  outline: none;
  border-color: var(--y);
}

.oct-intern-login button {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(255, 226, 0, 0.45);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255, 226, 0, 0.16), rgba(255, 255, 255, 0.04));
  color: #fff;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.oct-intern-login button:hover {
  border-color: var(--y);
  color: var(--y);
}

.oct-intern-login__links {
  margin: 1.25rem 0 0;
  text-align: center;
}

.oct-intern-login__links a {
  color: rgba(255, 226, 0, 0.85);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.oct-intern-login__links a:hover {
  color: #ffe200;
  text-decoration: underline;
}

.oct-intern-login__links a + a {
  margin-left: 1.25rem;
}

/* Intern — schlanker Header + gelber Strich wie auf den anderen Seiten */
.page-intern .oct-intern-hero {
  padding-bottom: clamp(48px, 6vh, 72px);
}

.oct-intern-heading {
  margin: 0;
  color: #f4f6f8;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
}

.oct-intern-heading::after {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  margin: 18px 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 226, 0, 0.98), rgba(255, 226, 0, 0.84));
  box-shadow: 0 0 16px rgba(255, 226, 0, 0.14);
}

.oct-intern-welcome {
  margin: 1.35rem 0 0;
  color: rgba(232, 236, 242, 0.78);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

/* Bereich zieht nach unten — viel Luft um die Boxen */
.page-intern main {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 4rem);
}

.page-intern .oct-intern-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: clamp(3.5rem, 8vh, 6rem);
  padding-bottom: 0;
}

.page-intern .oct-intern-main > .oct-sub-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.oct-intern-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.65rem;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .oct-intern-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
  }
}

/* Intern-Karten — ruhiger, hochwertiger 3D-Schatten */
.oct-intern-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  padding: 3.75rem 2.25rem;
  border-radius: 16px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background:
    linear-gradient(165deg, rgba(56, 58, 64, 0.95) 0%, rgba(28, 30, 34, 0.96) 55%, rgba(22, 24, 28, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 -1px 0 rgba(0, 0, 0, 0.35) inset,
    0 2px 4px rgba(0, 0, 0, 0.25),
    0 12px 28px rgba(0, 0, 0, 0.45),
    0 28px 56px rgba(0, 0, 0, 0.35);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    border-color 0.35s ease,
    box-shadow 0.4s ease,
    background 0.35s ease;
  overflow: hidden;
  transform: translateZ(0);
}

.oct-intern-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.09) 0%, transparent 42%);
  pointer-events: none;
}

.oct-intern-card::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 40%;
  background: radial-gradient(ellipse at center bottom, rgba(0, 0, 0, 0.35), transparent 70%);
  pointer-events: none;
  opacity: 0.7;
}

.oct-intern-card:hover,
.oct-intern-card:focus-visible {
  transform: translateY(-8px);
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 -1px 0 rgba(0, 0, 0, 0.4) inset,
    0 4px 8px rgba(0, 0, 0, 0.28),
    0 18px 36px rgba(0, 0, 0, 0.5),
    0 36px 72px rgba(0, 0, 0, 0.4);
  outline: none;
}

.oct-intern-card__title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(1.55rem, 2.5vw, 1.9rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.15;
}

.oct-intern-card__text {
  position: relative;
  z-index: 1;
  margin: 1rem 0 0;
  max-width: 15.5rem;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.01em;
}

.oct-intern-card--static {
  cursor: default;
}

.oct-intern-card--static:hover,
.oct-intern-card--static:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.28);
}

.oct-intern-meta {
  margin-top: auto;
  margin-bottom: 3.5cm;
  padding-top: clamp(3.5rem, 8vh, 6rem);
  display: flex;
  justify-content: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}

.oct-intern-meta a {
  color: rgba(220, 226, 234, 0.62);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.25s ease;
}

.oct-intern-meta a:hover,
.oct-intern-meta a:focus-visible {
  color: rgba(255, 255, 255, 0.92);
  outline: none;
}

.oct-konto-shell {
  max-width: 640px;
  margin-inline: auto;
  display: grid;
  gap: 1.75rem;
  padding-bottom: 3rem;
}

.oct-konto-card {
  padding: 1.75rem 1.5rem 1.6rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 12, 18, 0.72);
}

.oct-konto-card h2 {
  margin: 0 0 0.55rem;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.oct-konto-lead {
  margin: 0 0 1.25rem;
  color: rgba(232, 236, 242, 0.72);
  font-size: 0.95rem;
  line-height: 1.55;
}

.oct-konto-form {
  display: grid;
  gap: 0.45rem;
}

.oct-konto-form label {
  margin-top: 0.55rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.oct-konto-form input {
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: inherit;
}

.oct-konto-form input:focus {
  outline: none;
  border-color: rgba(255, 226, 0, 0.55);
}

.oct-konto-form button {
  margin-top: 1.1rem;
  justify-self: start;
  padding: 0.8rem 1.35rem;
  border: 1px solid #ffe200;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.oct-konto-form button:hover {
  background: rgba(255, 226, 0, 0.12);
  color: #ffe200;
}

.oct-konto-msg {
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  font-size: 0.92rem;
  line-height: 1.45;
}

.oct-konto-msg--ok {
  border: 1px solid rgba(120, 200, 140, 0.45);
  background: rgba(40, 120, 70, 0.22);
  color: #d8f5e2;
}

.oct-konto-msg--err {
  border: 1px solid rgba(220, 100, 100, 0.45);
  background: rgba(120, 30, 30, 0.28);
  color: #ffd0d0;
}

.oct-konto-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin: 0.5rem 0 2rem;
}

.oct-konto-nav a {
  color: rgba(220, 226, 234, 0.7);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

.oct-konto-nav a:hover {
  color: #fff;
}

.oct-btn-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.5rem;
  padding: 0.85rem 1.35rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 226, 0, 0.45);
  background: rgba(255, 226, 0, 0.1);
  color: #07111b;
  font-weight: 700;
  text-decoration: none;
}

.oct-btn-inline--light {
  color: #fff;
  background: rgba(255, 226, 0, 0.12);
}

.oct-dev-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

.oct-dev-badges img {
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.35));
}

.oct-motor-lines {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}

.oct-motor-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}

.oct-motor-line--reverse .oct-motor-line__media {
  order: 2;
}

.oct-motor-line__media {
  min-height: 280px;
  padding: 1.5rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.oct-motor-line__media img {
  width: min(100%, 420px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.45));
}

.oct-motor-line__kicker {
  display: block;
  margin: 0 0 0.75rem;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--y);
}

.oct-motor-line__body h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.oct-motor-line__body p {
  margin: 0 0 1rem;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.78);
}

.oct-motor-line__list {
  margin: 0 0 1.25rem;
  padding-left: 1.1rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.65;
}

.oct-verado-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}

@media (max-width: 900px) {
  .oct-about-grid {
    grid-template-columns: 1fr;
  }

  .oct-about-stats {
    grid-template-columns: 1fr;
  }

  .oct-motor-line,
  .oct-motor-line--reverse {
    grid-template-columns: 1fr;
  }

  .oct-motor-line--reverse .oct-motor-line__media {
    order: 0;
  }

  .oct-verado-features {
    grid-template-columns: 1fr;
  }
}