/* Basic reset & layout */
:root{ --sp-max:1200px; --sp-gap:16px; --sp-bg:#0b0e13; --sp-card:#121722; --sp-text:#e7edf3; --sp-muted:#a5b2c2; --sp-accent:#55b6ff; }
*{ box-sizing:border-box; }
html, body{ padding:0; margin:0; background:var(--sp-bg); color:var(--sp-text); font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
a{ color:var(--sp-accent); text-decoration:none; } a:hover{ text-decoration:underline; }
img{ max-width:100%; height:auto; display:block; }

.sp-container{ width:100%; max-width:var(--sp-max); margin:0 auto; padding:0 20px; }
.sp-prose p{ margin:0 0 1rem; color:var(--sp-text); }
.sp-title{ font-size:clamp(28px,3vw,40px); margin:20px 0; }
.sp-section{ padding:48px 0; }
.sp-section-title{ font-size:clamp(22px,3vw,28px); margin-bottom:16px; }

/* Header */
.sp-site-header{ position:sticky; top:0; z-index:10; background:#0b0e13e6; backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid #1f2633; }
.sp-site-header .sp-container{ display:flex; align-items:center; justify-content:space-between; min-height:56px; }
.sp-brand{ font-weight:700; color:#fff; }
.sp-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:16px; }
.sp-nav a{ color:var(--sp-text); }
.sp-nav a:hover{ color:#fff; text-decoration:none; }

/* Footer */
.sp-site-footer{ border-top:1px solid #1f2633; padding:24px 0; color:var(--sp-muted); }
.sp-footer-cols{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.sp-chip{ display:inline-block; padding:4px 8px; border:1px solid #2b3344; border-radius:999px; color:var(--sp-muted); font-size:12px; }

/* Hero */
.sp-hero{ padding:72px 0 24px; background:linear-gradient(180deg, rgba(85,182,255,0.08), transparent); border-bottom:1px solid #1f2633; }
.sp-hero-title{ font-size:clamp(32px,4.5vw,52px); margin:0 0 8px; }
.sp-hero-sub{ color:var(--sp-muted); margin:0 0 16px; }
.sp-hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; }
.sp-btn{ display:inline-block; padding:10px 16px; background:var(--sp-accent); color:#00131f; border-radius:10px; font-weight:600; }
.sp-btn:hover{ filter:brightness(1.1); text-decoration:none; }
.sp-btn-secondary{ background:#1b2838; color:#cfeaff; border:1px solid #2e3b52; }
.sp-btn-outline{ background:transparent; color:var(--sp-accent); border:1px solid var(--sp-accent); }

/* Grid + cards */
.sp-filterbar{ display:flex; gap:8px; margin:12px 0 20px; flex-wrap:wrap; }
.sp-filter{ padding:8px 12px; background:#121722; border:1px solid #293041; color:#cfeaff; border-radius:12px; cursor:pointer; font-weight:600; }
.sp-filter.is-active, .sp-filter:hover{ background:#1c2434; }
.sp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width: 900px){ .sp-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width: 560px){ .sp-grid{ grid-template-columns:1fr;} }

.sp-card{ background:var(--sp-card); border:1px solid #20283a; border-radius:16px; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; }
.sp-card:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.25); }
.sp-card-media{ display:block; aspect-ratio:16/10; background:#0d1117; }
.sp-card-thumb{ width:100%; height:100%; object-fit:cover; }
.sp-card-body{ padding:14px; }
.sp-card-title{ margin:0 0 8px; font-size:18px; color:#eaf4ff; }
.sp-card-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.sp-card-tags a{ color:#9cc9ff; font-size:12px; margin-right:6px; }

/* Single project */
.sp-project-single .sp-details{ display:flex; gap:12px; flex-wrap:wrap; padding:0; margin:0 0 12px; list-style:none; }
.sp-cover{ margin:12px 0 12px; }
.sp-video{ margin:12px 0 12px; aspect-ratio:16/9; }
.sp-video iframe{ width:100%; height:100%; }

/* Content */
.sp-content figure{ margin:0 0 16px; }
.sp-content .wp-block-image img{ border-radius:12px; }

/* Utilities */
.sp-main{ padding-bottom:40px; }