/* Focalis Systems — Enterprise Trust — Variant C */
:root,
html[data-theme="light"]{
  --navy: #0F2342;
  --navy-soft: #162C52;
  --navy-light: #1E3A68;
  --teal: #14B8A6;
  --teal-dark: #0F9A8C;
  --teal-soft: #E6F7F5;
  --teal-border: #BFE9E4;
  --stone-50: #FAF9F7;
  --stone-100: #F5F3EF;
  --stone-200: #E8E4DE;
  --stone-300: #D6D0C4;
  --stone-400: #A8A29A;
  --stone-500: #78746E;
  --stone-600: #57534E;
  --ink: #1A1E2A;
  --ink-muted: #5B6476;
  --border: #E8E4DE;
  --border-strong: #D6D0C4;
  --white: #FFFFFF;
  --bg: #FAF9F7;
  --bg-card: #FFFFFF;
  --bg-hero: linear-gradient(to bottom, #FFFFFF 0%, #FAF9F7 100%);
}

/* Dark theme — inverted palette */
html[data-theme="dark"]{
  --navy: #E8E4DE;
  --navy-soft: #D6D0C4;
  --navy-light: #A8A29A;
  --teal: #2DD4BF;
  --teal-dark: #14B8A6;
  --teal-soft: #0F2A2A;
  --teal-border: #1E4A4A;
  --stone-50: #080C1A;
  --stone-100: #0E1428;
  --stone-200: #1A2442;
  --stone-300: #2A3A5E;
  --stone-400: #5A6585;
  --stone-500: #8A94AC;
  --stone-600: #C2C8D6;
  --ink: #E8E4DE;
  --ink-muted: #9AA3B8;
  --border: #1E2D4D;
  --border-strong: #2A3A5E;
  --white: #0E1428;
  --bg: #080C1A;
  --bg-card: #0E1428;
  --bg-hero: linear-gradient(to bottom, #080C1A 0%, #0E1428 100%);
}

*{scroll-behavior:smooth}
html{background:var(--bg)}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.6;
  transition:background 0.3s, color 0.3s;
}
.serif{font-family:'IBM Plex Serif', Georgia, serif}
.mono{font-family:'IBM Plex Mono', monospace}

::selection{background:rgba(20,184,166,0.2)}
a:focus-visible, button:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:2px;
}

/* Nav */
.nav-wrap{
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:40;
  transition:background 0.3s, border-color 0.3s;
}
html[data-theme="dark"] .nav-wrap{
  background:rgba(8,12,26,0.88);
  border-color:var(--border);
}

/* Buttons */
.btn-primary{
  background:var(--navy);
  color:var(--bg-card);
  font-weight:500;
  font-size:14px;
  letter-spacing:0.01em;
  padding:11px 20px;
  border-radius:6px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:background 0.2s, transform 0.15s, box-shadow 0.2s;
  border:1px solid var(--navy);
  line-height:1;
}
html[data-theme="light"] .btn-primary{ color:white; }
html[data-theme="dark"] .btn-primary{ background:#E8E4DE; color:#080C1A; border-color:#E8E4DE; }
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,35,66,0.15)}
html[data-theme="light"] .btn-primary:hover{background:var(--navy-soft)}
html[data-theme="dark"] .btn-primary:hover{background:#FFFFFF; border-color:#FFFFFF}
.btn-primary:active{transform:translateY(0)}
.btn-teal{
  background:var(--teal);
  color:white;
  font-weight:600;
  font-size:14px;
  padding:11px 20px;
  border-radius:6px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:background 0.2s, transform 0.15s, box-shadow 0.2s;
  border:1px solid var(--teal);
  line-height:1;
}
.btn-teal:hover{background:var(--teal-dark);transform:translateY(-1px);box-shadow:0 4px 12px rgba(20,184,166,0.25)}
.btn-secondary{
  background:var(--white);
  color:var(--navy);
  border:1px solid var(--border-strong);
  font-weight:500;
  font-size:14px;
  padding:11px 20px;
  border-radius:6px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:border-color 0.2s, background 0.2s, box-shadow 0.2s;
  line-height:1;
}
.btn-secondary:hover{border-color:var(--navy);background:var(--stone-100);box-shadow:0 2px 8px rgba(15,35,66,0.06)}
.btn-ghost{
  color:var(--navy);
  font-weight:500;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:color 0.2s, gap 0.2s;
}
.btn-ghost:hover{color:var(--teal-dark);gap:10px}

/* Cards */
.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:10px;
  transition:border-color 0.2s, box-shadow 0.2s, transform 0.2s, background 0.3s;
}
.card:hover{border-color:var(--stone-300);box-shadow:0 4px 24px rgba(15,35,66,0.06);transform:translateY(-1px)}
.card-highlight{
  border:1px solid var(--teal-border);
  background:var(--bg-card);
  border-radius:10px;
  box-shadow:0 0 0 1px var(--teal-border), 0 8px 32px rgba(20,184,166,0.08);
}

/* Badges */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:4px 9px;
  border-radius:999px;
  line-height:1;
}
.badge-teal{background:var(--teal-soft);color:var(--teal-dark);border:1px solid var(--teal-border)}
.badge-navy{background:var(--navy);color:var(--bg-card)}
html[data-theme="dark"] .badge-navy{background:#E8E4DE;color:#080C1A}
.badge-stone{background:var(--stone-100);color:var(--stone-600);border:1px solid var(--border)}
.badge-live{background:#FEF2F2;color:#B91C1C;border:1px solid #FECACA}
html[data-theme="dark"] .badge-live{background:#2A1212;color:#FCA5A5;border-color:#7F1D1D}

/* Trust bar */
.trust-strip{
  background:var(--bg-card);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

/* Tables */
.data-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.data-table th{
  text-align:left;
  font-weight:600;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-muted);
  padding:10px 16px;
  border-bottom:2px solid var(--border);
  background:var(--stone-50);
  white-space:nowrap;
}
.data-table td{
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  color:var(--ink);
  vertical-align:top;
}
.data-table tr:last-child td{border-bottom:none}
.data-table .mono{font-size:13px}

/* Dividers */
.divider{height:1px;background:var(--border)}
.divider-vert{width:1px;background:var(--border)}

/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)}}
.animate-fadeUp{animation:fadeUp 0.6s cubic-bezier(0.16,1,0.3,1) both}
.delay-100{animation-delay:0.08s}
.delay-200{animation-delay:0.16s}
.delay-300{animation-delay:0.24s}
.reveal{opacity:0;transform:translateY(12px);transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1),transform 0.6s cubic-bezier(0.16,1,0.3,1)}
.reveal.in{opacity:1;transform:none}

/* Prose for legal */
.prose-legal{color:var(--ink);line-height:1.75;font-size:14.5px}
.prose-legal h2{color:var(--navy);font-weight:700;font-size:19px;letter-spacing:-0.02em;margin-top:2.6em;margin-bottom:0.6em;padding-bottom:0.4em;border-bottom:1px solid var(--border);font-family:'IBM Plex Serif', Georgia, serif}
.prose-legal h3{color:var(--navy);font-weight:600;font-size:15px;margin-top:1.8em;margin-bottom:0.5em}
.prose-legal h4{color:var(--ink);font-weight:600;font-size:14px;margin-top:1.4em;margin-bottom:0.4em}
.prose-legal p{margin-bottom:1em;color:var(--ink)}
.prose-legal ul, .prose-legal ol{margin-bottom:1em;padding-left:1.4em}
.prose-legal ul{list-style:disc}
.prose-legal ol{list-style:decimal}
.prose-legal li{margin-bottom:0.35em;color:var(--ink)}
.prose-legal a{color:var(--teal-dark);text-decoration:underline;text-underline-offset:3px;font-weight:500}
.prose-legal a:hover{color:var(--navy)}
.prose-legal strong{color:var(--ink);font-weight:600}
.prose-legal table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:14px}
.prose-legal th{text-align:left;font-weight:600;font-size:12px;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink-muted);padding:8px 12px;border:1px solid var(--border);background:var(--stone-50)}
.prose-legal td{padding:8px 12px;border:1px solid var(--border);vertical-align:top}
.prose-legal .callout{background:var(--stone-100);border:1px solid var(--border);border-left:3px solid var(--teal);padding:14px 16px;border-radius:6px;margin:1.4em 0;font-size:14px}
.prose-legal .callout-navy{border-left-color:var(--navy);background:var(--stone-100)}

/* Form */
.field-label{font-size:13px;font-weight:600;color:var(--navy);margin-bottom:6px;display:block;letter-spacing:-0.01em}
.field-input{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border-strong);
  border-radius:6px;
  font-size:14px;
  color:var(--ink);
  background:var(--bg-card);
  transition:border-color 0.2s, box-shadow 0.2s;
  font-family:inherit;
}
.field-input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(20,184,166,0.12)}
.field-input::placeholder{color:var(--stone-400)}
select.field-input{appearance:auto}

/* Mobile menu */
.mobile-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:var(--bg-card);
  border-bottom:1px solid var(--border);
  box-shadow:0 8px 32px rgba(15,35,66,0.08);
  padding:8px 0 16px;
}
.mobile-menu.open{display:block}

/* Check list */
.check{color:var(--teal);flex-shrink:0}

/* Gradient hero */
.hero-gradient{
  background:
    radial-gradient(ellipse 900px 500px at 75% -10%, rgba(20,184,166,0.08), transparent 60%),
    radial-gradient(ellipse 700px 400px at 10% 0%, rgba(15,35,66,0.04), transparent 60%),
    linear-gradient(to bottom, var(--white) 0%, var(--stone-50) 100%);
}
html[data-theme="dark"] .hero-gradient{
  background:
    radial-gradient(ellipse 900px 500px at 75% -10%, rgba(45,212,191,0.12), transparent 60%),
    radial-gradient(ellipse 700px 400px at 10% 0%, rgba(45,212,191,0.06), transparent 60%),
    linear-gradient(to bottom, #080C1A 0%, #0E1428 100%);
}

/* Theme toggle */
#theme-toggle{
  width:36px;
  height:36px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--bg-card);
  color:var(--ink);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
  flex-shrink:0;
}
#theme-toggle:hover{background:var(--stone-100);border-color:var(--border-strong);transform:translateY(-1px)}
#theme-toggle:active{transform:translateY(0)}
#theme-toggle svg{transition:transform 0.3s}
html[data-theme="dark"] #theme-toggle{border-color:var(--border);}

/* Hero 3D & floating visuals */
.hero-visual-wrap{
  position:relative;
}
.hero-mesh{
  position:absolute;
  inset:-16px;
  background: radial-gradient(ellipse 600px 400px at 60% 20%, rgba(20,184,166,0.10), transparent 60%),
              radial-gradient(ellipse 500px 300px at 20% 80%, rgba(15,35,66,0.06), transparent 60%);
  border-radius:16px;
  filter:blur(16px);
  pointer-events:none;
}
html[data-theme="dark"] .hero-mesh{
  background: radial-gradient(ellipse 600px 400px at 60% 20%, rgba(45,212,191,0.18), transparent 60%),
              radial-gradient(ellipse 500px 300px at 20% 80%, rgba(45,212,191,0.08), transparent 60%);
}
#hero-3d{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:12px;
  opacity:0.55;
  pointer-events:none;
}
.hero-float-card{
  position:absolute;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  box-shadow:0 8px 24px rgba(15,35,66,0.08);
  font-size:12px;
  line-height:1.4;
  pointer-events:none;
}
.hero-float-card--a{ top:-10px; right:12px; animation:floatA 6s ease-in-out infinite; }
.hero-float-card--b{ bottom:18px; left:-12px; animation:floatB 7s ease-in-out infinite; }
@keyframes floatA{0%,100%{transform:translateY(0) rotate(-0.5deg)}50%{transform:translateY(-8px) rotate(0.5deg)}}
@keyframes floatB{0%,100%{transform:translateY(0) rotate(0.5deg)}50%{transform:translateY(-6px) rotate(-0.5deg)}}

/* Product images */
.product-image{
  width:100%;
  height:168px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid var(--border);
  display:block;
}
.product-card-image-wrap{
  margin:-1px -1px 0;
  overflow:hidden;
  border-radius:10px 10px 0 0;
}
.product-card-image-wrap .product-image{
  border:none;
  border-radius:0;
  height:160px;
  transition:transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.card:hover .product-image, .card-highlight:hover .product-image{transform:scale(1.03)}

/* Gallery strip */
.gallery-strip img{
  width:100%;
  height:200px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid var(--border);
  transition:transform 0.4s, box-shadow 0.4s;
}
.gallery-strip a:hover img{transform:translateY(-2px);box-shadow:0 8px 24px rgba(15,35,66,0.10)}

/* Video section */
.video-wrap{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:#0F2342;
  border:1px solid var(--border);
}
html[data-theme="dark"] .video-wrap{border-color:var(--border)}
.video-wrap video{
  width:100%;
  height:420px;
  object-fit:cover;
  display:block;
}
.video-fallback{
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, #0F2342 0%, #162C52 25%, #14B8A6 50%, #0F2342 75%, #1E3A68 100%);
  background-size:400% 400%;
  animation:gradientShift 8s ease infinite;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.4s;
}
.video-fallback--show{opacity:1}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.video-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(15,35,66,0.85) 0%, rgba(15,35,66,0.25) 45%, transparent 75%);
  pointer-events:none;
}

/* Dark overrides for specific Tailwind arbitrary colors */
html[data-theme="dark"] .bg-\[\#0F2342\]{background-color:#0E1428 !important; border-color:var(--border) !important}
html[data-theme="dark"] .bg-\[\#FAF9F7\]{background-color:var(--stone-100) !important}
html[data-theme="dark"] .bg-white{background-color:var(--bg-card) !important}
html[data-theme="dark"] .text-\[\#0F2342\]{color:var(--ink) !important}
html[data-theme="dark"] .text-\[\#3A4356\]{color:var(--ink-muted) !important}
html[data-theme="dark"] .text-\[\#5B6476\]{color:var(--ink-muted) !important}
html[data-theme="dark"] .border-\[\#E8E4DE\]{border-color:var(--border) !important}
html[data-theme="dark"] footer{border-color:var(--border); background:var(--bg-card)}