/* ═══════════════════════════════════════════════════════
   MAGIX — Silent Luxury Digital Atelier
   Dark Theme — Fleety-inspired
   ═══════════════════════════════════════════════════════ */

:root {
  --black: #000000;
  --dark: #0A0A0A;
  --dark-card: #111111;
  --dark-card-hover: #161616;
  --white: #FFFFFF;
  --white-90: rgba(255,255,255,0.9);
  --white-60: rgba(255,255,255,0.6);
  --white-40: rgba(255,255,255,0.4);
  --white-20: rgba(255,255,255,0.2);
  --white-08: rgba(255,255,255,0.08);
  --white-05: rgba(255,255,255,0.04);
  --orange: #FF6B35;
  --orange-hover: #FF8C5A;
  --orange-dim: rgba(255,107,53,0.15);
  --orange-glow: rgba(255,107,53,0.3);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:'Inter',sans-serif;
  background:var(--black);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.6;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.container { max-width:1320px; margin:0 auto; padding:0 48px; }

/* ═══ NAV ═══ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:20px 0;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; }
.nav-left { display:flex; align-items:center; gap:12px; }
.nav-icon { width:36px; height:36px; display:flex; align-items:center; justify-content:center; }
.nav-icon svg { width:28px; height:28px; }
.nav-logo {
  font-family:'Outfit',sans-serif;
  font-weight:800; font-size:20px; letter-spacing:4px;
}
.nav-links { display:flex; gap:40px; align-items:center; }
.nav-links a {
  font-size:13px; font-weight:500; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--white-60);
  transition:color 0.3s;
}
.nav-links a:hover { color:var(--white); }
.nav-links a.active { color:var(--orange); }
.nav-toggle {
  display:none; background:none; border:none; cursor:pointer;
  width:28px; height:20px; position:relative;
}
.nav-toggle span {
  display:block; width:100%; height:1.5px; background:var(--white);
  position:absolute; left:0; transition:all 0.3s;
}
.nav-toggle span:first-child { top:0; }
.nav-toggle span:last-child { bottom:0; }

/* ═══ BUTTONS ═══ */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Inter',sans-serif;
  font-size:14px; font-weight:600; letter-spacing:1px;
  text-transform:uppercase;
  padding:18px 36px; border-radius:8px;
  transition:all 0.3s; cursor:pointer; border:none;
}
.btn-orange { background:var(--orange); color:var(--black); }
.btn-orange:hover {
  background:var(--orange-hover);
  transform:translateY(-2px);
  box-shadow:0 12px 40px var(--orange-glow);
}
.btn-outline {
  background:transparent;
  border:1px solid var(--white-20);
  color:var(--white-60);
}
.btn-outline:hover { border-color:var(--orange); color:var(--white); }
.btn .arrow-icon { width:18px; height:18px; transition:transform 0.3s; }
.btn:hover .arrow-icon { transform:translate(3px,-3px); }
.arrow-svg { display:inline-block; }

/* WhatsApp Button */
.btn-whatsapp {
  background:transparent;
  border:1px solid var(--orange);
  color:var(--orange);
  gap:10px;
}
.btn-whatsapp:hover {
  background:var(--orange);
  color:var(--black);
  transform:translateY(-2px);
  box-shadow:0 12px 40px var(--orange-glow);
}
.btn-whatsapp svg { width:20px; height:20px; }
.btn-whatsapp:hover svg path { fill:var(--black); }

/* ═══ SECTION UTILITIES ═══ */
.section { padding:120px 0; }
.section-border { border-top:1px solid var(--white-08); }
.section-dark { background:var(--dark); }
.section-label {
  font-size:12px; font-weight:600; letter-spacing:4px;
  text-transform:uppercase; color:var(--orange);
  margin-bottom:32px;
}
.section-header {
  display:flex; justify-content:space-between;
  align-items:flex-end; margin-bottom:64px;
}
.section-title {
  font-family:'Outfit',sans-serif;
  font-weight:900;
  font-size:clamp(36px,4.5vw,56px);
  background:linear-gradient(135deg, var(--orange) 0%, #FFB088 50%, var(--orange) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.section-subtitle {
  font-size:12px; letter-spacing:3px;
  text-transform:uppercase; color:var(--white-40);
}

/* ═══ PAGE HERO (inner pages) ═══ */
.page-hero {
  padding:180px 0 80px;
  position:relative;
}
.page-hero h1 {
  font-family:'Outfit',sans-serif;
  font-weight:900;
  font-size:clamp(40px,5.5vw,72px);
  line-height:1.08; letter-spacing:-1.5px;
  max-width:800px;
}
.page-hero h1 .orange { color:var(--orange); }
.page-hero-sub {
  font-size:18px; font-weight:300;
  line-height:1.7; color:var(--white-60);
  max-width:560px; margin-top:24px;
}

/* ═══ CARDS ═══ */
.cards-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}
.card {
  background:var(--dark-card);
  border:1px solid var(--white-08);
  border-radius:12px; padding:36px 28px;
  transition:all 0.4s; cursor:default;
}
.card:hover {
  background:var(--dark-card-hover);
  border-color:rgba(255,107,53,0.3);
  transform:translateY(-4px);
}
.card-icon { width:48px; height:48px; margin-bottom:24px; color:var(--orange); }
.card-icon svg { width:100%; height:100%; }
.card h3 {
  font-family:'Outfit',sans-serif;
  font-weight:700; font-size:14px;
  letter-spacing:1.5px; text-transform:uppercase;
  margin-bottom:12px;
}
.card p { font-size:13px; font-weight:300; color:var(--white-40); line-height:1.6; }

/* ═══ SERVICE ROWS ═══ */
.service-row {
  display:grid;
  grid-template-columns:48px 220px 1fr auto;
  gap:24px; align-items:center;
  padding:28px 0;
  border-top:1px solid var(--white-08);
  transition:all 0.4s;
}
.service-row:last-child { border-bottom:1px solid var(--white-08); }
.service-row:hover { padding-left:16px; }
.service-row:hover .s-name { color:var(--orange); }
.s-num { font-size:14px; font-weight:500; color:var(--orange); }
.s-name {
  font-family:'Outfit',sans-serif;
  font-weight:700; font-size:18px; transition:color 0.3s;
}
.s-desc { font-size:14px; font-weight:300; color:var(--white-40); }
.s-price {
  font-family:'Outfit',sans-serif;
  font-weight:700; font-size:16px;
  color:var(--orange); white-space:nowrap;
}

/* ═══ ABOUT TEXT ═══ */
.about-text {
  max-width:960px; margin:0 auto; text-align:center;
  font-family:'Outfit',sans-serif;
  font-weight:400;
  font-size:clamp(24px,3.2vw,38px);
  line-height:1.45; color:var(--white-60);
  letter-spacing:-0.3px;
}
.about-text strong { color:var(--white); font-weight:700; }

/* ═══ PROJECT CARDS ═══ */
.projects-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.project-card {
  position:relative; border-radius:16px; overflow:hidden;
  aspect-ratio:16/10; background:var(--dark-card);
  border:1px solid var(--white-08);
  display:flex; align-items:center; justify-content:center;
  transition:all 0.4s; cursor:pointer;
}
.project-card:hover { border-color:rgba(255,107,53,0.2); transform:scale(1.01); }
.project-label {
  position:absolute; top:20px; left:20px;
  background:rgba(255,255,255,0.1); backdrop-filter:blur(12px);
  padding:6px 16px; border-radius:20px;
  font-size:11px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase;
}
.project-arrow {
  position:absolute; top:20px; right:20px;
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--white-20);
  display:flex; align-items:center; justify-content:center;
  transition:all 0.3s;
}
.project-card:hover .project-arrow { background:var(--orange); border-color:var(--orange); }
.project-arrow svg { width:14px; height:14px; }
.project-placeholder {
  font-family:'Outfit',sans-serif;
  font-weight:700; font-size:28px; letter-spacing:2px; color:var(--white-20);
}

/* ═══ DIFF / STATS ═══ */
.diff-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:80px; align-items:center;
}
.diff-grid h2 {
  font-family:'Outfit',sans-serif;
  font-weight:900; font-size:clamp(36px,4.5vw,56px); line-height:1.1;
}
.diff-grid h2 .orange { color:var(--orange); }
.diff-right p {
  font-size:17px; font-weight:300;
  line-height:1.8; color:var(--white-60); margin-bottom:16px;
}
.diff-stats {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:32px; margin-top:56px; padding-top:56px;
  border-top:1px solid var(--white-08);
}
.stat-num {
  font-family:'Outfit',sans-serif;
  font-weight:900; font-size:48px; color:var(--orange); line-height:1;
}
.stat-label {
  font-size:12px; font-weight:400; color:var(--white-40);
  letter-spacing:1.5px; text-transform:uppercase; margin-top:8px;
}

/* ═══ CTA SECTION ═══ */
.final-cta { padding:140px 0; text-align:center; position:relative; overflow:hidden; }
.final-cta::before {
  content:''; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:600px; height:600px;
  background:radial-gradient(circle, var(--orange-dim) 0%, transparent 70%);
  pointer-events:none;
}
.final-cta h2 {
  font-family:'Outfit',sans-serif; font-weight:900;
  font-size:clamp(40px,5.5vw,72px); line-height:1.08;
  margin-bottom:24px; position:relative;
}
.final-cta h2 .orange { color:var(--orange); }
.final-cta p {
  font-size:18px; font-weight:300; color:var(--white-60);
  margin-bottom:48px; position:relative;
}

/* ═══ PROCESS STEPS ═══ */
.process-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.process-step {
  background:var(--dark-card); border:1px solid var(--white-08);
  border-radius:12px; padding:36px 28px;
  transition:all 0.4s;
}
.process-step:hover { border-color:rgba(255,107,53,0.3); transform:translateY(-4px); }
.process-num {
  font-size:13px; font-weight:600; color:var(--orange);
  letter-spacing:1px; margin-bottom:16px;
}
.process-title {
  font-family:'Outfit',sans-serif;
  font-weight:700; font-size:20px; margin-bottom:12px;
}
.process-desc { font-size:13px; color:var(--white-40); line-height:1.6; }

/* ═══ TIER CARDS ═══ */
.tier-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:32px; }
.tier-card {
  background:var(--dark-card); border:1px solid var(--white-08);
  border-radius:12px; padding:36px 28px;
  transition:all 0.3s;
}
.tier-card:hover { border-color:rgba(255,107,53,0.2); }
.tier-card.featured { border-color:var(--orange); }
.tier-name {
  font-family:'Outfit',sans-serif;
  font-weight:700; font-size:14px;
  letter-spacing:1px; text-transform:uppercase;
  margin-bottom:8px;
}
.tier-badge {
  display:inline-block; font-size:10px; font-weight:600;
  letter-spacing:1.5px; text-transform:uppercase;
  color:var(--orange); margin-left:8px;
}
.tier-price {
  font-family:'Outfit',sans-serif;
  font-weight:900; font-size:36px;
  color:var(--orange); margin-bottom:20px;
}
.tier-list { font-size:13px; color:var(--white-40); line-height:1.8; }
.tier-timeline {
  font-size:12px; color:var(--white-40);
  letter-spacing:1px; margin-top:20px;
  padding-top:16px; border-top:1px solid var(--white-08);
}

/* ═══ PHILOSOPHY ═══ */
.philosophy-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.philosophy-item {
  background:var(--dark-card); border:1px solid var(--white-08);
  border-radius:12px; padding:36px 28px;
  transition:all 0.4s;
}
.philosophy-item:hover { border-color:rgba(255,107,53,0.3); }
.philosophy-item h3 {
  font-family:'Outfit',sans-serif;
  font-weight:700; font-size:18px; margin-bottom:12px;
}
.philosophy-item h3 .orange { color:var(--orange); }
.philosophy-item p { font-size:14px; color:var(--white-40); line-height:1.7; }

/* ═══ CONTACT FORM ═══ */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.form-group { margin-bottom:24px; }
.form-label {
  display:block; font-size:11px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--white-40); margin-bottom:10px;
}
.form-input, .form-select, .form-textarea {
  width:100%; padding:16px 18px;
  font-family:'Inter',sans-serif; font-size:15px;
  color:var(--white); background:var(--dark-card);
  border:1px solid var(--white-08); border-radius:8px;
  outline:none; transition:border-color 0.3s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--orange); }
.form-textarea { min-height:140px; resize:vertical; }
.form-input::placeholder, .form-textarea::placeholder { color:var(--white-40); font-weight:300; }
.form-select { appearance:none; cursor:pointer; }
.form-select option { background:var(--dark-card); color:var(--white); }

.contact-info-block { margin-bottom:48px; }
.contact-info-block .section-label { margin-bottom:16px; }
.contact-info-block p { font-size:15px; color:var(--white-40); line-height:1.7; margin-bottom:16px; }
.contact-email {
  font-size:20px; font-weight:300; color:var(--white);
  border-bottom:1px solid var(--white-20); padding-bottom:4px;
  transition:color 0.3s;
}
.contact-email:hover { color:var(--orange); }

/* ═══ FOOTER ═══ */
footer {
  padding:64px 0 32px;
  border-top:1px solid var(--white-08);
}
.footer-grid {
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:48px; align-items:start;
  padding-bottom:48px; border-bottom:1px solid var(--white-08);
}
.footer-logo {
  font-family:'Outfit',sans-serif;
  font-weight:800; font-size:20px; letter-spacing:6px;
}
.footer-tagline {
  font-size:11px; font-weight:300; color:var(--white-40);
  letter-spacing:3px; margin-top:8px; text-transform:uppercase;
}
.footer-nav { display:flex; gap:32px; }
.footer-nav a {
  font-size:12px; color:var(--white-40);
  letter-spacing:1px; transition:color 0.3s;
}
.footer-nav a:hover { color:var(--orange); }
.footer-right { text-align:right; }
.footer-email { font-size:13px; color:var(--orange); transition:color 0.3s; }
.footer-email:hover { color:var(--white); }
.footer-bottom {
  padding-top:24px; display:flex; justify-content:space-between;
}
.footer-bottom p { font-size:11px; color:var(--white-40); letter-spacing:1px; }

/* ═══ RESPONSIVE ═══ */
@media(max-width:1024px) {
  .cards-grid { grid-template-columns:repeat(2,1fr); }
  .service-row { grid-template-columns:40px 1fr; gap:8px 16px; }
  .s-desc, .s-price { grid-column:2; }
  .tier-grid { grid-template-columns:1fr; }
  .process-grid { grid-template-columns:repeat(2,1fr); }
  .philosophy-grid { grid-template-columns:1fr; }
}
@media(max-width:768px) {
  .container { padding:0 24px; }
  .nav-links { display:none; }
  .nav-toggle { display:block; }
  /* Mobile dropdown menu — show when hamburger toggled */
  .nav-links.open {
    display:flex; flex-direction:column;
    position:fixed; top:63px; left:0; right:0;
    background:rgba(0,0,0,0.96);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    gap:2px; padding:12px 24px 24px;
    border-bottom:1px solid var(--white-08);
  }
  .nav-links.open a { padding:14px 0; font-size:15px; }
  /* Hamburger → X when active */
  .nav-toggle.active span:first-child { transform:rotate(45deg); top:9px; }
  .nav-toggle.active span:last-child { transform:rotate(-45deg); bottom:9px; }
  /* Giant MAGIX wordmark — force visible on mobile (JS reveal doesn't fire) */
  #magix-giant {
    font-size:clamp(56px,17vw,96px) !important; letter-spacing:2px !important;
  }
  .cards-grid { grid-template-columns:1fr; }
  .projects-grid { grid-template-columns:1fr; }
  .diff-grid { grid-template-columns:1fr; gap:48px; }
  .contact-grid { grid-template-columns:1fr; gap:48px; }
  .diff-stats { grid-template-columns:repeat(3,1fr); gap:16px; }
  .stat-num { font-size:36px; }
  .footer-grid { grid-template-columns:1fr; gap:32px; }
  .footer-right { text-align:left; }
  .section-header { flex-direction:column; align-items:flex-start; gap:12px; }
  .page-hero { padding:140px 0 60px; }
  .section { padding:80px 0; }
}

/* ═══ ANIMATIONS ═══ */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(40px); }
  to { opacity:1; transform:translateY(0); }
}

/* ═══ LUXURY EFFECTS ═══ */

/* Cursor glow */
#cursor-glow {
  position:fixed;
  width:300px; height:300px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,107,53,0.04) 0%, transparent 70%);
  pointer-events:none;
  transform:translate(-50%,-50%);
  z-index:9999;
  transition:opacity 0.3s;
  mix-blend-mode:screen;
}

/* Scroll reveal */
.reveal {
  opacity:0;
  transform:translateY(32px);
  transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal.revealed {
  opacity:1;
  transform:translateY(0);
}

/* Card glow effect on hover */
.card::before,
.project-card::before,
.process-step::before,
.tier-card::before,
.philosophy-item::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  border-radius:inherit;
  background:radial-gradient(
    400px circle at var(--glow-x, 50%) var(--glow-y, 50%),
    rgba(255,107,53,0.08) 0%,
    transparent 60%
  );
  pointer-events:none;
  opacity:0;
  transition:opacity 0.4s ease;
  z-index:1;
}
.card:hover::before,
.project-card:hover::before,
.process-step:hover::before,
.tier-card:hover::before,
.philosophy-item:hover::before {
  opacity:1;
}

/* Make cards relative for glow positioning */
.card, .project-card, .process-step, .tier-card, .philosophy-item {
  position:relative;
  overflow:hidden;
}

/* Gradient border glow on featured */
.tier-card.featured {
  border-color:transparent;
  background-image:linear-gradient(var(--dark-card), var(--dark-card)),
                    linear-gradient(135deg, var(--orange) 0%, rgba(255,107,53,0.2) 50%, var(--orange) 100%);
  background-origin:border-box;
  background-clip:padding-box, border-box;
}

/* Service row shine effect */
.service-row::after {
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:0;
  background:linear-gradient(90deg, rgba(255,107,53,0.05), transparent);
  transition:width 0.5s ease;
  pointer-events:none;
}
.service-row { position:relative; overflow:hidden; }
.service-row:hover::after { width:100%; }

/* Smooth nav transition */
nav { transition:background 0.4s ease, border-color 0.4s ease; border-bottom:1px solid rgba(255,255,255,0.04); }

/* Button glow pulse on orange buttons */
.btn-orange {
  position:relative;
  overflow:hidden;
}
.btn-orange::after {
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:linear-gradient(135deg, var(--orange), transparent, var(--orange));
  opacity:0;
  transition:opacity 0.4s;
  z-index:-1;
  filter:blur(12px);
}
.btn-orange:hover::after { opacity:0.4; }

/* WhatsApp button glow */
.btn-whatsapp {
  position:relative;
  overflow:hidden;
}
.btn-whatsapp::after {
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  border:1px solid var(--orange);
  opacity:0;
  transition:opacity 0.4s;
  filter:blur(4px);
}
.btn-whatsapp:hover::after { opacity:0.6; }

/* Giant MAGIX smooth reveal */
/* Giant MAGIX reveal — JS adds .mg-prep (hide) then .mg-on (animate).
   Fail-safe: if JS never runs, no class is added and the wordmark stays visible. */
#magix-giant.mg-prep { opacity:0; transform:translateY(50px) scale(0.95); }
#magix-giant.mg-on { animation:mgReveal 1s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes mgReveal {
  from { opacity:0; transform:translateY(50px) scale(0.95); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* Section label line animation */
.section-label::after {
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(90deg, var(--orange), transparent);
  transform-origin:left;
  animation:none;
}

/* Gradient text shine */
.section-title {
  background-size:200% auto;
  animation:textShine 3s linear infinite;
}
@keyframes textShine {
  0% { background-position:0% center; }
  100% { background-position:200% center; }
}

/* Hero parallax base */
.hero-bg {
  transition:transform 0.1s linear;
  will-change:transform;
  transform-origin:center center;
}

/* Smooth page transitions */
body {
  animation:pageIn 0.6s ease forwards;
}
@keyframes pageIn {
  from { opacity:0; }
  to { opacity:1; }
}

/* Quote styling */
.quote-section {
  position:relative;
}
.quote-section::before {
  content:'"';
  position:absolute;
  top:-20px; left:50%;
  transform:translateX(-50%);
  font-family:'Outfit',sans-serif;
  font-size:120px;
  font-weight:900;
  color:rgba(255,107,53,0.06);
  line-height:1;
  pointer-events:none;
}

/* Selection color */
::selection {
  background:rgba(255,107,53,0.3);
  color:var(--white);
}

/* Scrollbar luxury */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--black); }
::-webkit-scrollbar-thumb { background:rgba(255,107,53,0.3); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--orange); }
</style>

/* Project card mockups */
.project-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform 0.5s ease; }
.project-card:hover .project-img { transform:scale(1.04); }
.project-card .project-label, .project-card .project-arrow { z-index:2; }

/* ── EN/ES language toggle ── */
.lang-toggle{
  background:transparent; border:1px solid rgba(255,255,255,0.22);
  color:rgba(255,255,255,0.65); font-family:'Inter',sans-serif;
  font-size:11px; font-weight:600; letter-spacing:1.5px;
  padding:7px 13px; border-radius:6px; cursor:pointer; margin-left:22px;
  transition:border-color .2s ease, color .2s ease; line-height:1;
}
.lang-toggle:hover{ border-color:var(--orange); color:var(--orange); }
@media(max-width:768px){ .lang-toggle{ margin-left:auto; margin-right:14px; padding:6px 11px; } }