:root {
    --bg-main: #070707;
    --bg-alt: #0a0a0a;
    --bg-card: #111111;
    --accent-red: #EB442C;
    --accent-dim: rgba(235, 68, 44, 0.1);
    --accent-glow: rgba(235, 68, 44, 0.4);
    --text-primary: #FFFFFF;
    --text-muted: #888888;
    --border-color: #222222;
    --font-heading: 'Chakra Petch', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

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

html { scroll-behavior: smooth; background: var(--bg-main); color: var(--text-primary); }

body { font-family: var(--font-body); overflow-x: hidden; line-height: 1.6; }

.text-red { color: var(--accent-red); }
.text-center { text-align: center; }

h1, h2, h3, h4, .logo, .btn-primary { font-family: var(--font-heading); text-transform: uppercase; }

.outline-text { -webkit-text-stroke: 1.5px var(--text-muted); color: transparent; transition: all 0.3s ease; }
.outline-text:hover { -webkit-text-stroke: 1.5px var(--text-primary); }

.container { max-width: 1280px; margin: 0 auto; padding: 0 40px; }

/* Background Noise */
.noise-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -10; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); }

/* Buttons */
.btn-primary { display: inline-block; background: var(--accent-red); color: #fff; padding: 16px 32px; font-size: 1.1rem; font-weight: 600; text-decoration: none; clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px); transition: all 0.3s ease; border: none; cursor: pointer; position: relative; text-align: center; }
.btn-primary::before { content: ''; position: absolute; top:0; left:0; width:100%; height:100%; background: #FF5A42; z-index: -1; transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; }
.btn-primary:hover::before { transform: scaleX(1); }
.btn-primary.lg { padding: 18px 40px; font-size: 1.2rem; }
.btn-primary.huge { padding: 25px 60px; font-size: 1.5rem; }

/* Navbar */
.navbar { position: fixed; top: 0; width: 100%; padding: 25px 50px; z-index: 1000; display: flex; justify-content: space-between; align-items: center; background: rgba(7, 7, 7, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-color); }
.logo { font-size: 1.8rem; font-weight: 700; letter-spacing: 2px; }
.navbar nav { display: flex; gap: 40px; align-items: center; }
.navbar nav a { color: var(--text-primary); text-decoration: none; font-family: var(--font-mono); font-size: 0.9rem; font-weight: 700; transition: color 0.3s; }
.navbar nav a:hover { color: var(--accent-red); }
.navbar nav .start-btn { font-family: var(--font-heading); font-size: 1rem; padding: 10px 24px; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.mobile-menu { display: none; background: none; border: none; color: #fff; font-size: 1.8rem; }
.lang-switcher { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.9rem; margin-left: 20px; border-left: 1px solid var(--border-color); padding-left: 30px; }
.lang-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-family: var(--font-mono); font-weight: bold; transition: color 0.3s; padding: 5px; }
.lang-btn.active { color: var(--accent-red); }
.lang-btn:hover { color: #fff; }
.lang-switcher .separator { color: var(--border-color); }

/* Hero */
.hero { min-height: 100vh; padding-top: 15vh; display: flex; align-items: center; position: relative; }
.hero::after { content: ''; position: absolute; right: 0; top: 20%; width: 40vw; height: 60vh; background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%); filter: blur(100px); z-index: -1; pointer-events: none; }
.hero-title { font-size: 8rem; line-height: 0.9; margin-bottom: 40px; letter-spacing: -2px; }
.hero-sub { max-width: 600px; }
.hero-sub p { font-size: 1.25rem; color: var(--text-muted); margin-bottom: 40px; }
.hero-buttons { display: flex; align-items: center; gap: 30px; }
.terminal-stats { font-family: var(--font-mono); font-size: 0.9rem; padding: 12px 20px; border: 1px solid var(--border-color); background: rgba(255,255,255,0.03); }
.marquee-container { width: 100%; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); padding: 20px 0; overflow: hidden; white-space: nowrap; background: #090909; }
.marquee { display: inline-block; animation: marquee 20s linear infinite; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--text-muted); }
.marquee .separator { color: var(--accent-red); margin: 0 30px; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Sections */
section { padding: 120px 0; }
.section-title { font-size: 4rem; line-height: 1; margin-bottom: 60px; letter-spacing: -1px; }

/* About / Terminal */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about-text .highlight { font-size: 1.5rem; color: #fff; margin-bottom: 20px; font-weight: 500; }
.about-text p { color: var(--text-muted); font-size: 1.15rem; margin-bottom: 20px; }

/* Timeline */
.timeline { position: relative; max-width: 800px; margin: 80px auto 0 auto; padding: 20px 0; }
.timeline::after { content: ''; position: absolute; width: 2px; background: var(--border-color); top: 0; bottom: 0; left: 50%; margin-left: -1px; }
.tl-item { padding: 10px 40px; position: relative; width: 50%; font-family: var(--font-body); }
.tl-item.left { left: 0; text-align: right; }
.tl-item.right { left: 50%; text-align: left; }
.tl-item::after { content: ''; position: absolute; width: 14px; height: 14px; background: var(--bg-main); border: 2px solid var(--accent-red); border-radius: 50%; top: 25px; z-index: 1; box-shadow: 0 0 0 4px var(--bg-main); }
.tl-item.left::after { right: -7px; }
.tl-item.right::after { left: -7px; }
.tl-content { background: var(--bg-card); padding: 25px; border: 1px solid var(--border-color); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); display: inline-block; text-align: left; position: relative; width: 100%; transition: border 0.3s, transform 0.3s; }
.tl-content:hover { border-color: var(--accent-red); transform: translateY(-3px); }
.tl-year { font-family: var(--font-heading); font-size: 2rem; color: var(--accent-red); margin-bottom: 10px; font-weight: bold; line-height: 1; }
.tl-title { font-size: 1.2rem; color: #fff; font-family: var(--font-mono); margin-bottom: 10px; font-weight: bold; }
.tl-desc { color: var(--text-muted); font-size: 0.95rem; line-height: 1.5; }

/* Services Grid */
.bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.bento-card { background: var(--bg-card); border: 1px solid var(--border-color); padding: 40px; position: relative; transition: all 0.4s ease; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%); display: flex; flex-direction: column;}
.card-num { font-family: var(--font-mono); font-size: 1.2rem; color: var(--text-muted); position: absolute; top: 30px; right: 30px; }
.bento-card h3 { font-size: 1.5rem; margin-bottom: 15px; margin-top: 40px; }
.bento-card p { color: var(--text-muted); font-size: 1rem; flex-grow: 1; }
.bento-card.red-accent { background: var(--accent-red); border-color: var(--accent-red); }
.bento-card.red-accent h3, .bento-card.red-accent p, .bento-card.red-accent .card-num { color: #fff; }
.bento-card:hover:not(.red-accent) { border-color: var(--accent-red); transform: translateY(-5px); }

/* Differentials */
.differentials { background: #0a0a0a; border-top: 1px solid var(--border-color); }
.diff-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.diff-header p { font-size: 1.25rem; color: var(--text-muted); }
.diff-stats { display: flex; flex-direction: column; gap: 40px; border-left: 1px solid var(--border-color); padding-left: 60px; }
.stat-box { display: flex; flex-direction: column; }
.stat-num { font-family: var(--font-heading); font-size: 5rem; line-height: 1; -webkit-text-stroke: 2px var(--accent-red); margin-bottom: 10px; }
.stat-label { font-family: var(--font-mono); font-weight: 700; font-size: 1.1rem; color: #fff; }

/* Cybermap */
.cybermap-section { background: #070707; border-top: 1px solid var(--border-color); padding-bottom: 100px; }
.iframe-container { width: 100%; height: 600px; border: 1px solid var(--accent-red); clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); overflow: hidden; }

/* Placeholders & Certs */
.img-placeholder { background: rgba(255,255,255,0.02); border: 1px dashed var(--border-color); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.8rem; margin: 0 auto 20px auto; width: 100%; transition: border 0.3s; }
.certs-section, .partners-section { padding: 80px 0; background: #0a0a0a; border-top: 1px solid var(--border-color); }
.certs-ticker-wrapper { overflow: hidden; white-space: nowrap; width: 100%; position: relative; padding: 20px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.certs-ticker-wrapper::before, .certs-ticker-wrapper::after { content: ''; position: absolute; top: 0; width: 150px; height: 100%; z-index: 2; pointer-events: none; }
.certs-ticker-wrapper::before { left: 0; background: linear-gradient(to right, #0a0a0a 0%, transparent 100%); }
.certs-ticker-wrapper::after { right: 0; background: linear-gradient(to left, #0a0a0a 0%, transparent 100%); }
.certs-ticker { display: flex; gap: 30px; width: max-content; animation: scrollCerts 30s linear infinite; }
.certs-ticker:hover { animation-play-state: paused; }
@keyframes scrollCerts { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-50% - 15px)); } }
.cert-box { width: 250px; flex-shrink: 0; white-space: normal; text-align: center; background: var(--bg-card); padding: 30px 20px; border: 1px solid var(--border-color); clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px); transition: border 0.3s, transform 0.3s; }
.cert-box:hover { border-color: var(--accent-red); transform: translateY(-5px); }
.cert-box h4 { font-family: var(--font-mono); color: #fff; font-size: 1.2rem; margin-bottom: 5px; }
.cert-box p { color: var(--text-muted); font-size: 0.9rem; }
.cert-box .img-placeholder { height: 120px; width: 120px; border-radius: 50%; clip-path: none; margin-bottom: 25px; }
.cert-box .cert-img { height: 120px; max-width: 100%; object-fit: contain; margin-bottom: 25px; display: block; margin-left: auto; margin-right: auto; }
.partners-section { background: #070707; }
.partners-ticker-wrapper { overflow: hidden; white-space: nowrap; width: 100%; position: relative; padding: 20px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.partners-ticker-wrapper::before, .partners-ticker-wrapper::after { content: ''; position: absolute; top: 0; width: 150px; height: 100%; z-index: 2; pointer-events: none; }
.partners-ticker-wrapper::before { left: 0; background: linear-gradient(to right, #070707 0%, transparent 100%); }
.partners-ticker-wrapper::after { right: 0; background: linear-gradient(to left, #070707 0%, transparent 100%); }
.partners-ticker { display: flex; gap: 30px; width: max-content; animation: scrollPartners 25s linear infinite; }
.partners-ticker:hover { animation-play-state: paused; }
@keyframes scrollPartners { 0% { transform: translateX(calc(-50% - 15px)); } 100% { transform: translateX(0); } }
.partner-box { width: 300px; flex-shrink: 0; white-space: normal; background: var(--bg-card); padding: 30px; border: 1px solid var(--border-color); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); transition: border 0.3s, transform 0.3s; }
.partner-box:hover { border-color: var(--accent-red); transform: translateY(-5px); }
.partner-box .img-placeholder { height: 80px; width: 100%; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); margin-bottom: 20px; border: none; background: rgba(255,255,255,0.05); }
.partner-box .partner-logo { height: 80px; max-width: 100%; object-fit: contain; margin-bottom: 20px; display: block; margin-left: auto; margin-right: auto; filter: grayscale(100%) opacity(0.7); transition: filter 0.3s, opacity 0.3s; }
.partner-box:hover .partner-logo { filter: grayscale(0) opacity(1); }
.partner-box h4 { font-family: var(--font-mono); color: #fff; font-size: 1.1rem; }

/* Form */
.contact { padding: 120px 0; background: #0a0a0a; border-top: 1px solid var(--border-color); }
.cta-box { background: url('data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" fill="transparent" /><path d="M 0 100 L 100 0" stroke="%23EB442C" stroke-width="0.5" stroke-opacity="0.2" /></svg>'), var(--bg-card); padding: 80px; border: 1px solid var(--border-color); clip-path: polygon(30px 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 30px); display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.cta-text h2 { font-size: 3.5rem; margin-bottom: 20px; line-height: 1.1; }
.cta-text p { font-size: 1.25rem; color: var(--text-muted); margin-bottom: 50px; }
.contact-form { width: 100%; }
.form-group { margin-bottom: 25px; }
.form-group label { display: block; font-family: var(--font-mono); color: #fff; margin-bottom: 10px; font-size: 0.9rem; }
.form-group input, .form-group textarea { width: 100%; background: #070707; border: 1px solid var(--border-color); color: #fff; padding: 15px; font-family: var(--font-body); outline: none; transition: border-color 0.3s; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.form-group input:focus, .form-group textarea:focus { border-color: var(--accent-red); }
.contact-form .btn-primary { width: 100%; margin-top: 10px; }

/* Footer */
footer { padding: 60px 0; border-top: 1px solid var(--border-color); background: #050505; }
.footer-content { display: flex; justify-content: space-between; align-items: center; }
.footer-links p { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.9rem; margin-bottom: 10px; text-align: right; }

/* Responsive */
@media (max-width: 1024px) {
    .bento-grid { grid-template-columns: 1fr 1fr; }
    .hero-title { font-size: 6rem; }
    .diff-wrapper { grid-template-columns: 1fr; gap: 50px; }
    .diff-stats { border-left: none; padding-left: 0; padding-top: 40px; border-top: 1px solid var(--border-color); flex-direction: row; flex-wrap: wrap; }
    .cta-box { grid-template-columns: 1fr; gap: 40px; padding: 60px 40px; }
}
@media (max-width: 768px) {
    .timeline::after { left: 20px; }
    .tl-item { width: 100%; padding-left: 50px; padding-right: 0; text-align: left; margin-bottom: 30px; }
    .tl-item.left, .tl-item.right { left: 0; text-align: left; }
    .tl-item.left::after { right: auto; left: 13px; }
    .tl-item.right::after { left: 13px; }
    .tl-item.left .tl-content { text-align: left; }
    .split { grid-template-columns: 1fr; gap: 40px; }
    .hero-title { font-size: 4.5rem; }
    .section-title { font-size: 3rem; }
    .navbar nav { display: none; }
    .mobile-menu { display: block; }
    .bento-grid { grid-template-columns: 1fr; }
    .bento-card.x-large { grid-column: span 1; grid-row: span 1; }
    .cta-box { padding: 40px 20px; clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px); }
    .cta-text h2 { font-size: 2.5rem; }
    .footer-content { flex-direction: column; gap: 30px; text-align: center; }
    .footer-links p { text-align: center; }
    .hero-buttons { flex-direction: column; align-items: flex-start; }
}

/* Service Tags */
.service-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.service-tags span { background: rgba(255,255,255,0.05); border: 1px solid var(--border-color); padding: 5px 12px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); transition: border 0.3s, color 0.3s; }
.bento-card:hover .service-tags span { border-color: var(--accent-red); color: #fff; }
.bento-card.red-accent .service-tags span { background: rgba(0,0,0,0.1); border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.9); }
.bento-card.red-accent:hover .service-tags span { border-color: #fff; color: #fff; }