/* styles.css — Faxolotl landing page */
:root{
  --bg1: #f5fbff;
  --bg2: #fff8ff;
  --primary: #6BD6FF;
  --accent: #FFB6C1;
  --muted: #6b7280;
  --max-width: 1080px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{font-family:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color:#111827; margin:0; background: linear-gradient(180deg,var(--bg1), var(--bg2)); -webkit-font-smoothing:antialiased}
.container{max-width:var(--max-width); margin:0 auto; padding:2rem}

.site-header{position:sticky; top:0; z-index:100; backdrop-filter: blur(4px); background: rgba(255,255,255,0.6); border-bottom:1px solid rgba(10,20,40,0.03)}
.header-inner{display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:.5rem}
.logo{height:44px}
.brand-name{font-weight:600; font-size:1.15rem; color:#0F172A}
.nav a{margin-left:1rem; text-decoration:none; color:#0F172A}
.cta-link{background:linear-gradient(90deg,var(--primary), #B6FFE3); padding:.5rem 1rem; border-radius:999px; color:#05384F}

.hero{padding:4rem 0; background: radial-gradient(1200px 600px at 80% 10%, rgba(107,214,255,.06), transparent)}
.hero-inner{display:grid; grid-template-columns: 1fr 420px; gap:2.5rem; align-items:center}
.hero-copy h1{font-size:clamp(1.8rem, 4vw, 2.8rem); margin:0 0 .5rem}
.lead{color:var(--muted); margin:0 0 1rem}
.signup{display:flex; gap:.6rem; margin-top:1rem}
.signup input{flex:1; padding:.7rem 1rem; border-radius:999px; border:1px solid rgba(15,23,42,.06); background:white}
.btn{cursor:pointer; padding:.6rem 1rem; border-radius:10px; border: none; font-weight:600}
.btn.primary{background:linear-gradient(90deg,var(--primary), #4FD1C5); box-shadow: 0 6px 20px rgba(107,214,255,0.18)}
.btn.ghost{background:none; border:1px solid rgba(15,23,42,.06)}
.btn.outline{background:white; border:1px solid rgba(15,23,42,.06)}
.tiny-cta-row{display:flex; gap:.6rem; margin-top:1rem}

.hero-visual{display:flex; align-items:center; justify-content:center}
.paper-stack{position:relative; width:360px; height:260px}
.mascot{position:absolute; right:-34px; top:-22px; width:140px; height:140px; transform: rotate(-5deg); filter: drop-shadow(0 8px 18px rgba(15,23,42,.12))}
.fax-screen{position:absolute; left:0; top:28px; width:220px; height:300px; transform:skew(-8deg); display:flex; align-items:center; justify-content:center}
.paper{width:160px; height:210px; background:white; border-radius:6px; box-shadow: 0 6px 24px rgba(20,20,40,.08); padding:1rem; transform-origin:center;}
.doc-top{display:flex; flex-direction:column; gap:.6rem}
.stamp{background:#FFB6C1; color:#5A0B2A; padding:.25rem .45rem; border-radius:4px; display:inline-block; font-size:.75rem}
.items{margin-top:8px}
.items .row{display:flex; gap:.6rem; align-items:center}
.dot{width:8px; height:8px; border-radius:999px; background:var(--primary)}
.animate{animation: bob 4s ease-in-out infinite}
@keyframes bob{0%{transform: translateY(0)}50%{transform: translateY(-8px)}100%{transform: translateY(0)}}

.features{padding:2.8rem 0}
.features h2{margin:0 0 .25rem}
.grid{display:grid; gap:1rem; grid-template-columns: repeat(2,1fr); margin-top:1rem}
.feature{background:linear-gradient(90deg,#fff,#fbfeff); padding:1rem; border-radius:12px; box-shadow:0 8px 30px rgba(70,80,90,.03)}
.icon{font-size:1.6rem}
.testimonial{padding:2.8rem 0; background: linear-gradient(180deg, rgba(107,214,255,.06), rgba(255,182,193,.03)); border-radius:14px; margin-top:2rem}
.testimonial-inner{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; padding:2rem}
.testimonial blockquote{font-size:1.2rem; margin:0; color:#0F172A}
.site-footer{padding:1rem 0; color:var(--muted)}
.footer-inner{display:flex; justify-content:space-between; align-items:center}
.links a{margin-left:1rem; color:var(--muted)}

/* Responsive */
@media (max-width:880px){
  .hero{padding-top:6rem}
  .hero-inner{grid-template-columns: 1fr;}
  .hero-visual{margin:0 auto}
  .paper-stack{width:260px; height:200px}
  .mascot{right:-18px; top:-12px; width:120px}
  .grid{grid-template-columns: 1fr}
}

/* accessible focus */
:focus{outline:3px solid rgba(107,214,255,.25); outline-offset:3px}

/* small utilities */
.center{text-align:center}
.muted{color:var(--muted)}
.hidden{display:none}