/* Import Bootstrap and Font Awesome */
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');

:root{--bg:#fafafa;--muted:#6b7280;--card:#ffffff;--brand:#d1b38b;--white:#ffffff;--stone-light:#f5f5f5;--stone-medium:#e5e5e5;--stone-dark:#9ca3af;--sandstone:#d2b48c;--foundation-grey:#1e2a3a;--text-dark:#1f2937;--text-medium:#374151;}

/* Reset and override Bootstrap rounded corners */
*{box-sizing:border-box}
.btn, .card, .form-control, .nav-pills .nav-link, .badge, .alert, .modal-content, .dropdown-menu, input, textarea, select {border-radius:0 !important;}

/* Remove default focus outlines and add custom ones */
button:focus, .btn:focus, a:focus, input:focus, textarea:focus, select:focus {
  outline: none !important;
  box-shadow: 0 0 0 0.2rem rgba(201,169,122,0.5) !important;
}

html,body{margin:0;padding:0;font-family:'Inter', system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;line-height:1.6;background:var(--bg);color:var(--text-medium)}

/* Typography improvements */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;800&display=swap');

h1,h2,h3,h4,h5,h6{color:var(--text-dark);font-weight:600;line-height:1.3}
h1{font-size:2.75rem;font-weight:800}
h2{font-size:2.25rem}
h3{font-size:1.5rem}
/* Navigation and Header */
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--sandstone);text-decoration:none}

header{position:sticky;top:0;backdrop-filter:saturate(180%) blur(8px);background:rgba(250,250,250,0.95);border-bottom:2px solid var(--stone-medium);z-index:1000;box-shadow:0 2px 10px rgba(84,84,84,0.1)}

.navbar{padding:1rem 0}
.navbar-brand{display:flex;gap:12px;align-items:center;font-weight:800;letter-spacing:.2px;color:var(--foundation-grey);text-decoration:none}
.navbar-brand:hover{color:var(--foundation-grey)}

.logo-mark{width:32px;height:32px;background:linear-gradient(135deg,var(--sandstone),var(--brand));display:flex;align-items:center;justify-content:center;color:var(--white);font-weight:900;font-size:1.2rem}

.navbar-nav .nav-link{color:var(--text-medium);font-weight:500;padding:0.5rem 1rem}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active{color:var(--brand)}

/* Dropdown Menu Styles */
.dropdown{position:relative;display:inline-block}
.dropdown-toggle{cursor:pointer;position:relative}
.dropdown-toggle::after{content:'';display:inline-block;margin-left:0.5rem;vertical-align:0.125em;border-top:0.3em solid;border-right:0.3em solid transparent;border-left:0.3em solid transparent}

.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;min-width:200px;padding:0.5rem 0;margin:0;background:var(--white);border:2px solid var(--stone-medium);box-shadow:0 8px 24px rgba(84,84,84,0.15);opacity:0;transform:translateY(-10px);transition:all 0.2s ease}

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

.dropdown-item{display:block;width:100%;padding:0.75rem 1.5rem;color:var(--text-medium);text-decoration:none;background:transparent;border:0;font-weight:500;transition:all 0.2s ease}
.dropdown-item:hover{background:var(--stone-light);color:var(--brand);text-decoration:none}
.dropdown-item:focus{background:var(--stone-light);color:var(--brand);outline:none}

/* Custom Buttons */
.btn-primary{background:linear-gradient(135deg,var(--sandstone),var(--brand));border:none;color:var(--white);font-weight:600;padding:0.75rem 1.5rem;border:2px solid transparent}
.btn-primary:hover{background:linear-gradient(135deg,var(--brand),var(--sandstone));transform:translateY(-2px);box-shadow:0 8px 20px rgba(201,169,122,0.3);border-color:transparent}
.btn-primary:focus{box-shadow:0 0 0 0.2rem rgba(201,169,122,0.5) !important;outline:none !important;border-color:transparent !important}
.btn-primary:active{background:linear-gradient(135deg,var(--brand),var(--sandstone));border-color:transparent !important;box-shadow:0 0 0 0.2rem rgba(201,169,122,0.5) !important}

.btn-outline-primary{border:2px solid var(--brand);color:var(--brand);background:transparent;font-weight:600;padding:0.75rem 1.5rem}
.btn-outline-primary:hover{background:var(--brand);color:var(--white);transform:translateY(-2px);border-color:var(--brand)}
.btn-outline-primary:focus{box-shadow:0 0 0 0.2rem rgba(201,169,122,0.5) !important;outline:none !important;border-color:var(--brand) !important}
.btn-outline-primary:active{background:var(--brand);color:var(--white);border-color:var(--brand) !important;box-shadow:0 0 0 0.2rem rgba(201,169,122,0.5) !important}

.btn-secondary{background:var(--stone-light);border:2px solid var(--stone-dark);color:var(--text-dark);font-weight:600}
.btn-secondary:hover{background:var(--stone-medium);transform:translateY(-2px)}
.btn-secondary:focus{box-shadow:0 0 0 0.2rem rgba(156,163,175,0.5);outline:none}
/* Hero Sections */
.hero{padding:5rem 0 3rem;background:linear-gradient(135deg, rgba(210,180,140,.08) 0%, rgba(156,163,175,.05) 100%);position:relative}
.hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c9a97a' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");opacity:0.1}
.hero .container{position:relative;z-index:2}

.hero h1{font-size:3.5rem;line-height:1.1;margin-bottom:1.5rem;color:var(--text-dark)}
.hero .lead{font-size:1.25rem;color:var(--muted);margin-bottom:2rem;max-width:600px;margin-left:auto;margin-right:auto}

/* Cards and Components */
.card{background:var(--white);border:2px solid var(--stone-medium);padding:2rem;box-shadow:0 4px 16px rgba(84,84,84,0.08);transition:all 0.3s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(84,84,84,0.12)}

.card h3{margin-bottom:1rem;color:var(--text-dark);font-weight:600}
.card .text-muted{color:var(--muted)}

/* Feature Grid */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin:3rem 0}

.feature-item{padding:2rem;background:var(--white);border:2px solid var(--stone-medium);transition:all 0.3s ease}
.feature-item:hover{border-color:var(--brand);transform:translateY(-2px)}

.feature-icon{width:48px;height:48px;background:var(--brand);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:1rem}

/* Sections */
.section{padding:4rem 0}
.section-alt{background:var(--stone-light)}

/* Badges and Pills */
.badge{background:rgba(210,180,140,.2);color:var(--foundation-grey);font-weight:600;padding:0.5rem 1rem;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.5px}

.pill{display:inline-block;padding:0.5rem 1rem;background:rgba(210,180,140,.15);color:var(--foundation-grey);font-weight:700;font-size:0.75rem;letter-spacing:.3px;text-transform:uppercase;margin-bottom:1rem}
/* Forms */
.form-control{border:2px solid var(--stone-medium);background:var(--white);color:var(--text-medium);padding:0.75rem 1rem;font-size:1rem}
.form-control:focus{border-color:var(--brand);box-shadow:0 0 0 0.2rem rgba(201,169,122,0.25);outline:none}

/* Links and interactive elements */
a:focus{outline:none;box-shadow:0 0 0 0.2rem rgba(201,169,122,0.5)}
.nav-link:focus{outline:none;box-shadow:0 0 0 0.2rem rgba(201,169,122,0.3)}

/* Footer */
.footer{padding:3rem 0;color:var(--white);border-top:2px solid var(--stone-medium);background:#2d3748}

/* Override Bootstrap's bg-light for footers */
footer.bg-light{background:#2d3748 !important;color:var(--white) !important}

/* Footer specific text colors */
footer.bg-light .text-muted{color:rgba(255,255,255,0.7) !important}
footer.bg-light h6{color:var(--white) !important}
footer.bg-light a{color:rgba(255,255,255,0.8) !important}
footer.bg-light a:hover{color:var(--white) !important}

/* Utility Classes */
.text-brand{color:var(--brand)}
.text-muted{color:var(--muted)}
.bg-stone-light{background:var(--stone-light)}
.border-stone{border-color:var(--stone-medium)}

/* Solutions Grid */
.solutions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;margin:3rem 0}

.solution-card{background:var(--white);border:2px solid var(--stone-medium);padding:2rem;transition:all 0.3s ease;position:relative}
.solution-card:hover{border-color:var(--brand);transform:translateY(-4px);box-shadow:0 8px 24px rgba(84,84,84,0.12)}

.solution-card .icon{position:absolute;top:-20px;right:2rem;width:40px;height:40px;background:var(--brand);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:1.2rem}

/* Stats and Numbers */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;margin:3rem 0}
.stat-item{text-align:center;padding:2rem}
.stat-number{font-size:3rem;font-weight:800;color:var(--brand);display:block}
.stat-label{color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:0.5px;font-size:0.9rem}

/* Architecture Diagram */
.architecture{background:var(--stone-light);padding:3rem;margin:3rem 0;border:2px solid var(--stone-medium)}
.architecture-layer{padding:1rem;margin:0.5rem 0;background:var(--white);border:2px solid var(--stone-medium);text-align:center;font-weight:600}
.architecture-layer.foundation{background:var(--brand);color:var(--white)}

/* Responsive Design */
@media (max-width: 768px){
  .hero h1{font-size:2.5rem}
  .feature-grid{grid-template-columns:1fr}
  .solutions-grid{grid-template-columns:1fr}
  .stats-row{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 576px){
  .hero h1{font-size:2rem}
  .stats-row{grid-template-columns:1fr}
}

/* Case Studies Styles */
.case-study{margin:4rem 0;padding:3rem;background:var(--white);border:2px solid var(--stone-medium)}
.case-study.featured{border-color:var(--brand);background:linear-gradient(135deg,var(--white),#faf9f7)}

.case-study-category{color:var(--brand);font-weight:600;text-transform:uppercase;font-size:0.875rem;letter-spacing:0.5px;margin-bottom:0.5rem}

.case-study-content h3{color:var(--text-dark);font-size:2rem;margin-bottom:0.5rem}
.case-study-content h4{color:var(--brand);font-size:1.5rem;margin-bottom:1rem}
.case-study-content h5{color:var(--text-dark);font-size:1.25rem;margin:2rem 0 1rem 0}

.case-study-visual{text-align:center;padding:2rem}
.case-study-visual .feature-icon.large{width:120px;height:120px;font-size:3rem;margin:0 auto 2rem auto}

.case-study-tags{margin-top:1.5rem}
.case-study-tags .badge{margin:0.25rem;padding:0.5rem 1rem;font-size:0.875rem}

.case-study-card{background:var(--white);border:2px solid var(--stone-medium);padding:2rem;height:100%;transition:all 0.3s ease;text-align:center}
.case-study-card:hover{border-color:var(--brand);transform:translateY(-4px);box-shadow:0 8px 24px rgba(84,84,84,0.12)}

.case-study-card-icon{width:80px;height:80px;background:var(--brand);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 1rem auto}

.case-study-card .case-study-category{margin:1rem 0;color:var(--muted)}

.metric{text-align:center;padding:1rem}
.metric-value{font-size:2rem;font-weight:800;color:var(--brand);display:block}
.metric-label{color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:0.5px;font-size:0.875rem}

/* Resources Styles */
.blog-post-card{background:var(--white);border:2px solid var(--stone-medium);padding:2rem;height:100%;transition:all 0.3s ease}
.blog-post-card:hover{border-color:var(--brand);transform:translateY(-4px);box-shadow:0 8px 24px rgba(84,84,84,0.12)}

.blog-post-icon{width:60px;height:60px;background:var(--brand);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:1rem}

.blog-post-meta{color:var(--muted);font-size:0.875rem;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:1rem}

.blog-post-tags{margin-top:1.5rem}
.blog-post-tags .badge{margin:0.25rem;padding:0.5rem 1rem}

.whitepaper-card{background:var(--white);border:2px solid var(--stone-medium);padding:2rem;height:100%;transition:all 0.3s ease}
.whitepaper-card:hover{border-color:var(--brand);transform:translateY(-4px);box-shadow:0 8px 24px rgba(84,84,84,0.12)}

.whitepaper-icon{width:80px;height:80px;background:var(--brand);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:2rem;margin-bottom:1.5rem}

.developer-resource-card{background:var(--white);border:2px solid var(--stone-medium);padding:2rem;height:100%;transition:all 0.3s ease;text-align:center}
.developer-resource-card:hover{border-color:var(--brand);transform:translateY(-4px);box-shadow:0 8px 24px rgba(84,84,84,0.12)}

.developer-resource-icon{width:80px;height:80px;background:var(--brand);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 1rem auto}

.calculator-preview{background:var(--white);border:2px solid var(--stone-medium);padding:3rem;text-align:center}
.calculator-icon{width:120px;height:120px;background:var(--brand);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:3rem;margin:0 auto 2rem auto}

.calculator-features{margin:3rem 0;text-align:left}
.calculator-features h6{color:var(--text-dark);margin-bottom:0.5rem}

/* Responsive Adjustments for New Pages */
@media (max-width: 768px){
  .case-study{padding:2rem 1rem}
  .case-study-visual .feature-icon.large{width:80px;height:80px;font-size:2rem}
  .metric-value{font-size:1.5rem}
  .calculator-icon{width:80px;height:80px;font-size:2rem}
}

/* Sites Page Specific Styles */
.website-type-card{background:var(--white);border:2px solid var(--stone-medium);padding:2rem;height:100%;transition:all 0.3s ease}
.website-type-card:hover{border-color:var(--brand);transform:translateY(-4px);box-shadow:0 8px 24px rgba(84,84,84,0.12)}

.website-type-icon{width:80px;height:80px;background:var(--brand);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:2rem;margin-bottom:1.5rem}

.process-steps{margin:3rem 0}
.process-step{text-align:center;padding:2rem 1rem}
.process-number{width:60px;height:60px;background:var(--brand);color:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:bold;margin:0 auto 1rem auto}

.benefit-item{text-align:center;margin-bottom:2rem}
.benefit-icon{width:60px;height:60px;background:var(--stone-light);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin:0 auto 1rem auto;border:2px solid var(--stone-medium)}

@media (max-width: 768px){
  .website-type-card{margin-bottom:2rem}
  .process-step{padding:1rem}
  .process-number{width:50px;height:50px;font-size:1.25rem}
}

/* Pricing Page Specific Styles */
.pricing-detail{margin-top:2rem}
.pricing-detail .badge{display:inline-block;margin-bottom:1rem;padding:0.5rem 1rem;font-size:0.875rem}

.license-card{background:var(--white);border:2px solid var(--stone-medium);padding:2rem;height:100%;transition:all 0.3s ease}
.license-card:hover{border-color:var(--brand);transform:translateY(-4px);box-shadow:0 8px 24px rgba(84,84,84,0.12)}

.implementation-step{text-align:center;margin-bottom:2rem}
.implementation-icon{width:60px;height:60px;background:var(--brand);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin:0 auto 1rem auto}

.roi-metric{text-align:center;margin-bottom:2rem}
.roi-metric h4{font-size:2.5rem;color:var(--brand);font-weight:bold;margin-bottom:0.5rem}

.pricing-hero-card{background:var(--white);border:2px solid var(--stone-medium);padding:2rem;margin:2rem 0}
.pricing-hero-card .feature-icon{background:var(--brand);color:var(--white)}

@media (max-width: 768px){
  .pricing-hero-card .col-md-1{display:none}
  .roi-metric h4{font-size:2rem}
  .license-card{margin-bottom:2rem}
}