:root {
            --primary:#0ebc00;
            --primary-dark: #0ebc00;
            --primary-light: #d1fae5;
            --secondary: #0f172a;
            --accent: #34d399;
            --gray-50: #f8fafc;
            --gray-100: #f1f5f9;
            --gray-200: #e2e8f0;
            --gray-600: #475569;
            --gray-800: #1e293b;
                --ink:#0B1220;
    --ink-soft:#4B5768;
    --paper:#FAFAF8;
    --paper-dim:#F1F1EC;
    --mint:#2FBF8F;
    --mint-deep:#149C71;
    --mint-soft:#DFF6EC;
    --coral:#EF4B4B;
    --line:#E4E3DC;
    --white:#FFFFFF;
    --shadow: 0 1px 2px rgba(11,18,32,0.04), 0 12px 32px -12px rgba(11,18,32,0.14);
        --bg: #F3F5FA;
    --surface: #FFFFFF;
    --ink: #12141C;
    --ink-soft: #62667A;
    --line: #E4E7F0;
    --indigo: #4A3FE0;
    --indigo-soft: #EEECFD;
    --coral: #FF6A4D;
    --mint-bg:#DDF6E8; --mint-fg:#0E9F5C;
    --sky-bg:#E0EBFE;  --sky-fg:#2F63E8;
    --violet-bg:#EBE6FE; --violet-fg:#7A4FE0;
    --amber-bg:#FDEFD9; --amber-fg:#D9820D;
    --radius: 20px;
        --ivq-bg:#1B1E22;
    --ivq-paper:#22262B;
    --ivq-card-border:rgba(255,255,255,.09);
    --ivq-ink:#F3F5F6;
    --ivq-ink-70:rgba(243,245,246,.72);
    --ivq-ink-45:rgba(243,245,246,.48);
    --ivq-ink-25:rgba(243,245,246,.28);
    --ivq-ink-10:rgba(243,245,246,.10);
    --ivq-line:rgba(255,255,255,.09);
    --ivq-accent:#20D9BC;
    --ivq-accent-dark:#12A594;
    --ivq-accent-soft:rgba(32,217,188,.15);
    --ivq-accent-soft-2:rgba(32,217,188,.10);
    --ivq-violet:#9C8CFF;
    --ivq-violet-soft:rgba(156,140,255,.15);
    --ivq-amber:#F0A94E;
    --ivq-amber-soft:rgba(240,169,78,.15);
    --ivq-shadow-card: 0 1px 0 rgba(255,255,255,.05) inset, 0 20px 46px -18px rgba(0,0,0,.45);
    --ivq-shadow-card-hover: 0 1px 0 rgba(255,255,255,.07) inset, 0 32px 60px -20px rgba(0,0,0,.5);
    --ivq-radius-panel: 26px;
        }
 
   
        /* ===== HERO SECTION ===== */
        .hero-section {
   
       
            overflow: hidden;
            
        }

        .hero-bg-shape {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0.5;
            animation: float-shape 8s ease-in-out infinite;
        }


        @keyframes float-shape {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33% { transform: translate(30px, -30px) scale(1.1); }
            66% { transform: translate(-20px, 20px) scale(0.9); }
        }
 
        @keyframes gradient-shift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
 
        .hero-stats {
            display: flex;
            gap: 2.5rem;
            margin-top: 3rem;
        }

        .hero-stat h3 {
            font-size: 2rem;
            font-weight: 800;
            color: var(--primary);
            margin-bottom: 0.2rem;
        }

        .hero-stat p {
            font-size: 0.9rem;
            color: var(--gray-600);
            margin: 0;
        }

        /* Animated Hero Illustration */
        .hero-illustration {
            position: relative;
            width: 100%;
            height: 380px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .floating-card {
            position: absolute;
            background: white;
            border-radius: 16px;
            padding: 1rem 1.5rem;
            box-shadow: 0 10px 40px rgba(0,0,0,0.08);
            display: flex;
            align-items: center;
            gap: 0.8rem;
            animation: float-card 4s ease-in-out infinite;
        }

        .floating-card.card-1 { top: 10%; left: 5%; animation-delay: 0s; }
        .floating-card.card-2 { top: 30%; right: 0%; animation-delay: 1s; }
        .floating-card.card-3 { bottom: 8%; left: 7%; animation-delay: 2s; }
        .floating-card.card-4 { bottom: 5%; right: 7%; animation-delay: 1.5s; }

        @keyframes float-card {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-15px) rotate(2deg); }
        }

        .card-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
        }

        .card-icon.green { background: var(--primary-light); color: var(--primary); }
        .card-icon.blue { background: #dbeafe; color: #3b82f6; }
        .card-icon.purple { background: #f3e8ff; color: #9333ea; }
        .card-icon.orange { background: #ffedd5; color: #f97316; }

        .card-text { font-weight: 600; font-size: 0.9rem; color: var(--gray-800); }
        .card-sub { font-size: 0.75rem; color: var(--gray-600); }

        .central-bot {
            width: 200px;
            height: 200px;
            background: linear-gradient(135deg, #0fb300, var(--accent));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 20px 60px rgba(16, 185, 129, 0.3);
            position: relative;
            animation: bot-pulse 3s ease-in-out infinite;
        }

        @keyframes bot-pulse {
            0%, 100% { transform: scale(1); box-shadow: 0 20px 60px rgba(16, 185, 129, 0.3); }
            50% { transform: scale(1.05); box-shadow: 0 30px 80px rgba(16, 185, 129, 0.4); }
        }

        .central-bot i { font-size: 5rem; color: white; }

        .orbit-ring {
            position: absolute;
         position: absolute;
    border: 2px dashed #15ff00;
    border-radius: 50%;
    opacity: 0.7;
            animation: orbit-spin 20s linear infinite;
        }

        .orbit-1 { width: 320px; height: 320px; }
        .orbit-2 { width: 380px; height: 380px; animation-direction: reverse; animation-duration: 25s; }

        @keyframes orbit-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .orbit-dot {
          position: absolute;
    width: 12px;
    height: 12px;
    background: #15ff00;
    border-radius: 50%;
    box-shadow: 0 0 10px #15ff00;
        }

        /* ===== GENERATOR SECTION ===== */
    .skills-input-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 6px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    background: #fff;
    cursor: text;
    position: relative;
}

.skills-input-wrap input {
    flex: 1;
    border: none;
    outline: none;
    min-width: 180px;
    padding: 5px;
    font-size: 14px;
    font-family: Inter;
}

.skill-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #11d000;
    color: #fff;
    padding: 6px 10px;
    border-radius: 30px;
    font-size: 13px;
}
.btn-generate{background:linear-gradient(135deg, #11d000, #0eb800);color:white;border:none;padding:16px 32px;border-radius:var(--rm);font-size:1rem;font-weight:700;width:100%;box-shadow:0 4px 16px rgba(17,208,0,0.3);transition:all 0.3s;position:relative;overflow:hidden}
.btn-generate:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(17,208,0,0.4)}
.btn-generate:active{transform:translateY(0)}
.btn-generate i{margin-right:8px}
.btn-generate .btn-shine{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left 0.5s}
.btn-generate:hover .btn-shine{left:100%}
    #previewBody {
    padding: 0px 15px;
    max-height: 560px;
    overflow-y: auto;
    text-align: justify;
}.preview-header {
    padding: 38px 20px;
 
}
 
        .generator-card {
            background: white;
            border-radius: 24px;
            padding: 1.5rem;
            box-shadow: 0 4px 30px rgba(0,0,0,0.05);
            border: 1px solid var(--gray-200);
            height: 100%;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .generator-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.08);
        }

        .form-label {
            font-weight: 600;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--gray-600);
            margin-bottom: 0.6rem;
        }

        .form-control, .form-select {
            border: 2px solid var(--gray-200);
            border-radius: 12px;
            padding: 0.8rem 1rem;
            font-size: 0.95rem;
            transition: all 0.3s;
        }

        .form-control:focus, .form-select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px var(--primary-light);
        }

        .exp-btn {
            border: 2px solid var(--gray-200);
            background: white;
            border-radius: 12px;
            padding: 0.8rem 0.5rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            width: 100%;
        }

        .exp-btn:hover {
            border-color: var(--primary);
            background: var(--primary-light);
        }

        .exp-btn.active {
            border-color: var(--primary);
            background: var(--primary);
            color: white;
        }

        .exp-btn i { font-size: 1.3rem; display: block; margin-bottom: 0.3rem; }
        .exp-btn span { font-size: 0.8rem; font-weight: 600; }

        .type-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.5rem 1rem;
            border: 2px solid var(--gray-200);
            border-radius: 50px;
            font-size: 0.85rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            margin: 0.3rem;
            background: white;
        }

        .type-chip:hover { border-color: var(--primary); color: var(--primary); }
        .type-chip.active { background: var(--primary); border-color: var(--primary); color: white; }

        .difficulty-btn {
            border: 2px solid var(--gray-200);
            background: white;
            border-radius: 12px;
            padding: 0.6rem 2rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            width: 100%;
        }

        .difficulty-btn:hover { border-color: var(--primary); }
        .difficulty-btn.active { background: var(--primary); border-color: var(--primary); color: white; }

        .custom-range {
            -webkit-appearance: none;
            width: 100%;
            height: 8px;
            border-radius: 5px;
            background: var(--gray-200);
            outline: none;
        }

        .custom-range::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--primary);
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4);
            transition: transform 0.2s;
        }

        .custom-range::-webkit-slider-thumb:hover { transform: scale(1.2); }

        .range-value {
            background: var(--primary);
            color: white;
            padding: 0.2rem 0.8rem;
            border-radius: 8px;
            font-weight: 700;
            font-size: 0.85rem;
        }

        .tag-input {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            border: 2px solid var(--gray-200);
            border-radius: 12px;
            padding: 0.5rem;
            min-height: 50px;
        }

        .tag-input:focus-within {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px var(--primary-light);
        }

        .tag {
            background: var(--primary-light);
            color: var(--primary);
            padding: 0.3rem 0.8rem;
            border-radius: 8px;
            font-size: 0.85rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 0.4rem;
            animation: tag-pop 0.3s ease;
        }

        @keyframes tag-pop {
            0% { transform: scale(0); }
            80% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        .tag i { cursor: pointer; font-size: 0.7rem; }

        .tag-input input {
            border: none;
            outline: none;
            flex: 1;
            min-width: 100px;
            padding: 0.3rem;
        }

        .generate-btn {
            width: 100%;
            padding: 1rem;
            font-size: 1.1rem;
            font-weight: 700;
            border-radius: 14px;
            margin-top: 1rem;
            position: relative;
            overflow: hidden;
        }

        .generate-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: left 0.5s;
        }

        .generate-btn:hover::before { left: 100%; }

        /* Preview Panel */
        .preview-panel {
            background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
            border-radius: 24px;
     
            height: 100%;
         
            border: 2px dashed var(--primary);
            position: relative;
            overflow: hidden;
        }

        .preview-panel::before {
            content: '';
            position: absolute;
            width: 200px;
            height: 200px;
            background: var(--primary);
            border-radius: 50%;
            filter: blur(100px);
            opacity: 0.1;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .preview-icon {
            width: 80px;
            height: 80px;
            background: white;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: var(--primary);
            box-shadow: 0 10px 30px rgba(16, 185, 129, 0.2);
            margin-bottom: 1.5rem;
            animation: preview-bounce 2s ease-in-out infinite;
        }

        @keyframes preview-bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        .preview-title { font-size: 1.5rem; font-weight: 700; color: var(--secondary); margin-bottom: 0.5rem; }
        .preview-text { color: var(--gray-600); max-width: 300px; }

        /* ===== HOW IT WORKS ===== */
 

        .step-card {
            text-align: center;
            padding: 2rem;
            position: relative;
        }

        .step-number {
            width: 60px;
            height: 60px;
            background: var(--primary-light);
            color: var(--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: 800;
            margin: 0 auto 1.5rem;
            position: relative;
            z-index: 2;
        }

        .step-card:not(:last-child)::after {
            content: '';
            position: absolute;
            top: 45px;
            right: -50%;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, var(--primary-light), transparent);
            z-index: 1;
        }

        .step-icon {
            width: 80px;
            height: 80px;
            background: white;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: var(--primary);
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            margin: 0 auto 1.5rem;
            transition: transform 0.3s;
        }

        .step-card:hover .step-icon { transform: scale(1.1) rotate(5deg); }
        .step-title { font-weight: 700; font-size: 1.2rem; margin-bottom: 0.5rem; }
        .step-desc { color: var(--gray-600); font-size: 0.95rem; }

        /* ===== FEATURES ===== */ 
        .feature-card {
            background: white;
            border-radius: 20px;
            padding: 2.5rem 2rem;
            border: 1px solid var(--gray-200);
            transition: all 0.4s;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            transform: scaleX(0);
            transition: transform 0.4s;
        }

        .feature-card:hover::before { transform: scaleX(1); }

        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.1);
            border-color: var(--primary-light);
        }

        .feature-icon {
            width: 60px;
            height: 60px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            transition: transform 0.3s;
        }

        .feature-card:hover .feature-icon { transform: scale(1.15) rotate(-5deg); }

        .feature-icon.green { background: var(--primary-light); color: var(--primary); }
        .feature-icon.blue { background: #dbeafe; color: #3b82f6; }
        .feature-icon.purple { background: #f3e8ff; color: #9333ea; }
        .feature-icon.orange { background: #ffedd5; color: #f97316; }

        .feature-title { font-weight: 700; font-size: 1.2rem; margin-bottom: 0.8rem; }
        .feature-desc { color: var(--gray-600); font-size: 0.95rem; line-height: 1.7; }

        /* ===== STATS ===== */
  

        /* ===== TESTIMONIALS ===== */
   
 
 

        /* ===== PARTICLES ===== */
 
  
        /* ===== SCROLLBAR ===== */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--gray-100); }
        ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 991px) {
            .hero-title { font-size: 2.8rem; }
            .hero-illustration { height: 400px; margin-top: 3rem; }
            .step-card:not(:last-child)::after { display: none; }
            .cta-container { padding: 2.5rem 1.5rem; }
            .cta-title { font-size: 1.8rem; }
        }

        @media (max-width: 576px) {
            .hero-title { font-size: 2.2rem; }
            .hero-stats { gap: 1.5rem; }
            .section-title { font-size: 1.8rem; }
            .generator-card { padding: 1.5rem; }
        }

        
  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:96px 32px 120px;
  }

  /* ---------- Header ---------- */
  .header{
  
    margin-bottom:30px;
  }
 
  

  
  
  .grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:22px;
  }
  @media (max-width:980px){ .grid{ grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .grid{ grid-template-columns:1fr;} .wrap{padding:64px 22px 80px;} }

  .card{
    background:white;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:28px 26px 30px;
    position:relative;
    overflow:hidden;
    box-shadow:0 24px 48px -20px rgba(20,20,40,0.28);
    transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
    opacity:0;
    transform:translateY(22px);
    animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards;
  }
  .card:nth-child(1){animation-delay:.28s;}
  .card:nth-child(2){animation-delay:.36s;}
  .card:nth-child(3){animation-delay:.44s;}
  .card:nth-child(4){animation-delay:.52s;}

  .card::before{
    content:"";
    position:absolute;
    top:-40px; right:-40px;
    width:120px; height:120px;
    border-radius:50%;
    background:var(--accent);
    opacity:0.08;
    transition:transform .5s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
  }
  .card::after{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:3px;
    background:linear-gradient(90deg, var(--accent), transparent);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .4s cubic-bezier(.2,.7,.2,1);
  }
  .card:hover{
    transform:translateY(-8px);
    border-color:var(--accent);
    box-shadow:0 24px 48px -20px rgba(20,20,40,0.28);
  }
  .card:hover::before{ transform:scale(1.4); opacity:0.14; }
  .card:hover::after{ transform:scaleX(1); }

  .index{
    font-family:'JetBrains Mono', monospace;
    font-size:11.5px;
    font-weight:500;
    letter-spacing:0.06em;
    color:var(--accent);
    opacity:0.6;
    margin:0 0 14px;
  }

  .chip{
    width:56px; height:56px;
    border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(155deg, var(--chip-bg) 0%, var(--surface) 130%);
    border:1px solid color-mix(in srgb, var(--chip-fg) 22%, transparent);
    color:var(--chip-fg);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), 0 6px 14px -8px var(--chip-fg);
    margin-bottom:20px;
    position:relative;
    z-index:1;
    transition:transform .4s cubic-bezier(.3,1.4,.5,1);
  }
  .card:hover .chip{ transform:scale(1.1) rotate(-6deg); }
  .chip svg{ width:25px; height:25px; }

   

  .card .tag{
     color: var(--accent);
    background: var(--chip-bg);    padding: 5px 10px 5px 16px;
 
  }
  .tag::before{
    content:"";
    width:5px; height:5px;
    border-radius:50%;
    background:var(--accent);
  }

  .card.c1{ --accent:var(--mint-fg); }
  .card.c2{ --accent:var(--sky-fg); }
  .card.c3{ --accent:var(--violet-fg); }
  .card.c4{ --accent:var(--amber-fg); }

  @keyframes rise{ to{ opacity:1; transform:translateY(0); } }
  @keyframes fade{ to{ opacity:1; } }

  @media (prefers-reduced-motion: reduce){
    .eyebrow, h1, .sub, .wave, .card{ animation:none !important; opacity:1 !important; transform:none !important; }
    .wave rect{ animation:none !important; transform:scaleY(0.6) !important; }
  }
 
  

  @keyframes ivqFadeUp{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }

  .ivq-bento{
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    gap:20px;
  }

  /* ===== each card is its own fully self-contained, uniquely named class ===== */

  .ivq-stat-questions{
    grid-column:span 7;
    position:relative;
    background:var(--ivq-paper);
    border:1px solid var(--ivq-card-border);
    border-radius:var(--ivq-radius-panel);
    box-shadow:var(--ivq-shadow-card);
    padding:34px;
    overflow:hidden;
    min-height:290px;
    display:flex; flex-direction:column;
    opacity:0; transform:translateY(20px);
    animation:ivqFadeUp .8s cubic-bezier(.2,.8,.2,1) .26s forwards;
    transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s cubic-bezier(.2,.8,.2,1), border-color .4s ease;
  }
  .ivq-stat-questions:hover{ transform:translateY(-6px); box-shadow:var(--ivq-shadow-card-hover); border-color:rgba(255,255,255,.16); }

  .ivq-stat-users{
    grid-column:span 5;
    position:relative;
    background:var(--ivq-paper);
    border:1px solid var(--ivq-card-border);
    border-radius:var(--ivq-radius-panel);
    box-shadow:var(--ivq-shadow-card);
    padding:34px;
    overflow:hidden;
    min-height:290px;
    display:flex; flex-direction:column;
    opacity:0; transform:translateY(20px);
    animation:ivqFadeUp .8s cubic-bezier(.2,.8,.2,1) .34s forwards;
    transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s cubic-bezier(.2,.8,.2,1), border-color .4s ease;
  }
  .ivq-stat-users:hover{ transform:translateY(-6px); box-shadow:var(--ivq-shadow-card-hover); border-color:rgba(255,255,255,.16); }

  .ivq-stat-success{
    grid-column:span 5;
    position:relative;
    background:var(--ivq-paper);
    border:1px solid var(--ivq-card-border);
    border-radius:var(--ivq-radius-panel);
    box-shadow:var(--ivq-shadow-card);
    padding:34px;
    overflow:hidden;
    min-height:290px;
    display:flex; flex-direction:column; align-items:center; text-align:center;
    opacity:0; transform:translateY(20px);
    animation:ivqFadeUp .8s cubic-bezier(.2,.8,.2,1) .42s forwards;
    transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s cubic-bezier(.2,.8,.2,1), border-color .4s ease;
  }
  .ivq-stat-success:hover{ transform:translateY(-6px); box-shadow:var(--ivq-shadow-card-hover); border-color:rgba(255,255,255,.16); }

  .ivq-stat-roles{
    grid-column:span 7;
    position:relative;
    background:var(--ivq-paper);
    border:1px solid var(--ivq-card-border);
    border-radius:var(--ivq-radius-panel);
    box-shadow:var(--ivq-shadow-card);
    padding:34px;
    overflow:hidden;
    min-height:290px;
    display:flex; flex-direction:column;
    opacity:0; transform:translateY(20px);
    animation:ivqFadeUp .8s cubic-bezier(.2,.8,.2,1) .5s forwards;
    transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s cubic-bezier(.2,.8,.2,1), border-color .4s ease;
  }
  .ivq-stat-roles:hover{ transform:translateY(-6px); box-shadow:var(--ivq-shadow-card-hover); border-color:rgba(255,255,255,.16); }

  
  .ivq-card-label .ivq-sq{
    width:22px;height:22px;border-radius:7px;
    display:flex; align-items:center; justify-content:center;
  }
  .ivq-card-label .ivq-sq svg{ width:12px;height:12px; }
  .ivq-stat-questions .ivq-sq,.ivq-stat-roles .ivq-sq{ background:var(--ivq-accent-soft); color:var(--ivq-accent); }
  .ivq-stat-users .ivq-sq{ background:var(--ivq-violet-soft); color:var(--ivq-violet); }
  .ivq-stat-success .ivq-sq{ background:var(--ivq-amber-soft); color:var(--ivq-amber); }

  /* questions card */
  .ivq-glow-spot{
    position:absolute; width:340px; height:340px; border-radius:50%;
    background:radial-gradient(circle, rgba(32,217,188,.18), transparent 70%);
    top:-140px; right:-100px; pointer-events:none;
  }
  .ivq-feat-num-row{ display:flex; align-items:baseline; gap:4px; margin-bottom:10px; }
  .ivq-feat-num{
    font-size:76px; font-weight:900; letter-spacing:-.03em; line-height:1;
    font-variant-numeric:tabular-nums;
    background:linear-gradient(160deg, #ffffff 20%, var(--ivq-accent) 140%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .ivq-feat-suffix{ font-size:40px; font-weight:800; color:var(--ivq-accent); }
   .ivq-trend-chip{
    display:inline-flex; align-items:center; gap:5px; width:fit-content;
    background:var(--ivq-accent-soft); color:var(--ivq-accent);
    font-size:12px; font-weight:600; padding:5px 11px 5px 9px;
    border-radius:999px; margin:16px 0 20px;
    border:1px solid rgba(32,217,188,.22);
  }
  .ivq-trend-chip svg{ width:12px;height:12px; }

  .ivq-sparkline{ width:100%; height:64px; }
  .ivq-sparkline path.ivq-spark-fill{ fill:url(#ivqSparkFill); }
  .ivq-sparkline path.ivq-spark-line{
    fill:none; stroke:var(--ivq-accent); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  }
  .ivq-sparkline circle{ fill:var(--ivq-accent); filter:drop-shadow(0 0 6px rgba(32,217,188,.65)); }

  /* users card */
  .ivq-avatar-stack{ display:flex; align-items:center; margin-bottom:20px; }
  .ivq-avatar-stack .ivq-av{
    width:38px; height:38px; border-radius:50%;
    border:2.5px solid var(--ivq-paper);
    margin-left:-11px;
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:700; color:#fff;
  }
  .ivq-avatar-stack .ivq-av:first-child{ margin-left:0; }
  .ivq-avatar-stack .ivq-av.ivq-n1{ background:linear-gradient(135deg,#20D9BC,#0C8C7E); }
  .ivq-avatar-stack .ivq-av.ivq-n2{ background:linear-gradient(135deg,#9C8CFF,#6A55E8); }
  .ivq-avatar-stack .ivq-av.ivq-n3{ background:linear-gradient(135deg,#F0A94E,#C97E1F); }
  .ivq-avatar-stack .ivq-av.ivq-n4{ background:linear-gradient(135deg,#5FB4F2,#2E7BC4); }
  .ivq-avatar-stack .ivq-more{
    width:38px;height:38px;border-radius:50%; margin-left:-11px;
    background:rgba(255,255,255,.12); color:var(--ivq-ink); font-size:10.5px; font-weight:700;
    display:flex; align-items:center; justify-content:center; border:2.5px solid var(--ivq-paper);
  }
  .ivq-users-num-row{ display:flex; align-items:baseline; gap:3px; margin-bottom:6px; }
  .ivq-users-num{ font-size:46px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ivq-ink); }
  .ivq-users-suffix{ font-size:24px; font-weight:700; color:var(--ivq-violet); }
  .ivq-users-caption{ font-size:14px; color:var(--ivq-ink-45); margin-top:auto; }

  /* success card */
  .ivq-stat-success .ivq-card-label{ align-self:flex-start; }
  .ivq-ring-wrap{ position:relative; width:150px; height:150px; margin:6px 0 18px; }
  .ivq-ring-wrap svg{ width:100%; height:100%; transform:rotate(-90deg); }
  .ivq-ring-track{ fill:none; stroke:rgba(255,255,255,.09); stroke-width:10; }
  .ivq-ring-fill{ fill:none; stroke:var(--ivq-amber); stroke-width:10; stroke-linecap:round; filter:drop-shadow(0 0 8px rgba(240,169,78,.45)); }
  .ivq-ring-label{
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  }
  .ivq-ring-num{ font-size:34px; font-weight:800; letter-spacing:-.02em; color:var(--ivq-ink); }
  .ivq-ring-num .ivq-pct{ font-size:18px; color:var(--ivq-amber); font-weight:700; }
 
  /* roles card */
  .ivq-roles-num-row{ display:flex; align-items:baseline; gap:4px; margin-bottom:6px; }
  .ivq-roles-num{ font-size:46px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ivq-ink); }
  .ivq-roles-suffix{ font-size:24px; font-weight:700; color:var(--ivq-accent); }
  .ivq-roles-caption{ font-size:14px; color:var(--ivq-ink-45); margin-bottom:24px; }
  .ivq-ticker-mask{
    position:relative; margin-top:auto;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    overflow:hidden;
  }
  .ivq-ticker-track{
    display:flex; gap:10px; width:max-content;
    animation:ivqTickerScroll 26s linear infinite;
  }
  .ivq-ticker-mask:hover .ivq-ticker-track{ animation-play-state:paused; }
  @keyframes ivqTickerScroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  .ivq-role-pill{
    flex-shrink:0;
    padding:9px 16px;
    border-radius:999px;
    background:rgba(255,255,255,.045);
    border:1px solid var(--ivq-line);
    font-size:12.5px; font-weight:500; color:var(--ivq-ink-70);
    white-space:nowrap;
  }
 
  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
  }
 

 
  @keyframes drift{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(30px,-20px) scale(1.06); }
  }

 
  /* header */
 
 
 
  @keyframes fadeUp{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
  }

  /* steps track */
  .steps-track{
    display:grid;
    grid-template-columns: 1fr 46px 1fr 46px 1fr;
    align-items:start;
    gap:0;
  }
  .connector{
    display:flex; align-items:center; justify-content:center;
    padding-top:150px;
  }
  .connector svg{ width:26px; height:26px; color:var(--ink-25); }

  .step{
    display:flex; flex-direction:column;
    opacity:0;
    animation:fadeUp .7s ease forwards;
  }
  .step:nth-of-type(1){ animation-delay:.22s; }
  .step:nth-of-type(3){ animation-delay:.34s; }
  .step:nth-of-type(5){ animation-delay:.46s; }

 

  .numeral{
    top: 5px;;
    right: 15px;
    opacity:.05;  
  }
 
  

  .card-body{
    position:relative;
    padding:24px 0px 0px;
    min-height:270px;
    display:flex; flex-direction:column;
    gap:18px;
  }

 
  .input-shell{
        
    transition: border-color .25s ease, background .25s ease;
  }
  .input-shell.filled{ background:var(--paper); border-color:rgba(18,165,148,.35); }
  .input-shell svg{ width:15px;height:15px; color:var(--ink-25); flex-shrink:0; }
  .caret{
    display:inline-block; width:1.5px; height:14px; background:var(--accent);
    animation:blink 1.1s step-end infinite; margin-left:1px;
  }
  @keyframes blink{ 50%{ opacity:0; } }

   .pill{
    
    background:var(--paper);
     
  }
  .pill.active{
    background:var(--accent-soft);
    border-color:rgba(18,165,148,.35);
    color:var(--accent-dark);
  }
  .pill svg{ width:13px;height:13px; }

  .divider-row{
    display:flex; align-items:center; gap:10px;
 
    font-size:11px;
 
    text-transform:uppercase;
    margin:2px 0;
  }
  .divider-row::before,.divider-row::after{
    content:''; flex:1; height:1px; background:var(--line);
  }

  .auth-row{ display:flex; gap:8px; }
  .auth-btn{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 3px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--paper);
    font-size: 11.5px;
    font-weight: 500;
  }
  .auth-btn svg{ width:13px;height:13px; color:var(--ink-45); }

  .cta{
    display:flex; align-items:center; justify-content:center; gap:8px;
    background:var(--accent);
    color:#fff;
    font-weight:600;
    font-size:13.5px;
    padding:12px 16px;
    border-radius:50px;
    box-shadow:0 8px 18px -6px rgba(18,165,148,.55);
    position:relative;
    overflow:hidden;
  }
  .cta svg{ width:15px;height:15px; }
  .cta.pulse::after{
    content:''; position:absolute; inset:0;
    border-radius:inherit;
    box-shadow:0 0 0 0 rgba(18,165,148,.5);
    animation:pulse 2.6s ease-out infinite;
  }
  @keyframes pulse{
    0%{ box-shadow:0 0 0 0 rgba(18,165,148,.45); }
    70%{ box-shadow:0 0 0 14px rgba(18,165,148,0); }
    100%{ box-shadow:0 0 0 0 rgba(18,165,148,0); }
  }
 
 
  /* mobile connector */
  .connector-v{ display:none; }