/* IT-Smart — converted from the design handoff.
   Every inline style in the export became one class here; the token block and
   base rules below are the designer's own, unchanged. 431 style attributes
   collapsed to 133 classes, 64 of which were already shared between elements.
   Zero JavaScript: <details>, :hover and :focus-visible do all of it. */

:root{
  --bg: oklch(0.995 0.003 250);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.975 0.010 255);
  --ink: oklch(0.29 0.012 55);
  --ink-soft: oklch(0.50 0.014 55);
  --line: oklch(0.905 0.012 255);
  --stripe: oklch(0.945 0.012 255);
  --accent: oklch(0.655 0.185 42);
  --accent-ink: oklch(0.525 0.165 42);
  --accent-soft: oklch(0.965 0.028 52);
  --brand: oklch(0.44 0.145 272);
  --brand-ink: oklch(0.42 0.145 272);
  --brand-soft: oklch(0.965 0.022 272);
  --accent2: oklch(0.69 0.145 232);
  --accent2-ink: oklch(0.52 0.125 235);
  --accent2-soft: oklch(0.965 0.028 232);
  --dark: oklch(0.335 0.115 272);
  --dark-2: oklch(0.40 0.125 272);
  --on-dark: oklch(1 0 0);
  --on-dark-soft: oklch(0.875 0.030 272);
  --link-on-dark: oklch(0.84 0.125 58);
  --hairline-on-dark: oklch(0.52 0.10 272);
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;
  --s-1: 6px; --s-2: 12px; --s-3: 20px; --s-4: 32px; --s-5: 52px; --s-6: 84px;
  --font-display: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --maxw: 1180px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg: oklch(0.19 0.015 265);
    --surface: oklch(0.235 0.018 265);
    --surface-2: oklch(0.27 0.020 265);
    --ink: oklch(0.95 0.008 255);
    --ink-soft: oklch(0.775 0.012 255);
    --line: oklch(0.345 0.022 265);
    --stripe: oklch(0.285 0.020 265);
    --accent: oklch(0.72 0.165 45);
    --accent-ink: oklch(0.82 0.135 52);
    --accent-soft: oklch(0.305 0.055 45);
    --brand: oklch(0.74 0.115 275);
    --brand-ink: oklch(0.80 0.100 275);
    --brand-soft: oklch(0.285 0.055 272);
    --accent2: oklch(0.74 0.115 232);
    --accent2-ink: oklch(0.80 0.100 232);
    --accent2-soft: oklch(0.285 0.045 232);
    --dark: oklch(0.225 0.045 272);
    --dark-2: oklch(0.285 0.055 272);
    --hairline-on-dark: oklch(0.40 0.055 272);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-wrap:pretty}
img{max-width:100%;display:block}
a{color:var(--accent-ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent);text-decoration:underline}
summary::-webkit-details-marker{display:none}
summary{list-style:none;cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;line-height:1.1;letter-spacing:-0.015em}
p{margin:0}

/* ---- components ---- */

.muted { color:var(--ink-soft); font-size:16px; }
.level-row { padding:16px 0; border-top:1px solid var(--line); }
.level-name { font-family:var(--font-display); font-size:18px; display:block; margin-bottom:5px; }
.school-item { display:flex; flex-direction:column; gap:8px; }
.school-frame { aspect-ratio:3/2; background:oklch(1 0 0); border:1px solid var(--line); border-radius:var(--r-md); display:grid; place-items:center; padding:12px; font:500 10.5px/1.5 ui-monospace,monospace; color:oklch(0.5 0.02 60); text-align:center; }
.school-name { font-size:14.5px; font-weight:500; }
.level-grid { display:grid; grid-template-columns:auto 1fr; gap:4px var(--s-3); align-items:baseline; padding:14px 0; border-top:1px solid var(--line); }
.level-title { font-family:var(--font-display); font-size:17px; min-width:9ch; }
.field { display:grid; gap:6px; }
.field-label { font-weight:600; font-size:15px; }
.foot-link { color:var(--on-dark-soft); }
.nav-link { color:var(--ink); text-decoration:none; padding:7px 10px; border-radius:var(--r-pill); }
.wrap { max-width:var(--maxw); margin:0 auto; }
.eyebrow { display:block; font:600 13px/1 var(--font-text); letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:var(--s-2); }
.card-more { margin-top:auto; font-weight:700; text-decoration:none; font-size:15.5px; }
.level-list { margin:0; padding-left:20px; color:var(--ink-soft); font-size:16px; }
.trainer-frame { aspect-ratio:4/5; border:1px dashed var(--line); border-radius:var(--r-md); background:repeating-linear-gradient(135deg,var(--stripe) 0 10px,transparent 10px 20px); display:grid; place-items:center; text-align:center; padding:10px; font:500 11px/1.6 ui-monospace,monospace; color:var(--ink-soft); }
.trainer-name { font-size:18px; font-weight:700; margin-top:12px; }
.trainer-role { font-size:14.5px; color:var(--ink-soft); }
.place-action { font-weight:600; font-size:15.5px; text-decoration:none; border:1px solid var(--line); padding:9px 14px; border-radius:var(--r-pill); }
.input { font:inherit; font-size:16px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg); color:var(--ink); width:100%; }
.course-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; }
.course-frame { aspect-ratio:16/9; border-bottom:1px solid var(--line); background:repeating-linear-gradient(135deg,var(--stripe) 0 10px,transparent 10px 20px); display:grid; place-items:center; text-align:center; padding:var(--s-2); color:var(--ink-soft); font:500 11.5px/1.6 ui-monospace,monospace; }
.course-body { padding:var(--s-3); display:flex; flex-direction:column; gap:10px; flex:1; }
.course-title { font-size:24px; font-weight:700; }
.course-tag { font-family:var(--font-display); font-size:16px; color:var(--accent-ink); line-height:1.3; }
.course { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.level-head { padding:var(--s-3); display:flex; align-items:baseline; gap:var(--s-2); font-family:var(--font-display); font-size:23px; font-weight:700; }
.level-head-name { flex:1; }
.level-count { font:500 14px/1 var(--font-text); color:var(--ink-soft); }
.level-body { padding:0 var(--s-3) var(--s-3); display:flex; flex-direction:column; gap:2px; }
.level-intro { color:var(--ink-soft); font-size:16px; padding-bottom:var(--s-2); }
.meta { font-size:14px; color:var(--ink-soft); }
.foot-a { color:var(--link-on-dark); }
.accent { color:var(--accent-ink); }
.band { padding:var(--s-6) var(--s-3); }
.section-title { font-size:clamp(30px,4.4vw,46px); font-weight:700; max-width:18ch; }
.card-title { font-size:21px; font-weight:700; }
.offer-term { font-weight:700; font-size:16px; }
.offer-def { margin:2px 0 0; color:var(--ink-soft); font-size:15px; }
.reason-title { font-size:21px; font-weight:700; margin-bottom:8px; }
.quote { margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s-3); display:flex; flex-direction:column; }
.quote-mark { display:block; font:700 40px/0.7 var(--font-display); color:var(--brand-soft); }
.quote-stars { display:block; color:var(--accent); font-size:15px; letter-spacing:3px; margin:var(--s-2) 0; }
.quote-text { margin:0 0 var(--s-3); font-size:17px; line-height:1.65; }
.quote-foot { margin-top:auto; padding-top:var(--s-3); border-top:1px solid var(--line); display:flex; align-items:center; gap:12px; }
.quote-avatar { width:56px; height:56px; flex:0 0 56px; border-radius:var(--r-pill); border:1px dashed var(--line); background:repeating-linear-gradient(135deg,var(--stripe) 0 8px,transparent 8px 16px); display:grid; place-items:center; overflow:hidden; text-align:center; font:500 8.5px/1.25 ui-monospace,monospace; color:var(--ink-soft); }
.quote-who { display:flex; flex-direction:column; }
.quote-name { font-weight:700; color:var(--accent-ink); font-size:15.5px; }
.bold { font-weight:700; }
.pillar-text { font-family:var(--font-display); font-weight:500; font-size:17px; line-height:1.4; }
.place-kind { font:700 12px/1 var(--font-text); letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-ink); }
.place-address { font-style:normal; color:var(--ink-soft); font-size:16px; }
.place-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; padding-top:10px; }
.contact-dd { margin:2px 0 0; }
.contact-h { font-size:15px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--link-on-dark); margin-bottom:12px; }
.section-lead { margin-top:var(--s-2); color:var(--ink-soft); max-width:62ch; font-size:18px; }
.band-tint { padding:var(--s-6) var(--s-3); background:var(--surface-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.level-name-plain { font-family:var(--font-display); font-size:18px; display:block; }
.level-sub { display:block; font-size:15px; color:var(--accent-ink); margin-bottom:5px; }
.reason-rule { border-top:3px solid var(--accent); padding-top:var(--s-3); }
.reason-rule-2 { border-top:3px solid var(--accent2); padding-top:var(--s-3); }
.place-card { background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent2); border-radius:var(--r-md); padding:var(--s-3); display:flex; flex-direction:column; gap:10px; }
.field-row { display:grid; gap:var(--s-3); grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr)); }
.textarea { font:inherit; font-size:16px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg); color:var(--ink); width:100%; resize:vertical; }
.contact-address { font-style:normal; color:var(--on-dark-soft); font-size:15.5px; }
.page { max-width:100%; overflow-x:hidden; }
.site-header { position:sticky; top:0; z-index:50; background:var(--surface); color:var(--ink); border-bottom:1px solid var(--line); }
.header-inner { max-width:var(--maxw); margin:0 auto; padding:10px var(--s-3); display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); flex:0 0 auto; }
.brand-mark { width:40px; height:40px; border-radius:var(--r-sm); border:1px dashed var(--line); display:grid; place-items:center; font:500 8px/1.2 ui-monospace,monospace; color:var(--ink-soft); text-align:center; }
.brand-word { width:150px; height:30px; border:1px dashed var(--line); border-radius:4px; display:grid; place-items:center; font:500 9px/1 ui-monospace,monospace; color:var(--ink-soft); }
.site-nav { margin-left:auto; display:flex; flex-wrap:wrap; gap:2px 4px; align-items:center; font-size:14.5px; font-weight:600; }
.nav-link-brand { color:var(--brand-ink); text-decoration:none; padding:7px 10px; border-radius:var(--r-pill); }
.nav-cta { color:oklch(1 0 0); background:var(--accent); text-decoration:none; padding:9px 18px; border-radius:var(--r-pill); font-weight:700; margin-left:6px; }
.main { display:block; }
.hero { position:relative; isolation:isolate; background:linear-gradient(180deg,var(--brand-soft) 0%,var(--bg) 70%); color:var(--ink); padding:var(--s-6) var(--s-3) var(--s-5); }
/* The photograph is the band. It sits on its own layer under a scrim, so the
   headline stays readable over a picture nobody here has colour-graded. */
.hero-media { position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero-media > * { width:100%; height:100%; border:0; border-radius:0; }
/* The scrim is the PAGE colour at varying opacity, mixed from the token
   rather than written as a literal — the design ships a full dark scheme,
   and a hard-coded near-white scrim put light headline text on a light
   background the moment the reader's system was in dark mode. */
.hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,color-mix(in oklch,var(--bg) 95%,transparent) 0%,color-mix(in oklch,var(--bg) 88%,transparent) 34%,color-mix(in oklch,var(--bg) 35%,transparent) 66%,transparent 100%); }
.hero-inner { max-width:var(--maxw); margin:0 auto; min-height:clamp(300px,42vw,520px); display:flex; flex-direction:column; justify-content:center; }
.hero-copy { display:flex; flex-direction:column; gap:var(--s-3); align-items:flex-start; }
.hero-badge { font:700 13px/1 var(--font-text); letter-spacing:0.12em; text-transform:uppercase; color:var(--brand-ink); background:var(--surface); border:1px solid var(--line); padding:9px 15px; border-radius:var(--r-pill); }
.hero-title { font-size:clamp(36px,6vw,60px); font-weight:700; max-width:15ch; }
.hero-lead { font-size:clamp(17px,2.2vw,20px); color:var(--ink-soft); max-width:48ch; }
.hero-actions { display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-2); }
.btn-primary { background:var(--accent); color:oklch(1 0 0); text-decoration:none; font-weight:700; padding:15px 28px; border-radius:var(--r-pill); font-size:17px; }
.btn-ghost { border:1.5px solid var(--brand); color:var(--brand-ink); background:var(--surface); text-decoration:none; font-weight:700; padding:15px 28px; border-radius:var(--r-pill); font-size:17px; }
.hero-frame { aspect-ratio:16/9; width:100%; border:1px dashed var(--line); border-radius:var(--r-lg); background:var(--surface) repeating-linear-gradient(135deg,var(--stripe) 0 10px,transparent 10px 20px); display:grid; place-items:center; text-align:center; padding:var(--s-3); color:var(--ink-soft); font:500 12.5px/1.7 ui-monospace,monospace; }
.hero-caption { font-size:13px; color:var(--ink-soft); margin-top:10px; }
.pillars { position:relative; z-index:1; max-width:var(--maxw); margin:var(--s-5) auto 0; display:grid; gap:var(--s-2); grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.pillar { margin:0; padding:var(--s-3); border:1px solid var(--line); border-top:3px solid var(--accent); background:var(--surface); border-radius:var(--r-md); }
.pillar-label { display:block; font:700 12px/1 var(--font-text); letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:10px; }
.pillar-2 { margin:0; padding:var(--s-3); border:1px solid var(--line); border-top:3px solid var(--accent2); background:var(--surface); border-radius:var(--r-md); }
.pillar-label-2 { display:block; font:700 12px/1 var(--font-text); letter-spacing:0.14em; text-transform:uppercase; color:var(--accent2-ink); margin-bottom:10px; }
.pillar-3 { margin:0; padding:var(--s-3); border:1px solid var(--line); border-top:3px solid var(--brand); background:var(--surface); border-radius:var(--r-md); }
.pillar-label-3 { display:block; font:700 12px/1 var(--font-text); letter-spacing:0.14em; text-transform:uppercase; color:var(--brand-ink); margin-bottom:10px; }
.course-grid { margin-top:var(--s-5); display:grid; gap:var(--s-3); grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); }
.offer { background:var(--accent2-soft); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s-3); display:flex; flex-direction:column; gap:12px; }
.offer-note { color:var(--ink-soft); font-size:15.5px; }
.offer-list { margin:0; display:flex; flex-direction:column; gap:12px; }
.kurikulum-wrap { max-width:960px; margin:0 auto; }
.kurikulum-title { font-size:clamp(30px,4.4vw,46px); font-weight:700; max-width:20ch; }
.level-stack { margin-top:var(--s-4); display:flex; flex-direction:column; gap:var(--s-2); }
.reason-grid { margin-top:var(--s-4); display:grid; gap:var(--s-3); grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); }
.school-title { font-size:clamp(26px,3.6vw,38px); font-weight:700; max-width:26ch; color:var(--accent-ink); }
.school-lead { margin-top:var(--s-2); color:var(--ink-soft); max-width:58ch; font-size:17px; }
.school-grid { margin:var(--s-4) 0 0; padding:0; list-style:none; display:grid; gap:var(--s-2); grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)); }
.trainer-lead { margin-top:var(--s-2); color:var(--ink-soft); max-width:60ch; font-size:17px; }
.trainer-grid { margin:var(--s-4) 0 0; padding:0; list-style:none; display:grid; gap:var(--s-3); grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); }
.trainer-quote { margin:var(--s-4) 0 0; padding-left:var(--s-3); border-left:3px solid var(--accent); max-width:62ch; }
.trainer-quote-text { font-family:var(--font-display); font-size:20px; line-height:1.35; }
.trainer-quote-foot { font-size:15px; color:var(--ink-soft); margin-top:8px; }
.band-warm { padding:var(--s-6) var(--s-3); background:var(--accent-soft); color:var(--ink); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.testimoni-eyebrow { display:block; font:700 13px/1 var(--font-text); letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:var(--s-2); }
.testimoni-title { font-size:clamp(28px,4.2vw,42px); font-weight:700; max-width:18ch; }
.testimoni-grid { margin-top:var(--s-4); display:grid; gap:var(--s-3); grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.video-note { margin-top:var(--s-4); font-size:16px; color:var(--ink-soft); }
.place-grid { margin-top:var(--s-4); display:grid; gap:var(--s-3); grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); }
.place-card-head { background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:var(--r-md); padding:var(--s-3); display:flex; flex-direction:column; gap:10px; }
.contact-band { padding:var(--s-6) var(--s-3); background:var(--surface-2); border-top:1px solid var(--line); }
.contact-grid { max-width:var(--maxw); margin:0 auto; display:grid; gap:var(--s-5); grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); align-items:start; }
.contact-title { font-size:clamp(30px,4.4vw,46px); font-weight:700; max-width:16ch; }
.contact-lead { margin-top:var(--s-2); color:var(--ink-soft); font-size:17px; max-width:46ch; }
.contact-list { margin:var(--s-4) 0 0; display:flex; flex-direction:column; gap:var(--s-2); font-size:16px; }
.contact-span { color:var(--ink-soft); }
.form { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s-4) var(--s-3); display:grid; gap:var(--s-3); }
.btn-submit { font:inherit; font-weight:700; font-size:17px; background:var(--accent); color:oklch(1 0 0); border:0; padding:15px 24px; border-radius:var(--r-pill); cursor:pointer; }
.site-footer { background:var(--dark); color:var(--on-dark); padding:var(--s-5) var(--s-3) var(--s-4); }
.footer-grid { max-width:var(--maxw); margin:0 auto; display:grid; gap:var(--s-4); grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.footer-brand { display:flex; flex-direction:column; gap:var(--s-2); align-items:flex-start; }
.footer-word { width:170px; height:34px; border:1px dashed var(--hairline-on-dark); border-radius:4px; display:grid; place-items:center; font:500 9.5px/1 ui-monospace,monospace; color:var(--on-dark-soft); }
.footer-lead { color:var(--on-dark-soft); font-size:15.5px; max-width:34ch; }
.footer-note { color:var(--on-dark-soft); font-size:14px; }
.footer-address { font-style:normal; color:var(--on-dark-soft); font-size:15.5px; margin-top:12px; }
.footer-links { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; font-size:15.5px; }
.footer-base { max-width:var(--maxw); margin:var(--s-4) auto 0; padding-top:var(--s-3); border-top:1px solid var(--hairline-on-dark); font-size:14px; color:var(--on-dark-soft); }

/* Course-page prose: paragraphs the owner writes as a whole, set to a
   readable measure rather than the full band width. */
.prose { max-width:70ch; margin-top:var(--s-3); display:flex; flex-direction:column; gap:var(--s-2); color:var(--ink-soft); font-size:16.5px; line-height:1.7; }
.prose h3 { margin-bottom:6px; }

/* ---- hover ---- */

.btn-ghost:hover, .btn-ghost:focus-visible { background:var(--brand-soft); color:var(--brand-ink); }
.btn-primary:hover, .btn-primary:focus-visible { background:var(--accent-ink); color:oklch(1 0 0); }
.btn-submit:hover, .btn-submit:focus-visible { background:oklch(0.68 0.17 45); }
.card-more:hover, .card-more:focus-visible { text-decoration:underline; }
.level-head:hover, .level-head:focus-visible { background:var(--accent-soft); }
.nav-cta:hover, .nav-cta:focus-visible { background:var(--accent-ink); color:oklch(1 0 0); }
.nav-link:hover, .nav-link:focus-visible { background:var(--brand-soft); color:var(--brand-ink); }
.nav-link-brand:hover, .nav-link-brand:focus-visible { background:var(--brand-soft); text-decoration:underline; }
.place-action:hover, .place-action:focus-visible { background:var(--accent-soft); }

/* ---- a filled slot ---- */

/* Empty, each of these is the labelled frame the design shipped. Filled, it is
   an <img> carrying the SAME class — so the photograph takes the SLOT's shape
   rather than its own. The frames set `aspect-ratio`, and without `object-fit`
   the browser squashes the picture to fit it. The frame's own decoration (the
   dashed edge, the stripes, the inner padding) belongs to the empty state. */
/* The hero FILLS its layer rather than keeping a ratio — the band's own
   height decides the crop. Biased upward, because a face is near the top. */
img.hero-frame { width:100%; height:100%; aspect-ratio:auto; object-fit:cover; object-position:center 30%; padding:0; border:0; background:var(--stripe); }
img.course-frame, img.trainer-frame { width:100%; height:auto; object-fit:cover; padding:0; border-style:solid; background:var(--stripe); }
/* A logo is never cropped — the mark's shape is not ours to assume. */
img.school-frame { width:100%; height:auto; object-fit:contain; }
img.quote-avatar { object-fit:cover; border:0; background:none; }
img.brand-mark, img.brand-word, img.footer-word { width:auto; border:0; background:none; object-fit:contain; }
img.brand-mark { height:40px; }
img.brand-word { height:34px; max-width:210px; }
img.footer-word { height:38px; max-width:230px; }

/* Narrow, there is no room beside the picture, so the scrim covers it. */
@media (max-width:760px) {
  .hero::after { background:linear-gradient(180deg,color-mix(in oklch,var(--bg) 93%,transparent) 0%,color-mix(in oklch,var(--bg) 86%,transparent) 100%); }
  .hero-inner { min-height:0; }
}