/* ============================================================
   company.memberk.com — 9 SMART K COMPANY LIMITED
   One-page corporate site.

   Colour/type/shape are derived from the MemberK product theme
   (frontend/app/styles/theme.css) so the company page and the
   product read as one house:
     --font-display  Poppins            (theme --font-display)
     --accent        #D6401F / #B23315  (theme --c-primary / --c-primary-active)
     radius scale    10 / 14 / 18 / 24  (theme --radius-sm..xl)
   The corporate navy is the one value NOT in the product theme —
   it is the 9 SmartK wordmark colour, and it carries the structure
   here the way the orange carries it in the product.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap');

:root {
  --navy:          #0D1F6B;
  --navy-deep:     #081446;
  --navy-soft:     #EEF1FA;
  --navy-hairline: #D5DCF0;

  --accent:        #D6401F;
  --accent-active: #B23315;
  --accent-soft:   #FFF0EA;

  --ink:    #101527;
  --body:   #414A63;
  --muted:  #6B7590;

  --canvas:       #ffffff;
  --surface:      #ffffff;
  --surface-soft: #F7F8FC;
  --hairline:     #E4E7F0;
  --on-dark:      #ffffff;
  --on-dark-soft: #B9C3E4;

  /* Three slots that flip with the theme. They exist so that EVERY colour in this
     file resolves from the token block below and no component rule needs its own
     dark-mode branch — a colour whose only definition sits inside a media query
     is the classic way a theme ends up half-applied. */
  --wordmark-ink: var(--navy);   /* the wordmark sits on the page ground, not on navy */
  --nav-hover:    var(--navy);
  --on-accent:    #ffffff;       /* text on an --accent fill */

  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mark:    "Source Serif 4", "Noto Serif", Georgia, "Times New Roman", serif;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  --shadow-1: 0 2px 10px rgb(13 31 107 / 0.08);
  --shadow-2: 0 18px 44px rgb(13 31 107 / 0.14);

  --container: 1120px;
  --gutter: 24px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --navy-soft:     #161C36;
    --navy-hairline: #2A3358;

    --ink:    #F2F4FB;
    --body:   #C3CADE;
    --muted:  #97A0BC;

    --canvas:       #0B0F1F;
    --surface:      #121830;
    --surface-soft: #161C36;
    --hairline:     #262E4C;

    --accent:        #FF7B45;   /* theme --hero-bg's own light stop: AA on the dark canvas */
    --accent-active: #FF9B71;
    --accent-soft:   #2A1710;

    --wordmark-ink: #ffffff;    /* navy on a near-black ground is unreadable */
    --nav-hover:    var(--ink);
    --on-accent:    #1A0C06;    /* the dark-mode accent is light enough to need dark text */

    --shadow-1: 0 2px 10px rgb(0 0 0 / 0.4);
    --shadow-2: 0 18px 44px rgb(0 0 0 / 0.5);
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

p { margin: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-active); }

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

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  background: var(--navy);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  z-index: 100;
}
.skip-link:focus { left: 16px; color: #fff; }

/* ---------- wordmark ----------
   Set in live HTML type rather than shipped as an <img> SVG: an SVG loaded
   through <img> is an isolated document and cannot use the page's webfonts, so
   the serif would silently fall back to Georgia on every visitor's machine.
   As markup it gets the real Source Serif 4, scales with the layout, is
   selectable/translatable, and recolours per theme with one token.

   ── TAEGEUK SLOT ─────────────────────────────────────────────────────────
   The real 9 SmartK mark carries a red/blue taegeuk circle inside the "9".
   No 9SmartK artwork exists in this repo, so it is NOT drawn here (see
   company/BRAND-NOTE.md). Drop the file in as company/assets/taegeuk.svg and
   uncomment the .wordmark__taegeuk <img> in index.html — the rule below
   already positions it on the counter of the "9".
   ───────────────────────────────────────────────────────────────────────── */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.13em;
  position: relative;
  color: var(--wordmark-ink);
  font-family: var(--font-mark);
  font-weight: 700;
  font-size: 27px;
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark__nine { font-size: 1.18em; }
.wordmark__taegeuk {
  position: absolute;
  left: 0.07em;
  top: 0.2em;
  width: 0.5em;
  height: 0.5em;
}
.wordmark--light { color: #fff; }   /* always on the navy footer, so never themed */

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 72px;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
  font-size: 14.5px;
  font-weight: 500;
}
.site-nav a {
  color: var(--body);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--nav-hover); }

/* Below ~880px the five section links no longer fit beside the wordmark, so the
   header stacks and the nav becomes one horizontally scrollable row. No burger
   menu: five anchors on one page do not earn the JS, and a scrollable row keeps
   every destination reachable in one tap. */
@media (max-width: 880px) {
  .site-header__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: 12px 0;
  }
  .site-nav {
    margin-left: 0;
    gap: 22px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-block: 12px;
  }
  .site-nav::-webkit-scrollbar { display: none; }
}
@media (max-width: 880px) { html { scroll-padding-top: 116px; } }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--accent { background: var(--accent); color: var(--on-accent); }
.btn--accent:hover { background: var(--accent-active); color: var(--on-accent); }
.btn--ghost-light {
  border: 1px solid rgb(255 255 255 / 0.4);
  color: #fff;
}
.btn--ghost-light:hover { border-color: #fff; background: rgb(255 255 255 / 0.08); color: #fff; }

/* ---------- hero ---------- */
.hero {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--on-dark);
  padding: clamp(64px, 9vw, 112px) 0 clamp(56px, 8vw, 96px);
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  margin-bottom: 22px;
}
.hero__eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--accent);
}
.hero h1 {
  color: #fff;
  font-size: clamp(34px, 5.2vw, 60px);
  font-weight: 800;
  max-width: 15ch;
}
.hero h1 .amp { color: var(--accent); }
.hero__lede {
  margin-top: 24px;
  max-width: 62ch;
  font-size: clamp(17px, 1.7vw, 20px);
  color: #DCE2F5;
}
.hero__actions {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero__facts {
  margin: clamp(44px, 6vw, 64px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, 1fr);
  background: rgb(255 255 255 / 0.14);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.hero__facts > div {
  background: var(--navy);
  padding: 22px 24px;
}
.hero__facts dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.hero__facts dd {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}
@media (max-width: 720px) {
  .hero__facts { grid-template-columns: 1fr; }
}

/* ---------- sections ---------- */
.section { padding: clamp(64px, 8vw, 104px) 0; }
.section--soft { background: var(--surface-soft); }
.section + .section:not(.section--soft) { border-top: 1px solid var(--hairline); }
.section--soft + .section--soft { border-top: 1px solid var(--hairline); }

.section__eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.section h2 {
  font-size: clamp(27px, 3.4vw, 40px);
  font-weight: 800;
  max-width: 20ch;
}
.section__intro {
  margin-top: 20px;
  max-width: 68ch;
  font-size: clamp(16.5px, 1.5vw, 18.5px);
}
.section__intro + .section__intro { margin-top: 16px; }

.split {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ---------- business grid ---------- */
.cards {
  margin-top: 44px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 26px 24px 28px;
  box-shadow: var(--shadow-1);
}
/* An accent rule rather than 01/02/03 markers: these are six lines of business,
   not six steps, and numbering them would assert an order the company has not
   claimed. */
.card::before {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.card h3 {
  margin-top: 16px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

/* ---------- ordered narrative list ---------- */
.checklist {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.checklist li {
  position: relative;
  padding-left: 30px;
  max-width: 60ch;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--accent);
}

.pullquote {
  margin: 36px 0 0;
  padding: 26px 28px;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* ---------- MemberK panel ---------- */
.platform {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--shadow-2);
}
.platform__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hairline);
}
.platform__logo {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 12px;
}
.platform__head h3 {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 800;
}
.platform__head p {
  margin-top: 4px;
  font-size: 15px;
  color: var(--muted);
}
.platform__cta { margin-left: auto; }

.services {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px) { .services { grid-template-columns: 1fr; } }
.services li {
  position: relative;
  padding-left: 26px;
  font-weight: 500;
  color: var(--ink);
}
.services li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--accent-soft);
  border: 1.5px solid var(--accent);
}
.platform__note {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  font-size: 15.5px;
  color: var(--muted);
  max-width: 70ch;
}

/* ---------- company information ---------- */
.info {
  margin: 40px 0 0;
  display: grid;
  grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}
.info dt,
.info dd {
  margin: 0;
  padding: 18px 24px;
  border-top: 1px solid var(--hairline);
}
.info dt:first-of-type,
.info dt:first-of-type + dd { border-top: 0; }
.info dt {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-soft);
}
.info dd {
  color: var(--ink);
  font-weight: 500;
}
@media (max-width: 700px) {
  .info { grid-template-columns: 1fr; }
  .info dt { padding-bottom: 0; background: var(--surface); border-top: 1px solid var(--hairline); }
  .info dt:first-of-type { border-top: 0; }
  .info dd { padding-top: 6px; border-top: 0; }
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--navy-deep);
  color: var(--on-dark-soft);
  padding: 56px 0 40px;
  font-size: 15px;
}
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  align-items: start;
  padding-bottom: 32px;
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
}
.site-footer__addr {
  font-style: normal;
  margin-top: 18px;
  max-width: 44ch;
  line-height: 1.7;
}
.site-footer__addr a { color: #fff; }
.site-footer__links {
  display: grid;
  gap: 10px;
  font-weight: 500;
}
.site-footer__links a { color: #fff; text-decoration: none; }
.site-footer__links a:hover { text-decoration: underline; }
.site-footer__legal {
  padding-top: 26px;
  font-size: 13.5px;
  color: #8C99C6;
}