/* ──────────────────────────────────────────────────────────────
   StoreData IP Ltd — corporate site

   Deliberately NOT the Etappe identity. Etappe is the product and
   speaks with a serif voice; this is the company behind it and
   speaks in a register closer to a technical document: one column,
   ruled data, restrained slate palette, no illustration.
   ────────────────────────────────────────────────────────────── */

:root {
  --ground:      #FAFBFB;
  --surface:     #FFFFFF;
  --ink:         #16212A;
  --ink-soft:    #4E5D68;
  --ink-faint:   #8797A2;
  --rule:        #E1E7EA;
  --rule-strong: #C7D1D6;
  --accent:      #2F6E90;
  --accent-deep: #235571;
  --accent-wash: #EAF2F6;
  --shadow: 0 1px 2px rgba(22,33,42,.05);

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #10171C;
    --surface:     #161F26;
    --ink:         #E4EBEF;
    --ink-soft:    #A0AEB8;
    --ink-faint:   #6E7E89;
    --rule:        #24313A;
    --rule-strong: #33434E;
    --accent:      #78B6D6;
    --accent-deep: #9BCCE6;
    --accent-wash: #17272F;
    --shadow: 0 1px 2px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
  --ground:      #10171C;
  --surface:     #161F26;
  --ink:         #E4EBEF;
  --ink-soft:    #A0AEB8;
  --ink-faint:   #6E7E89;
  --rule:        #24313A;
  --rule-strong: #33434E;
  --accent:      #78B6D6;
  --accent-deep: #9BCCE6;
  --accent-wash: #17272F;
  --shadow: 0 1px 2px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { margin: 0; text-wrap: balance; line-height: 1.18; letter-spacing: -.018em; }
h1 { font-size: clamp(1.95rem, 4.4vw, 2.9rem); font-weight: 660; }
h2 { font-size: 1.32rem; font-weight: 640; }
h3 { font-size: 1rem; font-weight: 640; }
p  { margin: 0; }
a  { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.label {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* ── header ── */
header {
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.head-in { display: flex; align-items: center; gap: 1.5rem; min-height: 4rem; flex-wrap: wrap; }
.brand { color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: .65rem; font-weight: 660; letter-spacing: -.02em; }
.brand .glyph {
  width: 1.55rem; height: 1.55rem; border-radius: 3px; background: var(--ink);
  display: grid; place-items: center; color: var(--ground);
  font-family: var(--mono); font-size: .62rem; letter-spacing: .02em;
}
nav { margin-left: auto; display: flex; gap: 1.4rem; }
nav a { color: var(--ink-soft); text-decoration: none; font-size: .92rem; }
nav a:hover { color: var(--ink); }

/* ── sections ── */
section { padding-block: clamp(3rem, 6.5vw, 4.75rem); }
section + section { border-top: 1px solid var(--rule); }
.stack { display: flex; flex-direction: column; gap: 1.1rem; }
.lede { font-size: 1.14rem; color: var(--ink-soft); }

/* ── activities ── */
.acts { display: grid; gap: 0; margin-top: 1.9rem; border-top: 1px solid var(--rule-strong); }
.act {
  display: grid; grid-template-columns: 2.6rem 1fr; gap: 0 1.2rem;
  padding: 1.35rem 0; border-bottom: 1px solid var(--rule); align-items: start;
}
.act .n { font-family: var(--mono); font-size: .74rem; color: var(--accent); padding-top: .2rem; }
.act p { color: var(--ink-soft); margin-top: .3rem; font-size: .97rem; }

/* ── product callout ── */
.product {
  background: var(--surface); border: 1px solid var(--rule);
  border-left: 3px solid var(--accent); border-radius: 3px;
  padding: 1.5rem 1.65rem; box-shadow: var(--shadow); margin-top: 1.7rem;
}
.product .label { display: block; margin-bottom: .55rem; }
.product h3 { font-size: 1.18rem; }
.product p { color: var(--ink-soft); margin-top: .5rem; }
.product .shot {
  display: block; margin-top: 1.2rem; border: 1px solid var(--rule);
  border-radius: 3px; overflow: hidden;
}
.product .shot img { display: block; width: 100%; height: auto; }
.product .go { display: inline-block; margin-top: .9rem; font-weight: 560; text-decoration: none; }
.product .go::after { content: " →"; }

/* ── founder ── */
.person { margin-top: 1.7rem; border-top: 1px solid var(--rule-strong); padding-top: 1.35rem; }
.person .role { font-family: var(--mono); font-size: .76rem; color: var(--accent); margin-top: .2rem; }
.person p + p { color: var(--ink-soft); margin-top: .7rem; }
.person .go { display: inline-block; margin-top: .9rem; font-weight: 560; text-decoration: none; }
.person .go::after { content: " →"; }

/* ── company data ── */
.facts { margin-top: 1.7rem; border-top: 1px solid var(--rule-strong); }
.fact {
  display: grid; grid-template-columns: 1fr; gap: .1rem;
  padding: .85rem 0; border-bottom: 1px solid var(--rule);
}
@media (min-width: 38rem) { .fact { grid-template-columns: 13rem 1fr; gap: 1.2rem; } }
.fact dt { color: var(--ink-faint); font-size: .93rem; }
.fact dd { margin: 0; font-family: var(--mono); font-size: .9rem; font-variant-numeric: tabular-nums; }
.fact dd.plain { font-family: var(--sans); font-size: .97rem; }

/* ── contact ── */
.contact { display: grid; gap: 1.4rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
@media (min-width: 42rem) { .contact { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
address { font-style: normal; color: var(--ink-soft); line-height: 1.75; }

/* ── footer ── */
footer { border-top: 1px solid var(--rule); padding-block: 2.2rem; color: var(--ink-faint); font-size: .87rem; }
.foot-in { display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; align-items: baseline; }
footer a { color: var(--ink-soft); text-decoration: none; }
footer a:hover { color: var(--ink); }
.foot-in .right { margin-left: auto; font-family: var(--mono); font-size: .76rem; }