/* Recens Host — home / landing page */

/* HERO */
.hero{padding:76px 0 40px; position:relative; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
.badge{margin-bottom:22px;}
h1{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(34px, 4.4vw, 52px); line-height:1.05; letter-spacing:-0.02em; margin-bottom:20px;
}
h1 .accent{color:var(--amber);}
.hero .sub{font-size:17px; color:var(--slate); max-width:480px; margin-bottom:32px; line-height:1.6;}
.hero-actions{display:flex; gap:14px; margin-bottom:20px; flex-wrap:wrap;}
.hero-note{font-family:var(--font-mono); font-size:12.5px; color:var(--slate-light);}

/* TERMINAL PANEL */
.terminal{background:var(--ink); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-lg);}
.term-bar{display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,0.08);}
.term-dot{width:9px; height:9px; border-radius:50%; background:#3A4457;}
.term-title{font-family:var(--font-mono); font-size:12px; color:var(--slate-light); margin-left:6px;}
.term-body{padding:22px 22px 26px; font-family:var(--font-mono); font-size:14px;}
.term-line{color:#7C8798; margin-bottom:10px;}
.term-line .prompt{color:var(--mint); margin-right:8px;}
.term-input{color:var(--frost);}
.cursor{display:inline-block; width:7px; height:15px; background:var(--amber); vertical-align:middle; margin-left:2px; animation:blink 1s step-end infinite;}
@keyframes blink{50%{opacity:0;}}
.term-results{margin-top:14px; display:flex; flex-direction:column; gap:8px;}
.term-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; background:rgba(255,255,255,0.03); border-radius:8px;
  border:1px solid rgba(255,255,255,0.06); opacity:0; animation:rise 0.4s ease forwards;
}
.term-row:nth-child(1){animation-delay:0.9s;}
.term-row:nth-child(2){animation-delay:1.15s;}
.term-row:nth-child(3){animation-delay:1.4s;}
.term-row:nth-child(4){animation-delay:1.65s;}
@keyframes rise{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}
.term-domain{color:var(--frost);}
.status-chip{font-size:11px; padding:3px 9px; border-radius:20px; font-weight:600; letter-spacing:0.02em;}
.status-available{background:rgba(62,217,160,0.14); color:var(--mint);}
.status-taken{background:rgba(232,163,61,0.14); color:var(--amber);}
.term-price{color:var(--slate-light); font-size:12.5px;}

/* STATS */
.stats-section{padding:32px 0 48px;}

/* FEATURES */
.features{background:var(--white); border-top:1px solid var(--frost-dim); border-bottom:1px solid var(--frost-dim);}
.feature-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--frost-dim); border:1px solid var(--frost-dim); border-radius:14px; overflow:hidden;}
.feature-card{background:var(--white); padding:28px 24px; transition:background 0.15s ease;}
.feature-card:hover{background:#FBFCFC;}
.feature-tag{font-family:var(--font-mono); font-size:11px; color:var(--mint); background:rgba(62,217,160,0.1); display:inline-block; padding:2px 8px; border-radius:4px; margin-bottom:16px; letter-spacing:0.03em;}
.feature-card h3{font-family:var(--font-display); font-size:17px; font-weight:600; margin-bottom:8px;}
.feature-card p{font-size:13.5px; color:var(--slate);}

/* HOSTING TEASER */
.plan-teaser-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.plan-mini{
  position:relative; display:block; background:var(--white); border:1px solid var(--frost-dim); border-radius:14px; padding:26px 26px 28px;
  box-shadow:var(--shadow-sm); transition:transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.plan-mini:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--slate-light);}
.plan-mini.featured{border-color:var(--ink); box-shadow:var(--shadow-md);}
.plan-mini-badge{position:absolute; top:-11px; left:26px; background:var(--amber); color:var(--ink); font-family:var(--font-mono); font-size:11px; padding:4px 10px; border-radius:6px; font-weight:600;}
.plan-mini-name{font-family:var(--font-display); font-weight:600; font-size:18px; margin-bottom:8px;}
.plan-mini-price{font-family:var(--font-mono); font-size:30px; font-weight:600; letter-spacing:-0.02em;}
.plan-mini-price span{font-size:14px; color:var(--slate); font-weight:400;}
.plan-mini-meta{font-size:13px; color:var(--slate); margin-top:12px;}
.teaser-cta{margin-top:32px;}

/* DOMAINS TEASER */
.domains-teaser{background:var(--white); border-top:1px solid var(--frost-dim); border-bottom:1px solid var(--frost-dim);}
.domains-panel{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.domains-panel-copy h2{margin-bottom:12px;}
.domains-panel-copy p{color:var(--slate); font-size:15px; margin-bottom:24px; max-width:400px;}
.tld-strip{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.tld-chip{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--frost); border:1px solid var(--frost-dim); border-radius:10px; padding:16px 18px;
}
.tld-chip .tld{font-family:var(--font-mono); font-weight:600; font-size:16px;}
.tld-chip .tld-price{font-family:var(--font-mono); font-size:13px; color:var(--slate);}

/* TESTIMONIAL */
.quote{max-width:820px; margin:0 auto; text-align:center;}
.quote blockquote{font-family:var(--font-display); font-weight:500; font-size:clamp(20px,2.4vw,27px); line-height:1.4; letter-spacing:-0.01em;}
.quote figcaption{display:inline-flex; align-items:center; gap:12px; margin-top:28px;}
.q-avatar{width:40px; height:40px; border-radius:50%; background:var(--amber); color:var(--ink); font-family:var(--font-mono); font-weight:600; font-size:13px; display:inline-flex; align-items:center; justify-content:center;}
.q-meta{display:flex; flex-direction:column; text-align:left; font-size:13.5px;}
.q-meta b{font-weight:600;}
.q-meta span{color:var(--slate); font-size:12.5px;}

/* CTA BANNER */
.cta-banner{
  background:var(--ink); border-radius:20px; padding:56px 48px;
  display:flex; align-items:center; justify-content:space-between; gap:40px;
  background-image:radial-gradient(circle at 85% 20%, rgba(232,163,61,0.16), transparent 55%);
}
.cta-banner h2{color:var(--frost);}
.cta-banner p{color:var(--slate-light); font-size:14.5px; max-width:420px;}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .feature-grid{grid-template-columns:repeat(2,1fr);}
  .plan-teaser-grid{grid-template-columns:1fr;}
  .domains-panel{grid-template-columns:1fr; gap:32px;}
  .cta-banner{flex-direction:column; align-items:flex-start;}
}