:root {
  --main: #081cd6;
  --sub1: #1c258f;
  --sub2: #6589fc;
  --main-bg: #181818;
  --main-bg-light: #232323;
  --main-bg-lighter: #232323;
  --text: #e6e6e6;
  --text-muted: #bbb;
  --border: #222;
  --shadow-blue: 0 4px 18px #081cd655, 0 2px 12px #0007;
  --email: #e53935;
  --instagram: #e1306c;
  --whatsapp: #25d366;
}

/* Base */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: var(--main-bg);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Top bar */
.top-bar{
  width:100vw; position:fixed; top:0; left:0; z-index:1000;
  background:rgba(8,28,214,0.92); display:flex; align-items:center;
  gap:1rem; height:3.5rem; padding:0 2vw; box-shadow:0 2px 12px #0004;
}
.top-logo{ height:2.2rem; width:auto; object-fit:contain; }
.top-title{ font-size:1.45rem; font-weight:700; color:var(--text); }

/* Banner */
.banner { position:relative; width:100%; height:400px; overflow:hidden; border-bottom:2px solid var(--main); background:var(--main-bg); margin-top:3.5rem; }
.banner-video{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
.banner-content{ position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:1rem; }
.logo-container{ display:flex; flex-direction:column; align-items:center; margin:1.5rem 0 2.5rem; }
.main-logo{ width:180px; max-width:80vw; display:block; opacity:0; animation:logoFadeIn 1.7s forwards; filter: drop-shadow(0 4px 24px #081cd655); }
.logo-reflection-wrapper{ width:180px; max-width:80vw; height:60px; overflow:hidden; margin:0 auto; position:relative; pointer-events:none; }
#logo-reflection-canvas{ width:100%; height:100%; display:block; opacity:0; animation:logoFadeIn 1.7s forwards 0.2s; }

@keyframes logoFadeIn { from{opacity:0;} to{opacity:1;} }

.site-title{ font-size:2rem; margin:0; color:var(--main); text-shadow:0 2px 12px #0006; font-weight:700; }

/* Headline */
.headline-section{ display:flex; flex-direction:column; align-items:center; justify-content:center; margin:3em 0 2em; text-align:center; padding:0 1rem; }
.headline{ color:var(--main); font-family:'Merriweather','Georgia',serif; font-size:2.5rem; font-weight:900; margin-bottom:0.7em; line-height:1.1; }
.headline-sub{ color:var(--text); font-family:'Inter','Arial',sans-serif; font-size:1.13rem; line-height:1.7; }

/* About */
.about-section{ display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center; width:90%; max-width:95vw; margin:5.5rem auto 3.5rem; background:linear-gradient(120deg,#181c22 80%, #1c258f 100%); border-radius:1.2em; box-shadow:0 6px 32px #0007; overflow:hidden; }
.about-img-container{ flex:1 1 33%; min-width:220px; max-width:40%; display:flex; align-items:center; justify-content:center; background:#10131a; }
.about-img-container img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; display:block; }
.about-text-container{ flex:2 1 67%; padding:2.2rem; display:flex; flex-direction:column; justify-content:center; }
.about-title{ color:var(--main); font-size:2.1rem; font-family:'Merriweather','Georgia',serif; font-weight:800; margin:0 0 0.7rem; }
.about-subtitle{ color:var(--sub2); font-size:1.13rem; font-family:'Merriweather','Georgia',serif; font-weight:600; margin:0 0 1.3rem; }
.about-text{ color:var(--text); font-size:1.09rem; line-height:1.7; margin:0 0 1.1rem; }
.about-highlight{ color:var(--main); font-weight:600; display:block; margin-top:1.1rem; }

/* Contact buttons */
.contact-section{ display:flex; flex-direction:column; align-items:center; margin:3em 0 2em; }
.contact-heading{ color:var(--main); font-family:'Merriweather','Georgia',serif; font-size:1.7rem; font-weight:800; margin-bottom:1.2em; }
.contact-buttons{ display:flex; gap:1.2em; flex-wrap:wrap; justify-content:center; }
.contact-btn{ display:flex; align-items:center; gap:0.7em; background:none; border:1.5px solid var(--border); color:var(--text); font-family:Inter,Arial,sans-serif; font-size:1.08rem; padding:0.65em 1.3em; border-radius:2.2em; text-decoration:none; transition:background .18s, border-color .18s, color .18s, box-shadow .18s; cursor:pointer; }
.contact-icon{ display:flex; align-items:center; justify-content:center; min-width:22px; min-height:22px; }
.contact-text{ font-size:1.08em; }

/* whatsapp/instagram/email variants */
.whatsapp-btn{ border-color:var(--whatsapp); color:var(--whatsapp); }
.whatsapp-btn:hover{ background:#25d36622; color:#fff; box-shadow:0 2px 12px #25d36633; }
.instagram-btn{ border-color:var(--instagram); color:var(--instagram); }
.instagram-btn:hover{ background:#e1306c22; color:#fff; box-shadow:0 2px 12px #e1306c33; }
.email-btn{ border-color:var(--email); color:var(--email); }
.email-btn:hover{ background:#e5393522; color:#fff; box-shadow:0 2px 12px #e5393533; }

/* Portfolio carousel */
.portfolio-section{ margin:3em 0; text-align:center; }
.section-title{ color:var(--main); font-family:'Merriweather','Georgia',serif; font-size:1.7rem; font-weight:800; margin-bottom:1.2em; }
.carousel-container{ width:100vw; max-width:100vw; overflow:hidden; border-radius:1em; background:var(--main-bg-light); box-shadow:var(--shadow-blue); position:relative; margin:0 auto; }
.carousel-slides{ display:flex; transition: transform 0.7s cubic-bezier(.77,0,.18,1); will-change:transform; }
.carousel-image{ width:100vw; height:48vw; max-height:420px; object-fit:cover; flex-shrink:0; user-select:none; pointer-events:none; background:var(--main-bg-lighter); }
.carousel-controls{ position:absolute; left:50%; bottom:1.2em; transform:translateX(-50%); display:flex; align-items:center; gap:1.2em; z-index:2; pointer-events:none; }
.carousel-dots{ display:flex; gap:0.5em; pointer-events:auto; }
.carousel-dot{ width:0.7em; height:0.7em; border-radius:50%; background:var(--main-bg-lighter); border:1.5px solid var(--main); display:inline-block; cursor:pointer; opacity:0.7; }
.carousel-dot.active{ background:var(--main); border-color:var(--main); opacity:1; }
.carousel-arrow{ background:none; border:none; color:var(--main); font-size:1.3em; width:2.1em; height:2.1em; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0.7; pointer-events:auto; }

/* Explainer cards */
.explainer-section{ display:flex; gap:2.5em; justify-content:center; align-items:stretch; flex-wrap:wrap; margin:3em 0; padding:0 1rem; }
.explainer-card{ background:var(--main-bg-lighter); border-radius:1.2em; box-shadow:0 2px 18px #0003; padding:2em 1.5em; flex:1 1 260px; max-width:340px; text-align:center; }
.explainer-media{ width:100%; aspect-ratio:16/9; border-radius:0.7em; margin-bottom:0.9em; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.explainer-media img{ width:100%; height:100%; object-fit:cover; }

/* Footer */
.site-footer{ width:100vw; background:#111; color:#fff; text-align:center; padding:2em 0 1.2em; margin-top:2em; border-top:1px solid #222; }
.footer-contacts a{ color:var(--email); text-decoration:none; margin:0 1.2em; font-weight:600; }
.footer-phone{ color:var(--whatsapp); text-decoration:none; margin:0 1.2em; font-weight:600; }

/* Responsive */
@media (max-width:900px){
  .about-section{ flex-direction:column; }
  .about-img-container img{ min-height:220px; max-height:320px; width:100vw; object-fit:cover; border-radius:0; }
  .about-text-container{ padding:1.5rem 1.1rem; }
}
@media (max-width:600px){
  .headline{ font-size:1.4rem; }
  .about-title{ font-size:1.6rem; }
  .carousel-image{ height:38vw; max-height:240px; }
  .carousel-controls{ bottom:0.5em; gap:0.7em; }
  .contact-buttons{ flex-direction:column; gap:0.7em; width:100%; align-items:stretch; }
  .contact-btn{ width:100%; justify-content:center; }
}