/* CCTECH Modern Redesign */
:root{
  --bg:#0a0f2c;
  --bg-2:#0d1235;
  --card:#111636;
  --text:#e8edf6;
  --muted:#aab4c8;
  --brand:#56b8fd;
  --brand-2:#33a0f0;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
  --header-h: 96px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{ scroll-behavior:smooth }
body{ background:var(--bg); color:var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height:1.6 }
a{color:var(--brand);text-decoration:none}
a:hover{opacity:.9}
.container{ width:min(1200px, 92%); margin-inline:auto }
header{ position:sticky; top:0; z-index:1000; backdrop-filter:saturate(160%) blur(6px); background:linear-gradient(180deg, rgba(10,15,44,.85), rgba(10,15,44,.70)); border-bottom:1px solid rgba(255,255,255,.06)}
.navbar{ display:flex; align-items:center; justify-content:space-between; padding:14px 0 }
.logo{ display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.5px }
.logo img{ height:40px; width:auto }
.logo span{ font-size:14px; color:var(--muted) }
nav ul{ display:flex; gap:24px; list-style:none; margin:0; padding:0 }
nav a{ color:var(--text); font-weight:600; opacity:.9 }
nav a.active, nav a:hover{ color:#fff; text-shadow:0 0 8px rgba(86,184,253,.6) }
.mobile-toggle{ display:none; background:transparent; border:1px solid rgba(255,255,255,.15); color:var(--text); padding:8px 10px; border-radius:10px }
@media (max-width: 840px){
  nav ul{ display:none; position:absolute; right:4%; top:64px; flex-direction:column; background:var(--bg-2); padding:14px; border-radius:12px; box-shadow:var(--shadow) }
  nav ul.open{ display:flex }
  .mobile-toggle{ display:block }
}
/* Hero */
.hero{ position:relative; min-height:72vh; display:grid; place-items:center; overflow:hidden; background: radial-gradient(1200px 600px at 20% -10%, rgba(86,184,253,.15), transparent 60%), var(--bg) }
.hero video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.45; filter:contrast(105%) saturate(110%) }
.hero .overlay{ position:relative; z-index:2; text-align:center; padding:80px 0 }
.kicker{ letter-spacing:2px; text-transform:uppercase; color:var(--brand); font-weight:800; font-size:14px }
h1{ font-size:clamp(34px, 5vw, 64px); margin:.2em 0 .4em }
.lead{ max-width:780px; margin-inline:auto; color:var(--muted); font-size:clamp(16px, 2vw, 18px) }
.cta{ margin-top:28px; display:inline-flex; align-items:center; gap:10px; padding:12px 20px; background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#001225; font-weight:800; border-radius:12px; box-shadow:0 10px 24px rgba(86,184,253,.35) }
.cta:hover{ transform:translateY(-1px) }
.section{ padding:80px 0 }
.section h2{ font-size: clamp(28px, 3.6vw, 40px); margin:0 0 24px }
.section .sub{ color:var(--muted); margin-top:-6px; margin-bottom:28px }
section{ scroll-margin-top: calc(var(--header-h) + 8px) }
/* Grid & Cards */
.grid{ display:grid; gap:22px; grid-template-columns: repeat(12, 1fr) }
.col-4{ grid-column: span 4 } .col-6{ grid-column: span 6 } .col-12{ grid-column: span 12 }
@media (max-width: 1040px){ .col-4{ grid-column: span 6 } .col-6{ grid-column: span 12 } }
@media (max-width: 720px){ .col-4{ grid-column: span 12 } }
.card{ background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 50%), var(--card); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; transition: transform .2s ease, box-shadow .2s ease }
.card:hover{ transform: translateY(-4px); box-shadow:0 12px 34px rgba(0,0,0,.5) }
.card .media{ position:relative; aspect-ratio: 16/9; overflow:hidden }
.card video, .card img{ width:100%; height:100%; object-fit:cover; display:block }
.badge{ position:absolute; top:12px; left:12px; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.18); color:#fff; padding:6px 10px; border-radius:999px; font-size:12px; letter-spacing:.5px }
.card .content{ padding:18px 18px 20px }
.card h3{ margin:0 0 8px } .card p{ margin:0; color:var(--muted) }
/* Split & Panels */
.split{ display:grid; grid-template-columns: 1.1fr 1fr; gap:32px; align-items:center }
@media (max-width: 900px){ .split{ grid-template-columns: 1fr } }
.panel{ background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 50%), var(--card); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden }
.panel img{ width:100%; height:100%; object-fit:cover; display:block }
/* Feature icons */
.icon-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:18px }
@media (max-width: 960px){ .icon-grid{ grid-template-columns: repeat(2, 1fr);} }
.icon{ background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:18px }
.icon i{ font-size:26px; color:var(--brand) } .icon h4{ margin:8px 0 8px } .icon p{ margin:0; color:var(--muted) }
/* About block */
.about-text{ max-width: 1100px; margin: 0 auto; padding: 14px 8px 0; color: var(--muted); text-align: center }
.about-text p{ margin: 0 0 14px }
/* Compact contact info pills */
.contact-mini{ margin-top:14px; display:flex; gap:12px; flex-wrap:wrap; align-items:center }
.contact-mini div{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); padding:10px 12px; border-radius:12px }
.contact-mini i{ margin-right:8px; color:var(--brand) } .contact-mini a{ color:var(--text); opacity:.9 }
/* Reveal */
.reveal{ opacity:0; transform:translateY(10px); animation:reveal .6s ease forwards }
.reveal.d1{ animation-delay:.1s } .reveal.d2{ animation-delay:.2s } .reveal.d3{ animation-delay:.3s } .reveal.d4{ animation-delay:.4s }
@keyframes reveal{ to{ opacity:1; transform:none } }
/* === Video Lightbox Gallery === */
.vb-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter: blur(2px); display:none; align-items:center; justify-content:center; z-index:9999 }
.vb-overlay.show{ display:flex }
.vb-frame{ width:min(1200px, 92%); max-height:90vh; position:relative; color:#fff; display:grid; grid-template-rows:auto 1fr auto; gap:10px }
.vb-close, .vb-prev, .vb-next{ position:absolute; top:8px; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.2); color:#fff; padding:8px 12px; border-radius:10px; cursor:pointer }
.vb-close{ right:8px } .vb-prev{ left:8px; top:50%; transform:translateY(-50%); font-size:22px } .vb-next{ right:8px; top:50%; transform:translateY(-50%); font-size:22px }
.vb-aspect{ aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden } .vb-aspect video{ width:100%; height:100%; object-fit:contain; background:#000 }
.vb-title{ font-weight:700; margin:2px 4px 6px }
.vb-strip{ display:flex; gap:10px; overflow:auto; padding:4px 2px 2px; scroll-snap-type:x mandatory }
.vb-item{ flex:0 0 auto; width:160px; scroll-snap-align:start; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:12px; overflow:hidden; cursor:pointer }
.vb-item.active{ outline:2px solid #56b8fd }
.vb-item video{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block }
.vb-item span{ display:block; padding:6px 8px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
@media (max-width: 520px){ .vb-item{ width:120px } }
footer{ padding:20px 0 60px; color:var(--muted); text-align:center; border-top:1px solid rgba(255,255,255,.06) }