﻿/* â”€â”€ CIRCLE CORE DESIGN SYSTEM â”€â”€ */
:root {
  --navy:       #0b1120;
  --navy-1:     #0f1729;
  --navy-2:     #131e35;
  --navy-3:     #182340;
  --navy-4:     #1d2a4d;
  --green:      #00c97a;
  --green-soft: rgba(0,201,122,0.10);
  --green-line: rgba(0,201,122,0.22);
  --white:      #ffffff;
  --off:        #e8ecf4;
  --muted:      #8492b4;
  --dim:        #4a5578;
  --border:     rgba(255,255,255,0.07);
  --radius:     6px;
  --max:        1200px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--navy) !important;
  color: var(--off) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* â”€â”€ ANIMATED PARTICLE BACKGROUND â”€â”€ */
.bg-canvas {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
}
.bg-canvas canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.28;
}
.bg-grad {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 10% 20%, rgba(0,201,122,0.04) 0%, transparent 60%);
}

/* â”€â”€ NAV â”€â”€ */
.cc-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 72px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 56px;
  transition: background 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.cc-nav.scrolled {
  background: rgba(11,17,32,0.95);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom-color: var(--border);
}
.cc-logo { display: flex; align-items: center; text-decoration: none; }
.cc-logo img { height: 42px; width: auto; display: block; filter: brightness(1.1); }
.cc-footer .cc-logo img { height: 80px !important; }

.cc-nav-links { display: flex; align-items: center; gap: 36px; list-style: none; }
.cc-nav-links a {
  font-size: 13.5px; font-weight: 500; color: var(--muted);
  text-decoration: none; transition: color 0.2s; font-family: 'Inter', sans-serif;
}
.cc-nav-links a:hover, .cc-nav-links a.active { color: var(--white); }

.cc-nav-right { display: flex; align-items: center; gap: 16px; }
.cc-btn-ghost {
  font-size: 13.5px; font-weight: 500; color: var(--muted);
  text-decoration: none; transition: color 0.2s; font-family: 'Inter', sans-serif;
}
.cc-btn-ghost:hover { color: var(--white); }
.cc-btn-cta {
  font-size: 13.5px; font-weight: 600; color: var(--navy) !important;
  background: var(--green); border-radius: var(--radius);
  padding: 10px 22px; text-decoration: none; display: inline-block;
  transition: opacity 0.2s, box-shadow 0.2s, transform 0.2s;
  font-family: 'Inter', sans-serif;
}
.cc-btn-cta:hover {
  opacity: 0.9; box-shadow: 0 4px 24px rgba(0,201,122,0.3); transform: translateY(-1px);
}

/* ── ICON SYSTEM (Bootstrap Icons) ── */
.cc-card-icon i,
.cc-cell-icon i,
.cc-module-icon i,
.cc-ind-icon i,
.cc-feat-icon i { color: var(--green); line-height: 1; display: block; }
.cc-card-icon i { font-size: 22px; }
.cc-cell-icon i { font-size: 24px; }
.cc-module-icon i { font-size: 20px; }
.cc-ind-icon i { font-size: 17px; }
.cc-feat-icon i { font-size: 20px; }

/* ── PRODUCTS DROPDOWN ── */
.cc-nav-has-dropdown { position: relative; }
.cc-nav-has-dropdown > a::after { content: ' ▾'; font-size: 9px; opacity: 0.45; }
.cc-dropdown-menu {
  position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%);
  background: rgba(11,17,32,0.98); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px; min-width: 200px; display: none; flex-direction: column; z-index: 300;
  box-shadow: 0 24px 48px rgba(0,0,0,0.5);
}
.cc-nav-has-dropdown:hover .cc-dropdown-menu,
.cc-nav-has-dropdown.open .cc-dropdown-menu { display: flex; }
.cc-nav-has-dropdown.open > a { color: var(--white); }
.cc-nav-has-dropdown.open > a::after { display:inline-block;transform:rotate(180deg); }
.cc-dropdown-menu::before { content:'';position:absolute;left:0;right:0;top:-15px;height:15px; }
.cc-dropdown-menu.cc-product-mega { width:min(720px,calc(100vw - 48px));min-width:0;padding:12px;display:none;grid-template-columns:1fr 1fr;gap:8px;background:rgba(7,11,20,.985); }
.cc-nav-has-dropdown:hover .cc-product-mega,.cc-nav-has-dropdown.open .cc-product-mega { display:grid; }
.cc-product-mega .cc-mega-product { min-width:0;padding:0;border:1px solid var(--border);border-radius:11px;overflow:hidden;background:rgba(255,255,255,.025);display:grid;grid-template-columns:128px 1fr;align-items:stretch;transition:transform .2s,border-color .2s,background .2s; }
.cc-product-mega .cc-mega-product:hover { transform:translateY(-2px);border-color:var(--green-line);background:rgba(48,232,154,.035); }
.cc-mega-product img { width:128px;height:102px;object-fit:cover;object-position:center;display:block;opacity:.86; }
.cc-product-mega .cc-mega-kamela { grid-column:1/-1;grid-template-columns:210px 1fr; }
.cc-product-mega .cc-mega-kamela img { width:210px;object-position:center 42%; }
.cc-mega-copy { padding:14px 15px;min-width:0;display:flex;flex-direction:column;justify-content:center; }
.cc-mega-copy span { font:8px 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:5px; }
.cc-mega-copy strong { color:#fff;font:600 14px 'Space Grotesk',sans-serif;margin-bottom:4px; }
.cc-mega-copy small { color:#718096;font-size:10px;line-height:1.45; }
.cc-product-mega .cc-mega-compact { padding:14px 16px;display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.018); }
.cc-mega-compact i { width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:var(--green-soft);color:var(--green);font-size:14px;flex-shrink:0; }
.cc-mega-compact div { min-width:0; }.cc-mega-compact strong { display:block;color:#eef3fb;font-size:12px;margin-bottom:2px; }.cc-mega-compact small { display:block;color:#69788d;font-size:9px;line-height:1.35; }
.cc-product-mega .cc-mega-all { grid-column:1/-1;justify-content:center;padding:11px;border:1px solid var(--border);border-radius:9px;color:#9dabbf;font-size:11px;background:rgba(255,255,255,.018); }
.cc-product-mega .cc-mega-all i { color:var(--green); }
.cc-dropdown-menu a {
  font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 500;
  color: var(--muted); text-decoration: none;
  padding: 10px 14px; border-radius: 6px;
  transition: background 0.2s, color 0.2s;
  display: flex; align-items: center; gap: 8px;
}
.cc-dropdown-menu a:hover { background: var(--navy-2); color: var(--white); }
.cc-company-menu { min-width:250px;padding:9px; }
.cc-company-menu a { padding:12px 13px; }
.cc-company-menu a i { width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:var(--green-soft);color:var(--green);font-size:13px;flex-shrink:0; }
.cc-dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }
.cc-dropdown-badge {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: var(--green);
  background: var(--green-soft); border: 1px solid var(--green-line);
  border-radius: 10px; padding: 1px 6px; margin-left: auto; flex-shrink: 0;
}

/* Mobile dropdown */
.cc-mobile-nav .cc-mobile-dropdown-toggle {
  font-size: 15px; font-weight: 500; color: var(--muted);
  text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: none; border-top: none; border-left: none; border-right: none;
  width: 100%; cursor: pointer; font-family: 'Inter', sans-serif;
  transition: color 0.2s;
}
.cc-mobile-nav .cc-mobile-dropdown-toggle:hover { color: var(--white); }
.cc-mobile-dropdown-toggle .cc-dd-arrow { font-size: 10px; opacity: 0.5; transition: transform 0.2s; }
.cc-mobile-dropdown-toggle.open .cc-dd-arrow { transform: rotate(180deg); }
.cc-mobile-subnav { display: none; flex-direction: column; padding-left: 16px; gap: 0; }
.cc-mobile-subnav.open { display: flex; }
.cc-mobile-subnav a {
  font-size: 14px; font-weight: 400; color: var(--muted);
  text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--border);
  transition: color 0.2s; display: flex; align-items: center; gap: 8px;
}
.cc-mobile-subnav a:hover { color: var(--white); }

/* Mobile nav */
.cc-mobile-nav {
  display: none; position: fixed; top: 68px; left: 0; right: 0; z-index: 199;
  background: rgba(11,17,32,0.98); backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border); padding: 20px 32px;
  flex-direction: column; gap: 16px;
}
.cc-mobile-nav.open { display: flex; }
.cc-mobile-nav a {
  font-size: 15px; font-weight: 500; color: var(--muted);
  text-decoration: none; transition: color 0.2s; padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.cc-mobile-nav a:hover { color: var(--white); }
.cc-hamburger {
  display: none; background: none; border: 1px solid var(--border);
  border-radius: 4px; padding: 8px 10px; cursor: pointer; color: var(--muted);
  font-size: 18px; line-height: 1;
}

@media (max-width: 1024px) {
  .cc-nav-links, .cc-nav-right { display: none; }
  .cc-hamburger { display: block; }
  .cc-nav { padding: 0 24px; }
}

/* â”€â”€ WRAP â”€â”€ */
.cc-wrap { position: relative; z-index: 1; padding-top: 68px; }

/* â”€â”€ BUTTONS â”€â”€ */
.btn-primary {
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--navy); background: var(--green); border: none;
  border-radius: var(--radius); padding: 14px 28px; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  transition: box-shadow 0.25s, transform 0.2s;
}
.btn-primary:hover {
  box-shadow: 0 8px 32px rgba(0,201,122,0.35); transform: translateY(-2px);
}
.btn-outline {
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500;
  color: var(--off); background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 28px; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  transition: border-color 0.2s, color 0.2s;
}
.btn-outline:hover { border-color: rgba(255,255,255,0.2); color: var(--white); }
.btn-outline-sm {
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
  color: var(--muted); background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 20px;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  transition: border-color 0.2s, color 0.2s;
}
.btn-outline-sm:hover { border-color: var(--green-line); color: var(--off); }

/* â”€â”€ SECTION â”€â”€ */
.cc-section { padding: 120px 56px; position: relative; z-index: 1; }
.cc-inner { max-width: var(--max); margin: 0 auto; }

.eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
  letter-spacing: 0.2em; color: var(--green); text-transform: uppercase; margin-bottom: 18px;
}
.cc-h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(40px, 5.5vw, 68px); font-weight: 700;
  line-height: 1.08; letter-spacing: -0.03em; color: var(--white); margin-bottom: 28px;
}
.cc-h1 em { font-style: normal; color: var(--green); font-weight: 700; }
.cc-h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(28px, 3.5vw, 48px); font-weight: 600;
  line-height: 1.12; letter-spacing: -0.025em; color: var(--white); margin-bottom: 18px;
}
.cc-h2 em { font-style: normal; color: var(--green); font-weight: 600; }
.cc-h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(18px, 2vw, 24px); font-weight: 600;
  line-height: 1.25; letter-spacing: -0.015em; color: var(--white); margin-bottom: 10px;
}
.cc-lead { font-size: 17px; color: var(--muted); line-height: 1.75; max-width: 540px; }
.cc-p { font-size: 15px; color: var(--muted); line-height: 1.8; margin-bottom: 20px; }

/* â”€â”€ TICKER â”€â”€ */
.cc-ticker {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--navy-1); overflow: hidden; padding: 15px 0; position: relative; z-index: 1;
}
.cc-ticker-track {
  display: flex; white-space: nowrap;
  animation: cc-scroll 45s linear infinite;
}
.cc-ticker-item {
  display: inline-flex; align-items: center; gap: 28px; padding: 0 36px;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  color: var(--dim); letter-spacing: 0.1em; text-transform: uppercase;
}
.cc-ticker-sep {
  width: 3px; height: 3px; background: var(--green);
  border-radius: 50%; opacity: 0.5; flex-shrink: 0;
}
@keyframes cc-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* â”€â”€ CARDS â”€â”€ */
.cc-card {
  background: var(--navy-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 32px 28px; position: relative; overflow: hidden;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.cc-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  opacity: 0; transition: opacity 0.3s;
}
.cc-card:hover {
  border-color: rgba(0,201,122,0.2); transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.4);
}
.cc-card:hover::before { opacity: 1; }

.cc-card-icon {
  width: 44px; height: 44px; background: var(--green-soft);
  border: 1px solid var(--green-line); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 20px;
}
.cc-card-type {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: 0.15em; color: var(--green); text-transform: uppercase; margin-bottom: 10px;
}
.cc-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.cc-tag {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  color: var(--dim); background: var(--navy-3); border: 1px solid var(--border);
  border-radius: 20px; padding: 3px 10px;
}

/* â”€â”€ GRID CELLS (services table) â”€â”€ */
.cc-cell {
  background: var(--navy-1); padding: 36px 28px; transition: background 0.2s;
}
.cc-cell:hover { background: var(--navy-2); }
.cc-cell-icon { font-size: 26px; margin-bottom: 18px; display: block; }
.cc-cell-name { font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 8px; font-family: 'Inter', sans-serif; }
.cc-cell-desc { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* â”€â”€ MODULE CARD â”€â”€ */
.cc-module {
  background: var(--navy-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 24px 20px; transition: border-color 0.2s, background 0.2s;
}
.cc-module:hover { background: var(--navy-3); border-color: rgba(0,201,122,0.18); }
.cc-module-icon { font-size: 22px; margin-bottom: 14px; }
.cc-module-name { font-size: 13.5px; font-weight: 700; color: var(--white); margin-bottom: 6px; font-family: 'Inter', sans-serif; }
.cc-module-desc { font-size: 12px; color: var(--muted); line-height: 1.55; }

/* â”€â”€ STAT BAND â”€â”€ */
.cc-stats-band {
  padding: 80px 56px; background: var(--navy-2);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  position: relative; z-index: 1;
}
.cc-stats-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
}
.cc-stat { background: var(--navy-2); padding: 44px 32px; text-align: center; }
.cc-stat-val {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 52px; font-weight: 700; color: var(--white); line-height: 1; margin-bottom: 8px; letter-spacing: -0.03em;
}
.cc-stat-val span { color: var(--green); }
.cc-stat-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase;
}

/* â”€â”€ CTA BAND â”€â”€ */
.cc-cta {
  padding: 140px 56px; text-align: center; position: relative; z-index: 1; overflow: hidden;
}
.cc-cta-glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 900px; height: 500px;
  background: radial-gradient(ellipse, rgba(0,201,122,0.06) 0%, transparent 65%);
  pointer-events: none;
}
.cc-cta-inner { position: relative; max-width: 680px; margin: 0 auto; }
.cc-cta-p { font-size: 17px; color: var(--muted); line-height: 1.75; margin-bottom: 48px; }
.cc-cta-btns { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* â”€â”€ FOOTER â”€â”€ */
.cc-footer {
  position: relative; z-index: 1; background: var(--navy-1);
  border-top: 1px solid var(--border); padding: 72px 56px 40px;
}
.cc-footer-inner { max-width: var(--max); margin: 0 auto; }
.cc-footer-top {
  display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 60px; padding-bottom: 60px; border-bottom: 1px solid var(--border);
}
.cc-footer-brand-text {
  font-size: 13.5px; color: var(--muted); line-height: 1.75;
  margin-top: 18px; max-width: 300px;
}
.cc-footer-col-head {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: 0.2em; color: var(--dim); text-transform: uppercase; margin-bottom: 22px;
}
.cc-footer-links { list-style: none; }
.cc-footer-links li { margin-bottom: 13px; }
.cc-footer-links a { font-size: 13.5px; color: var(--muted); text-decoration: none; transition: color 0.2s; }
.cc-footer-links a:hover { color: var(--white); }
.cc-footer-bottom {
  display: flex; justify-content: space-between; align-items: center; padding-top: 32px; flex-wrap: wrap; gap: 16px;
}
.cc-footer-copy { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--dim); }
.cc-footer-legal { display: flex; gap: 28px; list-style: none; }
.cc-footer-legal a { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--dim); text-decoration: none; transition: color 0.2s; }
.cc-footer-legal a:hover { color: var(--green); }

/* â”€â”€ PRODUCT STACK (hero mockup) â”€â”€ */
.cc-product-stack {
  background: var(--navy-2); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,0.5);
}
.cc-ps-topbar {
  background: var(--navy-3); border-bottom: 1px solid var(--border);
  padding: 14px 20px; display: flex; align-items: center; justify-content: space-between;
}
.cc-ps-dots { display: flex; gap: 7px; }
.cc-ps-dot { width: 11px; height: 11px; border-radius: 50%; }
.cc-ps-dot-r { background: #ff5f57; } .cc-ps-dot-y { background: #febc2e; } .cc-ps-dot-g { background: #28c840; }
.cc-ps-title { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--dim); }
.cc-ps-live {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--green);
  background: var(--green-soft); border: 1px solid var(--green-line);
  border-radius: 20px; padding: 2px 10px;
}
.cc-ps-body { padding: 20px; }
.cc-ps-row {
  display: flex; align-items: center; gap: 14px; padding: 11px 14px;
  border-radius: 6px; margin-bottom: 4px; transition: background 0.2s; border: 1px solid transparent;
}
.cc-ps-row:hover { background: var(--navy-3); }
.cc-ps-row.active { background: rgba(0,201,122,0.06); border-color: var(--green-line); }
.cc-sd { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.cc-sg { background: var(--green); box-shadow: 0 0 6px var(--green); }
.cc-sa { background: #f59e0b; } .cc-sb { background: #60a5fa; } .cc-sm { background: var(--dim); }
.cc-ps-name { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--off); flex: 1; }
.cc-ps-tag { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--muted); }
.cc-ps-div { height: 1px; background: var(--border); margin: 14px 0; }
.cc-ps-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cc-ps-m { background: var(--navy-3); border: 1px solid var(--border); border-radius: 6px; padding: 14px 12px; text-align: center; }
.cc-ps-mv { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--green); line-height: 1; }
.cc-ps-ml { font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: var(--dim); margin-top: 4px; letter-spacing: 0.08em; text-transform: uppercase; }

/* â”€â”€ INDUSTRIES SWITCHER â”€â”€ */
.cc-ind-row {
  display: flex; align-items: center; gap: 16px; padding: 14px 18px;
  border-radius: 6px; border: 1px solid transparent; cursor: pointer;
  transition: background 0.2s, border-color 0.2s; text-decoration: none; color: inherit;
}
.cc-ind-row:hover, .cc-ind-row.active { background: var(--navy-2); border-color: var(--border); }
.cc-ind-row.active .cc-ind-name { color: var(--green); }
.cc-ind-row.active .cc-ind-arrow { opacity: 1; color: var(--green); }
.cc-ind-icon { font-size: 17px; }
.cc-ind-name { font-size: 14px; font-weight: 600; color: var(--off); flex: 1; font-family: 'Inter', sans-serif; }
.cc-ind-arrow { font-size: 13px; color: var(--muted); opacity: 0; transition: opacity 0.2s; }
.cc-ind-detail { background: var(--navy-2); border: 1px solid var(--border); border-radius: 10px; padding: 40px; }
.cc-ind-detail-name { font-family: 'Space Grotesk', sans-serif; font-size: 28px; color: var(--white); margin-bottom: 14px; }
.cc-ind-detail-desc { font-size: 15px; color: var(--muted); line-height: 1.75; margin-bottom: 28px; }
.cc-ind-cap { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--off); margin-bottom: 10px; }
.cc-ind-cap::before { content: ''; width: 6px; height: 6px; background: var(--green); border-radius: 50%; flex-shrink: 0; }

/* ── PAGE-SPECIFIC LAYOUTS ── */
.cc-hero-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  align-items: center; width: 100%;
}
.cc-pillars-grid {
  margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
}
.cc-contact-layout {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start;
}
.cc-form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.cc-form-row + .cc-form-row { margin-top: 20px; }
.cc-ind-layout {
  display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start;
}

/* â”€â”€ REVEAL ANIMATION â”€â”€ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.75s ease, transform 0.75s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: 0.1s; } .d2 { transition-delay: 0.2s; } .d3 { transition-delay: 0.3s; }

/* â”€â”€ PAGE HERO (inner pages) â”€â”€ */
.cc-page-hero {
  padding: 100px 56px 80px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--navy-1) 0%, var(--navy) 100%);
  position: relative; z-index: 1;
}
.cc-page-hero-inner { max-width: var(--max); margin: 0 auto; }

/* â”€â”€ DIVIDER â”€â”€ */
.cc-divider { height: 1px; background: var(--border); margin: 0; }

/* â”€â”€ CONTACT FORM â”€â”€ */
.cc-form-group { margin-bottom: 24px; }
.cc-label { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.15em; color: var(--muted); text-transform: uppercase; margin-bottom: 8px; }
.cc-input, .cc-textarea, .cc-select {
  width: 100%; background: var(--navy-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; color: var(--off);
  font-family: 'Inter', sans-serif; font-size: 15px;
  transition: border-color 0.2s; outline: none;
}
.cc-input:focus, .cc-textarea:focus, .cc-select:focus { border-color: var(--green-line); }
.cc-textarea { resize: vertical; min-height: 140px; }
.cc-select option { background: var(--navy-2); color: var(--off); }
.cc-select optgroup { background: var(--navy-3); color: var(--muted); font-style: normal; }

/* â”€â”€ ALTERNATING BG SECTIONS â”€â”€ */
.cc-bg-alt { background: var(--navy-1); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* â”€â”€ GRID UTILITIES â”€â”€ */
.cc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.cc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cc-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cc-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.cc-grid-services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }

@media (max-width: 1024px) {
  .cc-section { padding: 80px 24px; }
  .cc-grid-2, .cc-grid-3, .cc-grid-4, .cc-grid-5 { grid-template-columns: 1fr 1fr; }
  .cc-stats-grid { grid-template-columns: 1fr 1fr; }
  .cc-footer-top { grid-template-columns: 1fr 1fr; }
  .cc-cta { padding: 100px 24px; }
  .cc-page-hero { padding: 80px 24px 60px; }
  .cc-stats-band { padding: 60px 24px; }
  .cc-contact-layout { grid-template-columns: 1fr; }
  .cc-ind-layout { grid-template-columns: 1fr; }
  .cc-hero-grid { gap: 48px; }
}
@media (max-width: 640px) {
  .cc-grid-2, .cc-grid-3, .cc-grid-4, .cc-grid-5 { grid-template-columns: 1fr; }
  .cc-grid-services { grid-template-columns: 1fr; }
  .cc-stats-grid { grid-template-columns: 1fr; }
  .cc-footer-top { grid-template-columns: 1fr; }
  .cc-h1 { font-size: 40px; }
  .cc-h2 { font-size: 30px; }
  .cc-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .cc-pillars-grid { grid-template-columns: 1fr; margin-top: 32px; }
  .cc-form-row { grid-template-columns: 1fr; }
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--navy); }
::-webkit-scrollbar-thumb { background: var(--navy-4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--dim); }

/* ── WHATSAPP BUTTON ── */
.cc-wa-btn {
  position: fixed; bottom: 28px; left: 28px; z-index: 500;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
.cc-wa-btn:hover { transform: scale(1.1); box-shadow: 0 6px 32px rgba(37,211,102,0.55); }
.cc-wa-btn i { color: #fff; font-size: 26px; line-height: 1; }

/* ── POPIA CONSENT BANNER ── */
.cc-consent {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 900;
  background: var(--navy-2);
  border-top: 1px solid var(--green-line);
  padding: 14px 24px;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.cc-consent.visible { transform: translateY(0); }
.cc-consent-inner {
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.cc-consent-text {
  font-family: 'Inter', sans-serif; font-size: 13px; color: var(--muted);
  display: flex; align-items: center; gap: 8px; line-height: 1.5;
}
.cc-consent-text i { color: var(--green); font-size: 15px; flex-shrink: 0; }
.cc-consent-text a { color: var(--green); text-decoration: none; }
.cc-consent-text a:hover { text-decoration: underline; }
.cc-consent-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.cc-consent-learn {
  font-family: 'Inter', sans-serif; font-size: 12px; color: var(--muted);
  text-decoration: none; padding: 8px 14px;
  border: 1px solid var(--border); border-radius: 4px;
  transition: border-color 0.2s, color 0.2s;
}
.cc-consent-learn:hover { border-color: var(--green-line); color: var(--off); }
.cc-consent-accept {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; background: var(--green); color: var(--navy);
  border: none; border-radius: 4px; padding: 9px 18px; cursor: pointer;
  transition: background 0.2s;
}
.cc-consent-accept:hover { background: #00e88a; }
@media (max-width: 640px) {
  .cc-consent-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Balanced product showcase overrides */
.cc-premium .product-feature-real { min-height:410px;padding-top:190px; }
.home-product-media { position:absolute;left:14px;right:14px;top:14px;height:158px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.09);background:#050a12; }
.home-product-media img { width:100%;height:100%;object-fit:cover;object-position:center;display:block;opacity:.88;transition:transform .45s,opacity .3s; }
.product-feature-real:hover .home-product-media img { transform:scale(1.035);opacity:1; }
.product-pos-spotlight { display:grid;grid-template-columns:.72fr 1.28fr;gap:46px;align-items:center;margin-top:54px;padding:42px;border:1px solid rgba(48,232,154,.24);border-radius:22px;background:linear-gradient(135deg,rgba(48,232,154,.09),rgba(23,55,110,.10) 58%,rgba(255,255,255,.018));overflow:hidden;position:relative; }
.product-pos-spotlight:before { content:'';position:absolute;width:340px;height:340px;right:-110px;top:-120px;border-radius:50%;background:radial-gradient(circle,rgba(48,232,154,.12),transparent 70%); }
.product-pos-copy,.product-pos-media { position:relative;z-index:1;min-width:0; }.product-pos-copy h3 { color:#fff;font:600 clamp(30px,3.5vw,48px)/1.04 'Space Grotesk',sans-serif;letter-spacing:-.04em;margin:15px 0; }.product-pos-copy>p { color:#8c9bb0;font-size:14px;line-height:1.75; }.product-pos-actions { display:flex;gap:10px;flex-wrap:wrap;margin-top:26px; }.product-pos-media img { width:100%;display:block;border-radius:14px;border:1px solid rgba(255,255,255,.11);box-shadow:0 28px 70px rgba(0,0,0,.38); }
.product-pos-spotlight.guest-spotlight { margin-top:18px;background:linear-gradient(135deg,rgba(18,109,71,.13),rgba(13,26,35,.72) 58%,rgba(255,255,255,.018));border-color:rgba(48,232,154,.19); }.product-pos-spotlight.guest-spotlight .product-pos-copy { order:2; }.product-pos-spotlight.guest-spotlight:before { left:-110px;right:auto;top:auto;bottom:-130px; }
.product-pos-spotlight.kamela-spotlight { background:linear-gradient(135deg,rgba(15,166,232,.11),rgba(11,18,34,.86) 52%,rgba(223,176,55,.08));border-color:rgba(25,169,235,.25); }
.product-pos-spotlight.kamela-spotlight:before { background:radial-gradient(circle,rgba(219,171,47,.13),transparent 70%); }
@media(max-width:800px){.product-pos-spotlight{grid-template-columns:1fr;padding:26px;gap:32px}.product-pos-spotlight.guest-spotlight .product-pos-copy{order:0}}
.cc-premium .premium-hero-grid,.cc-premium .premium-hero-grid>* { min-width:0;width:100%; }
.cc-premium .product-stage,.cc-premium .stage-window,.cc-premium .stage-content { min-width:0;max-width:100%; }
.cc-premium .product-kamela { grid-row:auto !important;min-height:410px !important;background:linear-gradient(155deg,rgba(16,166,230,.08),rgba(11,19,33,.88) 58%,rgba(221,174,50,.055)); }
@media(max-width:640px){.cc-premium .premium-actions{max-width:100%}.cc-premium .premium-actions>a{flex:0 0 auto}}

.kamela-hero-product { flex:1.35;min-width:340px;position:relative;padding:12px;border:1px solid rgba(29,169,234,.25);border-radius:20px;background:linear-gradient(145deg,rgba(21,166,230,.08),rgba(222,175,54,.045));box-shadow:0 36px 90px rgba(0,0,0,.38); }
.kamela-hero-product img { width:100%;display:block;border-radius:13px;border:1px solid rgba(255,255,255,.09); }
.kamela-hero-caption { display:flex;align-items:center;gap:7px;margin:11px 4px 1px;color:#7889a2;font:9px 'IBM Plex Mono',monospace;letter-spacing:.06em;text-transform:uppercase; }
.kamela-hero-caption i { color:#16a9ed; }
@media(max-width:760px){.kamela-hero-product{min-width:0;width:100%}.cc-product-mega .cc-mega-kamela{grid-template-columns:128px 1fr}.cc-product-mega .cc-mega-kamela img{width:128px}}

/* PREMIUM PRODUCT COMPANY EXPERIENCE */
.cc-premium {
  --navy: #070b14;
  --navy-1: #0a101c;
  --navy-2: #0e1727;
  --navy-3: #142035;
  --green: #30e89a;
  --green-soft: rgba(48,232,154,.10);
  --green-line: rgba(48,232,154,.24);
  --border: rgba(255,255,255,.09);
}
.cc-premium .bg-grad { background: radial-gradient(circle at 68% 15%,rgba(43,108,255,.11),transparent 34%),radial-gradient(circle at 15% 30%,rgba(48,232,154,.08),transparent 30%); }
.cc-premium .cc-nav { height:80px;padding:0 max(28px,4vw); }
.cc-premium .cc-nav.scrolled { background:rgba(7,11,20,.82); }
.cc-premium .cc-logo img { height:46px; }
.cc-premium .cc-nav-links { gap:32px; }
.cc-premium .cc-btn-cta,.cc-premium .btn-primary { border-radius:999px; }
.cc-premium .btn-outline { border-radius:999px;background:rgba(255,255,255,.025); }
.cc-premium .cc-wrap { padding-top:0; }
.premium-hero { min-height:100vh;padding:150px 56px 90px;display:flex;align-items:center;position:relative;overflow:hidden; }
.premium-hero-grid { display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:center;width:100%;position:relative;z-index:2; }
.premium-orb { position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none; }
.premium-orb-one { width:540px;height:540px;right:-160px;top:30px;background:radial-gradient(circle,rgba(58,112,255,.13),transparent 70%); }
.premium-orb-two { width:480px;height:480px;left:-240px;bottom:-160px;background:radial-gradient(circle,rgba(48,232,154,.10),transparent 70%); }
.premium-kicker { display:flex;align-items:center;gap:10px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#9cacbe;margin-bottom:22px; }
.premium-kicker span { width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 18px rgba(48,232,154,.8); }
.premium-title { font-family:'Space Grotesk',sans-serif;font-size:clamp(48px,5.5vw,76px);line-height:1.02;letter-spacing:-.052em;color:#fff;margin:0 0 28px;font-weight:600; }
.premium-title em { font-style:normal;color:transparent;background:linear-gradient(100deg,#fff 0%,#9cefc9 45%,#63a4ff 100%);-webkit-background-clip:text;background-clip:text; }
.premium-lead { font-size:18px;line-height:1.75;color:#95a3b7;max-width:620px; }
.premium-actions { display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:36px; }
.premium-proof { display:flex;gap:24px;flex-wrap:wrap;margin-top:34px;color:#718096;font-size:12px; }
.premium-proof i { color:var(--green);margin-right:5px; }
.product-stage { position:relative;padding:38px 16px 40px; }
.stage-glow { position:absolute;inset:8%;background:linear-gradient(135deg,rgba(48,232,154,.24),rgba(40,104,255,.24));filter:blur(70px);opacity:.6; }
.stage-window { position:relative;background:#0b111d;border:1px solid rgba(255,255,255,.13);border-radius:20px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.55);transform:perspective(1400px) rotateY(-3deg) rotateX(1deg); }
.stage-top { height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.018); }
.stage-brand { display:flex;align-items:center;gap:10px;font-size:12px;color:#edf3ff; }.stage-mark { display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--green),#68a9ff);font-size:9px;font-weight:800;color:#061018; }
.stage-status { font:9px 'IBM Plex Mono',monospace;color:#7f8da1;text-transform:uppercase;letter-spacing:.08em; }.stage-status i { display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:6px;box-shadow:0 0 10px var(--green); }
.stage-body { display:grid;grid-template-columns:64px 1fr;min-height:390px; }.stage-side { display:flex;flex-direction:column;align-items:center;gap:14px;padding:22px 0;border-right:1px solid var(--border); }.stage-side span { width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#526078;font-size:13px; }.stage-side span.active { background:var(--green-soft);color:var(--green); }
.stage-content { padding:28px; }.stage-greeting { display:flex;justify-content:space-between;align-items:end;margin-bottom:24px; }.stage-greeting small,.stage-metrics small,.chart-head { font:8px 'IBM Plex Mono',monospace;letter-spacing:.12em;color:#59677b; }.stage-greeting h3 { margin-top:7px;font-size:22px;color:#fff; }.stage-greeting button { padding:9px 12px;border:0;border-radius:7px;background:var(--green);font-size:9px;font-weight:700;color:#07110d; }
.stage-metrics { display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }.stage-metrics>div { padding:16px 14px;background:#0f1928;border:1px solid var(--border);border-radius:10px; }.stage-metrics strong { display:block;color:#fff;font-size:18px;margin:8px 0 4px; }.stage-metrics span { color:#64806f;font-size:8px; }
.stage-chart { margin-top:12px;padding:16px;background:#0f1928;border:1px solid var(--border);border-radius:10px; }.chart-head { display:flex;justify-content:space-between; }.chart-bars { height:105px;display:flex;align-items:end;gap:8px;padding-top:18px; }.chart-bars i { flex:1;border-radius:4px 4px 1px 1px;background:linear-gradient(180deg,var(--green),rgba(48,232,154,.12));box-shadow:0 0 18px rgba(48,232,154,.06); }
.stage-float { position:absolute;z-index:3;background:rgba(15,24,39,.95);border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.35);backdrop-filter:blur(14px); }.float-one { left:-22px;bottom:74px;padding:14px 18px;display:flex;align-items:center;gap:11px; }.float-one i { color:var(--green);font-size:20px; }.float-one strong,.float-one small { display:block; }.float-one strong { font-size:11px;color:#fff; }.float-one small { font-size:8px;color:#68768b;margin-top:2px; }.float-two { right:-8px;top:54px;padding:14px 20px; }.float-two small { display:block;font:7px 'IBM Plex Mono',monospace;color:#68768b;letter-spacing:.12em; }.float-two strong { display:block;font-size:22px;color:#fff;margin-top:4px; }
.product-intro,.platform-layers,.build-process { padding:120px 56px;position:relative;z-index:1; }.product-intro { background:linear-gradient(180deg,#090f1a,#0b1321);border-top:1px solid var(--border); }.section-heading { margin-bottom:54px; }.section-heading h2,.premium-platform h2,.premium-cta h2 { font:600 clamp(36px,4vw,56px)/1.08 'Space Grotesk',sans-serif;letter-spacing:-.04em;color:#fff;margin-bottom:18px; }.section-heading>p:last-child,.premium-platform-grid>div>p,.premium-cta .cc-inner>p { max-width:620px;color:#8997ab;font-size:16px;line-height:1.75; }
.product-showcase { display:grid;grid-template-columns:repeat(2,1fr);gap:16px; }.product-feature { min-height:330px;padding:34px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;text-decoration:none;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018));border:1px solid var(--border);border-radius:18px;transition:transform .35s,border-color .35s,box-shadow .35s; }.product-feature:hover { transform:translateY(-5px);border-color:rgba(48,232,154,.30);box-shadow:0 25px 60px rgba(0,0,0,.24); }.product-feature:after { content:'';position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(48,232,154,.08),transparent 70%);right:-80px;bottom:-90px; }.product-meta { display:flex;align-items:center;gap:12px;font:9px 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#647287; }.product-icon { width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.06);display:grid;place-items:center;color:var(--green);font-size:13px;font-weight:800; }.product-feature h3 { font:600 30px 'Space Grotesk',sans-serif;letter-spacing:-.03em;color:#fff;margin-bottom:9px; }.product-feature p { color:#8997ab;max-width:420px;font-size:14px;line-height:1.7; }.product-link { display:block;color:#dce6f5;font-size:12px;margin-top:20px; }.product-number { position:absolute;right:28px;top:26px;font:500 54px 'Space Grotesk',sans-serif;color:rgba(255,255,255,.025); }.product-kamela { grid-row:span 2;min-height:676px;background:linear-gradient(155deg,rgba(48,232,154,.10),rgba(11,19,33,.8) 55%); }.mini-phone { align-self:center;width:230px;padding:24px 20px;background:#07100d;border:1px solid rgba(48,232,154,.24);border-radius:26px;box-shadow:0 28px 70px rgba(0,0,0,.35);transform:rotate(-3deg); }.mini-phone-head { color:#61756b;font-size:9px;margin-bottom:20px; }.mini-phone strong { display:block;color:#fff;font-size:28px; }.mini-phone small { color:#60806f;font-size:9px; }.mini-list { margin-top:24px;display:grid;gap:9px; }.mini-list i { display:block;height:34px;border-radius:8px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.05); }
.suite-banner { display:grid;grid-template-columns:1fr 1.1fr auto;gap:32px;align-items:center;margin-top:16px;padding:38px;background:linear-gradient(100deg,rgba(47,101,255,.10),rgba(48,232,154,.06));border:1px solid var(--border);border-radius:18px; }.suite-banner h3 { color:#fff;font:600 27px 'Space Grotesk',sans-serif;margin-bottom:6px; }.suite-banner p:not(.premium-kicker) { color:#8997ab;font-size:13px;line-height:1.6; }.suite-pills { display:flex;gap:7px;flex-wrap:wrap; }.suite-pills span { padding:7px 10px;border:1px solid var(--border);border-radius:999px;color:#8492a7;font:9px 'IBM Plex Mono',monospace; }
.premium-platform { padding:130px 56px;background:#070b14;border-top:1px solid var(--border);position:relative;z-index:1; }.premium-platform-grid { display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:center; }.text-link { display:inline-flex;gap:8px;color:var(--green);font-size:13px;text-decoration:none;margin-top:24px; }.principle-grid { display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:16px;overflow:hidden; }.principle-grid>div { background:#0b1320;padding:30px; }.principle-grid i { color:var(--green);font-size:20px; }.principle-grid h4 { color:#fff;font-size:14px;margin:18px 0 7px; }.principle-grid p { color:#718096;font-size:12px;line-height:1.6; }
.premium-cta { padding:140px 56px;text-align:center;position:relative;overflow:hidden;border-top:1px solid var(--border); }.premium-cta .cc-inner { display:flex;flex-direction:column;align-items:center;position:relative;z-index:2; }.premium-cta .premium-kicker { justify-content:center; }.premium-cta-glow { position:absolute;width:700px;height:300px;left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(48,232,154,.11),transparent 67%); }
.platform-hero { min-height:78vh;padding:180px 56px 100px;display:flex;align-items:center;position:relative;overflow:hidden;border-bottom:1px solid var(--border); }.platform-hero-inner { width:100%;position:relative;z-index:2; }.platform-layers { background:#0a101c; }.layer-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px; }.layer-grid article { min-height:290px;padding:30px;background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.014));border:1px solid var(--border);border-radius:16px;position:relative; }.layer-grid article>span { position:absolute;right:25px;top:22px;font:10px 'IBM Plex Mono',monospace;color:#435067; }.layer-grid article>i { display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--green-soft);color:var(--green);font-size:18px; }.layer-grid h3 { color:#fff;font:600 20px 'Space Grotesk',sans-serif;margin:56px 0 10px; }.layer-grid p { color:#7f8da1;font-size:13px;line-height:1.7; }.platform-stack { display:grid;gap:10px; }.platform-stack>div { padding:22px 26px;border:1px solid var(--border);border-radius:12px;background:#0d1624; }.platform-stack span { display:block;font:8px 'IBM Plex Mono',monospace;letter-spacing:.14em;color:var(--green);margin-bottom:8px; }.platform-stack strong { color:#dce5f3;font-size:13px;font-weight:500; }.build-process { background:#0a101c;border-top:1px solid var(--border); }.process-line { display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border); }.process-line>div { padding:30px 28px;border-right:1px solid var(--border); }.process-line>div:last-child { border-right:0; }.process-line span { font:10px 'IBM Plex Mono',monospace;color:var(--green); }.process-line h4 { color:#fff;font-size:16px;margin:35px 0 9px; }.process-line p { color:#7f8da1;font-size:12px;line-height:1.65; }
@media(max-width:1024px){.premium-hero,.product-intro,.premium-platform,.premium-cta,.platform-hero,.platform-layers,.build-process{padding-left:24px;padding-right:24px}.premium-hero-grid,.premium-platform-grid{grid-template-columns:1fr;gap:54px}.premium-hero{padding-top:130px}.product-stage{max-width:720px;width:100%;margin:auto}.suite-banner{grid-template-columns:1fr}.layer-grid{grid-template-columns:1fr 1fr}.process-line{grid-template-columns:1fr 1fr}.cc-premium .cc-wrap{padding-top:0}}
@media(max-width:640px){.premium-title{font-size:43px}.premium-lead{font-size:16px}.product-showcase,.layer-grid{grid-template-columns:1fr}.product-kamela{grid-row:auto;min-height:590px}.stage-window{transform:none}.stage-body{grid-template-columns:42px 1fr;min-height:330px}.stage-side{padding:15px 0}.stage-side span{width:28px;height:28px}.stage-content{padding:16px}.stage-metrics{grid-template-columns:1fr}.stage-metrics>div:nth-child(n+2){display:none}.stage-chart{margin-top:10px}.float-one{left:0}.float-two{right:0}.process-line{grid-template-columns:1fr}.process-line>div{border-right:0;border-bottom:1px solid var(--border)}.product-intro,.platform-layers,.build-process{padding-top:85px;padding-bottom:85px}.premium-platform,.premium-cta{padding-top:95px;padding-bottom:95px}.premium-proof{gap:12px}.product-feature{min-height:300px;padding:26px}.suite-banner{padding:28px}.premium-hero{padding-bottom:70px}.cc-premium .cc-logo img{height:40px}}

/* Circle Core software OEM homepage */
.oem-home { background:#050914; }
.oem-home .bg-canvas { opacity:.42; }
.oem-home .cc-nav { border-bottom:1px solid rgba(255,255,255,.055); }
.oem-hero { min-height:100vh;padding:142px 54px 64px;display:flex;align-items:center;position:relative;overflow:hidden;background:radial-gradient(circle at 75% 36%,rgba(4,208,138,.085),transparent 30%),linear-gradient(135deg,#050914 0%,#07101c 55%,#050914 100%); }
.oem-grid,.oem-cta-grid { position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,transparent,black 18%,black 78%,transparent); }
.oem-beam { position:absolute;width:880px;height:1px;right:-100px;top:26%;background:linear-gradient(90deg,transparent,rgba(21,231,159,.58),transparent);transform:rotate(-20deg);box-shadow:0 0 26px rgba(21,231,159,.18); }
.oem-hero-grid { display:grid;grid-template-columns:.78fr 1.22fr;gap:64px;align-items:center;position:relative;z-index:2;width:100%; }
.oem-hero-copy { min-width:0; }
.oem-eyebrow,.oem-section-index { font:9px 'IBM Plex Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:#73839a; }
.oem-eyebrow { display:flex;align-items:center;gap:12px;margin-bottom:28px; }
.oem-eyebrow span { padding:7px 9px;border:1px solid rgba(26,226,154,.34);color:#2be7a4;background:rgba(26,226,154,.055); }
.oem-title { margin:0;color:#f8fbff;font:600 clamp(51px,5.2vw,79px)/.98 'Space Grotesk',sans-serif;letter-spacing:-.055em; }
.oem-title em,.oem-section-head h2 em,.oem-cta h2 em { font-style:normal;color:#48e4ad; }
.oem-lead { max-width:650px;margin:28px 0 0;color:#96a4b8;font-size:17px;line-height:1.78; }
.oem-actions { display:flex;gap:12px;flex-wrap:wrap;margin-top:34px; }
.oem-assurance { display:grid;grid-template-columns:auto 1fr auto 1fr;gap:12px 14px;align-items:center;margin-top:42px;padding-top:25px;border-top:1px solid rgba(255,255,255,.08); }
.oem-assurance>span { color:#36dfa3;font:10px 'IBM Plex Mono',monospace; }
.oem-assurance p { margin:0; }.oem-assurance strong,.oem-assurance small { display:block; }.oem-assurance strong { color:#dfe7f2;font-size:11px;margin-bottom:4px; }.oem-assurance small { color:#5e6d82;font-size:9px; }
.oem-hero-visual { min-width:0;display:block;position:relative;padding:12px;border:1px solid rgba(255,255,255,.12);background:rgba(7,14,27,.74);box-shadow:0 48px 120px rgba(0,0,0,.52);text-decoration:none;transition:transform .45s,border-color .35s; }
.oem-hero-visual:hover { transform:translateY(-7px);border-color:rgba(40,227,162,.36); }
.oem-hero-visual:after { content:'';position:absolute;inset:8%;z-index:-1;background:rgba(16,213,144,.15);filter:blur(80px); }
.oem-hero-visual img { width:100%;display:block;aspect-ratio:1.5/1;object-fit:cover;object-position:center;border:1px solid rgba(255,255,255,.08); }
.oem-visual-head,.oem-visual-foot { display:flex;align-items:center;justify-content:space-between;gap:16px;font:8px 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#6d7d93; }
.oem-visual-head { padding:5px 4px 15px; }.oem-visual-head span { color:#b2bfd0; }.oem-visual-head i { display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:#23e59f;box-shadow:0 0 12px #23e59f; }
.oem-visual-foot { padding:15px 4px 4px; }.oem-visual-foot i { margin-left:auto;color:#2ce3a3;font-size:14px; }
.oem-spec-bar { position:absolute;left:0;right:0;bottom:0;border-top:1px solid rgba(255,255,255,.07);background:rgba(4,9,18,.76); }
.oem-spec-bar .cc-inner { height:48px;display:flex;align-items:center;justify-content:space-between;gap:22px; }
.oem-spec-bar span { color:#596a80;font:8px 'IBM Plex Mono',monospace;letter-spacing:.14em; }
.oem-spec-bar span:first-child { color:#2de2a3; }

.oem-products,.oem-model { position:relative;z-index:2;padding:128px 54px;background:#080e19;border-top:1px solid rgba(255,255,255,.07); }
.oem-section-head { display:grid;grid-template-columns:1fr .78fr;gap:90px;align-items:end;margin-bottom:54px; }
.oem-section-head h2 { margin:17px 0 0;color:#f5f8fd;font:600 clamp(38px,4.4vw,62px)/1.04 'Space Grotesk',sans-serif;letter-spacing:-.045em; }
.oem-section-head>p { color:#7f8da2;font-size:15px;line-height:1.78;margin:0 0 4px; }
.oem-product-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.oem-product { display:grid;grid-template-columns:1.08fr .92fr;min-height:310px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(145deg,rgba(255,255,255,.032),rgba(255,255,255,.012));overflow:hidden;text-decoration:none;transition:transform .35s,border-color .35s,background .35s; }
.oem-product:hover { transform:translateY(-5px);border-color:rgba(42,226,160,.30);background:rgba(255,255,255,.035); }
.oem-product-kamela { grid-column:1/-1;grid-template-columns:1.35fr .65fr;min-height:480px; }
.oem-product-image { position:relative;min-width:0;background:#050b14;overflow:hidden; }
.oem-product-image img { width:100%;height:100%;object-fit:cover;object-position:center;display:block;opacity:.9;transition:transform .5s,opacity .4s; }
.oem-product:hover .oem-product-image img { transform:scale(1.025);opacity:1; }
.oem-product-image>span { position:absolute;left:15px;top:15px;padding:7px 9px;background:rgba(4,9,18,.88);border:1px solid rgba(255,255,255,.13);color:#9dacbf;font:8px 'IBM Plex Mono',monospace;letter-spacing:.13em; }
.oem-product-copy { padding:35px;display:flex;flex-direction:column;justify-content:center; }
.oem-product-copy p { color:#2ee2a3;font:8px 'IBM Plex Mono',monospace;letter-spacing:.17em;margin-bottom:16px; }
.oem-product-copy h3 { color:#fff;font:600 clamp(25px,2.5vw,38px) 'Space Grotesk',sans-serif;letter-spacing:-.035em;margin-bottom:12px; }
.oem-product-copy>span { color:#8492a7;font-size:12px;line-height:1.7; }
.oem-product-copy strong { color:#dfe7f3;font-size:10px;font-weight:500;margin-top:26px; }.oem-product-copy strong i { color:#2ee2a3;margin-left:5px; }
.oem-product-architectural { background:linear-gradient(135deg,rgba(29,91,164,.11),rgba(255,255,255,.014)); }
.oem-architecture { position:relative;display:grid;place-items:center;min-height:270px;background-color:#07101e;background-image:linear-gradient(rgba(79,120,174,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(79,120,174,.11) 1px,transparent 1px);background-size:28px 28px;overflow:hidden; }
.oem-architecture>span { position:absolute;top:18px;left:20px;color:rgba(255,255,255,.13);font:600 60px 'Space Grotesk',sans-serif; }.oem-architecture>i { color:#36dfa3;font-size:72px;filter:drop-shadow(0 0 30px rgba(54,223,163,.18)); }.oem-architecture>div { position:absolute;bottom:18px;display:flex;gap:7px; }.oem-architecture b { padding:6px 7px;border:1px solid rgba(255,255,255,.09);color:#617189;font:7px 'IBM Plex Mono',monospace;letter-spacing:.1em; }

.oem-model { background:#050914; }
.oem-model-grid { display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(255,255,255,.09); }
.oem-model-grid article { min-height:290px;padding:30px;border-right:1px solid rgba(255,255,255,.09);position:relative;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent); }
.oem-model-grid article:last-child { border-right:0; }.oem-model-grid article>span { position:absolute;right:22px;top:20px;color:#425168;font:9px 'IBM Plex Mono',monospace; }.oem-model-grid article>i { color:#34e1a2;font-size:23px; }.oem-model-grid h3 { color:#f4f7fc;font:600 17px 'Space Grotesk',sans-serif;margin:68px 0 12px; }.oem-model-grid p { color:#728096;font-size:12px;line-height:1.7; }
.oem-capability { display:grid;grid-template-columns:1fr 1.15fr auto;gap:36px;align-items:center;margin-top:14px;padding:34px;border:1px solid rgba(45,226,163,.2);background:linear-gradient(90deg,rgba(45,226,163,.055),rgba(255,255,255,.015)); }
.oem-capability p { color:#2ee2a3;font:8px 'IBM Plex Mono',monospace;letter-spacing:.16em;margin-bottom:9px; }.oem-capability h3 { color:#eaf0f8;font:500 19px/1.35 'Space Grotesk',sans-serif;max-width:410px; }
.oem-capability-tags { display:flex;gap:7px;flex-wrap:wrap; }.oem-capability-tags span { padding:7px 9px;border:1px solid rgba(255,255,255,.09);color:#7e8da2;font:8px 'IBM Plex Mono',monospace; }

.oem-cta { position:relative;overflow:hidden;padding:140px 54px;background:radial-gradient(circle at 50% 50%,rgba(34,224,158,.085),transparent 35%),#07101b;text-align:center;border-top:1px solid rgba(255,255,255,.07); }
.oem-cta .cc-inner { position:relative;z-index:2;display:flex;flex-direction:column;align-items:center; }.oem-cta .cc-inner>p { color:#32dfa2;font:9px 'IBM Plex Mono',monospace;letter-spacing:.18em;margin-bottom:24px; }.oem-cta h2 { color:#f8fbff;font:600 clamp(40px,5vw,68px)/1.04 'Space Grotesk',sans-serif;letter-spacing:-.05em; }.oem-cta .cc-inner>span { max-width:720px;margin-top:24px;color:#8795aa;font-size:15px;line-height:1.8; }

@media(max-width:1120px){.oem-hero,.oem-products,.oem-model,.oem-cta{padding-left:24px;padding-right:24px}.oem-hero-grid{grid-template-columns:1fr;gap:52px}.oem-hero{padding-top:130px;padding-bottom:92px}.oem-hero-copy{max-width:790px}.oem-hero-visual{max-width:920px}.oem-section-head{grid-template-columns:1fr;gap:24px}.oem-product{grid-template-columns:1fr}.oem-product-kamela{grid-template-columns:1fr}.oem-product-image{min-height:300px}.oem-product-kamela .oem-product-image{min-height:440px}.oem-model-grid{grid-template-columns:1fr 1fr}.oem-model-grid article:nth-child(2){border-right:0}.oem-model-grid article:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.09)}.oem-capability{grid-template-columns:1fr}.oem-spec-bar span:nth-child(3){display:none}}
@media(max-width:700px){.oem-hero{padding-top:112px}.oem-title{font-size:46px}.oem-lead{font-size:15px}.oem-hero-visual{padding:7px}.oem-visual-head strong,.oem-visual-foot span:nth-child(n+2){display:none}.oem-visual-foot{justify-content:space-between}.oem-assurance{grid-template-columns:auto 1fr}.oem-product-grid,.oem-model-grid{grid-template-columns:1fr}.oem-product-kamela{grid-column:auto}.oem-product-image,.oem-product-kamela .oem-product-image{min-height:240px}.oem-product-copy{padding:27px}.oem-model-grid article{border-right:0;border-bottom:1px solid rgba(255,255,255,.09)}.oem-model-grid article:last-child{border-bottom:0}.oem-spec-bar span:nth-child(n+2){display:none}.oem-products,.oem-model{padding-top:90px;padding-bottom:90px}.oem-capability{padding:26px}.oem-cta{padding-top:100px;padding-bottom:100px}}

