:root {
  --black: #000000;
  --white: #FFFFFF;
  --dark-grey: #1A1A1A;
  --beige: #EAE3D9;
  --accent-gold: #C6A969;
  --text-primary: #111111;
  --text-secondary: #4A4A4A;
  --bg: #FFFFFF;
  --font-display: 'Playfair Display', serif;
  --font-base: 'Inter', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { scroll-behavior: smooth; }
body { font-family: var(--font-base); background: var(--bg); color: var(--text-primary); line-height: 1.6; }
.container { width: min(1200px, 100% - 32px); margin-inline: auto; }

.site-header { position: sticky; top: 0; background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0,0,0,0.05); z-index: 20; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; }
.logo { display: inline-flex; align-items: center; text-decoration: none; gap: 0.45rem; }
.logo img { max-height: 44px; width: auto; display: block; }
.logo-fallback { display: none; font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; color: var(--dark-grey); line-height: 1; }
.logo img[alt="MagFoto"] + .logo-fallback { font-size: 1.3rem; }
.logo img[src=""] + .logo-fallback, .logo img[onerror] + .logo-fallback { display: none; }
.nav { display: flex; align-items:center; gap: 1.2rem; flex-wrap: wrap; }
.nav a { color: var(--text-secondary); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.nav a:hover { color: var(--dark-grey); }

.btn { display: inline-flex; align-items: center; justify-content:center; border-radius: 8px; font-family: var(--font-base); font-size: 1rem; font-weight: 600; text-decoration: none; padding: 0.95rem 1.4rem; transition: transform 0.2s ease, box-shadow 0.2s ease; border: 1px solid transparent; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,0.18); }
.btn-sm { font-size: 0.85rem; padding: 0.5rem 1rem; }
.btn:focus-visible { outline: 3px solid var(--accent-gold); outline-offset: 2px; }
.btn-primary { background: var(--black); color: var(--white); border-color: var(--black); }
.btn-secondary { background: transparent; color: var(--black); border-color: var(--black); }
.btn-outline-light { background: transparent; color: var(--white); border-color: var(--white); }
.hero .btn-primary { background: rgba(255,255,255,0.95); color: #111; border-color: rgba(255,255,255,0.9); }
.hero .btn-secondary { background: rgba(255,255,255,0.22); color: #fff; border-color: rgba(255,255,255,0.4); }
.hero .btn:hover { box-shadow: 0 12px 24px rgba(0,0,0,0.25); }

.hero { min-height: 800px; display: grid; place-items: center; position: relative; color: var(--white); text-align: center; padding: 0 16px; background-color: #241f17; background-image: url('assets/hero_background.png'), url('https://images.unsplash.com/photos/people-near-buildings-during-daytime-F6BMKcRruiY?auto=format&fit=crop&w=1600&q=80'); background-size: cover; background-position: center; background-repeat: no-repeat; }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom right, rgba(0,0,0,0.62), rgba(0,0,0,0.38)); }
.hero-content { position: relative; max-width: 900px; z-index:1; }
.hero h1 { font-family: var(--font-display); font-size: clamp(1.8rem, 5.5vw, 3.8rem); font-weight:700; line-height:1.1; margin-bottom: 1rem; text-shadow: 0 8px 20px rgba(0,0,0,0.70); }
.hero-subheadline { font-size: clamp(1rem, 2.5vw, 1.5rem); margin-bottom: 0.75rem; text-shadow: 0 4px 16px rgba(0,0,0,0.6); }
.hero-support { color: rgba(255,255,255,0.9); margin-bottom: 1.8rem; }
.hero-buttons { display: flex; justify-content:center; gap: 1rem; flex-wrap: wrap; }

.social-proof { background: var(--beige); color: var(--dark-grey); text-align: center; padding: 0.75rem 8px; font-weight: 600; letter-spacing: 0.02em; }

.section { padding: 96px 0; }
.section-light { background: var(--beige); }
.section h2 { font-family: var(--font-display); font-size: clamp(1.8rem,4vw,2.8rem); text-align:center; margin-bottom: 1rem; }
.subtitle { text-align:center; color: var(--text-secondary); margin-bottom: 2.2rem; font-size:1.05rem; }

.three-grid, .features-grid, .pricing-grid, .use-cases-grid, .faq-grid { display: grid; gap: 1.25rem; }
.three-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.features-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.use-cases-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.pricing-grid { grid-template-columns: repeat(4, minmax(240px,1fr)); }
.faq-grid { grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }

.info-card, .use-card, .pricing-card { background: var(--white); border-radius: 16px; box-shadow: 0 14px 30px rgba(0,0,0,0.08); padding: 1.6rem; }
.info-card .icon { display:block; margin-bottom: 0.8rem; font-size: 2rem; }
.info-card h3, .use-card h3 { font-family: var(--font-display); color: var(--dark-grey); margin-bottom: 0.6rem; }
.info-card p, .use-card p { color: var(--text-secondary); }

.pricing-card { border: 1px solid #ECE8E2; display: flex; flex-direction: column; min-height: 530px; }
.pricing-card-popular { border-color: var(--accent-gold); transform: scale(1.05); background: #FEF8E9; }
.pricing-card-vip { background: #1b1b1c; color: #f2f2f2; border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 14px 30px rgba(0,0,0,0.28); }
.pricing-card-vip h3, .pricing-card-vip ul, .pricing-card-vip p, .pricing-card-vip .price, .pricing-card-vip li { color: #f2f2f2 !important; }
.pricing-card-vip li { opacity: 0.96; }
.pricing-card-vip .price { color: #f7f7f7; text-shadow: 0 3px 10px rgba(0,0,0,0.45); }
.pricing-card-vip .btn { background: rgba(255,255,255,0.26); border-color: rgba(255,255,255,0.6); color: #111; }
.pricing-card-vip .btn:hover { background: rgba(255,255,255,0.42); }
.pricing-card .btn { margin-top: auto; width: 100%; }
.badge { display: inline-block; background: var(--accent-gold); color: var(--dark-grey); border-radius: 999px; padding: 0.25rem 0.8rem; font-weight: 700; font-size: 0.75rem; margin-bottom: 0.85rem; }
.price { font-family: var(--font-display); font-size: 2.2rem; margin: 1rem 0; }
.pricing-card ul { margin-bottom: 1.2rem; list-style: none; padding-left: 0; }
.pricing-card li { margin-bottom: 0.65rem; padding-left: 1.2rem; position: relative; color: var(--text-secondary); }
.pricing-card li::before { content: '•'; position: absolute; left: 0; color: var(--accent-gold); }

.pricing-note { text-align:center; color: var(--text-secondary); margin-top: 1.3rem; }

.addons { margin-top: 2.5rem; text-align:left; max-width:600px; margin-left:auto; margin-right:auto; }
.addons h3 { margin-bottom: 0.75rem; }
.addons ul { list-style:none; color: var(--text-secondary); }
.addons li { margin-bottom: 0.5rem; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
.split-text h2, .split-text p { text-align: left; }
.split-image img { width: 100%; border-radius: 16px; object-fit: cover; }

.faq-grid details { background: #fff; border: 1px solid #E8E2D9; border-radius: 12px; padding: 1rem; }
summary { cursor: pointer; font-weight: 700; }

.testimonial-card { background: #fff; border: 1px solid #E8E2D9; border-radius: 16px; padding: 2rem; box-shadow: 0 16px 35px rgba(0,0,0,0.09); position: relative; }
.testimonial-card cite { display: block; margin-top: 1.25rem; color: var(--text-secondary); font-style: normal; font-weight: 700; }

.mobile-action-bar { display: none; position: fixed; bottom: 0; left: 0; width: 100%; background: rgba(255,255,255,0.95); border-top: 1px solid #d5d0c8; padding: 0.75rem 1rem; text-align: center; z-index: 40; }
.mobile-action-bar .btn { width: min(480px, 100%); }

@media (max-width: 768px) {
  .mobile-action-bar { display: block; }
  body { padding-bottom: 76px; }
}

.corporate-section { background: var(--dark-grey); color: var(--white); text-align:center; padding: 4rem 0; }
.corporate-section h2, .final-cta h2 { color: var(--white); }
.corporate-section p, .corporate-section a { color: var(--white); }

.text-center { text-align: center; }

.contact-panel { background: var(--white); border-radius: 16px; box-shadow: 0 16px 40px rgba(0,0,0,0.12); padding: 2.2rem; max-width: 760px; margin-inline:auto; }
.contact-form { display:grid; gap: 1rem; }
.form-row { display:flex; flex-direction:column; gap:0.3rem; }
.form-row label { color: var(--text-secondary); font-weight: 600; }
.form-row input, .form-row textarea, .form-row select { border:1px solid #D8D4CC; border-radius:8px; padding:0.8rem; font-family: var(--font-base); }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus { outline:none; border-color: var(--accent-gold); }

.footer { background: var(--dark-grey); color: #D9D9D9; padding: 3rem 0 2rem; }
.footer-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1.2rem; max-width:1200px; margin-inline:auto; margin-bottom:1rem; }
.footer-col h4 { margin-bottom:0.6rem; color:#fff; }
.footer-col a { display:block; color: #d1d1d1; text-decoration:none; margin-bottom:0.4rem; }
.footer-bottom { text-align:center; font-size: 0.9rem; color: #9f9f9f; }
.footer-bottom a { color:#d1d1d1; }

@media (max-width: 1024px) {
  .features-grid, .pricing-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .three-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .nav { display: none; }
  .site-header { padding: 0.75rem 0; }
  .hero { min-height: 640px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .use-cases-grid { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
}