:root{
  --bg: #0b0f17;
  --bg-soft: #111625;
  --text: #dbe1ff;
  --muted: #9aa5c4;
  --primary: #7aa2ff;
  --accent: #00e0ff;
  --card: #101522;
  --border: rgba(255,255,255,0.08);
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
  --glass: rgba(255,255,255,0.06);
}

:root[data-theme="light"]{
  --bg: #f6f8ff;
  --bg-soft: #eef2ff;
  --text: #0b0f17;
  --muted: #55607a;
  --primary: #2b59ff;
  --accent: #0ea5e9;
  --card: #ffffff;
  --border: rgba(0,0,0,0.08);
  --shadow: 0 10px 30px rgba(2,6,23,0.1);
  --glass: rgba(0,0,0,0.04);
}

html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  overflow-x:hidden;
}

/* Tech animated background (subtle) */
body::before{
  content:"";
  position:fixed; inset:-10% -10%;
  background:
    radial-gradient(60vmax 60vmax at 10% 10%, color-mix(in oklab, var(--accent), transparent 70%) 0%, transparent 60%),
    radial-gradient(50vmax 50vmax at 90% 20%, color-mix(in oklab, var(--primary), transparent 75%) 0%, transparent 60%),
    radial-gradient(40vmax 40vmax at 40% 90%, color-mix(in oklab, var(--primary), transparent 80%) 0%, transparent 60%);
  filter: blur(60px);
  opacity:.55;
  z-index:-2;
  animation: bgshift 18s ease-in-out infinite alternate;
}
@keyframes bgshift{ to{ transform: translate3d(2%, -1%, 0) scale(1.02);} }

/* Grid helpers */
.container{ width:min(1200px, 92vw); margin-inline:auto; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.flex{ display:flex; gap:12px; align-items:center; }

/* Header / Nav */
.site-header{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--bg), transparent 0%), transparent 100%);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
}
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; }
.brand{ display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit; }
.logo{ width:40px; height:40px; filter: drop-shadow(0 6px 16px color-mix(in oklab, var(--accent), transparent 70%)); }
.brand-title{ font-weight:800; letter-spacing:0.4px; font-size:1.2rem; }
.plus{ color: var(--accent); }
.brand-tagline{ font-size:12px; color: var(--muted); display:block; margin-top:-2px; }

.nav a{ color:var(--text); text-decoration:none; padding:10px 12px; border-radius:999px; opacity:.8; }
.nav a:hover{ opacity:1; background:var(--glass); }
.actions{ display:flex; gap:8px; align-items:center; }
.btn{ border-radius:14px; padding:10px 16px; border:1px solid var(--border); background:linear-gradient( to bottom right, color-mix(in oklab, var(--card), white 4%), var(--card) ); box-shadow: var(--shadow); color:var(--text); text-decoration:none; display:inline-flex; align-items:center; gap:10px; }
.btn.primary{ background:linear-gradient(135deg, var(--primary), var(--accent)); border:none; color:white; }
.btn.outline{ background:transparent; }
.btn:hover{ transform: translateY(-1px); }
.whatsapp{ background: linear-gradient(135deg, #25D366, #128C7E); color:white; border:none; }

.icon-btn{ background:transparent; border:1px solid var(--border); border-radius:12px; width:44px; height:44px; display:grid; place-items:center; cursor:pointer; }
.icon{ width:22px; height:22px; fill: currentColor; opacity:.9; }

/* Hamburger */
.hamburger{ display:none; background:none; border:none; padding:8px;}
.hamburger span{display:block; width:24px; height:2px; background:var(--text); margin:5px 0; border-radius:2px;}

/* Hero / Slider */
.hero{ position:relative; }
.slider{ position:relative; height: 78vh; min-height:520px; overflow:hidden; border-bottom:1px solid var(--border); }
.slides{ position:absolute; inset:0; display:grid; }
.slide{ position:absolute; inset:0; background: var(--bg-soft); background-image: var(--bg); background-size:content; background-position:center; background-repeat: no-repeat; transform: scale(1.02); opacity:0; transition: opacity 900ms ease, transform 1400ms cubic-bezier(.2,.6,.2,1); }
.slide[aria-current="true"]{ opacity:1; transform: scale(1.0); }
.slide::before{ content:""; position:absolute; inset:0; background: radial-gradient(ellipse at 70% 30%, rgba(0,0,0,.35), transparent 60%); mix-blend-mode:multiply; }
.hero-content{ position:relative; z-index:2; padding-top:18vh; }
.hero h1{ font-size:clamp(28px, 5vw, 52px); margin:.2em 0; }
.hero h2{ font-size:clamp(22px, 4vw, 40px); margin:.2em 0; }
.hero-cta{ margin-top:18px; display:flex; gap:12px; flex-wrap:wrap; }
.slider-dots{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%); display:flex; gap:10px; }
.slider-dots button{ width:10px; height:10px; border-radius:999px; border:none; background: color-mix(in oklab, var(--text), transparent 60%); opacity:.6; cursor:pointer;}
.slider-dots button[aria-current="true"]{ background: var(--accent); opacity:1; width:22px; border-radius:6px; transition:width 300ms ease; }

/* Cards / Sections */
.card{ background:linear-gradient( to bottom right, color-mix(in oklab, var(--card), white 2%), var(--card) ); border:1px solid var(--border); border-radius:22px; padding:22px; box-shadow: var(--shadow); }
.features{ margin:48px auto; }
.page{ padding:28px 0 64px; }
.page-header h1{ margin-bottom:6px; }
.list{ list-style:none; padding-left:0; margin:0; }
.list li{ margin:8px 0; color:var(--muted); }

/* Services */
.services .service-card{ display:grid; grid-template-columns:140px 1fr; gap:18px; align-items:center; padding:18px; background:linear-gradient( 145deg, var(--glass), transparent ); border-radius:20px; border:1px dashed var(--border); }
.svc-art{ width:140px; height:140px; display:grid; place-items:center; }
.svc-art img{ width:100%; height:100%; object-fit:contain; filter: drop-shadow(0 16px 32px color-mix(in oklab, var(--accent), transparent 70%)); }

/* Portfolio */
.portfolio .card img{ width:100%; height:200px; object-fit:cover; border-radius:14px; }

/* Contact / Map */
.contact-section form label{ display:block; margin:8px 0; }
.contact-section input, .contact-section textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background: var(--bg-soft); color:var(--text);
}
.map-card .map-embed{ position:relative; width:100%; height:320px; border-radius:16px; overflow:hidden; margin:10px 0 16px; border:1px solid var(--border); }
.map-card iframe{ width:100%; height:100%; border:0; }

/* Reveal on scroll */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity 700ms ease, transform 700ms ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* Page Transition Overlay */
.page-transition{
  position:fixed; inset:0; background: radial-gradient(circle at center, var(--bg-soft), var(--bg) 60%);
  z-index:100; pointer-events:none; opacity:0; transform: scale(1.05);
  transition: opacity 500ms ease, transform 600ms ease;
}
.page-transition.is-active{ opacity:1; transform: scale(1); }

/* Icon-3D */
.icon-3d svg{ width:42px; height:42px; stroke: var(--accent); fill: color-mix(in oklab, var(--accent), transparent 85%); stroke-width: 2; filter: drop-shadow(0 8px 18px color-mix(in oklab, var(--accent), transparent 70%)); }

/* Footer */
.site-footer{ padding:32px 0 12px; border-top:1px solid var(--border); background: linear-gradient(to top, color-mix(in oklab, var(--bg), transparent 0%), transparent 100%); }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; border-top:1px solid var(--border); }
.socials a{ display:inline-grid; place-items:center; width:36px; height:36px; border-radius:10px; border:1px solid var(--border); }
.socials .icon{ width:18px; height:18px; }

/* Responsive */
@media (max-width: 1024px){
  .grid-3{ grid-template-columns:1fr 1fr; }
  .services .service-card{ grid-template-columns:110px 1fr; }
}
@media (max-width: 720px){
  .nav{ display:none; position:absolute; top:64px; right:12px; background:var(--card); padding:10px; border-radius:16px; border:1px solid var(--border); box-shadow: var(--shadow); }
  .nav a{ display:block; }
  .hamburger{ display:block; }
  .grid-3{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .slider{ height:64vh; }
  .services .service-card{ grid-template-columns:72px 1fr; }
}

/* Light/Dark specific imagery */
:root[data-theme="light"] .logo{ filter: drop-shadow(0 6px 16px rgba(43,89,255,.35)); }
:root[data-theme="light"] .slide::before{ background: radial-gradient(ellipse at 70% 30%, rgba(255,255,255,.35), transparent 60%); }

/* Utilities */
.hidden{ display:none !important; }