/* senggack.org - Energetic Grainy Warmth with HUD Precision */
/* Colors: #1a1a2e (deep base), #4a90d9 (primary blue), #f5f0e8 (warm off-white), #e8b84b (accent gold), #6c757d (muted gray) */
/* Fonts: Space Grotesk, Inter */

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

:root{
--deep-base:#1a1a2e;
--primary-blue:#4a90d9;
--warm-white:#f5f0e8;
--accent-gold:#e8b84b;
--muted-gray:#6c757d;
--font-display:'Space Grotesk',sans-serif;
--font-body:'Inter',sans-serif;
}

html{scroll-behavior:smooth;font-size:16px}
body{background:var(--deep-base);color:var(--warm-white);font-family:var(--font-body);overflow-x:hidden;line-height:1.6}

/* Grain Overlay */
.grain-svg{position:absolute;width:0;height:0}
.grain-overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000;opacity:0.25;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");background-repeat:repeat;background-size:256px 256px}

/* Floating Elements */
.floating-elements{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}
.floating-orb{position:absolute;border-radius:50%;opacity:0.15}
.floating-orb-1{width:300px;height:300px;background:radial-gradient(circle,var(--accent-gold),transparent 70%);top:10%;left:-5%;animation:floatUp 8s ease-in-out infinite}
.floating-orb-2{width:200px;height:200px;background:radial-gradient(circle,var(--primary-blue),transparent 70%);top:30%;right:5%;animation:floatUp 10s ease-in-out infinite 1s}
.floating-orb-3{width:250px;height:250px;background:radial-gradient(circle,var(--accent-gold),transparent 70%);bottom:20%;left:20%;animation:floatUp 9s ease-in-out infinite 2s}
.floating-orb-4{width:180px;height:180px;background:radial-gradient(circle,var(--primary-blue),transparent 70%);top:60%;right:15%;animation:floatUp 7s ease-in-out infinite 0.5s}
.floating-orb-5{width:150px;height:150px;background:radial-gradient(circle,var(--accent-gold),transparent 70%);bottom:5%;right:30%;animation:floatUp 11s ease-in-out infinite 3s}

@keyframes floatUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-30px)}}

/* Morph Shapes */
.morph-shape{position:absolute;opacity:0.08}
.morph-shape-1{width:200px;height:200px;background:var(--accent-gold);top:15%;right:20%;animation:morphShape 12s ease-in-out infinite;border-radius:30% 70% 70% 30%/30% 30% 70% 70%}
.morph-shape-2{width:160px;height:160px;background:var(--primary-blue);bottom:25%;left:10%;animation:morphShape 15s ease-in-out infinite 2s;border-radius:70% 30% 30% 70%/70% 70% 30% 30%}
.morph-shape-3{width:120px;height:120px;background:var(--accent-gold);top:50%;left:50%;animation:morphShape 10s ease-in-out infinite 4s;border-radius:50% 50% 30% 70%/60% 40% 60% 40%}

@keyframes morphShape{0%{border-radius:30% 70% 70% 30%/30% 30% 70% 70%}25%{border-radius:58% 42% 56% 44%/64% 28% 72% 36%}50%{border-radius:70% 30% 30% 70%/70% 70% 30% 30%}75%{border-radius:42% 58% 44% 56%/36% 72% 28% 64%}100%{border-radius:30% 70% 70% 30%/30% 30% 70% 70%}}

/* HUD Navigation */
.hud-nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1rem 2rem;background:rgba(26,26,46,0.85);backdrop-filter:blur(10px);border-bottom:1px solid rgba(232,184,75,0.15)}
.hud-nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:1400px;margin:0 auto}
.hud-logo{display:flex;align-items:center;gap:12px}
.logo-text{font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--warm-white);letter-spacing:0.5px}
.hud-nav-links{display:flex;gap:2rem}
.hud-link{color:var(--muted-gray);text-decoration:none;font-family:var(--font-body);font-size:0.9rem;font-weight:500;letter-spacing:0.5px;text-transform:uppercase;transition:color 0.3s ease;position:relative}
.hud-link:hover{color:var(--accent-gold)}
.hud-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--accent-gold);transition:width 0.3s ease}
.hud-link:hover::after{width:100%}
.hud-status{display:flex;align-items:center;gap:8px}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-gold);animation:pulse 2s infinite}
.status-text{font-family:var(--font-body);font-size:0.8rem;color:var(--muted-gray);text-transform:uppercase;letter-spacing:1px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}

/* Hero Section */
.hero-section{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;padding:6rem 2rem 2rem;overflow:hidden;background:linear-gradient(180deg,var(--deep-base) 0%,rgba(26,26,46,0.95) 50%,rgba(74,144,217,0.08) 100%)}
.hero-content{display:flex;align-items:center;justify-content:center;gap:4rem;max-width:1200px;width:100%;position:relative;z-index:2}
.hero-hud-frame{position:relative;padding:3rem;flex:1}
.hud-corner{position:absolute;width:24px;height:24px}
.hud-corner-tl{top:0;left:0;border-top:2px solid var(--accent-gold);border-left:2px solid var(--accent-gold)}
.hud-corner-tr{top:0;right:0;border-top:2px solid var(--accent-gold);border-right:2px solid var(--accent-gold)}
.hud-corner-bl{bottom:0;left:0;border-bottom:2px solid var(--accent-gold);border-left:2px solid var(--accent-gold)}
.hud-corner-br{bottom:0;right:0;border-bottom:2px solid var(--accent-gold);border-right:2px solid var(--accent-gold)}
.hero-inner{max-width:560px}
.hero-tag{font-family:var(--font-body);font-size:0.85rem;color:var(--accent-gold);margin-bottom:1.5rem;letter-spacing:2px;text-transform:uppercase}
.tag-bracket{color:var(--primary-blue)}
.hero-title{font-family:var(--font-display);font-weight:700;line-height:1.1;margin-bottom:1.5rem}
.title-line{display:block}
.title-line-1{font-size:3.5rem;color:var(--warm-white)}
.title-line-2{font-size:3.5rem;color:var(--accent-gold)}
.title-line-3{font-size:3.5rem;color:var(--warm-white)}
.title-line-3 em{color:var(--primary-blue);font-style:normal}
.hero-description{font-size:1.1rem;color:var(--muted-gray);line-height:1.7;margin-bottom:2rem;max-width:480px}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}

/* Buttons */
.btn-primary{display:inline-block;padding:14px 32px;background:var(--accent-gold);color:var(--deep-base);font-family:var(--font-display);font-weight:600;font-size:0.95rem;text-decoration:none;border-radius:4px;border:none;cursor:pointer;transition:all 0.3s ease;letter-spacing:0.5px}
.btn-primary:hover{background:var(--warm-white);transform:translateY(-2px);box-shadow:0 8px 24px rgba(232,184,75,0.3)}
.btn-secondary{display:inline-block;padding:14px 32px;background:transparent;color:var(--warm-white);font-family:var(--font-display);font-weight:600;font-size:0.95rem;text-decoration:none;border-radius:4px;border:1px solid rgba(245,240,232,0.3);cursor:pointer;transition:all 0.3s ease;letter-spacing:0.5px}
.btn-secondary:hover{border-color:var(--accent-gold);color:var(--accent-gold);transform:translateY(-2px)}

/* Hero Illustration */
.hero-illustration{flex:0 0 400px;max-width:400px}
.hero-svg{width:100%;height:auto}
.svg-sun{animation:sunPulse 4s ease-in-out infinite}
@keyframes sunPulse{0%,100%{opacity:0.8;r:60}50%{opacity:0.6;r:64}}
.node{animation:nodePulse 3s ease-in-out infinite}
.node-1{animation-delay:0s}
.node-2{animation-delay:0.5s}
.node-3{animation-delay:1s}
.node-4{animation-delay:1.5s}
@keyframes nodePulse{0%,100%{opacity:0.7}50%{opacity:0.3}}

/* Scroll Indicator */
.scroll-indicator{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:2}
.scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,var(--accent-gold),transparent);animation:scrollPulse 2s ease-in-out infinite}
.scroll-text{font-family:var(--font-body);font-size:0.7rem;color:var(--muted-gray);text-transform:uppercase;letter-spacing:3px}
@keyframes scrollPulse{0%,100%{opacity:1;height:40px}50%{opacity:0.3;height:20px}}

/* Section Common */
.section-container{max-width:1200px;margin:0 auto;padding:0 2rem}
.section-title{font-family:var(--font-display);font-size:2.8rem;font-weight:700;line-height:1.2;margin-bottom:1.5rem}
.highlight{color:var(--accent-gold)}

/* HUD Panel */
.hud-panel{background:rgba(26,26,46,0.6);border:1px solid rgba(232,184,75,0.12);border-radius:8px;backdrop-filter:blur(8px);transition:border-color 0.3s ease,transform 0.3s ease}
.hud-panel:hover{border-color:rgba(232,184,75,0.3)}
.panel-header{display:flex;align-items:center;gap:12px;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid rgba(232,184,75,0.1)}
.panel-id{font-family:var(--font-display);font-size:0.85rem;color:var(--accent-gold);font-weight:700}
.panel-divider{width:20px;height:1px;background:var(--muted-gray)}
.panel-label{font-family:var(--font-body);font-size:0.8rem;color:var(--muted-gray);text-transform:uppercase;letter-spacing:2px}

/* About Section */
.about-section{padding:8rem 0;position:relative;z-index:2;background:linear-gradient(180deg,transparent,rgba(74,144,217,0.04),transparent)}
.about-panel{padding:3rem}
.about-content{display:grid;grid-template-columns:1.5fr 1fr;gap:3rem;align-items:start}
.about-paragraph{color:var(--muted-gray);font-size:1rem;line-height:1.8;margin-bottom:1rem}
.about-stats{display:flex;flex-direction:column;gap:1.5rem}
.stat-card{background:rgba(232,184,75,0.05);border:1px solid rgba(232,184,75,0.1);border-radius:8px;padding:1.5rem;text-align:center;transition:transform 0.3s ease,border-color 0.3s ease}
.stat-card:hover{transform:translateY(-4px);border-color:rgba(232,184,75,0.3)}
.stat-value{font-family:var(--font-display);font-size:2.5rem;font-weight:700;color:var(--accent-gold);line-height:1}
.stat-label{font-family:var(--font-body);font-size:0.8rem;color:var(--muted-gray);text-transform:uppercase;letter-spacing:2px;margin-top:0.5rem}

/* Features Section */
.features-section{padding:8rem 0;position:relative;z-index:2}
.features-header{margin-bottom:3rem}
.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.feature-card{padding:2.5rem;transition:transform 0.3s ease,border-color 0.3s ease}
.feature-card:hover{transform:translateY(-6px);border-color:rgba(232,184,75,0.35)}
.feature-icon{margin-bottom:1.5rem}
.feature-title{font-family:var(--font-display);font-size:1.3rem;font-weight:600;color:var(--warm-white);margin-bottom:0.75rem}
.feature-desc{color:var(--muted-gray);font-size:0.95rem;line-height:1.7}

/* Community Section */
.community-section{padding:8rem 0;position:relative;z-index:2;background:linear-gradient(180deg,transparent,rgba(232,184,75,0.04),transparent)}
.community-panel{padding:3rem;text-align:center}
.community-description{color:var(--muted-gray);font-size:1.1rem;line-height:1.7;max-width:600px;margin:0 auto 3rem}
.community-illustration{margin:2rem auto;max-width:600px}
.community-svg{width:100%;height:auto}
.comm-node{animation:nodePulse 3s ease-in-out infinite}
.comm-node:nth-child(2n){animation-delay:0.5s}
.comm-node:nth-child(3n){animation-delay:1s}
.community-cta{max-width:500px;margin:2rem auto 0}
.cta-input-group{display:flex;gap:0;border-radius:4px;overflow:hidden;border:1px solid rgba(232,184,75,0.2)}
.cta-input{flex:1;padding:14px 20px;background:rgba(26,26,46,0.8);border:none;color:var(--warm-white);font-family:var(--font-body);font-size:0.95rem;outline:none}
.cta-input::placeholder{color:var(--muted-gray)}
.cta-btn{border-radius:0;padding:14px 24px}
.cta-note{font-size:0.8rem;color:var(--muted-gray);margin-top:1rem}

/* Contact Section */
.contact-section{padding:8rem 0;position:relative;z-index:2}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.contact-info-panel,.contact-form-panel{padding:2.5rem}
.contact-text{color:var(--muted-gray);font-size:1rem;line-height:1.7;margin-bottom:2rem}
.contact-details{display:flex;flex-direction:column;gap:1rem}
.contact-item{display:flex;align-items:center;gap:12px}
.contact-icon{display:flex;align-items:center}
.contact-value{color:var(--warm-white);font-size:0.95rem}
.contact-form{display:flex;flex-direction:column;gap:1.5rem}
.form-group{display:flex;flex-direction:column;gap:0.5rem}
.form-label{font-family:var(--font-body);font-size:0.8rem;color:var(--muted-gray);text-transform:uppercase;letter-spacing:1px}
.form-input{padding:12px 16px;background:rgba(245,240,232,0.05);border:1px solid rgba(232,184,75,0.15);border-radius:4px;color:var(--warm-white);font-family:var(--font-body);font-size:0.95rem;outline:none;transition:border-color 0.3s ease}
.form-input:focus{border-color:var(--accent-gold)}
.form-input::placeholder{color:var(--muted-gray)}
.form-textarea{resize:vertical;min-height:120px}
.form-submit{align-self:flex-start}

/* Footer */
.site-footer{padding:3rem 2rem;border-top:1px solid rgba(232,184,75,0.1);position:relative;z-index:2}
.footer-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem}
.footer-brand{display:flex;align-items:center;gap:10px}
.footer-name{font-family:var(--font-display);font-size:1rem;color:var(--muted-gray)}
.footer-links{display:flex;gap:1.5rem}
.footer-link{color:var(--muted-gray);text-decoration:none;font-size:0.85rem;transition:color 0.3s ease}
.footer-link:hover{color:var(--accent-gold)}
.footer-copy{display:flex;gap:1rem;align-items:center}
.footer-year,.footer-tagline{font-size:0.8rem;color:var(--muted-gray)}

/* Reveal Animation */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 0.8s ease,transform 0.8s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* Responsive */
@media(max-width:968px){
.hero-content{flex-direction:column;text-align:center}
.hero-inner{display:flex;flex-direction:column;align-items:center}
.hero-illustration{flex:0 0 300px;max-width:300px}
.hero-description{max-width:100%}
.hero-actions{justify-content:center}
.title-line-1,.title-line-2,.title-line-3{font-size:2.8rem}
.about-content{grid-template-columns:1fr}
.about-stats{flex-direction:row}
.features-grid{grid-template-columns:1fr}
.contact-grid{grid-template-columns:1fr}
.hud-nav-links{display:none}
.section-title{font-size:2.2rem}
}

@media(max-width:600px){
.title-line-1,.title-line-2,.title-line-3{font-size:2rem}
.section-title{font-size:1.8rem}
.hero-hud-frame{padding:1.5rem}
.about-panel,.community-panel,.contact-info-panel,.contact-form-panel{padding:1.5rem}
.about-stats{flex-direction:column}
.footer-inner{flex-direction:column;text-align:center}
.cta-input-group{flex-direction:column}
.cta-btn{border-radius:0 0 4px 4px}
}