style.css

:root{
  --bg:#071017;
  --panel:#0e2a32;
  --muted:#98a6ad;
  --accent:#18a0e0;
  --accent-2:#0bb1ff;
  --glass: rgba(255,255,255,0.03);
  --card: rgba(255,255,255,0.03);
  --radius:12px;
  font-family:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,Arial;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background: linear-gradient(180deg,var(--bg), #051014);
  color:#dbeef8;
  -webkit-font-smoothing:antialiased;
}

/* container */
.container{width:min(1200px,94%);margin:0 auto;padding:0 16px}

/* header */
.site-header{
  position:sticky;top:0;z-index:40;background:rgba(2,8,10,0.5);backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,0.03)
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;height:72px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,var(--accent-2),var(--accent));box-shadow:0 6px 18px rgba(11,177,255,0.06)}
.brand-name{font-weight:700;color:#eaf6ff}

/* nav */
.nav-links{display:flex;gap:20px;align-items:center}
.nav-link{color:rgba(255,255,255,0.72);text-decoration:none;font-weight:500;cursor:pointer}
.nav-link:hover{color:var(--accent)}
.nav-link.active{color:var(--accent);font-weight:700}

/* buttons */
.btn{border-radius:10px;padding:8px 12px;font-weight:600;cursor:pointer;border:none;display:inline-flex;align-items:center;gap:8px}
.btn-primary{background:linear-gradient(180deg,var(--accent-2),var(--accent));color:#002229;padding:10px 14px}
.btn-outline{background:transparent;border:1px solid rgba(255,255,255,0.06);color:rgba(255,255,255,0.9);padding:8px 12px}
.btn-muted{background:rgba(255,255,255,0.03);color:rgba(255,255,255,0.9)}
.small{padding:6px 8px;font-size:13px}
.large{padding:12px 18px;font-size:16px}
.full{width:100%}

/* hero */
.hero-section{position:relative;min-height:480px;display:flex;align-items:center;justify-content:center;text-align:center;padding:72px 0;background-image:url('assets/hero.jpg');background-size:cover;background-position:center}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(3,6,8,0.5), rgba(2,6,8,0.8))}
.hero-inner{position:relative;z-index:2;max-width:980px;padding:20px}
.hero-title{font-size:44px;line-height:1.05;margin:0 0 12px;font-weight:800;color:white;text-shadow:0 6px 30px rgba(2,6,8,0.6)}
.hero-sub{color:rgba(255,255,255,0.85);max-width:820px;margin:0 auto 18px;font-size:17px}
.hero-ctas{display:flex;gap:12px;justify-content:center}

/* gemini card */
.gemini-card{display:flex;align-items:center;gap:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:14px;border-radius:12px;box-shadow:0 10px 30px rgba(2,6,8,0.6);max-width:720px;width:100%}
.gemini-thumb{width:72px;height:72px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(11,177,255,0.08), rgba(11,177,255,0.03))}
.gemini-meta{flex:1}
.gemini-title{margin:0;font-size:18px;font-weight:700;color:#e8f7ff}
.gemini-desc{margin:6px 0 12px;color:var(--muted);font-size:14px}
.gemini-actions{display:flex;gap:8px;flex-wrap:wrap}

/* modal */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center}
.modal.hidden{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(3,6,8,0.6)}
.modal-panel{position:relative;background:linear-gradient(180deg, rgba(4,8,10,0.98), rgba(3,6,8,0.98));border-radius:12px;width:min(1100px,96%);max-height:90vh;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,0.04)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,0.03)}
.modal-header h3{margin:0;font-size:16px}
.modal-controls{display:flex;gap:8px;align-items:center}
.modal-body{padding:0;background:#041018;flex:1;display:flex;align-items:center;justify-content:center}

/* iframe container + fallback */
.iframe-container{width:100%;height:100%;min-height:520px;position:relative;display:flex;align-items:center;justify-content:center}
.iframe-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);padding:18px;text-align:center}
.gemini-iframe{width:100%;height:100%;border:0;display:block}

/* responsive */
@media (max-width: 980px){
  .gemini-card{flex-direction:column;align-items:stretch}
  .gemini-thumb{align-self:center}
  .modal-panel{width:96%}
}