/* ==========================================================
   CLASSMIRROR — PEDAGOGY V369 PREMIUM
   ========================================================== */

.cmp369{
    --ink:#121323;
    --muted:#6f7587;
    --line:#e7e8f0;
    --soft:#f7f8fc;

    --violet:#6f54ee;
    --violet-dark:#28185e;
    --blue:#4e8cf7;
    --green:#19a875;
    --amber:#e7a72e;

    color:var(--ink);
    background:#fff;
}

.cmp369 *{
    box-sizing:border-box;
}

.cmp369-container{
    width:min(1180px,calc(100% - 38px));
    margin:0 auto;
}


/* HERO */

.cmp369-hero{
    position:relative;
    overflow:hidden;

    padding:96px 0 88px;

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(116,84,238,.18),
            transparent 31%
        ),
        radial-gradient(
            circle at 93% 7%,
            rgba(75,142,247,.15),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #fff,
            #f8f8ff
        );
}

.cmp369-hero:after{
    content:"";

    position:absolute;

    width:520px;
    height:520px;

    right:-220px;
    bottom:-250px;

    border:1px solid rgba(111,84,238,.10);
    border-radius:50%;

    box-shadow:
        0 0 0 60px rgba(111,84,238,.025),
        0 0 0 120px rgba(111,84,238,.015);
}

.cmp369-hero-grid{
    position:relative;
    z-index:1;

    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);

    align-items:center;
    gap:64px;
}

.cmp369-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:7px 11px;

    border:1px solid #ddd7fb;
    border-radius:999px;

    color:#5c42c8;
    background:#f0edff;

    font-size:10px;
    font-weight:950;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.cmp369-dot{
    width:7px;
    height:7px;

    border-radius:50%;

    background:#6f54ee;
}

.cmp369-hero h1{
    max-width:820px;

    margin:19px 0 20px;

    font-size:clamp(44px,5.7vw,74px);
    line-height:1;
    letter-spacing:-.05em;
}

.cmp369-gradient{
    color:#6143da;

    background:
        linear-gradient(
            90deg,
            #6748db,
            #478cf2
        );

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;
}

.cmp369-lead{
    max-width:760px;

    margin:0;

    color:var(--muted);

    font-size:18px;
    line-height:1.78;
}

.cmp369-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin-top:29px;
}

.cmp369-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    min-height:49px;

    padding:0 19px;

    border:1px solid var(--violet);
    border-radius:13px;

    color:#fff;
    background:
        linear-gradient(
            135deg,
            #7257f0,
            #5940c9
        );

    font-weight:850;
    text-decoration:none;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.cmp369-btn:hover{
    transform:translateY(-1px);

    box-shadow:
        0 14px 31px
        rgba(91,64,205,.22);
}

.cmp369-btn.secondary{
    color:#4935a7;

    border-color:#dad5f7;

    background:#fff;

    box-shadow:none;
}

.cmp369-trust{
    display:flex;
    flex-wrap:wrap;
    gap:8px;

    margin-top:23px;
}

.cmp369-trust span{
    padding:7px 9px;

    border:1px solid var(--line);
    border-radius:999px;

    color:#687084;
    background:#fff;

    font-size:10px;
    font-weight:850;
}


/* METHOD VISUAL */

.cmp369-method{
    padding:18px;

    border:1px solid #e3e0f5;
    border-radius:27px;

    background:rgba(255,255,255,.90);

    box-shadow:
        0 27px 70px
        rgba(46,32,113,.13);
}

.cmp369-method-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;

    margin-bottom:14px;
}

.cmp369-method-top strong{
    font-size:14px;
}

.cmp369-method-top span{
    padding:5px 8px;

    border-radius:999px;

    color:#157451;
    background:#e8f8f1;

    font-size:9px;
    font-weight:950;
}

.cmp369-method-source{
    padding:14px;

    border:1px solid var(--line);
    border-radius:15px;

    background:#fafaff;
}

.cmp369-method-source small{
    display:block;

    margin-bottom:7px;

    color:#8a90a0;

    font-size:9px;
    font-weight:950;
    text-transform:uppercase;
}

.cmp369-source-row{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}

.cmp369-source-row span{
    padding:7px 9px;

    border-radius:9px;

    color:#5740bf;
    background:#eeeaff;

    font-size:10px;
    font-weight:900;
}

.cmp369-arrow{
    display:grid;
    place-items:center;

    height:30px;

    color:#8c82b9;

    font-size:18px;
}

.cmp369-personas{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}

.cmp369-persona{
    padding:12px;

    border:1px solid var(--line);
    border-radius:14px;

    background:#fff;
}

.cmp369-persona-head{
    display:flex;
    align-items:center;
    gap:8px;
}

.cmp369-avatar{
    display:grid;

    width:31px;
    height:31px;

    place-items:center;

    border-radius:10px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #7559ef,
            #4d82ec
        );

    font-size:11px;
    font-weight:950;
}

.cmp369-persona b{
    font-size:11px;
}

.cmp369-persona p{
    margin:8px 0 0;

    color:#717789;

    font-size:9px;
    line-height:1.5;
}

.cmp369-method-bottom{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.cmp369-mini{
    padding:12px;

    border:1px solid var(--line);
    border-radius:13px;

    background:#fff;
}

.cmp369-mini small{
    display:block;

    color:#8c91a0;

    font-size:8px;
    font-weight:900;
    text-transform:uppercase;
}

.cmp369-mini strong{
    display:block;

    margin-top:4px;

    font-size:11px;
}


/* COMMON */

.cmp369-section{
    padding:88px 0;
}

.cmp369-section.soft{
    background:var(--soft);

    border-top:1px solid #ececf3;
    border-bottom:1px solid #ececf3;
}

.cmp369-heading{
    max-width:840px;

    margin:0 auto 40px;

    text-align:center;
}

.cmp369-kicker{
    display:inline-flex;

    padding:7px 10px;

    border-radius:999px;

    color:#5b40cd;
    background:#eeeaff;

    font-size:10px;
    font-weight:950;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.cmp369-heading h2{
    margin:14px 0 11px;

    font-size:clamp(32px,4.2vw,50px);
    line-height:1.06;
    letter-spacing:-.038em;
}

.cmp369-heading p{
    margin:0;

    color:var(--muted);

    line-height:1.75;
}


/* LEARNING LOOP */

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

.cmp369-step{
    position:relative;

    min-height:220px;

    padding:24px;

    border:1px solid var(--line);
    border-radius:21px;

    background:#fff;

    box-shadow:
        0 10px 30px
        rgba(28,26,67,.035);
}

.cmp369-step-number{
    display:grid;

    width:38px;
    height:38px;

    place-items:center;

    margin-bottom:17px;

    border-radius:12px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #7155ee,
            #4e3abd
        );

    font-size:11px;
    font-weight:950;
}

.cmp369-step h3{
    margin:0 0 9px;

    font-size:17px;
}

.cmp369-step p{
    margin:0;

    color:var(--muted);

    font-size:13px;
    line-height:1.68;
}


/* QUALITY */

.cmp369-quality{
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:22px;

    align-items:stretch;
}

.cmp369-quality-copy{
    padding:31px;

    border-radius:24px;

    color:#fff;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(122,94,245,.34),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #171128,
            #291954
        );

    box-shadow:
        0 25px 60px
        rgba(35,25,79,.15);
}

.cmp369-quality-copy span{
    display:inline-flex;

    padding:6px 9px;

    border-radius:999px;

    color:#dcd4ff;
    background:rgba(255,255,255,.09);

    font-size:9px;
    font-weight:950;
    text-transform:uppercase;
}

.cmp369-quality-copy h2{
    margin:18px 0 12px;

    font-size:clamp(29px,3.5vw,43px);
    line-height:1.08;
    letter-spacing:-.035em;
}

.cmp369-quality-copy p{
    margin:0;

    color:rgba(255,255,255,.72);

    line-height:1.75;
}

.cmp369-quality-rules{
    display:grid;
    gap:10px;
}

.cmp369-rule{
    display:grid;
    grid-template-columns:42px 1fr;

    gap:12px;
    align-items:center;

    padding:15px;

    border:1px solid var(--line);
    border-radius:16px;

    background:#fff;
}

.cmp369-rule-icon{
    display:grid;

    width:40px;
    height:40px;

    place-items:center;

    border-radius:12px;

    color:#5d43cd;
    background:#eeeaff;

    font-weight:950;
}

.cmp369-rule h3{
    margin:0 0 4px;

    font-size:14px;
}

.cmp369-rule p{
    margin:0;

    color:#777e90;

    font-size:11px;
    line-height:1.55;
}


/* QUESTION EXAMPLE */

.cmp369-question-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:17px;
}

.cmp369-question{
    padding:25px;

    border-radius:21px;
}

.cmp369-question.bad{
    border:1px solid #f0d5d8;
    background:#fff8f8;
}

.cmp369-question.good{
    border:1px solid #cfebdf;
    background:#f5fcf8;
}

.cmp369-question-label{
    display:inline-flex;

    padding:6px 9px;

    border-radius:999px;

    font-size:9px;
    font-weight:950;
    text-transform:uppercase;
}

.cmp369-question.bad .cmp369-question-label{
    color:#a83b44;
    background:#fde7e9;
}

.cmp369-question.good .cmp369-question-label{
    color:#0e7b55;
    background:#dff5e9;
}

.cmp369-question h3{
    margin:16px 0 10px;

    font-size:17px;
    line-height:1.55;
}

.cmp369-question p{
    margin:0;

    color:#707687;

    font-size:12px;
    line-height:1.65;
}


/* SUPPORT + TOOLS */

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

.cmp369-intel{
    padding:25px;

    border:1px solid var(--line);
    border-radius:21px;

    background:#fff;
}

.cmp369-intel-icon{
    display:grid;

    width:44px;
    height:44px;

    place-items:center;

    margin-bottom:16px;

    border-radius:14px;

    color:#5b41cb;
    background:#eeeaff;

    font-size:20px;
}

.cmp369-intel h3{
    margin:0 0 9px;

    font-size:17px;
}

.cmp369-intel p{
    margin:0;

    color:var(--muted);

    font-size:13px;
    line-height:1.7;
}


/* MIRROR FLOW */

.cmp369-mirror{
    overflow:hidden;

    border:1px solid var(--line);
    border-radius:26px;

    background:#fff;

    box-shadow:
        0 20px 55px
        rgba(39,30,89,.065);
}

.cmp369-mirror-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;

    padding:21px 24px;

    border-bottom:1px solid var(--line);

    background:
        linear-gradient(
            90deg,
            #faf9ff,
            #f8faff
        );
}

.cmp369-mirror-head strong{
    font-size:17px;
}

.cmp369-mirror-head span{
    padding:6px 9px;

    border-radius:999px;

    color:#5d43c9;
    background:#eeeaff;

    font-size:9px;
    font-weight:950;
}

.cmp369-mirror-flow{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    padding:23px;
}

.cmp369-mirror-item{
    position:relative;

    padding:14px 20px;

    text-align:center;
}

.cmp369-mirror-item:not(:last-child):after{
    content:"→";

    position:absolute;

    right:-5px;
    top:32px;

    color:#b2abc9;

    font-size:18px;
}

.cmp369-mirror-icon{
    display:grid;

    width:48px;
    height:48px;

    place-items:center;

    margin:0 auto 12px;

    border-radius:15px;

    color:#5f45d0;
    background:#eeeaff;

    font-size:20px;
}

.cmp369-mirror-item strong{
    display:block;

    font-size:13px;
}

.cmp369-mirror-item small{
    display:block;

    margin-top:5px;

    color:#858b9c;

    font-size:10px;
    line-height:1.5;
}


/* PRINCIPLE */

.cmp369-principle{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:18px;
}

.cmp369-principle-card{
    padding:29px;

    border:1px solid var(--line);
    border-radius:23px;

    background:#fff;
}

.cmp369-principle-card.featured{
    color:#fff;

    border-color:#2b1b61;

    background:
        linear-gradient(
            145deg,
            #1a132e,
            #302064
        );
}

.cmp369-principle-card span{
    display:inline-flex;

    padding:6px 9px;

    border-radius:999px;

    color:#5d42ca;
    background:#eeeaff;

    font-size:9px;
    font-weight:950;
    text-transform:uppercase;
}

.cmp369-principle-card.featured span{
    color:#dcd4ff;
    background:rgba(255,255,255,.09);
}

.cmp369-principle-card h3{
    margin:18px 0 9px;

    font-size:22px;
}

.cmp369-principle-card p{
    margin:0;

    color:var(--muted);

    line-height:1.72;
}

.cmp369-principle-card.featured p{
    color:rgba(255,255,255,.72);
}


/* FINAL */

.cmp369-final{
    padding:92px 0;

    background:#fff;
}

.cmp369-final-card{
    display:grid;
    grid-template-columns:1fr auto;

    gap:30px;
    align-items:center;

    padding:42px;

    border-radius:29px;

    color:#fff;

    background:
        radial-gradient(
            circle at 92% 0%,
            rgba(79,148,255,.30),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #20144a,
            #5435ba
        );

    box-shadow:
        0 28px 70px
        rgba(45,29,104,.22);
}

.cmp369-final h2{
    max-width:740px;

    margin:0 0 10px;

    font-size:clamp(30px,4vw,45px);
    line-height:1.06;
    letter-spacing:-.035em;
}

.cmp369-final p{
    max-width:720px;

    margin:0;

    color:rgba(255,255,255,.76);

    line-height:1.72;
}

.cmp369-final .cmp369-btn{
    color:#34216f;

    border-color:#fff;

    background:#fff;
}


/* RTL */

html[dir="rtl"] .cmp369{
    text-align:right;
}


/* RESPONSIVE */

@media(max-width:1000px){

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

    .cmp369-method{
        max-width:760px;
    }

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

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

    .cmp369-mirror-item:nth-child(2):after{
        display:none;
    }
}


@media(max-width:820px){

    .cmp369-quality,
    .cmp369-question-grid,
    .cmp369-principle{
        grid-template-columns:1fr;
    }

    .cmp369-intelligence{
        grid-template-columns:1fr;
    }

    .cmp369-final-card{
        grid-template-columns:1fr;
    }
}


@media(max-width:640px){

    .cmp369-container{
        width:min(100% - 24px,1180px);
    }

    .cmp369-hero{
        padding:64px 0 58px;
    }

    .cmp369-section{
        padding:64px 0;
    }

    .cmp369-hero h1{
        font-size:42px;
    }

    .cmp369-personas,
    .cmp369-loop,
    .cmp369-method-bottom,
    .cmp369-mirror-flow{
        grid-template-columns:1fr;
    }

    .cmp369-mirror-item:not(:last-child):after{
        content:"↓";

        right:auto;
        left:50%;
        top:auto;
        bottom:-10px;
    }

    .cmp369-actions{
        flex-direction:column;
    }

    .cmp369-btn{
        width:100%;
    }

    .cmp369-final-card{
        padding:29px;
    }
}


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

    .cmp369-btn{
        transition:none;
    }

    .cmp369-btn:hover{
        transform:none;
    }
}