:root {
  --bg-950: #050816;
  --bg-900: #0b1026;
  --bg-850: #0e1531;
  --bg-800: #111a3a;
  --bg-760: #15214a;
  --surface: rgba(18, 26, 58, 0.88);
  --surface-strong: rgba(19, 30, 68, 0.96);
  --line: rgba(97, 234, 255, 0.2);
  --line-soft: rgba(126, 160, 255, 0.1);
  --line-orange: rgba(255, 106, 20, 0.22);
  --text-1: #ffffff;
  --text-2: #edf4ff;
  --text-3: #bfd0ef;
  --text-4: #8fa4c7;
  --cyan: #56e7ff;
  --teal: #27d8d6;
  --orange: #ff6a14;
  --orange-2: #ff8d32;
  --green: #7bf3b2;
  --yellow: #ffd166;
  --danger: #ff7c93;
  --radius-xl: 34px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --shadow-xl: 0 32px 90px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.36);
  --glow-cyan: 0 0 0 1px rgba(86, 231, 255, 0.25), 0 0 28px rgba(86, 231, 255, 0.2);
  --glow-orange: 0 0 0 1px rgba(255, 106, 20, 0.25), 0 0 26px rgba(255, 106, 20, 0.2);
  --container: min(1160px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text-2);
  font-family: 'Inter', sans-serif;
  background:
    radial-gradient(circle at 18% 10%, rgba(86, 231, 255, 0.12), transparent 18%),
    radial-gradient(circle at 86% 10%, rgba(255, 106, 20, 0.12), transparent 16%),
    linear-gradient(180deg, #081022 0%, #0b1026 42%, #111a3a 100%);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(86, 231, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(86, 231, 255, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.5), transparent 78%);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, h5 { margin: 0 0 10px; line-height: 1.02; letter-spacing: -0.03em; color: var(--text-1); }
p, li, td, th, label, input, textarea, select, button { font: inherit; }
p, li { color: var(--text-3); line-height: 1.6; }
small { color: var(--text-4); }

.site-shell { width: var(--container); margin: 0 auto; padding-bottom: 32px; }
.topbar {
  position: sticky;
  top: 10px;
  z-index: 80;
  margin-top: 10px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(7,13,30,0.95), rgba(8,14,31,0.78));
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-lg);
}
.brand img { width: 126px; }
.main-nav, .top-actions, .hero-actions, .hero-metrics, .logo-strip, .cards-grid, .grid-2, .grid-3, .grid-4, .comparison-grid, .contact-grid, .inline-actions, .badge-row, .footer-links, .process-row, .portal-kpis { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
.main-nav { justify-content: center; align-items: center; }
.main-nav a {
  position: relative;
  color: var(--text-3);
  font-size: .92rem;
  padding: 10px 4px;
}
.main-nav a.active { color: var(--cyan); }
.main-nav a.active::after {
  content: '';
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: -6px;
  width: 42px; height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(86,231,255,0), rgba(86,231,255,0.95), rgba(86,231,255,0));
  box-shadow: 0 0 18px rgba(86,231,255,0.6);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; cursor: pointer;
  padding: 13px 20px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  box-shadow: var(--glow-orange);
  transition: transform .18s ease, opacity .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.secondary {
  background: linear-gradient(180deg, rgba(86,231,255,0.12), rgba(86,231,255,0.04));
  border: 1px solid var(--line);
  box-shadow: var(--glow-cyan);
}
.btn.ghost {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: none;
}
.btn.small { padding: 10px 14px; font-size: .88rem; }

.eyebrow, .tag, .status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid rgba(86,231,255,0.18);
  background: rgba(86,231,255,0.08);
  color: #bffaff; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em;
}
.tag.orange, .status-pill.orange { border-color: var(--line-orange); background: rgba(255,106,20,0.08); color: #ffd0b0; }
.tag.green, .status-pill.green { border-color: rgba(123,243,178,0.18); background: rgba(123,243,178,0.08); color: #b7ffd1; }
.tag.yellow, .status-pill.yellow { border-color: rgba(255,209,102,0.18); background: rgba(255,209,102,0.08); color: #ffe3a8; }
.tag.red, .status-pill.red { border-color: rgba(255,124,147,0.2); background: rgba(255,124,147,0.08); color: #ffc2d0; }
.small-muted { color: var(--text-4); }

.flash {
  margin: 16px 0;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}
.flash-success { border-color: rgba(123,243,178,0.24); }
.flash-error { border-color: rgba(255,124,147,0.24); }

main { display: grid; gap: 26px; padding-top: 24px; }
section { display: grid; gap: 18px; }
.section-shell, .glass-panel, .card, .service-card, .feature-card, .plan-card, .studio-card, .portal-card, .contact-card, .value-card, .pricing-card, .metric-card, .kpi-card, .dashboard-card, .table-card, .panel, .list-card, .approval-card, .file-card, .permission-card, .login-card, .demo-box {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(19, 30, 68, 0.96), rgba(11, 18, 39, 0.94));
  box-shadow: var(--shadow-lg);
}
.section-shell, .glass-panel, .card, .service-card, .feature-card, .plan-card, .studio-card, .portal-card, .contact-card, .value-card, .pricing-card, .metric-card, .kpi-card, .dashboard-card, .panel, .list-card, .approval-card, .file-card, .permission-card, .login-card, .demo-box { padding: 22px; }
.table-card { overflow: hidden; }
.table-card table { width: 100%; border-collapse: collapse; }
.table-card th, .table-card td { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); text-align: left; }
.table-card th { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: #d1ecff; background: rgba(255,255,255,0.02); }
.table-card td { color: var(--text-3); }

.page-hero { min-height: 440px; }
.hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: 20px; align-items: stretch; }
.hero-copy { padding: 12px 0 8px; }
.hero-copy h1 { font-size: clamp(2.8rem, 5vw, 4.65rem); max-width: 9ch; }
.hero-copy p.lead { max-width: 52ch; font-size: 1.02rem; }
.hero-copy.center { text-align: center; }
.hero-copy.center h1 { max-width: none; }
.hero-copy.center p { margin-left: auto; margin-right: auto; }
.hero-metrics .metric-card { flex: 1 1 160px; min-width: 150px; text-align: center; }
.metric-card strong { display: block; font-size: 2rem; color: var(--text-1); }
.metric-card span { color: var(--text-3); font-size: .94rem; }

.hero-collage, .feature-image, .showcase-image, .map-box, .calendar-box, .gallery-strip, .portal-preview {
  position: relative; overflow: hidden; min-height: 100%;
  border-radius: 28px;
  border: 1px solid rgba(86,231,255,0.18);
  background: linear-gradient(180deg, rgba(16,24,55,0.96), rgba(13,19,42,0.96));
  box-shadow: var(--shadow-xl);
}
.hero-collage img, .feature-image img, .showcase-image img, .map-box img, .calendar-box img, .gallery-strip img, .portal-preview img { width: 100%; height: 100%; object-fit: cover; }
.hero-collage::after, .feature-image::after, .showcase-image::after, .gallery-strip::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9,14,31,0.04), rgba(9,14,31,0.18));
}

.logo-strip { padding: 12px 16px; border-radius: 20px; border: 1px solid var(--line-soft); background: rgba(255,255,255,0.04); justify-content: space-between; }
.logo-chip { flex: 1 1 120px; min-width: 100px; text-align: center; color: #d8dfef; font-weight: 600; opacity: .92; }

.section-title { display: grid; gap: 6px; }
.section-title h2 { font-size: clamp(2rem, 3vw, 3.2rem); }
.section-title.center { text-align: center; }
.section-title.center p { max-width: 64ch; margin: 0 auto; }

.grid-4 > *, .grid-3 > *, .cards-grid > *, .comparison-grid > * { flex: 1 1 calc(25% - 14px); min-width: 220px; }
.grid-3 > * { flex-basis: calc(33.333% - 14px); }
.grid-2 > * { flex: 1 1 calc(50% - 14px); min-width: 280px; }
.service-card, .feature-card, .value-card, .portal-card, .contact-card, .permission-card { box-shadow: var(--glow-cyan), var(--shadow-lg); }
.service-card h3, .feature-card h3, .plan-card h3, .studio-card h3, .pricing-card h3, .portal-card h3 { font-size: 1.2rem; }
.link-inline { color: var(--cyan); font-weight: 700; }

.home-feature-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px; }
.home-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.process-step {
  text-align: center; padding: 14px 10px;
}
.process-step .step-dot {
  width: 44px; height: 44px; border-radius: 999px; margin: 0 auto 12px;
  display: grid; place-items: center; font-weight: 800;
  color: var(--cyan); border: 1px solid var(--line); background: rgba(86,231,255,0.08); box-shadow: var(--glow-cyan);
}
.bottom-showcase { display: grid; grid-template-columns: 1fr 320px; gap: 18px; }

.studio-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.studio-card img { width: 100%; height: 170px; object-fit: cover; border-radius: 16px; margin-bottom: 14px; }
.studio-card ul { margin: 0 0 14px; padding-left: 18px; }
.availability { display: flex; justify-content: space-between; align-items: center; color: var(--green); font-size: .9rem; margin-bottom: 10px; }
.equipment-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.equipment-card { padding: 18px 14px; text-align: center; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,0.04); box-shadow: var(--glow-cyan); }
.equipment-card strong { display: block; margin-bottom: 6px; }
.schedule-card { padding: 16px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255,255,255,0.04); box-shadow: var(--glow-cyan); }
.schedule-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 12px 0 16px; }
.schedule-grid span { padding: 8px 6px; border-radius: 10px; text-align: center; background: rgba(255,255,255,0.06); font-size: .8rem; }
.schedule-grid span.busy { background: linear-gradient(135deg, var(--orange), var(--orange-2)); color: #fff; }
.schedule-grid span.free { background: rgba(86,231,255,0.14); color: #d4fbff; }
.differential-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.review-card { padding: 16px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); }

.service-grid-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.service-grid-6 .service-card { min-height: 210px; }
.process-band { padding: 26px 22px; border-radius: var(--radius-lg); border: 1px solid var(--line-soft); background: rgba(255,255,255,0.04); }
.process-band .process-row { justify-content: space-between; }
.process-band .process-step { flex: 1 1 22%; }
.faq-list details { border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); padding: 14px 16px; }
.faq-list details + details { margin-top: 10px; }
.faq-list summary { cursor: pointer; font-weight: 700; color: var(--text-1); }
.faq-list p { margin-bottom: 0; }
.cta-band { display: grid; gap: 14px; place-items: center; text-align: center; padding: 28px; border-radius: var(--radius-lg); border: 1px solid var(--line-soft); background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); }

.plan-intro { max-width: 760px; margin: 0 auto; text-align: center; }
.plan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.plan-card.highlight { border-color: var(--line-orange); box-shadow: var(--glow-orange), var(--shadow-xl); transform: translateY(-8px); }
.plan-card .price { font-size: 2.35rem; font-weight: 900; color: var(--text-1); margin: 10px 0 6px; }
.plan-card ul { padding-left: 18px; margin: 12px 0 18px; }
.comparison-table th:first-child, .comparison-table td:first-child { width: 180px; }
.addon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.studio-mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.about-hero { text-align: center; }
.about-story { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: center; }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.differentials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.team-ops-grid { display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: center; }
.partner-strip { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
.partner-strip span { text-align: center; padding: 10px 8px; border-radius: 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.06); color: #d3deef; font-size: .85rem; }

.contact-hero { text-align: center; }
.contact-form-wrap { padding: 24px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03)); box-shadow: var(--glow-cyan), var(--shadow-lg); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
label { display: grid; gap: 8px; color: var(--text-2); font-weight: 600; }
input, select, textarea {
  width: 100%; border-radius: 14px; border: 1px solid rgba(86,231,255,0.2);
  background: rgba(9, 15, 31, 0.78); color: var(--text-2);
  padding: 13px 14px;
}
textarea { min-height: 136px; resize: vertical; }
.contact-quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.contact-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.briefing-band { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 22px; border: 1px solid var(--line); background: rgba(255,255,255,0.04); }

.footer { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 20px; margin-top: 18px; padding: 28px 24px; border-radius: 24px; border: 1px solid var(--line-soft); background: rgba(255,255,255,0.03); }
.footer-brand img { width: 120px; margin-bottom: 14px; }
.footer-links { display: grid; gap: 8px; }
.footer-links strong { color: var(--text-1); }
.copyright { text-align: center; color: var(--text-4); font-size: .9rem; padding: 14px 0 22px; }

.login-shell { width: min(1040px, calc(100% - 40px)); margin: 40px auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; }
.demo-accounts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.portal-body {
  background:
    radial-gradient(circle at 14% 8%, rgba(86,231,255,0.1), transparent 18%),
    radial-gradient(circle at 84% 12%, rgba(255,106,20,0.08), transparent 15%),
    linear-gradient(180deg, #07101f 0%, #0b1026 100%);
}
.portal-shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; gap: 18px; width: min(1400px, calc(100% - 32px)); margin: 16px auto; }
.portal-sidebar {
  position: sticky; top: 14px; align-self: start; height: calc(100vh - 28px);
  padding: 20px 16px; border-radius: 28px; border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(12,20,44,0.95), rgba(8,13,30,0.94)); box-shadow: var(--shadow-xl);
  display: grid; grid-template-rows: auto 1fr auto auto; gap: 18px;
}
.portal-brand img { width: 118px; }
.portal-nav { display: grid; gap: 8px; }
.portal-nav a { padding: 12px 14px; border-radius: 16px; color: var(--text-3); }
.portal-nav a.active { background: rgba(86,231,255,0.1); border: 1px solid var(--line); color: #d7fcff; box-shadow: var(--glow-cyan); }
.portal-user-card { padding: 14px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); display: grid; gap: 6px; }
.portal-user-card span { color: var(--text-4); }
.portal-side-actions { display: grid; gap: 10px; }
.portal-main { display: grid; gap: 18px; align-content: start; }
.portal-topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 24px; border-radius: 28px; border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(18,30,67,0.96), rgba(10,17,37,0.96)); box-shadow: var(--shadow-lg);
}
.portal-topbar h1 { font-size: clamp(2rem, 3.2vw, 3rem); }
.portal-top-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.portal-search { display: flex; align-items: center; gap: 8px; min-width: 250px; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); }
.portal-search input { border: 0; padding: 0; background: transparent; }
.portal-search input:focus { outline: none; }
.portal-copy { color: var(--text-4); text-align: center; padding: 10px 0 18px; }
.portal-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi-card strong { font-size: 1.9rem; display: block; margin: 8px 0 4px; }
.dashboard-layout { display: grid; grid-template-columns: 1.25fr .85fr; gap: 18px; }
.dashboard-stack { display: grid; gap: 18px; }
.demand-card-mini, .ticket-mini, .activity-mini, .material-mini {
  padding: 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04);
}
.kanban-lite { display: grid; gap: 12px; }
.approval-card img { width: 100%; height: 118px; object-fit: cover; border-radius: 12px; margin-bottom: 12px; }
.portal-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.inline-form, form { display: grid; gap: 12px; }
.inline-form { grid-template-columns: 1fr auto; align-items: end; }
.inline-form select { min-width: 160px; }
.kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kanban-column { display: grid; gap: 12px; align-content: start; }
.kanban-card { padding: 16px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); }
.table-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 18px; }
.list-card ul { margin: 0; padding-left: 18px; }

@media (max-width: 1120px) {
  .hero-grid, .home-feature-grid, .about-story, .contact-split, .bottom-showcase, .dashboard-layout, .table-grid, .login-shell { grid-template-columns: 1fr; }
  .plan-grid, .service-grid-6, .studio-list, .value-grid, .differentials-grid, .partner-strip, .contact-quick-grid, .equipment-grid, .differential-grid, .review-grid, .portal-kpis, .portal-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .home-process { grid-template-columns: repeat(2, 1fr); }
  .portal-shell { grid-template-columns: 1fr; }
  .portal-sidebar { position: static; height: auto; }
  .kanban { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .site-shell, .login-shell, .portal-shell { width: min(100% - 16px, 100%); }
  .topbar { grid-template-columns: 1fr; justify-items: center; border-radius: 24px; }
  .main-nav { justify-content: center; row-gap: 6px; }
  .main-nav a.active::after { bottom: -2px; }
  .hero-copy h1, .portal-topbar h1 { font-size: 2.35rem; }
  .plan-grid, .service-grid-6, .studio-list, .value-grid, .differentials-grid, .partner-strip, .contact-quick-grid, .equipment-grid, .differential-grid, .review-grid, .portal-kpis, .portal-grid-3, .kanban, .home-process { grid-template-columns: 1fr; }
  .footer { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .briefing-band, .portal-topbar, .top-actions { flex-direction: column; align-items: stretch; }
}

.section { display: grid; gap: 18px; }
.hero-actions { align-items: center; }
.stat-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.stat-line:last-child { border-bottom: 0; }
.stat-line strong { color: var(--text-1); }
.actions-row { display: flex; gap: 10px; flex-wrap: wrap; }
.case-card { box-shadow: var(--glow-cyan), var(--shadow-lg); }
.metric-card.section-shell, .feature-card, .service-card, .value-card, .portal-card, .contact-card, .pricing-card { min-height: 100%; }
.panel h2, .section-shell h1, .section-shell h2 { font-size: clamp(1.9rem, 3vw, 3rem); }
.panel ul, .plan-card ul, .studio-card ul, .pricing-card ul, .service-card ul { margin: 0; padding-left: 18px; }
.portal-kpis > * { min-width: 220px; }
.faq-list { display: grid; gap: 10px; }

@media (max-width: 760px) {
  .hero-metrics { flex-direction: column; }
  .logo-strip { justify-content: center; }
  .portal-search { min-width: 0; width: 100%; }
}

.portal-body {
  background:
    linear-gradient(180deg, #40495b 0%, #2c3444 16%, #1b2230 46%, #151b28 100%),
    radial-gradient(circle at 22% 0%, rgba(255,255,255,0.16), transparent 24%),
    radial-gradient(circle at 80% 4%, rgba(255,145,66,0.16), transparent 18%),
    radial-gradient(circle at 60% 12%, rgba(80,214,255,0.12), transparent 18%);
}
.portal-body::before {
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: .7;
}
.portal-body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 26%, transparent 42%),
    radial-gradient(circle at 14% 18%, rgba(255,255,255,0.11), transparent 15%);
}
.portal-shell {
  grid-template-columns: 250px 1fr;
  width: min(1490px, calc(100% - 30px));
  gap: 16px;
  margin: 14px auto;
}
.portal-sidebar,
.portal-topbar,
.portal-breadcrumb-bar,
.portal-body .panel,
.portal-body .table-card,
.portal-body .list-card,
.portal-body .approval-card,
.portal-body .file-card,
.portal-body .permission-card,
.portal-body .kpi-card,
.portal-body .kanban-card,
.portal-body .dashboard-card,
.portal-body .section-shell,
.portal-body .welcome-panel,
.portal-body .board-panel,
.portal-body .info-panel,
.portal-body .side-panel,
.portal-body .demand-card-mini,
.portal-body .ticket-mini,
.portal-body .material-mini {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.11);
  background: linear-gradient(180deg, rgba(39,47,64,0.92), rgba(23,29,43,0.95));
  box-shadow: 0 22px 60px rgba(8,12,22,0.28), inset 0 1px 0 rgba(255,255,255,0.07);
}
.portal-sidebar::before,
.portal-topbar::before,
.portal-breadcrumb-bar::before,
.portal-body .panel::before,
.portal-body .table-card::before,
.portal-body .list-card::before,
.portal-body .approval-card::before,
.portal-body .file-card::before,
.portal-body .permission-card::before,
.portal-body .kpi-card::before,
.portal-body .kanban-card::before,
.portal-body .dashboard-card::before,
.portal-body .section-shell::before,
.portal-body .welcome-panel::before,
.portal-body .board-panel::before,
.portal-body .info-panel::before,
.portal-body .side-panel::before,
.portal-body .demand-card-mini::before,
.portal-body .ticket-mini::before,
.portal-body .material-mini::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.035) 34%, rgba(255,255,255,0.01) 70%);
  pointer-events: none;
}
.portal-sidebar > *,
.portal-topbar > *,
.portal-breadcrumb-bar > *,
.portal-body .panel > *,
.portal-body .table-card > *,
.portal-body .list-card > *,
.portal-body .approval-card > *,
.portal-body .file-card > *,
.portal-body .permission-card > *,
.portal-body .kpi-card > *,
.portal-body .kanban-card > *,
.portal-body .dashboard-card > *,
.portal-body .section-shell > *,
.portal-body .welcome-panel > *,
.portal-body .board-panel > *,
.portal-body .info-panel > *,
.portal-body .side-panel > *,
.portal-body .demand-card-mini > *,
.portal-body .ticket-mini > *,
.portal-body .material-mini > * { position: relative; z-index: 1; }
.portal-sidebar {
  top: 12px;
  height: calc(100vh - 24px);
  padding: 18px 14px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(30,39,56,0.98), rgba(18,24,36,0.97));
}
.portal-brand img { width: 110px; }
.portal-profile-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.12);
}
.portal-profile-card strong,
.user-pill strong { display: block; color: #f8fbff; font-size: .95rem; }
.portal-profile-card span,
.user-pill small { display: block; color: #cbd4e4; font-size: .74rem; }
.portal-avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(135deg, #f8c89a, #a86dff 72%);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
}
.portal-avatar.small {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: .84rem;
}
.portal-nav { gap: 6px; }
.portal-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  color: #d9e2ee;
  font-size: .94rem;
  background: rgba(255,255,255,0.015);
}
.portal-nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.32);
}
.portal-nav a.active {
  background: linear-gradient(90deg, rgba(255,154,68,0.18), rgba(76,220,255,0.10));
  border: 1px solid rgba(255,154,68,0.38);
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 0 18px rgba(255,154,68,0.14);
}
.portal-nav a.active .portal-nav-dot { background: #ff9d4c; }
.portal-main { gap: 14px; }
.portal-breadcrumb-bar,
.portal-topbar {
  border-radius: 20px;
  padding: 12px 16px;
}
.portal-breadcrumb-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.breadcrumb-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  color: #d2d9e7;
  font-size: .9rem;
}
.portal-toolbar,
.portal-top-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.notification-chip {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #9befff;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}
.notification-chip em {
  position: absolute;
  top: 5px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  font-size: .67rem;
  font-style: normal;
  color: #fff;
  background: #ff6449;
}
.user-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 6px;
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
}
.portal-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.portal-topbar h1 {
  font-size: clamp(1.9rem, 2.6vw, 2.45rem);
  letter-spacing: -0.02em;
}
.portal-topbar p { margin: 6px 0 0; color: #cfd8e6; }
.portal-search {
  min-width: 220px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.11);
}
.portal-dashboard-grid {
  display: grid;
  grid-template-columns: 1.55fr .85fr;
  gap: 14px;
}
.dashboard-main-stack,
.dashboard-right-stack,
.approval-media-list,
.support-list,
.activity-list { display: grid; gap: 14px; }
.welcome-panel,
.board-panel,
.info-panel,
.side-panel {
  border-radius: 22px;
  padding: 16px;
}
.welcome-panel h2 {
  font-size: clamp(2rem, 3vw, 2.6rem);
  margin-bottom: 4px;
}
.welcome-panel p { margin: 0; color: #d5dce8; }
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.kpi-neo {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.11);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.kpi-neo span,
.kpi-neo small { display: block; }
.kpi-neo span { font-size: .78rem; color: #e7ecf5; margin-bottom: 6px; }
.kpi-neo strong { font-size: 2.2rem; line-height: 1; color: #fff; display: block; margin-bottom: 5px; }
.kpi-neo small { color: #c5cfde; font-size: .78rem; }
.kpi-neo.cyan { border-color: rgba(77,224,255,0.32); box-shadow: 0 0 0 1px rgba(77,224,255,0.10), 0 0 20px rgba(77,224,255,0.12); }
.kpi-neo.orange { border-color: rgba(255,146,72,0.34); box-shadow: 0 0 0 1px rgba(255,146,72,0.10), 0 0 20px rgba(255,146,72,0.12); }
.kpi-neo.teal { border-color: rgba(76,255,221,0.28); box-shadow: 0 0 0 1px rgba(76,255,221,0.08), 0 0 18px rgba(76,255,221,0.10); }
.kpi-neo.coral { border-color: rgba(255,114,124,0.30); box-shadow: 0 0 0 1px rgba(255,114,124,0.08), 0 0 18px rgba(255,114,124,0.10); }
.board-heading h3,
.side-panel h3,
.info-panel h3 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .03em; }
.mini-kanban-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.mini-kanban-column {
  padding: 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.10);
  display: grid;
  gap: 10px;
  align-content: start;
}
.mini-kanban-title {
  font-size: .82rem;
  font-weight: 800;
  color: #edf3fd;
  text-transform: uppercase;
}
.mini-demand {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(72,89,121,0.52), rgba(51,64,87,0.74));
  border: 1px solid rgba(123,208,255,0.18);
}
.mini-demand strong { font-size: .9rem; }
.mini-demand span,
.mini-demand small { color: #d1d9e7; font-size: .74rem; }
.mini-demand .priority {
  justify-self: start;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: .68rem;
  font-style: normal;
  color: #fff;
}
.mini-demand .priority.alta { background: linear-gradient(135deg, #ff8a4d, #ff683a); }
.mini-demand .priority.media { background: linear-gradient(135deg, #4fd0ff, #327dff); }
.mini-demand .priority.baixa { background: linear-gradient(135deg, #6ed9b8, #3ba77f); }
.approval-media-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.10);
}
.approval-thumb {
  height: 98px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.6rem;
  background: linear-gradient(135deg, rgba(255,142,63,0.70), rgba(53,109,255,0.70));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}
.approval-thumb.thumb-2 { background: linear-gradient(135deg, rgba(97,219,255,0.72), rgba(49,71,124,0.86)); }
.approval-thumb.thumb-3 { background: linear-gradient(135deg, rgba(255,128,83,0.72), rgba(64,44,125,0.86)); }
.approval-actions-compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.support-item,
.activity-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.10);
}
.support-item strong,
.activity-item strong { font-size: .86rem; color: #fff; }
.support-item p,
.activity-item p { margin: 2px 0 0; font-size: .77rem; color: #d2dae8; }
.support-meta {
  display: grid;
  justify-items: end;
  align-content: space-between;
  gap: 8px;
}
.dashboard-bottom-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.financial-view p { margin: 0 0 10px; font-size: .9rem; color: #d8dfeb; }
.materials-grid-portal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.material-chip {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.10);
}
.material-chip strong { font-size: .82rem; }
.material-chip small { color: #cfd7e3; }
.material-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, rgba(77,224,255,0.30), rgba(255,147,74,0.30));
  border: 1px solid rgba(255,255,255,0.10);
}
.activity-item {
  justify-content: flex-start;
  align-items: flex-start;
}
.activity-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  margin-top: 4px;
  background: linear-gradient(135deg, #49d9ff, #ff9a4c);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.05);
}
.fab-action {
  position: fixed;
  right: 26px;
  bottom: 26px;
  width: 62px;
  height: 62px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 2rem;
  color: #fff;
  background: linear-gradient(135deg, #ff9b49, #ff6f2e);
  box-shadow: 0 18px 40px rgba(255,111,46,0.28);
  z-index: 90;
}
.portal-body .table-card th,
.portal-body .table-card td {
  padding: 13px 14px;
  border-bottom-color: rgba(255,255,255,0.08);
}
.portal-body .table-card th {
  color: #eff5ff;
  background: rgba(255,255,255,0.05);
}
.portal-body .table-card td,
.portal-body p,
.portal-body li,
.portal-body small,
.portal-body .small-muted { color: #d3dbe8; }
.portal-body .btn.secondary {
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border-color: rgba(133,225,255,0.20);
  box-shadow: none;
}
.portal-body .btn.ghost {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
}
.portal-body .status-pill,
.portal-body .eyebrow,
.portal-body .tag.blue { background: rgba(97,214,255,0.10); border-color: rgba(97,214,255,0.20); color: #e7fbff; }
.portal-body .tag.orange,
.portal-body .status-pill.orange { background: rgba(255,148,74,0.11); border-color: rgba(255,148,74,0.24); color: #ffe3c9; }
.portal-body .tag.green { background: rgba(105,216,173,0.10); border-color: rgba(105,216,173,0.22); color: #d9ffef; }
.portal-body .tag.yellow { background: rgba(255,202,94,0.12); border-color: rgba(255,202,94,0.26); color: #fff0c0; }
.portal-body .tag.red { background: rgba(255,121,121,0.12); border-color: rgba(255,121,121,0.22); color: #ffd6d6; }
.portal-copy {
  color: rgba(240,244,250,0.66);
  text-align: center;
  padding: 8px 0 18px;
  font-size: .84rem;
}

@media (max-width: 1220px) {
  .portal-dashboard-grid,
  .dashboard-bottom-grid,
  .kpi-strip,
  .mini-kanban-grid,
  .materials-grid-portal { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .portal-shell { grid-template-columns: 1fr; }
  .portal-sidebar { position: static; height: auto; }
  .portal-dashboard-grid,
  .dashboard-bottom-grid,
  .kpi-strip,
  .mini-kanban-grid,
  .materials-grid-portal { grid-template-columns: 1fr; }
  .portal-breadcrumb-bar,
  .portal-topbar { flex-direction: column; align-items: stretch; }
}


/* Premium grey refinement — 2026-05-04 */
:root {
  --bg-950: #111317;
  --bg-900: #171a20;
  --bg-850: #1c2027;
  --bg-800: #232832;
  --bg-760: #2c313d;
  --surface: rgba(32, 35, 42, 0.9);
  --surface-strong: rgba(24, 27, 33, 0.96);
  --line: rgba(255, 255, 255, 0.14);
  --line-soft: rgba(255, 255, 255, 0.08);
  --line-orange: rgba(210, 152, 112, 0.24);
  --text-1: #f7f4ef;
  --text-2: #ece7de;
  --text-3: #c9c3b8;
  --text-4: #91897d;
  --cyan: #e7e1d6;
  --teal: #c6d0d5;
  --orange: #b98863;
  --orange-2: #e0c2a5;
  --green: #8cc6a9;
  --yellow: #d3b06e;
  --danger: #cb7d7d;
  --shadow-xl: 0 34px 90px rgba(6, 8, 12, 0.46);
  --shadow-lg: 0 18px 46px rgba(7, 9, 14, 0.34);
  --glow-cyan: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 16px 30px rgba(255, 255, 255, 0.06);
  --glow-orange: 0 0 0 1px rgba(224, 194, 165, 0.16), 0 18px 36px rgba(185, 136, 99, 0.18);
}

body {
  font-family: 'Manrope', 'Inter', sans-serif;
  color: var(--text-2);
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,0.08), transparent 16%),
    radial-gradient(circle at 84% 0%, rgba(224,194,165,0.12), transparent 18%),
    linear-gradient(180deg, #1b1d22 0%, #17191e 24%, #14161a 58%, #121418 100%);
}
body::before {
  background-image:
    linear-gradient(rgba(255,255,255,0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.024) 1px, transparent 1px);
}
body:not(.portal-body) {
  background:
    radial-gradient(circle at 16% 8%, rgba(255,255,255,0.08), transparent 16%),
    radial-gradient(circle at 82% 2%, rgba(224,194,165,0.12), transparent 18%),
    linear-gradient(180deg, #191b20 0%, #15171c 28%, #121418 70%, #0f1114 100%);
}
.topbar {
  top: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(37, 39, 45, 0.92), rgba(20, 22, 27, 0.84));
  box-shadow: 0 20px 54px rgba(7, 9, 13, 0.28), inset 0 1px 0 rgba(255,255,255,0.06);
}
.main-nav a,
.footer-links a,
.footer-links span { color: #d7d0c6; }
.main-nav a.active { color: #ffffff; }
.main-nav a.active::after {
  height: 3px;
  width: 38px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.92), rgba(255,255,255,0));
  box-shadow: 0 0 18px rgba(255,255,255,0.18);
}
.btn {
  color: #201711;
  background: linear-gradient(135deg, #f0ddca 0%, #c9956f 52%, #a46f4d 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 18px 34px rgba(135, 92, 60, 0.24);
}
.btn.secondary {
  color: #f7f4ef;
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 12px 28px rgba(0,0,0,0.14);
}
.btn.ghost {
  color: #efe7db;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
}
.eyebrow, .tag, .status-pill {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: #f2ede3;
}
.tag.orange, .status-pill.orange { background: rgba(201,145,105,0.12); color: #ffead8; }
.tag.green, .status-pill.green { background: rgba(122,183,153,0.14); color: #e8fff3; }
.tag.yellow, .status-pill.yellow { background: rgba(211,176,110,0.14); color: #fff1d7; }
.tag.red, .status-pill.red { background: rgba(203,125,125,0.14); color: #ffe5e5; }
.section-shell, .glass-panel, .card, .service-card, .feature-card, .plan-card, .studio-card, .portal-card, .contact-card, .value-card, .pricing-card, .metric-card, .kpi-card, .dashboard-card, .table-card, .panel, .list-card, .approval-card, .file-card, .permission-card, .login-card, .demo-box {
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(39, 42, 49, 0.94), rgba(24, 26, 31, 0.96));
  box-shadow: 0 22px 56px rgba(6, 8, 12, 0.28), inset 0 1px 0 rgba(255,255,255,0.05);
}
.logo-strip,
.process-band,
.cta-band,
.contact-form-wrap,
.briefing-band,
.schedule-card,
.equipment-card,
.review-card,
.partner-strip span,
.faq-list details {
  border-color: rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025));
  box-shadow: 0 18px 40px rgba(6,8,12,0.18);
}
.hero-collage, .feature-image, .showcase-image, .map-box, .calendar-box, .gallery-strip, .portal-preview {
  border: 1px solid rgba(255,255,255,0.09);
  background: linear-gradient(180deg, rgba(48,52,59,0.92), rgba(26,28,33,0.95));
}
.hero-copy h1 { font-size: clamp(2.4rem, 4.3vw, 3.85rem); max-width: 10.5ch; }
.hero-copy p.lead { font-size: .96rem; }
.section-title h2,
.panel h2,
.section-shell h1,
.section-shell h2 { font-size: clamp(1.7rem, 2.7vw, 2.65rem); }
.metric-card strong { font-size: 1.72rem; }
.plan-card .price { font-size: 2rem; }
.service-card h3, .feature-card h3, .plan-card h3, .studio-card h3, .pricing-card h3, .portal-card h3 { font-size: 1.06rem; }
.footer {
  border-color: rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(33,36,42,0.88), rgba(21,23,28,0.95));
}
input, select, textarea {
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(15, 17, 21, 0.78);
  color: #f1ece4;
}
input::placeholder,
textarea::placeholder { color: #9f978b; }

.portal-body {
  background:
    radial-gradient(circle at 14% 0%, rgba(255,255,255,0.22), transparent 18%),
    radial-gradient(circle at 86% 0%, rgba(241,216,192,0.14), transparent 16%),
    linear-gradient(180deg, #898f99 0%, #68707d 12%, #444a56 28%, #303540 46%, #21252f 66%, #181b22 100%);
}
.portal-body::before {
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 88px 88px;
  opacity: .46;
}
.portal-body::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.03) 30%, transparent 54%),
    radial-gradient(circle at 18% 16%, rgba(255,255,255,0.15), transparent 14%);
}
.portal-shell {
  grid-template-columns: 268px 1fr;
  width: min(1520px, calc(100% - 28px));
  gap: 18px;
}
.portal-sidebar,
.portal-breadcrumb-bar,
.portal-topbar,
.portal-body .panel,
.portal-body .table-card,
.portal-body .list-card,
.portal-body .approval-card,
.portal-body .file-card,
.portal-body .permission-card,
.portal-body .kpi-card,
.portal-body .kanban-card,
.portal-body .dashboard-card,
.portal-body .section-shell,
.portal-body .welcome-panel,
.portal-body .board-panel,
.portal-body .info-panel,
.portal-body .side-panel,
.portal-body .demand-card-mini,
.portal-body .ticket-mini,
.portal-body .material-mini,
.portal-body .mini-kanban-column,
.portal-body .mini-demand,
.portal-body .support-item,
.portal-body .activity-item,
.portal-body .material-chip,
.portal-body .approval-media-card,
.portal-body .portal-profile-card,
.portal-body .user-pill,
.portal-body .breadcrumb-pill,
.portal-body .portal-search,
.portal-body .notification-chip {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(56,62,74,0.92), rgba(34,39,48,0.96));
  box-shadow: 0 20px 54px rgba(7, 10, 15, 0.24), inset 0 1px 0 rgba(255,255,255,0.08);
}
.portal-sidebar::after,
.portal-breadcrumb-bar::after,
.portal-topbar::after,
.portal-body .panel::after,
.portal-body .table-card::after,
.portal-body .list-card::after,
.portal-body .approval-card::after,
.portal-body .file-card::after,
.portal-body .permission-card::after,
.portal-body .kpi-card::after,
.portal-body .kanban-card::after,
.portal-body .dashboard-card::after,
.portal-body .section-shell::after,
.portal-body .welcome-panel::after,
.portal-body .board-panel::after,
.portal-body .info-panel::after,
.portal-body .side-panel::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -12px;
  height: 34px;
  border-radius: 0 0 22px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.12));
  filter: blur(11px);
  opacity: .82;
  z-index: -1;
}
.portal-sidebar {
  padding: 18px 14px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(67,73,86,0.98), rgba(38,43,53,0.97));
}
.portal-brand img { width: 112px; }
.portal-nav a {
  color: #f0ece5;
  background: rgba(255,255,255,0.028);
  border: 1px solid transparent;
}
.portal-nav a:hover { background: rgba(255,255,255,0.06); }
.portal-nav-dot { background: rgba(255,255,255,0.4); }
.portal-nav a.active {
  background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(222,188,160,0.12));
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 12px 24px rgba(13,16,22,0.16), inset 0 1px 0 rgba(255,255,255,0.08);
}
.portal-nav a.active .portal-nav-dot { background: #f1dfca; }
.portal-profile-card,
.user-pill,
.breadcrumb-pill,
.portal-search,
.notification-chip {
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
}
.portal-avatar {
  background: linear-gradient(135deg, #f3e3d1, #bf8c69 72%);
  color: #2a2018;
}
.portal-topbar,
.portal-breadcrumb-bar {
  border-radius: 24px;
  padding: 14px 18px;
}
.portal-topbar h1 { font-size: clamp(1.7rem, 2.4vw, 2.15rem); }
.portal-topbar p,
.portal-body p,
.portal-body li,
.portal-body small,
.portal-body .small-muted,
.portal-profile-card span,
.user-pill small,
.portal-body .table-card td,
.portal-body input,
.portal-body textarea,
.portal-body select { color: #efe8de; }
.portal-body h1,
.portal-body h2,
.portal-body h3,
.portal-body h4,
.portal-body strong,
.portal-body th { color: #fffaf3; }
.portal-search input,
.portal-body input,
.portal-body select,
.portal-body textarea {
  background: rgba(24, 27, 32, 0.78);
  border-color: rgba(255,255,255,0.12);
}
.portal-body .btn {
  color: #251a13;
  background: linear-gradient(135deg, #f2e0cd 0%, #cb9a77 55%, #ab7754 100%);
}
.portal-body .btn.ghost,
.portal-body .btn.secondary {
  color: #faf5ed;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border-color: rgba(255,255,255,0.14);
}
.portal-body .status-pill,
.portal-body .eyebrow,
.portal-body .tag.blue {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.16);
  color: #fff8ef;
}
.portal-body .tag.orange,
.portal-body .status-pill.orange { background: rgba(212,159,121,0.18); border-color: rgba(212,159,121,0.2); color: #fff0e3; }
.portal-body .tag.green { background: rgba(140,198,169,0.16); border-color: rgba(140,198,169,0.22); color: #effff7; }
.portal-body .tag.yellow { background: rgba(211,176,110,0.18); border-color: rgba(211,176,110,0.24); color: #fff4da; }
.portal-body .tag.red { background: rgba(203,125,125,0.18); border-color: rgba(203,125,125,0.22); color: #fff0f0; }
.kpi-strip { gap: 10px; }
.kpi-neo {
  padding: 13px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
}
.kpi-neo strong { font-size: 1.9rem; }
.kpi-neo span,
.kpi-neo small { color: #f2eadf; }
.kpi-neo.cyan,
.kpi-neo.orange,
.kpi-neo.teal,
.kpi-neo.coral { border-color: rgba(255,255,255,0.16); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 16px 32px rgba(12,14,18,0.16); }
.board-heading h3,
.side-panel h3,
.info-panel h3 { font-size: 1rem; letter-spacing: .06em; }
.welcome-panel h2 { font-size: clamp(1.8rem, 2.6vw, 2.25rem); }
.mini-kanban-grid,
.dashboard-bottom-grid,
.portal-dashboard-grid { gap: 16px; }
.mini-kanban-column,
.mini-demand,
.material-chip,
.approval-media-card,
.support-item,
.activity-item {
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.045));
}
.mini-demand { border-color: rgba(255,255,255,0.14); }
.mini-demand span,
.mini-demand small,
.material-chip small,
.support-item p,
.activity-item p,
.financial-view p { color: #f2eade; }
.approval-thumb,
.approval-thumb.thumb-2,
.approval-thumb.thumb-3 {
  background: linear-gradient(135deg, rgba(244,224,205,0.78), rgba(175,120,86,0.72));
  color: #fff;
}
.activity-dot { background: linear-gradient(135deg, #f2e0cd, #b47f5a); }
.portal-body .table-card th {
  background: rgba(255,255,255,0.1);
  color: #fffaf3;
}
.portal-body .table-card td { border-bottom-color: rgba(255,255,255,0.08); }
.fab-action {
  width: 58px;
  height: 58px;
  background: linear-gradient(135deg, #f2e0cd, #be8863);
  color: #231913;
  box-shadow: 0 18px 42px rgba(95, 68, 49, 0.22);
}
@media (max-width: 980px) {
  .portal-shell { grid-template-columns: 1fr; }
  .portal-sidebar { height: auto; }
}
@media (max-width: 760px) {
  .hero-copy h1 { font-size: 2.15rem; }
  .portal-topbar h1,
  .welcome-panel h2 { font-size: 1.65rem; }
}

/* Blue-base digital refresh — 2026-05-04 */
:root {
  --bg-950: #08111f;
  --bg-900: #0d1830;
  --bg-850: #12203d;
  --bg-800: #18284a;
  --bg-760: #22345e;
  --surface: rgba(17, 27, 54, 0.9);
  --surface-strong: rgba(13, 21, 42, 0.96);
  --line: rgba(111, 224, 255, 0.2);
  --line-soft: rgba(255, 255, 255, 0.09);
  --line-orange: rgba(255, 166, 117, 0.2);
  --text-1: #f8fbff;
  --text-2: #edf5ff;
  --text-3: #c8d7ee;
  --text-4: #90a4c6;
  --cyan: #72dcff;
  --teal: #5cf0de;
  --orange: #e1b38e;
  --orange-2: #ffc18f;
  --shadow-xl: 0 34px 90px rgba(4, 10, 24, 0.46);
  --shadow-lg: 0 18px 46px rgba(7, 12, 28, 0.32);
  --glow-cyan: 0 0 0 1px rgba(114,220,255,0.18), 0 0 36px rgba(114,220,255,0.14);
  --glow-orange: 0 0 0 1px rgba(255,193,143,0.18), 0 0 30px rgba(225,179,142,0.14);
}

body:not(.portal-body) {
  background:
    radial-gradient(circle at 14% 0%, rgba(255,255,255,0.12), transparent 18%),
    radial-gradient(circle at 84% 4%, rgba(114,220,255,0.16), transparent 18%),
    radial-gradient(circle at 72% 22%, rgba(255,255,255,0.07), transparent 16%),
    linear-gradient(180deg, #16253e 0%, #12203a 18%, #0d1830 44%, #0b1326 72%, #09101d 100%);
}
body::before {
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 76px 76px;
  opacity: .9;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02) 22%, transparent 40%),
    radial-gradient(circle at 18% 10%, rgba(255,255,255,0.11), transparent 14%),
    radial-gradient(circle at 84% 8%, rgba(114,220,255,0.12), transparent 16%);
}
.topbar {
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(180deg, rgba(22, 35, 66, 0.9), rgba(12, 20, 38, 0.84));
  box-shadow: 0 20px 54px rgba(6, 11, 24, 0.28), inset 0 1px 0 rgba(255,255,255,0.08);
}
.main-nav a,
.footer-links a,
.footer-links span { color: #d4e1f4; }
.main-nav a.active { color: #8ae7ff; }
.main-nav a.active::after {
  background: linear-gradient(90deg, rgba(114,220,255,0), rgba(114,220,255,1), rgba(114,220,255,0));
  box-shadow: 0 0 20px rgba(114,220,255,0.34);
}
.btn {
  color: #08131f;
  background: linear-gradient(135deg, #8fe4ff 0%, #5bc4ff 52%, #b9d9ff 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 18px 34px rgba(72, 166, 255, 0.22);
}
.btn.secondary {
  color: #f8fbff;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.14);
}
.btn.ghost {
  color: #edf5ff;
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
}
.eyebrow, .tag, .status-pill {
  border-color: rgba(114,220,255,0.18);
  background: rgba(114,220,255,0.08);
  color: #dff8ff;
}
.tag.orange, .status-pill.orange { background: rgba(255,193,143,0.12); color: #fff0e1; border-color: rgba(255,193,143,0.22); }
.section-shell, .glass-panel, .card, .service-card, .feature-card, .plan-card, .studio-card, .portal-card, .contact-card, .value-card, .pricing-card, .metric-card, .kpi-card, .dashboard-card, .table-card, .panel, .list-card, .approval-card, .file-card, .permission-card, .login-card, .demo-box {
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(23, 36, 68, 0.94), rgba(11, 18, 35, 0.96));
  box-shadow: 0 24px 56px rgba(6, 10, 22, 0.28), inset 0 1px 0 rgba(255,255,255,0.06);
}
.section-shell,
.panel,
.login-card,
.service-card,
.feature-card,
.plan-card,
.studio-card,
.contact-card,
.portal-card,
.value-card,
.pricing-card,
.metric-card,
.kpi-card,
.dashboard-card,
.table-card,
.list-card,
.approval-card,
.file-card,
.permission-card,
.demo-box,
.hero-collage,
.feature-image,
.showcase-image,
.map-box,
.calendar-box,
.gallery-strip,
.portal-preview,
.logo-strip,
.process-band,
.cta-band,
.contact-form-wrap,
.briefing-band,
.schedule-card,
.equipment-card,
.review-card,
.faq-list details,
.partner-strip span {
  position: relative;
  overflow: visible;
}
.section-shell::after,
.panel::after,
.login-card::after,
.service-card::after,
.feature-card::after,
.plan-card::after,
.studio-card::after,
.contact-card::after,
.portal-card::after,
.value-card::after,
.pricing-card::after,
.metric-card::after,
.kpi-card::after,
.dashboard-card::after,
.table-card::after,
.list-card::after,
.approval-card::after,
.file-card::after,
.permission-card::after,
.demo-box::after,
.hero-collage::after,
.feature-image::after,
.showcase-image::after,
.map-box::after,
.calendar-box::after,
.gallery-strip::after,
.portal-preview::after,
.logo-strip::after,
.process-band::after,
.cta-band::after,
.contact-form-wrap::after,
.briefing-band::after,
.schedule-card::after,
.equipment-card::after,
.review-card::after,
.faq-list details::after,
.partner-strip span::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -10px;
  height: 28px;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.06));
  filter: blur(12px);
  opacity: .62;
  z-index: -1;
}
.hero-collage, .feature-image, .showcase-image, .map-box, .calendar-box, .gallery-strip, .portal-preview {
  border-color: rgba(114,220,255,0.16);
  background: linear-gradient(180deg, rgba(24,39,76,0.94), rgba(12,19,37,0.96));
}
.hero-copy h1 { font-size: clamp(2.55rem, 4.6vw, 4.15rem); }
.section-title h2,
.panel h2,
.section-shell h1,
.section-shell h2 { font-size: clamp(1.8rem, 2.9vw, 2.9rem); }
.metric-card strong { font-size: 1.85rem; }
.portal-body {
  background:
    radial-gradient(circle at 14% 0%, rgba(255,255,255,0.24), transparent 18%),
    radial-gradient(circle at 86% 0%, rgba(114,220,255,0.18), transparent 16%),
    linear-gradient(180deg, #65728f 0%, #435574 12%, #21365f 28%, #16284a 46%, #0f1d37 66%, #0b1528 100%);
}
.portal-body::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.04) 30%, transparent 56%),
    radial-gradient(circle at 18% 16%, rgba(255,255,255,0.16), transparent 14%),
    radial-gradient(circle at 84% 10%, rgba(114,220,255,0.16), transparent 16%);
}
.portal-sidebar,
.portal-breadcrumb-bar,
.portal-topbar,
.portal-body .panel,
.portal-body .table-card,
.portal-body .list-card,
.portal-body .approval-card,
.portal-body .file-card,
.portal-body .permission-card,
.portal-body .kpi-card,
.portal-body .kanban-card,
.portal-body .dashboard-card,
.portal-body .section-shell,
.portal-body .welcome-panel,
.portal-body .board-panel,
.portal-body .info-panel,
.portal-body .side-panel,
.portal-body .demand-card-mini,
.portal-body .ticket-mini,
.portal-body .material-mini,
.portal-body .mini-kanban-column,
.portal-body .mini-demand,
.portal-body .support-item,
.portal-body .activity-item,
.portal-body .material-chip,
.portal-body .approval-media-card,
.portal-body .portal-profile-card,
.portal-body .user-pill,
.portal-body .breadcrumb-pill,
.portal-body .portal-search,
.portal-body .notification-chip {
  border-color: rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(31,49,92,0.9), rgba(16,26,50,0.96));
  box-shadow: 0 20px 54px rgba(6, 11, 24, 0.24), inset 0 1px 0 rgba(255,255,255,0.08);
}
.portal-sidebar::after,
.portal-breadcrumb-bar::after,
.portal-topbar::after,
.portal-body .panel::after,
.portal-body .table-card::after,
.portal-body .list-card::after,
.portal-body .approval-card::after,
.portal-body .file-card::after,
.portal-body .permission-card::after,
.portal-body .kpi-card::after,
.portal-body .kanban-card::after,
.portal-body .dashboard-card::after,
.portal-body .section-shell::after,
.portal-body .welcome-panel::after,
.portal-body .board-panel::after,
.portal-body .info-panel::after,
.portal-body .side-panel::after {
  background: linear-gradient(180deg, rgba(255,255,255,0.32), rgba(255,255,255,0.1));
  opacity: .76;
}
.portal-sidebar { background: linear-gradient(180deg, rgba(36,56,102,0.98), rgba(16,26,50,0.98)); }
.portal-profile-card,
.user-pill,
.breadcrumb-pill,
.portal-search,
.notification-chip {
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(114,220,255,0.05));
}
.portal-nav a.active {
  background: linear-gradient(90deg, rgba(114,220,255,0.16), rgba(255,255,255,0.1));
  border-color: rgba(114,220,255,0.24);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 0 24px rgba(114,220,255,0.14);
}
.portal-nav a.active .portal-nav-dot { background: #83e5ff; }
.portal-avatar {
  background: linear-gradient(135deg, #dff4ff, #6fcfff 68%, #fff2e4 100%);
  color: #08131f;
}
.portal-body .btn {
  color: #08131f;
  background: linear-gradient(135deg, #8fe4ff 0%, #5bc4ff 52%, #b9d9ff 100%);
}
.portal-body .btn.ghost,
.portal-body .btn.secondary {
  color: #edf5ff;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
}
.kpi-neo {
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(114,220,255,0.04));
}
.kpi-neo.cyan,
.kpi-neo.orange,
.kpi-neo.teal,
.kpi-neo.coral { border-color: rgba(114,220,255,0.18); }
.approval-thumb,
.approval-thumb.thumb-2,
.approval-thumb.thumb-3,
.material-icon,
.activity-dot,
.fab-action {
  background: linear-gradient(135deg, #8fe4ff, #5bc4ff 56%, #fff1e3 100%);
  color: #08131f;
}

/* Tech premium blue refinement — 2026-05-04 */
:root {
  --bg-950: #07101f;
  --bg-900: #0a1830;
  --bg-850: #0f2242;
  --bg-800: #14305c;
  --bg-760: #1c3f77;
  --surface: rgba(13, 24, 49, 0.92);
  --surface-strong: rgba(9, 18, 38, 0.97);
  --line: rgba(104, 214, 255, 0.24);
  --line-soft: rgba(255, 255, 255, 0.1);
  --text-1: #f8fbff;
  --text-2: #edf5ff;
  --text-3: #c8d9ef;
  --text-4: #8ea8ca;
  --cyan: #6be0ff;
  --teal: #68f1e7;
  --orange: #dcb89b;
  --orange-2: #ffd2a9;
  --shadow-xl: 0 34px 90px rgba(4, 9, 24, 0.48);
  --shadow-lg: 0 18px 52px rgba(6, 12, 28, 0.34);
  --glow-cyan: 0 0 0 1px rgba(107,224,255,0.20), 0 0 36px rgba(107,224,255,0.16);
  --glow-orange: 0 0 0 1px rgba(255,210,169,0.18), 0 0 30px rgba(220,184,155,0.16);
}

body:not(.portal-body) {
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,0.16), transparent 18%),
    radial-gradient(circle at 84% 2%, rgba(107,224,255,0.18), transparent 19%),
    radial-gradient(circle at 50% 16%, rgba(255,255,255,0.05), transparent 15%),
    linear-gradient(180deg, #173868 0%, #10284b 18%, #0c1d39 46%, #09142b 72%, #07101f 100%);
}
body::before {
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: .88;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.02) 22%, transparent 42%),
    radial-gradient(circle at 18% 10%, rgba(255,255,255,0.13), transparent 14%),
    radial-gradient(circle at 82% 9%, rgba(107,224,255,0.12), transparent 16%);
}
.topbar {
  border-color: rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(19,36,70,0.9), rgba(10,19,38,0.84));
  box-shadow: 0 24px 60px rgba(5,10,23,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
}
.brand img { filter: drop-shadow(0 8px 18px rgba(107,224,255,0.08)); }
.main-nav a { color: #d7e5f8; }
.main-nav a.active { color: #8be7ff; }
.main-nav a.active::after {
  width: 44px;
  height: 4px;
  background: linear-gradient(90deg, rgba(107,224,255,0), rgba(107,224,255,1), rgba(107,224,255,0));
  box-shadow: 0 0 22px rgba(107,224,255,0.36);
}
.btn {
  color: #07111f;
  background: linear-gradient(135deg, #9de8ff 0%, #61cbff 58%, #dbf2ff 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.16), 0 20px 38px rgba(77, 170, 255, 0.24);
}
.btn.secondary {
  color: #f6fbff;
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.16);
}
.btn.ghost {
  color: #eef6ff;
  background: rgba(255,255,255,0.055);
  border-color: rgba(255,255,255,0.13);
}
.eyebrow, .tag, .status-pill {
  border-color: rgba(107,224,255,0.22);
  background: rgba(107,224,255,0.09);
  color: #def8ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.tag.orange, .status-pill.orange {
  border-color: rgba(255,210,169,0.22);
  background: rgba(255,210,169,0.12);
  color: #fff0e0;
}
.section-shell, .glass-panel, .card, .service-card, .feature-card, .plan-card, .studio-card, .portal-card, .contact-card, .value-card, .pricing-card, .metric-card, .kpi-card, .dashboard-card, .table-card, .panel, .list-card, .approval-card, .file-card, .permission-card, .login-card, .demo-box {
  border: 1px solid rgba(255,255,255,0.09);
  background: linear-gradient(180deg, rgba(17,33,65,0.95), rgba(9,18,37,0.97));
  box-shadow: 0 26px 62px rgba(5,9,21,0.28), inset 0 1px 0 rgba(255,255,255,0.06);
}
.section-shell::before,
.panel::before,
.login-card::before,
.service-card::before,
.feature-card::before,
.plan-card::before,
.studio-card::before,
.contact-card::before,
.portal-card::before,
.value-card::before,
.pricing-card::before,
.metric-card::before,
.kpi-card::before,
.dashboard-card::before,
.table-card::before,
.list-card::before,
.approval-card::before,
.file-card::before,
.permission-card::before,
.demo-box::before,
.hero-collage::before,
.feature-image::before,
.showcase-image::before,
.map-box::before,
.calendar-box::before,
.gallery-strip::before,
.portal-preview::before,
.logo-strip::before,
.process-band::before,
.cta-band::before,
.contact-form-wrap::before,
.briefing-band::before,
.schedule-card::before,
.equipment-card::before,
.review-card::before,
.faq-list details::before,
.partner-strip span::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.015) 36%, transparent 72%);
  pointer-events: none;
}
.section-shell::after,
.panel::after,
.login-card::after,
.service-card::after,
.feature-card::after,
.plan-card::after,
.studio-card::after,
.contact-card::after,
.portal-card::after,
.value-card::after,
.pricing-card::after,
.metric-card::after,
.kpi-card::after,
.dashboard-card::after,
.table-card::after,
.list-card::after,
.approval-card::after,
.file-card::after,
.permission-card::after,
.demo-box::after,
.hero-collage::after,
.feature-image::after,
.showcase-image::after,
.map-box::after,
.calendar-box::after,
.gallery-strip::after,
.portal-preview::after,
.logo-strip::after,
.process-band::after,
.cta-band::after,
.contact-form-wrap::after,
.briefing-band::after,
.schedule-card::after,
.equipment-card::after,
.review-card::after,
.faq-list details::after,
.partner-strip span::after {
  left: 14px;
  right: 14px;
  bottom: -10px;
  height: 30px;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.07));
  filter: blur(13px);
  opacity: .64;
  z-index: -1;
}
.hero-collage, .feature-image, .showcase-image, .map-box, .calendar-box, .gallery-strip, .portal-preview {
  border-color: rgba(107,224,255,0.18);
  background: linear-gradient(180deg, rgba(20,40,78,0.95), rgba(10,18,36,0.97));
  box-shadow: 0 30px 64px rgba(4,9,22,0.30), 0 0 0 1px rgba(107,224,255,0.08);
}
.hero-collage img, .feature-image img, .showcase-image img, .gallery-strip img, .portal-preview img {
  filter: saturate(1.08) contrast(1.04) brightness(1.02);
}
.hero-copy h1 {
  font-size: clamp(2.7rem, 4.9vw, 4.35rem);
  text-shadow: 0 10px 24px rgba(2,7,16,0.22);
}
.hero-copy p.lead { font-size: 1rem; color: #d6e3f6; }
.section-title h2,
.panel h2,
.section-shell h1,
.section-shell h2 { font-size: clamp(1.9rem, 3vw, 3rem); }
.metric-card strong { font-size: 1.92rem; }
.metric-card span { color: #dce8f8; }
.logo-strip,
.process-band,
.cta-band,
.contact-form-wrap,
.briefing-band,
.schedule-card,
.equipment-card,
.review-card,
.partner-strip span,
.faq-list details {
  border-color: rgba(255,255,255,0.09);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
}
.link-inline { color: #8fe8ff; }
.footer {
  border-color: rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(16,31,61,0.88), rgba(8,16,30,0.95));
}
input, select, textarea {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(11, 18, 33, 0.82);
  color: #edf5ff;
}
input::placeholder,
textarea::placeholder { color: #9db0cd; }

.portal-body {
  background:
    radial-gradient(circle at 14% 0%, rgba(255,255,255,0.24), transparent 18%),
    radial-gradient(circle at 86% 0%, rgba(107,224,255,0.18), transparent 18%),
    linear-gradient(180deg, #6c7e9f 0%, #39517a 12%, #1c3765 28%, #12284d 48%, #0d1d39 70%, #081322 100%);
}
.portal-body::before {
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
}
.portal-body::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.04) 28%, transparent 56%),
    radial-gradient(circle at 18% 16%, rgba(255,255,255,0.16), transparent 14%),
    radial-gradient(circle at 84% 10%, rgba(107,224,255,0.16), transparent 16%);
}
.portal-sidebar,
.portal-breadcrumb-bar,
.portal-topbar,
.portal-body .panel,
.portal-body .table-card,
.portal-body .list-card,
.portal-body .approval-card,
.portal-body .file-card,
.portal-body .permission-card,
.portal-body .kpi-card,
.portal-body .kanban-card,
.portal-body .dashboard-card,
.portal-body .section-shell,
.portal-body .welcome-panel,
.portal-body .board-panel,
.portal-body .info-panel,
.portal-body .side-panel,
.portal-body .demand-card-mini,
.portal-body .ticket-mini,
.portal-body .material-mini,
.portal-body .mini-kanban-column,
.portal-body .mini-demand,
.portal-body .support-item,
.portal-body .activity-item,
.portal-body .material-chip,
.portal-body .approval-media-card,
.portal-body .portal-profile-card,
.portal-body .user-pill,
.portal-body .breadcrumb-pill,
.portal-body .portal-search,
.portal-body .notification-chip {
  border-color: rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(24,43,82,0.92), rgba(12,23,45,0.97));
  box-shadow: 0 22px 56px rgba(5,10,22,0.24), inset 0 1px 0 rgba(255,255,255,0.08);
}
.portal-sidebar::after,
.portal-breadcrumb-bar::after,
.portal-topbar::after,
.portal-body .panel::after,
.portal-body .table-card::after,
.portal-body .list-card::after,
.portal-body .approval-card::after,
.portal-body .file-card::after,
.portal-body .permission-card::after,
.portal-body .kpi-card::after,
.portal-body .kanban-card::after,
.portal-body .dashboard-card::after,
.portal-body .section-shell::after,
.portal-body .welcome-panel::after,
.portal-body .board-panel::after,
.portal-body .info-panel::after,
.portal-body .side-panel::after {
  background: linear-gradient(180deg, rgba(255,255,255,0.32), rgba(255,255,255,0.1));
  opacity: .74;
}
.portal-sidebar {
  background: linear-gradient(180deg, rgba(27,49,93,0.98), rgba(12,22,42,0.98));
}
.portal-profile-card,
.user-pill,
.breadcrumb-pill,
.portal-search,
.notification-chip {
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(107,224,255,0.05));
}
.portal-nav a {
  color: #e6f0ff;
  background: rgba(255,255,255,0.03);
}
.portal-nav a.active {
  background: linear-gradient(90deg, rgba(107,224,255,0.16), rgba(255,255,255,0.1));
  border-color: rgba(107,224,255,0.26);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 0 24px rgba(107,224,255,0.16);
}
.portal-nav a.active .portal-nav-dot { background: #84e6ff; }
.portal-avatar {
  background: linear-gradient(135deg, #e3f5ff, #72d4ff 68%, #fff3e7 100%);
  color: #08111f;
}
.portal-topbar h1,
.welcome-panel h2 { text-shadow: 0 10px 24px rgba(2,7,16,0.18); }
.portal-body .btn {
  color: #07111f;
  background: linear-gradient(135deg, #9de8ff 0%, #61cbff 58%, #dbf2ff 100%);
}
.portal-body .btn.ghost,
.portal-body .btn.secondary {
  color: #edf5ff;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
}
.kpi-neo {
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(107,224,255,0.05));
}
.kpi-neo.cyan,
.kpi-neo.orange,
.kpi-neo.teal,
.kpi-neo.coral { border-color: rgba(107,224,255,0.18); }
.approval-thumb,
.approval-thumb.thumb-2,
.approval-thumb.thumb-3,
.material-icon,
.activity-dot,
.fab-action {
  background: linear-gradient(135deg, #9de8ff, #61cbff 58%, #fff2e5 100%);
  color: #07111f;
}
@media (max-width: 760px) {
  .hero-copy h1 { font-size: 2.35rem; }
  .section-title h2,
  .panel h2,
  .section-shell h1,
  .section-shell h2,
  .portal-topbar h1,
  .welcome-panel h2 { font-size: 1.75rem; }
}

/* Site structure refresh — 2026-05-04 */
.site-page-header { gap: 20px; }
.site-page-header h1 { max-width: 15ch; }
.site-intro-grid,
.site-section-grid,
.site-duo-grid,
.site-triple-grid {
  display: grid;
  gap: 18px;
}
.site-intro-grid,
.site-section-grid,
.site-duo-grid { grid-template-columns: 1fr 1fr; }
.site-triple-grid { grid-template-columns: repeat(3, 1fr); }
.site-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.site-nav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.site-nav-card {
  padding: 22px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(180deg, rgba(18,35,68,0.95), rgba(10,18,36,0.97));
  box-shadow: 0 22px 56px rgba(5,9,21,0.24), inset 0 1px 0 rgba(255,255,255,0.06);
  display: grid;
  gap: 10px;
  min-height: 100%;
  position: relative;
  overflow: visible;
}
.site-nav-card::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.015) 36%, transparent 72%);
  pointer-events: none;
}
.site-nav-card::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -10px;
  height: 28px;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.06));
  filter: blur(12px);
  opacity: .58;
  z-index: -1;
}
.site-nav-card > * { position: relative; z-index: 1; }
.site-nav-card h3 { font-size: 1.15rem; margin-bottom: 0; }
.site-nav-card.wide { grid-column: span 3; }
.site-feature-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
}
.site-mini-table {
  display: grid;
  gap: 10px;
}
.site-mini-table > div {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
}
.site-mini-table strong { color: var(--text-1); font-size: .95rem; }
.site-mini-table span { color: var(--text-3); font-size: .92rem; }
.site-note {
  margin-top: 14px;
  color: var(--text-3);
  font-size: .94rem;
}

@media (max-width: 1120px) {
  .site-nav-grid,
  .site-triple-grid { grid-template-columns: repeat(2, 1fr); }
  .site-nav-card.wide { grid-column: span 2; }
}
@media (max-width: 760px) {
  .site-intro-grid,
  .site-section-grid,
  .site-duo-grid,
  .site-triple-grid,
  .site-nav-grid,
  .site-stat-grid { grid-template-columns: 1fr; }
  .site-nav-card.wide { grid-column: span 1; }
  .site-page-header h1 { max-width: none; }
}

/* Final tech-premium refinement — 2026-05-04 */
:root {
  --bg-950: #07111f;
  --bg-900: #0b1730;
  --bg-850: #102041;
  --bg-800: #15305e;
  --bg-760: #1b4278;
  --surface: rgba(14, 24, 48, 0.84);
  --surface-strong: rgba(9, 17, 35, 0.9);
  --line: rgba(126, 215, 255, 0.2);
  --line-soft: rgba(229, 238, 255, 0.12);
  --text-1: #f8fbff;
  --text-2: #deecff;
  --text-3: #bfd2ef;
  --text-4: #8ea5c8;
  --cyan: #8ae5ff;
  --teal: #81f0ea;
  --orange: #dbc0a1;
  --orange-2: #f7d1ad;
  --shadow-xl: 0 34px 90px rgba(3, 10, 22, 0.42);
  --shadow-lg: 0 18px 48px rgba(4, 12, 28, 0.3);
}

body:not(.portal-body) {
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,0.16), transparent 18%),
    radial-gradient(circle at 82% 6%, rgba(101,205,255,0.2), transparent 20%),
    radial-gradient(circle at 50% 18%, rgba(255,255,255,0.05), transparent 22%),
    linear-gradient(180deg, #24446f 0%, #17335c 12%, #0e2347 32%, #0c1d3f 56%, #09152d 82%, #07101d 100%);
}

body::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03) 22%, transparent 42%),
    radial-gradient(circle at 14% 10%, rgba(255,255,255,0.12), transparent 14%),
    radial-gradient(circle at 86% 8%, rgba(116,220,255,0.16), transparent 17%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.08), transparent 20%);
  opacity: .98;
}

.site-shell {
  position: relative;
}

.site-shell::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.015) 50%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(138,229,255,0.02) 50%, transparent 100%);
  mix-blend-mode: screen;
  opacity: .75;
}

.topbar,
.section-shell,
.glass-panel,
.card,
.service-card,
.feature-card,
.plan-card,
.studio-card,
.portal-card,
.contact-card,
.value-card,
.pricing-card,
.metric-card,
.kpi-card,
.dashboard-card,
.table-card,
.panel,
.list-card,
.approval-card,
.file-card,
.permission-card,
.login-card,
.demo-box,
.hero-collage,
.feature-image,
.showcase-image,
.map-box,
.calendar-box,
.gallery-strip,
.portal-preview,
.logo-strip,
.process-band,
.cta-band,
.contact-form-wrap,
.briefing-band,
.schedule-card,
.equipment-card,
.review-card,
.faq-list details,
.partner-strip span,
.portal-sidebar,
.portal-breadcrumb-bar,
.portal-topbar,
.portal-body .welcome-panel,
.portal-body .board-panel,
.portal-body .info-panel,
.portal-body .side-panel,
.portal-body .mini-kanban-column,
.portal-body .support-item,
.portal-body .activity-item,
.portal-body .material-chip,
.portal-body .approval-media-card,
.portal-body .portal-profile-card,
.portal-body .user-pill,
.portal-body .breadcrumb-pill,
.portal-body .portal-search,
.portal-body .notification-chip {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.topbar {
  background:
    linear-gradient(180deg, rgba(20, 39, 78, 0.82), rgba(9, 18, 36, 0.88));
  border-color: rgba(210, 230, 255, 0.12);
  box-shadow:
    0 24px 52px rgba(4, 11, 24, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 0 0 1px rgba(138,229,255,0.05);
}

.brand,
.portal-brand {
  filter: drop-shadow(0 10px 22px rgba(109, 198, 255, 0.14));
}

.main-nav a,
.footer-links a,
.footer-links span,
.portal-nav a,
.portal-topbar p,
.portal-breadcrumbs,
.portal-search input,
.portal-body td,
.portal-body label,
.portal-body .muted,
.lead,
.section-title p,
.hero-copy p {
  color: #dbe8fb;
}

.main-nav a:hover,
.portal-nav a:hover {
  color: #ffffff;
}

.main-nav a.active {
  color: #9be9ff;
  text-shadow: 0 0 16px rgba(138,229,255,0.24);
}

.btn {
  background: linear-gradient(135deg, #97e7ff 0%, #5ec7ff 45%, #7aa0ff 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.14),
    0 18px 34px rgba(81, 161, 255, 0.22),
    0 0 30px rgba(138,229,255,0.12);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18),
    0 22px 42px rgba(81, 161, 255, 0.26),
    0 0 36px rgba(138,229,255,0.16);
}

.btn.secondary,
.btn.ghost,
.portal-body .btn.secondary,
.portal-body .btn.ghost {
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
  border-color: rgba(255,255,255,0.15);
}

.eyebrow,
.tag,
.status-pill,
.badge-row .tag,
.portal-body .tag,
.portal-body .status-pill {
  background: linear-gradient(180deg, rgba(138,229,255,0.12), rgba(255,255,255,0.06));
  border-color: rgba(138,229,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.section-shell,
.glass-panel,
.card,
.service-card,
.feature-card,
.plan-card,
.studio-card,
.portal-card,
.contact-card,
.value-card,
.pricing-card,
.metric-card,
.kpi-card,
.dashboard-card,
.table-card,
.panel,
.list-card,
.approval-card,
.file-card,
.permission-card,
.login-card,
.demo-box,
.hero-collage,
.feature-image,
.showcase-image,
.map-box,
.calendar-box,
.gallery-strip,
.portal-preview,
.logo-strip,
.process-band,
.cta-band,
.contact-form-wrap,
.briefing-band,
.schedule-card,
.equipment-card,
.review-card,
.faq-list details,
.partner-strip span {
  background:
    linear-gradient(180deg, rgba(25, 47, 89, 0.8), rgba(11, 20, 39, 0.92));
  border-color: rgba(218, 234, 255, 0.1);
  box-shadow:
    0 26px 60px rgba(4, 10, 24, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 0 0 1px rgba(138,229,255,0.04);
}

.section-shell::before,
.glass-panel::before,
.card::before,
.service-card::before,
.feature-card::before,
.plan-card::before,
.studio-card::before,
.portal-card::before,
.contact-card::before,
.value-card::before,
.pricing-card::before,
.metric-card::before,
.kpi-card::before,
.dashboard-card::before,
.table-card::before,
.panel::before,
.list-card::before,
.approval-card::before,
.file-card::before,
.permission-card::before,
.login-card::before,
.demo-box::before,
.hero-collage::before,
.feature-image::before,
.showcase-image::before,
.map-box::before,
.calendar-box::before,
.gallery-strip::before,
.portal-preview::before,
.logo-strip::before,
.process-band::before,
.cta-band::before,
.contact-form-wrap::before,
.briefing-band::before,
.schedule-card::before,
.equipment-card::before,
.review-card::before,
.faq-list details::before,
.partner-strip span::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 22%),
    radial-gradient(circle at 18% 0%, rgba(255,255,255,0.08), transparent 26%),
    radial-gradient(circle at 88% 12%, rgba(138,229,255,0.1), transparent 24%);
}

.section-shell::after,
.panel::after,
.login-card::after,
.service-card::after,
.feature-card::after,
.plan-card::after,
.studio-card::after,
.contact-card::after,
.portal-card::after,
.value-card::after,
.pricing-card::after,
.metric-card::after,
.kpi-card::after,
.dashboard-card::after,
.table-card::after,
.list-card::after,
.approval-card::after,
.file-card::after,
.permission-card::after,
.demo-box::after,
.hero-collage::after,
.feature-image::after,
.showcase-image::after,
.map-box::after,
.calendar-box::after,
.gallery-strip::after,
.portal-preview::after,
.logo-strip::after,
.process-band::after,
.cta-band::after,
.contact-form-wrap::after,
.briefing-band::after,
.schedule-card::after,
.equipment-card::after,
.review-card::after,
.faq-list details::after,
.partner-strip span::after,
.portal-sidebar::after,
.portal-breadcrumb-bar::after,
.portal-topbar::after,
.portal-body .panel::after,
.portal-body .table-card::after,
.portal-body .list-card::after,
.portal-body .approval-card::after,
.portal-body .file-card::after,
.portal-body .permission-card::after,
.portal-body .kpi-card::after,
.portal-body .kanban-card::after,
.portal-body .dashboard-card::after,
.portal-body .section-shell::after,
.portal-body .welcome-panel::after,
.portal-body .board-panel::after,
.portal-body .info-panel::after,
.portal-body .side-panel::after {
  background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.08));
  filter: blur(15px);
  opacity: .7;
}

.hero-copy h1,
.portal-topbar h1,
.section-title h2,
.panel h2,
.section-shell h1,
.section-shell h2,
.plan-card h3,
.service-card h3,
.feature-card h3,
.studio-card h3,
.portal-body h2,
.portal-body h3 {
  letter-spacing: -0.03em;
  text-shadow: 0 8px 30px rgba(4, 12, 28, 0.22);
}

.metric-card,
.kpi-card,
.portal-body .kpi-neo,
.portal-body .mini-demand,
.portal-body .support-item,
.portal-body .activity-item,
.portal-body .approval-media-card,
.portal-body .material-chip,
.portal-body .demand-card-mini,
.portal-body .ticket-mini,
.portal-body .material-mini {
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(100,180,255,0.06));
  border-color: rgba(218,234,255,0.12);
}

.metric-card strong,
.kpi-card strong,
.portal-body .kpi-neo strong {
  color: #ffffff;
  text-shadow: 0 0 22px rgba(138,229,255,0.1);
}

.hero-collage,
.feature-image,
.showcase-image,
.map-box,
.calendar-box,
.gallery-strip,
.portal-preview {
  box-shadow:
    0 28px 68px rgba(4, 10, 24, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 0 0 1px rgba(138,229,255,0.06);
}

.hero-collage img,
.feature-image img,
.showcase-image img,
.map-box img,
.calendar-box img,
.gallery-strip img,
.portal-preview img,
.studio-card img,
.review-card img {
  filter: saturate(1.06) contrast(1.03) brightness(1.02);
}

.portal-body {
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,0.22), transparent 18%),
    radial-gradient(circle at 86% 0%, rgba(126,215,255,0.18), transparent 18%),
    radial-gradient(circle at 52% 8%, rgba(255,255,255,0.08), transparent 18%),
    linear-gradient(180deg, #7e8fb0 0%, #58719a 10%, #254780 24%, #173462 42%, #12284c 62%, #0c1b34 100%);
}

.portal-body::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.05) 30%, transparent 56%),
    radial-gradient(circle at 18% 16%, rgba(255,255,255,0.18), transparent 14%),
    radial-gradient(circle at 84% 10%, rgba(126,215,255,0.16), transparent 16%);
}

.portal-sidebar,
.portal-breadcrumb-bar,
.portal-topbar,
.portal-body .panel,
.portal-body .table-card,
.portal-body .list-card,
.portal-body .approval-card,
.portal-body .file-card,
.portal-body .permission-card,
.portal-body .kpi-card,
.portal-body .kanban-card,
.portal-body .dashboard-card,
.portal-body .section-shell,
.portal-body .welcome-panel,
.portal-body .board-panel,
.portal-body .info-panel,
.portal-body .side-panel,
.portal-body .mini-kanban-column,
.portal-body .portal-profile-card,
.portal-body .user-pill,
.portal-body .breadcrumb-pill,
.portal-body .portal-search,
.portal-body .notification-chip {
  background: linear-gradient(180deg, rgba(36, 63, 112, 0.82), rgba(14, 25, 47, 0.92));
  border-color: rgba(225,236,255,0.13);
  box-shadow:
    0 24px 56px rgba(4, 10, 24, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 0 0 1px rgba(138,229,255,0.04);
}

.portal-sidebar {
  background:
    linear-gradient(180deg, rgba(46, 79, 138, 0.92), rgba(13, 24, 46, 0.96));
}

.portal-nav a.active {
  background: linear-gradient(90deg, rgba(138,229,255,0.2), rgba(255,255,255,0.1));
  border-color: rgba(138,229,255,0.24);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 0 24px rgba(138,229,255,0.14);
}

.portal-nav a.active .portal-nav-dot,
.activity-dot {
  background: linear-gradient(135deg, #a5efff, #67d0ff);
  box-shadow: 0 0 14px rgba(138,229,255,0.3);
}

.portal-avatar,
.avatar,
.user-avatar {
  background: linear-gradient(135deg, #eff9ff 0%, #8ddfff 58%, #f5ddc1 100%);
  color: #07111f;
  box-shadow: 0 16px 30px rgba(89, 176, 255, 0.18);
}

input,
select,
textarea,
.portal-body input,
.portal-body select,
.portal-body textarea {
  background: linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.05));
  border-color: rgba(255,255,255,0.16);
  color: #f8fbff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

input::placeholder,
textarea::placeholder,
.portal-body input::placeholder,
.portal-body textarea::placeholder {
  color: #bfd2ef;
}

input:focus,
select:focus,
textarea:focus,
.portal-body input:focus,
.portal-body select:focus,
.portal-body textarea:focus {
  border-color: rgba(138,229,255,0.34);
  box-shadow: 0 0 0 4px rgba(138,229,255,0.1), inset 0 1px 0 rgba(255,255,255,0.08);
}

.portal-body .table-card th,
table th {
  background: rgba(255,255,255,0.09);
  color: #f9fbff;
}

.portal-body .table-card td,
table td {
  border-bottom-color: rgba(255,255,255,0.08);
}

.fab-action {
  background: linear-gradient(135deg, #a6efff, #70c9ff 55%, #f0d1b0 100%);
  color: #08131f;
  box-shadow: 0 20px 44px rgba(89, 176, 255, 0.22), 0 0 26px rgba(138,229,255,0.12);
}

@media (max-width: 980px) {
  .portal-shell { grid-template-columns: 1fr; }
  .portal-sidebar { height: auto; }
}

@media (max-width: 760px) {
  .hero-copy h1 { font-size: 2.2rem; }
  .section-title h2,
  .panel h2,
  .section-shell h1,
  .section-shell h2,
  .portal-topbar h1,
  .welcome-panel h2 { font-size: 1.72rem; }
}

/* Expansive widescreen layout refinement — 2026-05-04 */
:root {
  --container: min(1720px, calc(100% - clamp(24px, 4vw, 88px)));
}

.site-shell {
  width: var(--container);
  padding-bottom: 46px;
}

main { gap: clamp(30px, 3vw, 44px); }
section { gap: clamp(18px, 1.8vw, 28px); }

.section-shell,
.glass-panel,
.card,
.service-card,
.feature-card,
.plan-card,
.studio-card,
.portal-card,
.contact-card,
.value-card,
.pricing-card,
.metric-card,
.kpi-card,
.dashboard-card,
.table-card,
.panel,
.list-card,
.approval-card,
.file-card,
.permission-card,
.login-card,
.demo-box {
  padding: clamp(22px, 2vw, 34px);
}

.topbar {
  gap: 22px;
  padding: 16px clamp(18px, 2vw, 30px);
}

.main-nav,
.top-actions,
.hero-actions,
.hero-metrics,
.logo-strip,
.cards-grid,
.grid-2,
.grid-3,
.grid-4,
.comparison-grid,
.contact-grid,
.inline-actions,
.badge-row,
.footer-links,
.process-row,
.portal-kpis {
  gap: clamp(16px, 1.4vw, 22px);
}

.hero-grid,
.home-feature-grid,
.site-intro-grid,
.site-section-grid,
.site-duo-grid,
.contact-split,
.about-story,
.dashboard-layout,
.table-grid,
.login-shell,
.bottom-showcase,
.portal-dashboard-grid {
  gap: clamp(22px, 2vw, 32px);
}

.login-shell {
  width: min(1560px, calc(100% - clamp(24px, 4vw, 88px)));
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
}

.portal-shell {
  width: min(1840px, calc(100% - clamp(20px, 3vw, 56px)));
  grid-template-columns: 284px minmax(0, 1fr);
  gap: 22px;
}

.portal-dashboard-grid {
  grid-template-columns: minmax(0, 1.32fr) minmax(360px, .88fr);
}

.site-nav-card,
.service-card,
.plan-card,
.studio-card,
.pricing-card,
.value-card,
.portal-card,
.contact-card,
.equipment-card,
.review-card,
.kpi-neo,
.mini-kanban-column,
.approval-media-card,
.material-chip {
  min-height: 100%;
}

@media (min-width: 1280px) {
  .hero-copy h1 {
    max-width: 11ch;
    font-size: clamp(3.4rem, 5vw, 5.25rem);
  }

  .section-title h2,
  .panel h2,
  .section-shell h1,
  .section-shell h2,
  .portal-topbar h1,
  .welcome-panel h2 {
    font-size: clamp(2.2rem, 3.1vw, 3.9rem);
  }

  .site-page-header h1 {
    max-width: 13ch;
    font-size: clamp(3.1rem, 4.2vw, 4.8rem);
  }

  .site-intro-grid,
  .site-section-grid,
  .site-duo-grid,
  .contact-split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: stretch;
  }

  .home-feature-grid,
  .about-story,
  .dashboard-layout,
  .table-grid,
  .bottom-showcase {
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
  }

  .site-nav-grid,
  .site-triple-grid,
  .service-grid-6,
  .plan-grid,
  .studio-list,
  .contact-quick-grid,
  .value-grid,
  .differentials-grid,
  .review-grid,
  .equipment-grid,
  .kanban {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
  }

  .site-nav-grid > * { grid-column: span 4; min-height: 250px; }
  .site-nav-grid > *:nth-child(1),
  .site-nav-grid > *:nth-child(2) { grid-column: span 6; }
  .site-nav-card.wide { grid-column: 1 / -1; min-height: auto; }

  .site-triple-grid > *,
  .value-grid > *,
  .review-grid > * { grid-column: span 4; }

  .service-grid-6 > * { grid-column: span 4; }
  .service-grid-6 > *:nth-child(1),
  .service-grid-6 > *:nth-child(6) { grid-column: span 6; }

  .plan-grid > * { grid-column: span 3; }
  .plan-grid > *.highlight { grid-column: span 6; }

  .studio-list > * { grid-column: span 4; }
  .studio-list > *:first-child { grid-column: span 5; }
  .studio-list > *:nth-child(2) { grid-column: span 4; }
  .studio-list > *:nth-child(3) { grid-column: span 3; }

  .contact-quick-grid > * { grid-column: span 3; }
  .differentials-grid > *,
  .equipment-grid > * { grid-column: span 3; }
  .kanban > * { grid-column: span 3; }

  .site-stat-grid,
  .home-process,
  .portal-kpis,
  .kpi-strip,
  .mini-kanban-grid,
  .dashboard-bottom-grid,
  .materials-grid-portal {
    gap: 18px;
  }

  .site-stat-grid,
  .portal-kpis,
  .kpi-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .partner-strip {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 1279px) {
  .site-nav-grid,
  .service-grid-6,
  .plan-grid,
  .studio-list,
  .contact-quick-grid,
  .value-grid,
  .differentials-grid,
  .review-grid,
  .equipment-grid,
  .kanban,
  .site-triple-grid {
    gap: 20px;
  }
}

/* Editorial digital premium refinement — 2026-05-04 */
.immersive-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
  min-height: min(78vh, 860px);
  padding: clamp(28px, 3vw, 46px);
}
.immersive-hero-inner {
  min-height: auto;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
}
.immersive-copy {
  display: grid;
  gap: 18px;
  max-width: 900px;
}
.immersive-copy h1 {
  font-size: clamp(3.2rem, 5.2vw, 6rem);
  line-height: .95;
  letter-spacing: -0.05em;
  max-width: 11.5ch;
}
.immersive-copy .lead {
  max-width: 62ch;
  font-size: 1.08rem;
}
.immersive-visual {
  position: relative;
  min-height: 540px;
  display: grid;
  align-items: stretch;
}
.editorial-frame {
  min-height: 100%;
}
.visual-float-card {
  position: absolute;
  z-index: 3;
  max-width: 240px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(112,183,255,0.08));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 48px rgba(4, 10, 24, 0.24);
}
.visual-float-card strong,
.visual-float-card span { display: block; }
.visual-float-card strong { color: #fff; font-size: 1rem; margin-bottom: 6px; }
.visual-float-card span { color: #d9e8ff; font-size: .9rem; line-height: 1.45; }
.float-primary { top: 26px; left: -18px; }
.float-secondary { right: -10px; bottom: 26px; }

.statement-band,
.command-band,
.decision-band,
.premium-cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: clamp(20px, 2vw, 30px);
  align-items: center;
  padding: clamp(24px, 2.3vw, 34px);
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(18, 35, 68, 0.82), rgba(8, 15, 30, 0.92));
  box-shadow: 0 24px 58px rgba(4, 10, 24, 0.22), inset 0 1px 0 rgba(255,255,255,0.12);
}
.statement-band h2,
.command-band h2,
.decision-band h2,
.premium-cta-band h2 { font-size: clamp(2rem, 3vw, 3.4rem); margin-bottom: 0; }
.statement-band p,
.command-band p,
.decision-band p,
.premium-cta-band p { margin: 0; }

.editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 28px);
}
.editorial-grid-home > *:first-child { grid-column: span 6; }
.editorial-grid-home > *:not(:first-child) { grid-column: span 3; }
.service-editorial-grid > *:first-child { grid-column: span 6; }
.service-editorial-grid > *:not(:first-child) { grid-column: span 3; }
.editorial-panel {
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 260px;
  padding: clamp(22px, 2vw, 30px);
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(22, 42, 82, 0.8), rgba(8, 16, 32, 0.92));
  box-shadow: 0 24px 60px rgba(4, 10, 24, 0.24), inset 0 1px 0 rgba(255,255,255,0.12);
  overflow: hidden;
}
.editorial-panel::before,
.plan-spotlight::before,
.login-card-premium::before,
.login-brand-side::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,0.08), transparent 24%),
    radial-gradient(circle at 100% 12%, rgba(138,229,255,0.12), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 28%);
  pointer-events: none;
}
.editorial-panel > * { position: relative; z-index: 1; }
.editorial-panel-xl { min-height: 320px; }
.editorial-panel h3,
.plan-spotlight h2,
.showcase-copy h2,
.login-brand-side h1,
.login-card-premium h2 {
  font-size: clamp(1.5rem, 2.2vw, 2.8rem);
  line-height: 1.02;
}

.split-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 2vw, 30px);
  align-items: stretch;
}
.split-showcase-reverse .showcase-image { order: 2; }
.split-showcase-reverse .showcase-copy { order: 1; }
.showcase-copy {
  display: grid;
  align-content: center;
  gap: 14px;
  min-height: 420px;
}
.muted-shell {
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(110,177,255,0.04));
}
.timeline-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.timeline-steps div,
.decision-grid > div,
.command-link,
.role-rail-item {
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.035));
}
.timeline-steps strong,
.decision-grid strong,
.command-link strong,
.role-rail-item strong {
  display: block;
  color: #fff;
  margin-bottom: 6px;
}
.timeline-steps span,
.decision-grid span,
.command-link span,
.role-rail-item span,
.role-rail-item small {
  color: #d7e5fb;
  line-height: 1.45;
}

.command-links,
.decision-grid,
.statement-mini-grid,
.role-rail,
.plan-story-side {
  display: grid;
  gap: 14px;
}
.command-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.command-link {
  display: grid;
  align-content: start;
  text-decoration: none;
  min-height: 120px;
}
.command-link:hover { border-color: rgba(138,229,255,0.26); }

.statement-mini-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-self: end;
}
.statement-mini-grid .metric-card {
  min-height: 130px;
  display: grid;
  align-content: end;
}
.statement-mini-grid .metric-card strong {
  font-size: clamp(1.5rem, 2vw, 2.1rem);
}

.plan-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
  gap: clamp(22px, 2vw, 30px);
}
.plan-spotlight {
  position: relative;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: clamp(26px, 2.6vw, 36px);
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(30, 57, 108, 0.9), rgba(10, 18, 35, 0.96));
  box-shadow: 0 28px 70px rgba(4, 10, 24, 0.24), inset 0 1px 0 rgba(255,255,255,0.14);
}
.plan-spotlight > * { position: relative; z-index: 1; }
.plan-story-side { grid-template-columns: 1fr; }
.decision-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.login-shell-premium {
  align-items: stretch;
}
.login-brand-side,
.login-card-premium {
  position: relative;
  overflow: hidden;
}
.login-brand-side {
  display: grid;
  gap: 18px;
  align-content: start;
}
.login-brand-side h1 {
  max-width: 12ch;
}
.login-preview-frame {
  min-height: 300px !important;
}
.role-rail {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.role-rail-item small { display: block; margin-top: 6px; opacity: .88; }
.login-card-premium {
  display: grid;
  align-content: center;
  gap: 14px;
  min-height: 100%;
}
.login-card-premium form {
  display: grid;
  gap: 14px;
}
.login-intro {
  margin: 0;
  color: #dbe7fb;
}
.login-card-premium .btn,
.login-card-premium .btn.ghost { width: 100%; }

.portal-dashboard-grid {
  gap: clamp(24px, 2vw, 34px);
}
.welcome-panel {
  padding: clamp(20px, 2vw, 30px);
}
.welcome-panel h2 {
  max-width: 16ch;
}
.kpi-strip,
.mini-kanban-grid,
.dashboard-bottom-grid,
.materials-grid-portal {
  gap: 16px;
}
.mini-kanban-column {
  min-height: 230px;
}

@media (max-width: 1120px) {
  .immersive-hero,
  .immersive-hero-inner,
  .statement-band,
  .command-band,
  .decision-band,
  .premium-cta-band,
  .plan-story-grid,
  .split-showcase,
  .login-shell-premium {
    grid-template-columns: 1fr;
  }
  .editorial-grid-home > *,
  .service-editorial-grid > * { grid-column: span 6; }
  .decision-grid,
  .command-links,
  .role-rail,
  .statement-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .immersive-hero,
  .immersive-hero-inner,
  .showcase-copy,
  .plan-spotlight,
  .editorial-panel,
  .statement-band,
  .command-band,
  .decision-band,
  .premium-cta-band {
    padding: 22px;
  }
  .immersive-copy h1,
  .login-brand-side h1 {
    max-width: none;
    font-size: clamp(2.2rem, 10vw, 3.2rem);
  }
  .immersive-visual {
    min-height: 340px;
  }
  .float-primary,
  .float-secondary {
    position: static;
    max-width: none;
  }
  .immersive-visual {
    gap: 14px;
  }
  .editorial-grid {
    grid-template-columns: 1fr;
  }
  .editorial-grid-home > *,
  .service-editorial-grid > * { grid-column: span 1; }
  .timeline-steps,
  .command-links,
  .decision-grid,
  .role-rail,
  .statement-mini-grid { grid-template-columns: 1fr; }
}