/* ==========================================================================
   AskWisy — Home hero & buttons
   --------------------------------------------------------------------------
   Home page hero section, the primary/secondary button styles used site-wide,
   and the (currently unused) phone chat mockup styles.
   ========================================================================== */

/* ── HERO ── */
.hero{
  min-height:100svh;display:flex;align-items:center;
  background:var(--navy);position:relative;overflow:hidden;
  padding-top:var(--nav-h);
}
.hero-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 80% 40%,rgba(59,155,213,.15) 0%,transparent 70%),
    radial-gradient(ellipse 40% 60% at 10% 80%,rgba(201,137,42,.1) 0%,transparent 60%);
}
.hero-grid{
  position:absolute;inset:0;opacity:.04;pointer-events:none;
  background-image:linear-gradient(var(--sky) 1px,transparent 1px),linear-gradient(90deg,var(--sky) 1px,transparent 1px);
  background-size:60px 60px;
}
.hero-inner{
  position:relative;max-width:none;margin:0;width:100%;
  padding:80px clamp(20px,4vw,48px);
  display:grid;grid-template-columns:1fr;gap:60px;align-items:flex-start;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(201,137,42,.15);border:1px solid rgba(201,137,42,.4);
  color:var(--gold2);font-size:.75rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;padding:6px 14px;border-radius:100px;margin-bottom:28px;
}
.hero-eyebrow::before{content:'●';font-size:.5rem;animation:bpulse 2s infinite}
@keyframes bpulse{0%,100%{opacity:1}50%{opacity:.3}}
.hero h1{
  font-family:'Helvetica',serif;font-size:clamp(2.4rem,6vw,3.8rem);
  font-weight:900;color:#fff;line-height:1.05;letter-spacing:-.03em;margin-bottom:28px;
}
.hero h1 em{color:var(--gold);font-style:normal}
.hero-sub{font-size:clamp(.95rem,2vw,1.15rem);color:rgba(255,255,255,.68);line-height:1.7;margin-bottom:44px;max-width:none}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.btn-primary{
  background:var(--gold);color:#fff;padding:14px 28px;border-radius:10px;
  font-weight:600;font-size:.95rem;cursor:pointer;border:none;
  transition:all .25s;display:inline-flex;align-items:center;gap:8px;min-height:48px;
}
.btn-primary:hover{background:var(--gold2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(201,137,42,.4)}
.btn-secondary{
  background:rgba(255,255,255,.08);color:#fff;padding:14px 28px;border-radius:10px;
  font-weight:500;font-size:.95rem;cursor:pointer;border:1px solid rgba(255,255,255,.2);
  transition:all .25s;display:inline-flex;align-items:center;gap:8px;min-height:48px;
}
.btn-secondary:hover{background:rgba(255,255,255,.15)}

/* ── PHONE MOCKUP ── */
/* .phone-wrap{position:relative;width:clamp(220px,35vw,280px);animation:float 4s ease-in-out infinite} */
/* .phone-wrap{position:relative;width:clamp(220px,35vw,280px);} */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.phone-shell{
  background:var(--navy2);border:2px solid rgba(255,255,255,.12);
  border-radius:36px;padding:16px;box-shadow:0 40px 80px rgba(0,0,0,.5);
}
.phone-screen{background:#0A1520;border-radius:24px;padding:24px 16px;min-height:420px}
.phone-status{display:flex;justify-content:space-between;color:rgba(255,255,255,.4);font-size:.65rem;margin-bottom:16px;font-family:'DM Mono',monospace}
.call-header{text-align:center;margin-bottom:20px}
.call-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--sky));margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:1.6rem}
.call-name{color:#fff;font-weight:600;font-size:1rem}
.call-status{color:var(--sky);font-size:.75rem;margin-top:4px}
.chat-bubble{border-radius:12px;padding:10px 14px;font-size:.78rem;margin-bottom:10px;line-height:1.5}
.bubble-ai{background:rgba(27,108,168,.3);color:rgba(255,255,255,.9);border-bottom-left-radius:3px}
.bubble-user{background:rgba(201,137,42,.25);color:rgba(255,255,255,.85);border-bottom-right-radius:3px;margin-left:20px}
.typing{display:flex;gap:4px;align-items:center;padding:8px 12px}
.typing span{width:6px;height:6px;border-radius:50%;background:var(--sky);animation:typingDot 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes typingDot{0%,80%,100%{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
.phone-badge{
  position:absolute;right:-20px;top:80px;
  background:var(--gold);color:#fff;border-radius:10px;padding:10px 14px;
  font-size:.75rem;font-weight:700;box-shadow:0 8px 24px rgba(201,137,42,.5);white-space:nowrap;
}
.phone-badge2{
  position:absolute;left:-20px;bottom:100px;
  background:var(--navy2);border:1px solid rgba(59,155,213,.4);color:#fff;
  border-radius:10px;padding:10px 14px;font-size:.72rem;font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.3);white-space:nowrap;
}

/* Longer positioning headline (website brief A1) — scaled down so the
   15-word headline stays within ~4 lines on desktop. */
.hero h1.hero-h1-long{font-size:clamp(1.3rem,3.6vw,3.1rem);line-height:1.12}
/* Always two lines: each span is a block. Sizing is vw-based so line 1 and (on
   tablet/laptop) line 2 fit on one row; on phones line 2 wraps evenly. */
.hero h1.hero-h1-long .hero-h1-line{display:block;text-wrap:balance}
.hero h1.hero-h1-long .hero-h1-line:first-child{white-space:nowrap}
@media (max-width:599px){
  .hero h1.hero-h1-long{font-size:clamp(1.2rem,5.3vw,2rem)}
  .hero-inner{padding-left:16px;padding-right:16px}
  .hero-inner > div:first-child{text-align:center}
  .hero-actions{justify-content:center}
}