/* ==========================================================
   ICON BALI DIGITAL — ENTERPRISE UI STANDARD v1.0
   Phase 1 / Low-risk override layer for cPanel deployment
   Load this stylesheet LAST on every page.
   ========================================================== */

:root {
  /* Corporate palette */
  --ib-bg-primary: #06111d;
  --ib-bg-secondary: #0b1624;
  --ib-bg-surface: #0f1c2d;
  --ib-bg-surface-strong: #0f172a;
  --ib-border: rgba(255,255,255,.08);
  --ib-border-strong: rgba(255,255,255,.12);

  --ib-text-primary: #f8fafc;
  --ib-text-secondary: #b7c7d8;
  --ib-text-muted: #8fa3b8;

  --ib-brand: #38bdf8;
  --ib-brand-hover: #58d5ff;
  --ib-brand-dark: #0077b6;

  /* Product accents */
  --ib-vdeck: #3b82f6;
  --ib-opsdeck: #10b981;
  --ib-cydeck: #ef4444;
  --ib-workdeck: #d97706;

  /* Typography */
  --ib-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ib-display: clamp(2.75rem, 5vw, 4.25rem);
  --ib-h1: clamp(2.4rem, 4vw, 3.25rem);
  --ib-h2: clamp(2rem, 3vw, 2.5rem);
  --ib-h3: clamp(1.35rem, 2vw, 1.75rem);
  --ib-body-lg: 1.125rem;
  --ib-body: 1rem;
  --ib-small: .875rem;

  /* Radius */
  --ib-radius-sm: 8px;
  --ib-radius-md: 12px;
  --ib-radius-lg: 18px;
  --ib-radius-xl: 24px;
  --ib-radius-pill: 999px;

  /* Spacing */
  --ib-space-1: 4px;
  --ib-space-2: 8px;
  --ib-space-3: 12px;
  --ib-space-4: 16px;
  --ib-space-5: 24px;
  --ib-space-6: 32px;
  --ib-space-7: 48px;
  --ib-space-8: 64px;
  --ib-space-9: 96px;
  --ib-space-10: 120px;

  /* Effects */
  --ib-shadow-card: 0 18px 50px rgba(0,0,0,.22);
  --ib-shadow-elevated: 0 24px 70px rgba(0,0,0,.32);
  --ib-transition: 180ms ease;
}

html { color-scheme: dark; }

body {
  font-family: var(--ib-font-sans);
  background: var(--ib-bg-primary);
  color: var(--ib-text-primary);
  font-size: var(--ib-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body, button, input, textarea, select { font-family: var(--ib-font-sans); }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ib-brand);
  outline-offset: 3px;
}

.container {
  max-width: 1320px;
  padding-inline: clamp(24px, 4vw, 48px);
}

/* ---------- Type hierarchy ---------- */
.section-title { margin-bottom: clamp(44px, 6vw, 64px); }
.section-title span {
  color: var(--ib-brand);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .14em;
}
.section-title h2 {
  font-size: var(--ib-h2);
  line-height: 1.18;
  letter-spacing: -.025em;
  font-weight: 700;
  margin-top: 14px;
}
.section-title p,
.section-title-p {
  color: var(--ib-text-secondary);
  font-size: var(--ib-body-lg);
  line-height: 1.75;
}

/* ---------- Buttons ---------- */
.btn-primary,
.btn-secondary,
.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: var(--ib-radius-md);
  font-size: .9375rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background var(--ib-transition), border-color var(--ib-transition), color var(--ib-transition), transform var(--ib-transition), box-shadow var(--ib-transition);
}

.btn-primary,
.btn-secondary { padding: 0 24px; }

.btn-primary {
  background: linear-gradient(135deg, var(--ib-brand-dark), #00a7cf);
  box-shadow: 0 10px 28px rgba(0,180,216,.18);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,180,216,.24); }

.btn-secondary {
  border: 1px solid var(--ib-border-strong);
  background: rgba(255,255,255,.035);
}
.btn-secondary:hover { border-color: rgba(56,189,248,.42); background: rgba(56,189,248,.06); }

.nav-btn { min-height: 38px; padding: 0 18px; }

/* ---------- Header / navigation ---------- */
.navbar {
  background: rgba(6,17,29,.9);
  border-bottom-color: var(--ib-border);
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
}

.logo {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.015em;
  background: none;
  -webkit-text-fill-color: var(--ib-text-primary);
  color: var(--ib-text-primary);
}

.nav-menu { gap: clamp(24px, 3vw, 38px); }
.nav-menu a { color: #d6e1ec; font-size: .9375rem; font-weight: 500; }
.nav-menu a:hover { color: var(--ib-brand-hover); }
.nav-menu a.active { color: var(--ib-brand); }

.dropdown-content {
  background: rgba(15,28,45,.98);
  border-color: rgba(56,189,248,.18);
  border-radius: var(--ib-radius-md);
  box-shadow: var(--ib-shadow-card);
}
.dropdown-content a { color: var(--ib-text-secondary) !important; }
.dropdown-content a:hover { color: var(--ib-text-primary) !important; background: rgba(56,189,248,.08) !important; padding-left: 20px !important; }

/* ---------- Home hero ---------- */
.hero-slider { margin-top: 0; min-height: 720px; }
.hero-wrapper { gap: clamp(48px, 7vw, 88px); padding-top: 72px; }
.hero-left { max-width: 660px; }

.hero-badge,
.benefit-tag,
.ztna-tag {
  border-radius: var(--ib-radius-pill);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.hero-badge {
  padding: 10px 16px;
  margin-bottom: 28px;
  color: #c8d6e5;
  background: rgba(255,255,255,.035);
  border-color: var(--ib-border);
}

.hero-left h1 {
  font-size: var(--ib-display);
  line-height: 1.07;
  font-weight: 700;
  letter-spacing: -.045em;
  margin-bottom: 26px;
}

.hero-left p {
  color: var(--ib-text-secondary);
  font-size: var(--ib-body-lg);
  line-height: 1.75;
  margin-bottom: 36px;
}

.hero-right img {
  border-radius: var(--ib-radius-xl);
  border-color: var(--ib-border);
  box-shadow: var(--ib-shadow-elevated);
}

.nav-btn-slide { width: 48px; height: 48px; font-size: 20px; }
.dot { width: 9px; height: 9px; }
.dot.active { width: 30px; background: var(--ib-brand); }

/* ---------- Home product cards ---------- */
.products { padding: var(--ib-space-10) 0; }
.product-grid { gap: 24px; }
.product-card {
  border-radius: var(--ib-radius-lg);
  padding: clamp(28px, 3vw, 36px);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  border-color: var(--ib-border);
  backdrop-filter: blur(12px);
  transition: transform var(--ib-transition), border-color var(--ib-transition), box-shadow var(--ib-transition);
}
.product-card:hover {
  transform: translateY(-5px);
  border-color: rgba(56,189,248,.26);
  box-shadow: var(--ib-shadow-card);
}
.product-icon { border-radius: var(--ib-radius-lg); }
.product-header h2 { font-size: 1.375rem; font-weight: 650; }
.product-header h2 span { color: var(--ib-text-muted); font-size: .9375rem; }
.product-card p { color: var(--ib-text-secondary); font-size: .9375rem; line-height: 1.75; }
.product-link { color: var(--ib-brand); }

/* ---------- Enterprise / contact ---------- */
.enterprise { padding: var(--ib-space-10) 0; }
.enterprise-box,
.lets-talk-box {
  border-radius: var(--ib-radius-xl);
  border-color: var(--ib-border);
  box-shadow: none;
}
.enterprise-box { padding: clamp(48px, 6vw, 72px); }
.enterprise-box h2,
.lets-talk-left h2 {
  font-size: var(--ib-h2);
  line-height: 1.18;
  letter-spacing: -.025em;
  font-weight: 700;
}
.enterprise-box p,
.lets-talk-left p { color: var(--ib-text-secondary); font-size: var(--ib-body-lg); line-height: 1.75; }
.stats { gap: 20px; margin-top: 52px; }
.stat-card,
.talk-item {
  border-radius: var(--ib-radius-lg);
  border-color: var(--ib-border);
  background: rgba(255,255,255,.03);
}
.stat-card { padding: 30px; }
.stat-card h3 { color: var(--ib-brand); font-size: 1.5rem; }
.stat-card p { color: var(--ib-text-secondary); }
.lets-talk-box { padding: clamp(40px, 6vw, 64px); }
.talk-item { padding: 22px 24px; }
.talk-item:hover { transform: translateY(-3px); border-color: rgba(56,189,248,.2); }

/* ---------- Product-page shared standard ---------- */
.vdeck-hero,
.opsdeck-hero,
.cydeck-hero,
.workdeck-hero {
  padding: 170px 0 72px;
}

.vdeck-hero h1,
.opsdeck-hero h1,
.cydeck-hero h1,
.workdeck-hero h1 {
  font-size: var(--ib-h1);
  line-height: 1.12;
  letter-spacing: -.035em;
  font-weight: 700;
  margin-bottom: 18px;
}

.vdeck-grid,
.opsdeck-features-grid,
.cydeck-grid,
.workdeck-grid { gap: 24px; margin: 44px 0; }

.vdeck-card,
.ops-card,
.cy-card,
.work-card,
.arch-card,
.stat-box,
.threat-alert-box {
  border-radius: var(--ib-radius-lg);
  box-shadow: none;
}

.vdeck-card,
.ops-card,
.cy-card,
.work-card {
  padding: clamp(28px, 3vw, 34px);
  background: rgba(255,255,255,.028);
  border-color: var(--ib-border);
  backdrop-filter: blur(8px);
  transition: transform var(--ib-transition), border-color var(--ib-transition), box-shadow var(--ib-transition);
}

.vdeck-card:hover,
.ops-card:hover,
.cy-card:hover,
.work-card:hover { transform: translateY(-4px); box-shadow: 0 15px 40px rgba(0,0,0,.16); }

.vdeck-card h3,
.ops-card h3,
.cy-card h3,
.work-card h3 { font-size: 1.25rem; line-height: 1.3; font-weight: 650; }

.vdeck-card p,
.ops-card p,
.cy-card p,
.work-card p,
.vdeck-card li { color: var(--ib-text-secondary); font-size: .9375rem; line-height: 1.7; }

.architecture-section { padding: 80px 0; background: rgba(255,255,255,.012); }
.architecture-box,
.arch-container,
.arch-container-cy,
.arch-container-work {
  border-radius: var(--ib-radius-xl);
  background: rgba(15,23,42,.72);
  padding: clamp(32px, 5vw, 48px);
}
.arch-card { background: rgba(15,23,42,.82); padding: 28px; }
.arch-card img,
.arch-container img,
.arch-container-cy img,
.arch-container-work img { border-radius: var(--ib-radius-md); }

/* Product identity remains intentionally distinct */
.vdeck-card:hover { border-color: rgba(59,130,246,.7); }
.ops-card:hover { border-color: rgba(16,185,129,.7); }
.cy-card:hover { border-color: rgba(239,68,68,.7); }
.work-card:hover { border-color: rgba(217,119,6,.7); }

/* ---------- Footer ---------- */
.footer { padding: 64px 0 48px; }
.footer-brand { gap: 18px; }
.footer-logo { width: 78px; }
.footer-text h3 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.01em;
  background: none;
  -webkit-text-fill-color: var(--ib-text-primary);
  color: var(--ib-text-primary);
}
.footer-text p {
  font-size: .875rem;
  font-weight: 400;
  color: var(--ib-text-muted);
  background: none;
  -webkit-text-fill-color: var(--ib-text-muted);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hero-slider { min-height: 760px; }
  .hero-wrapper { gap: 40px; }
}

@media (max-width: 991px) {
  .hero-slider { height: auto; min-height: 820px; }
  .hero-wrapper { padding-top: 130px; }
}

@media (max-width: 768px) {
  .container { padding-inline: 24px; }
  .hero-slider { min-height: 760px; }
  .hero-wrapper { padding-top: 120px; }
  .hero-left h1 { letter-spacing: -.035em; }
  .hero-left p, .section-title p, .section-title-p { font-size: 1rem; line-height: 1.7; }
  .btn-primary, .btn-secondary { width: 100%; }
  .enterprise-box, .lets-talk-box { border-radius: var(--ib-radius-lg); padding: 32px 24px; }
  .vdeck-hero, .opsdeck-hero, .cydeck-hero, .workdeck-hero { padding: 150px 0 60px; }
  .architecture-box, .arch-container, .arch-container-cy, .arch-container-work { padding: 28px 20px; border-radius: var(--ib-radius-lg); }
}


/* ==========================================================
   PHASE 1 CORRECTIVE — Readability & Density
   Approved visual direction retained; CSS-only refinement.
   ========================================================== */

/* Readability: keep meaningful body copy at enterprise-friendly sizes. */
.product-card p,
.enterprise-box p,
.lets-talk-left p,
.talk-item p,
.stat-card p,
.vdeck-card p,
.ops-card p,
.cy-card p,
.work-card p,
.vdeck-card li,
.ops-card li,
.cy-card li,
.work-card li,
.arch-card p,
.arch-container p,
.arch-container-cy p,
.arch-container-work p,
.vdeck-details p,
.vdeck-details li,
.benefits-detail p,
.benefits-detail li,
.cydeck-details p,
.cydeck-details li,
.workdeck-details p,
.workdeck-details li {
  font-size: 1rem;
  line-height: 1.72;
}

/* Slightly tighter enterprise section rhythm without changing structure. */
.products,
.enterprise {
  padding-top: 96px;
  padding-bottom: 96px;
}

.architecture-section {
  padding-top: 72px;
  padding-bottom: 72px;
}

.vdeck-details,
.benefits-detail,
.cydeck-details,
.workdeck-details {
  padding-bottom: 84px !important;
}

/* Product hero density refinement. */
.vdeck-hero,
.opsdeck-hero,
.cydeck-hero,
.workdeck-hero {
  padding-top: 156px;
  padding-bottom: 64px;
}

/* Card content remains readable while avoiding unnecessary height. */
.product-card {
  padding-top: 30px;
  padding-bottom: 30px;
}

.stat-card {
  padding: 28px;
}

.talk-item {
  padding: 20px 22px;
}

/* Mobile readability and rhythm. */
@media (max-width: 768px) {
  body {
    font-size: 1rem;
    line-height: 1.65;
  }

  .product-card p,
  .enterprise-box p,
  .lets-talk-left p,
  .talk-item p,
  .stat-card p,
  .vdeck-card p,
  .ops-card p,
  .cy-card p,
  .work-card p,
  .vdeck-card li,
  .ops-card li,
  .cy-card li,
  .work-card li,
  .arch-card p,
  .arch-container p,
  .arch-container-cy p,
  .arch-container-work p,
  .vdeck-details p,
  .vdeck-details li,
  .benefits-detail p,
  .benefits-detail li,
  .cydeck-details p,
  .cydeck-details li,
  .workdeck-details p,
  .workdeck-details li {
    font-size: 1rem;
    line-height: 1.7;
  }

  .products,
  .enterprise {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .architecture-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .vdeck-hero,
  .opsdeck-hero,
  .cydeck-hero,
  .workdeck-hero {
    padding-top: 138px;
    padding-bottom: 52px;
  }

  .vdeck-details,
  .benefits-detail,
  .cydeck-details,
  .workdeck-details {
    padding-bottom: 72px !important;
  }
}