/* ==========================================================================
   Aim IT — Page blocks

   Layouts that belong to specific sections rather than to a reusable
   component. Loaded last, so it can rely on everything before it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO
   -------------------------------------------------------------------------- */

.hero {
  padding-block-start: clamp(2.5rem, 6vw, 4.5rem);
  padding-block-end: clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
}

.hero__brandline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
  margin-block-end: var(--s-4);
  font-size: var(--fs-small);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  letter-spacing: 0.04em;
}

.hero__tagline {
  font-weight: var(--weight-regular);
  color: var(--eco-isp-ink);
  letter-spacing: 0;
}

.hero h1 {
  max-width: 13ch;
}

.hero__lead {
  margin-block-start: var(--s-4);
  font-size: var(--fs-lead);
  color: var(--text-muted);
  max-width: 46ch;
}

.hero__actions {
  margin-block-start: var(--s-5);
}

.hero__base {
  margin-block-start: var(--s-5);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--border);
  font-size: var(--fs-small);
  color: var(--text-muted);
  max-width: 40ch;
}

.hero__media {
  display: flex;
  justify-content: center;
}

.hero-figure {
  inline-size: 100%;
  max-inline-size: 32rem;
  margin: 0;
}

.hero-figure__svg {
  inline-size: 100%;
  block-size: auto;
  overflow: visible;
}

/* Diagram parts ----------------------------------------------------------- */

.hero-figure .node rect {
  fill: var(--surface);
  stroke: var(--eco);
  stroke-width: 1.5;
}

.hero-figure .node__title {
  fill: var(--text-strong);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
}

.hero-figure .node__sub,
.hero-figure .panel__sub {
  fill: var(--text-muted);
  font-size: 12.5px;
}

.hero-figure .panel rect {
  fill: var(--surface-inset);
  stroke: var(--border);
  stroke-width: 1.5;
}

.hero-figure .panel__title {
  fill: var(--text-strong);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
}

.hero-figure .chip rect {
  fill: var(--surface);
  stroke: var(--border);
  stroke-width: 1;
}

.hero-figure .chip text {
  fill: var(--text-muted);
  font-size: 12px;
  text-anchor: middle;
}

.hero-figure .flow {
  stroke: var(--border-strong);
}

.hero-figure .flow--isp,
.hero-figure .pulse--isp {
  stroke: var(--eco-isp);
}

.hero-figure .flow--fin,
.hero-figure .pulse--fin {
  stroke: var(--eco-fin);
}

.hero-figure .flow--core,
.hero-figure .pulse--core {
  stroke: var(--brand);
}

/* Pulses are decoration. They stay invisible unless the sequence runs. */
.hero-figure .pulse {
  opacity: 0;
}

/* The load sequence ------------------------------------------------------- */

@keyframes hero-node-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes hero-draw {
  from { stroke-dashoffset: 180; }
  to   { stroke-dashoffset: 0; }
}

@keyframes hero-pulse {
  0%   { opacity: 0; stroke-dashoffset: 180; }
  12%  { opacity: 0.9; }
  88%  { opacity: 0.9; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}

.hero-figure.is-ready .node,
.hero-figure.is-ready .panel {
  animation: hero-node-in 520ms var(--ease-out) both;
}

.hero-figure.is-ready .node--1 { animation-delay: 60ms; }
.hero-figure.is-ready .node--2 { animation-delay: 140ms; }
.hero-figure.is-ready .panel--1 { animation-delay: 340ms; }
.hero-figure.is-ready .panel--2 { animation-delay: 460ms; }
.hero-figure.is-ready .node--3 { animation-delay: 640ms; }
.hero-figure.is-ready .node--4 { animation-delay: 720ms; }

.hero-figure.is-ready .flow {
  stroke-dasharray: 180;
  animation: hero-draw 620ms var(--ease) 260ms both;
}

.hero-figure.is-ready .pulse {
  stroke-dasharray: 14 180;
  animation: hero-pulse 1700ms var(--ease) 1000ms 3;
}

.hero-figure.is-ready .pulse--late {
  animation-delay: 1400ms;
}

/* Reduced motion, or JavaScript unavailable: the finished diagram, at once. */
@media (prefers-reduced-motion: reduce) {
  .hero-figure.is-ready .node,
  .hero-figure.is-ready .panel,
  .hero-figure.is-ready .flow,
  .hero-figure.is-ready .pulse {
    animation: none;
  }
  .hero-figure.is-ready .flow {
    stroke-dasharray: none;
  }
}

/* Small screens: keep the shapes and the main labels, drop the fine print. */
@media (width < 60rem) {
  .hero-figure {
    max-inline-size: 26rem;
  }
  .hero-figure .only-wide {
    display: none;
  }
  .hero-figure .node__title,
  .hero-figure .panel__title {
    font-size: 19px;
  }
}

/* --------------------------------------------------------------------------
   2. CAPABILITY LIST — the four-line summary beside the trust statement
   -------------------------------------------------------------------------- */

.capability-list {
  display: grid;
  gap: var(--s-3);
  list-style: none;
  padding: 0;
}

.capability-list li {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin: 0;
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background-color: var(--bg);
  font-weight: var(--weight-medium);
  color: var(--text-strong);
}

.capability-list .icon {
  color: var(--brand);
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

/* --------------------------------------------------------------------------
   3. ECOSYSTEM CARDS — the two dominant cards on the homepage
   -------------------------------------------------------------------------- */

.eco-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: clamp(var(--s-5), 3.5vw, var(--s-6));
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  border-block-start: 4px solid var(--eco);
  box-shadow: var(--sh-2);
}

.eco-card h3 {
  font-size: var(--fs-h2);
}

.eco-card > p {
  color: var(--text-muted);
}

.eco-card__list {
  display: grid;
  gap: var(--s-3);
  list-style: none;
  padding: 0;
  margin-block: var(--s-2);
}

.eco-card__list li {
  position: relative;
  margin: 0;
  padding-inline-start: var(--s-6);
  font-size: var(--fs-small);
  color: var(--text);
}

.eco-card__list li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.62em;
  inset-inline-start: 0;
  inline-size: 1rem;
  block-size: 2px;
  background-color: var(--eco);
}

.eco-card .btn {
  align-self: flex-start;
  margin-block-start: auto;
}

.tech-col h3 .icon {
  color: var(--brand);
}

/* --------------------------------------------------------------------------
   5. WHY Aim IT
   -------------------------------------------------------------------------- */

.why__quote {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  max-width: 20ch;
}

.why-item h3 {
  font-size: var(--fs-h4);
  margin-block-end: var(--s-2);
}

.why-item p {
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.why-item {
  padding-block-start: var(--s-4);
  border-block-start: 2px solid var(--eco-fin);
}

.why-grid .why-item:nth-child(odd) {
  border-block-start-color: var(--eco-isp);
}

/* --------------------------------------------------------------------------
   6. sTRADER BLOCK
   -------------------------------------------------------------------------- */

.strader__title {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  font-variation-settings: "wdth" var(--width-display);
}

.strader .mock {
  margin-block-start: var(--s-6);
}

/* --------------------------------------------------------------------------
   7. SMALL HELPERS USED BY PAGE CONTENT
   -------------------------------------------------------------------------- */

.text-tiny {
  font-size: var(--fs-tiny);
}



/* --------------------------------------------------------------------------
   8. INNER PAGE HERO
   Every page below the homepage opens the same way: breadcrumbs, a short
   heading, one paragraph, and the actions that matter on that page.
   -------------------------------------------------------------------------- */

.page-hero {
  padding-block: clamp(1.75rem, 4vw, 2.75rem) clamp(2.5rem, 6vw, 4rem);
  background-color: var(--surface);
  color: var(--text);
  border-block-end: 1px solid var(--border);
}

.page-hero .breadcrumbs {
  margin-block-end: var(--s-5);
}

.page-hero h1 {
  max-width: 20ch;
}

.page-hero__lead {
  margin-block-start: var(--s-4);
  font-size: var(--fs-lead);
  color: var(--text-muted);
  max-width: 58ch;
}

.page-hero__actions {
  margin-block-start: var(--s-5);
}

/* --------------------------------------------------------------------------
   9. CHECKLIST — the capability lists inside solution cards
   -------------------------------------------------------------------------- */

.checklist {
  display: grid;
  gap: var(--s-3);
  list-style: none;
  padding: 0;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text);
}

.checklist .icon {
  flex: none;
  margin-block-start: 0.18em;
  color: var(--eco);
}

/* --------------------------------------------------------------------------
   10. PLAIN TABLE — responsibilities, comparisons, specifications
   -------------------------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
}

.table-basic {
  inline-size: 100%;
  min-inline-size: 32rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background-color: var(--surface);
  color: var(--text);
  font-size: var(--fs-small);
}

.table-basic thead th {
  padding: var(--s-3) var(--s-4);
  background-color: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--fs-tiny);
  font-weight: var(--weight-medium);
  border-block-end: 1px solid var(--border);
}

.table-basic td {
  padding: var(--s-3) var(--s-4);
  border-block-end: 1px solid var(--border);
  vertical-align: top;
  color: var(--text);
}

.table-basic tbody tr:last-child td {
  border-block-end: 0;
}

.table-basic td:first-child {
  font-weight: var(--weight-medium);
  color: var(--text-strong);
}

/* --------------------------------------------------------------------------
   11. META LIST — the facts panel at the top of a case study
   -------------------------------------------------------------------------- */

.meta-list {
  display: grid;
  gap: var(--s-3);
  margin: 0;
}

.meta-list > div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--s-4);
  padding-block-end: var(--s-3);
  border-block-end: 1px solid var(--border);
}

.meta-list dt {
  font-size: var(--fs-tiny);
  color: var(--text-muted);
}

.meta-list dd {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-strong);
}

@media (width < 34rem) {
  .meta-list > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-1);
  }
}

/* --------------------------------------------------------------------------
   12. CASE STUDY BLOCK — Challenge, Solution, Technology, Implementation,
   Outcome. The same five headings on every case study, so they can be
   compared rather than admired.
   -------------------------------------------------------------------------- */

.case-block + .case-block {
  margin-block-start: var(--s-6);
  padding-block-start: var(--s-6);
  border-block-start: 1px solid var(--border);
}

.case-block h2 {
  font-size: var(--fs-h3);
  margin-block-end: var(--s-4);
}

.case-block h2::before {
  content: "";
  display: block;
  inline-size: 2.5rem;
  block-size: 3px;
  background-color: var(--eco);
  margin-block-end: var(--s-4);
}

/* --------------------------------------------------------------------------
   13. LOGO SIZES — so no page needs an inline style attribute, which lets the
   Content-Security-Policy stay strict.
   -------------------------------------------------------------------------- */

.brand__mark--sm {
  block-size: 1.6rem;
  inline-size: auto;
}

/* The drawer follows the same swap as the header logo. */
.drawer__head .brand__mark--light {
  display: none;
}

[data-theme="light"] .drawer__head .brand__mark--light {
  display: block;
}

.footer-brand .brand__mark {
  block-size: 2rem;
  inline-size: auto;
}

/* --------------------------------------------------------------------------
   14. PROSE — long-form text on the legal pages
   -------------------------------------------------------------------------- */

.prose h2 {
  font-size: var(--fs-h3);
  margin-block: var(--s-6) var(--s-3);
}

.prose h2:first-child {
  margin-block-start: 0;
}

.prose h3 {
  font-size: var(--fs-h4);
  margin-block: var(--s-5) var(--s-3);
}

.prose p,
.prose ul,
.prose ol {
  margin-block-end: var(--s-4);
  color: var(--text-muted);
}

.prose li {
  color: var(--text-muted);
}

.prose strong {
  color: var(--text-strong);
}

/* --------------------------------------------------------------------------
   15. SYSTEM PAGES — 404, 500, offline, thank you
   -------------------------------------------------------------------------- */

.system-page {
  display: grid;
  place-items: center;
  min-block-size: 60svh;
  text-align: center;
}

.system-page__code {
  font-family: var(--font-data);
  font-size: var(--fs-small);
  color: var(--text-muted);
  letter-spacing: 0.1em;
}

.system-page h1 {
  max-width: 22ch;
  margin-inline: auto;
}

.system-page p {
  margin-inline: auto;
}

.system-page .icon-tile {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   16. SCOPING WIZARD
   One question on screen at a time, with large tappable answers. The radio
   input stays in the page and stays focusable: it is hidden visually only,
   so the keyboard and screen reader behaviour is the browser's own.
   -------------------------------------------------------------------------- */

.wizard {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background-color: var(--surface);
  color: var(--text);
  padding: clamp(var(--s-5), 3.5vw, var(--s-6));
  box-shadow: var(--sh-2);
}

.wizard__progress {
  margin-block-end: var(--s-5);
}

.wizard__bar {
  block-size: 4px;
  border-radius: var(--r-pill);
  background-color: var(--surface-2);
  color: var(--text);
  overflow: hidden;
}

.wizard__bar span {
  display: block;
  block-size: 100%;
  inline-size: 16.6%;
  background-color: var(--brand);
  transition: inline-size var(--t-slow) var(--ease);
}

.wizard__count {
  margin-block-start: var(--s-3);
  font-size: var(--fs-tiny);
  color: var(--text-muted);
}

.wizard__step {
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}

.wizard__question {
  display: block;
  padding: 0;
  margin-block-end: var(--s-5);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
}

.wizard__question:focus {
  outline: none;
}

.wizard__options {
  display: grid;
  gap: var(--s-3);
}

.option {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  min-block-size: 3.25rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background-color: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease);
}

.option:hover {
  border-color: var(--brand);
}

/* Visually hidden, still focusable, still announced. */
.option input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.option::before {
  content: "";
  flex: none;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  border: 2px solid var(--border-strong);
  border-radius: var(--r-pill);
  transition: border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}

.option.is-selected,
.option:has(input:checked) {
  border-color: var(--brand);
  background-color: var(--brand-soft);
  color: var(--text-strong);
  font-weight: var(--weight-medium);
}

.option.is-selected::before,
.option:has(input:checked)::before {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 1rem var(--brand);
}

.option:has(input:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.wizard__nav {
  display: flex;
  gap: var(--s-3);
  margin-block-start: var(--s-6);
}

.wizard__nav .btn {
  flex: 1 1 auto;
}

.wizard__result {
  text-align: start;
}

.wizard__result:focus {
  outline: none;
}

.wizard__verdict {
  margin-block: var(--s-4);
  font-size: var(--fs-lead);
  color: var(--text);
}

.wizard__summary {
  margin-block: var(--s-5);
  padding: var(--s-5);
  border-radius: var(--r-md);
  background-color: var(--surface-2);
  color: var(--text);
}

.wizard__summary h3 {
  font-size: var(--fs-small);
  font-family: var(--font-text);
  color: var(--text-muted);
  margin-block-end: var(--s-2);
}

/* --------------------------------------------------------------------------
   17. LOCATION CARD
   Replaces the embedded map. No third party is contacted at any point: the
   address is drawn here and the buttons hand over to whichever map app the
   visitor already uses.
   -------------------------------------------------------------------------- */

.location {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background:
    repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px 3rem),
    repeating-linear-gradient(0deg, var(--border) 0 1px, transparent 1px 3rem),
    var(--surface-2);
}

.location__pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: var(--r-pill);
  background-color: var(--brand);
  color: var(--text-on-brand);
}

.location__address {
  font-size: var(--fs-small);
  color: var(--text-strong);
  background-color: var(--surface);
  padding: var(--s-4);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
}


/* --------------------------------------------------------------------------
   18. ADOPTION FIGURES

   The only numbers on this website. They are given at the size they deserve,
   with the one that matters most set larger than the others, because a
   figure that has to be hunted for may as well not be published.
   -------------------------------------------------------------------------- */

.stat-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--s-5);
  align-items: end;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-block-start: var(--s-4);
  border-block-start: 2px solid var(--border-strong);
}

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  font-size: var(--fs-small);
  color: var(--text-muted);
  max-width: 24ch;
}

/* The headline figure. Larger, in the ecosystem accent, and on its own row
   on a narrow screen so it is the first thing read. */
.stat--feature {
  border-block-start-color: var(--eco);
}

.stat--feature .stat__value {
  font-size: clamp(2.75rem, 9vw, 4.25rem);
  color: var(--eco-ink);
}

.stat--feature .stat__label {
  color: var(--text);
  font-weight: var(--weight-medium);
}

@media (width >= 60rem) {
  .stat-band--lead {
    grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(12rem, 1fr));
  }
}


/* --------------------------------------------------------------------------
   19. ACHIEVEMENT STATEMENT
   One sentence, with the two figures inside it given the weight they deserve
   rather than being left to blend into the line.
   -------------------------------------------------------------------------- */

.achievement {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.6vw, 2rem);
  line-height: 1.25;
  letter-spacing: var(--tracking-head);
  color: var(--text-strong);
  max-width: 26ch;
  text-wrap: balance;
}

.achievement strong {
  color: var(--eco-ink);
  font-weight: var(--weight-bold);

  /* No nowrap. In English the figure is short ("100+ ISP clients"); the same
     phrase in Arabic or Bengali runs several times longer, and forcing it onto
     one line pushed it straight out of the card. It wraps now. */
}

/* --------------------------------------------------------------------------
   20. ICON BESIDE THE HEADING
   The icon and the heading sit on one line, with everything else below them
   across the full width. Written as a grid so the markup does not change.
   Browsers without :has() keep the stacked layout, which still reads well.
   -------------------------------------------------------------------------- */

.card:has(> .icon-tile),
.eco-card:has(> .icon-tile) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s-4);
  row-gap: var(--s-3);
  align-items: center;
}

.card:has(> .icon-tile) > .icon-tile,
.eco-card:has(> .icon-tile) > .icon-tile {
  grid-column: 1;
  grid-row: 1;
}

.card:has(> .icon-tile) > .card__title,
.card:has(> .icon-tile) > h2,
.card:has(> .icon-tile) > h3,
.eco-card:has(> .icon-tile) > h3 {
  grid-column: 2;
  grid-row: 1;
  min-inline-size: 0;
}

.card:has(> .icon-tile) > *:not(.icon-tile):not(.card__title):not(h2):not(h3),
.eco-card:has(> .icon-tile) > *:not(.icon-tile):not(h3) {
  grid-column: 1 / -1;
}

/* A badge sitting above the heading keeps its own row, full width. */
.card:has(> .icon-tile) > .badge,
.eco-card:has(> .icon-tile) > .badge {
  grid-column: 1 / -1;
  grid-row: auto;
  justify-self: start;
}

@media (width < 26rem) {
  .card:has(> .icon-tile),
  .eco-card:has(> .icon-tile) {
    column-gap: var(--s-3);
  }
}


/* --------------------------------------------------------------------------
   21. THE DIAGRAM IN RIGHT-TO-LEFT

   SVG text is placed by a coordinate, not by a box, so no logical property
   can move it. Anchoring Arabic at the left edge of a box sends it leftwards
   and straight out of the box.

   An earlier version shifted each label with a CSS transform. That was the
   wrong tool: browsers treat transforms on SVG child elements inconsistently,
   and where it failed the text ran outside its box anyway. Instead each label
   exists twice, positioned correctly for each direction, and only one is ever
   shown. Nothing to compute, nothing to go wrong.

   The geometry itself is not mirrored. The diagram reads top to bottom, which
   is the same in both directions, and mirroring it would reverse the arrows.
   -------------------------------------------------------------------------- */

.hero-figure .dir-rtl {
  display: none;
}

[dir="rtl"] .hero-figure .dir-ltr {
  display: none;
}

[dir="rtl"] .hero-figure .dir-rtl {
  display: inline;
}

[dir="rtl"] .hero-figure text {
  direction: rtl;
}

/* text-anchor is logical, not physical.
   ---------------------------------------------------------------------------
   The right-to-left labels carry text-anchor="end" in the markup, which is
   correct for a left-to-right run: "end" is the right-hand side, so the text
   grows leftward from its anchor.

   Once direction is rtl, "end" means the end of the string in reading order,
   which is now the LEFT side. The anchor stayed at x=190 but the text began
   growing rightward from it, straight out of the box and off the screen.

   In a right-to-left run it is "start" that sits on the right. Setting it here
   puts the anchor back on the right edge and the text grows leftward again,
   which is what the layout was drawn for. The geometry is untouched: same
   anchors, same boxes, same connectors. */
[dir="rtl"] .hero-figure .dir-rtl {
  text-anchor: start;
}