/* ===== Tokens (light + vibrant) ===== */
:root{
  --page-bg:#F7FAFF;
  --surface:#FFFFFF;
  --hairline:#E8EEF6;
  --ink-900:#0F172A;
  --ink-700:#334155;
  --ink-500:#64748B;

  --brand-600:#2563EB;
  --brand-500:#3B82F6;
  --brand-400:#60A5FA;
  --accent-500:#06B6D4; /* teal pop */
  --accent-400:#22D3EE;

  --container:1120px;
  --radius-lg:16px;
  --radius:12px;
  --radius-pill:999px;
  --shadow-a:0 6px 24px rgba(15,23,42,0.06);
  --shadow-b:0 10px 30px rgba(15,23,42,0.08);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--page-bg); color:var(--ink-700);
  font-family: Inter, Manrope, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; line-height:1.65;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

.container{max-width:var(--container); margin-inline:auto; padding:0 24px}
.section{padding: clamp(56px, 8vw, 96px) 0}
.section-sep{height:1px; background:var(--hairline); margin-top:56px}

/* ===== Type ===== */
h1,h2,h3{color:var(--ink-900); margin:0 0 .5rem; line-height:1.2}
h1{font-size: clamp(2.2rem, 4vw, 3rem); letter-spacing:-.015em}
h2{font-size: clamp(1.6rem, 2.6vw, 2rem)}
h3{font-size: 1.125rem}
.lead{font-size: clamp(1rem, 1.6vw, 1.125rem); color:var(--ink-700)}
.eyebrow{letter-spacing:.08em; text-transform:uppercase; font-size:.85rem; color:var(--brand-600); font-weight:700}

/* ===== Header / Nav ===== */
.header{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--hairline);
}
.header__inner{height:64px; display:flex; align-items:center; justify-content:space-between}

.brand{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--ink-900)}
.brand__mark{width:28px; height:28px; border-radius:8px;
  background: conic-gradient(from 220deg, var(--brand-500), var(--accent-500), var(--brand-400));
  box-shadow: 0 0 0 1px #cfe0ff;
}

.nav__toggle{display:none; background:#fff; border:1px solid var(--hairline); padding:8px 12px; border-radius:10px}
.burger{width:18px; height:2px; background:var(--ink-900); position:relative; display:block}
.burger::before,.burger::after{content:""; position:absolute; left:0; right:0; height:2px; background:var(--ink-900)}
.burger::before{top:-6px}.burger::after{top:6px}

.nav{display:flex}
.nav__track{position:relative; display:flex; gap:8px; align-items:center}
.nav__link{padding:8px 12px; border-radius:12px; font-weight:600; color:#42506a}
.nav__link:hover{color:var(--brand-600)}
.nav__indicator{
  position:absolute; top:0; left:0; height:100%; border-radius:12px; z-index:-1;
  background: rgba(37,99,235,.12);
  transition: transform .2s ease, width .2s ease, left .2s ease;
  pointer-events:none;
}
@media (max-width: 900px){
  .nav{display:none; position:absolute; top:64px; left:0; right:0; background:#fff; border-bottom:1px solid var(--hairline); padding:12px 24px}
  .nav.open{display:block}
  .nav__track{flex-direction:column; align-items:flex-start}
  .nav__indicator{display:none}
  .nav__toggle{display:inline-flex}
}

/* ===== Hero ===== */
.hero{position:relative; overflow:hidden}
.hero__bg{position:absolute; inset:0; pointer-events:none}
.blob{position:absolute; filter: blur(40px); opacity:.35}
.blob--a{width:520px; height:520px; background: radial-gradient(35% 35% at 50% 50%, #93c5fd 0%, transparent 60%);
  top:-120px; left:-140px; animation: driftA 14s ease-in-out infinite alternate}
.blob--b{width:420px; height:420px; background: radial-gradient(35% 35%, #a7f3d0 0%, transparent 60%);
  bottom:-120px; right:-80px; animation: driftB 16s ease-in-out infinite alternate}
.blob--c{width:360px; height:360px; background: radial-gradient(35% 35%, #bfdbfe 0%, transparent 60%);
  top:40%; left:55%; animation: driftC 18s ease-in-out infinite alternate}

@keyframes driftA{to{transform: translate(40px, 30px)}}
@keyframes driftB{to{transform: translate(-40px, -20px)}}
@keyframes driftC{to{transform: translate(20px, -30px)}}

.hero__inner{
  position:relative; display:grid; gap:32px; grid-template-columns: 1.1fr 1fr; align-items:center;
}
.hero__copy{max-width:560px}
.hero__media{
  border-radius: var(--radius-lg); overflow:hidden; background:#fff; border:1px solid var(--hairline); box-shadow: var(--shadow-a)
}

/* ===== Buttons (tactile) ===== */
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius: var(--radius-pill);
  font-weight:700; border:1px solid transparent; cursor:pointer; position:relative; overflow:hidden; transform: translateZ(0);
}
.btn__icon{transition: transform .2s ease}
.btn:hover .btn__icon{transform: translateX(4px)}

.btn--primary{
  background: var(--brand-600); color:#fff; box-shadow: var(--shadow-a);
}
.btn--primary::before{
  /* sheen */
  content:""; position:absolute; inset:-2px; background:
    linear-gradient(120deg, rgba(255,255,255,.18) 20%, rgba(255,255,255,0) 40% 60%, rgba(255,255,255,.18) 80%);
  transform: translateX(-120%); transition: transform .25s ease;
}
.btn--primary:hover::before{ transform: translateX(0) }

.btn--glass{
  background:#fff; color:var(--ink-900); border:1px solid var(--hairline);
  box-shadow: inset 0 1px 0 #fff, var(--shadow-a);
}
.btn:active{ transform: translateY(1px) }

/* Magnetic (handled by JS) */
.btn--magnetic{will-change: transform}

/* ===== Cards / Tiles ===== */
.grid{display:grid; gap:24px}
.grid--3{grid-template-columns: repeat(3, 1fr)}
@media (max-width: 980px){ .hero__inner{grid-template-columns:1fr} .grid--3{grid-template-columns:1fr} }

.surface{
  background: var(--surface); border:1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-a); padding: 28px;
}

.tile{
  background:#fff; border:1px solid var(--hairline); border-radius: var(--radius); padding:22px;
  box-shadow: var(--shadow-a); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  outline: none;
}
.tile:hover, .tile:focus{ transform: translateY(-6px); box-shadow: var(--shadow-b); border-color:#D3E0EF }
.tile__icon{font-size:24px}
.tile__peek{
  max-height:0; overflow:hidden; transition: max-height .25s ease, opacity .25s ease; opacity:0;
}
.tile:hover .tile__peek, .tile:focus .tile__peek{ max-height:120px; opacity:1; margin-top:10px }

/* ===== Band / Stats ===== */
.section--band{padding-top:0}
.band{display:grid; gap:24px; grid-template-columns: 1.2fr .8fr; align-items:center}
.band__stats{display:grid; gap:16px}
.stat{background:#fff; border:1px solid var(--hairline); border-radius: var(--radius); padding:18px; box-shadow: var(--shadow-a)}
.stat__num{font-size:2rem; font-weight:800; color:var(--brand-600)}
.stat__label{color:var(--ink-500)}
@media (max-width: 980px){ .band{grid-template-columns:1fr} }

/* ===== Footer ===== */
.footer{border-top:1px solid var(--hairline); background:#fff}
.footer__inner{height:64px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.muted{color:var(--ink-500)}

/* ===== Mosaiced Pro Theme Additions (non-breaking) ===== */
:root{
  --pro-bg:#0b0f1a;
  --pro-surface:#111827;
  --pro-panel:#0f172a;
  --pro-text:#e5e7eb;
  --pro-muted:#9aa3b2;
  --pro-accent:#2563eb;
  --pro-accent-2:#22c55e;
  --pro-border:#1f2937;
  --pro-radius:14px;
  --pro-shadow:0 8px 24px rgba(0,0,0,.24), 0 2px 8px rgba(0,0,0,.18);
}

html{scroll-behavior:smooth}
body{
  background:var(--pro-bg);
  color:var(--pro-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Header */
.header{
  background:linear-gradient(180deg, rgba(17,24,39,.7), rgba(17,24,39,.3) 60%, transparent);
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--pro-border);
}
.header .logo{font-weight:700;letter-spacing:.3px}
.header .btn--cta{background:var(--pro-accent);color:#fff;border:0}
.header .btn--cta:hover{filter:brightness(1.08)}

/* Containers & Sections */
.container{max-width:1128px;padding:0 22px;margin:0 auto}
.section{padding:56px 0;border-top:1px solid var(--pro-border)}
.section--alt{background:linear-gradient(180deg, rgba(15,23,42,.35), rgba(2,6,23,.2))}

/* Hero */
.hero{padding:88px 0 56px;border-bottom:1px solid var(--pro-border)}
.hero__inner{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero__eyebrow{display:inline-block;color:var(--pro-accent-2);font-weight:600;letter-spacing:.4px;margin-bottom:8px}
.hero__title{font-size:clamp(28px, 3.6vw, 44px);line-height:1.1;margin:0 0 12px}
.hero__sub{color:var(--pro-muted);margin:0 0 18px;font-size:clamp(16px, 2.4vw, 18px)}
.hero__media{border-radius:var(--pro-radius);overflow:hidden;box-shadow:var(--pro-shadow);border:1px solid var(--pro-border)}
.hero .btn{margin-right:10px}

/* Cards & Grids */
.grid{display:grid;gap:22px}
.grid--3{grid-template-columns:repeat(3, minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4, minmax(0,1fr))}
@media (max-width: 980px){
  .hero__inner{grid-template-columns:1fr}
  .grid--3{grid-template-columns:1fr 1fr}
  .grid--4{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .grid--3,.grid--4{grid-template-columns:1fr}
}

.card{background:var(--pro-surface);border:1px solid var(--pro-border);border-radius:var(--pro-radius);padding:22px;box-shadow:var(--pro-shadow)}
.card h3{margin-top:0;margin-bottom:8px}
.card p{color:var(--pro-muted)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:10px 14px;border:1px solid var(--pro-border);background:#0b1220;color:var(--pro-text);text-decoration:none}
.btn:hover{border-color:#2b3649}
.btn-primary{background:var(--pro-accent);border:0;color:#fff}
.btn-secondary{background:#0c1a12;border-color:#123b26}
.link{color:var(--pro-accent);text-decoration:none}
.link:hover{text-decoration:underline}

/* Feature rows */
.feature{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:center}
.feature:nth-child(even){grid-template-columns:1.1fr .9fr}
.feature img{width:100%;border-radius:12px;border:1px solid var(--pro-border)}
.feature p{color:var(--pro-muted)}
@media (max-width: 900px){
  .feature,.feature:nth-child(even){grid-template-columns:1fr}
}

/* Footer */
.site-footer{border-top:1px solid var(--pro-border);padding:28px 0;color:var(--pro-muted)}
.site-footer a{color:var(--pro-text);opacity:.9}