:root{ --navy-900:#0f1a26; --navy-850:#152636; --navy-800:#1E2F40;
  --ink:#EAF1F7; --muted:#D8E5EF; --mint:#6be0c9; --mint-dark:#009688;
  --card:#F8FBFD; --text:#0b1f2a; --link:#0b7ebf; --crumb:#6b7c8a; --focus:#2563eb;}
*{box-sizing:border-box} html,body{margin:0;padding:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:#fdfdfd}
a{color:var(--link);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 24px}
.header{background:var(--navy-850);color:#fff;position:sticky;top:0;z-index:20;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.header .bar{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px}
.brand img{width:28px;height:28px}
.nav a{color:#EAF1F7;margin-left:28px;opacity:.9;font-weight:500}
.hero{background:linear-gradient(135deg,var(--navy-900),var(--navy-800));color:var(--ink);padding:88px 0;text-align:center}
.hero h1{font-size:54px;line-height:1.1;margin:0 0 20px;font-weight:800}
.hero p{font-size:19px;max-width:760px;margin:0 auto;color:var(--muted);line-height:1.5}
.cta{margin-top:34px}
.btn-primary{background:var(--mint);color:#07343A;border:0;padding:16px 26px;border-radius:12px;font-weight:700;box-shadow:0 4px 10px rgba(0,0,0,.15);display:inline-block}

.section{background:#fff}
/* Feature panels */
.features{padding:64px 0}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.feature{background:#fff;padding:22px;border-radius:12px;border:1px solid #e4ebf2;box-shadow:0 4px 14px rgba(0,0,0,.05);transition:transform .15s, box-shadow .15s; cursor:pointer; position:relative}
.feature:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.08)}
.feature:focus{outline:3px solid var(--focus); outline-offset:3px}
.feature img{width:28px;height:28px}
.feature h3{margin:12px 0 6px;font-size:20px;color:#0e2a3b}
.feature p{margin:0;color:#3c4b57;line-height:1.55}
.feature::after{content:'→'; position:absolute; right:16px; bottom:16px; color:#295277; opacity:.45}

/* Services panels */
.services{background:#f9fbfc;padding:50px 0 70px}
.services h2{font-size:28px;text-align:center;margin:8px 0 30px;color:#0e2a3b}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.card{background:var(--card);border:1px solid #E2E9F0;border-radius:14px;padding:22px;box-shadow:0 8px 20px rgba(17,31,42,.06);transition:transform .15s,box-shadow .15s; position:relative}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(17,31,42,.12)}
.card:focus{outline:3px solid var(--focus); outline-offset:3px}
.card h4,.card h3{margin:4px 0 8px;font-size:18px;color:#0e2a3b}
.card p{margin:0;color:#314355;line-height:1.55}
.card .mini{width:22px;height:22px;vertical-align:-3px;margin-right:8px}
.card::after{content:'→'; position:absolute; right:16px; bottom:16px; color:#295277; opacity:.45}

/* Use-cases (non-clickable boxes, only topic links) */
.usecases{background:#fff;border-top:1px solid #E7EDF3;padding:50px 0 70px}
.usecases h2{font-size:28px;text-align:center;margin:0 0 36px;color:#0e2a3b}
.uc-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.uc-list.card{cursor:default}
.uc-list h3{margin-top:0}
ul.bullets{padding-left:0;margin:0}
ul.bullets li{list-style:none;margin:12px 0;color:#2b3a48;display:flex;align-items:flex-start;gap:10px;font-size:16px}
.dot{width:10px;height:10px;background:#27d1a1;border-radius:999px;margin-top:7px;flex:0 0 10px}
ul.bullets li a{color:#0e2a3b;font-weight:600}
ul.bullets li a:hover{text-decoration:underline}

.footer{background:#152636;color:#e3edf7;padding:26px 0;text-align:center;font-size:14px;margin-top:40px}
.breadcrumbs{background:#f7fafd;border-bottom:1px solid #E7EDF3}
.crumbs{display:flex;gap:10px;align-items:center;padding:14px 0;color:#6b7c8a;font-size:14px}
.crumbs a{color:#0b7ebf} .crumbs .sep{opacity:.6}

.panel{background:#fff;padding:60px 0}
.box{background:#fdfefe;border:2px dashed #cfd9e3;border-radius:14px;padding:32px;text-align:center;max-width:720px;margin:0 auto;box-shadow:inset 0 2px 8px rgba(0,0,0,.04)}
.box h2{margin-top:0;font-size:26px;color:#0e2a3b}

@media (max-width:900px){ .hero h1{font-size:40px} .uc-grid{grid-template-columns:1fr} }


/* ===== Enhanced interactions v3 ===== */
:root{
  --hover-shadow: 0 14px 32px rgba(17,31,42,.16);
  --lift: translateY(-5px);
}

.feature, .cards .card{ transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s, background .18s; }
.feature:hover, .cards .card:hover{ transform: var(--lift); box-shadow: var(--hover-shadow); background: linear-gradient(180deg, rgba(107,224,201,.05), rgba(255,255,255,0)); }
.feature:active, .cards .card:active{ transform: translateY(-1px); }

/* animated arrow */
.feature::after, .cards .card::after{ transition: transform .18s, opacity .18s; }
.feature:hover::after, .cards .card:hover::after{ transform: translateX(3px); opacity:.7; }

/* crisper focus ring */
.feature:focus, .cards .card:focus, a:focus{
  outline: 3px solid rgba(37,99,235,.9);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

/* link styling inside UC lists */
.uc-list .bullets a{ position:relative; text-decoration:none; }
.uc-list .bullets a::after{
  content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:#0b7ebf; transition: width .2s ease;
}
.uc-list .bullets a:hover::after{ width:100%; }

/* Subtle card border change on hover */
.feature, .cards .card, .uc-list.card{ border:1px solid #E2E9F0; }
.feature:hover, .cards .card:hover{ border-color:#cfe3ef; }

/* Spacing polish */
.cards .card h4, .cards .card h3{ display:flex; align-items:center; gap:10px; }


/* ===== Dark Card Theme (features + services) ===== */
:root{
  --card-dark:#0f1b26;
  --card-dark-2:#132334;
  --card-text:#ecf3f8;
  --card-sub:#b6c8d6;
  --card-border:#1f3448;
  --card-shadow: 0 14px 32px rgba(5,14,22,.45);
  --accent:#6be0c9;
}

.feature, .cards .card{
  background: linear-gradient(180deg, var(--card-dark), var(--card-dark-2));
  border-color: var(--card-border);
  color: var(--card-text);
  box-shadow: 0 10px 24px rgba(5,14,22,.35);
}
.feature h3, .cards .card h3, .cards .card h4{ color: var(--card-text); }
.feature p, .cards .card p{ color: var(--card-sub); }

/* icons inside cards keep contrast */
.feature img, .card .mini{ filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }

/* hover states: brighten slightly */
.feature:hover, .cards .card:hover{
  transform: translateY(-5px);
  box-shadow: var(--card-shadow);
  background: linear-gradient(180deg, #14283c 0%, #14283c 100%);
  border-color:#2b4560;
}
.feature::after, .cards .card::after{ color: var(--accent); opacity:.7 }
.feature:hover::after, .cards .card:hover::after{ transform: translateX(4px); opacity:1 }

/* Keep UC list cards light */
.uc-list.card{
  background: var(--card);
  color: var(--text);
  border:1px solid #E2E9F0;
  box-shadow:0 8px 20px rgba(17,31,42,.06);
}
.uc-list.card h3{ color:#0e2a3b; }


/* Breadcrumbs should always be clickable and above other layers */
.breadcrumbs{ position:relative; z-index:50; }
.breadcrumbs a{ pointer-events:auto; }


/* v6: Use Case list cards use the same dark navy card theme */
:root{
  --card-dark:#0f1b26;
  --card-dark-2:#132334;
  --card-text:#ecf3f8;
  --card-sub:#b6c8d6;
  --card-border:#1f3448;
}
.uc-list.card{
  background: linear-gradient(180deg, var(--card-dark), var(--card-dark-2));
  border-color: var(--card-border);
  color: var(--card-text);
  box-shadow: 0 10px 24px rgba(5,14,22,.35);
}
.uc-list.card h3{ color: var(--card-text); }
.uc-list .bullets a{ color: var(--card-text); }
.uc-list .bullets a::after{ background:#6be0c9; }