*{margin:0;padding:0;box-sizing:border-box}
    :root{
        --primary-blue:#0066FF;--primary-purple:#6366F1;--success-green:#10B981;--warning-orange:#F59E0B;--error-red:#EF4444;
        --gray-50:#F9FAFB;--gray-100:#F3F4F6;--gray-200:#E5E7EB;--gray-300:#D1D5DB;--gray-400:#9CA3AF;--gray-500:#6B7280;--gray-600:#4B5563;--gray-700:#374151;--gray-800:#1F2937;--gray-900:#111827;--white:#FFFFFF;
        --gradient-primary:linear-gradient(135deg,#0066FF 0%,#6366F1 100%);
        --gradient-secondary:linear-gradient(135deg,#10B981 0%,#059669 100%);
        --shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);
        --shadow-md:0 4px 6px -1px rgba(0,0,0,.1);
        --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1);
        --shadow-xl:0 20px 25px -5px rgba(0,0,0,.2);
    }

    html,body{height:100%}
    body{
        line-height:1.6;
        color:#E5E7EB;
        background:#000;
        overflow-x:hidden;
        display:flex;
        flex-direction:column;
        position:relative;
    }

    /* Glassmorph background (matches Smart Starter / Enterprise Plus) */
    body::before{
        content:"";
        position:fixed;inset:0;
        z-index:-1;
        pointer-events:none;
    }
    body::after{
        content:"";
        position:fixed;inset:0;
        z-index:-2;
        background:url('../assets/team-connect-main-office.webp') center top / cover no-repeat;
        transform:translateZ(0);
        will-change:transform;
        pointer-events:none;
    }
    @media(max-width:768px){
        body::after{background-position:center 20%!important}
        body::before{background:linear-gradient(to bottom,rgba(0,0,0,.8),rgba(0,0,0,.6))!important}
    }

    header,main,footer{position:relative;z-index:1;}

    /* Header (simple logo like Smart Starter) */
    .header{
        position:fixed;
        top:0;left:0;right:0;
        background:#000;
        border-bottom:1px solid #222;
        z-index:1000;
        transition:all .3s ease;
    }
    .header.scrolled{
        background:#000!important;
        box-shadow:0 2px 6px rgba(0,0,0,.6);
    }
    .nav{
        max-width:1200px;margin:0 auto;
        display:flex;justify-content:flex-start;align-items:center;
        padding:1rem 2rem;
    }
    .logo{
        display:flex;align-items:center;gap:12px;
        font-size:24px;font-weight:800;
        color:var(--primary-blue);text-decoration:none;
    }
    .logo-img{height:40px;width:auto;display:block;border-radius:6px;}

    /* Burger menu ALWAYS visible (desktop + mobile) */
    .burger-menu{
        position:fixed;
        top:calc(env(safe-area-inset-top) + 20px);
        right:20px;
        z-index:1001;
        background:#fff;
        border:1px solid var(--gray-200);
        border-radius:12px;
        padding:12px;
        cursor:pointer;
        box-shadow:var(--shadow-md);
        transition:transform .2s ease;
        display:block;
    }
    .burger-menu:hover{transform:scale(1.05);}
    .burger-icon{
        width:24px;height:24px;
        display:flex;flex-direction:column;justify-content:space-between;
    }
    .burger-line{
        width:100%;height:3px;
        background:var(--gray-700);
        border-radius:2px;
        transition:all .3s ease;
    }
    .burger-menu.active .burger-line:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
    .burger-menu.active .burger-line:nth-child(2){opacity:0;}
    .burger-menu.active .burger-line:nth-child(3){transform:rotate(-45deg) translate(7px,-6px);}

    .nav-overlay{
        position:fixed;top:0;left:0;width:100%;height:100%;
        background:rgba(0,0,0,.5);
        z-index:999;
        opacity:0;visibility:hidden;
        transition:all .3s ease;
    }
    .nav-overlay.active{opacity:1;visibility:visible;}

    .nav-sidebar{
        position:fixed;top:0;right:-300px;
        width:300px;height:100vh;
        background:#fff;
        border-left:1px solid var(--gray-200);
        z-index:1000;
        transition:right .3s ease;
        overflow-y:auto;overflow-x:hidden;
        -webkit-overflow-scrolling:touch;
        padding-top:calc(env(safe-area-inset-top) + 20px);
        box-shadow:0 20px 25px rgba(0,0,0,.25);
    }
    .nav-sidebar.active{right:0;}

    .nav-header{
        padding:20px;border-bottom:1px solid var(--gray-200);
        display:flex;align-items:center;gap:12px;
    }
    .nav-logo{
        width:40px;height:40px;
        background:var(--gradient-primary);
        border-radius:10px;
        display:flex;align-items:center;justify-content:center;
        font-weight:700;color:#fff;font-size:16px;
    }
    .nav-title{font-size:1.2em;font-weight:600;color:var(--gray-900);}

    .nav-section{padding:20px 0;border-bottom:1px solid var(--gray-200);}
    .nav-section:last-child{border-bottom:none;}

    .nav-section-title{
        padding:0 20px 12px;
        font-size:.8em;color:var(--gray-500);
        text-transform:uppercase;font-weight:600;letter-spacing:.5px;
    }
    .nav-item{
        display:flex;align-items:center;
        padding:12px 20px;
        color:var(--gray-700);
        text-decoration:none;
        transition:background-color .2s ease;
        cursor:pointer;
    }
    .nav-item:hover{
        background:var(--gray-50);
        color:var(--primary-blue);
    }
    .nav-item.active{
        background:rgba(0,102,255,.08);
        color:var(--primary-blue);
        border-left:3px solid var(--primary-blue);
    }
    .nav-item-icon{
        font-size:1.2em;margin-right:12px;
        width:24px;text-align:center;
    }
    .nav-item-text{font-weight:500;}

    /* Hide top nav links (desktop) so sidebar is main nav */
    .nav-links{display:none;}
    .nav-cta{display:none;}

    main{flex:1 0 auto;}
    .main{padding-top:80px;}

    .container{
        max-width:1200px;
        margin:0 auto;
        padding:0 2rem;
    }
    @media(max-width:768px){
        .container{padding:0 1rem;}
    }

    /* HERO -> glass card */
    .hero{
        padding:120px 2rem 60px;
    }
    .hero-inner{
        max-width:900px;
        margin:0 auto;
        background:rgba(15,23,42,.85);
        border-radius:26px;
        border:1px solid rgba(148,163,184,.6);
        backdrop-filter:blur(24px) saturate(130%);
        -webkit-backdrop-filter:blur(24px) saturate(130%);
        box-shadow:0 24px 50px rgba(0,0,0,.7);
        padding:50px 36px;
        text-align:center;
    }
    .hero h1{
        font-size:clamp(2.2rem,4.5vw,3.4rem);
        font-weight:900;
        margin-bottom:.75rem;
        color:#fff;
        text-shadow:0 3px 10px rgba(0,0,0,.6);
    }
    .hero p{
        font-size:1.05rem;
        color:#E5E7EB;
        margin-bottom:1.75rem;
        max-width:640px;
        margin-left:auto;margin-right:auto;
    }
    .hero-stats{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
        gap:1.25rem;
        max-width:600px;
        margin:0 auto;
    }
    .stat-item{
        background:rgba(15,23,42,.95);
        border-radius:16px;
        padding:1rem;
        border:1px solid rgba(55,65,81,.9);
    }
    .stat-number{
        font-size:1.7rem;font-weight:900;
        display:block;margin-bottom:.25rem;
        color:#FBBF24;
    }
    .stat-label{
        font-size:.85rem;color:#D1D5DB;
    }

    /* Contact Methods -> glass cards */
    .contact-methods{
        padding:40px 2rem 30px;
    }
    .section-header{
        text-align:center;margin-bottom:2.5rem;
    }
    .section-title{
        font-size:clamp(2rem,4vw,2.7rem);
        font-weight:900;
        color:#fff;
        text-shadow:0 2px 8px rgba(0,0,0,.6);
        margin-bottom:.75rem;
    }
    .section-subtitle{
        font-size:1.05rem;
        color:#E5E7EB;
        max-width:640px;
        margin:0 auto;
    }

    .methods-grid{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
        gap:1.8rem;
        margin-top:2rem;
    }
    .method-card{
        background:rgba(15,23,42,.9);
        border-radius:20px;
        padding:2rem 2.1rem;
        box-shadow:0 18px 40px rgba(0,0,0,.65);
        border:1px solid rgba(55,65,81,.9);
        text-align:center;
        transition:transform .2s ease,box-shadow .2s ease;
    }
    .method-card:hover{
        transform:translateY(-4px);
        box-shadow:0 22px 50px rgba(0,0,0,.8);
    }
    .method-icon{
        width:70px;height:70px;
        background:var(--gradient-primary);
        border-radius:18px;
        display:flex;align-items:center;justify-content:center;
        margin:0 auto 1.2rem;
        font-size:2rem;color:#fff;
    }
    .method-title{
        font-size:1.3rem;font-weight:800;
        color:#F9FAFB;
        margin-bottom:.6rem;
    }
    .method-desc{
        color:#E5E7EB;
        margin-bottom:1.2rem;
        font-size:.95rem;
    }
    .method-info{
        background:rgba(15,23,42,.96);
        padding:.9rem 1rem;
        border-radius:10px;
        margin-bottom:1.3rem;
        border:1px solid rgba(55,65,81,.9);
        color:#E5E7EB;
        font-size:.92rem;
    }
    .btn{
        padding:1rem 2rem;
        border-radius:999px;
        font-weight:800;
        text-decoration:none;
        transition:all .2s ease;
        cursor:pointer;
        border:none;
        font-size:.95rem;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:8px;
        text-transform:uppercase;
        letter-spacing:.06em;
    }
    .btn-primary{
        background:var(--gradient-primary);color:#fff;
    }
    .btn-primary:hover{
        transform:translateY(-2px);
        box-shadow:0 16px 35px rgba(37,99,235,.55);
    }
    .btn-secondary{
        background:transparent;color:#E5E7EB;
        border:1px solid rgba(148,163,184,.9);
    }
    .btn-secondary:hover{
        background:rgba(148,163,184,.15);
        transform:translateY(-2px);
    }
    .method-cta{width:100%;}

    /* FAQ Section -> glass accordions */
    .faq-section{
        padding:30px 2rem 40px;
    }
    .faq-categories{
        display:flex;justify-content:center;gap:10px;
        margin-bottom:2rem;flex-wrap:wrap;
    }
    .faq-category{
        padding:.65rem 1.4rem;
        border-radius:999px;
        background:rgba(15,23,42,.85);
        border:1px solid rgba(148,163,184,.7);
        color:#E5E7EB;
        cursor:pointer;
        font-size:.9rem;
        font-weight:600;
        transition:all .2s ease;
    }
    .faq-category.active{
        background:var(--primary-blue);
        border-color:var(--primary-blue);
    }
    .faq-category:hover{
        border-color:#60A5FA;
    }

    .faq-grid{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
        gap:1.2rem;
    }
    .faq-item{
        background:rgba(15,23,42,.95);
        border-radius:16px;
        border:1px solid rgba(55,65,81,.9);
        overflow:hidden;
        box-shadow:0 16px 40px rgba(0,0,0,.7);
        transition:box-shadow .2s ease,transform .2s ease;
    }
    .faq-item:hover{
        transform:translateY(-2px);
        box-shadow:0 20px 45px rgba(0,0,0,.8);
    }
    .faq-question{
        padding:1.1rem 1.4rem;
        cursor:pointer;
        display:flex;justify-content:space-between;align-items:center;
        font-weight:700;
        color:#F9FAFB;
        background:rgba(15,23,42,.96);
        border-bottom:1px solid rgba(55,65,81,.9);
    }
    .faq-toggle{
        font-size:1.1rem;
        transition:transform .2s ease;
    }
    .faq-item.active .faq-toggle{transform:rotate(180deg);}
    .faq-answer{
        max-height:0;
        overflow:hidden;
        transition:max-height .25s ease;
    }
    .faq-item.active .faq-answer{max-height:500px;}
    .faq-answer-content{
        padding:1.1rem 1.4rem;
        color:#E5E7EB;
        font-size:.92rem;
        line-height:1.7;
    }

    /* Contact Form -> glass card */
    .contact-form-section{
        padding:30px 2rem 70px;
    }
    .form-container{
        max-width:880px;
        margin:0 auto;
        background:rgba(15,23,42,.95);
        border-radius:22px;
        padding:2.6rem 2.4rem;
        box-shadow:0 22px 50px rgba(0,0,0,.75);
        border:1px solid rgba(55,65,81,.9);
    }
    .form-header{
        text-align:center;
        margin-bottom:2rem;
    }
    .form-header h2{
        font-size:1.8rem;font-weight:800;
        color:#fff;margin-bottom:.4rem;
    }
    .form-header p{
        color:#E5E7EB;font-size:.96rem;
    }
    .form-group{margin-bottom:1.25rem;}
    .form-row{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:1rem;
    }
    .form-label{
        display:block;margin-bottom:.4rem;
        font-weight:500;color:#E5E7EB;font-size:.9rem;
    }
    .form-input,.form-select,.form-textarea{
        width:100%;
        padding:.7rem .9rem;
        border-radius:10px;
        border:1px solid rgba(75,85,99,.9);
        background:rgba(15,23,42,.98);
        color:#F9FAFB;
        font-size:.95rem;
        transition:all .2s ease;
    }
    .form-input:focus,.form-select:focus,.form-textarea:focus{
        outline:none;
        border-color:var(--primary-blue);
        box-shadow:0 0 0 2px rgba(59,130,246,.5);
    }
    .form-textarea{
        min-height:120px;
        resize:vertical;
    }
    .form-submit{
        width:100%;
        padding:1rem 2rem;
        background:var(--gradient-primary);
        color:#fff;
        border:none;
        border-radius:999px;
        font-size:.98rem;
        font-weight:800;
        cursor:pointer;
        text-transform:uppercase;
        letter-spacing:.08em;
        transition:all .2s ease;
    }
    .form-submit:hover{
        transform:translateY(-2px);
        box-shadow:0 18px 40px rgba(37,99,235,.6);
    }
    .form-submit:disabled{
        opacity:.6;cursor:not-allowed;transform:none;
        box-shadow:none;
    }
    .form-message{
        padding:.9rem 1rem;
        border-radius:10px;
        margin-bottom:1rem;
        text-align:center;
        font-weight:500;
        font-size:.93rem;
    }
    .form-message.success{background:#16A34A;color:#fff;}
    .form-message.error{background:#DC2626;color:#fff;}

    .loading{
        display:inline-block;
        width:20px;height:20px;
        border:2px solid #f3f3f3;
        border-top:2px solid white;
        border-radius:50%;
        animation:spin 1s linear infinite;
        margin-right:8px;
    }
    @keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}

    .hidden{display:none;}

    /* Footer (dark, like other pages) */
    .footer{
        background:#020617;
        color:#fff;
        padding:60px 2rem 20px;
        margin-top:auto;
    }
    .footer-content{
        max-width:1200px;
        margin:0 auto;
        display:grid;
        grid-template-columns:2fr 1fr 1fr 1fr;
        gap:3rem;
        margin-bottom:3rem;
    }
    .footer-brand h3{
        font-size:1.5rem;font-weight:800;
        margin-bottom:1rem;color:var(--primary-blue);
    }
    .footer-brand p{
        color:var(--gray-400);
        margin-bottom:2rem;
        line-height:1.6;
    }
    .footer-section h4{
        font-weight:600;margin-bottom:1rem;color:#fff;
    }
    .footer-section a{
        color:var(--gray-400);
        text-decoration:none;
        display:block;
        margin-bottom:.5rem;
        transition:color .2s ease;
    }
    .footer-section a:hover{color:var(--primary-blue);}
    .footer-support{
        border-top:1px solid #111827;
        padding:2rem 0 1rem;
        text-align:center;
    }
    .footer-bottom{
        text-align:center;
        color:var(--gray-500);
        font-size:.9rem;
        padding-top:1rem;
        border-top:1px solid #020617;
    }
    .social-links{
      margin-top:1rem;display:flex;gap:12px;
      align-items:center;flex-wrap:wrap;
    }
    .social-link{
      display:inline-flex;align-items:center;justify-content:center;
      width:38px;height:38px;border-radius:50%;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.15);
      transition:all .2s ease;
    }
    .social-link:hover{
      background:rgba(255,255,255,.14);
      border-color:var(--primary-blue);
      transform:translateY(-2px);
      box-shadow:0 6px 16px rgba(0,0,0,.25);
    }
    .social-icon{width:20px;height:20px;display:block;}

    /* Responsive tweaks */
    @media(max-width:900px){
        .form-row{grid-template-columns:1fr;}
    }
    @media(max-width:768px){
        .hero{padding:110px 1rem 50px;}
        .hero-inner{padding:40px 22px;}
        .methods-grid,.faq-grid{grid-template-columns:1fr;}
        .footer-content{
            grid-template-columns:1fr;
            text-align:center;
            gap:2rem;
        }
        .form-container{padding:2.2rem 1.6rem;}
    }