:root {
  --ink: #161719;
  --graphite: #25282b;
  --panel: #ffffff;
  --paper: #f7f4ef;
  --paper-deep: #eee7dc;
  --muted: #666f72;
  --line: #ded6ca;
  --rs-red: #D40808;
  --red: var(--rs-red);
  --red-dark: #9f0606;
  --teal: #1c7874;
  --amber: #c4812c;
  --green: #49745d;
  --shadow: 0 24px 70px rgba(22, 23, 25, 0.16);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 10px clamp(18px, 5vw, 72px);
  color: #fff;
  background: rgba(5, 6, 7, 0.78);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
}

.brand,
.site-nav { display: flex; align-items: center; }
.brand { flex: 0 0 auto; min-width: 0; }
.brand-logo-frame { display:block; width:clamp(174px, 18vw, 220px); height:50px; overflow:hidden; }
.brand-logo { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.site-nav { align-items: center; gap: 8px; }
.site-nav a { min-height: 40px; padding: 10px 14px; border-radius: 8px; color: rgba(255,255,255,.78); font-size: .92rem; font-weight: 650; }
.site-nav a:hover,
.site-nav a:focus-visible { color:#fff; background:rgba(255,255,255,.12); outline:none; }

.language-toggle { display:inline-flex; align-items:center; gap:2px; min-height:38px; padding:3px; border:1px solid rgba(255,255,255,.2); border-radius:8px; background:rgba(255,255,255,.08); }
.language-option { min-width:34px; min-height:30px; border:0; border-radius:6px; color:rgba(255,255,255,.72); background:transparent; font:inherit; font-size:.78rem; font-weight:800; cursor:pointer; }
.language-option:hover,
.language-option:focus-visible,
.language-option.is-active { color:#fff; background:var(--rs-red); outline:none; }

.nav-toggle { display:none; width:42px; height:42px; padding:10px; border:1px solid rgba(255,255,255,.24); border-radius:8px; background:rgba(255,255,255,.08); }
.nav-toggle span { display:block; height:2px; margin:5px 0; background:#fff; }

.hero { position:relative; min-height:86svh; display:grid; align-items:end; overflow:hidden; color:#fff; }
.hero-media,
.hero-overlay { position:absolute; inset:0; }
.hero-media { background-image:url("assets/redsmart-operations-hero.png"); background-position:center; background-size:cover; transform:scale(1.02); }
.hero-overlay { background: linear-gradient(180deg, rgba(14,15,16,.72) 0%, rgba(14,15,16,.22) 42%, rgba(14,15,16,.86) 100%), linear-gradient(90deg, rgba(126,24,33,.74) 0%, rgba(22,23,25,.22) 48%, rgba(28,120,116,.34) 100%); }
.hero-content { position:relative; z-index:2; width:min(860px, calc(100% - 36px)); margin:0 auto; padding:150px 0 74px; }
.eyebrow { margin:0 0 14px; color:var(--red); font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.hero .eyebrow { color:#ffc8bf; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:820px; margin-bottom:22px; font-size:clamp(3rem, 8vw, 6.85rem); line-height:.94; letter-spacing:0; }
.hero-copy { max-width:690px; margin-bottom:30px; color:rgba(255,255,255,.86); font-size:clamp(1.04rem, 2vw, 1.28rem); }
.hero-actions,
.contact-panel,
.contact-methods { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:12px 18px; border:1px solid transparent; border-radius:8px; font-weight:800; transition:transform 160ms ease, background 160ms ease, border-color 160ms ease; }
.button:hover { transform:translateY(-2px); }
.button.primary { color:#fff; background:var(--red); }
.button.primary:hover { background:var(--red-dark); }
.button.secondary { color:#fff; border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.08); }

.intro-band { display:grid; grid-template-columns:repeat(4, 1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper-deep); }
.fact { min-height:132px; padding:28px clamp(18px, 4vw, 44px); border-right:1px solid var(--line); }
.fact:last-child { border-right:0; }
.fact span { display:block; margin-bottom:10px; color:var(--muted); font-size:.8rem; font-weight:800; text-transform:uppercase; }
.fact strong { font-size:clamp(1.55rem, 3vw, 2.35rem); line-height:1; }

.section,
.process-band { padding:clamp(70px, 9vw, 118px) clamp(18px, 5vw, 72px); }
.section-heading { max-width:780px; margin-bottom:36px; }
.section-heading.compact { margin-bottom:28px; }
h2 { margin-bottom:16px; font-size:clamp(2.1rem, 5vw, 4.35rem); line-height:1.02; letter-spacing:0; }
.section-heading p:not(.eyebrow) { color:var(--muted); font-size:1.08rem; }

.service-grid,
.portfolio-grid,
.application-grid,
.solution-grid { display:grid; gap:14px; }
.service-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.portfolio-grid,
.solution-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.application-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }

.ecosystem-group + .ecosystem-group { margin-top:clamp(58px, 8vw, 96px); padding-top:clamp(48px, 7vw, 78px); border-top:1px solid var(--line); }
.ecosystem-heading { max-width:720px; margin-bottom:28px; }
.ecosystem-heading h3 { margin-bottom:12px; font-size:clamp(1.65rem, 3vw, 2.45rem); }
.ecosystem-heading > p:not(.eyebrow) { color:var(--muted); font-size:1.02rem; }
.product-card { display:grid; grid-template-columns:92px minmax(0, 1fr); gap:22px; align-items:center; min-height:154px; padding:22px; border:1px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:0 1px 0 rgba(22,23,25,.04); transition:transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
.product-card:hover { transform:translateY(-3px); border-color:rgba(212,8,8,.24); box-shadow:0 16px 38px rgba(22,23,25,.1); }
.product-card img { width:92px; height:92px; border-radius:22px; }
.product-card h4 { margin-bottom:8px; font-size:1.17rem; line-height:1.15; }
.product-card h4 small { display:block; margin-top:5px; color:var(--muted); font-size:.72rem; font-weight:700; }
.product-card p { color:var(--muted); font-size:.91rem; }
.product-card .app-card-links { margin-top:12px; }

.service-card,
.app-card,
.solution-card { position:relative; min-height:260px; padding:24px; border:1px solid var(--line); border-radius:8px; background:var(--panel); box-shadow:0 1px 0 rgba(22,23,25,.04); overflow:hidden; transition:transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
.service-card::after,
.app-card::after,
.solution-card::after { content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform 180ms ease; }
.service-card:hover,
.app-card:hover,
.solution-card:hover { transform:translateY(-4px); border-color:rgba(212,8,8,.24); box-shadow:0 18px 44px rgba(22,23,25,.11); }
.service-card:hover::after,
.app-card:hover::after,
.solution-card:hover::after { transform:scaleX(1); }
.service-card,
.solution-card { display:flex; flex-direction:column; }
.app-card { display:flex; flex-direction:column; justify-content:space-between; min-height:220px; }
.solution-card { justify-content:flex-start; min-height:230px; }

.icon { display:inline-grid; width:52px; height:40px; place-items:center; margin-bottom:42px; border-radius:8px; color:#fff; background:var(--graphite); font-size:.72rem; font-weight:900; box-shadow:0 10px 22px rgba(22,23,25,.14); }
.service-card:nth-child(2) .icon { background:var(--teal); }
.service-card:nth-child(3) .icon { background:var(--red); }
.service-card:nth-child(4) .icon { background:var(--amber); }

.status { display:inline-flex; align-self:flex-start; margin-bottom:18px; padding:6px 10px; border-radius:8px; color:#fff; background:var(--green); font-size:.72rem; font-weight:800; text-transform:uppercase; box-shadow:0 10px 22px rgba(22,23,25,.12); }
.active .status { color:#fff; background:var(--green); }
.planned .status { color:#fff; background:var(--amber); }
.solution-card:nth-child(1) .status { background:var(--green); }
.solution-card:nth-child(2) .status { background:var(--teal); }
.solution-card:nth-child(3) .status { background:var(--red); }
.solution-card:nth-child(4) .status { background:var(--amber); }
.solution-card:nth-child(5) .status { background:var(--graphite); }
.solution-card:nth-child(6) .status { background:var(--green); }

h3 { margin-bottom:12px; font-size:1.26rem; line-height:1.12; }
.service-card p,
.app-card p,
.solution-card p,
.timeline p,
.contact-panel p { color:var(--muted); }

.app-card-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.app-card-links a { display:inline-flex; align-items:center; min-height:34px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--paper); font-size:.78rem; font-weight:800; }
.app-card-links a:hover,
.app-card-links a:focus-visible { color:#fff; background:var(--red); border-color:var(--red); outline:none; }

.solutions-section { background:var(--paper); }
.split-section { background:#fffaf4; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

.process-band { background:var(--graphite); color:#fff; }
.process-band .eyebrow { color:#f0b0a9; }
.process-band .section-heading p { color:rgba(255,255,255,.7); }
.timeline { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0; margin:0; padding:0; list-style:none; border:1px solid rgba(255,255,255,.16); }
.timeline li { min-height:260px; padding:26px; border-right:1px solid rgba(255,255,255,.16); }
.timeline li:last-child { border-right:0; }
.timeline span { display:block; margin-bottom:72px; color:#f0b0a9; font-weight:900; }
.timeline strong { display:block; margin-bottom:12px; font-size:1.18rem; }
.timeline p { color:rgba(255,255,255,.68); }

.contact-section { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px, 7vw, 92px); align-items:center; }
.contact-panel { align-items:flex-start; padding:28px; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:var(--shadow); }
.contact-panel p { width:100%; margin-bottom:12px; font-size:1.02rem; }
.contact-methods { width:100%; }
.email-link { flex:1 1 240px; min-height:66px; padding:12px 14px; border:1px solid var(--line); border-radius:8px; background:var(--paper); }
.email-link span,
.email-link strong { display:block; }
.email-link span { margin-bottom:4px; color:var(--muted); font-size:.76rem; font-weight:800; text-transform:uppercase; }
.email-link strong { overflow-wrap:anywhere; font-size:1rem; }
.site-footer { display:flex; justify-content:space-between; gap:20px; padding:24px clamp(18px, 5vw, 72px); color:rgba(255,255,255,.74); background:var(--ink); }
.site-footer p { margin:0; font-size:.9rem; }

@media (max-width: 980px) {
  .service-grid,
  .portfolio-grid,
  .application-grid,
  .solution-grid,
  .timeline { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .intro-band { grid-template-columns:repeat(2, 1fr); }
  .fact:nth-child(2) { border-right:0; }
  .fact:nth-child(-n + 2) { border-bottom:1px solid var(--line); }
  .timeline li:nth-child(2) { border-right:0; }
  .timeline li:nth-child(-n + 2) { border-bottom:1px solid rgba(255,255,255,.16); }
  .contact-section { grid-template-columns:1fr; }
}

@media (max-width: 720px) {
  .site-header { min-height:66px; padding:12px 16px; }
  .brand-logo-frame { width:174px; height:42px; }
  .nav-toggle { display:block; }
  .site-nav { position:absolute; top:calc(100% + 8px); left:16px; right:16px; display:none; flex-direction:column; align-items:stretch; padding:8px; border:1px solid rgba(255,255,255,.16); border-radius:8px; background:rgba(22,23,25,.96); }
  .site-nav.is-open { display:flex; }
  .site-nav a { width:100%; }
  .language-toggle { width:100%; justify-content:space-between; }
  .language-option { flex:1; }
  .hero { min-height:88svh; }
  .hero-content { width:min(100% - 32px, 860px); padding-bottom:48px; }
  .hero-actions { align-items:stretch; }
  .button { width:100%; }
  .service-grid,
  .portfolio-grid,
  .application-grid,
  .solution-grid,
  .timeline,
  .intro-band { grid-template-columns:1fr; }
  .fact,
  .timeline li { border-right:0; }
  .fact { min-height:108px; border-bottom:1px solid var(--line); }
  .fact:last-child { border-bottom:0; }
  .service-card,
  .solution-card,
  .app-card { min-height:0; }
  .product-card { grid-template-columns:72px minmax(0, 1fr); min-height:0; padding:18px; }
  .product-card img { width:72px; height:72px; border-radius:18px; }
  .timeline li { min-height:210px; border-bottom:1px solid rgba(255,255,255,.16); }
  .timeline li:last-child { border-bottom:0; }
  .timeline span { margin-bottom:38px; }
  .site-footer { flex-direction:column; }
}