/* =========================================================================
   ARKA AI — Main Website Stylesheet v2.0
   =========================================================================
   Derives from: brand/canonical/arka-design-system-v2.0.css
   Version: 2.0 — Complete rebrand
   ========================================================================= */

@import url('arka-design-system-v2.0.css');

/* =========================================================================
   ARKA AI OVERRIDES — platform-specific adjustments only
   ========================================================================= */

/* Hero: cooler radial glow for AI/platform context */
.hero::before {
  background: radial-gradient(
    ellipse 55% 50% at 50% 0%,
    rgba(59, 130, 246, 0.04),
    rgba(199, 163, 90, 0.03) 40%,
    transparent 70%
  );
}

/* Platform badge uses blue tint */
.hero-badge--platform {
  background: rgba(59, 130, 246, 0.06);
  border-color: rgba(59, 130, 246, 0.18);
  color: var(--color-info);
}

/* Problem cards — red tinted borders */
.card--problem {
  border-color: rgba(239, 68, 68, 0.12);
  background: rgba(239, 68, 68, 0.02);
}

.card--problem:hover {
  border-color: rgba(239, 68, 68, 0.25);
  background: rgba(239, 68, 68, 0.04);
}

/* Solution cards — green tinted borders */
.card--solution {
  border-color: rgba(16, 185, 129, 0.12);
  background: rgba(16, 185, 129, 0.02);
}

.card--solution:hover {
  border-color: rgba(16, 185, 129, 0.25);
  background: rgba(16, 185, 129, 0.04);
}

/* Module cards — blue tinted borders */
.card--module {
  border-color: rgba(59, 130, 246, 0.12);
  background: rgba(59, 130, 246, 0.02);
}

.card--module:hover {
  border-color: rgba(59, 130, 246, 0.25);
  background: rgba(59, 130, 246, 0.04);
}

/* Industry cards */
.card--industry {
  padding: var(--sp-10);
}

/* Two-column engagement layout */
.engage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-10);
}

.engage-card {
  background: linear-gradient(135deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--border-light);
  border-radius: var(--radius-3xl);
  padding: var(--sp-12);
  display: flex;
  flex-direction: column;
  transition: var(--transition-base);
}

.engage-card:hover {
  border-color: var(--border-gold);
}

@media (max-width: 768px) {
  .engage-grid { grid-template-columns: 1fr; }
}

/* Simulator banner */
.sim-banner {
  background: rgba(245, 158, 11, 0.06);
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid rgba(245, 158, 11, 0.12);
  text-align: center;
}

.sim-banner p {
  color: var(--slate-400);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  margin: 0;
}

/* Product Showcase Styles */
.product-showcase {
  margin-top: var(--sp-12);
}

.card--interactive {
  cursor: pointer;
  transition: all 0.3s ease;
  border-color: var(--border-light);
}

.card--interactive:hover {
  border-color: var(--border-gold-strong);
  background: var(--surface-3);
}

.card--interactive.active {
  border-color: var(--arka-gold);
  background: var(--arka-gold-dim);
  box-shadow: var(--shadow-gold);
}

.product-viewport {
  margin-top: var(--sp-10);
  background: var(--charcoal);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-2xl);
  position: relative;
}

.viewport-frame {
  padding: var(--sp-2);
  background: var(--slate-900);
  line-height: 0;
}

.viewport-frame img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.reveal-image {
  animation: revealImage 0.8s var(--ease-out) forwards;
}

@keyframes revealImage {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 768px) {
  .product-showcase .grid-3 {
    grid-template-columns: 1fr;
  }
}