/* =========================================================================
   CodeLinguae Academy — стили сайта
   Цветовые переменные и переменные шрифтов собраны в начале —
   их удобно менять, не трогая остальной код.
   ========================================================================= */
:root{
    /* --- цвета --- */
    --ink:        #141a17;   /* основной тёмный фон */
    --ink-panel:  #1c2420;   /* фон панелей/карточек на тёмном фоне */
    --ink-line:   #2c362f;   /* линии-разделители на тёмном фоне */
    --paper:      #eaece3;   /* светлый фон секций */
    --paper-card: #f6f7f1;   /* карточки на светлом фоне */
    --paper-line: #d7dacb;   /* линии-разделители на светлом фоне */
    --text-on-ink:    #eef1ea;
    --text-on-ink-mut:#9fada2;
    --text-on-paper:  #1b211c;
    --text-on-paper-mut:#5b6459;

    --amber: #e5ac3f;  /* строки/CTA — как строковый литерал в редакторе */
    --green: #6fbf8c;  /* глаголы/успех */
    --blue:  #7fa3c9;  /* существительные/ссылки */
    --rose:  #d98a82;  /* предупреждения/акцент для ошибок в демо */

    /* --- шрифты --- */
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --font-serif: 'Literata', Georgia, serif;

    --radius: 10px;
    --maxw: 1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    margin:0;
    background:var(--paper);
    color:var(--text-on-paper);
    font-family:var(--font-serif);
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.mono{font-family:var(--font-mono);}
button, input, textarea, select{font-family:inherit; font-size:inherit;}

::selection{background:var(--amber); color:#141a17;}

/* focus visibility for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline:2px solid var(--green);
    outline-offset:3px;
}

/* ---------------------------------------------------------------------
   Header / nav — стилизовано под вкладки открытых файлов в редакторе
   --------------------------------------------------------------------- */
header{
    position:sticky; top:0; z-index:50;
    background:var(--ink);
    border-bottom:1px solid var(--ink-line);
}
.nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 24px;
    max-width:var(--maxw); margin:0 auto;
}
.logo{
    display:flex; align-items:center; gap:10px;
    color:var(--text-on-ink);
    font-family:var(--font-mono);
    font-weight:700;
    font-size:17px;
    text-decoration:none;
    letter-spacing:-0.01em;
}
.logo .bracket{color:var(--green);}
.logo .dot{color:var(--amber);}

.tabs{display:flex; gap:2px; list-style:none; margin:0; padding:0;}
.tabs li a{
    display:block;
    padding:9px 16px;
    font-family:var(--font-mono);
    font-size:13px;
    color:var(--text-on-ink-mut);
    text-decoration:none;
    border-top:2px solid transparent;
    transition:color .15s ease, background .15s ease, border-color .15s ease;
    white-space:nowrap;
}
.tabs li a:hover{color:var(--text-on-ink); background:var(--ink-panel);}
.tabs li a.active{color:var(--amber); background:var(--ink-panel); border-top-color:var(--amber);}
.tabs li a .ext{color:var(--text-on-ink-mut); opacity:.7;}

.nav-cta{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-mono); font-size:13px; font-weight:600;
    color:#141a17; background:var(--green);
    padding:9px 16px; border-radius:6px; text-decoration:none;
    white-space:nowrap;
    transition:transform .15s ease, box-shadow .15s ease;
}
.nav-cta:hover{transform:translateY(-1px); box-shadow:0 4px 14px rgba(111,191,140,.35);}

.burger{display:none; background:none; border:none; color:var(--text-on-ink); cursor:pointer; padding:8px;}
.burger svg{width:24px; height:24px;}

@media (max-width:860px){
    .tabs{
        position:fixed; inset:57px 0 0 0; z-index:40;
        flex-direction:column; background:var(--ink);
        padding:8px; gap:4px;
        transform:translateX(100%);
        transition:transform .25s ease;
        overflow-y:auto;
    }
    .tabs.open{transform:translateX(0);}
    .tabs li a{padding:14px 16px; font-size:15px; border-top:none; border-left:2px solid transparent;}
    .tabs li a.active{border-left-color:var(--amber); border-top-color:transparent;}
    .burger{display:block;}
    .nav-cta{display:none;}
}

/* ---------------------------------------------------------------------
   Hero — "терминал", в котором печатается разбор предложения
   --------------------------------------------------------------------- */
.hero{
    background:var(--ink); color:var(--text-on-ink);
    padding:72px 0 84px;
    border-bottom:1px solid var(--ink-line);
}
.hero-grid{
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:40px;} }

.eyebrow{
    font-family:var(--font-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--green); margin:0 0 18px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; color:var(--text-on-ink-mut);}

.hero h1{
    font-family:var(--font-serif); font-weight:600; font-style:normal;
    font-size:clamp(34px, 4.6vw, 56px); line-height:1.08; letter-spacing:-0.01em;
    margin:0 0 22px;
}
.hero h1 em{font-style:italic; color:var(--amber); font-weight:500;}

.hero p.lede{
    font-size:18px; color:var(--text-on-ink-mut); max-width:46ch; margin:0 0 32px;
}

.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
.btn{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-mono); font-weight:600; font-size:14px;
    padding:13px 22px; border-radius:7px; text-decoration:none;
    border:1px solid transparent; cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{background:var(--amber); color:#20160a;}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(229,172,63,.3);}
.btn-ghost{background:transparent; border-color:var(--ink-line); color:var(--text-on-ink);}
.btn-ghost:hover{border-color:var(--text-on-ink-mut);}

/* terminal window */
.term{
    background:var(--ink-panel); border:1px solid var(--ink-line); border-radius:10px;
    overflow:hidden; box-shadow:0 24px 60px -20px rgba(0,0,0,.55);
}
.term-bar{
    display:flex; align-items:center; gap:8px;
    padding:11px 14px; background:#161d19; border-bottom:1px solid var(--ink-line);
}
.term-dot{width:10px; height:10px; border-radius:50%;}
.term-bar .fname{
    margin-left:8px; font-family:var(--font-mono); font-size:12px; color:var(--text-on-ink-mut);
}
.term-body{
    padding:22px 20px 26px; font-family:var(--font-mono); font-size:14.5px; line-height:1.9;
    min-height:230px;
}
.term-line{white-space:pre-wrap; word-break:break-word;}
.term-comment{color:var(--text-on-ink-mut);}
.tok-noun{color:var(--blue);}
.tok-verb{color:var(--green);}
.tok-adj{color:var(--amber);}
.tok-conj{color:var(--rose);}
.cursor{display:inline-block; width:8px; height:1.1em; background:var(--green); vertical-align:text-bottom; animation:blink 1s step-end infinite;}
@keyframes blink{50%{opacity:0;}}
.term-output{color:var(--green); margin-top:14px;}
.term-output.hidden{display:none;}

/* legend under terminal */
.legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:16px; font-family:var(--font-mono); font-size:12px; color:var(--text-on-ink-mut);}
.legend span{display:inline-flex; align-items:center; gap:6px;}
.legend i{width:9px; height:9px; border-radius:2px; display:inline-block;}

/* ---------------------------------------------------------------------
   Section scaffolding
   --------------------------------------------------------------------- */
section{padding:88px 0;}
.section-alt{background:var(--paper-card);}
.section-head{max-width:640px; margin:0 0 48px;}
.section-tag{
    font-family:var(--font-mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--text-on-paper-mut); margin:0 0 12px;
}
.section-tag .path{color:var(--blue);}
.section-tag .ext{color:var(--amber);}
h2{
    font-family:var(--font-serif); font-weight:600; font-size:clamp(26px,3vw,36px);
    margin:0 0 14px; letter-spacing:-0.01em;
}
.section-head p{color:var(--text-on-paper-mut); font-size:17px; margin:0;}

/* ---------------------------------------------------------------------
   About
   --------------------------------------------------------------------- */
.about-grid{display:grid; grid-template-columns:280px 1fr; gap:56px;}
@media (max-width:780px){.about-grid{grid-template-columns:1fr;}}
.about-card{
    background:var(--ink); color:var(--text-on-ink); border-radius:var(--radius);
    padding:26px; font-family:var(--font-mono); font-size:13px;
}
.about-card dt{color:var(--text-on-ink-mut); margin-top:14px;}
.about-card dt:first-child{margin-top:0;}
.about-card dd{margin:3px 0 0; color:var(--text-on-ink); font-size:14px;}
.about-body p{margin:0 0 18px; font-size:17px;}
.about-body p:last-child{margin-bottom:0;}

/* ---------------------------------------------------------------------
   Courses — карточки как файлы в проекте
   --------------------------------------------------------------------- */
.course-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:900px){.course-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.course-grid{grid-template-columns:1fr;}}
.course-card{
    background:var(--paper-card); border:1px solid var(--paper-line); border-radius:var(--radius);
    padding:24px; display:flex; flex-direction:column; gap:14px;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.course-card:hover{transform:translateY(-3px); box-shadow:0 16px 32px -18px rgba(20,26,23,.25); border-color:var(--green);}
.course-card.featured{
    background:var(--ink); color:var(--text-on-ink); border-color:var(--ink);
}
.course-card.featured .course-title, .course-card.featured .course-desc{color:var(--text-on-ink);}
.course-card.featured .course-desc{color:var(--text-on-ink-mut);}
.course-badge{
    align-self:flex-start; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
    padding:3px 9px; border-radius:20px; background:var(--amber); color:#20160a; font-weight:700;
}
.course-icon{font-family:var(--font-mono); font-size:13px; color:var(--green);}
.course-title{font-family:var(--font-serif); font-weight:600; font-size:20px; margin:0;}
.course-desc{color:var(--text-on-paper-mut); font-size:15px; margin:0; flex-grow:1;}
.course-meta{
    font-family:var(--font-mono); font-size:12px; color:var(--text-on-paper-mut);
    display:flex; justify-content:space-between; border-top:1px dashed var(--paper-line); padding-top:12px;
}
.course-card.featured .course-meta{border-top-color:var(--ink-line); color:var(--text-on-ink-mut);}

/* ---------------------------------------------------------------------
   Process — шаги (реальная последовательность → нумерация уместна)
   --------------------------------------------------------------------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--paper-line); border-left:1px solid var(--paper-line);}
@media (max-width:820px){.steps{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.steps{grid-template-columns:1fr;}}
.step{
    padding:26px 22px; border-right:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line);
    position:relative;
}
.step-num{font-family:var(--font-mono); color:var(--amber); font-size:13px; font-weight:700;}
.step h3{font-family:var(--font-serif); font-size:18px; margin:10px 0 8px;}
.step p{margin:0; color:var(--text-on-paper-mut); font-size:14.5px;}

/* ---------------------------------------------------------------------
   Reviews
   --------------------------------------------------------------------- */
.review-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:900px){.review-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:620px){.review-grid{grid-template-columns:1fr;}}
.review-card{
    background:var(--ink); color:var(--text-on-ink); border-radius:var(--radius); padding:24px;
    display:flex; flex-direction:column; gap:16px;
}
.review-log{font-family:var(--font-mono); font-size:11px; color:var(--green);}
.review-text{font-size:15.5px; margin:0; color:var(--text-on-ink); flex-grow:1;}
.review-who{display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:12.5px; color:var(--text-on-ink-mut);}
.avatar{
    width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-weight:700; font-size:13px; color:#141a17;
}

/* ---------------------------------------------------------------------
   Pricing
   --------------------------------------------------------------------- */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:900px){.price-grid{grid-template-columns:1fr;}}
.price-card{
    background:var(--paper-card); border:1px solid var(--paper-line); border-radius:var(--radius);
    padding:28px; display:flex; flex-direction:column; gap:18px;
}
.price-card.reco{border-color:var(--green); border-width:2px; position:relative;}
.reco-flag{
    position:absolute; top:-13px; left:24px; background:var(--green); color:#0f1a14;
    font-family:var(--font-mono); font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px;
}
.price-name{font-family:var(--font-mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-on-paper-mut);}
.price-amount{font-family:var(--font-serif); font-size:38px; font-weight:600;}
.price-amount span{font-family:var(--font-mono); font-size:14px; color:var(--text-on-paper-mut); font-weight:400;}
.price-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:14.5px; flex-grow:1;}
.price-list li{display:flex; gap:8px;}
.price-list li::before{content:"✓"; color:var(--green); font-weight:700;}

/* ---------------------------------------------------------------------
   FAQ — <details>/<summary>, работает без JS
   --------------------------------------------------------------------- */
.faq-list{display:flex; flex-direction:column; gap:0; border-top:1px solid var(--paper-line);}
.faq-item{border-bottom:1px solid var(--paper-line);}
.faq-item summary{
    cursor:pointer; padding:20px 4px; font-family:var(--font-serif); font-weight:600; font-size:17px;
    display:flex; justify-content:space-between; align-items:center; list-style:none; gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
    content:"+"; font-family:var(--font-mono); color:var(--amber); font-size:22px; flex-shrink:0;
    transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{margin:0 0 20px; color:var(--text-on-paper-mut); padding-right:30px;}

/* ---------------------------------------------------------------------
   Contact
   --------------------------------------------------------------------- */
.contact-wrap{
    background:var(--ink); color:var(--text-on-ink); border-radius:14px;
    padding:48px; display:grid; grid-template-columns:1fr 1fr; gap:48px;
}
@media (max-width:820px){.contact-wrap{grid-template-columns:1fr; padding:32px 22px;}}
.contact-info h2{color:var(--text-on-ink);}
.contact-info p{color:var(--text-on-ink-mut); font-size:16px;}
.contact-channels{display:flex; flex-direction:column; gap:12px; margin-top:24px;}
.channel{
    display:flex; align-items:center; gap:12px; padding:13px 16px;
    background:var(--ink-panel); border:1px solid var(--ink-line); border-radius:8px;
    text-decoration:none; color:var(--text-on-ink); font-family:var(--font-mono); font-size:14px;
    transition:border-color .15s ease, transform .15s ease;
}
.channel:hover{border-color:var(--green); transform:translateX(3px);}
.channel .ic{width:20px; text-align:center;}

.form-group{margin-bottom:16px;}
.form-group label{
    display:block; font-family:var(--font-mono); font-size:12.5px; color:var(--text-on-ink-mut);
    margin-bottom:6px; letter-spacing:.03em;
}
.form-group input, .form-group select, .form-group textarea{
    width:100%; padding:11px 13px; background:var(--ink-panel); border:1px solid var(--ink-line);
    border-radius:6px; color:var(--text-on-ink); font-family:var(--font-serif); font-size:15px;
}
.form-group textarea{resize:vertical; min-height:90px;}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{border-color:var(--green);}
.form-note{font-family:var(--font-mono); font-size:12px; color:var(--text-on-ink-mut); margin-top:10px;}
.form-status{font-family:var(--font-mono); font-size:13px; margin-top:12px; min-height:18px;}
.form-status.ok{color:var(--green);}
.form-status.err{color:var(--rose);}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
footer{background:var(--ink); color:var(--text-on-ink-mut); padding:36px 0; border-top:1px solid var(--ink-line);}
.footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-family:var(--font-mono); font-size:12.5px;}
.footer-inner a{color:var(--text-on-ink-mut); text-decoration:none;}
.footer-inner a:hover{color:var(--text-on-ink);}

/* reveal-on-scroll */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}