:root {
  --bg: #0b0c10;
  --panel: #111318;
  --panel-2: #151923;
  --muted: #c9ced6;
  --text: #eef2f7;
  --accent: #9bd3f7;
  --ring: #2b87ff33;
  --radius: 18px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: radial-gradient(1200px 800px at 10% -10%, #121622, transparent), var(--bg);
  color: var(--text); font: 400 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  letter-spacing: 0.2px;
}
a { color: inherit; text-decoration: none; }
img { display:block; width:100%; height:auto; border-radius: calc(var(--radius) - 6px); }

.container { max-width: 1180px; margin: 0 auto; padding: 28px 18px 80px; }
header { position: sticky; top: 0; backdrop-filter: saturate(140%) blur(6px); background: #0b0c10cc; border-bottom: 1px solid #202533; z-index: 20; }
header .bar { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:0.4px; }
.brand .dot { width:12px; height:12px; border-radius:50%; background: linear-gradient(145deg,#6dc0ff,#c0e7ff); box-shadow: 0 0 0 6px var(--ring); }
nav a { opacity:.8; padding:8px 12px; border-radius:10px; }
nav a:hover { background:#1a2030; opacity:1; }

.hero { display:grid; grid-template-columns: 1.2fr .8fr; gap:24px; align-items:center; margin: 28px auto 32px; }
.hero h1 { font-size: clamp(28px, 5vw, 54px); line-height:1.08; margin:8px 0 10px; letter-spacing:.4px; }
.hero p { color: var(--muted); margin:0 0 18px; }
.cta { display:flex; gap:12px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; background: var(--text); color:#0b0c10; font-weight:600; box-shadow: 0 6px 24px #00000055; }
.btn.secondary { background:#1a2030; color:#e3e9f2; border:1px solid #2a3142; }
.btn:hover { transform: translateY(-1px); }

/* Bento grid */
.bento { display:grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.card { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border:1px solid #1f2533; border-radius: var(--radius); padding: 16px; position:relative; overflow:hidden; box-shadow: 0 10px 30px #00000040; }
.card:hover { outline: 1px solid #2a3142; }
.span-12 { grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }

.card h3 { margin: 6px 0 8px; font-size: 20px; }
.muted { color: var(--muted); font-size: 14px; }
.pill { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:#1a2030; border:1px solid #2a3142; color:#b9c2d3; font-size:12px; }

.socials { display:flex; gap:12px; flex-wrap:wrap; }
.socials a { display:inline-flex; align-items:center; gap:10px; border:1px solid #2a3142; background:#161c29; padding:10px 12px; border-radius:12px; }

/* Slideshow inside bento cards */
.slideshow { position: relative; border-radius: calc(var(--radius) - 6px); overflow: hidden; aspect-ratio: 3/2; }
.slide { position:absolute; inset:0; opacity:0; transition: opacity 1.1s ease; }
.slide img { width:100%; height:100%; object-fit:cover; }
.slide.active { opacity:1; }
.caption { position:absolute; left:8px; bottom:8px; background:#0b0c10aa; color:#e9eef6; padding:6px 10px; border-radius:10px; font-size:12px; opacity:0; transition:.2s; }
.card:hover .caption { opacity:1; }

/* Contact form */
form { display:grid; grid-template-columns: repeat(6, 1fr); gap:12px; }
label { font-size:13px; color:#c8d0dc; }
input, select, textarea { width:100%; padding:12px 12px; border-radius:12px; border:1px solid #2a3142; background:#101522; color:#e6ecf6; outline:none; }
input:focus, select:focus, textarea:focus { border-color:#2b87ff; box-shadow: 0 0 0 4px var(--ring); }
.field { display:flex; flex-direction:column; gap:6px; }
.col-6 { grid-column: span 6; }
.col-3 { grid-column: span 3; }
.col-2 { grid-column: span 2; }
.col-4 { grid-column: span 4; }

.required::after { content:" *"; color:#ffa8a8; }
.help { font-size:12px; color:#98a4b8; }
.note { font-size:12px; color:#9bd3f7; }

.footer { display:flex; justify-content:space-between; align-items:center; margin-top: 26px; flex-wrap:wrap; gap:12px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background:#111b2a; border:1px solid #2a3142; color:#dfe7f4; padding:10px 14px; border-radius:12px; box-shadow:0 10px 24px #0008; display:none; z-index: 50; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .span-8 { grid-column: span 12; }
  .span-6 { grid-column: span 12; }
  .span-4 { grid-column: span 12; }
  .span-3 { grid-column: span 6; }
  .col-3 { grid-column: span 6; }
  .col-2 { grid-column: span 3; }
}
@media (max-width: 640px) {
  .col-2, .col-3, .col-4 { grid-column: span 6; }
  .hero h1 { font-size: clamp(26px, 7vw, 36px); }
  .container { padding: 22px 14px 72px; }
  .bento { gap: 12px; }
  .slideshow { aspect-ratio: 1/1; }
}
@media (max-width: 480px) {
  nav { display:none; }
  .btn { width: 100%; justify-content: center; }
  .hero p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .slide { transition: none !important; }
}