/* =========================
DRONE HOPPER — IMPROVED CSS
(Fixes container conflict, mobile layout, contact textarea,
carousel overflow + responsiveness, hero visual scaling)
========================= */

/* === RESET & BASE === */
*{margin:0;padding:0;box-sizing:border-box;}

:root{
    --primary-gradient: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    --secondary-gradient: linear-gradient(135deg,#f093fb 0%,#f5576c 100%);
    --accent-gradient: linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);
    --bg-primary:#0a0a0e;
    --bg-secondary:#111119;
    --text-primary:#ffffff;
    --text-secondary:#b8bcc7;
    --text-accent:#00d4ff;
    --border-color:rgba(255,255,255,0.1);
    --shadow:0 20px 40px rgba(0,0,0,0.3);
    --shadow-hover:0 30px 60px rgba(0,212,255,0.2);
    --transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
}

html{scroll-behavior:smooth;}

body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    background:var(--bg-primary);
    color:var(--text-primary);
    line-height:1.7;
    overflow-x:hidden;
}

/* Media elements should never overflow */
img,video{max-width:100%;height:auto;display:block;}

/* === CONTAINER === */
.container{
    max-width:1400px;
    margin:0 auto;
    padding:0 20px;
}

/* === BACKGROUND EFFECTS: SPACE DEBRIS STREAKS (bottom-left -> top-right) === */
.background-canvas {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: radial-gradient(circle at top, #0a0a0a, #000);
    z-index: -1;
}

.debris-field {
    position: absolute;
    inset: 0;
}

.debris {
    position: absolute;
    width: var(--w);
    height: var(--h);
    background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 212, 255, 0.85),
    transparent
    );
    opacity: var(--o);
    
    /* rotate the streak itself */
    transform: translate(var(--x0), var(--y0)) rotate(-45deg);
    
    animation: debris-move var(--d) linear infinite;
    animation-delay: var(--delay);
    will-change: transform;
}

@keyframes debris-move {
    to {
        transform: translate(var(--x1), var(--y1)) rotate(45deg);
    }
}

/* === HEADER === */
.header{
    position:fixed;
    top:0;left:0;right:0;
    z-index:1000;
    backdrop-filter:blur(20px);
    background:rgba(10,10,14,0.95);
    border-bottom:1px solid var(--border-color);
    transition:var(--transition);
}

.header.scrolled{
    background:rgba(10,10,14,0.98);
    box-shadow:var(--shadow);
}

/* Header layout ONLY (not global container) */
.header .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:80px;
    position:relative; /* for mobile dropdown positioning */
}

.logo-container{
    display:flex;
    align-items:center;
    gap:12px;
}

.logo{
    height:45px;
    width:auto;
    transition:var(--transition);
}

.company-name{
    font-size:1.4rem;
    font-weight:700;
    background:var(--accent-gradient);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.nav{position:relative;}

.nav-list{
    display:flex;
    list-style:none;
    gap:40px;
    align-items:center;
}

.nav-link{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    color:var(--text-secondary);
    text-decoration:none;
    font-weight:500;
    font-size:0.95rem;
    padding:8px 0;
    transition:var(--transition);
    position:relative;
}

.nav-link i{font-size:1.2rem;}

.nav-link:hover,
.nav-link.active{color:var(--text-accent);}

.nav-link::after{
    content:'';
    position:absolute;
    bottom:0;
    left:50%;
    width:0;
    height:2px;
    background:var(--accent-gradient);
    transition:var(--transition);
    transform:translateX(-50%);
}

.nav-link:hover::after,
.nav-link.active::after{width:80%;}

.mobile-menu-toggle{
    display:none;
    background:none;
    border:none;
    color:var(--text-primary);
    font-size:1.5rem;
    cursor:pointer;
    padding:8px;
}

/* === HERO SECTION === */
.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    padding-top:100px;
}

.hero-content{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8rem;
    align-items:center;
}

.hero-title{
    font-size:clamp(3rem,8vw,6rem);
    font-weight:800;
    line-height:0.9;
    margin-bottom:2rem;
    letter-spacing:-0.02em;
}

.gradient-text{
    background:var(--accent-gradient);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.hero-subtitle{
    font-size:clamp(1.5rem,4vw,2.5rem);
    font-weight:500;
    color:var(--text-accent);
    margin-bottom:2rem;
}

.hero-description{
    font-size:1.3rem;
    color:var(--text-secondary);
    margin-bottom:3rem;
    max-width:520px;
    line-height:1.8;
}

.hero-cta{
    display:flex;
    gap:1.5rem;
    flex-wrap:wrap;
}

.btn{
    padding:1rem 2.5rem;
    border:none;
    border-radius:50px;
    font-size:1.1rem;
    font-weight:600;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    cursor:pointer;
    transition:var(--transition);
    position:relative;
    overflow:hidden;
    white-space:nowrap;
}

.btn-large{
    padding:1.2rem 3rem;
    font-size:1.2rem;
}

.btn-primary{
    background:var(--accent-gradient);
    color:white;
    box-shadow:var(--shadow);
}

.btn-primary:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-hover);
}

.btn-secondary{
    background:transparent;
    color:var(--text-accent);
    border:2px solid var(--text-accent);
}

.btn-secondary:hover{
    background:var(--text-accent);
    color:white;
    transform:translateY(-2px);
}

/* Hero Visual */
/* HERO VISUAL WRAPPER */
.hero-visual{
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    height: auto;
}

/* COMMAND CENTER GRID */
.command-center{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 2.2rem;
    
    align-items: center;
    justify-items: center;
}

/* BASE MONITOR STYLE */
.monitor-left,
.monitor-right,
.monitor-down{
    position: relative; /* KEY: not absolute */
    width: 100%;
    max-width: 500px;
    aspect-ratio: 16 / 10;
    
    background: #1a1a2e;
    border: 3px solid #2a2a40;
    border-radius: 14px;
    padding: 10px;
    
    box-shadow: 0 20px 40px rgba(0,0,0,0.45);
    overflow: hidden;
    
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* IMAGE FIT */
.monitor-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* GRID POSITIONS */
.monitor-left{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    transform: rotate(-2deg);
}

.monitor-right{
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    transform: rotate(2deg);
}

.monitor-down{
    grid-column: 1 / 3; /* spans full width */
    grid-row: 2 / 3;
    max-width: 500px;
    max-height: 240px;
    transform: rotate(-1.5deg);
}

/* SUBTLE INTERACTION (optional but premium) */
.monitor-left:hover,
.monitor-right:hover,
.monitor-down:hover{
    transform: rotate(0deg) scale(1.02);
    box-shadow: 0 30px 60px rgba(0,212,255,0.25);
}

/* === SERVICES SECTION === */
.services-section{
    padding:150px 0;
    background:rgba(255,255,255,0.02);
    backdrop-filter:blur(10px);
}

.section-header{
    text-align:center;
    margin-bottom:5rem;
}

.section-title{
    font-size:clamp(2.5rem,6vw,4rem);
    font-weight:800;
    margin-bottom:1.5rem;
    background:var(--accent-gradient);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.section-subtitle{
    font-size:1.4rem;
    color:var(--text-secondary);
    max-width:650px;
    margin:0 auto;
}

.services-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:2.5rem;
    margin-bottom:5rem;
}

.service-card{
    background:rgba(255,255,255,0.05);
    backdrop-filter:blur(20px);
    border:1px solid var(--border-color);
    border-radius:24px;
    padding:3rem 2.5rem;
    text-align:center;
    transition:var(--transition);
    position:relative;
    overflow:hidden;
}

.service-card::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:4px;
    background:var(--accent-gradient);
    transform:scaleX(0);
    transition:var(--transition);
}

.service-card:hover::before{transform:scaleX(1);}

.service-card:hover{
    transform:translateY(-12px);
    box-shadow:var(--shadow-hover);
    border-color:var(--text-accent);
}

.service-icon{
    width:80px;height:80px;
    margin:0 auto 2rem;
    background:rgba(0,212,255,0.1);
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--transition);
}

.service-card:hover .service-icon{
    background:rgba(0,212,255,0.2);
    transform:scale(1.1);
}

.service-card img{width:50px;height:auto;}

.service-card h3{
    font-size:1.6rem;
    font-weight:700;
    margin-bottom:1.5rem;
    color:var(--text-primary);
}

.service-card p{
    color:var(--text-secondary);
    font-size:1.1rem;
    line-height:1.7;
}

.section-video{display:flex;justify-content:center;}

.demo-video{
    max-width:800px;
    width:100%;
    margin:0 auto;
    border-radius:20px;
    box-shadow:var(--shadow);
}

/* === PLATFORMS SECTION === */
/* === R&D SECTION (replaces platforms carousel) === */
.rnd-section{
    padding: 150px 0;
}

.rnd-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    margin-top: 3.5rem;
    margin-bottom: 4.5rem;
}

.rnd-card{
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 2.6rem 2.2rem;
    box-shadow: var(--shadow);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.rnd-card::before{
    content:"";
    position:absolute;
    inset:0;
    background: radial-gradient(800px 300px at 20% 0%, rgba(0,212,255,0.10), transparent 60%);
    opacity: 0;
    transition: var(--transition);
}

.rnd-card:hover{
    transform: translateY(-8px);
    border-color: rgba(0,212,255,0.5);
    box-shadow: var(--shadow-hover);
}

.rnd-card:hover::before{ opacity: 1; }

.rnd-badge{
    display: inline-flex;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(0,212,255,0.35);
    background: rgba(0,212,255,0.10);
    color: var(--text-accent);
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 1.1rem;
}

.rnd-card h3{
    font-size: 1.55rem;
    margin-bottom: 0.9rem;
}

.rnd-card p{
    color: var(--text-secondary);
    margin-bottom: 1.2rem;
    line-height: 1.8;
}

.rnd-list{
    list-style: none;
    display: grid;
    gap: 0.6rem;
    padding: 0;
    margin: 0;
}

.rnd-list li{
    color: var(--text-secondary);
    position: relative;
    padding-left: 1.2rem;
}

.rnd-list li::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 8px;
    height: 2px;
    background: var(--text-accent);
    border-radius: 999px;
    opacity: 0.8;
}

/* Publications */
.pubs{
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-color);
    border-radius: 28px;
    padding: 3rem 2.5rem;
    backdrop-filter: blur(12px);
}

.pubs-title{
    font-size: 1.9rem;
    margin-bottom: 0.5rem;
}

.pubs-subtitle{
    color: var(--text-secondary);
    margin-bottom: 2rem;
    max-width: 800px;
}

.pubs-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
}

.pub-card{
    display: block;
    text-decoration: none;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 1.6rem 1.4rem;
    transition: var(--transition);
}

.pub-card:hover{
    transform: translateY(-6px);
    border-color: rgba(0,212,255,0.45);
    box-shadow: 0 20px 40px rgba(0,212,255,0.10);
}

.pub-meta{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 0.9rem;
}

.pub-type{
    color: var(--text-accent);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(0,212,255,0.10);
    border: 1px solid rgba(0,212,255,0.28);
}

.pub-date{
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.pub-card h4{
    color: var(--text-primary);
    font-size: 1.25rem;
    margin-bottom: 0.6rem;
}

.pub-card p{
    color: var(--text-secondary);
    line-height: 1.7;
}

.pubs-cta{
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2.2rem;
}

/* Responsive */
@media (max-width: 1024px){
    .rnd-grid{ grid-template-columns: 1fr; }
    .pubs-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 480px){
    .pubs{ padding: 2rem 1.4rem; }
    .rnd-card{ padding: 2.2rem 1.6rem; }
}

/* === CONTACT SECTION === */
.contact-section{
    padding:150px 0 100px;
    background:rgba(255,255,255,0.02);
}

.contact-content{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5rem;
    align-items:start;
}

.contact-info h3{
    font-size:1.8rem;
    margin-bottom:2rem;
    color:var(--text-accent);
}

.contact-info p{
    color:var(--text-secondary);
    margin-bottom:1rem;
    font-size:1.1rem;
}

.contact-info a{
    color:var(--text-accent);
    text-decoration:none;
}

.social-links{
    display:flex;
    gap:1.5rem;
    margin-top:2rem;
    flex-wrap:wrap;
}

.social-links a{
    width:50px;height:50px;
    border:2px solid var(--border-color);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-secondary);
    font-size:1.3rem;
    transition:var(--transition);
}

.social-links a:hover{
    border-color:var(--text-accent);
    color:var(--text-accent);
    transform:translateY(-3px);
}

.contact-form{
    background:rgba(255,255,255,0.05);
    backdrop-filter:blur(20px);
    padding:3rem;
    border-radius:24px;
    border:1px solid var(--border-color);
}

.form-group{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.5rem;
    margin-bottom:1.5rem;
}

/* IMPORTANT FIX: textarea is OUTSIDE .form-group in your HTML,
so we style via .contact-form instead */
.contact-form input,
.contact-form textarea{
    width:100%;
    background:rgba(255,255,255,0.05);
    border:1px solid var(--border-color);
    border-radius:12px;
    padding:1.2rem;
    color:var(--text-primary);
    font-size:1rem;
    transition:var(--transition);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{color:var(--text-secondary);}

.contact-form input:focus,
.contact-form textarea:focus{
    outline:none;
    border-color:var(--text-accent);
    box-shadow:0 0 0 3px rgba(0,212,255,0.1);
}

.contact-form textarea{
    resize:vertical;
    min-height:140px;
    margin-bottom:1.5rem;
}

/* === FOOTER === */
.footer{
    background:rgba(10,10,14,0.95);
    border-top:1px solid var(--border-color);
    padding:4rem 0 2rem;
}

.footer-content{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:3rem;
    margin-bottom:2rem;
}

.footer-logo{
    height:40px;
    margin-bottom:1rem;
}

.footer p{
    color:var(--text-secondary);
    font-size:0.95rem;
}

.footer-links{
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.footer-links a{
    color:var(--text-secondary);
    text-decoration:none;
    font-size:0.95rem;
    transition:var(--transition);
}

.footer-links a:hover{color:var(--text-accent);}

.footer-bottom{
    border-top:1px solid var(--border-color);
    padding-top:2rem;
    text-align:center;
}

.footer-bottom a{
    color:var(--text-accent);
    text-decoration:none;
    margin:0 1rem;
}

/* === COOKIE PROMPT === */
.cookie-prompt{
    position:fixed;
    bottom:0;left:0;right:0;
    background:rgba(10,10,14,0.98);
    backdrop-filter:blur(20px);
    border-top:1px solid var(--border-color);
    padding:2.5rem;
    transform:translateY(100%);
    transition:var(--transition);
    z-index:10000;
}

.cookie-prompt.active{transform:translateY(0);}

.cookie-content{
    max-width:700px;
    margin:0 auto;
}

.cookie-header{
    display:flex;
    align-items:center;
    gap:1rem;
    margin-bottom:1.5rem;
}

.cookie-header i{
    font-size:2rem;
    color:var(--text-accent);
}

.cookie-header h3{
    font-size:1.6rem;
    font-weight:700;
}

.cookie-options{
    display:flex;
    flex-direction:column;
    gap:1rem;
    margin-bottom:2rem;
}

.cookie-option{
    display:flex;
    align-items:center;
    gap:1rem;
    cursor:pointer;
    padding:1rem;
    border-radius:12px;
    transition:background 0.3s ease;
}

.cookie-option:hover{background:rgba(255,255,255,0.05);}

.cookie-option input[type="radio"]{display:none;}

.checkmark{
    width:20px;height:20px;
    border:2px solid var(--border-color);
    border-radius:50%;
    position:relative;
    transition:var(--transition);
}

.cookie-option input[type="radio"]:checked + .checkmark{
    border-color:var(--text-accent);
    background:var(--text-accent);
}

.cookie-option input[type="radio"]:checked + .checkmark::after{
    content:'';
    position:absolute;
    width:10px;height:10px;
    background:white;
    border-radius:50%;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
}

.label-text{
    font-size:1.1rem;
    user-select:none;
}

.cookie-actions{
    display:flex;
    gap:1rem;
    justify-content:center;
    flex-wrap:wrap;
}

/* === RESPONSIVE DESIGN === */
@media (max-width:1024px){
    .hero-content{
        grid-template-columns:1fr;
        gap:4rem;
    }
    
    .hero-description{margin-left:auto;margin-right:auto;}
    
    .hero-visual{height:420px;}
    
    .command-van{width:350px;height:200px;}
}

@media (max-width:768px){
    
    html, body{
        width: 100%;
        overflow-x: hidden;
    }
    
    .header{
        z-index: 10000;
    }
    
    .container{padding:0 16px;}
    
    .hero, .header, .container{
        max-width: 100%;
    }
    
    /* Full-width dropdown drawer */
    .nav-list{
        display: none;
        
        position: fixed;                 /* key: not absolute */
        top: 80px;                       /* header height */
        left: 0;
        right: 0;
        
        width: 100%;
        max-height: calc(100vh - 80px);  /* never exceed screen */
        height: auto;                    /* content defines height */
        
        padding: 18px 18px 22px;
        gap: 14px;
        
        background: rgba(10,10,14,0.98);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--border-color);
        
        flex-direction: column;
        z-index: 10001;
        
        overflow: auto;                  /* if too many items */
        -webkit-overflow-scrolling: touch;
        
        /* drawer animation */
        transform: translateY(-12px);
        opacity: 0;
        pointer-events: none;
        transition: transform .25s ease, opacity .25s ease;
    }
    
    .nav-list.active{
        display: flex;
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
    
    /* Better row-style links (no column icon+text) */
    .nav-link{
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 12px;
        
        padding: 12px 10px;
        border-radius: 14px;
        width: 100%;
        
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.06);
    }
    
    .nav-link::after{ display: none; } /* remove underline bar on mobile */
    
    .nav-link i{
        font-size: 1.1rem;
        width: 22px;
        text-align: center;
    }
    
    .nav-link span{
        font-size: 1.05rem;
    }
    
    .mobile-menu-toggle{display:block;}
    
    .hero{
        padding-top:120px;
        min-height:calc(100vh - 80px);
    }
    
    .hero-cta{
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    
    .hero-cta .btn{
        width: 100%;
        justify-content: center;
        padding: 1rem 1.2rem;         /* smaller padding */
        font-size: 1.05rem;
        border-radius: 18px;          /* looks better on mobile */
    }
    
    .hero-visual{height:360px;}
    
    /* 3) Prevent big words from overflowing */
    .hero-title,
    .hero-subtitle,
    .hero-description{
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    
    .monitor-left,.monitor-right{
        width:180px;
        height:130px;
    }
    
    .command-van{
        width:300px;
        height:180px;
    }
    
    .services-grid{
        grid-template-columns:1fr;
        gap:2rem;
    }
    
    .contact-content{
        grid-template-columns:1fr;
        gap:3rem;
    }
    
    .form-group{grid-template-columns:1fr;}
    
    .footer-content{
        grid-template-columns:1fr;
        text-align:center;
    }
    
    .carousel-track{gap:1.5rem;}
    
    .platform-card{flex:0 0 320px;}
}

@media (max-width:480px){
    .section-header{margin-bottom:3rem;}
    
    .service-card,.platform-card{padding:2rem 1.5rem;}
    
    .contact-form{padding:2rem;}
    
    .cookie-actions{
        flex-direction:column;
        align-items:stretch;
    }
    
    .cookie-content{padding:1rem;}
    
    .hero-visual{height:320px;}
    
    .monitor-left,.monitor-right{
        width:150px;
        height:110px;
    }
    
    .command-van{
        width:260px;
        height:160px;
    }
}

/* === ANIMATIONS === */
@keyframes fadeInUp{
    from{opacity:0;transform:translateY(30px);}
    to{opacity:1;transform:translateY(0);}
}

.service-card,
.platform-card,
.section-header{
    animation:fadeInUp 0.8s ease-out forwards;
}

/* Stagger (safe even if not all visible immediately) */
.service-card:nth-child(1){animation-delay:0.1s;}
.service-card:nth-child(2){animation-delay:0.2s;}
.service-card:nth-child(3){animation-delay:0.3s;}
.service-card:nth-child(4){animation-delay:0.4s;}

/* Scroll animations */
.reveal{
    opacity:0;
    transform:translateY(50px);
    transition:var(--transition);
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}




/* NEWWWWWS */
/* =========================
   NEW: I+D highlight + Projects + Platforms Gallery + Lightbox
========================= */

.id-highlight{
  font-weight: 900;
  letter-spacing: -0.01em;
  padding: 0 .25em;
  border-radius: .5em;
  background: rgba(0,212,255,0.14);
  border: 1px solid rgba(0,212,255,0.35);
  color: var(--text-primary);
  box-shadow: 0 10px 30px rgba(0,212,255,0.08);
}

.id-inline{
  font-weight: 900;
  color: var(--text-accent);
}

/* === PROJECTS SECTION === */
.projects-section{
  padding: 150px 0;
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(10px);
}

.projects-grid{
  display: grid;
  gap: 2rem;
  margin-top: 3.5rem;
}

.project-card{
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-color);
  border-radius: 26px;
  padding: 2.2rem;
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
  transition: var(--transition);
  overflow: hidden;
  position: relative;
}

.project-card:hover{
  transform: translateY(-8px);
  border-color: rgba(0,212,255,0.45);
  box-shadow: var(--shadow-hover);
}

.project-card.featured::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(900px 320px at 20% 0%, rgba(0,212,255,0.16), transparent 55%);
  pointer-events:none;
}

.project-top{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom: 1.2rem;
}

.project-badges, .project-links{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  align-items:center;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.35rem .7rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: var(--text-secondary);
  font-weight:700;
  font-size:.85rem;
}

.pill-strong{
  border-color: rgba(0,212,255,0.35);
  background: rgba(0,212,255,0.12);
  color: var(--text-primary);
}

.pill-link{
  text-decoration:none;
  padding:.35rem .7rem;
  border-radius:999px;
  border:1px solid rgba(0,212,255,0.25);
  background: rgba(0,212,255,0.10);
  color: var(--text-accent);
  font-weight:800;
  font-size:.85rem;
  transition: var(--transition);
}

.pill-link:hover{
  transform: translateY(-2px);
  border-color: rgba(0,212,255,0.55);
  box-shadow: 0 14px 30px rgba(0,212,255,0.12);
}

.project-body{
  display:grid;
  grid-template-columns: 1.45fr .85fr;
  gap: 2rem;
  align-items: start;
}

.project-body.compact{
  grid-template-columns: 1.15fr .85fr;
}

.project-title{
  font-size: 1.9rem;
  margin-bottom: .6rem;
}

.project-lead{
  color: var(--text-secondary);
  font-size: 1.08rem;
  line-height: 1.85;
  margin-bottom: 1.1rem;
}

.project-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.2rem;
}

.project-block{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  border-radius: 18px;
  padding: 1.1rem 1.1rem;
}

.project-block h4{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-size: 1.05rem;
  margin-bottom: .6rem;
}

.clean-list{
  list-style:none;
  display:grid;
  gap:.6rem;
  padding:0;
  margin:0;
}

.clean-list li{
  color: var(--text-secondary);
  position: relative;
  padding-left: 1.15rem;
}

.clean-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width: 8px;
  height: 2px;
  border-radius: 999px;
  background: var(--text-accent);
  opacity: .85;
}

.project-cta-row{
  display:flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}

.project-media{
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

.project-media.small{
  align-self: stretch;
}

.project-cover{
  width: 100%;
  height: 100%;
  max-height: 320px;
  object-fit: cover;
}

.project-meta{
  display:grid;
  gap: .75rem;
  margin-top: 1.1rem;
  padding: 1.1rem;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}

.meta-item{
  display:flex;
  justify-content:space-between;
  gap: 1rem;
}

.meta-k{
  color: var(--text-secondary);
  font-weight: 700;
}

.meta-v{
  color: var(--text-primary);
  font-weight: 800;
  text-align: right;
}

.project-footnote{
  color: rgba(184,188,199,0.8);
  font-size: .9rem;
  margin-top: 1rem;
}

/* === PLATFORMS SECTION === */
.platforms-section{
  padding: 150px 0;
}

.platforms-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 3.5rem;
}

.platformX-card{
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-color);
  border-radius: 26px;
  padding: 2.2rem;
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
  transition: var(--transition);
  overflow: hidden;
}

.platformX-card:hover{
  transform: translateY(-8px);
  border-color: rgba(0,212,255,0.45);
  box-shadow: var(--shadow-hover);
}

.platformX-head{
  display:flex;
  justify-content:space-between;
  gap: 1rem;
  flex-wrap:wrap;
  margin-bottom: 1.2rem;
}

.platformX-kicker{
  display:inline-flex;
  padding:.35rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(0,212,255,0.28);
  background: rgba(0,212,255,0.10);
  color: var(--text-accent);
  font-weight: 900;
  font-size: .85rem;
  margin-bottom: .65rem;
}

.platformX-sub{
  color: var(--text-secondary);
  line-height: 1.8;
  margin-top: .5rem;
  max-width: 720px;
}

.platformX-tags{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:flex-start;
}

/* Gallery grid */
.gallery{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin: 1.15rem 0 1.25rem;
}

.g-item{
  padding:0;
  border:none;
  background: transparent;
  cursor:pointer;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.10);
  transition: var(--transition);
  position:relative;
}

.g-item img{
  width:100%;
  height: 150px;
  object-fit: cover;
  transform: scale(1.02);
  transition: var(--transition);
}

.g-item:hover{
  transform: translateY(-4px);
  border-color: rgba(0,212,255,0.45);
  box-shadow: 0 18px 40px rgba(0,212,255,0.10);
}

.g-item:hover img{
  transform: scale(1.08);
}

.platformX-body{
  margin-top: .2rem;
}

/* === LIGHTBOX === */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 20000;
  display:none;
}

.lightbox.active{ display:block; }

.lb-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(10px);
}

.lb-panel{
  position:absolute;
  inset: 24px;
  max-width: 1200px;
  margin: auto;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(10,10,14,0.92);
  box-shadow: 0 30px 70px rgba(0,0,0,0.55);
  overflow:hidden;
}

.lb-close{
  position:absolute;
  top: 14px;
  right: 14px;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
  cursor:pointer;
  transition: var(--transition);
  z-index: 2;
}

.lb-close:hover{
  transform: translateY(-2px);
  border-color: rgba(0,212,255,0.45);
}

.lb-nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
  cursor:pointer;
  transition: var(--transition);
  z-index: 2;
}

.lb-prev{ left: 16px; }
.lb-next{ right: 16px; }

.lb-nav:hover{
  transform: translateY(-50%) scale(1.04);
  border-color: rgba(0,212,255,0.45);
  box-shadow: 0 20px 40px rgba(0,212,255,0.10);
}

.lb-figure{
  height: 100%;
  display:flex;
  flex-direction: column;
}

#lb-img{
  width: 100%;
  height: calc(100% - 72px);
  object-fit: contain;
  background: rgba(0,0,0,0.35);
}

#lb-cap{
  height: 72px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0 22px;
  color: var(--text-secondary);
  border-top: 1px solid rgba(255,255,255,0.10);
}

/* Responsive */
@media (max-width: 1024px){
  .project-body, .project-body.compact{
    grid-template-columns: 1fr;
  }
  .project-split{
    grid-template-columns: 1fr;
  }
  .platforms-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px){
  .gallery{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .g-item img{ height: 140px; }
  .lb-panel{ inset: 14px; }
  .lb-nav{ display:none; } /* swipe/keyboard still works */
}

/* =========================
   STARTER LOADER (DH + circular progress)
========================= */
.starter{
  position: fixed;
  inset: 0;
  z-index: 30000;
  display: grid;
  place-items: center;
  background:
    radial-gradient(900px 500px at 50% 35%, rgba(0,212,255,0.10), transparent 55%),
    radial-gradient(circle at top, #0a0a0a, #000);
  transition: opacity .55s ease, visibility .55s ease;
}

.starter-card{
  width: min(520px, 92vw);
  padding: 34px 28px 28px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(10,10,14,0.70);
  backdrop-filter: blur(18px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.65);
  display: grid;
  gap: 18px;
  justify-items: center;
}

.starter-logo-wrap{
  position: relative;
  width: 180px;
  height: 180px;
  display: grid;
  place-items: center;
}

.starter-logo{
  width: 92px;
  height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,0.55));
  transform: translateZ(0);
}

.starter-ring{
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

.ring-track{
  fill: none;
  stroke: rgba(255,255,255,0.10);
  stroke-width: 8;
}

.ring-progress{
  fill: none;
  stroke: rgba(0,212,255,0.95);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 302; /* 2πr with r=48 => ~301.59 */
  stroke-dashoffset: 302;
  filter: url(#glow);
  transition: stroke .25s ease;
}

.starter-meta{
  text-align: center;
}

.starter-kicker{
  color: rgba(184,188,199,0.95);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .78rem;
}

.starter-percent{
  margin-top: 6px;
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 18px 30px rgba(0,0,0,0.55);
}

.pct-symbol{
  font-size: 1.25rem;
  opacity: .9;
  margin-left: 4px;
}

.starter-hint{
  margin-top: 8px;
  color: rgba(184,188,199,0.85);
  font-size: 1.02rem;
}

.starter.is-done{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* lock scroll while loading */
body.is-loading{
  overflow: hidden;
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce){
  .starter{ transition: none; }
  .ring-progress{ transition: none; }
}

/* FANHOPPER video + card layout */
.section-video.fanhopper{
  margin-top: 2.5rem;
}

.fanhopper-grid{
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 1.8rem;
  align-items: stretch;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.fanhopper-media .demo-video{
  max-width: 100%;
  height: 100%;
  min-height: 360px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
}

.fanhopper-card{
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-color);
  border-radius: 22px;
  padding: 1.6rem 1.5rem;
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}

.fanhopper-title{
  font-size: 1.6rem;
  margin: .55rem 0 .75rem;
}

.fanhopper-text{
  color: var(--text-secondary);
  line-height: 1.85;
  margin-bottom: 1rem;
}

@media (max-width: 1024px){
  .fanhopper-grid{ grid-template-columns: 1fr; }
  .fanhopper-media .demo-video{ min-height: 280px; }
}

/* =========================
   TEAM / BIOGRAPHY SECTION
========================= */
.team-section{
  padding: 150px 0;
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(10px);
}

.team-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 2rem;
  margin-top: 3.5rem;
}

.person-card{
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-color);
  border-radius: 26px;
  padding: 2.2rem;
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
  transition: var(--transition);
  overflow: hidden;
  position: relative;
}

.person-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(900px 320px at 20% 0%, rgba(0,212,255,0.12), transparent 60%);
  opacity: 0;
  transition: var(--transition);
  pointer-events:none;
}

.person-card:hover{
  transform: translateY(-8px);
  border-color: rgba(0,212,255,0.45);
  box-shadow: var(--shadow-hover);
}

.person-card:hover::before{ opacity: 1; }

.person-top{
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 1.2rem;
  align-items: center;
  margin-bottom: 1.2rem;
}

.avatar-wrap{
  position: relative;
  width: 160px;
  height: 160px;
  display: grid;
  place-items: center;
}

.avatar{
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 35px rgba(0,0,0,0.45);
  background: rgba(0,0,0,0.25);
}

.avatar-ring{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(0,212,255,0.35);
  box-shadow: 0 0 0 6px rgba(0,212,255,0.08);
  animation: ringSpin 5.2s linear infinite;
}

@keyframes ringSpin{
  to{ transform: rotate(360deg); }
}

.person-name{
  font-size: 1.55rem;
  margin-bottom: .15rem;
}

.person-role{
  color: var(--text-accent);
  font-weight: 800;
  margin-bottom: .75rem;
}

.person-tags{
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  align-items: center;
}

.person-bio{
  color: var(--text-secondary);
  line-height: 1.85;
  margin-bottom: 1.1rem;
}

.person-actions{
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

.person-actions .btn{
  padding: .9rem 1.3rem;
  font-size: 1rem;
  border-radius: 18px;
}

.person-contactline{
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,0.10);
  color: rgba(184,188,199,0.9);
  font-weight: 650;
  font-size: .95rem;
}

.person-contactline i{
  color: var(--text-accent);
  margin-right: .45rem;
}

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

  /* Stack avatar ABOVE text */
  .person-top{
    grid-template-columns: 1fr;   /* single column */
    text-align: center;
    gap: 1rem;
  }

  /* Center avatar block */
  .avatar-wrap{
    margin: 0 auto;
    width: 130px;   /* bigger avatar on mobile */
    height: 130px;
  }

  .avatar{
    width: 120px;
    height: 120px;
  }

  /* Center titles and tags */
  .person-head{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .person-name{
    font-size: 1.6rem;
  }

  .person-role{
    margin-bottom: .6rem;
  }

  .person-tags{
    justify-content: center;
  }

  /* Actions centered */
  .person-actions{
    justify-content: center;
  }

  /* Contact line stacked nicely */
  .person-contactline{
    justify-content: center;
    text-align: center;
  }
}


/* =========================
   STARTER — FULLSCREEN GIF (NO CARD, NO MARGINS)
========================= */

/* Starter already fixed full screen — keep it */
.starter{
  position: fixed;
  inset: 0;
  z-index: 30000;
  background: #000; /* fallback behind gif */
  display: grid;
  place-items: center;
}

/* REMOVE the card look completely */
.starter-card,
.starter-card--minimal{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;

  display: grid;
  place-items: center;
}

/* GIF takes the whole screen */
.starter-logo-wrap--gif{
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
}

/* Fullscreen circular GIF */
.starter-gif{
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;       /* <-- llena toda la pantalla */
  object-position: center; /* centra el círculo */
  filter:
    drop-shadow(0 0 60px rgba(0,212,255,0.35))
    drop-shadow(0 0 120px rgba(120,80,255,0.25));
}

/* DH logo perfectly centered */
.starter-logo--overlay{
  position: absolute;
  width: clamp(200px, 12vw, 120px);
  height: auto;
  pointer-events: none;
  filter:
    drop-shadow(0 12px 24px rgba(0,0,0,0.6))
    drop-shadow(0 0 22px rgba(0,212,255,0.35));
}

/* Meta (percentage + welcome) floating near bottom */
.starter-meta--minimal{
  position: absolute;
  bottom: 8vh;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

/* Percentage */
.starter-percent{
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 12px 28px rgba(0,0,0,0.6);
}

/* Welcome line */
.starter-welcome{
  margin-top: 8px;
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  color: rgba(200,210,230,0.9);
  letter-spacing: 0.02em;
}

/* Fade-out still works */
.starter.is-done{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .6s ease;
}

/* Optional breathing for DH */
@keyframes dhBreath{
  0%,100%{ transform: scale(1); opacity: 0.98; }
  50%{ transform: scale(1.05); opacity: 1; }
}
.starter-logo--overlay{
  animation: dhBreath 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .starter-logo--overlay{ animation: none; }
}

.cdti-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    padding: 4px 10px;

    transform: translateY(-5px);

    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;

    color: #0b4f9c;
    background: linear-gradient(135deg, #e7f0ff, #f4f8ff);

    border: 1px solid rgba(11, 79, 156, 0.35);
    border-radius: 999px;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.5),
        0 4px 10px rgba(11,79,156,0.15);
}