/*
Theme Name: Hacker
Theme URI: https://sentrixnetworks.com
Author: Sentrix Networks
Description: Custom theme for Sentrix Networks IT Consulting
Version: 1.0.0
License: Private
Text Domain: sentrix-networks
*/

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    :root{
      --bg-primary:#06101E;--bg-surface:#0B1929;--bg-elevated:#0F2035;
      --accent-cyan:#00C8E8;--accent-blue:#1A7FFF;--accent-glow:rgba(0,200,232,0.15);
      --text-primary:#EDF2F8;--text-secondary:#8CA3BE;--text-muted:#4E6780;
      --border:rgba(0,200,232,0.12);--border-subtle:rgba(255,255,255,0.06);
      --accent-green:#00FF41;--font-display:"Share Tech Mono",monospace;--font-body:"Fira Code",monospace
    }
    html{scroll-behavior:smooth}
    body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);font-size:16px;line-height:1.6;overflow-x:hidden}

    /* NAV */
    nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:0 5%;height:72px;display:flex;align-items:center;justify-content:space-between;background:rgba(6,16,30,0.85);backdrop-filter:blur(20px);border-bottom:1px solid var(--border-subtle);transition:all .3s ease}
    .nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
    .nav-logo-icon{width:36px;height:36px;background:transparent;border-radius:8px;display:flex;align-items:center;justify-content:center}
    .nav-logo-text{font-family:var(--font-display);font-weight:700;font-size:1.2rem;color:var(--text-primary);letter-spacing:.02em}
    .nav-logo-text span{color:var(--accent-cyan)}
    .nav-links{display:flex;align-items:center;gap:2rem;list-style:none}
    .nav-links a{color:var(--text-secondary);text-decoration:none;font-size:.9rem;font-weight:500;letter-spacing:.02em;transition:color .2s}
    .nav-links a:hover{color:var(--text-primary)}
    .nav-cta{background:transparent!important;border:1px solid var(--accent-cyan)!important;color:var(--accent-cyan)!important;padding:8px 20px;border-radius:6px;font-weight:600!important}
    .nav-cta:hover{background:var(--accent-cyan)!important;color:var(--bg-primary)!important}

    /* HERO */
    .hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0 5%;background-image:url("https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=1920&q=80");background-size:cover;background-position:center}
    #hero-canvas{position:absolute;inset:0;width:100%;height:100%}
    .hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(6,16,30,.97) 0%,rgba(6,16,30,.82) 50%,rgba(6,16,30,.93) 100%)}
    .hero-content{position:relative;z-index:2;max-width:720px;text-align:center;margin:0 auto}
    .hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(0,200,232,.1);border:1px solid rgba(0,200,232,.3);border-radius:100px;padding:6px 16px;margin-bottom:2rem;font-size:.8rem;font-weight:600;color:var(--accent-cyan);letter-spacing:.08em;text-transform:uppercase;animation:fadeInUp .6s ease both}
    .hero-badge::before{content:"";width:6px;height:6px;background:var(--accent-cyan);border-radius:50%;animation:pulse 2s infinite}
    @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
    h1{font-family:var(--font-display);font-size:clamp(2.8rem,6vw,5.2rem);font-weight:800;line-height:1.08;letter-spacing:-.02em;color:var(--text-primary);margin-bottom:1.5rem;animation:fadeInUp .6s ease .1s both}
    h1 .highlight{background:linear-gradient(90deg,var(--accent-cyan),var(--accent-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
    .hero-sub{font-size:1.15rem;color:var(--text-secondary);font-weight:300;line-height:1.7;max-width:560px;margin:0 auto 2.5rem;animation:fadeInUp .6s ease .2s both}
    .hero-actions{display:flex;gap:1rem;align-items:center;justify-content:center;flex-wrap:wrap;animation:fadeInUp .6s ease .3s both}
    .btn-primary{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--accent-cyan),var(--accent-blue));color:#fff;padding:14px 28px;border-radius:8px;font-weight:600;font-size:.95rem;text-decoration:none;border:none;cursor:pointer;transition:all .25s;letter-spacing:.01em;box-shadow:0 0 30px rgba(0,200,232,.25)}
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 50px rgba(0,200,232,.4)}
    .btn-secondary{display:inline-flex;align-items:center;gap:8px;color:var(--text-secondary);padding:14px 20px;border-radius:8px;font-weight:500;font-size:.95rem;text-decoration:none;transition:color .2s}
    .btn-secondary:hover{color:var(--text-primary)}
    .hero-stats{position:relative;z-index:2;display:flex;gap:2.5rem;margin-top:4rem;justify-content:center;animation:fadeInUp .6s ease .4s both;flex-wrap:wrap}
    .stat{display:flex;flex-direction:column}
    .stat-number{font-family:var(--font-display);font-size:1.8rem;font-weight:800;color:var(--text-primary);line-height:1}
    .stat-label{font-size:.8rem;color:var(--text-muted);margin-top:4px;text-transform:uppercase;letter-spacing:.06em}
    .stat-divider{width:1px;background:var(--border-subtle)}
    @keyframes fadeInUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

    /* SECTIONS */
    section{padding:6rem 5%}
    .section-label{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-cyan);margin-bottom:1rem}
    .section-label::before{content:"";display:block;width:24px;height:2px;background:var(--accent-cyan)}
    .section-title{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--text-primary);margin-bottom:1rem}
    .section-body{font-size:1.05rem;color:var(--text-secondary);font-weight:300;line-height:1.7;max-width:600px}

    /* SERVICES */
    #services{background:var(--bg-surface);position:relative}
    #services::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent-cyan),transparent);opacity:.3}
    .services-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:3.5rem;gap:2rem;flex-wrap:wrap}
    .services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5px;background:var(--border-subtle);border:1px solid var(--border-subtle);border-radius:20px;overflow:hidden}
    @media(max-width:1080px){.services-grid{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:580px){.services-grid{grid-template-columns:1fr}}
    
    .service-card{background:var(--bg-surface);padding:2.5rem;transition:background .3s;position:relative;overflow:hidden}
    .service-card::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent-cyan),var(--accent-blue));transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
    .service-card:hover{background:var(--bg-elevated)}
    .service-card:hover::after{transform:scaleX(1)}
    .service-icon{width:52px;height:52px;border-radius:12px;background:var(--accent-glow);border:1px solid rgba(0,200,232,.2);display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;transition:all .3s}
    .service-card:hover .service-icon{background:rgba(0,200,232,.2);border-color:rgba(0,200,232,.4)}
    .service-icon svg{width:24px;height:24px;color:var(--accent-cyan)}
    .service-title{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--text-primary);margin-bottom:.75rem;letter-spacing:.01em}
    .service-desc{font-size:.9rem;color:var(--text-secondary);line-height:1.65;font-weight:300}

    /* TRUST */
    #trust{background:var(--bg-primary);position:relative;overflow:hidden}
    .trust-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:3.5rem;align-items:start}
    .trust-pillars{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:3rem}
    .trust-pillar{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:12px;padding:1.5rem;transition:border-color .3s}
    .trust-pillar:hover{border-color:rgba(0,200,232,.25)}
    .pillar-icon{font-size:1.5rem;margin-bottom:.75rem}
    .pillar-title{font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--text-primary);margin-bottom:.4rem}
    .pillar-desc{font-size:.82rem;color:var(--text-secondary);line-height:1.55}
    .trust-diagram{background:var(--bg-surface);border:1px solid var(--border);border-radius:20px;padding:2.5rem}
    .diagram-header{display:flex;align-items:center;gap:8px;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border-subtle)}
    .diagram-header-dot{width:8px;height:8px;border-radius:50%}
    .diagram-title{font-size:.8rem;font-weight:600;color:var(--text-secondary);letter-spacing:.05em}
    .diagram-node{display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;background:var(--bg-elevated);border-radius:10px;border:1px solid var(--border-subtle);margin-bottom:.75rem;transition:border-color .3s}
    .diagram-node:last-child{margin-bottom:0}
    .diagram-node:hover{border-color:rgba(0,200,232,.3)}
    .node-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
    .node-dot.green{background:#22C55E;box-shadow:0 0 8px rgba(34,197,94,.5)}
    .node-dot.cyan{background:var(--accent-cyan);box-shadow:0 0 8px rgba(0,200,232,.5)}
    .node-dot.blue{background:var(--accent-blue);box-shadow:0 0 8px rgba(26,127,255,.5)}
    .node-dot.yellow{background:#F59E0B;box-shadow:0 0 8px rgba(245,158,11,.5)}
    .node-text{flex:1}
    .node-title{font-size:.85rem;font-weight:600;color:var(--text-primary)}
    .node-sub{font-size:.75rem;color:var(--text-muted)}
    .node-status{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
    .node-status.active{color:#22C55E}
    .node-status.secured{color:var(--accent-cyan)}
    .node-status.synced{color:var(--accent-blue)}
    .node-status.protected{color:#F59E0B}

    /* ABOUT */
    #about{background:var(--bg-surface)}
    .about-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:5rem;align-items:center}
    .about-accent-block{background:var(--bg-elevated);border:1px solid var(--border);border-radius:20px;padding:3rem;position:relative;overflow:hidden}
    .about-accent-block::before{content:"";position:absolute;top:-50%;right:-30%;width:300px;height:300px;background:radial-gradient(circle,rgba(0,200,232,.08),transparent 70%);pointer-events:none}
    .about-big-text{font-family:var(--font-display);font-size:4rem;font-weight:800;line-height:1;color:var(--text-primary);margin-bottom:.5rem}
    .about-big-text span{background:linear-gradient(90deg,var(--accent-cyan),var(--accent-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
    .about-big-label{font-size:.85rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2rem}
    .about-tagline{font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:var(--text-primary);line-height:1.4}
    .about-body{font-size:1.05rem;color:var(--text-secondary);line-height:1.75;font-weight:300;margin-top:1.5rem}
    .about-features{margin-top:2rem;display:flex;flex-direction:column;gap:.75rem}
    .about-feature{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--text-secondary);padding-left:28px;position:relative}
    .about-feature::before{content:"";position:absolute;left:0;width:18px;height:18px;border-radius:50%;background:rgba(0,200,232,.15);border:1px solid rgba(0,200,232,.4);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%2300C8E8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:10px}

    /* ABOUT PHOTO */
    .about-photo-wrap{border-radius:20px;overflow:hidden;border:1px solid var(--border);position:relative}
    .about-photo-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,16,30,.75) 100%)}
    .about-photo{width:100%;height:100%;min-height:420px;object-fit:cover;display:block;filter:brightness(.88) saturate(.85)}
    .about-photo-caption{position:absolute;bottom:2rem;left:2rem;right:2rem;z-index:2}
    .about-photo-caption-title{font-family:"Syne",sans-serif;font-size:1.5rem;font-weight:800;color:#EDF2F8;margin-bottom:.25rem}
    .about-photo-caption-sub{font-size:.82rem;color:rgba(237,242,248,.65);letter-spacing:.06em;text-transform:uppercase}

    /* CTA */
    #cta{position:relative;overflow:hidden;text-align:center;background-image:url("https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&w=1920&q=80");background-size:cover;background-position:center top}
    .cta-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:300px;background:radial-gradient(ellipse,rgba(0,200,232,.07),transparent 70%);pointer-events:none}
    .cta-inner{position:relative;max-width:680px;margin:0 auto}
    .cta-title{font-family:var(--font-display);font-size:clamp(2rem,4.5vw,3.5rem);font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--text-primary);margin-bottom:1.25rem}
    .cta-body{font-size:1.1rem;color:var(--text-secondary);font-weight:300;line-height:1.7;margin-bottom:2.5rem}
    .cta-actions{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}
    .btn-outline{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--text-secondary);padding:14px 28px;border-radius:8px;font-weight:500;font-size:.95rem;text-decoration:none;border:1px solid var(--border-subtle);cursor:pointer;transition:all .25s}
    .btn-outline:hover{border-color:rgba(0,200,232,.3);color:var(--text-primary)}

    /* CONTACT */
    #contact{background:var(--bg-surface);position:relative}
    #contact::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent-cyan),transparent);opacity:.3}
    .contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:5rem;align-items:start}
    .contact-detail{display:flex;align-items:flex-start;gap:1rem;margin-top:2rem;padding-top:2rem;border-top:1px solid var(--border-subtle)}
    .contact-detail:first-of-type{margin-top:2.5rem}
    .contact-detail-icon{width:42px;height:42px;background:var(--accent-glow);border:1px solid rgba(0,200,232,.2);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .contact-detail-icon svg{width:18px;height:18px;color:var(--accent-cyan)}
    .contact-detail-text strong{display:block;font-size:.85rem;font-weight:600;color:var(--text-primary);margin-bottom:2px}
    .contact-detail-text span{font-size:.85rem;color:var(--text-muted)}
    .contact-form{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:20px;padding:2.5rem}
    .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
    .form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:1rem}
    .form-group:last-of-type{margin-bottom:0}
    label{font-size:.8rem;font-weight:600;color:var(--text-secondary);letter-spacing:.05em;text-transform:uppercase}
    input,textarea{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:8px;padding:12px 16px;color:var(--text-primary);font-family:var(--font-body);font-size:.9rem;font-weight:300;transition:border-color .2s,box-shadow .2s;outline:none;width:100%}
    input::placeholder,textarea::placeholder{color:var(--text-muted)}
    input:focus,textarea:focus{border-color:rgba(0,200,232,.5);box-shadow:0 0 0 3px rgba(0,200,232,.08)}
    textarea{resize:vertical;min-height:130px}
    .form-submit{margin-top:1.5rem}
    .form-submit .btn-primary{width:100%;justify-content:center;font-family:var(--font-body)}

    /* FOOTER */
    footer{background:var(--bg-primary);border-top:1px solid var(--border-subtle);padding:3rem 5%;display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
    .footer-text{font-size:.85rem;color:var(--text-muted)}
    .footer-links{display:flex;gap:1.5rem;list-style:none}
    .footer-links a{font-size:.82rem;color:var(--text-muted);text-decoration:none;transition:color .2s}
    .footer-links a:hover{color:var(--text-secondary)}

    /* SCROLL REVEAL */
    .reveal{opacity:0;transform:translateY(30px);transition:opacity .65s ease,transform .65s ease}
    .reveal.visible{opacity:1;transform:translateY(0)}
    .reveal-delay-1{transition-delay:.1s}
    .reveal-delay-2{transition-delay:.2s}
    .reveal-delay-3{transition-delay:.3s}
    .reveal-delay-4{transition-delay:.4s}

    /* RESPONSIVE */
    @media(max-width:900px){
      .trust-grid,.about-grid,.contact-grid{grid-template-columns:1fr;gap:3rem}
      .services-header{flex-direction:column;align-items:flex-start}
      .nav-links{display:none}
      .hero-stats{gap:1.5rem}
    }
    @media(max-width:600px){
      .form-row{grid-template-columns:1fr}
      .trust-pillars{grid-template-columns:1fr}
      section{padding:4rem 5%}
      .hero-stats{flex-wrap:wrap}
    }

    ::-webkit-scrollbar{width:14px}
    ::-webkit-scrollbar-track{background:var(--bg-primary)}
    ::-webkit-scrollbar-thumb{background:rgba(0,255,65,.3);border-radius:3px;border:3px solid var(--bg-primary)}
    ::-webkit-scrollbar-thumb:hover{background:rgba(0,255,65,.55)}
    ::-webkit-scrollbar-button:single-button:vertical:decrement{display:block;height:14px;width:14px;background:var(--bg-surface);border-bottom:1px solid rgba(0,255,65,.15);background-image:url('data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M4 0L8 5H0Z' fill='%2300FF41' opacity='.6'/%3E%3C/svg%3E');background-repeat:no-repeat;background-position:center}
    ::-webkit-scrollbar-button:single-button:vertical:decrement:hover{background-color:var(--bg-elevated)}
    ::-webkit-scrollbar-button:single-button:vertical:increment{display:block;height:14px;width:14px;background:var(--bg-surface);border-top:1px solid rgba(0,255,65,.15);background-image:url('data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M4 5L0 0H8Z' fill='%2300FF41' opacity='.6'/%3E%3C/svg%3E');background-repeat:no-repeat;background-position:center}
    ::-webkit-scrollbar-button:single-button:vertical:increment:hover{background-color:var(--bg-elevated)}
    /* SCANLINES */
    body::after{content:"";position:fixed;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.055),rgba(0,0,0,.055) 1px,transparent 1px,transparent 2px);pointer-events:none;z-index:9999;opacity:.4}

    /* GLITCH on h1 */
    @keyframes glitch{
      0%,93%,100%{transform:none;text-shadow:none}
      94%{transform:translateX(-3px);text-shadow:-2px 0 #00FF41,2px 0 var(--accent-cyan)}
      96%{transform:translateX(3px);text-shadow:2px 0 #00FF41,-2px 0 var(--accent-cyan)}
      98%{transform:translateX(-1px) skewX(-2deg);text-shadow:none}
    }
    h1{animation:glitch 9s infinite !important}

    /* BLINKING CURSOR */
    @keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
    .cursor::after{content:"_";animation:blink 1s step-end infinite;color:#00FF41}

    /* TERMINAL BADGE */
    .hero-badge{font-family:"Share Tech Mono",monospace !important;letter-spacing:.04em !important;border-radius:4px !important;background:rgba(0,255,65,.08) !important;border-color:rgba(0,255,65,.35) !important;color:#00FF41 !important}
    .hero-badge::before{background:#00FF41 !important}

    /* SECTION LABELS */
    .section-label{font-family:"Share Tech Mono",monospace !important;color:#00FF41 !important}
    .section-label::before{background:#00FF41 !important}

    /* SERVICE CARD bottom bar */
    .service-card::after{background:linear-gradient(90deg,#00FF41,var(--accent-cyan)) !important}

    /* TRUST PILLARS */
    .trust-pillar:hover{border-color:rgba(0,255,65,.3) !important;box-shadow:0 0 20px rgba(0,255,65,.05)}

    /* HEADING SIZE FIX — monospace needs tighter clamp */
    h1{font-size:clamp(2rem,4.2vw,3.5rem) !important;letter-spacing:.02em !important;line-height:1.18 !important}
    .section-title{letter-spacing:.01em !important;font-size:clamp(1.5rem,3vw,2.2rem) !important}
    .cta-title{font-size:clamp(1.5rem,3.2vw,2.4rem) !important;letter-spacing:.01em !important}
    .about-big-text{font-size:2.6rem !important}
    .stat-number{font-size:1.4rem !important}

    /* INPUT / FORM fields */
    input,textarea{font-family:"Fira Code",monospace !important}
    input:focus,textarea:focus{box-shadow:0 0 0 3px rgba(0,255,65,.1) !important;border-color:rgba(0,255,65,.45) !important}

    /* SCROLLBAR */


    /* NAV */
    .nav-links a:hover{color:#00FF41 !important}
    .nav-cta{border-color:#00FF41 !important;color:#00FF41 !important}
    .nav-cta:hover{background:#00FF41 !important;color:#06101E !important}

    /* BTN glow */
    .btn-primary:hover{box-shadow:0 0 50px rgba(0,255,65,.2),0 0 30px rgba(0,200,232,.15) !important}

    /* DIAGRAM active glow */
    .node-status.active{text-shadow:0 0 8px rgba(0,255,65,.7)}

    /* PHOTO strip dark tint */
    .services-photo-strip img{filter:brightness(.65) saturate(.6) hue-rotate(120deg) !important}

/* == DISCLAIMER POPUP == */
.disclaimer-popup{
  position:fixed;bottom:0;left:0;right:0;z-index:99999;
  transform:translateY(100%);opacity:0;
  transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .45s ease;
  pointer-events:none;
}
.disclaimer-popup.visible{transform:translateY(0);opacity:1;pointer-events:all}
.disclaimer-popup.hiding{transform:translateY(110%);opacity:0;pointer-events:none}
.disclaimer-inner{
  background:rgba(11,25,41,.97);
  backdrop-filter:blur(24px);
  border-top:1px solid rgba(0,200,232,.2);
  padding:1.25rem 5%;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  box-shadow:0 -8px 40px rgba(0,0,0,.5);
  position:relative;
}
.disclaimer-left{display:flex;align-items:center;gap:1.25rem;flex:1;min-width:260px}
.disclaimer-icon{
  width:42px;height:42px;flex-shrink:0;
  background:rgba(0,200,232,.1);border:1px solid rgba(0,200,232,.25);border-radius:10px;
  display:flex;align-items:center;justify-content:center;color:var(--accent-cyan);
}
.disclaimer-text strong{display:block;font-size:.88rem;font-weight:700;color:var(--text-primary);margin-bottom:.2rem;font-family:var(--font-display)}
.disclaimer-text p{font-size:.8rem;color:var(--text-muted);line-height:1.5;margin:0}
.disclaimer-link{color:var(--accent-cyan);text-decoration:none;border-bottom:1px solid rgba(0,200,232,.3)}
.disclaimer-link:hover{border-color:var(--accent-cyan)}
.disclaimer-actions{display:flex;gap:.75rem;align-items:center;flex-shrink:0}
.disclaimer-accept{
  background:linear-gradient(135deg,var(--accent-cyan),var(--accent-blue));
  color:#fff;border:none;border-radius:7px;padding:9px 22px;
  font-family:var(--font-display);font-size:.82rem;font-weight:600;
  cursor:pointer;transition:all .2s;letter-spacing:.03em;white-space:nowrap;
}
.disclaimer-accept:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,200,232,.3)}
.disclaimer-decline{
  background:transparent;color:var(--text-muted);border:1px solid var(--border-subtle);
  border-radius:7px;padding:9px 18px;font-family:var(--font-display);font-size:.82rem;
  cursor:pointer;transition:all .2s;white-space:nowrap;
}
.disclaimer-decline:hover{color:var(--text-secondary);border-color:rgba(255,255,255,.2)}
.disclaimer-close{
  background:none;border:none;color:var(--text-muted);font-size:1.5rem;
  cursor:pointer;padding:2px 8px;line-height:1;transition:color .2s;position:absolute;top:.9rem;right:1.2rem;
}
.disclaimer-close:hover{color:var(--text-primary)}
@media(max-width:700px){
  .disclaimer-inner{flex-direction:column;align-items:flex-start;gap:1rem;padding-right:3rem}
  .disclaimer-actions{width:100%}
  .disclaimer-accept,.disclaimer-decline{flex:1;text-align:center}
}


/* == VISUAL IMPROVEMENTS == */
.hero-stats{gap:3rem;padding-top:.5rem}
.stat-number{font-size:1.55rem !important}
.stat-label{font-size:.72rem;letter-spacing:.1em}
.stat-divider{height:30px;align-self:center}

.service-card{padding:2rem 2.25rem !important}
.service-icon{width:46px !important;height:46px !important;margin-bottom:1.2rem !important}
.service-title{font-size:1rem !important;margin-bottom:.55rem !important}
.service-desc{font-size:.875rem !important;line-height:1.62 !important}
.about-grid{gap:4rem !important}
.about-photo{min-height:460px !important}
.about-big-text{font-size:2.8rem !important}
.about-body{font-size:1rem !important;line-height:1.8 !important;margin-top:1.2rem !important}
.about-features{margin-top:1.75rem !important;gap:.65rem !important}
.about-feature{font-size:.875rem !important}
.contact-grid{gap:4rem !important}
.contact-form{padding:2.25rem !important;border-radius:16px !important}
.contact-detail-icon{width:40px !important;height:40px !important;border-radius:9px !important}
.contact-detail-text strong,.contact-detail-text span{font-size:.82rem !important}
.cta-title{font-size:clamp(1.6rem,3vw,2.6rem) !important}
.cta-body{font-size:1rem !important}
footer{padding:2.5rem 5% !important}
nav{height:68px !important}
section{padding:5.5rem 5% !important}
.btn-primary{padding:13px 26px !important;font-size:.92rem !important}
.btn-secondary,.btn-outline{padding:13px 18px !important;font-size:.92rem !important}
input,textarea{padding:11px 15px !important;font-size:.875rem !important;border-radius:7px !important}
textarea{min-height:120px !important}
label{font-size:.76rem !important}
.service-card{transition:background .25s,box-shadow .25s}
.service-card:hover{box-shadow:inset 0 0 0 1px rgba(0,200,232,.15)}
.services-photo-strip > div{transition:transform .3s ease}
.services-photo-strip > div:hover{transform:scale(1.01)}

/* == MAX WIDTH == */
section { padding-left: max(5%, calc(50% - 500px)) !important; padding-right: max(5%, calc(50% - 500px)) !important; }
nav { padding-left: max(5%, calc(50% - 500px)); padding-right: max(5%, calc(50% - 500px)); }
footer { padding-left: max(5%, calc(50% - 500px)) !important; padding-right: max(5%, calc(50% - 500px)) !important; }

/* == LEGAL PAGES == */
.legal-page { max-width: 800px; margin: 0 auto; }
.legal-page .legal-effective { font-size: .85rem; color: var(--text-muted); border-left: 3px solid var(--accent-cyan); padding-left: 1rem; margin-bottom: 2.5rem; font-family: var(--font-display); }
.legal-page h2 { font-family: var(--font-display); font-size: 1.1rem; color: var(--accent-cyan); margin: 2.5rem 0 .75rem; letter-spacing: .03em; }
.legal-page p { font-size: .95rem; color: var(--text-secondary); line-height: 1.8; margin-bottom: 1rem; }
.legal-page ul { padding-left: 1.5rem; margin-bottom: 1rem; }
.legal-page ul li { font-size: .95rem; color: var(--text-secondary); line-height: 1.8; margin-bottom: .35rem; }
.legal-page a { color: var(--accent-cyan); text-decoration: none; border-bottom: 1px solid rgba(0,200,232,.3); }
.legal-page a:hover { border-color: var(--accent-cyan); }
.legal-page strong { color: var(--text-primary); font-weight: 600; }
.page-template-default .hero { min-height: 28vh; }
.page-template-default section#legal-content { padding: 4rem 5%; }
/* == TRUST SECTION == */
#trust .section-title, #trust .section-label, #trust .trust-intro { max-width: 620px; }
#trust .trust-intro { margin-bottom: 2.5rem; }
.trust-grid { grid-template-columns: 1fr 1fr !important; gap: 2.5rem !important; align-items: start !important; margin-top: 0 !important; }
.trust-pillars { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1rem !important; margin-top: 0 !important; }
.trust-pillar { padding: 1.25rem !important; border-radius: 10px; }
.trust-diagram { margin-top: 0 !important; height: auto !important; }
@media (max-width: 768px) { .trust-grid { grid-template-columns: 1fr !important; } .trust-pillars { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 480px) { .trust-pillars { grid-template-columns: 1fr !important; } }
/* == CONTACT SECTION == */
.contact-grid { grid-template-columns: 1fr 1fr !important; gap: 3.5rem !important; align-items: start !important; }
.contact-form { padding: 2.5rem !important; border-radius: 14px !important; display: flex !important; flex-direction: column !important; }
.contact-form form { display: flex; flex-direction: column; flex: 1; }
.form-row { margin-bottom: 1.1rem !important; }
.form-group { margin-bottom: 1.1rem !important; gap: 6px !important; }
textarea { min-height: 160px !important; resize: vertical; }
.form-submit { margin-top: 1.25rem !important; }
.contact-detail { margin-top: 1.75rem !important; padding-top: 1.75rem !important; }
.contact-detail:first-of-type { margin-top: 2.25rem !important; }
.contact-detail-icon { width: 40px !important; height: 40px !important; border-radius: 9px !important; flex-shrink: 0; }
.contact-detail-text strong, .contact-detail-text span { font-size: .83rem !important; }
/* == SERVICES GRID == */
/* 8 cards / 2 cols = 4 complete rows on every desktop and tablet. */
/* Drop to 1 col only on small phones where 2 cols become cramped.  */
.services-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}
.service-card {
  padding: 2.25rem 2.5rem !important;
}
.service-icon {
  width: 48px !important; height: 48px !important;
  margin-bottom: 1.25rem !important;
}
.service-title { font-size: 1.05rem !important; margin-bottom: .65rem !important; }
.service-desc  { font-size: .9rem  !important; line-height: 1.7 !important; }

/* Tablet (768px and below): 2 cols still fit, just tighten internal padding */
@media (max-width: 768px) {
  .service-card  { padding: 1.75rem !important; }
  .service-icon  { width: 40px !important; height: 40px !important; margin-bottom: 1rem !important; }
  .service-title { font-size: .98rem !important; }
  .service-desc  { font-size: .875rem !important; line-height: 1.65 !important; }
}

/* Mobile (520px and below): single column, full-width cards */
@media (max-width: 520px) {
  .services-grid { grid-template-columns: 1fr !important; }
  .service-card  { padding: 1.5rem 1.5rem !important; }
  .service-icon  { width: 38px !important; height: 38px !important; }
  .service-title { font-size: .95rem !important; }
}
/* == MOBILE RESPONSIVE == */

/* Box-sizing: prevents padding/border from adding to element width.
   Without this, input width:100% + padding overflows its container. */
*, *::before, *::after { box-sizing: border-box; }

/* Belt-and-suspenders overflow lock */
html { overflow-x: hidden; }

/* ── TABLET (≤ 900px) ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* About grid: left photo + right text → stacked */
  .about-grid { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .about-photo { min-height: 280px !important; }
}

/* ── TABLET / LARGE PHONE (≤ 768px) ───────────────────────────────────── */
@media (max-width: 768px) {
  /* Contact: override the !important 2-col rule so form stacks below info */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  /* Shrink form padding so it breathes without dominating */
  .contact-form { padding: 1.75rem !important; }
  /* Name / email side-by-side becomes single column */
  .form-row { grid-template-columns: 1fr !important; }
  /* Shorter textarea — tall textarea on mobile wastes screen */
  textarea { min-height: 110px !important; }
  /* Trust pillars: keep 2 cols but tighten */
  .trust-pillars { grid-template-columns: 1fr 1fr !important; gap: .75rem !important; }
  /* Section vertical padding: reduce so content fits on screen */
  section { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  /* Nav stays single-row — already hidden links, but reduce height */
  nav { height: 60px !important; }
}

/* ── MOBILE (≤ 520px) ─────────────────────────────────────────────────── */
@media (max-width: 520px) {
  /* Tight section spacing on phones */
  section { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  /* Trust pillars: single column on small phones */
  .trust-pillars { grid-template-columns: 1fr !important; }
  /* Contact form: tighter padding */
  .contact-form { padding: 1.25rem !important; }
  .contact-detail { margin-top: 1.25rem !important; padding-top: 1.25rem !important; }
  .contact-detail:first-of-type { margin-top: 1.5rem !important; }
  /* CTA buttons: full width stacked */
  .hero-cta { flex-direction: column !important; align-items: center !important; gap: 1rem !important; }
  .hero-cta .btn-primary,
  .hero-cta .btn-secondary,
  .hero-cta .btn-outline { width: 100% !important; justify-content: center !important; text-align: center !important; }
  /* Disclaimer: no minimum width that causes overflow */
  .disclaimer-left { min-width: 0 !important; }
  .disclaimer-inner { padding-right: 2.5rem !important; }
  /* Hero stats: wrap and reduce gap */
  .hero-stats { gap: 1.25rem !important; }
  .stat-divider { display: none !important; }
}

/* == SEO & PERF ==*/
.hero-sub-seo { font-size:.85rem; color:var(--text-muted); margin-top:.75rem; letter-spacing:.03em; }

/* == CONTACT POPUP == */
@keyframes fadeInPopup { from { opacity:0; } to { opacity:1; } }
@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

/* ============================================================
   PROFESSIONAL REDESIGN — spacing, rhythm, max-width, contrast
   ============================================================ */

/* 1. Max-width container — cap content at 1280px centered */
section {
  padding: 8rem max(5%, calc((100% - 1280px) / 2)) !important;
  position: relative;
}
.hero {
  padding: 0 max(5%, calc((100% - 1280px) / 2)) !important;
}
nav {
  padding-left:  max(5%, calc((100% - 1280px) / 2)) !important;
  padding-right: max(5%, calc((100% - 1280px) / 2)) !important;
}

/* 2. Alternating section backgrounds for visual rhythm */
#services {
  background: var(--bg-surface) !important;
  border-top:    1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
#trust {
  background: var(--bg-primary) !important;
}
#about {
  background: var(--bg-surface) !important;
  border-top:    1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
#contact {
  background: var(--bg-primary) !important;
}

/* 3. CTA section — glowing gradient accent */
#cta {
  background: linear-gradient(135deg,
    rgba(0,200,232,0.07) 0%,
    rgba(6,16,30,1) 40%,
    rgba(26,127,255,0.07) 100%) !important;
  border-top:    1px solid rgba(0,200,232,0.18) !important;
  border-bottom: 1px solid rgba(26,127,255,0.18) !important;
  overflow: hidden;
}
#cta::before {
  content: '';
  position: absolute;
  top: -120px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 300px;
  background: radial-gradient(ellipse, rgba(0,200,232,0.12) 0%, transparent 70%);
  pointer-events: none;
}
#cta::after {
  content: '';
  position: absolute;
  bottom: -120px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 300px;
  background: radial-gradient(ellipse, rgba(26,127,255,0.10) 0%, transparent 70%);
  pointer-events: none;
}
.cta-title {
  font-size: clamp(2.4rem, 5vw, 4rem) !important;
  margin-bottom: 1.5rem !important;
}
.cta-body {
  font-size: 1.1rem !important;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem !important;
}

/* 4. Section typography — stronger hierarchy */
.section-title {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem) !important;
  margin-bottom: 1.25rem !important;
  line-height: 1.1 !important;
}
.section-body {
  font-size: 1.05rem !important;
  line-height: 1.75 !important;
}
.section-label {
  margin-bottom: 1.25rem !important;
  font-size: .78rem !important;
  letter-spacing: .15em !important;
}

/* 5. Service cards — more padding, stronger hover */
.service-card {
  padding: 2.75rem !important;
  transition: background .25s, transform .2s, box-shadow .25s !important;
}
.service-card:hover {
  background: var(--bg-elevated) !important;
  box-shadow: inset 0 0 0 1px rgba(0,200,232,0.2), 0 8px 40px rgba(0,0,0,0.3) !important;
}
.service-icon {
  width: 48px !important;
  height: 48px !important;
  margin-bottom: 1.5rem !important;
  border-radius: 12px !important;
}
.service-title {
  font-size: 1.1rem !important;
  margin-bottom: .65rem !important;
  letter-spacing: .01em !important;
}
.service-desc {
  font-size: .9rem !important;
  line-height: 1.7 !important;
  color: var(--text-muted) !important;
}

/* 6. Trust pillars — more spacious */
.trust-grid {
  margin-top: 3rem;
}
.trust-pillar {
  padding: 1.75rem !important;
  border-radius: 14px !important;
  transition: border-color .25s, transform .2s !important;
}
.trust-pillar:hover {
  border-color: rgba(0,200,232,0.3) !important;
  transform: translateY(-2px);
}
.pillar-title {
  font-size: 1rem !important;
  margin-bottom: .5rem !important;
}
.pillar-desc {
  font-size: .85rem !important;
  line-height: 1.65 !important;
}

/* 7. About section — more breathing room */
.about-grid {
  gap: 6rem !important;
}
.about-big-text {
  font-size: clamp(3rem,6vw,5rem) !important;
}
.about-body {
  font-size: 1.05rem !important;
  line-height: 1.85 !important;
  margin-top: 1.25rem !important;
}
.about-body + .about-body {
  margin-top: 1rem !important;
}

/* 8. Contact section — more spacious */
.contact-grid {
  gap: 5rem !important;
}
.contact-form {
  padding: 3rem !important;
  border-radius: 20px !important;
}
.contact-detail {
  padding: .75rem 0 !important;
  gap: 1.25rem !important;
}
.contact-detail-text strong {
  font-size: .85rem !important;
  margin-bottom: .2rem !important;
  display: block;
}
.contact-detail-text span {
  font-size: .9rem !important;
  color: var(--text-secondary) !important;
}

/* 9. Hero stats — more impact */
.hero-stats {
  gap: 4rem !important;
  margin-top: 5rem !important;
  padding-top: 2.5rem !important;
  border-top: 1px solid var(--border-subtle) !important;
}
.stat-number {
  font-size: 2.2rem !important;
}
.stat-divider {
  height: 40px !important;
  width: 1px !important;
  background: var(--border-subtle) !important;
  align-self: center !important;
}

/* 10. Footer max-width */
footer {
  padding: 3rem max(5%, calc((100% - 1280px) / 2)) !important;
  border-top: 1px solid var(--border-subtle) !important;
}

/* 11. Responsive — keep tight on mobile */
@media (max-width: 768px) {
  section { padding: 5rem 6% !important; }
  .about-grid { gap: 3rem !important; }
  .contact-grid { gap: 2.5rem !important; }
  .hero-stats { gap: 2rem !important; margin-top: 3rem !important; }
  .cta-title { font-size: clamp(1.8rem, 6vw, 2.8rem) !important; }
}

/* == HERO LEFT-ALIGNED REDESIGN == */
.hero {
  justify-content: flex-start !important;
  align-items: center !important;
  padding-top: 120px !important;
  padding-bottom: 80px !important;
}
.hero-content {
  text-align: left !important;
  margin: 0 !important;
  max-width: 660px !important;
}
.hero-badge {
  margin-bottom: 2rem !important;
}
h1 {
  font-size: clamp(2rem, 3.8vw, 3.2rem) !important;
  margin-bottom: 1.5rem !important;
}
.hero-sub-seo {
  text-align: left !important;
}
.hero-sub {
  text-align: left !important;
  margin: 0 0 2.5rem 0 !important;
  max-width: 520px !important;
  font-size: 1.1rem !important;
}
.hero-actions {
  justify-content: flex-start !important;
}
.hero-stats {
  justify-content: flex-start !important;
  padding-top: 2.5rem !important;
  margin-top: 3.5rem !important;
  border-top: 1px solid var(--border-subtle) !important;
  gap: 3rem !important;
}
@media (max-width: 768px) {
  .hero-content {
    max-width: 100% !important;
  }
  .hero-sub {
    max-width: 100% !important;
  }
  .hero-stats {
    gap: 1.5rem !important;
    flex-wrap: wrap !important;
  }
}

/* == STAT FIX == */
.stat { display:flex; flex-direction:column; align-items:flex-start; }
.stat-number { white-space:nowrap; }
.stat-label { white-space:nowrap; font-size:.72rem !important; }
.stat-divider { width:1px; height:36px; background:var(--border-subtle); align-self:center; flex-shrink:0; }
.hero-stats { gap:2.5rem !important; flex-wrap:nowrap !important; }
@media (max-width:640px) {
  .hero-stats { flex-wrap:wrap !important; gap:1.5rem !important; }
  .stat-divider { display:none; }
}


/* ============================================================
   UX REFINEMENT - conversion, credibility, responsive polish
   ============================================================ */
.hero-pills { display:flex; flex-wrap:wrap; gap:.45rem; margin:1.5rem 0 1.75rem; }
.hero-pill { background:rgba(0,200,232,.07); border:1px solid rgba(0,200,232,.22); color:var(--text-secondary); padding:5px 13px; border-radius:100px; font-size:.77rem; font-weight:500; letter-spacing:.03em; white-space:nowrap; }
.btn-lg { padding:16px 34px !important; font-size:1rem !important; letter-spacing:.02em !important; box-shadow:0 0 40px rgba(0,200,232,.28) !important; }
.btn-lg:hover { box-shadow:0 0 55px rgba(0,200,232,.4) !important; transform:translateY(-1px); }
.btn-ghost { display:inline-flex; align-items:center; gap:8px; color:var(--text-secondary); padding:14px 22px; border-radius:8px; font-weight:500; font-size:.95rem; text-decoration:none; border:1px solid var(--border-subtle); transition:all .2s; white-space:nowrap; }
.btn-ghost:hover { color:var(--text-primary); border-color:rgba(0,200,232,.35); background:rgba(0,200,232,.04); }
.cred-bar { background:var(--bg-surface); border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); padding:1.1rem max(5%, calc((100% - 1280px) / 2)); position:relative; z-index:2; }
.cred-inner { display:flex; align-items:center; justify-content:center; gap:2rem; flex-wrap:wrap; }
.cred-item { display:flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:500; color:var(--text-secondary); white-space:nowrap; letter-spacing:.01em; }
.cred-item svg { color:var(--accent-cyan); flex-shrink:0; }
.cred-sep { width:1px; height:14px; background:var(--border-subtle); flex-shrink:0; }
.services-grid { align-items:stretch !important; grid-template-columns:repeat(4,1fr) !important; }
.service-card { display:flex !important; flex-direction:column !important; }
.service-desc { flex:1 !important; }
@media (max-width:1100px) { .services-grid { grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:540px)  { .services-grid { grid-template-columns:1fr !important; } }
.cta-inner { text-align:center; max-width:700px; margin:0 auto; }
.cta-actions { display:flex !important; gap:1rem !important; justify-content:center !important; flex-wrap:wrap !important; align-items:center !important; }
.cta-note { margin-top:1.75rem; font-size:.78rem; color:var(--text-muted); opacity:.75; letter-spacing:.03em; }
.contact-detail-text a { color:inherit; text-decoration:none; transition:color .2s; }
.contact-detail-text a:hover { color:var(--accent-cyan); }
.form-submit .btn-primary { width:100% !important; justify-content:center !important; }
.form-note { font-size:.77rem; color:var(--text-muted); text-align:center; margin-top:.85rem; letter-spacing:.02em; }
.section-title { color:#EDF2F8 !important; }
h1 { color:#F0F6FF !important; }
.hero-sub { color:rgba(180,200,225,.85) !important; }
.service-title { color:#DDE8F5 !important; }
.pillar-title { color:#DDE8F5 !important; }
@media (max-width:640px) {
  .hero-actions { flex-direction:column !important; align-items:stretch !important; }
  .hero-actions .btn-primary, .hero-actions .btn-ghost, .hero-actions .btn-secondary { width:100% !important; justify-content:center !important; text-align:center !important; }
  .cta-actions { flex-direction:column !important; align-items:stretch !important; }
  .cta-actions .btn-primary, .cta-actions .btn-ghost { width:100% !important; justify-content:center !important; }
  .cred-sep { display:none !important; }
  .cred-inner { gap:.6rem 1.25rem; justify-content:flex-start; }
  .hero-pills { gap:.35rem; }
  .services-header { flex-direction:column !important; }
  .services-header > p { text-align:left !important; max-width:100% !important; }
}


/* == HERO TWO-COLUMN == */
.hero {
  padding: 100px max(5%, calc((100% - 1280px) / 2)) 80px !important;
  justify-content: center !important;
  align-items: center !important;
}
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 4rem;
  align-items: center;
  width: 100%;
}
.hero-content {
  text-align: left !important;
  margin: 0 !important;
  max-width: none !important;
}
.hero-sub {
  margin-left: 0 !important;
  max-width: 500px !important;
}
.hero-actions { justify-content: flex-start !important; }
.hero-stats {
  justify-content: flex-start !important;
  gap: 2.5rem !important;
  margin-top: 3rem !important;
  padding-top: 2rem !important;
}
.stat { align-items: flex-start !important; }
/* ── Visual panel ── */
.hero-visual {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  animation: fadeInUp .7s ease .45s both;
}
.hv-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(0,200,232,.15);
  border-radius: 20px;
  padding: 1.6rem;
  backdrop-filter: blur(20px);
  width: 100%;
  max-width: 390px;
  box-shadow:
    0 0 80px rgba(0,200,232,.06),
    0 24px 64px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.05);
  position: relative;
  overflow: hidden;
}
.hv-card::before {
  content: '';
  position: absolute;
  top: -70px; right: -50px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(0,200,232,.08) 0%, transparent 70%);
  pointer-events: none;
}
.hv-card::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(26,127,255,.06) 0%, transparent 70%);
  pointer-events: none;
}
.hv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.hv-header-left {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.hv-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22d3a5;
  box-shadow: 0 0 7px rgba(34,211,165,.9);
  animation: pulse 2s infinite;
  flex-shrink: 0;
}
.hv-title {
  font-size: .74rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: .06em;
  font-family: var(--font-display);
  text-transform: uppercase;
}
.hv-tag {
  font-size: .66rem;
  font-weight: 600;
  color: #22d3a5;
  background: rgba(34,211,165,.1);
  border: 1px solid rgba(34,211,165,.2);
  border-radius: 100px;
  padding: 2px 9px;
  letter-spacing: .03em;
  white-space: nowrap;
}
.hv-items {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.25rem;
}
.hv-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .85rem;
  border-radius: 10px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.04);
  transition: border-color .2s, background .2s;
}
.hv-item:hover {
  background: rgba(0,200,232,.03);
  border-color: rgba(0,200,232,.1);
}
.hv-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid;
}
.hv-item-body { flex: 1; min-width: 0; }
.hv-item-name {
  font-size: .76rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hv-item-sub {
  font-size: .66rem;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap;
}
.hv-status {
  font-size: .63rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 100px;
  letter-spacing: .04em;
  white-space: nowrap;
  flex-shrink: 0;
}
.hv-status--ok {
  color: #22d3a5;
  background: rgba(34,211,165,.1);
  border: 1px solid rgba(34,211,165,.18);
}
.hv-metrics {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.05);
}
.hv-metric { flex: 1; text-align: center; }
.hv-m-val {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}
.hv-m-lbl {
  display: block;
  font-size: .6rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 4px;
}
.hv-m-sep {
  width: 1px;
  height: 26px;
  background: rgba(255,255,255,.06);
  flex-shrink: 0;
}
@media (max-width: 960px) {
  .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .hero-visual { display: none !important; }
  .hero {
    padding-top: 90px !important;
    padding-bottom: 60px !important;
  }
}
@media (max-width: 640px) {
  .hero-content { text-align: center !important; }
  .hero-sub { margin: 0 auto 2rem !important; }
  .hero-actions { justify-content: center !important; }
  .hero-stats { justify-content: center !important; }
  .stat { align-items: center !important; }
  .hero-pills { justify-content: center; }
}