:root{
  --bg-0: #020414;
  --bg-1: #051026;
  --bg-2: #07132a;
  --bg-3: #0a1a31;
  --bg-4: #0c2138;
  --bg-5: #0f2740;
  --panel: rgba(255,255,255,0.02);
  --accent: #ff2b2b;
  --muted:#bbc9dc;
  --text: #e6f0ff;
  --max-w:1100px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: var(--text);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;background:var(--bg-0);scroll-behavior:smooth;display:flex;flex-direction:column;min-height:100vh;}
main{flex:1 0 auto;}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max-w);margin:0 auto;padding:28px}

.page-bg{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0.06;background-image:linear-gradient(transparent 23px, rgba(255,255,255,0.02) 24px),linear-gradient(90deg, transparent 23px, rgba(255,255,255,0.02) 24px);background-size:40px 40px;mix-blend-mode:screen}
.noise{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0.04;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/></filter><rect width="120" height="120" filter="url(%23n)" opacity="0.4"/></svg>');}

nav{position:static;margin:0 auto 0;z-index:60}
.navbar{display:flex;align-items:center;gap:18px;background:transparent;padding:10px 16px;flex-wrap:wrap;}
.brand{font-weight:700;letter-spacing:0.6px;display:flex;align-items:center;gap:12px}
.brand .logo{width:36px;height:36px;border-radius:0;background:linear-gradient(90deg,var(--accent),#ff8a8a);box-shadow:none;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--text)}
.navlinks{margin-left:auto;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.navlinks a{padding:8px 12px;border-radius:8px;font-weight:600;color:var(--muted);position:relative}
.navlinks a::after{content:"";position:absolute;left:10%;right:10%;bottom:-6px;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .25s}
.navlinks a:hover::after{opacity:1}
.navlinks a:hover{color: var(--accent);background: rgba(255,43,43,0.04);}
.navlinks a.active{color: var(--accent);background: rgba(255,43,43,0.04);}
.cta-btn{background:linear-gradient(90deg,var(--accent),#ff5959);padding:8px 14px;border-radius:10px;color:white;font-weight:700}
.navbar-divider{content:"";display:block;height:3px;width:100%;margin-top:4px;background:linear-gradient(90deg,transparent,var(--accent),transparent);box-shadow:0 0 14px rgba(255,43,43,0.3)}

header.hero{padding:48px 0 36px;position:relative;z-index:2;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#01020f 0%, transparent 100%);}
.hero-media{width:100%;max-width:980px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.04)}
.hero-media img, .hero-media video{display:block;width:100%;height:480px;object-fit:cover}
.hero-caption{padding:12px 16px;color:var(--muted);font-weight:600;background:rgba(0,0,0,0.18)}

section{padding:56px 0;position:relative;z-index:2;background:transparent;margin-bottom:0;}
.grad{position:relative;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%) }
.g1{background:linear-gradient(180deg,#01020f 0%, var(--bg-1) 100%)}
.g2{background:linear-gradient(180deg,var(--bg-1) 0%, var(--bg-3) 100%)}
.g3{background:linear-gradient(180deg,var(--bg-3) 0%, var(--bg-5) 100%)}
.grad > *{position:relative;z-index:2}
.section-title{margin-bottom:12px}
.section-title h2{margin:0;color:var(--text)}
.panel{padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);background:var(--panel);color:var(--text)}
.placeholder{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.design-grid{grid-template-columns:repeat(3,1fr)}
.design-card{display:block;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.05);background:var(--panel);transition:transform .25s,opacity .25s, box-shadow .25s;cursor:pointer;position:relative;color:var(--text)}
.design-card::after{content:"";position:absolute;left:8%;right:8%;bottom:-6px;height:8px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;filter:blur(10px);transition:opacity .25s}
.design-card img{width:100%;height:180px;object-fit:cover;display:block}
.design-card:hover{transform:scale(0.97);opacity:0.85;box-shadow:0 8px 24px rgba(255,43,43,0.18)}
.design-card:hover::after{opacity:1}
.design-text{padding:12px;color:var(--muted);font-size:14px}
footer{flex-shrink:0;padding:56px 0 32px;margin-top:0;color:var(--text);font-size:14px;border-top:1px solid rgba(255,43,43,0.35);position:relative}
footer::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent, var(--accent), transparent);box-shadow:0 0 18px rgba(255,43,43,0.35);}
@media (max-width:880px){.navlinks{display:none}.hero-media img, .hero-media video{height:320px}}
/* Generic image slot used across your pages */
.image-slot {
  width: 100%;
  height: 320px;            /* tweak for your design */
  display: block;
  object-fit: cover;        /* <-- picks up cropping behavior (cover vs contain) */
  object-position: center;  /* change to 'top' or '20% 10%' to adjust focal point */
  border-radius: 10px;
  overflow: hidden;
  transition: transform .22s ease;
}

/* If you want a fixed aspect-ratio instead of fixed height (modern browsers) */
.image-slot.aspect-16-9 {
  aspect-ratio: 16 / 9;     /* keeps box proportional; no explicit height needed */
  height: auto;
  object-fit: cover;
}

/* For diagrams where you must show entire image (no cropping): */
.image-slot.contain {
  object-fit: contain;
  background: rgba(0,0,0,0.03);  /* letterbox background */
}

/* background-image pattern (useful for perfect fill + overlay text) */
.image-bg {
  width:100%;
  height:320px;
  border-radius:10px;
  background-size: cover;        /* fills, cropping as needed */
  background-position: center;
  background-repeat: no-repeat;
}

/* small responsive tweaks */
@media (max-width:880px){
  .image-slot { height:220px; }
  .image-bg { height:220px; }
}


.video-frame {
  width: 100%;
  max-width: 980px;
  aspect-ratio: 16 / 9;   /* lock shape */
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
  background: #000;      /* prevents flash */
}

.video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* or contain if preferred */
  display: block;
}