@charset "UTF-8";
/* ==========================================================================
   TWSS_styles_001.css — www.toptronicwebsites.com  (part 1 of 3)
   Generated/Updated on: 2026-09-16T11:40:00+10:00
   Build Number: 002
   Version Number: (set manually by Jacques)

   © Copyright 1990-2026 Toptronic® Ltd, all rights reserved; no part of this
   document may be reproduced, modified or stored in a retrieval system, or
   transmitted in any form or by any means, electronic, mechanical,
   photocopying, recording or otherwise, without the prior written permission of
   Toptronic Limited. For copyright inquiries: jacques@toptronic.com

   WHAT IS IT
     The first of three stylesheets for our own sales web site. A stylesheet is
     the set of instructions that says how a page LOOKS: colours, spacing,
     sizes, and what happens when the mouse hovers something.

   WHY IT IS SPLIT IN THREE
     Our own rule says no file may pass 500 lines, so the stylesheet rolls over:
       001 = fonts, colour and spacing "tokens", the reset, the base text,
             the page grid, the header and the footer   (this file)
       002 = the building blocks: buttons, cards, site frames, steps, plans,
             the comparison table, questions, the form, the marquee
       003 = the big sections, the movement (animation), right-to-left support,
             and the printing rules

   HOW IT WORKS (the important idea)
     Every colour and every spacing number is written ONCE at the top, as a
     "token" like --brand or --sp-5. Everywhere else in all three files we use
     the token, never the raw number. Two consequences a beginner can see at
     once: changing the brand blue is a ONE-line edit, and we can prove the
     contrast ratios (how readable text is) rather than guess them.

   NOTE ON THE FONTS (measured, not assumed)
     Archivo is a single-weight file (700 only) and Inter is variable
     (100-900). Neither has an italic face and neither contains the symbols
     ✓ ✗ → ● ▸, so this design never uses italic text and draws every tick,
     cross and arrow with CSS borders instead of typing a character.
     Archivo and Inter also hold only Latin letters: Arabic and Chinese fall
     back to the fonts the visitor's own computer has (see section 12 of the
     design brief, reproduced in file 003).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THE FONTS
   font-display:swap means "show the text immediately in the fallback font and
   swap it when our font arrives" — a visitor never waits on an empty page.
   unicode-range tells the browser exactly which characters live in the file,
   so it does not download a font it cannot use for the text on screen.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. THE TOKENS (the design system)
   --ink / --paper: our two "surfaces" (dark and light).
   --brand: the blue we act with. --teal: the friendly accent that reads well
   on dark. --signal: the group's Toptronic yellow — graphic only (at 1.27:1 on
   paper it is unreadable as text), so it is used for the little dashes, dots
   and the "most businesses start here" flag, never for words.
   -------------------------------------------------------------------------- */
:root {
  --ink: #07090F;
  --ink-2: #0D1120;
  --ink-3: #141A2C;
  --line-dk: #232A3F;
  --line-dk-2: #3A4560;
  --paper: #F6F7F9;
  --paper-2: #FFFFFF;
  --tint: #EEF1F6;
  --line: #DDE2EB;
  --line-2: #C9D0DC;
  /* The border of a text field is a user-interface boundary, not decoration, and
     the accessibility rule for that (WCAG 1.4.11) asks for 3:1 against the
     surface behind it. #A7B0C0 measured only 2.18:1 on white; #7E889C measures
     3.57:1 and still reads as a light grey-blue field, so the field is
     identifiable on its own and does not depend on the label to be seen. */
  --line-field: #7E889C;
  --text: #12161F;
  --muted: #576070;
  --text-dk: #F4F6FA;
  --muted-dk: #A3ADC2;
  --brand: #2547D0;
  --brand-ink: #1F3DB8;
  --brand-hi: #7A96FF;
  --teal: #35D6BE;
  --signal: #F0E010;
  --ok: #0E7C5A;
  --danger: #C42026;

  --grad-brand: linear-gradient(135deg, #2547D0 0%, #3A5CFF 45%, #35D6BE 100%);
  --grad-ink: linear-gradient(160deg, #0D1120 0%, #07090F 60%, #0B1020 100%);
  --bloom-a: radial-gradient(58% 58% at 72% 26%, rgba(37, 71, 208, .46), transparent 68%);
  --bloom-b: radial-gradient(46% 46% at 18% 82%, rgba(53, 214, 190, .26), transparent 70%);

  --font-display: "Archivo", "Inter", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --font-text: "Inter", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Measured, session 0093: a 68px headline wrapped to FIVE lines and pushed the
     home page's first button below the fold on a 1366x700 laptop. At 56px it is
     four lines and the button is visible; it is still the largest thing on the
     page by a wide margin. */
  --fs-hero: clamp(2.25rem, 1.15rem + 4.2vw, 3.5rem);
  --fs-h1: clamp(2rem, 1.2rem + 3.2vw, 3.25rem);
  --fs-h2: clamp(1.5rem, 1.05rem + 1.8vw, 2.25rem);
  --fs-h3: clamp(1.25rem, 1.05rem + .8vw, 1.625rem);
  --fs-h4: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --fs-lead: clamp(1.0625rem, 1rem + .45vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-eyebrow: .75rem;
  --fs-micro: .6875rem;
  --fs-stat: clamp(2rem, 1.3rem + 2.8vw, 3rem);

  --measure: 66ch;
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;
  --r-1: 6px; --r-2: 10px; --r-3: 16px; --r-4: 24px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(7, 9, 15, .06);
  --sh-2: 0 10px 30px -12px rgba(7, 9, 15, .20);
  --sh-3: 0 28px 70px -28px rgba(7, 9, 15, .38);
  --glow-d: 0 0 0 1px rgba(122, 150, 255, .16), 0 24px 70px -30px rgba(37, 71, 208, .62);
  --t-fast: 140ms; --t-med: 260ms; --t-slow: 480ms;
  --ease: cubic-bezier(.2, .65, .25, 1);
  --z-sticky: 200; --z-overlay: 300; --z-skip: 400;
  --header-h: 72px;
}

/* --------------------------------------------------------------------------
   3. THE RESET
   Browsers ship with their own spacing and margins, which differ between
   Chrome, Safari and Edge. We erase those defaults so every browser starts
   from the same blank sheet and our design is what the visitor sees.
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 var(--fs-body)/1.7 var(--font-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;              /* a stray wide element never side-scrolls */
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; }
ul, ol { padding: 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.sec--ink :focus-visible, .site-header :focus-visible,
.site-footer :focus-visible, .band :focus-visible { outline-color: var(--brand-hi); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --------------------------------------------------------------------------
   4. BASE TEXT
   Hierarchy without a second font weight: size, letter-spacing (how tightly
   the letters sit) and colour do all the work, because Archivo has one weight.
   -------------------------------------------------------------------------- */
.h1, .h2, .h3, .h4 { font-family: var(--font-display); font-weight: 700; color: var(--text); }
.h1 { font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -.02em; }
.h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -.02em; }
.h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.01em; }
.h4 { font-size: var(--fs-h4); line-height: 1.2;  letter-spacing: -.01em; }
.hero__title { font-size: var(--fs-hero); line-height: 1.03; letter-spacing: -.03em; }
.p { font: 400 var(--fs-body)/1.7 var(--font-text); max-width: var(--measure); }
.lead { font: 400 var(--fs-lead)/1.6 var(--font-text); color: var(--muted); max-width: var(--measure); }
.p + .p { margin-top: var(--sp-4); }
.small { font-size: var(--fs-small); line-height: 1.6; }
.muted { color: var(--muted); }
.center { text-align: center; }
.eyebrow, .kicker {
  font: 700 var(--fs-eyebrow)/1.2 var(--font-display);
  letter-spacing: .16em; text-transform: uppercase; color: var(--brand);
}
.kicker { font-family: var(--font-text); font-weight: 600; color: var(--muted); }
.sec--ink .h1, .sec--ink .h2, .sec--ink .h3, .sec--ink .h4 { color: var(--text-dk); }
.sec--ink .p, .sec--ink .lead, .sec--ink .muted { color: var(--muted-dk); }
.sec--ink a { color: var(--brand-hi); }
.badge {
  display: inline-block; padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--tint); color: var(--muted);
  font: 500 .8125rem var(--font-text);
}
/* Long words must never push the page sideways: German compounds and Arabic
   are the two real offenders; Chinese is excluded because Chinese has no word
   breaks and "anywhere" would chop its sentences in the wrong places. */
.p, .card__text, .shot__text, .plan__fit, .faq__a, .table td { overflow-wrap: anywhere; }
html[lang="de"] .p, html[lang="de"] .card__text, html[lang="de"] .shot__text,
html[lang="de"] .plan__fit, html[lang="de"] .lead { hyphens: auto; }
html[lang^="zh"] .p, html[lang^="zh"] .card__text, html[lang^="zh"] .shot__text,
html[lang^="zh"] .plan__fit, html[lang^="zh"] .faq__a { overflow-wrap: normal; }
html[lang="ar"] .p, html[lang^="zh"] .p { max-width: none; }

/* --------------------------------------------------------------------------
   5. LAYOUT
   .wrap is the invisible column that keeps everything lined up and stops text
   stretching uncomfortably wide on a huge monitor.
   .grid > * { min-width: 0 } is the single most valuable line in this file: it
   stops a long word from blowing a grid column wider than the screen, which is
   the classic cause of a horizontal scrollbar on a phone.
   -------------------------------------------------------------------------- */
.wrap { max-width: 1180px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }
.wrap--narrow { max-width: 760px; }
.sec { padding-block: clamp(64px, 8vw, 112px); }
.sec--tight { padding-block: clamp(40px, 5vw, 64px); }
.sec--tint { background: var(--tint); }
.sec--ink { background: var(--ink); color: var(--text-dk); }
.sec__head { max-width: 780px; margin-bottom: clamp(28px, 4vw, 48px); }
.sec__head .eyebrow { margin-bottom: var(--sp-3); }
.sec__head .h2 { margin-bottom: var(--sp-5); }
.sec__head .p, .sec__head .lead { margin-top: var(--sp-4); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.sec--ink .rule { background: var(--line-dk); }
.grid { display: grid; gap: clamp(16px, 2.2vw, 26px); }
.grid > * { min-width: 0; }
@media (min-width: 600px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 760px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}
/* Two dark sections that follow each other must read as one band, not two. */
.sec--ink + .sec--ink {
  padding-block-start: calc(clamp(64px, 8vw, 112px) * .64);
  border-top-color: transparent;
}

/* --------------------------------------------------------------------------
   6. THE HEADER (identical on all 8 pages, always dark)
   Every page opens on a dark hero, so the header is dark on every page and
   there is no "scrolled" state to maintain.
   The skip link is the first thing in <body>: a keyboard visitor presses Tab
   and jumps straight past the menu. It is a .btn, so no new class is invented.
   -------------------------------------------------------------------------- */
body > .btn:first-child {
  position: fixed; z-index: var(--z-skip);
  inset-block-start: 8px; inset-inline-start: 8px;
  transform: translateY(-220%); transition: transform var(--t-fast) var(--ease);
}
body > .btn:first-child:focus { transform: none; }

.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky); min-height: var(--header-h);
  background: rgba(7, 9, 15, .72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(244, 246, 250, .10);
}
/* The header may GROW: German and Arabic labels are longer than English, and a
   fixed 72px bar would push them out of the screen. Everything wraps instead. */
.header__in {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2) var(--sp-5); min-height: var(--header-h);
  max-width: 1180px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-inline-end: auto; }
.brand__mark {
  width: 34px; height: 34px; border-radius: 9px; background: var(--grad-brand);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  display: grid; place-items: center; color: var(--paper-2);
  font: 700 18px/1 var(--font-display);
}
.brand__name { font: 700 1.1875rem var(--font-display); color: var(--text-dk); letter-spacing: -.01em; }
.brand__tag {
  display: block; font: 500 var(--fs-micro) var(--font-text); letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-dk); margin-top: 2px;
}
.site-nav { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: flex-end; }
.nav-link {
  position: relative; padding: 10px 14px; border-radius: var(--r-pill);
  font: 500 var(--fs-small) var(--font-text); color: var(--muted-dk);
  text-decoration: none;
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-link:hover { color: var(--text-dk); background: rgba(244, 246, 250, .06); }
.nav-link.is-active { color: var(--text-dk); }
.nav-link.is-active::after {
  content: ""; position: absolute; inset-inline: 14px; bottom: 4px; height: 2px;
  border-radius: 2px; background: var(--signal);
}
.lang { position: relative; display: flex; align-items: center; gap: 8px; }
.lang__label {
  font: 500 var(--fs-eyebrow) var(--font-text); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-dk);
}
.lang__select {
  appearance: none; -webkit-appearance: none;
  min-height: 40px; padding: 9px 34px 9px 14px;
  max-width: min(180px, 40vw);
  background: var(--ink-2); color: var(--text-dk);
  border: 1px solid rgba(244, 246, 250, .22); border-radius: var(--r-pill);
  font: 500 .875rem var(--font-text);
}
.lang::after {
  content: ""; position: absolute; inset-inline-end: 14px; top: calc(50% - 5px);
  width: 8px; height: 8px; pointer-events: none;
  border-right: 2px solid var(--muted-dk); border-bottom: 2px solid var(--muted-dk);
  transform: rotate(45deg);
}
.lang__select option { color: var(--text); background: var(--paper-2); }
.nav-toggle { display: none; }

@media (max-width: 1099px) {
  /* Below the desktop breakpoint the seven links live in the open/close panel,
     not in the bar. Without this the whole menu would wrap into a tall stack
     inside the header on every phone. */
  .site-nav { display: none; }
  /* One compact row on a phone: brand, the menu button and the language
     selector. Only if the screen is very narrow do they wrap, which is fine. */
  .header__in { gap: var(--sp-2); }
  .brand__name { font-size: 1.0625rem; }
  .lang__select { padding: 9px 30px 9px 12px; font-size: .8125rem; }
  .nav-toggle {
    display: grid; place-items: center; width: 44px; height: 44px; order: 99;
    background: none; border: 1px solid rgba(244, 246, 250, .22);
    border-radius: var(--r-2); color: var(--text-dk); cursor: pointer;
  }
  .nav-toggle::before {                          /* three bars, drawn in CSS */
    content: ""; width: 18px; height: 2px; display: block; background: currentColor;
    box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
  }
  /* The open menu: no new class needed — the button's aria-expanded attribute
     is the switch, and the panel is the nav element that follows it.
     position:absolute (not fixed) so the panel always sits directly under the
     header, even when the header has grown to a second row. */
  .nav-toggle[aria-expanded="true"] ~ .site-nav {
    display: flex; flex-direction: column;
    position: absolute; inset-block-start: 100%; inset-inline: 0;
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
    background: var(--ink); padding: var(--sp-4) var(--sp-4) var(--sp-6);
    gap: 0; border-top: 1px solid rgba(244, 246, 250, .10);
  }
  .nav-toggle[aria-expanded="true"] ~ .site-nav .nav-link {
    min-height: 52px; display: flex; align-items: center;
    border-radius: 0; border-bottom: 1px solid var(--line-dk);
  }
}
@media (min-width: 1100px) {
  .site-nav { display: flex !important; }
}
/* Below 1280px the bar holds the mark and "TWSS" (the tagline is decoration and
   goes), the seven links, and the language selector. Measured: that is about
   944px of content, so it fits on one row from 1100px up with room to spare. */
@media (max-width: 1279px) {
  .brand__tag { display: none; }
  .lang__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   7. THE FOOTER
   Three link columns plus a brand block and the legal line, always dark.
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink); color: var(--muted-dk);
  padding-block: var(--sp-8) var(--sp-5);
  border-top: 1px solid rgba(244, 246, 250, .08);
}
.footer__top { display: grid; gap: var(--sp-8); }
@media (min-width: 900px) {
  .footer__top { grid-template-columns: 1.2fr 2fr; }
}
.footer__brand { max-width: 340px; }
.footer__brand .brand { margin-inline-end: 0; }
.footer__note { margin-top: var(--sp-5); font: 400 .8125rem/1.65 var(--font-text); color: var(--muted-dk); }
.footer__cols { display: grid; gap: var(--sp-5); }
@media (min-width: 700px) {
  .footer__cols { grid-template-columns: repeat(3, 1fr); }
}
.footer__title {
  font: 600 .8125rem var(--font-text); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dk); margin-bottom: var(--sp-4);
}
.footer__link {
  display: block; padding: 6px 0; font-size: var(--fs-small); color: var(--muted-dk);
  text-decoration: none;
}
.footer__link:hover { color: var(--text-dk); text-decoration: underline; text-underline-offset: 4px; }
.footer__bottom {
  margin-top: var(--sp-8); padding-top: var(--sp-5);
  border-top: 1px solid rgba(244, 246, 250, .08);
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between;
}
.footer__legal { font: 400 .8125rem/1.65 var(--font-text); color: var(--muted-dk); }

/* Content continues in TWSS_styles_002.css */