:root{
  /* Colors */
  --bg: #ffffff;
  --ink-900:#0f172a;
  --ink-700:#334155;
  --ink-600:#475569;
  --ink-400:#94a3b8;
  --metal-050:#f8fafc;
  --metal-100:#f1f5f9;
  --metal-200:#e2e8f0;
  --brand:#0ea5e9;
  --brand-600:#0284c7;
  --accent:#22c55e;
  --warning:#f59e0b;

  /* Spacing (compact) */
  --s2:4px; --s3:6px; --s4:8px; --s5:10px; --s6:12px;
  --s8:16px; --s10:20px; --s12:24px; --s16:32px; --s20:40px; --s24:48px;

  /* Radius & Shadow */
  --r1:8px; --r2:14px; --r3:22px;
  --shadow: 0 6px 18px rgba(15,23,42,0.08);

  /* Type */
  --fs-sm: 0.925rem;
  --fs-base: 1rem;
  --fs-h1: clamp(1.8rem, 2.2vw + 1.1rem, 2.8rem);
  --fs-h2: clamp(1.3rem, 1.4vw + 1rem, 1.8rem);
  --fs-h3: clamp(1.05rem, 0.9vw + .9rem, 1.2rem);

  /* Container */
  --container: 1160px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink-900);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;line-height:1.45}

a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-600);text-decoration:underline}

.container{max-width: var(--container);
  margin: 0 auto;         /* <-- this is the centering */
  padding: 0 var(--s8);}

.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.85);backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--metal-200);
}
.site-header .row{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s8); padding:var(--s8) 0;
}
.logo{display:flex;align-items:center;gap:var(--s6);font-weight:800;letter-spacing:.4px;color:var(--ink-900)}
.logo .mark{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--brand),#38bdf8);display:grid;place-items:center;color:white;font-weight:900;box-shadow:var(--shadow)}
.nav{display:flex;align-items:center;gap:var(--s8)}
.nav a{color:var(--ink-700);padding:6px 10px;border-radius:8px}
.nav a:hover{background:var(--metal-100);text-decoration:none;color:var(--ink-900)}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:10px 14px;border:1px solid var(--metal-200);background:#fff;color:var(--ink-900);box-shadow:var(--shadow)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.ghost{background:transparent;border-color:var(--metal-200)}

.hero{position:relative;border-radius:var(--r3);overflow:hidden;box-shadow:var(--shadow);margin:var(--s12) 0}
.hero .inner{display:grid;grid-template-columns: 1.1fr .9fr;gap:var(--s12);padding:var(--s16)}
.hero h1{font-size:var(--fs-h1);margin:0 0 var(--s6);line-height:1.15}
.hero p{color:var(--ink-700);margin:0 0 var(--s10)}
.hero .actions{display:flex;gap:var(--s6);flex-wrap:wrap}
.hero .visual{position:relative;border-radius:var(--r2);overflow:hidden;min-height:360px;background:linear-gradient(160deg,#e6f7ff,#eff6ff)}
/* placeholder hero image */
.ph-hero::before{
  content:"HERO IMAGE"; position:absolute; inset:0; display:grid; place-items:center;
  color:#0ea5e9; font-weight:700; letter-spacing:.15em; opacity:.6; font-size:1rem; text-shadow:0 1px 0 #fff;
}
.ph-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.grid{display:grid;gap:var(--s10)}
.two-cols{grid-template-columns: 1fr 1fr}
.three-cols{grid-template-columns: repeat(3,1fr)}
.four-cols{grid-template-columns: repeat(4,1fr)}
@media (max-width: 960px){
  .hero .inner{grid-template-columns:1fr}
  .two-cols,.three-cols,.four-cols{grid-template-columns:1fr}
}

.section{margin:var(--s16) 0 var(--s12)}
.section h2{font-size:var(--fs-h2);margin:0 0 var(--s8)}
.section p.lead{color:var(--ink-700);margin:0 0 var(--s10)}

.card{border:1px solid var(--metal-200);border-radius:var(--r2);overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.card .body{padding:var(--s10)}
.card h3{font-size:var(--fs-h3);margin:0 0 var(--s6)}
.meta{color:var(--ink-600);font-size:var(--fs-sm)}

.ph-img{position:relative; width:100%; aspect-ratio: 4/3; overflow:hidden; background:linear-gradient(180deg,var(--metal-100),var(--metal-050));}
.ph-img::before{content:"IMAGE";position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-400);font-weight:700;letter-spacing:.15em}
.ph-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.chips{display:flex;flex-wrap:wrap;gap:var(--s6)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:var(--metal-100);border:1px solid var(--metal-200);color:var(--ink-700);font-size:var(--fs-sm)}
.chip[href]{cursor:pointer}
.chip[href]:hover{background:#fff;color:var(--ink-900)}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s10)}
.kpis .kpi{border:1px solid var(--metal-200);border-radius:var(--r2);padding:var(--s12);background:#fff;text-align:center;box-shadow:var(--shadow)}
.kpis .kpi .num{font-weight:800;font-size:1.8rem;color:var(--ink-900)}
.kpis .kpi .lbl{color:var(--ink-600)}

.scroll-row{display:grid;grid-auto-flow:column;grid-auto-columns:calc(33% - 12px);gap:var(--s10);overflow:auto;padding-bottom:var(--s6);scroll-snap-type:x mandatory}
.scroll-row > *{scroll-snap-align:start}
@media (max-width: 960px){ .scroll-row{grid-auto-columns:80%} }

.divider{height:1px;background:linear-gradient(90deg,transparent,var(--metal-200),transparent);margin:var(--s12) 0}

.banner{border:1px dashed var(--metal-200);border-radius:var(--r2);padding:var(--s12);background:linear-gradient(180deg,#f8feff,#ffffff)}
.banner .row{display:flex;align-items:center;justify-content:space-between;gap:var(--s10);flex-wrap:wrap}

.site-footer{border-top:1px solid var(--metal-200);background:linear-gradient(180deg,var(--metal-100),var(--metal-050));margin-top:var(--s20)}
.site-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s10);padding:var(--s16) 0}
.site-footer h4{margin:0 0 var(--s6);font-size:1rem}
.site-footer a{color:var(--ink-700)}
.site-footer a:hover{color:var(--ink-900);text-decoration:none}
.site-footer .micro{border-top:1px solid var(--metal-200);padding:var(--s8) 0;color:var(--ink-600);font-size:var(--fs-sm);display:flex;justify-content:space-between;gap:var(--s8);flex-wrap:wrap}

/* ====== Interactivity & polish upgrades ====== */
:root{
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --shadow: 0 6px 18px rgba(15,23,42,0.08);
  --shadow-hover: 0 10px 28px rgba(15,23,42,0.12);
  --brand-grad: linear-gradient(135deg, #0ea5e9, #38bdf8);
}

/* Buttons */
.btn{
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  will-change: transform, box-shadow;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-hover); text-decoration: none; }
.btn:active{ transform: translateY(0); box-shadow: var(--shadow); }
.btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(56,189,248,.35), var(--shadow-hover); /* brand focus ring + elevation */
}

/* Primary button: gradient + subtle shine */
.btn.primary{
  background: var(--brand-grad);
  border-color: transparent;
  color: #fff;
}
.btn.primary::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient( to right, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100% );
  width: 40%; height: 200%; top: -50%; left: -60%;
  transform: rotate(20deg);
  transition: transform 500ms var(--ease-out), opacity var(--dur) var(--ease);
  opacity: .0;
}
.btn.primary:hover::after{ transform: rotate(20deg) translateX(220%); opacity: .8; }

/* Disabled buttons (attribute or class) */
.btn[disabled], .btn.disabled, .btn[aria-disabled="true"]{
  opacity: .6; cursor: not-allowed; transform: none; box-shadow: none;
}

/* Nav links: animated underline */
.nav a{
  position: relative; transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:-6px; height:2px;
  background: var(--brand-grad);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-fast) var(--ease);
  border-radius: 2px;
}
.nav a:hover::after, .nav a:focus-visible::after{ transform: scaleX(1); }

/* Cards: lift + tighter shadow on hover */
.card{
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: rgba(2,132,199,.25); }

/* Image tiles: small zoom on hover */
.ph-img img{
  transition: transform var(--dur) var(--ease);
}
.ph-img:hover img{
  transform: scale(1.03);
}

/* Chips: interactive + selected state */
.chip{
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.chip:hover{ background:#fff; color:var(--ink-900); border-color: rgba(2,132,199,.35); transform: translateY(-1px); }
.chip[aria-selected="true"], .chip.is-active{
  background: rgba(14,165,233,.10); border-color: rgba(14,165,233,.45); color: var(--brand-600);
}

/* KPI tiles: tiny pop on hover */
.kpis .kpi{
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.kpis .kpi:hover{ transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: rgba(2,132,199,.25); }

/* Hero visual: allow a gentle parallax-y lift on hover */
.hero .visual{
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hero .visual:hover{ transform: translateY(-3px); box-shadow: var(--shadow-hover); }

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}