@import url("fonts.css");

/* ============================================================
   Darkbane Media — Design System
   Display: Bricolage Grotesque · Body: Manrope · Mono accents: JetBrains Mono
   ============================================================ */

:root{
  --bg: #08090b;
  --bg-2: #0c0d10;
  --surface: rgba(255,255,255,0.045);
  --surface-hover: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.20);
  --text: #f5f5f7;
  --muted: rgba(245,245,247,0.66);
  --muted-2: rgba(245,245,247,0.42);

  --red: #a41217;
  --red-2: #d51d24;
  --red-soft: rgba(213,29,36,0.16);
  --on-red: #ffffff;

  --shadow: 0 20px 50px rgba(0,0,0,0.40);
  --shadow-strong: 0 28px 80px rgba(0,0,0,0.55);
  --shadow-red: 0 18px 40px rgba(164,18,23,0.32);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-full: 999px;

  --container: 1200px;
  --font-display: "Bricolage Grotesque", "Manrope", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: var(--font-body);
  background:
    radial-gradient(1100px 620px at 12% -6%, rgba(164,18,23,0.16), transparent 62%),
    radial-gradient(900px 560px at 104% 12%, rgba(213,29,36,0.07), transparent 60%),
    linear-gradient(180deg, #07080a 0%, #0a0b0e 55%, #08090b 100%);
  color:var(--text);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; }

.container{ width:min(var(--container), calc(100% - 40px)); margin-inline:auto; }
.narrow{ width:min(760px, 100%); margin-inline:auto; }

/* ---------- fixed grain layer (texture, not decoration-per-scroll) ---------- */
.grain{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:0.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ================= Typography ================= */

h1,h2,h3{
  font-family: var(--font-display);
  margin:0 0 14px;
  line-height:1.06;
  letter-spacing:-0.02em;
  font-weight:700;
}

h1{ font-size:clamp(2.5rem, 4.4vw, 4rem); letter-spacing:-0.03em; }
h2{ font-size:clamp(1.7rem, 2.6vw, 2.35rem); }
h3{ font-size:1.2rem; margin-bottom:8px; }

p{ margin:0 0 14px; }

.lead{
  font-size:1.12rem;
  color:var(--muted);
  max-width:56ch;
  line-height:1.6;
}

.body-copy,
.center-copy p,
.legal-card p,
.feature-card p,
.service-card p,
.portfolio-card p,
.contact-card p,
.glass-card p,
.process-row p{
  color:var(--muted);
}

.muted{ color:var(--muted); }

.label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--font-mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(255,183,185,0.9);
  margin:0 0 14px;
}

.label::before{
  content:"";
  width:16px;
  height:1px;
  background: linear-gradient(90deg, var(--red-2), transparent);
}

/* legacy alias kept for markup compatibility */
.eyebrow,
.section-kicker{
  display:inline-block;
  font-family: var(--font-mono);
  color:#ffb7b9;
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0 0 14px;
}

/* ================= Header / Nav ================= */

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  background: rgba(7,8,10,0.78);
  border-bottom:1px solid rgba(255,255,255,0.07);
}

.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:92px;
  gap:24px;
  padding-left:0;
  padding-right:88px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  min-width:0;
}

.brand-mark{position:relative;display:block;flex:0 0 104px;width:104px;height:68px;overflow:hidden;}
.brand-mark img{position:absolute;top:0;left:50%;width:150%;max-width:none;height:auto;transform:translateX(-50%);}
.brand-name{color:var(--text);font-family:var(--font-body);font-size:1rem;font-weight:700;letter-spacing:-.02em;white-space:nowrap;}

.nav{
  display:flex;
  align-items:center;
  gap:6px;
}

.nav a{
  position:relative;
  color:var(--muted);
  font-weight:600;
  font-size:.92rem;
  padding:8px 12px;
  border-radius:var(--radius-full);
  transition: color 180ms var(--ease), background 180ms var(--ease);
  white-space:nowrap;
}

.nav a:hover{
  color:#fff;
  background: rgba(255,255,255,0.06);
}

.nav a.active{
  color:#fff;
  background: var(--red-soft);
}

.burger{
  display:none;
  border:0;
  background:transparent;
  width:44px;
  height:44px;
  padding:0;
  cursor:pointer;
  flex-shrink:0;
}

.burger span{
  display:block;
  width:22px;
  height:2px;
  margin:5px auto;
  background:#fff;
  border-radius:999px;
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}

.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ================= Hero ================= */

.hero,
.page-hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.hero{ padding:110px 0 64px; }
.page-hero{ padding:98px 0 40px; }
.page-hero__content{ max-width:760px; }

.hero-grid,
.split-grid{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:40px;
  align-items:center;
}

.hero-copy,
.hero-card{ position:relative; z-index:1; }

.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(640px 420px at 12% 8%, rgba(164,18,23,0.26), transparent 60%),
    radial-gradient(560px 400px at 92% 6%, rgba(255,255,255,0.045), transparent 62%);
}

.trustline{
  margin:22px 0 0;
  color:var(--muted-2);
  font-size:.88rem;
}

.hero-actions,
.cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}

/* who-we-help strip: chips, not a bulleted list buried in the hero */
.audience-strip{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:24px 0 0;
  padding:0;
  list-style:none;
}

.audience-strip li{
  font-size:.86rem;
  font-weight:600;
  color:var(--text);
  padding:8px 16px;
  border-radius:var(--radius-full);
  background:var(--surface);
  border:1px solid var(--border);
}

/* ================= Buttons ================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 24px;
  border-radius:var(--radius-full);
  font-weight:700;
  font-size:.95rem;
  border:1px solid transparent;
  white-space:nowrap;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), background 200ms var(--ease), border-color 200ms var(--ease);
}

.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0) scale(0.98); }

.btn-primary{
  background: linear-gradient(135deg, var(--red-2), var(--red));
  color:#fff;
  box-shadow: var(--shadow-red);
}

.btn-primary:hover{ box-shadow: 0 22px 48px rgba(164,18,23,0.42); }

.btn-secondary{
  background: rgba(255,255,255,0.03);
  color:#fff;
  border-color: var(--border-strong);
}

.btn-secondary:hover{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.32);
}

.discord-btn{ border-color:#5865F2; color:#c7cdff; }
.discord-btn:hover{ background:#5865F2; color:#fff; box-shadow:0 0 20px rgba(88,101,242,0.45); }

.whatsapp-btn{ border-color:#25D366; color:#8beeb2; }
.whatsapp-btn:hover{ background:#25D366; color:#08120c; box-shadow:0 0 20px rgba(37,211,102,0.4); }

/* ================= Cards ================= */

.glass-card,
.feature-card,
.service-card,
.portfolio-card,
.legal-card,
.contact-card,
.cta-box{
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.03));
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.glass-card,
.feature-card,
.service-card,
.portfolio-card,
.legal-card,
.contact-card{ padding:32px; }

.hero-card-top{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:18px;
}

.mini-badge,
.card-tag{
  display:inline-flex;
  align-items:center;
  border-radius:var(--radius-full);
  padding:7px 13px;
  font-size:.74rem;
  font-weight:700;
  font-family: var(--font-mono);
  letter-spacing:.02em;
  background: rgba(255,255,255,0.06);
  border:1px solid var(--border);
  color:#fff;
}

.mini-badge-red,
.card-tag{ background: var(--red-soft); border-color: rgba(213,29,36,0.35); }

.feature-card,
.service-card,
.portfolio-card,
.glass-card,
.contact-card{
  transition: transform 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}

.feature-card:hover,
.service-card:hover,
.portfolio-card:hover,
.glass-card:hover,
.contact-card:hover{
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-strong);
}

/* ================= Sections ================= */

.section{ padding:40px 0 64px; }

.section-alt{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.008));
  border-top:1px solid rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(255,255,255,0.05);
}

.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:32px;
}

.card-grid{ display:grid; gap:20px; }
.two-col{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.three-col{ grid-template-columns:repeat(3, minmax(0,1fr)); }

.clean-list{ list-style:none; padding:0; margin:18px 0 0; }

.clean-list li{
  position:relative;
  padding-left:20px;
  margin-bottom:10px;
  color:var(--text);
  font-size:.94rem;
}

.clean-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:7px;
  height:7px;
  border-radius:999px;
  background: linear-gradient(135deg, var(--red), var(--red-2));
}

.info-stack > div + div{
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.07);
}

.cta-section{ padding-bottom:80px; }

.cta-box{
  padding:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.center-copy{ text-align:center; }

.contact-list p + p,
.legal-card h2 + p,
.legal-card p + h2{ margin-top:20px; }

.legal-wrap{ width:min(880px, 100%); margin-inline:auto; }
.legal-card--wide{ padding:40px; }

.legal-section + .legal-section{
  margin-top:34px;
  padding-top:34px;
  border-top:1px solid rgba(255,255,255,0.07);
}

.legal-section h2{ font-size:1.25rem; }

.legal-card ul{
  margin:0 0 14px;
  padding-left:20px;
  color:var(--muted);
}

.legal-card li{ margin-bottom:6px; }

.cta-subline{
  margin:6px 0 14px;
  font-size:1rem;
  color:var(--muted);
  font-weight:600;
}

/* ================= Process rows (replaces repeated card grids) ================= */

.process-list{
  display:flex;
  flex-direction:column;
}

.process-row{
  display:grid;
  grid-template-columns:80px 1.1fr 1fr;
  gap:32px;
  align-items:start;
  padding:32px 4px;
  border-top:1px solid rgba(255,255,255,0.08);
  transition: background 200ms var(--ease);
}

.process-list .process-row:last-child{ border-bottom:1px solid rgba(255,255,255,0.08); }

.process-row:hover{ background: rgba(255,255,255,0.02); }

.process-num{
  font-family: var(--font-mono);
  font-size:1rem;
  color: var(--muted-2);
  padding-top:4px;
}

.process-row h3{ font-size:1.28rem; margin-bottom:10px; }

/* ================= Stat row ================= */

.stat-row{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1px;
  background: rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  overflow:hidden;
}

.stat{
  background: var(--bg-2);
  padding:28px 24px;
}

.stat-num{
  font-family: var(--font-display);
  font-size:clamp(1.8rem, 3vw, 2.4rem);
  font-weight:700;
  color:#fff;
  letter-spacing:-0.02em;
}

.stat-label{
  margin-top:6px;
  font-size:.86rem;
  color:var(--muted);
}

/* ================= Marquee (used once per page, max) ================= */

.marquee{
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,0.07);
  border-bottom:1px solid rgba(255,255,255,0.07);
  padding:20px 0;
}

.marquee-track{
  display:flex;
  width:max-content;
  gap:48px;
  animation: marquee 34s linear infinite;
}

.marquee-track span{
  font-family: var(--font-display);
  font-size:1.3rem;
  font-weight:600;
  color: var(--muted-2);
  white-space:nowrap;
}

.marquee-track span::after{
  content:"/";
  margin-left:48px;
  color: rgba(213,29,36,0.5);
}

@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ================= Contact form ================= */

.contact-form{ display:grid; gap:14px; }

.contact-form label{
  font-weight:700;
  font-size:.88rem;
  color:var(--muted);
}

.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.045);
  color:#fff;
  padding:14px 16px;
  font:inherit;
  outline:none;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{ color: rgba(245,245,247,0.38); }

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  border-color: var(--red-2);
  box-shadow: 0 0 0 4px rgba(213,29,36,0.16);
}

.hp-field{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.form-status{
  min-height:1.3em;
  margin:2px 0 0;
  font-size:.88rem;
  font-weight:600;
}

.form-status--pending{ color:var(--muted); }
.form-status--success{ color:#8beeb2; }
.form-status--error{ color:#ff9b9e; }

select{
  background: linear-gradient(180deg, #101216, #0a0b0d);
  color:#fff;
  border:1px solid rgba(255,255,255,0.16);
  border-radius:var(--radius-sm);
  padding:10px;
}

select option{ background:#101216; color:#fff; }

/* ================= Footer ================= */

.site-footer{
  margin-top:80px;
  border-top:1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.22);
  position:relative;
  z-index:1;
}

.footer-wrap{
  display:grid;
  grid-template-columns:1fr 1.35fr 0.72fr;
  gap:28px;
  padding:48px 0 32px;
  align-items:start;
}

.footer-brand{ display:flex; flex-direction:column; gap:10px; }

.footer-brand strong{
  font-family: var(--font-display);
  font-size:1.05rem;
  letter-spacing:-0.01em;
}

.footer-tagline{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
  padding:0;
  list-style:none;
}

.footer-tagline li{
  font-size:.78rem;
  color:var(--muted-2);
  padding:5px 10px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-full);
}

.footer-social{ text-align:center; }

.footer-social h3{
  margin-bottom:18px;
  color: rgba(255,255,255,0.9);
  font-size:1.02rem;
  font-family: var(--font-display);
}

.social-group{ margin-bottom:20px; }
.social-group strong{ display:inline-block; margin-bottom:6px; font-size:.9rem; }

.social-group a{
  display:inline-block;
  margin:2px 8px;
  font-size:.86rem;
  color: rgba(255,255,255,0.68);
  position:relative;
  transition: color 200ms var(--ease);
}

.social-group a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:0;
  height:1px;
  background: var(--red-2);
  transition: width 250ms var(--ease);
}

.social-group a:hover{ color:#fff; }
.social-group a:hover::after{ width:100%; }
.social-group a.twitch{ color:#b07cff; }

.music-note{ margin-top:18px; font-size:.8rem; line-height:1.6; }

.footer-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}

.footer-meta a{
  color:var(--muted);
  font-size:.88rem;
  transition: color 180ms var(--ease);
}

.footer-meta a:hover{ color:#fff; }

.footer-bottom{
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,0.05);
  font-size:.78rem;
  color: var(--muted-2);
  text-align:center;
}

/* ================= Team / about ================= */

.team-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:56px;
  align-items:center;
}

.team-image{
  width:100%;
  aspect-ratio:4/5;
  background: rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-lg);
  overflow:hidden;
}

.portrait-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ================= Scroll reveal ================= */

.reveal{
  opacity:0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

.reveal.is-visible{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .marquee-track{ animation:none; }
  .btn:hover{ transform:none; }
}

/* ================= Responsive ================= */

@media (max-width: 980px){
  .hero-grid,
  .split-grid,
  .two-col,
  .three-col,
  .team-grid,
  .stat-row{ grid-template-columns:1fr; }

  .stat-row{ gap:1px; }

  .cta-box{ flex-direction:column; align-items:flex-start; }

  .process-row{ grid-template-columns:1fr; gap:8px; }
  .process-num{ padding-top:0; }

  .nav-wrap{ padding-left:0; padding-right:0; }

  .nav{
    position:absolute;
    top:74px;
    left:16px;
    right:16px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    padding:14px;
    background: rgba(8,9,11,0.97);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:var(--radius-md);
    box-shadow: var(--shadow-strong);
  }

  .nav a{ padding:12px 14px; }
  .nav.nav-open{ display:flex; }
  .burger{ display:block; }

  .footer-wrap{ grid-template-columns:1fr; text-align:center; gap:28px; }
  .footer-brand{ align-items:center; }
  .footer-tagline{ justify-content:center; }
  .footer-meta{ align-items:center; }
}

@media (max-width: 640px){
  h1{ font-size:2.15rem; }

  .glass-card,
  .feature-card,
  .service-card,
  .portfolio-card,
  .legal-card,
  .contact-card,
  .cta-box{ padding:24px; }

  .hero{ padding:56px 0 44px; }
  .page-hero{ padding:52px 0 28px; }
  .nav-wrap{ padding-left:0; }
}

/* ================= Darkbane Media evolution ================= */
:focus-visible{ outline:2px solid #ffb7b9; outline-offset:4px; border-radius:4px; }
.home-hero{ padding:122px 0 82px; }
.home-hero h1{ font-size:clamp(3.6rem, 9vw, 7.8rem); line-height:.82; letter-spacing:-.075em; margin:20px 0 18px; }
.accent-text{ color:#d51d24; }
.home-claim{ font:600 clamp(1.15rem,2vw,1.55rem) var(--font-display); letter-spacing:.01em; margin-bottom:14px; }
.service-line{ color:#fff; font-size:.9rem; font-weight:700; letter-spacing:.03em; }
.home-hero .hero-card{ padding:38px; }
.text-link{ color:#ffb7b9; font-weight:700; font-size:.9rem; }
.text-link:hover{ color:#fff; }
.section-head h2{ max-width:19ch; }
.service-index{ display:block; color:#ffb7b9; font:500 .68rem var(--font-mono); letter-spacing:.12em; margin-bottom:20px; }
.feature-card h3{ margin-bottom:12px; }
.feature-card p{ color:var(--muted); }
.feature-card .text-link{ display:inline-block; margin-top:12px; }
.division-grid{ gap:14px; }
.division-card{ display:flex; gap:22px; align-items:flex-start; padding:28px; border:1px solid var(--border); border-radius:var(--radius-lg); background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.018)); transition:transform 220ms var(--ease),border-color 220ms var(--ease),background 220ms var(--ease); }
.division-card:hover{ transform:translateY(-3px); border-color:rgba(213,29,36,.55); background:linear-gradient(135deg,rgba(164,18,23,.15),rgba(255,255,255,.025)); }
.division-no{ color:#ffb7b9; font:500 .75rem var(--font-mono); padding-top:6px; }
.division-card h3{ font-size:1.35rem; }
.division-card p{ color:var(--muted); margin:0 0 14px; }
.work-note{ display:flex; gap:20px; align-items:center; margin-top:22px; padding:24px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); }
.work-note p{ margin:0; color:var(--muted); }
.work-mark{ display:grid; place-items:center; width:50px; height:50px; flex:0 0 50px; border-radius:14px; background:var(--red-soft); color:#ffb7b9; font:700 .86rem var(--font-mono); }
.product-category{ padding:28px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); }
.product-category>span{ color:#ffb7b9; font:500 .7rem var(--font-mono); }
.product-category h3{ margin-top:24px; }
.product-category p{ color:var(--muted); min-height:3.5em; }
.product-category a{ color:#ffb7b9; font-weight:700; font-size:.88rem; }
.tech-band{ display:flex; justify-content:space-between; align-items:center; gap:40px; padding:44px; border:1px solid var(--border); border-radius:var(--radius-lg); background:radial-gradient(ellipse at 90% 20%,rgba(164,18,23,.15),transparent 55%),var(--surface); }
.tech-band h2{ max-width:17ch; }
.tech-band .lead{ margin-bottom:0; }
.standard-grid{ display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.standard-grid span{ padding:18px 12px; text-align:center; font-size:.85rem; font-weight:700; background:rgba(255,255,255,.025); }
.standard-grid span+span{ border-left:1px solid var(--border); }
.standard-note{ margin:18px 0 0; }
.footer-columns{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.footer-columns h3{ font:700 .85rem var(--font-body); color:#fff; margin:0 0 12px; }
.footer-columns a{ display:block; width:max-content; max-width:100%; color:var(--muted); font-size:.82rem; margin:8px 0; }
.footer-columns a:hover{ color:#fff; }
.footer-claim{ color:var(--muted); font-size:.86rem; }
.footer-social-home{ display:flex; gap:40px; padding:0 0 20px; }
.footer-social-home .social-group{ margin:0; }
.page-hero__content h1{ max-width:18ch; }
.catalog-controls{ display:flex; gap:16px; margin:0 0 18px; }
.catalog-controls label{ display:grid; gap:8px; color:var(--muted); font-size:.85rem; font-weight:700; }
.catalog-controls select{ min-width:220px; min-height:46px; padding:0 14px; color:var(--text); background:#111216; border:1px solid var(--border-strong); border-radius:10px; font:inherit; }
.catalog-controls option{ background:#111216; }
.product-grid{ min-height:180px; }
.catalog-empty{ grid-column:1/-1; padding:36px; text-align:center; border:1px dashed var(--border-strong); border-radius:var(--radius-lg); }
.catalog-empty h2{ font-size:1.3rem; }
.catalog-empty p{ color:var(--muted); margin:0; }
.lab-page,.lab-project{ background:radial-gradient(ellipse at 85% 0%,rgba(164,18,23,.14),transparent 45%),linear-gradient(180deg,#090a0d,#0c0d12); }
.lab-project{ padding:36px; border:1px solid rgba(213,29,36,.3); border-radius:var(--radius-lg); box-shadow:var(--shadow-strong); }
.lab-project-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.lab-project h2{ margin:30px 0 4px; font-size:clamp(2.5rem,6vw,4.5rem); letter-spacing:.04em; }
.lab-expansion{ color:#ffb7b9; font:500 .82rem var(--font-mono); letter-spacing:.08em; }
.lab-project .lead{ max-width:70ch; }
.lab-meta{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:30px 0; }
.lab-meta div{ padding:16px; border:1px solid var(--border); border-radius:12px; background:rgba(0,0,0,.18); }
.lab-meta strong,.lab-meta span{ display:block; }
.lab-meta strong{ font-size:.78rem; margin-bottom:7px; }
.lab-meta span{ color:var(--muted); font-size:.83rem; }
.lab-values{ margin-top:22px; }
.tech-related{ margin-top:28px; }
.tech-related a{ text-decoration:underline; text-underline-offset:3px; }
@media(max-width:980px){.home-hero{padding-top:86px}.footer-columns{grid-template-columns:repeat(2,1fr)}.tech-band{align-items:flex-start;flex-direction:column}.standard-grid{grid-template-columns:repeat(3,1fr)}.standard-grid span+span{border-left:0}.standard-grid span:nth-child(3n+2),.standard-grid span:nth-child(3n+3){border-left:1px solid var(--border)}.standard-grid span:nth-child(n+4){border-top:1px solid var(--border)} }
@media(max-width:640px){.home-hero{padding:58px 0 50px}.home-hero h1{font-size:clamp(3.3rem,18vw,5.6rem)}.home-hero .hero-card{padding:26px}.division-card{padding:22px;gap:14px}.footer-columns{grid-template-columns:repeat(2,minmax(0,1fr));text-align:left}.footer-social-home{align-items:center;flex-direction:column;gap:12px}.catalog-controls{flex-direction:column}.catalog-controls select{width:100%;min-width:0}.work-note{align-items:flex-start}.lab-project{padding:24px}.lab-project-head{align-items:flex-start;flex-direction:column}.lab-meta{grid-template-columns:1fr}.standard-grid{grid-template-columns:repeat(2,1fr)}.standard-grid span:nth-child(n){border-top:0;border-left:0}.standard-grid span:nth-child(2n){border-left:1px solid var(--border)}.standard-grid span:nth-child(n+3){border-top:1px solid var(--border)} }
@media (min-width:981px) and (max-width:1240px){
  .nav-wrap{padding-left:164px;padding-right:0;}
  .nav{position:absolute;top:74px;left:16px;right:16px;display:none;flex-direction:column;align-items:stretch;gap:2px;padding:14px;background:rgba(8,9,11,.97);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);box-shadow:var(--shadow-strong);}
  .nav a{padding:12px 14px;}
  .nav.nav-open{display:flex;}
  .burger{display:block;}
  .home-hero .hero-grid{grid-template-columns:minmax(0,1fr);}
}
.hero-grid,.split-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);}
@media(max-width:980px){.hero-grid,.split-grid{grid-template-columns:minmax(0,1fr);}}
.home-hero-inner{position:relative;isolation:auto;max-width:var(--container);display:grid;grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);gap:clamp(28px,4vw,64px);align-items:center;}
.home-hero .hero-copy{max-width:none;}
.home-hero .hero-logo{width:min(100%,470px);justify-self:center;}
.home-hero .hero-logo{display:flex;flex-direction:column;align-items:center;}
.home-hero .hero-logo-stage{position:relative;width:100%;aspect-ratio:3/2;}
.home-hero .hero-logo-stage img,.home-hero .hero-logo-particles{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.home-hero .hero-logo-stage img{filter:drop-shadow(0 20px 48px rgba(205,12,24,.17));transition:opacity .45s ease,transform .7s cubic-bezier(.2,.8,.2,1),filter .45s ease;}
.home-hero .hero-logo-particles{pointer-events:none;}
.hero-logo-stage--fallback-scattered img{opacity:0;transform:scale(.82);filter:blur(8px)!important;}
.logo-surprise-button{min-height:42px;margin-top:10px;padding:0 18px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.045);color:#f5f5f6;font:700 .82rem var(--font);cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease;}
.logo-surprise-button:hover{transform:translateY(-2px);border-color:rgba(227,18,32,.7);background:rgba(227,18,32,.12);}
.logo-surprise-button:focus-visible{outline:3px solid #ff6871;outline-offset:3px;}
.logo-surprise-button[aria-pressed="true"]{border-color:rgba(227,18,32,.5);}
.logo-surprise-button:disabled{opacity:.7;cursor:wait;}
.logo-particle-status{min-height:1.4em;margin-top:7px;color:var(--muted-2);font-size:.72rem;text-align:center;}
.home-hero .home-claim{margin-top:8px;}
.divisions-section{padding-top:26px;}
.divisions-section .section-head{margin-bottom:22px;}
.division-grid{gap:14px;}
.division-card{min-height:150px;}
@media(max-width:640px){.home-hero .hero-copy{max-width:none}.divisions-section{padding-top:18px}.division-card{min-height:0}}
@media(max-width:980px){.home-hero-inner{grid-template-columns:1fr;gap:14px}.home-hero .hero-logo{width:min(100%,360px);}}
@media(max-width:640px){.brand-mark{flex-basis:92px;width:92px;height:61px}.home-hero .hero-logo{width:min(100%,320px);margin:-4px auto 0}}
.lab-project--compact{margin-top:18px;padding:28px;}
.lab-project--compact h2{font-size:clamp(1.8rem,4vw,2.8rem);margin-top:22px;}
.lab-project--compact .lead{margin-bottom:0;}
.nav-group{position:relative;}
.nav-group summary,.language-switch summary{list-style:none;cursor:pointer;user-select:none;}
.nav-group summary::-webkit-details-marker,.language-switch summary::-webkit-details-marker{display:none;}
.nav-group>summary{color:var(--muted);font-weight:600;font-size:.92rem;padding:8px 12px;border-radius:var(--radius-full);}
.nav-group>summary:hover,.nav-group[open]>summary{color:#fff;background:rgba(255,255,255,.06);}
.nav-submenu,.language-switch>div{position:absolute;top:calc(100% + 8px);left:0;z-index:120;min-width:190px;padding:8px;background:rgba(8,9,11,.98);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-strong);}
.nav-submenu a,.language-switch>div a{display:block;color:var(--muted);padding:10px 12px;border-radius:8px;font-size:.88rem;}
.nav-submenu a:hover,.language-switch>div a:hover{color:#fff;background:rgba(255,255,255,.07);}
.language-switch{position:absolute;right:max(20px,calc((100% - var(--container))/2));top:50%;transform:translateY(-50%);z-index:125;}
.language-switch>summary{border:1px solid var(--border);border-radius:999px;padding:7px 12px;color:#fff;font:600 .78rem var(--font-mono);}
.language-switch>div{right:0;left:auto;min-width:120px;}
@media(max-width:1240px){.language-switch{right:76px}.nav-group>summary{padding:12px 14px}.nav-submenu{position:static;box-shadow:none;margin:0 8px 8px;background:rgba(255,255,255,.025)}}
@media(max-width:640px){.language-switch{right:68px}.language-switch>summary{padding:6px 9px}}
.nav-group>summary::after{content:"⌄";padding-left:5px;font-size:.75em;color:var(--muted-2);}
.nav-group[open]>summary::after{content:"⌃";}

/* Artificial intelligence services */
.ai-subtitle{margin:6px 0 14px;font:700 clamp(1.35rem,2.4vw,1.8rem)/1.2 var(--font-display);color:#fff;letter-spacing:-.02em;}
.ai-service-grid{align-items:stretch;}
.ai-service-card{display:flex;flex-direction:column;min-height:100%;}
.ai-service-icon{width:48px;height:48px;padding:11px;margin:0 0 20px;color:#ffb7b9;background:var(--red-soft);border:1px solid rgba(213,29,36,.35);border-radius:14px;}
.ai-service-card .service-index{margin-bottom:10px;}
.ai-service-card h2{font-size:1.42rem;margin-bottom:12px;}
.ai-service-card .ai-scope{font-size:.84rem;color:var(--muted-2);line-height:1.6;margin:0 0 20px;}
.ai-benefit{margin-top:auto;margin-bottom:18px;padding-top:14px;border-top:1px solid var(--border);}
.ai-benefit strong{color:#ffb7b9;font:500 .7rem var(--font-mono);letter-spacing:.12em;text-transform:uppercase;}
.ai-benefit p{font-size:.9rem;margin:6px 0 0;}
.ai-service-card .btn{align-self:flex-start;}
.ai-labs-note{margin:26px 0 0;color:var(--muted);}
.ai-labs-note .text-link{margin-left:4px;}
.ai-overview,.ai-teaser-card{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:36px;border:1px solid rgba(213,29,36,.28);border-radius:var(--radius-lg);background:radial-gradient(ellipse at 88% 10%,rgba(164,18,23,.18),transparent 52%),linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.018));}
.ai-overview{margin:38px 0 28px;}
.ai-overview-copy,.ai-teaser-card>div{max-width:760px;}
.ai-overview h2,.ai-teaser-card h2{font-size:clamp(1.65rem,3vw,2.3rem);}
.ai-overview p:last-child,.ai-teaser-card p:last-child{margin-bottom:0;color:var(--muted);}
.ai-teaser-card{min-height:190px;}
.ai-home-teaser{padding-top:20px;padding-bottom:52px;}
@media(max-width:980px){.ai-overview,.ai-teaser-card{align-items:flex-start;flex-direction:column;padding:28px;gap:18px;}}
@media(max-width:640px){.ai-overview,.ai-teaser-card{padding:24px;}.ai-service-card{padding:26px;}.ai-home-teaser{padding-top:8px;padding-bottom:38px;}}
@media(min-width:981px){.ai-service-card:last-child:nth-child(3n + 1){grid-column:2;}}

/* Compact service and Labs tiles with hover, focus and tap details */
.service-tile-grid,.lab-project-grid{align-items:stretch;gap:16px;}
.service-tile,.lab-project--tile{position:relative;min-width:0;}
.service-tile{border:1px solid var(--border);border-radius:var(--radius-lg);background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018));transition:border-color .2s ease,background .2s ease,transform .2s ease;}
.service-tile>summary,.lab-project--tile>summary{display:flex;min-height:148px;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px;padding:22px;list-style:none;cursor:pointer;}
.service-tile>summary::-webkit-details-marker,.lab-project--tile>summary::-webkit-details-marker{display:none;}
.service-tile>summary::marker,.lab-project--tile>summary::marker{content:"";}
.service-tile .service-index{margin:0;color:#ffb7b9;font:500 .72rem var(--font-mono);letter-spacing:.12em;}
.service-tile-title{font:700 1.18rem/1.25 var(--font-display);color:#fff;}
.tile-hint{display:flex;align-items:center;gap:6px;margin-top:auto;color:var(--muted-2);font:500 .68rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;}
.service-tile:hover,.service-tile:focus-within,.service-tile[open],.lab-project--tile:hover,.lab-project--tile:focus-within,.lab-project--tile[open]{border-color:rgba(213,29,36,.65);background:linear-gradient(145deg,rgba(213,29,36,.11),rgba(255,255,255,.025));}
.service-tile:focus-within,.lab-project--tile:focus-within{outline:2px solid rgba(255,95,101,.65);outline-offset:3px;}
.tile-popup{display:none;}
.service-tile:not([open])>.tile-popup,.lab-project--tile:not([open])>.tile-popup{display:block;position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:50;padding:20px;background:#111216;border:1px solid rgba(213,29,36,.55);border-radius:14px;box-shadow:0 18px 48px rgba(0,0,0,.65);opacity:0;visibility:hidden;transform:translateY(-5px);transition:opacity .16s ease,transform .16s ease,visibility .16s ease;}
.service-tile:not([open]):hover>.tile-popup,.service-tile:not([open]):focus-within>.tile-popup,.lab-project--tile:not([open]):hover>.tile-popup,.lab-project--tile:not([open]):focus-within>.tile-popup{opacity:1;visibility:visible;transform:translateY(0);}
.tile-popup p{color:var(--muted);font-size:.9rem;line-height:1.65;margin:0 0 14px;}
.tile-popup .clean-list{margin:0 0 14px;padding-left:19px;color:var(--muted-2);font-size:.82rem;}
.tile-popup .clean-list li{margin:5px 0;}
.tile-popup .text-link{display:inline-block;margin-top:4px;}
.lab-project-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.lab-project--tile{padding:0;overflow:visible;box-shadow:none;}
.lab-project--tile>summary{min-height:170px;}
.tile-topline{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;}
.tile-title{display:block;color:#fff;font:700 clamp(1.7rem,3vw,2.3rem)/1.1 var(--font-display);letter-spacing:.02em;}
.lab-project--tile .lab-expansion{margin:0;font-size:.7rem;}
.lab-project--tile .tile-hint{align-self:flex-end;}
.lab-project--tile:not([open])>.tile-popup{background:#0d0e12;}
.lab-project--tile[open]>.tile-popup{padding:0 22px 22px;}
.lab-project--tile .lab-meta{margin:14px 0;}
.lab-project--tile .lab-meta div{padding:12px;}
.lab-project--tile .muted{font-size:.8rem;margin:12px 0 0;}
@media(max-width:980px){.service-tile-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.service-tile:not([open])>.tile-popup,.lab-project--tile:not([open])>.tile-popup{position:static;display:none;opacity:1;visibility:visible;transform:none;box-shadow:none;margin:0;padding:0 22px 22px;border:0;background:transparent;}.service-tile[open]>.tile-popup,.lab-project--tile[open]>.tile-popup{display:block;}.lab-project--tile[open]>.tile-popup{padding:0 22px 22px;}}
@media(max-width:640px){.service-tile-grid,.lab-project-grid{grid-template-columns:1fr;gap:12px;}.service-tile>summary,.lab-project--tile>summary{min-height:130px;padding:19px;}.tile-topline{align-items:flex-start;flex-direction:column;gap:8px;}.service-tile[open]>.tile-popup,.lab-project--tile[open]>.tile-popup{padding:0 19px 19px;}}
@media(hover:none){.service-tile:not([open])>.tile-popup,.lab-project--tile:not([open])>.tile-popup{position:static;display:none;opacity:1;visibility:visible;transform:none;box-shadow:none;margin:0;padding:0 22px 22px;border:0;background:transparent;}.service-tile[open]>.tile-popup,.lab-project--tile[open]>.tile-popup{display:block;}}
/* Clicking a service tile opens its explanation in the grid flow. */
.service-tile[open]>.tile-popup,.lab-project--tile[open]>.tile-popup{position:static;display:block;opacity:1;visibility:visible;transform:none;box-shadow:none;margin:0;padding:0 22px 22px;border:0;background:transparent;}
.division-card--expanded{min-height:340px;padding-bottom:38px;}
.division-card--expanded>div{display:flex;flex-direction:column;align-items:flex-start;}
.division-points{display:grid;gap:8px;margin:2px 0 18px;padding:0;list-style:none;color:var(--muted);font-size:.86rem;line-height:1.45;}
.division-points li{position:relative;padding-left:16px;}
.division-points li::before{content:"";position:absolute;left:0;top:.58em;width:5px;height:5px;border-radius:50%;background:var(--red);}
.division-card--expanded .text-link{margin-top:auto;}
@media(max-width:640px){.division-card--expanded{min-height:0;padding-bottom:22px;}}

/* Compact combined homepage call to action */
.home-actions-section{padding-top:24px;padding-bottom:56px;}
.home-cta-panel{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:clamp(24px,3.5vw,40px);border:1px solid rgba(213,29,36,.3);border-radius:var(--radius-lg);background:radial-gradient(ellipse at 90% 5%,rgba(164,18,23,.16),transparent 48%),linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.018));}
.home-cta-copy{max-width:760px;}
.home-cta-copy h2{max-width:24ch;font-size:clamp(1.55rem,2.6vw,2.15rem);}
.home-cta-copy p:last-child{margin-bottom:0;color:var(--muted);line-height:1.65;}
.home-cta-actions{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:12px;}
@media(max-width:980px){.home-cta-panel{align-items:flex-start;flex-direction:column;gap:20px;}}
@media(max-width:640px){.home-actions-section{padding-top:8px;padding-bottom:38px;}.home-cta-panel{gap:18px;padding:24px;}.home-cta-actions{width:100%;flex-direction:column;}.home-cta-actions .btn{width:100%;}}

/* Moving word divider between the studio label and section title */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.word-marquee{width:min(100%,620px);margin:8px 0 14px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
.word-marquee__track{display:flex;width:max-content;animation:word-marquee-scroll 30s linear infinite;}
.word-marquee__group{display:flex;flex-shrink:0;align-items:center;gap:17px;padding-right:17px;}
.word-marquee span{color:#f1f1f3;font:700 .72rem/1 var(--font-mono);letter-spacing:.15em;white-space:nowrap;}
.word-marquee i{color:var(--red);font-size:.62rem;font-style:normal;}
.divisions-section .section-head>div{width:100%;}
@keyframes word-marquee-scroll{to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.word-marquee__track{animation:none;}.word-marquee__group+ .word-marquee__group{display:none;}.word-marquee{mask-image:none;}}