/* =========================================================
   IDEASOV (M) Technology Sdn. Bhd.
   Visual system v2 — "engineering instrument"
   Light-dominant page, dark hero and feature bands.
   Structure carried by hairlines and a mono spec voice,
   not by shadow. Blue is the only accent; orange is a
   status signal used at under 2% of pixels.
   ========================================================= */

:root{
  /* --- brand ------------------------------------------- */
  --accent:#2189bd;          /* logo blue — fills, graphics, large type   */
  --accent-ink:#16719f;      /* deepened for AA text/links on white       */
  --accent-deep:#0d4f78;     /* headings, pressed states                  */
  --accent-lift:#43a7da;     /* lifted for dark grounds                   */
  --accent-glow:#4fc3dd;
  --hot:#e07b2a;             /* logo orange — status only                 */
  --hot-ink:#b45a14;         /* orange that passes on light               */

  /* --- light ground ------------------------------------ */
  --bg:#fafcfd;
  --surface:#ffffff;
  --surface-inset:#f1f6fa;
  --line:#dce6ee;            /* hairline                                  */
  --line-strong:#c6d5e1;     /* structural rule                           */
  --ink:#0b1724;
  --ink-soft:#4a5f72;
  --ink-muted:#7b8fa1;

  /* --- dark ground ------------------------------------- */
  --d-bg:#060d15;
  --d-surface:#0b1724;
  --d-surface-2:#122032;
  --d-raised:#18293d;
  --d-line:rgba(120,190,225,.12);
  --d-line-strong:rgba(120,190,225,.22);
  --d-ink:#eaf2f8;
  --d-ink-soft:#9bb0c2;
  --d-ink-muted:#6b8299;

  /* --- type -------------------------------------------- */
  --font-display:"Space Grotesk","Segoe UI",Arial,sans-serif;
  --font-body:"IBM Plex Sans","Segoe UI",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  /* --- space: 4 / 8 / 12 / 16 / 24 / 40 / 64 / 96 / 128 - */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2.5rem; --s7:4rem;   --s8:6rem; --s9:8rem;

  /* --- form -------------------------------------------- */
  --r-chip:4px; --r-card:10px; --r-panel:14px;
  --amb:0 1px 2px rgba(6,13,21,.28);
  --container:1240px;
  --header-h:76px;

  /* --- motion ------------------------------------------ */
  --e-out:cubic-bezier(.22,1,.36,1);
  --t-hover:150ms;
  --t-move:420ms;
}

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

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem)}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--accent-ink);text-decoration:none;transition:color var(--t-hover) ease}
a:hover{color:var(--accent-deep)}

h1,h2,h3,h4{font-family:var(--font-display);line-height:1.08;margin:0 0 .4em;letter-spacing:-.02em}
h1{font-size:clamp(2.6rem,5.6vw,4.4rem);font-weight:700}
h2{font-size:clamp(2rem,3.6vw,3rem);font-weight:600}
h3{font-size:1.3rem;font-weight:600;letter-spacing:-.01em}
h4{font-size:.95rem;font-weight:600}
p{margin:0 0 var(--s4)}

.container{width:min(100% - 2.5rem,var(--container));margin-inline:auto}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--d-bg);color:#fff;padding:.75rem 1.25rem;font-family:var(--font-mono);font-size:.8rem}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--hot);outline-offset:3px;border-radius:2px}

/* ---------------- Mono spec voice ---------------- */
.mono{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase}

.idx{
  display:flex;align-items:center;gap:var(--s3);
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-ink);margin:0 0 var(--s4);
}
.idx::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--hot);flex:none}
.idx::after{content:"";height:1px;flex:1;background:var(--line-strong)}
.band--dark .idx{color:var(--accent-lift)}
.band--dark .idx::after{background:var(--d-line-strong)}

/* Node-dot bullet used between tagline words */
.node-sep{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent-lift);margin:0 .7em .18em;vertical-align:middle}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-family:var(--font-display);font-weight:600;font-size:.95rem;letter-spacing:.01em;
  padding:.8rem 1.4rem;border-radius:var(--r-chip);border:1px solid transparent;
  transition:background-color var(--t-hover) ease,border-color var(--t-hover) ease,color var(--t-hover) ease;
}
.btn-primary{background:var(--accent-ink);color:#fff;border-color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
.btn-ghost{border-color:var(--d-line-strong);color:var(--d-ink)}
.btn-ghost:hover{border-color:var(--accent-lift);color:#fff;background:rgba(67,167,218,.08)}
.btn .arrow{font-family:var(--font-mono);transition:transform var(--t-hover) var(--e-out)}
.btn:hover .arrow{transform:translateX(3px)}

/* ---------------- Header ---------------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:rgba(250,252,253,.86);backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-hover) ease,background-color var(--t-hover) ease;
}
.site-header.is-stuck{border-bottom-color:var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);min-height:var(--header-h)}
.brand img{width:auto;height:40px}

.nav ul{display:flex;align-items:center;gap:var(--s1);list-style:none;margin:0;padding:0}
.nav a{
  position:relative;display:block;padding:.5rem .7rem;
  font-family:var(--font-display);font-weight:500;font-size:.9rem;color:var(--ink-soft);
}
.nav a:hover{color:var(--ink)}
.nav a::after{
  content:"";position:absolute;left:.7rem;right:.7rem;bottom:.1rem;height:1.5px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-hover) var(--e-out);
}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.nav a.is-active{color:var(--ink)}
.nav .nav-cta a{margin-left:var(--s3);background:var(--accent-ink);color:#fff;border-radius:var(--r-chip);padding:.55rem 1.1rem}
.nav .nav-cta a::after{display:none}
.nav .nav-cta a:hover{background:var(--accent-deep)}

.nav-toggle{display:none;width:44px;height:40px;border:1px solid var(--line);border-radius:var(--r-chip);background:var(--surface);cursor:pointer;padding:0}
.nav-toggle span{display:block;width:20px;height:1.5px;margin:4px auto;background:var(--ink);transition:transform .25s var(--e-out),opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ---------------- Dark band ---------------- */
.band--dark{background:var(--d-bg);color:var(--d-ink)}
.band--dark h2,.band--dark h3{color:#fff}
.band--dark p{color:var(--d-ink-soft)}

/* ---------------- Hero ---------------- */
.hero{
  position:relative;overflow:hidden;
  padding:calc(var(--header-h) + var(--s8)) 0 0;
  background:
    radial-gradient(900px 460px at 82% -12%,rgba(67,167,218,.16),transparent 62%),
    var(--d-bg);
}
.hero-lattice{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  mask-image:radial-gradient(120% 90% at 60% 30%,#000 35%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 60% 30%,#000 35%,transparent 78%);}
.hero-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s7);align-items:center;padding-bottom:var(--s8)}

/* Sized so the headline lands on two lines at desktop widths: the phrase
   'end to end' must not split across a line break. */
.hero h1{color:#fff;margin-bottom:var(--s4);max-width:20ch;font-size:clamp(2.3rem,4.4vw,3.6rem)}
.hero h1 .accent{color:var(--accent-lift);white-space:nowrap}
.hero-tagline{font-family:var(--font-mono);font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;color:var(--d-ink-soft);margin-bottom:var(--s5)}
.hero-lede{max-width:54ch;font-size:1.02rem;color:var(--d-ink-soft);margin-bottom:var(--s6)}

.hero-pills{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;margin:0 0 var(--s6);padding:0}
.hero-pills li{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.4rem .8rem;border-radius:var(--r-chip);
  border:1px solid var(--d-line);background:rgba(255,255,255,.02);color:var(--d-ink-soft);
}
.hero-pills li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent-lift)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s5)}
.hero-web a{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.12em;color:var(--d-ink-muted)}
.hero-web a:hover{color:var(--accent-lift)}

/* framed datasheet figure */
.figure{position:relative;margin:0;border:1px solid var(--d-line-strong);border-radius:var(--r-panel);padding:8px;background:rgba(255,255,255,.02)}
.figure .tick{position:absolute;width:9px;height:9px;border:1px solid var(--accent-lift);opacity:.85}
.figure .tick.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.figure .tick.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.figure .tick.bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.figure .tick.br{bottom:-1px;right:-1px;border-left:0;border-top:0}
.hero-media .duo img{max-height:520px;object-fit:cover}
.figure figcaption{
  position:absolute;left:8px;bottom:8px;right:8px;
  padding:.5rem .75rem;background:linear-gradient(to top,rgba(6,13,21,.92),rgba(6,13,21,0));
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--d-ink-soft);
  border-radius:0 0 8px 8px;
}
/* duotone image treatment */
.duo{position:relative;border-radius:8px;overflow:hidden;background:var(--accent-deep)}
.duo img{width:100%;display:block;filter:grayscale(1) contrast(1.06) brightness(1.02);mix-blend-mode:luminosity;
  transition:filter var(--t-move) var(--e-out),mix-blend-mode var(--t-move) ease,transform var(--t-move) var(--e-out)}
.duo:hover img,.duo:focus-within img{filter:none;mix-blend-mode:normal}
/* wide banner art whose subject sits at one edge */
.duo--left img{object-position:left center}

/* hero spec strip */
.spec-strip{position:relative;border-top:1px solid var(--d-line);background:rgba(255,255,255,.015)}
.spec-strip .container{display:grid;grid-template-columns:repeat(4,1fr)}
.spec{padding:var(--s5) var(--s4) var(--s5) 0;border-right:1px solid var(--d-line)}
.spec:first-child{padding-left:0}
.spec:last-child{border-right:0}
.spec dt{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--d-ink-muted);margin-bottom:.35rem}
.spec dd{margin:0;font-family:var(--font-display);font-size:.98rem;font-weight:500;color:var(--d-ink)}

/* ---------------- Sections ---------------- */
.section{padding:var(--s8) 0}
.section-head{max-width:820px;margin:0 0 var(--s6)}
.section-head h2{margin-bottom:var(--s4)}
.section-head .lede{font-size:1.1rem;color:var(--ink-soft);margin:0;max-width:68ch}
.band--dark .section-head .lede{color:var(--d-ink-soft)}

/* ---------------- About: datasheet + telemetry ---------------- */
.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s6);align-items:start}
.fact-table{margin:0;border:1px solid var(--line);border-radius:var(--r-panel);background:var(--surface);overflow:hidden}
.fact{display:grid;grid-template-columns:190px 1fr;gap:var(--s4);padding:var(--s4) var(--s5);border-bottom:1px solid var(--line)}
.fact:last-child{border-bottom:0}
.fact:hover{background:var(--surface-inset)}
.fact dt{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);padding-top:.28rem}
.fact dd{margin:0;color:var(--ink);font-size:.98rem}

.chip{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.25rem .6rem;border-radius:var(--r-chip);border:1px solid var(--line-strong);color:var(--ink-soft)}
.chip-active{border-color:rgba(224,123,42,.4);color:var(--hot-ink);background:rgba(224,123,42,.07)}
.chip-active::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--hot);box-shadow:0 0 0 3px rgba(224,123,42,.18)}

/* telemetry readout — dark inset panel on a light section */
.telemetry{background:var(--d-surface);border:1px solid var(--d-line);border-radius:var(--r-panel);padding:var(--s5);color:var(--d-ink);
  background-image:linear-gradient(rgba(120,190,225,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(120,190,225,.05) 1px,transparent 1px);
  background-size:34px 34px;background-position:center}
.telemetry-title{display:flex;align-items:center;gap:var(--s2);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--d-ink-muted);margin:0 0 var(--s5)}
.telemetry-title::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--hot);box-shadow:0 0 0 3px rgba(224,123,42,.2)}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5)}
.stat{border-top:1px solid var(--d-line);padding-top:var(--s3)}
.stat-num{display:block;font-family:var(--font-display);font-size:2.7rem;font-weight:700;line-height:1;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.stat-label{display:block;margin-top:.45rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--d-ink-muted)}
.meter{display:block;margin-top:var(--s3);height:2px;background:var(--d-line);overflow:hidden}
.meter i{display:block;height:2px;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-glow));transition:width 1.1s var(--e-out)}
.is-visible .meter i{width:var(--fill,70%)}

/* ---------------- Products: spec-sheet cards ---------------- */
.section-products{background:var(--surface-inset);border-block:1px solid var(--line)}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden}
.product{position:relative;background:var(--surface);padding:var(--s5);transition:background-color var(--t-hover) ease}
.product:hover{background:#fff}
.product::after{content:"";position:absolute;inset:0;border:1px solid transparent;transition:border-color var(--t-hover) ease;pointer-events:none}
.product:hover::after{border-color:var(--accent)}
.product-id{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;color:var(--ink-muted)}
/* Product shots vary from 519x180 to square. The box owns the height and
   object-fit letterboxes each image into it, so a square PC and a wide
   rack server occupy the same optical space. Percentage caps are avoided
   here: against an auto-sized grid row they resolve as indefinite and
   silently stop constraining. */
.product-media{height:132px;margin:var(--s4) 0;padding:var(--s2)}
.product-media img{width:100%;height:100%;object-fit:contain;object-position:center;transition:transform var(--t-move) var(--e-out)}
.product:hover .product-media img{transform:scale(1.04)}
.product h3{font-size:1.05rem;color:var(--ink);margin-bottom:.5rem}
.product p{font-size:.9rem;color:var(--ink-soft);margin:0;line-height:1.55}

/* ---------------- Solutions: dark band ---------------- */
.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.solution{border:1px solid var(--d-line);border-radius:var(--r-card);overflow:hidden;background:var(--d-surface);
  transition:border-color var(--t-hover) ease,background-color var(--t-hover) ease}
.solution:hover{border-color:var(--d-line-strong);background:var(--d-surface-2)}
.solution .duo{border-radius:0}
.solution .duo img{height:190px;object-fit:cover}
.solution-body{padding:var(--s5);border-top:1px solid var(--d-line)}
.solution-body .mono{color:var(--d-ink-muted);display:block;margin-bottom:.6rem}
.solution-body h3{font-size:1.15rem;margin-bottom:.45rem}
.solution-body p{font-size:.92rem;margin:0;color:var(--d-ink-soft)}

/* ---------------- Development: numbered dark cards ---------------- */
.dev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.dev-card{position:relative;border:1px solid var(--d-line);border-top:2px solid var(--accent);border-radius:var(--r-card);
  background:var(--d-surface);padding:var(--s5);transition:background-color var(--t-hover) ease,border-color var(--t-hover) ease}
.dev-card:hover{background:var(--d-surface-2);border-color:var(--d-line-strong);border-top-color:var(--accent-lift)}
.dev-index{display:block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;color:var(--accent-lift);margin-bottom:var(--s4)}
.dev-card p{margin:0;font-size:.95rem;color:var(--d-ink-soft);line-height:1.6}

/* ---------------- Services: alternating datasheet rows ---------------- */
.service-list{display:grid;gap:var(--s5)}
.service{display:grid;grid-template-columns:.95fr 1.05fr;gap:0;
  border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden;background:var(--surface);
  transition:border-color var(--t-hover) ease}
.service:hover{border-color:var(--line-strong)}
.service--reverse .service-media{order:2}
.service-media{min-height:300px}
.service-media .duo{border-radius:0;height:100%}
.service-media .duo img{width:100%;height:100%;min-height:300px;object-fit:cover}
.service-body{padding:var(--s6);display:flex;flex-direction:column;justify-content:center;border-left:1px solid var(--line)}
.service--reverse .service-body{border-left:0;border-right:1px solid var(--line)}
.service-id{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:var(--s3);display:block}
.service-body h3{font-size:1.55rem;color:var(--ink);margin-bottom:var(--s3)}
.service-body p{color:var(--ink-soft);margin:0;font-size:.98rem}

/* ---------------- Partners: cards + logo bands ---------------- */
.partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden;margin-bottom:var(--s6)}
.partner-card{background:var(--surface);padding:var(--s5);transition:background-color var(--t-hover) ease}
.partner-card:hover{background:var(--surface-inset)}
.partner-card h3{font-size:1.1rem;color:var(--ink);margin-bottom:var(--s3)}
.partner-card p{color:var(--ink-soft);margin:0;font-size:.93rem;line-height:1.6}

.logo-band{border:1px solid var(--line);border-radius:var(--r-panel);background:var(--surface);padding:var(--s5);margin-bottom:var(--s4)}
.logo-band-title{display:flex;align-items:center;gap:var(--s3);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-muted);margin:0 0 var(--s5)}
.logo-band-title::after{content:"";height:1px;flex:1;background:var(--line)}
.logo-band img{margin-inline:auto}

/* ---------------- Projects: dark case cards ---------------- */
.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)}
.project{border:1px solid var(--d-line);border-radius:var(--r-card);overflow:hidden;background:var(--d-surface);
  transition:border-color var(--t-hover) ease,background-color var(--t-hover) ease}
.project:hover{border-color:var(--d-line-strong);background:var(--d-surface-2)}
.project-media .duo{border-radius:0}
.project-media .duo img{height:230px;object-fit:cover}
.project-body{padding:var(--s5);border-top:1px solid var(--d-line)}
.project-id{display:block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;color:var(--d-ink-muted);margin-bottom:.6rem}
.project-body h3{font-size:1.3rem;margin-bottom:var(--s3)}
.project-body p{margin:0;font-size:.94rem;color:var(--d-ink-soft)}

/* ---------------- Certification ---------------- */
.section-certification{background:var(--surface-inset);border-block:1px solid var(--line)}
.cert-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s7);align-items:center}
.cert-copy h2{color:var(--ink)}
.cert-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-bottom:var(--s5);
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;color:var(--ink-soft)}
.cert-meta strong{color:var(--ink);font-weight:500}
.cert-copy p{color:var(--ink-soft)}
.cert-web a{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em}
.cert-media{position:relative;margin:0;border:1px solid var(--line-strong);border-radius:var(--r-panel);padding:var(--s4);background:var(--surface)}
.cert-media .tick{position:absolute;width:9px;height:9px;border:1px solid var(--accent)}
.cert-media .tick.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.cert-media .tick.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.cert-media .tick.bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.cert-media .tick.br{bottom:-1px;right:-1px;border-left:0;border-top:0}
.cert-media img{margin-inline:auto;max-width:320px;border-radius:var(--r-card)}
.cert-media figcaption{margin-top:var(--s4);text-align:center;font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}

/* ---------------- Contact ---------------- */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden}
.contact-card{background:var(--surface);padding:var(--s5);transition:background-color var(--t-hover) ease}
.contact-card:hover{background:var(--surface-inset)}
.contact-card h3{font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:var(--s4)}
.contact-card address,.contact-card p{font-style:normal;color:var(--ink);margin:0 0 .45rem;font-size:.96rem;line-height:1.6}
.contact-card a{color:var(--accent-ink)}

/* ---------------- Back to top ---------------- */
.to-top{
  position:fixed;right:1.5rem;bottom:1.5rem;z-index:90;
  width:42px;height:42px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:var(--r-chip);background:var(--surface);
  color:var(--ink-soft);font-family:var(--font-mono);font-size:.9rem;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity var(--t-hover) ease,visibility var(--t-hover) ease,transform var(--t-hover) var(--e-out),border-color var(--t-hover) ease,color var(--t-hover) ease;
}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{border-color:var(--accent);color:var(--accent-ink)}

/* ---------------- Section rail ---------------- */
.rail{position:fixed;left:max(1rem,calc((100vw - var(--container))/2 - 2.4rem));top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;gap:.9rem;align-items:center}
.rail a{position:relative;width:7px;height:7px;border-radius:50%;background:var(--line-strong);transition:background-color var(--t-hover) ease,transform var(--t-hover) var(--e-out)}
.rail a:hover{transform:scale(1.4);background:var(--accent)}
.rail a.is-active{background:var(--accent);box-shadow:0 0 0 4px rgba(33,137,189,.16)}
.rail::before{content:"";position:absolute;top:-.4rem;bottom:-.4rem;width:1px;background:var(--line);z-index:-1}
.rail.on-dark a{background:var(--d-line-strong)}
.rail.on-dark::before{background:var(--d-line)}
.rail.on-dark a.is-active{background:var(--accent-lift);box-shadow:0 0 0 4px rgba(67,167,218,.18)}

/* ---------------- Footer ---------------- */
.site-footer{background:var(--d-bg);color:var(--d-ink-soft);border-top:1px solid var(--d-line);padding-top:var(--s7)}
.footer-inner{display:grid;grid-template-columns:1fr 1.4fr;gap:var(--s7);padding-bottom:var(--s6)}
.footer-brand img{width:96px;height:auto;background:#fff;border-radius:var(--r-card);padding:.6rem;margin-bottom:var(--s4)}
.footer-thanks{font-family:var(--font-display);font-size:1.7rem;font-weight:600;letter-spacing:-.02em;color:#fff;margin-bottom:.3rem}
.footer-name{color:var(--d-ink);margin-bottom:.3rem;font-size:.95rem}
.footer-web a{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.12em;color:var(--accent-lift)}
.footer-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.footer-nav h4{color:#fff;margin-bottom:var(--s4);font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.footer-nav ul{list-style:none;margin:0;padding:0}
.footer-nav li{margin-bottom:.5rem;font-size:.92rem}
.footer-nav a{color:var(--d-ink-soft)}
.footer-nav a:hover{color:var(--accent-lift)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3);
  border-top:1px solid var(--d-line);padding:var(--s5) 0;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--d-ink-muted)}
.footer-bottom p{margin:0}

/* ---------------- Reveal ---------------- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity var(--t-move) var(--e-out),transform var(--t-move) var(--e-out)}
.js .reveal.is-visible{opacity:1;transform:none}

/* ---------------- Responsive ---------------- */
@media (max-width:1200px){ .rail{display:none} }
@media (max-width:1080px){
  .dev-grid{grid-template-columns:1fr}
  .partner-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:repeat(2,1fr)}
  /* Three cards over two columns leaves an empty cell, which this hairline
     grid paints as a bare block of divider colour. Span the odd one out. */
  .contact-grid>*:last-child{grid-column:1/-1}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .solution-grid{grid-template-columns:repeat(2,1fr)}
  .spec-strip .container{grid-template-columns:repeat(2,1fr)}
  .spec{padding-left:var(--s4);border-bottom:1px solid var(--d-line)}
  .spec:first-child{padding-left:var(--s4)}
  .spec:nth-child(2n){border-right:0}
}
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:var(--s6)}
  .about-grid{grid-template-columns:1fr}
  .cert-grid{grid-template-columns:1fr;gap:var(--s6)}
  .project-grid{grid-template-columns:1fr}
  .service{grid-template-columns:1fr}
  .service--reverse .service-media{order:0}
  .service-body,.service--reverse .service-body{border-left:0;border-right:0;border-top:1px solid var(--line)}
  .footer-inner{grid-template-columns:1fr}
  .nav{position:fixed;inset:var(--header-h) 0 auto 0;background:var(--bg);border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .3s var(--e-out)}
  .nav.is-open{max-height:80vh;overflow:auto}
  .nav ul{flex-direction:column;align-items:stretch;padding:var(--s4) 1.25rem;gap:0}
  .nav a{padding:.8rem .2rem;border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .nav .nav-cta a{margin:var(--s4) 0 0;text-align:center;justify-content:center}
  .nav-toggle{display:block}
}
@media (max-width:680px){
  body{font-size:16px}
  .section{padding:var(--s7) 0}
  .product-grid,.solution-grid,.contact-grid{grid-template-columns:1fr}
  .contact-grid>*:last-child{grid-column:auto}
  .service-body{padding:var(--s5)}
  .fact{grid-template-columns:1fr;gap:.3rem}
  .stat-grid{grid-template-columns:1fr}
  .footer-nav{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}