/* ===== Base ===== */
:root{
  --bg: #0a0f1a;
  --surface: #0f172a;
  --surface-2: #0b1220;
  --line: #1e293b;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --primary: #6366f1;
  --secondary: #06b6d4;
  --accent: #f59e0b;
  --success: #22c55e;
  --danger: #ef4444;
}
*{ box-sizing: border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.skip{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  left: 12px; top: 12px; width:auto; height:auto;
  padding:8px 12px; border-radius:10px;
  background:#111827; color:#fff; outline:2px solid #334155;
}

/* ===== Tickers ===== */
.tickers{
  position: sticky; top: 0; z-index: 1000;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.ticker{
  --h: 40px;
  display:block; height: var(--h); overflow: hidden;
  background: linear-gradient(90deg, #0e1526, #0b1220);
  border-bottom: 1px solid var(--line);
  contain: content;
}
.ticker.alt{
  background: linear-gradient(90deg, #0b1220, #0e1526);
}
.ticker__track{
  display:inline-flex; align-items:center;
  gap: 28px; height:100%;
  white-space: nowrap;
  animation: scroll linear infinite;
  will-change: transform;
}
.ticker__item{
  display:inline-flex; align-items:center; gap:10px;
  padding: 0 6px; color: var(--muted);
  transition: color .2s ease, transform .2s ease, text-shadow .2s ease;
}
.ticker__item:hover{ color:#fff; transform: translateY(-1px); text-shadow: 0 2px 10px rgba(255,255,255,.25) }
.badge{
  padding:.22rem .48rem; border-radius: 999px;
  font-size:.72rem; font-weight:700;
  background:#111827; border:1px solid #263244; color:#c7d2fe;
}
.ticker a{ color:inherit; text-decoration:none; border-bottom: 1px dashed rgba(255,255,255,.25) }
.ticker:hover .ticker__track{ animation-play-state: paused }
@keyframes scroll{ to{ transform: translateX(-50%) } }
@media (prefers-reduced-motion: reduce){
  .ticker__track{ animation:none }
}

/* ===== Header & Nav ===== */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  gap: 16px; padding: 14px 18px; border-bottom:1px solid var(--line);
  background: rgba(15, 23, 42, .7); backdrop-filter: blur(10px);
  position: sticky; top: 80px; z-index: 900;
}
.brand{ display:flex; align-items:center; gap:12px }
.logo{
  position:relative; width:34px; height:34px;
  display:grid; place-items:center;
}
.logo .cube{
  width:20px; height:20px; border-radius:6px;
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  transform: rotate(12deg);
}
.logo .bar{
  position:absolute; bottom:2px; left:50%; width:16px; height:3px;
  transform: translateX(-50%); border-radius: 10px;
  background: linear-gradient(90deg, var(--accent), var(--success));
}
.logo .dot{
  position:absolute; top:2px; right:2px; width:6px; height:6px; border-radius:999px;
  background: var(--danger);
  box-shadow: 0 0 0 4px rgba(239,68,68,.15);
}
.brand-text strong{ display:block; line-height:1 }
.brand-text small{ display:block; color: var(--muted) }

.nav__list{
  margin:0; padding:0; list-style:none;
  display:flex; gap: 6px; flex-wrap: wrap;
}
.nav__link{
  display:block; padding: 10px 14px; border-radius: 12px;
  background: linear-gradient(180deg, #111b34, #0b1220);
  color: var(--muted); text-decoration: none;
  border: 1px solid var(--line);
  transition: transform .2s ease, box-shadow .2s ease, color .2s ease, background .2s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 6px 16px rgba(0,0,0,.25);
}
.nav__link:hover, .nav__link:focus-visible{
  color:#fff; transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.35);
  background: linear-gradient(180deg, #132243, #0b1220);
  outline: none;
}

/* ===== Hero ===== */
.hero{
  position: relative; min-height: 54vh; padding: 72px 18px;
  display:grid; place-items:center; text-align:center;
  background: radial-gradient(800px 400px at -15% -10%, #0ea5e955, transparent 60%),
              radial-gradient(800px 400px at 115% -10%, #6366f155, transparent 60%),
              linear-gradient(135deg, #0f172a, #0b0f17);
  overflow:hidden; perspective: 1000px;
}
.hero__glow{
  position:absolute; inset:-10%; filter: blur(80px) saturate(140%) contrast(120%);
  background: conic-gradient(from 90deg at 50% 50%, #7c3aed, #06b6d4, #22c55e, #f59e0b, #ef4444, #7c3aed);
  opacity:.28; transform: translateZ(-200px) scale(1.2);
}
.hero__shapes .s{
  position:absolute; width:220px; height:220px; border-radius: 28px;
  background: linear-gradient(135deg, rgba(99,102,241,.35), rgba(6,182,212,.35));
  filter: blur(10px);
  transform: translateZ(-100px) rotate(12deg);
}
.s1{ top: -40px; left: -60px }
.s2{ bottom: -50px; right: -40px; transform: translateZ(-100px) rotate(-8deg) }
.s3{ top: 20%; right: 30% }
.hero h1{ margin:0 0 8px; font-size: clamp(2rem, 4vw + 1rem, 3.6rem) }
.hero p{ margin:0 0 22px; color: var(--muted) }
.cta{ display:flex; gap: 10px; justify-content:center; flex-wrap: wrap }
.btn{
  display:inline-block; padding: 12px 18px; border-radius: 14px;
  text-decoration:none; cursor:pointer; font-weight: 600; color:#fff;
  border: 1px solid #2e3748; background: #0b1320;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.btn:hover{ transform: translateY(-2px) }
.btn--primary{ background: linear-gradient(135deg, var(--primary), var(--secondary)); border:0 }
.btn--ghost{ background: transparent }

/* ===== Sections ===== */
.section{ padding: 64px 18px }
.section--alt{ background: #0b101a }
.section__header{ max-width: 980px; margin: 0 auto 26px; text-align:center }
.section__header h2{ margin:0 0 6px; font-size: clamp(1.4rem, 1.5vw + 1.2rem, 2.1rem) }
.section__header p{ margin:0; color: var(--muted) }

/* ===== Cards ===== */
.cards{
  max-width: 1150px; margin: 0 auto;
  display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px;
}
.card{
  position:relative; overflow:hidden; border-radius: 22px;
  background: linear-gradient(180deg, #0f172a 40%, #0b0f17);
  border: 1px solid var(--line); padding: 22px;
  transform-style: preserve-3d; will-change: transform;
  transition: transform .2s ease, box-shadow .25s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.card:hover{ transform: translateY(-4px) rotateX(.6deg) rotateY(-.6deg); box-shadow: 0 18px 36px rgba(0,0,0,.35) }
.card__glaze{
  position:absolute; inset:-20%; pointer-events:none;
  background: conic-gradient(from 45deg at 50% 50%, #7c3aed66, #06b6d466, #22c55e66, #f59e0b66, #ef444466, #7c3aed66);
  filter: blur(26px); opacity:.35;
}
.card__glaze.hue2{ filter: blur(28px) hue-rotate(30deg) }
.card__glaze.hue3{ filter: blur(28px) hue-rotate(80deg) }
.card__glaze.hue4{ filter: blur(28px) hue-rotate(140deg) }
.card h3{ margin: 0 0 8px }
.card p{ margin: 0 0 14px; color: var(--muted) }
.arrow{
  color:#fff; text-decoration:none; position:relative; padding-right: 20px;
}
.arrow::after{
  content:"→"; position:absolute; right:0; transition: transform .2s ease;
}
.arrow:hover::after{ transform: translateX(4px) }

/* ===== Gallery placeholders (no external images) ===== */
.gallery{
  max-width: 1150px; margin: 0 auto;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.gallery__item{
  position:relative; overflow:hidden; border-radius: 18px; display:block;
  aspect-ratio: 16/10; border: 1px solid var(--line);
  transition: transform .25s ease, box-shadow .25s ease;
}
.gallery__item .ph{
  width:100%; height:100%;
  background: radial-gradient(600px 300px at 20% 30%, rgba(99,102,241,.35), transparent 60%),
              radial-gradient(600px 300px at 80% 20%, rgba(6,182,212,.35), transparent 60%),
              linear-gradient(135deg, #0f172a, #0b0f17);
}
.gallery__item:hover{ transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0,0,0,.4) }

/* ===== Contact ===== */
.contact{ max-width: 860px; margin: 0 auto; display:flex; flex-direction:column; gap: 14px }
.grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px }
.field{ display:flex; flex-direction:column; gap: 6px }
.field span{ color: var(--muted); font-size:.9rem }
.field input, .field textarea{
  background: var(--surface-2); border:1px solid var(--line); color:#fff;
  border-radius: 12px; padding: 12px 14px; outline:none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field textarea:focus{
  border-color:#334155; box-shadow: 0 0 0 4px rgba(99,102,241,.15);
}

/* ===== Footer ===== */
.footer{ padding: 28px 16px; border-top:1px solid var(--line); text-align:center; color: var(--muted) }

/* ===== Focus visibility ===== */
:focus-visible{ outline: 2px solid #3b82f6; outline-offset: 2px }

/* ===== Responsive ===== */
@media (max-width: 900px){
  .site-header{ flex-direction: column; align-items: stretch; gap: 10px }
  .gallery{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 520px){
  .grid{ grid-template-columns: 1fr }
  .gallery{ grid-template-columns: 1fr }
}