/* ============================================================================
   gvs.css — GVS Technologies shared stylesheet
   ----------------------------------------------------------------------------
   Single source of truth for the "light shell" pages: assessments, verticals,
   commercial, purpose, for-everyone, telecom-oss, scope sheets.

   MAINTENANCE RULE: colour, type and shell rules live here and NOWHERE else.
   A new page links this file and writes only its own page-specific CSS in a
   short <style> block. Never copy this file's contents into a page.

   Link it from <head> with:
     <link rel="stylesheet" href="./assets/gvs.css">
   ========================================================================== */

/* --- 1. tokens ----------------------------------------------------------- */
:root{
  --ink:#EDF3FA;          /* headings, emphasis */
  --body:#8FA6C6;         /* body text */
  --soft:#7389A8;         /* de-emphasised text */
  --bg:#0A1830;           /* page background */
  --bg-soft:#11264A;      /* cards, panels */
  --bg-soft-2:#0E2040;    /* gradient partner */
  --deep:#060F22;         /* header bar */
  --line:rgba(154,183,220,0.16);
  --line-strong:rgba(154,183,220,0.30);
  --brand:#35C4D7;        /* cyan — links, eyebrows */
  --accent:#A9812F;       /* gold — primary action, Commercial vertical */
  --accent-d:#8F6F2D;
  --accent-soft:rgba(169,129,47,0.12);
  --ok:#2FBF8F;           /* green — Social vertical, honest-disclosure blocks */
  --warn:#D98A76;
  --disp:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace;
}

/* --- 2. base ------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--body);font-family:var(--disp);line-height:1.6;font-size:16px}
a{color:var(--brand)}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:20px;top:10px;z-index:100;background:var(--accent);color:var(--bg);padding:9px 16px;border-radius:8px;font-weight:800}

/* --- 3. header ----------------------------------------------------------- */
header.top{border-bottom:1px solid var(--line);background:var(--deep);position:sticky;top:0;z-index:50}
.top-in{max-width:1140px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mark{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:800;font-size:1.02rem;white-space:nowrap;text-decoration:none}
.brandmark{display:inline-block;width:64px;height:30px;overflow:hidden;position:relative;flex-shrink:0}
.brandmark img{position:absolute;top:0;left:0;width:64px;height:auto;max-width:none}
.top-links{display:flex;gap:16px;font-size:0.84rem;font-weight:700;flex-wrap:wrap}

/* --- 4. hero ------------------------------------------------------------- */
.hero{padding:52px 0 8px}
.eyebrow{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--brand);font-weight:700}
h1{color:var(--ink);font-size:clamp(1.9rem,4.4vw,2.9rem);font-weight:800;letter-spacing:-0.02em;margin-top:10px;line-height:1.08}
.lede{max-width:68ch;margin-top:14px;font-size:1.02rem}
.note{font-family:var(--mono);font-size:0.72rem;line-height:1.6;border-left:2px solid var(--accent);padding-left:12px;margin-top:18px;max-width:80ch}

/* --- 5. buttons ---------------------------------------------------------- */
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.btn{display:inline-flex;align-items:center;gap:7px;padding:11px 22px;border-radius:999px;font-weight:700;font-size:0.88rem;text-decoration:none;border:1.5px solid transparent}
.btn-gold{background:var(--accent);color:var(--bg)}
.btn-gold:hover{background:var(--accent-d)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}

/* --- 6. sections & headings --------------------------------------------- */
section{margin-top:54px}
.sec-h{border-bottom:1px solid var(--line);padding-bottom:11px;margin-bottom:22px}
.sec-h h2{color:var(--ink);font-size:1.35rem;font-weight:800}
.sec-h p{font-size:0.87rem;margin-top:4px;max-width:72ch}
.h5{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--brand);font-weight:800;margin-bottom:9px}

/* --- 7. layout grids ----------------------------------------------------- */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
@media(max-width:860px){.cols,.cols3{grid-template-columns:1fr}}

/* --- 8. cards ------------------------------------------------------------ */
.card{border:1px solid var(--line);border-radius:16px;background:var(--bg-soft);padding:20px}
.card h3{color:var(--ink);font-size:1.02rem}
.card .sub{font-family:var(--mono);font-size:0.64rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--brand);margin-top:3px}
.card p{font-size:0.85rem;margin-top:9px}
.card ul{list-style:none;margin-top:11px}
.card li{font-size:0.83rem;padding:6px 0 6px 17px;position:relative;border-top:1px solid var(--line)}
.card li:first-child{border-top:0}
.card li:before{content:"▸";position:absolute;left:0;color:var(--accent)}

/* panel = a bigger card with a coloured top edge, used for verticals & offers */
.panel{border:1px solid var(--line);border-radius:18px;background:var(--bg-soft);padding:26px;margin-bottom:20px;border-top:3px solid var(--line-strong)}
.panel.commercial{border-top-color:var(--accent)}
.panel.economical{border-top-color:var(--brand)}
.panel.social{border-top-color:var(--ok)}
.panel-top{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:18px}
.panel-top h3{color:var(--ink);font-size:1.3rem;font-weight:800}
.panel-top .tag{font-family:var(--mono);font-size:0.62rem;letter-spacing:0.11em;text-transform:uppercase;font-weight:800;margin-bottom:6px;color:var(--accent)}
.panel-top .who{font-size:0.9rem;margin-top:6px;max-width:62ch}

/* --- 9. meta chips ------------------------------------------------------- */
.meta{display:flex;gap:10px;flex-wrap:wrap}
.meta div{border:1px solid var(--line-strong);border-radius:10px;padding:7px 13px;text-align:center;min-width:104px}
.meta .k{font-family:var(--mono);font-size:0.56rem;letter-spacing:0.07em;text-transform:uppercase;color:var(--body)}
.meta .v{color:var(--ink);font-weight:800;font-size:0.84rem;margin-top:2px}
.chiprow{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
.chip{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.04em;border:1px solid var(--line-strong);border-radius:999px;padding:6px 13px;color:var(--ink);text-decoration:none}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip.free{border-color:var(--ok);color:var(--ok)}

/* --- 10. lists ----------------------------------------------------------- */
ul.deliv{list-style:none}
ul.deliv li{font-size:0.855rem;padding:6px 0 6px 18px;position:relative;border-top:1px solid var(--line);color:var(--ink)}
ul.deliv li:first-child{border-top:0}
ul.deliv li:before{content:"▸";position:absolute;left:0;color:var(--accent)}
ul.deliv.plain li:before{content:"—";color:var(--soft)}
ul.deliv.no li:before{content:"×";color:var(--warn)}
ol.steps{list-style:none;counter-reset:s}
ol.steps li{counter-increment:s;position:relative;padding:6px 0 6px 30px;font-size:0.86rem;border-top:1px solid var(--line);color:var(--ink)}
ol.steps li:first-child{border-top:0}
ol.steps li:before{content:counter(s);position:absolute;left:0;top:7px;width:20px;height:20px;border-radius:50%;background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent);font-family:var(--mono);font-size:0.65rem;font-weight:800;display:grid;place-items:center}

/* --- 11. tables ---------------------------------------------------------- */
.scroller{overflow-x:auto}
table.map{width:100%;border-collapse:collapse;font-size:0.83rem;margin-top:6px}
table.map th{text-align:left;font-family:var(--mono);font-size:0.62rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--brand);padding:9px 10px;border-bottom:1px solid var(--line-strong)}
table.map td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.map td:first-child{color:var(--ink);font-weight:700}
table.map tr:hover td{background:rgba(154,183,220,0.04)}

/* --- 12. numbered rules -------------------------------------------------- */
.rule{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.rule:first-child{border-top:0}
.rule .n{font-family:var(--mono);font-size:0.72rem;color:var(--accent);font-weight:800;flex-shrink:0;width:32px;padding-top:2px}
.rule h4{color:var(--ink);font-size:0.98rem;font-weight:800}
.rule p{font-size:0.86rem;margin-top:3px;max-width:78ch}

/* --- 13. disclosure block ------------------------------------------------ */
.honest{border:1px solid var(--line);border-left:3px solid var(--ok);border-radius:12px;padding:20px 22px;background:var(--bg-soft);margin-top:24px}
.honest h3{color:var(--ink);font-size:1rem;margin-bottom:7px}
.honest p{font-size:0.86rem;margin-top:9px}
.honest b{color:var(--ink)}
.honest.warn{border-left-color:var(--warn)}

/* --- 14. closing CTA band ------------------------------------------------ */
.cta-b{margin-top:60px;border:1px solid var(--line-strong);border-radius:18px;background:linear-gradient(160deg,var(--bg-soft-2),var(--bg-soft));padding:38px;text-align:center}
.cta-b h2{color:var(--ink);font-size:clamp(1.4rem,3.2vw,1.95rem);font-weight:800;line-height:1.2}
.cta-b p{max-width:64ch;margin:13px auto 0;font-size:0.94rem}
.cta-b .cta-row{justify-content:center}

/* --- 15. footer ---------------------------------------------------------- */
footer{border-top:1px solid var(--line);margin-top:64px;padding:26px 0 44px;font-size:0.8rem}
footer b{color:var(--ink)}

/* --- 16. print ----------------------------------------------------------- */
@media print{
  header.top,.cta-row,.cta-b,.chiprow{display:none!important}
  body{background:#fff;color:#111}
  .card,.panel,.honest{background:#fff;border-color:#ccc;break-inside:avoid}
  h1,h2,h3,h4,td:first-child,.panel-top h3{color:#111}
  a{color:#111;text-decoration:underline}
  table.map th{color:#111}
}