@charset "utf-8";

/* ==========================================================================
   IOTSIM.GR — main stylesheet
   Palette sampled from the design mockup (/root/review/preview.png).
   Order: fonts -> tokens -> base -> layout -> components -> pages -> responsive

   v2 refinement pass: layout, colour palette and type scale are unchanged.
   Only depth, motion, optical icon weight and 8px spacing rhythm were touched.
   ========================================================================== */

/* --------------------------------------------------------------- 1. fonts */

@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/Inter-greek-ext.woff2') format('woff2');unicode-range:U+1F00-1FFF}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/Inter-greek.woff2') format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/Inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/Inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('../fonts/Manrope-greek.woff2') format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('../fonts/Manrope-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('../fonts/Manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* -------------------------------------------------------------- 2. tokens */

:root{
  /* brand */
  --brand:#fd5c10;
  --brand-dark:#e14a04;
  --brand-soft:#fff1e9;

  /* plan accents */
  --green:#2daa63;
  --blue:#1858e5;
  --purple:#6330d6;
  --purple-badge:#6e3edc;

  /* neutrals */
  --ink:#0a132a;
  --ink-2:#1b2740;
  --body:#5b6478;
  --body-soft:#6a7387;   /* long-form descriptions — one step softer than --body */
  --muted:#8b93a6;
  --page:#f4f6fa;
  --surface:#fff;
  --surface-2:#f8fafd;
  --border:#e6eaf2;
  --border-2:#d9dfeb;
  --border-3:#c8d1e0;    /* hover only */

  /* type */
  --font-head:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* shape */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;

  /* elevation — two-layer: a tight contact shadow plus a wide ambient one */
  --shadow-sm:0 1px 2px rgba(10,19,42,.05);
  --shadow-md:0 1px 2px rgba(10,19,42,.04), 0 8px 20px rgba(10,19,42,.06);
  --shadow-hover:0 2px 4px rgba(10,19,42,.05), 0 12px 28px rgba(10,19,42,.09);
  --shadow-lg:0 2px 8px rgba(10,19,42,.06), 0 28px 60px rgba(10,19,42,.15);

  /* motion */
  --dur:220ms;
  --ease:cubic-bezier(.4,0,.2,1);

  /* icons — optical weight, tuned per render size (see §5.0) */
  --icon-stroke:1.8;

  --container:1280px;
  --header-h:72px;
}

/* ---------------------------------------------------------------- 3. base */

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

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);color-scheme:light}

::selection{background:#ffd9c4;color:var(--ink)}

body{
  margin:0;
  background:var(--page);
  color:var(--body);
  font:400 15px/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  margin:0;
  color:var(--ink);
  font-family:var(--font-head);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.15;
}

p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}

:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* -------------------------------------------------------------- 4. layout */

/* Fullscreen since 2026-07-31 (was a 1440px centred sheet with a halo
   shadow): the bands run edge to edge at any width, the content column is
   still capped by .container, and the right-anchored hero art keeps its
   native size at the viewport edge — it CANNOT scale up (1.12× resolution
   ceiling, see the hero notes). Below 1440px nothing changed. */
.site{background:var(--surface)}

.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:35px;
  /* zoom:.9 lived here 2026-07-30 → 2026-08-07 (the global 10% visual
     reduction). Removed by request with the v3 layout — content paints 1:1
     again. If a global scale ever returns, put it back HERE (zoom on the
     content containers, not body/html, so full-bleed band backgrounds keep
     reaching both edges) — never a transform. */
}

.section{padding-block:56px}
/* 16px a side => 32px of white between one section's last ink and the next
   section's heading. The rhythm is set here, not per-section. */
.section--tight{padding-block:16px}

.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  /* 13px, not 24: the heading belongs to the block under it, so the air sits
     above the head (in the section padding) rather than between them */
  margin-bottom:13px;
}

.section-head h2{font-size:26px}

.section-head__aside{font-size:13px;color:var(--muted)}

/* head with a short brand underline — the Greek «Γιατί IOTSIM.GR;» section.
   Mockup v2 (2026-07-31) drew it centred; moved left by request same day,
   keeping the underline. */
.section-head--divider{display:block}
.section-head--divider h2::after{
  content:'';display:block;width:38px;height:3px;
  margin:10px 0 0;border-radius:2px;background:var(--brand);
}

.section-link{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--brand);font-size:13px;font-weight:600;
  white-space:nowrap;
  transition:color var(--dur) var(--ease);
}
.section-link svg{width:14px;height:14px;flex:none;transition:transform var(--dur) var(--ease)}
.section-link:hover{color:var(--brand-dark)}
.section-link:hover svg{transform:translateX(3px)}

/* ---------------------------------------------------------- 5. components */

/* 5.0 icon weight ---------------------------------------------------------
   stroke-width lives here, not on the <symbol>s, so a single icon set can
   carry the same *optical* weight at 14px, 16px and 26px. Presentation
   attributes inside a <use> shadow tree cannot be overridden from outside,
   so the symbols intentionally declare no stroke-width and inherit this. */

svg{stroke-width:var(--icon-stroke)}
.app-card svg,.trust__item svg,.help__art{--icon-stroke:1.6}
.pill svg,.social svg,.contact-list svg,.lang-pill svg,.site-nav .caret{--icon-stroke:2}

/* 5.1 buttons */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;
  border:1px solid var(--border-2);
  border-radius:var(--r-sm);
  background:var(--surface);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:14px;font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
.btn svg{width:16px;height:16px;flex:none}
.btn:hover{background:var(--surface-2);border-color:var(--border-3);box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.btn:active{transform:translateY(0);box-shadow:var(--shadow-sm)}

.btn--primary{
  background:var(--brand);border-color:var(--brand);color:#fff;
  box-shadow:0 1px 2px rgba(120,40,0,.18), 0 6px 16px rgba(253,92,16,.26);
}
.btn--primary:hover{
  background:var(--brand-dark);border-color:var(--brand-dark);
  box-shadow:0 2px 4px rgba(120,40,0,.2), 0 12px 26px rgba(253,92,16,.34);
}

.btn--sm{padding:9px 15px;font-size:13px;border-radius:8px}
.btn--block{width:100%}

.btn--green {background:var(--green); border-color:var(--green); color:#fff;
             box-shadow:0 1px 2px rgba(10,70,40,.18), 0 6px 16px rgba(45,170,99,.24)}
.btn--green:hover {background:#248c51;border-color:#248c51;
             box-shadow:0 2px 4px rgba(10,70,40,.2), 0 12px 26px rgba(45,170,99,.3)}
.btn--blue  {background:var(--blue);  border-color:var(--blue);  color:#fff;
             box-shadow:0 1px 2px rgba(8,32,100,.18), 0 6px 16px rgba(24,88,229,.24)}
.btn--blue:hover  {background:#1247c0;border-color:#1247c0;
             box-shadow:0 2px 4px rgba(8,32,100,.2), 0 12px 26px rgba(24,88,229,.3)}
.btn--purple{background:var(--purple);border-color:var(--purple);color:#fff;
             box-shadow:0 1px 2px rgba(48,16,110,.18), 0 6px 16px rgba(99,48,214,.26)}
.btn--purple:hover{background:#5225b4;border-color:#5225b4;
             box-shadow:0 2px 4px rgba(48,16,110,.2), 0 12px 26px rgba(99,48,214,.32)}

/* 5.2 brand mark */

.brand{display:inline-flex;align-items:center;gap:8px}
.brand__mark{width:26px;height:26px;flex:none;color:var(--brand)}
.brand__word{
  font-family:var(--font-head);font-weight:800;font-size:19px;
  letter-spacing:-.03em;color:var(--ink);
}
.brand__word i{font-style:normal;color:var(--brand)}
.brand--inverse .brand__word{color:#fff}

/* 5.3 header */

.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
}
.site-header__inner{
  height:var(--header-h);
  display:flex;align-items:center;gap:32px;
}
.site-nav{display:flex;align-items:center;gap:32px;margin-inline:auto}
.site-nav a{
  position:relative;
  display:inline-flex;align-items:center;gap:4px;
  font-size:16px;font-weight:500;color:var(--ink-2);
  transition:color var(--dur) var(--ease);
}
.site-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;
  border-radius:2px;background:var(--brand);
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dur) var(--ease);
}
.site-nav a:hover{color:var(--brand)}
.site-nav a:hover::after{transform:scaleX(1)}
.site-nav .caret{width:12px;height:12px;opacity:.55}

.header-tools{display:flex;align-items:center;gap:8px}

.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;
  border:1px solid var(--border-2);border-radius:var(--r-sm);
  background:var(--surface);
  font-size:16px;font-weight:500;color:var(--ink-2);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.pill:hover{background:var(--surface-2);border-color:var(--border-3)}
.pill svg{width:16px;height:16px;flex:none;opacity:.7}

/* 5.4 cards */

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-md);
  transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}

/* 5.5 trust strip */

/* mockup v2 (2026-07-31): the strip is FRAMED again — one white bordered band
   with full-height dividers between the four cells (this superseded, in order,
   an even-ink spread, a left-flush layout, and the frameless centred strip
   with its EN-only eyeballed optical nudges, all now retired). Items stay
   centred in 1fr cells, so each still sits under the plan card above it. The
   component is shared by order.html and both homepages. */
.trust{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--shadow-md);
  padding:18px 0;
}
.trust__item{display:flex;align-items:center;justify-content:center;gap:12px;padding:0 16px}
.trust__item+.trust__item{border-left:1px solid var(--border)}
.trust__item svg{width:26px;height:26px;flex:none;color:var(--brand)}
.trust__item strong{display:block;font-size:13px;font-weight:700;color:var(--ink)}
.trust__item span{font-size:12px;color:var(--muted)}

/* 5.6 footer */

.site-footer{background:var(--ink);color:#c3ccdb;padding-top:60px}

.site-footer__grid{
  display:grid;
  grid-template-columns:1.7fr repeat(4,1fr) 1.35fr;
  gap:32px;
}
.site-footer h4{
  color:#fff;font-family:var(--font-body);
  font-size:12.5px;font-weight:700;letter-spacing:.02em;
  margin-bottom:16px;
}
.site-footer__about p{font-size:12.5px;line-height:1.7;margin:16px 0 24px;max-width:250px}
.site-footer li{margin-bottom:8px}
.site-footer li a{font-size:12.5px;color:#c3ccdb;transition:color var(--dur) var(--ease)}
.site-footer li a:hover{color:#fff}

.social{display:flex;gap:8px}
.social a{
  display:grid;place-items:center;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.09);color:#fff;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.social a:hover{background:var(--brand);transform:translateY(-2px)}
.social svg{width:14px;height:14px}

.contact-list li{display:flex;align-items:center;gap:8px;font-size:12.5px}
.contact-list svg{width:14px;height:14px;flex:none;color:var(--brand)}
.contact-list a{transition:color var(--dur) var(--ease)}
.contact-list a:hover{color:#fff}

.lang-pill{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  padding:8px 12px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.18);
  font-size:12.5px;color:#fff;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.lang-pill:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}
.lang-pill svg{width:14px;height:14px;flex:none}

.site-footer__legal{
  display:flex;align-items:center;gap:24px;
  margin-top:32px;padding:16px 0;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:12px;
}
.site-footer__legal a{transition:color var(--dur) var(--ease)}
.site-footer__legal a:hover{color:#fff}
.site-footer__legal .spacer{margin-inline:auto}

/* -------------------------------------------------------- 6. home: hero
   Geometry below is measured from the approved hero frame (hero-ref.png,
   a 1366px design rendered at 1536px, scale 1.1245). Frame px / 1.1245 = css px. */

.hero{
  position:relative;overflow:hidden;
  background:#f9fbfd;                 /* the hero band is tinted, not white */
  min-height:517px;                   /* frame y 80..662 */
}

.hero__grid{
  position:relative;z-index:2;
  display:block;                      /* the art is absolutely placed, not a column */
  padding-top:37px;
}

.hero h1{max-width:560px;font-size:59px;letter-spacing:-.045em;line-height:.93}
.hero h1 .accent{color:var(--brand)}

.hero__lead{
  margin:18px 0 0;max-width:560px;
  font-size:18px;line-height:1.72;color:#4e5a75;
}

.hero__actions{display:flex;flex-wrap:wrap;gap:24px;margin-top:30px}

/* hero buttons are their own size — the shared .btn is left alone so the
   order page is untouched */
.hero .btn{padding:15px 34px;font-size:15px;border-radius:8px}
.hero .btn svg{width:18px;height:18px}

.hero__art{
  position:absolute;z-index:1;
  right:0;top:0;height:517px;width:auto;max-width:none;
  pointer-events:none;
  /* feather the crop's left edge into the band so there is no seam */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 90px);
          mask-image:linear-gradient(to right,transparent 0,#000 90px);
}

/* 6.2 stats row */

/* The stats row reads as part of the hero block rather than the white section
   below it, and is lifted so the glyphs tuck in under the SIM card.

   The tint sits on .hero-block, behind the crop — the row itself is transparent
   and only its content is raised above the art (z-index 2 clears the art's 1).
   An opaque band here would cut a notch out of the laptop instead: at -8px it
   sliced a visible 118px chunk off the bottom corner.

   The lift is now capped by what is behind the glyphs, not by clipping. Probed
   on the render, the artwork behind the last icon (x1026-1064) is solid laptop
   base to y568 and a hard dark edge at y574; it is only clean from y584. That
   is why the row stops here — the SIM card's underside is at y570, and the
   Automatic glyph cannot rise to meet it without sitting on the laptop. */
.hero-block{background:#f9fbfd}

.stats-band{
  position:relative;z-index:2;
  margin-top:-76px;
}

.stats{
  display:grid;grid-template-columns:repeat(4,max-content);
  justify-content:start;
  column-gap:26px;                    /* no dividers — this is the whole gap */
  padding:0 0 32px;
}
.stat{display:flex;align-items:center;gap:2px}
/* Orange ringed glyphs. Explicit classes throughout: .stat__icon is itself a
   <span>, so a bare `.stat span` rule outranks it (0,1,1 vs 0,1,0) and repaints
   every icon slate — the same trap `.product span` set for `.product__tick`. */
.stat__icon{display:block;flex:none;color:var(--brand)}
.stat__icon svg{width:42px;height:42px;--icon-stroke:1.4}
.stat__value{display:block;font-size:14px;font-weight:700;color:var(--ink);line-height:1.35}
.stat__label{font-size:13.5px;color:#57667e;line-height:1.35}

/* 6.3 applications */

/* top pad is 33, not 16: the hero band's ink (the art) runs to the band's very
   bottom edge, so all 32px of air must come from the section that follows it.
   26px measured 25; 33px measures 32, matching the other section gaps.
   Since mockup v2 (2026-07-31) #about follows the hero on BOTH homepages and
   wears .section--posthero; .section--apps stays only for lab.html, whose
   copy of the old layout still opens with #applications. */
.section--apps,.section--posthero{padding-block:33px 16px}

.apps{display:grid;grid-template-columns:repeat(8,1fr);gap:15px}
/* mockup v2 (2026-07-31): back to the compact grid on both pages (the live
   per-category texts this section carried for a day were absorbed by the new
   about copy + connectivity band), with the 24px two-tone drawing now sitting
   in a 48px brand-soft circular chip per the mockup */

.app-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:18px 4px;min-height:118px;
  background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--shadow-md);
  text-align:center;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
.app-card svg{
  width:48px;height:48px;padding:12px;
  background:var(--brand-soft);border-radius:50%;
  color:var(--ink-2);transition:color var(--dur) var(--ease);
}
/* explicit class, not a bare `.app-card span` — the block now has a second
   text element and bare element selectors scoped to a block have bitten twice
   (.product span, .stat span) */
.app-card__title{font-size:14px;font-weight:700;color:var(--ink);line-height:1.3;letter-spacing:-.02em}
.app-card:hover{border-color:var(--border-3);box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.app-card:hover svg{color:var(--brand)}

/* 6.3b connectivity band — Greek page only, mockup v2 (2026-07-31): a
   brand-soft rounded panel between apps and plans. The globe is pure CSS per
   the illustration convention: a radial-gradient dot grid faded out by a
   radial mask — abstract dotted sphere, no image file. */

.band{
  display:grid;grid-template-columns:170px 1.05fr 1.4fr;gap:36px;align-items:center;
  padding:32px 36px;
  background:var(--brand-soft);border-radius:var(--r-lg);
}
.band__art{
  width:170px;height:170px;
  background-image:radial-gradient(var(--brand) 1.3px,transparent 1.4px);
  background-size:11px 11px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 45%,transparent 70%);
          mask-image:radial-gradient(circle at 50% 50%,#000 45%,transparent 70%);
  opacity:.55;
}
.band__copy h2{font-size:22px;margin-bottom:12px}
.band__copy p{font-size:13px;line-height:1.6;color:var(--body-soft)}
.band__copy p+p{margin-top:10px}
.band__feats{display:grid;gap:20px}
.feat{display:flex;align-items:flex-start;gap:14px}
.feat__icon{
  display:grid;place-items:center;flex:none;
  width:44px;height:44px;border-radius:50%;
  background:var(--surface);color:var(--brand);
  box-shadow:var(--shadow-sm);
}
.feat__icon svg{width:22px;height:22px}
.feat h3{font-size:14.5px;font-family:var(--font-head);font-weight:800;letter-spacing:-.01em;margin-bottom:4px}
.feat p{font-size:13px;line-height:1.6;color:var(--body-soft)}

/* 6.4 about + benefits */

/* mockup v2: the Greek section pairs a mission-copy column with a 3×2 card
   grid inside .about; /en/ still has the bare 5-up .benefits row, so the
   3-col override is scoped to .about (and needs same-scope overrides in the
   820/640 queries — (0,2,0) beats the bare media rules) */
.about{display:grid;grid-template-columns:1fr 2.5fr;gap:24px;align-items:start}
/* 1.6 like every other muted-copy block (benefit p, faq__a, band/feat p) —
   the site's body-copy leading; only the hero lead (1.72) and footer blurb
   (1.7) intentionally sit looser */
.about__copy p{font-size:13.5px;line-height:1.6;color:var(--body-soft)}
.about__copy p+p{margin-top:12px}

.benefits{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.about .benefits{grid-template-columns:repeat(3,1fr)}

.benefit{padding:20px;min-height:136px}
.benefit__head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.benefit__icon{
  display:grid;place-items:center;flex:none;
  width:40px;height:40px;border-radius:50%;
  background:var(--brand-soft);color:var(--brand);
}
.benefit__icon svg{width:21px;height:21px}
.benefit h3{font-size:14px;font-family:var(--font-head);font-weight:800;line-height:1.35;letter-spacing:-.01em}
/* 52px = the 40px icon + the head's 12px gap, so the text lines up under the title */
.benefit p{font-size:13.5px;line-height:1.6;color:var(--body-soft);padding-left:52px}
.benefit:hover{box-shadow:var(--shadow-hover)}

/* 6.5 plans */

.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start}

.plan{
  position:relative;
  display:flex;flex-direction:column;
  padding:24px 20px 20px;
  min-height:288px;
}
.plan__name{font-family:var(--font-head);font-weight:800;font-size:17px;color:var(--ink);letter-spacing:-.02em}
.plan__tag{font-size:11.5px;color:var(--muted);margin-top:4px}
.plan__price{
  margin:16px 0 16px;
  font-family:var(--font-head);font-weight:800;font-size:29px;
  color:var(--ink);letter-spacing:-.035em;line-height:1;
}
.plan__price small{font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:0;margin-left:2px}
.plan__list{display:grid;gap:8px;margin-bottom:24px}
.plan__list li{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.5;color:var(--body-soft)}
.plan__list svg{width:14px;height:14px;flex:none;margin-top:2px}
.plan .btn{margin-top:auto}
.plan:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}

.plan--business .plan__name{color:var(--blue)}
.plan--business .plan__list svg{color:var(--blue)}
.plan--starter  .plan__name{color:var(--green)}
.plan--starter  .plan__list svg{color:var(--green)}
.plan--pro      .plan__name{color:var(--purple)}
.plan--pro      .plan__list svg{color:var(--purple)}
.plan--enterprise .plan__name{color:var(--brand)}
.plan--enterprise .plan__list svg{color:var(--brand)}

/* the recommended plan carries its accent all the way through */
.plan--pro{
  border-color:var(--purple);
  box-shadow:0 1px 2px rgba(48,16,110,.08), 0 14px 34px rgba(99,48,214,.16);
}
.plan--pro:hover{box-shadow:0 2px 6px rgba(48,16,110,.1), 0 20px 44px rgba(99,48,214,.22)}

.plan__badge{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  padding:5px 14px;border-radius:var(--r-pill);
  background:var(--purple-badge);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;
  box-shadow:0 2px 4px rgba(48,16,110,.16), 0 6px 16px rgba(99,48,214,.3);
}

/* 6.6 faq */

/* Content moved from the live www.iotsim.gr #faqs accordion (2026-07-31).
   CSS-only <details> — the site ships no JS and the accordion needs none.
   Two independent columns like the live layout, NOT one 2-col grid of 8
   items: grid rows share track heights, so one grid would shove the OTHER
   column's items down every time an answer opens. */
.faqs{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:start}
.faqs__col{display:grid;gap:16px}

.faq summary{
  display:flex;align-items:center;gap:12px;
  padding:14px 20px 14px 14px;cursor:pointer;
  list-style:none; /* + ::-webkit-details-marker below: no default triangle */
  font-family:var(--font-head);font-weight:700;font-size:15px;
  color:var(--ink);letter-spacing:-.01em;line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
/* mockup v2 (2026-07-31): a brand chip with a ?-bubble leads each question;
   the caret needed its own class once the summary held two svgs */
.faq__chip{
  display:grid;place-items:center;flex:none;
  width:28px;height:28px;border-radius:var(--r-sm);
  background:var(--brand-soft);color:var(--brand);
}
.faq__chip svg{width:16px;height:16px}
.faq__caret{width:16px;height:16px;flex:none;margin-left:auto;color:var(--muted);transition:transform var(--dur) var(--ease)}
.faq[open] .faq__caret{transform:rotate(180deg)}
.faq:hover{border-color:var(--border-3)}
.faq__a{padding:0 20px 16px;font-size:13.5px;line-height:1.6;color:var(--body-soft)}
.faq__a a{color:var(--brand);font-weight:600}

/* Own bottom number, like .section--apps: the footer slab's edge IS its ink,
   and the 24px the trust strip used to keep to it now belongs to this section
   (16px tight padding alone would read 16 to the dark edge vs 32 everywhere
   else). Top stays 16: trust bottom 16 + 16 = the standard 32. */
.section--faq{padding-block:16px 24px}

/* ------------------------------------------------------- 7. order page */

.page-head{padding:40px 0 24px}
.page-head h1{font-size:33px}
.page-head p{margin-top:8px;font-size:14.5px}

/* 7.1 stepper */

.stepper{display:flex;align-items:center;gap:16px;margin-bottom:32px}
.step{display:flex;align-items:center;gap:12px;flex:none}
.step__num{
  display:grid;place-items:center;
  width:28px;height:28px;border-radius:50%;
  background:var(--border);color:var(--muted);
  font-size:12.5px;font-weight:700;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.step__label{font-size:13px;font-weight:600;color:var(--muted);transition:color var(--dur) var(--ease)}
.step.is-active .step__num{
  background:var(--brand);color:#fff;
  box-shadow:0 0 0 0 rgba(253,92,16,.34);
  animation:step-halo 2.8s var(--ease) infinite;
}
.step.is-active .step__label{color:var(--ink)}
.step__line{flex:1 1 auto;height:1px;background:var(--border-2)}

@keyframes step-halo{
  0%     {box-shadow:0 0 0 0 rgba(253,92,16,.3)}
  55%,100%{box-shadow:0 0 0 7px rgba(253,92,16,0)}
}

/* 7.2 order layout */

.order{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;align-items:start}
.order__main{display:grid;gap:16px}
.order__side{display:grid;gap:16px;position:sticky;top:calc(var(--header-h) + 16px)}

.form-card{padding:24px}
.form-card h2{font-size:16px;margin-bottom:16px}

/* 7.3 product chooser */

.products{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}

.product{
  position:relative;
  display:block;padding:16px;
  border:1.5px solid var(--border);border-radius:var(--r-md);
  cursor:pointer;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.product:hover{border-color:var(--border-3);box-shadow:var(--shadow-sm)}
.product input{position:absolute;opacity:0;pointer-events:none}
.product strong{display:block;font-size:13.5px;font-weight:700;color:var(--ink);padding-left:24px}
/* note: must not be a bare `.product span` — that also matches .product__tick,
   and at higher specificity, which blows the tick out of its 17px circle. */
.product__desc{display:block;font-size:12px;color:var(--muted);padding-left:24px;margin-top:2px}
.product__tick{
  position:absolute;left:16px;top:16px;
  width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--border-2);
  display:grid;place-items:center;color:transparent;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease);
}
.product__tick svg{width:10px;height:10px;--icon-stroke:2.4}
.product input:checked ~ .product__tick{background:var(--brand);border-color:var(--brand);color:#fff}
.product:has(input:checked){border-color:var(--brand);background:#fffaf7}
.product input:focus-visible ~ .product__tick{outline:2px solid var(--brand);outline-offset:2px}

/* 7.4 form fields */

.field{display:block;margin-bottom:16px}
.field__label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:8px}
.field__label .req{color:var(--brand);margin-left:2px}

.input,.select,.textarea{
  width:100%;
  padding:12px;
  border:1px solid var(--border-2);border-radius:var(--r-sm);
  background:var(--surface);
  font-size:13.5px;color:var(--ink);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease);
}
.input::placeholder,.textarea::placeholder{color:#a8b0c0}
.input:hover,.select:hover,.textarea:hover{border-color:var(--border-3)}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(253,92,16,.14);
}
.textarea{resize:vertical;min-height:72px}

.select{
  appearance:none;
  padding-right:36px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6478' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:15px;
}

.field-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.field-row--2{grid-template-columns:repeat(2,1fr)}
.field--span2{grid-column:span 2}

.form-actions{display:flex;justify-content:space-between;gap:12px;margin-top:8px}

/* 9.54 functional order billing and consent fields (2026-08-13). */
.order-billing{margin-top:18px;padding-top:18px;border-top:1px solid var(--border)}
.invoice-fields[hidden]{display:none}
.order-payment-note{margin:2px 0 14px;padding:11px 13px;border-radius:9px;background:var(--brand-soft);font-size:12px;line-height:1.5;color:var(--ink-2)}
.order-terms{display:flex;align-items:flex-start;gap:9px;font-size:12px;line-height:1.5;color:var(--body-soft);cursor:pointer}
.order-terms input{flex:none;width:16px;height:16px;margin-top:1px;accent-color:var(--brand)}
.order-terms a{color:var(--brand);font-weight:650}
.order-result{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--surface-2)}
.order-result__card{width:min(100%,560px);padding:40px;text-align:center}
.order-result__mark{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 18px;border-radius:50%;font-size:25px;font-weight:800}
.order-result__mark.is-success{background:#e9f8ef;color:var(--green)}
.order-result__mark.is-error{background:#fff1ed;color:#b83913}
.order-result__card h1{font-size:26px;margin-bottom:10px}
.order-result__card p{font-size:14px;line-height:1.65;color:var(--body-soft)}
.order-result__detail{margin-top:12px;padding:10px;border-radius:8px;background:var(--surface-2)}
.order-result__actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:24px}

/* 9.55 three-stage order wizard (2026-08-13). */
.order.order--single{grid-template-columns:1fr}
.order-stage[hidden],.order__side[hidden]{display:none}
.order-stage{animation:order-stage-in .22s var(--ease) both}
.form-actions--next{justify-content:flex-end}
.order-review__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.order-review__grid div{display:grid;gap:4px;padding:13px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}
.order-review__grid span{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.order-review__grid strong{font-size:13px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.step.is-complete .step__num{background:#e9f8ef;color:var(--green);animation:none}
.step.is-complete .step__label{color:var(--ink-2)}
.step__line.is-complete{background:var(--brand)}
@keyframes order-stage-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media (max-width:640px){.order-review__grid{grid-template-columns:1fr}}

/* 7.5 order summary */

.summary h3{font-size:15px;margin-bottom:16px}
.summary__row{
  display:flex;justify-content:space-between;gap:16px;
  padding:8px 0;font-size:12.5px;
}
.summary__row dt{color:var(--muted)}
.summary__row dd{margin:0;font-weight:600;color:var(--ink);text-align:right}
.summary__total{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:12px;padding-top:16px;
  border-top:1px solid var(--border);
}
.summary__total dt{font-size:13.5px;font-weight:700;color:var(--ink)}
.summary__total dd{
  margin:0;font-family:var(--font-head);font-weight:800;font-size:22px;
  color:var(--brand);letter-spacing:-.025em;
}
.summary__perks{display:grid;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.summary__perks li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--body-soft)}
.summary__perks svg{width:16px;height:16px;flex:none;color:var(--brand)}

/* 7.6 help card */

.help{position:relative;padding:24px 20px;background:var(--surface-2);overflow:hidden}
.help h3{font-size:15px;margin-bottom:8px}
.help > p{font-size:12.5px;line-height:1.55;max-width:165px;margin-bottom:16px;color:var(--body-soft)}
.help__art{position:absolute;right:12px;bottom:56px;width:74px;height:74px;opacity:.95}
.help .contact-list{display:grid;gap:12px;position:relative;z-index:1}
.help .contact-list li{color:var(--ink-2)}
.help .contact-list a:hover{color:var(--brand)}

/* ---------------------------------------------------------- 8. responsive */

/* The hero art is a fixed 737x517 crop pinned to the right edge. The copy column
   ends 595px into the container, so the art's opaque region reaches the headline
   as soon as the viewport drops below ~1200px (at 1366px the 9px of overlap all
   falls inside the 90px feather; at 1180px it is 62px of solid artwork). Below
   the cutoff the art comes out of flow and stacks under the copy — and the mask
   goes with it, since all four edges of the crop sample ~#f8fafd against the
   #f9fbfd band and need no feathering once nothing bleeds off-screen. */
/* The lifted strip sits *beside* the crop, not under it, so it only works while
   there is clear band to its right. The binding edge is the laptop deck's dark
   line, (viewport - 689)px in at strip height; the strip is 570px wide from the
   container's left edge. Text ink meets that line at ~1308px, so below 1320 the
   lift is given up and the strip drops back under the artwork — one notch is
   cheaper than letting `network selection` run into the deck edge. Recompute
   this cutoff whenever a strip metric moves: at 14px labels the strip is 576px
   and meets at ~1320 (zero margin — the cutoff must move to ~1345); at 30px
   glyphs it was 525px and met at ~1255px. */
@media (max-width:1319px){
  .stats-band{margin-top:-12px}
}

@media (max-width:1200px){
  .hero{min-height:0}
  .hero__grid{padding-top:56px}
  /* stacked, the art is above the row rather than beside it, so the tuck-under
     lift has nothing to tuck under — give the glyphs their gap back */
  .stats-band{margin-top:0}
  .stats{padding-top:14px}
  .hero__art{
    position:static;display:block;
    width:calc(100% - 70px);        /* .container padding-inline, doubled */
    max-width:680px;height:auto;
    margin:28px auto 0;
    -webkit-mask-image:none;
            mask-image:none;
  }
}

@media (max-width:1180px){
  .apps{grid-template-columns:repeat(4,1fr)}
  .benefits{grid-template-columns:repeat(3,1fr)}
  .band{grid-template-columns:1fr 1.3fr}
  .band__art{display:none}
  .site-footer__grid{grid-template-columns:1.6fr repeat(3,1fr);row-gap:32px}
  .order{grid-template-columns:minmax(0,1fr) 290px}
}

@media (max-width:1024px){
  .site-nav{display:none}
  .hero__lead{max-width:520px}
  .plans{grid-template-columns:repeat(2,1fr);gap:24px}
  /* framed strip at 2×2: dividers move to the grid seams — left border on the
     right column, top border on the second row */
  .trust{grid-template-columns:repeat(2,1fr);padding:0}
  .trust__item{padding:16px}
  .trust__item+.trust__item{border-left:0}
  .trust__item:nth-child(even){border-left:1px solid var(--border)}
  .trust__item:nth-child(n+3){border-top:1px solid var(--border)}
  .about{grid-template-columns:1fr}
  .band{grid-template-columns:1fr;gap:24px;padding:28px}
  .order{grid-template-columns:1fr}
  /* cards must not stretch to the tallest sibling, or the help art strands */
  .order__side{position:static;grid-template-columns:repeat(2,1fr);align-items:start}
}

@media (max-width:820px){
  .section{padding-block:40px}
  .stats{grid-template-columns:repeat(2,1fr);gap:16px}
  .benefits{grid-template-columns:repeat(2,1fr)}
  .about .benefits{grid-template-columns:repeat(2,1fr)}
  /* the two accordion columns merge into one; ~370px items wrap questions to
     three lines, so this gives way before .plans does (640) */
  .faqs{grid-template-columns:1fr}
  .products{grid-template-columns:1fr}
  .field-row{grid-template-columns:repeat(2,1fr)}
  .field--span2{grid-column:auto}
  /* a 3-up row on a 2-up grid leaves one field orphaned — let it fill the row */
  .field-row > .field:nth-child(3):last-child{grid-column:1 / -1}
}

@media (max-width:640px){
  .container{padding-inline:20px}
  /* the header row cannot fit brand + 3 controls at 390px; the language switch
     is also in the footer, so it is the one that gives way — never the CTA */
  .site-header__inner{gap:12px}
  .header-tools{gap:6px}
  .header-tools .pill:first-child{display:none}
  .btn--sm{padding:8px 14px}
  .hero__grid{padding-top:36px}
  .hero h1{font-size:34px}
  .hero__art{width:100%;max-width:none;margin-top:20px}
  .apps{grid-template-columns:repeat(2,1fr)}
  .benefits{grid-template-columns:1fr}
  .about .benefits{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr}
  .trust__item:nth-child(even){border-left:0}
  .trust__item:nth-child(n+2){border-top:1px solid var(--border)}
  .section-head{flex-direction:column;align-items:flex-start;gap:8px}
  .site-footer__grid{grid-template-columns:repeat(2,1fr)}
  .site-footer__legal{flex-direction:column;align-items:flex-start;gap:8px}
  .site-footer__legal .spacer{display:none}
  .order__side{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .page-head h1{font-size:27px}
  .stepper{gap:8px}
  .step__label{display:none}
  .form-actions{flex-direction:column-reverse}
  .form-actions .btn{width:100%}
}

/* ==========================================================================
   9. mockup v3 (2026-08-07) — /root/mockup-new.png redesign layer.
   Appended AFTER the base rules and their media queries on purpose: equal-
   specificity later rules win, so this layer restyles shared components
   (.trust, .app-card, .benefit) without touching the rules lab.html still
   renders. All illustrations here are CSS/SVG — the hero dashboard replaces
   hero-art.png entirely.
   ========================================================================== */

/* 9.0 eyebrow kickers */

.eyebrow{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);
}
.eyebrow--brand{color:var(--brand)}
.eyebrow svg{width:15px;height:15px;flex:none;color:var(--brand)}

/* stacked section head: eyebrow above the h2, no underline, no aside */
.section-head--stack{display:block}
.section-head--stack .eyebrow{margin-bottom:8px}

/* the hero eyebrow is a pill (mockup v3) — the section eyebrows stay bare */
.eyebrow--pill{
  width:fit-content;padding:7px 14px;border-radius:var(--r-pill);
  background:var(--brand-soft);color:var(--brand);
}

/* 9.1 hero — copy + stats left, CSS dashboard illustration right */

/* the band wears the RENDER's background (#f7f8fa ±2 across its vignette), so
   the art's top/right/bottom edges dissolve without any feathering — only the
   left edge (toward the copy) keeps the mask. Don't "fix" this back to the old
   bluish #f7f9fc: that repaints a visible rectangle around hero-art2.png. */
.hero{background:#f7f8fa;min-height:0}
/* between the mockup's 1/3–2/3 split and the first build: copy 530px, art the
   rest plus a modest overhang (full-bleed-to-viewport read as too much) */
.hero__grid{
  display:grid;grid-template-columns:minmax(0,530px) minmax(0,1fr);
  gap:40px;align-items:center;
  padding-block:46px 54px;
}
.hero__copy{position:relative;z-index:2}
.hero .eyebrow{margin-bottom:18px}
.hero h1{font-size:47px;letter-spacing:-.04em;line-height:1.08;max-width:500px}
.hero__lead{font-size:16px;line-height:1.7;max-width:500px;margin-top:18px}
.hero__actions{margin-top:26px;gap:16px}
.hero .btn{padding:13px 28px;font-size:14.5px}

.hero__stats{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:38px}
.hero__stats .stat{gap:9px}
.hero__stats .stat__icon svg{width:33px;height:33px;--icon-stroke:1.5}
.hero__stats .stat__value{font-size:14.5px}
.hero__stats .stat__label{font-size:12.5px}

/* the dashboard illustration — pure HTML/CSS/SVG, no image file */

.hero__vis{position:relative;padding:0}
/* the art runs to the viewport's right edge like the render — the margin eats
   the container padding plus the centred container's outer gap. The stats row
   is wider than the copy column in the mockup too: it runs under the art's
   feathered left edge (the copy column's z-index:2 keeps its ink on top). */
@media (min-width:1181px){
  .hero__vis{margin-right:-60px}
  .hero__stats{width:max-content}
}

/* hero-art2.png (2026-08-07): a 1184×819 crop of the user's high-res render —
   globe + dashboard + SIM in one raster. Its background (#f7f7f9) is within a
   couple of steps of the band's #f7f9fc, so only the left edge needs a feather
   where the art meets the copy column. The CSS-built .dash/.simcard/.hero__globe
   rules below it are retired but kept for possible revert. */
.hero__img{
  position:relative;z-index:1;display:block;
  width:100%;max-width:860px;height:auto;margin-left:auto;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 70px);
          mask-image:linear-gradient(to right,transparent 0,#000 70px);
}

/* the dotted globe behind the window: a faint full sphere (element) with
   denser continent-ish clusters (::before) and sparse orange nodes (::after);
   the orange great-circle arcs are the .hero__arcs inline SVG on top of it */
.hero__globe,.hero__arcs{
  position:absolute;left:-92px;top:-80px;width:600px;height:600px;z-index:0;
  pointer-events:none;
}
.hero__globe{
  background-image:radial-gradient(#ccd4e2 1.1px,transparent 1.2px);
  background-size:9px 9px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 40%,transparent 66%);
          mask-image:radial-gradient(circle at 50% 50%,#000 40%,transparent 66%);
  opacity:.55;
}
.hero__globe::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(#a9b4c9 1.3px,transparent 1.4px);
  background-size:7px 7px;
  -webkit-mask-image:
    radial-gradient(ellipse 15% 13% at 30% 24%,#000 60%,transparent),
    radial-gradient(ellipse 9% 15% at 29% 60%,#000 60%,transparent),
    radial-gradient(ellipse 8% 8% at 52% 20%,#000 60%,transparent),
    radial-gradient(ellipse 10% 16% at 53% 47%,#000 60%,transparent),
    radial-gradient(ellipse 17% 14% at 72% 28%,#000 60%,transparent),
    radial-gradient(ellipse 8% 8% at 75% 64%,#000 60%,transparent);
          mask-image:
    radial-gradient(ellipse 15% 13% at 30% 24%,#000 60%,transparent),
    radial-gradient(ellipse 9% 15% at 29% 60%,#000 60%,transparent),
    radial-gradient(ellipse 8% 8% at 52% 20%,#000 60%,transparent),
    radial-gradient(ellipse 10% 16% at 53% 47%,#000 60%,transparent),
    radial-gradient(ellipse 17% 14% at 72% 28%,#000 60%,transparent),
    radial-gradient(ellipse 8% 8% at 75% 64%,#000 60%,transparent);
  opacity:.9;
}
.hero__globe::after{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(var(--brand) 1.6px,transparent 1.7px);
  background-size:74px 84px;background-position:18px 26px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 44%,transparent 62%);
          mask-image:radial-gradient(circle at 50% 50%,#000 44%,transparent 62%);
  opacity:.55;
}
.hero__arcs path{fill:none;stroke:var(--brand);stroke-width:1.2;opacity:.5}
.hero__arcs circle{fill:var(--brand)}
.hero__arcs .halo{fill:var(--brand);opacity:.18}

.dash{
  position:relative;z-index:1;
  width:100%;max-width:665px;margin-left:auto;
  background:linear-gradient(180deg,#fff 55%,#fbfcfe);
  border:1px solid var(--border);border-radius:18px;
  /* directional: the mockup's light falls from the upper left */
  box-shadow:0 2px 8px rgba(10,19,42,.06), 0 44px 70px -24px rgba(10,19,42,.25);
  padding:16px 20px 20px;
  transform:perspective(1600px) rotateY(-5deg) rotate(-2deg);
}
.dash__top{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-bottom:6px}
.dash__top svg{width:15px;height:15px;color:var(--muted);--icon-stroke:1.8}
/* the avatar is circled, the bell is bare (mockup) */
.dash__avatar{
  display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  border:1px solid var(--border-2);color:var(--muted);
}
.dash__avatar svg{width:13px;height:13px}
.dash__body{display:grid;grid-template-columns:150px 1fr;gap:18px}
.dash__side .brand__mark{width:19px;height:19px}
.dash__side .brand__word{font-size:13.5px}
.dash__nav{display:grid;gap:3px;margin-top:16px}
.dash__nav li{
  display:flex;align-items:center;gap:9px;
  padding:5px 9px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:600;color:var(--body);
}
/* every nav glyph sits in its own outlined circle (mockup) */
.dash__nav li svg{
  width:22px;height:22px;flex:none;padding:4.5px;
  border:1px solid var(--border-2);border-radius:50%;
  --icon-stroke:1.9;
}
.dash__nav li.is-active{background:var(--brand-soft);color:var(--brand)}
.dash__nav li.is-active svg{border-color:var(--brand)}
.dash__main{display:grid;grid-template-columns:1fr 1.18fr;gap:12px}
.dash__card{
  background:var(--surface);
  border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow-sm);
  padding:13px 15px;
}
.dash__label{display:block;font-size:11px;font-weight:600;color:var(--ink-2);margin-bottom:9px}
.dash__big{display:flex;align-items:baseline;gap:6px;white-space:nowrap;font-family:var(--font-head);font-weight:800;font-size:23px;color:var(--ink);letter-spacing:-.03em}
.dash__big em{font-style:normal;font-size:12px;font-weight:700;color:#17a05c}
.dash__sub{display:block;font-size:10px;color:var(--muted);margin-top:8px}
.dash__chart svg{width:100%;height:auto}
/* the coverage card is a real (simplified) world silhouette + orange nodes,
   drawn as an inline SVG in the HTML — not a dot-grid abstraction */
.dash__map svg{width:100%;height:auto}
.dash__countries li{
  display:flex;align-items:center;gap:8px;
  padding:5.5px 0;font-size:11px;font-weight:600;color:var(--ink-2);
}
.dash__countries li+li{border-top:1px solid var(--surface-2)}
.dash__countries b{margin-left:auto;font-weight:700;color:var(--ink)}
.flag{width:17px;height:12px;border-radius:2.5px;flex:none;box-shadow:inset 0 0 0 1px rgba(10,19,42,.08)}
.flag--gr{background:linear-gradient(180deg,#0d5eaf 20%,#fff 20% 40%,#0d5eaf 40% 60%,#fff 60% 80%,#0d5eaf 80%)}
.flag--de{background:linear-gradient(180deg,#1d1d1b 33%,#e1000f 33% 66%,#f7cf46 66%)}
.flag--us{background:linear-gradient(180deg,#c9243c 25%,#fff 25% 40%,#c9243c 40% 55%,#fff 55% 70%,#c9243c 70%),#c9243c;position:relative;overflow:hidden}
.flag--us::after{content:'';position:absolute;left:0;top:0;width:45%;height:55%;background:#25335f}
.flag--nl{background:linear-gradient(180deg,#ae1c28 33%,#fff 33% 66%,#21468b 66%)}
.flag--it{background:linear-gradient(90deg,#219653 33%,#fff 33% 66%,#d64545 66%)}

/* the SIM card overlapping the dashboard's lower-left corner */
.simcard{
  position:absolute;z-index:2;left:-4px;bottom:-32px;
  width:152px;height:192px;padding:16px;
  background:linear-gradient(155deg,#fff 35%,#eceff6);
  border:1px solid var(--border);border-radius:18px;
  /* the extra solid layer is the card's visible thickness (it stands on its
     edge in the mockup); the big soft one is the ambient drop */
  box-shadow:0 6px 0 -2px #d9deea, var(--shadow-lg), 0 30px 40px -18px rgba(10,19,42,.3);
  transform:rotate(-7deg);
}
/* diagonal light sweep across the card face */
.simcard::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.55) 52%,transparent 62%);
}
/* elliptical ground shadow under the standing card */
.simcard::after{
  content:'';position:absolute;z-index:-1;
  left:-12%;right:-18%;bottom:-30px;height:30px;
  background:radial-gradient(ellipse 50% 46% at 50% 42%,rgba(10,19,42,.32),transparent 72%);
}
.simcard .brand__mark{width:16px;height:16px}
.simcard .brand__word{font-size:11.5px}
/* on the SIM the ".GR" is grey, not orange (mockup) */
.simcard .brand__word i{color:#b6bdcb}
/* the classic 3-column contact layout: outer frame, two vertical rails,
   horizontal cuts only in the side columns, and a centre pad (::after) */
.simcard__chip{
  position:relative;
  width:76px;height:62px;margin:32px auto 0;
  border-radius:11px;
  background-image:
    linear-gradient(#b98f35,#b98f35),linear-gradient(#b98f35,#b98f35),
    linear-gradient(#b98f35,#b98f35),linear-gradient(#b98f35,#b98f35),
    linear-gradient(#b98f35,#b98f35),linear-gradient(#b98f35,#b98f35),
    linear-gradient(135deg,#f0d183,#d9a94a);
  background-repeat:no-repeat;
  background-size:1.5px 100%,1.5px 100%,22px 1.5px,22px 1.5px,22px 1.5px,22px 1.5px,100% 100%;
  background-position:27% 0,73% 0,0 32%,0 68%,100% 32%,100% 68%,0 0;
  border:2px solid #b98f35;
}
.simcard__chip::after{
  content:'';position:absolute;left:50%;top:50%;
  width:26px;height:34px;transform:translate(-50%,-50%);
  border:1.5px solid #b98f35;border-radius:7px;
}

/* 9.2 about v3 — intro column + the 3×2 benefit grid */

.about{grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);gap:56px;align-items:center}
.about__copy h2{font-size:31px;letter-spacing:-.035em;line-height:1.12;margin:12px 0 16px}
.about__copy .section-link{margin-top:18px;font-size:13.5px}

.benefit{min-height:0;padding:18px 20px}
.benefit__icon{width:34px;height:34px;background:none;border-radius:0;color:var(--brand)}
.benefit__icon svg{width:30px;height:30px;--icon-stroke:1.5}
.benefit__head{gap:12px;margin-bottom:8px}
.benefit p{padding-left:46px;font-size:12.5px}

/* 9.3 apps v3 — frameless grey tiles, no icon chip */

.app-card{background:#f4f6fa;border:0;box-shadow:none;gap:12px;min-height:108px}
.app-card svg{background:none;border-radius:0;padding:0;width:34px;height:34px;--icon-stroke:1.5}
.app-card__title{font-size:13px}
.app-card:hover{background:#edf0f7;border:0;box-shadow:none;transform:translateY(-2px)}

/* 9.4 dark connectivity band — full-bleed navy, CSS dotted map + arcs.
   The band's edges are its ink: 16px margins meet the neighbours' 16px
   tight paddings for the standard 32px rhythm. */

.band-dark{
  position:relative;overflow:hidden;
  margin-block:16px;padding-block:52px;
  background:linear-gradient(115deg,#070e21 0%,#0b1530 55%,#0d1c3f 100%);
  color:#aab6cd;
}
/* dotted continents: one dot grid, masked into landmass-ish clusters over the
   band's right two thirds */
.band-dark::before{
  content:'';position:absolute;inset:0;left:34%;
  background-image:radial-gradient(rgba(150,175,215,.75) 1px,transparent 1.15px);
  background-size:7px 7px;
  -webkit-mask-image:
    radial-gradient(ellipse 13% 26% at 10% 30%,#000 55%,transparent),
    radial-gradient(ellipse 8% 30% at 20% 74%,#000 55%,transparent),
    radial-gradient(ellipse 9% 20% at 38% 24%,#000 55%,transparent),
    radial-gradient(ellipse 10% 34% at 42% 62%,#000 55%,transparent),
    radial-gradient(ellipse 20% 34% at 66% 34%,#000 55%,transparent),
    radial-gradient(ellipse 12% 20% at 72% 68%,#000 50%,transparent),
    radial-gradient(ellipse 8% 13% at 88% 78%,#000 55%,transparent);
          mask-image:
    radial-gradient(ellipse 13% 26% at 10% 30%,#000 55%,transparent),
    radial-gradient(ellipse 8% 30% at 20% 74%,#000 55%,transparent),
    radial-gradient(ellipse 9% 20% at 38% 24%,#000 55%,transparent),
    radial-gradient(ellipse 10% 34% at 42% 62%,#000 55%,transparent),
    radial-gradient(ellipse 20% 34% at 66% 34%,#000 55%,transparent),
    radial-gradient(ellipse 12% 20% at 72% 68%,#000 50%,transparent),
    radial-gradient(ellipse 8% 13% at 88% 78%,#000 55%,transparent);
}
/* orange node glows on top of the map */
.band-dark::after{
  content:'';position:absolute;inset:0;left:34%;pointer-events:none;
  background-image:
    radial-gradient(circle 3px at 14% 32%,#ffb387 60%,transparent 61%),
    radial-gradient(circle 26px at 14% 32%,rgba(253,92,16,.4),transparent 70%),
    radial-gradient(circle 3px at 41% 27%,#ffb387 60%,transparent 61%),
    radial-gradient(circle 22px at 41% 27%,rgba(253,92,16,.38),transparent 70%),
    radial-gradient(circle 4px at 63% 38%,#ffd0b0 60%,transparent 61%),
    radial-gradient(circle 34px at 63% 38%,rgba(253,92,16,.5),transparent 70%),
    radial-gradient(circle 3px at 22% 72%,#ffb387 60%,transparent 61%),
    radial-gradient(circle 24px at 22% 72%,rgba(253,92,16,.4),transparent 70%),
    radial-gradient(circle 3px at 87% 76%,#ffb387 60%,transparent 61%),
    radial-gradient(circle 22px at 87% 76%,rgba(253,92,16,.38),transparent 70%);
}
.band-dark__arcs{position:absolute;inset:0;left:34%;width:66%;height:100%;pointer-events:none}
.band-dark__arcs path{fill:none;stroke:var(--brand);stroke-width:1;opacity:.45}
.band-dark .container{position:relative;z-index:1}
.band-dark__copy{max-width:420px}
.band-dark h2{color:#fff;font-size:31px;letter-spacing:-.035em;line-height:1.12;margin:12px 0 14px}
.band-dark__copy p{font-size:13.5px;line-height:1.7;color:#aab6cd}
.band-dark__stats{display:flex;flex-wrap:wrap;gap:16px 44px;margin-top:40px}
.band-dark__stats .stat{gap:10px}
.band-dark__stats .stat__icon svg{width:26px;height:26px;--icon-stroke:1.6}
.band-dark__stats .stat__value{color:#fff;font-size:13.5px}
.band-dark__stats .stat__label{color:#8896b0;font-size:12px}

/* 9.5 how it works — 5 steps on a dashed rail */

.steps{
  display:grid;grid-template-columns:repeat(5,1fr);gap:24px;
  position:relative;padding-top:12px;
}
/* the rail: a dashed line at circle-centre height, hidden behind the circles */
.steps::before{
  content:'';position:absolute;z-index:0;
  top:50px;left:10%;right:10%;height:0;
  border-top:2px dashed #f3b28c;
}
.step-item{position:relative;z-index:1;text-align:center}
.step-item__icon{
  display:grid;place-items:center;
  width:76px;height:76px;margin:0 auto;border-radius:50%;
  background:var(--surface);color:var(--ink-2);
  box-shadow:var(--shadow-md);
}
.step-item__icon svg{width:28px;height:28px;--icon-stroke:1.5}
.step-item__num{display:block;margin-top:18px;font-size:12px;font-weight:800;color:var(--brand);letter-spacing:.06em}
.step-item h3{font-size:14px;margin-top:6px;letter-spacing:-.01em}
.step-item p{font-size:12.5px;line-height:1.55;color:var(--body-soft);margin-top:6px;padding-inline:6px}

/* 9.6 plans v3 — caps section head + full-width Επιλογή buttons */

.section-head--caps h2{
  font-family:var(--font-body);
  font-size:13px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-2);
}

/* 9.7 trust v3 — one frameless grey band, no dividers */

.trust{background:#f4f6fa;border:0;box-shadow:none;border-radius:var(--r-lg);padding:20px 8px}
.trust__item,
.trust__item+.trust__item,
.trust__item:nth-child(even),
.trust__item:nth-child(n+3),
.trust__item:nth-child(n+2){border:0}
.trust__item svg{width:28px;height:28px}

/* 9.8 faq v3 — intro column + two compact accordion columns */

.faq-wrap{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:56px;align-items:start}
.faq-intro h2{font-size:31px;letter-spacing:-.035em;line-height:1.15;margin:12px 0 22px}
.faqs{gap:12px}
.faqs__col{gap:12px}
.faq summary{padding:13px 16px;font-size:13.5px;font-weight:700;font-family:var(--font-body)}
.faq__plus{width:15px;height:15px;flex:none;margin-left:auto;color:var(--ink-2);transition:transform var(--dur) var(--ease);--icon-stroke:2.2}
.faq[open] .faq__plus{transform:rotate(45deg)}
.faq__a{padding:0 16px 14px;font-size:13px}

/* 9.9 pre-footer CTA band */

.section--cta{padding-block:16px 24px}
.cta{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;
  padding:36px 220px 36px 40px;
  background:linear-gradient(115deg,#e9ebf8,#e2e6f6 60%,#e9e9f8);
  border-radius:var(--r-lg);
}
.cta h2{font-size:25px;letter-spacing:-.03em;line-height:1.15}
.cta p{font-size:12.5px;line-height:1.6;color:var(--body);margin-top:10px;max-width:430px}
.cta__actions{display:flex;flex-wrap:wrap;gap:12px}
.cta .simcard{left:auto;right:38px;bottom:-26px;transform:rotate(9deg);width:118px;height:148px}
.cta .simcard__chip{width:58px;height:48px;margin-top:28px}

/* 9.10 depth pass (user request 2026-08-07): the text frames carry a fuller
   two-layer shadow than the default .card so the sections read less flat.
   Later-in-file at equal specificity, so these win over .card/.app-card/.trust
   definitions above. */

.benefit,.faq,.plan{
  box-shadow:0 1px 3px rgba(10,19,42,.05), 0 14px 30px rgba(10,19,42,.09);
}
.plan--pro{
  box-shadow:0 1px 3px rgba(48,16,110,.08), 0 16px 36px rgba(99,48,214,.18);
}
.app-card{
  box-shadow:0 1px 3px rgba(10,19,42,.05), 0 10px 24px rgba(10,19,42,.08);
}
.app-card:hover{
  box-shadow:0 2px 5px rgba(10,19,42,.06), 0 14px 30px rgba(10,19,42,.11);
}
.trust{
  box-shadow:0 1px 3px rgba(10,19,42,.04), 0 14px 30px rgba(10,19,42,.08);
}
.cta{
  box-shadow:0 2px 6px rgba(10,19,42,.05), 0 18px 40px rgba(10,19,42,.10);
}
.benefit:hover,.faq:hover{
  box-shadow:0 2px 5px rgba(10,19,42,.06), 0 18px 38px rgba(10,19,42,.12);
}
.plan:hover{
  box-shadow:0 2px 5px rgba(10,19,42,.06), 0 20px 42px rgba(10,19,42,.13);
}
.plan--pro:hover{
  box-shadow:0 2px 6px rgba(48,16,110,.1), 0 22px 46px rgba(99,48,214,.24);
}

/* 9.11 contact page (2026-08-07): form column + info sidebar, order-page bones */

.contact{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start;margin-bottom:16px}
.contact__side{display:grid;gap:16px}
.form-actions--single{justify-content:flex-end}
.form-note{font-size:12px;color:var(--muted);margin-top:10px}
.contact .contact-list{display:grid;gap:12px}
.contact .contact-list li{color:var(--ink-2)}
.contact .contact-list a:hover{color:var(--brand)}
.contact .social{margin-top:16px}
.contact .social a{background:var(--brand-soft);color:var(--brand)}
.contact .social a:hover{background:var(--brand);color:#fff}

/* 9.12 order page plan chooser (2026-08-07): step 1 offers the four PLANS as
   radio cards (the SIM form factor moved down into a select). Each card takes
   its plan's accent when checked; deep-linked from the homepages' plan buttons
   via /order.html?plan=… (a small inline script on order.html preselects the
   radio and keeps the summary + estimated total live — the one exception to
   the site's no-JS posture). */

.products--plans{grid-template-columns:repeat(4,1fr)}
.product__price{display:block;font-family:var(--font-head);font-weight:800;font-size:17px;letter-spacing:-.02em;color:var(--ink);padding-left:24px;margin-top:6px}
.product__price small{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:0}

.product--base  input:checked ~ .product__tick{background:var(--green);border-color:var(--green)}
.product--base:has(input:checked){border-color:var(--green);background:#f3faf6}
.product--base  input:checked ~ strong{color:var(--green)}
.product--lite  input:checked ~ .product__tick{background:var(--blue);border-color:var(--blue)}
.product--lite:has(input:checked){border-color:var(--blue);background:#f3f6fd}
.product--lite  input:checked ~ strong{color:var(--blue)}
.product--extra input:checked ~ .product__tick{background:var(--purple);border-color:var(--purple)}
.product--extra:has(input:checked){border-color:var(--purple);background:#f6f3fd}
.product--extra input:checked ~ strong{color:var(--purple)}
.product--ultra input:checked ~ .product__tick{background:var(--brand);border-color:var(--brand)}
.product--ultra:has(input:checked){border-color:var(--brand);background:#fffaf7}
.product--ultra input:checked ~ strong{color:var(--brand)}

@media (max-width:1024px){
  .products--plans{grid-template-columns:repeat(2,1fr)}
}

/* 9.13 login page (2026-08-10): split auth scene — form card left, dark
   "platform" panel right in the band-dark visual language (dot-grid map,
   orange node glows, arc SVG, floating status chips, the CSS simcard).
   The password/OTP switch is CSS-only: the two hidden radios sit FIRST
   inside .auth-card so the `~` combinators can reach both the tab labels and
   the panes — keep them there. Purely presentational like the other forms:
   no backend, buttons are type="button". */

/* login is the site's first SHORT page — without this the dark footer ends
   mid-viewport with dead white below it on tall screens. Flexing the wrapper
   and letting <main> absorb the slack is a no-op on the tall pages. */
.site{min-height:100vh;display:flex;flex-direction:column}
.site > main{flex:1 0 auto}
/* …and on the login page the slack centres the auth scene instead of pooling
   between the trust strip and the footer. (`> .container` only matches the
   auth wrapper — the other containers on the page sit inside <section>s.) */
main:has(.auth){display:flex;flex-direction:column}
main:has(.auth) > .container{
  /* width:100% matters: .container's margin-inline:auto is an AUTO cross-axis
     margin, which cancels the flex column's align-items:stretch and would
     shrink-wrap the whole scene to content width */
  flex:1;width:100%;
  display:flex;flex-direction:column;justify-content:center;
}

.auth{
  display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);
  gap:24px;align-items:stretch;
  margin-bottom:16px;
}
.auth-col{min-width:0}
.auth-card{padding:28px}

.auth-method{position:absolute;opacity:0;pointer-events:none}

.auth-tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  padding:4px;margin-bottom:20px;
  background:var(--surface-2);border-radius:10px;
}
.auth-tabs label{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 10px;border-radius:7px;
  font-size:13px;font-weight:600;color:var(--muted);
  cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.auth-tabs label svg{width:15px;height:15px;flex:none}
.auth-tabs label:hover{color:var(--ink)}
#m-pass:checked ~ .auth-tabs label[for="m-pass"],
#m-otp:checked  ~ .auth-tabs label[for="m-otp"]{
  background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);
}
#m-pass:focus-visible ~ .auth-tabs label[for="m-pass"],
#m-otp:focus-visible  ~ .auth-tabs label[for="m-otp"]{
  outline:2px solid var(--brand);outline-offset:2px;
}

.auth-pane{display:none}
#m-pass:checked ~ .auth-pane--pass,
#m-otp:checked  ~ .auth-pane--otp{display:block}

.auth-hint{font-size:12.5px;line-height:1.55;color:var(--body-soft);margin-bottom:16px}

.auth-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin:-4px 0 16px;font-size:12.5px;
}
.auth-check{display:flex;align-items:center;gap:8px;color:var(--ink-2);cursor:pointer}
.auth-check input{width:15px;height:15px;accent-color:var(--brand);cursor:pointer}
.auth-link{font-weight:600;color:var(--brand)}
.auth-link:hover{color:var(--brand-dark)}

.otp-send{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end;margin-bottom:16px}
.otp-send .field{margin-bottom:0}
.otp-send .btn{padding-block:12px}
.otp-code{
  text-align:center;
  font-family:var(--font-head);font-weight:700;font-size:20px;
  letter-spacing:.4em;text-indent:.4em;
}
.otp-code::placeholder{font-family:var(--font-body);font-weight:400;font-size:13.5px;letter-spacing:0;text-indent:0}

.auth-alt{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--border);
  font-size:12.5px;color:var(--muted);text-align:center;
}
.auth-alt a{font-weight:600;color:var(--brand)}
.auth-alt a:hover{color:var(--brand-dark)}

.auth-note{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:14px;font-size:12px;color:var(--muted);
}
.auth-note svg{width:14px;height:14px;flex:none;color:var(--green)}

/* the dark platform panel. Copy sits top-left, so the map blobs and glows are
   weighted toward the right/bottom two-thirds. */
.auth-vis{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);
  padding:36px 40px;
  background:linear-gradient(115deg,#070e21 0%,#0b1530 55%,#0d1c3f 100%);
  min-height:440px;
}
.auth-vis::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(150,175,215,.75) 1px,transparent 1.15px);
  background-size:7px 7px;
  -webkit-mask-image:
    radial-gradient(ellipse 16% 18% at 12% 62%,#000 55%,transparent),
    radial-gradient(ellipse 11% 22% at 26% 86%,#000 55%,transparent),
    radial-gradient(ellipse 14% 16% at 48% 52%,#000 55%,transparent),
    radial-gradient(ellipse 12% 26% at 56% 84%,#000 55%,transparent),
    radial-gradient(ellipse 22% 26% at 80% 40%,#000 55%,transparent),
    radial-gradient(ellipse 13% 18% at 86% 78%,#000 50%,transparent),
    radial-gradient(ellipse 9% 12% at 62% 22%,#000 55%,transparent);
          mask-image:
    radial-gradient(ellipse 16% 18% at 12% 62%,#000 55%,transparent),
    radial-gradient(ellipse 11% 22% at 26% 86%,#000 55%,transparent),
    radial-gradient(ellipse 14% 16% at 48% 52%,#000 55%,transparent),
    radial-gradient(ellipse 12% 26% at 56% 84%,#000 55%,transparent),
    radial-gradient(ellipse 22% 26% at 80% 40%,#000 55%,transparent),
    radial-gradient(ellipse 13% 18% at 86% 78%,#000 50%,transparent),
    radial-gradient(ellipse 9% 12% at 62% 22%,#000 55%,transparent);
}
.auth-vis::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(circle 3px at 14% 60%,#ffb387 60%,transparent 61%),
    radial-gradient(circle 26px at 14% 60%,rgba(253,92,16,.4),transparent 70%),
    radial-gradient(circle 3px at 49% 50%,#ffb387 60%,transparent 61%),
    radial-gradient(circle 22px at 49% 50%,rgba(253,92,16,.38),transparent 70%),
    radial-gradient(circle 4px at 80% 36%,#ffd0b0 60%,transparent 61%),
    radial-gradient(circle 34px at 80% 36%,rgba(253,92,16,.5),transparent 70%),
    radial-gradient(circle 3px at 62% 21%,#ffb387 60%,transparent 61%),
    radial-gradient(circle 24px at 62% 21%,rgba(253,92,16,.4),transparent 70%),
    radial-gradient(circle 3px at 30% 87%,#ffb387 60%,transparent 61%),
    radial-gradient(circle 22px at 30% 87%,rgba(253,92,16,.38),transparent 70%);
}
.auth-vis__arcs{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.auth-vis__arcs path{fill:none;stroke:var(--brand);stroke-width:1;opacity:.45}
.auth-vis__arcs circle{fill:#ffb387}

.auth-vis__kicker{
  position:relative;z-index:1;
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#ff8c4d;
}
.auth-vis h2{
  position:relative;z-index:1;
  color:#fff;font-size:27px;letter-spacing:-.035em;line-height:1.15;
  margin:10px 0 10px;
}
.auth-vis__lead{position:relative;z-index:1;font-size:13px;line-height:1.65;color:#aab6cd;max-width:300px}

/* floating status chips over the map */
.auth-chip{
  position:absolute;z-index:2;
  display:flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:999px;
  background:rgba(13,24,50,.72);
  border:1px solid rgba(150,175,215,.28);
  backdrop-filter:blur(4px);
  color:#dfe6f3;font-size:12px;font-weight:600;white-space:nowrap;
  box-shadow:0 12px 26px -12px rgba(4,10,25,.85);
}
.auth-chip strong{color:#fff;font-family:var(--font-head);font-weight:800;letter-spacing:-.02em}
.auth-chip__dot{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--green);
  animation:chip-pulse 2.6s var(--ease) infinite;
}
@keyframes chip-pulse{
  0%      {box-shadow:0 0 0 0 rgba(45,170,99,.5)}
  60%,100%{box-shadow:0 0 0 7px rgba(45,170,99,0)}
}
.auth-chip--online{top:38px;right:40px}
.auth-chip--data{top:52%;left:44%}
.auth-chip--net{bottom:44px;left:40px}

/* the CSS SIM card from the CTA band, standing in the panel's bottom-right */
.auth-vis .simcard{
  left:auto;right:52px;bottom:-26px;
  width:126px;height:158px;
  transform:rotate(9deg);
}
.auth-vis .simcard .simcard__chip{width:64px;height:52px;margin-top:26px}

@media (max-width:1024px){
  .auth{grid-template-columns:1fr}
  .auth-vis{display:none}
  .auth-col{max-width:440px;margin-inline:auto}
}

/* 9.14 header simplification (2026-08-10): the centre nav was removed from all
   production pages (landing-page site — the six links were homepage anchors,
   half of them fake dropdowns). Header is logo left, tools right. The adjacent
   sibling selector scopes the push to nav-less headers only, so lab.html's
   frozen header (which still has .site-nav with its own auto margins) keeps
   rendering exactly as before. */

.brand + .header-tools{margin-left:auto}

/* The footer got the same pruning: the four anchor-link columns collapsed into
   two honest ones (Πλοήγηση + Γρήγορη πρόσβαση / Navigate + Quick links).
   The --slim modifier keeps lab.html's frozen 6-column footer intact, and it
   carries its OWN media steps because the §8 footer media rules sit earlier
   in the cascade than this base rule and would otherwise never win. */
.site-footer__grid--slim{grid-template-columns:1.7fr 1fr 1fr 1.35fr}
@media (max-width:1180px){
  .site-footer__grid--slim{grid-template-columns:1.6fr 1fr 1fr 1.35fr}
}
@media (max-width:640px){
  .site-footer__grid--slim{grid-template-columns:repeat(2,1fr)}
}

/* 9.15 footer polish (2026-08-10): kicker-style column headings and an
   orange hover underline on links. Two experiments were reverted by request
   the same day and must NOT come back: a band-dark backdrop (background
   stays the plain §5 `var(--ink)`) and button-styled quick links (they are
   plain <li> links like the other column). */

.site-footer h4{
  font-size:11px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  color:#8896b0;margin-bottom:18px;
}
.site-footer li{margin-bottom:10px}
.site-footer li a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--brand)}


/* 9.16 back-to-top arrow (2026-08-10): fixed bottom-right circular link on
   every production page. No JS — it's an href="#top" fragment (browsers
   scroll to the document top for it, smooth via the §3 scroll-behavior),
   and the reveal-on-scroll is a CSS scroll-driven animation: fades in over
   the 120-480px scroll range. Browsers without animation-timeline skip the
   @supports block and simply always show the button. Keyframes animate
   opacity/visibility ONLY — a transform there would fill-override the hover
   lift. */

.to-top{
  position:fixed;z-index:50;right:24px;bottom:24px;
  display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--border-2);
  box-shadow:var(--shadow-lg);
  transition:color var(--dur) var(--ease),transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.to-top svg{width:18px;height:18px;transform:rotate(-90deg)}
.to-top:hover{color:var(--brand);transform:translateY(-3px);box-shadow:var(--shadow-hover)}

@supports (animation-timeline: scroll()){
  .to-top{
    animation:to-top-reveal linear both;
    animation-timeline:scroll();
    animation-range:120px 480px;
  }
}
@keyframes to-top-reveal{
  from{opacity:0;visibility:hidden}
  to{opacity:1;visibility:visible}
}

/* 9.17 apps as a FRAMELESS feature list (2026-08-10, third iteration): the
   grey tiles and the boxed 4×2 cards were both rejected ("too many frames").
   Now a 2-column media list — bare orange icon, title, and the REAL per-
   application copy from the old live site (https://www.iotsim.gr/#features;
   the EN page carries a faithful translation — the old site had no EN).
   No borders, no backgrounds, no shadows. Item order follows the old site
   (Σκάφη before GPS). lab.html's old 8-up .apps row keeps rendering §5/§9.3. */

.apps--feat{grid-template-columns:repeat(2,1fr);gap:32px 64px}
.feat{display:flex;gap:16px;align-items:flex-start}
.feat > svg{width:26px;height:26px;flex:none;color:var(--brand);--icon-stroke:1.6;margin-top:1px}
.feat h3{font-size:14px;letter-spacing:-.015em;margin-bottom:6px}
.feat p{font-size:12.5px;line-height:1.65;color:var(--body-soft);max-width:56ch}

@media (max-width:820px){
  .apps--feat{grid-template-columns:1fr;gap:28px}
}

/* 9.R responsive for the v3 layer */

@media (max-width:1180px){
  .hero__grid{grid-template-columns:1fr;gap:0;padding-block:40px 48px}
  .hero__vis{margin:36px auto 0;max-width:680px;width:100%;padding:0}
  .steps{grid-template-columns:repeat(3,1fr);row-gap:32px}
  .steps::before{display:none}
  .about{grid-template-columns:1fr;gap:28px}
}

@media (max-width:1024px){
  .contact{grid-template-columns:1fr}
  .band-dark::before,.band-dark::after,.band-dark__arcs{opacity:.5}
  .faq-wrap{grid-template-columns:1fr;gap:24px}
  .cta{padding:32px 36px}
  .cta .simcard{display:none}
}

@media (max-width:820px){
  .hero h1{font-size:36px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .band-dark__stats{gap:16px 28px}
  .cta{grid-template-columns:1fr;gap:20px}
}

@media (max-width:640px){
  .hero__stats{gap:10px 18px}
  .steps{grid-template-columns:1fr;max-width:320px;margin-inline:auto}
  .about__copy h2,.band-dark h2,.faq-intro h2{font-size:26px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .btn:hover,.app-card:hover,.plan:hover,.social a:hover{transform:none}
}

/* 9.18 interaction + compact-layout polish (2026-08-10)
   A restrained finishing pass: clearer interactive feedback, more tactile
   FAQ rows, and a compact header that keeps its primary CTA fully visible at
   phone widths. Content and the deliberately frameless applications list stay
   untouched. */

.site-header{box-shadow:0 1px 0 rgba(10,19,42,.02)}
.site-nav a{font-weight:600}

.benefit,.plan{will-change:transform}
.benefit:hover{transform:translateY(-3px)}
.plan:hover{transform:translateY(-4px)}

.faq{
  overflow:hidden;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
.faq summary{transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.faq summary:hover{background:var(--brand-soft);color:var(--brand-dark)}
.faq[open]{border-color:#f2c3aa}
.faq[open] summary{color:var(--brand-dark)}

.cta::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 82% 15%,rgba(255,255,255,.72),transparent 30%);
}
.cta > *{position:relative;z-index:1}

@media (max-width:640px){
  .site-header__inner{height:64px;gap:8px}
  .site-header .container{padding-inline:14px}
  .site-header .brand{gap:6px}
  .site-header .brand__mark{width:22px;height:22px}
  .site-header .brand__word{font-size:16px}
  .header-tools{gap:5px;margin-left:auto}
  .header-tools .pill{padding:7px 10px;font-size:13px}
  .header-tools .btn--sm{padding:8px 11px;font-size:12.5px}

  .hero__grid{padding-block:34px 40px}
  .hero .eyebrow{margin-bottom:16px}
  .hero__lead{line-height:1.65}
  .hero__stats{margin-top:32px}

  .trust__item{justify-content:flex-start;padding-inline:20px}
  .cta{padding:28px 24px}
  .cta__actions{width:100%}
  .cta__actions .btn{flex:1 1 150px}
  .to-top{right:16px;bottom:16px;width:42px;height:42px}
}

@media (max-width:360px){
  .header-tools .pill:not(:first-child){display:none}
}

@media (prefers-reduced-motion:reduce){
  .benefit:hover,.plan:hover{transform:none}
}

/* 9.19 homepage content organization (2026-08-10)
   Body-only pass based on the latest shared full-page reference. Header and
   footer markup/links are intentionally untouched. The application copy stays
   complete, but the long two-column list becomes a scannable 4×2 feature grid. */

#about .about{align-items:start}
#about .about__copy{padding-top:8px}

#applications{padding-block:42px 50px}
#applications .section-head{margin-bottom:24px}
#applications .section-head h2{font-size:28px;letter-spacing:-.035em}

.apps--feat{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.apps--feat .feat{
  display:block;min-height:184px;padding:20px;
  background:linear-gradient(145deg,#f7f8fb,#f2f4f8);
  border:1px solid #edf0f5;border-radius:var(--r-md);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.apps--feat .feat > svg{
  width:34px;height:34px;margin:0 0 16px;
  padding:6px;border-radius:10px;
  background:var(--surface);box-shadow:0 1px 3px rgba(10,19,42,.06);
}
.apps--feat .feat h3{font-size:14.5px;margin-bottom:8px}
.apps--feat .feat p{font-size:12.5px;line-height:1.6}
.apps--feat .feat:hover{
  background:var(--surface);border-color:#f2c3aa;
  box-shadow:0 2px 5px rgba(10,19,42,.05),0 16px 34px rgba(10,19,42,.09);
  transform:translateY(-3px);
}

#how{padding-block:42px 46px}
#how .section-head{margin-bottom:22px}
#plans{padding-block:38px 20px}
#plans .section-head{margin-bottom:18px}
#resources{padding-block:12px 30px}
#faq{padding-block:40px}
.section--cta{padding-block:8px 32px}

@media (max-width:1024px){
  .apps--feat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .apps--feat .feat{min-height:164px}
}

@media (max-width:640px){
  #about .about__copy{padding-top:0}
  #applications{padding-block:34px 38px}
  #applications .section-head h2{font-size:25px}
  .apps--feat{grid-template-columns:1fr;gap:12px}
  .apps--feat .feat{
    display:flex;min-height:0;padding:16px;gap:14px;
  }
  .apps--feat .feat > svg{flex:none;margin:1px 0 0}
  #how{padding-block:34px 38px}
  #plans{padding-block:32px 16px}
  #resources{padding-block:10px 26px}
  #faq{padding-block:34px}
  .section--cta{padding-block:6px 28px}
}

@media (prefers-reduced-motion:reduce){
  .apps--feat .feat:hover{transform:none}
}

/* 9.20 hero-art3 (2026-08-10): newly generated high-resolution render based
   on the latest shared mockup. Its sampled edge is #f9f9fa, so the hero band
   uses that exact colour and the full image background remains invisible. */
.hero{background:#f7f8f8}
.hero__img{max-width:900px}

/* The shared mockup gives the artwork roughly two thirds of the hero width.
   Scale from the right edge so the dashboard stays aligned with the viewport
   while the globe expands left behind the copy-side feather. */
@media (min-width:1181px){
  .hero__img{
    transform:translateX(50px) scale(1.32);transform-origin:right center;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 145px);
            mask-image:linear-gradient(to right,transparent 0,#000 145px);
  }
}

/* 9.21 compact why-IOTSIM band (2026-08-10): proportions aligned to the
   shared ChatGPT mockup. Keep the intro + 3x2 structure, but reduce the card
   height and internal whitespace and give the full section its faint cool
   wash so it reads as a distinct band directly below the hero. */
#about.section--posthero{
  padding-block:28px 30px;
  background:linear-gradient(110deg,#fff 0%,#fafbfe 46%,#f7f9fd 100%);
  border-top:1px solid #f2f4f8;
}
#about .about{gap:44px;align-items:center}
#about .about__copy{padding-top:0}
#about .about__copy h2{margin:10px 0 13px}
#about .about__copy .section-link{margin-top:14px}
#about .benefits{gap:12px}
#about .benefit{padding:14px 16px}
#about .benefit__head{gap:10px;margin-bottom:5px}
#about .benefit__icon{width:30px;height:30px}
#about .benefit__icon svg{width:27px;height:27px}
#about .benefit h3{font-size:13px;line-height:1.3}
#about .benefit p{padding-left:40px;font-size:11.5px;line-height:1.5}

@media (max-width:1180px){
  #about .about{gap:24px}
}
@media (max-width:640px){
  #about.section--posthero{padding-block:30px}
  #about .benefits{gap:10px}
  #about .benefit{padding:15px 16px}
}

/* 9.22 applications strip (2026-08-10): the shared mockup presents all eight
   applications as one compact icon-led desktop row. Descriptions remain in
   the document source but are visually suppressed in this overview strip. */
#applications{padding-block:38px 42px}
#applications .section-head{margin-bottom:20px}
.apps--feat{
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:10px;
}
.apps--feat .feat{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:112px;padding:14px 8px;text-align:center;
  background:linear-gradient(145deg,#fafbfc,#f3f5f8);
  border:1px solid #edf0f4;border-radius:var(--r-md);
}
.apps--feat .feat > svg{
  width:36px;height:36px;margin:0 0 11px;padding:5px;
  color:var(--ink);background:transparent;box-shadow:none;border-radius:0;
  --icon-stroke:1.55;
}
.apps--feat .feat h3{font-size:12px;line-height:1.3;margin:0}
.apps--feat .feat p{display:none}

@media (max-width:1180px){
  .apps--feat{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
}
@media (max-width:640px){
  #applications{padding-block:32px 36px}
  .apps--feat{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .apps--feat .feat{
    display:flex;min-height:104px;padding:12px 8px;gap:0;
  }
  .apps--feat .feat > svg{margin:0 0 9px}
}

/* 9.23 global-connectivity artwork (2026-08-10): generated dotted world map
   based on the shared mockup. It replaces the old abstract CSS masks/arcs;
   the left third of the raster is intentionally quiet for live copy. */
.band-dark{
  background-color:#071126;
  background-image:linear-gradient(90deg,rgba(7,14,33,.08),rgba(7,14,33,0)),
                   url('/assets/images/global-connectivity-map.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
}
.band-dark::before,.band-dark::after,.band-dark__arcs{display:none}

@media (max-width:820px){
  .band-dark{
    background-image:linear-gradient(90deg,rgba(7,14,33,.18),rgba(7,14,33,.12)),
                     url('/assets/images/global-connectivity-map.png');
    background-position:62% center;
    background-size:auto 100%;
  }
}

/* 9.24 section-background audit (2026-08-10): reproduce the mockup's broad
   canvas bands and remove accidental white seams between related sections. */
#applications{
  background:linear-gradient(110deg,#fff 0%,#fafbfe 46%,#f7f9fd 100%);
}
#how{background:#fff}
#plans,#resources{
  background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%);
}
#faq,.section--cta{background:#f8f9fc}
#faq{border-top:1px solid #f0f2f7}

/* 9.25 section dividers (2026-08-10): the mockup has one quiet rule before
   pricing in addition to the existing post-hero and FAQ rules. Artwork and
   same-canvas section pairs intentionally meet without extra borders. */
#plans{border-top:1px solid #eef1f5}

/* 9.26 SIM-free final CTA (2026-08-10): the decorative card was removed from
   both homepages, so reclaim its reserved right-hand padding. */
.cta{padding-right:40px}

/* 9.27 slightly tighter section rhythm (2026-08-10): reduce only the outer
   vertical whitespace between homepage sections; internal component spacing
   and the hero remain unchanged. */
#about.section--posthero{padding-block:24px 25px}
#applications{padding-block:32px 35px}
.band-dark{padding-block:46px}
#how{padding-block:35px 38px}
#plans{padding-block:32px 16px}
#resources{padding-block:8px 23px}
#faq{padding-block:33px}
.section--cta{padding-block:5px 25px}

@media (max-width:640px){
  #about.section--posthero{padding-block:26px}
  #applications{padding-block:28px 31px}
  .band-dark{padding-block:40px}
  #how{padding-block:30px 32px}
  #plans{padding-block:28px 14px}
  #resources{padding-block:8px 20px}
  #faq{padding-block:29px}
  .section--cta{padding-block:4px 22px}
}

/* 9.28 tighter follow-up (2026-08-10): user requested a second reduction of
   the whitespace between sections. Component interiors remain untouched. */
#about.section--posthero{padding-block:18px 19px}
#applications{padding-block:24px 27px}
.band-dark{padding-block:38px}
#how{padding-block:27px 30px}
#plans{padding-block:25px 12px}
#resources{padding-block:6px 16px}
#faq{padding-block:25px}
.section--cta{padding-block:2px 18px}

@media (max-width:640px){
  #about.section--posthero{padding-block:22px}
  #applications{padding-block:23px 25px}
  .band-dark{padding-block:34px}
  #how{padding-block:25px 27px}
  #plans{padding-block:24px 12px}
  #resources{padding-block:6px 16px}
  #faq{padding-block:24px}
  .section--cta{padding-block:2px 17px}
}

/* 9.29 slimmer final CTA frame (2026-08-10). */
.cta{padding:24px 32px}
.cta p{margin-top:7px}

@media (max-width:640px){
  .cta{padding:22px 20px}
}

/* 9.30 align the trust and final CTA frames to the same container edges. */
#resources .trust,.section--cta .cta{
  width:100%;margin-inline:0;box-sizing:border-box;border-radius:var(--r-lg);
}

/* 9.31 login platform panel (2026-08-10): reuse the finished global-network
   artwork and retire the panel's abstract CSS blobs/arcs and physical SIM. */
.auth-vis{
  background-color:#071126;
  background-image:linear-gradient(90deg,rgba(7,14,33,.28) 0%,rgba(7,14,33,.04) 52%),
                   url('/assets/images/global-connectivity-map.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
}
.auth-vis::before,.auth-vis::after,.auth-vis__arcs{display:none}
.auth-chip--data{top:54%;left:48%}
.auth-chip--net{bottom:38px;left:40px}

/* 9.32 preserve the global-map artwork's native aspect ratio. The previous
   100% 100% sizing stretched the continents horizontally in the wide band. */
.band-dark{
  background-position:right center;
  background-size:auto 160%;
}

@media (max-width:820px){
  .band-dark{background-position:68% center;background-size:auto 125%}
}

/* 9.33 global-map framing matched to the shared mockup: a touch smaller than
   §9.32 and optically shifted left, with a slim navy breathing edge right. */
@media (min-width:821px){
  .band-dark{
    background-position:calc(100% - 70px) center;
    background-size:auto 150%;
  }
}

/* 9.34 corrected mockup framing: use the map-focused, non-distorted crop so
   the complete network illustration fits the right side without the large
   top/bottom clipping introduced by §9.33. */
.band-dark{
  background-image:linear-gradient(90deg,rgba(7,14,33,.08),rgba(7,14,33,0)),
                   url('/assets/images/global-connectivity-map-focused.png');
}
@media (min-width:821px){
  .band-dark{background-position:calc(100% - 20px) center;background-size:auto 135%}
}
@media (max-width:820px){
  .band-dark{background-position:72% center;background-size:auto 108%}
}

/* 9.35 final map fit: contain the geographic silhouette inside the band with
   visible navy breathing room above and below, matching the reference. */
@media (min-width:821px){
  .band-dark{background-position:right center;background-size:auto 112%}
}

/* 9.36 clean abstract connectivity background (2026-08-11): replaces the
   geographic map with a distortion-proof network field. `cover` preserves
   the raster aspect ratio at every desktop width. */
.band-dark{
  background-image:linear-gradient(90deg,rgba(7,14,33,.12),rgba(7,14,33,0)),
                   url('/assets/images/global-connectivity-abstract.png');
  background-position:center;
  background-size:cover;
}

@media (max-width:820px){
  .band-dark{background-position:60% center;background-size:auto 100%}
}

/* 9.37 keep the abstract network inside its authored safe area. */
@media (min-width:821px){
  .band-dark{background-position:right center;background-size:auto 140%}
}

/* 9.38 unified connectivity band (2026-08-11): retire the rejected raster
   artwork and its visible colour seam. One continuous navy surface carries
   only the restrained native SVG arcs and hub glows. */
.band-dark{
  background:radial-gradient(ellipse at 78% 48%,#10264b 0%,#0b1834 38%,#071126 76%);
}
.band-dark::before{display:none}
.band-dark::after{display:block;left:34%;opacity:.68}
.band-dark__arcs{display:block;opacity:.72}

/* 9.39 add depth without reintroducing a raster seam: a single soft-edged
   dot field fills the right side behind the native arcs and hubs. */
.band-dark::before{
  display:block;left:34%;opacity:.52;
  background-image:radial-gradient(rgba(117,157,214,.78) 1px,transparent 1.2px);
  background-size:8px 8px;
  -webkit-mask-image:radial-gradient(ellipse 72% 82% at 66% 50%,#000 30%,rgba(0,0,0,.82) 55%,transparent 82%);
          mask-image:radial-gradient(ellipse 72% 82% at 66% 50%,#000 30%,rgba(0,0,0,.82) 55%,transparent 82%);
}
.band-dark__arcs{opacity:.9}

/* 9.40 dotted world-map mask (2026-08-11): transparent extracted geography
   over the unified navy band, so the map adds structure without a colour
   rectangle or raster-background seam. */
.band-dark::before{
  left:34%;opacity:.68;
  background:#3f83cf;
  -webkit-mask-image:url('/assets/images/global-connectivity-world-mask.png');
          mask-image:url('/assets/images/global-connectivity-world-mask.png');
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}

/* 9.41 remove legacy free-floating hub glows; every visible endpoint now
   belongs to the inline continent-to-continent SVG route network. */
.band-dark::after{display:none}

/* 9.42 user-requested route removal: keep only the dotted world map. */
.band-dark__arcs{display:none}

/* 9.43 stable login artwork (2026-08-11): password and OTP panes have
   different content heights, so do not let the grid stretch/rescale the
   platform panel when the CSS-only tabs switch. */
.auth-vis{
  align-self:start;
  width:100%;height:480px;min-height:480px;
  background-size:cover;
  background-position:center;
}

/* 9.44 stable login form frame: both authentication modes share one desktop
   card height; the alternate-customer row stays anchored to the bottom. */
@media (min-width:1025px){
  .auth-card{
    display:flex;flex-direction:column;
    height:470px;min-height:470px;box-sizing:border-box;
  }
  .auth-card .auth-alt{margin-top:auto}
}

/* 9.53 live OTP request/login states. Posts remain top-level HTML navigation. */
.otp-flow[hidden],.otp-locked[hidden],.auth-error[hidden],
.otp-entry-user[hidden],.otp-entry-row[hidden],.otp-sent-hint[hidden]{display:none}
.auth-error{
  margin:-5px 0 10px;padding:8px 10px;border-radius:8px;
  background:#fff1ed;color:#b83913;font-size:11px;line-height:1.4;
}
.otp-locked{
  display:flex;flex-direction:column;gap:6px;padding:18px;
  background:#fff5f1;border:1px solid #ffd7c6;border-radius:10px;color:var(--ink-2);
}
.otp-locked strong{font-size:13px;color:#b83913}
.otp-locked span{font-size:12px;color:var(--body-soft)}
#otp-login-form .field{margin-bottom:12px}
#otp-login-form .input[readonly]{background:var(--surface-2);color:var(--ink-2)}
.otp-flow--entry[aria-disabled="true"]{margin-top:10px}
.otp-flow--entry[aria-disabled="true"] .field{margin-bottom:8px}
.otp-flow--entry[aria-disabled="true"] .btn{margin-top:0}
.otp-flow--entry :disabled{cursor:not-allowed}
.otp-flow--entry .input:disabled{background:var(--surface-2);color:var(--muted);opacity:1}
.otp-flow--entry .btn:disabled{box-shadow:none;filter:saturate(.25);opacity:.48}
.otp-entry-row{grid-template-columns:minmax(0,1fr) 184px;margin-bottom:12px}
.otp-flow--entry[aria-disabled="true"] .otp-entry-row .otp-entry-user,
#otp-login-form .otp-entry-row .otp-entry-user{margin-bottom:0}
.otp-entry-row .otp-entry-user .input{height:43px}
.otp-entry-row .otp-resend{display:flex;align-self:end;width:184px;margin:0}
.otp-resend__button{
  display:flex;align-items:center;justify-content:center;
  width:184px;min-width:184px;height:43px;padding:0 12px;
  white-space:nowrap;font-size:13.5px;font-weight:400;font-variant-numeric:tabular-nums;cursor:pointer;
}
.otp-resend__button #otp-resend-seconds{display:inline-block;width:2ch;text-align:center;font-size:13.5px;font-weight:400;font-variant-numeric:tabular-nums}
.otp-resend__button:disabled{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);cursor:not-allowed;opacity:1;filter:none}
.otp-resend__button:hover,.otp-resend__button:active{transform:none}

/* 9.45 functional header language dropdown (2026-08-11). Native details /
   summary keeps the control keyboard-accessible and JavaScript-free. */
.lang-menu{position:relative}
.lang-menu summary{list-style:none;cursor:pointer;user-select:none}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu__caret{transition:transform var(--dur) var(--ease)}
.lang-menu[open] .lang-menu__caret{transform:rotate(180deg)}
.lang-menu__list{
  position:absolute;z-index:100;top:calc(100% + 7px);right:0;
  min-width:138px;padding:6px;
  background:var(--surface);border:1px solid var(--border-2);
  border-radius:10px;box-shadow:var(--shadow-lg);
}
.lang-menu__list a{
  display:block;padding:9px 11px;border-radius:7px;
  color:var(--ink-2);font-size:13px;font-weight:600;white-space:nowrap;
}
.lang-menu__list a:hover{background:var(--surface-2);color:var(--ink)}
.lang-menu__list a.is-current{background:var(--brand-soft);color:var(--brand-dark)}

/* 9.46 footer variant opens upward and uses the dark footer palette. */
.lang-menu--footer{display:inline-block;margin-top:4px}
.lang-menu--footer .lang-pill{cursor:pointer;list-style:none}
.lang-menu--footer .lang-pill::-webkit-details-marker{display:none}
.lang-menu--footer .lang-menu__list{
  top:auto;right:auto;bottom:calc(100% + 7px);left:0;
  background:#111c34;border-color:rgba(255,255,255,.16);
  box-shadow:0 16px 34px rgba(0,0,0,.34);
}
.lang-menu--footer .lang-menu__list a{color:#c3ccdb}
.lang-menu--footer .lang-menu__list a:hover{background:rgba(255,255,255,.08);color:#fff}
.lang-menu--footer .lang-menu__list a.is-current{background:rgba(253,92,16,.16);color:#ff9c66}

/* 9.47 shared plan terms below the pricing cards. */
.plan-terms{
  margin-top:14px;padding:16px 18px;
  background:#f7f8fb;border:1px solid #eceff4;border-radius:var(--r-md);
}
.plan-terms h3{
  margin-bottom:11px;font-size:12px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
}
.plan-terms ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 24px}
.plan-terms li{position:relative;padding-left:15px;font-size:11.5px;line-height:1.5;color:var(--body-soft)}
.plan-terms li::before{content:'•';position:absolute;left:1px;color:var(--brand);font-weight:800}
.plan-terms strong{color:var(--ink-2)}
.plan-overage{
  display:grid;grid-template-columns:minmax(250px,1fr) auto auto;align-items:stretch;
  width:100%;gap:0;margin:14px 0 0;padding-top:12px;
  border-top:1px solid #e0e4eb;
}
.plan-overage__label{
  position:relative;display:flex;flex-direction:column;justify-content:center;gap:3px;
  padding:2px 16px 2px 13px;color:var(--ink-2);
}
.plan-overage__label::before{
  content:'';position:absolute;left:0;top:3px;bottom:3px;width:3px;
  background:var(--brand);border-radius:3px;
}
.plan-overage__label strong{font-size:11.5px;color:var(--ink)}
.plan-overage__label small{font-size:10.5px;line-height:1.4;color:var(--muted)}
.plan-overage__rate{
  display:grid;grid-template-columns:auto auto;align-content:center;column-gap:4px;
  min-width:116px;padding:2px 16px;border-left:1px solid #dde2e9;white-space:nowrap;
}
.plan-overage__rate small{grid-column:1/-1;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.plan-overage__rate strong{font-size:15px;color:var(--ink)}
.plan-overage__rate em{align-self:end;padding-bottom:1px;font-size:10px;font-style:normal;color:var(--muted)}

@media (max-width:820px){
  .plan-terms ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .plan-terms ul{grid-template-columns:1fr}
  .plan-overage{grid-template-columns:1fr 1fr}
  .plan-overage__label{grid-column:1/-1}
  .plan-overage__rate{margin-top:10px;padding-top:9px;border-top:1px solid #e0e4eb}
  .plan-overage__rate:nth-child(2){border-left:0}
}

/* 9.48 contact and platform feature strips share the final CTA palette. */
.trust--context{
  background:linear-gradient(115deg,#e9ebf8,#e2e6f6 60%,#e9e9f8);
  border-color:transparent;
}

/* 9.50 equal desktop login panels. */
@media (min-width:1025px){
  .auth{grid-template-columns:repeat(2,minmax(0,1fr))}
  .auth-card,.auth-vis{height:480px;min-height:480px;box-sizing:border-box}
}
.trust--context .trust__item + .trust__item{border-left-color:rgba(43,53,80,.10)}
@media (max-width:820px){
  .trust--context .trust__item:nth-child(even){border-left-color:rgba(43,53,80,.10)}
  .trust--context .trust__item:nth-child(n+3){border-top-color:rgba(43,53,80,.10)}
}
@media (max-width:520px){
  .trust--context .trust__item:nth-child(even){border-left-color:transparent}
  .trust--context .trust__item:nth-child(n+2){border-top-color:rgba(43,53,80,.10)}
}

/* 9.48 overage strip redesign (2026-08-11): §9.47's grid pinned the two
   post-allowance rates to the far right of the 1232px strip, leaving a dead
   middle between them and the label. The rates now sit in white mini-cards
   directly beside the label, so the strip reads as one unit. The border/
   margin/padding shorthands below intentionally flatten §9.47's divider and
   ≤520px border-top rules. */
.plan-overage{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.plan-overage__label{flex:0 1 auto;padding-right:20px}
.plan-overage__rate{
  margin:0;min-width:0;padding:8px 15px;
  background:var(--surface);border:1px solid #e0e4eb;border-radius:10px;
  box-shadow:0 1px 2px rgba(16,24,40,.05);
}
@media (max-width:520px){
  .plan-overage__label{flex-basis:100%;padding-right:0}
}

/* 9.49 plan-terms panel redesign (2026-08-11, second pass on user request).
   The flat bullet list + rates strip becomes a two-zone card: left, the six
   terms as icon tiles (brand-soft currentColor chip + uppercase kicker +
   value, echoing the .stat / .plan-overage__rate kicker-over-value pattern);
   right, the post-allowance charges promoted to a dark navy accent card with
   the two rates on glassy tiles, echoing the band-dark/footer ink.
   grid-template-areas keep the flat h3/ul/.plan-overage markup — no wrapper.
   Supersedes the §9.47 list/strip and the §9.48 white mini-cards; the
   overrides below (padding-left, content:none, margin, border, box-shadow)
   intentionally flatten those layers. */
.plan-terms{
  display:grid;grid-template-columns:minmax(0,1fr) 330px;
  grid-template-areas:"head over" "list over";
  gap:0 22px;padding:18px 18px 18px 20px;
}
.plan-terms h3{grid-area:head;margin-bottom:13px}
.plan-terms ul{grid-area:list;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px 20px}
.plan-terms li{display:flex;align-items:center;gap:10px;padding-left:0;min-width:0}
.plan-terms li::before{content:none}
.term__icon{
  flex:0 0 34px;display:grid;place-items:center;width:34px;height:34px;
  background:var(--brand-soft);border-radius:10px;color:var(--brand);
}
.term__icon svg{width:17px;height:17px;--icon-stroke:1.7}
.term__txt{display:grid;gap:2px;min-width:0}
.term__txt small{
  font-size:9.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
}
.term__txt strong{font-size:12.5px;line-height:1.35;color:var(--ink)}
.plan-overage{
  grid-area:over;align-self:stretch;
  display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:10px;
  margin:0;padding:15px 16px;border-top:0;
  background:var(--ink);border-radius:12px;
}
.plan-overage__label{grid-column:1/-1;padding:2px 0 2px 13px}
.plan-overage__label::before{top:2px;bottom:2px}
.plan-overage__label strong{font-size:12.5px;color:#fff}
.plan-overage__label small{color:#93a1b8}
.plan-overage__rate{
  margin:0;min-width:0;padding:9px 13px;justify-content:start;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:10px;box-shadow:none;
}
.plan-overage__rate small{color:#ff9c66}
.plan-overage__rate strong{color:#fff;font-size:16px}
.plan-overage__rate em{color:#93a1b8}
@media (max-width:1180px){
  .plan-terms{grid-template-columns:minmax(0,1fr) 300px}
  .plan-terms ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .plan-terms{grid-template-columns:1fr;grid-template-areas:"head" "list" "over"}
  .plan-overage{margin-top:14px}
}
@media (max-width:520px){
  .plan-terms ul{grid-template-columns:1fr}
}

/* 9.51 stable password/OTP footprint across desktop and tablet layouts. */
@media (min-width:641px){
  .auth-card{
    display:flex;flex-direction:column;
    height:480px;min-height:480px;box-sizing:border-box;
  }
  .auth-pane{min-height:236px}
  .auth-card .auth-alt{margin-top:auto}
  .auth-card .auth-note{margin-top:9px}
  .otp-code{height:45px;box-sizing:border-box}
}

/* 9.52 Greek order sidebar ends flush with the delivery-details card. */
@media (min-width:1025px){
  .order__side:has(.help--order-equal){
    align-self:stretch;grid-template-rows:auto 1fr;
  }
  .help--order-equal{
    position:relative;top:-16px;min-height:0;box-sizing:border-box;
  }
  .help--order-equal .help__art{top:auto;bottom:56px;transform:none}
}

/* 9.56 stage-three sidebar after summary-perks removal (2026-08-13).
   Preserve the normal card gap and keep the sidebar flush with the review card. */
@media (min-width:1025px){
  .help--order-equal{top:0}
}

/* 9.57 stable stage-three help card (2026-08-13).
   Invoice fields may grow the review card without resizing the sidebar cards. */
@media (min-width:1025px){
  .order__side:has(.help--order-equal){
    align-self:start;
    grid-template-rows:auto auto;
  }
  .help--order-equal{
    height:226px;
    min-height:226px;
    align-self:start;
  }
  .help--order-equal .help__art{bottom:56px}
}

/* 9.58 stage-one action spacing matches stages two and three (2026-08-13). */
.order-stage[data-order-stage="1"] .form-actions{margin-top:24px}

/* 9.59 dedicated applications page (2026-08-13). */
.applications-page{background:var(--surface)}
.applications-hero{padding:52px 0;background:linear-gradient(135deg,#fff 0%,#f7f9fd 58%,#fff2eb 100%);border-bottom:1px solid var(--border)}
.applications-hero__inner{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:64px;align-items:center}
.applications-hero h1{max-width:700px;font-size:44px;line-height:1.08;letter-spacing:-.045em;margin-top:12px}
.applications-hero p:not(.eyebrow){max-width:690px;font-size:16px;line-height:1.7;color:var(--body-soft)}
.applications-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.applications-hero__stats{display:grid;grid-template-columns:repeat(3,1fr);padding:24px;border:1px solid var(--border);border-radius:var(--r-lg);background:rgba(255,255,255,.84);box-shadow:var(--shadow-md)}
.applications-hero__stats div{display:grid;gap:4px;text-align:center;padding:8px 12px}
.applications-hero__stats div+div{border-left:1px solid var(--border)}
.applications-hero__stats strong{font-family:var(--font-head);font-size:25px;line-height:1;color:var(--brand)}
.applications-hero__stats span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.applications-intro{display:grid;grid-template-columns:360px minmax(0,1fr);gap:72px;align-items:start;padding-block:28px}
.applications-intro h2{font-size:30px;line-height:1.16;letter-spacing:-.035em;margin-top:10px}
.applications-intro>div:last-child{display:grid;gap:12px}
.applications-intro p{font-size:14px;line-height:1.75;color:var(--body-soft)}
.applications-detail{background:var(--surface-2);border-block:1px solid var(--border)}
.application-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.application-card{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;padding:24px;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.application-card:hover{transform:translateY(-2px);border-color:#f2c3aa;box-shadow:var(--shadow-md)}
.application-card>svg{width:52px;height:52px;padding:13px;border-radius:14px;background:var(--brand-soft);color:var(--brand);--icon-stroke:1.7}
.application-card h3{font-size:17px;margin:2px 0 7px}
.application-card p{font-size:13px;line-height:1.68;color:var(--body-soft)}
.applications-band{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:56px;align-items:center;padding:36px 40px;border-radius:var(--r-lg);background:var(--ink);color:#fff;overflow:hidden;position:relative}
.applications-band h2{font-size:28px;line-height:1.15;margin:10px 0}
.applications-band p:not(.eyebrow){font-size:13.5px;line-height:1.7;color:#aebbd0;max-width:650px}
.applications-band ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.applications-band li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#e5eaf2}
.applications-band li svg{width:18px;height:18px;flex:none;color:var(--brand)}
@media(max-width:1024px){.applications-hero__inner{grid-template-columns:1fr;gap:28px}.applications-hero__stats{max-width:540px}.applications-intro{grid-template-columns:1fr;gap:20px}.applications-band{grid-template-columns:1fr;gap:28px}}
@media(max-width:720px){.applications-hero{padding:36px 0}.applications-hero h1{font-size:34px}.applications-hero__stats{padding:16px}.applications-hero__stats div{padding:6px}.application-grid{grid-template-columns:1fr}.applications-band{padding:28px 24px}.applications-band ul{grid-template-columns:1fr}}
@media(max-width:480px){.applications-hero__stats strong{font-size:20px}.applications-hero__stats span{font-size:9px}.application-card{grid-template-columns:42px minmax(0,1fr);padding:20px;gap:14px}.application-card>svg{width:42px;height:42px;padding:10px}}

/* 9.60 visual bento treatment for applications (2026-08-13). */
.applications-detail{padding-block:48px;background:linear-gradient(180deg,#f8fafd,#f3f6fb);border-top:0}
.applications-title{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:48px;align-items:end;margin-bottom:28px}
.applications-title h1{font-size:36px;line-height:1.12;letter-spacing:-.04em;margin-top:10px;max-width:720px}
.applications-title>p{font-size:14px;line-height:1.7;color:var(--body-soft);max-width:520px;padding-bottom:3px}
.application-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.application-card{position:relative;display:flex;flex-direction:column;min-height:290px;padding:0;border:1px solid rgba(19,33,60,.08);border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 8px 24px rgba(19,33,60,.06);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.application-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(19,33,60,.12);border-color:rgba(19,33,60,.08)}
.application-card--wide{grid-column:span 2;display:grid;grid-template-columns:minmax(210px,.78fr) minmax(0,1.22fr);min-height:270px}
.application-card__visual{position:relative;display:grid;place-items:center;min-height:142px;overflow:hidden;background:var(--app-bg,#fff0e8);color:var(--app-ink,var(--brand))}
.application-card--wide .application-card__visual{min-height:270px}
.application-card__visual::before,.application-card__visual::after{content:'';position:absolute;border-radius:50%;border:1px solid currentColor;opacity:.14}
.application-card__visual::before{width:138px;height:138px}.application-card__visual::after{width:190px;height:190px}
.application-card__visual>svg{position:relative;z-index:2;width:72px;height:72px;padding:17px;border-radius:22px;background:rgba(255,255,255,.82);box-shadow:0 13px 28px rgba(19,33,60,.12);color:inherit;--icon-stroke:1.45}
.application-card--wide .application-card__visual>svg{width:92px;height:92px;padding:22px;border-radius:26px}
.application-card__visual small{position:absolute;z-index:2;left:18px;bottom:16px;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.82);font-size:9px;font-weight:800;letter-spacing:.08em;color:inherit}
.application-card__copy{display:flex;flex-direction:column;align-items:flex-start;padding:20px;min-width:0}
.application-card--wide .application-card__copy{justify-content:center;padding:30px}
.application-card__copy>span{font:800 10px/1 var(--font-head);letter-spacing:.1em;color:var(--app-ink,var(--brand));opacity:.8}
.application-card__copy h3{font-size:18px;line-height:1.2;margin:10px 0 8px}.application-card--wide .application-card__copy h3{font-size:23px}
.application-card__copy p{font-size:12.5px;line-height:1.6;color:var(--body-soft)}
.application-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.application-card__tags i{padding:6px 8px;border-radius:7px;background:var(--app-bg);font-size:9.5px;font-style:normal;font-weight:750;color:var(--app-ink)}
.application-card--orange{--app-bg:#fff0e8;--app-ink:#df5918}.application-card--navy{--app-bg:#e9eef9;--app-ink:#334f8c}.application-card--mint{--app-bg:#eaf8f1;--app-ink:#23835a}.application-card--blue{--app-bg:#eaf5fb;--app-ink:#277ca6}.application-card--purple{--app-bg:#f1edfb;--app-ink:#7053b6}.application-card--peach{--app-bg:#fff3e5;--app-ink:#c66a1e}.application-card--aqua{--app-bg:#e8f7f7;--app-ink:#25858a}.application-card--sand{--app-bg:#f6f1e8;--app-ink:#94743b}
.application-card__pulse,.application-card__waves{position:absolute;width:10px;height:10px;border-radius:50%;background:currentColor;right:20%;top:22%;opacity:.55;box-shadow:0 0 0 8px color-mix(in srgb,currentColor 12%,transparent),0 0 0 17px color-mix(in srgb,currentColor 7%,transparent)}
.application-card__waves{right:auto;left:18%;top:24%}
@media(max-width:1024px){.application-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.application-card--wide{grid-column:span 1;display:flex;min-height:310px}.application-card--wide .application-card__visual{min-height:155px}.application-card--wide .application-card__visual>svg{width:76px;height:76px;padding:18px}.application-card--wide .application-card__copy{padding:20px}.application-card--wide .application-card__copy h3{font-size:19px}}
@media(max-width:720px){.applications-title{grid-template-columns:1fr;gap:12px}.applications-title h1{font-size:30px}.application-grid{grid-template-columns:1fr}.application-card,.application-card--wide{min-height:0}.application-card__visual,.application-card--wide .application-card__visual{min-height:150px}}

/* 9.61 applications page redesign (2026-08-13): the §9.59 hero/intro/band and
   the §9.60 pastel bento are retired — their markup is gone from both pages,
   the rules stay for revert. The page now reuses the site's own language: a
   .page-head intro, a 2-column .appd__grid of soft-grey cards with white
   two-tone icon chips (the §9.19 .apps--feat surface recipe scaled up for the
   fuller old-site copy), the homepage's .band-dark stats band verbatim, and
   the shared CTA. The grid section deliberately carries NO id="applications":
   §9.22/§9.24/§9.27 style that id for the homepage, and an id beats any page
   class here. */
.appd{padding-block:0 16px}
.appd .page-head{padding:44px 0 26px}
.appd .page-head .eyebrow{margin-bottom:8px}
.appd .page-head h1{font-size:36px;letter-spacing:-.04em;line-height:1.1;max-width:660px}
.appd .page-head p:not(.eyebrow){max-width:620px;font-size:14.5px;line-height:1.7;color:var(--body-soft)}
.appd__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.appd__card{
  display:flex;align-items:flex-start;gap:18px;padding:24px;
  background:linear-gradient(145deg,#f7f8fb,#f2f4f8);
  border:1px solid #edf0f5;border-radius:var(--r-md);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.appd__card>svg{
  flex:none;width:48px;height:48px;padding:12px;border-radius:12px;
  background:var(--surface);color:var(--ink-2);
  box-shadow:0 1px 3px rgba(10,19,42,.06);
  --icon-stroke:1.6;
  transition:color var(--dur) var(--ease);
}
.appd__card h3{font-size:16px;letter-spacing:-.02em;margin-bottom:7px}
.appd__card p{font-size:13px;line-height:1.68;color:var(--body-soft);max-width:52ch}
.appd__card:hover{
  background:var(--surface);border-color:#f2c3aa;
  box-shadow:0 2px 5px rgba(10,19,42,.05),0 16px 34px rgba(10,19,42,.09);
  transform:translateY(-3px);
}
.appd__card:hover>svg{color:var(--brand)}

@media (max-width:820px){
  .appd .page-head{padding:32px 0 20px}
  .appd .page-head h1{font-size:29px}
  .appd__grid{grid-template-columns:1fr;gap:12px}
  .appd__card{padding:20px;gap:14px}
  .appd__card>svg{width:42px;height:42px;padding:10px}
}
@media (prefers-reduced-motion:reduce){
  .appd__card:hover{transform:none}
}

/* 9.62 applications page, creative pass (2026-08-13): the quiet §9.61 grid
   was rejected as too plain. The page now opens with its own full-bleed dark
   hero (.apphero) whose right half is a pure CSS/SVG "application network":
   a glowing SIM core with the eight applications orbiting as glassy labeled
   chips joined by thin animated orange arcs — the site's connectivity motif
   as hero art (illustrations stay HTML/CSS/SVG per convention). Below, two
   .spot spotlight cards (Sensors, Fleet) carry small fake-telemetry scenes
   in the retired .dash dashboard's spirit, and the remaining six live in a
   3-column .appx grid with ghost numerals. §9.59-§9.61 rules stay for
   revert; their markup is gone from both pages. Still no id="applications"
   on any section here (see §9.61 note). */

.apphero{
  position:relative;overflow:hidden;padding-block:38px 36px;color:#aab6cd;
  background:
    radial-gradient(ellipse 58% 82% at 76% 42%,rgba(253,92,16,.10),transparent 62%),
    linear-gradient(115deg,#070e21 0%,#0b1530 55%,#0d1c3f 100%);
}
.apphero::before{ /* faint dot field under the network illustration */
  content:'';position:absolute;inset:0;left:46%;
  background-image:radial-gradient(rgba(150,175,215,.5) 1px,transparent 1.1px);
  background-size:13px 13px;opacity:.35;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 55% 50%,#000 40%,transparent 78%);
          mask-image:radial-gradient(ellipse 70% 70% at 55% 50%,#000 40%,transparent 78%);
}
.apphero .container{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);
  gap:56px;align-items:center;
}
.apphero h1{color:#fff;font-size:35px;letter-spacing:-.04em;line-height:1.1;margin:12px 0 14px;max-width:520px}
.apphero__lead{font-size:14.5px;line-height:1.75;color:#aab6cd;max-width:470px}
.apphero__stats{display:flex;flex-wrap:wrap;gap:14px 36px;margin-top:26px}
.apphero__stats .stat{gap:10px}
.apphero__stats .stat__icon svg{width:26px;height:26px;--icon-stroke:1.6}
.apphero__stats .stat__value{color:#fff;font-size:13.5px}
.apphero__stats .stat__label{color:#8896b0;font-size:12px}

/* the network: coordinates live inline on each node (percent of the 560×500
   viewBox the arcs are drawn in, so chips and arc endpoints stay glued) */
.appnet{position:relative;aspect-ratio:560/500;max-width:440px;width:100%;justify-self:end}
.appnet__arcs{position:absolute;inset:0;width:100%;height:100%}
.appnet__arcs ellipse{fill:none;stroke:rgba(150,175,215,.22);stroke-dasharray:2 7}
.appnet__arcs path{
  fill:none;stroke:var(--brand);stroke-width:1.1;opacity:.4;
  stroke-dasharray:3 7;stroke-linecap:round;
  animation:appnet-flow 26s linear infinite;
}
.appnet__core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;justify-items:center;gap:5px;
  width:84px;height:84px;padding-top:16px;border-radius:22px;
  background:linear-gradient(150deg,#ff7a35,var(--brand) 55%,#e14a04);
  box-shadow:0 10px 34px rgba(253,92,16,.45),inset 0 1px 0 rgba(255,255,255,.35);
}
.appnet__core svg{width:30px;height:30px;color:#fff;--icon-stroke:1.7}
.appnet__core span{font:800 10px/1 var(--font-head);letter-spacing:.08em;color:#fff}
.appnet__core::after{
  content:'';position:absolute;inset:0;border-radius:22px;
  animation:appnet-pulse 3.2s cubic-bezier(.2,.6,.4,1) infinite;
}
.appnet__node{position:absolute;transform:translate(-50%,-50%)}
.appnet__chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 11px;border-radius:11px;white-space:nowrap;
  background:rgba(13,25,52,.74);border:1px solid rgba(160,190,255,.18);
  box-shadow:0 8px 22px rgba(4,9,22,.45);
  color:#dbe4f3;font-size:11.5px;font-weight:650;letter-spacing:.01em;
  animation:appnet-float 7s ease-in-out infinite;
}
.appnet__chip svg{width:16px;height:16px;flex:none;color:#eef2fa;--icon-stroke:1.7}
.appnet__node:nth-of-type(even) .appnet__chip{animation-delay:-3.5s}
.appnet__node:nth-of-type(3n) .appnet__chip{animation-delay:-1.6s}
@keyframes appnet-flow{to{stroke-dashoffset:-300}}
@keyframes appnet-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes appnet-pulse{
  0%{box-shadow:0 0 0 0 rgba(253,92,16,.38)}
  100%{box-shadow:0 0 0 30px rgba(253,92,16,0)}
}

/* spotlights + compact grid */
.appsx{padding-block:36px 16px}
.appsx .section-head{margin-bottom:22px}
.appsx .section-head h2{font-size:28px;letter-spacing:-.035em}
.spot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
.spot__card{
  display:flex;flex-direction:column;padding:24px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
.spot__card:hover{border-color:#f2c3aa;box-shadow:var(--shadow-hover);transform:translateY(-3px)}
.spot__head{display:flex;align-items:flex-start;gap:15px}
.spot__head>svg{
  flex:none;width:46px;height:46px;padding:11px;border-radius:12px;
  background:var(--brand-soft);color:var(--ink-2);--icon-stroke:1.6;
}
.spot__head h3{font-size:17px;letter-spacing:-.02em;margin-bottom:6px}
.spot__head p{font-size:13px;line-height:1.68;color:var(--body-soft);max-width:52ch}

.scene{position:relative;height:188px;border-radius:12px;overflow:hidden;margin-top:20px}
.scene>svg{position:absolute;inset:0;width:100%;height:100%}
.scene--sense{background:var(--surface-2);border:1px solid var(--border)}
.scene--fleet{background:linear-gradient(115deg,#0a1633,#0d1c3f)}
.scene--fleet::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(150,175,215,.45) 1px,transparent 1.1px);
  background-size:14px 14px;opacity:.45;
}
.scene__chip{
  position:absolute;z-index:2;display:inline-flex;align-items:center;gap:7px;
  padding:7px 10px;border-radius:9px;font-size:11px;font-weight:650;
}
.scene--sense .scene__chip{background:#fff;border:1px solid var(--border);color:var(--ink);box-shadow:var(--shadow-sm)}
.scene--fleet .scene__chip{background:rgba(10,19,42,.62);border:1px solid rgba(160,190,255,.22);color:#e5ecf8}
.scene__dot{width:7px;height:7px;border-radius:50%;flex:none}
.scene__cap{
  position:absolute;z-index:2;left:14px;bottom:11px;
  font-size:10px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
}
.scene--fleet .scene__cap{color:#8896b0}

.appx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.appx__card{
  position:relative;overflow:hidden;padding:22px;
  background:linear-gradient(145deg,#f7f8fb,#f2f4f8);
  border:1px solid #edf0f5;border-radius:var(--r-md);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.appx__num{
  position:absolute;top:12px;right:16px;
  font:800 40px/1 var(--font-head);letter-spacing:-.04em;
  color:rgba(253,92,16,.10);transition:color var(--dur) var(--ease);
}
.appx__card>svg{
  width:44px;height:44px;padding:10px;border-radius:12px;margin-bottom:14px;
  background:var(--surface);color:var(--ink-2);
  box-shadow:0 1px 3px rgba(10,19,42,.06);--icon-stroke:1.6;
  transition:color var(--dur) var(--ease);
}
.appx__card h3{font-size:15px;letter-spacing:-.02em;margin-bottom:6px}
.appx__card p{font-size:12.5px;line-height:1.65;color:var(--body-soft)}
.appx__card:hover{
  background:var(--surface);border-color:#f2c3aa;
  box-shadow:0 2px 5px rgba(10,19,42,.05),0 16px 34px rgba(10,19,42,.09);
  transform:translateY(-3px);
}
.appx__card:hover>svg{color:var(--brand)}
.appx__card:hover .appx__num{color:rgba(253,92,16,.2)}

@media (max-width:1120px){
  .apphero .container{grid-template-columns:1fr;gap:36px}
  .appnet{display:none}
  .apphero::before{display:none}
}
@media (max-width:1024px){
  .appx{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .spot{grid-template-columns:1fr}
}
@media (max-width:640px){
  .apphero{padding-block:32px 30px}
  .apphero h1{font-size:29px}
  .appsx{padding-block:30px 12px}
  .appsx .section-head h2{font-size:25px}
  .appx{grid-template-columns:1fr;gap:12px}
  .scene{height:170px}
}
@media (prefers-reduced-motion:reduce){
  .appnet__arcs path,.appnet__chip,.appnet__core::after{animation:none}
  .spot__card:hover,.appx__card:hover{transform:none}
}

/* 9.63 add-on bundles (2026-08-13): four small 30-day Data/SMS top-up cards
   (user-supplied pricing) in an .addons row at the end of #plans on both
   homepages, below the §9.49 plan-terms panel — the terms' dark card states
   the post-allowance rates, the add-ons answer them. White plan-idiom mini
   cards: brand-soft icon chip (signal for Data, mail for SMS) + name, price
   right-aligned, two checked meta lines. Homepages bumped to ?v=95. */
.addons{margin-top:16px}
.addons__head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.addons__head h3{font-size:17px;letter-spacing:-.02em}
.addons__head p{font-size:12.5px;color:var(--body-soft)}
.addons__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.addon{
  display:flex;flex-direction:column;gap:12px;padding:18px 20px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
.addon:hover{border-color:#f2c3aa;box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.addon__top{display:flex;align-items:center;gap:10px}
.addon__top>svg{
  flex:none;width:34px;height:34px;padding:8px;border-radius:10px;
  background:var(--brand-soft);color:var(--ink-2);--icon-stroke:1.6;
}
.addon__name{font-family:var(--font-head);font-weight:800;font-size:13.5px;letter-spacing:-.01em;color:var(--ink)}
.addon__price{margin-left:auto;font-family:var(--font-head);font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--ink)}
.addon__list{display:grid;gap:6px}
.addon__list li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--body)}
.addon__list li svg{width:15px;height:15px;flex:none;color:var(--brand);--icon-stroke:2.2}
@media (max-width:1180px){
  .addons__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .addons__grid{grid-template-columns:1fr;gap:12px}
}
@media (prefers-reduced-motion:reduce){
  .addon:hover{transform:none}
}

/* 9.64 production plumbing (2026-08-13): cookies-policy page prose, plus a
   .cookiebar block that is currently DORMANT — the GTM-MC7NQLJ container
   loads CookieScript, the old site's CMP, which draws its own banner, so
   /assets/js/consent.js only sets Consent Mode v2 denied defaults and
   injects no UI. The .cookiebar rules stay as fallback should the CMP ever
   be dropped from the container. All production pages bumped to ?v=96. */
.cookiebar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--surface);border-top:1px solid var(--border-2);
  box-shadow:0 -6px 24px rgba(10,19,42,.10);
  padding:14px 0;
}
.cookiebar__inner{display:flex;align-items:center;gap:20px}
.cookiebar p{font-size:13px;line-height:1.55;color:var(--body)}
.cookiebar p a{color:var(--brand);font-weight:650;text-decoration:underline;text-underline-offset:2px}
.cookiebar__actions{display:flex;gap:10px;margin-left:auto;flex:none}
@media (max-width:720px){
  .cookiebar__inner{flex-direction:column;align-items:stretch;gap:12px;text-align:center}
  .cookiebar__actions{margin-left:0;justify-content:center}
}

.policy .page-head{padding-bottom:8px}
.policy__body{max-width:760px;padding-bottom:40px}
.policy__body h2{font-size:20px;letter-spacing:-.025em;margin:28px 0 12px}
.policy__body p{font-size:14px;line-height:1.75;color:var(--body);margin-bottom:12px}
.policy__body ul{display:grid;gap:8px;margin:12px 0}
.policy__body li{
  position:relative;padding-left:24px;
  font-size:14px;line-height:1.7;color:var(--body);
}
.policy__body li::before{
  content:'';position:absolute;left:2px;top:9px;
  width:7px;height:7px;border-radius:50%;background:var(--brand);
}