/* ============================================================
   Poppins, self-hosted. Google's CSS loads fine but the font
   files on fonts.gstatic.com were not reaching the browser, so
   the page silently fell back to Arial. Serving them from
   assets/fonts removes the dependency entirely.
   ============================================================ */
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/poppins-400.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('assets/fonts/poppins-500.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('assets/fonts/poppins-600.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('assets/fonts/poppins-700.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('assets/fonts/poppins-800.woff2') format('woff2');
}

/* ============================================================
   Infercon Automation — landing page
   Light page, navy hero / bands, orange accent.
   ============================================================ */

:root{
  /* surfaces - dark industrial ground */
  --bg:            #17191c;
  --bg-2:          #1c1f23;   /* tinted / inset ground */
  --panel:         #212429;   /* cards */
  --line:          #2c3036;
  --line-soft:     #23262b;



  /* the "navy" blocks are now the same charcoal as the page, so hero,
     footer and the dark cards read as one continuous surface */
  --brand:         #f5a623;
  --brand-soft:    #ffc978;
  --navy:          #17191c;
  --navy-2:        #212429;
  --navy-line:     #2c3036;

  --accent:        #f5a623;   /* amber - every CTA and marker */
  --accent-hi:     #ffb733;
  --green:         #3ecf8e;

  --text:          #ffffff;
  --text-muted:    #9aa1a9;
  --text-dim:      #6d747c;

  --on-navy:       #ffffff;
  --on-navy-mute:  #9aa1a9;
  --on-navy-dim:   #6d747c;

  --wrap:          1280px;
  --r:             4px;
  --r-sm:          3px;

  --shadow:        0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.30);
  --shadow-hi:     0 2px 6px rgba(0,0,0,.34), 0 16px 40px rgba(0,0,0,.42);

  --sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: var(--sans);   /* single family: labels differ by tracking, not face */
}

*,*::before,*::after{ box-sizing:border-box; }

::selection{ background:rgba(245,166,35,.30); }

/* one consistent focus ring everywhere, keyboard only */
a:focus-visible,
button:focus-visible,
input:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

html{
  scroll-behavior:smooth;
  /* scrollbar hidden by request — wheel, touch, keyboard and the
     in-page anchors all still scroll normally */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{ width:0; height:0; display:none; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:14.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ margin:0; letter-spacing:-.025em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:34px; }

.mono{
  font-family:var(--sans);
  font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
}
.accent{ color:var(--accent); }
.dim{ color:var(--text-dim); }

/* ---------- Buttons ---------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  font-size:14px; font-weight:600;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease,
             color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn-sm{ padding:10px 18px; font-size:13px; }
.btn-block{ display:flex; width:100%; }

.btn-primary{
  background:var(--accent); color:#17191c;
  box-shadow:0 6px 18px rgba(245,166,35,.22);
}
.btn-primary:hover{
  background:var(--accent-hi);
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(245,166,35,.30);
}

/* ghost sits on the navy hero */
.btn-ghost{
  background:transparent; color:var(--on-navy);
  border-color:rgba(255,255,255,.3);
}
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

/* outline on a light ground */
.btn-dark-outline{
  background:transparent; color:var(--navy);
  border-color:rgba(23,25,28,.45);
  padding:12px 22px;
}
.btn-dark-outline:hover{ border-color:var(--navy); background:rgba(23,25,28,.10); }

/* ---------- Header ----------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(23,25,28,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft);
}
.header-inner{
  display:flex; align-items:center; gap:34px;
  padding-block:15px;
}

.logo{ display:flex; align-items:center; gap:12px; }
.logo-mark{
  width:42px; height:42px;
  flex:none;
  object-fit:contain;
}
.logo-text{
  font-size:15.5px; letter-spacing:.03em; line-height:1.1;
  color:var(--on-navy); font-weight:500;
}
.logo-text strong{ color:var(--accent); font-weight:800; letter-spacing:.01em; }

.nav{ display:flex; gap:30px; margin-left:auto; }
.nav a{
  position:relative;
  display:inline-flex; align-items:center; gap:5px;
  font-size:14.5px; font-weight:500;
  color:var(--on-navy-mute);
  transition:color .18s ease;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px;
  height:2px; border-radius:2px;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .22s ease;
}
.nav a:hover{ color:var(--on-navy); }
.nav a:hover::after{ transform:scaleX(1); }

/* pill CTA with the WhatsApp glyph */
.header-cta{ margin-left:30px; border-radius:99px; padding:12px 24px; font-size:13.5px; }
.btn-ico{ flex:none; margin-right:-1px; }

.nav-toggle{
  display:none;
  width:40px; height:36px;
  background:transparent; border:1px solid var(--navy-line);
  border-radius:var(--r-sm);
  padding:9px 10px; cursor:pointer;
}
.nav-toggle span{ display:block; height:1.5px; background:var(--on-navy-mute); margin:3px 0; }

/* ---------- Hero ------------------------------------------- */
/* box-shadow + clip-path gives a max-width element a full-bleed background */
.hero{
  position:relative;
  background:var(--navy);
  box-shadow:0 0 0 100vmax var(--navy);
  clip-path:inset(0 -100vmax);
  background-image:
    radial-gradient(120% 90% at 12% 0%, rgba(245,166,35,.10), transparent 58%),
    radial-gradient(90% 70% at 100% 0%, rgba(245,166,35,.05), transparent 60%);
  color:var(--on-navy);
  display:grid;
  grid-template-columns:minmax(0,1fr) 400px;
  gap:60px;
  align-items:start;
  padding-top:78px;
  padding-bottom:64px;
  min-height:600px;
}
/* the photo spans the full viewport width behind the hero, under a diagonal
   scrim that keeps the headline readable on the left and lets the panel show
   through on the right. Sized to the band, so at ~1440px it stays under the
   image's own 1600px and remains sharp. */
.hero::before{
  content:"";
  position:absolute; z-index:1;
  top:0; bottom:0;
  left:calc((100% - 100vw) / 2);
  right:calc((100% - 100vw) / 2);
  background-image:
    /* diagonal scrim: near-opaque over the copy, thinning to the right where
       the photo carries the band */
    linear-gradient(100deg,
      rgba(23,25,28,.96) 0%,
      rgba(23,25,28,.92) 38%,
      rgba(23,25,28,.70) 62%,
      rgba(23,25,28,.42) 100%),
    linear-gradient(to bottom, rgba(23,25,28,0) 82%, rgba(23,25,28,.45) 100%),
    url("assets/hero.jpg");
  /* fills the band, framed off-centre so the engineer and the panel stay in
     view as the hero gets wider */
  background-size:cover, cover, cover;
  background-position:center, center, 70% center;
  background-repeat:no-repeat;
}

.hero > *{ position:relative; z-index:2; }
.hero h1{
  font-size:clamp(36px, 4.6vw, 54px);
  font-weight:800; line-height:1.08;
  color:var(--on-navy);
}
.lede{
  margin-top:20px; max-width:46ch;
  font-size:15.5px; line-height:1.75;
  color:var(--on-navy-mute);
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.microcopy{
  display:flex; align-items:center; gap:8px;
  margin-top:16px;
  font-size:12.5px; color:var(--on-navy-dim);
}
.micro-ico{ display:inline-grid; place-items:center; flex:none; color:var(--on-navy-mute); }
.micro-ico svg{ width:15px; height:15px; }

/* live-status panel */
.status-card{
  background:var(--navy-2);
  border:1px solid var(--navy-line);
  border-radius:var(--r);
  padding:22px 24px 8px;
}
.status-head{
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom:16px;
  border-bottom:1px solid var(--navy-line);
  color:var(--on-navy-mute);
}
.status-head .dim{ color:var(--green); }

.status-list li{
  display:flex; align-items:flex-start; gap:13px;
  padding:17px 0;
  border-bottom:1px solid var(--navy-line);
  transition:padding-left .2s ease;
}
.status-list li:hover{ padding-left:4px; }
.status-list li:last-child{ border-bottom:0; }
.status-list b{
  display:block;
  font-size:23px; font-weight:800; letter-spacing:-.03em; line-height:1.15;
  font-variant-numeric:tabular-nums;
  color:var(--on-navy);
}
.status-list small{
  display:block; margin-top:3px;
  font-size:12.5px; color:var(--on-navy-mute);
}

/* round icon badges in the live-status panel */
.stat-ico{
  width:42px; height:42px; flex:none;
  display:grid; place-items:center;
  border-radius:50%;
  margin-top:2px;
}
.ico-green{ background:rgba(47,180,124,.15); color:#3ddb96; }
.ico-amber{ background:rgba(245,166,35,.15); color:var(--accent); }
.ico-blue { background:rgba(245,166,35,.11); color:var(--brand-soft); }

.dot{
  width:9px; height:9px; border-radius:50%;
  flex:none; margin-top:9px;
}
.dot-green{ background:var(--green); box-shadow:0 0 0 3px rgba(47,180,124,.18); }
.dot-amber{ background:var(--accent); box-shadow:0 0 0 3px rgba(245,166,35,.18); }

/* ---------- Brand strip (sits inside the navy block) -------- */
.brands{
  position:relative;
  background:var(--navy);
  box-shadow:0 0 0 100vmax var(--navy);
  clip-path:inset(0 -100vmax);
  padding-top:30px;
  padding-bottom:58px;
  text-align:center;
}
.brands-cap{
  font-size:12.5px; color:var(--on-navy-dim);
  margin-bottom:18px;
}
.brand-row{
  display:inline-flex; flex-wrap:wrap; justify-content:center;
  gap:14px 36px;
  padding:20px 24px;
  border:1px solid var(--navy-line);
  border-radius:var(--r);
  background:var(--navy-2);
}
.brand-row li{
  position:relative;
  font-family:var(--sans);
  font-size:13px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--on-navy-mute);
  transition:color .18s ease;
}
.brand-row li:not(:last-child)::after{
  content:""; position:absolute; right:-19px; top:50%;
  width:3px; height:3px; margin-top:-1.5px;
  border-radius:50%; background:var(--navy-line);
}
.brand-row li:hover{ color:var(--on-navy); }

/* ---------- Sections --------------------------------------- */
.section{ padding-block:64px 24px; }

.section-head{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:20px;
  margin-bottom:30px;
}
.section-head h2,
.testimonials-title{
  position:relative;
  font-size:clamp(24px, 2.7vw, 31px); font-weight:800;
  padding-bottom:13px;
}
.section-head h2::after,
.testimonials-title::after{
  content:""; position:absolute; left:0; bottom:0;
  width:44px; height:3px; border-radius:2px;
  background:var(--accent);
}
.section-head p{
  max-width:46ch; text-align:right;
  font-size:14px; color:var(--text-muted); line-height:1.7;
}
.testimonials-title{ display:block; margin-bottom:26px; }

/* ---------- Course cards ----------------------------------- */
/* ---------- Course groups ----------------------------------
   Two headings matching the categories the main site filters by:
   combined-plc (multi-brand programmes) and individual-plc. */
.group-title{
  display:flex; align-items:center; gap:12px;
  margin:2px 0 18px;
  font-size:15px; font-weight:700; letter-spacing:.01em;
}
.group-title::before{
  content:""; flex:none;
  width:3px; height:16px; border-radius:2px;
  background:var(--accent);
}
.group-count{
  font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-dim);
}
.course-group + .course-group{ margin-top:40px; }

/* ---------- Coverage chips -------------------------------
   What each combined programme bundles, shown in the card itself. Colour
   groups the kind of platform; every entry comes from that course's own
   page on inferconautomation.com. */
.covers-cap{
  margin-top:14px; margin-bottom:8px;
  font-size:10px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-dim);
}
/* the level labels take the same light / deep amber split as the
   Basics and Advanced lines on the individual course cards */
.covers-cap.lvl-basic{ color:#ffce7a; }
.covers-cap.lvl-advanced{ color:#8cc6fa; }
.covers + .covers-cap{ margin-top:12px; }
.covers{
  display:flex; flex-wrap:wrap; gap:7px;
}
.covers li{
  padding:5px 11px;
  border:1px solid transparent;
  border-radius:99px;
  font-size:11.5px; font-weight:600;
  line-height:1.35;
}
.covers .cat-plc{
  background:rgba(245,166,35,.12);
  border-color:rgba(245,166,35,.30);
  color:#ffce7a;
}
.covers .cat-scada{
  background:rgba(95,176,247,.12);
  border-color:rgba(95,176,247,.30);
  color:#8cc6fa;
}
.covers .cat-dcs{
  background:rgba(62,207,142,.12);
  border-color:rgba(62,207,142,.30);
  color:#74dfae;
}
.covers .cat-iiot{
  background:rgba(177,145,245,.12);
  border-color:rgba(177,145,245,.30);
  color:#c4acf8;
}

/* ---------- Combined programmes -----------------------------
   Lean cards - track label, title, meta and the curriculum link - two to a
   row. Five cards fill 2 + 2 + 1, so the flagship takes a normal cell rather
   than the tall left slot it holds on a three-column grid. */
/* Two columns that flow rather than a row grid: the cards carry very
   different amounts of detail, so this lets a long card sit directly under a
   short one instead of leaving a hole beside it. */
.group-combined .tracks{
  display:block;
  column-count:2;
  column-gap:20px;
}
.group-combined .card{
  break-inside:avoid;
  margin-bottom:20px;
}
/* Lab photos on a four-sided box that turns to the next face every few
   seconds, filling the slack a short programme leaves in the column. */
/* the lab-visit block: the photos ride a ring that turns towards you - the
   one at the back stays in view, shrinking with distance, and each comes
   round to the front in its turn */
.lab-visit{
  /* hidden for now - drop this line to bring the carousel back */
  display:none;
  break-inside:avoid;
  margin:72px 0 20px;
}
.lab-visit-title{
  margin:0 0 12px;
  font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent);
}
.lab-carousel{
  position:relative;
  aspect-ratio:100/56;
  container-type:inline-size;
}
.lab-slide{
  position:absolute;
  top:50%; left:50%;
  width:42cqw;
  aspect-ratio:4/3;
  margin:-15.75cqw 0 0 -21cqw;
  animation:lab-carousel 12s linear infinite;
  animation-delay:calc(var(--i) * -3s);
}
.lab-slide-photo{
  margin:0;
  width:100%; height:100%;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:transparent;
  box-shadow:0 14px 30px rgba(0,0,0,.5);
}
.lab-slide-photo img{ display:block; width:100%; height:100%; object-fit:cover; }
@keyframes lab-carousel{
  /* front of the ring - blown up well past the others so it dominates */
  0%,  18%    { transform:translate(0, 10cqw) scale(1.3);      opacity:1;   z-index:4; }
  /* swinging round to the left */
  25%, 43%    { transform:translate(-30cqw, 0) scale(.72);     opacity:.4;  z-index:3; }
  /* round the back - still in view, small and set behind */
  50%, 68%    { transform:translate(0, -10cqw) scale(.5);      opacity:.25; z-index:1; }
  /* coming back down the right-hand side */
  75%, 93%    { transform:translate(30cqw, 0) scale(.72);      opacity:.4;  z-index:3; }
  /* and back to the front */
  100%        { transform:translate(0, 10cqw) scale(1.3);      opacity:1;   z-index:4; }
}
@media (prefers-reduced-motion:reduce){
  .lab-slide{ animation:none; }
  .lab-slide:not(:first-child){ display:none; }
}
/* the flagship runs the full width of the two-column grid */
/* the flagship spans both columns, so it needs its own breathing room above -
   the 20px the cards carry between them reads as nothing across a full-width
   band butting up against the column above it */
.group-combined .card-flagship{ column-span:all; margin-top:36px; margin-bottom:0; }
.group-combined .card-media,
.group-combined .card-flagship .card-media{
  width:auto; height:auto; min-height:0;
  margin:-22px -24px 18px;
}
/* These four photos are authored at 3.22:1, 2.60:1, 1.79:1 and 1.33:1, so
   letting each keep its own ratio left the cards 183px to 443px tall - the
   row never lined up. 2:1 is the middle of that spread, so it is the crop
   that takes the least away from any one of them. The flagship keeps its own
   banner ratio below; the 13:5 of the individual cards was too severe here. */
.group-combined .card:not(.card-flagship) .card-media img{
  width:100%; height:auto;
  aspect-ratio:2/1;
  object-fit:cover; object-position:center;
}
.group-combined .card-flagship .card-media{ margin:-26px -28px 20px; }
/* the flagship runs the full width of the grid, where its 4:3 photo would
   stand over 1000px tall - crop it to a banner strip instead */
.group-combined .card-flagship .card-media img{ aspect-ratio:4/1; object-fit:cover; object-position:center; }
/* once the card is phone-width the same ratio is only ~85px tall, which reads
   as a sliver rather than a photo - give it back some height */
@media (max-width:820px){
  .group-combined .card-flagship .card-media img{ aspect-ratio:2/1; }
}

/* Basics / Advanced inside a card: told apart by the text colour alone -
   the basics line reads light, the advanced line a shade darker. */
.card-proj.proj-basic{ color:#c9ced5; }
.card-proj.proj-advanced{ color:#c9ced5; }
/* both labels stay in the brand amber, split into a light and a deep shade */
.card-proj.proj-basic b{ color:#ffce7a; }
.card-proj.proj-advanced b{ color:#c98a1f; }


/* the individual group has no flagship, so it is a plain grid */
.tracks-flat{ grid-template-rows:none; }

.tracks{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:auto auto;
  gap:20px;
}
.card{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--panel);
  overflow:hidden;
  padding:22px 24px;
  box-shadow:var(--shadow);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.card{ position:relative; }
.card::after{
  content:""; position:absolute; left:0; right:0; top:0;
  height:3px;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .28s ease;
}
.card:hover{
  border-color:#3a4048;
  transform:translateY(-3px);
  box-shadow:var(--shadow-hi);
}
.card:hover::after{ transform:scaleX(1); }
.card-flagship::after,
.quote::after{ display:none; }

.card-media{
  margin:-22px -24px 18px;
  line-height:0;
  background:var(--bg-2);
}
.card-media img{
  /* the photos are authored at this exact ratio (1300x500), so nothing of
     the panel name board or the PLC is ever cropped away at any card width */
  width:100%; height:auto; aspect-ratio:13/5;
  object-fit:cover; display:block;
  transition:transform .4s ease;
}
.card:hover .card-media img{ transform:scale(1.05); }

.label{
  display:block; margin-bottom:11px;
  color:var(--text-dim);
}
.card h3{ font-size:17.5px; font-weight:700; line-height:1.3; }

.meta{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:12px;
}
.meta li{
  font-size:11.5px; font-weight:500;
  color:var(--text-muted);
  background:var(--bg-2);
  border:1px solid var(--line-soft);
  border-radius:99px;
  padding:4px 11px;
}

.card-link{
  display:inline-block;
  margin-top:auto; padding-top:16px;
  align-self:flex-start;
  font-size:13.5px; font-weight:600; color:var(--accent);
  transition:color .18s ease;
}
.card-link:hover{ color:var(--accent-hi); }
.card-link span{
  display:inline-block; margin-left:4px;
  transition:transform .2s ease;
}
.card-link:hover span{ transform:translateX(3px); }

/* flagship — the dark card */
.card-flagship{
  grid-row:1 / span 2;
  background:linear-gradient(180deg, rgba(245,166,35,.05), rgba(245,166,35,0) 55%), var(--panel);
  border-color:var(--accent);
  display:flex; flex-direction:column;
  padding:26px 28px 24px;
}
.card-flagship:hover{ border-color:var(--accent-hi); }
.card-flagship .card-media{ margin:-26px -28px 20px; background:var(--navy-2); }
.card-flagship .card-media img{ height:auto; aspect-ratio:4/3; }
.card-flagship h3{ font-size:23px; font-weight:800; color:var(--on-navy); }
.card-flagship .label{ color:var(--accent); }
.card-flagship .meta li{
  background:var(--navy-2);
  border-color:var(--navy-line);
  color:var(--on-navy-mute);
}
.card-flagship > p{
  margin-top:15px;
  font-size:13.5px; color:var(--on-navy-mute); line-height:1.75;
}
.card-flagship .card-link{ margin-top:auto; padding-top:26px; }

/* ---------- Feature band ----------------------------------- */
/* ---------- Feature blocks --------------------------------- */
.section-tint{
  position:relative;
  background:var(--bg-2);
  box-shadow:0 0 0 100vmax var(--bg-2);
  clip-path:inset(0 -100vmax);
  border-block:1px solid var(--line);
  margin-block:16px;
}

.features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px 20px;
}
.feature{ border-top:2px solid var(--accent); padding-top:16px; }
.feature h4{ font-size:14.5px; font-weight:600; }
.feature p{
  margin-top:10px;
  font-size:12.5px; color:var(--text-muted); line-height:1.7;
}

@media (max-width:900px){ .features{ grid-template-columns:1fr 1fr; gap:26px 20px; } }
@media (max-width:560px){ .features{ grid-template-columns:1fr; gap:24px; } }

/* ---------- Proof band ------------------------------------- */
.proof{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:28px;
  margin-top:56px;
  background:var(--accent);
  border:1px solid var(--accent);
  border-radius:var(--r);
  padding:30px 34px;
}
.proof-stats{ display:flex; flex-wrap:wrap; gap:56px; }
.proof-stats b{
  display:block;
  font-size:33px; font-weight:800; letter-spacing:-.03em; line-height:1.1;
  font-variant-numeric:tabular-nums;
  color:#17191c;
}
.proof-stats span{
  display:block; margin-top:4px;
  font-size:11px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  color:rgba(23,25,28,.78);
}

/* ---------- Graduates slider ------------------------------- */
.slider{ position:relative; }

.testimonials{
  display:flex;
  align-items:stretch;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-left:2px;
  padding:4px 2px 12px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.testimonials::-webkit-scrollbar{ display:none; }

.testimonials .quote{
  flex:0 0 268px;
  scroll-snap-align:start;
}

.quote{
  margin:0;
  display:flex; flex-direction:column;
  padding:0; overflow:hidden;
  background:var(--panel);
  border:1px solid var(--line);
  border-top:3px solid var(--brand);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  transition:border-top-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.quote:hover{
  border-top-color:var(--accent-hi);
  transform:translateY(-3px);
  box-shadow:var(--shadow-hi);
}

.q-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:13px;
  align-items:center;
  padding:18px 20px 16px;
}
.quote-avatar{
  width:52px; height:52px; flex:none;
  border-radius:50%;
  object-fit:cover; object-position:center top;
  border:2px solid var(--bg);
  box-shadow:0 0 0 2px var(--line);
  transition:box-shadow .2s ease;
}
.quote:hover .quote-avatar{ box-shadow:0 0 0 2px var(--brand); }

.q-head figcaption{ min-width:0; }
.q-head b{
  display:block;
  font-size:11.5px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--text);
}
.quote .course{
  display:-webkit-box; margin-top:4px;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:33px;
  font-size:11.5px; line-height:1.45; color:var(--text-dim);
}

.q-badge{
  float:right;
  margin-left:10px;
  padding:4px 10px;
  border-radius:99px;
  background:rgba(245,166,35,.16);
  color:var(--accent);
  font-size:9.5px; font-weight:800;
  letter-spacing:.11em; text-transform:uppercase;
}

/* the outcome — the reason this section exists */
.q-role{
  margin-top:auto;
  overflow:hidden;
  padding:16px 20px 20px;
  border-top:1px solid var(--line-soft);
  background:var(--bg-2);
}
.quote .role{
  display:block;
  font-size:16px; font-weight:800; line-height:1.3;
  letter-spacing:-.01em;
  color:var(--text);
}
.quote .city{
  display:inline-flex; align-items:center; gap:5px;
  margin-top:6px;
  font-size:12.5px; font-weight:600; color:var(--text-muted);
}
.quote .city svg{ color:var(--brand); flex:none; }

.slider-btn{
  position:absolute; top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:38px; height:38px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--panel);
  color:var(--text-muted);
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:opacity .18s ease, color .18s ease, border-color .18s ease;
}
.slider-btn:hover{ color:var(--text); border-color:#3a4048; }
.slider-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.slider-prev{ left:-18px; }
.slider-next{ right:-18px; }
.slider-btn[disabled]{ opacity:0; pointer-events:none; }

/* ---------- Lead form -------------------------------------- */
.cta{
  display:grid;
  grid-template-columns:1fr 420px;
  gap:52px;
  margin-block:56px 40px;
  padding:44px 46px;
  border:1px solid var(--accent);
  border-radius:var(--r);
  background:linear-gradient(180deg, rgba(245,166,35,.04), rgba(245,166,35,0) 60%), var(--bg-2);
  color:var(--on-navy);
}
.cta-copy h2{ font-size:clamp(25px, 2.7vw, 31px); font-weight:800; color:var(--on-navy); }
.cta-copy > p{
  margin-top:15px; max-width:44ch;
  color:var(--on-navy-mute); font-size:14.5px; line-height:1.75;
}
.batch-badge{
  display:inline-flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin-top:28px;
  padding:11px 18px;
  border:1px solid var(--navy-line);
  border-radius:var(--r-sm);
  background:var(--navy-2);
  color:var(--on-navy);
  font-size:10.5px;
}
.batch-sep{ color:var(--on-navy-dim); margin-inline:2px; }

.cta-form{
  background:var(--panel);
  border:1px solid var(--line-soft);
  border-radius:var(--r);
  padding:26px 26px 28px;
}
.cta-form label{ display:block; margin-bottom:8px; color:var(--text-muted); }
.cta-form label + input{ margin-bottom:18px; }
.cta-form input{
  width:100%;
  padding:12px 14px;
  background:#15171a;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  color:var(--text);
  font-family:var(--sans); font-size:14px;
  transition:border-color .18s ease, background .18s ease;
}
.cta-form input:focus{ outline:none; border-color:var(--accent); background:#15171a; }
.cta-form input.invalid{ border-color:#e05252; }
.cta-form .btn{ margin-top:6px; }
.form-note{
  min-height:16px; margin-top:12px;
  font-size:12.5px; color:var(--green); text-align:center;
}
.form-note.error{ color:#ff6b6b; }

/* ---------- Footer ----------------------------------------- */
.site-footer{
  margin-top:20px;
  background:var(--bg);
  border-top:1px solid var(--line-soft);
  padding-block:28px 34px;
}
.footer-inner{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px;
  font-size:12.5px; color:var(--on-navy-dim);
}
.footer-links{ display:flex; flex-wrap:wrap; gap:22px; }
.footer-links a{ color:var(--on-navy-mute); }
.footer-links a:hover{ color:var(--on-navy); }

/* ---------- Sticky WhatsApp -------------------------------- */
.whatsapp{
  position:fixed; right:24px; bottom:24px; z-index:50;
  width:52px; height:52px;
  display:grid; place-items:center;
  border-radius:50%;
  background:#25d366; color:#0d1b12;
  box-shadow:0 8px 26px rgba(37,211,102,.4);
  transition:transform .18s ease;
}
.whatsapp:hover{ transform:translateY(-2px) scale(1.05); }

/* ---------- Reveal on scroll ------------------------------- */
.reveal{ opacity:0; transform:translateY(14px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease; }

/* ---------- Responsive ------------------------------------- */
@media (max-width:1080px){
  .hero{ grid-template-columns:1fr; gap:40px; padding-top:54px; }
  .hero::before{
    left:calc((100% - 100vw) / 2);
    background-image:
      linear-gradient(to bottom,
        rgba(23,25,28,.86) 0%,
        rgba(23,25,28,.82) 55%,
        rgba(23,25,28,.62) 100%),
      url("assets/hero.jpg");
    /* the band goes portrait here, so a contained 2:1 photo would leave big
       empty strips - fill it instead */
    background-size:cover, cover;
    background-position:center, center;
  }
  .tracks{ grid-template-columns:1fr 1fr; }
  .card-flagship{ grid-row:auto; grid-column:1 / -1; }
  .cta{ grid-template-columns:1fr; gap:34px; padding:34px 30px; }
  .proof-stats{ gap:36px; }
}

@media (max-width:820px){
  .nav{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0;
    background:var(--bg-2);
    border-bottom:1px solid var(--line);
    padding:8px 34px 18px;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:12px 0; border-bottom:1px solid var(--navy-line); }
  .header-inner{ position:relative; gap:14px; }
  .nav-toggle{ display:block; order:3; }
  .header-cta{ margin-left:auto; }
}

@media (max-width:560px){
  .wrap{ padding-inline:20px; }
  .section{ padding-block:46px 20px; }
  .section-head{ flex-direction:column; align-items:flex-start; gap:12px; }
  .section-head p{ text-align:left; }
  .section-head p br{ display:none; }
  .tracks{ grid-template-columns:1fr; }
  .group-combined .tracks{ column-count:1; }
  .hero-actions .btn{ width:100%; }
  .proof{ padding:24px; }
  .proof-stats{ gap:24px 40px; }
  .footer-inner{ flex-direction:column; }
  .footer-links{ gap:16px; }
  .logo-mark{ width:32px; height:32px; }
  .logo-text{ font-size:12.5px; }
  .brand-row{ gap:10px 20px; padding:16px 18px; }
  .brand-row li{ font-size:11.5px; letter-spacing:.09em; }
  .slider-prev{ left:-8px; }
  .slider-next{ right:-8px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition:none !important; animation:none !important; }
  .reveal{ opacity:1; transform:none; }
}

/* course card description, sourced from each course page on the live site */
.card-desc{
  margin-top:12px;
  font-size:12.5px; line-height:1.65;
  color:var(--text-muted);
}
.card-flagship .card-desc{ color:var(--on-navy-mute); font-size:13px; }

/* course rating, from the figures published on training-list.html */
.rating{
  display:flex; align-items:center; gap:7px;
  margin-bottom:9px;
  font-size:12px; font-weight:700; color:var(--text-muted);
}
.stars{ display:inline-flex; gap:1px; font-size:13px; line-height:1; color:var(--line); }
.stars .on{ color:var(--accent); }
.stars .half{
  background:linear-gradient(90deg, var(--accent) 50%, var(--line) 50%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.card-flagship .rating{ color:var(--on-navy-mute); }
.card-flagship .stars{ color:var(--navy-line); }



/* module / project detail, from plctraining.inferconautomation.com */
.card-proj{
  margin-top:11px; padding-top:11px;
  border-top:1px dashed var(--line);
  font-size:12px; line-height:1.6;
  color:var(--text-muted);
}
.card-proj b{
  display:block; margin-bottom:3px;
  font-size:10px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent);
}
.plc-details{
  display:flex;
  /* the Basics group runs one to a line; the Advanced entries share a single
     row, wrapping only if they are too long to sit side by side */
  flex-wrap:wrap;
  gap:4px 14px;
  align-content:start;
  align-items:stretch;
  margin-top:17px;
  padding:12px;
  border:1px solid var(--line-soft);
  border-radius:var(--r-sm);
  /* no tint of its own - Basics and Advanced sit on the card's own colour */
  background:none;
}
.plc-details::before,
.plc-details::after{
  padding:0 11px 8px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.plc-details::before{
  content:"Basics";
  order:-1;
  color:#ffce7a;
}
.plc-details::after{
  content:"Advanced";
  order:1;
  /* breathing room where the Basics group ends and Advanced begins */
  padding-top:15px;
  color:#8cc6fa;
}
.plc-details .card-proj{
  display:grid;
  grid-template-columns:minmax(100px,38%) minmax(0,1fr);
  align-items:start;
  column-gap:10px;
  margin:0;
  /* no chip box behind each entry - just the coloured rule on the left
     marking which group it belongs to */
  padding:4px 0 4px 11px;
  border:0;
  border-left:2px solid var(--line);
  background:none;
  font-size:11.5px;
  line-height:1.55;
}
/* The individual-course cards carry one Basics and one Advanced entry with
   no PLC name to label, so there is nothing for the two-column split to hold
   apart - the text runs the full width of the chip instead. */
.plc-details .card-proj:not(:has(.plc-name)){
  display:block;
}
/* heading, then every Basics entry, then the Advanced heading, then the
   Advanced entries along one row */
.plc-details::before,
.plc-details::after,
.plc-details .proj-basic{ flex:0 0 100%; }
.plc-details .proj-basic{ order:0; }
.plc-details .proj-advanced{ order:2; flex:1 1 auto; min-width:120px; }
.plc-details .proj-basic{
  justify-self:stretch;
  text-align:left;
}
/* Only the first entry in each group carries a <b> label, so the rest take
   their level from a generated one. Hidden wherever the group headings above
   say it already; shown once the card drops to the stacked mobile layout. */
.plc-details .card-proj:not(:has(b))::before{
  content:"Basics";
  display:none;
}
.plc-details .card-proj.proj-advanced:not(:has(b))::before{
  content:"Advanced";
  display:none;
}
/* a row with no PLC name has nothing for the left column, so let its text
   run the full width instead of squeezing into the name column */
.plc-details .card-proj:not(:has(.plc-name)){ grid-template-columns:minmax(0,1fr); }
.plc-details .proj-basic{ border-left-color:#d89b36; }
.plc-details .proj-advanced{ border-left-color:#6f9fca; }
.plc-details .card-proj b{
  display:none;
}
.plc-details .proj-advanced b{
  background:rgba(95,176,247,.13);
  color:#8cc6fa;
}
.plc-name{
  display:block;
  grid-column:1;
  margin:0 8px 0 0;
  padding-right:8px;
  border-right:1px solid var(--line);
  color:var(--accent);
  font-weight:700;
}
.plc-details .proj-advanced .plc-name{ color:#8cc6fa; }

@media (max-width:560px){
  .plc-details{
    display:block;
  }
  .plc-details::before,
  .plc-details::after{
    display:none;
  }
  .plc-details .card-proj{
    display:block;
  }
  .plc-details .card-proj:not(:has(b))::before,
  .plc-details .card-proj.proj-advanced:not(:has(b))::before,
  .plc-details .card-proj b,
  .plc-name{
    display:inline-block;
  }
  .plc-details .card-proj:not(:has(b))::before,
  .plc-details .card-proj b{
    margin:0 8px 0 0;
    padding:2px 6px;
    border-radius:2px;
    background:rgba(245,166,35,.13);
    font-size:9px;
    font-weight:700;
    letter-spacing:.1em;
    line-height:1.3;
    text-transform:uppercase;
    color:#ffce7a;
    vertical-align:middle;
  }
  .plc-details .card-proj.proj-advanced:not(:has(b))::before,
  .plc-details .proj-advanced b{
    background:rgba(95,176,247,.13);
    color:#8cc6fa;
  }
}
/* A card that only lists the platforms it covers, with no Advanced projects
   to contrast against, drops both group headings and the per-entry level
   badges - every row would otherwise be labelled "Basics" for no reason.
   Placed after the mobile block so it also wins there. */
.plc-details:not(:has(.proj-advanced))::before,
.plc-details:not(:has(.proj-advanced))::after,
.plc-details:not(:has(.proj-advanced)) .card-proj::before{
  display:none;
}

/* Basics and Advanced entries pack along a row and wrap onto the next, rather
   than sitting in a fixed grid - the short platform names then read as one
   continuous list instead of one lonely name per column. The two group
   headings still break to their own full-width line. */
.plc-details.names-only,
.plc-details.names-only-basics{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
}
.plc-details.names-only::before,
.plc-details.names-only::after,
.plc-details.names-only-basics::before,
.plc-details.names-only-basics::after{
  flex:0 0 100%;
}
.plc-details.names-only .card-proj,
.plc-details.names-only-basics .card-proj{
  flex:0 1 auto;
  display:block;
}
/* nothing sits beside a bare name, so no divider rule and no second column */
.plc-details.names-only .plc-name,
.plc-details.names-only-basics .plc-name{
  margin:0;
  padding-right:0;
  border-right:0;
}
/* the mobile block above would badge every packed entry with its own
   "Basics"/"Advanced" chip - the group headings already say it */
.plc-details.names-only .card-proj::before,
.plc-details.names-only-basics .card-proj::before{
  display:none;
}

.card-flagship .card-proj{
  border-top-color:var(--navy-line);
  color:var(--on-navy-mute);
}

/* ---------- FAQ (layout after landing-page-2) --------------- */
.faq-wrap{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:56px;
  align-items:start;
}

.faq-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  margin-bottom:14px;
  color:var(--accent);
}
.faq-eyebrow::before,
.faq-eyebrow::after{
  content:""; display:block;
  width:24px; height:2px; background:var(--accent);
}
.faq-intro h2{
  font-size:clamp(26px, 3vw, 38px); font-weight:800;
  line-height:1.1; color:var(--text);
}
.faq-sub{
  margin-top:12px; margin-bottom:30px; max-width:44ch;
  font-size:14px; line-height:1.7; color:var(--text-muted);
}












/* contact block replaces the image collage */
.faq-contact{
  margin-top:30px;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  background:var(--bg-2);
}
.fc-row{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  transition:background .16s ease;
}
.fc-row:last-child{ border-bottom:0; }
a.fc-row:hover{ background:#262a30; }
.fc-ico{
  flex:none;
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(245,166,35,.16);
  color:var(--accent);
}
.fc-row .label{ display:block; color:var(--text-dim); margin-bottom:3px; }
.fc-row b{
  display:block;
  font-size:14.5px; font-weight:700; color:var(--text);
  word-break:break-word;
}
a.fc-row:hover b{ color:var(--accent); }
.fc-static{ cursor:default; }

/* right column */
.faq-top-bar{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
  margin-bottom:20px;
}
.faq-top-bar-label{ font-size:13.5px; color:var(--text-muted); }
.faq-top-bar-label strong{ color:var(--text); font-weight:700; }
.faq-contact-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:99px;
  background:var(--accent); color:#17191c;
  font-size:13.5px; font-weight:700;
  box-shadow:0 4px 16px rgba(245,166,35,.26);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.faq-contact-btn:hover{
  background:var(--accent-hi);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(245,166,35,.34);
}

.faq{ display:flex; flex-direction:column; gap:10px; }
.faq-item{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--panel);
  overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.faq-item:hover{ border-color:#3a4048; }
.faq-item[open]{ border-color:var(--brand); box-shadow:var(--shadow); }
.faq-item summary{
  display:flex; align-items:center; gap:16px;
  padding:18px 22px;
  font-size:15px; font-weight:700; color:var(--text);
  cursor:pointer; list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  margin-left:auto; flex:none;
  width:27px; height:27px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--bg-2); color:var(--accent);
  font-size:17px; font-weight:400; line-height:1;
  transition:transform .25s ease, background .2s ease, color .2s ease;
}
.faq-item[open] summary::after{
  transform:rotate(135deg); background:var(--accent); color:#17191c;
}
.faq-item p{
  padding:0 22px 20px;
  font-size:13.5px; line-height:1.8; color:var(--text-muted);
}

@media (max-width:980px){
  .faq-wrap{ grid-template-columns:1fr; gap:34px; }
}
@media (max-width:560px){
  
  
  
  
  
  
}

/* phone callout under the questions */
.faq-call{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:18px;
  margin-top:22px;
  padding:20px 24px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--bg-2);
}
.faq-call .label{ display:block; color:var(--text-dim); margin-bottom:5px; }
.faq-phone{
  font-size:21px; font-weight:800; letter-spacing:-.02em;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  transition:color .18s ease;
}
.faq-phone:hover{ color:var(--accent); }

@media (max-width:980px){
  .faq-wrap{ grid-template-columns:1fr; gap:30px; }
  .faq-media{ position:static; flex-direction:row; }
  .faq-media figure{ flex:1; }
  .faq-media img{ height:180px; }
}
@media (max-width:560px){
  .faq-media{ flex-direction:column; }
  .faq-call{ flex-direction:column; align-items:flex-start; }
}

/* ---------- About ------------------------------------------ */
.about-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,460px);
  gap:56px;
  align-items:center;
  padding-bottom:38px;
  margin-bottom:38px;
  border-bottom:1px solid var(--line);
}
.about-lead p{
  font-size:16px; line-height:1.85; color:var(--text-muted);
}
.about-lead p + p{ margin-top:16px; }

.about-media{
  margin:0; line-height:0;
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--shadow-hi);
}
.about-media img{ width:100%; height:300px; object-fit:cover; }





.about-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
}
.about-item{
  padding:0 34px;
  border-right:1px solid var(--line);
}
.about-item:first-child{ padding-left:0; }
.about-item:last-child{ border-right:0; padding-right:0; }
.about-item .label{
  display:block; margin-bottom:12px;
  color:var(--accent);
}
.about-item p{
  font-size:13.5px; line-height:1.85; color:var(--text-muted);
}

@media (max-width:900px){
  .about-top{ grid-template-columns:1fr; gap:30px; }
  .about-media{ order:-1; }
  .about-media img{ height:220px; }
  .about-grid{ grid-template-columns:1fr; gap:26px; }
  .about-item{ padding:0 0 22px; border-right:0; border-bottom:1px solid var(--line); }
  .about-item:last-child{ border-bottom:0; padding-bottom:0; }
}

/* slider arrows need to read on the dark ground */
.section-navy .slider-btn{
  background:var(--navy-2);
  border-color:var(--navy-line);
  color:var(--on-navy-mute);
  box-shadow:0 6px 18px rgba(4,10,20,.4);
}
.section-navy .slider-btn:hover{ color:var(--on-navy); border-color:#3a4048; }

/* white cards keep their own surface; only the ring tone changes */
.section-navy .quote-avatar{ border-color:var(--panel); }

/* what the engineering side actually does — from service.html */
.about-tags{
  display:flex; flex-wrap:wrap; gap:9px;
  margin-top:26px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.about-tags li{
  padding:7px 14px;
  border:1px solid var(--line);
  border-radius:99px;
  background:var(--bg-2);
  font-size:12.5px; font-weight:600;
  color:var(--text-muted);
  transition:border-color .18s ease, color .18s ease;
}
.about-tags li:hover{ border-color:var(--accent); color:var(--text); }

/* ---------- Curriculum gate modal --------------------------- */
.modal[hidden]{ display:none; }
.modal{
  position:fixed; inset:0; z-index:120;
  display:grid; place-items:center;
  padding:24px;
}
.modal-backdrop{
  position:absolute; inset:0;
  background:rgba(9,10,12,.80);
  backdrop-filter:blur(3px);
}
.modal-card{
  position:relative;
  width:100%; max-width:432px;
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  padding:32px 32px 28px;
  border:1px solid var(--accent);
  border-radius:var(--r);
  background:linear-gradient(180deg, rgba(245,166,35,.06), rgba(245,166,35,0) 55%), var(--panel);
  box-shadow:var(--shadow-hi);
  animation:modal-in .22s ease both;
}
@keyframes modal-in{ from{ opacity:0; transform:translateY(12px); } }

.modal-x{
  position:absolute; top:12px; right:12px;
  width:32px; height:32px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:transparent; color:var(--text-muted);
  font-size:19px; line-height:1; cursor:pointer;
  transition:color .18s ease, border-color .18s ease;
}
.modal-x:hover{ color:var(--text); border-color:#3a4048; }

#cmCourse{ display:block; margin-bottom:10px; padding-right:34px; }
.modal-card h2{ font-size:22px; font-weight:800; line-height:1.2; }
.modal-sub{
  margin-top:11px;
  font-size:13px; line-height:1.7; color:var(--text-muted);
}

#cmForm{ margin-top:24px; }
#cmForm label{ display:block; margin-bottom:8px; color:var(--text-muted); }
#cmForm label .opt{ letter-spacing:.04em; color:var(--text-dim); }
#cmForm label + input{ margin-bottom:16px; }
#cmForm input{
  width:100%;
  padding:12px 14px;
  background:#15171a;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  color:var(--text);
  font-family:var(--sans); font-size:14px;
  transition:border-color .18s ease;
}
#cmForm input:focus{ outline:none; border-color:var(--accent); }
#cmForm input.invalid{ border-color:#e05252; }
#cmForm .btn{ margin-top:6px; }
#cmSubmit[disabled]{ opacity:.6; cursor:default; transform:none; }

.modal-done{ margin-top:24px; }
.modal-done-msg{
  margin-bottom:16px; padding:14px 16px;
  border:1px solid rgba(62,207,142,.35);
  border-radius:var(--r-sm);
  background:rgba(62,207,142,.09);
  font-size:13px; line-height:1.65; color:var(--text);
}
.modal-micro{
  margin-top:12px;
  font-size:11.5px; color:var(--text-dim); text-align:center;
}

body.modal-open{ overflow:hidden; }

@media (max-width:560px){
  .modal{ padding:16px; }
  .modal-card{ padding:26px 22px 24px; }
}