```css
:root{
    --bg:#030303;
    --bg2:#080808;
    --panel:#111;
    --panel2:#171717;
    --line:rgba(255,255,255,.12);
    --text:#f7f7f7;
    --muted:#a9a9a9;
    --soft:#d8d8d8;
    --accent:#fff;
    --radius:24px;
    --shadow:0 24px 80px rgba(0,0,0,.6)
}

*{
    box-sizing:border-box
}

html{
    scroll-behavior:smooth
}

body{
    margin:0;
    background:radial-gradient(circle at 20% 0%,#181818 0,#050505 36%,#000 100%);
    color:var(--text);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    line-height:1.6
}

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

img{
    max-width:100%;
    height:auto
}

.container{
    width:min(1180px,92vw);
    margin:auto
}

.narrow{
    width:min(820px,92vw)
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header{
    position:sticky;
    top:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 4vw;
    background:rgba(0,0,0,.78);
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line)
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:800;
    letter-spacing:-.04em;
    font-size:21px
}

.brand-mark{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border:1px solid #fff;
    border-radius:50%;
    background:#fff;
    color:#000
}

.custom-logo{
    max-height:48px;
    width:auto
}


/* =========================================================
   MAIN NAVIGATION
   ========================================================= */

.main-nav{
    display:flex;
    gap:22px;
    align-items:center
}

.main-nav > ul{
    display:flex;
    gap:22px;
    list-style:none;
    margin:0;
    padding:0;
    align-items:center
}

.main-nav li{
    position:relative;
    list-style:none
}

.main-nav a{
    color:#dadada;
    font-size:14px;
    transition:color .2s ease
}

.main-nav a:hover{
    color:#fff
}


/* =========================================================
   DROPDOWN MENU
   HIDDEN BY DEFAULT
   ========================================================= */

.main-nav ul.sub-menu{
    display:none;

    position:absolute;
    top:calc(100% + 14px);
    left:0;

    min-width:240px;
    margin:0;
    padding:8px 0;

    list-style:none;

    background:rgba(8,8,8,.97);
    border:1px solid rgba(255,255,255,.14);
    border-radius:16px;

    box-shadow:
        0 24px 70px rgba(0,0,0,.65),
        0 0 0 1px rgba(255,255,255,.025) inset;

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    z-index:9999;

    opacity:0;
    visibility:hidden;
    transform:translateY(8px);

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease
}


/* =========================================================
   SHOW DROPDOWN ONLY ON HOVER
   ========================================================= */

.main-nav li.menu-item-has-children:hover > ul.sub-menu{
    display:block;
    opacity:1;
    visibility:visible;
    transform:translateY(0)
}


/* Keyboard accessibility */

.main-nav li.menu-item-has-children:focus-within > ul.sub-menu{
    display:block;
    opacity:1;
    visibility:visible;
    transform:translateY(0)
}


/* =========================================================
   DROPDOWN ARROW
   ========================================================= */

.main-nav li.menu-item-has-children > a{
    display:flex;
    align-items:center;
    gap:7px
}

.main-nav li.menu-item-has-children > a::after{
    content:"⌄";
    display:inline-block;
    font-size:11px;
    line-height:1;
    opacity:.65;
    transition:transform .2s ease,opacity .2s ease
}

.main-nav li.menu-item-has-children:hover > a::after{
    transform:rotate(180deg);
    opacity:1
}


/* =========================================================
   INVISIBLE HOVER BRIDGE
   Prevents dropdown disappearing while moving mouse
   ========================================================= */

.main-nav li.menu-item-has-children::before{
    content:"";
    position:absolute;
    left:0;
    top:100%;
    width:100%;
    height:15px;
    display:block
}


/* =========================================================
   DROPDOWN ITEMS
   ========================================================= */

.main-nav ul.sub-menu li{
    display:block;
    width:100%;
    margin:0;
    padding:0
}

.main-nav ul.sub-menu li a{
    display:block;
    width:100%;

    padding:11px 18px;

    color:#d7d7d7;
    font-size:14px;
    line-height:1.45;

    border-radius:0;

    transition:
        background .2s ease,
        color .2s ease,
        padding-left .2s ease
}

.main-nav ul.sub-menu li:hover > a{
    color:#fff;
    background:rgba(255,255,255,.075);
    padding-left:23px
}


/* =========================================================
   SECOND LEVEL DROPDOWN
   ========================================================= */

.main-nav ul.sub-menu ul.sub-menu{
    top:-8px;
    left:calc(100% + 8px)
}

.main-nav ul.sub-menu li.menu-item-has-children > a::after{
    content:"›";
    margin-left:auto;
    font-size:16px;
    opacity:.6
}

.main-nav ul.sub-menu li.menu-item-has-children:hover > a::after{
    transform:none
}


/* =========================================================
   NAV CTA / BUTTONS
   ========================================================= */

.nav-cta,
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    padding:13px 20px;
    font-weight:750;
    transition:.2s;
    border:1px solid var(--line);
    cursor:pointer
}

.nav-cta,
.btn-primary{
    background:#fff;
    color:#000!important;
    border-color:#fff
}

.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 34px rgba(255,255,255,.12)
}

.btn-secondary{
    background:rgba(255,255,255,.06);
    color:#fff;
    border-color:var(--line)
}

.disabled{
    opacity:.45;
    cursor:not-allowed
}


/* =========================================================
   MOBILE NAV TOGGLE
   ========================================================= */

.nav-toggle{
    display:none;
    background:none;
    border:1px solid var(--line);
    color:#fff;
    border-radius:12px;
    padding:8px 12px;
    cursor:pointer
}


/* =========================================================
   HERO
   ========================================================= */

.hero,
.page-hero{
    position:relative;
    overflow:hidden;
    padding:110px 0 78px;
    border-bottom:1px solid var(--line)
}

.fork-hero{
    min-height:82vh;
    display:flex;
    align-items:center
}

.hero-bg{
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(255,255,255,.13),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            rgba(255,255,255,.06),
            transparent 42%
        );
    pointer-events:none
}

.hero-inner{
    position:relative
}

.eyebrow{
    text-transform:uppercase;
    letter-spacing:.16em;
    color:#d4d4d4;
    font-size:12px;
    font-weight:800;
    margin:0 0 14px
}

.hero h1,
.page-hero h1{
    font-size:clamp(42px,7vw,92px);
    line-height:.96;
    letter-spacing:-.075em;
    margin:0 0 24px;
    max-width:980px
}

.page-hero h1{
    font-size:clamp(38px,5vw,72px)
}

.lead{
    color:var(--soft);
    font-size:clamp(18px,2vw,22px);
    max-width:760px
}


/* =========================================================
   FORK / CARDS
   ========================================================= */

.fork-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
    margin-top:48px
}

.fork-card,
.glass-card{
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.105),
            rgba(255,255,255,.035)
        );
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    backdrop-filter:blur(18px)
}

.fork-card{
    min-height:260px;
    padding:32px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:relative;
    overflow:hidden
}

.fork-card:after{
    content:"";
    position:absolute;
    inset:auto -40px -70px auto;
    width:220px;
    height:220px;
    border-radius:50%;
    background:rgba(255,255,255,.06)
}

.fork-card span{
    color:#aaa;
    font-weight:900
}

.fork-card h2{
    font-size:clamp(28px,4vw,46px);
    line-height:1;
    margin:32px 0 12px;
    letter-spacing:-.05em
}

.fork-card p,
.glass-card p,
.muted{
    color:var(--muted)
}

.highlighted{
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.19),
            rgba(255,255,255,.06)
        )
}


/* =========================================================
   SECTIONS
   ========================================================= */

.section{
    padding:78px 0
}

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

.section h2{
    font-size:clamp(30px,4vw,56px);
    letter-spacing:-.055em;
    line-height:1;
    margin:0
}


/* =========================================================
   CARD GRIDS
   ========================================================= */

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

.card-grid.two{
    grid-template-columns:repeat(2,1fr)
}

.glass-card{
    padding:26px
}

.glass-card h2,
.glass-card h3{
    letter-spacing:-.035em;
    line-height:1.1;
    margin-top:0
}

.tutorial-card img,
.featured-img{
    border-radius:18px;
    margin-bottom:16px;
    border:1px solid var(--line)
}


/* =========================================================
   CONTENT
   ========================================================= */

.content-area{
    color:#e8e8e8
}

.content-area a,
.text-link{
    text-decoration:underline;
    text-underline-offset:4px
}


/* =========================================================
   FORMS
   ========================================================= */

.ttm-form{
    margin-top:16px
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px
}

.form-grid label{
    display:flex;
    flex-direction:column;
    gap:8px;
    color:#eee;
    font-weight:700
}

.span-2{
    grid-column:1/-1
}

input,
select,
textarea{
    width:100%;
    background:#080808;
    border:1px solid var(--line);
    color:#fff;
    border-radius:16px;
    padding:14px 16px;
    font:inherit;
    outline:none
}

input:focus,
select:focus,
textarea:focus{
    border-color:#fff;
    box-shadow:0 0 0 4px rgba(255,255,255,.08)
}

.upload-zone{
    padding:20px;
    border:1px dashed rgba(255,255,255,.35);
    border-radius:20px;
    background:rgba(255,255,255,.04)
}

.upload-zone small,
.small{
    color:#999;
    font-weight:500
}

.consent{
    flex-direction:row!important;
    align-items:flex-start;
    font-weight:600;
    color:#ccc
}

.consent input{
    width:auto;
    margin-top:6px
}

.notice-ok{
    padding:16px 18px;
    background:rgba(51,255,153,.12);
    border:1px solid rgba(51,255,153,.3);
    border-radius:16px;
    margin-bottom:18px
}

.check-list{
    padding-left:20px;
    color:#ddd
}

.check-list li{
    margin:8px 0
}


/* =========================================================
   PAYMENT
   ========================================================= */

.payment-panel{
    text-align:center
}

.pay-actions{
    display:flex;
    gap:14px;
    justify-content:center;
    flex-wrap:wrap;
    margin:24px 0
}


/* =========================================================
   DASHBOARD
   ========================================================= */

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


/* =========================================================
   VIDEO
   ========================================================= */

.video-shell{
    height:72vh;
    background:#000;
    padding:12px
}

.video-shell iframe{
    width:100%;
    height:100%;
    border:0;
    border-radius:22px;
    background:#000
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer{
    display:flex;
    justify-content:space-between;
    gap:24px;
    padding:38px 4vw;
    border-top:1px solid var(--line);
    background:#000;
    color:#aaa
}

.site-footer a{
    margin-left:18px;
    color:#ddd
}

.calendar-embed{
    background:#fff;
    color:#000;
    border-radius:24px;
    padding:16px;
    margin-bottom:22px;
    overflow:hidden
}


/* =========================================================
   HOMEPAGE TESTIMONIAL VIDEOS
   ========================================================= */

.home-video-section{
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.025),
            transparent
        );
    border-bottom:1px solid var(--line)
}

.home-video-heading{
    align-items:flex-end
}

.home-video-intro{
    max-width:470px;
    margin:0;
    color:var(--muted);
    font-size:17px
}

.home-video-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px
}

.home-video-card{
    margin:0;
    padding:18px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.105),
            rgba(255,255,255,.035)
        );
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden
}

.home-video-frame{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    background:#000;
    aspect-ratio:16/9
}

.home-video-frame video{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    background:#000
}

.home-video-card h3{
    margin:18px 4px 2px;
    font-size:21px;
    letter-spacing:-.025em
}


/* =========================================================
   PACKAGES PAGE
   ========================================================= */

.packages-hero{
    background:
        radial-gradient(
            circle at 78% 18%,
            rgba(241,93,39,.17),
            transparent 28%
        )
}

.package-jump-links{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:30px
}

.packages-section{
    position:relative
}

.packages-pro-section{
    background:
        linear-gradient(
            180deg,
            rgba(241,93,39,.035),
            rgba(255,255,255,.018)
        );
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)
}

.packages-heading>p{
    max-width:480px;
    margin:0;
    color:var(--muted);
    font-size:17px
}

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

.package-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    padding:28px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.095),
            rgba(255,255,255,.025)
        );
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden
}

.package-card:before{
    content:"";
    position:absolute;
    right:-90px;
    top:-90px;
    width:190px;
    height:190px;
    border-radius:50%;
    background:rgba(255,255,255,.035);
    pointer-events:none
}

.featured-package{
    border-color:rgba(241,93,39,.72);
    box-shadow:
        0 24px 80px rgba(0,0,0,.62),
        0 0 0 1px rgba(241,93,39,.18) inset;
    transform:translateY(-10px)
}

.package-badge{
    display:inline-flex;
    align-self:flex-start;
    margin:-28px -28px 24px;
    padding:11px 18px;
    background:#f15d27;
    color:#fff;
    font-size:12px;
    font-weight:850;
    letter-spacing:.07em;
    text-transform:uppercase
}

.package-number{
    display:inline-flex;
    margin-bottom:18px;
    color:#f15d27;
    font-size:12px;
    font-weight:850;
    letter-spacing:.14em;
    text-transform:uppercase
}

.package-card h3{
    margin:0 0 18px;
    font-size:clamp(25px,2.2vw,34px);
    line-height:1.08;
    letter-spacing:-.045em
}

.package-card p{
    color:var(--muted)
}

.package-card .package-ideal{
    padding:14px 16px;
    border-left:3px solid #f15d27;
    background:rgba(241,93,39,.075);
    border-radius:0 14px 14px 0;
    color:#ddd
}

.package-card .package-ideal strong{
    color:#fff
}

.package-content{
    flex:1;
    margin-top:8px
}

.package-content h4{
    margin:22px 0 10px;
    font-size:15px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#fff
}

.package-content .check-list{
    margin:0 0 22px;
    padding-left:22px
}

.package-content .check-list li{
    color:#d1d1d1
}

.package-content .check-list li::marker{
    color:#f15d27
}

.package-process{
    padding:16px;
    border:1px solid var(--line);
    border-radius:16px;
    background:rgba(0,0,0,.28);
    color:#cfcfcf;
    font-size:14px
}

.package-process strong{
    color:#fff
}

.package-process span{
    color:#f15d27;
    padding:0 3px
}

.package-button{
    width:100%;
    margin-top:24px
}

.packages-final-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    padding:38px;
    background:
        linear-gradient(
            135deg,
            rgba(241,93,39,.16),
            rgba(255,255,255,.055)
        );
    border:1px solid rgba(241,93,39,.4);
    border-radius:var(--radius);
    box-shadow:var(--shadow)
}

.packages-final-cta h2{
    margin-bottom:14px
}

.packages-final-cta p:last-child{
    margin-bottom:0;
    color:var(--muted)
}


/* =========================================================
   CONTACT PAGE
   ========================================================= */

.contact-hero{
    background:
        radial-gradient(
            circle at 78% 22%,
            rgba(241,93,39,.18),
            transparent 30%
        )
}

.contact-hero-actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:30px
}

.contact-layout{
    display:grid;
    grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);
    gap:24px;
    align-items:start
}

.contact-main{
    padding:34px
}

.contact-main h2{
    font-size:clamp(34px,4vw,54px);
    margin-bottom:14px
}

.contact-main>.muted{
    max-width:680px;
    margin-bottom:26px
}

.contact-sidebar{
    display:grid;
    gap:20px
}

.contact-info-card{
    padding:26px
}

.contact-info-card h3{
    font-size:25px;
    margin-bottom:12px
}

.contact-info-card .btn{
    margin-top:8px;
    width:100%
}

.contact-link{
    display:inline-block;
    color:#f15d27;
    font-weight:800;
    overflow-wrap:anywhere
}

.notice-error{
    padding:16px 18px;
    background:rgba(255,74,74,.11);
    border:1px solid rgba(255,74,74,.34);
    border-radius:16px;
    margin:18px 0;
    color:#ffd6d6
}

.contact-form{
    margin-top:22px
}

.contact-form button{
    margin-top:22px
}

.contact-benefits-section{
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.022),
            rgba(241,93,39,.035)
        );
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)
}

.contact-section-head>p{
    max-width:480px;
    margin:0;
    color:var(--muted);
    font-size:17px
}

.contact-benefits .glass-card{
    min-height:230px
}

.contact-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    border-radius:50%;
    background:rgba(241,93,39,.12);
    border:1px solid rgba(241,93,39,.4);
    color:#f15d27;
    font-weight:900;
    margin-bottom:25px
}

.contact-final-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding:38px;
    background:
        linear-gradient(
            135deg,
            rgba(241,93,39,.16),
            rgba(255,255,255,.05)
        );
    border:1px solid rgba(241,93,39,.4);
    border-radius:var(--radius);
    box-shadow:var(--shadow)
}

.contact-final-cta h2{
    margin-bottom:14px
}

.contact-final-cta p:last-child{
    margin:0;
    color:var(--muted)
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1050px){

    .packages-grid{
        grid-template-columns:1fr
    }

    .featured-package{
        transform:none
    }

    .package-card{
        padding:26px
    }

    .package-badge{
        margin:-26px -26px 24px
    }
}


/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */

@media(max-width:900px){

    .nav-toggle{
        display:block
    }

    .main-nav{
        display:none;

        position:absolute;
        top:73px;
        left:4vw;
        right:4vw;

        background:#050505;
        border:1px solid var(--line);
        border-radius:20px;
        padding:18px;

        flex-direction:column;
        align-items:flex-start;

        box-shadow:0 24px 60px rgba(0,0,0,.55)
    }

    .main-nav.open{
        display:flex
    }

    .main-nav > ul{
        flex-direction:column;
        width:100%;
        gap:0;
        align-items:stretch
    }

    .main-nav > ul > li{
        width:100%
    }

    .main-nav > ul > li > a{
        display:flex;
        align-items:center;
        justify-content:space-between;
        width:100%;
        padding:12px 4px
    }


    /* =====================================================
       MOBILE SUBMENU
       ===================================================== */

    .main-nav ul.sub-menu{
        position:static;

        width:100%;
        min-width:0;

        margin:4px 0 8px;
        padding:6px 0;

        background:rgba(255,255,255,.035);
        border:1px solid var(--line);
        border-radius:13px;

        box-shadow:none;
        backdrop-filter:none;
        -webkit-backdrop-filter:none;

        opacity:1;
        visibility:visible;
        transform:none;

        display:none
    }


    /* Do NOT open mobile dropdown on hover */
    .main-nav li.menu-item-has-children:hover > ul.sub-menu{
        display:none
    }


    /* Focus / keyboard */
    .main-nav li.menu-item-has-children:focus-within > ul.sub-menu{
        display:block
    }


    .main-nav ul.sub-menu li a{
        padding:11px 15px
    }

    .main-nav ul.sub-menu li:hover > a{
        padding-left:19px
    }


    /* Hide desktop hover bridge on mobile */
    .main-nav li.menu-item-has-children::before{
        display:none
    }


    /* Mobile second level */
    .main-nav ul.sub-menu ul.sub-menu{
        position:static;
        margin-left:10px;
        width:calc(100% - 10px)
    }


    /* Main content grids */
    .fork-grid,
    .card-grid,
    .card-grid.two,
    .dashboard-grid,
    .form-grid{
        grid-template-columns:1fr
    }

    .hero,
    .page-hero{
        padding:76px 0 54px
    }

    .fork-card{
        min-height:220px
    }

    .site-footer{
        flex-direction:column
    }

    .site-footer a{
        margin:0 18px 0 0
    }


    /* Homepage videos */
    .home-video-grid{
        grid-template-columns:1fr
    }

    .home-video-heading{
        align-items:flex-start;
        flex-direction:column
    }

    .home-video-intro{
        max-width:680px
    }

    .home-video-card{
        padding:14px
    }


    /* Packages */
    .packages-heading{
        align-items:flex-start;
        flex-direction:column
    }

    .packages-final-cta{
        align-items:flex-start;
        flex-direction:column
    }

    .packages-final-cta .btn{
        width:auto
    }


    /* Contact */
    .contact-sidebar{
        grid-template-columns:1fr
    }

    .contact-section-head,
    .contact-final-cta{
        align-items:flex-start;
        flex-direction:column
    }

    .contact-final-cta .btn{
        width:auto
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(max-width:520px){

    .hero h1,
    .page-hero h1{
        font-size:42px
    }

    .lead{
        font-size:17px
    }

    .glass-card,
    .fork-card{
        padding:22px
    }

    .btn,
    .nav-cta{
        width:100%
    }


    /* Packages */
    .package-jump-links{
        flex-direction:column
    }

    .package-card{
        padding:22px
    }

    .package-badge{
        margin:-22px -22px 22px
    }

    .packages-final-cta{
        padding:25px
    }

    .packages-final-cta .btn{
        width:100%
    }


    /* Contact */
    .contact-main{
        padding:22px
    }

    .contact-hero-actions{
        flex-direction:column
    }

    .contact-final-cta{
        padding:25px
    }

    .contact-final-cta .btn{
        width:100%
    }
}
```