/* ==========================================================================
   Hopia, Design System (shared across all pages)
   ========================================================================== */

:root{
  --primary: #2F32B3;
  --primary-700: #24278f;
  --primary-900: #14164d;
  --accent: #3BD2F3;
  --accent-ink: #0e7c8f;
  --ink: #0B1020;
  --ink-2: #3a4056;
  --ink-3: #6b7186;
  --line: rgba(15,23,42,.08);
  --line-strong: rgba(15,23,42,.14);
  --surface: #FFFFFF;
  --surface-2: #F6F7FB;
  --surface-3: #EEF0F7;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 0 rgba(15,23,42,.03);
  --shadow: 0 8px 24px -12px rgba(15,23,42,.14), 0 2px 6px -2px rgba(15,23,42,.06);
  --shadow-lg: 0 24px 48px -24px rgba(15,23,42,.22), 0 8px 16px -8px rgba(15,23,42,.08);
  --maxw: 1240px;
  --nav-h: 72px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.55;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* ===== Layout ===== */
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px}
section{padding: 72px 0; position:relative}
@media (max-width: 780px){ section{padding: 48px 0} .container{padding:0 20px} }

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color: var(--primary);
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: rgba(47,50,179,.08);
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:2px;background:var(--accent);
}
.eyebrow.on-dark{ background: rgba(59,210,243,.15); color: var(--accent) }

h1,h2,h3,h4{font-family: inherit; color: var(--ink); letter-spacing:-0.02em; margin:0}
h1{ font-weight:800; font-size: clamp(40px, 5.6vw, 72px); line-height:1.02; letter-spacing:-0.035em }
h2{ font-weight:800; font-size: clamp(30px, 3.6vw, 48px); line-height:1.08; letter-spacing:-0.028em }
h3{ font-weight:700; font-size: 22px; line-height:1.25 }
h4{ font-weight:600; font-size: 16px }
p{margin:0; color: var(--ink-2)}
.lead{ font-size: clamp(17px, 1.35vw, 20px); color: var(--ink-2); line-height:1.55; max-width: 58ch }

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding: 12px 18px; border-radius: 10px;
  font-weight: 600; font-size: 15px;
  border: 1px solid transparent; cursor:pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn-primary{ background: var(--primary); color:#fff; box-shadow: 0 6px 18px -8px rgba(47,50,179,.6) }
.btn-primary:hover{ transform: translateY(-1px); background: var(--primary-700); box-shadow: 0 10px 24px -10px rgba(47,50,179,.7) }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--line-strong) }
.btn-ghost:hover{ background: var(--surface-2); border-color: var(--ink); }
.btn-on-dark{ background:#fff; color: var(--primary-900) }
.btn-on-dark:hover{ background: var(--accent); color: var(--primary-900) }
.btn-outline-light{ background: transparent; color:#fff; border-color: rgba(255,255,255,.28) }
.btn-outline-light:hover{ background: rgba(255,255,255,.08); border-color: #fff }
.btn-lg{ padding: 15px 22px; font-size: 16px; border-radius: 12px }
.btn .arrow{ transition: transform .2s ease }
.btn:hover .arrow{ transform: translateX(3px) }

/* ===== Brand mark ===== */
.brand-logo{
  width:28px;height:28px;display:inline-block;background-repeat:no-repeat;background-size:contain;background-position:center;
  background-image: url("../hopia-mark.svg");
}
.brand-logo.sm{width:20px;height:20px}
.brand-logo.md{width:32px;height:32px}

/* ===== Nav ===== */
.nav{
  position: sticky; top:0; z-index: 50;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.nav.scrolled{
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(15,23,42,.02);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height: var(--nav-h); gap: 20px;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;font-size:20px;color:var(--ink)}
.brand img:not(.brand-wordmark-img){width:28px;height:28px}
.brand-wordmark{gap:0}
/* Wordmark (nav + footer): <span> masked by the SVG, filled with the hero text gradient.
   The "h" dot is overlaid in accent color via ::after — the parent mask clips it to the circle. */
span.brand-wordmark-img{
  position: relative;
  display:block;
  height:48px;
  aspect-ratio: 3108 / 1129;
  width:auto;
  -webkit-mask: url("../hopia-wordmark.svg") no-repeat center / contain;
          mask: url("../hopia-wordmark.svg") no-repeat center / contain;
  background: linear-gradient(90deg, var(--primary) 0%, #5a5dd6 55%, var(--accent) 100%);
}
span.brand-wordmark-img::after{
  content:"";
  position:absolute;
  /* Dot bounding box in SVG viewBox 3108×1129: (131,132)→(261,262) */
  left: 4.215%;
  top: 11.692%;
  width: 4.183%;
  height: 11.514%;
  background: var(--accent);
  border-radius: 50%;
}
span.brand-wordmark-img.foot{ height: 36px }

/* Keep short phrases on one line on desktop/tablet, allow wrap on small screens */
.keep-on-line{ white-space: nowrap }
@media (max-width: 560px){ .keep-on-line{ white-space: normal } }
/* Legacy <img> rule kept in case some pages still reference it elsewhere */
img.brand-wordmark-img{height:48px;width:auto;display:block}
img.brand-wordmark-img.foot{height:36px}
@media (max-width: 540px){
  span.brand-wordmark-img,
  img.brand-wordmark-img{height:40px}
  span.brand-wordmark-img.foot,
  img.brand-wordmark-img.foot{height:32px}
}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  padding: 8px 12px; border-radius: 8px; font-size: 14.5px; font-weight: 500; color: var(--ink-2);
  transition: color .15s, background .15s;
}
.nav-links a:hover{ color: var(--ink); background: var(--surface-2) }
.nav-links a.active{ color: var(--primary); background: rgba(47,50,179,.08); font-weight:600 }
.nav-cta{display:flex;align-items:center;gap:8px}
.nav-login{ padding: 8px 12px; font-weight: 600; font-size: 14.5px; color: var(--ink-2) }
.nav-login:hover{ color: var(--ink) }
.lang-switch{
  display:flex; align-items:center; border: 1px solid var(--line-strong); border-radius: 8px; overflow:hidden;
  font-size: 12px; font-weight: 600;
}
.lang-switch a{display:inline-flex;align-items:center;text-decoration:none}
.lang-switch button, .lang-switch a{
  background: transparent; border: none; padding: 6px 10px; cursor:pointer; color: var(--ink-3);
  font-weight: 600; font-size: 12px;
}
.lang-switch button.on, .lang-switch a.on{ background: var(--ink); color:#fff }
.nav-burger{ display:none; background:none; border:none; width: 40px; height:40px; cursor:pointer; color: var(--ink); border-radius: 8px }
.nav-burger:hover{ background: var(--surface-2) }
.nav-burger svg{ width: 22px; height: 22px; margin: 0 auto }
@media (max-width: 1100px){
  .nav-links{display:none}
  .nav-burger{display:flex; align-items:center; justify-content:center}
}
@media (max-width: 520px){ .nav-login, .lang-switch{display:none} }
@media (max-width: 480px){ .nav-cta .btn-primary{ display:none } }

/* mobile menu drawer */
.nav-mobile{
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 49;
  background: #fff; padding: 24px; display:none; flex-direction: column; gap: 4px;
  border-top: 1px solid var(--line);
  overflow-y: auto;
}
.nav-mobile.open{ display:flex }
.nav-mobile a{
  padding: 14px 12px; border-radius: 10px; font-size: 17px; font-weight: 600; color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.nav-mobile a:last-of-type{ border-bottom: none }
.nav-mobile a.active{ color: var(--primary) }
.nav-mobile .btn{ margin-top: 16px; justify-content:center }

/* ===== Generic page hero ===== */
.page-hero{
  padding: 88px 0 72px;
  position: relative; overflow: hidden;
}
.page-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(circle at 1px 1px, rgba(15,23,42,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 30%, transparent 85%);
}
.page-hero .blob{
  position:absolute; border-radius: 50%; filter: blur(80px); opacity:.3; pointer-events:none;
}
.page-hero .blob.b1{ width:420px;height:420px; background:#BDE7F2; top:-120px; right:-120px }
.page-hero .blob.b2{ width:360px;height:360px; background:#D8D9F7; bottom:-160px; left:-100px; opacity:.4 }
.page-hero .container{ position: relative }
.page-hero h1{ font-size: clamp(36px, 4.6vw, 60px); max-width: 18ch }
.page-hero .lead{ margin-top: 20px; font-size: clamp(17px, 1.3vw, 20px); max-width: 62ch }
.page-hero .crumbs{
  display:flex; align-items:center; gap:8px; color: var(--ink-3); font-size: 13px; font-weight: 500;
  margin-bottom: 20px;
}
.page-hero .crumbs a:hover{ color: var(--primary) }
.page-hero .crumbs .sep{ color: var(--line-strong) }

/* ===== Section headers ===== */
.section-head{ max-width: 760px; margin-bottom: 56px }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center }
.section-head h2{ margin-top: 14px }
.section-head p{ margin-top: 14px; font-size: clamp(16px, 1.15vw, 18px); color: var(--ink-2) }

/* ===== Cards grid (generic) ===== */
.grid-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px }
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px }
.grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 20px }
@media (max-width: 980px){ .grid-4{grid-template-columns: repeat(2, 1fr)} .grid-3{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 560px){ .grid-4, .grid-3, .grid-2{grid-template-columns: 1fr} }

.card{
  padding: 26px; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--line);
  display:flex; flex-direction:column; gap: 14px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong) }
.card .ic{
  width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2);
  display:flex; align-items:center; justify-content:center; color: var(--primary);
  border: 1px solid var(--line);
}
.card.solution .ic{
  background: linear-gradient(140deg, rgba(47,50,179,.08), rgba(59,210,243,.18));
  border-color: rgba(47,50,179,.12);
}
.card h3{ font-size: 19px }
.card p{ font-size: 14.5px; line-height: 1.55 }

/* ===== Chips / badges ===== */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  box-shadow: var(--shadow-sm);
}
.chip .dot{ width:7px;height:7px;border-radius:2px;background:var(--accent) }
.chip-row{ display:flex; flex-wrap: wrap; gap: 10px }

/* ===== Stats block (dark) ===== */
.stats{
  background: var(--primary-900);
  color: #fff;
  border-radius: 28px;
  padding: 72px 56px;
  position:relative; overflow:hidden;
}
.stats::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(600px 300px at 90% -10%, rgba(59,210,243,.35), transparent 60%),
    radial-gradient(500px 280px at 0% 100%, rgba(47,50,179,.55), transparent 60%);
  pointer-events:none;
}
.stats::after{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(180deg, #000 20%, transparent 100%);
  pointer-events:none;
}