/* senggack.com - Botanical HUD Design System */
/* Colors: #1a1a2e (deep base), #4a90d9 (primary blue), #f5f0e8 (warm off-white), #e8b84b (accent gold), #6c757d (muted gray) */
/* Font: Inter (variable) */

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

:root{
--color-base:#1a1a2e;
--color-primary:#4a90d9;
--color-offwhite:#f5f0e8;
--color-gold:#e8b84b;
--color-gray:#6c757d;
}

html{scroll-behavior:smooth}

body{
font-family:'Inter',sans-serif;
background:var(--color-base);
color:var(--color-offwhite);
overflow-x:hidden;
line-height:1.6;
}

/* ===== BOUNCE-IN ANIMATION ===== */
@keyframes bounceIn{
0%{opacity:0;transform:translateY(40px) scale(0.95)}
60%{opacity:1;transform:translateY(-8px) scale(1.02)}
80%{transform:translateY(3px) scale(0.99)}
100%{opacity:1;transform:translateY(0) scale(1)}
}

.bounce-in{
opacity:0;
transform:translateY(40px);
}

.bounce-in.visible{
animation:bounceIn 0.7s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

/* ===== HERO SECTION ===== */
.section-hero{
position:relative;
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
overflow:hidden;
}

.botanical-bg{
position:absolute;
inset:0;
z-index:0;
}

.botanical-svg{
width:100%;
height:100%;
object-fit:cover;
}

.hud-grid{
position:relative;
z-index:1;
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:auto auto;
gap:20px;
max-width:900px;
width:90%;
padding:40px 0;
}

.hud-panel{
position:relative;
border:1px solid rgba(74,144,217,0.3);
background:rgba(26,26,46,0.85);
padding:24px 28px;
backdrop-filter:blur(8px);
}

.hud-panel--identity{
grid-column:1/-1;
text-align:center;
border-color:rgba(232,184,75,0.4);
}

.hud-panel--status{grid-column:1/2}
.hud-panel--coords{grid-column:2/3}

/* HUD Panel Corners */
.hud-panel__corner{
position:absolute;
width:12px;
height:12px;
}
.hud-panel__corner--tl{top:-1px;left:-1px;border-top:2px solid var(--color-gold);border-left:2px solid var(--color-gold)}
.hud-panel__corner--tr{top:-1px;right:-1px;border-top:2px solid var(--color-gold);border-right:2px solid var(--color-gold)}
.hud-panel__corner--bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--color-gold);border-left:2px solid var(--color-gold)}
.hud-panel__corner--br{bottom:-1px;right:-1px;border-bottom:2px solid var(--color-gold);border-right:2px solid var(--color-gold)}

.hud-panel__label{
font-size:10px;
font-weight:600;
letter-spacing:3px;
color:var(--color-gold);
text-transform:uppercase;
margin-bottom:12px;
}

.hero-title{
font-size:clamp(3rem,8vw,6rem);
font-weight:900;
letter-spacing:-2px;
color:var(--color-offwhite);
line-height:1;
margin-bottom:8px;
}

.hero-subtitle{
font-size:1.1rem;
font-weight:300;
color:var(--color-gray);
letter-spacing:2px;
}

/* Status Panel */
.status-row{
display:flex;
align-items:center;
justify-content:space-between;
padding:6px 0;
border-bottom:1px solid rgba(74,144,217,0.1);
}
.status-row:last-child{border-bottom:none}

.status-indicator{
width:8px;
height:8px;
border-radius:50%;
background:var(--color-gray);
}
.status-indicator--active{
background:#4caf50;
box-shadow:0 0 8px rgba(76,175,80,0.6);
animation:pulse 2s infinite;
}

@keyframes pulse{
0%,100%{opacity:1}
50%{opacity:0.5}
}

.status-text{
font-size:0.85rem;
font-weight:500;
color:var(--color-primary);
}

.status-label{
font-size:0.75rem;
font-weight:400;
color:var(--color-gray);
letter-spacing:1px;
text-transform:uppercase;
}

.status-value{
font-size:0.9rem;
font-weight:700;
color:var(--color-gold);
font-variant-numeric:tabular-nums;
}

/* Coords Panel */
.coords-display{
display:flex;
align-items:center;
gap:12px;
margin-bottom:12px;
}

.coords-lat,.coords-lon{
font-size:0.85rem;
font-weight:600;
color:var(--color-primary);
letter-spacing:1px;
}

.coords-sep{
color:var(--color-gray);
opacity:0.4;
}

.coords-bar{
height:3px;
background:rgba(74,144,217,0.15);
border-radius:2px;
overflow:hidden;
}

.coords-bar__fill{
height:100%;
width:0%;
background:linear-gradient(90deg,var(--color-primary),var(--color-gold));
border-radius:2px;
transition:width 2s ease;
}

/* Scroll Indicator */
.hero-scroll-indicator{
position:absolute;
bottom:30px;
left:50%;
transform:translateX(-50%);
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
z-index:1;
}

.scroll-line{
width:1px;
height:40px;
background:linear-gradient(to bottom,transparent,var(--color-gold));
animation:scrollPulse 2s infinite;
}

@keyframes scrollPulse{
0%,100%{opacity:0.3;transform:scaleY(0.7)}
50%{opacity:1;transform:scaleY(1)}
}

.scroll-text{
font-size:9px;
font-weight:600;
letter-spacing:3px;
color:var(--color-gray);
}

/* ===== ANGLE CUTS ===== */
.angle-cut{
position:relative;
height:80px;
overflow:hidden;
}

.angle-cut--top{
clip-path:polygon(0 0,100% 60px,100% 100%,0 100%);
background:var(--color-base);
}

.angle-cut--bottom{
clip-path:polygon(0 0,100% 0,100% 100%,0 20px);
background:var(--color-base);
}

/* ===== DATA SECTION ===== */
.section-data{
position:relative;
background:#12121f;
padding:0;
}

.data-content{
padding:60px 5% 60px;
max-width:1200px;
margin:0 auto;
}

.section-header{
text-align:center;
margin-bottom:50px;
}

.section-tag{
display:inline-block;
font-size:10px;
font-weight:700;
letter-spacing:4px;
color:var(--color-gold);
text-transform:uppercase;
margin-bottom:12px;
padding:4px 12px;
border:1px solid rgba(232,184,75,0.3);
}

.section-title{
font-size:clamp(2rem,5vw,3.2rem);
font-weight:700;
color:var(--color-offwhite);
margin-top:16px;
margin-bottom:12px;
letter-spacing:-1px;
}

.section-desc{
font-size:1rem;
font-weight:300;
color:var(--color-gray);
max-width:600px;
margin:0 auto;
line-height:1.7;
}

.data-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}

.data-card{
background:rgba(26,26,46,0.7);
border:1px solid rgba(74,144,217,0.15);
padding:24px;
transition:border-color 0.3s ease,transform 0.3s ease;
}

.data-card:hover{
border-color:rgba(232,184,75,0.4);
transform:translateY(-4px);
}

.data-card__header{
display:flex;
align-items:center;
gap:12px;
margin-bottom:16px;
}

.data-card__icon{
width:40px;
height:40px;
flex-shrink:0;
}

.data-card__tag{
font-size:9px;
font-weight:700;
letter-spacing:2px;
color:var(--color-gray);
text-transform:uppercase;
}

.data-card__title{
font-size:1rem;
font-weight:600;
color:var(--color-offwhite);
margin-bottom:12px;
}

.data-card__value{
display:flex;
align-items:baseline;
gap:6px;
margin-bottom:12px;
}

.data-card__number{
font-size:2.2rem;
font-weight:800;
color:var(--color-gold);
line-height:1;
font-variant-numeric:tabular-nums;
}

.data-card__unit{
font-size:0.75rem;
font-weight:400;
color:var(--color-gray);
letter-spacing:1px;
}

.data-card__bar{
height:3px;
background:rgba(245,240,232,0.08);
border-radius:2px;
overflow:hidden;
margin-bottom:10px;
}

.data-card__bar-fill{
height:100%;
width:var(--bar-width,0%);
background:linear-gradient(90deg,var(--color-primary),var(--color-gold));
border-radius:2px;
transition:width 1.5s ease;
}

.data-card__note{
font-size:0.75rem;
font-weight:400;
color:var(--color-gray);
}

/* ===== SPECIMENS SECTION ===== */
.section-specimens{
padding:80px 5%;
max-width:1200px;
margin:0 auto;
}

.specimen-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:24px;
}

.specimen-card{
background:rgba(26,26,46,0.6);
border:1px solid rgba(74,144,217,0.12);
overflow:hidden;
transition:border-color 0.3s ease,transform 0.3s ease;
}

.specimen-card:hover{
border-color:rgba(232,184,75,0.35);
transform:translateY(-4px);
}

.specimen-card__image{
position:relative;
aspect-ratio:4/3;
overflow:hidden;
}

.specimen-svg{
width:100%;
height:100%;
display:block;
filter:sepia(0.3) hue-rotate(180deg) saturate(0.8);
}

.specimen-card__overlay{
position:absolute;
top:12px;
right:12px;
padding:4px 10px;
background:rgba(26,26,46,0.8);
border:1px solid rgba(232,184,75,0.3);
}

.specimen-card__id{
font-size:10px;
font-weight:700;
letter-spacing:2px;
color:var(--color-gold);
}

.specimen-card__info{
padding:20px;
}

.specimen-card__name{
font-size:1.1rem;
font-weight:700;
color:var(--color-offwhite);
margin-bottom:8px;
}

.specimen-card__status{
display:inline-block;
font-size:0.7rem;
font-weight:600;
letter-spacing:1.5px;
text-transform:uppercase;
padding:3px 10px;
margin-bottom:14px;
}

.specimen-card__status--active{
color:#4caf50;
background:rgba(76,175,80,0.1);
border:1px solid rgba(76,175,80,0.3);
}

.specimen-card__status--warning{
color:var(--color-gold);
background:rgba(232,184,75,0.1);
border:1px solid rgba(232,184,75,0.3);
}

.specimen-card__metrics{
display:flex;
gap:20px;
}

.specimen-metric{
display:flex;
flex-direction:column;
gap:2px;
}

.specimen-metric__label{
font-size:0.65rem;
font-weight:500;
color:var(--color-gray);
letter-spacing:1px;
text-transform:uppercase;
}

.specimen-metric__value{
font-size:1rem;
font-weight:700;
color:var(--color-primary);
font-variant-numeric:tabular-nums;
}

/* ===== NETWORK SECTION ===== */
.section-network{
position:relative;
background:#12121f;
}

.network-content{
padding:60px 5%;
max-width:1200px;
margin:0 auto;
}

.network-canvas-wrap{
position:relative;
border:1px solid rgba(74,144,217,0.15);
background:rgba(26,26,46,0.5);
overflow:hidden;
}

#networkCanvas{
width:100%;
height:400px;
display:block;
}

.network-stats{
display:flex;
justify-content:center;
gap:40px;
padding:20px;
border-top:1px solid rgba(74,144,217,0.1);
}

.network-stat{
text-align:center;
}

.network-stat__value{
display:block;
font-size:1.8rem;
font-weight:800;
color:var(--color-gold);
line-height:1;
margin-bottom:4px;
}

.network-stat__label{
font-size:0.7rem;
font-weight:500;
color:var(--color-gray);
letter-spacing:1.5px;
text-transform:uppercase;
}

/* ===== FOOTER ===== */
.site-footer{
padding:40px 5%;
border-top:1px solid rgba(74,144,217,0.1);
}

.footer-hud{
max-width:900px;
margin:0 auto;
}

.hud-panel--footer{
text-align:center;
}

.footer-brand{
margin-bottom:20px;
}

.footer-brand__name{
display:block;
font-size:1.4rem;
font-weight:800;
color:var(--color-offwhite);
letter-spacing:-0.5px;
margin-bottom:4px;
}

.footer-brand__tagline{
font-size:0.75rem;
font-weight:400;
color:var(--color-gray);
letter-spacing:2px;
text-transform:uppercase;
}

.footer-links{
display:flex;
justify-content:center;
gap:24px;
margin-bottom:20px;
}

.footer-link{
font-size:0.8rem;
font-weight:500;
color:var(--color-primary);
text-decoration:none;
letter-spacing:1px;
transition:color 0.3s ease;
}

.footer-link:hover{
color:var(--color-gold);
}

.footer-meta{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
}

.footer-meta__item{
font-size:0.7rem;
font-weight:500;
color:var(--color-gray);
letter-spacing:2px;
font-variant-numeric:tabular-nums;
}

.footer-meta__sep{
color:rgba(108,117,125,0.3);
font-size:0.7rem;
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
.hud-grid{
grid-template-columns:1fr;
gap:16px;
}
.hud-panel--status,.hud-panel--coords{grid-column:1/-1}
.data-grid{grid-template-columns:1fr}
.specimen-grid{grid-template-columns:1fr}
.network-stats{gap:20px}
.footer-links{flex-wrap:wrap;gap:16px}
}