/* ==========================================================================
   GOTOP Limited — static site design system
   Fixed type scale + component classes. No utility-value soup.
   ========================================================================== */

:root{
  /* brand ------------------------------------------------------------- */
  --brand:#0b63c5;
  --brand-600:#0a55a8;
  --brand-700:#08447f;
  --brand-050:#eef5fd;
  --brand-100:#d9e9fb;

  --navy:#0a1a30;
  --navy-700:#12294a;
  --navy-600:#1b3a63;

  --ink:#12202f;
  --ink-2:#41546a;
  --ink-3:#6b7d92;
  --line:#dfe6ee;
  --line-2:#eef2f7;
  --bg:#ffffff;
  --bg-2:#f6f9fc;
  --bg-3:#eef3f9;
  --ok:#0f8a5f;
  --warn:#b4690e;

  /* type scale --------------------------------------------------------- */
  --fs-xs:0.75rem;    /* 12 */
  --fs-sm:0.8125rem;  /* 13 */
  --fs-base:0.9375rem;/* 15 */
  --fs-md:1.0625rem;  /* 17 */
  --fs-lg:1.25rem;    /* 20 */
  --fs-xl:1.5rem;     /* 24 */
  --fs-2xl:2rem;      /* 32 */
  --fs-3xl:2.5rem;    /* 40 */
  --fs-4xl:3.25rem;   /* 52 */

  /* spacing scale ------------------------------------------------------ */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem;  --s-7:3rem;  --s-8:4rem;  --s-9:5.5rem;

  --radius:10px;
  --radius-lg:16px;
  --shadow:0 1px 2px rgba(16,32,53,.06),0 4px 14px rgba(16,32,53,.06);
  --shadow-lg:0 12px 40px rgba(10,26,48,.14);
  --wrap:1200px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);font-size:var(--fs-base);line-height:1.68;
  color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-600);text-decoration:none}
a:hover{color:var(--brand-700);text-decoration:underline}
h1,h2,h3,h4{margin:0;line-height:1.24;letter-spacing:-.015em;font-weight:700;color:var(--ink)}
p{margin:0 0 var(--s-4)}
ul,ol{margin:0 0 var(--s-4);padding-left:1.2em}
hr{border:0;border-top:1px solid var(--line);margin:var(--s-6) 0}

/* layout ------------------------------------------------------------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s-5)}
.wrap-narrow{max-width:860px;margin:0 auto;padding:0 var(--s-5)}
.sec{padding:var(--s-8) 0}
.sec-sm{padding:var(--s-7) 0}
.sec-alt{background:var(--bg-2)}
.sec-dark{background:var(--navy);color:#ccdaea}
.sec-dark h2,.sec-dark h3{color:#fff}

.grid{display:grid;gap:var(--s-5)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-7);align-items:start}
.split-side{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s-7);align-items:start}

/* headings ------------------------------------------------------------ */
.eyebrow{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand);margin:0 0 var(--s-3)
}
.sec-dark .eyebrow{color:#7cb7f0}
.h-page{font-size:var(--fs-3xl)}
.h-sec{font-size:var(--fs-2xl);margin-bottom:var(--s-3)}
.h-card{font-size:var(--fs-md)}
.lede{font-size:var(--fs-md);color:var(--ink-2);max-width:74ch}
.sec-dark .lede{color:#a9c1da}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}

/* buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;justify-content:center;
  padding:.72em 1.35em;border-radius:var(--radius);font-size:var(--fs-base);font-weight:600;
  border:1px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s;
  text-decoration:none;line-height:1.2
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-600);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand-600)}
.btn-light{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.34)}
.btn-light:hover{background:rgba(255,255,255,.18);color:#fff}
.btn-sm{padding:.5em 1em;font-size:var(--fs-sm)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}
.center .btn-row{justify-content:center}

/* header / nav -------------------------------------------------------- */
.topbar{background:var(--navy);color:#9fb6cf;font-size:var(--fs-xs)}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:var(--s-4);justify-content:space-between;align-items:center;min-height:38px}
.topbar a{color:#cfe0f2}
.topbar span{display:inline-flex;align-items:center;gap:.4em}

.site-head{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:var(--s-5);min-height:74px}
.brand{display:flex;align-items:center;gap:.7em;flex:0 0 auto}
.brand img{height:46px;width:auto}
.brand:hover{text-decoration:none}
.brand-tag{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.25;max-width:13ch;border-left:1px solid var(--line);padding-left:.75em}

.nav{margin-left:auto;display:flex;align-items:stretch;gap:var(--s-1)}
.nav > li{list-style:none;position:relative;display:flex;align-items:center}
.nav{padding:0;margin-block:0;margin-left:auto}
.nav > li > a{
  display:flex;align-items:center;height:74px;padding:0 .85em;font-size:var(--fs-base);
  font-weight:600;color:var(--ink);border-bottom:2px solid transparent
}
.nav > li > a:hover,.nav > li.on > a{color:var(--brand-600);border-bottom-color:var(--brand);text-decoration:none}
.nav-cta{margin-left:var(--s-3);display:flex;align-items:center}

/* mega menu: CSS-only, hover bridge prevents flicker */
.mega{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  width:min(1140px,94vw);background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:var(--s-5);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .14s ease,transform .14s ease
}
.nav > li:hover > .mega,.nav > li:focus-within > .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega::before{content:"";position:absolute;top:-10px;left:0;right:0;height:12px}
.mega-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4) var(--s-5)}
.mega-col h4{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin:0 0 .5em}
.mega-col ul{list-style:none;margin:0;padding:0}
.mega-col li{margin:0 0 .25em}
.mega-col a{font-size:var(--fs-sm);color:var(--ink-2);display:block;padding:.2em 0}
.mega-col a:hover{color:var(--brand-600)}
.mega-feat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4);margin-top:var(--s-5);padding-top:var(--s-5);border-top:1px solid var(--line-2)}
.mega-feat a{display:block;text-align:center;font-size:var(--fs-xs);color:var(--ink-2);font-weight:600}
.mega-feat a:hover{color:var(--brand-600);text-decoration:none}
.mega-feat img{background:var(--bg-2);border-radius:var(--radius);margin-bottom:.4em;aspect-ratio:1;object-fit:contain;padding:6px;width:100%}

.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:8px;padding:.5em .7em;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0}

/* hero ---------------------------------------------------------------- */
.hero{
  position:relative;background:var(--navy) right center/cover no-repeat;color:#fff;overflow:hidden
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,15,30,.95) 0%,rgba(7,19,38,.90) 32%,rgba(9,24,47,.46) 54%,rgba(10,28,54,.02) 76%,rgba(10,28,54,0) 100%)
}
.hero .wrap{position:relative;z-index:2}
.hero-home .wrap{padding-block:var(--s-9)}
.hero-page .wrap{padding-block:var(--s-7)}
.hero h1{color:#fff;font-size:var(--fs-4xl);max-width:19ch}
.hero-page h1{font-size:var(--fs-3xl);max-width:26ch}
.hero p{color:#c3d6ea;max-width:56ch}
.hero-sub{font-size:var(--fs-md);margin-top:var(--s-4)}
.hero-points{list-style:none;padding:0;margin:var(--s-5) 0 0;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);max-width:560px}
.hero-points li{font-size:var(--fs-sm);color:#bcd2e8;display:flex;gap:.5em;align-items:center}
.hero-points li::before{content:"";width:6px;height:6px;border-radius:50%;background:#4d9ae8;flex:0 0 auto}

.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-6);margin-top:var(--s-7);
  border-top:1px solid rgba(255,255,255,.16);padding-top:var(--s-5);max-width:600px}
.stats div strong{display:block;font-size:var(--fs-xl);color:#fff;line-height:1.1}
.stats div span{font-size:var(--fs-xs);color:#9fbcda;letter-spacing:.04em}

/* breadcrumb ---------------------------------------------------------- */
.crumb{font-size:var(--fs-xs);color:var(--ink-3);padding:var(--s-4) 0;border-bottom:1px solid var(--line-2)}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45em}
.crumb li+li::before{content:"/";margin-right:.45em;color:var(--line)}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--brand-600)}

/* cards --------------------------------------------------------------- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .16s,border-color .16s
}
.card:hover{box-shadow:var(--shadow);border-color:var(--brand-100)}
.card-media{background:var(--bg-2);aspect-ratio:1;display:block}
.card-media img{width:100%;height:100%;object-fit:contain;padding:14px}
.card-body{padding:var(--s-4);display:flex;flex-direction:column;gap:.4em;flex:1}
.card-body h3{font-size:var(--fs-base);line-height:1.35}
.card-body h3 a{color:var(--ink)}
.card-body h3 a:hover{color:var(--brand-600);text-decoration:none}
.card-note{font-size:var(--fs-sm);color:var(--ink-3);margin:0}
.card-cat{font-size:var(--fs-xs);color:var(--brand);font-weight:600;letter-spacing:.04em;text-transform:uppercase}

.tile{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:var(--s-5);height:100%
}
.tile h3{font-size:var(--fs-md);margin-bottom:.4em}
.tile p{font-size:var(--fs-sm);color:var(--ink-2);margin:0}
.tile-link{display:block}
.tile-link:hover{text-decoration:none;border-color:var(--brand-100);box-shadow:var(--shadow)}

.linklist{list-style:none;padding:0;margin:0;display:grid;gap:.1em}
.linklist li{border-bottom:1px solid var(--line-2)}
.linklist a{display:block;padding:.7em 0;font-size:var(--fs-base);color:var(--ink-2)}
.linklist a:hover{color:var(--brand-600);text-decoration:none}

/* prose (converted legacy content) ------------------------------------ */
.prose{font-size:var(--fs-base);color:var(--ink-2);max-width:78ch}
.prose h2{font-size:var(--fs-xl);margin:var(--s-6) 0 var(--s-3);color:var(--ink)}
.prose h3{font-size:var(--fs-md);margin:var(--s-5) 0 var(--s-2);color:var(--ink)}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul{list-style:none;padding:0;margin:0 0 var(--s-4)}
.prose ul li{position:relative;padding-left:1.35em;margin-bottom:.45em}
.prose ul li::before{
  content:"";position:absolute;left:.28em;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--brand)
}
.prose img{border:1px solid var(--line);border-radius:var(--radius);margin:var(--s-5) 0}
.prose a{text-decoration:underline}
.prose-wide{max-width:none}

/* spec table ---------------------------------------------------------- */
.tablewrap{overflow-x:auto;margin:0 0 var(--s-5);border:1px solid var(--line);border-radius:var(--radius)}
table.spec{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
table.spec th,table.spec td{padding:.62em .9em;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:top}
table.spec thead th{background:var(--bg-3);color:var(--ink);font-weight:700;white-space:nowrap}
table.spec tbody tr:nth-child(even){background:var(--bg-2)}
table.spec tbody td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}
table.spec tr:last-child td{border-bottom:0}

/* product detail ------------------------------------------------------ */
.pd-top{display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:var(--s-7);align-items:start}
.pd-gallery{position:sticky;top:96px}
.pd-main{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--s-5)}
.pd-main img{width:100%;object-fit:contain;aspect-ratio:1}
.pd-thumbs{display:flex;gap:var(--s-3);margin-top:var(--s-3);flex-wrap:wrap}
.pd-thumbs img{width:78px;height:78px;object-fit:contain;background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:5px}
.pd-title{font-size:var(--fs-2xl);margin-bottom:var(--s-3)}
.pd-meta{list-style:none;padding:0;margin:var(--s-5) 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pd-meta li{display:flex;gap:var(--s-4);padding:.6em 0;font-size:var(--fs-sm);border-bottom:1px solid var(--line-2)}
.pd-meta li:last-child{border-bottom:0}
.pd-meta b{flex:0 0 140px;color:var(--ink-3);font-weight:600}

.badge{
  display:inline-block;background:var(--brand-050);color:var(--brand-700);
  font-size:var(--fs-xs);font-weight:700;padding:.3em .7em;border-radius:100px;letter-spacing:.03em
}
.badge-row{display:flex;flex-wrap:wrap;gap:.4em;margin-bottom:var(--s-4)}

/* faq ----------------------------------------------------------------- */
.faq{max-width:820px;margin:0 auto}
.faq details{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:var(--s-3);background:#fff}
.faq summary{
  cursor:pointer;padding:1em 1.15em;font-weight:600;font-size:var(--fs-base);list-style:none;
  display:flex;justify-content:space-between;gap:var(--s-4);align-items:flex-start
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brand);font-size:var(--fs-lg);line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq .faq-a{padding:0 1.15em 1.1em;font-size:var(--fs-sm);color:var(--ink-2)}
.faq .faq-a p:last-child{margin-bottom:0}

/* cta ----------------------------------------------------------------- */
.cta{background:var(--navy);color:#cfdeee;border-radius:var(--radius-lg);padding:var(--s-7) var(--s-6);text-align:center}
.cta h2{color:#fff;font-size:var(--fs-xl);margin-bottom:var(--s-3)}
.cta p{color:#a9c1da;max-width:60ch;margin:0 auto}

/* footer -------------------------------------------------------------- */
.site-foot{background:var(--navy);color:#9db4cd;font-size:var(--fs-sm);padding:var(--s-8) 0 var(--s-5)}
.site-foot h4{color:#fff;font-size:var(--fs-sm);letter-spacing:.09em;text-transform:uppercase;margin:0 0 var(--s-3)}
.site-foot a{color:#b9cde2}
.site-foot a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:var(--s-6)}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin-bottom:.35em}
.foot-brand img{height:42px;width:auto;margin-bottom:var(--s-4)}
.foot-pay{margin-top:var(--s-4);max-width:300px;opacity:.9;background:#fff;border-radius:6px;padding:6px}
.foot-bot{
  border-top:1px solid rgba(255,255,255,.12);margin-top:var(--s-6);padding-top:var(--s-4);
  display:flex;flex-wrap:wrap;gap:var(--s-4);justify-content:space-between;font-size:var(--fs-xs);color:#7d94ad
}

/* floating contact ---------------------------------------------------- */
.float-cta{
  position:fixed;right:18px;bottom:18px;z-index:80;display:flex;flex-direction:column;gap:.5em
}
.float-cta a{
  display:flex;align-items:center;gap:.5em;background:var(--brand);color:#fff;
  padding:.7em 1.05em;border-radius:100px;font-size:var(--fs-sm);font-weight:600;box-shadow:var(--shadow-lg)
}
.float-cta a:hover{background:var(--brand-600);color:#fff;text-decoration:none}

/* misc ---------------------------------------------------------------- */
.note{background:var(--bg-2);border-left:3px solid var(--brand);padding:var(--s-4) var(--s-5);border-radius:0 var(--radius) var(--radius) 0;font-size:var(--fs-sm);color:var(--ink-2)}
.note p:last-child{margin-bottom:0}
.anchor-nav{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-6)}
.anchor-nav a{font-size:var(--fs-sm);border:1px solid var(--line);border-radius:100px;padding:.35em .9em;color:var(--ink-2)}
.anchor-nav a:hover{border-color:var(--brand);color:var(--brand-600);text-decoration:none}
.subcat{margin-bottom:var(--s-7);scroll-margin-top:100px}
.subcat h2{font-size:var(--fs-lg);padding-bottom:var(--s-2);border-bottom:1px solid var(--line);margin-bottom:var(--s-5)}
.contact-card{border:1px solid var(--line);border-radius:var(--radius);padding:var(--s-5);background:#fff}
.contact-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.55em var(--s-4);font-size:var(--fs-sm)}
.contact-card dt{color:var(--ink-3);font-weight:600}
.contact-card dd{margin:0;color:var(--ink)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s-4);top:var(--s-4);z-index:200;background:#fff;padding:.6em 1em;border-radius:8px}

/* responsive ---------------------------------------------------------- */
@media (max-width:1080px){
  .g-4,.g-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr}
  .pd-top{grid-template-columns:1fr}
  .pd-gallery{position:static}
  .split-side{grid-template-columns:1fr}
}
@media (max-width:900px){
  :root{--fs-4xl:2.3rem;--fs-3xl:1.9rem;--fs-2xl:1.6rem}
  .nav{display:none}
  .burger{display:block}
  .nav.open{
    display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--line);padding:var(--s-3) var(--s-5) var(--s-5);gap:0;max-height:76vh;overflow:auto
  }
  .nav.open > li{display:block}
  .nav.open > li > a{height:auto;padding:.85em 0;border-bottom:1px solid var(--line-2)}
  .mega{position:static;transform:none;width:auto;opacity:1;visibility:visible;pointer-events:auto;
    box-shadow:none;border:0;padding:0 0 var(--s-4);display:none}
  .nav.open > li:hover > .mega{transform:none}
  .nav.open > li.open > .mega{display:block}
  .mega-grid{grid-template-columns:1fr 1fr}
  .mega-feat{display:none}
  .nav-cta{display:none}
  .split{grid-template-columns:1fr;gap:var(--s-5)}
  .stats{grid-template-columns:1fr 1fr}
  .brand-tag{display:none}
  .hero::after{background:linear-gradient(180deg,rgba(6,15,30,.92) 0%,rgba(8,22,44,.80) 100%)}
}
@media (max-width:640px){
  .g-3,.g-4,.g-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .sec{padding:var(--s-7) 0}
  .mega-grid{grid-template-columns:1fr}
  .topbar .wrap{justify-content:center;gap:var(--s-3)}
  .pd-meta b{flex-basis:104px}
}

@media print{.site-head,.site-foot,.float-cta,.topbar{display:none}}