/* ═══ RESET & TOKENS ═══════════════════════════ */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        :root {
            --bg: #030303;
            --bg2: #0a0a0a;
            --surf: #121212;
            --surf2: #1a1a1a;
            --amb: #e88c2a;
            --amb2: #f5a94e;
            --blue: #2a7de1;
            --blue2: #5ba3f5;
            --cyan: #37d7ff;
            --purple: #7b2fff;
            --purple2: #a78bfa;
            --green: #22c55e;
            --red: #ef4444;
            --wh: #e8f0f8;
            --wh2: #c2d0e0;
            --mu: #7a8fa8;
            --card: rgba(255, 255, 255, .04);
            --bdr: rgba(255, 255, 255, .07);
            --r: 14px;
            --r2: 20px;
            --fab-right: 2rem;
            --fab-bottom: 2rem;
            --fab-gap: 3.6rem;
        }

        html {
            scroll-behavior: smooth;
            overflow-x: hidden;
        }

        /* Interactive Cursor */
        @media (pointer: fine) {
            #cursor, #cursor-ring {
                position: fixed;
                top: 0; left: 0;
                border-radius: 50%;
                pointer-events: none;
                z-index: 99999;
                transform: translate3d(var(--x, -100px), var(--y, -100px), 0) translate(-50%, -50%);
                will-change: transform;
            }
            #cursor {
                width: 6px; height: 6px;
                background: #00f0ff;
                box-shadow: 0 0 10px #00f0ff;
                /* Removed transition on transform for instant dot tracking */
            }
            #cursor-ring {
                width: 34px; height: 34px;
                border: 1px solid rgba(0, 240, 255, 0.4);
                transition: width 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), height 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.3s ease;
            }
            body.hovering #cursor-ring {
                width: 55px; height: 55px;
                border-color: rgba(94, 23, 235, 0.8);
                background: rgba(94, 23, 235, 0.1);
            }
            body.hovering #cursor {
                transform: translate3d(var(--x, -100px), var(--y, -100px), 0) translate(-50%, -50%) scale(0.5);
            }
        }
        
        /* Particle Canvas */
        #tsparticles {
            position: fixed;
            inset: 0;
            z-index: -1;
            pointer-events: none;
        }

        /* Premium Grain Overlay */
        .noise-overlay {
            position: fixed;
            inset: -50%;
            width: 200%;
            height: 200%;
            pointer-events: none;
            z-index: 99998;
            opacity: 0.02;
            mix-blend-mode: overlay;
            background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
            animation: noise 1s steps(2) infinite;
        }

        @keyframes noise {
            0% { transform: translate(0,0) }
            10% { transform: translate(-5%,-5%) }
            20% { transform: translate(-10%,5%) }
            30% { transform: translate(5%,-10%) }
            40% { transform: translate(-5%,15%) }
            50% { transform: translate(-10%,5%) }
            60% { transform: translate(15%,0) }
            70% { transform: translate(0,10%) }
            80% { transform: translate(-15%,0) }
            90% { transform: translate(10%,5%) }
            100% { transform: translate(5%,0) }
        }

        /* Removed Fluid Gradient Text as per user preference for distinct heading colors */

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

        html {
            background-color: #0a0d14; /* Fixes iOS bounce white screen natively */
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background: #0a0d14; /* Solid dark background to prevent white flashes on scroll */
            color: var(--wh);
            overflow-x: hidden;
            position: relative;
        }

        ::-webkit-scrollbar {
            width: 4px;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--amb);
            border-radius: 4px;
        }

        body::before {
            content: '';
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            opacity: .04;
            mix-blend-mode: screen;
            background-image: linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
            background-size: 60px 60px;
        }

        body::after {
            content: '';
            position: fixed;
            inset: -50% -50% -50% -50%;
            pointer-events: none;
            z-index: 0;
            opacity: 0.9;
            background: 
                radial-gradient(circle at 20% 30%, rgba(0, 240, 255, 0.18) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(94, 23, 235, 0.18) 0%, transparent 50%),
                radial-gradient(circle at 50% 50%, rgba(232, 140, 42, 0.08) 0%, transparent 50%);
            background-color: #030508;
            filter: blur(80px);
            animation: orbMove 25s ease-in-out infinite alternate;
        }

        @keyframes orbMove {
            0% { transform: translate(0, 0) scale(1) rotate(0deg); }
            50% { transform: translate(-5%, 5%) scale(1.1) rotate(5deg); }
            100% { transform: translate(5%, -5%) scale(0.9) rotate(-5deg); }
        }

        body>* {
            position: relative;
            z-index: 1;
        }


        /* ═══ BLOBS ════════════════════════════════════ */
        .blobs {
            position: absolute;
            inset: 0;
            overflow: hidden;
            pointer-events: none;
            z-index: 0;
        }

        .b {
            position: absolute;
            border-radius: 50%;
            /* HACK: Extreme Performance Boost - Replace heavy GPU blur with native gradient mask */
            -webkit-mask-image: radial-gradient(circle, black 0%, transparent 70%);
            mask-image: radial-gradient(circle, black 0%, transparent 70%);
            animation: fb 14s ease-in-out infinite;
            will-change: transform;
            transform: translateZ(0) scale(1.8);
        }

        @keyframes fb {
            0%, 100% {
                transform: translate3d(0, 0, 0) scale(1.8);
            }
            50% {
                transform: translate3d(30px, -30px, 0) scale(1.8);
            }
        }

        /* ═══ PAGES ════════════════════════════════════ */
        .page {
            display: none;
        }

        .page.active {
            display: block;
        }

        body.gate-locked {
            overflow: hidden;
        }

        body.gate-locked nav,
        body.gate-locked .mob,
        body.gate-locked #page-main,
        body.gate-locked #page-ty,
        body.gate-locked .ai-fab,
        body.gate-locked .chat-panel {
            display: none;
        }

        .mod.login-only .tabs {
            display: none;
        }

        .mod.login-only #panel-su {
            display: none;
        }

        .mod.login-only .mft {
            display: none;
        }

        .mod.gate-lock .mx {
            display: none;
        }

        .auth-page {
            min-height: 100vh;
            min-height: 100dvh;
            display: none;
            overflow-y: auto;
            padding: clamp(4rem, 8vw, 7.5rem) clamp(3%, 5vw, 5%) clamp(2rem, 6vw, 4rem);
            background: transparent;
        }

        .auth-page.active {
            display: flex;
            align-items: flex-start;
        }

        .auth-shell {
            margin: auto;
            width: 100%;
            max-width: 1180px;
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 1.4rem;
            align-items: stretch;
        }

        .auth-hero,
        .auth-card {
            border: 1px solid var(--bdr);
            border-radius: 26px;
            background: rgba(8, 14, 24, 0.75);
            backdrop-filter: blur(24px);
            box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
        }

        .auth-hero {
            padding: 2.1rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 1.4rem;
            overflow: hidden;
            position: relative;
        }

        .auth-hero::before {
            content: '';
            position: absolute;
            inset: -20% auto auto -10%;
            width: 320px;
            height: 320px;
            background: radial-gradient(circle, rgba(55, 215, 255, .16), transparent 70%);
            filter: blur(10px);
            pointer-events: none;
        }

        .auth-hero h1 {
            font-size: clamp(2rem, 5vw, 3.6rem);
            line-height: 1.02;
            letter-spacing: -.03em;
            margin: .7rem 0 .9rem;
            
            /* Stunning Entrance Animation (Bulletproof) */
            animation: authTextReveal 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
            animation-delay: 0.1s;
        }

        .auth-hero .desc {
            animation: authTextReveal 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
            animation-delay: 0.3s;
        }

        @keyframes authTextReveal {
            0% {
                opacity: 0;
                transform: translateY(20px) scale(0.95);
                filter: blur(10px);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
                filter: blur(0);
            }
        }


        .auth-points {
            display: grid;
            gap: .7rem;
            margin-top: .8rem;
        }

        .auth-point {
            display: flex;
            align-items: flex-start;
            gap: .7rem;
            padding: .82rem .9rem;
            border-radius: 16px;
            background: rgba(255, 255, 255, .04);
            border: 1px solid rgba(255, 255, 255, .07);
        }

        .auth-point strong {
            display: block;
            font-size: .92rem;
            margin-bottom: .12rem;
        }

        .auth-point span {
            display: block;
            color: var(--mu);
            font-size: .86rem;
            line-height: 1.5;
        }

        .auth-card {
            padding: 2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .auth-card h2 {
            font-size: 1.8rem;
            margin-bottom: .4rem;
        }

        .auth-card .mod-sub {
            margin-bottom: 1.2rem;
        }

        .auth-actions {
            display: flex;
            gap: .8rem;
            flex-wrap: wrap;
            align-items: center;
            margin-top: 1.1rem;
        }

        .auth-link {
            color: var(--amb2);
            text-decoration: none;
            font-weight: 700;
            cursor: pointer;
        }

        /* ═══ NAV ═══════════════════════════════════════ */
        nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 700;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: .9rem clamp(3%, 5vw, 5%);
            background: rgba(0, 0, 0, .75);
            backdrop-filter: blur(18px);
            border-bottom: 1px solid var(--bdr);
            transition: box-shadow .3s;
        }

        nav.sc {
            box-shadow: 0 2px 28px rgba(0, 0, 0, .5);
        }

        .logo {
            display: flex;
            align-items: center;
            gap: .45rem;
            cursor: pointer;
            text-decoration: none;
        }

        .logo-mark {
            width: 28px;
            height: 28px;
            border-radius: 7px;
            background: var(--amb);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: .75rem;
            color: var(--bg);
        }

        .logo-text {
            font-weight: 800;
            font-size: 1rem;
            letter-spacing: -.01em;
            color: var(--wh);
        }

        .logo-text em {
            color: var(--amb);
            font-style: normal;
        }

        .logo-sub {
            font-size: .68rem;
            font-weight: 500;
            color: var(--mu);
            letter-spacing: .02em;
        }

        .nav-ul {
            list-style: none;
            display: flex;
            align-items: center;
            gap: 1.8rem;
        }

        .nav-ul a {
            display: inline-block;
            color: var(--mu);
            text-decoration: none;
            font-size: .85rem;
            font-weight: 500;
            transition: color .2s;
        }

        .nav-ul a:hover {
            color: var(--wh);
        }

        .nav-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            background: linear-gradient(135deg, var(--amb), #ff6b00);
            color: #fff !important;
            font-weight: 700;
            padding: 0.45rem 1.1rem;
            border-radius: 999px;
            font-size: 0.82rem;
            border: none;
            cursor: pointer;
            text-decoration: none;
            transition: all 0.2s ease;
            box-shadow: 0 2px 10px rgba(232, 140, 42, 0.2);
        }

        .nav-pill:hover {
            box-shadow: 0 4px 14px rgba(232, 140, 42, 0.4);
            transform: translateY(-1px);
        }

        .nav-pill-purple {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            background: rgba(167, 139, 250, 0.15);
            color: var(--purple, #a78bfa) !important;
            font-weight: 600;
            padding: 0.45rem 1.1rem;
            border-radius: 999px;
            font-size: 0.82rem;
            border: 1px solid rgba(167, 139, 250, 0.3);
            cursor: pointer;
            text-decoration: none;
            transition: all 0.2s ease;
        }

        .nav-pill-purple:hover {
            background: rgba(167, 139, 250, 0.25);
        }

        .account-menu {
            position: relative;
            display: inline-flex;
            align-items: center;
        }

        .account-btn {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            border: 1px solid rgba(255, 255, 255, .14);
            background: rgba(255, 255, 255, .04);
            color: var(--wh);
            border-radius: 999px;
            padding: .48rem .95rem;
            font-size: .82rem;
            font-weight: 700;
            cursor: pointer;
            transition: background .2s, border-color .2s;
        }

        .account-btn:hover {
            background: rgba(255, 255, 255, .08);
            border-color: rgba(255, 255, 255, .28);
        }

        .account-avatar {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--amb), var(--amb2));
            color: var(--bg);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: .72rem;
            font-weight: 800;
        }

        .account-panel {
            position: absolute;
            top: calc(100% + .7rem);
            right: 0;
            min-width: 220px;
            padding: .55rem;
            border-radius: 18px;
            background: rgba(8, 17, 30, .96);
            border: 1px solid rgba(255, 255, 255, .09);
            box-shadow: 0 24px 54px rgba(0, 0, 0, .34);
            backdrop-filter: blur(16px);
            display: none;
        }

        .account-panel.open {
            display: block;
        }

        .account-panel .acc-item {
            display: flex;
            align-items: center;
            gap: .6rem;
            width: 100%;
            padding: .72rem .78rem;
            border-radius: 12px;
            color: var(--wh);
            text-decoration: none;
            font-size: .88rem;
            border: 0;
            background: transparent;
            cursor: pointer;
            text-align: left;
        }

        .account-panel .acc-item:hover {
            background: rgba(255, 255, 255, .06);
        }

        .account-panel .acc-item.logout {
            color: #fca5a5;
        }

        .account-panel .acc-sep {
            height: 1px;
            margin: .35rem .35rem;
            background: rgba(255, 255, 255, .08);
        }

        .nav-analyzer-link {
            color: var(--purple, #7b2fff) !important;
            font-weight: 600 !important;
        }

        .nav-analyzer-link:hover {
            color: var(--purple2, #a78bfa) !important;
        }

        .hbg {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
        }

        .hbg span {
            display: block;
            width: 22px;
            height: 2px;
            background: var(--wh);
            border-radius: 2px;
            transition: .3s;
        }

        .hbg.open span:nth-child(1) {
            transform: translateY(7px) rotate(45deg);
        }

        .hbg.open span:nth-child(2) {
            opacity: 0;
        }

        .hbg.open span:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg);
        }

        .mob {
            display: none;
            position: fixed;
            top: 58px;
            left: 0;
            right: 0;
            z-index: 699;
            background: rgba(0, 0, 0, .95);
            backdrop-filter: blur(18px);
            border-bottom: 1px solid var(--bdr);
            flex-direction: column;
            padding: 1.3rem 5%;
            gap: 1rem;
        }

        .mob.open {
            display: flex;
        }

        .mob a {
            color: var(--mu);
            text-decoration: none;
            font-size: .93rem;
            padding: .42rem 0;
            border-bottom: 1px solid var(--bdr);
        }

        .mob a:last-child {
            border: none;
            color: var(--amb);
            font-weight: 600;
        }

        
        /* ═══ BUTTON RESET FOR LINKS ════════════════════ */
        .btn-reset {
            background: none;
            border: none;
            padding: 0;
            font: inherit;
            color: inherit;
            cursor: pointer;
            text-align: left;
            outline: none;
        }
        .btn-reset:focus {
            outline: 2px solid var(--amb);
            outline-offset: 2px;
        }

        /* ═══ BUTTONS ═══════════════════════════════════ */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-weight: 700;
            text-decoration: none;
            border: none;
            cursor: pointer;
            transition: all .2s;
        }

        .btn-amb {
            background: var(--amb);
            color: var(--bg);
            padding: .85rem 2.1rem;
            border-radius: 8px;
            font-size: .95rem;
        }

        .btn-amb:hover {
            background: var(--amb2);
            box-shadow: 0 6px 20px rgba(232, 140, 42, .45);
            transform: translateY(-2px);
        }

        .btn-out {
            background: transparent;
            color: var(--wh);
            padding: .85rem 2.1rem;
            border-radius: 8px;
            font-size: .95rem;
            border: 1px solid rgba(255, 255, 255, .14);
        }

        .btn-out:hover {
            border-color: rgba(255, 255, 255, .32);
            background: rgba(255, 255, 255, .05);
        }

        .btn-blue {
            background: var(--blue);
            color: #fff;
            padding: .75rem 1.8rem;
            border-radius: 8px;
            font-size: .88rem;
        }

        .btn-blue:hover {
            background: var(--blue2);
            box-shadow: 0 5px 18px rgba(42, 125, 225, .4);
            transform: translateY(-1px);
        }

        .btn-sm {
            padding: .55rem 1.3rem !important;
            font-size: .82rem !important;
        }

        /* ═══ SECTION SHARED ════════════════════════════ */
        .sec {
            padding: clamp(3rem, 8vw, 6.5rem) clamp(4%, 5vw, 5%);
            position: relative;
        }

        .surf {
            background: rgba(8, 8, 8, 0.65);
            backdrop-filter: blur(16px);
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .surf2 {
            background: rgba(14, 14, 14, 0.65);
            backdrop-filter: blur(16px);
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .wrap {
            max-width: 1100px;
            margin: 0 auto;
        }

        .lbl {
            font-size: .68rem;
            font-weight: 700;
            letter-spacing: .18em;
            color: var(--amb);
            text-transform: uppercase;
            margin-bottom: .85rem;
            display: flex;
            align-items: center;
            gap: .5rem;
        }

        .lbl::before {
            content: '';
            width: 18px;
            height: 2px;
            background: var(--amb);
            border-radius: 2px;
        }

        .ttl {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-weight: 800;
            font-size: clamp(1.65rem, 3.8vw, 2.8rem);
            letter-spacing: -.025em;
            line-height: 1.1;
            margin-bottom: .9rem;
            text-shadow: 0 4px 16px rgba(0, 0, 0, 0.9);
        }

        .serif {
            font-family: 'Instrument Serif', serif;
            font-style: italic;
            font-weight: 400;
        }

        .ttl-serif {
            font-family: 'Instrument Serif', serif;
            font-style: italic;
            font-weight: 400;
        }

        .desc {
            color: #ffffff;
            font-size: .97rem;
            line-height: 1.82;
            max-width: 520px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
        }

        .center-head {
            text-align: center;
            margin: 0 auto;
            max-width: 760px;
        }

        .center-head .lbl {
            justify-content: center;
        }

        .center-head .desc {
            margin: 0 auto;
        }

        .amb {
            color: var(--amb);
        }

        .grid2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4.5rem;
            align-items: center;
        }

        /* ═══ FORMS (shared) ════════════════════════════ */
        .fg {
            display: flex;
            flex-direction: column;
            gap: .38rem;
        }

        .fg label {
            font-size: .71rem;
            font-weight: 700;
            color: var(--mu);
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .fi,
        .fs,
        .ft {
            background: rgba(255, 255, 255, .04);
            border: 1px solid var(--bdr);
            border-radius: 9px;
            padding: .72rem .95rem;
            color: var(--wh);
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: .89rem;
            outline: none;
            resize: none;
            width: 100%;
            transition: border-color .2s, box-shadow .2s;
        }

        .fi::placeholder,
        .ft::placeholder {
            color: var(--mu);
        }

        .fi:focus,
        .fs:focus,
        .ft:focus {
            border-color: var(--amb);
            box-shadow: 0 0 0 3px rgba(232, 140, 42, .12);
        }

        .fs option {
            background: var(--surf);
        }

        .err {
            font-size: .73rem;
            color: #f07070;
            display: none;
            margin-top: .18rem;
        }

        .err.show {
            display: block;
        }

        .pw-strength-bar {
            height: 4px;
            width: 0%;
            background: transparent;
            margin-top: 6px;
            border-radius: 2px;
            transition: width 0.3s ease, background 0.3s ease;
        }

        .pw {
            position: relative;
        }

        .pw .fi {
            padding-right: 2.8rem;
        }

        .eye {
            position: absolute;
            right: .85rem;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: var(--mu);
            user-select: none;
            font-size: .95rem;
        }

        /* ═══ HERO ═══════════════════════════════════════ */
        #hero {
            min-height: clamp(600px, 100vh, 120vh);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: clamp(5rem, 12vw, 9rem) 5% clamp(3rem, 8vw, 5rem);
            overflow: hidden;
            position: relative;
        }

        .hero-shell {
            width: 100%;
            max-width: 1240px;
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 2.4rem;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .hero-copy {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .hero-copy .badge,
        .hero-copy .hero-h,
        .hero-copy .hero-sub,
        .hero-copy .hero-btns,
        .hero-copy .hstats {
            width: 100%;
        }

        .hero-copy .badge {
            align-self: center;
            width: fit-content;
            margin: 0 auto;
        }

        .hero-visual {
            position: relative;
            min-height: 540px;
            display: flex;
            align-items: center;
            justify-content: center;
            perspective: 1600px;
            transform-style: preserve-3d;
        }

        .hero-visual::before,
        .hero-visual::after {
            content: '';
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
        }

        .hero-visual::before {
            inset: 18% 12% 18% 12%;
            background: radial-gradient(circle, rgba(55, 215, 255, .18) 0%, rgba(55, 215, 255, 0) 60%);
            filter: blur(14px);
            transform: translateZ(-120px);
        }

        .hero-visual::after {
            inset: auto 18% 8% 18%;
            height: 120px;
            background: radial-gradient(circle, rgba(232, 140, 42, .18) 0%, rgba(232, 140, 42, 0) 68%);
            filter: blur(18px);
            transform: translateZ(-90px);
        }

        .scene-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(16px);
            opacity: .9;
            animation: orbFloat 8s ease-in-out infinite;
        }

        .scene-orb.a {
            width: 120px;
            height: 120px;
            top: 8%;
            right: 6%;
            background: rgba(55, 215, 255, .28);
        }

        .scene-orb.b {
            width: 180px;
            height: 180px;
            bottom: 5%;
            left: 2%;
            background: rgba(123, 47, 255, .22);
            animation-delay: 1.8s;
        }

        .scene-card {
            position: relative;
            width: min(100%, 420px);
            padding: 1.1rem;
            border-radius: 28px;
            border: 1px solid rgba(255, 255, 255, .1);
            background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .04));
            backdrop-filter: blur(18px);
            box-shadow: 0 28px 80px rgba(0, 0, 0, .52);
            transform-style: preserve-3d;
            transform: rotateX(12deg) rotateY(-18deg) translateZ(0);
        }

        .scene-card::before {
            content: '';
            position: absolute;
            inset: 1px;
            border-radius: 27px;
            border: 1px solid rgba(255, 255, 255, .08);
            pointer-events: none;
        }

        .scene-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .8rem;
            margin-bottom: 1rem;
        }

        .scene-top h3 {
            font-size: .96rem;
            font-weight: 800;
            letter-spacing: -.01em;
        }

        .scene-top span {
            font-size: .68rem;
            color: var(--mu);
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .scene-grid {
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: .85rem;
        }

        .scene-panel,
        .scene-stat,
        .scene-stack-item {
            background: rgba(8, 17, 30, .62);
            border: 1px solid rgba(255, 255, 255, .08);
            border-radius: 18px;
        }

        .scene-panel {
            padding: 1rem;
            min-height: 250px;
        }

        .scene-orbit {
            position: relative;
            height: 170px;
            border-radius: 22px;
            background:
                radial-gradient(circle at 50% 50%, rgba(55, 215, 255, .18), transparent 42%),
                radial-gradient(circle at 50% 50%, rgba(232, 140, 42, .12), transparent 56%),
                linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
            border: 1px solid rgba(255, 255, 255, .07);
            overflow: hidden;
            transform: translateZ(42px);
        }

        .scene-ring {
            position: absolute;
            inset: 18px;
            border-radius: 50%;
            border: 1px solid rgba(55, 215, 255, .35);
            box-shadow: inset 0 0 32px rgba(55, 215, 255, .08);
        }

        .scene-ring.two {
            inset: 34px;
            border-color: rgba(232, 140, 42, .3);
            animation: spin 18s linear infinite reverse;
        }

        .scene-ring.three {
            inset: 50px;
            border-color: rgba(167, 139, 250, .35);
            animation: spin 14s linear infinite;
        }

        .scene-dot {
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--amb2);
            box-shadow: 0 0 24px rgba(232, 140, 42, .65);
            top: 22%;
            left: 67%;
        }

        .scene-stack {
            display: flex;
            flex-direction: column;
            gap: .65rem;
            margin-top: 1rem;
        }

        .scene-stack-item {
            padding: .78rem .9rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .8rem;
        }

        .scene-stack-item strong {
            font-size: .8rem;
            font-weight: 700;
        }

        .scene-stack-item span {
            font-size: .72rem;
            color: var(--mu);
        }

        .scene-stat {
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: .8rem;
            min-height: 250px;
            justify-content: space-between;
        }

        .scene-stat-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .7rem;
        }

        .scene-stat-top .label {
            font-size: .67rem;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--mu);
        }

        .scene-score {
            font-size: 2.4rem;
            font-weight: 800;
            line-height: 1;
            color: var(--amb2);
        }

        .scene-bars {
            display: grid;
            gap: .55rem;
        }

        .scene-bar-row {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: .65rem;
            align-items: center;
            font-size: .72rem;
            color: var(--mu);
        }

        .scene-bar {
            height: 6px;
            border-radius: 999px;
            background: rgba(255, 255, 255, .07);
            overflow: hidden;
        }

        .scene-bar span {
            display: block;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--amb), var(--blue2), var(--cyan));
        }

        .scene-badges {
            display: flex;
            flex-wrap: wrap;
            gap: .45rem;
        }

        .scene-badge {
            font-size: .65rem;
            font-weight: 700;
            letter-spacing: .04em;
            padding: .26rem .58rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, .05);
            border: 1px solid rgba(255, 255, 255, .08);
            color: var(--wh2);
        }

        .scene-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .8rem;
        }

        .scene-footer small {
            font-size: .68rem;
            color: var(--mu);
        }

        .scene-footer strong {
            font-size: .92rem;
            color: var(--wh);
        }

        @keyframes orbFloat {

            0%,
            100% {
                transform: translate3d(0, 0, 0);
            }

            50% {
                transform: translate3d(18px, -18px, 0);
            }
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        .badge {
            display: inline-flex;
            align-items: center;
            gap: .52rem;
            background: rgba(232, 140, 42, .09);
            border: 1px solid rgba(232, 140, 42, .26);
            color: var(--amb2);
            font-size: .74rem;
            font-weight: 600;
            padding: .38rem 1.1rem;
            border-radius: 6px;
            margin-bottom: 1.8rem;
            animation: fu .7s ease both;
            letter-spacing: .03em;
        }

        .bdot {
            width: 6px;
            height: 6px;
            background: var(--amb);
            border-radius: 50%;
            animation: pu 1.5s infinite;
        }

        @keyframes pu {

            0%,
            100% {
                opacity: 1;
                transform: scale(1);
            }

            50% {
                opacity: .3;
                transform: scale(1.7);
            }
        }

        .hero-h {
            font-weight: 800;
            font-size: clamp(2.7rem, 7.2vw, 5.7rem);
            line-height: 1.03;
            letter-spacing: -.04em;
            max-width: 760px;
            animation: fu .9s ease .1s both;
            margin-left: auto;
            margin-right: auto;
        }

        .hero-sub {
            margin-top: 1.5rem;
            font-size: clamp(.94rem, 2vw, 1.15rem);
            color: var(--mu);
            max-width: 540px;
            line-height: 1.8;
            animation: fu 1s ease .2s both;
            margin-left: auto;
            margin-right: auto;
        }

        .hero-btns {
            margin-top: 2.7rem;
            display: flex;
            gap: .9rem;
            flex-wrap: wrap;
            justify-content: center;
            animation: fu 1s ease .3s both;
        }

        .hstats {
            margin-top: 4.5rem;
            display: flex;
            width: 100%;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-top: 1px solid rgba(255, 255, 255, 0.25);
            border-bottom: 1px solid rgba(0, 0, 0, 0.6);
            box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 15px 35px rgba(0, 0, 0, 0.5);
            border-radius: 12px;
            overflow: hidden;
            flex-wrap: wrap;
            justify-content: center;
            animation: fu 1s ease .5s both;
        }

        .hs {
            padding: 1.3rem 2.8rem;
            border-right: 1px solid var(--bdr);
            text-align: center;
        }

        .hs:last-child {
            border: none;
        }

        .hsn {
            font-size: 1.85rem;
            font-weight: 800;
            color: var(--amb);
            line-height: 1;
        }

        .hsl {
            font-size: .68rem;
            color: var(--mu);
            margin-top: .3rem;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        @keyframes fu {
            from {
                opacity: 0;
                transform: translateY(24px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ═══ TICKER ════════════════════════════════════ */
        .ticker {
            overflow: hidden;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            border-bottom: 1px solid rgba(0, 0, 0, 0.6);
            padding: .72rem 0;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        .tt {
            display: flex;
            width: max-content;
            animation: tick 34s linear infinite;
        }

        @keyframes tick {
            from {
                transform: translateX(0);
            }

            to {
                transform: translateX(-50%);
            }
        }

        .ti {
            white-space: nowrap;
            padding: 0 2.3rem;
            font-size: .73rem;
            font-weight: 600;
            color: var(--mu);
            display: flex;
            align-items: center;
            gap: .65rem;
            letter-spacing: .04em;
            text-transform: uppercase;
        }

        .ti .sp {
            color: var(--amb);
            font-size: .55rem;
        }

        /* ═══ VISUAL STORIES ═══════════════════════════ */
        #stories {
            background: radial-gradient(circle at 10% -20%, rgba(42, 125, 225, .16), transparent 45%), radial-gradient(circle at 90% 120%, rgba(232, 140, 42, .14), transparent 45%), var(--surf2);
        }

        .story-grid {
            margin-top: 2.3rem;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
        }

        .story-card {
            position: relative;
            border-radius: var(--r2);
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, .1);
            background: rgba(255, 255, 255, .03);
            height: clamp(280px, 35vw, 320px);
            min-height: 280px;
            box-shadow: 0 14px 28px rgba(0, 0, 0, .3);
            animation: floatCard 7s ease-in-out infinite;
        }

        .story-card:nth-child(2) {
            animation-delay: .8s;
        }

        .story-card:nth-child(3) {
            animation-delay: 1.6s;
        }

        @keyframes floatCard {

            0%,
            100% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-8px);
            }
        }

        @keyframes skeleton-shimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        .story-media {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, #111, #222, #111);
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.5s infinite linear;
        }

        .story-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scale(1.02);
            transition: transform .65s ease;
            filter: saturate(1.08);
        }

        .story-card:hover .story-media img {
            transform: scale(1.1);
        }

        .story-overlay {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, rgba(7, 17, 30, .1) 25%, rgba(7, 17, 30, .92));
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            gap: .5rem;
            padding: 1.1rem;
        }

        .story-tag {
            width: fit-content;
            font-size: .68rem;
            font-weight: 700;
            letter-spacing: .1em;
            color: var(--wh);
            text-transform: uppercase;
            background: rgba(123, 47, 255, .25);
            border: 1px solid rgba(167, 139, 250, .35);
            border-radius: 999px;
            padding: .24rem .62rem;
        }

        .story-title {
            font-size: 1rem;
            font-weight: 700;
            line-height: 1.3;
            color: var(--wh);
        }

        .story-copy {
            font-size: .78rem;
            line-height: 1.55;
            color: var(--wh2);
        }

        /* ═══ PROBLEM ═══════════════════════════════════ */
        .pcg {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        .pc {
            background: var(--card);
            border: 1px solid var(--bdr);
            border-radius: var(--r);
            padding: 1.5rem;
            transition: border-color .3s, transform .3s;
        }

        .pc:hover {
            border-color: rgba(232, 140, 42, .3);
            transform: translateY(-3px);
        }

        .pc-ic {
            font-size: 1.5rem;
            margin-bottom: .7rem;
        }

        .pc h4 {
            font-weight: 700;
            font-size: .88rem;
            margin-bottom: .28rem;
        }

        .pc p {
            font-size: .81rem;
            color: var(--mu);
            line-height: 1.58;
        }

        /* ═══ STEPS ═════════════════════════════════════ */
        .steps {
            margin-top: 3.8rem;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: .8rem;
            position: relative;
        }

        .sconn {
            position: absolute;
            top: 31px;
            left: 12%;
            right: 12%;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--amb), var(--blue), var(--amb), transparent);
            opacity: .2;
        }

        .step {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .8rem;
        }

        .sr {
            width: 62px;
            height: 62px;
            border-radius: 50%;
            background: var(--card);
            border: 1px solid var(--bdr);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 1rem;
            position: relative;
            z-index: 1;
            transition: all .3s;
        }

        .step:hover .sr {
            border-color: var(--amb);
            background: rgba(232, 140, 42, .1);
            color: var(--amb);
        }

        .sl {
            font-size: .74rem;
            font-weight: 500;
            color: var(--mu);
            line-height: 1.42;
            text-align: center;
        }

        /* ═══ FEATURES ══════════════════════════════════ */
        .fg3 {
            margin-top: 3.3rem;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.2rem;
        }

        .fc {
            background: var(--card);
            border: 1px solid var(--bdr);
            border-radius: var(--r);
            padding: 1.8rem;
            position: relative;
            overflow: hidden;
            transition: transform .3s, box-shadow .3s, border-color .3s;
            cursor: pointer;
        }

        .fc::before {
            content: '';
            position: absolute;
            inset: -40%;
            background: radial-gradient(520px circle at 15% 20%, rgba(55, 215, 255, .18), transparent 55%), radial-gradient(520px circle at 85% 80%, rgba(232, 140, 42, .16), transparent 60%);
            opacity: .28;
            animation: driftGlow 14s ease-in-out infinite;
            pointer-events: none;
            z-index: 0;
        }

        .fc::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--amb), var(--blue));
            opacity: 0;
            transition: opacity .3s;
        }

        .fc>* {
            position: relative;
            z-index: 1;
        }

        .fc:hover {
            border-color: rgba(42, 125, 225, .35);
            transform: translateY(-4px);
            box-shadow: 0 16px 36px rgba(0, 0, 0, .3);
        }

        .fc.selected {
            border-color: rgba(232, 140, 42, .6);
            box-shadow: 0 18px 38px rgba(0, 0, 0, .35);
        }

        .fc:focus-visible {
            outline: 2px solid rgba(91, 163, 245, .7);
            outline-offset: 3px;
        }

        .fc:hover::after {
            opacity: 1;
        }

        .fc-ic {
            font-size: 1.65rem;
            margin-bottom: .85rem;
        }

        .fc h3 {
            font-weight: 700;
            font-size: .9rem;
            margin-bottom: .45rem;
        }

        .fc p {
            font-size: .81rem;
            color: var(--mu);
            line-height: 1.62;
        }

        .feature-detail {
            margin-top: 2rem;
            background: linear-gradient(135deg, rgba(42, 125, 225, .16), rgba(232, 140, 42, .12));
            border: 1px solid rgba(255, 255, 255, .08);
            border-radius: 18px;
            padding: 1.3rem 1.5rem;
            display: grid;
            grid-template-columns: 80px 1fr;
            gap: 1rem;
            align-items: center;
            min-height: 120px;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity .3s ease, transform .3s ease;
        }

        .feature-detail.open {
            opacity: 1;
            transform: translateY(0);
        }

        .fd-icon {
            width: 64px;
            height: 64px;
            border-radius: 16px;
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .18);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
        }

        .fd-body h3 {
            font-size: 1.05rem;
            margin-bottom: .4rem;
        }

        .fd-body p {
            color: var(--wh2);
            font-size: .85rem;
            line-height: 1.6;
            margin-bottom: .7rem;
        }

        .fd-pills {
            display: flex;
            flex-wrap: wrap;
            gap: .4rem;
        }

        .fd-pill {
            font-size: .72rem;
            padding: .28rem .6rem;
            border-radius: 999px;
            background: rgba(42, 125, 225, .18);
            border: 1px solid rgba(42, 125, 225, .35);
            color: var(--wh2);
        }

        @keyframes driftGlow {

            0%,
            100% {
                transform: translate3d(-2%, -2%, 0);
            }

            50% {
                transform: translate3d(2%, 2%, 0);
            }
        }

        /* ═══ AI SECTION ════════════════════════════════ */
        #ai-section {
            padding: 6.5rem 5%;
            background: var(--surf);
        }

        .ai-wrap {
            max-width: 1100px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4.5rem;
            align-items: center;
        }

        .analyzer-grid {
            max-width: 1100px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4.5rem;
            align-items: center;
        }

        .analyzer-card {
            position: relative;
            padding: 1.15rem;
            border-radius: 26px;
            border: 1px solid rgba(167, 139, 250, .2);
            background:
                radial-gradient(circle at 25% 18%, rgba(167, 139, 250, .18), transparent 30%),
                radial-gradient(circle at 80% 10%, rgba(55, 215, 255, .14), transparent 24%),
                linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
            backdrop-filter: blur(18px);
            box-shadow: 0 28px 80px rgba(0, 0, 0, .42);
            transform: perspective(1300px) rotateY(-10deg) rotateX(8deg);
            transform-style: preserve-3d;
            transition: box-shadow 0.4s ease;
        }

        .analyzer-card::before {
            content: '';
            position: absolute;
            inset: 1px;
            border-radius: 25px;
            border: 1px solid rgba(255, 255, 255, .06);
            pointer-events: none;
            transform: translateZ(-10px);
        }

        .analyzer-card .glass-stat, .analyzer-card > div > div, .analyzer-card > div {
            transform: translateZ(40px);
            transition: transform 0.3s ease;
        }

        .analyzer-card .glass-stat {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .8rem;
            padding: .9rem 1rem;
            border-radius: 12px;
            background: rgba(8, 17, 30, .62);
            border: 1px solid rgba(255, 255, 255, .08);
            box-shadow: 0 10px 20px rgba(0,0,0,0.3);
        }

        .analyzer-card .glass-stat strong {
            font-size: .86rem;
        }

        .analyzer-card .glass-stat span {
            font-size: 1.2rem;
            font-weight: 800;
        }

        .analyzer-card .glass-tags {
            display: flex;
            gap: .4rem;
            flex-wrap: wrap;
            transform: translateZ(20px);
        }

        .analyzer-card .glass-tag {
            font-size: .7rem;
            font-weight: 700;
            padding: .22rem .58rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, .05);
            border: 1px solid rgba(255, 255, 255, .08);
            color: var(--wh2);
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }

        .ai-preview {
            background: var(--surf2);
            border: 1px solid rgba(232, 140, 42, .2);
            border-radius: var(--r2);
            padding: 2rem;
            display: flex;
            flex-direction: column;
            gap: 0;
            overflow: hidden;
        }

        .ai-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.2rem;
        }

        .ai-brand {
            display: flex;
            align-items: center;
            gap: .7rem;
        }

        .ai-avatar {
            width: 36px;
            height: 36px;
            border-radius: 9px;
            background: linear-gradient(135deg, var(--amb), var(--blue));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
        }

        .ai-name {
            font-weight: 700;
            font-size: .9rem;
        }

        .ai-status {
            font-size: .72rem;
            color: var(--green);
            display: flex;
            align-items: center;
            gap: .3rem;
        }

        .ai-dot {
            width: 6px;
            height: 6px;
            background: var(--green);
            border-radius: 50%;
            animation: pu 2s infinite;
        }

        .ai-msgs {
            display: flex;
            flex-direction: column;
            gap: .7rem;
            min-height: 180px;
            margin-bottom: 1rem;
        }

        .ai-bubble {
            padding: .75rem 1rem;
            border-radius: 12px;
            font-size: .83rem;
            line-height: 1.55;
            max-width: 88%;
        }

        .ai-bubble.bot {
            background: rgba(42, 125, 225, .12);
            border: 1px solid rgba(42, 125, 225, .2);
            align-self: flex-start;
        }

        .ai-bubble.user {
            background: rgba(232, 140, 42, .12);
            border: 1px solid rgba(232, 140, 42, .2);
            align-self: flex-end;
        }

        .ai-input-row {
            display: flex;
            gap: .6rem;
            align-items: center;
        }

        .ai-input-row .fi {
            border-radius: 8px;
            font-size: .82rem;
            padding: .6rem .85rem;
        }

        .ai-send {
            background: var(--amb);
            border: none;
            cursor: pointer;
            border-radius: 8px;
            padding: .6rem .9rem;
            color: var(--bg);
            font-size: 1rem;
            transition: all .2s;
            flex-shrink: 0;
        }

        .ai-send:hover {
            background: var(--amb2);
        }

        .ai-voice-btn {
            background: rgba(42, 125, 225, .15);
            border: 1px solid rgba(42, 125, 225, .3);
            cursor: pointer;
            border-radius: 8px;
            padding: .6rem .8rem;
            color: var(--blue2);
            font-size: 1rem;
            transition: all .2s;
            flex-shrink: 0;
        }

        .ai-voice-btn:hover,
        .ai-voice-btn.listening {
            background: var(--blue);
            color: #fff;
            border-color: var(--blue);
        }

        /* ═══ FLOATING AI CHAT ══════════════════════════ */
        .ai-fab {
            position: fixed;
            bottom: calc(var(--fab-bottom) + env(safe-area-inset-bottom, 0px));
            right: calc(var(--fab-right) + env(safe-area-inset-right, 0px));
            z-index: 800;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--amb), var(--blue));
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            box-shadow: 0 8px 30px rgba(232, 140, 42, .5), 0 0 26px rgba(55, 215, 255, .3);
            transition: transform .2s, box-shadow .2s;
            animation: fu 1s ease 1s both;
            will-change: transform, box-shadow;
        }

        .ai-fab:hover {
            transform: scale(1.08);
            box-shadow: 0 8px 30px rgba(232, 140, 42, .6);
        }

        .ai-fab .notif {
            position: absolute;
            top: -2px;
            right: -2px;
            width: 14px;
            height: 14px;
            background: var(--green);
            border-radius: 50%;
            border: 2px solid var(--bg);
            font-size: .5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 700;
        }

        /* Full chat panel */
        .chat-panel {
            position: fixed;
            bottom: calc(var(--fab-bottom) + var(--fab-gap) + env(safe-area-inset-bottom, 0px));
            right: calc(var(--fab-right) + env(safe-area-inset-right, 0px));
            z-index: 799;
            width: 380px;
            background: var(--surf);
            border: 1px solid var(--bdr);
            border-radius: var(--r2);
            box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
            display: none;
            flex-direction: column;
            overflow: hidden;
            max-height: 580px;
            animation: cpIn .3s cubic-bezier(.34, 1.56, .64, 1) both;
        }

        .chat-panel.open {
            display: flex;
        }

        @keyframes cpIn {
            from {
                opacity: 0;
                transform: scale(.9) translateY(20px);
            }

            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        .cp-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.2rem;
            background: var(--surf2);
            border-bottom: 1px solid var(--bdr);
        }

        .cp-info {
            display: flex;
            align-items: center;
            gap: .7rem;
        }

        .cp-av {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: linear-gradient(135deg, var(--amb), var(--blue));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .85rem;
        }

        .cp-name {
            font-weight: 700;
            font-size: .87rem;
        }

        .cp-st {
            font-size: .68rem;
            color: var(--green);
        }

        .cp-close {
            background: none;
            border: none;
            color: var(--mu);
            cursor: pointer;
            font-size: 1.1rem;
            width: 28px;
            height: 28px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all .2s;
        }

        .cp-close:hover {
            background: rgba(255, 255, 255, .08);
            color: var(--wh);
        }

        .cp-msgs {
            flex: 1;
            overflow-y: auto;
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: .7rem;
            min-height: 300px;
        }

        .cp-msgs::-webkit-scrollbar {
            width: 3px;
        }

        .cp-msgs::-webkit-scrollbar-thumb {
            background: var(--bdr);
            border-radius: 3px;
        }

        .msg {
            padding: .68rem .9rem;
            border-radius: 10px;
            font-size: .82rem;
            line-height: 1.55;
            max-width: 86%;
            word-break: break-word;
        }

        .msg.bot {
            background: rgba(42, 125, 225, .1);
            border: 1px solid rgba(42, 125, 225, .18);
            align-self: flex-start;
            color: var(--wh2);
        }

        .msg.user {
            background: rgba(232, 140, 42, .12);
            border: 1px solid rgba(232, 140, 42, .2);
            align-self: flex-end;
            color: var(--wh);
        }

        .msg.typing {
            align-self: flex-start;
        }

        .typing-dots {
            display: flex;
            gap: 4px;
            padding: .2rem 0;
        }

        .typing-dots span {
            width: 6px;
            height: 6px;
            background: var(--blue2);
            border-radius: 50%;
            animation: td .9s infinite;
        }

        .typing-dots span:nth-child(2) {
            animation-delay: .15s;
        }

        .typing-dots span:nth-child(3) {
            animation-delay: .3s;
        }

        @keyframes td {

            0%,
            80%,
            100% {
                transform: scale(.6);
                opacity: .4;
            }

            40% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .cp-agents {
            display: flex;
            gap: .4rem;
            padding: .6rem 1rem;
            background: rgba(42, 125, 225, .04);
            border-top: 1px solid var(--bdr);
            flex-wrap: wrap;
        }

        .agent-chip {
            font-size: .64rem;
            font-weight: 600;
            padding: .2rem .55rem;
            border-radius: 4px;
            background: rgba(255, 255, 255, .05);
            border: 1px solid var(--bdr);
            color: var(--mu);
            letter-spacing: .03em;
        }

        .agent-chip.active {
            background: rgba(42, 125, 225, .15);
            border-color: rgba(42, 125, 225, .3);
            color: var(--blue2);
        }

        .cp-input {
            display: flex;
            gap: .5rem;
            padding: .8rem 1rem;
            border-top: 1px solid var(--bdr);
            background: var(--surf2);
        }

        .cp-input .fi {
            border-radius: 8px;
            font-size: .82rem;
            padding: .6rem .85rem;
        }

        .cp-btn {
            background: var(--amb);
            border: none;
            border-radius: 7px;
            padding: .6rem .85rem;
            color: var(--bg);
            cursor: pointer;
            font-size: .95rem;
            transition: all .2s;
            flex-shrink: 0;
        }

        .cp-btn:hover {
            background: var(--amb2);
        }

        .cp-mic {
            background: rgba(42, 125, 225, .12);
            border: 1px solid rgba(42, 125, 225, .25);
            border-radius: 7px;
            padding: .6rem .75rem;
            color: var(--blue2);
            cursor: pointer;
            font-size: .95rem;
            transition: all .2s;
            flex-shrink: 0;
        }

        .cp-mic:hover,
        .cp-mic.on {
            background: var(--blue);
            color: #fff;
            border-color: var(--blue);
        }

        .cp-spk {
            background: rgba(232, 140, 42, .1);
            border: 1px solid rgba(232, 140, 42, .22);
            border-radius: 7px;
            padding: .6rem .75rem;
            color: var(--amb2);
            cursor: pointer;
            font-size: .95rem;
            transition: all .2s;
            flex-shrink: 0;
        }

        .cp-spk.on {
            background: var(--amb);
            color: var(--bg);
        }

        /* ═══ CAREER DASHBOARD ══════════════════════════ */
        #dashboard .wrap {
            max-width: 1200px;
        }

        .career-explorer-head {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .career-explorer-head .desc {
            margin-bottom: 0;
        }

        .career-toggle {
            display: inline-flex;
            align-items: center;
            gap: .55rem;
            padding: .6rem 1rem;
            border-radius: 12px;
            border: 1px solid rgba(59, 130, 246, .35);
            background: rgba(30, 64, 175, .2);
            color: var(--wh);
            font-weight: 700;
            font-size: .82rem;
            cursor: pointer;
            font-family: 'Plus Jakarta Sans', sans-serif;
            transition: transform .2s, box-shadow .2s, background .2s;
        }

        .career-toggle:hover {
            transform: translateY(-2px);
            background: rgba(30, 64, 175, .28);
            box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
        }

        .career-toggle-icon {
            font-size: 1.1rem;
            transition: transform .3s ease;
        }

        .career-toggle.open .career-toggle-icon {
            transform: rotate(180deg);
        }

        .career-explorer-body {
            margin-top: 1.6rem;
            max-height: 0;
            opacity: 0;
            transform: translateY(-6px);
            transition: max-height .6s ease, opacity .3s ease, transform .3s ease;
            overflow: hidden;
            visibility: hidden;
            pointer-events: none;
        }

        .career-explorer-body.open {
            max-height: 8000px;
            opacity: 1;
            transform: translateY(0);
            visibility: visible;
            pointer-events: auto;
        }

        .dash-filters {
            display: flex;
            gap: .6rem;
            flex-wrap: wrap;
            margin-bottom: 2rem;
        }

        .df {
            background: var(--card);
            border: 1px solid var(--bdr);
            border-radius: 7px;
            padding: .42rem 1rem;
            font-size: .78rem;
            font-weight: 600;
            cursor: pointer;
            color: var(--mu);
            transition: all .2s;
            letter-spacing: .03em;
        }

        .df:hover,
        .df.on {
            background: var(--amb);
            border-color: var(--amb);
            color: var(--bg);
        }

        .career-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
        }

        .ccard {
            background: linear-gradient(180deg, rgba(24, 28, 36, 0.8) 0%, rgba(12, 15, 22, 0.95) 100%);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            padding: 1.5rem;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 24px rgba(0,0,0,0.3);
        }

        .ccard::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--amb), #ff4e00, var(--blue));
            background-size: 200% 100%;
            opacity: 0;
            transform: scaleX(0);
            transform-origin: left;
            transition: all 0.4s ease;
        }

        .ccard:hover,
        .ccard.selected {
            border-color: rgba(232, 140, 42, 0.4);
            transform: translateY(-6px);
            box-shadow: 0 12px 32px rgba(232, 140, 42, 0.15), 0 4px 12px rgba(0,0,0,0.4);
            background: linear-gradient(180deg, rgba(30, 35, 45, 0.9) 0%, rgba(15, 18, 25, 0.95) 100%);
        }

        .ccard:hover::before,
        .ccard.selected::before {
            opacity: 1;
            transform: scaleX(1);
            animation: gradientMove 3s linear infinite;
        }

        @keyframes gradientMove {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .ccard-ic {
            font-size: 2rem;
            margin-bottom: 0.8rem;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: inline-block;
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
        }

        .ccard:hover .ccard-ic {
            transform: scale(1.15) translateY(-2px);
        }

        .ccard-title {
            font-weight: 800;
            font-size: 0.95rem;
            margin-bottom: 0.3rem;
            color: var(--wh);
            letter-spacing: -0.01em;
        }

        .ccard-stream {
            font-size: 0.7rem;
            color: var(--amb);
            margin-bottom: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-weight: 700;
        }

        .ccard-salary {
            font-size: .78rem;
            color: var(--amb);
            font-weight: 600;
            margin-bottom: .3rem;
        }

        .demand-bar {
            height: 3px;
            background: rgba(255, 255, 255, .07);
            border-radius: 3px;
            overflow: hidden;
        }

        .demand-fill {
            height: 100%;
            border-radius: 3px;
            background: linear-gradient(90deg, var(--amb), var(--green));
            transition: width 1s ease;
        }

        .demand-lbl {
            font-size: .67rem;
            color: var(--mu);
            margin-top: .3rem;
        }

        /* Career Detail Panel */
        .career-detail {
            display: none;
            background: var(--surf);
            border: 1px solid rgba(232, 140, 42, .2);
            border-radius: var(--r2);
            padding: 2.2rem;
            margin-top: 2rem;
            animation: fu .4s ease both;
        }

        .career-detail.open {
            display: block;
        }

        .cd-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .cd-info h2 {
            font-weight: 800;
            font-size: 1.4rem;
            margin-bottom: .3rem;
        }

        .cd-info p {
            font-size: .85rem;
            color: var(--mu);
            line-height: 1.6;
            max-width: 500px;
        }

        .cd-meta {
            display: flex;
            gap: .6rem;
            flex-wrap: wrap;
            margin-top: .7rem;
        }

        .meta-tag {
            background: rgba(232, 140, 42, .1);
            border: 1px solid rgba(232, 140, 42, .22);
            color: var(--amb2);
            font-size: .73rem;
            font-weight: 600;
            padding: .28rem .7rem;
            border-radius: 5px;
        }

        .cd-close {
            background: rgba(255, 255, 255, .05);
            border: 1px solid var(--bdr);
            color: var(--mu);
            padding: .5rem 1rem;
            border-radius: 8px;
            cursor: pointer;
            font-size: .8rem;
            font-weight: 600;
            font-family: 'Plus Jakarta Sans', sans-serif;
            transition: all .2s;
        }

        .cd-close:hover {
            background: rgba(255, 255, 255, .1);
            color: var(--wh);
        }

        .cd-body {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
        }

        .cd-section h3 {
            font-weight: 700;
            font-size: .88rem;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: .5rem;
            color: var(--wh2);
        }

        .cd-section h3::before {
            content: '';
            width: 14px;
            height: 2px;
            background: var(--amb);
            border-radius: 2px;
        }

        .skill-item {
            display: flex;
            align-items: center;
            gap: .75rem;
            padding: .6rem 0;
            border-bottom: 1px solid var(--bdr);
        }

        .skill-item:last-child {
            border: none;
        }

        .skill-cb {
            width: 18px;
            height: 18px;
            border-radius: 4px;
            border: 2px solid var(--bdr);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .7rem;
            transition: all .2s;
            flex-shrink: 0;
        }

        .skill-cb.done {
            background: var(--green);
            border-color: var(--green);
            color: #fff;
        }

        .skill-name {
            font-size: .83rem;
            font-weight: 500;
            flex: 1;
        }

        .skill-name.done {
            text-decoration: line-through;
            color: var(--mu);
        }

        .skill-badge {
            font-size: .65rem;
            background: rgba(42, 125, 225, .12);
            border: 1px solid rgba(42, 125, 225, .2);
            color: var(--blue2);
            padding: .18rem .5rem;
            border-radius: 4px;
            font-weight: 600;
        }

        .progress-section {
            margin-bottom: 1.5rem;
        }

        .prog-label {
            display: flex;
            justify-content: space-between;
            font-size: .78rem;
            font-weight: 600;
            margin-bottom: .5rem;
        }

        .prog-bar {
            height: 6px;
            background: rgba(255, 255, 255, .07);
            border-radius: 4px;
            overflow: hidden;
        }

        .prog-fill {
            height: 100%;
            border-radius: 4px;
            background: linear-gradient(90deg, var(--amb), var(--green));
            transition: width .5s ease;
        }

        .notes-area {
            margin-top: 1rem;
        }

        .notes-area label {
            font-size: .72rem;
            font-weight: 700;
            color: var(--mu);
            letter-spacing: .06em;
            text-transform: uppercase;
            display: block;
            margin-bottom: .45rem;
        }

        .notes-area .ft {
            min-height: 90px;
            font-size: .82rem;
        }

        .save-note-btn {
            background: var(--amb);
            color: var(--bg);
            border: none;
            border-radius: 7px;
            padding: .55rem 1.2rem;
            font-size: .8rem;
            font-weight: 700;
            cursor: pointer;
            margin-top: .6rem;
            font-family: 'Plus Jakarta Sans', sans-serif;
            transition: all .2s;
        }

        .save-note-btn:hover {
            background: var(--amb2);
        }

        .roadmap-steps {
            display: flex;
            flex-direction: column;
            gap: .6rem;
        }

        .rm-step {
            display: flex;
            align-items: flex-start;
            gap: .75rem;
            padding: .65rem;
            background: rgba(255, 255, 255, .03);
            border-radius: 8px;
            border: 1px solid var(--bdr);
        }

        .rm-num {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: rgba(232, 140, 42, .15);
            border: 1px solid rgba(232, 140, 42, .3);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .68rem;
            font-weight: 800;
            color: var(--amb);
            flex-shrink: 0;
        }

        .rm-txt {
            font-size: .8rem;
            color: var(--mu);
            line-height: 1.5;
        }

        /* ═══ MARKET ════════════════════════════════════ */
        .mgrid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        .mc {
            background: var(--card);
            border: 1px solid var(--bdr);
            border-radius: var(--r);
            padding: 1.7rem;
            transition: all .3s;
        }

        .mc:first-child {
            grid-column: 1/-1;
        }

        .mc:hover {
            transform: translateY(-3px);
            border-color: rgba(232, 140, 42, .25);
        }

        .mc-big {
            font-size: 2rem;
            font-weight: 800;
            color: var(--amb);
            display: block;
            margin-bottom: .32rem;
        }

        .mc p {
            font-size: .82rem;
            color: var(--mu);
            line-height: 1.55;
        }

        /* ═══ ROADMAP ═══════════════════════════════════ */
        .rtracks {
            margin-top: 3rem;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: .9rem;
        }

        .ri {
            background: var(--card);
            border: 1px solid var(--bdr);
            border-radius: var(--r);
            padding: 1.6rem 1rem;
            transition: all .3s;
            position: relative;
        }

        .ri.now {
            border-color: var(--amb);
            background: rgba(232, 140, 42, .06);
        }

        .ri.now::before {
            content: 'Live';
            position: absolute;
            top: -9px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--amb);
            color: var(--bg);
            font-size: .62rem;
            font-weight: 700;
            padding: .18rem .6rem;
            border-radius: 4px;
            letter-spacing: .06em;
        }

        .ri:hover {
            transform: translateY(-3px);
            border-color: rgba(232, 140, 42, .35);
        }

        .ri-ph {
            font-size: .64rem;
            font-weight: 700;
            letter-spacing: .12em;
            color: var(--mu);
            margin-bottom: .6rem;
            text-transform: uppercase;
        }

        .ri h4 {
            font-weight: 700;
            font-size: .82rem;
            line-height: 1.38;
        }

        /* ═══ REVIEWS ═══════════════════════════════════ */
        .rev-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 2rem;
            margin-bottom: 2.8rem;
        }

        .rscore-box {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            border-left: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--r);
            padding: 1.3rem 1.8rem;
            display: flex;
            align-items: center;
            gap: 1.3rem;
            flex-shrink: 0;
            box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 12px 30px rgba(0, 0, 0, 0.5);
        }

        .rbig {
            font-size: 3.2rem;
            font-weight: 800;
            line-height: 1;
        }

        .rstars {
            color: var(--amb);
            font-size: 1rem;
            margin-bottom: .25rem;
        }

        .rct {
            font-size: .74rem;
            color: var(--mu);
        }

        .rgrid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.1rem;
        }

        .rvc {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            border-left: 1px solid rgba(255, 255, 255, 0.1);
            border-bottom: 1px solid rgba(0, 0, 0, 0.6);
            border-radius: var(--r);
            padding: 1.7rem;
            position: relative;
            overflow: hidden;
            transition: all .3s;
            box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), inset 0 -4px 10px rgba(0, 0, 0, 0.6), 0 12px 30px rgba(0, 0, 0, 0.5);
        }

        .rvc::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--amb);
            opacity: 0;
            transition: opacity .3s;
        }

        .rvc:hover {
            border-color: rgba(232, 140, 42, .28);
            transform: translateY(-3px);
        }

        .rvc:hover::before {
            opacity: 1;
        }

        .rvc-st {
            color: var(--amb);
            font-size: .88rem;
            margin-bottom: .8rem;
        }

        .rvc-tx {
            font-size: .85rem;
            color: var(--mu);
            line-height: 1.7;
            margin-bottom: 1.2rem;
            font-style: italic;
        }

        .rvc-u {
            display: flex;
            align-items: center;
            gap: .75rem;
        }

        .rav {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: .88rem;
            flex-shrink: 0;
        }

        .rnm {
            font-weight: 700;
            font-size: .84rem;
        }

        .rrl {
            font-size: .71rem;
            color: var(--mu);
        }

        /* Write review */
        .write-box {
            margin-top: 2.5rem;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            border-left: 1px solid rgba(255, 255, 255, 0.1);
            border-bottom: 1px solid rgba(0, 0, 0, 0.6);
            border-radius: var(--r2);
            padding: 2rem;
            box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 12px 30px rgba(0, 0, 0, 0.5);
        }

        .write-box h3 {
            font-weight: 800;
            font-size: 1.1rem;
            margin-bottom: .35rem;
        }

        .write-box>p {
            font-size: .84rem;
            color: var(--mu);
            margin-bottom: 1.8rem;
            line-height: 1.6;
        }

        .wg {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: .9rem;
        }

        .wg .full {
            grid-column: 1/-1;
        }

        .star-r {
            display: flex;
            gap: .35rem;
        }

        .sb {
            background: none;
            border: none;
            font-size: 1.75rem;
            cursor: pointer;
            color: rgba(255, 255, 255, .1);
            transition: color .2s, transform .2s;
        }

        .sb:hover,
        .sb.lit {
            color: var(--amb);
        }

        .sb.lit {
            transform: scale(1.08);
        }

        .rev-btn {
            background: var(--amb);
            color: var(--bg);
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-weight: 700;
            font-size: .88rem;
            padding: .78rem 1.8rem;
            border-radius: 7px;
            border: none;
            cursor: pointer;
            transition: all .2s;
        }

        .rev-btn:hover {
            background: var(--amb2);
            box-shadow: 0 5px 16px rgba(232, 140, 42, .4);
        }

        .rev-ok {
            display: none;
            align-items: center;
            gap: .55rem;
            background: rgba(34, 197, 94, .07);
            border: 1px solid rgba(34, 197, 94, .2);
            border-radius: 7px;
            padding: .75rem 1.1rem;
            font-size: .83rem;
            color: #4ade80;
            margin-top: .9rem;
        }

        .rev-ok.show {
            display: flex;
        }

        #urlist {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.1rem;
            margin-top: 1.8rem;
        }

        /* ═══ TEAM SECTION ══════════════════════════════ */
        #team {
            padding: 6.5rem 5%;
        }

        .team-grid {
            margin-top: 3rem;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
        }

        .tcard {
            background: var(--card);
            border: 1px solid var(--bdr);
            border-radius: var(--r2);
            padding: 2.2rem;
            text-align: center;
            transition: all .3s;
            position: relative;
            overflow: hidden;
        }

        .tcard::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--amb), var(--blue));
            opacity: 0;
            transition: opacity .3s;
        }

        .tcard:hover {
            border-color: rgba(232, 140, 42, .3);
            transform: translateY(-4px);
            box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
        }

        .tcard:hover::before {
            opacity: 1;
        }

        .tcard.leader {
            border-color: rgba(232, 140, 42, .25);
            background: rgba(232, 140, 42, .04);
        }

        .tcard.leader::before {
            opacity: 1;
        }

        .t-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin: 0 auto 1.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 1.6rem;
        }

        .t-badge {
            display: inline-block;
            font-size: .64rem;
            font-weight: 700;
            padding: .22rem .7rem;
            border-radius: 4px;
            margin-bottom: .7rem;
            letter-spacing: .05em;
            text-transform: uppercase;
        }

        .t-name {
            font-weight: 800;
            font-size: 1.1rem;
            margin-bottom: .25rem;
        }

        .t-role {
            font-size: .82rem;
            color: var(--amb);
            font-weight: 600;
            margin-bottom: .65rem;
        }

        .t-desc {
            font-size: .8rem;
            color: var(--mu);
            line-height: 1.6;
        }

        .t-skills {
            display: flex;
            flex-wrap: wrap;
            gap: .4rem;
            justify-content: center;
            margin-top: 1rem;
        }

        .ts {
            font-size: .68rem;
            background: rgba(255, 255, 255, .05);
            border: 1px solid var(--bdr);
            padding: .2rem .6rem;
            border-radius: 4px;
            color: var(--wh2);
        }

        /* ═══ CTA ═══════════════════════════════════════ */
        #cta {
            padding: 7rem 5%;
            text-align: center;
            overflow: hidden;
            position: relative;
        }

        #cta .ttl {
            font-size: clamp(1.9rem, 4.8vw, 3.6rem);
            max-width: 620px;
            margin: 0 auto 1.3rem;
        }

        #cta .desc {
            margin: 0 auto 2.8rem;
        }

        /* ═══ FOOTER ════════════════════════════════════ */
        footer {
            background: var(--surf);
            border-top: 1px solid var(--bdr);
            padding: 3.5rem 5% 2rem;
        }

        .footer-top {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 3rem;
            margin-bottom: 2.5rem;
        }

        .ft-brand .logo {
            margin-bottom: .9rem;
            display: inline-flex;
        }

        .ft-brand p {
            font-size: .82rem;
            color: var(--mu);
            line-height: 1.7;
            max-width: 280px;
        }

        .ft-col h4 {
            font-weight: 700;
            font-size: .82rem;
            color: var(--wh2);
            margin-bottom: 1rem;
            letter-spacing: .04em;
        }

        .ft-col a,
        .ft-col p {
            display: block;
            color: var(--mu);
            text-decoration: none;
            font-size: .8rem;
            margin-bottom: .55rem;
            transition: color .2s;
            line-height: 1.5;
        }

        .ft-col a:hover {
            color: var(--amb);
        }

        .ft-contact-item {
            display: flex;
            align-items: center;
            gap: .5rem;
            color: var(--mu);
            font-size: .8rem;
            margin-bottom: .55rem;
        }

        .ft-contact-item a {
            color: var(--mu);
            text-decoration: none;
            transition: color .2s;
            display: inline;
        }

        .ft-contact-item a:hover {
            color: var(--amb);
        }

        .ft-contact-icon {
            font-size: .85rem;
            flex-shrink: 0;
        }

        .ft-bottom {
            border-top: 1px solid var(--bdr);
            padding-top: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: .8rem;
        }

        .ft-bottom p {
            font-size: .75rem;
            color: var(--mu);
        }

        .ft-legal {
            display: flex;
            gap: 1.5rem;
        }

        .ft-legal a {
            font-size: .73rem;
            color: var(--mu);
            text-decoration: none;
            transition: color .2s;
        }

        .ft-legal a:hover {
            color: var(--wh);
        }

        .ft-social {
            display: flex;
            gap: .6rem;
        }

        .fsoc {
            width: 32px;
            height: 32px;
            border-radius: 7px;
            background: rgba(255, 255, 255, .05);
            border: 1px solid var(--bdr);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .82rem;
            cursor: pointer;
            transition: all .2s;
            color: var(--mu);
            text-decoration: none;
        }

        .fsoc:hover {
            background: rgba(232, 140, 42, .12);
            border-color: rgba(232, 140, 42, .3);
            color: var(--amb);
        }

        /* ═══ MODAL ═════════════════════════════════════ */
        .ov {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 900;
            background: rgba(4, 9, 17, .9);
            backdrop-filter: blur(14px);
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }

        .ov.open {
            display: flex;
        }

        .mod {
            background: var(--surf);
            border: 1px solid var(--bdr);
            border-radius: var(--r2);
            width: 100%;
            max-width: 480px;
            padding: 2.5rem;
            position: relative;
            animation: mi .4s cubic-bezier(.34, 1.56, .64, 1) both;
            max-height: 92vh;
            overflow-y: auto;
        }

        @keyframes mi {
            from {
                opacity: 0;
                transform: scale(.9) translateY(18px);
            }

            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        .mx {
            position: absolute;
            top: 1.1rem;
            right: 1.1rem;
            background: rgba(255, 255, 255, .05);
            border: 1px solid var(--bdr);
            color: var(--mu);
            width: 30px;
            height: 30px;
            border-radius: 7px;
            cursor: pointer;
            font-size: .82rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all .2s;
        }

        .mx:hover {
            background: rgba(255, 255, 255, .1);
            color: var(--wh);
        }

        .mod h2 {
            font-weight: 800;
            font-size: 1.4rem;
            letter-spacing: -.02em;
            margin-bottom: .42rem;
        }

        .mod-sub {
            font-size: .84rem;
            color: var(--mu);
            margin-bottom: 1.7rem;
            line-height: 1.6;
        }

        .tabs {
            display: flex;
            border: 1px solid var(--bdr);
            border-radius: 9px;
            overflow: hidden;
            margin-bottom: 1.7rem;
        }

        .tb {
            flex: 1;
            background: none;
            border: none;
            color: var(--mu);
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-weight: 500;
            font-size: .86rem;
            padding: .65rem;
            cursor: pointer;
            transition: all .2s;
        }

        .tb.on {
            background: var(--amb);
            color: var(--bg);
            font-weight: 700;
        }

        .panel {
            display: none;
            flex-direction: column;
            gap: .85rem;
        }

        .panel.on {
            display: flex;
        }

        .msub {
            background: var(--amb);
            color: var(--bg);
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-weight: 700;
            font-size: .93rem;
            padding: .85rem;
            border-radius: 9px;
            border: none;
            cursor: pointer;
            width: 100%;
            transition: all .2s;
            margin-top: .3rem;
        }

        .msub:hover {
            background: var(--amb2);
            box-shadow: 0 5px 18px rgba(232, 140, 42, .4);
        }

        .msub:disabled {
            opacity: .6;
            cursor: not-allowed;
        }

        .mft {
            text-align: center;
            font-size: .74rem;
            color: var(--mu);
            margin-top: .85rem;
        }

        .mft a {
            color: var(--amb);
            cursor: pointer;
        }

        /* ═══ THANK YOU PAGE ════════════════════════════ */
        #page-ty {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 5rem 5%;
            position: relative;
            overflow: hidden;
        }

        .ty {
            position: relative;
            z-index: 1;
            max-width: 740px;
            margin: 0 auto;
        }

        .ty-ic {
            font-size: 3.8rem;
            margin-bottom: 1.1rem;
            animation: bi .7s cubic-bezier(.34, 1.56, .64, 1) both;
        }

        @keyframes bi {
            from {
                opacity: 0;
                transform: scale(.2);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .ty-ttl {
            font-weight: 800;
            font-size: clamp(1.8rem, 4.5vw, 3rem);
            letter-spacing: -.03em;
            margin-bottom: .85rem;
            line-height: 1.1;
        }

        .ty-ttl em {
            color: var(--amb);
            font-style: normal;
        }

        .ty-msg {
            font-size: .97rem;
            color: var(--mu);
            line-height: 1.8;
            margin-bottom: 2.3rem;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
        }

        .ns-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            margin-bottom: 2rem;
            text-align: left;
        }

        .ns {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            border-left: 1px solid rgba(255, 255, 255, 0.1);
            border-bottom: 1px solid rgba(0, 0, 0, 0.6);
            border-radius: var(--r);
            padding: 1.4rem;
            box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 12px 30px rgba(0, 0, 0, 0.5);
        }

        .ns-n {
            width: 28px;
            height: 28px;
            border-radius: 7px;
            background: rgba(232, 140, 42, .14);
            border: 1px solid rgba(232, 140, 42, .25);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: .78rem;
            color: var(--amb);
            margin-bottom: .75rem;
        }

        .ns h4 {
            font-weight: 700;
            font-size: .85rem;
            margin-bottom: .28rem;
        }

        .ns p {
            font-size: .78rem;
            color: var(--mu);
            line-height: 1.55;
        }

        .share-box {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            border-left: 1px solid rgba(255, 255, 255, 0.1);
            border-bottom: 1px solid rgba(0, 0, 0, 0.6);
            border-radius: var(--r);
            padding: 1.7rem;
            margin-bottom: 1.8rem;
        }

        .share-box h3 {
            font-weight: 700;
            font-size: .97rem;
            margin-bottom: .35rem;
        }

        .share-box p {
            font-size: .8rem;
            color: var(--mu);
            margin-bottom: 1.1rem;
            line-height: 1.6;
        }

        .share-btns {
            display: flex;
            gap: .6rem;
            flex-wrap: wrap;
            justify-content: center;
        }

        .shbtn {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            padding: .6rem 1.2rem;
            border-radius: 7px;
            font-size: .79rem;
            font-weight: 600;
            cursor: pointer;
            border: none;
            font-family: 'Plus Jakarta Sans', sans-serif;
            transition: all .2s;
        }

        .sh-wa {
            background: #25d366;
            color: #fff;
        }

        .sh-wa:hover {
            background: #1db954;
        }

        .sh-li {
            background: #0a66c2;
            color: #fff;
        }

        .sh-li:hover {
            background: #0851a0;
        }

        .sh-tw {
            background: #1d9bf0;
            color: #fff;
        }

        .sh-tw:hover {
            background: #0d88d8;
        }

        .sh-cp {
            background: var(--card);
            border: 1px solid var(--bdr);
            color: var(--wh2);
        }

        .sh-cp:hover {
            border-color: rgba(255, 255, 255, .25);
        }

        .ty-btns {
            display: flex;
            gap: .9rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        /* ═══ TOAST ═════════════════════════════════════ */
        .toast {
            position: fixed;
            bottom: 1.8rem;
            left: 50%;
            transform: translateX(-50%) translateY(150px);
            z-index: 1000;
            background: var(--surf2);
            border: 1px solid rgba(232, 140, 42, .28);
            border-radius: 12px;
            padding: .85rem 1.4rem;
            font-size: .84rem;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: .7rem;
            transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
            box-shadow: 0 8px 28px rgba(0, 0, 0, .4);
        }

        .toast.show {
            transform: translateX(-50%) translateY(0);
        }

        /* ═══ REVEAL ════════════════════════════════════ */
        .rv {
            opacity: 0;
            transform: translateY(28px);
            transition: opacity .65s ease, transform .65s ease;
        }

        .rv.in {
            opacity: 1;
            transform: translateY(0);
        }

        .d1 {
            transition-delay: .1s;
        }

        .d2 {
            transition-delay: .18s;
        }

        .d3 {
            transition-delay: .26s;
        }

        @media (prefers-reduced-motion: reduce) {

            *,
            *::before,
            *::after {
                animation: none !important;
                transition: none !important;
                scroll-behavior: auto !important;
            }

            .rv {
                opacity: 1;
                transform: none;
            }
        }

        /* ═══ RESPONSIVE ════════════════════════════════ */
        @media(max-width:1024px) {
            .career-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .footer-top {
                grid-template-columns: 1fr 1fr;
            }

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

        @media(max-width:900px) {

            /* Guard against GSAP miscalculating on mobile and hiding elements */
            .rv {
                opacity: 1 !important;
                visibility: visible !important;
                transform: none !important;
            }

            .hero-shell,
            .analyzer-grid {
                grid-template-columns: 1fr;
                gap: 2.2rem;
            }
            .analyzer-card {
                transform: none;
            }

            .hero-copy {
                align-items: center;
                text-align: center;
            }

            .hero-copy .badge {
                align-self: center;
            }

            .hero-btns {
                justify-content: center;
            }

            .hero-visual {
                min-height: 440px;
            }

            .grid2,
            .ai-wrap,
            #mkt .wrap .grid2 {
                grid-template-columns: 1fr;
                gap: 2.8rem;
            }

            .fg3,
            .rgrid {
                grid-template-columns: 1fr 1fr;
            }

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

            .steps {
                grid-template-columns: repeat(3, 1fr);
            }

            .sconn {
                display: none;
            }

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

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

            .mc:first-child {
                grid-column: 1;
            }

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

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

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

            .cd-body {
                grid-template-columns: 1fr;
            }
        }

        @media(max-width:600px) {
            :root {
                --fab-right: 1rem;
                --fab-bottom: 1rem;
                --fab-gap: 3.2rem;
            }

            nav {
                padding: .85rem 4%;
            }

            .nav-ul {
                display: none;
            }

            .hbg {
                display: flex;
            }

            .sec {
                padding: clamp(2.5rem, 6vw, 4.5rem) 4%;
            }

            .fg3,
            .rgrid {
                grid-template-columns: 1fr;
            }

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

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

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

            .hstats {
                border-radius: 0;
            }

            .hero-visual {
                min-height: clamp(300px, 50vw, 360px);
            }

            .scene-card,
            .analyzer-card {
                transform: none;
            }

            .hs {
                padding: 1.1rem 1.8rem;
                flex: 1 1 40%;
            }

            footer {
                padding: 2.5rem 4% 1.5rem;
            }

            .footer-top {
                grid-template-columns: 1fr;
            }

            .ft-bottom {
                flex-direction: column;
                text-align: center;
            }

            .mod {
                padding: 1.7rem 1.3rem;
            }

            .ty-btns {
                flex-direction: column;
                align-items: center;
            }

            .chat-panel {
                width: calc(100vw - 2rem);
                right: 1rem;
            }

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

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

            #urlist {
                grid-template-columns: 1fr;
            }

            .share-btns {
                gap: .4rem;
            }

            /* Disable heavy animations on mobile */
            body::after {
                filter: blur(32px) saturate(150%);
            }

            .scene-orb {
                animation: none;
            }

            .scene-ring {
                animation: none !important;
            }

            /* Reduce shadow intensity on mobile */
            .scene-card {
                box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
            }

            .auth-shell {
                grid-template-columns: 1fr;
                gap: 1rem;
                margin: auto 0;
            }

            .auth-page {
                align-items: flex-start;
                padding: 2rem 1rem;
            }

            .auth-hero .auth-points {
                display: none; /* Hide points on mobile to save vertical space for keyboard */
            }

            .auth-hero,
            .auth-card {
                border-radius: 18px;
            }
        }

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

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

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

            /* Extra-small device optimizations */
            .ttl {
                font-size: clamp(1.4rem, 4vw, 1.8rem);
            }

            .btn-amb,
            .btn-out,
            .btn-blue {
                padding: .65rem 1.4rem;
                font-size: .82rem;
            }

            .hero-btns {
                flex-direction: column;
                gap: 1rem;
            }

            .hero-btns .btn {
                width: 100%;
            }

            .auth-shell {
                padding: 0 1rem;
            }

            .nav-pill {
                padding: .4rem 1rem;
                font-size: .75rem;
            }
        }

        /* ═══ EXTRA-SMALL DEVICES (< 320px) ═════════════ */
        @media(max-width:320px) {
            :root {
                --fab-right: 0.75rem;
                --fab-bottom: 0.75rem;
                --fab-gap: 2.8rem;
            }

            html {
                font-size: 14px;
            }

            nav {
                padding: .7rem 3%;
            }

            .ttl {
                font-size: 1.2rem;
            }

            .desc {
                font-size: .85rem;
            }

            .btn-amb,
            .btn-out,
            .btn-blue {
                padding: .55rem 1.1rem;
                font-size: .75rem;
            }
        }

        /* ═══ AI MODE SELECTOR ══════════════════════════════════════ */
        .ai-modes {
            display: flex;
            gap: .38rem;
            padding: .6rem 1rem;
            background: rgba(0, 0, 0, .15);
            border-bottom: 1px solid var(--bdr);
            flex-wrap: wrap;
        }

        .ai-mode-btn {
            font-size: .66rem;
            font-weight: 700;
            padding: .28rem .65rem;
            border-radius: 5px;
            background: rgba(255, 255, 255, .05);
            border: 1px solid var(--bdr);
            color: var(--mu);
            cursor: pointer;
            transition: all .2s;
            letter-spacing: .02em;
            font-family: 'Plus Jakarta Sans', sans-serif;
        }

        .ai-mode-btn:hover {
            border-color: var(--amb);
            color: var(--amb2);
        }

        .ai-mode-btn.active {
            background: var(--amb);
            border-color: var(--amb);
            color: var(--bg);
        }

        .tone-toggle {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: .35rem;
            font-size: .64rem;
            color: var(--mu);
        }

        .tone-sw {
            width: 30px;
            height: 16px;
            background: rgba(255, 255, 255, .1);
            border-radius: 8px;
            position: relative;
            cursor: pointer;
            border: 1px solid var(--bdr);
            transition: background .2s;
        }

        .tone-sw.on {
            background: var(--blue);
        }

        .tone-sw::after {
            content: '';
            position: absolute;
            width: 10px;
            height: 10px;
            background: #fff;
            border-radius: 50%;
            top: 2px;
            left: 2px;
            transition: transform .2s;
        }

        .tone-sw.on::after {
            transform: translateX(14px);
        }

        /* ═══ PREDICTION SCORE CARD ═════════════════════════════════ */
        .pred-card {
            background: rgba(232, 140, 42, .06);
            border: 1px solid rgba(232, 140, 42, .2);
            border-radius: 12px;
            padding: 1.1rem 1.3rem;
            margin-bottom: 1.2rem;
            display: flex;
            align-items: center;
            gap: 1.1rem;
        }

        .pred-ring {
            position: relative;
            width: 72px;
            height: 72px;
            flex-shrink: 0;
        }

        .pred-ring svg {
            transform: rotate(-90deg);
        }

        .pred-ring circle {
            fill: none;
            stroke-width: 5;
            stroke-linecap: round;
        }

        .pred-ring .bg-c {
            stroke: rgba(255, 255, 255, .07);
        }

        .pred-ring .fg-c {
            stroke: var(--amb);
            transition: stroke-dashoffset 1s ease;
        }

        .pred-pct {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: .95rem;
            color: var(--amb);
        }

        .pred-info h4 {
            font-weight: 700;
            font-size: .88rem;
            margin-bottom: .2rem;
        }

        .pred-info p {
            font-size: .76rem;
            color: var(--mu);
            line-height: 1.5;
        }

        .pred-badges {
            display: flex;
            gap: .35rem;
            flex-wrap: wrap;
            margin-top: .4rem;
        }

        .pred-badge {
            font-size: .65rem;
            font-weight: 600;
            padding: .18rem .55rem;
            border-radius: 4px;
        }

        .pred-badge.high {
            background: rgba(34, 197, 94, .12);
            border: 1px solid rgba(34, 197, 94, .25);
            color: #4ade80;
        }

        .pred-badge.mid {
            background: rgba(232, 140, 42, .12);
            border: 1px solid rgba(232, 140, 42, .25);
            color: var(--amb2);
        }

        .pred-badge.low {
            background: rgba(239, 68, 68, .1);
            border: 1px solid rgba(239, 68, 68, .2);
            color: #fca5a5;
        }

        /* ═══ AI SUGGESTIONS PANEL ══════════════════════════════════ */
        .ai-sug-panel {
            background: rgba(42, 125, 225, .05);
            border: 1px solid rgba(42, 125, 225, .18);
            border-radius: 12px;
            padding: 1.1rem 1.3rem;
            margin-top: .9rem;
        }

        .ai-sug-panel h4 {
            font-size: .82rem;
            font-weight: 700;
            color: var(--blue2);
            margin-bottom: .7rem;
            display: flex;
            align-items: center;
            gap: .4rem;
        }

        .sug-items {
            display: flex;
            flex-direction: column;
            gap: .42rem;
        }

        .sug-item {
            display: flex;
            align-items: flex-start;
            gap: .55rem;
            font-size: .78rem;
            color: var(--mu);
            line-height: 1.45;
        }

        .sug-item::before {
            content: '→';
            color: var(--blue2);
            font-weight: 700;
            flex-shrink: 0;
            margin-top: .05rem;
        }

        /* ═══ DOWNLOAD REPORT BUTTON ════════════════════════════════ */
        .dl-report-btn {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            background: linear-gradient(135deg, var(--blue), var(--blue2));
            color: #fff;
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-weight: 700;
            font-size: .82rem;
            padding: .62rem 1.3rem;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            transition: all .2s;
            letter-spacing: .01em;
        }

        .dl-report-btn:hover {
            box-shadow: 0 5px 18px rgba(42, 125, 225, .45);
            transform: translateY(-1px);
        }

        .dl-report-btn:disabled {
            opacity: .6;
            cursor: not-allowed;
        }

        .dl-report-btn .spin {
            display: none;
            width: 12px;
            height: 12px;
            border: 2px solid rgba(255, 255, 255, .3);
            border-top-color: #fff;
            border-radius: 50%;
            animation: sp .6s linear infinite;
        }

        .dl-report-btn.loading .spin {
            display: inline-block;
        }

        .dl-report-btn.loading .dl-icon {
            display: none;
        }

        @keyframes sp {
            to {
                transform: rotate(360deg);
            }
        }

        /* ═══ ENHANCED REVIEW FORM ══════════════════════════════════ */
        .rev-extra {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: .9rem;
            margin-top: .9rem;
        }

        .rev-extra .full {
            grid-column: 1/-1;
        }

        .wa-opt {
            display: flex;
            align-items: flex-start;
            gap: .75rem;
            padding: .9rem 1rem;
            background: rgba(37, 211, 102, .06);
            border: 1px solid rgba(37, 211, 102, .18);
            border-radius: 10px;
            margin-top: .1rem;
        }

        .wa-opt input[type=checkbox] {
            width: 17px;
            height: 17px;
            accent-color: #25d366;
            cursor: pointer;
            flex-shrink: 0;
            margin-top: .1rem;
        }

        .wa-opt label {
            font-size: .8rem;
            color: var(--mu);
            line-height: 1.5;
            cursor: pointer;
        }

        .wa-opt label strong {
            color: var(--wh2);
        }

        .contact-note {
            font-size: .72rem;
            color: var(--mu);
            margin-top: .2rem;
            font-style: italic;
        }

        #rr-other-wrap {
            display: none;
            margin-top: .5rem;
        }

        /* ═══ SESSION RESTORE BANNER ════════════════════════════════ */
        .restore-banner {
            display: none;
            background: rgba(42, 125, 225, .08);
            border: 1px solid rgba(42, 125, 225, .22);
            border-radius: 10px;
            padding: .8rem 1.2rem;
            margin-bottom: 1.5rem;
            align-items: center;
            justify-content: space-between;
            gap: .8rem;
            font-size: .82rem;
            color: var(--wh2);
        }

        .restore-banner.show {
            display: flex;
        }

        .restore-banner strong {
            color: var(--blue2);
        }

        .restore-btn {
            background: var(--blue);
            color: #fff;
            border: none;
            border-radius: 6px;
            padding: .38rem .9rem;
            font-size: .75rem;
            font-weight: 700;
            cursor: pointer;
            font-family: 'Plus Jakarta Sans', sans-serif;
        }

        .restore-dismiss {
            background: none;
            border: none;
            color: var(--mu);
            cursor: pointer;
            font-size: 1rem;
            padding: .2rem;
        }

        /* ═══ OVERALL PROGRESS BAR (Dashboard top) ══════════════════ */
        .dash-overall {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            padding: 1.1rem 1.4rem;
            background: var(--card);
            border: 1px solid var(--bdr);
            border-radius: 12px;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .dash-ov-stat {
            text-align: center;
        }

        .dash-ov-n {
            font-weight: 800;
            font-size: 1.4rem;
            color: var(--amb);
        }

        .dash-ov-l {
            font-size: .68rem;
            color: var(--mu);
            text-transform: uppercase;
            letter-spacing: .05em;
        }

        .dash-ov-bar {
            flex: 1;
            min-width: 160px;
        }

        .dash-ov-bar label {
            font-size: .72rem;
            font-weight: 600;
            color: var(--mu);
            display: flex;
            justify-content: space-between;
            margin-bottom: .4rem;
        }

        .ov-bar-track {
            height: 6px;
            background: rgba(255, 255, 255, .07);
            border-radius: 4px;
            overflow: hidden;
        }

        .ov-bar-fill {
            height: 100%;
            border-radius: 4px;
            background: linear-gradient(90deg, var(--amb), var(--green));
            transition: width .8s ease;
        }

        @media(max-width:600px) {
            .rev-extra {
                grid-template-columns: 1fr;
            }

            .rev-extra .full {
                grid-column: 1;
            }

            .ai-modes {
                gap: .3rem;
            }

            .pred-card {
                flex-direction: column;
                text-align: center;
            }
        }


        /* ═══ REVIEW VALIDATION ═════════════════════════════════════ */
        .fi-error {
            border-color: #ef4444 !important;
            box-shadow: 0 0 0 3px rgba(239, 68, 68, .14) !important;
            animation: shake .35s ease;
        }

        @keyframes shake {

            0%,
            100% {
                transform: translateX(0);
            }

            25% {
                transform: translateX(-5px);
            }

            75% {
                transform: translateX(5px);
            }
        }

        .fi-error-lbl {
            font-size: .71rem;
            color: #f87171;
            margin-top: .2rem;
            display: none;
        }

        .fi-error-lbl.show {
            display: block;
        }

        .contact-required-note {
            font-size: .72rem;
            color: #f87171;
            font-weight: 600;
            background: rgba(239, 68, 68, .07);
            border: 1px solid rgba(239, 68, 68, .2);
            border-radius: 7px;
            padding: .5rem .8rem;
            display: none;
            margin-top: .5rem;
        }

        .contact-required-note.show {
            display: flex;
            align-items: center;
            gap: .4rem;
        }

        /* ═══ WHATSAPP REDIRECT OVERLAY ══════════════════════════════ */
        .wa-redirect-ov {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 1100;
            background: rgba(4, 9, 17, .9);
            backdrop-filter: blur(14px);
            align-items: center;
            justify-content: center;
        }

        .wa-redirect-ov.show {
            display: flex;
        }

        .wa-redirect-box {
            background: var(--surf);
            border: 1px solid rgba(37, 211, 102, .3);
            border-radius: 20px;
            padding: 2.5rem 2rem;
            text-align: center;
            max-width: 360px;
            width: 90%;
            animation: mi .4s cubic-bezier(.34, 1.56, .64, 1) both;
        }

        .wa-icon {
            font-size: 3.2rem;
            margin-bottom: .8rem;
        }

        .wa-redirect-box h3 {
            font-weight: 800;
            font-size: 1.2rem;
            margin-bottom: .5rem;
            color: var(--wh);
        }

        .wa-redirect-box p {
            font-size: .86rem;
            color: var(--mu);
            line-height: 1.65;
            margin-bottom: 1.5rem;
        }

        .wa-join-btn {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            background: #25d366;
            color: #fff;
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-weight: 700;
            font-size: .95rem;
            padding: .82rem 2rem;
            border-radius: 10px;
            border: none;
            cursor: pointer;
            text-decoration: none;
            transition: all .2s;
        }

        .wa-join-btn:hover {
            background: #1db954;
            box-shadow: 0 5px 18px rgba(37, 211, 102, .45);
        }

        .wa-skip-btn {
            display: block;
            margin-top: .9rem;
            background: none;
            border: none;
            color: var(--mu);
            font-size: .78rem;
            cursor: pointer;
            font-family: 'Plus Jakarta Sans', sans-serif;
            transition: color .2s;
        }

        .wa-skip-btn:hover {
            color: var(--wh);
        }

        .wa-countdown {
            font-size: .72rem;
            color: var(--mu);
            margin-top: .6rem;
        }

        /* ═══ STUDENT DASHBOARD ═══════════════════════════════════ */
        .student-onboard-ov {
            position: fixed;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
            background: rgba(5, 11, 20, .78);
            backdrop-filter: blur(8px);
            z-index: 999;
        }

        .student-onboard-ov.show {
            display: flex;
        }

        .student-onboard-box {
            width: 100%;
            max-width: 520px;
            padding: 2rem;
            border-radius: 18px;
            background: linear-gradient(180deg, rgba(12, 26, 46, .98), rgba(8, 17, 30, .98));
            border: 1px solid var(--bdr);
            box-shadow: 0 30px 90px rgba(0, 0, 0, .5);
            text-align: center;
        }

        .student-onboard-box h3 {
            font-size: 1.5rem;
            margin-bottom: .5rem;
        }

        .student-onboard-box p {
            color: var(--wh2);
            margin-bottom: 1.5rem;
        }

        .student-onboard-actions {
            display: grid;
            gap: .8rem;
        }

        .so-btn {
            padding: .9rem 1.2rem;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, .12);
            background: rgba(42, 125, 225, .16);
            color: var(--wh);
            font-weight: 700;
            cursor: pointer;
            transition: transform .2s, box-shadow .2s, background .2s;
        }

        .so-btn.alt {
            background: rgba(232, 140, 42, .18);
        }

        .so-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
        }

        .so-note {
            font-size: .78rem;
            color: var(--mu);
            margin-top: 1rem;
        }

        .dashboard-shell {
            margin-top: 2rem;
            padding: 1.4rem;
            border-radius: 22px;
            background: #0b1526;
            border: 1px solid rgba(255, 255, 255, .1);
            box-shadow: 0 16px 40px rgba(0, 0, 0, .4);
            position: relative;
            overflow: hidden;
        }

        .dashboard-shell::before {
            content: '';
            position: absolute;
            inset: -30% -20% -20% -20%;
            background: radial-gradient(420px circle at 50% 30%, rgba(30, 64, 175, .16), transparent 60%);
            opacity: .12;
            pointer-events: none;
            z-index: 0;
        }

        .dashboard-shell>* {
            position: relative;
            z-index: 1;
        }

        .dash-toggle {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .8rem;
            padding: .85rem 1.2rem;
            border-radius: 14px;
            border: 1px solid rgba(59, 130, 246, .35);
            background: rgba(30, 64, 175, .2);
            color: var(--wh);
            font-weight: 700;
            font-family: 'Plus Jakarta Sans', sans-serif;
            cursor: pointer;
            transition: transform .2s, box-shadow .2s, background .2s;
        }

        .dash-toggle:hover {
            transform: translateY(-2px);
            background: rgba(30, 64, 175, .28);
            box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
        }

        .dash-toggle-icon {
            font-size: 1.2rem;
            transition: transform .3s ease;
        }

        .dash-toggle.open .dash-toggle-icon {
            transform: rotate(180deg);
        }

        .dash-hint {
            font-size: .78rem;
            color: rgba(194, 208, 224, .9);
            margin: .65rem 0 .2rem;
            text-align: center;
        }

        .dashboard-panel {
            margin-top: 1rem;
            max-height: 0;
            opacity: 0;
            transform: translateY(-6px);
            transition: max-height .6s ease, opacity .3s ease, transform .3s ease;
            overflow: hidden;
            visibility: hidden;
            pointer-events: none;
        }

        .dashboard-panel.open {
            max-height: 6000px;
            opacity: 1;
            transform: translateY(0);
            visibility: visible;
            pointer-events: auto;
        }

        .student-switch {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            align-items: center;
            justify-content: space-between;
            margin-top: 2rem;
        }

        .seg-group {
            display: flex;
            gap: .6rem;
            flex-wrap: wrap;
        }

        .seg-btn {
            padding: .6rem 1.1rem;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, .18);
            background: rgba(255, 255, 255, .06);
            color: var(--wh);
            cursor: pointer;
            font-weight: 600;
            transition: all .2s;
        }

        .seg-btn.active {
            background: rgba(30, 64, 175, .35);
            border-color: rgba(59, 130, 246, .6);
            color: var(--wh);
            box-shadow: 0 10px 24px rgba(59, 130, 246, .2);
        }

        .profile-cards {
            display: flex;
            gap: .6rem;
            flex-wrap: wrap;
            align-items: center;
        }

        .profile-card {
            padding: .6rem .9rem;
            border-radius: 12px;
            background: rgba(255, 255, 255, .06);
            border: 1px solid rgba(255, 255, 255, .14);
            min-width: 150px;
        }

        .profile-card .meta-label {
            font-size: .7rem;
            color: var(--mu);
            text-transform: uppercase;
            letter-spacing: .08em;
        }

        .profile-card strong {
            display: block;
            margin-top: .25rem;
        }

        .profile-reset {
            border: none;
            background: rgba(59, 130, 246, .28);
            color: var(--wh);
            padding: .55rem 1rem;
            border-radius: 10px;
            cursor: pointer;
            font-weight: 600;
        }

        .student-controls {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-top: 1.5rem;
        }

        .control-card {
            background: rgba(255, 255, 255, .05);
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: 16px;
            padding: 1.4rem;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            height: 100%;
        }

        .control-card label {
            display: block;
            font-weight: 600;
            margin-bottom: .6rem;
        }

        .class-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 0.6rem;
            margin-top: auto;
        }

        .class-chip {
            padding: .45rem 0;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, .12);
            background: rgba(255, 255, 255, .06);
            color: var(--wh);
            cursor: pointer;
            font-weight: 600;
            transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
        }

        .class-chip:hover {
            background: rgba(59, 130, 246, .18);
            border-color: rgba(59, 130, 246, .4);
            transform: translateY(-1px);
        }

        .class-chip.active {
            background: rgba(30, 64, 175, .4);
            border-color: rgba(59, 130, 246, .6);
        }

        .focus-box {
            background: rgba(30, 64, 175, .12);
            border: 1px dashed rgba(59, 130, 246, .35);
            border-radius: 12px;
            padding: 1.2rem;
            color: var(--wh2);
            font-size: .95rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        #student-dashboard[data-student="school"] .only-university {
            display: none;
        }

        #student-dashboard[data-student="university"] .only-school {
            display: none;
        }

        .tool-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.6rem;
            margin-top: 2.2rem;
            align-items: stretch;
            grid-auto-flow: row dense;
        }

        .tool-section-title {
            grid-column: 1 / -1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: .85rem 1.1rem;
            border-radius: 14px;
            background: rgba(30, 64, 175, .18);
            border: 1px solid rgba(59, 130, 246, .25);
            font-weight: 800;
            font-size: .98rem;
            letter-spacing: .02em;
            color: var(--wh);
        }

        .tool-section-title small {
            font-weight: 600;
            font-size: .78rem;
            color: rgba(194, 208, 224, .85);
        }

        .tool-card {
            background: rgba(255, 255, 255, .04);
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: 18px;
            padding: 1.2rem;
            display: flex;
            flex-direction: column;
            gap: .8rem;
            min-height: 240px;
            height: 100%;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
            transition: transform .3s, box-shadow .3s, border-color .3s;
        }

        .tool-card::before {
            content: '';
            position: absolute;
            inset: -40%;
            background: none;
            opacity: 0;
            animation: driftGlow 16s ease-in-out infinite;
            pointer-events: none;
            z-index: 0;
        }

        .tool-card>* {
            position: relative;
            z-index: 1;
        }

        .tool-card:hover {
            border-color: rgba(59, 130, 246, .45);
            transform: translateY(-4px);
            box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
        }

        .tool-card.wide {
            grid-column: 1 / -1;
        }

        .tool-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: .7rem;
        }

        .tool-head h3 {
            font-size: 1.1rem;
        }

        .tool-tag {
            font-size: .7rem;
            text-transform: uppercase;
            letter-spacing: .12em;
            padding: .25rem .5rem;
            border-radius: 999px;
            background: rgba(59, 130, 246, .18);
            color: #bfdbfe;
            border: 1px solid rgba(59, 130, 246, .35);
        }

        .tool-desc {
            color: var(--wh2);
            font-size: .85rem;
            margin-top: .3rem;
        }

        .tool-input-row {
            display: flex;
            gap: .6rem;
            align-items: center;
            flex-wrap: wrap;
        }

        .tool-input-row .fi {
            flex: 1;
            min-width: 160px;
        }

        .tool-btn {
            padding: .55rem 1rem;
            border-radius: 10px;
            border: 1px solid rgba(59, 130, 246, .5);
            background: rgba(30, 64, 175, .6);
            color: var(--wh);
            font-weight: 700;
            cursor: pointer;
            transition: transform .2s, box-shadow .2s, background .2s;
        }

        .tool-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 18px rgba(0, 0, 0, .3);
            background: rgba(30, 64, 175, .72);
        }

        .tool-btn.alt {
            border-color: rgba(234, 179, 8, .6);
            background: rgba(180, 83, 9, .6);
        }

        .tool-link {
            background: none;
            border: none;
            color: #93c5fd;
            font-size: .8rem;
            cursor: pointer;
            text-align: left;
            padding: 0;
        }

        .tool-highlight {
            padding: .75rem .9rem;
            border-radius: 12px;
            background: rgba(34, 197, 94, .18);
            border: 1px solid rgba(34, 197, 94, .45);
            color: #d1fae5;
            font-weight: 600;
            min-height: 44px;
            display: flex;
            align-items: center;
        }

        .summary-grid {
            display: grid;
            gap: .55rem;
        }

        .summary-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: var(--wh2);
            font-size: .85rem;
        }

        .summary-row strong {
            color: var(--wh);
        }

        .countdown-badge {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            padding: .18rem .6rem;
            border-radius: 999px;
            background: rgba(232, 140, 42, .15);
            border: 1px solid rgba(232, 140, 42, .4);
            color: var(--amb2);
            font-size: .72rem;
            font-weight: 700;
        }

        .mini-bar {
            height: 6px;
            background: rgba(255, 255, 255, .08);
            border-radius: 999px;
            overflow: hidden;
        }

        .mini-bar span {
            display: block;
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, rgba(42, 125, 225, .7), rgba(55, 215, 255, .9));
        }

        .tracker-bar {
            height: 6px;
            background: rgba(255, 255, 255, .08);
            border-radius: 999px;
            overflow: hidden;
        }

        .tracker-bar span {
            display: block;
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, rgba(232, 140, 42, .7), rgba(245, 169, 78, .95));
        }

        .tool-note {
            font-size: .78rem;
            color: var(--mu);
        }

        .grade-trend {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: .35rem;
            align-items: end;
            height: 70px;
            margin-top: .6rem;
            margin-bottom: .4rem;
        }

        .grade-bar {
            height: 12px;
            border-radius: 8px;
            background: rgba(255, 255, 255, .08);
            overflow: hidden;
        }

        .grade-bar span {
            display: block;
            height: 100%;
            width: 0%;
            background: linear-gradient(180deg, rgba(52, 211, 153, .85), rgba(16, 185, 129, .95));
        }

        .grade-labels {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: .35rem;
            font-size: .65rem;
            color: var(--mu);
            text-align: center;
        }

        .tool-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: .5rem;
        }

        .tool-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .6rem;
            padding: .55rem .7rem;
            border-radius: 10px;
            background: rgba(255, 255, 255, .03);
            border: 1px solid rgba(255, 255, 255, .08);
        }

        .tool-item span {
            flex: 1;
            color: var(--wh2);
        }

        .tool-mini {
            border: none;
            background: rgba(55, 215, 255, .15);
            color: var(--wh);
            padding: .35rem .6rem;
            border-radius: 8px;
            cursor: pointer;
            font-size: .75rem;
        }

        .tool-mini.warn {
            background: rgba(239, 68, 68, .18);
            color: #fecaca;
        }

        .tool-empty {
            color: var(--mu);
            font-size: .82rem;
            padding: .4rem 0;
        }

        .accuracy-wrap {
            display: flex;
            flex-direction: column;
            gap: .6rem;
        }

        .accuracy-pct {
            font-size: 2rem;
            font-weight: 800;
            color: #34d399;
        }

        .accuracy-bar {
            height: 8px;
            background: rgba(255, 255, 255, .08);
            border-radius: 999px;
            overflow: hidden;
        }

        .accuracy-bar span {
            display: block;
            height: 100%;
            background: linear-gradient(90deg, rgba(52, 211, 153, .6), rgba(34, 197, 94, .9));
            width: 0%;
        }

        .accuracy-note {
            font-size: .8rem;
            color: var(--mu);
        }

        .session-form {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: .6rem;
        }

        .session-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: .5rem;
        }

        .session-row {
            padding: .6rem .8rem;
            border-radius: 12px;
            background: rgba(255, 255, 255, .03);
            border: 1px solid rgba(255, 255, 255, .08);
            display: flex;
            justify-content: space-between;
            gap: .6rem;
        }

        .session-meta {
            color: var(--wh2);
            font-size: .82rem;
        }

        .session-meta strong {
            color: var(--wh);
        }

        @media (max-width: 980px) {
            .student-controls {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

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

        @media (max-width: 680px) {
            .student-switch {
                flex-direction: column;
                align-items: flex-start;
            }

            .student-controls {
                grid-template-columns: 1fr;
            }

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

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

            .feature-detail {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .fd-icon {
                margin: 0 auto;
            }

            .session-form {
                grid-template-columns: 1fr;
            }
        }

/* Enhanced Dashboard Modal Styles */
.tool-badge { background: rgba(91,163,245,0.1); color: #5ba3f5; padding: 0.3rem 0.6rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; border: 1px solid rgba(91,163,245,0.2); }
.comp-badge { background: rgba(34,197,94,0.1); color: #4ade80; padding: 0.3rem 0.6rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; border: 1px solid rgba(34,197,94,0.2); }
.cert-item { background: rgba(232,140,42,0.1); color: #e88c2a; padding: 0.5rem 0.8rem; border-radius: 8px; font-size: 0.8rem; font-weight: 500; border: 1px solid rgba(232,140,42,0.2); }
.traj-container { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.5rem; position: relative; padding-left: 1rem; border-left: 2px dashed rgba(194,208,224,0.2); }
.traj-step { position: relative; }
.traj-step::before { content: ''; position: absolute; left: -1.35rem; top: 0.3rem; width: 10px; height: 10px; background: var(--amb); border-radius: 50%; border: 2px solid var(--b2); }
.traj-lvl { font-size: 0.7rem; font-weight: 700; color: var(--amb); text-transform: uppercase; letter-spacing: 0.5px; }
.traj-role { font-size: 0.9rem; color: var(--fg); font-weight: 600; margin-top: 0.1rem; }
.traj-sal { font-size: 0.8rem; color: var(--mu); margin-top: 0.1rem; }