:root {
  --primary-color: #c77700;
  --secondary-color: #ffb347;
  --accent-color: #ffb347;
  --dark-color: #2a2118;
  --light-color: #fff8f0;
  --surface-color: #ffffff;
  --surface-muted: #fff4e5;
  --border-color: #f1d3a4;
  --text-color: #2a2118;
  --text-soft: #5f5142;
  --shadow-soft: 0 12px 34px rgba(90, 53, 0, 0.10);
  --shadow-hover: 0 18px 42px rgba(90, 53, 0, 0.16);
}
html { scroll-behavior: smooth; }
body {
  background: linear-gradient(180deg, #fff8f0 0%, #fff1da 100%) !important;
  color: var(--text-color) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,.display-1,.display-2,.display-3,.display-4,.display-5,.display-6 {
  color: var(--text-color);
  letter-spacing: -.02em;
  line-height: 1.15;
  font-weight: 700;
}
p, li, label, .form-text, .text-muted, small { color: var(--text-soft) !important; line-height: 1.7; }
a { color: var(--primary-color); }
a:hover { color: var(--secondary-color); }
.text-primary, .text-info { color: var(--primary-color) !important; }
.bg-primary, .badge-primary, .btn-primary {
  background: linear-gradient(135deg, #ffb347 0%, #c77700 100%) !important;
  border-color: #c77700 !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .bg-primary:hover {
  background: linear-gradient(135deg, #ffbf63 0%, #b46d00 100%) !important;
  border-color: #b46d00 !important;
  box-shadow: 0 12px 28px rgba(199, 119, 0, 0.22) !important;
}
.btn-outline-primary { color: var(--primary-color) !important; border-color: var(--primary-color) !important; }
.btn-outline-primary:hover { background: var(--primary-color) !important; color: #fff !important; }
.card, .modal-content, .accordion-item, .service-card, .feature-card, .pricing-card, .website-card, .certificate-item {
  border: 1px solid rgba(199,119,0,0.10) !important;
  box-shadow: var(--shadow-soft) !important;
  border-radius: 18px !important;
}
.card:hover, .service-card:hover, .feature-card:hover, .pricing-card:hover, .website-card:hover { box-shadow: var(--shadow-hover) !important; }
.hero-section, .about-hero, .page-title, .qr-hero, .upload-area + .info-section { border-radius: 0 0 28px 28px; }
.hero-section,.about-hero,.page-title,.cta-section,.contact-cta,.pricing-header,.success-card,.error-card,.qr-hero,.upload-hero,.tools-hero {
  background: linear-gradient(135deg, #ffb347 0%, #c77700 100%) !important;
  color: #fff !important;
}
.hero-section h1, .hero-section h2, .hero-section p,
.about-hero h1, .about-hero h2, .about-hero p,
.page-title h1, .page-title h2, .page-title p,
.cta-section h2, .cta-section p,
.contact-cta h2, .contact-cta p,
.pricing-header h3, .pricing-header p,
.success-card h1, .success-card p,
.error-card h1, .error-card p,
.qr-hero h1, .qr-hero p,
.upload-hero h1, .upload-hero p,
.tools-hero h1, .tools-hero p { color: #fff !important; }
.navbar {
  background: rgba(255,255,255,0.94) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(199,119,0,0.10);
}
.nav-link:hover, .nav-link:focus, .dropdown-item:hover { color: var(--primary-color) !important; background-color: rgba(255,179,71,0.16) !important; }
.form-control:focus, .form-select:focus { border-color: #c77700 !important; box-shadow: 0 0 0 0.2rem rgba(199,119,0,0.16) !important; }
footer { background: linear-gradient(180deg, #2a2118 0%, #1a140e 100%) !important; color: #f7e6cb !important; }
footer h5, footer p, footer li, footer a, footer .text-light { color: #f7e6cb !important; }
::selection { background: #ffcf82; color: #2a2118; }
@media (max-width: 768px) {
  body { font-size: 15px; }
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.65rem !important; }
  .hero-section, .about-hero, .page-title { padding-top: 72px !important; padding-bottom: 72px !important; }
}

.btn, .nav-link, .card, .service-card, .feature-card, .pricing-card, .website-card { transition: all .25s ease; }
.btn { font-weight: 600; }
.badge-primary, .badge-info, .badge-success, .badge-warning, .badge-danger { background: #ffefcf !important; color: #2a2118 !important; border: 1px solid #f1d3a4 !important; }
.alert-success, .alert-info, .alert-warning, .alert-danger { border-color: #f1d3a4 !important; color: #2a2118 !important; background: #fff4e5 !important; }
.table thead th { color: #2a2118; }
.table tbody td { color: #5f5142; }