/* ==========================================================================
   Urban Arts — Main Stylesheet
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;600;700;900&display=swap');

/* --- Design tokens ------------------------------------------------------ */
:root {
  --background: #F5F6FA;
  --foreground: #252525;
  --card: #ffffff;
  --primary: #E8192C;
  --secondary: #0B0B0B;
  --gold: #F4B400;
  --gold-soft: #FFD45A;
  --muted: #ececf0;
  --muted-foreground: #717182;
  --accent: #F4B400;
  --border: rgba(0, 0, 0, 0.1);
  --border-radius: 0.625rem;
  --max-width: 1280px;
}

/* --- Reset ---------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Red Hat Display', sans-serif;
  background: var(--background);
  color: var(--foreground);
  line-height: 1.5;
  min-height: 100vh;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 1rem; }
ul { list-style: none; margin: 0; padding: 0; }

h1 { font-size: 2rem; font-weight: 500; }
h2 { font-size: 1.5rem; font-weight: 500; }
h3 { font-size: 1.25rem; font-weight: 500; }
h4 { font-size: 1rem; font-weight: 500; }

/* --- Layout helpers ------------------------------------------------------*/
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }

.page-body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

/* --- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-block;
  border-radius: 6px;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: #cf1526; }
.btn-outline { background: transparent; color: #fff; border: 2px solid #fff; }
.btn-outline:hover { background: rgba(255,255,255,0.1); }
.btn-light { background: var(--background); color: var(--primary); }
.btn-light:hover { background: #e4e4ea; }

/* --- Header / Navigation ------------------------------------------------*/
.site-header {
  background: #ffffff;
  color: var(--foreground);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.5rem;
}
.nav-logo img { height: 2.75rem; }

.nav-links {
  display: none;
  align-items: center;
  gap: 0.25rem;
}
.nav-links a {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--foreground);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-links a:hover { background: transparent; color: var(--primary); }
.nav-links a.active { background: transparent; color: var(--primary); }

.nav-toggle {
  display: block;
  background: none;
  border: none;
  color: var(--foreground);
  padding: 0.5rem;
  border-radius: 6px;
}
.nav-toggle:hover { background: var(--muted); color: var(--primary); }

.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  padding-bottom: 0.75rem;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  padding: 0.65rem 0.75rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--foreground);
}
.nav-mobile a:hover, .nav-mobile a.active { background: var(--muted); color: var(--primary); }

@media (min-width: 768px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  .nav-mobile { display: none !important; }
}

/* --- Footer ---------------------------------------------------------- */
.site-footer {
  background: #0d0d0d;
  color: #fff;
  padding: 3rem 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}
.footer-logo { height: 2.5rem; margin-bottom: 1rem; filter: brightness(0) invert(1); }
.footer-text { color: #c7cad1; font-size: 0.875rem; }
.footer-heading { font-weight: 600; margin-bottom: 1rem; }
.footer-links { display: flex; flex-direction: column; gap: 0.5rem; color: #c7cad1; font-size: 0.875rem; }
.footer-social { display: flex; gap: 1rem; }
.footer-social a { color: #c7cad1; }
.footer-social a:hover { color: var(--primary); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.875rem;
  color: #c7cad1;
}
.footer-bottom-links { margin-top: 0.5rem; }
.footer-bottom-links a { margin: 0 0.5rem; }
.footer-bottom-links a:hover { color: #fff; }

@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- Hero --------------------------------------------------------------*/
.hero {
  background: linear-gradient(to right, var(--primary), var(--secondary));
  color: #fff;
  text-align: center;
  padding: 6rem 0;
}
.hero img { height: 4rem; margin: 0 auto 2rem; }
.hero p { font-size: 1.25rem; max-width: 48rem; margin: 1.5rem auto 0; }
.hero-actions { margin-top: 2.5rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* --- Section spacing -----------------------------------------------------*/
.section { padding: 6rem 0; }
.section-sm { padding: 4rem 0; }
.section-header { text-align: center; margin-bottom: 4rem; }
.section-header h2 { font-size: 1.875rem; font-weight: 700; }
.section-header p { margin-top: 1rem; font-size: 1.125rem; color: var(--muted-foreground); }

/* --- Feature grid --------------------------------------------------------*/
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.feature-card {
  border: 1px solid var(--border);
  background: var(--background);
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: box-shadow 0.15s ease;
}
.feature-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.feature-card:hover h3 { color: var(--primary); }
.feature-card-top { display: flex; align-items: center; gap: 1rem; }
.feature-icon {
  background: var(--primary);
  color: #fff;
  border-radius: 8px;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.feature-card h3 { font-size: 1.125rem; font-weight: 600; transition: color 0.15s ease; }
.feature-card p { margin-top: 1rem; font-size: 0.875rem; color: var(--muted-foreground); }

@media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }

/* --- Client grid ---------------------------------------------------------*/
.client-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.client-card {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: background-color 0.15s ease;
}
.client-card:hover { background: #e0e0e6; }
.client-card p { font-size: 0.75rem; font-weight: 600; color: #4b5563; line-height: 1.3; }

@media (min-width: 768px) { .client-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .client-grid { grid-template-columns: repeat(6, 1fr); } }

/* --- Stats ---------------------------------------------------------------*/
.stats-section { background: var(--secondary); color: #fff; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  text-align: center;
}
.stat-number { font-size: 2.25rem; font-weight: 700; color: var(--primary); }
.stat-label { margin-top: 0.5rem; font-size: 0.875rem; color: #c7cad1; }

@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }

/* --- CTA banner ------------------------------------------------------- */
.cta-banner {
  border-radius: 16px;
  background: linear-gradient(to right, var(--primary), var(--secondary));
  color: #fff;
  text-align: center;
  padding: 4rem 1.5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.cta-banner h2 { font-size: 1.875rem; font-weight: 700; }
.cta-banner p { margin-top: 1rem; font-size: 1.125rem; }
.cta-banner .btn { margin-top: 2rem; }

/* --- Domain search widget ------------------------------------------------*/
.domain-search-widget {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  padding: 2rem;
}
.domain-search-form {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.domain-search-form input {
  flex: 1;
  min-width: 200px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 1.125rem;
}
.domain-search-form input:focus { outline: none; border-color: var(--primary); }
.domain-results { display: flex; flex-direction: column; gap: 0.75rem; }
.domain-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  gap: 1rem;
  flex-wrap: wrap;
}
.domain-result-left { display: flex; align-items: center; gap: 0.75rem; }
.domain-result-right { display: flex; align-items: center; gap: 1rem; }
.domain-price { font-weight: 700; color: var(--primary); }
.icon-available { color: #22c55e; }
.icon-unavailable { color: #f87171; }
.btn-sm {
  padding: 0.4rem 1rem;
  font-size: 0.875rem;
  border-radius: 6px;
}

/* --- Instagram feed --------------------------------------------------- */
.instagram-section { background: #fff; padding: 5rem 0; }
.instagram-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 3rem;
}
.instagram-heading h2 { font-size: 1.875rem; font-weight: 700; color: #111827; }
.instagram-heading svg { color: #ec4899; }
.instagram-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 768px) { .instagram-grid { grid-template-columns: repeat(4, 1fr); } }

.instagram-post { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 1 / 1; }
.instagram-post img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.3s ease;
}
.instagram-post:hover img { transform: scale(1.1); }
.instagram-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem; color: #fff; padding: 1rem; text-align: center;
  transition: opacity 0.3s ease;
}
.instagram-post:hover .instagram-overlay { opacity: 1; }
.instagram-overlay p { font-size: 0.75rem; }
.instagram-meta { display: flex; gap: 1rem; margin-top: 0.5rem; font-size: 0.875rem; }
.instagram-meta span { display: flex; align-items: center; gap: 0.25rem; }
.instagram-cta { text-align: center; margin-top: 2rem; }
.instagram-cta a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: linear-gradient(to right, #ec4899, #9333ea);
  color: #fff; padding: 0.75rem 2rem; border-radius: 999px; font-weight: 600;
  transition: opacity 0.15s ease;
}
.instagram-cta a:hover { opacity: 0.9; }

/* --- Floating chatbot ------------------------------------------------- */
.chatbot-wrapper { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 50; }
.chatbot-launcher {
  background: var(--primary); color: #fff;
  height: 3.5rem; width: 3.5rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  border: none; transition: transform 0.15s ease, background-color 0.15s ease;
}
.chatbot-launcher:hover { background: #cf1526; transform: scale(1.1); }

.chatbot-panel {
  display: none;
  width: 20rem;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  border: 1px solid #f0f0f0;
  overflow: hidden;
  margin-bottom: 1rem;
}
.chatbot-panel.open { display: block; }
.chatbot-header {
  background: linear-gradient(to right, #dc2626, #1f2937);
  color: #fff;
  padding: 0.75rem 1rem;
  display: flex; align-items: center; justify-content: space-between;
}
.chatbot-header-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.875rem; }
.chatbot-header button { background: none; border: none; color: #fff; display: flex; }

.chatbot-messages { height: 16rem; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.chat-msg { display: flex; gap: 0.5rem; max-width: 100%; }
.chat-msg.user { flex-direction: row-reverse; }
.chat-avatar {
  height: 1.5rem; width: 1.5rem; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.chat-avatar.bot { background: #fee2e2; color: var(--primary); }
.chat-avatar.user { background: #e5e7eb; color: #4b5563; }
.chat-bubble { padding: 0.5rem 0.75rem; border-radius: 12px; font-size: 0.875rem; max-width: 85%; }
.chat-bubble.bot { background: #f3f4f6; color: #1f2937; }
.chat-bubble.user { background: var(--primary); color: #fff; }
.chat-bubble.typing { color: #9ca3af; font-style: italic; }

.chatbot-input-row { border-top: 1px solid #eee; padding: 0.75rem; display: flex; gap: 0.5rem; }
.chatbot-input-row input {
  flex: 1; font-size: 0.875rem; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.5rem 0.75rem;
}
.chatbot-input-row input:focus { outline: none; border-color: #f87171; }
.chatbot-input-row button {
  background: var(--primary); color: #fff; border: none; padding: 0.5rem; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.chatbot-input-row button:hover { background: #cf1526; }
.chatbot-input-row button:disabled, .chatbot-input-row input:disabled { opacity: 0.5; }

/* --- Generic form styles (contact / other pages) ------------------------*/
.form-field { margin-bottom: 1.25rem; }
.form-field label { display: block; margin-bottom: 0.375rem; font-weight: 500; font-size: 0.875rem; }
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0.625rem 0.875rem;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus { outline: none; border-color: var(--primary); }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ==========================================================================
   Shared "inner page" components (About, Printing, Domain, Chatbot,
   Social, Hosting, Portfolio, Contact)
   ========================================================================== */

/* Generic page hero (title + subtitle on a gradient band) */
.page-hero {
  background: linear-gradient(to right, var(--primary), var(--secondary));
  color: #fff;
  text-align: center;
  padding: 5rem 0;
}
.page-hero h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; }
.page-hero p { font-size: 1.125rem; max-width: 42rem; margin: 0 auto; opacity: 0.9; }
.page-hero-icon { margin: 0 auto 1.5rem; color: #fff; }

/* Icon circle used across many pages */
.icon-circle {
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: rgba(232,25,44,0.1); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.icon-circle-lg { width: 4rem; height: 4rem; }

/* Simple two/three/four column responsive grid helpers used by inner pages */
.grid-2-col { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
.grid-3-col { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.grid-4-col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (min-width: 768px) {
  .grid-2-col { grid-template-columns: 1fr 1fr; }
  .grid-3-col { grid-template-columns: repeat(3, 1fr); }
  .grid-4-col { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .grid-4-col { grid-template-columns: repeat(4, 1fr); }
}

.stat-box { background: var(--card); border-radius: 8px; padding: 1.5rem; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.stat-box .stat-number-sm { font-size: 2rem; font-weight: 700; color: var(--primary); margin-bottom: 0.25rem; }
.stat-box .stat-caption { font-size: 0.875rem; color: var(--muted-foreground); }

.value-card { text-align: center; }
.value-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 4rem; height: 4rem; border-radius: 50%;
  background: rgba(232,25,44,0.1); color: var(--primary);
  font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem;
}
.value-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; }
.value-card p { color: var(--muted-foreground); }

.team-card { background: var(--card); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08); transition: box-shadow 0.15s ease; }
.team-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.team-photo { aspect-ratio: 1/1; overflow: hidden; background: var(--muted); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card-body { padding: 1.5rem; }
.team-card-body h3 { font-size: 1.125rem; font-weight: 700; }
.team-role { color: var(--primary); font-weight: 500; margin: 0.25rem 0 0.75rem; }
.team-bio { font-size: 0.875rem; color: var(--muted-foreground); }

/* Services page */
.service-category-card { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); padding: 1.5rem; }
.service-category-card h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; }
.service-item { border-left: 4px solid var(--primary); padding-left: 1rem; margin-bottom: 1rem; }
.service-item:last-child { margin-bottom: 0; }
.service-item h3 { font-weight: 600; font-size: 1rem; }
.service-item p { font-size: 0.875rem; color: var(--muted-foreground); }

.quote-form-card { background: #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); padding: 2rem; max-width: 48rem; margin: 0 auto; }
.quote-form-title { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.quote-form-title h2 { font-size: 1.5rem; font-weight: 700; }
.upload-note { display: flex; align-items: center; gap: 0.5rem; padding: 1rem; background: #fef2f2; border-radius: 8px; font-size: 0.875rem; margin-bottom: 1.5rem; }
.btn-block { width: 100%; text-align: center; }

/* Domain search page */
.search-page-hero { text-align: center; margin-bottom: 3rem; }
.domain-input-wrap { position: relative; flex: 1; }
.domain-input-wrap input { width: 100%; padding-right: 2.5rem; }
.domain-input-wrap svg { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); color: #9ca3af; }
.info-box { background: #fef2f2; border-radius: 8px; padding: 2rem; }
.info-box h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem; }
.info-list { display: flex; flex-direction: column; gap: 0.5rem; }
.info-list li { display: flex; align-items: flex-start; gap: 0.5rem; }
.info-list svg { color: var(--primary); flex-shrink: 0; margin-top: 0.15rem; }
.suggestion-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) { .suggestion-grid { grid-template-columns: 1fr 1fr; } }
.suggestion-card {
  text-align: left; padding: 1rem; border: 1px solid #e5e7eb; border-radius: 8px;
  background: #fff; width: 100%; transition: border-color 0.15s ease, background-color 0.15s ease;
}
.suggestion-card:hover { border-color: var(--primary); background: #fef2f2; }
.suggestion-card p:first-child { font-weight: 500; }
.suggestion-card p:last-child { font-size: 0.875rem; color: var(--muted-foreground); }

/* Chatbot page (full page chat, distinct from the floating widget) */
.chat-page-window { background: #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); overflow: hidden; display: flex; flex-direction: column; height: 600px; }
.chat-page-header { background: linear-gradient(to right, #dc2626, #1f2937); color: #fff; padding: 1rem 1.5rem; display: flex; align-items: center; gap: 0.75rem; }
.chat-page-header-icon { height: 2.5rem; width: 2.5rem; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; }
.chat-page-header h2 { font-weight: 600; font-size: 1rem; }
.chat-page-header p { font-size: 0.875rem; color: #fecaca; }
.chat-page-messages { flex: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.chat-page-msg { display: flex; gap: 0.75rem; max-width: 90%; }
.chat-page-msg.user { flex-direction: row-reverse; margin-left: auto; }
.chat-page-avatar { height: 2rem; width: 2rem; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.chat-page-avatar.bot { background: #fee2e2; color: var(--primary); }
.chat-page-avatar.user { background: #e5e7eb; color: #4b5563; }
.chat-page-bubble { max-width: 100%; padding: 0.75rem 1rem; border-radius: 8px; }
.chat-page-bubble.bot { background: #f3f4f6; color: #111827; }
.chat-page-bubble.user { background: var(--primary); color: #fff; }
.chat-page-bubble .chat-time { font-size: 0.75rem; margin-top: 0.25rem; opacity: 0.7; }
.chat-page-input-area { border-top: 1px solid #e5e7eb; padding: 1rem; }
.chat-page-input-row { display: flex; gap: 0.5rem; }
.chat-page-input-row input { flex: 1; border: 1px solid #d1d5db; border-radius: 6px; padding: 0.5rem 1rem; }
.chat-page-input-row input:focus { outline: none; border-color: var(--primary); }
.chat-page-input-row button { background: var(--primary); color: #fff; border: none; padding: 0.5rem 1.5rem; border-radius: 6px; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }
.chat-page-input-row button:hover { background: #cf1526; }
.chat-page-hint { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.5rem; }
.quick-topics { margin-top: 2rem; background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); padding: 1.5rem; }
.quick-topics h3 { font-weight: 600; margin-bottom: 1rem; }
.quick-topic-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) { .quick-topic-grid { grid-template-columns: 1fr 1fr; } }
.quick-topic-btn { text-align: left; padding: 0.75rem; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; font-size: 0.875rem; transition: border-color 0.15s ease, background-color 0.15s ease; }
.quick-topic-btn:hover { border-color: var(--primary); background: #fef2f2; }

/* Social media page */
.social-link-card { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); padding: 1.5rem; text-align: center; transition: box-shadow 0.15s ease; }
.social-link-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.social-link-card:hover h3 { color: var(--secondary); }
.social-icon-circle { height: 3rem; width: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem; color: #fff; }
.social-link-card h3 { font-weight: 600; }
.social-link-card .followers { font-size: 0.875rem; color: var(--muted-foreground); margin-top: 0.25rem; }
.social-visit { display: flex; align-items: center; justify-content: center; gap: 0.25rem; margin-top: 0.5rem; color: var(--primary); font-size: 0.875rem; }

.social-post-card { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); overflow: hidden; }
.social-post-image { aspect-ratio: 1/1; background: var(--muted); }
.social-post-image img { width: 100%; height: 100%; object-fit: cover; }
.social-post-body { padding: 1.5rem; }
.platform-badge { font-size: 0.75rem; font-weight: 600; color: var(--primary); background: #fef2f2; padding: 0.25rem 0.5rem; border-radius: 4px; margin-right: 0.5rem; }
.social-post-time { font-size: 0.75rem; color: var(--muted-foreground); }
.social-post-body p.post-content { margin: 0.75rem 0; color: #374151; }
.social-post-meta { display: flex; gap: 1.5rem; font-size: 0.875rem; color: var(--muted-foreground); }

.social-cta-banner { margin-top: 3rem; background: linear-gradient(to right, #dc2626, #1f2937); border-radius: 8px; padding: 2rem; text-align: center; color: #fff; }
.social-cta-banner h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
.social-cta-links { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.5rem; }
.social-cta-links a { display: flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.1); padding: 0.75rem 1.5rem; border-radius: 6px; font-weight: 600; transition: background-color 0.15s ease; }
.social-cta-links a:hover { background: rgba(255,255,255,0.2); }

/* Hosting page */
.spec-table { background: var(--card); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); overflow: hidden; }
.spec-row { padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); }
.spec-row:last-child { border-bottom: none; }
.spec-row:hover { background: var(--muted); }
.spec-label { font-weight: 500; }
.spec-value { color: var(--primary); font-weight: 600; }

.security-check-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.security-check-list li { display: flex; align-items: flex-start; gap: 0.75rem; }
.security-check-list svg { color: #22c55e; flex-shrink: 0; margin-top: 0.15rem; }

.uptime-card { background: linear-gradient(to bottom right, var(--primary), var(--secondary)); border-radius: 8px; padding: 2rem; color: #fff; }
.uptime-card h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
.uptime-number { font-size: 3.75rem; font-weight: 700; margin-bottom: 1rem; }
.uptime-card p.uptime-desc { color: rgba(255,255,255,0.8); margin-bottom: 1.5rem; }
.uptime-footnote { border-top: 1px solid rgba(255,255,255,0.2); padding-top: 1.5rem; font-size: 0.875rem; }

.mgmt-card { background: var(--card); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); padding: 1.5rem; }
.mgmt-card h3 { font-weight: 600; margin-bottom: 1rem; }
.mgmt-list { display: flex; flex-direction: column; gap: 0.5rem; }
.mgmt-list li { display: flex; align-items: center; gap: 0.5rem; color: var(--muted-foreground); }
.mgmt-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--primary); flex-shrink: 0; }

/* Portfolio page */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 3rem; }
.filter-btn { padding: 0.5rem 1.5rem; border-radius: 999px; font-weight: 500; border: 1px solid #e5e7eb; background: #fff; color: #374151; transition: background-color 0.15s ease, color 0.15s ease; }
.filter-btn:hover { background: #f3f4f6; }
.filter-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.project-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .project-grid { grid-template-columns: repeat(3, 1fr); } }
.project-card { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); overflow: hidden; transition: box-shadow 0.15s ease; }
.project-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.project-image { aspect-ratio: 16/9; background: var(--muted); overflow: hidden; }
.project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.project-card:hover .project-image img { transform: scale(1.05); }
.project-body { padding: 1.5rem; }
.category-badge { display: inline-block; font-size: 0.75rem; font-weight: 600; color: var(--primary); background: #fef2f2; padding: 0.25rem 0.5rem; border-radius: 4px; margin-bottom: 0.5rem; }
.project-body h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }
.project-body p { color: #4b5563; }
.empty-state { text-align: center; padding: 3rem 0; color: var(--muted-foreground); }

/* Contact page */
.contact-info-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .contact-info-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .contact-info-grid { grid-template-columns: repeat(4, 1fr); } }
.contact-info-card { background: var(--card); border-radius: 8px; padding: 1.5rem; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.contact-info-card h3 { font-weight: 600; margin-bottom: 0.25rem; }
.contact-info-card a, .contact-info-card p.detail { font-size: 0.875rem; color: var(--muted-foreground); }
.contact-info-card a:hover { color: var(--primary); }

.contact-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 2fr 1fr; } }
.contact-form-col h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; }
.contact-form-col > p { color: var(--muted-foreground); margin-bottom: 2rem; }
.success-box { background: rgba(232,25,44,0.08); border: 1px solid rgba(232,25,44,0.25); border-radius: 8px; padding: 2rem; text-align: center; }
.success-icon { background: rgba(232,25,44,0.15); height: 4rem; width: 4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; color: var(--primary); }
.success-box h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }

.sidebar-stack { display: flex; flex-direction: column; gap: 2rem; }
.sidebar-card { background: var(--muted); border-radius: 8px; padding: 1.5rem; }
.sidebar-card h3 { font-weight: 700; margin-bottom: 1rem; }
.sidebar-social-link { display: flex; align-items: center; gap: 0.75rem; color: var(--muted-foreground); margin-bottom: 0.75rem; font-size: 0.875rem; }
.sidebar-social-link:last-child { margin-bottom: 0; }
.sidebar-social-link:hover { color: var(--primary); }
.sidebar-card-dark { background: linear-gradient(to bottom right, var(--primary), var(--secondary)); border-radius: 8px; padding: 1.5rem; color: #fff; }
.sidebar-card-dark h3 { font-weight: 700; margin-bottom: 0.75rem; }
.sidebar-card-dark p { font-size: 0.875rem; color: rgba(255,255,255,0.8); margin-bottom: 1rem; }
.sidebar-card-dark a { display: inline-block; background: #fff; color: var(--primary); font-weight: 600; padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.875rem; }
.sidebar-card-bordered { border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; }
.sidebar-card-bordered h3 { font-weight: 700; margin-bottom: 0.75rem; }
.response-list { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
.response-list li { display: flex; justify-content: space-between; }
.response-list span.value { font-weight: 500; color: var(--foreground); }

/* --- Simple page hero (no image, used on inner pages) --------------------*/
.page-hero {
  background: linear-gradient(to right, var(--primary), var(--secondary));
  color: #fff;
  text-align: center;
  padding: 5rem 0;
}
.page-hero h1 { font-size: 2.25rem; font-weight: 700; }
.page-hero p { margin-top: 1.5rem; font-size: 1.25rem; max-width: 48rem; margin-left: auto; margin-right: auto; }
@media (min-width: 640px) { .page-hero h1 { font-size: 3rem; } }

/* --- Two-column content + stat boxes (About: Our Story) -----------------*/
.story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
.story-text h2 { font-size: 1.875rem; font-weight: 700; margin-bottom: 1.5rem; }
.story-text p { margin-bottom: 1rem; color: var(--muted-foreground); }
.stat-box-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.stat-box {
  background: var(--background);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.stat-box .stat-number { font-size: 2.25rem; margin-bottom: 0.5rem; }
.stat-box .stat-label { color: var(--muted-foreground); font-size: 0.875rem; }
@media (min-width: 1024px) { .story-grid { grid-template-columns: 1fr 1fr; } }

/* --- Numbered value cards (About: Mission & Values) ----------------------*/
.value-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.value-card { text-align: center; }
.value-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 4rem; height: 4rem; border-radius: 50%;
  background: rgba(232,25,44,0.1); margin-bottom: 1rem;
}
.value-number span { font-size: 1.5rem; font-weight: 700; color: var(--primary); }
.value-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; }
.value-card p { color: var(--muted-foreground); }
@media (min-width: 768px) { .value-grid { grid-template-columns: repeat(3, 1fr); } }

/* --- Team cards ---------------------------------------------------------*/
.team-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.team-card {
  background: var(--card);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: box-shadow 0.15s ease;
}
.team-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.team-photo { aspect-ratio: 1/1; overflow: hidden; background: var(--muted); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-info { padding: 1.5rem; }
.team-info h3 { font-size: 1.25rem; font-weight: 700; }
.team-info .team-title { color: var(--primary); font-weight: 500; margin: 0.25rem 0 0.75rem; }
.team-info p { font-size: 0.875rem; color: var(--muted-foreground); }
@media (min-width: 640px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }

/* --- CTA section (full-width gradient, used on multiple inner pages) -----*/
.cta-section {
  background: linear-gradient(to right, var(--primary), var(--secondary));
  color: #fff;
  padding: 4rem 0;
  text-align: center;
}
.cta-section h2 { font-size: 1.875rem; font-weight: 700; margin-bottom: 1rem; }
.cta-section p { font-size: 1.25rem; margin-bottom: 2rem; }
.cta-section .hero-actions { margin-top: 0; }

/* --- Generic inner-page wrapper (gray background pages) ------------------*/
.inner-page { background: #f9fafb; min-height: 100vh; padding: 3rem 0; }
.inner-page .page-title { text-align: center; margin-bottom: 3rem; }
.inner-page .page-title h1 { font-size: 2.25rem; font-weight: 700; color: #111827; }
.inner-page .page-title p { margin-top: 1rem; font-size: 1.125rem; color: #4b5563; }

/* --- Services grid (Printing Services page) -------------------------- */
.services-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 4rem; }
.service-category { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); padding: 1.5rem; }
.service-category h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; color: #111827; }
.service-item { border-left: 4px solid var(--primary); padding-left: 1rem; margin-bottom: 1rem; }
.service-item h3 { font-weight: 600; color: #111827; font-size: 1rem; }
.service-item p { font-size: 0.875rem; color: #4b5563; margin-top: 0.25rem; }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }

/* --- Quote / general form card ------------------------------------------*/
.form-card { background: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 2rem; max-width: 48rem; margin: 0 auto; }
.form-card-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.form-card-header h2 { font-size: 1.5rem; font-weight: 700; color: #111827; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-note {
  display: flex; align-items: center; gap: 0.5rem;
  background: #fef2f2; padding: 1rem; border-radius: 8px; margin-bottom: 1.5rem;
  font-size: 0.875rem; color: #374151;
}
.btn-block { width: 100%; text-align: center; }

/* --- Portfolio filter + grid ---------------------------------------------*/
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 3rem; }
.filter-btn {
  padding: 0.5rem 1.5rem; border-radius: 999px; font-weight: 500;
  background: #fff; color: #374151; border: 1px solid #e5e7eb;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.filter-btn:hover { background: #f3f4f6; }
.filter-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.portfolio-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.portfolio-card { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: box-shadow 0.15s ease; }
.portfolio-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.12); }
.portfolio-thumb { aspect-ratio: 16/10; overflow: hidden; background: #e5e7eb; }
.portfolio-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.portfolio-card:hover .portfolio-thumb img { transform: scale(1.05); }
.portfolio-body { padding: 1.5rem; }
.portfolio-tag { display: inline-block; font-size: 0.75rem; font-weight: 600; color: #dc2626; background: #fef2f2; padding: 0.25rem 0.5rem; border-radius: 4px; margin-bottom: 0.5rem; }
.portfolio-body h3 { font-size: 1.25rem; font-weight: 700; color: #111827; margin-bottom: 0.5rem; }
.portfolio-body p { color: #4b5563; }
@media (min-width: 768px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .portfolio-grid { grid-template-columns: repeat(3, 1fr); } }

/* --- Contact page ---------------------------------------------------- */
.contact-info-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.contact-info-card { background: var(--card); border-radius: 8px; padding: 1.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); text-align: center; }
.contact-icon-circle {
  background: rgba(232,25,44,0.1); height: 3.5rem; width: 3.5rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem;
  color: var(--primary);
}
.contact-info-card h3 { font-weight: 600; margin-bottom: 0.25rem; }
.contact-info-card a, .contact-info-card p { font-size: 0.875rem; color: var(--muted-foreground); }
.contact-info-card a:hover { color: var(--primary); }
@media (min-width: 640px) { .contact-info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .contact-info-grid { grid-template-columns: repeat(4, 1fr); } }

.contact-layout { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 1024px) { .contact-layout { grid-template-columns: 2fr 1fr; } }
.contact-success {
  background: rgba(232,25,44,0.08); border: 1px solid rgba(232,25,44,0.25);
  border-radius: 8px; padding: 2rem; text-align: center;
}
.contact-success .contact-icon-circle { background: rgba(232,25,44,0.15); height: 4rem; width: 4rem; }
.contact-success h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }

.sidebar-box { border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem; }
.sidebar-box.muted-box { background: var(--muted); }
.sidebar-box.gradient-box { background: linear-gradient(to bottom right, var(--primary), var(--secondary)); color: #fff; }
.sidebar-box.border-box { border: 1px solid var(--border); }
.sidebar-box h3 { font-weight: 700; margin-bottom: 1rem; }
.sidebar-social-link { display: flex; align-items: center; gap: 0.75rem; color: var(--muted-foreground); font-size: 0.875rem; margin-bottom: 0.75rem; }
.sidebar-social-link:hover { color: var(--primary); }
.response-list { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
.response-list li { display: flex; justify-content: space-between; }
.response-list span.value { font-weight: 500; color: var(--foreground); }

/* --- Hosting page ---------------------------------------------------- */
.hosting-feature-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; text-align: center; }
.hosting-feature-icon {
  background: rgba(232,25,44,0.1); height: 4rem; width: 4rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; color: var(--primary);
}
@media (min-width: 768px) { .hosting-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hosting-feature-grid { grid-template-columns: repeat(4, 1fr); } }

.spec-table { background: var(--card); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); overflow: hidden; max-width: 64rem; margin: 0 auto; }
.spec-row { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); }
.spec-row:last-child { border-bottom: none; }
.spec-row .spec-value { color: var(--primary); font-weight: 600; }

.security-check-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.security-check-list li { display: flex; align-items: flex-start; gap: 0.75rem; }
.security-check-list svg { color: #22c55e; flex-shrink: 0; margin-top: 2px; }

.uptime-box { background: linear-gradient(to bottom right, var(--primary), var(--secondary)); border-radius: 8px; padding: 2rem; color: #fff; }
.uptime-box .uptime-number { font-size: 3.5rem; font-weight: 700; margin-bottom: 1rem; }
.uptime-box .uptime-note { border-top: 1px solid rgba(255,255,255,0.2); padding-top: 1.5rem; margin-top: 1.5rem; font-size: 0.875rem; }

.mgmt-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.mgmt-card { background: var(--card); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); padding: 1.5rem; }
.mgmt-card h3 { font-weight: 600; margin-bottom: 1rem; }
.mgmt-card ul { display: flex; flex-direction: column; gap: 0.5rem; }
.mgmt-card li { display: flex; align-items: center; gap: 0.5rem; color: var(--muted-foreground); font-size: 0.9375rem; }
.mgmt-dot { height: 0.5rem; width: 0.5rem; background: var(--primary); border-radius: 50%; flex-shrink: 0; }
@media (min-width: 768px) { .mgmt-grid { grid-template-columns: repeat(3, 1fr); } }

/* --- Full-page Chatbot (Chatbot page, distinct from floating widget) -----*/
.chat-page-panel { background: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); overflow: hidden; display: flex; flex-direction: column; height: 600px; max-width: 56rem; margin: 0 auto; }
.chat-page-header { background: linear-gradient(to right, #dc2626, #1f2937); color: #fff; padding: 1rem 1.5rem; display: flex; align-items: center; gap: 0.75rem; }
.chat-page-avatar { height: 2.5rem; width: 2.5rem; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; }
.chat-page-header h2 { font-weight: 600; font-size: 1rem; }
.chat-page-header .status { font-size: 0.875rem; color: #fecaca; }
.chat-page-messages { flex: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.chat-page-msg { display: flex; gap: 0.75rem; max-width: 85%; }
.chat-page-msg.user { flex-direction: row-reverse; margin-left: auto; }
.chat-page-avatar-sm { height: 2rem; width: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chat-page-avatar-sm.bot { background: #fee2e2; color: var(--primary); }
.chat-page-avatar-sm.user { background: #e5e7eb; color: #4b5563; }
.chat-page-bubble { padding: 0.75rem 1rem; border-radius: 8px; }
.chat-page-bubble.bot { background: #f3f4f6; color: #111827; }
.chat-page-bubble.user { background: var(--primary); color: #fff; }
.chat-page-time { font-size: 0.75rem; margin-top: 0.25rem; }
.chat-page-bubble.user .chat-page-time { color: #fecaca; }
.chat-page-bubble.bot .chat-page-time { color: #6b7280; }
.chat-page-input-area { border-top: 1px solid #e5e7eb; padding: 1rem; }
.chat-page-input-row { display: flex; gap: 0.5rem; }
.chat-page-input-row input { flex: 1; border: 1px solid #d1d5db; border-radius: 6px; padding: 0.5rem 1rem; }
.chat-page-input-row input:focus { outline: none; border-color: var(--primary); }
.chat-page-input-row button { background: var(--primary); color: #fff; padding: 0.5rem 1.5rem; border-radius: 6px; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; border: none; }
.chat-page-input-row button:hover { background: #cf1526; }
.chat-page-hint { font-size: 0.75rem; color: #6b7280; margin-top: 0.5rem; }

.quick-topics { margin-top: 2rem; background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); padding: 1.5rem; max-width: 56rem; margin-left: auto; margin-right: auto; }
.quick-topics h3 { font-weight: 600; margin-bottom: 1rem; }
.quick-topic-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.quick-topic-btn { text-align: left; padding: 0.75rem; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 0.875rem; background: #fff; transition: border-color 0.15s ease, background-color 0.15s ease; }
.quick-topic-btn:hover { border-color: var(--primary); background: #fef2f2; }
@media (min-width: 640px) { .quick-topic-grid { grid-template-columns: 1fr 1fr; } }

/* --- Domain Search full page ---------------------------------------------*/
.domain-page-icon { color: var(--primary); margin: 0 auto 1rem; display: block; }
.domain-page-card { background: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 2rem; margin-bottom: 2rem; }
.domain-page-form-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.domain-page-input-wrap { position: relative; flex: 1; min-width: 200px; }
.domain-page-input-wrap input { width: 100%; border: 1px solid #d1d5db; border-radius: 6px; padding: 0.75rem 2.5rem 0.75rem 1rem; font-size: 1.125rem; }
.domain-page-input-wrap input:focus { outline: none; border-color: var(--primary); }
.domain-page-input-wrap svg { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); color: #9ca3af; }
.domain-page-result-row { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 0.75rem; flex-wrap: wrap; gap: 1rem; transition: border-color 0.15s ease; }
.domain-page-result-row:hover { border-color: #fca5a5; }
.domain-page-result-left { display: flex; align-items: center; gap: 0.75rem; }
.domain-page-result-left p:first-child { font-weight: 600; color: #111827; }
.domain-page-result-left p:last-child { font-size: 0.875rem; color: #6b7280; }
.domain-page-suggestion-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.domain-suggestion-btn { text-align: left; padding: 1rem; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; transition: border-color 0.15s ease, background-color 0.15s ease; }
.domain-suggestion-btn:hover { border-color: var(--primary); background: #fef2f2; }
.domain-suggestion-btn p:first-child { font-weight: 500; color: #111827; }
.domain-suggestion-btn p:last-child { font-size: 0.875rem; color: #6b7280; }
@media (min-width: 640px) { .domain-page-suggestion-grid { grid-template-columns: 1fr 1fr; } }
.domain-info-box { background: #fef2f2; border-radius: 8px; padding: 2rem; }
.domain-info-box h3 { font-weight: 600; margin-bottom: 1rem; }
.domain-info-box ul { display: flex; flex-direction: column; gap: 0.5rem; }
.domain-info-box li { display: flex; align-items: flex-start; gap: 0.5rem; color: #374151; }
.domain-info-box svg { color: var(--primary); flex-shrink: 0; margin-top: 2px; }

/* --- Social Media page ------------------------------------------------ */
.social-link-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 3rem; }
.social-link-card { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); padding: 1.5rem; text-align: center; transition: box-shadow 0.15s ease; }
.social-link-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
.social-link-icon { height: 3rem; width: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem; color: #fff; }
.social-link-card h3 { font-weight: 600; color: #111827; }
.social-link-card p { font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem; }
.social-link-visit { display: flex; align-items: center; justify-content: center; gap: 0.25rem; margin-top: 0.5rem; color: var(--primary); font-size: 0.875rem; }
@media (min-width: 1024px) { .social-link-grid { grid-template-columns: repeat(4, 1fr); } }

.social-post-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.social-post-card { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.social-post-thumb { aspect-ratio: 1/1; background: #e5e7eb; }
.social-post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.social-post-body { padding: 1.5rem; }
.social-post-meta { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.social-post-platform { font-size: 0.75rem; font-weight: 600; color: #dc2626; background: #fef2f2; padding: 0.25rem 0.5rem; border-radius: 4px; }
.social-post-time { font-size: 0.75rem; color: #6b7280; }
.social-post-body p.content { color: #374151; margin-bottom: 1rem; }
.social-post-stats { display: flex; gap: 1.5rem; font-size: 0.875rem; color: #6b7280; }
@media (min-width: 768px) { .social-post-grid { grid-template-columns: repeat(2, 1fr); } }

.social-cta { margin-top: 3rem; background: linear-gradient(to right, #dc2626, #1f2937); border-radius: 8px; padding: 2rem; text-align: center; color: #fff; }
.social-cta h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
.social-cta-links { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.5rem; }
.social-cta-links a { background: rgba(255,255,255,0.1); padding: 0.75rem 1.5rem; border-radius: 6px; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; transition: background-color 0.15s ease; }
.social-cta-links a:hover { background: rgba(255,255,255,0.2); }

/* --- Utility classes ------------------------------------------------- */
.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-4 { margin-top: 2rem; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   Shared inner-page components (About, Hosting, Contact, etc.)
   ========================================================================== */

.page-hero {
  background: linear-gradient(to right, var(--primary), var(--secondary));
  color: #fff;
  text-align: center;
  padding: 5rem 0;
}
.page-hero h1 { font-size: 2.5rem; font-weight: 700; }
.page-hero p { margin-top: 1.5rem; font-size: 1.125rem; max-width: 42rem; margin-left: auto; margin-right: auto; }
.page-hero svg { margin: 0 auto 1.5rem; display: block; }

.icon-circle {
  background: rgba(232, 25, 44, 0.1);
  height: 4rem; width: 4rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem; color: var(--primary);
}
.icon-circle.sm { height: 3.5rem; width: 3.5rem; margin-bottom: 0; }
.icon-circle svg { color: var(--primary); }

/* Numbered value circles (About page) */
.value-number {
  background: rgba(232, 25, 44, 0.1);
  color: var(--primary);
  height: 4rem; width: 4rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 700;
  margin: 0 auto 1rem;
}

.mini-stat-card {
  background: var(--card);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.mini-stat-card .stat-number { font-size: 2.25rem; }
.mini-stat-card .stat-label { color: var(--muted-foreground); }

.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 640px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }

.team-card {
  background: var(--card);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: box-shadow 0.15s ease;
}
.team-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.team-photo { aspect-ratio: 1/1; overflow: hidden; background: var(--muted); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-info { padding: 1.5rem; }
.team-info h3 { font-size: 1.125rem; }
.team-role { color: var(--primary); font-weight: 500; margin: 0.25rem 0 0.75rem; }
.team-bio { font-size: 0.875rem; color: var(--muted-foreground); }

.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  text-align: center;
}
@media (min-width: 768px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }

/* Generic dark CTA banner (About / Social / Chatbot pages) */
.dark-cta {
  background: linear-gradient(to right, var(--primary), var(--secondary));
  color: #fff;
  padding: 4rem 0;
  text-align: center;
  border-radius: 12px;
}
.dark-cta h2 { font-size: 1.875rem; font-weight: 700; margin-bottom: 1rem; }
.dark-cta p { font-size: 1.125rem; margin-bottom: 2rem; }
.dark-cta .btn-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* --- Printing Services page ---------------------------------------------*/
.services-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 4rem; }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
.service-category-card { background: var(--card); border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); padding: 1.5rem; }
.service-category-card h2 { font-size: 1.25rem; margin-bottom: 1rem; }
.service-item { border-left: 4px solid var(--primary); padding-left: 1rem; margin-bottom: 1rem; }
.service-item h3 { font-size: 1rem; font-weight: 600; }
.service-item p { font-size: 0.875rem; color: var(--muted-foreground); margin: 0.125rem 0 0; }

.quote-form-card { background: var(--card); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); padding: 2rem; max-width: 48rem; margin: 0 auto; }
.quote-form-card > .form-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.quote-form-card > .form-header h2 { font-size: 1.5rem; }
.upload-note { display: flex; align-items: center; gap: 0.75rem; background: #fef2f2; border-radius: 8px; padding: 1rem; font-size: 0.875rem; margin-bottom: 1.25rem; }
.btn-block { width: 100%; }

/* --- Domain Search (standalone page) ------------------------------------*/
.domain-page { padding: 3rem 0; }
.info-box { background: #fef2f2; border-radius: 8px; padding: 2rem; }
.info-box h3 { margin-bottom: 1rem; }
.info-box ul { display: flex; flex-direction: column; gap: 0.5rem; }
.info-box li { display: flex; align-items: flex-start; gap: 0.5rem; }
.suggestion-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) { .suggestion-grid { grid-template-columns: 1fr 1fr; } }
.suggestion-card {
  text-align: left; padding: 1rem; border: 1px solid #e5e7eb; border-radius: 8px;
  background: #fff; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease;
}
.suggestion-card:hover { border-color: var(--primary); background: #fef2f2; }
.suggestion-card .domain-name { font-weight: 500; }
.suggestion-card .domain-sub { font-size: 0.875rem; color: var(--muted-foreground); }
.result-status { font-size: 0.875rem; color: var(--muted-foreground); }

/* --- Chatbot standalone page ---------------------------------------------*/
.chat-page-window { background: #fff; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); overflow: hidden; display: flex; flex-direction: column; height: 600px; }
.chat-page-header { background: linear-gradient(to right, #dc2626, #1f2937); color: #fff; padding: 1rem 1.5rem; display: flex; align-items: center; gap: 0.75rem; }
.chat-page-avatar { height: 2.5rem; width: 2.5rem; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; }
.chat-page-header .status { font-size: 0.875rem; color: #fecaca; }
.chat-page-messages { flex: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.chat-page-msg { display: flex; gap: 0.75rem; max-width: 100%; }
.chat-page-msg.user { flex-direction: row-reverse; }
.chat-page-avatar-sm { height: 2rem; width: 2rem; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.chat-page-avatar-sm.bot { background: #fee2e2; color: var(--primary); }
.chat-page-avatar-sm.user { background: #e5e7eb; color: #4b5563; }
.chat-page-bubble { padding: 0.75rem 1rem; border-radius: 8px; max-width: 28rem; }
.chat-page-bubble.bot { background: #f3f4f6; color: #111827; }
.chat-page-bubble.user { background: var(--primary); color: #fff; }
.chat-page-time { font-size: 0.75rem; margin-top: 0.25rem; opacity: 0.7; }
.chat-page-input-area { border-top: 1px solid #e5e7eb; padding: 1rem; }
.chat-page-input-row { display: flex; gap: 0.5rem; }
.chat-page-input-row input { flex: 1; border: 1px solid #d1d5db; border-radius: 6px; padding: 0.5rem 1rem; }
.chat-page-input-row input:focus { outline: none; border-color: var(--primary); }
.chat-page-input-row button { background: var(--primary); color: #fff; border: none; padding: 0.5rem 1.5rem; border-radius: 6px; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }
.chat-page-input-row button:hover { background: #cf1526; }
.chat-page-hint { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.5rem; }

.quick-topics { background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); padding: 1.5rem; margin-top: 2rem; }
.quick-topics-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) { .quick-topics-grid { grid-template-columns: 1fr 1fr; } }
.quick-topic-btn {
  text-align: left; padding: 0.75rem; border: 1px solid #e5e7eb; border-radius: 6px;
  background: #fff; font-size: 0.875rem; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease;
}
.quick-topic-btn:hover { border-color: var(--primary); background: #fef2f2; }

/* --- Social Media page -----------------------------------------------*/
.social-links-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 3rem; }
@media (min-width: 1024px) { .social-links-grid { grid-template-columns: repeat(4, 1fr); } }
.social-link-card { background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); padding: 1.5rem; text-align: center; transition: box-shadow 0.15s ease; }
.social-link-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.social-link-card:hover h3 { color: var(--secondary); }
.social-icon-circle { height: 3rem; width: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem; color: #fff; }
.social-icon-circle.facebook { background: #dc2626; }
.social-icon-circle.instagram { background: #ef4444; }
.social-icon-circle.tiktok { background: #111827; }
.social-followers { font-size: 0.875rem; color: var(--muted-foreground); margin-top: 0.25rem; }
.social-visit { display: flex; align-items: center; justify-content: center; gap: 0.25rem; margin-top: 0.5rem; color: var(--primary); font-size: 0.875rem; }

.social-feed-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .social-feed-grid { grid-template-columns: 1fr 1fr; } }
.social-post-card { background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); overflow: hidden; }
.social-post-image { aspect-ratio: 1/1; background: #e5e7eb; overflow: hidden; }
.social-post-image img { width: 100%; height: 100%; object-fit: cover; }
.social-post-body { padding: 1.5rem; }
.social-post-tag { font-size: 0.75rem; font-weight: 600; color: #dc2626; background: #fef2f2; padding: 0.25rem 0.5rem; border-radius: 4px; }
.social-post-time { font-size: 0.75rem; color: var(--muted-foreground); margin-left: 0.5rem; }
.social-post-meta { display: flex; gap: 1.5rem; font-size: 0.875rem; color: var(--muted-foreground); margin-top: 1rem; }

.social-cta { margin-top: 3rem; background: linear-gradient(to right, #dc2626, #1f2937); border-radius: 8px; padding: 2rem; text-align: center; color: #fff; }
.social-cta-links { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.5rem; }
.social-cta-links a { background: rgba(255,255,255,0.1); padding: 0.75rem 1.5rem; border-radius: 6px; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; transition: background-color 0.15s ease; }
.social-cta-links a:hover { background: rgba(255,255,255,0.2); }

/* --- Hosting page ------------------------------------------------------- */
.hosting-features-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; text-align: center; }
@media (min-width: 768px) { .hosting-features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hosting-features-grid { grid-template-columns: repeat(4, 1fr); } }

.specs-list { background: var(--card); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); overflow: hidden; }
.spec-row { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid #e5e7eb; }
.spec-row:last-child { border-bottom: none; }
.spec-row:hover { background: var(--muted); }
.spec-value { color: var(--primary); font-weight: 600; }

.uptime-card { background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 8px; padding: 2rem; color: #fff; }
.uptime-number { font-size: 3.75rem; font-weight: 700; margin: 1rem 0; }
.uptime-card .divider { border-top: 1px solid rgba(255,255,255,0.2); padding-top: 1.5rem; margin-top: 1.5rem; }

.checklist { display: flex; flex-direction: column; gap: 1rem; }
.checklist li { display: flex; align-items: flex-start; gap: 0.75rem; }
.checklist svg { color: #22c55e; flex-shrink: 0; margin-top: 0.15rem; }

.mgmt-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .mgmt-grid { grid-template-columns: repeat(3, 1fr); } }
.mgmt-card { background: var(--card); border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); padding: 1.5rem; }
.mgmt-card ul { display: flex; flex-direction: column; gap: 0.5rem; }
.mgmt-card li { display: flex; align-items: center; gap: 0.5rem; color: var(--muted-foreground); }
.dot { height: 0.5rem; width: 0.5rem; border-radius: 50%; background: var(--primary); flex-shrink: 0; }

/* --- Portfolio page --------------------------------------------------- */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 3rem; }
.filter-btn { padding: 0.5rem 1.5rem; border-radius: 999px; font-weight: 500; border: 1px solid #e5e7eb; background: #fff; color: #374151; cursor: pointer; transition: background-color 0.15s ease; }
.filter-btn:hover { background: #f3f4f6; }
.filter-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.portfolio-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .portfolio-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .portfolio-grid { grid-template-columns: repeat(3, 1fr); } }
.portfolio-card { background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); overflow: hidden; transition: box-shadow 0.15s ease; }
.portfolio-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.portfolio-image { aspect-ratio: 16/9; background: #e5e7eb; overflow: hidden; }
.portfolio-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.portfolio-card:hover .portfolio-image img { transform: scale(1.05); }
.portfolio-body { padding: 1.5rem; }
.portfolio-tag { display: inline-block; font-size: 0.75rem; font-weight: 600; color: #dc2626; background: #fef2f2; padding: 0.25rem 0.5rem; border-radius: 4px; margin-bottom: 0.5rem; }
.portfolio-body h3 { font-size: 1.125rem; margin-bottom: 0.25rem; }
.portfolio-body p { font-size: 0.875rem; color: var(--muted-foreground); }

/* --- Contact page ------------------------------------------------------- */
.contact-cards-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .contact-cards-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .contact-cards-grid { grid-template-columns: repeat(4, 1fr); } }
.contact-info-card { background: var(--card); border-radius: 8px; padding: 1.5rem; box-shadow: 0 1px 4px rgba(0,0,0,0.08); text-align: center; }
.contact-info-card a { font-size: 0.875rem; color: var(--muted-foreground); }
.contact-info-card a:hover { color: var(--primary); }
.contact-info-card p.detail { font-size: 0.875rem; color: var(--muted-foreground); }

.contact-layout { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 1024px) { .contact-layout { grid-template-columns: 2fr 1fr; } }
.contact-success { background: rgba(232,25,44,0.08); border: 1px solid rgba(232,25,44,0.25); border-radius: 8px; padding: 2rem; text-align: center; }

.sidebar-block { background: var(--muted); border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem; }
.sidebar-block h3 { margin-bottom: 1rem; }
.sidebar-links { display: flex; flex-direction: column; gap: 0.75rem; }
.sidebar-links a { display: flex; align-items: center; gap: 0.75rem; color: var(--muted-foreground); font-size: 0.875rem; }
.sidebar-links a:hover { color: var(--primary); }

.sidebar-cta { background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 8px; padding: 1.5rem; color: #fff; margin-bottom: 2rem; }
.sidebar-cta p { font-size: 0.875rem; opacity: 0.85; margin-bottom: 1rem; }

.response-times-card { border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; }
.response-row { display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--muted-foreground); padding: 0.375rem 0; }
.response-row strong { color: var(--foreground); }

/* ========================================================================== 
   2026 Modern Refresh — keeps Urban Arts' original red / navy / white palette
   ========================================================================== */
:root { --border-radius: 1.1rem; }
body { background: #f7f8fb; letter-spacing: -0.01em; }
h1,h2,h3,h4 { letter-spacing: -0.035em; }
.container { max-width: 1200px; }
.site-header { background: rgba(255,255,255,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(27,42,74,.08); box-shadow: 0 8px 30px rgba(27,42,74,.05); }
.nav-bar { height: 5.25rem; }
.nav-logo img { height: 3.15rem; }
.nav-links { gap: .35rem; }
.nav-links a { padding: .7rem .85rem; border-radius: 999px; }
.nav-links a:hover { background: rgba(232,25,44,.07); }
.nav-links a.active { color:#fff; background:var(--primary); }
.hero { position:relative; overflow:hidden; padding: 8rem 0 7rem; background: linear-gradient(125deg, #E8192C 0%, #c91426 42%, #1B2A4A 100%); }
.hero::before,.hero::after { content:""; position:absolute; border-radius:50%; pointer-events:none; }
.hero::before { width:480px;height:480px;right:-160px;top:-240px;background:rgba(255,255,255,.09); }
.hero::after { width:340px;height:340px;left:-170px;bottom:-180px;border:1px solid rgba(255,255,255,.16); }
.hero .container { position:relative; z-index:1; }
.hero img { height:5.2rem; margin-bottom:2rem; filter:drop-shadow(0 12px 30px rgba(0,0,0,.12)); }
.hero p { font-size:clamp(1.1rem,2vw,1.35rem); line-height:1.7; opacity:.92; }
.btn { border-radius:999px; padding:.9rem 1.7rem; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { box-shadow:0 12px 26px rgba(232,25,44,.22); }
.hero .btn-primary { background:#fff;color:var(--primary);box-shadow:0 14px 35px rgba(0,0,0,.14); }
.hero .btn-primary:hover { background:#f8f8fa; }
.section { padding: 7rem 0; }
.section-header { max-width:680px;margin:0 auto 3.5rem; }
.section-header h2 { font-size:clamp(2rem,4vw,2.7rem);font-weight:800;color:var(--secondary); }
.section-header p { line-height:1.7; }
.feature-grid { gap:1.35rem; }
.feature-card { position:relative;overflow:hidden;background:#fff;border:1px solid rgba(27,42,74,.08);border-radius:1.25rem;padding:1.7rem;box-shadow:0 12px 35px rgba(27,42,74,.06);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
.feature-card::after { content:"→";position:absolute;right:1.5rem;bottom:1.25rem;font-size:1.35rem;color:var(--primary);opacity:0;transform:translateX(-8px);transition:.25s ease; }
.feature-card:hover { transform:translateY(-6px);box-shadow:0 20px 45px rgba(27,42,74,.11);border-color:rgba(232,25,44,.22); }
.feature-card:hover::after { opacity:1;transform:none; }
.feature-icon { width:3rem;height:3rem;border-radius:.9rem;box-shadow:0 8px 18px rgba(232,25,44,.2); }
.feature-card h3 { color:var(--secondary);font-weight:750; }
.feature-card p { line-height:1.65;padding-right:1rem; }
.client-card { background:#fff;border-radius:1rem;box-shadow:0 8px 25px rgba(27,42,74,.05);min-height:100px; }
.stats-section { background:linear-gradient(135deg,#14213d,var(--secondary)); }
.stat-number { font-size:2.75rem;font-weight:850; }
.site-footer { background:#111827;padding:4.5rem 0 2rem; }

/* Modernize shared inner-page surfaces without changing their colors */
.page-hero,.inner-hero { background:linear-gradient(125deg,var(--primary),var(--secondary)); }
.card,.service-card,.contact-card,.pricing-card,.portfolio-card,.info-card,.form-card,.domain-card,.hosting-card,.checkout-card { border-radius:1.2rem !important;box-shadow:0 14px 38px rgba(27,42,74,.07);border-color:rgba(27,42,74,.08) !important; }
input,textarea,select { border-radius:.75rem !important; }

/* WhatsApp replaces the old chatbot */
.whatsapp-float { position:fixed;right:1.5rem;bottom:1.5rem;z-index:80;display:flex;align-items:center;gap:.65rem;background:#25D366;color:#fff;border-radius:999px;padding:.85rem 1rem;box-shadow:0 16px 35px rgba(20,40,30,.25);font-weight:700;transition:transform .2s ease,box-shadow .2s ease; }
.whatsapp-float:hover { transform:translateY(-4px);box-shadow:0 20px 42px rgba(20,40,30,.32); }
.whatsapp-float svg { width:28px;height:28px;position:relative;z-index:1; }
.whatsapp-label { white-space:nowrap; }
.whatsapp-pulse { position:absolute;left:.8rem;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.2);animation:waPulse 2s infinite; }
@keyframes waPulse { 0%{transform:scale(.8);opacity:.7} 70%{transform:scale(1.65);opacity:0} 100%{opacity:0} }
@media(max-width:640px){ .hero{padding:6rem 0 5rem}.section{padding:4.5rem 0}.whatsapp-float{width:58px;height:58px;padding:0;justify-content:center;right:1rem;bottom:1rem}.whatsapp-label,.whatsapp-pulse{display:none}.feature-card{padding:1.4rem}.nav-bar{height:4.7rem} }

/* Interactive Printing Services redesign */
.print-services-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-bottom:1rem;align-items:stretch}
@media(min-width:760px){.print-services-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1180px){.print-services-grid{grid-template-columns:repeat(4,1fr)}}
.interactive-service-card{position:relative;overflow:hidden;padding:0 !important;border:1px solid rgba(17,24,39,.08);border-radius:1.35rem !important;box-shadow:0 14px 36px rgba(17,24,39,.07) !important;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;background:#fff}
.interactive-service-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--primary)}
.interactive-service-card:hover{transform:translateY(-7px);box-shadow:0 24px 48px rgba(17,24,39,.12) !important;border-color:rgba(232,25,44,.25)}
.service-card-top{display:flex;align-items:center;gap:1rem;padding:1.5rem 1.35rem 1.15rem;background:linear-gradient(145deg,#fff 40%,#fff5f6)}
.service-card-icon{width:3rem;height:3rem;flex:0 0 3rem;border-radius:1rem;display:grid;place-items:center;background:var(--primary);color:#fff;box-shadow:0 10px 22px rgba(232,25,44,.22);transition:transform .25s ease}
.interactive-service-card:hover .service-card-icon{transform:rotate(-5deg) scale(1.06)}
.service-card-icon svg{width:1.45rem;height:1.45rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.service-kicker{display:block;color:var(--primary);font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;margin-bottom:.2rem}
.interactive-service-card h2{margin:0 !important;font-size:1.12rem !important;line-height:1.25;color:#111827}
.interactive-service-card .service-item{display:flex;align-items:center;justify-content:space-between;gap:.75rem;border-left:0 !important;border-top:1px solid #f0f1f3;padding:1rem 1.35rem !important;margin:0 !important;cursor:pointer;transition:background .2s ease,padding-left .2s ease}
.interactive-service-card .service-item:hover,.interactive-service-card .service-item:focus{background:#fff4f5;outline:none;padding-left:1.55rem !important}
.interactive-service-card .service-item h3{font-size:.96rem;margin:0 0 .22rem;color:#111827}
.interactive-service-card .service-item p{font-size:.8rem;margin:0;color:#6b7280;line-height:1.45}
.service-arrow{width:1.8rem;height:1.8rem;flex:0 0 1.8rem;border-radius:999px;display:grid;place-items:center;background:#f4f4f5;color:var(--primary);font-weight:800;transition:transform .2s ease,background .2s ease,color .2s ease}
.service-item:hover .service-arrow,.service-item:focus .service-arrow{transform:translateX(3px);background:var(--primary);color:#fff}
.service-interaction-note{text-align:center;color:#6b7280;font-size:.86rem;margin:.85rem 0 3.3rem}

/* Requested true-black footer */
.site-footer{background:#000 !important;color:#fff}
.site-footer .footer-text,.site-footer .footer-links,.site-footer .footer-social a,.site-footer .footer-bottom,.site-footer .footer-bottom a{color:#c9c9c9}
.site-footer .footer-heading{color:#fff}
.site-footer .footer-social a:hover,.site-footer .footer-bottom a:hover{color:var(--primary)}


/* v3 printing-services visual redesign */
.printing-explorer-section{background:linear-gradient(180deg,#f6f7f9 0%,#eef0f3 48%,#f7f7f8 100%);position:relative;overflow:hidden}
.printing-explorer-section::before{content:"";position:absolute;width:430px;height:430px;border-radius:50%;background:rgba(232,25,44,.06);filter:blur(4px);top:80px;right:-160px;pointer-events:none}
.printing-page-header{position:relative;z-index:1;margin-bottom:2.2rem}
.service-explorer-intro{position:relative;z-index:1;display:grid;grid-template-columns:1.4fr .8fr;gap:2rem;align-items:center;background:#050505;color:#fff;border-radius:1.7rem;padding:2.2rem 2.4rem;margin-bottom:1.35rem;overflow:hidden;box-shadow:0 24px 55px rgba(0,0,0,.14)}
.service-explorer-intro::after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:-90px;top:-140px;background:radial-gradient(circle,rgba(232,25,44,.9) 0%,rgba(232,25,44,.2) 52%,transparent 70%);pointer-events:none}
.service-explorer-copy{position:relative;z-index:2;max-width:700px}
.service-eyebrow{display:inline-flex;align-items:center;gap:.5rem;color:#ff4958;font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;margin-bottom:.75rem}
.service-eyebrow::before{content:"";width:28px;height:2px;background:var(--primary)}
.service-explorer-copy h2{font-size:clamp(1.6rem,3vw,2.55rem);line-height:1.08;margin:0 0 .75rem;color:#fff}
.service-explorer-copy p{margin:0;color:#c9cbd0;max-width:650px;line-height:1.7}
.service-explorer-badge{position:relative;z-index:2;justify-self:end;display:flex;align-items:center;gap:.55rem;padding:1rem 1.15rem;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);border-radius:1rem;backdrop-filter:blur(10px);font-size:.75rem;font-weight:800;letter-spacing:.08em}
.service-explorer-badge strong{color:var(--primary);font-size:1.2rem}

.service-filter{display:flex;flex-wrap:wrap;gap:.65rem;margin:0 0 1.4rem;position:relative;z-index:1}
.service-filter-btn{appearance:none;border:1px solid #d9dce1;background:#fff;color:#26282d;border-radius:999px;padding:.68rem 1rem;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 14px rgba(0,0,0,.035)}
.service-filter-btn:hover{border-color:rgba(232,25,44,.45);color:var(--primary);transform:translateY(-1px)}
.service-filter-btn.active{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 8px 22px rgba(232,25,44,.22)}

.modern-service-grid{grid-template-columns:1fr;gap:1.35rem;margin-bottom:1.6rem;position:relative;z-index:1}
@media(min-width:920px){.modern-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.service-showcase-card{padding:0!important;border:0!important;border-radius:1.55rem!important;overflow:hidden;background:#fff;box-shadow:0 18px 45px rgba(16,24,40,.08)!important;transition:transform .28s ease,box-shadow .28s ease,opacity .2s ease}
.service-showcase-card:hover{transform:translateY(-6px);box-shadow:0 26px 58px rgba(16,24,40,.14)!important}
.service-showcase-card.service-hidden{display:none}
.service-visual{position:relative;min-height:190px;padding:1.75rem;display:flex;align-items:flex-end;gap:1.25rem;color:#fff;overflow:hidden;background:#090909}
.service-visual::before,.service-visual::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.service-visual::before{width:230px;height:230px;right:-65px;top:-95px;background:rgba(232,25,44,.92)}
.service-visual::after{width:170px;height:170px;right:70px;bottom:-115px;border:2px solid rgba(255,255,255,.15)}
.service-visual-print::before{width:180px;height:180px;right:30px;top:-92px}
.service-visual-branding::before{width:300px;height:300px;right:-180px;top:-130px}
.service-visual-promo::before{width:210px;height:210px;right:-45px;top:-85px}
.service-number{position:absolute;right:1.45rem;bottom:-.25rem;font-size:5.4rem;font-weight:900;line-height:1;color:rgba(255,255,255,.08);letter-spacing:-.08em;z-index:0}
.service-visual .service-card-icon{position:relative;z-index:2;width:3.3rem;height:3.3rem;flex:0 0 3.3rem;border-radius:1.05rem;background:var(--primary);box-shadow:0 12px 28px rgba(232,25,44,.26);display:grid;place-items:center;color:#fff;transition:transform .25s ease}
.service-showcase-card:hover .service-card-icon{transform:translateY(-4px) rotate(-4deg)}
.service-visual .service-card-icon svg{width:1.55rem;height:1.55rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.service-visual-copy{position:relative;z-index:2;max-width:75%}
.service-visual-copy>span{display:block;color:#ff6773;text-transform:uppercase;font-size:.68rem;font-weight:900;letter-spacing:.13em;margin-bottom:.3rem}
.service-visual-copy h2{margin:0 0 .3rem!important;font-size:1.35rem!important;color:#fff!important}
.service-visual-copy p{margin:0;color:#c9cbd0;font-size:.82rem;line-height:1.45}
.service-option-grid{display:grid;grid-template-columns:1fr;padding:.65rem}
.service-option{position:relative;width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:.85rem;align-items:center;border:0;border-bottom:1px solid #eceef1;background:#fff;text-align:left;padding:1rem .9rem;font:inherit;cursor:pointer;transition:background .2s ease,transform .2s ease}
.service-option:last-child{border-bottom:0}
.service-option:hover,.service-option.selected{background:#fff4f5;transform:translateX(3px)}
.service-option-dot{width:.58rem;height:.58rem;border-radius:50%;background:#d8dbe0;box-shadow:0 0 0 5px #f5f6f7;transition:background .2s ease,box-shadow .2s ease}
.service-option:hover .service-option-dot,.service-option.selected .service-option-dot{background:var(--primary);box-shadow:0 0 0 5px rgba(232,25,44,.10)}
.service-option span:nth-child(2){display:flex;flex-direction:column;min-width:0}
.service-option strong{font-size:.92rem;color:#15171b}
.service-option small{font-size:.75rem;color:#747985;margin-top:.16rem}
.service-option em{font-style:normal;font-size:.74rem;font-weight:800;color:var(--primary);opacity:0;transform:translateX(-8px);transition:all .2s ease;white-space:nowrap}
.service-option:hover em,.service-option.selected em{opacity:1;transform:translateX(0)}

.service-process-strip{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:1rem;align-items:center;background:#fff;border:1px solid #e7e8eb;border-radius:1.35rem;padding:1.15rem 1.35rem;margin:0 0 3.2rem;box-shadow:0 10px 28px rgba(16,24,40,.05)}
.service-process-strip>div{display:grid;grid-template-columns:auto 1fr;column-gap:.72rem;align-items:center}
.service-process-strip>div>span{grid-row:1/3;width:2.2rem;height:2.2rem;border-radius:.7rem;background:#101010;color:#fff;display:grid;place-items:center;font-size:.68rem;font-weight:900}
.service-process-strip strong{font-size:.82rem;color:#181a1f}
.service-process-strip small{font-size:.72rem;color:#7b8089;margin-top:.1rem}
.service-process-strip>i{font-style:normal;color:var(--primary);font-weight:900}
@media(max-width:780px){
  .service-explorer-intro{grid-template-columns:1fr;padding:1.7rem}
  .service-explorer-badge{justify-self:start}
  .service-process-strip{grid-template-columns:1fr;gap:.75rem}
  .service-process-strip>i{display:none}
  .service-option em{display:none}
}
@media(max-width:520px){
  .service-visual{min-height:170px;padding:1.3rem}
  .service-visual-copy{max-width:78%}
  .service-explorer-badge{font-size:.65rem;gap:.35rem;flex-wrap:wrap}
  .service-filter{gap:.45rem}
  .service-filter-btn{font-size:.75rem;padding:.58rem .78rem}
}


/* v4 — Urban Arts premium dark + gold direction
   Logo remains untouched; Urban Arts red stays the primary brand colour. */
:root{--ink:#080808;--ink-2:#111111;--gold:#F4B400;--gold-soft:#FFD45A;--cream:#FFF9EA}
body{background:#f5f5f4}

/* Navigation: clean white so the original red/black logo remains the hero */
.site-header{background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,0,0,.08)}
.nav-links a,.nav-mobile a{position:relative}
.nav-links a::after{content:"";position:absolute;left:.75rem;right:.75rem;bottom:.2rem;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a:hover,.nav-links a.active{color:var(--primary)}

/* Global premium touches */
.btn{border-radius:999px;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--primary);box-shadow:0 10px 24px rgba(232,25,44,.22)}
.btn-primary:hover{background:#c91425;box-shadow:0 14px 30px rgba(232,25,44,.28)}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);background:rgba(244,180,0,.06)}
.section-header h1,.section-header h2{letter-spacing:-.025em}

/* Home hero and dark sections: black-led, red brand, restrained gold highlights */
.hero{position:relative;overflow:hidden;background:linear-gradient(115deg,#050505 0%,#111 68%,#1a1300 100%)}
.hero::before{content:"";position:absolute;inset:auto -7rem -12rem auto;width:34rem;height:34rem;border-radius:50%;background:radial-gradient(circle,rgba(244,180,0,.2),transparent 66%);pointer-events:none}
.hero::after{content:"";position:absolute;left:-9rem;top:-13rem;width:30rem;height:30rem;border-radius:50%;background:radial-gradient(circle,rgba(232,25,44,.25),transparent 68%);pointer-events:none}
.hero .container{position:relative;z-index:1}
.stats-section{background:linear-gradient(120deg,#050505,#121212);position:relative}
.stat-number{color:var(--gold)!important}

/* Cards use gold only as a detail; red remains action colour */
.feature-card{background:#fff;border-color:rgba(0,0,0,.07);border-radius:1.1rem;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.feature-card:hover{transform:translateY(-5px);box-shadow:0 20px 45px rgba(0,0,0,.1);border-color:rgba(244,180,0,.45)}
.feature-icon{background:#0b0b0b;color:var(--gold)}
.feature-card:hover h3{color:var(--primary)}

/* Printing explorer: more visual and tactile */
.printing-explorer-section{background:linear-gradient(180deg,#f5f5f3 0%,#fff 45%,#f4f4f2 100%)}
.printing-explorer-section::before{background:rgba(244,180,0,.09)}
.service-explorer-intro{background:linear-gradient(120deg,#050505 0%,#111 72%,#1b1400 100%);border:1px solid rgba(244,180,0,.16)}
.service-explorer-intro::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to right,black,transparent);pointer-events:none}
.service-explorer-intro::after{background:radial-gradient(circle,rgba(244,180,0,.82) 0%,rgba(244,180,0,.15) 50%,transparent 70%)}
.service-eyebrow{color:var(--gold-soft)}
.service-eyebrow::before{background:var(--primary)}
.service-explorer-badge{border-color:rgba(244,180,0,.28);background:rgba(244,180,0,.08)}
.service-explorer-badge strong{color:var(--gold)}
.service-filter-btn:hover{border-color:var(--gold);color:#8a6500}
.service-filter-btn.active{background:#0a0a0a;border-color:#0a0a0a;color:var(--gold);box-shadow:0 8px 22px rgba(0,0,0,.18)}
.service-showcase-card{border:1px solid rgba(0,0,0,.06)!important}
.service-showcase-card:hover{box-shadow:0 28px 62px rgba(0,0,0,.16)!important}
.service-visual{background:linear-gradient(130deg,#050505,#151515)}
.service-visual::before{background:linear-gradient(145deg,var(--primary),#a80d1d)}
.service-visual::after{border-color:rgba(244,180,0,.38)}
.service-number{color:rgba(244,180,0,.12)}
.service-visual-copy>span{color:var(--gold-soft)}
.service-visual .service-card-icon{background:var(--gold);color:#0a0a0a;box-shadow:0 12px 28px rgba(244,180,0,.22)}
.service-option:hover,.service-option.selected{background:var(--cream)}
.service-option:hover .service-option-dot,.service-option.selected .service-option-dot{background:var(--gold);box-shadow:0 0 0 5px rgba(244,180,0,.14)}
.service-option em{color:var(--primary)}
.service-process-strip{border-color:rgba(244,180,0,.24)}
.service-process-strip>div>span{background:#0a0a0a;color:var(--gold)}
.service-process-strip>i{color:var(--primary)}

/* Footer stays true black, now with a thin gold brand line */
.site-footer{background:#000!important;border-top:3px solid var(--gold)}
.site-footer .footer-heading{color:var(--gold-soft)}
.site-footer .footer-social a:hover,.site-footer .footer-bottom a:hover,.site-footer .footer-links a:hover{color:var(--gold)}

/* WhatsApp remains its familiar green */
.whatsapp-float,.whatsapp-button,.whatsapp-launcher{background:#25D366!important;color:#fff!important}

/* Inputs / forms */
input:focus,textarea:focus,select:focus{outline:none!important;border-color:var(--gold)!important;box-shadow:0 0 0 3px rgba(244,180,0,.14)!important}

/* v5: Clear active navigation state
   Keep the active page readable and obvious without the red pill/gold line overlap. */
.nav-links a.active {
  background: #111111 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
}
.nav-links a.active::after {
  display: none !important;
}
.nav-links a.active:hover {
  background: #111111 !important;
  color: #ffffff !important;
}

.nav-mobile a.active {
  background: #111111 !important;
  color: #ffffff !important;
  border-left: 4px solid var(--primary);
}