/* Homepage: layout, visual system and accessible motion. */
:root {
  --home-bg: #081325;
  --home-panel: #0e213b;
  --home-panel-light: #132b49;
  --home-text: #f3f7ff;
  --home-muted: #b6c4d7;
  --home-line: rgba(172, 203, 234, .2);
  --home-cyan: #2dc7e4;
  --home-violet: #8e80ff;
  --home-lime: #b8ed72;
}

body.home-page { background: var(--home-bg); color: var(--home-text); }
.home-page a, .home-page a:visited { color: inherit; text-decoration: none; }
.home-wrap { width: min(1160px, calc(100% - 42px)); margin-inline: auto; }
.home-page h1, .home-page h2, .home-page h3 { font-family: 'Space Grotesk', Arial, sans-serif; letter-spacing: -.055em; line-height: .98; }
.eyebrow { align-items: center; color: var(--home-cyan); display: flex; font-size: 11px; font-weight: 700; gap: 9px; letter-spacing: .14em; margin: 0 0 20px; text-transform: uppercase; }
.eyebrow::before { background: currentColor; content: ''; height: 2px; width: 24px; }
.eyebrow--light { color: var(--home-lime); }
.home-button { align-items: center; background: var(--home-cyan); color: #071523; display: inline-flex; font-size: 15px; font-weight: 700; gap: 18px; justify-content: space-between; margin-top: 17px; padding: 15px 20px; text-decoration: none; transition: background .25s ease, transform .25s ease; }
.home-button:hover, .home-button:focus-visible { background: #6de4f5; transform: translateY(-3px); }
.home-button--dark { background: var(--home-text); color: var(--home-bg); }
.home-button--dark:hover, .home-button--dark:focus-visible { background: var(--home-lime); }

/* Hero: visual proof of the three connected areas of responsibility. */
.home-hero { isolation: isolate; min-height: 760px; overflow: hidden; padding: 96px 0 62px; position: relative; }
.home-hero::before { background: radial-gradient(circle at 82% 16%, rgba(45, 199, 228, .18), transparent 28%), radial-gradient(circle at 8% 88%, rgba(142, 128, 255, .14), transparent 32%); content: ''; inset: 0; pointer-events: none; position: absolute; z-index: -1; }
.hero-layout { min-height: 600px; position: relative; }
.home-hero__copy { max-width: 710px; position: relative; z-index: 2; }
.home-hero h1 { font-size: clamp(56px, 7.7vw, 106px); margin: 0 0 25px; max-width: 10.8ch; }
.home-hero h1 em { color: var(--home-cyan); font-style: normal; }
.home-hero__lead { color: #c8d5e4; font-size: 20px; line-height: 1.5; margin: 0; max-width: 570px; }
.home-proof { display: flex; gap: 0; margin-top: 64px; max-width: 580px; }
.home-proof__item { border-left: 1px solid var(--home-line); display: grid; min-width: 178px; padding: 0 18px; }
.home-proof__item strong { color: var(--home-cyan); font-family: 'Space Grotesk', Arial, sans-serif; font-size: 22px; }
.home-proof__item span { color: var(--home-muted); font-size: 12px; }
.hero-startbild { border: 1px solid rgba(45, 199, 228, .34); height: 370px; object-fit: cover; object-position: right center; position: absolute; right: 0; top: 46px; width: 390px; z-index: 1; }
.hero-orbit { align-items: center; animation: heroOrbit 18s linear infinite; border: 1px solid rgba(45, 199, 228, .5); border-radius: 50%; display: flex; height: 144px; justify-content: center; position: absolute; right: 3px; top: -12px; width: 144px; z-index: 3; }
.hero-orbit::before { border: 1px solid rgba(45, 199, 228, .2); border-radius: 50%; content: ''; inset: 9px; position: absolute; }
.hero-orbit span { color: var(--home-cyan); font: 700 17px/.95 'Space Grotesk', Arial, sans-serif; position: relative; text-align: center; transform: rotate(-12deg); }
.hero-system { background: #f5f2ea; bottom: 0; box-shadow: 15px 16px 0 rgba(45, 199, 228, .14); color: #11231f; position: absolute; right: 0; width: 365px; z-index: 2; }
.hero-system header { border-bottom: 1px solid #d0d8d1; font-size: 10px; font-weight: 700; letter-spacing: .11em; padding: 14px 18px; text-transform: uppercase; }
.hero-system header i { background: var(--home-cyan); border-radius: 50%; display: inline-block; height: 9px; margin-right: 8px; width: 9px; }
.hero-system__row { align-items: center; border-bottom: 1px solid #dce2dc; display: flex; gap: 12px; padding: 14px 18px; }
.hero-system__row:last-child { border-bottom: 0; }
.hero-system__icon { align-items: center; background: #d9f5ee; border-radius: 50%; color: #087f92; display: inline-flex; font-size: 19px; height: 34px; justify-content: center; width: 34px; }
.hero-system__row b, .hero-system__row small { display: block; }
.hero-system__row b { font-size: 13px; }
.hero-system__row small { color: #607672; font-size: 11px; margin-top: 2px; }
@keyframes heroOrbit { to { transform: rotate(360deg); } }
@keyframes heroOrbitText { to { transform: rotate(-360deg); } }

.trust-bar { background: var(--home-panel); border-block: 1px solid var(--home-line); overflow: hidden; }
.trust-bar__inner { align-items: center; display: grid; gap: 22px; grid-template-columns: max-content minmax(0, 1fr); min-height: 74px; white-space: nowrap; }
.trust-bar__label { background: var(--home-panel); color: var(--home-muted); font-size: 11px; font-weight: 700; letter-spacing: .12em; position: relative; text-transform: uppercase; z-index: 1; }
.trust-bar__viewport { min-width: 0; overflow: hidden; }
.trust-bar__items { animation: marquee 36s linear infinite; color: #dbe7f4; display: flex; font-size: 14px; font-weight: 600; gap: 25px; width: max-content; }
.trust-bar__items span::after { color: var(--home-cyan); content: '•'; margin-left: 25px; }
.trust-bar:hover .trust-bar__items { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

.problem-section { display: grid; gap: 90px; grid-template-columns: 1.05fr .95fr; padding: 128px 0; }
.problem-section h2, .section-heading h2 { font-size: clamp(41px, 5.3vw, 67px); margin: 0; max-width: 11ch; }
.problem-section__text { align-self: end; }
.problem-section__text .lead { color: #e1eaf4; font-size: 21px; line-height: 1.5; margin: 0 0 20px; }
.problem-section__text p:last-child { color: var(--home-muted); margin: 0; }

.services-section { background: var(--home-panel); padding: 112px 0; }
.section-heading { align-items: end; display: flex; gap: 50px; justify-content: space-between; margin-bottom: 50px; }
.section-heading > p { color: var(--home-muted); margin: 0; max-width: 340px; }
.service-list { border-top: 1px solid var(--home-line); }
.service-row { align-items: center; border-bottom: 1px solid var(--home-line); display: grid; gap: 25px; grid-template-columns: 75px 1.03fr 1fr 35px; padding: 28px 0; transition: background .28s ease, padding .28s ease; }
.service-row:hover { background: rgba(45, 199, 228, .055); padding-inline: 16px; }
.service-row__number { color: var(--home-cyan); font: 600 25px 'Space Grotesk', Arial, sans-serif; }
.service-row small { color: var(--home-cyan); font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.service-row h3 { font-size: 27px; margin: 5px 0 0; }
.service-row p { color: var(--home-muted); font-size: 14px; margin: 0; }
.service-row__arrow { color: var(--home-cyan); font-size: 25px; text-align: right; transition: transform .25s ease; }
.service-row:hover .service-row__arrow { transform: translateX(5px); }

.case-section { padding: 118px 0; }
.case-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.case-card { background: var(--home-panel); display: flex; flex-direction: column; min-height: 410px; overflow: hidden; padding: 23px; position: relative; }
.case-card::before { border: 1px solid rgba(45, 199, 228, .48); content: ''; height: 156px; left: 15%; position: absolute; top: 77px; transition: transform .65s cubic-bezier(.2,.75,.2,1); width: 70%; }
.case-card::after { background: var(--home-cyan); content: ''; height: 42px; left: 24%; position: absolute; top: 114px; transition: transform .65s cubic-bezier(.2,.75,.2,1); width: 52%; }
.case-card:nth-child(2)::before { border-color: rgba(142, 128, 255, .7); border-radius: 50%; height: 133px; left: 28%; width: 44%; }
.case-card:nth-child(2)::after { background: var(--home-violet); border-radius: 50%; height: 42px; left: calc(50% - 21px); width: 42px; }
.case-card:nth-child(3)::before { border-color: rgba(184, 237, 114, .67); height: 135px; left: calc(50% - 1px); width: 1px; }
.case-card:nth-child(3)::after { background: var(--home-lime); border-radius: 50%; height: 49px; left: calc(50% - 24px); top: 118px; width: 49px; }
.case-card:hover::before { transform: rotate(-4deg) scale(1.06); }
.case-card:hover::after { transform: translateY(-13px) scale(1.08); }
.case-card__top { color: var(--home-muted); display: flex; font-size: 10px; font-weight: 700; justify-content: space-between; letter-spacing: .09em; text-transform: uppercase; }
.case-card__copy { border-top: 1px solid var(--home-line); margin-top: 232px; padding-top: 19px; }
.case-card h3 { font-size: 29px; margin: 0 0 12px; }
.case-card p { color: var(--home-muted); font-size: 14px; margin: 0; }
.case-card__detail { color: var(--home-cyan); font-size: 13px; font-weight: 700; margin-top: auto; padding-top: 20px; }

.utility-section { background: var(--home-panel); padding: 108px 0; }
.utility-grid { align-items: center; display: grid; gap: 100px; grid-template-columns: .85fr 1.15fr; }
.utility-intro h2, .faq-heading h2 { font-size: clamp(40px, 5vw, 63px); margin: 0; max-width: 11ch; }
.utility-intro > p:not(.eyebrow) { color: var(--home-muted); font-size: 18px; line-height: 1.5; max-width: 520px; }
.utility-links { border-top: 1px solid var(--home-line); margin-top: 31px; }
.utility-links a { align-items: center; border-bottom: 1px solid var(--home-line); display: flex; font-size: 14px; font-weight: 700; justify-content: space-between; padding: 15px 0; text-decoration: none; }
.utility-links a span { color: var(--home-cyan); font-size: 20px; transition: transform .2s ease; }
.utility-links a:hover span { transform: translateX(5px); }
.seo-panel { background: #f5f2ea; border: 0; box-shadow: none; color: #11231f; padding: 0; }
.seo-panel__tab { border-bottom: 1px solid #d0d8d1; font-size: 12px; font-weight: 700; padding: 16px 23px 0; }
.seo-panel__tab b { border-bottom: 3px solid #087f92; display: inline-block; padding-bottom: 12px; }
.seo-panel__body { padding: 30px; }
.seo-panel__eyebrow { align-items: center; color: #607672; display: flex; font-size: 11px; font-weight: 700; gap: 10px; letter-spacing: .14em; margin: 0 0 20px; text-transform: uppercase; }
.seo-panel__eyebrow::before { background: #087f92; content: ''; height: 2px; width: 26px; }
.seo-panel h3 { color: #11231f; font-size: 30px; margin: 0 0 8px; }
.seo-panel p { color: #50615e; font-size: 14px; margin: 0 0 20px; }
.seo-panel label { color: #11231f; display: block; font-size: 12px; font-weight: 700; margin: 23px 0 6px; }
.seo-panel__input-row { background: #fff; border: 1px solid #b9c5c1; display: flex; }
.seo-panel input { background: transparent; border: 0; color: #11231f; flex: 1; font: inherit; min-width: 0; outline: none; padding: 13px; width: auto; }
.seo-panel__submit { background: var(--home-cyan); border: 0; color: #071523; cursor: pointer; font-size: 23px; width: 56px; }
.seo-panel__submit:hover, .seo-panel__submit:focus-visible { background: #6de4f5; }
.seo-panel input:focus { border-color: var(--home-cyan); box-shadow: 0 0 0 3px rgba(45,199,228,.14); }
.seo-panel button { border: 0; cursor: pointer; margin-top: 0; }
.seo-panel__note { font-size: 12px !important; margin: 17px 0 0 !important; }

.process-section { background: linear-gradient(120deg, #0e2745, var(--home-panel)); padding: 112px 0; }
.process-grid { display: grid; gap: 22px; grid-template-columns: repeat(4, 1fr); margin-top: 50px; }
.process-step { border-top: 1px solid rgba(215, 235, 255, .36); padding-top: 17px; }
.process-step strong { color: var(--home-lime); display: block; font: 600 25px 'Space Grotesk', Arial, sans-serif; margin-bottom: 11px; }
.process-step h3 { font-size: 21px; margin: 0 0 9px; }
.process-step p { color: var(--home-muted); font-size: 14px; margin: 0; }

.about-section { display: grid; gap: 90px; grid-template-columns: .7fr 1.3fr; padding: 120px 0; }
.about-mark { align-items: center; background: radial-gradient(circle at 37% 25%, rgba(45, 199, 228, .32), transparent 34%), var(--home-panel); border: 1px solid var(--home-line); display: flex; justify-content: center; min-height: 315px; position: relative; }
.about-mark b { color: var(--home-lime); font: 700 clamp(75px, 10vw, 132px) 'Space Grotesk', Arial, sans-serif; letter-spacing: -.13em; position: relative; z-index: 1; }
.about-mark::before, .about-mark::after { border: 1px solid rgba(45, 199, 228, .35); content: ''; inset: 16%; position: absolute; transform: rotate(45deg); }
.about-mark::after { inset: 29%; transform: rotate(-22deg); }
.about-section h2 { font-size: clamp(42px, 5.2vw, 65px); margin: 0; max-width: 12ch; }
.about-section .lead { color: #e1eaf4; font-size: 20px; line-height: 1.5; }
.about-section p:not(.eyebrow):not(.lead) { color: var(--home-muted); }

.faq-section { padding: 112px 0; }
.faq-heading { display: grid; gap: 50px; grid-template-columns: 1fr 1fr; margin-bottom: 40px; }
.faq-heading > p { align-self: end; color: var(--home-muted); margin: 0; max-width: 400px; }
.faq-list { border-top: 1px solid var(--home-line); display: grid; grid-template-columns: 1fr 1fr; }
.faq-list details { border-bottom: 1px solid var(--home-line); padding: 0 30px 0 0; }
.faq-list details:nth-child(odd) { margin-right: 30px; }
.faq-list summary { cursor: pointer; font-family: 'Space Grotesk', Arial, sans-serif; font-size: 18px; font-weight: 700; list-style: none; padding: 22px 32px 22px 0; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { color: var(--home-cyan); content: '+'; font: 300 28px Arial, sans-serif; position: absolute; right: 0; top: 15px; }
.faq-list details[open] summary::after { content: '−'; }
.faq-list details > div { color: var(--home-muted); font-size: 14px; line-height: 1.55; padding: 0 0 22px; }
.faq-list details > div p { margin: 0; }

.contact-section { background: var(--home-panel); padding: 110px 0; }
.contact-grid { display: grid; gap: 90px; grid-template-columns: 1fr 1fr; }
.contact-grid h2 { font-size: clamp(42px, 5.3vw, 66px); margin: 0; max-width: 10ch; }
.contact-grid .lead { color: #e1eaf4; font-size: 19px; line-height: 1.52; margin-top: 0; }
.contact-form { display: grid; gap: 11px; }
.contact-form input, .contact-form textarea { background: #0a1c33; border: 1px solid var(--home-line); color: var(--home-text); font: inherit; outline: none; padding: 13px 14px; transition: border-color .2s ease, box-shadow .2s ease; width: 100%; }
.contact-form textarea { min-height: 122px; resize: vertical; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #8798ad; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--home-cyan); box-shadow: 0 0 0 3px rgba(45,199,228,.14); }
.contact-honeypot { height: 1px; left: -10000px; overflow: hidden; position: absolute; width: 1px; }
.contact-form + .home-button { border: 0; cursor: pointer; }
.contact-form + .home-button:disabled { cursor: wait; opacity: .65; }
.contact-data { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 30px; }
.contact-data a { border-bottom: 1px solid rgba(45, 199, 228, .55); font-size: 15px; font-weight: 700; text-decoration: none; }
.contact-note { color: var(--home-muted); font-size: 13px; margin-top: 22px; }

/* A single reusable reveal primitive avoids per-section animation code. */
.js-ready .home-reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .76s cubic-bezier(.2,.78,.2,1); }
.js-ready .home-reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .home-hero { min-height: 0; }
  .hero-layout { min-height: 0; }
  .hero-startbild { opacity: .28; right: -70px; top: 0; }
  .hero-system { margin-top: 44px; position: relative; right: auto; width: min(100%, 380px); }
  .problem-section, .about-section, .contact-grid { gap: 45px; grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .service-row { grid-template-columns: 60px 1fr 1fr; }
  .service-row__arrow { display: none; }
}
@media (max-width: 650px) {
  .home-wrap { width: min(100% - 34px, 1160px); }
  .home-hero { min-height: 620px; padding: 84px 0 62px; }
  .home-hero h1 { font-size: clamp(51px, 15vw, 74px); }
  .home-hero__lead { font-size: 18px; }
  .hero-startbild { display: none; }
  .hero-orbit { height: 108px; right: -8px; top: -35px; width: 108px; }
  .hero-orbit span { font-size: 13px; }
  .hero-system { margin-top: 38px; width: 100%; }
  .home-proof { margin-top: 55px; }
  .home-proof__item { min-width: 0; padding: 0 8px; width: 33%; }
  .home-proof__item strong { font-size: 20px; }
  .home-proof__item span { font-size: 10px; }
  .trust-bar__inner { display: block; }
  .trust-bar__label { display: none; }
  .problem-section, .case-section, .about-section { padding: 82px 0; }
  .services-section, .process-section, .contact-section { padding: 82px 0; }
  .section-heading { align-items: start; display: block; }
  .section-heading > p { margin-top: 20px; }
  .service-row { gap: 15px; grid-template-columns: 45px 1fr; }
  .service-row p { grid-column: 2; }
  .service-row h3 { font-size: 24px; }
  .case-grid, .process-grid, .utility-grid, .faq-heading, .faq-list { gap: 42px; grid-template-columns: 1fr; }
  .faq-list details:nth-child(odd) { margin-right: 0; }
  .case-card { min-height: 365px; }
  .about-mark { min-height: 245px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-orbit, .trust-bar__items { animation: none; }
  .home-button, .service-row, .service-row__arrow, .case-card::before, .case-card::after { transition: none; }
  .js-ready .home-reveal { opacity: 1; transform: none; transition: none; }
}