/* ========================================
   Theme: "hostiko" — matches hostiko.com/layout91
   Palette (from live site):
     accent teal   #38ACA8   ·  secondary orange #FD9009
     headings navy #232E3D   ·  body text        #666666
     pale section  #EBF7F6
   Fonts: Raleway (headings) + Inter (UI/body)
   Signature look: white canvas, pill buttons,
   airy white cards with very soft wide shadows.
   ======================================== */

:root {
  /* Backgrounds */
  --bg-primary:    #ffffff;
  --bg-secondary:  #EBF7F6;
  --bg-footer:     #232E3D;
  --bg-card:       #ffffff;
  --bg-card-hover: #ffffff;
  --navbar-bg:     rgba(255,255,255,0.95);
  --navbar-solid:  rgba(255,255,255,0.98);

  /* Accents */
  --accent-cyan:   #38ACA8;
  --accent-gold:   #FD9009;
  --accent-purple: #0088e9;

  /* Text */
  --text-primary:  #232E3D;
  --text-muted:    #666666;
  --text-secondary:#3d4c63;
  --on-accent:     #ffffff;
  --link-hover:    #FD9009;

  /* Buttons */
  --btn-hover-bg:  #2c8b88;
  --btn-gold-hover:#e07f06;

  /* Status colors */
  --ok:            #38ACA8;
  --warn:          #FD9009;
  --danger:        #fb666b;

  /* Discount tag */
  --discount-from:   #f2d22f;
  --discount-to:     #FD9009;
  --discount-shadow: 0 6px 14px rgba(253,144,9,0.25);

  /* Borders & effects — hostiko's very soft, wide shadows */
  --border:        rgba(35,46,61,0.08);
  --border-hover:  rgba(56,172,168,0.6);
  --radius:        20px;
  --radius-sm:     12px;
  --shadow:        0 18px 50px rgba(35,46,61,0.08);
  --glow-cyan:     0 18px 50px rgba(56,172,168,0.18);
  --glow-gold:     0 18px 50px rgba(253,144,9,0.18);
  --transition:    0.25s cubic-bezier(.4,0,.2,1);

  /* Typography */
  --font-body:     'Inter', 'Raleway', system-ui, sans-serif;
  --font-heading:  'Raleway', 'Inter', system-ui, sans-serif;
  --font-mono:     'Inter', sans-serif;
}

/* ---------- Layout: use the full screen width ---------- */
.container {
  max-width: none;
  padding-inline: clamp(20px, 4vw, 64px);
}
.hk-plans-grid { max-width: none; }
.hk-domain-chips { max-width: none; }
.domain-search-box { max-width: 820px; }

/* ---------- Typography ---------- */
body { font-family: var(--font-body); color: var(--text-muted); }
h1, h2, h3, h4, h5 { font-family: var(--font-heading); color: var(--text-primary); font-weight: 700; }
.mono,
.navbar-brand span,
.hero-tag, .hero-stat-value, .hero-panel-price .price-val,
.badge, .nvme-badge, .nvme,
.popular-badge, .plan-badge, .plan-discount-tag,
.discount-tag, .pricing-currency, .pricing-amount,
.price-dollar, .price-amount, .price-block span,
.comparison-table th, .testimonial-author span,
.footer-brand-name, .footer-col h4, .footer-contact-item .email,
.footer-bottom p, .breadcrumb, .domain-search-bar input,
.domain-search-input, .trust-pills span, .blog-tag, .blog-date,
.stat-number { font-family: var(--font-body); }

/* ---------- Navbar ---------- */
.navbar { border-bottom: none; }
.navbar.scrolled { box-shadow: 0 6px 30px rgba(35,46,61,0.07); }
.navbar-nav a {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.92rem;
}
.navbar-nav a:hover,
.navbar-nav a.active { color: var(--accent-cyan); background: rgba(56,172,168,0.09); }

/* ---------- Buttons: hostiko pill CTAs ---------- */
.btn {
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 0.82rem;
  border-radius: 100px;
  padding: 13px 28px;
  box-shadow: 0 10px 24px rgba(35,46,61,0.12);
}
.btn-lg { padding: 16px 34px; font-size: 0.9rem; }
.btn-primary { background: var(--accent-cyan); box-shadow: 0 10px 24px rgba(56,172,168,0.35); }
.btn-primary:hover { background: var(--btn-hover-bg); color: var(--on-accent); }
.btn-gold { background: var(--accent-gold); box-shadow: 0 10px 24px rgba(253,144,9,0.35); }
.btn-gold:hover { background: var(--btn-gold-hover); }
.btn-outline {
  border: 2px solid var(--accent-cyan);
  box-shadow: none;
  color: var(--accent-cyan);
}
.btn-outline:hover { background: var(--accent-cyan); color: #fff; }

/* ---------- Hero ---------- */
.hero { padding: 80px 0 100px; }
.hero::before {
  background:
    radial-gradient(ellipse 55% 45% at 15% 30%, rgba(56,172,168,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 85% 70%, rgba(253,144,9,0.06) 0%, transparent 70%);
}
.hero-grid-bg {
  background-image:
    linear-gradient(rgba(56,172,168,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,172,168,0.045) 1px, transparent 1px);
}
.hero h1 .highlight {
  background: linear-gradient(135deg, var(--accent-cyan) 0%, #4fc3bd 60%, var(--accent-gold) 130%);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero-tag {
  background: rgba(56,172,168,0.09);
  border: 1px solid rgba(56,172,168,0.25);
  color: var(--accent-cyan);
  font-family: var(--font-heading);
  font-weight: 600;
}
.hero-sub { font-size: 1.05rem; }
.hero-stat-value { color: var(--accent-cyan); font-family: var(--font-heading); font-size: 1.6rem; }

/* ---------- Cards ---------- */
.feature-card, .pricing-card, .testimonial-card, .faq-item,
.guide-card, .blog-card, .channel-card, .contact-info-panel,
.info-card, .stat-card, .tech-card, .tld-card,
.hero-panel-card, .da-panel-card {
  box-shadow: var(--shadow);
  border: 1px solid rgba(35,46,61,0.05);
}
.hero-panel-card { border-radius: 100px; padding: 14px 24px; }
.hero-panel-card:hover { transform: translateX(6px); }
.hero-panel-price .price-val { color: var(--accent-gold); font-size: 1.1rem; }
.feature-icon { background: rgba(56,172,168,0.10); border-radius: 50%; width: 56px; height: 56px; }
.guide-icon, .blog-card-icon { color: var(--accent-cyan); }

/* ---------- Badges ---------- */
.badge { font-family: var(--font-heading); font-weight: 600; }
.badge-cyan { background: rgba(56,172,168,0.10); color: var(--accent-cyan); border: 1px solid rgba(56,172,168,0.22); }
.badge-gold { background: rgba(253,144,9,0.10); color: var(--accent-gold); border: 1px solid rgba(253,144,9,0.22); }
.badge-purple { background: rgba(0,136,233,0.08); color: var(--accent-purple); border: 1px solid rgba(0,136,233,0.20); }

/* ---------- Pricing ---------- */
.pricing-card { text-align: center; }
.pricing-card.featured { background: #ffffff; border-color: var(--accent-cyan); }
.pricing-amount { font-family: var(--font-heading); color: var(--text-primary); }
.popular-badge, .plan-badge { background: var(--accent-cyan); color: #fff; }
.pricing-features li::before { color: var(--accent-cyan); }
.discount-tag, .plan-discount-tag { color: #fff; }
.plan-discount-tag { color: #232E3D; }

/* Product-page plan cards: match the homepage hostiko card design */
.pricing-grid { gap: 28px; }
.pricing-card {
  padding: 36px 30px 32px;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
}
.pricing-card h3 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  margin-bottom: 6px;
}
.pricing-card .plan-desc {
  min-height: 3.2em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pricing-card .price-block { justify-content: center; }
.pricing-card .price-amount { font-size: 3rem; font-weight: 800; }
.pricing-card .plan-features li { justify-content: flex-start; text-align: start; padding-inline: 12px; }
.pricing-card .plan-features li .check { color: var(--accent-cyan); }
.pricing-card .btn { border-radius: 100px; }

/* ---------- Sections ---------- */
.section-alt { background: var(--bg-secondary); }
.section-header p { font-size: 1rem; }
.cta-inner { background: var(--bg-secondary); border: none; }

/* ---------- Domain search (hostiko signature pill) ---------- */
.domain-search-bar, .domain-search-form {
  border: none;
  border-radius: 50px;
  box-shadow: 1px 2px 60px rgba(0,0,0,0.12);
  background: #fff;
}
.domain-search-bar button { background: var(--accent-cyan); color: #fff; border-radius: 0 50px 50px 0; }
.domain-search-bar button:hover { background: var(--btn-hover-bg); }
.domain-search-btn { border-radius: 0 50px 50px 0; }

/* ---------- Comparison table ---------- */
.comparison-table th.us { color: var(--accent-cyan); }
.comparison-table tr:hover td { background: rgba(56,172,168,0.04); }

/* ---------- Footer: hostiko light footer ---------- */
.footer {
  background: #ffffff;
  border-top: 1px solid var(--border);
}
.footer a:hover { color: var(--accent-cyan); }
.footer-col h4 { font-family: var(--font-heading); color: var(--text-primary); }
.footer-brand p, .footer-col ul li a { color: var(--text-muted); }
.footer-brand-name { color: var(--text-primary); }
.footer-contact-item .email { color: var(--text-primary); }
.social-links a {
  background: rgba(56,172,168,0.10);
  border-color: rgba(56,172,168,0.20);
  color: var(--accent-cyan);
}
.social-links a:hover { background: var(--accent-cyan); border-color: var(--accent-cyan); color: #fff; }
.footer-bottom { border-top: 1px solid var(--border); }
.footer-bottom p { color: var(--text-muted); }

/* ---------- NVMe chip ---------- */
.nvme { background: linear-gradient(135deg, var(--accent-cyan), #4fc3bd); color: #fff; }
.nvme-badge { background: linear-gradient(135deg, var(--accent-cyan), #0088e9); }

/* ---------- Language switcher ---------- */
.lang-switch { background: var(--bg-secondary); }
.lang-switch-item.current { background: var(--accent-cyan); color: #fff; }

/* ---------- Trust bar card ---------- */
.trust-bar-icon { background: rgba(56,172,168,0.10); }