*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
        :root{--blue:#0a66bf;--blue-light:#1a8aed;--red:#9c1f42;--red-light:#c4275a;--bg:#06080c;--bg-card:rgba(255,255,255,0.03);--surface:#0c1018;--text:#f0f2f5;--text-dim:rgba(240,242,245,0.7);--text-muted:rgba(240,242,245,0.45);--border:rgba(255,255,255,0.08);--green:#00e87b;--amber:#ff8c42;--strike:#6c5ce7;--xcitium:#00b4d8;--whale:#00c9a7}
        body.light{--bg:#fff;--bg-card:rgba(0,0,0,0.025);--surface:#f5f6f8;--text:#0c1018;--text-dim:rgba(12,16,24,0.75);--text-muted:rgba(12,16,24,0.45);--border:rgba(0,0,0,0.08);--green:#00b359}
        html{scroll-behavior:smooth}
        body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
        h1,h2,h3,h4,h5,h6{font-family:'Sora',sans-serif}

        .navbar{position:fixed;top:0;width:100%;z-index:100;background:rgba(6,8,12,0.85);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);transition:all .3s}
        body.light .navbar{background:rgba(255,255,255,0.88)}
        .navbar.scrolled{background:rgba(6,8,12,0.97);box-shadow:0 4px 30px rgba(0,0,0,0.4)}
        body.light .navbar.scrolled{background:rgba(255,255,255,0.97);box-shadow:0 4px 20px rgba(0,0,0,0.06)}
        .nav-inner{max-width:1440px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;height:68px}
        .nav-brand{display:flex;align-items:center;gap:.8rem;text-decoration:none}
        .nav-brand-logo{height:52px;width:52px;object-fit:cover;border-radius:12px;flex-shrink:0;border:2px solid rgba(26,138,237,0.35);box-shadow:0 2px 14px rgba(10,102,191,0.25);background:#fff;padding:2px}
        body.light .nav-brand-logo{border-color:rgba(10,102,191,0.15);box-shadow:0 2px 8px rgba(0,0,0,0.08)}
        .nav-brand-text{font-family:'Sora';font-weight:800;font-size:1.05rem;color:var(--text);letter-spacing:-.02em}
        .nav-brand-sub{font-size:.6rem;color:var(--blue-light);font-weight:600;text-transform:uppercase;letter-spacing:2px}
        .nav-links{display:flex;list-style:none;gap:1.6rem;flex-wrap:nowrap}
        .nav-links a{color:var(--text-dim);text-decoration:none;font-size:.88rem;font-weight:500;transition:color .25s;position:relative}
        .nav-links a:hover{color:var(--text)}
        .nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--blue);transition:width .3s}
        .nav-links a:hover::after{width:100%}
        .nav-actions{display:flex;gap:.6rem;align-items:center}
        .btn{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.4rem;border-radius:8px;font-weight:600;font-size:.85rem;text-decoration:none;transition:all .3s;cursor:pointer;border:none;font-family:'DM Sans'}
        .btn-primary{background:linear-gradient(135deg,var(--blue),var(--red));color:#fff}
        .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(10,102,191,0.35)}
        .btn-outline{background:transparent;color:var(--text);border:1.5px solid var(--border)}
        .btn-outline:hover{border-color:var(--blue);background:rgba(10,102,191,0.08)}
        .icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:transparent;color:var(--text-dim);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .35s}
        .icon-btn:hover{border-color:var(--blue);color:var(--blue-light)}
        .icon-btn.spin:hover{transform:rotate(180deg)}
        .lang-btn{font-size:.78rem;padding:.4rem .9rem;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--text-dim);cursor:pointer;font-weight:500;transition:all .25s}
        .lang-btn:hover{border-color:var(--blue);color:var(--text)}
        .nav-toggle{display:none;background:none;border:none;color:var(--text);font-size:1.4rem;cursor:pointer}

        .hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:100px 2rem 60px}
        .hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 20% 50%,rgba(10,102,191,0.07) 0%,transparent 70%),radial-gradient(ellipse 40% 40% at 80% 30%,rgba(156,31,66,0.05) 0%,transparent 70%);pointer-events:none}
        .hero::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.015) 1px,transparent 1px);background-size:80px 80px;pointer-events:none}
        body.light .hero::after{background-image:linear-gradient(rgba(0,0,0,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.025) 1px,transparent 1px)}
        .hero-inner{max-width:1440px;margin:0 auto;width:100%;position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
        .hero-badge{display:inline-flex;align-items:center;gap:.6rem;background:rgba(10,102,191,0.1);border:1px solid rgba(10,102,191,0.3);padding:.5rem 1.2rem;border-radius:50px;font-size:.72rem;font-weight:700;color:var(--blue-light);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:1.8rem;animation:fadeUp .7s ease}
        .pulse-dot{width:8px;height:8px;background:var(--green);border-radius:50%;animation:pulse 2s infinite}
        @keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(0,232,123,0.4)}50%{opacity:.8;box-shadow:0 0 0 6px rgba(0,232,123,0)}}
        @keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
        .hero h1{font-size:clamp(2.8rem,5.5vw,5rem);font-weight:800;line-height:1.05;letter-spacing:-.03em;margin-bottom:1.2rem;animation:fadeUp .7s ease .1s both}
        .gradient-text{background:linear-gradient(135deg,var(--blue-light),var(--blue),var(--red-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
        .hero-sub{font-family:'Sora';font-size:clamp(1rem,1.8vw,1.3rem);font-weight:600;color:var(--red-light);text-transform:uppercase;letter-spacing:3px;margin-bottom:1.2rem;animation:fadeUp .7s ease .2s both}
        .hero-desc{font-size:1.1rem;color:var(--text-dim);max-width:560px;line-height:1.7;margin-bottom:2.5rem;animation:fadeUp .7s ease .3s both}
        .hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;animation:fadeUp .7s ease .4s both}


        /* SHIELD 360 DIAGRAM */
        .shield-360{position:relative;width:100%;max-width:520px;aspect-ratio:1;margin:0 auto;animation:fadeUp .8s ease .5s both}
        .shield-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;width:140px;z-index:5}
        .shield-center-icon{font-size:2.2rem;color:var(--blue-light);margin-bottom:.4rem}
        .shield-center h3{font-size:1rem;font-weight:800}
        .shield-center p{font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.5px;margin-top:.2rem}
        .shield-svg{width:100%;height:100%;position:absolute;inset:0;z-index:1}
        .arc-segment{fill:none;stroke-width:28;stroke-linecap:round;opacity:.15}
        .arc-strike{stroke:var(--strike)}.arc-xcitium{stroke:var(--xcitium)}.arc-whale{stroke:var(--whale)}
        /* Pillars */
        .shield-pillar{position:absolute;width:160px;text-align:center;transform:translate(-50%,-50%);z-index:6;transition:all .4s}
        .shield-pillar:hover{transform:translate(-50%,-50%) scale(1.05)}
        .sp-strike{top:-4%;left:50%}
        .sp-xcitium{bottom:2%;right:-10%}
        .sp-whale{bottom:2%;left:-10%}
        .shield-pillar-icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin:0 auto .4rem;border:2px solid}
        .sp-strike .shield-pillar-icon{background:rgba(108,92,231,0.15);border-color:var(--strike);color:var(--strike);box-shadow:0 0 20px rgba(108,92,231,0.25)}
        .sp-xcitium .shield-pillar-icon{background:rgba(0,180,216,0.15);border-color:var(--xcitium);color:var(--xcitium);box-shadow:0 0 20px rgba(0,180,216,0.25)}
        .sp-whale .shield-pillar-icon{background:rgba(0,201,167,0.15);border-color:var(--whale);color:var(--whale);box-shadow:0 0 25px rgba(0,201,167,0.25)}
        .shield-pillar-logo{height:16px;width:auto;margin:0 auto .2rem;display:block}
        body:not(.light) .shield-pillar-logo{filter:brightness(0) invert(1)}
        .shield-pillar-role{font-size:.62rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.3rem}
        .shield-pillar-action{font-size:.68rem;color:var(--text-dim);line-height:1.3;max-width:140px;margin:0 auto}

        /* RADAR SWEEP inside circle */
        .radar-sweep{position:absolute;inset:12%;border-radius:50%;overflow:hidden;z-index:2}
        .radar-bg{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(10,102,191,0.08)}
        .radar-grid-h,.radar-grid-v{position:absolute;background:rgba(10,102,191,0.04)}
        .radar-grid-h{width:100%;height:1px;top:50%;left:0}
        .radar-grid-v{width:1px;height:100%;left:50%;top:0}
        .radar-ring1,.radar-ring2{position:absolute;border-radius:50%;border:1px solid rgba(10,102,191,0.06)}
        .radar-ring1{inset:25%}.radar-ring2{inset:42%}
        .radar-arm{position:absolute;top:50%;left:50%;width:50%;height:2px;transform-origin:left center;animation:radarSpin 4s linear infinite;background:linear-gradient(90deg,rgba(26,138,237,0.4),rgba(26,138,237,0))}
        .radar-arm::after{content:'';position:absolute;right:0;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--blue-light);box-shadow:0 0 10px var(--blue-light)}
        @keyframes radarSpin{to{transform:rotate(360deg)}}
        .radar-trail{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,rgba(26,138,237,0.06) 40deg,transparent 80deg);animation:radarSpin 4s linear infinite}

        /* THREATS: come from far right, enter perimeter, land in Xcitium zone CONTAINED */
        .threat-anim{position:absolute;z-index:8}
        .threat-a1{top:30%;right:-2%}
        .threat-a2{top:48%;right:0%}
        .threat-dot{width:10px;height:10px;border-radius:50%;position:relative}
        .threat-a1 .threat-dot{animation:tEnter1 7s ease-in-out infinite}
        .threat-a2 .threat-dot{animation:tEnter1 7s ease-in-out 3.5s infinite}
        @keyframes tEnter1{
            0%{transform:translateX(50px);opacity:0;background:#ff4757;box-shadow:0 0 12px rgba(255,71,87,0.6)}
            8%{opacity:1}
            /* moving inward toward xcitium arc area */
            30%{transform:translateX(-80px);background:#ff4757;box-shadow:0 0 15px rgba(255,71,87,0.6)}
            /* hits containment — stops, turns cyan */
            40%{transform:translateX(-80px) scale(0.6);background:var(--xcitium);box-shadow:0 0 18px rgba(0,180,216,0.7)}
            55%{transform:translateX(-80px) scale(0.8);background:var(--xcitium)}
            /* stays contained */
            70%{transform:translateX(-80px) scale(0.8);opacity:.7}
            82%{transform:translateX(-80px) scale(0);opacity:0}
            100%{opacity:0;transform:translateX(50px) scale(0)}
        }
        /* Lock + label: positioned relative to where dot stops (-80px from start) */
        .threat-badge{position:absolute;top:-2px;left:0;display:flex;align-items:center;gap:.3rem;opacity:0;white-space:nowrap;transform:translateX(-80px)}
        .threat-badge i{font-size:.6rem;color:var(--xcitium)}
        .threat-badge span{font-size:.52rem;font-weight:700;color:var(--xcitium);text-transform:uppercase;letter-spacing:.5px}
        .threat-a1 .threat-badge{animation:tBadge 7s ease-in-out infinite}
        .threat-a2 .threat-badge{animation:tBadge 7s ease-in-out 3.5s infinite}
        @keyframes tBadge{
            0%,35%{opacity:0;transform:translateX(-80px) translateY(-18px) scale(0)}
            42%{opacity:1;transform:translateX(-80px) translateY(-18px) scale(1.1)}
            52%{transform:translateX(-80px) translateY(-18px) scale(1);opacity:1}
            70%{opacity:1}
            80%{opacity:0}
            100%{opacity:0}
        }

        /* STRIKE: probes from top-left area INWARD toward the perimeter circle */
        .strike-probes{position:absolute;top:12%;left:5%;z-index:7;width:100px;height:100px}
        .probe-beam{position:absolute;height:1px;opacity:0}
        .probe-beam::before{content:'';position:absolute;right:0;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--strike);box-shadow:0 0 8px var(--strike)}
        .probe-beam::after{content:'';position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--strike))}
        /* Beams point to the RIGHT and DOWNWARD = toward the circle perimeter */
        .probe-1{top:10px;left:0;width:70px;transform:rotate(25deg);transform-origin:left center;animation:probeIn 3s ease-in-out infinite}
        .probe-2{top:32px;left:5px;width:65px;transform:rotate(15deg);transform-origin:left center;animation:probeIn 3s ease-in-out .7s infinite}
        .probe-3{top:54px;left:8px;width:58px;transform:rotate(5deg);transform-origin:left center;animation:probeIn 3s ease-in-out 1.4s infinite}
        @keyframes probeIn{
            0%{opacity:0;clip-path:inset(0 100% 0 0)}
            25%{opacity:.8;clip-path:inset(0 20% 0 0)}
            45%{opacity:.9;clip-path:inset(0 0% 0 0)}
            60%{opacity:.5;clip-path:inset(0 0% 0 0)}
            75%{opacity:0}
            100%{opacity:0}
        }
        .probe-label{position:absolute;top:-12px;left:0;font-size:.52rem;font-weight:700;color:var(--strike);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;opacity:0;animation:pLabel 3s ease-in-out infinite}
        @keyframes pLabel{0%,10%{opacity:0}20%{opacity:1}55%{opacity:1}70%{opacity:0}100%{opacity:0}}

        /* WHALEMATE: phishing → click → ransomware → Xcitium contains */
        .whale-scene{position:absolute;bottom:20%;left:-5%;z-index:7;width:130px;height:50px}
        .whale-step{position:absolute;left:0;width:130px;text-align:center;opacity:0}
        .whale-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .6rem;border-radius:6px;font-size:.52rem;font-weight:700;border:1px solid;white-space:nowrap}
        .wc-email{background:rgba(0,201,167,0.08);border-color:rgba(0,201,167,0.3);color:var(--whale)}
        .wc-danger{background:rgba(255,71,87,0.08);border-color:rgba(255,71,87,0.3);color:#ff4757}
        .wc-safe{background:rgba(0,232,123,0.08);border-color:rgba(0,232,123,0.3);color:var(--green)}
        .whale-s1{animation:ws1 9s ease-in-out infinite}
        .whale-s2{top:0;animation:ws2 9s ease-in-out infinite}
        .whale-s3{top:0;animation:ws3 9s ease-in-out infinite}
        @keyframes ws1{0%{opacity:0;transform:translateY(5px)}6%{opacity:1;transform:translateY(0)}24%{opacity:1}30%{opacity:0}100%{opacity:0}}
        @keyframes ws2{0%,28%{opacity:0}34%{opacity:1;transform:scale(1)}48%{opacity:1;transform:scale(1.05)}56%{opacity:0}100%{opacity:0}}
        @keyframes ws3{0%,54%{opacity:0;transform:scale(.8)}60%{opacity:1;transform:scale(1)}76%{opacity:1}86%{opacity:0}100%{opacity:0}}

        /* ATTACK SIMULATION */
        .attack-sim{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;max-width:1000px;margin:0 auto}
        .attack-lane{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:2rem;position:relative;overflow:hidden}
        .attack-lane::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
        .attack-lane.lane-trad::before{background:var(--red-light)}
        .attack-lane.lane-xcit::before{background:var(--xcitium)}
        .attack-lane-header{display:flex;align-items:center;gap:.8rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
        .attack-lane-header i{font-size:1.5rem}
        .lane-trad .attack-lane-header i{color:var(--red-light)}
        .lane-xcit .attack-lane-header i{color:var(--xcitium)}
        .attack-lane-header h4{font-size:1rem;font-weight:700}
        .attack-lane-header span{font-size:.7rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:1px}
        /* Timeline steps */
        .atk-timeline{position:relative;padding-left:2rem}
        .atk-timeline::before{content:'';position:absolute;left:7px;top:0;bottom:0;width:2px;background:var(--border)}
        .atk-step{position:relative;padding-bottom:1.2rem;opacity:0;transform:translateX(-10px);transition:all .5s ease}
        .atk-step.visible{opacity:1;transform:translateX(0)}
        .atk-step::before{content:'';position:absolute;left:-2rem;top:4px;width:16px;height:16px;border-radius:50%;border:2px solid var(--border);background:var(--bg);z-index:1;transition:all .4s}
        .atk-step.active::before{border-color:currentColor;box-shadow:0 0 10px currentColor}
        .atk-step h5{font-size:.82rem;font-weight:700;margin-bottom:.15rem}
        .atk-step p{font-size:.75rem;color:var(--text-muted);line-height:1.4}
        .atk-step .atk-time{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.2rem}
        /* Colors per lane */
        .lane-trad .atk-step{color:var(--text)}
        .lane-trad .atk-step.bad{color:var(--red-light)}
        .lane-trad .atk-step.bad::before{border-color:var(--red-light);background:rgba(196,39,90,0.15)}
        .lane-trad .atk-step.bad .atk-time{color:var(--red-light)}
        .lane-trad .atk-step.neutral::before{border-color:var(--amber);background:rgba(255,140,66,0.15)}
        .lane-trad .atk-step.neutral .atk-time{color:var(--amber)}
        .lane-xcit .atk-step.good{color:var(--xcitium)}
        .lane-xcit .atk-step.good::before{border-color:var(--xcitium);background:rgba(0,180,216,0.15)}
        .lane-xcit .atk-step.good .atk-time{color:var(--xcitium)}
        .lane-xcit .atk-step.safe{color:var(--green)}
        .lane-xcit .atk-step.safe::before{border-color:var(--green);background:rgba(0,232,123,0.15)}
        .lane-xcit .atk-step.safe .atk-time{color:var(--green)}
        /* Result banner */
        .atk-result{margin-top:1rem;padding:1rem;border-radius:8px;text-align:center;font-weight:700;font-size:.85rem;opacity:0;transition:all .5s}
        .atk-result.visible{opacity:1}
        .lane-trad .atk-result{background:rgba(196,39,90,0.1);border:1px solid rgba(196,39,90,0.3);color:var(--red-light)}
        .lane-xcit .atk-result{background:rgba(0,232,123,0.1);border:1px solid rgba(0,232,123,0.3);color:var(--green)}
        .sim-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.8rem;border-radius:8px;background:linear-gradient(135deg,var(--xcitium),var(--blue));color:#fff;border:none;font-weight:700;font-size:.9rem;cursor:pointer;transition:all .3s;font-family:'Sora';margin-bottom:2.5rem}
        .sim-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,180,216,0.3)}
        .sim-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}


        .dist-strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:1.8rem 2rem;background:linear-gradient(135deg,rgba(10,102,191,0.05),rgba(156,31,66,0.05))}
        body.light .dist-strip{background:linear-gradient(135deg,rgba(10,102,191,0.03),rgba(156,31,66,0.03))}
        .dist-inner{max-width:1440px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:3rem;flex-wrap:wrap}
        .dist-label{font-family:'Sora';font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--text-muted)}
        .dist-logos{display:flex;gap:2.5rem;align-items:center}
        .dist-logo{display:flex;flex-direction:column;align-items:center;gap:.4rem}
        .dist-logo-name{font-family:'Sora';font-size:1.1rem;font-weight:800}
        .dist-logo-role{font-size:.65rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:1px}
        .dist-logo img{height:28px;width:auto;filter:brightness(0) invert(1);opacity:.85;transition:all .3s}
        .dist-logo:hover img{opacity:1;transform:scale(1.08)}
        body.light .dist-logo img{filter:none;opacity:.9}
        body.light .dist-logo:hover img{opacity:1}

        .section{padding:7rem 2rem}.section-alt{background:var(--surface)}
        .section-inner{max-width:1440px;margin:0 auto}
        .section-label{display:inline-flex;align-items:center;gap:.5rem;font-family:'Sora';font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--blue-light);margin-bottom:1rem}
        .section-label::before{content:'';width:24px;height:2px;background:var(--blue)}
        .section-title{font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-.02em;margin-bottom:1rem;line-height:1.1}
        .section-desc{font-size:1.05rem;color:var(--text-dim);max-width:660px;margin-bottom:3.5rem;line-height:1.7}
        .section-center{text-align:center}.section-center .section-desc{margin-left:auto;margin-right:auto}



        .s360-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
        .s360-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:2.5rem 2rem;position:relative;overflow:hidden;transition:all .4s}
        .s360-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
        .s360-card:nth-child(1)::before{background:linear-gradient(90deg,var(--strike),#a855f7)}
        .s360-card:nth-child(2)::before{background:linear-gradient(90deg,var(--xcitium),#0077b6)}
        .s360-card:nth-child(3)::before{background:linear-gradient(90deg,var(--whale),var(--green))}
        .s360-card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,0.12);box-shadow:0 20px 60px rgba(0,0,0,0.4)}
        .s360-badge{display:inline-block;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;padding:.3rem .8rem;border-radius:4px;margin-bottom:1.2rem}
        .s360-card:nth-child(1) .s360-badge{background:rgba(108,92,231,0.15);color:var(--strike);border:1px solid rgba(108,92,231,0.3)}
        .s360-card:nth-child(2) .s360-badge{background:rgba(0,180,216,0.15);color:var(--xcitium);border:1px solid rgba(0,180,216,0.3)}
        .s360-card:nth-child(3) .s360-badge{background:rgba(0,201,167,0.15);color:var(--whale);border:1px solid rgba(0,201,167,0.3)}
        .s360-brand{display:flex;align-items:center;gap:.8rem;margin-bottom:.8rem}
        .s360-brand img{height:28px;width:auto;object-fit:contain}
        body:not(.light) .s360-brand img{filter:brightness(0) invert(1)}
        .s360-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.3rem}
        .s360-card:nth-child(1) .s360-icon{background:rgba(108,92,231,0.12);color:var(--strike)}
        .s360-card:nth-child(2) .s360-icon{background:rgba(0,180,216,0.12);color:var(--xcitium)}
        .s360-card:nth-child(3) .s360-icon{background:rgba(0,201,167,0.12);color:var(--whale)}
        .s360-brand h3{font-size:1.4rem;font-weight:700}
        .s360-tagline{font-family:'Sora';font-size:.85rem;font-weight:600;margin-bottom:1rem}
        .s360-card:nth-child(1) .s360-tagline{color:var(--strike)}
        .s360-card:nth-child(2) .s360-tagline{color:var(--xcitium)}
        .s360-card:nth-child(3) .s360-tagline{color:var(--whale)}
        .s360-desc{font-size:.92rem;color:var(--text-dim);margin-bottom:1.5rem;line-height:1.6}
        .s360-features{list-style:none;margin-bottom:1.5rem}
        .s360-features li{padding:.45rem 0 .45rem 1.5rem;position:relative;font-size:.88rem;color:var(--text-dim)}
        .s360-features li::before{content:'\2192';position:absolute;left:0;font-weight:700}
        .s360-card:nth-child(1) .s360-features li::before{color:var(--strike)}
        .s360-card:nth-child(2) .s360-features li::before{color:var(--xcitium)}
        .s360-card:nth-child(3) .s360-features li::before{color:var(--whale)}
        .s360-stats{display:flex;gap:1.2rem;padding-top:1.2rem;border-top:1px solid var(--border)}
        .s360-stat{text-align:center;flex:1}
        .s360-stat-val{font-family:'Sora';font-size:1.2rem;font-weight:800}
        .s360-card:nth-child(1) .s360-stat-val{color:var(--strike)}
        .s360-card:nth-child(2) .s360-stat-val{color:var(--xcitium)}
        .s360-card:nth-child(3) .s360-stat-val{color:var(--whale)}
        .s360-stat-lbl{font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}

        .dc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
        .dc-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:1.8rem;transition:all .3s}
        .dc-card:hover{border-color:rgba(255,255,255,0.1);transform:translateY(-3px)}
        .dc-card-head{display:flex;align-items:center;gap:.8rem;margin-bottom:.8rem}
        .dc-card-ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(10,102,191,0.1);color:var(--blue-light);font-size:1.1rem;flex-shrink:0}
        .dc-card h4{font-size:1rem;font-weight:700}.dc-card p{font-size:.88rem;color:var(--text-dim);line-height:1.5;margin-bottom:.8rem}
        .dc-tags{display:flex;gap:.4rem;flex-wrap:wrap}
        .dc-tag{font-size:.7rem;font-weight:600;padding:.2rem .5rem;border-radius:4px;background:rgba(0,232,123,0.08);border:1px solid rgba(0,232,123,0.2);color:var(--green)}
        .dc-live{grid-column:1/-1;background:linear-gradient(135deg,rgba(0,232,123,0.04),rgba(10,102,191,0.04));border:1px solid rgba(0,232,123,0.15);border-radius:14px;padding:1.5rem 2rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
        .dc-live-left{display:flex;align-items:center;gap:.8rem}
        .dc-live-dot{width:10px;height:10px;background:var(--green);border-radius:50%;animation:pulse 2s infinite}
        .dc-live-left h4{font-size:.95rem;font-weight:700;color:var(--green)}
        .dc-live-left span{font-size:.75rem;color:var(--text-muted)}
        .dc-live-metrics{display:flex;gap:2rem;flex-wrap:wrap}
        .dc-metric{text-align:center}.dc-metric strong{display:block;font-family:'Sora';font-size:1rem;font-weight:800}
        .dc-metric span{font-size:.68rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}

        .xaas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
        .xaas-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:1.8rem;transition:all .35s;position:relative}
        .xaas-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--red));border-radius:14px 14px 0 0;opacity:0;transition:opacity .3s}
        .xaas-card:hover{border-color:rgba(255,255,255,0.1);transform:translateY(-4px)}.xaas-card:hover::after{opacity:1}
        .xaas-ico{font-size:1.8rem;color:var(--blue-light);margin-bottom:1rem}
        .xaas-card h4{font-size:1.05rem;font-weight:700;margin-bottom:.6rem}
        .xaas-card p{font-size:.85rem;color:var(--text-dim);line-height:1.5;margin-bottom:1rem}
        .xaas-tags{display:flex;flex-wrap:wrap;gap:.4rem}
        .xaas-tag{font-size:.7rem;font-weight:600;padding:.2rem .6rem;border-radius:4px;background:rgba(10,102,191,0.1);color:var(--blue-light);border:1px solid rgba(10,102,191,0.2)}

        .noc-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
        .noc-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:2.5rem;transition:all .3s}
        .noc-card:hover{border-color:rgba(255,255,255,0.1);transform:translateY(-3px)}
        .noc-card h3{font-size:1.3rem;font-weight:700;margin-bottom:.5rem}
        .noc-sub{font-size:.82rem;color:var(--blue-light);font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:1rem}
        .noc-card p{font-size:.9rem;color:var(--text-dim);line-height:1.6;margin-bottom:1.2rem}
        .noc-list{list-style:none}.noc-list li{padding:.45rem 0 .45rem 1.3rem;position:relative;font-size:.85rem;color:var(--text-dim)}
        .noc-list li::before{content:'\2713';position:absolute;left:0;color:var(--green);font-weight:700}
        .sla-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:3rem}
        .sla-item{text-align:center;padding:1.5rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;transition:all .3s}
        .sla-item:hover{border-color:var(--blue);transform:translateY(-3px)}
        .sla-val{font-family:'Sora';font-size:1.6rem;font-weight:800;color:var(--blue-light);margin-bottom:.2rem}
        .sla-lbl{font-size:.7rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px}

        .eco-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
        .eco-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:2rem;text-align:center;transition:all .35s}
        .eco-card:hover{border-color:rgba(255,255,255,0.1);transform:translateY(-4px)}
        .eco-ico{font-size:2.2rem;margin-bottom:1rem}
        .eco-card h4{font-size:1.05rem;font-weight:700;margin-bottom:.4rem}
        .eco-card p{font-size:.82rem;color:var(--text-dim);line-height:1.5;margin-bottom:.8rem}
        .eco-card .xaas-tags{justify-content:center}

        /* TESTIMONIALS */
        .testi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
        .testi-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:2rem 1.5rem;transition:all .35s;display:flex;flex-direction:column}
        .testi-card:hover{border-color:rgba(255,255,255,0.1);transform:translateY(-4px)}
        .testi-quote{font-size:.9rem;color:var(--text-dim);line-height:1.6;flex:1;font-style:italic;margin-bottom:1.5rem;position:relative;padding-left:1.2rem}
        .testi-quote::before{content:'\201C';position:absolute;left:0;top:-4px;font-size:1.8rem;font-weight:800;color:var(--blue-light);font-style:normal;line-height:1}
        .testi-client{display:flex;align-items:center;gap:.8rem;padding-top:1rem;border-top:1px solid var(--border)}
        .testi-logo{width:36px;height:36px;border-radius:8px;object-fit:contain;background:#fff;padding:4px;border:1px solid var(--border)}
        .testi-name{font-size:.82rem;font-weight:700}

        .cta-section{padding:6rem 2rem;text-align:center;background:linear-gradient(135deg,rgba(10,102,191,0.06),rgba(156,31,66,0.06));border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
        .cta-section h2{font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:800;margin-bottom:1rem}
        .cta-section p{font-size:1.05rem;color:var(--text-dim);max-width:560px;margin:0 auto 2rem}
        .cta-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

        .footer{padding:4rem 2rem 2rem;border-top:1px solid var(--border)}
        .footer-inner{max-width:1440px;margin:0 auto}
        .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:3rem;margin-bottom:3rem}
        .footer-brand p{font-size:.85rem;color:var(--text-dim);line-height:1.6;margin-top:.8rem;max-width:280px}
        .footer h5{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--blue-light);margin-bottom:1rem}
        .footer a{display:block;color:var(--text-dim);text-decoration:none;font-size:.85rem;padding:.25rem 0;transition:all .25s}
        .footer a:hover{color:var(--text);transform:translateX(4px)}
        .footer-contact p{font-size:.85rem;color:var(--text-dim);margin-bottom:.5rem;line-height:1.5}.footer-contact strong{color:var(--text)}
        .footer-bottom{border-top:1px solid var(--border);padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
        .footer-bottom p{font-size:.78rem;color:var(--text-muted)}
        .social-links{display:flex;gap:.7rem}
        .social-links a{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--border);color:var(--text-dim);font-size:.95rem;transition:all .25s;padding:0}
        .social-links a:hover{border-color:var(--blue);color:var(--blue-light);background:rgba(10,102,191,0.08);transform:translateY(-2px)}


        /* WHATSAPP WIDGET */
        .wa-widget{position:fixed;bottom:24px;right:24px;z-index:99}
        .wa-fab{width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;border:none;cursor:pointer;font-size:1.6rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px rgba(37,211,102,0.4);transition:all .3s;position:relative;z-index:2}
        .wa-fab:hover{transform:scale(1.08);box-shadow:0 6px 25px rgba(37,211,102,0.5)}
        .wa-fab .wa-close{display:none}
        .wa-widget.open .wa-fab .wa-open{display:none}
        .wa-widget.open .wa-fab .wa-close{display:block}
        .wa-badge{position:absolute;top:-2px;right:-2px;width:14px;height:14px;background:var(--red-light);border-radius:50%;border:2px solid var(--bg);animation:pulse 2s infinite}
        .wa-widget.open .wa-badge{display:none}
        .wa-bubble{position:absolute;bottom:70px;right:0;width:340px;background:var(--bg);border:1px solid var(--border);border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,0.3);overflow:hidden;opacity:0;transform:translateY(20px) scale(0.95);pointer-events:none;transition:all .35s cubic-bezier(0.4,0,0.2,1)}
        .wa-widget.open .wa-bubble{opacity:1;transform:translateY(0) scale(1);pointer-events:all}
        body.light .wa-bubble{box-shadow:0 10px 40px rgba(0,0,0,0.1)}
        .wa-header{background:linear-gradient(135deg,#25d366,#128c7e);padding:1.2rem 1.5rem;display:flex;align-items:center;gap:1rem}
        .wa-header-avatar{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
        .wa-header-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
        .wa-header-name{font-family:'Sora';font-weight:700;font-size:.95rem;color:#fff}
        .wa-header-status{font-size:.7rem;color:rgba(255,255,255,0.8)}
        .wa-body{padding:1.5rem;background:var(--surface);min-height:100px}
        .wa-msg{background:var(--bg-card);border:1px solid var(--border);border-radius:0 12px 12px 12px;padding:1rem;margin-bottom:.8rem;font-size:.88rem;color:var(--text-dim);line-height:1.5;position:relative}
        .wa-msg::before{content:'';position:absolute;top:0;left:-8px;border:8px solid transparent;border-top-color:var(--bg-card);border-right-color:var(--bg-card)}
        .wa-msg-time{font-size:.6rem;color:var(--text-muted);text-align:right;margin-top:.4rem}
        .wa-footer{padding:1rem 1.5rem;display:flex;gap:.6rem;border-top:1px solid var(--border)}
        .wa-input{flex:1;padding:.7rem 1rem;background:var(--bg);border:1px solid var(--border);border-radius:20px;color:var(--text);font-size:.85rem;font-family:'DM Sans';outline:none;transition:border-color .3s}
        .wa-input:focus{border-color:#25d366}
        .wa-input::placeholder{color:var(--text-muted)}
        .wa-send{width:40px;height:40px;border-radius:50%;background:#25d366;color:#fff;border:none;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all .3s;flex-shrink:0}
        .wa-send:hover{background:#128c7e;transform:scale(1.05)}

        @media(max-width:1100px){.hero-inner{grid-template-columns:1fr;text-align:center}.hero-desc{margin-left:auto;margin-right:auto}.hero-ctas{justify-content:center}.shield-360{max-width:400px}.s360-grid,.dc-grid,.noc-grid{grid-template-columns:1fr}.xaas-grid,.eco-grid,.testi-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}.sla-bar{grid-template-columns:repeat(2,1fr)}}
        @media(max-width:768px){.nav-links{display:none}.nav-toggle{display:block}.nav-links.open{display:flex;flex-direction:column;position:absolute;top:68px;left:0;right:0;background:rgba(6,8,12,0.98);backdrop-filter:blur(20px);padding:1rem 2rem;gap:0;border-bottom:1px solid var(--border)}body.light .nav-links.open{background:rgba(255,255,255,0.98)}.nav-links.open a{padding:.7rem 0;border-bottom:1px solid var(--border)}.xaas-grid,.eco-grid,.testi-grid{grid-template-columns:1fr}.hero-ctas{flex-direction:column}.hero-ctas .btn{width:100%;justify-content:center}.dc-live{flex-direction:column;text-align:center}.dc-live-metrics{justify-content:center}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;text-align:center}.dist-inner{flex-direction:column}.lang-btn{display:none}.attack-sim{grid-template-columns:1fr}.shield-360{max-width:320px}.shield-pillar-action{display:none}}
        @media(max-width:480px){.section{padding:4rem 1.2rem}.hero{padding:90px 1.2rem 50px}.sla-bar{grid-template-columns:1fr}.shield-360{max-width:260px}.nav-brand-text{font-size:.9rem}.nav-brand-sub{font-size:.5rem;letter-spacing:1px}.nav-brand-logo{height:44px;width:44px}}
        .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
        .reveal.visible{opacity:1;transform:translateY(0)}

        /* SOLUCIONES SGS */
        .sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
        .sol-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:2rem 1.5rem;transition:all .35s;text-decoration:none;color:var(--text);display:flex;flex-direction:column;gap:.8rem}
        .sol-card:hover{border-color:rgba(255,255,255,0.15);transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,0.2)}
        body.light .sol-card:hover{box-shadow:0 12px 30px rgba(0,0,0,0.08)}
        .sol-card-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;border:2px solid}
        .sol-card h4{font-size:1rem;font-weight:700}
        .sol-card p{font-size:.85rem;color:var(--text-dim);line-height:1.5;flex:1}
        .sol-card-arrow{font-size:.8rem;color:var(--blue-light);font-weight:600;display:flex;align-items:center;gap:.4rem;transition:gap .3s}
        .sol-card:hover .sol-card-arrow{gap:.8rem}
        @media(max-width:1100px){.sol-grid{grid-template-columns:1fr 1fr}}
        @media(max-width:768px){.sol-grid{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════
   COMPONENTES DE LANDING — mismo sistema de tokens que index.html.
   Usados por las páginas de servicio/marca/clúster (full-width).
   ═══════════════════════════════════════════════════════════════ */
.l-section{padding:5.5rem 2rem;position:relative}
.l-section.alt{background:var(--surface);border-block:1px solid var(--border)}
.l-inner{max-width:1200px;margin:0 auto;position:relative;z-index:1}
.l-hero{min-height:70vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:120px 2rem 70px}
.l-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 25% 40%,rgba(10,102,191,0.09),transparent 70%),radial-gradient(ellipse 45% 45% at 85% 30%,rgba(0,232,123,0.06),transparent 70%);pointer-events:none}
.l-hero::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.015) 1px,transparent 1px);background-size:80px 80px;pointer-events:none}
body.light .l-hero::after{background-image:linear-gradient(rgba(0,0,0,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.025) 1px,transparent 1px)}
.l-hero .l-inner{max-width:1200px;width:100%}
.l-eyebrow{display:inline-flex;align-items:center;gap:.5rem;background:rgba(0,232,123,0.1);border:1px solid rgba(0,232,123,0.3);padding:.5rem 1.1rem;border-radius:50px;font-size:.72rem;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:1.6rem}
.l-hero h1{font-family:'Sora';font-weight:800;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.08;letter-spacing:-.02em;margin-bottom:1.2rem;max-width:20ch}
.l-lead{font-size:clamp(1.05rem,2vw,1.28rem);color:var(--text-dim);max-width:60ch;margin-bottom:2rem;line-height:1.7}
.l-cta-row{display:flex;flex-wrap:wrap;gap:1rem}
.l-kicker{font-family:'DM Sans';font-size:.74rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--green);margin-bottom:.8rem}
.l-h2{font-family:'Sora';font-weight:700;font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.15;letter-spacing:-.02em;margin-bottom:1rem}
.l-sub{color:var(--text-dim);font-size:1.05rem;max-width:70ch;margin-bottom:2.4rem;line-height:1.7}
.l-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.4rem}
.l-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:1.7rem;transition:transform .3s,border-color .3s}
.l-card:hover{transform:translateY(-4px);border-color:rgba(0,232,123,0.35)}
.l-card h3{font-family:'Sora';font-weight:600;font-size:1.12rem;margin-bottom:.6rem;display:flex;align-items:center;gap:.55rem}
.l-card h3::before{content:'';width:9px;height:9px;border-radius:3px;background:var(--green);flex:none}
.l-card p{color:var(--text-dim);font-size:.96rem;margin:0}
.l-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem}
.l-feature{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:1.4rem 1.5rem}
.l-feature strong{display:block;font-family:'Sora';font-size:1.02rem;margin-bottom:.35rem}
.l-feature span{color:var(--text-dim);font-size:.92rem}
.l-list{list-style:none;display:grid;gap:.9rem;max-width:70ch}
.l-list li{position:relative;padding-left:1.9rem;color:var(--text-dim);line-height:1.6}
.l-list li::before{content:'\2713';position:absolute;left:0;top:0;color:var(--green);font-weight:800}
.l-faq{display:grid;gap:.8rem;max-width:820px}
.l-faq details{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:.2rem 1.3rem}
.l-faq summary{cursor:pointer;font-family:'Sora';font-weight:600;padding:1rem 0;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.l-faq summary::-webkit-details-marker{display:none}
.l-faq summary::after{content:'+';color:var(--green);font-weight:800;font-size:1.4rem;line-height:1}
.l-faq details[open] summary::after{content:'\2212'}
.l-faq details p{margin:0 0 1.1rem;color:var(--text-dim);line-height:1.7}
.l-final{padding:5.5rem 2rem;text-align:center;background:linear-gradient(135deg,rgba(10,102,191,0.12),rgba(156,31,66,0.12));border-block:1px solid var(--border)}
.l-final h2{font-family:'Sora';font-weight:800;font-size:clamp(1.8rem,3.6vw,2.6rem);letter-spacing:-.02em;margin-bottom:.9rem}
.l-final p{color:var(--text-dim);max-width:54ch;margin:0 auto 2rem;font-size:1.08rem}
.l-crumb{max-width:1200px;margin:0 auto;padding:1.4rem 2rem 0;font-size:.82rem;color:var(--text-muted)}
.l-crumb a{color:var(--text-dim);text-decoration:none}
.l-crumb a:hover{color:var(--green)}
@media(max-width:768px){.l-section,.l-hero,.l-final{padding-left:1.3rem;padding-right:1.3rem}.l-crumb{padding-left:1.3rem;padding-right:1.3rem}.l-cta-row .btn{width:100%;justify-content:center}}

/* Formularios de alta compartidos (registro / lead) */
.registro-box{max-width:640px;margin:0 auto;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:3rem 2.5rem;box-shadow:0 12px 40px rgba(0,0,0,.25)}
body.light .registro-box{box-shadow:0 12px 40px rgba(0,0,0,.08)}
.registro-box h2{font-size:1.5rem;font-weight:800;text-align:center;margin-bottom:.4rem;font-family:'Sora'}
.registro-box .registro-sub{text-align:center;font-size:.95rem;color:var(--text-muted);margin-bottom:1.8rem}
.registro-box .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.registro-box .form-group{margin-bottom:1rem}
.registro-box .form-group label{display:block;font-size:.88rem;font-weight:600;color:var(--text-dim);margin-bottom:.35rem}
.registro-box .form-group input,.registro-box .form-group select{width:100%;padding:.65rem .9rem;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:1rem;font-family:'DM Sans';outline:none;transition:border .15s,box-shadow .15s}
.registro-box .form-group input:focus,.registro-box .form-group select:focus{border-color:var(--blue-light);box-shadow:0 0 0 3px rgba(26,138,237,.18)}
.registro-box .form-group input::placeholder{color:var(--text-muted)}
.registro-box .form-group select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7394' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.2rem}
.registro-box .form-group select option{background:var(--surface);color:var(--text)}
.btn-registro{width:100%;padding:.8rem;background:var(--blue);color:#fff;border:none;border-radius:8px;font-size:1.05rem;font-weight:700;cursor:pointer;font-family:'DM Sans';margin-top:.8rem;transition:all .15s;box-shadow:0 2px 8px rgba(10,102,191,.3);display:flex;align-items:center;justify-content:center;gap:.5rem}
.btn-registro:hover{background:var(--blue-light);box-shadow:0 4px 16px rgba(10,102,191,.4)}
.btn-registro:active{transform:scale(.98)}
.btn-registro:disabled{opacity:.5;cursor:not-allowed}
.registro-error{color:var(--red-light);font-size:.88rem;text-align:center;min-height:1.2em;margin-top:.5rem}
.registro-success{color:var(--green);font-size:.95rem;text-align:center;padding:1.5rem}
.registro-footer-note{text-align:center;font-size:.85rem;color:var(--text-muted);margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--border);line-height:1.6}
.registro-footer-note a{color:var(--blue-light);text-decoration:none}
@media(max-width:500px){.registro-box .form-row{grid-template-columns:1fr}.registro-box{padding:2rem 1.5rem}}