/* ==========================================================================
   iBtech — I.T. Software division extras (auto-loaded when $div = 'software').
   Product mockups (.mock*) are pure HTML/CSS and read the shared tokens
   (--card --line --soft --text --muted --accent --accent-2 --accent-soft),
   so they follow light and dark mode. Everything else is prefixed .sw-.
   ========================================================================== */

/* ---------- Hero ---------- */
.page-hero.sw-hero h1 { font-size: clamp(38px, 5.4vw, 74px); max-width: 16ch; }
.sw-hl { color: var(--accent-2); }
.hero-meta.sw-pills { gap: 10px; }
.hero-meta.sw-pills li {
  padding: 8px 15px; border-radius: 99px; font-size: 15px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28);
}
.sw-stage { position: relative; max-width: 560px; margin-inline: auto; }

/* ---------- Mock: browser frame ---------- */
.mock {
  position: relative; overflow: hidden; text-align: left;
  background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55), 0 0 0 6px rgba(255, 255, 255, .1);
  font-size: 13px; line-height: 1.35;
}
.mock-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--soft); border-bottom: 1px solid var(--line);
}
.mock-dots { display: flex; gap: 6px; flex-shrink: 0; }
.mock-dots i { width: 10px; height: 10px; border-radius: 50%; background: #FF6159; }
.mock-dots i:nth-child(2) { background: #FFBD2E; }
.mock-dots i:nth-child(3) { background: #28C941; }
.mock-url {
  flex: 1; min-width: 0; padding: 4px 12px; border-radius: 99px;
  background: var(--card); border: 1px solid var(--line); color: var(--muted);
  font-size: 12px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mock-tag {
  flex-shrink: 0; padding: 3px 8px; border-radius: 99px;
  background: var(--accent-soft); color: var(--accent-soft-ink);
  font: 700 10px/1.3 "DM Sans", sans-serif; letter-spacing: .06em; text-transform: uppercase;
}

/* Layout inside the frame */
.mock-body { display: grid; grid-template-columns: 138px minmax(0, 1fr); }
.mock-body.solo { grid-template-columns: minmax(0, 1fr); }
.mock-side { padding: 14px 10px; border-right: 1px solid var(--line); display: grid; gap: 2px; align-content: start; }
.mock-nav {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 9px;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mock-nav svg { width: 14px; height: 14px; flex-shrink: 0; }
.mock-nav.on { background: var(--accent-soft); color: var(--accent-soft-ink); font-weight: 700; }
.mock-main { padding: 16px; display: grid; gap: 12px; min-width: 0; align-content: start; }
.mock-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; }
.mock-head b { display: block; font: 800 16px/1.2 "Bricolage Grotesque", sans-serif; letter-spacing: -.01em; }
.mock-head span:not([class]) { color: var(--muted); font-size: 12px; }
.mock-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 99px; background: var(--accent); color: var(--accent-ink);
  font-weight: 700; font-size: 12px; white-space: nowrap;
}
.mock-btn svg { width: 13px; height: 13px; }
.mock-label { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* KPI tiles */
.mock-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mock-kpi { border: 1px solid var(--line); border-radius: 12px; padding: 10px 11px; min-width: 0; }
.mock-kpi span { display: block; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-kpi b { display: block; margin-top: 2px; font: 800 21px/1.1 "Bricolage Grotesque", sans-serif; letter-spacing: -.02em; }
.mock-kpi em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--accent-text); }

/* Bar chart: <div class="mock-chart"><i style="--h:70%"></i>…</div> + .mock-axis */
.mock-panel { border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.mock-chart {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: 1fr;
  align-items: end; gap: 10px; height: 92px; margin-top: 10px;
  background: repeating-linear-gradient(to top, var(--line) 0 1px, transparent 1px 23px);
}
.mock-chart i {
  display: block; height: var(--h, 50%); border-radius: 6px 6px 2px 2px;
  background: color-mix(in srgb, var(--accent-text) 30%, transparent);
}
.mock-chart i.on { background: var(--accent-text); }
.mock-axis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 6px; color: var(--muted); font-size: 11px; text-align: center; }

/* Rows: class / course lists */
.mock-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mock-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px;
}
.mock-row .t { min-width: 0; }
.mock-row .t b, .mock-row .t span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-row .t b { font-size: 13px; }
.mock-row .t span { color: var(--muted); font-size: 11px; }
.mock-code {
  min-width: 50px; text-align: center; padding: 3px 7px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-soft-ink);
  font: 700 11px/1.3 "DM Sans", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.mock-pill { padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.mock-pill.ok { background: var(--accent-soft); color: var(--accent-soft-ink); }
.mock-pill.wait { background: color-mix(in srgb, var(--sun) 32%, transparent); color: var(--text); }
.mock-meter { height: 6px; border-radius: 99px; background: var(--soft); overflow: hidden; margin-top: 5px; }
.mock-meter i { display: block; height: 100%; width: var(--w, 50%); border-radius: inherit; background: var(--accent-text); }
.mock-stat { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.mock-stat b { font-variant-numeric: tabular-nums; }
.mock-stat + .mock-meter + .mock-stat { margin-top: 10px; }

/* 4-level rubric indicator */
.mock-lvl { display: inline-flex; align-items: center; gap: 3px; }
.mock-lvl i { width: 12px; height: 8px; border-radius: 3px; background: var(--soft); border: 1px solid var(--line); }
.mock-lvl i.on { background: var(--accent); border-color: var(--accent); }
.mock-lvl span { margin-left: 5px; font-size: 11px; font-weight: 700; color: var(--accent-text); }

/* Profile header */
.mock-profile { display: flex; align-items: center; gap: 12px; }
.mock-avatar {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--accent); color: var(--accent-ink);
}
.mock-avatar svg { width: 20px; height: 20px; }
.mock-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.mock-flags span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 700; }
.mock-flags svg { width: 12px; height: 12px; }

/* LMS course player */
.mock-player {
  position: relative; aspect-ratio: 2 / 1; border-radius: 12px; overflow: hidden;
  display: grid; place-items: center; color: #fff;
  background:
    radial-gradient(rgba(255, 255, 255, .22) 1.5px, transparent 2px) 0 0 / 16px 16px,
    linear-gradient(135deg, #0E9F6E, #053D30);
}
.mock-play {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: #047857; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .5);
}
.mock-play svg { width: 22px; height: 22px; margin-left: 3px; fill: currentColor; }
.mock-player .cap { position: absolute; left: 12px; bottom: 14px; right: 12px; font-weight: 700; font-size: 12px; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.mock-player .cap span { display: block; font-weight: 500; opacity: .85; }
.mock-scrub { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .25); }
.mock-scrub i { display: block; height: 100%; width: 38%; background: var(--lime); }
.mock-lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mock-lessons li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; }
.mock-lessons li.now { background: var(--accent-soft); }
.mock-lessons .st { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line); color: var(--muted); }
.mock-lessons .st svg { width: 12px; height: 12px; }
.mock-lessons .done .st { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.mock-lessons .now .st { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--card); background: var(--accent); }
.mock-lessons b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-lessons .now b { color: var(--accent-soft-ink); }
.mock-lessons small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.mock-lessons .now small { color: var(--accent-soft-ink); }

/* Floating badge next to a mock */
.sw-float {
  position: absolute; left: -28px; bottom: -44px; z-index: 2;
  display: flex; align-items: center; gap: 12px; max-width: 280px;
  padding: 12px 16px 12px 12px; border-radius: 18px;
  background: var(--card); color: var(--text); border: 1px solid var(--line);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .55);
  font-size: 13px; line-height: 1.3;
}
.sw-float.tr { left: auto; bottom: auto; right: -22px; top: 58px; }
.sw-stage .mock-main { padding-bottom: 34px; } /* room for the floating badge */
.sw-float .icon { width: 40px; height: 40px; border-radius: 12px; }
.sw-float .icon svg { width: 20px; height: 20px; }
.sw-float b { display: block; font: 800 15px/1.2 "Bricolage Grotesque", sans-serif; }
.sw-float span:not([class]) { color: var(--muted); }

/* ---------- AI Smart Teacher chat ---------- */
.sw-chat {
  background: var(--card); color: var(--text); border: 1px solid var(--line);
  border-radius: 24px; padding: clamp(16px, 2.4vw, 22px); box-shadow: var(--shadow);
}
.sw-chat-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.sw-chat-head .icon { width: 38px; height: 38px; border-radius: 12px; }
.sw-chat-head .icon svg { width: 19px; height: 19px; }
.sw-chat-head b { display: block; font: 800 16px/1.2 "Bricolage Grotesque", sans-serif; }
.sw-chat-head span:not([class]) { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.sw-chat-head span:not([class])::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22C55E; }
.sw-msgs { display: grid; gap: 10px; }
.sw-msg { max-width: 86%; padding: 11px 15px; border-radius: 18px; font-size: 15px; line-height: 1.45; }
.sw-msg.me { justify-self: end; background: var(--accent); color: var(--accent-ink); border-top-right-radius: 5px; }
.sw-msg.ai { justify-self: start; background: var(--soft); border-top-left-radius: 5px; }
.sw-msg .f { color: var(--accent-text); font-weight: 700; }
.sw-msg sub { font-size: .72em; }
.sw-chat-input {
  margin-top: 16px; display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 16px; border-radius: 14px; border: 1px solid var(--line);
  color: var(--muted); font-size: 14px;
}
.sw-chat-input .send {
  margin-left: auto; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; background: var(--accent); color: var(--accent-ink);
}
.sw-chat-input .send svg { width: 16px; height: 16px; }

/* ---------- Dark feature band (tokens re-scoped so components follow) ---------- */
.section.sw-dark {
  --text: #FFFFFF; --muted: rgba(255, 255, 255, .78);
  --card: rgba(255, 255, 255, .06); --line: rgba(255, 255, 255, .16); --soft: rgba(255, 255, 255, .1);
  --accent-text: var(--lime); --accent-soft: rgba(198, 244, 50, .16); --accent-soft-ink: var(--lime);
  --shadow: 0 30px 60px -30px rgba(0, 0, 0, .7);
  color: var(--text); border-block: 0; position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(55% 70% at 100% 0%, rgba(198, 244, 50, .14), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, rgba(14, 159, 110, .4), transparent 62%),
    #052E24;
}
.section.sw-dark::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -6%; top: -18%; width: min(420px, 50vw); aspect-ratio: 1; border-radius: 32px; transform: rotate(-8deg);
  background-image: radial-gradient(rgba(255, 255, 255, .45) 2px, transparent 2.5px); background-size: 22px 22px; opacity: .3;
}
.sw-dark .lead { color: var(--muted); }
.sw-dark .checklist li::before { background-color: var(--lime); }
.sw-dark .sw-msg.me { background: var(--lime); color: var(--ink); }
.sw-dark .sw-msg.ai { background: rgba(255, 255, 255, .1); }
.sw-dark .sw-chat-input .send { background: var(--lime); color: var(--ink); }
.sw-dark .card { backdrop-filter: blur(4px); }

/* ---------- Product cards (overview) ---------- */
.sw-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.sw-product {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(26px, 3.4vw, 44px); border-radius: var(--radius-lg);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.sw-product::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -40px; top: -40px; width: 220px; aspect-ratio: 1; border-radius: 28px; transform: rotate(-8deg);
  background-image: radial-gradient(var(--accent) 2px, transparent 2.5px); background-size: 20px 20px; opacity: .22;
}
.sw-product-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.sw-product h3 { font-size: clamp(30px, 3.4vw, 42px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.sw-tagline { margin: 0; font-size: 19px; font-weight: 700; color: var(--accent-text); }
.sw-product .checklist { margin: 10px 0 6px; }
.sw-product-foot { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.sw-product-foot .small { color: var(--muted); }

/* ---------- Better together diagram ---------- */
.sw-duo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 14px; }
.sw-duo-col { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.sw-duo-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sw-duo-head .icon { width: 44px; height: 44px; border-radius: 14px; }
.sw-duo-head .icon svg { width: 22px; height: 22px; }
.sw-duo-head b { display: block; font: 800 20px/1.15 "Bricolage Grotesque", sans-serif; }
.sw-duo-head span:not([class]) { color: var(--muted); font-size: 14px; }
.sw-duo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sw-duo li {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line); font-weight: 500; font-size: 15px; line-height: 1.3;
}
.sw-duo li svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent-text); }
.sw-duo-link {
  align-self: center; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-2); color: var(--accent-2-ink); font: 800 24px/1 "Bricolage Grotesque", sans-serif;
}
.sw-roles { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.sw-roles li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.sw-roles .icon { width: 40px; height: 40px; border-radius: 12px; }
.sw-roles .icon svg { width: 20px; height: 20px; }
.sw-roles p { margin: 0; color: var(--muted); }
.sw-roles strong { color: var(--text); }

/* ---------- Trust strip ---------- */
.sw-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sw-trust > div { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; background: var(--bg); border: 1px solid var(--line); }
.sw-trust .icon { width: 44px; height: 44px; border-radius: 14px; }
.sw-trust .icon svg { width: 22px; height: 22px; }
.sw-trust b { display: block; font: 800 18px/1.2 "Bricolage Grotesque", sans-serif; }
.sw-trust span:not([class]) { display: block; color: var(--muted); font-size: 14px; line-height: 1.35; }

/* ---------- Compact module grid (SMS: 15 modules) ---------- */
.sw-mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sw-mod {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; align-content: start;
  padding: 20px; border-radius: 20px; background: var(--card); border: 1px solid var(--line);
  transition: border-color .2s, transform .2s;
}
.sw-mod:hover { border-color: var(--accent); transform: translateY(-2px); }
.sw-mod .icon { width: 44px; height: 44px; border-radius: 13px; grid-row: span 2; }
.sw-mod .icon svg { width: 22px; height: 22px; }
.sw-mod h3 { font-size: 18px; margin-top: 2px; }
.sw-mod p { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.5; }

/* ---------- Misc ---------- */
.steps.grid.sw-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sw-stat { max-width: 320px; margin-top: 28px; }
.sw-contact { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.sw-contact li { display: flex; align-items: center; gap: 14px; }
.sw-contact .icon { width: 44px; height: 44px; border-radius: 14px; }
.sw-contact .icon svg { width: 22px; height: 22px; }
.sw-contact a { font-weight: 700; text-decoration: none; }
.sw-contact a:hover { text-decoration: underline; }
.sw-contact span:not([class]) { display: block; color: var(--muted); font-size: 14px; }
.sw-form-split { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.sw-aside { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 32px); }
.sw-aside .sw-contact { margin: 18px 0 24px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .sw-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw-duo { grid-template-columns: minmax(0, 1fr); }
  .sw-duo-link { justify-self: center; }
  .sw-float.tr { right: -10px; }
}
@media (max-width: 820px) {
  .sw-products, .sw-form-split { grid-template-columns: minmax(0, 1fr); }
  .steps.grid.sw-3 { grid-template-columns: minmax(0, 1fr); }
  .sw-stage { margin-bottom: 30px; }
  .sw-float { left: 14px; bottom: -30px; }
  .sw-float.tr { left: auto; right: 14px; top: auto; bottom: -30px; }
}
@media (max-width: 560px) {
  .mock { font-size: 12px; }
  .mock-body { grid-template-columns: minmax(0, 1fr); }
  .mock-side { display: none; }
  .mock-main { padding: 12px; }
  .mock-kpi { padding: 8px; }
  .mock-kpi b { font-size: 17px; }
  .mock-url { text-align: left; }
  .sw-mods, .sw-trust { grid-template-columns: minmax(0, 1fr); }
  .sw-float { max-width: calc(100% - 28px); }
  .sw-msg { max-width: 92%; font-size: 14px; }
}

/* Privacy-law explainer under the SMS security grid */
.sw-law { margin-top: 28px; padding: clamp(22px, 3vw, 32px); border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); max-width: 900px; margin-inline: auto; }
.sw-law h3 { margin-bottom: 10px; }
.sw-law p { color: var(--muted); font-size: 16px; }
.sw-law p + p { margin-top: 10px; }