/* ============================================================================
   Rotocon public site — design tokens aligned with the SaaS / Cockpit system.
     Brand red:  #FF0000 · Brand dark: #403E3D · Cream: #F2F1ED · Beige: #C2BCB2
     Font: General Sans (Fontshare) · Inter fallback
   ============================================================================ */

@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');

:root {
  /* Brand tokens */
  --red:         #FF0000;
  --red-dark:    #B30000;
  --red-soft:    rgba(255, 0, 0, 0.12);
  --ink:         #403E3D;        /* brand dark — page text on light */
  --cream:       #F2F1ED;        /* brand paper */
  --beige:       #C2BCB2;        /* line strong */
  --line:        #D6D2C9;

  /* Light theme (default) — cream paper */
  --bg:          var(--cream);
  --bg-elev:     #FFFFFF;
  --surface:     #FFFFFF;
  --surface-2:   #E8E6DF;
  --text:        var(--ink);
  --text-muted:  #7A7670;
  --text-faint:  #9C9890;
  --border:      var(--line);
  --border-strong: var(--beige);

  --max-w: 1280px;
  --pad-x: clamp(16px, 4vw, 48px);
  --radius: 10px;

  font-family: "General Sans", "Inter", system-ui, -apple-system, "Segoe UI",
               Roboto, sans-serif;
}

[data-theme="dark"] {
  --bg:          #1E1C1A;
  --bg-elev:     #2C2825;
  --surface:     #2C2825;
  --surface-2:   #1A1816;
  --text:        #F1EFE9;
  --text-muted:  #ADA6A0;
  --text-faint:  #877F78;
  --border:      #3F3A35;
  --border-strong: #564F4A;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { background: var(--bg); color: var(--text); line-height: 1.5; }
body { font-feature-settings: "ss01" 1; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 600; letter-spacing: -0.015em; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }

/* Section header pattern — red accent rail (from saas) */
.section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.section-head::before {
  content: ""; display: inline-block;
  width: 32px; height: 4px;
  background: var(--red);
  border-radius: 2px;
}

/* Notification bar */
.notif-bar { background: var(--bg-elev); border-bottom: 1px solid var(--border); font-size: 0.875rem; }
.notif-content { max-width: var(--max-w); margin: 0 auto; padding: 10px var(--pad-x); display: flex; gap: 16px; align-items: center; color: var(--text-muted); }
.notif-cta { margin-left: auto; color: var(--red); font-weight: 600; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.hdr-inner { max-width: var(--max-w); margin: 0 auto; padding: 16px var(--pad-x); display: flex; align-items: center; gap: 32px; }
.logo-link .wordmark { font-weight: 600; letter-spacing: 0.16em; font-size: 1rem; color: var(--text); }
.primary-nav ul { display: flex; gap: 28px; }
.primary-nav a { font-size: 0.9rem; color: var(--text-muted); transition: color 0.15s; }
.primary-nav a:hover { color: var(--text); }
.hdr-utility { margin-left: auto; }
.lang-switch { display: flex; gap: 4px; font-size: 0.8rem; }
.lang-switch a { padding: 4px 8px; border-radius: 4px; color: var(--text-muted); }
.lang-switch .is-active { color: var(--text); background: var(--surface-2); }

main { max-width: var(--max-w); margin: 0 auto; padding: 32px var(--pad-x) 64px; }

/* StreamField rhythm */
.streamfield > .stream-block { margin: 56px 0; }
.streamfield > .stream-block:first-child { margin-top: 0; }

.page-eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.75rem; font-weight: 600; color: var(--red); margin-bottom: 12px; }
.page-hero { padding: 32px 0; border-bottom: 1px solid var(--border); margin-bottom: 32px; }
.page-intro { color: var(--text-muted); margin-top: 12px; max-width: 720px; font-size: 1.05rem; }
.page-article .rich-text p { margin: 1em 0; }

/* Slideshow / hero slide */
.slideshow { display: grid; gap: 16px; }
.hero-slide { position: relative; aspect-ratio: 16 / 7; background-size: cover; background-position: center; border-radius: var(--radius); overflow: hidden; }
.hero-slide__inner { position: absolute; inset: auto 0 0 0; padding: 48px var(--pad-x); background: linear-gradient(transparent, rgba(11, 11, 15, 0.78)); }
.hero-slide__inner h2 { color: #fff; max-width: 720px; }
.hero-slide__sub { color: rgba(255, 255, 255, 0.85); margin-top: 8px; max-width: 720px; }
.hero-slide__legal { display: block; margin-top: 12px; font-size: 0.75rem; color: rgba(255, 255, 255, 0.7); }

/* CTAs */
.cta { display: inline-block; padding: 12px 22px; border-radius: 8px; font-weight: 600; font-size: 0.9rem; transition: background 0.15s, color 0.15s; margin-top: 16px; }
.cta--solid   { background: var(--red); color: #fff; }
.cta--solid:hover   { background: var(--red-dark); }
.cta--ghost   { background: rgba(255, 255, 255, 0.12); color: #fff; backdrop-filter: blur(6px); }
.cta--ghost:hover   { background: rgba(255, 255, 255, 0.2); }
.cta--outline { border: 1px solid currentColor; color: #fff; }
.cta--outline:hover { background: rgba(255, 255, 255, 0.08); }

/* Teasers */
.teaser-grid h2 { margin-bottom: 24px; }
.teaser-grid__items { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.teaser { display: block; position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.teaser img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.teaser:hover img { transform: scale(1.04); }
.teaser__caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); color: #fff; font-weight: 600; }

/* Product card / grid */
.product-grid h2 { margin-bottom: 24px; }
.product-grid__items { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.product-card { background: var(--surface); border-radius: var(--radius); overflow: hidden; padding-bottom: 16px; border: 1px solid var(--border); transition: border-color 0.15s, transform 0.15s; }
.product-card:hover { border-color: var(--red); transform: translateY(-2px); }
.product-card img { aspect-ratio: 16 / 10; object-fit: cover; }
.product-card h3 { padding: 16px 16px 4px; }
.product-card__tagline { padding: 0 16px; color: var(--text-muted); font-size: 0.9rem; }
.product-card__badges { display: flex; gap: 6px; padding: 12px 16px 0; flex-wrap: wrap; }
.product-card__badges li { background: var(--red-soft); color: var(--red); padding: 2px 8px; border-radius: 99px; font-size: 0.75rem; font-weight: 600; }

/* Shop banner */
.shop-banner { position: relative; aspect-ratio: 16 / 6; background-size: cover; background-position: center; border-radius: var(--radius); overflow: hidden; display: flex; align-items: center; }
.shop-banner__inner { padding: 48px var(--pad-x); background: linear-gradient(90deg, rgba(0, 0, 0, 0.7), transparent); width: 100%; max-width: 600px; }
.shop-banner__inner h2 { color: #fff; }
.shop-banner__eyebrow { color: var(--red); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; font-weight: 600; }

/* Finder */
.finder { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--border); }
.finder__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.finder__body { padding: 32px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.finder__ctas { display: flex; gap: 12px; }
@media (max-width: 768px) { .finder { grid-template-columns: 1fr; } }

/* Feature video */
.feature-video { border-radius: var(--radius); overflow: hidden; }
.feature-video video, .feature-video img { width: 100%; }
.feature-video figcaption { color: var(--text-muted); font-size: 0.875rem; padding: 12px 0; }

/* Post lists (blog/news) */
.post-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.post-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; transition: border-color 0.15s; }
.post-card:hover { border-color: var(--red); }
.post-card h2 { font-size: 1.2rem; margin: 8px 0; }
.post-card time { font-size: 0.8rem; color: var(--text-muted); font-feature-settings: "tnum" 1; }
.legal-list li { padding: 12px 0; border-bottom: 1px solid var(--border); }

/* Footer */
.site-footer { background: var(--bg-elev); border-top: 1px solid var(--border); margin-top: 64px; }
.ftr-grid { max-width: var(--max-w); margin: 0 auto; padding: 48px var(--pad-x); display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; }
.ftr-col h4 { margin-bottom: 12px; }
.ftr-col ul li { padding: 4px 0; }
.ftr-col a { color: var(--text-muted); font-size: 0.875rem; transition: color 0.15s; }
.ftr-col a:hover { color: var(--red); }
.ftr-newsletter p { color: var(--text-muted); font-size: 0.875rem; margin-bottom: 12px; }
.newsletter-form { display: flex; gap: 8px; }
.newsletter-form input[type=email] { flex: 1; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text); font: inherit; }
.newsletter-form input[type=email]:focus { border-color: var(--red); outline: 2px solid var(--red-soft); }
.newsletter-form button { padding: 10px 18px; background: var(--red); color: #fff; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; }
.newsletter-form button:hover { background: var(--red-dark); }
.ftr-bottom { max-width: var(--max-w); margin: 0 auto; padding: 16px var(--pad-x); border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.8rem; }