:root{
      /* Primary brand colors */
      --g-900: #0f172a;
      --g-800: #1e293b;
      --g-700: #334155;
      --g-600: #475569;
      --g-500: #64748b;
      --g-400: #94a3b8;
      --g-300: #cbd5e1;
      --g-200: #e2e8f0;
      --g-100: #f1f5f9;
      --g-75: #f8fafc;
      --g-50: #f8fafc;
      --white: #ffffff;

      /* Accent color system - Deep navy blue for trust & professionalism */
      --accent-700: #1e3a5f;
      --accent-600: #1e40af;
      --accent-500: #2563eb;
      --accent-400: #3b82f6;
      --accent-100: #dbeafe;
      --accent-50: #eff6ff;

      /* Secondary accent - Subtle indigo for highlights */
      --secondary-600: #4f46e5;
      --secondary-500: #6366f1;
      --secondary-100: #e0e7ff;
      --secondary-50: #eef2ff;

      /* Success green */
      --success-600: #059669;
      --success-500: #10b981;
      --success-100: #d1fae5;

      --radius: 18px;
      --radius-sm: 12px;
      --radius-lg: 24px;
      --shadow-lg: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
      --shadow-md: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -2px rgba(15, 23, 42, 0.05);
      --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
      --shadow-accent: 0 10px 40px -10px rgba(30, 64, 175, 0.35);
      --ring: 0 0 0 1px var(--g-200) inset, 0 2px 0 rgba(255, 255, 255, .8) inset;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: linear-gradient(180deg, var(--g-50), var(--white)); color:var(--g-800); line-height:1.7}
    h1, h2, h3{font-family:'DM Sans', Inter, system-ui, sans-serif}
    a{color:inherit; text-decoration:none}
    .container{max-width:1200px; margin:0 auto; padding:0 24px}
    .skip-link{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}
    .skip-link:focus{position:fixed; left:16px; top:16px; width:auto; height:auto; padding:8px 12px; background:var(--white); color:var(--g-900); border:1px solid var(--g-200); z-index:1000; border-radius:10px}
    header{position:sticky; top:0; z-index:60; border-bottom:1px solid var(--g-200); background:rgba(255,255,255,.75); backdrop-filter: blur(10px)}
    .nav{display:flex; align-items:center; justify-content:space-between; padding:16px 0}
    .brand{display:flex; align-items:center; gap:10px; color:var(--g-900); font-weight:800; letter-spacing:.2px}
    .brand img{height:32px; width:auto; filter: drop-shadow(0 2px 4px rgba(16,24,40,.06))}
    nav ul{display:flex; list-style:none; gap:28px; padding:0; margin:0}
    nav a{color:var(--g-700); font-weight:500; position:relative}
    nav a::after{content:""; position:absolute; left:0; bottom:-8px; width:0; height:2px; background:linear-gradient(90deg,var(--g-800),transparent); transition:width .2s ease}
    nav a:hover{color:var(--g-900)} nav a:hover::after{width:100%}
    .btn{display:inline-block; padding:14px 24px; border-radius:var(--radius-sm); font-weight:600; border:1px solid var(--g-200); background:var(--white); color:var(--g-800); transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
    .btn:hover{transform:translateY(-1px); box-shadow:var(--shadow-md); background:var(--g-50); border-color:var(--g-300)}
    .btn--primary{background: var(--accent-600); color:var(--white); border-color:var(--accent-600)}
    .btn--primary:hover{transform:translateY(-1px); box-shadow: var(--shadow-accent); background: var(--accent-500); border-color:var(--accent-500)}
    .btn--ghost{background:transparent; border-color:transparent; color:var(--accent-600)}
    .btn--ghost:hover{background:var(--accent-50); border-color:var(--accent-100)}
    .btn-block{display:block; width:100%; text-align:center}
    .menu{display:none; background:none; border:1px solid var(--g-300); padding:8px 16px; border-radius:8px; cursor:pointer; color:var(--g-800); font-weight:600}
    .menu:hover{background:var(--g-50)}
    .nav-mobile{display:none; position:fixed; top:73px; left:0; right:0; background:var(--white); border-bottom:1px solid var(--g-200); box-shadow:var(--shadow-lg); z-index:50; padding:20px 24px}
    .nav-mobile.active{display:block}
    .nav-mobile ul{list-style:none; padding:0; margin:0}
    .nav-mobile li{margin:16px 0}
    .nav-mobile a{display:block; color:var(--g-800); font-weight:500; font-size:16px}
    .nav-mobile .btn{display:block; text-align:center; margin:12px 0}
    .hero{padding:120px 0 72px; position:relative; overflow:hidden}
    .hero::before{content:""; position:absolute; inset:-10% -10% 40% -10%; background:
        radial-gradient(600px 260px at 15% 10%, rgba(16,24,40,.08), transparent 60%),
        radial-gradient(700px 300px at 85% 15%, rgba(16,24,40,.06), transparent 60%);
      pointer-events:none}
    .hero-grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:56px; align-items:center; perspective:1200px}
    .eyebrow{display:inline-flex; gap:8px; align-items:center; padding:6px 14px; border:1px solid var(--accent-100); border-radius:999px; color:var(--accent-600); font-size:12px; letter-spacing:.08em; text-transform:uppercase; background:var(--accent-50); font-weight:600}
    h1{color:var(--g-900); font-size:56px; line-height:1.1; letter-spacing:-.02em; margin:14px 0 16px}
    .lead{color:var(--g-700); font-size:22px; margin-bottom:28px}
    .hero-cta{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
    .hero-cta small{font-size:12px; color:var(--g-600)}
    .art{position:relative; border:1px solid var(--g-200); background:linear-gradient(180deg, var(--white), var(--g-50)); border-radius:22px; overflow:hidden; box-shadow:var(--shadow-lg); transform:rotateY(-8deg) rotateX(2deg); transform-style:preserve-3d; transition:transform .3s ease, box-shadow .3s ease}
    .art:hover{transform:rotateY(-2deg) rotateX(0deg) translateY(-2px)}
    .art img{display:block; width:100%; height:auto; will-change:transform; transform:translateZ(40px)}
    .hero-metrics{display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin-top:18px}
    .metric{background:var(--white); border:1px solid var(--g-200); border-radius:14px; padding:12px 14px; box-shadow:var(--shadow-md)}
    .metric b{display:block; font-size:20px; color:var(--g-900)}
    .metric span{font-size:12px; color:var(--g-600)}
    section{padding:96px 0}
    .section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:24px}
    h2{color:var(--g-900); font-size:40px; line-height:1.2; letter-spacing:-.015em; margin:0}
    .muted{color:var(--g-700); font-size:18px; margin:8px 0 0}
    .split{display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:center}
    .panel{padding:28px; border:1px solid var(--g-200); border-radius:20px; background:var(--white); box-shadow:var(--shadow-md)}
    .check{display:flex; gap:10px; align-items:flex-start; color:var(--g-700)}
    .check + .check{margin-top:10px}
    .check svg{flex:0 0 auto; margin-top:3px; color:var(--accent-600)}
    .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
    .grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
    .card{background:var(--white); border:1px solid var(--g-200); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
    .card:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--g-300)}
    .card h3{margin:0 0 10px; color:var(--g-900); font-size:20px; line-height:1.3; font-weight:600}
    .card p{margin:0; color:var(--g-600); font-size:15px; line-height:1.7}
    .card--featured{border:2px solid var(--accent-600); box-shadow:var(--shadow-md)}
    .card--featured:hover{box-shadow:var(--shadow-accent); border-color:var(--accent-500)}
    .card--highlight{background:linear-gradient(135deg, var(--accent-50), var(--white)); border-color:var(--accent-200)}
    .card__icon{width:44px; height:44px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; margin-bottom:16px; background:var(--accent-50); color:var(--accent-600)}
    .card__icon--dark{background:var(--g-900); color:var(--white)}
    .pricing{background:linear-gradient(0deg, rgba(16,24,40,.03), rgba(16,24,40,0)); border-top:1px solid var(--g-200)}
    .price-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:20px; margin-bottom:48px}
    .pack-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
    .price .badge{display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:.1em; background: var(--accent-600); color: var(--white); padding:6px 12px; border-radius:6px; border:none; margin-bottom:12px; font-weight:600}
    .price .big{font-size:42px; color:var(--g-900); font-weight:800}
    .price .small-price{font-size:26px; color:var(--g-900); font-weight:700}
    .price-per{color:var(--g-600); font-size:14px; margin-top:4px}
    .price-note{margin-top:16px; font-size:13px; color:var(--g-500)}
    .pack-title{font-size:17px; margin-top:8px}
    .list{list-style:none; padding:0; margin:18px 0 0}
    .list li{display:flex; gap:10px; align-items:flex-start; margin:10px 0; color:var(--g-800); font-size:14px}
    .faq{max-width:900px}
    details{border-top:1px solid var(--g-200); padding:18px 0}
    details[open]{background:linear-gradient(180deg, rgba(16,24,40,.02), transparent)}
    summary{cursor:pointer; list-style:none; color:var(--g-900); font-weight:600}
    summary::-webkit-details-marker{display:none}
    .cta{background:linear-gradient(180deg, var(--g-50), var(--white)); border-top:1px solid var(--g-200); text-align:center}
    .cta h2{font-size:38px; margin-bottom:12px}
    .cta-content{padding:72px 0}
    .cta-buttons{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
    footer{border-top:1px solid var(--g-200); color:var(--g-600); background:var(--white)}
    .foot{display:grid; grid-template-columns: repeat(4, 1fr); gap:28px; padding:48px 0}
    .foot h4{color:var(--g-900); margin:0 0 10px; font-size:14px}
    .foot a{color:var(--g-700); font-size:14px}
    .foot a:hover{color:var(--g-900)}
    .copyright{text-align:center; margin-top:28px; font-size:13px; color:var(--g-500)}
    .trust{background:var(--white); border-bottom:1px solid var(--g-200); padding:40px 0; text-align:center}
    .trust-badges{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px; max-width:1000px; margin:0 auto}
    .badge-item{display:flex; align-items:center; gap:10px; color:var(--g-700); font-size:14px; font-weight:500; justify-content:center}
    .badge-item svg{color:var(--g-600); flex-shrink:0}
    .social-proof{background:linear-gradient(180deg, var(--g-50), var(--white)); padding:72px 0}
    .testimonials{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:32px}
    .testimonial{background:var(--white); border:1px solid var(--g-200); border-radius:18px; padding:24px; box-shadow:var(--shadow-md)}
    .testimonial-text{color:var(--g-800); font-size:15px; line-height:1.6; margin:0 0 16px; font-style:italic}
    .testimonial-author{display:flex; align-items:center; gap:12px}
    .testimonial-avatar{width:40px; height:40px; border-radius:50%; background:var(--g-200); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--g-700)}
    .testimonial-info strong{display:block; color:var(--g-900); font-size:14px}
    .testimonial-info span{color:var(--g-600); font-size:13px}
    .stars{color: var(--accent-500); font-size:14px; letter-spacing:1px; margin-bottom:12px}
    .comparison{background:var(--white)}
    /* Section variants */
    .section--accent{background:var(--accent-50); border-top:1px solid var(--accent-100); border-bottom:1px solid var(--accent-100)}
    .section--dark{background:var(--g-900); color:var(--white)}
    .section--dark h2, .section--dark h3{color:var(--white)}
    .section--dark .muted{color:var(--g-300)}
    .section--subtle{background:linear-gradient(180deg, var(--g-50), var(--white))}
    .section--bordered{border-top:1px solid var(--g-200); border-bottom:1px solid var(--g-200)}
    .comparison-table{max-width:900px; margin:32px auto 0; border:1px solid var(--g-200); border-radius:18px; overflow:hidden}
    .comparison-table table{width:100%; border-collapse:collapse}
    .comparison-table th{background:var(--g-100); padding:16px; text-align:left; font-weight:600; border-bottom:1px solid var(--g-200)}
    .comparison-table td{padding:16px; border-bottom:1px solid var(--g-200)}
    .comparison-table tr:last-child td{border-bottom:none}
    .comparison-table .check-icon{color:var(--success-600); font-weight:600}
    .comparison-table .x-icon{color:var(--g-400); font-weight:400}
    .comparison-table .th-accent{background:var(--accent-600); color:var(--white)}
    .comparison-table .th-sub{font-weight:400; color:var(--g-500); font-size:13px}
    .comparison-table .th-sub-light{font-weight:400; color:rgba(255,255,255,.7); font-size:13px}
    .newsletter{background:var(--g-900); color:var(--white); padding:56px 0; margin-top:0}
    .newsletter h3{color:var(--white); margin:0 0 8px; font-size:22px; font-weight:600}
    .newsletter p{color:var(--g-300); margin:0 0 24px; font-size:15px}
    .newsletter-form{display:flex; gap:12px; max-width:480px; margin:0 auto}
    .newsletter-form input{flex:1; padding:14px 18px; border:1px solid var(--g-700); border-radius:var(--radius-sm); background:var(--g-800); color:var(--white); font-size:15px}
    .newsletter-form input::placeholder{color:var(--g-500)}
    .newsletter-form input:focus{outline:none; border-color:var(--accent-500); background:var(--g-800)}
    .newsletter-form button{padding:14px 28px; background:var(--accent-600); color:var(--white); border:none; border-radius:var(--radius-sm); font-weight:600; cursor:pointer; transition:background .15s ease, transform .15s ease}
    .newsletter-form button:hover{background:var(--accent-500); transform:translateY(-1px)}
    .newsletter-message{margin-top:12px; font-size:14px}
    .persona-ctas{background:var(--g-50); padding:72px 0; border-top:1px solid var(--g-200)}
    .persona-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:32px}
    .pricing-hint{background:var(--accent-50); border:1px solid var(--accent-100); border-radius:var(--radius-sm); padding:16px 24px; margin-bottom:36px; text-align:center; color:var(--g-700); font-size:15px}
    .pricing-hint strong{color:var(--accent-600)}
    /* Utility classes */
    .text-center{text-align:center}
    .text-accent{color:var(--accent-600)}
    .bg-accent{background:var(--accent-50)}
    .mt-0{margin-top:0}.mt-4{margin-top:16px}.mt-8{margin-top:32px}.mt-12{margin-top:48px}
    .mb-0{margin-bottom:0}.mb-4{margin-bottom:16px}.mb-8{margin-bottom:32px}.mb-12{margin-bottom:48px}
    .section-header{max-width:680px; margin:0 auto 48px; text-align:center}
    .section-header h2{margin-bottom:12px}
    .section-header .muted{font-size:17px}
    /* Feature highlight box */
    .highlight-box{background:var(--g-900); color:var(--white); padding:24px 32px; border-radius:var(--radius); text-align:center}
    .highlight-box p{margin:0; font-size:16px; color:var(--g-200)}
    .highlight-box strong{color:var(--white)}
    /* Stats bar */
    .stats-bar{background:var(--g-50); border:1px solid var(--g-200); padding:20px 28px; border-radius:var(--radius); text-align:center}
    .stats-bar p{margin:0; font-size:15px; color:var(--g-600)}
    .stats-bar strong{color:var(--g-900)}
    /* Trust section */
    .trust-section{background:var(--white); padding:48px 0; border-top:1px solid var(--g-200)}
    .trust-label{color:var(--g-500); font-size:12px; text-transform:uppercase; letter-spacing:.1em; margin:0 0 20px; font-weight:600}
    .trust-logos{display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap}
    .trust-logo{color:var(--g-600); font-size:15px; font-weight:600}
    .trust-sep{width:4px; height:4px; border-radius:50%; background:var(--g-300)}
    .trust-count{color:var(--g-500); font-size:15px; font-weight:500}
    @media (max-width: 900px){.persona-grid, .testimonials{grid-template-columns:1fr}}
    @media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important} }
    @media (max-width: 1100px){ .hero-grid, .split, .grid-3, .pack-grid{grid-template-columns:1fr} .price-grid{grid-template-columns:repeat(2,1fr)} .hero{padding-top:96px} h1{font-size:44px} }
    @media (max-width: 720px){ .price-grid{grid-template-columns:1fr} }
    @media (max-width: 720px){ .menu{display:block} nav ul{display:none} .trust-badges{grid-template-columns:1fr; gap:16px} }