/* ============================================
   AKIRATECH — #think #code #evolve
   v5 — Luminous Cyberpunk Portfolio
   ============================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#0c0424;--bg2:#120835;--purple:#a855f7;--purple-dark:#7c3aed;
--magenta:#e879f9;--cyan:#22d3ee;--violet:#c4b5fd;
--text:#f8f5ff;--text2:#d4c8f0;--text-dim:#8b7ab8;
--glass:rgba(20,10,55,0.55);--glass-border:rgba(168,85,247,0.18);--radius:14px;
}
html{scroll-behavior:smooth}
body{font-family:'Rajdhani',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;line-height:1.6}
a{color:inherit;text-decoration:none}ul{list-style:none}img{max-width:100%;display:block}

/* AMBIENT */
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
background:radial-gradient(ellipse 60% 50% at 15% 10%,rgba(168,85,247,0.18),transparent),
radial-gradient(ellipse 50% 45% at 85% 20%,rgba(233,121,249,0.12),transparent),
radial-gradient(ellipse 55% 40% at 50% 90%,rgba(34,211,238,0.08),transparent)}
body::after{content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:0.015;
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.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* CURSOR GLOW */
.cursor-glow{position:fixed;width:350px;height:350px;border-radius:50%;pointer-events:none;z-index:9999;
background:radial-gradient(circle,rgba(34,211,238,0.08) 0%,rgba(168,85,247,0.04) 40%,transparent 70%);
transform:translate(-50%,-50%);mix-blend-mode:screen}

/* CYBER LINES */
.cyber-lines{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.cyber-lines .hl{position:absolute;background:linear-gradient(90deg,transparent,var(--cyan),transparent);height:1px;opacity:0;animation:cyberH 8s linear infinite}
.cyber-lines .hl:nth-child(1){top:12%;width:100%;animation-delay:0s}
.cyber-lines .hl:nth-child(2){top:30%;width:80%;left:10%;animation-delay:2s}
.cyber-lines .hl:nth-child(3){top:52%;width:90%;left:5%;animation-delay:4s}
.cyber-lines .hl:nth-child(4){top:72%;width:70%;left:15%;animation-delay:6s}
.cyber-lines .hl:nth-child(5){top:92%;width:100%;animation-delay:1s}
.cyber-lines .vl{position:absolute;background:linear-gradient(180deg,transparent,var(--cyan),transparent);width:1px;opacity:0;animation:cyberV 10s linear infinite}
.cyber-lines .vl:nth-child(6){left:18%;height:100%;animation-delay:0.5s}
.cyber-lines .vl:nth-child(7){left:50%;height:80%;top:10%;animation-delay:3s}
.cyber-lines .vl:nth-child(8){left:82%;height:100%;animation-delay:5.5s}
@keyframes cyberH{0%{opacity:0;transform:translateX(-100%)}10%{opacity:0.2}50%{opacity:0.1}90%{opacity:0.15}100%{opacity:0;transform:translateX(100%)}}
@keyframes cyberV{0%{opacity:0;transform:translateY(-100%)}10%{opacity:0.12}50%{opacity:0.06}90%{opacity:0.12}100%{opacity:0;transform:translateY(100%)}}

/* PARTICLES */
.particles{position:fixed;inset:0;z-index:0;pointer-events:none}
.particle{position:absolute;border-radius:50%;background:var(--cyan);opacity:0;animation:pDrift 12s linear infinite}
@keyframes pDrift{0%{opacity:0;transform:translateY(100vh) scale(0)}10%{opacity:0.7}90%{opacity:0.3}100%{opacity:0;transform:translateY(-10vh) scale(1)}}

/* ============================================
   NAV
   ============================================ */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:1rem 3rem;display:flex;align-items:center;justify-content:space-between;background:rgba(12,4,36,0.5);backdrop-filter:blur(20px);border-bottom:1px solid rgba(168,85,247,0.08);transition:all 0.4s}
nav.scrolled{background:rgba(12,4,36,0.92);box-shadow:0 4px 30px rgba(168,85,247,0.06)}
.nav-logo{height:34px;filter:drop-shadow(0 0 10px rgba(168,85,247,0.4));transition:height 0.3s}
nav.scrolled .nav-logo{height:26px}
.nav-links{display:flex;gap:0.3rem}
.nav-links a{font-family:'Orbitron',sans-serif;font-size:0.6rem;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-dim);padding:0.5rem 1rem;border-radius:6px;transition:all 0.3s}
.nav-links a:hover,.nav-links a.active{color:var(--violet);background:rgba(168,85,247,0.08)}
.nav-cta{font-family:'Orbitron',sans-serif;font-size:0.6rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#fff;padding:0.5rem 1.3rem;background:linear-gradient(135deg,var(--purple-dark),var(--magenta));border-radius:6px;transition:all 0.3s;box-shadow:0 0 15px rgba(168,85,247,0.2)}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(168,85,247,0.4)}
.burger{display:none;background:none;border:none;cursor:pointer;padding:0.5rem}
.burger span{display:block;width:22px;height:2px;background:var(--purple);margin:5px 0;transition:all 0.3s}
.burger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.burger.active span:nth-child(2){opacity:0}
.burger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ============================================
   HERO — VIDEO BG + SPLIT LAYOUT
   ============================================ */
.hero{min-height:100vh;position:relative;z-index:1;display:flex;align-items:center;overflow:hidden}
.hero-video-wrap{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-video{width:100%;height:100%;object-fit:cover;opacity:0.35}
.hero-video-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(12,4,36,0.7),rgba(12,4,36,0.4),rgba(12,4,36,0.6))}
.hero-content{position:relative;z-index:1;width:100%;max-width:1300px;margin:0 auto;padding:8rem 3rem 4rem;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.hero-left{display:flex;flex-direction:column}
.hero-badge{display:inline-flex;align-items:center;gap:0.5rem;font-family:'JetBrains Mono',monospace;font-size:0.65rem;color:var(--cyan);letter-spacing:0.15em;text-transform:uppercase;padding:0.4rem 1rem;border:1px solid rgba(34,211,238,0.25);border-radius:50px;background:rgba(34,211,238,0.06);width:fit-content;margin-bottom:1.5rem}
.hero-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}
.hero h1{font-family:'Orbitron',sans-serif;font-size:clamp(2rem,4.5vw,3.8rem);font-weight:900;line-height:1.08;margin-bottom:1rem}
.hero h1 .glow{background:linear-gradient(135deg,var(--purple),var(--magenta),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% 200%;animation:gradShift 5s ease-in-out infinite}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero-tagline{font-family:'JetBrains Mono',monospace;font-size:0.8rem;color:var(--text-dim);letter-spacing:0.3em;margin-bottom:1.5rem}
.hero-desc{font-size:1.05rem;font-weight:300;color:var(--text2);line-height:1.8;margin-bottom:2.5rem;max-width:480px}
.hero-btns{display:flex;gap:1rem;flex-wrap:wrap}
.btn-primary{font-family:'Orbitron',sans-serif;font-size:0.65rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#fff;padding:1rem 2.2rem;background:linear-gradient(135deg,var(--purple-dark),var(--magenta));border:none;border-radius:8px;cursor:pointer;position:relative;overflow:hidden;transition:all 0.4s;display:inline-flex;align-items:center;gap:0.5rem;box-shadow:0 4px 25px rgba(168,85,247,0.3)}
.btn-primary::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--magenta),var(--cyan));opacity:0;transition:opacity 0.4s}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 45px rgba(168,85,247,0.5)}
.btn-primary:hover::before{opacity:1}
.btn-primary span{position:relative;z-index:1}
.btn-ghost{font-family:'Orbitron',sans-serif;font-size:0.65rem;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--violet);padding:1rem 2.2rem;border:1px solid rgba(168,85,247,0.25);border-radius:8px;transition:all 0.4s;display:inline-flex;align-items:center;gap:0.5rem}
.btn-ghost:hover{border-color:var(--purple);background:rgba(168,85,247,0.08);transform:translateY(-3px)}

.hero-right{display:flex;align-items:center;justify-content:center;position:relative}
.hero-logo-wrap{position:relative;width:min(380px,45vw)}
.hero-logo{width:100%;animation:hFloat 6s ease-in-out infinite;filter:drop-shadow(0 0 50px rgba(168,85,247,0.4)) drop-shadow(0 0 100px rgba(233,121,249,0.15));position:relative;z-index:2}
@keyframes hFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.hero-ring{position:absolute;border-radius:50%;border:1px solid;animation:ringP 5s ease-in-out infinite}
.hr1{inset:-30px;border-color:rgba(34,211,238,0.15);box-shadow:0 0 15px rgba(34,211,238,0.05)}
.hr2{inset:-65px;border-color:rgba(168,85,247,0.08);animation-delay:-1.7s}
.hr3{inset:-100px;border-color:rgba(233,121,249,0.05);animation-delay:-3.4s}
@keyframes ringP{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:0.3}}

/* MARQUEE */
.marquee-section{position:relative;z-index:1;padding:1.5rem 0;overflow:hidden;border-top:1px solid rgba(168,85,247,0.08);border-bottom:1px solid rgba(168,85,247,0.08);background:rgba(18,8,53,0.4)}
.marquee-track{display:flex;gap:2.5rem;animation:mscroll 35s linear infinite;width:max-content}
.marquee-track span{font-family:'Orbitron',sans-serif;font-size:0.6rem;font-weight:400;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap;display:flex;align-items:center;gap:0.8rem}
.marquee-track span::before{content:'◆';font-size:0.3rem;color:var(--cyan);text-shadow:0 0 6px var(--cyan)}
@keyframes mscroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* SECTIONS */
section{position:relative;z-index:1;padding:6rem 3rem}
.container{max-width:1200px;margin:0 auto}
.section-header{margin-bottom:3rem}
.section-header.center{text-align:center}
.section-label{font-family:'JetBrains Mono',monospace;font-size:0.6rem;font-weight:300;color:var(--cyan);letter-spacing:0.4em;text-transform:uppercase;margin-bottom:0.6rem;display:flex;align-items:center;gap:0.8rem;text-shadow:0 0 12px rgba(34,211,238,0.4)}
.section-header.center .section-label{justify-content:center}
.section-label::before{content:'';width:25px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent);box-shadow:0 0 8px rgba(34,211,238,0.3)}
.section-title{font-family:'Orbitron',sans-serif;font-size:clamp(1.6rem,3.5vw,2.6rem);font-weight:800;line-height:1.1}
.section-title .gradient{background:linear-gradient(135deg,var(--purple),var(--magenta));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.section-subtitle{font-size:1rem;font-weight:300;color:var(--text2);margin-top:0.8rem;max-width:550px;line-height:1.7}
.section-header.center .section-subtitle{margin-left:auto;margin-right:auto}

/* SERVICES — IMAGE TOP */
#services{background:radial-gradient(ellipse 60% 40% at 50% 0%,rgba(168,85,247,0.08),transparent)}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
.service-card{border-radius:var(--radius);border:1px solid var(--glass-border);background:var(--glass);backdrop-filter:blur(8px);overflow:hidden;transition:all 0.5s cubic-bezier(0.16,1,0.3,1)}
.service-card:hover{transform:translateY(-8px);border-color:rgba(168,85,247,0.3);box-shadow:0 20px 60px rgba(91,33,182,0.15)}
.service-img{height:140px;overflow:hidden;position:relative}
.service-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s;filter:brightness(0.7) saturate(1.2)}
.service-card:hover .service-img img{transform:scale(1.1);filter:brightness(0.85) saturate(1.3)}
.service-img::after{content:'';position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(transparent,rgba(12,4,36,0.9))}
.service-body{padding:1.4rem 1.5rem}
.service-body h3{font-family:'Orbitron',sans-serif;font-size:0.75rem;font-weight:600;margin-bottom:0.5rem}
.service-body p{color:var(--text2);font-size:0.82rem;font-weight:300;line-height:1.55}

/* PROCESS — VIDEO BG + GLOWING TIMELINE */
.process-section{position:relative;z-index:1;padding:6rem 3rem;overflow:hidden}
.process-video-wrap{position:absolute;inset:0;z-index:0;overflow:hidden}
.process-video{width:100%;height:100%;object-fit:cover;opacity:0.25}
.process-video-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,4,36,0.85) 0%,rgba(12,4,36,0.6) 50%,rgba(12,4,36,0.85) 100%)}
.process-timeline{display:grid;grid-template-columns:repeat(6,1fr);position:relative;max-width:1100px;margin:0 auto;z-index:1}

/* Main timeline line — brighter, thicker */
.process-timeline::before{
    content:'';position:absolute;
    top:2.5rem;left:6%;right:6%;height:2px;
    background:linear-gradient(90deg,transparent 0%,var(--cyan) 10%,var(--cyan) 90%,transparent 100%);
    box-shadow:0 0 12px rgba(34,211,238,0.3),0 0 25px rgba(34,211,238,0.15);
    border-radius:2px;
}

/* Animated light traveling along the line */
.process-timeline::after{
    content:'';position:absolute;
    top:calc(2.5rem - 3px);left:6%;
    width:80px;height:8px;
    background:radial-gradient(ellipse,rgba(34,211,238,0.9) 0%,rgba(34,211,238,0.4) 40%,transparent 70%);
    border-radius:50%;
    filter:blur(2px);
    animation:lightTravel 4s ease-in-out infinite;
}
@keyframes lightTravel{
    0%{left:6%;opacity:0}
    5%{opacity:1}
    95%{opacity:1}
    100%{left:calc(94% - 80px);opacity:0}
}

.process-step{text-align:center;padding:0 0.5rem;position:relative;z-index:1}

/* Bigger, brighter dots */
.step-dot{
    width:14px;height:14px;
    background:var(--cyan);border-radius:50%;
    margin:1.7rem auto 1.3rem;
    box-shadow:0 0 20px rgba(34,211,238,0.6),0 0 40px rgba(34,211,238,0.2);
    position:relative;
    border:2px solid rgba(34,211,238,0.4);
}
.step-dot::before{
    content:'';position:absolute;inset:-8px;border-radius:50%;
    border:1px solid rgba(34,211,238,0.25);
    animation:dp 3s ease-in-out infinite;
}
.step-dot::after{
    content:'';position:absolute;inset:-3px;border-radius:50%;
    background:rgba(34,211,238,0.15);
    animation:dotGlow 2s ease-in-out infinite alternate;
}
@keyframes dp{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(2.2);opacity:0}}
@keyframes dotGlow{0%{box-shadow:0 0 8px rgba(34,211,238,0.3)}100%{box-shadow:0 0 20px rgba(34,211,238,0.6)}}

.step-num{font-family:'Orbitron',sans-serif;font-size:0.55rem;font-weight:700;color:var(--cyan);letter-spacing:0.1em;margin-bottom:0.4rem;text-shadow:0 0 8px rgba(34,211,238,0.4)}
.process-step h3{font-family:'Orbitron',sans-serif;font-size:0.7rem;font-weight:600;margin-bottom:0.4rem;color:var(--text)}
.process-step p{font-size:0.82rem;font-weight:300;color:var(--text2);line-height:1.5}

/* PORTFOLIO */
#portfolio{background:radial-gradient(ellipse 50% 30% at 50% 50%,rgba(91,33,182,0.07),transparent),var(--bg2)}
.portfolio-filters{display:flex;gap:0.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.5rem}
.filter-btn{font-family:'Orbitron',sans-serif;font-size:0.6rem;font-weight:500;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-dim);padding:0.5rem 1.2rem;border:1px solid var(--glass-border);border-radius:6px;background:transparent;cursor:pointer;transition:all 0.3s}
.filter-btn:hover,.filter-btn.active{color:var(--text);border-color:var(--cyan);background:rgba(34,211,238,0.08);box-shadow:0 0 18px rgba(34,211,238,0.1)}
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}
.project-card{border-radius:var(--radius);border:1px solid var(--glass-border);overflow:hidden;background:var(--glass);backdrop-filter:blur(5px);transition:all 0.5s cubic-bezier(0.16,1,0.3,1)}
.project-card:hover{transform:translateY(-8px);border-color:rgba(34,211,238,0.3);box-shadow:0 25px 70px rgba(91,33,182,0.2)}
.project-visual{height:200px;position:relative;overflow:hidden}
.project-img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s}
.project-img-contain{object-fit:contain;padding:1.5rem;background:linear-gradient(135deg,#1a0540,#0d0a2e)}
.project-card:hover .project-img{transform:scale(1.06)}
.project-overlay{position:absolute;inset:0;background:rgba(12,4,36,0.6);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.4s}
.project-card:hover .project-overlay{opacity:1}
.project-overlay-btn{width:42px;height:42px;border-radius:50%;border:1px solid rgba(34,211,238,0.5);background:rgba(34,211,238,0.1);display:flex;align-items:center;justify-content:center;color:var(--cyan);font-size:1.2rem;transition:all 0.3s;text-decoration:none}
.project-overlay-btn:hover{background:var(--cyan);color:var(--bg);box-shadow:0 0 20px rgba(34,211,238,0.5)}
.project-info{padding:1.4rem 1.6rem}
.project-type{font-family:'JetBrains Mono',monospace;font-size:0.55rem;color:var(--cyan);letter-spacing:0.2em;text-transform:uppercase;margin-bottom:0.3rem}
.project-info h3{font-family:'Orbitron',sans-serif;font-size:0.8rem;font-weight:700;margin-bottom:0.4rem}
.project-info p{color:var(--text2);font-size:0.82rem;font-weight:300;line-height:1.55}
#portfolio-dynamic{display:contents}

/* ABOUT */
#about{position:relative;overflow:hidden}
.about-video-wrap{position:absolute;inset:0;z-index:0;overflow:hidden}
.about-video{width:100%;height:100%;object-fit:cover;opacity:0.2}
.about-video-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,4,36,0.85) 0%,rgba(18,8,53,0.6) 50%,rgba(12,4,36,0.85) 100%)}
.about-layout{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;position:relative;z-index:1}
.about-text p{font-size:1rem;font-weight:300;color:var(--text2);line-height:1.85;margin-bottom:1.2rem}
.about-text .highlight{color:var(--cyan);font-weight:500}
.about-counters{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.counter-card{padding:1.8rem 1.3rem;border-radius:var(--radius);border:1px solid var(--glass-border);background:rgba(22,12,60,0.4);text-align:center;transition:all 0.4s}
.counter-card:hover{border-color:rgba(34,211,238,0.3);box-shadow:0 0 25px rgba(34,211,238,0.08);transform:translateY(-4px)}
.counter-num{font-family:'Orbitron',sans-serif;font-size:2.2rem;font-weight:900;background:linear-gradient(135deg,var(--cyan),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1}
.counter-label{font-family:'JetBrains Mono',monospace;font-size:0.55rem;color:var(--text-dim);letter-spacing:0.15em;text-transform:uppercase;margin-top:0.3rem}

/* CONTACT */
#contact{background:radial-gradient(ellipse 80% 50% at 50% 100%,rgba(34,211,238,0.06),transparent)}
.contact-grid-v2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2.5rem;
    align-items:stretch;
}
.contact-left{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:1fr 1fr;
    gap:1.2rem;
    padding:1.5rem;
    border-radius:var(--radius);
    border:1px solid var(--glass-border);
    background:rgba(22,12,60,0.35);
    backdrop-filter:blur(5px);
}
.contact-portrait-wrap{
    grid-row:1 / -1;
    padding:3px;
    border-radius:12px;
    background:linear-gradient(135deg,var(--purple),var(--magenta),var(--cyan));
    box-shadow:0 0 25px rgba(168,85,247,0.15);
    align-self:stretch;
}
.contact-portrait{
    width:100%;height:100%;
    object-fit:cover;
    border-radius:9px;
    display:block;
}
.contact-blocks{
    grid-row:1 / -1;
    display:flex;
    flex-direction:column;
    gap:1.2rem;
}
.contact-block{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:1.2rem 1.4rem;
    border-radius:10px;
    border:1px solid var(--glass-border);
    background:rgba(22,12,60,0.4);
    transition:all 0.3s;
}
.contact-block:hover{border-color:rgba(34,211,238,0.3)}
.contact-block-label{font-family:'Orbitron',sans-serif;font-size:0.55rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-dim);margin-bottom:0.3rem}
.contact-block-value{font-size:0.95rem;font-weight:500}
.contact-block a{color:var(--cyan);transition:color 0.3s}
.contact-block a:hover{color:var(--violet)}
.contact-form{
    display:flex;flex-direction:column;gap:0.9rem;
}
.contact-form .form-group{flex:1;display:flex}
.contact-form .form-group:last-of-type{flex:3}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:0.9rem 1.1rem;font-family:'Rajdhani',sans-serif;font-size:0.95rem;color:var(--text);background:rgba(22,12,60,0.5);border:1px solid var(--glass-border);border-radius:8px;outline:none;transition:all 0.3s}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--cyan);box-shadow:0 0 20px rgba(34,211,238,0.1)}
.form-group textarea{min-height:110px;resize:vertical;flex:1}
.form-group select{cursor:pointer}
.form-group select option{background:var(--bg)}
.form-submit{font-family:'Orbitron',sans-serif;font-size:0.6rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#fff;padding:0.9rem 2rem;background:linear-gradient(135deg,var(--purple-dark),var(--magenta));border:none;border-radius:8px;cursor:pointer;transition:all 0.4s;width:fit-content;box-shadow:0 4px 20px rgba(168,85,247,0.3)}
.form-submit:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(168,85,247,0.45)}
.form-submit.sending{opacity:0.6;pointer-events:none}
.form-status{
    font-family:'Rajdhani',sans-serif;font-size:0.9rem;font-weight:500;
    margin-top:0.8rem;padding:0.8rem 1rem;border-radius:8px;
    display:none;text-align:center;
}
.form-status.success{display:block;background:rgba(34,211,238,0.1);border:1px solid rgba(34,211,238,0.3);color:var(--cyan)}
.form-status.error{display:block;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#ef4444}

/* FOOTER */
footer{position:relative;z-index:1;padding:2.5rem 3rem;border-top:1px solid var(--glass-border);display:flex;align-items:center;justify-content:space-between}
.footer-left{display:flex;align-items:center;gap:1rem}
.footer-logo{height:28px;filter:drop-shadow(0 0 8px rgba(168,85,247,0.3))}
.footer-tagline{font-family:'JetBrains Mono',monospace;font-size:0.55rem;color:var(--text-dim);letter-spacing:0.15em}
.footer-right{font-family:'JetBrains Mono',monospace;font-size:0.5rem;color:var(--text-dim);letter-spacing:0.08em}
.footer-center{display:flex;align-items:center}
.footer-link{font-family:'Orbitron',sans-serif;font-size:0.55rem;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-dim);transition:color 0.3s}
.footer-link:hover{color:var(--cyan)}

/* COOKIE POPUP */
.cookie-overlay{
    position:fixed;inset:0;z-index:10000;
    background:rgba(0,0,0,0.6);
    backdrop-filter:blur(8px);
    display:flex;align-items:center;justify-content:center;
    padding:2rem;
}
.cookie-overlay.hidden{display:none}
.cookie-popup{
    background:linear-gradient(160deg,rgba(22,12,65,0.98),rgba(12,4,40,0.98));
    border:1px solid var(--glass-border);
    border-radius:16px;
    padding:2.5rem;
    max-width:480px;width:100%;
    box-shadow:0 30px 80px rgba(0,0,0,0.5),0 0 40px rgba(168,85,247,0.1);
    animation:popupIn 0.4s ease;
}
@keyframes popupIn{from{opacity:0;transform:scale(0.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
.cookie-popup h4{
    font-family:'Orbitron',sans-serif;
    font-size:0.9rem;font-weight:600;
    letter-spacing:0.08em;
    margin-bottom:1rem;color:var(--text);
}
.cookie-popup p{
    font-size:0.9rem;font-weight:300;
    color:var(--text2);line-height:1.7;
    margin-bottom:0.8rem;
}
.cookie-popup a{color:var(--cyan);transition:color 0.3s}
.cookie-popup a:hover{color:var(--violet)}
.cookie-actions{display:flex;gap:0.8rem;margin-top:1.5rem}
.cookie-btn{
    font-family:'Orbitron',sans-serif;
    font-size:0.6rem;font-weight:600;
    letter-spacing:0.1em;text-transform:uppercase;
    padding:0.8rem 1.8rem;border-radius:8px;
    cursor:pointer;transition:all 0.3s;
    flex:1;
}
.cookie-accept{
    background:linear-gradient(135deg,var(--purple-dark),var(--magenta));
    border:none;color:#fff;
    box-shadow:0 0 15px rgba(168,85,247,0.2);
}
.cookie-accept:hover{box-shadow:0 8px 25px rgba(168,85,247,0.4);transform:translateY(-2px)}
.cookie-refuse{
    background:transparent;
    border:1px solid var(--glass-border);
    color:var(--text-dim);
}
.cookie-refuse:hover{border-color:var(--purple);color:var(--violet)}

/* ADMIN */
.admin-toggle{position:fixed;bottom:1.5rem;right:1.5rem;z-index:6000;width:46px;height:46px;border-radius:50%;background:rgba(22,12,60,0.9);border:2px solid var(--purple);color:var(--violet);font-size:1.3rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s;backdrop-filter:blur(10px);box-shadow:0 0 15px rgba(168,85,247,0.2)}
.admin-toggle:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 25px rgba(34,211,238,0.3);transform:rotate(90deg)}
.admin-panel{position:fixed;top:0;right:-420px;width:400px;height:100vh;z-index:6500;background:rgba(12,4,36,0.97);backdrop-filter:blur(30px);border-left:1px solid var(--glass-border);transition:right 0.4s cubic-bezier(0.16,1,0.3,1);overflow-y:auto;box-shadow:-10px 0 50px rgba(0,0,0,0.5)}
.admin-panel.open{right:0}
.admin-panel-inner{padding:2rem}
.admin-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid var(--glass-border)}
.admin-header h3{font-family:'Orbitron',sans-serif;font-size:0.85rem;font-weight:600;letter-spacing:0.1em}
.admin-close{background:none;border:none;color:var(--text-dim);font-size:1.2rem;cursor:pointer;transition:color 0.3s}
.admin-close:hover{color:var(--cyan)}
.admin-input{width:100%;padding:0.8rem 1rem;font-family:'Rajdhani',sans-serif;font-size:0.9rem;color:var(--text);background:rgba(22,12,60,0.5);border:1px solid var(--glass-border);border-radius:8px;outline:none;margin-bottom:0.7rem;transition:border-color 0.3s}
.admin-input:focus{border-color:var(--cyan)}
.admin-textarea{min-height:100px;resize:vertical}
.admin-input option{background:var(--bg)}
.admin-btn{font-family:'Orbitron',sans-serif;font-size:0.6rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--violet);padding:0.7rem 1.5rem;border:1px solid var(--glass-border);border-radius:6px;background:transparent;cursor:pointer;transition:all 0.3s;width:100%}
.admin-btn:hover{border-color:var(--cyan);background:rgba(34,211,238,0.08)}
.admin-btn-primary{background:linear-gradient(135deg,var(--purple-dark),var(--magenta));border:none;color:#fff}
.admin-btn-primary:hover{box-shadow:0 8px 25px rgba(168,85,247,0.3)}
.admin-upload-wrap{margin-bottom:0.7rem}
.admin-upload-label{
    display:flex;align-items:center;justify-content:center;
    padding:1rem;border-radius:8px;
    border:2px dashed var(--glass-border);
    background:rgba(22,12,60,0.3);
    cursor:pointer;transition:all 0.3s;
    font-family:'Rajdhani',sans-serif;font-size:0.9rem;color:var(--text-dim);
}
.admin-upload-label:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(34,211,238,0.03)}
.admin-preview{margin-top:0.5rem;display:none}
.admin-preview.has-img{display:block}
.admin-preview img{
    width:100%;max-height:150px;object-fit:cover;
    border-radius:8px;border:1px solid var(--glass-border);
}
.admin-preview .remove-img{
    display:inline-block;margin-top:0.4rem;
    font-family:'Orbitron',sans-serif;font-size:0.5rem;font-weight:500;
    letter-spacing:0.1em;text-transform:uppercase;
    color:#ef4444;cursor:pointer;transition:opacity 0.3s;
}
.admin-preview .remove-img:hover{opacity:0.7}
.admin-content h4{font-family:'Orbitron',sans-serif;font-size:0.7rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:1rem}
.admin-article-item{display:flex;align-items:center;justify-content:space-between;padding:0.7rem 0;border-bottom:1px solid rgba(168,85,247,0.05)}
.admin-article-item span{font-size:0.85rem;color:var(--text2);flex:1}
.article-section-badge{font-family:'JetBrains Mono',monospace;font-size:0.5rem;color:var(--cyan);letter-spacing:0.1em;text-transform:uppercase;margin-right:0.5rem;padding:0.2rem 0.5rem;border:1px solid rgba(34,211,238,0.15);border-radius:4px}
.admin-article-actions{display:flex;gap:0.3rem}
.admin-article-actions button{background:none;border:none;color:var(--text-dim);font-size:0.85rem;cursor:pointer;padding:0.3rem;transition:color 0.3s}
.admin-article-actions button:hover{color:var(--cyan)}
.admin-article-actions button.delete:hover{color:#ef4444}
.dynamic-article{padding:2rem 1.6rem;border-radius:var(--radius);border:1px solid var(--glass-border);background:linear-gradient(160deg,rgba(22,12,60,0.7),rgba(12,4,36,0.5));transition:all 0.4s}
.dynamic-article:hover{border-color:rgba(34,211,238,0.3);box-shadow:0 15px 50px rgba(91,33,182,0.15);transform:translateY(-4px)}
.dynamic-article h3{font-family:'Orbitron',sans-serif;font-size:0.85rem;font-weight:600;margin-bottom:0.5rem;color:var(--cyan)}
.dynamic-article p{color:var(--text2);font-size:0.85rem;line-height:1.6;font-weight:300}
.dynamic-article img{width:100%;max-height:180px;object-fit:cover;border-radius:8px;margin-bottom:0.8rem}
.dynamic-article .article-badge{font-family:'JetBrains Mono',monospace;font-size:0.5rem;color:var(--cyan);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:0.4rem}

/* REVEAL */
.reveal{opacity:0;transform:translateY(35px);transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1),transform 0.8s cubic-bezier(0.16,1,0.3,1)}
.reveal.vis{opacity:1;transform:translateY(0)}
@keyframes forceShow{to{opacity:1;transform:translateY(0)}}
.reveal{animation:forceShow 0s 3s forwards}.reveal.vis{animation:none}
.reveal-d1{transition-delay:0.08s}.reveal-d2{transition-delay:0.16s}.reveal-d3{transition-delay:0.24s}
.reveal-d4{transition-delay:0.32s}.reveal-d5{transition-delay:0.40s}.reveal-d6{transition-delay:0.48s}
.reveal-d7{transition-delay:0.56s}.reveal-d8{transition-delay:0.64s}

/* RESPONSIVE */
@media(max-width:1024px){
.hero-content{grid-template-columns:1fr;text-align:center;gap:3rem}.hero-left{align-items:center}.hero-badge{margin-left:auto;margin-right:auto}.hero-desc{margin-left:auto;margin-right:auto}.hero-btns{justify-content:center}.hero-right{order:-1}.hero-logo-wrap{width:min(260px,55vw)}
.services-grid{grid-template-columns:repeat(2,1fr)}.process-timeline{grid-template-columns:repeat(3,1fr);gap:1.5rem}.process-timeline::before,.process-timeline::after{display:none}.about-layout{grid-template-columns:1fr;text-align:center}.contact-grid-v2{grid-template-columns:1fr}.contact-left{grid-template-columns:1fr;justify-items:center;text-align:center}
}
@media(max-width:768px){
nav{padding:0.8rem 1.5rem}.nav-links{display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:rgba(12,4,36,0.95);backdrop-filter:blur(25px);padding:1.5rem;gap:0;border-bottom:1px solid rgba(168,85,247,0.08)}.nav-links.open{display:flex}.nav-links a{padding:0.8rem 1rem;border-radius:0;border-bottom:1px solid rgba(168,85,247,0.04)}.nav-cta{display:none}.burger{display:block}
section{padding:4rem 1.5rem}.services-grid{grid-template-columns:1fr}.process-timeline{grid-template-columns:repeat(2,1fr)}.portfolio-grid{grid-template-columns:1fr}.hero-ring{display:none}footer{flex-direction:column;gap:1rem;text-align:center}
.admin-panel{width:100%;right:-100%}
}