/* RoderStudio design system — recurring rules only.
   Scene backgrounds, laptop materials, effects and motion keep their own values. */
@font-face {
  font-family: "Inter";
  src: url("vendor/inter-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --rs-font-body: "Inter", Arial, sans-serif;
  --rs-font-display: "Plus Jakarta Sans", "Inter", Arial, sans-serif;
  --rs-ink: #172333;
  --rs-white: #ffffff;
  --rs-offwhite: #f8fbff;
  --rs-black: #000000;
  --rs-portfolio-black: #020307;
  --rs-night: #050914;
  --rs-flow-blue: #153a80;
  --rs-blue: #3b82f6;
  --rs-blue-light: #60a5fa;
  --rs-copy-dark: #516780;
  --rs-copy-light: #aab8cd;
  --rs-green: #10b981;
  --rs-gold: #f4d174;
  --rs-type-hero: clamp(3rem, 7vw, 6rem);
  --rs-type-cinematic: clamp(3rem, 7.7vw, 7.5rem);
  --rs-type-section: clamp(2.8rem, 5.4vw, 5rem);
  --rs-type-feature: clamp(2.5rem, 5vw, 5.5rem);
  --rs-type-body: 1rem;
  --rs-type-lead: clamp(1rem, 1.8vw, 1.22rem);
  --rs-type-kicker: .75rem;
}

/* Two clear roles: expressive headings; readable body and controls. */
body,
button,
input,
textarea,
select { font-family: var(--rs-font-body); }

.hero h1,
.services-heading,
.portfolio-intro h2,
.pg-heading h3,
.wc-intro h2,
#ueber-uns .section-header h2,
.flow-process h2,
#faq .section-header h2,
.contact-text h2 { font-family: var(--rs-font-display); font-weight: 900; }

.portfolio-intro h2,
#ueber-uns .section-header h2,
#faq .section-header h2,
.contact-text h2 { font-size: var(--rs-type-section); line-height: 1.04; letter-spacing: -.055em; }

.services-heading { font-size: var(--rs-type-cinematic); }
.pg-heading h3 { font-size: var(--rs-type-feature); }

.services-kicker,
.portfolio-intro .pre-title,
.pg-heading .pre-title,
.wc-kicker,
#ueber-uns .pre-title,
#faq .pre-title,
.footer-column h3 {
  font-family: var(--rs-font-body);
  font-size: var(--rs-type-kicker);
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.services-kicker,
.pg-heading .pre-title,
.portfolio-intro .pre-title,
.wc-kicker,
#ueber-uns .pre-title,
#faq .pre-title { color: var(--rs-blue-light); }
.portfolio-intro .pre-title,
.wc-kicker { color: var(--rs-blue); }

.services-intro,
.services-pill small,
.portfolio-intro .section-desc,
.pg-heading p,
.pg-main-info p,
.wc-reason p,
.flow-popup p,
.footer-brand p,
.footer-column > a,
.footer-cta,
.footer-badge { font-family: var(--rs-font-body); }

.services-intro,
.portfolio-intro .section-desc,
.pg-heading p { font-size: var(--rs-type-lead); line-height: 1.6; }
.services-intro { color: var(--rs-copy-light); }
.portfolio-intro .section-desc { color: var(--rs-copy-dark); }

.logo,
.footer-wordmark { font-family: var(--rs-font-body); }

@media (min-width: 601px) and (max-width: 900px) {
  .services-heading { font-size: clamp(3rem, 9vw, 5.5rem); }
}

@media (max-width: 600px) {
  .portfolio-intro h2,
  #ueber-uns .section-header h2,
  #faq .section-header h2,
  .contact-text h2 { font-size: clamp(2.3rem, 10vw, 3.3rem); }
  .services-heading { font-size: clamp(2.6rem, 11vw, 4.4rem); }
  .pg-heading h3 { font-size: clamp(2.2rem, 9vw, 3.35rem); }
  .services-intro,
  .portfolio-intro .section-desc,
  .pg-heading p { font-size: 1rem; }
}


/* The footer shares the exact color stops and angle of the flow introduction. */
:root {
  --rs-flow-background: radial-gradient(ellipse at 30% 26%, #153a80 0%, #07162f 45%, #030812 100%);
}
.flow-intro-page .flow-inner,
.footer { background: var(--rs-flow-background); }
.footer::before { background: none; }

/* Two identical groups form a seamless, endlessly moving service ribbon. */
.services-marquee-track { gap: 0; animation-duration: 100s; }
.services-heading > span { word-spacing: normal; }
.services-marquee-group {
  display: flex;
  align-items: center;
  gap: 3rem;
  flex: none;
  padding-right: 3rem;
}
@media (max-width: 600px) {
  .services-marquee-group { gap: 1.8rem; padding-right: 1.8rem; }
}