*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Preloader */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity .5s ease, visibility .5s ease;
  animation: preloaderOut .5s ease 1s forwards;
}

@keyframes preloaderOut {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #preloader {
    animation-duration: .01s;
  }
}

#preloader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-ring {
  width: 48px;
  height: 48px;
  border: 4px solid #e2e8f0;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.preloader-logo {
  margin-bottom: 24px;
  font-size: 1.3rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.preloader-logo span {
  color: #2563eb;
}

body {
  font-family: 'Space Grotesk', sans-serif;
  background-color: #f8fafc;
  color: #64748b;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Utility */
.hide-mobile {
  display: inline;
}

@media (max-width: 768px) {
  .hide-mobile {
    display: none;
  }
}

/* Navbar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  transition: box-shadow 0.3s ease;
}

.navbar.scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 72px;
}

.navbar .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0f172a;
  text-decoration: none;
}

.navbar .logo-mark {
  width: 34px;
  height: 34px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.navbar .logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.navbar .logo-text {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0f172a;
}

.navbar .nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.navbar .nav-links a {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #475569;
  transition: color 0.3s ease;
  position: relative;
}

.navbar .nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: #2563eb;
  border-radius: 2px;
  transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.navbar .nav-links a:hover::after,
.navbar .nav-links a.active::after {
  width: 100%;
}

.navbar .nav-links a:hover,
.navbar .nav-links a.active {
  color: #2563eb;
}

.navbar .nav-links .btn-icon {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff !important;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.navbar .nav-links .btn-icon::after {
  display: none;
}

.navbar .nav-links .btn-icon:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
}

/* Dropdown */
.dropdown {
  position: relative;
}

.dropdown > a {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.dropdown > a i {
  font-size: 0.6rem;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: #64748b !important;
}

.dropdown-menu a:hover {
  background: #f1f5f9;
  color: #2563eb !important;
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #1e293b;
  cursor: pointer;
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #1e293b;
  cursor: pointer;
}

/* Mobile overlay */
.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(0,0,0,.5);
  opacity: 0;
  transition: opacity .3s ease;
}

.mobile-overlay.open {
  display: block;
  opacity: 1;
}

/* Mobile menu — Namecheap-style left slide-in */
.mobile-menu {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 999;
  width: 300px;
  max-width: 80vw;
  background: #0f172a;
  transform: translateX(-100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}

.mobile-menu.open {
  transform: translateX(0);
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.mobile-menu-header .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.mobile-menu-header .logo-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mobile-menu-header .logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mobile-menu-header .logo-text {
  font-size: 1.05rem;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: -.02em;
}

.mobile-menu-header .close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: none;
  color: #94a3b8;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}

.mobile-menu-header .close-btn:hover {
  background: rgba(255,255,255,.14);
  color: #f1f5f9;
}

.mobile-nav {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mobile-nav a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 500;
  color: #cbd5e1;
  text-decoration: none;
  transition: all .2s;
}

.mobile-nav a i {
  width: 20px;
  text-align: center;
  font-size: 1rem;
  color: #64748b;
  transition: color .2s;
}

.mobile-nav a:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
}

.mobile-nav a:hover i {
  color: #3b82f6;
}

.mobile-menu-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.mobile-account-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  background: linear-gradient(135deg,#2563eb,#1d4ed8);
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  transition: opacity .2s;
}

.mobile-account-btn:hover {
  opacity: .9;
  color: #fff;
}

.mobile-menu .close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f1f5f9;
  border: none;
  font-size: 1.4rem;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}

.mobile-menu .close-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-primary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.4);
}

.btn-secondary {
  background: #fff;
  color: #0f172a;
  border: 2px solid #e2e8f0;
}

.btn-secondary:hover {
  border-color: #2563eb;
  color: #2563eb;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* Sections */
.section {
  padding: 100px 0;
  position: relative;
}

.pt-0 {
  padding-top: 0;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-header .section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #2563eb;
  margin-bottom: 16px;
}

.section-header .section-tag::before,
.section-header .section-tag::after {
  content: '';
  width: 24px;
  height: 1.5px;
  background: #bfdbfe;
  border-radius: 2px;
}

.section-header h2 {
  font-size: 2.5rem;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.section-header p {
  font-size: 1.05rem;
  color: #64748b;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Hero */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  padding-top: 24px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% -20%, rgba(37, 99, 235, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(37, 99, 235, 0.04) 0%, transparent 70%),
    linear-gradient(180deg, #eef4ff 0%, #f8faff 30%, #fff 100%);
}

.hero .container {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

/* Centered layout for the dedicated domains search page */
.hero-domains {
  padding-top: 192px;
}

.hero-domains .container {
  max-width: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0;
}

.hero-content {
  width: min(85vw, 1200px);
  max-width: none;
  text-align: center;
  margin: 0 auto;
}

.hero-domains .hero h1,
.hero-domains .hero-sub {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Wider search bar on the domains page */
.hero-domains .hero-domain-search {
  max-width: 100%;
}

.hero-domains .hds-inner {
  border-radius: 12px;
}

.hero-domains .hds-inner input {
  font-size: 1.05rem;
  padding: 16px 20px;
}

.hero-domains .hds-inner button {
  padding: 0 32px;
}

.hero-domains .hero-tlds {
  justify-content: center;
  gap: 32px 24px;
}

/* Left column */
.hero-left {
  position: relative;
  padding-top: 60px;
  max-width: 100%;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  background: linear-gradient(135deg, #fff, #f0f4ff);
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #2563eb;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.06);
}

.hero-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  position: relative;
}

.hero-badge .dot::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.25);
  animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
  75%, 100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

.hero h1 {
  font-size: 3.5rem;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.05;
  margin-bottom: 16px;
  letter-spacing: -0.025em;
}

.hero h1 .highlight {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  font-size: 1.05rem;
  color: #64748b;
  margin-bottom: 28px;
  max-width: 480px;
  line-height: 1.75;
}

/* Domain search inside hero */
.hero-domain-search {
  margin-bottom: 16px;
  max-width: 520px;
}

.hds-inner {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.25s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.hds-inner:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08), 0 4px 16px rgba(37, 99, 235, 0.1);
}

.hds-icon {
  padding: 0 6px 0 18px;
  color: #94a3b8;
  font-size: 0.85rem;
}

.hds-inner input {
  flex: 1;
  padding: 14px 8px;
  border: none;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: #0f172a;
  outline: none;
  background: transparent;
}

.hds-inner input::placeholder {
  color: #94a3b8;
  font-weight: 400;
}

.hds-inner button {
  padding: 14px 28px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: opacity 0.25s ease;
  font-family: inherit;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.hds-inner button:hover {
  opacity: 0.9;
}

/* Domain availability status */
.domain-check-status {
  margin-top: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
}

.domain-check-status i {
  width: 16px;
  flex-shrink: 0;
}

.domain-check-status a {
  color: #2563eb;
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
}

.domain-check-status a:hover {
  opacity: 0.8;
}

.domain-check-status.available {
  color: #059669;
}

.domain-check-status.available i {
  color: #10b981;
}

.domain-check-status.taken {
  color: #dc2626;
}

.domain-check-status.taken i {
  color: #ef4444;
}

.domain-check-status.checking {
  color: #64748b;
}

.domain-check-status.checking i {
  color: #2563eb;
}

.domain-check-status.error {
  color: #d97706;
}

.domain-check-status.error i {
  color: #f59e0b;
}

.domain-check-status.unknown {
  color: #64748b;
}

/* TLD prices in hero */
.hero-tlds {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.tld-item {
  font-size: 0.78rem;
  color: #94a3b8;
}

.tld-item .tld {
  font-weight: 600;
  color: #475569;
}

.tld-item .tld-price {
  color: #64748b;
}

/* Trust score badge */
.hero-trust {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: linear-gradient(135deg, #fff, #fafcff);
  border: 1px solid #e2e8f0;
  border-radius: 50px;
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 500;
  width: fit-content;
  flex-wrap: wrap;
}

.hero-trust .stars {
  color: #f59e0b;
  font-size: 0.75rem;
  letter-spacing: 1px;
}

.hero-trust strong {
  color: #0f172a;
  font-weight: 800;
}

.hero-trust .separator {
  width: 1px;
  height: 14px;
  background: #e2e8f0;
}

.hero-trust i {
  font-size: 0.8rem;
}

/* Right column */
.hero-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 38px;
  max-width: 100%;
}

/* Hero illustration */
.hero-illustration {
  position: relative;
  display: flex;
  justify-content: center;
  animation: hero-float 6s ease-in-out infinite;
  max-width: 100%;
  overflow: hidden;
}

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.hero-illustration svg {
  max-width: 420px;
  width: 100%;
  height: auto;
  display: block;
  min-width: 0;
}

/* Hero plan cards */
.hero-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 40px;
}

.hero-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 18px;
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}

.hero-card:hover {
  border-color: #bfdbfe;
  background: #fafcff;
}

.hero-card .hc-icon {
  width: 38px;
  height: 38px;
  background: #f1f5f9;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  font-size: 0.9rem;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.hero-card:hover .hc-icon {
  background: #2563eb;
  color: #fff;
}

.hero-card .hc-info {
  flex: 1;
}

.hero-card .hc-info h4 {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0;
}

.hero-card .hc-info p {
  font-size: 0.7rem;
  color: #94a3b8;
  margin: 0;
  max-width: none;
}

.hero-card .hc-price {
  text-align: right;
  flex-shrink: 0;
}

.hero-card .hc-price .amount {
  font-size: 1.1rem;
  font-weight: 800;
  color: #2563eb;
  display: block;
  line-height: 1;
}

.hero-card .hc-price .label {
  font-size: 0.6rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hero-card .hc-arrow {
  color: #2563eb;
  font-size: 0.75rem;
  opacity: 0;
  transform: translateX(-6px);
  transition: all 0.2s ease;
}

.hero-card:hover .hc-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Stats section */
.stats-section {
  padding: 80px 0;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.stat-item {
  text-align: center;
  padding: 32px 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  transition: all 0.3s ease;
}

.stat-item:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  border-color: #cbd5e1;
}

.stat-icon {
  width: 48px;
  height: 48px;
  background: #f1f5f9;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: #2563eb;
  font-size: 1.2rem;
}

.stat-number {
  font-size: 2.2rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 6px;
}

.stat-unit {
  font-size: 0.8rem;
  font-weight: 700;
  color: #94a3b8;
  vertical-align: super;
}

.stat-label {
  font-size: 0.85rem;
  color: #64748b;
  font-weight: 500;
}

/* Service cards */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.service-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 40px 32px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

.service-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.service-card:hover::after {
  transform: scaleX(1);
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 64px rgba(37, 99, 235, 0.08);
  border-color: #bfdbfe;
}

.service-card .icon {
  font-size: 2.5rem;
  color: #2563eb;
  margin-bottom: 24px;
  display: inline-block;
  transition: transform 0.4s ease;
}

.service-card:hover .icon {
  transform: scale(1.1);
}

.service-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 12px;
}

.service-card p {
  font-size: 0.9rem;
  color: #64748b;
  margin-bottom: 24px;
  line-height: 1.7;
}

.service-card .card-link {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #2563eb;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.service-card .card-link i {
  transition: transform 0.3s ease;
}

.service-card:hover .card-link i {
  transform: translateX(4px);
}

/* Pricing cards */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-top: 24px;
}

.pricing-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 40px 32px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 620px;
}

.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.06);
  border-color: #cbd5e1;
}

.pricing-card.popular {
  border: 2px solid #2563eb;
  box-shadow: 0 8px 40px rgba(37, 99, 235, 0.08);
}

.pricing-card.popular:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 64px rgba(37, 99, 235, 0.1);
}

.pricing-card.popular::before {
  content: 'Most Popular';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 4px 20px;
  border-radius: 20px;
  letter-spacing: 0.08em;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.pricing-card .tier-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #2563eb;
  margin-bottom: 8px;
}

.pricing-card h3 {
  font-size: 1.5rem;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 4px;
}

.pricing-card .subtitle {
  font-size: 0.85rem;
  color: #94a3b8;
  margin-bottom: 20px;
}

.pricing-card .price {
  font-size: 3rem;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 24px;
  letter-spacing: -0.03em;
}

.pricing-card .price .currency {
  font-size: 1.5rem;
  vertical-align: super;
}

.pricing-card .price .period {
  font-size: 0.9rem;
  color: #94a3b8;
  font-weight: 500;
  letter-spacing: normal;
}

.pricing-card .features {
  text-align: left;
  margin-bottom: 24px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding-right: 4px;
}

.pricing-card .features li {
  padding: 10px 0;
  font-size: 0.9rem;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #f1f5f9;
}

.pricing-card .features li:last-child {
  border-bottom: none;
}

.pricing-card .features li i {
  color: #2563eb;
  font-size: 0.8rem;
  width: 16px;
  text-align: center;
}

.pricing-card .btn {
  width: 100%;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 8px;
}

/* Scrollbar for features list */
.pricing-card .features::-webkit-scrollbar {
  width: 6px;
}

.pricing-card .features::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.pricing-card .features::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.pricing-card .features::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Portfolio Grid */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.portfolio-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 32px 24px;
  transition: all 0.3s ease;
  position: relative;
}

.portfolio-item:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  transform: translateY(-4px);
}

.portfolio-item .category {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #2563eb;
  margin-bottom: 8px;
}

.portfolio-item h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 4px;
}

.portfolio-item .price-tag {
  font-size: 0.85rem;
  color: #94a3b8;
  margin-bottom: 16px;
}

.portfolio-item .visit-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: #2563eb;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Modern portfolio card */
.portfolio-card {
  background: #fff;
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.06);
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s cubic-bezier(0.22,1,0.36,1);
  position: relative;
}

.portfolio-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 30px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
}

.portfolio-card .cat-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.portfolio-card .cat-startup {
  background: #eef2ff;
  color: #2563eb;
}

.portfolio-card .cat-premium {
  background: #fef3c7;
  color: #b45309;
}

.portfolio-card .cat-enterprise {
  background: #fce4ec;
  color: #c62828;
}

.portfolio-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}

.portfolio-card .price-tag {
  font-size: 0.85rem;
  color: #94a3b8;
  margin-bottom: 20px;
}

.portfolio-card .visit-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: #2563eb;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s;
}

.portfolio-card .visit-link i {
  transition: transform 0.2s;
}

.portfolio-card:hover .visit-link i {
  transform: translateX(4px);
}

/* About page */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 80px;
}

.about-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-story-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #2563eb;
  margin-bottom: 16px;
}

.about-story-badge .line {
  width: 24px;
  height: 2px;
  background: #2563eb;
  border-radius: 2px;
}

.about-heading {
  font-size: 2.2rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 20px;
}

.about-text {
  font-size: 1rem;
  color: #475569;
  line-height: 1.8;
  margin: 0 0 24px;
  max-width: 520px;
}

.about-signature {
  display: flex;
  align-items: center;
  gap: 12px;
}

.about-signature .avatar {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}

.about-signature .name {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #0f172a;
}

.about-signature .role {
  margin: 0;
  font-size: 0.78rem;
  color: #94a3b8;
}

.about-image-col {
  position: relative;
  max-width: 380px;
  margin-left: auto;
}

.about-image-col .orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.about-image-col .orb-1 {
  top: -24px;
  right: -16px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(37,99,235,.06) 0%, transparent 70%);
}

.about-image-col .orb-2 {
  bottom: -12px;
  left: -20px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(13,148,136,.05) 0%, transparent 70%);
}

.about-image-col .img-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
}

.about-image-col .img-wrap picture {
  display: block;
}

.about-image-col .img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

.about-founded-badge {
  position: absolute;
  bottom: -8px;
  right: -8px;
  background: #fff;
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  gap: 12px;
}

.about-founded-badge .icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.about-founded-badge .label {
  margin: 0;
  font-size: 0.8rem;
  color: #94a3b8;
  line-height: 1.3;
}

.about-founded-badge .year {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}

.about-content blockquote {
  font-size: 1.15rem;
  color: #475569;
  line-height: 1.8;
  margin-bottom: 24px;
  padding-left: 20px;
  border-left: 4px solid #2563eb;
  font-style: italic;
}

.mission-vision {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 60px;
}

.mv-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 36px 32px;
}

.mv-card .icon {
  font-size: 2rem;
  color: #2563eb;
  margin-bottom: 16px;
}

.mv-card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 12px;
}

.mv-card p {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.7;
}

/* Modern about cards */
.mv-modern {
  border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.06);
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s cubic-bezier(0.22,1,0.36,1);
}

.mv-modern:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 30px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
}

.mv-modern .icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 20px;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
}

.mv-modern:hover .icon-wrap {
  transform: scale(1.05);
}

.about-card {
  background: #fff;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.06);
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s cubic-bezier(0.22,1,0.36,1);
}

.about-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
}

.why-us-modern {
  border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s cubic-bezier(0.22,1,0.36,1);
  cursor: default;
}

.why-us-modern:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
}

.why-us-modern .wu-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
  color: #2563eb;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
}

.why-us-modern:hover .wu-icon {
  transform: scale(1.08);
}

.why-us-modern h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.why-us-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.why-us-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  transition: all 0.3s ease;
}

.why-us-item:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.why-us-item i {
  font-size: 1.5rem;
  color: #2563eb;
  margin-bottom: 12px;
}

.why-us-item h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1e293b;
}

/* Contact */

.contact-info .info-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
}

.contact-info .info-item .icon-box {
  width: 48px;
  height: 48px;
  background: #eff6ff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.contact-info .info-item h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 4px;
}

.contact-info .info-item p {
  font-size: 0.9rem;
  color: #64748b;
}

.contact-form {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 40px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.9rem;
  color: #1e293b;
  transition: border-color 0.3s ease;
  background: #f8fafc;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-group textarea {
  height: 140px;
  resize: vertical;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Restores top spacing for the first element inside a .section.pt-0 */
.section-first-gap {
  margin-top: 32px;
}

/* Legal pages */
.legal-wrap {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.legal-updated {
  display: inline-block;
  margin-bottom: 32px;
  padding: 6px 16px;
  background: #eef2ff;
  color: #2563eb;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

.legal-block {
  background: #fff;
  border-radius: 20px;
  padding: 36px 32px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
}

.legal-block h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

.legal-block h3 {
  font-size: 0.98rem;
  font-weight: 600;
  color: #0f172a;
  margin: 22px 0 8px;
}

.legal-block p {
  font-size: 0.93rem;
  color: #475569;
  line-height: 1.8;
  margin: 0 0 14px;
}

.legal-block p:last-child {
  margin-bottom: 0;
}

.legal-block ul {
  margin: 0 0 14px;
  padding-left: 22px;
  list-style: disc;
}

.legal-block li {
  font-size: 0.93rem;
  color: #475569;
  line-height: 1.8;
  margin-bottom: 6px;
}

.legal-block a {
  color: #2563eb;
  font-weight: 500;
}

.legal-block a:hover {
  text-decoration: underline;
}

.legal-block strong {
  color: #1e293b;
  font-weight: 600;
}

.legal-contact {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  padding: 24px 28px;
  text-align: center;
}

.legal-contact p {
  margin: 0 0 6px;
}

.legal-contact .legal-contact-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px;
}

@media (max-width: 768px) {
  .legal-block {
    padding: 26px 20px;
    border-radius: 16px;
  }

  .legal-contact {
    padding: 20px;
  }
}

/* Footer */
.footer {
  background: #111;
  color: #6b7280;
  padding: 48px 0 0;
  font-size: 0.8125rem;
}

.footer .container {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

.footer-brand .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.footer-brand .logo-mark {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.footer-brand .logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.footer-brand .logo-text {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

.footer-brand p {
  font-size: 0.75rem;
  line-height: 1.6;
  margin-bottom: 16px;
  color: #6b7280;
}

.footer-social {
  display: flex;
  gap: 6px;
}

.footer-social a {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #2a2a2a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: all 0.2s ease;
  font-size: 0.7rem;
  text-decoration: none;
}

.footer-social a:hover {
  border-color: #3b82f6;
  color: #3b82f6;
}

.footer h4 {
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}

.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer ul li {
  margin-bottom: 6px;
}

.footer ul a {
  font-size: 0.75rem;
  color: #6b7280;
  transition: color 0.2s ease;
}

.footer ul a:hover {
  color: #3b82f6;
}

.footer-trust {
  border-top: 1px solid #1a1a1a;
  padding: 20px 0;
}

.footer-trust .container {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-bottom: 0;
  flex-wrap: wrap;
}

.footer-trust span {
  font-size: 0.7rem;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer-trust span i {
  color: #3b82f6;
  font-size: 0.75rem;
}

.footer-bottom {
  border-top: 1px solid #1a1a1a;
  padding: 16px 0;
}

.footer-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  gap: 16px;
}

.footer-bottom p {
  font-size: 0.7rem;
  color: #4b5563;
  margin: 0;
}

.footer-bottom-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-bottom-links a {
  font-size: 0.7rem;
  color: #4b5563;
  transition: color 0.2s ease;
}

.footer-bottom-links a:hover {
  color: #6b7280;
}

/* WhatsApp Widget */
.whatsapp-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 900;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #25d366, #128c7e);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: none;
}

.whatsapp-widget:hover {
  transform: scale(1.1) rotate(-5deg);
  box-shadow: 0 8px 30px rgba(37, 211, 102, 0.5);
}

/* === CHATBOT === */
.chatbot-toggle {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 900;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 4px 24px rgba(37,99,235,.35);
  cursor: pointer;
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
  border: none;
}

.chatbot-toggle:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 32px rgba(37,99,235,.45);
}

/* === CONTACT FAB STACK (+ launcher) === */
.fab-stack {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 900;
  width: 56px;
  height: 56px;
}

.fab-launcher {
  position: absolute;
  inset: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(37, 99, 235, .35);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s;
}

.fab-launcher:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 32px rgba(37, 99, 235, .45);
}

.fab-item {
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(.5) translateY(12px);
  transform-origin: bottom right;
  transition: opacity .25s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1), visibility 0s .35s;
}

/* Label sits to the left so it grows away from the screen corner.
   Fixed width keeps the two items' static offsets valid and prevents the
   labels overlapping each other. */
.fab-label {
  order: -1;
  min-width: 72px;
  text-align: right;
  background: #0f172a;
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}

.fab-stack.open .fab-item {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1) translateY(0);
  transition: opacity .25s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1), visibility 0s 0s;
}

/* Stagger the two items so the row drops up in sequence */
.fab-stack.open .fab-item:nth-child(2) {
  transition-delay: .06s;
}

/* Out of flow so the two items can never push the + off the corner.
   The stack grows vertically: each item is 56px tall and right-aligned with
   the launcher, offset upward in 68px steps (56px button + 12px gap). */
.fab-stack .fab-item:nth-child(1) {
  bottom: 136px;
  right: 0;
}

.fab-stack .fab-item:nth-child(2) {
  bottom: 68px;
  right: 0;
}

/* Narrow screens: the column only needs ~140px of width, so the label stays
   beside its button (keeping each item exactly 56px tall, which the vertical
   offsets above depend on) and is simply scaled down. */
@media (max-width: 520px) {
  .fab-label {
    min-width: 0;
    font-size: .7rem;
    padding: 4px 10px;
  }
}

/* Release the base fixed positioning so each button sits in its .fab-item row */
.fab-item .whatsapp-widget,
.fab-item .chatbot-toggle {
  position: static;
  flex-shrink: 0;
}

.fab-item .whatsapp-widget:hover,
.fab-item .chatbot-toggle:hover {
  transform: scale(1.08);
}

/* === CHATBOT === */
.chatbot-panel {
  position: fixed;
  bottom: 96px;
  right: 24px;
  z-index: 899;
  width: 380px;
  max-height: calc(100vh - 180px);
  height: 560px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(0,0,0,.15);
  display: none;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
}

.chatbot-panel.open {
  display: flex;
  animation: chatSlideUp .35s cubic-bezier(.22,1,.36,1);
}

@keyframes chatSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.chatbot-header {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.chatbot-header .ch-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chatbot-header .ch-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.chatbot-header h3 {
  font-size: .95rem;
  font-weight: 700;
  margin: 0;
}

.chatbot-header .ch-status {
  font-size: .68rem;
  opacity: .8;
  display: flex;
  align-items: center;
  gap: 4px;
}

.chatbot-header .ch-status .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

.chatbot-header .ch-close-btn {
  background: rgba(255,255,255,.1);
  border: none;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: .85rem;
  transition: background .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chatbot-header .ch-close-btn:hover {
  background: rgba(255,255,255,.2);
}

.chatbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-behavior: smooth;
}

.chatbot-message {
  max-width: 88%;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: .87rem;
  line-height: 1.55;
  animation: msgIn .3s ease;
  word-wrap: break-word;
  white-space: pre-wrap;
}

@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.chatbot-message.bot {
  background: #f1f4f9;
  color: #1e293b;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.chatbot-message.user {
  background: #2563eb;
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.chatbot-message.bot .chat-line {
  display: block;
}

.chatbot-message.bot .chat-bullet {
  display: block;
  padding-left: 4px;
}

/* Typing indicator */
.chatbot-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  background: #f1f4f9;
  border-radius: 18px;
  border-bottom-left-radius: 4px;
  align-self: flex-start;
  max-width: 70px;
  animation: msgIn .3s ease;
}

.chatbot-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94a3b8;
  animation: typingBounce 1.4s infinite both;
}

.chatbot-typing span:nth-child(1) { animation-delay: 0s; }
.chatbot-typing span:nth-child(2) { animation-delay: .2s; }
.chatbot-typing span:nth-child(3) { animation-delay: .4s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
}

/* Quick reply chips */
.chatbot-questions {
  padding: 8px 16px 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
  max-height: 110px;
  overflow-y: auto;
}

.chatbot-questions button {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: .78rem;
  color: #475569;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
  white-space: nowrap;
}

.chatbot-questions button:hover {
  background: #eff6ff;
  border-color: #2563eb;
  color: #2563eb;
}

/* Input area */
.chatbot-input-area {
  display: flex;
  gap: 8px;
  padding: 8px 16px 12px;
  border-top: 1px solid #e2e8f0;
  flex-shrink: 0;
  align-items: center;
}

.chatbot-input-area input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  font-family: inherit;
  font-size: .85rem;
  outline: none;
  transition: border-color .2s;
}

.chatbot-input-area input:focus {
  border-color: #2563eb;
}

.chatbot-input-area button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .2s;
  flex-shrink: 0;
}

.chatbot-input-area button:hover {
  background: #1d4ed8;
  transform: scale(1.05);
}

/* === COMPETITIVE UPGRADES === */

/* Domain Search */
.domain-search {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  padding: 100px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.domain-search::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232563eb' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.domain-search .container {
  position: relative;
  z-index: 1;
}

.domain-search h2 {
  font-size: 2.4rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.domain-search p {
  color: #94a3b8;
  margin-bottom: 36px;
  font-size: 1.05rem;
}

.domain-search-bar {
  display: flex;
  max-width: 640px;
  margin: 0 auto 32px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.domain-search-bar input {
  flex: 1;
  padding: 20px 24px;
  border: none;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 500;
  color: #0f172a;
  outline: none;
}

.domain-search-bar input::placeholder {
  color: #94a3b8;
  font-weight: 400;
}

.domain-search-bar button {
  padding: 20px 44px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.domain-search-bar button:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

.tld-prices {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

.tld-price {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #94a3b8;
  font-size: 0.9rem;
}

.tld-price .tld {
  font-weight: 700;
  color: #fff;
}

.tld-price .price {
  color: #60a5fa;
  font-weight: 600;
}

/* Promo Banner */
.promo-banner {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  padding: 20px 0;
  text-align: center;
  color: #fff;
}

.promo-banner p {
  font-size: 0.95rem;
  font-weight: 500;
}

.promo-banner strong {
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.promo-banner .promo-code {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  padding: 2px 14px;
  border-radius: 4px;
  font-weight: 900;
  letter-spacing: 0.05em;
  margin-left: 6px;
}

/* Maintenance Banner */
/* Rendered inside the fixed navbar (see inc/templates/partials/nav.php) as its
   first child, above the nav row. The navbar is position:fixed, so a banner
   placed above it in the document flow would be painted over and never seen.
   The navbar is a plain block box, so the banner just needs to be an ordinary
   block child: normal flow puts it above .navbar .container and the navbar grows
   to fit both.

   The navbar must NOT be turned into a flex container for this. That turns
   .container into a flex item, and align-items:stretch does not stretch a flex
   item whose cross-axis margins are auto - and .container uses margin:0 auto to
   centre its max-width. The result is that it shrink-wraps to its content and
   the auto margins centre it, which collapses the 1200px nav row and leaves the
   logo and links bunched in the middle instead of spread edge to edge. */
.maintenance-banner {
  width: 100%;
  padding: 16px 24px;
  text-align: center;
  color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

/* Clearance below the navbar.
   Two separate things are added together here.

   1. --hero-nav-clearance is the breathing room between the bottom of the
      navbar and the top of the page content. It applies whether or not a banner
      is on, and is set per breakpoint below. On small screens it also absorbs a
      pre-existing quirk: .hero-left is pulled up by -40px there, which put the
      top of the hero behind the navbar even with both strips off, so the values
      below are larger than they otherwise would need to be.

   2. The banner height. Both strips live inside the position:fixed navbar, so
      switching either on makes the navbar taller, and a fixed navbar paints
      over the top of the page - so the hero (and the first block of every other
      page) would otherwise end up underneath it. Adding the height back means
      the gap stays the same whether the banners are on or off.

   The banner height is deliberately not hard-coded: both messages are editable
   (the maintenance one is rich text), so the strips wrap to a different number
   of lines depending on the copy, the chosen style and the viewport. main.js
   measures the rendered strips and publishes their sum as --banner-offset. The
   --banner-fallback values are the measured heights of the default copy, used
   before the script has run and when JavaScript is off; they are
   per-combination because either strip can appear alone or alongside the other.

   Only the first block moves (:first-of-type) so the rest of the page keeps its
   own vertical rhythm. */
:root {
  --hero-nav-clearance: 20px;
}

body > header.hero:first-of-type,
body > section:first-of-type {
  margin-top: var(--hero-nav-clearance, 0px);
}

body.has-promo-banner {
  --banner-fallback: 4.25rem;
}

body.has-maintenance-banner {
  --banner-fallback: 5.375rem;
}

body.has-promo-banner.has-maintenance-banner {
  --banner-fallback: 9.625rem;
}

body.has-promo-banner > header.hero:first-of-type,
body.has-promo-banner > section:first-of-type,
body.has-maintenance-banner > header.hero:first-of-type,
body.has-maintenance-banner > section:first-of-type {
  margin-top: calc(
    var(--banner-offset, var(--banner-fallback, 0px)) +
    var(--hero-nav-clearance, 0px)
  );
}

.maintenance-banner__title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 4px;
}

.maintenance-banner__title i {
  margin-right: 6px;
}

.maintenance-banner__message {
  font-size: 0.9rem;
  font-weight: 400;
  margin: 0;
  opacity: 0.95;
}

.maintenance-banner__message a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.maintenance-banner--warning {
  background: linear-gradient(135deg, #b45309, #92400e);
}

.maintenance-banner--urgent {
  background: linear-gradient(135deg, #b91c1c, #7f1d1d);
}

.maintenance-banner--info {
  background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
}

/* Trust Bar */
.trust-bar {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  /* Asymmetric on purpose. This bar sits directly under a hero that is
     min-height:100vh, so on a tall viewport the hero leaves a band of empty
     space above it that reads as extra padding here. Keeping the top tight
     stops the bar looking detached from the content above it, while the bottom
     keeps enough weight to balance the border. */
  padding: 10px 0 20px;
  text-align: center;
}

.trust-bar .container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #475569;
}

.trust-item i {
  color: #2563eb;
  font-size: 1rem;
}

/* Testimonials */
.testimonials {
  background: #f8fafc;
  padding: 100px 0;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.testimonial-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 32px 28px;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: 16px;
  right: 24px;
  font-size: 4rem;
  line-height: 1;
  color: #2563eb;
  opacity: 0.08;
  font-family: Georgia, serif;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.04);
  border-color: #cbd5e1;
}

.testimonial-card .stars {
  color: #f59e0b;
  font-size: 0.85rem;
  margin-bottom: 12px;
  letter-spacing: 2px;
}

.testimonial-card blockquote {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.7;
  margin-bottom: 20px;
  font-style: italic;
  position: relative;
  z-index: 1;
}

.testimonial-card .author {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid #f1f5f9;
  padding-top: 16px;
}

.testimonial-card .author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.testimonial-card .author-info strong {
  display: block;
  font-size: 0.85rem;
  color: #0f172a;
}

.testimonial-card .author-info span {
  font-size: 0.75rem;
  color: #94a3b8;
}

/* Comparison Table */
.comparison {
  padding: 100px 0;
  background: #fff;
}

.comparison-table-wrap {
  overflow-x: auto;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.03);
}

.comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.comparison-table th {
  padding: 20px 24px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left;
  border-bottom: 2px solid #e2e8f0;
  background: #f8fafc;
  color: #0f172a;
}

.comparison-table th:first-child {
  color: #94a3b8;
  font-weight: 600;
}

.comparison-table th.highlight {
  background: #eff6ff;
  color: #2563eb;
}

.comparison-table td {
  padding: 18px 24px;
  font-size: 0.9rem;
  border-bottom: 1px solid #f1f5f9;
  color: #475569;
}

.comparison-table tr:last-child td {
  border-bottom: none;
}

.comparison-table td:first-child {
  font-weight: 600;
  color: #0f172a;
}

.comparison-table td i.fa-check {
  color: #10b981;
}

.comparison-table td i.fa-times {
  color: #ef4444;
}

.comparison-table td.highlight {
  background: #eff6ff;
}

.comparison-table td .panel-note {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: #94a3b8;
  margin-top: 2px;
}

.comparison-table td.highlight .panel-note {
  color: #3b82f6;
}

.comparison-table tr:hover td {
  background: #fafbff;
}

.comparison-table tr:hover td.highlight {
  background: #dbeafe;
}

/* Feature Highlights Grid */
.feature-highlights {
  padding: 100px 0;
  background: #fff;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.feature-item {
  text-align: center;
  padding: 40px 24px;
  border-radius: 20px;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid transparent;
}

.feature-item:hover {
  background: #f8fafc;
  border-color: #e2e8f0;
  transform: translateY(-4px);
}

.feature-item .icon-circle {
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 1.6rem;
  color: #2563eb;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feature-item:hover .icon-circle {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.25);
  border-radius: 16px;
  transform: scale(1.05);
}

.feature-item h3,
.feature-item h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.feature-item p {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.7;
  max-width: 260px;
  margin: 0 auto;
}

/* Pricing Toggle */
.pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 48px;
  margin-top: 32px;
}

.pricing-toggle span {
  font-size: 0.9rem;
  font-weight: 600;
  color: #64748b;
}

.pricing-toggle span.active {
  color: #1e293b;
}

.toggle-switch {
  width: 52px;
  height: 28px;
  background: #e2e8f0;
  border-radius: 14px;
  cursor: pointer;
  position: relative;
  transition: background 0.3s ease;
  border: none;
}

.toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.toggle-switch.yearly {
  background: #2563eb;
}

.toggle-switch.yearly::after {
  transform: translateX(24px);
}

.save-badge {
  background: #dcfce7;
  color: #16a34a;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Money-back guarantee badge */
.guarantee-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 50px;
  padding: 6px 18px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #16a34a;
}

.guarantee-badge i {
  font-size: 0.9rem;
}

/* Keeps paired badges spaced both side-by-side and when they wrap on mobile */
.guarantee-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Migration offer */
.migration-cta {
  padding: 80px 0;
  background: #fff;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
}

.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 40px 48px;
}

.cta-content {
  flex: 1;
}

.cta-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #2563eb;
  margin-bottom: 8px;
}

.cta-content h2 {
  font-size: 1.6rem;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.cta-content p {
  color: #64748b;
  font-size: 0.95rem;
  margin: 0;
}

.cta-inner .btn {
  flex-shrink: 0;
}

/* Page header */
.page-header {
  padding: 140px 0 60px;
  text-align: center;
  background: linear-gradient(165deg, #f0f4ff 0%, #fafcff 40%, #fff 100%);
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.04) 0%, transparent 70%);
  pointer-events: none;
}

.page-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}

.page-header h1 {
  font-size: 3.2rem;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.page-header p {
  font-size: 1.1rem;
  color: #64748b;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Responsive */
/* === COMPETITIVE UPGRADES RESPONSIVE === */

@media (max-width: 768px) {
  .domain-search h2 {
    font-size: 1.6rem;
  }
  .domain-search-bar {
    flex-direction: column;
    border-radius: 12px;
  }
  .domain-search-bar input {
    padding: 14px 18px;
  }
  .domain-search-bar button {
    padding: 14px;
    border-radius: 0;
  }
  .tld-prices {
    gap: 12px;
  }
  .tld-price {
    font-size: 0.8rem;
  }
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  .feature-grid {
    grid-template-columns: 1fr;
  }
  .trust-bar .container {
    gap: 16px;
  }
  .trust-item {
    font-size: 0.75rem;
  }
  .comparison-table th,
  .comparison-table td {
    padding: 12px 14px;
    font-size: 0.8rem;
  }
  .cta-inner {
    flex-direction: column;
    text-align: center;
    padding: 32px 24px;
  }
  .cta-content h2 {
    font-size: 1.5rem;
  }
  .guarantee-badge {
    font-size: 0.7rem;
    padding: 4px 12px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .testimonials-grid {
    grid-template-columns: 1fr 1fr;
  }
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .hero .container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-sub {
    margin: 0 auto 24px;
    max-width: 100%;
  }

  .hero-domain-search {
    margin: 0 auto 14px;
    max-width: 440px;
  }

  .hero-tlds {
    justify-content: center;
  }

  .hero-trust {
    margin: 0 auto;
  }

  .hero-right {
    padding-top: 0;
  }

  .hero-illustration svg {
    max-width: 300px;
    margin: 0 auto;
  }

  .hero-cards {
    max-width: 420px;
    margin: 0 auto;
  }

  .hero-card:hover {
    transform: none;
  }

  .services-grid,
  .pricing-grid,
  .portfolio-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer .container {
    grid-template-columns: 1fr 1fr;
  }

  .footer-trust .container {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 50px;
  }

  .mission-vision {
    grid-template-columns: 1fr;
  }

  .why-us-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  /* Between 481px and 768px the strips take their tallest measured heights, so
     the no-JavaScript fallbacks are set from that. The narrower
     @media (max-width: 480px) block further down overrides them with the
     heights they actually take there. All are overwritten by the measured value
     as soon as main.js runs. --hero-nav-clearance is the pre-existing gap
     between the top of the hero and the bottom of the navbar at this width. */
  body.has-promo-banner {
    --banner-fallback: 4.25rem;
  }

  body.has-maintenance-banner {
    --banner-fallback: 6.8125rem;
  }

  body.has-promo-banner.has-maintenance-banner {
    --banner-fallback: 11.0625rem;
  }

  :root {
    --hero-nav-clearance: 32px;
  }

  .navbar .nav-links {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

   .hero {
     min-height: 0;
     padding: 100px 0 60px;
   }

   /* Domains page: reduce hero padding on mobile */
   .hero-domains {
     padding: 144px 0 96px;
   }

  .hero-left {
    padding-top: 0;
    margin-top: -40px;
  }

   .hero h1 {
     font-size: 2rem;
   }

   .hero-domain-search {
     max-width: 100%;
   }

  .hero-sub {
    font-size: 0.95rem;
    max-width: 100%;
  }

  .hero-illustration svg {
    max-width: 200px;
  }

  .hero-trust {
    font-size: 0.7rem;
    padding: 6px 14px;
    gap: 6px;
    justify-content: center;
    width: 100%;
  }

  .hero-trust .separator {
    display: none;
  }

  .section-header h2 {
    font-size: 2rem;
  }

  .services-grid,
  .pricing-grid,
  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .footer .container {
    grid-template-columns: 1fr;
  }

  .footer-trust .container {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .footer-bottom .container {
    flex-direction: column;
    text-align: center;
  }

  .footer-bottom-links {
    justify-content: center;
  }

  .page-header h1 {
    font-size: 2.2rem;
  }

  .pricing-card.popular {
    transform: none;
  }

  .pricing-card.popular:hover {
    transform: translateY(-4px);
  }

  .chatbot-panel {
    width: calc(100% - 48px);
    max-height: calc(100vh - 140px);
    height: 70vh;
    left: 24px;
    right: 24px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .hero-card .hc-arrow {
    opacity: 1;
    transform: translateX(0);
  }

  .why-us-grid {
    grid-template-columns: 1fr;
  }

  .about-heading {
    font-size: 1.7rem;
  }

  .about-image-col {
    max-width: 100%;
    margin-left: 0;
    overflow: hidden;
    display: none;
  }

  .about-founded-badge {
    padding: 12px 16px;
    right: 8px;
  }

  .about-founded-badge .icon {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
  }

  .about-founded-badge .year {
    font-size: 0.95rem;
  }
}

/* Contact cards hover */
.contact-card {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease;
  cursor: default;
}

.contact-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 30px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
}

.contact-card:hover .contact-icon {
  transform: scale(1.05);
}

.contact-icon {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 860px;
  margin: 0 auto;
}

.whatsapp-banner {
  max-width: 860px;
  margin: 32px auto 0;
  background: linear-gradient(135deg, #0d9488, #0891b2);
  border-radius: 20px;
  padding: 40px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}

.whatsapp-banner:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(13,148,136,.25);
}

@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .whatsapp-banner {
    flex-direction: column;
    text-align: center;
    padding: 28px 24px;
  }
}

@media (max-width: 480px) {
  .promo-banner {
    padding: 14px 0;
  }

  .promo-banner p {
    font-size: 0.8rem;
  }

  .maintenance-banner {
    padding: 12px 16px;
  }

  .maintenance-banner__title {
    font-size: 0.9rem;
  }

  .maintenance-banner__message {
    font-size: 0.8rem;
  }
  
  /* At 480px and below the strips use tighter padding and smaller type, so they
     are shorter than in the 481-768px band (93px and 73px, measured). Restating
     the no-JavaScript fallbacks here keeps them accurate across the whole range.
     The promo strip wraps differently at 360px than at 480px, so its fallback is
     the taller of the two to avoid under-clearing. */
  body.has-promo-banner {
    --banner-fallback: 4.5625rem;
  }

  body.has-maintenance-banner {
    --banner-fallback: 5.8125rem;
  }

  body.has-promo-banner.has-maintenance-banner {
    --banner-fallback: 10.375rem;
  }

  :root {
    --hero-nav-clearance: 50px;
  }

  .hero {
    padding: 80px 0 40px;
  }

  .hero h1 {
    font-size: 1.65rem;
  }

  .hero-sub {
    font-size: 0.85rem;
  }

  .hero-domain-search {
    max-width: 100%;
  }

  .hds-inner {
    flex-wrap: wrap;
    border-radius: 10px;
  }

  .hds-inner input {
    width: 100%;
    padding: 12px 14px;
  }

  .hds-icon {
    display: none;
  }

  .hds-inner button {
    width: 100%;
    padding: 12px;
    border-radius: 0;
  }

  .hero-tlds {
    gap: 10px;
    justify-content: center;
  }

  .hero-illustration svg {
    max-width: 160px;
  }

  .hero-cards {
    max-width: 100%;
  }

  .hero-card {
    padding: 10px 14px;
    gap: 8px;
  }

  .hero-card .hc-icon {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
  }

  .hero-card .hc-info h4 {
    font-size: 0.8rem;
  }

  .hero-card .hc-info p {
    font-size: 0.65rem;
  }

  .hero-card .hc-price .amount {
    font-size: 0.95rem;
  }

  .hero-card .hc-price .label {
    font-size: 0.55rem;
  }

  .about-heading {
    font-size: 1.4rem;
  }

  .about-grid {
    gap: 28px;
    margin-bottom: 36px;
  }

  .about-image-col .orb-1 {
    width: 140px;
    height: 140px;
    right: -8px;
  }

  .about-image-col .orb-2 {
    width: 80px;
    height: 80px;
    left: -12px;
    bottom: -8px;
  }

  .about-founded-badge {
    padding: 10px 14px;
    gap: 8px;
  }

  .about-founded-badge .icon {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
  }

  .about-founded-badge .year {
    font-size: 0.85rem;
  }

  .about-founded-badge .label {
    font-size: 0.7rem;
  }

  .about-text {
    font-size: 0.9rem;
  }
}