@font-face {
    font-family: Kalameh;
    font-weight: 400;
    src: url("../fonts/kalameh/Kalameh-Regular.ttf") format("truetype");
}

@font-face {
    font-family: Kalameh;
    font-weight: 600;
    src: url("../fonts/kalameh/Kalameh-Bold.ttf") format("truetype");
}

@font-face {
    font-family: Kalameh;
    font-weight: 900;
    src: url("../fonts/kalameh/Kalameh-Black.ttf") format("truetype");
}
        :root{
            --bg: #f6f8fc;
            --bg-soft: #ffffff;
            --surface: rgba(255,255,255,.72);
            --surface-strong: #ffffff;
            --text: #0f172a;
            --muted: #475569;
            --line: rgba(15,23,42,.08);
            --primary: #2563eb;
            --primary-2: #7c3aed;
            --success: #16a34a;
            --warning: #d97706;
            --shadow: 0 20px 60px rgba(15, 23, 42, .08);
            --shadow-sm: 0 10px 30px rgba(15, 23, 42, .06);
            --radius: 24px;
            --radius-lg: 32px;
            --container: 1240px;
        }

        html.dark{
            --bg: #07111f;
            --bg-soft: #0b1728;
            --surface: rgba(11,23,40,.72);
            --surface-strong: #0f1d31;
            --text: #ecf3ff;
            --muted: #a7b4c8;
            --line: rgba(255,255,255,.08);
            --primary: #60a5fa;
            --primary-2: #a78bfa;
            --success: #4ade80;
            --warning: #f59e0b;
            --shadow: 0 24px 70px rgba(0,0,0,.35);
            --shadow-sm: 0 12px 36px rgba(0,0,0,.22);
        }

        *{
            box-sizing:border-box;
        }

        html{
            scroll-behavior:smooth;
        }

        body{
            margin:0;
            font-family: Kalameh;
            background:
                radial-gradient(circle at top right, rgba(37,99,235,.10), transparent 28%),
                radial-gradient(circle at top left, rgba(124,58,237,.10), transparent 24%),
                var(--bg);
            color:var(--text);
            line-height:1.8;
            transition:background .25s ease, color .25s ease;
        }

        a{
            color:inherit;
            text-decoration:none;
        }

        img{
            max-width:100%;
            display:block;
        }

        .container{
            width:min(var(--container), calc(100% - 32px));
            margin-inline:auto;
        }

        .site-header{
            position:sticky;
            top:0;
            z-index:50;
            backdrop-filter: blur(16px);
            background: color-mix(in srgb, var(--bg) 82%, transparent);
            border-bottom:1px solid var(--line);
        }

        .nav{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            min-height:78px;
        }

        .brand{
            display:flex;
            align-items:center;
            gap:12px;
            font-weight:900;
            font-size:1.08rem;
        }

        .brand-badge{
            display: flex;
            align-items: center;
            justify-content: center;
            width:42px;
            height:42px;
            border-radius:14px;
            background:linear-gradient(135deg, var(--primary), var(--primary-2));
            box-shadow:0 16px 30px rgba(37,99,235,.22);
        }

        .nav-links{
            display:flex;
            align-items:center;
            gap:22px;
            color:var(--muted);
            font-weight:500;
        }

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

        .nav-actions{
            display:flex;
            align-items:center;
            gap:12px;
        }

        .theme-toggle,
        .menu-toggle{
            border:none;
            cursor:pointer;
            background:var(--surface);
            color:var(--text);
            border:1px solid var(--line);
            width:46px;
            height:46px;
            border-radius:16px;
            box-shadow:var(--shadow-sm);
            font-size:1.1rem;
        }

        .menu-toggle{
            display:none;
        }

        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            min-height:50px;
            padding:0 20px;
            border-radius:18px;
            border:1px solid transparent;
            font-weight:800;
            transition:.2s ease;
            white-space:nowrap;
        }

        .btn-primary{
            background:linear-gradient(135deg, var(--primary), var(--primary-2));
            color:#fff;
            box-shadow:0 18px 35px rgba(37,99,235,.24);
        }

        .btn-primary:hover{
            transform:translateY(-2px);
        }

        .btn-soft{
            background:var(--surface);
            border-color:var(--line);
            color:var(--text);
            box-shadow:var(--shadow-sm);
        }

        .hero{
            padding:72px 0 28px;
        }

        .hero-grid{
            display:grid;
            grid-template-columns:1fr;
            gap:24px;
            align-items:center;
        }

        .glass-card{
            background:var(--surface);
            border:1px solid var(--line);
            box-shadow:var(--shadow);
            border-radius:var(--radius-lg);
            backdrop-filter: blur(18px);
        }

        .hero-card{
            padding:34px;
            overflow:hidden;
            position:relative;
            isolation:isolate;
        }

        .hero-card::before{
            content:"";
            position:absolute;
            inset:auto auto -70px -70px;
            width:220px;
            height:220px;
            background:radial-gradient(circle, rgba(37,99,235,.18), transparent 68%);
            z-index:-1;
        }

        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:10px;
            padding:8px 14px;
            border-radius:999px;
            background:rgba(37,99,235,.10);
            color:var(--primary);
            font-weight:800;
            font-size:.92rem;
            margin-bottom:16px;
        }

        h1,h2,h3{
            line-height:1.35;
            margin:0 0 12px;
        }

        h1{
            font-size:clamp(2rem, 5vw, 4rem);
            font-weight:900;
            letter-spacing:-.03em;
        }

        .hero-card p{
            font-size:1.05rem;
            color:var(--muted);
            max-width:760px;
            margin:0 0 20px;
        }

        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:26px;
        }

        .hero-stats{
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:14px;
            margin-top:26px;
        }

        .stat{
            padding:18px;
            border-radius:22px;
            background:var(--bg-soft);
            border:1px solid var(--line);
        }

        .stat strong{
            display:block;
            font-size:1.3rem;
            font-weight:900;
            margin-bottom:4px;
        }

        .stat span{
            color:var(--muted);
            font-size:.94rem;
        }

        .section{
            padding:28px 0 72px;
        }

        .section-head{
            display:flex;
            align-items:end;
            justify-content:space-between;
            gap:16px;
            margin-bottom:22px;
        }

        .section-head p{
            color:var(--muted);
            margin:0;
            max-width:760px;
        }

        .packages-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:20px;
        }

        .package-card{
            position:relative;
            padding:24px;
            border-radius:28px;
            background:var(--surface);
            border:1px solid var(--line);
            box-shadow:var(--shadow-sm);
            overflow:hidden;
            transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
        }

        .package-card:hover{
            transform:translateY(-6px);
            box-shadow:var(--shadow);
        }

        .package-card.featured{
            border-color:rgba(37,99,235,.35);
        }

        .package-badge{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:7px 12px;
            border-radius:999px;
            background:rgba(37,99,235,.12);
            color:var(--primary);
            font-size:.86rem;
            font-weight:800;
            margin-bottom:14px;
        }

        .package-card h3{
            font-size:1.35rem;
            font-weight:900;
        }

        .package-price{
            display:flex;
            align-items:flex-end;
            gap:8px;
            margin:12px 0 16px;
        }

        .package-price strong{
            font-size:2rem;
            font-weight:900;
        }

        .package-price span{
            color:var(--muted);
            font-size:.95rem;
        }

        .package-desc{
            color:var(--muted);
            min-height:58px;
        }

        .feature-list{
            display:grid;
            gap:10px;
            margin:18px 0 22px;
            padding:0;
            list-style:none;
        }

        .feature-list li{
            display:flex;
            align-items:flex-start;
            gap:10px;
            color:var(--text);
        }

        .feature-list li::before{
            content:"✔";
            color:var(--success);
            font-weight:900;
            margin-top:2px;
        }

        .builder-wrap{
            display:grid;
            grid-template-columns:1.15fr .85fr;
            gap:20px;
            align-items:stretch;
        }

        .builder-card,
        .builder-summary{
            padding:26px;
            border-radius:28px;
            background:var(--surface);
            border:1px solid var(--line);
            box-shadow:var(--shadow-sm);
        }

        .builder-card h3,
        .builder-summary h3{
            font-size:1.25rem;
            font-weight:900;
            margin-bottom:8px;
        }

        .builder-card p,
        .builder-summary p{
            color:var(--muted);
            margin:0 0 20px;
        }

        .control-group{
            margin-bottom:22px;
        }

        .control-top{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            margin-bottom:12px;
        }

        .control-top label{
            font-weight:800;
        }

        .value-pill{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-width:64px;
            padding:8px 12px;
            border-radius:14px;
            background:var(--bg-soft);
            border:1px solid var(--line);
            font-weight:900;
        }

        input[type="range"]{
            width:100%;
            accent-color:var(--primary);
        }

        .period-grid{
            display:grid;
            grid-template-columns:repeat(4, minmax(0,1fr));
            gap:12px;
        }

        .period-option input{
            display:none;
        }

        .period-option label{
            display:flex;
            align-items:center;
            justify-content:center;
            min-height:58px;
            border-radius:18px;
            border:1px solid var(--line);
            background:var(--bg-soft);
            font-weight:800;
            cursor:pointer;
            transition:.2s ease;
        }

        .period-option input:checked + label{
            background:linear-gradient(135deg, rgba(37,99,235,.16), rgba(124,58,237,.16));
            border-color:rgba(37,99,235,.35);
            color:var(--text);
            box-shadow:var(--shadow-sm);
        }

        .price-box{
            display:grid;
            gap:14px;
            margin-top:18px;
        }

        .price-row{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            padding:14px 16px;
            border-radius:18px;
            background:var(--bg-soft);
            border:1px solid var(--line);
        }

        .price-row span{
            color:var(--muted);
        }

        .price-row strong{
            font-size:1rem;
            font-weight:900;
        }

        .price-row.total{
            background:linear-gradient(135deg, rgba(37,99,235,.12), rgba(124,58,237,.14));
            border-color:rgba(37,99,235,.28);
        }

        .price-row.total strong{
            font-size:1.2rem;
            color:var(--primary);
        }

        .summary-actions{
            display:grid;
            gap:12px;
            margin-top:18px;
        }

        .mini-note{
            font-size:.9rem;
            color:var(--muted);
        }

        .benefits{
            display:grid;
            grid-template-columns:repeat(4, minmax(0,1fr));
            gap:18px;
        }

        .benefit{
            padding:24px;
            border-radius:26px;
            background:var(--surface);
            border:1px solid var(--line);
            box-shadow:var(--shadow-sm);
        }

        .benefit h3{
            font-size:1.06rem;
            font-weight:900;
            margin-bottom:10px;
        }

        .benefit p{
            margin:0;
            color:var(--muted);
        }

        .faq{
            display:grid;
            gap:14px;
        }

        .faq details{
            border:1px solid var(--line);
            background:var(--surface);
            border-radius:22px;
            padding:18px 20px;
            box-shadow:var(--shadow-sm);
        }

        .faq summary{
            cursor:pointer;
            list-style:none;
            font-weight:800;
            position:relative;
            padding-left:24px;
        }

        .faq summary::-webkit-details-marker{
            display:none;
        }

        .faq summary::before{
            content:"+";
            position:absolute;
            left:0;
            top:0;
            font-size:1.2rem;
            color:var(--primary);
        }

        .faq details[open] summary::before{
            content:"−";
        }

        .faq p{
            color:var(--muted);
            margin:12px 0 0;
        }

        .cta-box{
            padding:30px;
            border-radius:32px;
            background:linear-gradient(135deg, rgba(37,99,235,.12), rgba(124,58,237,.12));
            border:1px solid rgba(37,99,235,.18);
            box-shadow:var(--shadow);
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
            flex-wrap:wrap;
        }

        .cta-box h2{
            margin-bottom:8px;
        }

        .cta-box p{
            margin:0;
            color:var(--muted);
            max-width:760px;
        }

        .site-footer{
            padding:26px 0 36px;
            color:var(--muted);
        }

        .footer-inner{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            border-top:1px solid var(--line);
            padding-top:18px;
            flex-wrap:wrap;
        }

        .reveal{
            opacity:0;
            transform:translateY(18px);
            transition:opacity .6s ease, transform .6s ease;
        }

        .reveal.is-visible{
            opacity:1;
            transform:none;
        }

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

            .benefits{
                grid-template-columns:repeat(2, minmax(0,1fr));
            }

            .builder-wrap{
                grid-template-columns:1fr;
            }
        }

        @media (max-width: 860px){
            .nav-links{
                display:none;
                position:absolute;
                top:78px;
                right:16px;
                left:16px;
                padding:14px;
                border-radius:22px;
                background:var(--surface-strong);
                border:1px solid var(--line);
                box-shadow:var(--shadow);
                flex-direction:column;
                align-items:flex-start;
            }

            .nav-links.is-open{
                display:flex;
            }

            .menu-toggle{
                display:inline-flex;
                align-items:center;
                justify-content:center;
            }

            .hero{
                padding-top:42px;
            }

            .hero-card{
                padding:24px;
            }

            .hero-stats{
                grid-template-columns:1fr;
            }

            .period-grid{
                grid-template-columns:repeat(2, minmax(0,1fr));
            }

            .cta-box{
                padding:24px;
            }
        }

        @media (max-width: 640px){
            .container{
                width:min(100% - 20px, var(--container));
            }

            .nav{
                min-height:72px;
            }

            .btn{
                width:100%;
            }

            .nav-actions .btn{
                display:none;
            }

            .benefits{
                grid-template-columns:1fr;
            }

            .section{
                padding:20px 0 56px;
            }

            .section-head{
                align-items:flex-start;
            }
        }