/* =================================
RESET
================================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html,body{
background:#000;
color:#fff;
font-family:system-ui,-apple-system;
overflow-x:hidden;
}

/* =================================
ROOT
================================= */

:root{
--nav-height:60px;
}

/* =================================
GLOBAL IMAGE SAFE
================================= */

img{
max-width:100%;
height:auto;
display:block;
}

/* =================================
NAV GLOBAL (LOCK)
================================= */

.global-nav{
position:fixed;
top:0;
left:0;
width:100%;
background:#000;
z-index:9999;
border-bottom:1px solid #111;
}

.nav-wrap{
max-width:1100px;
margin:auto;
padding:14px 20px;
}

.nav-menu{
display:flex;
gap:18px;
overflow-x:auto;
list-style:none;
}

.nav-menu a{
color:#fff;
text-decoration:none;
font-size:14px;
white-space:nowrap;
}

/* =================================
LAYOUT STRUCTURE
================================= */

.section{
padding:80px 20px;
}

.container{
max-width:1100px;
margin:auto;
padding:0 16px;
}

.section-title{
text-align:center;
margin-bottom:40px;
}

/* =================================
HERO MASTER (GLOBAL SAFE)
================================= */

.hero-master{
position:relative;
width:100%;
min-height:100vh;
padding-top:var(--nav-height);
overflow:hidden;
}
/* =================================
ULTRA HERO HEIGHT FIX
ADD ONLY
================================ */

.index-page .hero-master{

min-height:auto !important;

}

.hero-master img{
width:100%;
height:auto;
object-fit:cover;
}

/* =================================
CARD SYSTEM
================================= */

.card{
background:#0e0e0e;
border-radius:16px;
padding:24px;
margin:0 auto 24px;
max-width:680px;
border:1px solid #1a1a1a;
}

/* =================================
BUTTON SYSTEM
================================= */

.btn-primary{
display:inline-block;
padding:14px 28px;
border-radius:12px;
background:#06c755;
color:#000;
text-decoration:none;
font-weight:600;
}

/* =================================
TEMPLATE GRID
================================= */

.template-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}

@media(max-width:600px){
.template-grid{
grid-template-columns:1fr;
}
}

/* =================================
CONTACT PAGE (ISOLATION)
================================= */

.contact-page{
text-align:center;
}

.contact-btn-center{
display:flex;
justify-content:center;
margin-top:15px;
}

/* =================================
SEO PAGE (ISOLATION)
================================= */

.seo-page .hero-master{
display:flex;
justify-content:center;
align-items:flex-start;
}

.seo-grid{
display:grid;
grid-template-columns:1fr;
gap:24px;
}

.seo-card{
background:#0e0e0e;
border-radius:18px;
padding:24px;
max-width:680px;
margin:auto;
}

.seo-page .btn-primary{
display:block;
margin:auto;
width:fit-content;
}

/* =================================
THAI TEXT
================================= */

.th{
display:block;
font-size:.9rem;
opacity:.85;
margin-top:6px;
text-align:center;
}

/* =================================
FOOTER
================================= */

footer{
text-align:center;
margin:40px 0;
}
/* =================================
SEO HERO TOP ALIGN FINAL FIX
SAFE ADD ONLY
================================= */

.seo-page .hero-master{

  min-height:auto;     /* ยกเลิก 100vh เฉพาะ SEO */
  padding-top:var(--nav-height);
  display:block;

}

.seo-page .hero-master img{

  margin-top:-20px;   /* fine tune ขึ้น */
}

/* ===============================
SERVICES PAGE CENTER ALIGN FIX
SAFE ISOLATION
=============================== */

.services-page .section{
text-align:center;
}

.services-page h1,
.services-page h2,
.services-page p{
text-align:center;
margin-left:auto;
margin-right:auto;
}

/* จำกัดความกว้างข้อความให้ดู premium */
.services-page .container p{
max-width:650px;
}

/* service card text center */
.services-page .service-card{
text-align:center;
}
/* =================================
EMERGENCY LAYOUT FIX (ULTRA SAFE)
ห้ามลบ — ใช้แก้ layout แตก
================================= */

/* Reset flex ที่หลุด */
.section,
.container,
.hero-master{
display:block !important;
width:100%;
}

/* Hero ต้อง stack แนวตั้ง */
.hero-master{
position:relative;
text-align:center;
}

/* ภาพต้องอยู่กลาง */
.hero-master img{
display:block;
margin:auto;
max-width:100%;
height:auto;
}

/* Text hero */
.hero-content-bottom{
text-align:center;
max-width:800px;
margin:auto;
}

/* ป้องกัน split layout ทุกหน้า */
.index-page .section,
.services-page .section,
.packages-page .section{
display:block !important;
}
/* =========================
ULTRA TEXT DEPTH SYSTEM
========================= */

.glow-title{
color:#ffffff;

text-shadow:

0 0 4px rgba(255,255,255,0.4),

0 0 12px rgba(80,160,255,0.25),

0 0 28px rgba(255,80,80,0.15);

}

.glow-subtle{
text-shadow:

0 0 2px rgba(255,255,255,0.25),

0 0 8px rgba(0,150,255,0.18);

}

.glow-red{
text-shadow:

0 0 6px rgba(255,60,60,0.35),

0 0 18px rgba(255,30,30,0.2);

}
/* ===============================
ULTRA TEXT GLOW (PREMIUM NEON)
SAFE ADD ONLY
================================ */

/* headline glow */
h1, h2 {
  color:#ffffff;
  text-shadow:
    0 0 4px rgba(255,255,255,0.25),
    0 0 12px rgba(0,200,255,0.25),
    0 0 22px rgba(255,40,80,0.18);
}

/* subtitle / paragraph glow */
p, .th {
  color:#e8e8e8;
  text-shadow:
    0 0 3px rgba(255,255,255,0.15),
    0 0 8px rgba(0,120,255,0.12);
}

/* navigation glow subtle */
.nav-menu a {
  transition:all .25s ease;
}

.nav-menu a:hover{
  text-shadow:
    0 0 6px rgba(255,255,255,0.5),
    0 0 14px rgba(0,200,255,0.4);
}
/* ===============================
ULTRA CREATE PREVIEW FRAME FIX
ADD ONLY — SAFE
================================ */

.create-page #imagePreview,
.create-page #videoPreview{

max-width:100%;
width:100%;
height:auto;

display:block;
margin:20px auto;

border-radius:12px;
overflow:hidden;

}

/* กันล้น container */
.create-page .container{

overflow:hidden;

}

/* video responsive */
.create-page video{

max-width:100%;
height:auto;

}
/* ===============================
ULTRA CREATE VIDEO SAFE FRAME
FINAL LOCK
================================ */

.create-page video{

width:100% !important;
max-width:100% !important;
height:auto !important;

display:block;
margin:0 auto;

}

/* ป้องกัน container ดัน layout */
.create-page .section,
.create-page .container{

max-width:100%;
overflow-x:hidden;

}

/* กัน element ดัน viewport */
body.create-page{

overflow-x:hidden;

}
/* =================================
ULTRA CREATE PREVIEW HARD LOCK
แก้ video ล้น mobile FINAL
================================= */

/* lock page */
body.create-page{
overflow-x:hidden;
}

/* lock all containers */
.create-page .section,
.create-page .container{
width:100%;
max-width:100%;
overflow-x:hidden;
}

/* lock preview blocks */
.create-page img,
.create-page video{

width:100% !important;
max-width:100% !important;
height:auto !important;

object-fit:contain;
display:block;

}

/* ป้องกัน video control bar ดัน layout */
.create-page video{

position:relative;
left:0;
right:0;

}
.nav-active{
  text-shadow:
    0 0 6px rgba(255,255,255,0.6),
    0 0 16px rgba(0,200,255,0.5);
}
/* ===============================
ULTRA MARQUEE WELCOME STRIP
ADD ONLY
================================ */

.ultra-marquee{

  width:100%;
  overflow:hidden;
  background:#050505;
  border-bottom:1px solid #111;

}

.marquee-track{

  display:flex;
  white-space:nowrap;
  animation:marqueeMove 25s linear infinite;

}

.marquee-track span{

  font-size:14px;
  padding:12px 0;
  margin-right:60px;

  color:#fff;

  text-shadow:
    0 0 4px rgba(255,255,255,0.3),
    0 0 12px rgba(0,200,255,0.25),
    0 0 20px rgba(255,50,80,0.15);

}

@keyframes marqueeMove{

  from{
    transform:translateX(100%);
  }

  to{
    transform:translateX(-100%);
  }

}
/* =================================
ULTRA MARQUEE FIX (ADD ONLY)
แก้ข้อความซ้อน + ไม่วิ่ง
================================ */

/* wrapper */
.marquee-wrap{
width:100%;
overflow:hidden;
background:#000;
border-bottom:1px solid #111;

/* กัน nav fixed ทับ */
margin-top:var(--nav-height);
}

/* text animation */
.marquee-text{
display:inline-block;
white-space:nowrap;
padding:10px 0;
font-size:14px;
color:#fff;

animation:marqueeMove 20s linear infinite;
}

/* keyframe */
@keyframes marqueeMove{
0%{ transform:translateX(100%); }
100%{ transform:translateX(-100%); }
}
.marquee-wrap{
overflow:hidden;
white-space:nowrap;
background:#000;
}

.marquee-text{
display:inline-block;
padding-left:100%;
animation:marqueeMove 20s linear infinite;
}

@keyframes marqueeMove{
0%{
transform:translateX(0);
}
100%{
transform:translateX(-100%);
}
}
/* ===============================
ULTRA HERO ALIGN FIX
ดึง hero ติด marquee
================================ */

.marquee-wrap + .hero-master{
margin-top:0 !important;
padding-top:0 !important;
}
/* =================================
ULTRA INTRO ZONE
ADD ONLY SAFE
================================= */

.ultra-intro-zone{
padding:80px 20px;
}

.ultra-intro-zone .container{
max-width:1000px;
margin:auto;
display:flex;
flex-direction:column;
gap:60px;
}

.intro-cinematic{
text-align:center;
}

.intro-title{
font-size:28px;
margin-bottom:15px;
}

.intro-text{
opacity:.85;
line-height:1.6;
}

.intro-video iframe{
width:100%;
height:400px;
border-radius:12px;
}
/* ===============================
ULTRA MARQUEE FIX FINAL
ADD ONLY - SAFE MODE
================================ */

.marquee-wrap{

position:relative;
width:100%;
overflow:hidden;

background:#000;
border-bottom:1px solid rgba(255,255,255,0.08);

margin-top:var(--nav-height);

}

.marquee-text{

white-space:nowrap;
display:inline-block;

padding:12px 0;

font-size:14px;
letter-spacing:0.5px;

animation:marqueeMove 18s linear infinite;

}

/* animation จริง */
@keyframes marqueeMove{

0%{
transform:translateX(100%);
}

100%{
transform:translateX(-100%);
}

}
/* ===============================
ULTRA MARQUEE RUNNING TEXT
FINAL
================================ */

.marquee-wrap{

width:100%;
overflow:hidden;
white-space:nowrap;

border-top:1px solid rgba(255,255,255,0.1);
border-bottom:1px solid rgba(255,255,255,0.1);

}

.marquee-text{

display:inline-block;

padding-left:100%;

animation: ultraMarquee 25s linear infinite;

font-size:14px;
opacity:0.85;

}

/* animation วิ่ง */
@keyframes ultraMarquee{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-100%);
}

}
/* =================================
ULTRA MARQUEE RUNNING TEXT
ADD ONLY - SAFE
================================= */

.marquee-wrap{
width:100%;
overflow:hidden;
white-space:nowrap;
background:#000;
border-bottom:1px solid rgba(255,255,255,0.08);
position:relative;
z-index:1;
}

.marquee-text{
display:inline-block;
padding-left:100%;
animation: ultraMarquee 25s linear infinite;
font-size:14px;
opacity:.9;
}

@keyframes ultraMarquee{
0%{
transform:translateX(0);
}
100%{
transform:translateX(-100%);
}
}
/* =================================
ULTRA MARQUEE FINAL FIX
================================= */

.marquee-wrap{
width:100%;
overflow:hidden;
white-space:nowrap;
background:#000;
border-bottom:1px solid rgba(255,255,255,0.08);
position:relative;
z-index:1;
}

.marquee-text{
display:inline-block;
padding-left:100%;
animation: ultraMarqueeMove 18s linear infinite;
}

@keyframes ultraMarqueeMove{
0%{
transform:translateX(0);
}
100%{
transform:translateX(-100%);
}
}
/* ===============================
ULTRA PRE INTRO LAYER
ADD ONLY
================================ */

.ultra-pre-intro{
padding:80px 20px;
text-align:center;
background:linear-gradient(
to bottom,
rgba(0,0,0,0),
rgba(0,0,0,0.4)
);
}

.pre-intro-title{
font-size:28px;
margin-bottom:14px;
}

.pre-intro-text{
opacity:.85;
font-size:16px;
max-width:720px;
margin:auto;
}
/* =================================
ULTRA HERO CINEMATIC LAYER
ADD ONLY SAFE
================================ */

.hero-cinematic-layer{

display:flex;
justify-content:center;
align-items:center;

margin-top:18px;

font-size:13px;
letter-spacing:2px;
text-transform:uppercase;

opacity:.85;

background:linear-gradient(
90deg,
rgba(0,180,255,0.15),
rgba(255,40,80,0.15)
);

padding:10px 18px;
border-radius:12px;

backdrop-filter:blur(6px);

box-shadow:
0 0 12px rgba(0,200,255,.2),
0 0 24px rgba(255,40,80,.15);

}
/* =================================
ULTRA CINEMATIC OVERLAY SYSTEM
ADD ONLY — SAFE LAYER
================================ */

.hero-master{
position:relative;
overflow:hidden;
}

/* cinematic light beam overlay */

.hero-master::before{

content:"";

position:absolute;
top:0;
left:-50%;

width:200%;
height:100%;

background:
linear-gradient(
120deg,
transparent 0%,
rgba(255,255,255,0.03) 30%,
rgba(0,150,255,0.08) 50%,
rgba(255,40,80,0.05) 70%,
transparent 100%
);

animation: ultraBeam 18s linear infinite;

pointer-events:none;
z-index:2;

}

/* cinematic vignette */

.hero-master::after{

content:"";

position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background:
radial-gradient(circle at center,
transparent 40%,
rgba(0,0,0,0.45) 100%
);

pointer-events:none;
z-index:1;

}

/* animation */

@keyframes ultraBeam{

0%{
transform:translateX(-20%);
}

100%{
transform:translateX(20%);
}

  }
/* =================================
ULTRA HERO DEPTH SYSTEM
ADD ONLY — SAFE
================================ */

/* ทำให้ hero image ดู cinematic มากขึ้น */

.hero-master img{

position:relative;
z-index:0;

filter:

contrast(1.05)
brightness(1.02)
saturate(1.05);

}

/* glow edge subtle */

.hero-master{

box-shadow:

inset 0 0 120px rgba(0,0,0,0.6),
inset 0 0 40px rgba(0,150,255,0.15);

}
/* ===============================
ULTRA GUI PREVIEW BLOCK
ADD ONLY
================================ */

.ultra-gui-preview{
padding:60px 20px;
display:flex;
justify-content:center;
}

.gui-container{
max-width:700px;
width:100%;
text-align:center;
}

.gui-mode{
font-size:14px;
letter-spacing:2px;
opacity:.8;
margin-bottom:20px;
}

.gui-screen{
position:relative;
border-radius:14px;
overflow:hidden;
box-shadow:0 0 40px rgba(0,200,255,.15);
}

.gui-screen img{
width:100%;
display:block;
}

.scan-line{
position:absolute;
width:100%;
height:2px;
background:rgba(0,255,255,.6);
animation:scan 3s linear infinite;
}

@keyframes scan{
0%{top:0}
100%{top:100%}
}

.gui-status{
margin-top:20px;
display:flex;
justify-content:center;
gap:10px;
flex-wrap:wrap;
}

.status-item{
padding:6px 12px;
border:1px solid rgba(255,255,255,.2);
border-radius:8px;
font-size:12px;
}

.status-item.active{
border-color:#00ffcc;
box-shadow:0 0 12px rgba(0,255,200,.3);
}

.gui-btn{
margin-top:25px;
padding:14px 30px;
border:none;
border-radius:12px;
background:#00cc66;
color:#000;
font-weight:bold;
  }
/* ULTRA MARQUEE FINAL */

.marquee-wrap{
position:relative;
overflow:hidden;
white-space:nowrap;
background:#000;
border-bottom:1px solid rgba(255,255,255,0.1);
margin-top:var(--nav-height);
}

.marquee-text{
display:inline-block;
padding:10px 0;
animation:marqueeMove 20s linear infinite;
}

@keyframes marqueeMove{
0%{ transform:translateX(100%); }
100%{ transform:translateX(-100%); }
  }
.ultra-gui-preview{
padding:60px 20px;
text-align:center;
}

.gui-screen{
position:relative;
max-width:500px;
margin:auto;
border-radius:14px;
overflow:hidden;
box-shadow:0 0 30px rgba(255,0,0,0.3);
}

.scan-line{
position:absolute;
top:0;
left:0;
width:100%;
height:3px;
background:rgba(255,0,0,0.6);
animation:scanMove 3s linear infinite;
}

@keyframes scanMove{
0%{ top:0; }
100%{ top:100%; }
  }
/* ===============================
ULTRA DASHBOARD GUI
ADD ONLY
================================ */

.ultra-dashboard-gui{
padding:80px 20px;
display:flex;
justify-content:center;
}

.gui-wrap{
max-width:1100px;
width:100%;
background:#060606;
border-radius:20px;
padding:30px;
box-shadow:0 0 60px rgba(0,150,255,.15);
}

.gui-header{
text-align:center;
font-size:22px;
margin-bottom:25px;
letter-spacing:2px;
}

.gui-main{
display:flex;
gap:20px;
flex-wrap:wrap;
}

.gui-sidebar{
flex:1;
min-width:140px;
}

.gui-sidebar ul{
list-style:none;
}

.gui-sidebar li{
padding:8px 0;
opacity:.8;
}

.gui-content{
flex:3;
display:flex;
gap:15px;
}

.template-card{
background:#111;
border-radius:12px;
overflow:hidden;
text-align:center;
flex:1;
}

.template-card img{
width:100%;
display:block;
}

.template-card span{
display:block;
padding:10px;
font-size:14px;
}

.gui-analytics{
flex:1;
text-align:center;
}

.circle{
width:80px;
height:80px;
border-radius:50%;
border:4px solid #00ffcc;
display:flex;
align-items:center;
justify-content:center;
margin:auto;
margin-bottom:10px;
}

.gui-actions{
margin-top:30px;
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
}

.gui-actions button{
background:#000;
border:1px solid rgba(255,255,255,.2);
color:#fff;
padding:10px 16px;
border-radius:8px;
}
/* =================================
ULTRA LIVE AI DASHBOARD SYSTEM
ADD ONLY
================================ */

/* container */
.ultra-live-dashboard{
padding:80px 20px;
display:flex;
justify-content:center;
}

.dashboard-container{
max-width:900px;
width:100%;
text-align:center;
}

/* title */
.dashboard-title{
font-size:14px;
letter-spacing:3px;
opacity:.8;
margin-bottom:20px;
}

/* screen */
.dashboard-screen{
position:relative;
border-radius:18px;
overflow:hidden;

animation: dashboardPulse 4s ease-in-out infinite;

box-shadow:
0 0 40px rgba(0,200,255,.15),
0 0 60px rgba(255,40,80,.1);
}

/* breathing glow */
@keyframes dashboardPulse{

0%{
transform:scale(1);
filter:brightness(1);
}

50%{
transform:scale(1.01);
filter:brightness(1.05);
}

100%{
transform:scale(1);
}

}

/* LIVE SCAN LINE */

.scan-line-live{

position:absolute;
left:0;
width:100%;
height:3px;

background:
linear-gradient(
90deg,
transparent,
rgba(0,255,255,.8),
transparent
);

animation: liveScan 3s linear infinite;

}

/* scan animation */
@keyframes liveScan{

0%{
top:0%;
opacity:0;
}

10%{
opacity:1;
}

90%{
opacity:1;
}

100%{
top:100%;
opacity:0;
}

  }
/* =================================
ULTRA LIVE AI SCAN ENGINE
ADD ONLY
================================ */

/* scan beam หลัก */

.scan-line-live{

position:absolute;
left:-20%;
width:140%;
height:6px;

background:
linear-gradient(
90deg,
transparent,
rgba(0,255,255,0.8),
rgba(255,40,80,0.6),
rgba(0,255,255,0.8),
transparent
);

filter:blur(2px);

animation: ultraScanBeam 2.8s linear infinite;

mix-blend-mode:screen;

}

/* beam motion */

@keyframes ultraScanBeam{

0%{
top:-10%;
opacity:0;
}

10%{
opacity:1;
}

50%{
opacity:1;
}

100%{
top:110%;
opacity:0;
}

}


/* HUD light sweep overlay */

.dashboard-screen::before{

content:"";

position:absolute;
top:0;
left:-50%;

width:200%;
height:100%;

background:
linear-gradient(
120deg,
transparent,
rgba(0,200,255,0.08),
transparent
);

animation: hudSweep 6s linear infinite;

pointer-events:none;

}

/* light sweep animation */

@keyframes hudSweep{

0%{
transform:translateX(-20%);
}

100%{
transform:translateX(20%);
}

}


/* AI micro flicker */

.dashboard-screen{

animation:
dashboardPulse 4s ease-in-out infinite,
aiFlicker 5s infinite;

}

@keyframes aiFlicker{

0%,100%{
filter:brightness(1);
}

48%{
filter:brightness(1.02);
}

49%{
filter:brightness(0.96);
}

50%{
filter:brightness(1.03);
}

}
/* =================================
ULTRA HOLOGRAPHIC SCAN MODE
ADD ONLY — FINAL
================================ */

/* holographic container */

.ultra-dashboard{
position:relative;
overflow:hidden;
}

/* hologram grid */

.ultra-dashboard::before{

content:"";

position:absolute;
inset:0;

background:
linear-gradient(rgba(0,255,255,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,255,255,0.05) 1px, transparent 1px);

background-size:40px 40px;

mix-blend-mode:screen;

opacity:.25;
pointer-events:none;

}

/* holographic beam */

.ultra-dashboard::after{

content:"";

position:absolute;
top:0;
left:-40%;

width:180%;
height:100%;

background:linear-gradient(
120deg,
transparent,
rgba(0,255,255,.25),
rgba(255,50,80,.15),
transparent
);

}

/* ===============================
ULTRA STATUS CTA BAR
ADD ONLY
=============================== */

.ultra-cta-status{
display:flex;
gap:10px;
justify-content:space-between;
margin-top:20px;
}

.cta-box{
flex:1;
padding:14px;
border-radius:10px;
text-align:center;
font-size:13px;
border:1px solid rgba(255,255,255,.15);
}

.server-online{
color:#00ffaa;
box-shadow:0 0 12px rgba(0,255,180,.3);
}

.ai-connected{
color:#00ccff;
box-shadow:0 0 12px rgba(0,200,255,.3);
}

.payment-off{
color:#aaa;
opacity:.6;
}


/* ===============================
ULTRA NETWORK TRAFFIC PANEL
ADD ONLY
=============================== */

.ultra-network-panel{
margin-top:30px;
border-radius:14px;
padding:20px;
background:#050505;
border:1px solid rgba(255,255,255,.1);
box-shadow:0 0 40px rgba(0,200,255,.1);
}

.network-title{
letter-spacing:2px;
font-size:14px;
margin-bottom:15px;
opacity:.8;
}

.network-screen{
height:120px;
display:flex;
align-items:center;
justify-content:center;
background:#000;
border-radius:10px;
}
/* =================================
ULTRA STATUS PREMIUM UPGRADE
ADD ONLY FINAL
================================ */

.payment-online{

color:#ffb300;

box-shadow:

0 0 10px rgba(255,170,0,.5),

0 0 25px rgba(255,140,0,.3);

text-shadow:

0 0 6px rgba(255,170,0,.8);

}


/* =================================
ULTRA NETWORK TRAFFIC GRAPH ENGINE
ADD ONLY FINAL
================================ */

.network-screen{

position:relative;

overflow:hidden;

background:#000;

}

/* animated graph bar */

.network-screen::before{

content:"";

position:absolute;

bottom:0;
left:0;

width:200%;
height:100%;

background:

linear-gradient(
to top,
rgba(0,255,200,.3),
transparent 60%
),

repeating-linear-gradient(
90deg,
rgba(0,255,255,.6) 0px,
rgba(0,255,255,.6) 3px,
transparent 3px,
transparent 40px
);

animation: ultraGraphMove 6s linear infinite;

opacity:.8;

}

/* glow overlay */

.network-screen::after{

content:"";

position:absolute;
inset:0;

background:

linear-gradient(
90deg,
transparent,
rgba(0,200,255,.25),
transparent
);

animation: ultraScanLight 4s linear infinite;

}

@keyframes ultraGraphMove{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}

}

@keyframes ultraScanLight{

0%{
transform:translateX(-100%);
}

100%{
transform:translateX(100%);
}

}
/* ===================================================
ULTRA FINAL INDEX MODE — SN DESIGN STUDIO
ADD ONLY | DO NOT REMOVE EXISTING STYLE
=================================================== */


/* ===== GLOBAL CINEMATIC GLOW ===== */

.index-page{

background:

radial-gradient(circle at 20% 30%, rgba(0,255,200,.06), transparent 50%),

radial-gradient(circle at 80% 70%, rgba(255,0,80,.05), transparent 50%);

}


/* ===== PREMIUM TEXT GLOW ===== */

h1,h2,.intro-title,.section-title{

text-shadow:

0 0 8px rgba(255,255,255,.25),

0 0 18px rgba(0,255,200,.15);

}


/* ===== STATUS PREMIUM COLORS ===== */

.server-online{

color:#00ffc3;

box-shadow:0 0 18px rgba(0,255,200,.4);

}

.payment-online{

color:#ffb300;

box-shadow:

0 0 18px rgba(255,160,0,.5);

}

.ai-connected{

color:#00c8ff;

box-shadow:

0 0 18px rgba(0,180,255,.4);

}


/* ===== NETWORK TRAFFIC ULTRA ENGINE ===== */

.network-screen{

position:relative;

background:#000;

overflow:hidden;

border-radius:20px;

}


/* neon graph animation */

.network-screen::before{

content:"";

position:absolute;

bottom:0;
left:0;

width:200%;
height:100%;

background:

linear-gradient(to top,
rgba(0,255,200,.35),
transparent 60%
),

repeating-linear-gradient(
90deg,
rgba(0,255,255,.7) 0px,
rgba(0,255,255,.7) 3px,
transparent 3px,
transparent 30px
);

animation: ultraGraphMove 5s linear infinite;

}


/* scanning light layer */

.network-screen::after{

content:"";

position:absolute;
inset:0;

background:

linear-gradient(
90deg,
transparent,
rgba(0,200,255,.3),
transparent
);

animation: ultraScanLight 3s linear infinite;

}

@keyframes ultraGraphMove{

0%{ transform:translateX(0); }
100%{ transform:translateX(-50%); }

}

@keyframes ultraScanLight{

0%{ transform:translateX(-100%); }
100%{ transform:translateX(100%); }

}


/* ===== HERO BREATHING EFFECT ===== */

.hero-master img{

animation: ultraHeroBreath 6s ease-in-out infinite;

}

@keyframes ultraHeroBreath{

0%{ transform:scale(1); }
50%{ transform:scale(1.015); }
100%{ transform:scale(1); }

}


/* ===== HUD PARTICLE OVERLAY ===== */

.ultra-dashboard::after{

content:"";

position:absolute;

inset:0;

pointer-events:none;

background-image:

radial-gradient(rgba(0,255,200,.15) 1px, transparent 1px);

background-size:40px 40px;

opacity:.15;

animation: ultraParticleMove 20s linear infinite;

}

@keyframes ultraParticleMove{

0%{ transform:translateY(0); }
100%{ transform:translateY(-40px); }

}


/* ===== BUTTON CYBER GLOW ===== */

.gui-btn{

box-shadow:

0 0 10px rgba(0,255,200,.5),

0 0 30px rgba(0,255,200,.3);

transition:.3s;

}

.gui-btn:hover{

transform:translateY(-2px);

box-shadow:

0 0 20px rgba(0,255,200,.7),

0 0 40px rgba(0,255,200,.5);

  }
/* ==================================================
ULTRA GOD MODE UI
SN DESIGN STUDIO
ADD ONLY FINAL LAYER
================================================== */


/* ===== PARALLAX DEPTH FIELD ===== */

.ultra-dashboard{

transform-style:preserve-3d;

animation: ultraFloat 10s ease-in-out infinite;

}

@keyframes ultraFloat{

0%{ transform:translateY(0px); }
50%{ transform:translateY(-6px); }
100%{ transform:translateY(0px); }

}


/* ===== HOLOGRAM GRID OVERLAY ===== */

.ultra-dashboard::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(rgba(0,255,255,.04) 1px, transparent 1px),

linear-gradient(90deg, rgba(0,255,255,.04) 1px, transparent 1px);

background-size:40px 40px;

pointer-events:none;

mix-blend-mode:screen;

animation:holoMove 12s linear infinite;

}

@keyframes holoMove{

0%{ transform:translateY(0); }
100%{ transform:translateY(-40px); }

}


/* ===== NEON PANEL FLOAT ===== */

.gui-container{

box-shadow:

0 0 20px rgba(0,255,200,.15),

0 0 60px rgba(255,40,80,.15),

0 0 120px rgba(0,120,255,.08);

animation:panelBreath 5s ease-in-out infinite;

}

@keyframes panelBreath{

0%{ filter:brightness(1); }
50%{ filter:brightness(1.08); }
100%{ filter:brightness(1); }

}


/* ===== AI RADAR SCAN ===== */

.gui-screen::after{

content:"";

position:absolute;

top:-50%;
left:-50%;

width:200%;
height:200%;

background:

radial-gradient(circle,
rgba(0,255,200,.25) 0%,
transparent 60%);

animation:radarSpin 8s linear infinite;

mix-blend-mode:screen;

pointer-events:none;

}

@keyframes radarSpin{

0%{ transform:rotate(0deg); }
100%{ transform:rotate(360deg); }

}


/* ===== ULTRA STATUS PULSE ===== */

.cta-box{

animation:statusPulse 3s ease-in-out infinite;

}

@keyframes statusPulse{

0%{ transform:scale(1); }
50%{ transform:scale(1.04); }
100%{ transform:scale(1); }

}


/* ===== CYBER NETWORK GRAPH ===== */

.network-screen{

background:

linear-gradient(
180deg,
rgba(0,0,0,.9),
rgba(0,20,30,.9)
);

border:1px solid rgba(0,255,200,.2);

box-shadow:

inset 0 0 40px rgba(0,255,200,.15),

0 0 40px rgba(0,255,200,.15);

}


/* graph lines */

.network-screen::before{

content:"";

position:absolute;

bottom:0;
left:0;

width:200%;
height:100%;

background:

linear-gradient(to top,
rgba(0,255,200,.45),
transparent 60%),

repeating-linear-gradient(
90deg,
rgba(0,255,255,.7) 0px,
rgba(0,255,255,.7) 3px,
transparent 3px,
transparent 28px
);

animation:networkMove 3s linear infinite;

}

@keyframes networkMove{

0%{ transform:translateX(0); }
100%{ transform:translateX(-50%); }

}


/* ===== HERO CYBER LIGHT SWEEP ===== */

.hero-master::after{

content:"";

position:absolute;

top:0;
left:-40%;

width:180%;
height:100%;

background:

linear-gradient(
120deg,
transparent,
rgba(0,200,255,.08),
transparent
);

animation:lightSweep 6s linear infinite;

pointer-events:none;

}

@keyframes lightSweep{

0%{ transform:translateX(-20%); }
100%{ transform:translateX(20%); }

}
/* ==================================================
ULTRA LEGEND MODE UI
FINAL ADD ONLY — SN DESIGN STUDIO
================================================== */


/* ===============================
LEGEND GLASS HUD SYSTEM
=============================== */

.ultra-dashboard{

backdrop-filter:blur(8px);

background:

linear-gradient(
135deg,
rgba(0,20,40,.35),
rgba(0,0,0,.65)
);

border:1px solid rgba(0,255,255,.15);

box-shadow:

0 0 60px rgba(0,255,255,.08),
inset 0 0 40px rgba(255,40,80,.05);

}


/* ===============================
NEURAL ENERGY PULSE
=============================== */

.gui-container{

animation:neuralPulse 6s ease-in-out infinite;

}

@keyframes neuralPulse{

0%{ transform:scale(1); filter:brightness(1); }
50%{ transform:scale(1.01); filter:brightness(1.08); }
100%{ transform:scale(1); filter:brightness(1); }

}


/* ===============================
LIVE DATA FLOW LINES
=============================== */

.ultra-dashboard::after{

content:"";

position:absolute;

top:0;
left:-50%;

width:200%;
height:100%;

background:

linear-gradient(
120deg,
transparent,
rgba(0,255,200,.12),
transparent
);

animation:dataFlow 5s linear infinite;

pointer-events:none;

}

@keyframes dataFlow{

0%{ transform:translateX(-20%); }
100%{ transform:translateX(20%); }

}


/* ===============================
ULTRA LEGEND STATUS GLOW
=============================== */

.cta-box{

position:relative;

box-shadow:

0 0 12px rgba(0,255,200,.3),
0 0 30px rgba(0,200,255,.2);

}

.server-online{

background:linear-gradient(
135deg,
rgba(0,255,100,.15),
rgba(0,120,60,.15)
);

}

.payment-off{

background:linear-gradient(
135deg,
rgba(255,150,0,.15),
rgba(120,80,0,.15)
);

}

.ai-connected{

background:linear-gradient(
135deg,
rgba(0,200,255,.15),
rgba(0,80,120,.15)
);

}


/* ===============================
AI RADAR SCAN ENHANCED
=============================== */

.gui-screen::before{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(circle at center,
rgba(0,255,255,.08),
transparent 60%);

animation:aiRadarPulse 4s ease-in-out infinite;

pointer-events:none;

}

@keyframes aiRadarPulse{

0%{ opacity:.2; transform:scale(.9); }
50%{ opacity:.5; transform:scale(1.05); }
100%{ opacity:.2; transform:scale(.9); }

}


/* ===============================
ULTRA LEGEND NETWORK GRAPH
=============================== */

.network-screen{

position:relative;

overflow:hidden;

background:

linear-gradient(
180deg,
rgba(0,10,20,.9),
rgba(0,0,0,.95)
);

}

.network-screen::after{

content:"";

position:absolute;

bottom:0;
left:0;

width:200%;
height:100%;

background:

linear-gradient(to top,
rgba(0,255,255,.4),
transparent 70%),

repeating-linear-gradient(
90deg,
rgba(0,255,255,.8) 0px,
rgba(0,255,255,.8) 2px,
transparent 2px,
transparent 20px
);

animation:legendTraffic 2.2s linear infinite;

}

@keyframes legendTraffic{

0%{ transform:translateX(0); }
100%{ transform:translateX(-50%); }

}


/* ===============================
CINEMATIC DEPTH LAYER
=============================== */

.hero-master{

box-shadow:

inset 0 0 120px rgba(0,0,0,.7),
inset 0 0 60px rgba(0,200,255,.1);

}
/* =====================================
ULTRA LEGEND MODE FINAL
ADD ONLY
===================================== */


/* LEGEND CTA STATUS */

.ultra-cta-status{

display:flex;
gap:14px;
justify-content:center;
margin-top:30px;

}

.cta-box{

padding:14px 22px;
border-radius:12px;

backdrop-filter:blur(10px);

border:1px solid rgba(255,255,255,.15);

box-shadow:
0 0 20px rgba(0,255,255,.12);

font-size:13px;
letter-spacing:1px;

}

.server-online{

background:rgba(0,255,120,.08);
box-shadow:0 0 18px rgba(0,255,120,.35);

}

.payment-off{

background:rgba(255,140,0,.08);
box-shadow:0 0 18px rgba(255,140,0,.35);

}

.ai-connected{

background:rgba(0,200,255,.08);
box-shadow:0 0 18px rgba(0,200,255,.35);

}


/* LEGEND NETWORK GRAPH */

.network-screen{

position:relative;
height:120px;
border-radius:12px;
overflow:hidden;

background:

linear-gradient(180deg,
rgba(0,0,0,.9),
rgba(0,20,40,.9)
);

}

.network-screen::after{

content:"";

position:absolute;
bottom:0;

width:200%;
height:100%;

background:

repeating-linear-gradient(
90deg,
rgba(0,255,255,.8) 0px,
rgba(0,255,255,.8) 2px,
transparent 2px,
transparent 16px
);

animation:legendGraph 1.8s linear infinite;

}

@keyframes legendGraph{

0%{ transform:translateX(0); }
100%{ transform:translateX(-50%); }

}