/* =========================================================
   hero.css — hero section + phone chat mockup
   ========================================================= */

.hero{
  position:relative;
  background:
    radial-gradient(900px 500px at 78% 20%, rgba(46,204,130,0.14), transparent 60%),
    linear-gradient(180deg, var(--cream-100), var(--cream-200));
  color:var(--ink-900);
  overflow:hidden;
  padding:96px 0 120px;
}
.hero .container{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:48px;
  align-items:center;
}
.hero-copy h1{
  font-family:var(--font-serif);
  font-size:2.9rem;
  line-height:1.15;
  font-weight:600;
  margin:0 0 22px;
  letter-spacing:-0.01em;
  color:var(--ink-900);
}
.hero-copy p{
  font-size:1.05rem;
  line-height:1.7;
  color:var(--ink-600);
  max-width:480px;
  margin:0 0 34px;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

/* Phone mockup */
.phone-wrap{
  display:flex;
  justify-content:center;
  position:relative;
}
.phone-wrap::before{
  content:"";
  position:absolute;
  width:420px; height:420px;
  background:radial-gradient(circle, rgba(46,204,130,0.30), transparent 70%);
  filter:blur(20px);
  z-index:0;
}
.phone{
  position:relative;
  z-index:1;
  width:300px;
  background:#0c1512;
  border-radius:42px;
  padding:14px;
  box-shadow:0 30px 70px rgba(0,0,0,0.55), inset 0 0 0 2px rgba(255,255,255,0.06);
}
.phone-notch{
  position:absolute;
  top:14px; left:50%;
  transform:translateX(-50%);
  width:120px; height:22px;
  background:#0c1512;
  border-radius:0 0 16px 16px;
  z-index:3;
}
.phone-screen{
  background:#0f1a16;
  border-radius:30px;
  overflow:hidden;
  min-height:520px;
  display:flex;
  flex-direction:column;
}
.chat-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  background:#1f2c26;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.chat-header .back-arrow{ display:flex; color:rgba(255,255,255,0.8); flex-shrink:0; }
.chat-header .chat-avatar{
  width:32px; height:32px; border-radius:50%;
  overflow:hidden;
  display:grid; place-items:center;
  background:#13201b;
  flex-shrink:0;
}
.chat-header .chat-avatar img{ width:100%; height:100%; object-fit:cover; }
.chat-header .chat-id{ min-width:0; }
.chat-header .chat-id strong{
  display:block;
  font-size:0.8rem;
  color:#fff;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chat-header .chat-id span{ font-size:0.66rem; color:rgba(255,255,255,0.55); }
.chat-header .chat-icons{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:16px;
  color:rgba(255,255,255,0.8);
  flex-shrink:0;
}
.chat-header .chat-icons .icon-btn{ display:flex; }

.chat-body{
  flex:1;
  padding:14px 10px;
  display:flex;
  flex-direction:column;
  gap:9px;
  overflow-y:auto;
  background:#0b1512;
  background-image:
    radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:14px 14px;
}
.chat-day{
  display:flex;
  justify-content:center;
  margin:2px 0 6px;
}
.chat-day span{
  background:#182420;
  color:rgba(255,255,255,0.5);
  font-size:0.6rem;
  letter-spacing:0.03em;
  padding:4px 12px;
  border-radius:8px;
}
.bubble{
  position:relative;
  max-width:82%;
  padding:7px 8px 8px 10px;
  border-radius:9px;
  font-size:0.73rem;
  line-height:1.45;
  box-shadow:0 1px 1px rgba(0,0,0,0.2);
}
.bubble .time{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:3px;
  font-size:0.58rem;
  margin-top:3px;
  opacity:0.7;
  text-align:right;
}
.bubble .time .check{ flex-shrink:0; }
.bubble.out{
  align-self:flex-end;
  background:#0d5c46;
  color:#e9fff5;
  border-bottom-right-radius:2px;
}
.bubble.out .time{ color:rgba(233,255,245,0.75); }
.bubble.in{
  align-self:flex-start;
  background:#1f2c26;
  color:rgba(255,255,255,0.9);
  border-bottom-left-radius:2px;
}
.bubble.in a{ color:var(--mint-400); text-decoration:underline; }

.chat-input{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px 12px;
  background:#1f2c26;
  border-top:1px solid rgba(255,255,255,0.06);
}
.chat-input input{
  flex:1;
  background:#2a3a33;
  border:none;
  border-radius:999px;
  padding:9px 14px;
  color:#fff;
  font-size:0.75rem;
  outline:none;
  min-width:0;
}
.chat-input input::placeholder{ color:rgba(255,255,255,0.4); }
.chat-input .icon-btn{
  color:rgba(255,255,255,0.55);
  background:none;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  padding:0;
}
.chat-input .send-btn{
  width:32px; height:32px;
  border-radius:50%;
  background:linear-gradient(180deg,var(--mint-400),var(--mint-600));
  display:grid; place-items:center;
  border:none;
  flex-shrink:0;
}

@media (max-width: 980px){
  .hero .container{ grid-template-columns:1fr; text-align:center; }
  .hero-copy p{ margin-left:auto; margin-right:auto; }
  .hero-actions{ justify-content:center; }
  .phone-wrap{ order:-1; }
}

@media (max-width: 720px){
  .hero-copy h1{ font-size:2.2rem; }
}