:root {
    --bg:        oklch(0.985 0.004 250);
    --surface:   oklch(1 0 0);
    --ink:       oklch(0.24 0.015 260);
    --ink-soft:  oklch(0.48 0.014 260);
    --ink-faint: oklch(0.62 0.012 260);
    --line:      oklch(0.90 0.008 260);
    --accent:    oklch(0.55 0.17 256);
    --accent-d:  oklch(0.47 0.16 256);
    --accent-wash: oklch(0.95 0.03 256);
    --ink-deep:  oklch(0.20 0.018 262);
    --pad: clamp(22px, 6vw, 48px);
    --f-display: ui-rounded, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --f-body: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --f-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--f-body);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }
  ::selection { background: var(--accent); color: #fff; }
  a { color: inherit; text-decoration: none; }
  h1, h2, h3 { font-family: var(--f-display); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; color: var(--ink-deep); }

  .shell { max-width: 760px; margin: 0 auto; padding-inline: var(--pad); }

  .eyebrow {
    font-family: var(--f-mono);
    font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--accent-d); display: inline-flex; align-items: center; gap: 8px;
  }
  .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); }

  /* header */
  header {
    padding-block: 26px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--line);
  }
  header .logo { width:250px; height:76px; }
  .brand { display: flex; align-items: center; gap: 11px; font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; color: var(--ink-deep); }
  .brand .mark { width: 32px; height: 32px; border-radius: 9px; background: var(--ink-deep); display: grid; place-items: center; }
  .brand .mark span { width: 12px; height: 12px; border: 2.5px solid var(--accent); border-radius: 3px; transform: rotate(45deg); }
  .brand b { color: var(--accent-d); }
  header .tag { font-size: 0.82rem; color: var(--ink-faint); }

  /* intro */
  .intro { padding-block: clamp(48px, 9vw, 88px) clamp(36px, 6vw, 56px); }
  .intro h1 { font-size: clamp(2rem, 6vw, 3rem); margin: 20px 0 0; }
  .intro p { font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--ink-soft); margin-top: 22px; max-width: 54ch; }

  /* about */
  .section { padding-block: clamp(34px, 6vw, 52px); border-top: 1px solid var(--line); }
  .section h2 { font-size: clamp(1.4rem, 3.4vw, 1.8rem); margin-bottom: 16px; }
  .section p { color: var(--ink-soft); }

  .points { display: grid; gap: 14px; margin-top: 26px; }
  .pt { display: flex; gap: 13px; align-items: flex-start; }
  .pt .ck { width: 24px; height: 24px; border-radius: 7px; background: var(--accent-wash); display: grid; place-items: center; flex-shrink: 0; margin-top: 2px; }
  .pt .ck::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--accent-d); border-bottom: 2px solid var(--accent-d); transform: rotate(-45deg); margin-top: -2px; }
  .pt b { color: var(--ink-deep); font-weight: 600; }
  .pt span { color: var(--ink-soft); }

  /* contact card */
  .contact-card {
    background: var(--ink-deep); color: oklch(0.92 0.01 260);
    border-radius: 18px; padding: clamp(28px, 5vw, 44px);
    margin-block: clamp(20px, 4vw, 32px);
  }
  .contact-card .eyebrow { color: oklch(0.72 0.13 256); }
  .contact-card .eyebrow::before { background: oklch(0.72 0.13 256); }
  .contact-card h2 { color: #fff; font-size: clamp(1.5rem, 3.4vw, 2rem); margin-top: 14px; }
  .info-list { display: grid; gap: 2px; margin-top: 28px; }
  .info {
    display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center;
    padding: 18px 0; border-top: 1px solid oklch(1 0 0 / .1);
  }
  .info:last-child { border-bottom: 1px solid oklch(1 0 0 / .1); }
  .info .ic { width: 44px; height: 44px; border-radius: 12px; background: oklch(1 0 0 / .06); border: 1px solid oklch(1 0 0 / .1); display: grid; place-items: center; }
  .info .ic svg { width: 20px; height: 20px; stroke: oklch(0.72 0.13 256); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .info .lab { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(0.62 0.02 260); }
  .info .val { font-size: 1.04rem; font-weight: 600; color: #fff; line-height: 1.45; }
  .info .val a { transition: color .2s; }
  .info .val a:hover { color: oklch(0.72 0.13 256); }
  .info .val .ph { color: oklch(0.62 0.02 260); font-weight: 500; font-style: italic; }

  footer { padding-block: 32px 44px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 0.84rem; color: var(--ink-faint); }