* { box-sizing: border-box; }
html { font-family: 'Inter', system-ui, Arial, sans-serif; scroll-behavior: smooth; }
body { margin:0; color:#f4f8ff; background:#050b13; line-height:1.55; }
:root {
  /* Dark Navy + Blue Accent (Billing theme inspired) */
  --primary:#3b63ff;            /* main action blue */
  --primary-accent:#5d7dff;     /* hover / lighter */
  --primary-radial:#2749ff;     /* inner glow */
  --brand-navy:#050b13;         /* page bg */
  --brand-navy-alt:#071624;     /* header / elevated base */
  --bg-alt:#0a1826;             /* section alt */
  --surface:#0d1622;            /* card surface */
  --surface-alt:#132131;        /* elevated surface */
  --surface-soft:#0f1c2b;       /* subtle contrast */
  --border:#1e2b3a;             /* border subtle */
  --border-alt:#2c3d50;         /* stronger border */
  --text:#f4f8ff;               /* main text */
  --text-dim:#8fa4bb;           /* secondary */
  --text-faint:#5f7389;         /* tertiary */
  --focus-outline:rgba(59,99,255,.45);
  --gradient:linear-gradient(140deg,#071626 0%, #0b1d30 55%, #0f2740 100%);
  --gradient-accent:linear-gradient(135deg,#3b63ff 0%, #5d7dff 50%, #89a2ff 100%);
  --hero-radial:radial-gradient(circle at 65% 30%, rgba(59,99,255,.18), transparent 60%);
  --radius:14px;
  --shadow:0 6px 20px -6px rgba(0,0,0,.55),0 2px 8px -2px rgba(0,0,0,.5);
}
.container { width: min(1180px, 92%); margin:0 auto; }
.site-header { position:sticky; top:0; background:#000; backdrop-filter:none; z-index:40; border-bottom:1px solid #111; }
.nav-wrapper { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:0.75rem 0; }
.logo { font-weight:600; font-size:1.125rem; display:flex; flex-direction:column; gap:2px; }
.logo-img { height:38px; width:auto; display:block; max-width:240px; }
@media (max-width: 900px){
  .logo-img { height:32px; }
}
@media (max-width: 560px){
  .logo-img { height:26px; }
  .logo .badge { font-size:.6rem; }
}
.logo .badge { background:var(--gradient-accent); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:.68rem; font-weight:600; letter-spacing:.55px; text-transform:uppercase; }
nav ul { list-style:none; display:flex; gap:1.75rem; margin:0; padding:0; }
nav a { text-decoration:none; font-weight:500; color:var(--text-dim); position:relative; }
nav a:hover, nav a:focus { color:#ffffff; }
nav a:after { content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0; background:var(--primary); transition:.3s; }
nav a:hover:after, nav a:focus:after { width:100%; }
.lang-switch { display:flex; gap:.5rem; }
.lang-switch button { background:var(--surface-soft); border:1px solid var(--border-alt); padding:.4rem .75rem; border-radius:6px; cursor:pointer; font-size:.72rem; font-weight:600; letter-spacing:.5px; color:var(--text-dim); }
.lang-switch button.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.hero { padding:5rem 0 3.5rem; background:#0d141c; position:relative; }
.hero-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap:3.5rem; align-items:center; }
/* Stretch hero columns on larger screens so left copy matches right role grid height */
@media (min-width:900px){
  .hero-grid { align-items:stretch; }
  .hero-copy { display:flex; flex-direction:column; justify-content:center; }
}
.hero-copy h1 { font-size:clamp(2.4rem,5.2vw,3.45rem); line-height:1.07; margin:.25rem 0 1rem; color:#dfe8ff; font-weight:700; letter-spacing:-.5px; }
.hero-copy h1 .grad { background:linear-gradient(120deg,#89a2ff 0%, #5d7dff 45%, #3b63ff 90%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 4px 14px rgba(59,99,255,.5)); }
.hero-copy h1 .strong { color:#ffffff; text-shadow:0 4px 18px rgba(0,0,0,.6); }
.hero-copy p { font-size:1.06rem; max-width:50ch; color:var(--text-dim); }
.cta-group { margin-top:1.5rem; display:flex; gap:1rem; flex-wrap:wrap; }
.btn { --btn-bg:var(--surface-soft); --btn-color:#ffffff; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1.25rem; font-weight:600; border-radius:8px; border:1px solid var(--border); text-decoration:none; font-size:.95rem; transition:.25s; cursor:pointer; color:var(--text); background:var(--btn-bg); }
.btn.primary { --btn-bg:var(--gradient-accent); background:var(--btn-bg); color:#fff; border:1px solid #466dff; box-shadow:0 4px 16px -4px rgba(59,99,255,.55),0 0 0 1px rgba(255,255,255,.07) inset; }
.btn.primary:hover { filter:brightness(1.08); box-shadow:0 6px 22px -4px rgba(59,99,255,.6); }
.btn.outline { background:rgba(59,99,255,.08); color:var(--primary); border:1px solid var(--primary); }
.btn.outline:hover { background:rgba(59,99,255,.16); }
.trust { margin-top:1.25rem; font-size:.72rem; letter-spacing:.55px; text-transform:uppercase; color:var(--text-faint); font-weight:600; }
.hero-art { display:flex; justify-content:center; }
/* Role grid */
.role-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1.15rem; width:100%; max-width:760px; }
.role-card { background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:1.35rem .95rem 1.15rem; display:flex; flex-direction:column; align-items:center; gap:.85rem; position:relative; overflow:hidden; cursor:default; transition:.35s; }
.role-card:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 45%,rgba(59,99,255,.08),transparent 70%); opacity:0; transition:.4s; }
.role-card:hover { border-color:var(--primary); box-shadow:0 4px 18px -6px rgba(59,99,255,.5),0 0 0 1px rgba(255,255,255,.05) inset; transform:translateY(-3px); }
.role-card:hover:before { opacity:1; }
.role-card .icon { color:var(--primary); display:flex; align-items:center; justify-content:center; width:58px; height:58px; }
.role-card .icon svg { width:56px; height:56px; stroke-width:2; }
.role-card .label { font-size:.8rem; font-weight:600; text-align:center; color:var(--text); line-height:1.2; }
@media (max-width:720px){
  .role-grid { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
  .role-card { padding:1.1rem .8rem .95rem; }
  .role-card .icon { width:48px; height:48px; }
  .role-card .icon svg { width:46px; height:46px; }
}

@keyframes float { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
.offering { padding:4.5rem 0; }
/* Section step color sequencing (interlaced distinct from #000 header/footer) */
.step-1 { background:#0d141c; }
.step-2 { background:#131d27; }
.step-3 { background:#0d141c; }
.step-4 { background:#131d27; }
.step-5 { background:#0d141c; }
.alt-bg { background:#131d27; }
.section-head h2 { font-size:2.1rem; margin:0 0 .75rem; }
.section-head p { margin:0 0 2rem; color:var(--text-dim); }
.offering-grid { display:grid; gap:1.75rem; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); margin-bottom:2.5rem; }
.offering-grid.tight { margin-bottom:0; }
.sb-layout { display:grid; gap:2.5rem; }
@media (min-width:980px){
  /* ensure both columns same height */
  #offering-skillbuilder .sb-layout { align-items:stretch; }
  #offering-skillbuilder .sb-layout > div:first-child { display:flex; }
  #offering-skillbuilder .sb-layout > div:first-child .offering-grid { flex:1; }
  #offering-skillbuilder .pricing-card.sb { height:100%; display:flex; flex-direction:column; justify-content:flex-start; }
  #offering-skillbuilder .pricing-card.sb .btn.primary { margin-top:auto; }
}
@media (min-width:980px){
  .sb-layout { grid-template-columns:1.15fr .85fr; align-items:start; }
  .pricing-card.sb { margin:0; }
}
.value-block { background:var(--surface); border:1px solid var(--border); padding:1.25rem 1.1rem 1.4rem; border-radius:14px; box-shadow:0 2px 5px -1px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04); }
.value-block h3 { margin:.2rem 0 .6rem; font-size:1.05rem; color:#ffffff; }
.pricing-card { background:var(--surface-alt); border:1px solid var(--border-alt); padding:2rem 2rem 2.2rem; border-radius:18px; max-width:680px; box-shadow:0 10px 30px -8px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.05); color:var(--text); }
.pricing-card.alt { background:linear-gradient(150deg,#0e1c2c,#132131); color:var(--text); border:1px solid #2c3d50; }
.pricing-card.alt.classroom .btn.primary { margin-top:2.75rem; }
.pricing-card h3 { margin-top:0; }
.price-line { display:flex; justify-content:space-between; padding:.65rem 0; border-bottom:1px dashed #2a2a2a; font-size:.95rem; }
.price-line:last-of-type { border-bottom:none; margin-bottom:.5rem; }
.price-line strong { font-weight:700; color:var(--primary); }
.course-modes { display:grid; gap:1.5rem; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); margin-bottom:2rem; }
.mode { background:var(--surface-soft); border:1px solid var(--border); padding:1rem .95rem 1.1rem; border-radius:14px; }
.mode h3 { margin:.2rem 0 .55rem; font-size:1.02rem; color:#ffffff; }
.training-layout { display:grid; gap:2.5rem; }
@media (min-width:980px){
  .training-layout { grid-template-columns:1.05fr .9fr; }
}
.training-layout { align-items:stretch; }
@media (min-width:900px){
  .training-layout { grid-template-columns:minmax(0,1fr) 420px; }
  .course-modes { display:flex; flex-direction:column; gap:1.35rem; margin-bottom:0; }
  .pricing-card.classroom { align-self:stretch; }
}
.pricing-card.classroom { margin:0; height:100%; display:flex; flex-direction:column; }
@media (min-width:900px){
  .training-layout { grid-template-columns:1.1fr .95fr; }
  .course-modes { margin-bottom:0; }
}
.checklist { list-style:none; margin:0 0 1.5rem; padding:0; }
.checklist li { position:relative; padding-left:1.4rem; margin:.6rem 0; }
.checklist li:before { content:""; position:absolute; left:0; top:.35rem; width:.8rem; height:.8rem; background:var(--primary); border-radius:3px; box-shadow:0 0 0 2px #071624; outline:2px solid rgba(59,99,255,.4); }
.why { padding:4.5rem 0; }
.why-grid { display:grid; gap:1.75rem; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); margin-top:2rem; }
.why-item { background:var(--surface); border:1px solid var(--border); padding:1.25rem 1rem 1.35rem; border-radius:14px; position:relative; overflow:hidden; }
.why-item:after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(59,99,255,.12),rgba(10,24,38,.55)); opacity:0; transition:.4s; }
.why-item:hover:after { opacity:1; }
.contact { padding:4.5rem 0; color:var(--text); }
.contact h2 { margin-top:0; font-size:2rem; }
.lead-form { margin-top:1.5rem; max-width:760px; }
.form-row { display:flex; flex-wrap:wrap; gap:1.25rem; }
.field { flex:1; min-width:220px; display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem; }
.field input, .field select, .field textarea { font:inherit; padding:.7rem .75rem; border:1px solid var(--border); border-radius:8px; background:#0f1c2b; color:#e5eef7; }
.field input:focus, .field select:focus, .field textarea:focus { outline:2px solid var(--primary); box-shadow:0 0 0 3px var(--focus-outline); }
#form-status { margin-top:.75rem; font-size:.85rem; font-weight:500; }
.site-footer { background:#000; color:var(--text-dim); padding:1.25rem 0; font-size:.78rem; border-top:1px solid #111; }
.slim-footer { display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.slim-footer .copy { letter-spacing:.2px; }
.footer-actions { display:flex; gap:.75rem; }
.pill-link { position:relative; display:inline-flex; align-items:center; gap:.4rem; padding:.55rem .95rem; font-size:.7rem; font-weight:600; letter-spacing:.4px; color:#dfe9f7; text-decoration:none; border:1px solid rgba(91,123,255,.55); border-radius:100px; background:rgba(59,99,255,.08); box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 4px 14px -4px rgba(59,99,255,.4); backdrop-filter:blur(6px); transition:.25s; }
.pill-link:hover { background:rgba(59,99,255,.18); color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.07) inset,0 6px 18px -4px rgba(59,99,255,.55); }
@media (max-width:620px){
  .footer-actions { width:100%; justify-content:flex-start; }
  .site-footer { padding:1.1rem 0 1.4rem; }
}

@media (max-width: 680px) {
  .nav-wrapper { flex-wrap:wrap; }
  nav ul { gap:1rem; font-size:.85rem; }
  .hero { padding:3.5rem 0 2.5rem; }
  .hero-grid { gap:2.25rem; }
  .card-mosaic { grid-template-columns:repeat(2, 120px); }
}
/* === Price block for special offer === */
.price-block-special {
  background: var(--brand-navy);
  border-radius: var(--radius);
  padding: 1.5rem 1rem;
  margin: .5rem 0 1.5rem;
  text-align: center;
  border: 1px solid var(--border-alt);
}

.price-block-special .price-label {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}

.price-block-special .price-original {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--text-faint);
  opacity: 0.8;
  line-height: 1;
}

.price-block-special .price-current {
  font-size: 3rem;
  font-weight: 700;
  color: var(--primary-accent);
  line-height: 1.1;
  margin: 0.25rem 0;
}

.price-block-special .price-current .price-unit {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-dim);
  white-space: nowrap;
}

.price-block-special .price-promo-tag {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.5rem;
}

@media (max-width: 560px) {
  .price-block-special {
    padding: 1.25rem;
  }
  .price-block-special .price-original {
    font-size: 1.5rem;
  }
  .price-block-special .price-current {
    font-size: 2.5rem;
  }
  .price-block-special .price-current .price-unit {
    display: block;
    font-size: 0.9rem;
    line-height: 1.2;
    white-space: normal;
  }
  .price-block-special .price-promo-tag {
    margin-top: 0.25rem;
  }
}