/* --- Base --- */
:root{
  --ink:#0b1220;
  --muted:#5b667a;
  --white:#fff;
  --glass: rgba(255,255,255,.72);
  --glass2: rgba(255,255,255,.88);
  --navy:#1f3a5f;
  --navy2:#15304f;
  --shadow: 0 18px 40px rgba(0,0,0,.16);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  color:var(--ink);
  background:#e9eef6;
}

/* --- Hero --- */
.hero{
  position:relative;
  min-height: 1050px;
  background: url("assets/motlawa-hero.jpg") center/cover no-repeat;
  overflow:hidden;
}

.hero__scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(15,22,33,.38), rgba(15,22,33,.12) 45%, rgba(15,22,33,0) 75%);
}

.hero__top{
  position:relative;
  text-align:center;
  padding-top: 44px;
  color: #f6f7fb;
  letter-spacing: .08em;
}

.hero__kicker{
  font-size: 34px;
  font-weight: 500;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.35);
  display:inline-block;
  padding-bottom: 12px;
}

.hero__name{
  font-family: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  margin-top: 18px;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: .14em;
}

/* --- Chat widget area (matches mock layout) --- */
.chat{
  position:relative;
  margin-top: 56px;
  display:flex;
  justify-content:center;
}

.chat__shell{
  width: min(980px, 92vw);
  display:flex;
  gap: 18px;
  align-items:flex-start;
}

.chat__avatar{
  width: 160px;
  height: 160px;
  border-radius: 28px;
  background: rgba(25,44,72,.45);
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 14px 32px rgba(0,0,0,.18);
  backdrop-filter: blur(6px);
}

.chat__avatar img{
  width: 116px;
  height: 116px;
  border-radius: 999px;
  object-fit: cover;
  border: 4px solid rgba(255,255,255,.25);
}

.chat__window{
  flex:1;
  border-radius: 22px;
  background: var(--glass);
  box-shadow: var(--shadow);
  overflow:hidden;
  backdrop-filter: blur(10px);
}

.chat__titlebar{
  height: 64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 22px;
  background: rgba(255,255,255,.58);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.chat__title{
  font-family: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #1b2a41;
}

.chat__actions{
  display:flex;
  gap:16px;
  color:#2d3b52;
  font-size: 22px;
  opacity:.75;
}

.chat__log{
  height: 190px;
  padding: 14px 18px;
  overflow:auto;
  font-family: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  color:#162238;
  line-height: 1.35;
}

.msg{margin: 8px 0}
.msg b{font-weight:800}
.msg--assistant b{color:#0d2b56}
.msg--user b{color:#4b5568}

.chat__composer{
  padding: 18px 18px 14px;
}

.chat__bubble{
  background: rgba(255,255,255,.85);
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  padding: 16px 16px;
}

.chat__bubble input{
  width:100%;
  border:0;
  outline:none;
  font-size: 22px;
  background:transparent;
  font-family: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  color:#2b364a;
}

.chat__controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top: 14px;
  padding: 0 2px;
}

.chat__mic{
  width: 68px;
  height: 52px;
  border-radius: 12px;
  border: 0;
  background: rgba(255,255,255,.65);
  font-size: 22px;
  cursor:pointer;
}

.chat__send{
  width: 210px;
  height: 56px;
  border-radius: 12px;
  border:0;
  background: #243a5b;
  color:#fff;
  font-family: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: .08em;
  cursor:pointer;
}

.chat__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 18px 18px;
}

.chat__summary{
  border:0;
  background: rgba(36,58,91,.18);
  color:#0f2343;
  border-radius: 12px;
  padding: 12px 14px;
  font-family: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  cursor:pointer;
}

.chat__note{
  font-family: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  color:#2f3b52;
  font-size: 13px;
  opacity: .9;
}

/* --- About section (matches mock: text left, photo right, Motława bg) --- */
.page{
  background: url("assets/motlawa-section.jpg") center/cover no-repeat;
}


.about{
  padding: 64px 0 40px;
}

.about__inner{
  width: min(1100px, 92vw);
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 32px;
  align-items:end;
}

.about__copy{
  background: rgba(255,255,255,.0);
  padding: 8px 0 0;
}

.about__copy h2{
  font-family: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 54px;
  font-weight: 800;
  margin: 0 0 18px;
  color:#1a2a44;
}

.about__copy ul{
  margin: 0 0 18px;
  padding-left: 24px;
  font-family: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 22px;
  color:#253552;
  line-height:1.5;
}

.about__copy p{
  margin: 0;
  font-family: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 20px;
  color:#24324a;
  line-height:1.55;
  max-width: 560px;
}

.about__buttons{margin-top: 22px; display:flex; gap: 14px; flex-wrap:wrap}

.btn{
  display:inline-block;
  padding: 14px 16px;
  border-radius: 14px;
  text-decoration:none;
  background: rgba(36,58,91,.72);
  color:#fff;
  font-family: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 800;
}

.btn--ghost, .btn.btn--ghost{
  background: rgba(255,255,255,.62);
  color:#0f2343;
  border: 1px solid rgba(15,35,67,.25);
}

.about__photo{
  display:flex;
  justify-content:flex-end;
}

.about__photo img{
  width: min(520px, 44vw);
  height: auto;
  border-radius: 18px;
  box-shadow: 0 22px 50px rgba(0,0,0,.20);
}

/* Footer */
.foot{padding: 28px 0 40px}
.foot__inner{width:min(1100px,92vw);margin:0 auto}
.foot__small{
  font-family: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 12px;
  color: rgba(20,30,50,.75);
  text-align:left;
}

/* Modal */
.modal::backdrop{background: rgba(0,0,0,.45)}
.modal{border:0;background:transparent;padding:0}
.modal__card{
  width: min(560px, 92vw);
  background: rgba(255,255,255,.96);
  border-radius: 18px;
  padding: 18px 18px 14px;
  box-shadow: 0 30px 70px rgba(0,0,0,.28);
  font-family: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
}
.modal__p{color:#24324a;line-height:1.5;margin: 8px 0 14px}
.modal__label{display:flex;flex-direction:column;gap:6px;font-weight:700;color:#0f2343}
.modal__label input{padding:12px;border-radius:12px;border:1px solid #cfd7e6;font-size:16px}
.modal__check{display:flex;gap:10px;align-items:flex-start;margin: 14px 0 10px;color:#24324a}
.modal__actions{display:flex;justify-content:flex-end;gap:10px;margin-top: 12px}
.modal__fineprint{font-size:12px;color:#5b667a;margin: 10px 0 4px}

/* Responsive */
@media (max-width: 980px){
  .chat__shell{flex-direction:column;align-items:center}
  .chat__avatar{width: 120px; height: 120px}
  .chat__avatar img{width: 90px; height: 90px}
  .hero{min-height: 1120px}
  .about__inner{grid-template-columns: 1fr; align-items:start}
  .about__copy h2{font-size: 40px}
  .about__photo{justify-content:center}
  .about__photo img{width:min(560px, 88vw)}
}


@media (max-width: 760px){
  .hero__kicker{font-size:22px}
  .hero__name{font-size:24px}
  .chat__title{font-size:20px}
  .about__copy h2{font-size:32px}
  .about__copy ul{font-size:18px}
  .about__copy p{font-size:16px}
}