/* ── HOME PAGE SPECIFIC STYLES ─────────────────────– */

/* ── NAVIGATION ────────────────────────────────────── */
nav{padding:20px 40px;display:flex;align-items:center;}
.logo{font-size:20px;font-weight:700;display:flex;align-items:center;gap:8px;}
.logo-dot{width:8px;height:8px;border-radius:50%;background:var(--terra);}

/* ── MAIN SECTION ──────────────────────────────────– */
main{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 24px;}
.center{text-align:center;max-width:560px;}

/* ── TYPOGRAPHY ────────────────────────────────────– */
.eyebrow{font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:20px;}
h1{font-size:48px;font-weight:800;line-height:1.1;letter-spacing:-.025em;margin-bottom:16px;}
h1 i{font-style:italic;font-family:'PT Serif',Georgia,serif;font-weight:400;color:var(--sky);}
.tagline{font-size:17px;color:rgba(255,255,255,.5);line-height:1.65;margin-bottom:48px;font-family:'PT Serif',Georgia,serif;font-style:italic;}

/* ── PRODUCTS LIST ─────────────────────────────────– */
.products{display:flex;flex-direction:column;gap:14px;align-items:center;}

/* ── CARD COMPONENT ────────────────────────────────– */
.card{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:420px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:20px 24px;transition:all .2s;}
a.card:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);transform:translateY(-1px);}
.info{text-align:left;}
.name{font-size:16px;font-weight:700;margin-bottom:4px;}
.desc{font-size:13px;color:rgba(255,255,255,.45);}

/* ── BADGE ─────────────────────────────────────────– */
.badge{font-size:11px;font-weight:600;padding:4px 10px;border-radius:100px;white-space:nowrap;flex-shrink:0;margin-left:12px;}
.beta{background:rgba(196,90,54,.2);color:#e88a6a;border:1px solid rgba(196,90,54,.3);}
.soon{background:rgba(255,255,255,.07);color:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.1);}

/* ── ARROW ─────────────────────────────────────────– */
.arr{color:rgba(255,255,255,.25);font-size:18px;margin-left:12px;flex-shrink:0;}
a.card:hover .arr{color:rgba(255,255,255,.6);}

/* ── FOOTER ────────────────────────────────────────– */
footer{padding:24px 40px;text-align:center;font-size:13px;color:rgba(255,255,255,.2);}

/* ── RESPONSIVE ────────────────────────────────────– */
@media(max-width:768px){
  nav{padding:16px 0;}
  .logo{font-size:18px;}
  .eyebrow{font-size:12px;margin-bottom:16px;}
  .badge{font-size:12px;padding:3px 8px;}
}

@media(max-width:414px){
  nav{padding:14px 0;}
  .logo{font-size:16px;}
  h1{font-size:28px;line-height:1.2;}
  .eyebrow{font-size:11px;margin-bottom:12px;}
  .tagline{font-size:14px;margin-bottom:32px;}
  .card{padding:14px 16px;gap:12px;}
  .name{font-size:15px;}
  .desc{font-size:12px;}
  .badge{font-size:11px;padding:3px 8px;margin-left:8px;}
  .arr{font-size:16px;margin-left:8px;}
  footer{padding:20px 0;font-size:12px;}
}