/* ============================================================
   TOGAPA — design system
   Modern · luxurious · minimal · blue + slate-gray on white
   ============================================================ */

:root{
  /* base */
  --bg:        #ffffff;
  --bg-tint:   #f4f7fc;   /* faint bluish off-white */
  --bg-tint-2: #eef3fb;
  --dark:      #0a1322;   /* near-black blue (dark sections) */
  --dark-2:    #0f1b30;

  /* ink + text */
  --ink:       #0a1322;   /* headlines */
  --ink-soft:  #1c2940;
  --body:      #475468;   /* body copy */
  --muted:     #8896ab;   /* captions, meta */
  --on-dark:   #eaf0fa;
  --on-dark-mut:#9fb0cb;

  /* lines + surfaces */
  --line:      #e6ebf3;
  --line-soft: #eff3f9;
  --line-dark: rgba(255,255,255,.10);

  /* accent — electric blue */
  --accent:     #2d6bff;
  --accent-deep:#1a50e6;
  --accent-soft:#e9f0ff;
  --accent-ink: #0f3bb0;

  /* radii + shadow */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --shadow-sm: 0 1px 2px rgba(10,19,34,.04), 0 2px 6px rgba(10,19,34,.04);
  --shadow:    0 2px 8px rgba(10,19,34,.05), 0 18px 40px -18px rgba(10,19,34,.16);
  --shadow-lg: 0 4px 12px rgba(10,19,34,.06), 0 40px 80px -28px rgba(13,42,110,.28);
  --shadow-blue:0 24px 60px -22px rgba(45,107,255,.45);

  --maxw: 1200px;
  --ease: cubic-bezier(.22,1,.36,1);

  --font: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:var(--font); font-size:17px; line-height:1.6;
  font-weight:400; letter-spacing:-.01em;
}
::selection{ background:var(--accent); color:#fff; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.section{ padding:120px 0; position:relative; }
.section--tight{ padding:88px 0; }
.tint{ background:var(--bg-tint); }
@media(max-width:760px){
  .section{ padding:80px 0; }
  .wrap{ padding:0 22px; }
}

/* ---------- type ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-ink); white-space:nowrap;
}
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft);
}
.eyebrow--dark{ color:#9cc0ff; }
.eyebrow--dark::before{ box-shadow:0 0 0 4px rgba(45,107,255,.18); }

h1,h2,h3{ color:var(--ink); margin:0; letter-spacing:-.035em; line-height:1.02; font-weight:700; }
.h-display{
  font-size:clamp(40px, 5vw, 66px); font-weight:700; letter-spacing:-.04em; line-height:1.03;
}
.h-section{ font-size:clamp(32px, 4vw, 50px); font-weight:700; }
.h-card{ font-size:22px; font-weight:650; letter-spacing:-.025em; line-height:1.15; }
.lede{ font-size:clamp(18px,1.7vw,21px); line-height:1.55; color:var(--body); font-weight:400; }
.weak{ color:var(--muted); }
.center{ text-align:center; }
.measure{ max-width:600px; }
.measure-sm{ max-width:480px; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.grad-ink{ /* subtle blue tint on a couple words */
  background:linear-gradient(95deg,var(--accent) 0%, #6f9bff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:52px; padding:0 26px; border-radius:var(--btn-r, 999px);
  font-size:15.5px; font-weight:600; letter-spacing:-.01em;
  transition:transform .25s var(--ease), box-shadow .3s var(--ease), background .2s, color .2s, border-color .2s;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; }
.btn--primary{ background:var(--accent); color:#fff; box-shadow:var(--shadow-blue); }
.btn--primary:hover{ background:var(--accent-deep); transform:translateY(-2px); box-shadow:0 30px 70px -20px rgba(45,107,255,.6); }
.btn--ghost{ background:#fff; color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.btn--ghost:hover{ border-color:#cfd9e8; transform:translateY(-2px); box-shadow:var(--shadow); }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:#1d2c45; transform:translateY(-2px); }
.btn--ondark{ background:#fff; color:var(--ink); }
.btn--ondark:hover{ transform:translateY(-2px); box-shadow:0 24px 50px -18px rgba(0,0,0,.5); }
.btn--ghostdark{ background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.16); }
.btn--ghostdark:hover{ background:rgba(255,255,255,.12); }
.btn--sm{ height:44px; padding:0 20px; font-size:14.5px; }
.btn--lg{ height:58px; padding:0 32px; font-size:16.5px; }

/* ---------- logo ---------- */
.logo-svg{ height:26px; width:auto; fill:var(--ink); display:block; transition:fill .2s; }
.logo-svg--light{ fill:#fff; }
.logo-svg--accent{ fill:var(--accent); }

/* ---------- generic card ---------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}

/* ---------- pill / chip ---------- */
.chip{
  display:inline-flex; align-items:center; gap:7px;
  height:30px; padding:0 13px; border-radius:999px;
  background:var(--bg-tint); border:1px solid var(--line);
  font-size:13px; font-weight:500; color:var(--ink-soft);
}

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* utilities */
.stack-tight > * + *{ margin-top:18px; }
.row{ display:flex; align-items:center; }
.gap-12{ gap:12px; } .gap-16{ gap:16px; } .gap-24{ gap:24px; }
.wrap-actions{ display:flex; gap:14px; flex-wrap:wrap; }
@media(max-width:520px){ .wrap-actions .btn{ width:100%; } }