:root{
  --bg1:#e8eff7;
  --bg2:#f6f9ff;
  --ink:#0d2a4a;
  --muted:#5a6c84;
  --line:#d7e0ec;
  --shadow: 0 14px 40px rgba(5, 24, 48, .18);
  --shadow2: 0 10px 26px rgba(5, 24, 48, .12);
  --blue:#1f5ea8;
  --blue2:#154b86;
  --chip:#eef4fb;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 50% 20%, #f9fbff 0%, #e7eff8 45%, #cfddec 100%);
}

.page{
  max-width: 1200px;
  margin: 18px auto 30px;
  border-radius: 14px;
  overflow:hidden;
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
  border: 1px solid rgba(255,255,255,.55);
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(240,246,255,.9));
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand-mark{
  width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  background: linear-gradient(180deg, #e9f5ff, #cfe7ff);
  border: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 6px 14px rgba(12, 76, 140, .15);
}
.brand-name{
  font-weight:800;
  letter-spacing:.2px;
  font-size: 18px;
}

.topnav{
  display:flex;
  align-items:center;
  gap:12px;
  color: var(--muted);
  font-weight:700;
}
.toplink{
  color: var(--ink);
  text-decoration:none;
  padding: 6px 10px;
  border-radius: 10px;
}
.toplink:hover{
  background: rgba(31, 94, 168, .08);
}
.sep{opacity:.6}

.header-band{
  height: 54px;
  background: linear-gradient(180deg, rgba(216,232,249,.95), rgba(240,246,255,.2));
  border-bottom: 1px solid rgba(0,0,0,.05);
}

.hero{
  padding: 22px 22px 28px;
  text-align:center;
}

.status{
  display:inline-flex;
  gap:10px;
  align-items:center;
  color: var(--muted);
  font-weight:700;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.06);
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(5, 24, 48, .08);
  margin-top: -34px;
}
.dot{
  width:10px;height:10px;border-radius:50%;
  background: linear-gradient(180deg, #4aa3ff, #1f5ea8);
  box-shadow: 0 0 0 5px rgba(31,94,168,.12);
}

h1{
  margin: 18px 0 16px;
  font-size: clamp(34px, 4vw, 54px);
  letter-spacing: -0.8px;
  color: #1c3a5f;
}

.ask{
  max-width: 860px;
  margin: 0 auto;
  display:flex;
  align-items:stretch;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  overflow:hidden;
  box-shadow: var(--shadow2);
}

.ask-input{
  flex: 1;
  padding: 16px 18px;
  font-size: 16px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--ink);
}

.ask-btn{
  width: 160px;
  border: none;
  cursor:pointer;
  font-weight: 800;
  font-size: 18px;
  color:#fff;
  background: linear-gradient(180deg, var(--blue), var(--blue2));
}

.ask-btn:active{transform: translateY(1px);}

.chips{
  max-width: 860px;
  margin: 14px auto 18px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap: 10px;
}

.chip{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.7);
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  color: #234a73;
  cursor:pointer;
  box-shadow: 0 8px 18px rgba(5, 24, 48, .08);
}
.chip:hover{background: rgba(255,255,255,.92);}

.tiles{
  max-width: 1060px;
  margin: 12px auto 0;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.tile{
  position:relative;
  height: 172px;
  border-radius: 14px;
  overflow:hidden;
  box-shadow: 0 16px 34px rgba(5, 24, 48, .20);
  border: 1px solid rgba(255,255,255,.28);
  cursor:pointer;
}
.tile:hover{transform: translateY(-2px);}
.tile{transition: transform .15s ease;}

.tile-bg{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}
.tile-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.45));
}
.tile-content{
  position:absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  text-align:left;
  color:#fff;
}
.tile-title{
  font-size: 20px;
  font-weight: 900;
  text-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.tile-sub{
  opacity:.95;
  font-weight:700;
  margin-top: 4px;
  text-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* Placeholder “photo” backgrounds (swap later with real images) */
.bg1{ background-image: linear-gradient(135deg, rgba(31,94,168,.0), rgba(31,94,168,.25)), url("https://images.unsplash.com/photo-1563453392212-326f5e854473?auto=format&fit=crop&w=1200&q=60"); }
.bg2{ background-image: linear-gradient(135deg, rgba(31,94,168,.0), rgba(31,94,168,.25)), url("https://images.unsplash.com/photo-1581579185169-7b8b6c2f2b43?auto=format&fit=crop&w=1200&q=60"); }
.bg3{ background-image: linear-gradient(135deg, rgba(31,94,168,.0), rgba(31,94,168,.25)), url("https://images.unsplash.com/photo-1584744982499-717e2adf0d53?auto=format&fit=crop&w=1200&q=60"); }
.bg4{ background-image: linear-gradient(135deg, rgba(31,94,168,.0), rgba(31,94,168,.25)), url("https://images.unsplash.com/photo-1615873968403-89e068629265?auto=format&fit=crop&w=1200&q=60"); }
.bg5{ background-image: linear-gradient(135deg, rgba(31,94,168,.0), rgba(31,94,168,.25)), url("https://images.unsplash.com/photo-1581578731548-c64695cc6952?auto=format&fit=crop&w=1200&q=60"); }
.bg6{ background-image: linear-gradient(135deg, rgba(31,94,168,.0), rgba(31,94,168,.25)), url("https://images.unsplash.com/photo-1581579185169-7b8b6c2f2b43?auto=format&fit=crop&w=1200&q=60"); }

/* Mobile match */
@media (max-width: 980px){
  .tiles{ grid-template-columns: repeat(2, 1fr); }
  .ask{ max-width: 92%; }
  .chips{ max-width: 92%; }
}
@media (max-width: 640px){
  .topnav .sep{display:none;}
  .topnav a:nth-child(3),
  .topnav a:nth-child(5){ display:none; } /* hide some links like the mock */
  .ask-btn{ width: 128px; }
  .tiles{ grid-template-columns: 1fr; }
  .tile{ height: 168px; }
}

/* Optional messages area (hidden for now) */
.messages{ display:none; }
