:root{
  --bg:#06070A;
  --panel:#0B1020;
  --panel2:#0A0E18;
  --text:#F7FAFF;
  --muted:#A9B3C1;
  --blue:#1EA7FF;
  --blue2:#007BFF;
  --line:rgba(255,255,255,.10);
  --shadow: 0 18px 55px rgba(0,0,0,.55);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 700px at 20% 0%, rgba(30,167,255,.18), transparent 55%),
              radial-gradient(900px 600px at 100% 35%, rgba(0,123,255,.16), transparent 55%),
              linear-gradient(180deg, #04050A 0%, #070A12 35%, #05060B 100%);
  color:var(--text);
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.container{width:min(1120px, 92%); margin:0 auto}
.nav{
  position:sticky; top:0; z-index:50;
  background: rgba(6,7,10,.78);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between; padding:12px 0; gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:40px; width:auto; filter: drop-shadow(0 10px 20px rgba(30,167,255,.25))}
.brand .title{font-weight:800; letter-spacing:.5px}
.brand .subtitle{font-size:12px;color:var(--muted); margin-top:-2px}
.menu{display:flex;align-items:center;gap:14px; flex-wrap:wrap; justify-content:flex-end}
.menu a{
  padding:8px 10px; border-radius:12px; color:var(--muted);
  border:1px solid transparent;
}
.menu a:hover{color:var(--text); border-color:rgba(30,167,255,.25); background: rgba(30,167,255,.06)}
.menu a.active{color:var(--text); border-color:rgba(30,167,255,.35); background: rgba(30,167,255,.10)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:11px 14px; border-radius:14px;
  background: linear-gradient(135deg, rgba(30,167,255,.95), rgba(0,123,255,.90));
  color:#03101A; font-weight:800;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 30px rgba(0,123,255,.18);
}
.btn:hover{filter:brightness(1.05)}
.btn-ghost{
  background: rgba(255,255,255,.06);
  color:var(--text);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:none;
}
.hero{
  padding:46px 0 24px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:22px;
  align-items:stretch;
}
.card{
  background: linear-gradient(180deg, rgba(11,16,32,.92), rgba(10,14,24,.76));
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero-main{padding:26px}
.kicker{color:var(--muted); text-transform:uppercase; letter-spacing:2px; font-size:12px}
.h1{font-size:46px; line-height:1.05; margin:12px 0 12px; font-weight:900}
.h1 .glow{
  background: linear-gradient(90deg, var(--text), rgba(30,167,255,.95));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead{font-size:16px; color:rgba(247,250,255,.88); max-width:58ch}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.badge{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  padding:7px 10px; border-radius:999px; font-size:12px; color:var(--muted)
}
.hero-side{padding:18px 18px 12px; display:flex; flex-direction:column; gap:14px}
.hero-side .logo-wrap{
  border-radius:16px;
  overflow:hidden;
  background: radial-gradient(700px 260px at 30% 0%, rgba(30,167,255,.24), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
}
.hero-side .logo-wrap img{display:block; width:100%}
.side-list{padding:14px 14px 6px}
.side-list h3{margin:0 0 8px; font-size:14px; letter-spacing:.5px}
.side-item{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px dashed rgba(255,255,255,.10)}
.side-item:first-of-type{border-top:none}
.side-item span{color:var(--muted)}
.section{padding:26px 0}
.section h2{margin:0 0 10px; font-size:26px}
.section p{color:rgba(247,250,255,.86)}
.grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:14px}
.grid-2{display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; margin-top:14px}
.feature{padding:16px}
.feature h3{margin:0 0 6px}
.feature p{margin:0; color:rgba(247,250,255,.82); font-size:14px}
.callout{
  padding:18px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.callout .text{max-width:70ch}
.callout h3{margin:0 0 6px}
.callout p{margin:0; color:rgba(247,250,255,.84)}
.footer{
  padding:26px 0 40px;
  border-top:1px solid var(--line);
  margin-top:30px;
}
.footer-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:16px}
.small{font-size:12px; color:var(--muted)}
hr.sep{border:none;border-top:1px solid var(--line); margin:18px 0}
.page-head{padding:26px 0 8px}
.page-head h1{margin:0;font-size:34px}
.page-head p{margin:8px 0 0; color:rgba(247,250,255,.84)}
.table{width:100%; border-collapse:collapse; overflow:hidden; border-radius:16px; border:1px solid var(--line)}
.table th,.table td{padding:12px 12px; text-align:left; border-bottom:1px solid rgba(255,255,255,.08); vertical-align:top}
.table th{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:1.5px; background: rgba(255,255,255,.04)}
.table tr:last-child td{border-bottom:none}
.form{
  padding:18px;
}
label{display:block; font-size:12px; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin:10px 0 6px}
input, textarea, select{
  width:100%;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  padding:12px 12px; border-radius:14px;
  color:var(--text);
  outline:none;
}
textarea{min-height:120px; resize:vertical}
input:focus, textarea:focus, select:focus{border-color:rgba(30,167,255,.55); box-shadow: 0 0 0 3px rgba(30,167,255,.14)}
.form-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.notice{
  padding:12px 14px;
  border:1px dashed rgba(30,167,255,.35);
  background: rgba(30,167,255,.07);
  border-radius:16px;
  color:rgba(247,250,255,.88);
  font-size:13px;
}
.pills{display:flex;gap:10px; flex-wrap:wrap; margin-top:10px}
.pill{padding:9px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color:rgba(247,250,255,.88); font-size:13px}
.gallery{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin-top:14px;
}
.ph{
  aspect-ratio: 4/3;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(220px 160px at 20% 20%, rgba(30,167,255,.20), transparent 60%),
    radial-gradient(260px 180px at 85% 70%, rgba(0,123,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  display:flex; align-items:center; justify-content:center;
  color:rgba(247,250,255,.65);
  font-size:12px;
  text-align:center;
  padding:12px;
}
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .h1{font-size:38px}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .menu{display:none}
  .menu-mobile{display:flex}
}
.menu-mobile{display:none; gap:10px; flex-wrap:wrap}
.menu-mobile a{padding:8px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.10); color:rgba(247,250,255,.85); background: rgba(255,255,255,.04)}

/* Lightning Thunder Enhancements */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    url("assets/lightning-bg.svg") center/cover no-repeat;
  opacity:.35;
  pointer-events:none;
  z-index:-1;
}
.hero-main, .card{
  background:
    radial-gradient(900px 400px at 10% 0%, rgba(30,167,255,.20), transparent 60%),
    linear-gradient(180deg, rgba(11,16,32,.92), rgba(10,14,24,.76));
}
.btn{
  box-shadow: 0 0 0 0 rgba(30,167,255,.0), 0 14px 30px rgba(0,123,255,.25);
}
.btn:hover{
  box-shadow: 0 0 18px rgba(30,167,255,.55), 0 18px 36px rgba(0,123,255,.35);
}


/* ALL EFFECTS: animated lightning, flashes, photo overlays */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    url("assets/lightning-animated.svg") center/cover no-repeat;
  opacity:.45;
  pointer-events:none;
  z-index:-1;
}
@keyframes flash {
  0%, 95%, 100% { background-color: transparent; }
  96% { background-color: rgba(255,255,255,.12); }
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  animation: flash 8s infinite;
  pointer-events:none;
  z-index:-1;
}
.photo-overlay{
  position:relative;
  overflow:hidden;
}
.photo-overlay::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px 300px at 20% 10%, rgba(30,167,255,.35), transparent 60%),
    radial-gradient(600px 300px at 80% 80%, rgba(0,123,255,.25), transparent 60%);
  mix-blend-mode: screen;
}
.btn{
  box-shadow: 0 0 20px rgba(30,167,255,.55), 0 18px 36px rgba(0,123,255,.35);
}


/* ===== Storm Upgrade Pack (Lightning + Flash + Photo Layer) ===== */

/* Base storm background + multiple lightning layers */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    url("assets/lightning-bg.svg") center/cover no-repeat,
    radial-gradient(1200px 700px at 20% 0%, rgba(30,167,255,.18), transparent 55%),
    radial-gradient(900px 600px at 100% 35%, rgba(0,123,255,.16), transparent 55%),
    linear-gradient(180deg, #04050A 0%, #070A12 35%, #05060B 100%);
  opacity:.55; /* storm stronger */
  pointer-events:none;
  z-index:-3;
}

/* Extra lightning layers */
body::after{
  content:"";
  position:fixed;
  inset:-4%;
  background:
    url("assets/lightning-layer-1.svg") right top/cover no-repeat,
    url("assets/lightning-layer-2.svg") left top/cover no-repeat;
  opacity:.32;
  pointer-events:none;
  z-index:-2;
  mix-blend-mode:screen;
  animation: lightningDrift 18s ease-in-out infinite alternate;
}

@keyframes lightningDrift{
  0%{transform:translate3d(0,0,0) scale(1.02); opacity:.18;}
  50%{transform:translate3d(-1.2%, .6%, 0) scale(1.03); opacity:.24;}
  100%{transform:translate3d(1.1%, -0.4%, 0) scale(1.02); opacity:.20;}
}

/* Subtle mode (optional): add class "subtle-storm" to <body> */
body.subtle-storm::before{opacity:.26;}
body.subtle-storm::after{opacity:.12;}

/* Lightning flash overlay (animated) */
.storm-flash{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(900px 520px at 30% 20%, rgba(255,255,255,.16), transparent 55%),
    radial-gradient(700px 460px at 80% 35%, rgba(30,167,255,.20), transparent 60%);
  opacity:0;
  animation: stormFlash 6.2s linear infinite;
}

@keyframes stormFlash{
  0%, 72%, 100%{opacity:0;}
  74%{opacity:.78;}
  75%{opacity:.08;}
  76%{opacity:.62;}
  77%{opacity:.06;}
  78%{opacity:.48;}
  80%{opacity:0;}
}

/* Hero photo layer (placeholder now; swap to a real photo later) */
.hero-photo{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.35)),
    url("assets/hero-photo.svg") center/cover no-repeat;
  min-height:180px;
}

.hero-side .logo-wrap{position:relative;}
.hero-side .logo-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(600px 240px at 50% 0%, rgba(30,167,255,.18), transparent 60%);
  pointer-events:none;
}

/* Stronger glow accents */
.card{
  box-shadow: 0 18px 55px rgba(0,0,0,.55), 0 0 30px rgba(30,167,255,.14);
}
.btn:hover{
  box-shadow: 0 0 30px rgba(30,167,255,.78), 0 24px 56px rgba(0,123,255,.46);
}


/* Secondary micro flash layer */
.storm-flash::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(520px 320px at 15% 65%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(480px 280px at 70% 75%, rgba(30,167,255,.18), transparent 62%);
  opacity:0;
  animation: stormFlash2 5.4s linear infinite;
}
@keyframes stormFlash2{
  0%, 60%, 100%{opacity:0;}
  62%{opacity:.55;}
  63%{opacity:.08;}
  64%{opacity:.40;}
  66%{opacity:0;}
}


/* Footer overlap fixes */
.footer-grid{gap:18px; align-items:flex-start;}
.footer-card{max-width:520px;}
.pills{flex-wrap:wrap;}
.pill{max-width:100%; overflow-wrap:anywhere; word-break:break-word;}
@media (max-width: 860px){ .footer-card{max-width:100%;} }
.img-frame{border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.10);}
.img-frame img{display:block; width:100%; height:auto;}