/* Claas & Freunde: domain studio entrance. The visual language is original. */
:root {
  --signal-green: #aaf478;
  --signal-ink: #0a0f0c;
  --signal-line: rgba(170, 244, 120, .24);
}

.hero-domain-first {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(940px, 100svh);
  height: auto;
  max-height: none;
  padding: 126px var(--space) 104px;
  background: var(--signal-ink);
  isolation: isolate;
}
.hero-domain-first::before {
  content: "DOMAIN";
  position: absolute;
  top: 23%;
  left: -1.7%;
  z-index: -1;
  color: rgba(182, 245, 149, .075);
  font-size: clamp(170px, 25vw, 440px);
  font-weight: 800;
  letter-spacing: -.1em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.hero-domain-first::after {
  background:
    radial-gradient(circle at 64% 50%, transparent 4%, rgba(5, 11, 8, .28) 52%, #090e0bdc 91%),
    linear-gradient(90deg, #080d0cdd 0%, #07100b8a 58%, #080d0ce6 100%);
}
.hero-domain-first .hero-art {
  inset: 0;
  z-index: -2;
  opacity: .41;
  filter: saturate(.55);
  mask-image: none;
  -webkit-mask-image: none;
}
.hero-domain-first .hero-art video {
  filter: saturate(.65) brightness(.38) contrast(1.2) !important;
  object-position: center 45%;
}
.hero-domain-first .hero-wordmark { display: none; }
.hero-domain-first .hero-bottom {
  position: relative;
  inset: auto;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(440px, .9fr);
  align-items: center;
  gap: clamp(38px, 7vw, 120px);
  width: min(1510px, 100%);
  margin: 0 auto;
  transform: none;
}
.hero-domain-first .hero-intro { max-width: 710px; }
.hero-domain-first .hero-kicker {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 34px;
  color: #ccf5b5;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.5;
}
.hero-domain-first .hero-live-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  background: var(--signal-green);
  box-shadow: 0 0 0 5px #aaf47822, 0 0 20px #aaf47870;
}
.hero-domain-first h1 {
  max-width: none;
  color: #f5f7f2;
  font-size: clamp(62px, 7.25vw, 120px);
  font-weight: 600;
  letter-spacing: -.085em;
  line-height: .94;
}
.hero-domain-first h1 span {
  color: var(--signal-green);
  text-shadow: 0 0 80px #aaf47840;
}
.hero-domain-first .hero-lead {
  max-width: 520px;
  margin-top: 38px;
  color: #d5dcd3;
  font-size: clamp(16px, 1.36vw, 19px);
  line-height: 1.68;
}
.hero-domain-first .hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 27px;
  margin-top: 37px;
}
.hero-domain-first .hero-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  min-height: 58px;
  padding: 15px 20px;
  border: 1px solid var(--signal-green);
  background: var(--signal-green);
  color: #0c140d;
  font-size: 12px;
  font-weight: 800;
  transition: background .25s, box-shadow .25s, transform .25s;
}
.hero-domain-first .hero-link:hover {
  background: #cbffa8;
  box-shadow: 0 0 35px #aaf47845;
  transform: translateY(-2px);
}
.hero-domain-first .hero-link span,
.hero-domain-first .hero-audit::after,
.domain-journey-cta span {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  font-size: 0;
}
.hero-domain-first .hero-audit {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 46px;
  border-bottom: 1px solid #f6fff080;
  color: #f2f7ed;
  font-size: 12px;
}
.hero-proofline {
  display: flex;
  flex-wrap: wrap;
  gap: 11px 23px;
  margin-top: 60px;
  color: #b3c0ae;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .11em;
}
.hero-proofline span:not(:last-child)::after {
  content: "/";
  margin-left: 23px;
  color: #aaf47891;
}
.signal-orb {
  position: absolute;
  top: 18%;
  left: 47%;
  z-index: 0;
  width: clamp(310px, 38vw, 650px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 85deg at 50% 50%, #f7fff0 0%, #8dc284 8%, #101d16 22%, #6f8474 39%, #e0eedc 48%, #1b3226 59%, #53735c 77%, #eef8e5 90%, #f7fff0 100%);
  box-shadow: inset -28px -35px 65px #020704ba, inset 22px 25px 35px #fff9, 0 0 100px #aaf47829;
  opacity: .76;
  transform: translateZ(0);
  pointer-events: none;
}
.signal-orb::before {
  content: "";
  position: absolute;
  inset: -8%;
  border: 1px solid #c6ffd56b;
  border-radius: 50%;
  transform: rotate(-26deg) scaleY(.38);
  box-shadow: 0 0 30px #aaf47830;
}
.signal-orb::after {
  content: "";
  position: absolute;
  inset: 22% 15% auto auto;
  width: 30%;
  height: 18%;
  border-radius: 50%;
  background: #fff9;
  filter: blur(27px);
  transform: rotate(-24deg);
}
.signal-orb-core {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e8f7e0a1, #1c3d2d96 28%, #020b07d6 58%, #98ce97 96%);
  box-shadow: inset 0 0 20px #efffeaaa, 0 0 25px #06120a55;
}
.hero-domain-card {
  position: relative;
  width: 100%;
  min-height: 440px;
  padding: clamp(28px, 3vw, 46px);
  overflow: hidden;
  border: 1px solid #b4eba849;
  border-radius: 4px;
  background: linear-gradient(145deg, #17261fde, #0c1611ec 48%, #0c130fed);
  color: #f4f9f0;
  box-shadow: 0 38px 100px #000a, 0 0 75px #aaf47815;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.hero-domain-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, #b6ff8a24, transparent 45%);
  pointer-events: none;
}
.hero-domain-card > * { position: relative; }
.hero-domain-card .hero-card-top {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin: 0 0 37px;
  color: #a9c39d;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
}
.hero-card-top b { padding: 0 6px; color: #aaf478; }
.hero-domain-card .hero-card-top strong { color: #bdf99f; font-size: 9px; }
.hero-domain-card .hero-card-top i { background: var(--signal-green); box-shadow: 0 0 14px var(--signal-green); }
.hero-domain-first .hero-card-title {
  margin-bottom: 31px;
  font-size: clamp(32px, 3vw, 49px);
  font-weight: 550;
  letter-spacing: -.07em;
  line-height: 1.06;
}
.hero-domain-first .hero-card-title span { color: var(--signal-green); }
.hero-domain-card .hero-tool-tabs { gap: 30px; margin-bottom: 25px; border-color: #e5f5e135; }
.hero-domain-card .hero-tool-tabs button { color: #b8c5b4; font-size: 11px; }
.hero-domain-card .hero-tool-tabs button[aria-selected=true] { color: #f3fff0; }
.hero-domain-card .hero-tool-tabs button[aria-selected=true]::after { background: var(--signal-green); }
.hero-domain-card form > label:first-child { color: #eaf2e7; font-size: 11px; font-weight: 600; }
.hero-domain-card .hero-url-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  border-color: #aaf47870;
}
.hero-domain-card .hero-url-control input { height: 64px; color: #f6fff2; font-size: 20px; }
.hero-domain-card .hero-url-control input::placeholder { color: #9ba99b; }
.hero-domain-card .hero-url-control button {
  min-height: 52px;
  align-self: center;
  padding: 0 18px;
  background: var(--signal-green);
  color: #0c130d;
  font-size: 11px;
  font-weight: 800;
}
.hero-domain-card .hero-url-control button:hover { background: #ceffae; color: #0c130d; }
.hero-domain-card .hero-domain-note { margin-top: 13px; color: #b7c5b3; font-size: 11px; }
.hero-domain-card .hero-url-status { color: #ffb6a4; }
.hero-domain-card .hero-domain-result { border-color: #e5f5e135; }
.hero-domain-card .hero-domain-result > span { color: var(--signal-green); }
.hero-domain-card .hero-domain-result p { color: #c8d6c3; }
.hero-domain-card .hero-domain-result #home-domain-plan { background: var(--signal-green); color: #0a0f0c; font-weight: 700; }
.hero-domain-card .home-domain-options { border-color: #e5f5e135; }
.hero-domain-card .home-domain-options::before { color: #a5b5a1; }
.hero-domain-card .home-domain-option { border-color: #e5f5e125; color: #f4f9f0; }
.hero-domain-card .home-domain-option:hover { background: #aaf47812; border-color: #aaf47875; }
.hero-domain-card .home-domain-option span { color: #b5c1af; }
.hero-domain-card .home-domain-option[data-state=possibly-available] span { color: var(--signal-green); }
.hero-domain-card .home-domain-option[data-state=registered] span,
.hero-domain-card .home-domain-option[data-state=unknown] span,
.hero-domain-card .home-domain-option[data-state=unsupported] span { color: #e1b4a8; }
.hero-domain-card .hero-url-permission { color: #b7c5b3; }
.hero-domain-card .hero-url-permission a { color: #e2f9d8; }
.hero-domain-card .hero-card-foot {
  margin-top: 35px;
  padding-top: 18px;
  border-top-color: #e5f5e135;
  color: #99ae96;
  font-size: 9px;
}
.hero-domain-card .hero-card-foot span::before { content: "●"; margin-right: 8px; color: var(--signal-green); font-size: 6px; vertical-align: 2px; }
.hero-domain-first .hero-scroll-note { color: #b4c3b0; }
.hero-domain-first .hero-scroll-note a { border-color: #aaf478aa; }
.signal-marquee {
  overflow: hidden;
  border-top: 1px solid #b7ff9250;
  border-bottom: 1px solid #b7ff9250;
  background: #aaf478;
  color: #101b11;
  font-size: clamp(14px, 1.6vw, 23px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}
.signal-marquee-track { display: flex; width: max-content; animation: signal-ticker 33s linear infinite; }
.signal-marquee-track > span { display: inline-block; flex: 0 0 auto; padding: 21px 0 20px; white-space: nowrap; }
.signal-marquee i { padding: 0 24px; font-style: normal; font-size: .8em; }
@keyframes signal-ticker { to { transform: translateX(-50%); } }
.domain-journey {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(55px, 10vw, 160px);
  padding: clamp(90px, 10vw, 150px) var(--space);
  background: #e7ebe2;
  color: #111b13;
}
.domain-journey .eyebrow { margin-bottom: 24px; color: #4d6e4d; font-weight: 700; }
.domain-journey h2 { font-size: clamp(51px, 6vw, 98px); }
.domain-journey h2 span { color: #477f43; }
.domain-journey-intro > p:not(.eyebrow) { color: #3c5140; }
.domain-journey-cta { background: #111b13; color: #f7fff2; }
.domain-journey-cta:hover { background: #28462d; }
.domain-journey-steps { border-color: #172b1a55; }
.domain-journey-steps li { grid-template-columns: 75px minmax(0, 1fr); padding: 28px 0; border-color: #172b1a55; }
.domain-step-number {
  display: block;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: #478549;
  font-size: clamp(28px, 3vw, 45px);
  font-weight: 550;
  letter-spacing: -.07em;
  line-height: 1;
}
.domain-journey-steps strong { font-size: clamp(18px, 2vw, 28px); font-weight: 600; letter-spacing: -.04em; }
.domain-journey-steps p { color: #536657; }
@media (prefers-reduced-motion: no-preference) {
  .signal-orb { animation: signal-orb-float 12s ease-in-out infinite alternate; }
  .signal-orb-core { animation: signal-orb-turn 18s linear infinite; }
  @keyframes signal-orb-float { to { transform: translateY(-22px) rotate(9deg); } }
  @keyframes signal-orb-turn { to { transform: rotate(360deg); } }
}
@media (max-width: 1100px) {
  .hero-domain-first .hero-bottom { grid-template-columns: minmax(0, 1fr) minmax(380px, .9fr); gap: 32px; }
  .hero-domain-first h1 { font-size: clamp(53px, 6.5vw, 78px); }
  .hero-domain-card { padding: 28px; }
  .hero-domain-card .hero-url-control { grid-template-columns: minmax(0, 1fr); border-bottom: 0; }
  .hero-domain-card .hero-url-control input { border-bottom: 1px solid #aaf47870; }
  .hero-domain-card .hero-url-control button { width: 100%; justify-content: space-between; }
}
@media (max-width: 767px) {
  .hero-domain-first { display: block; min-height: 0; max-height: none; padding: 105px 19px 60px; }
  .hero-domain-first::before { top: 15%; left: -6%; font-size: 38vw; }
  .hero-domain-first::after { background: linear-gradient(#07100bd9, #07100bde), radial-gradient(circle at 70% 36%, #aaf47815, transparent 48%); }
  .hero-domain-first .hero-bottom { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; width: 100%; }
  .hero-domain-first .hero-kicker { margin-bottom: 17px; font-size: 9px; letter-spacing: .12em; }
  .hero-domain-first h1 { font-size: clamp(49px, 12vw, 70px); }
  .hero-domain-first .hero-lead { margin-top: 18px; font-size: 14px; line-height: 1.58; }
  .hero-domain-first .hero-actions { gap: 8px 20px; margin-top: 20px; }
  .hero-domain-first .hero-link { min-height: 51px; width: 100%; }
  .hero-domain-first .hero-audit { display: none; }
  .hero-proofline { display: none; }
  .hero-proofline span:not(:last-child)::after { margin-left: 12px; }
  .signal-orb { top: 13%; left: 30%; width: 310px; opacity: .34; }
  .hero-domain-card { min-height: 0; padding: 19px 18px 19px; }
  .hero-domain-card .hero-card-top { margin-bottom: 17px; font-size: 8px; }
  .hero-domain-first .hero-card-title { margin-bottom: 17px; font-size: clamp(30px, 8.5vw, 42px); }
  .hero-domain-card .hero-tool-tabs { gap: 21px; margin-bottom: 13px; }
  .hero-domain-card .hero-tool-tabs button { font-size: 11px; }
  .hero-domain-card .hero-url-control { grid-template-columns: minmax(0, 1fr); }
  .hero-domain-card .hero-url-control input { height: 52px; font-size: 17px; }
  .hero-domain-card .hero-url-control button { width: 100%; min-height: 51px; margin-top: 7px; }
  .hero-domain-card .hero-domain-note { font-size: 10px; }
  .hero-domain-card .hero-card-foot { grid-template-columns: 1fr; gap: 8px; margin-top: 22px; }
  .hero-domain-first .hero-scroll-note { display: none; }
  .signal-marquee-track > span { padding: 17px 0 16px; }
  .signal-marquee i { padding: 0 15px; }
  .domain-journey { grid-template-columns: minmax(0, 1fr); gap: 42px; padding: 78px 22px; }
  .domain-journey h2 { font-size: clamp(50px, 11.5vw, 67px); }
  .domain-journey-steps li { grid-template-columns: 60px minmax(0, 1fr); padding: 22px 0; }
  .domain-step-number { font-size: 32px; }
  .domain-journey-steps strong { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .signal-marquee-track { animation: none; }
  .signal-orb, .signal-orb-core { animation: none; }
  .hero-domain-first .hero-link { transition: none; }
}