/* ================================================================
   pages.css — Inner page styles
   ================================================================ */

/* ── PAGE LAYOUT ─────────────────────────────────────────────── */
.pg-body     { padding: 80px 0; }
.pg-body-alt { padding: 80px 0; background: var(--off); }

/* columns */
.two-col     { display: grid; grid-template-columns: 1fr 1fr;     gap: 4rem; align-items: center; }
.col-3-2     { display: grid; grid-template-columns: 3fr 2fr;     gap: 4rem; align-items: start; }
.col-2-3     { display: grid; grid-template-columns: 2fr 3fr;     gap: 4rem; align-items: start; }

/* ── FEATURE GRID ─────────────────────────────────────────────── */
.feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; margin-top: 3rem; }
.feat-card {
  background: white; border-radius: var(--r); padding: 2rem;
  border: 1px solid rgba(0,0,0,.05); text-align: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.feat-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.feat-ico  { width: 68px; height: 68px; border-radius: 18px; background: linear-gradient(135deg,rgba(230,184,0,.12),rgba(230,184,0,.03)); border: 1px solid rgba(230,184,0,.2); display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 1.2rem; }
.feat-card h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: .5rem; }
.feat-card p  { font-size: .88rem; color: var(--muted); line-height: 1.78; }

/* ── PROCESS STEPS ────────────────────────────────────────────── */
.steps { margin-top: 3rem; display: flex; flex-direction: column; }
.step  { display: flex; gap: 1.5rem; align-items: flex-start; padding: 2rem 0; position: relative; }
.step:not(:last-child)::after { content: ''; position: absolute; right: 24px; top: 68px; bottom: 0; width: 2px; background: linear-gradient(to bottom,var(--gold),transparent); }
.step-num { width: 48px; height: 48px; flex-shrink: 0; background: var(--gold); color: var(--dark); border-radius: 50%; font-weight: 900; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(230,184,0,.3); }
.step-body h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .4rem; }
.step-body p  { font-size: .9rem; color: var(--muted); line-height: 1.75; }

/* ── PACKAGES ─────────────────────────────────────────────────── */
.pkg-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 3rem; }
.pkg-card { background: white; border-radius: var(--r); border: 1.5px solid rgba(0,0,0,.07); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.pkg-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.pkg-card.featured { border-color: var(--gold); transform: scale(1.04); box-shadow: 0 12px 50px rgba(230,184,0,.2); }
.pkg-card.featured:hover { transform: scale(1.04) translateY(-4px); }
.pkg-head { padding: 1.8rem 2rem; background: var(--dark); color: white; text-align: center; }
.pkg-card.featured .pkg-head { background: var(--gold); color: var(--dark); }
.pkg-lbl  { font-size: .72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; opacity: .65; }
.pkg-name { font-size: 1.35rem; font-weight: 900; margin: .3rem 0; }
.pkg-price{ font-size: 2rem; font-weight: 900; }
.pkg-price span { font-size: .85rem; font-weight: 400; }
.pkg-body { padding: 2rem; }
.pkg-body ul { display: flex; flex-direction: column; gap: .8rem; }
.pkg-body li { font-size: .9rem; color: var(--muted); display: flex; align-items: center; gap: .6rem; }
.pkg-body li::before { content: '✓'; color: var(--gold); font-weight: 700; }
.pkg-foot { padding: 0 2rem 2rem; }

/* ── FAQ ──────────────────────────────────────────────────────── */
.faq-list { margin-top: 2.5rem; display: flex; flex-direction: column; gap: .8rem; }
.faq-item { background: white; border-radius: var(--r); border: 1px solid rgba(0,0,0,.07); overflow: hidden; }
.faq-q {
  width: 100%; padding: 1.3rem 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 700; font-size: .97rem; color: var(--dark);
  background: none; border: none; cursor: pointer; text-align: right;
  font-family: inherit; transition: background .2s;
}
.faq-q:hover { background: rgba(230,184,0,.04); }
.faq-q.open  { color: var(--gold-d); }
.faq-icon    { width: 24px; height: 24px; flex-shrink: 0; transition: transform .3s; }
.faq-q.open .faq-icon { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq-a.open { max-height: 300px; }
.faq-a-in { padding: 0 1.5rem 1.3rem; font-size: .92rem; color: var(--muted); line-height: 1.8; }

/* ── COUNTRIES GRID ───────────────────────────────────────────── */
.countries-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-top: 2.5rem; }
.country-card { background: white; border-radius: var(--r); border: 1.5px solid var(--gray2); padding: 1.5rem 1rem; text-align: center; transition: all .3s var(--ease); }
.country-card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: var(--sh); }
.c-flag { font-size: 2.5rem; margin-bottom: .6rem; }
.c-name { font-weight: 700; font-size: .92rem; color: var(--dark); }

/* ── LANG GRID ────────────────────────────────────────────────── */
.lang-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: .8rem; margin-top: 2rem; }
.lang-chip { background: white; border: 1.5px solid var(--gray2); border-radius: 10px; padding: .9rem; text-align: center; font-size: .85rem; font-weight: 600; transition: all .25s; }
.lang-chip:hover { border-color: var(--gold); background: rgba(230,184,0,.05); transform: translateY(-3px); }
.lang-chip .flag { font-size: 1.8rem; display: block; margin-bottom: .3rem; }

/* ── DOC TYPES ────────────────────────────────────────────────── */
.doc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-top: 2rem; }
.doc-card { background: white; border-radius: var(--r); padding: 1.5rem; border: 1px solid rgba(0,0,0,.05); border-top: 3px solid var(--gold); transition: all .3s; }
.doc-card:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.doc-card h4 { font-size: .95rem; font-weight: 700; margin-bottom: .6rem; display: flex; align-items: center; gap: .5rem; }
.doc-card ul { display: flex; flex-direction: column; gap: .4rem; }
.doc-card li { font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: .4rem; }
.doc-card li::before { content: '›'; color: var(--gold); font-weight: 700; }

/* ── CONTACT PAGE ─────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 4rem; align-items: start; }
.ci h2  { font-size: 1.9rem; font-weight: 900; margin-bottom: .8rem; }
.ci > p { color: var(--muted); line-height: 1.8; margin-bottom: 2rem; font-size: .97rem; }
.cd { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; background: var(--gray); border-radius: 12px; margin-bottom: 1rem; transition: background .2s; }
.cd:hover { background: rgba(230,184,0,.08); }
.cd-ico { font-size: 1.4rem; flex-shrink: 0; }
.cd-lbl { font-size: .72rem; color: var(--muted); }
.cd-val { font-weight: 600; font-size: .94rem; color: var(--dark); }

/* ── HIGHLIGHT BOX ────────────────────────────────────────────── */
.hl-box { background: linear-gradient(135deg,var(--dark) 0%,var(--dark2) 100%); border-radius: var(--r-lg); padding: 3rem; color: white; position: relative; overflow: hidden; }
.hl-box::before { content: ''; position: absolute; top: -60px; left: -60px; width: 250px; height: 250px; border-radius: 50%; background: rgba(230,184,0,.08); }
.hl-box h3 { font-size: 1.5rem; font-weight: 900; margin-bottom: .8rem; }
.hl-box h3 span { color: var(--gold); }
.hl-box p  { color: rgba(255,255,255,.65); line-height: 1.8; margin-bottom: 1.5rem; font-size: .95rem; }

/* ── SCORE BAR ────────────────────────────────────────────────── */
.score-wrap { margin: 1rem 0; }
.score-lbl  { display: flex; justify-content: space-between; font-size: .85rem; font-weight: 600; margin-bottom: .4rem; }
.score-track{ height: 10px; background: var(--gray); border-radius: 5px; overflow: hidden; }
.score-fill { height: 100%; background: linear-gradient(to left,var(--gold),var(--gold-l)); border-radius: 5px; width: 0; transition: width 1.2s var(--ease); }

/* ── SUBJECT CHIPS ────────────────────────────────────────────── */
.subject-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-top: 2.5rem; }
.subj { border-radius: var(--r); padding: 1.5rem 1rem; text-align: center; border: 1.5px solid var(--gray2); background: white; transition: all .3s; }
.subj:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: var(--sh); }
.subj .ico { font-size: 2rem; margin-bottom: .5rem; }
.subj h4   { font-size: .9rem; font-weight: 700; }

/* ── LEVEL CARDS ──────────────────────────────────────────────── */
.level-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.3rem; margin-top: 2.5rem; }
.lv-card { border-radius: var(--r); overflow: hidden; border: 1.5px solid var(--gray2); transition: all .3s; }
.lv-card:hover { border-color: var(--gold); transform: translateY(-5px); box-shadow: var(--sh); }
.lv-head { padding: 1.5rem; text-align: center; }
.lv-head .lv-ico  { font-size: 2.2rem; margin-bottom: .5rem; }
.lv-head .lv-code { font-weight: 900; font-size: 1.4rem; color: white; }
.lv-head .lv-name { font-size: .78rem; color: rgba(255,255,255,.65); }
.lv-body { padding: 1.3rem; background: white; }
.lv-body h4 { font-size: .92rem; font-weight: 700; margin-bottom: .4rem; }
.lv-body p  { font-size: .82rem; color: var(--muted); line-height: 1.65; }
.lv-weeks { display: inline-block; margin-top: .6rem; background: rgba(230,184,0,.1); color: var(--gold-d); font-size: .76rem; font-weight: 700; padding: .2rem .7rem; border-radius: 12px; }

/* ── PROCESS VISUAL ───────────────────────────────────────────── */
.proc-vis { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; margin-top: 2.5rem; }
.pv-step  { text-align: center; width: 160px; }
.pv-circ  { width: 70px; height: 70px; border-radius: 50%; background: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin: 0 auto .8rem; box-shadow: 0 4px 20px rgba(230,184,0,.3); }
.pv-step h4 { font-size: .85rem; font-weight: 700; margin-bottom: .2rem; }
.pv-step p  { font-size: .75rem; color: var(--muted); }
.pv-arr  { font-size: 2rem; color: var(--gold); padding: 0 .5rem; flex-shrink: 0; align-self: flex-start; margin-top: 1.5rem; }

/* ── SCHOLARSHIP CARDS ────────────────────────────────────────── */
.schol-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.3rem; margin-top: 2rem; }
.schol-card { background: white; border-radius: var(--r); padding: 1.8rem; border: 1px solid rgba(0,0,0,.05); border-right: 4px solid var(--gold); transition: all .3s; }
.schol-card:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.schol-card h4 { font-size: 1rem; font-weight: 700; margin-bottom: .4rem; }
.schol-card p  { font-size: .87rem; color: var(--muted); line-height: 1.7; }
.schol-tag { display: inline-block; margin-top: .6rem; background: rgba(230,184,0,.1); color: var(--gold-d); font-size: .75rem; font-weight: 700; padding: .2rem .7rem; border-radius: 10px; }

/* ── SERVICE BLOCKS ───────────────────────────────────────────── */
.sblocks { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; margin-top: 2.5rem; }
.sblock  { background: white; border-radius: var(--r); padding: 2rem; border: 1px solid rgba(0,0,0,.05); display: flex; align-items: flex-start; gap: 1.2rem; transition: all .3s; }
.sblock:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: rgba(230,184,0,.3); }
.sb-ico  { width: 52px; height: 52px; flex-shrink: 0; border-radius: 13px; background: linear-gradient(135deg,rgba(230,184,0,.12),rgba(230,184,0,.03)); border: 1px solid rgba(230,184,0,.2); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.sblock h4 { font-size: 1rem; font-weight: 700; margin-bottom: .4rem; }
.sblock p  { font-size: .87rem; color: var(--muted); line-height: 1.72; }

/* ── CV MOCK ──────────────────────────────────────────────────── */
.cv-show { background: var(--dark); border-radius: var(--r-lg); padding: 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; position: relative; overflow: hidden; }
.cv-show::before { content: ''; position: absolute; top: -80px; left: -80px; width: 300px; height: 300px; border-radius: 50%; background: rgba(230,184,0,.06); }
.cv-show h2 { color: white; font-size: 1.8rem; font-weight: 900; margin-bottom: .8rem; }
.cv-show h2 span { color: var(--gold); }
.cv-show p  { color: rgba(255,255,255,.6); line-height: 1.8; margin-bottom: 1.5rem; font-size: .95rem; }
.cv-mock { background: white; border-radius: 12px; padding: 1.5rem; }
.cv-line { height: 10px; border-radius: 5px; margin-bottom: 8px; }
.cv-nm   { background: var(--dark); width: 60%; }
.cv-ti   { background: var(--gold); width: 40%; }
.cv-sec  { height: 6px; border-radius: 3px; background: var(--gray2); }
.cv-txt  { height: 5px; border-radius: 3px; background: var(--gray); margin: 5px 0; }
.cv-txt.s{ width: 75%; } .cv-txt.m{ width: 90%; } .cv-txt.l{ width: 100%; }
.cv-lbl  { font-size: .65rem; font-weight: 700; color: var(--muted); margin: 10px 0 4px; text-transform: uppercase; letter-spacing: 1px; }
.cv-skill{ background: rgba(230,184,0,.15); color: #c9a200; font-size: .65rem; padding: 2px 8px; border-radius: 8px; font-weight: 700; display: inline-block; margin: 2px; }

/* ── STAGE CARDS ──────────────────────────────────────────────── */
.stage-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; margin-top: 2.5rem; }
.stage-card { border-radius: var(--r); overflow: hidden; border: 1px solid rgba(0,0,0,.06); transition: all .3s; }
.stage-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.stage-head { padding: 1.5rem; color: white; text-align: center; }
.sh1{background:linear-gradient(135deg,#1a3a5c,#1f4068);}
.sh2{background:linear-gradient(135deg,#2d1a5c,#3d1f68);}
.sh3{background:linear-gradient(135deg,#1a5c2d,#1f683d);}
.stage-head .s-ico { font-size: 2.5rem; margin-bottom: .5rem; }
.stage-head h3 { font-weight: 800; font-size: 1.05rem; }
.stage-head p  { font-size: .78rem; opacity: .7; margin-top: .2rem; }
.stage-body { padding: 1.5rem; background: white; }
.stage-body ul { display: flex; flex-direction: column; gap: .6rem; }
.stage-body li { font-size: .87rem; color: var(--muted); display: flex; align-items: center; gap: .5rem; }
.stage-body li::before { content: '✓'; color: var(--gold); font-weight: 700; flex-shrink: 0; }

/* ── SKILL BOXES ──────────────────────────────────────────────── */
.skills-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-top: 2rem; }
.skill-box  { background: var(--dark); border-radius: var(--r); padding: 1.8rem; text-align: center; color: white; }
.skill-box .ico { font-size: 2.5rem; margin-bottom: .8rem; }
.skill-box h4  { font-size: 1rem; font-weight: 700; color: var(--gold); margin-bottom: .4rem; }
.skill-box p   { font-size: .82rem; color: rgba(255,255,255,.55); line-height: 1.6; }

/* ── PAGES RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:1024px){
  .feat-grid      { grid-template-columns: repeat(2,1fr); }
  .countries-grid { grid-template-columns: repeat(3,1fr); }
  .lang-grid      { grid-template-columns: repeat(4,1fr); }
  .doc-grid       { grid-template-columns: 1fr 1fr; }
  .subject-grid   { grid-template-columns: repeat(3,1fr); }
  .level-grid     { grid-template-columns: 1fr 1fr; }
  .stage-grid     { grid-template-columns: 1fr 1fr; }
  .skills-row     { grid-template-columns: repeat(2,1fr); }
  .cv-show        { grid-template-columns: 1fr; }
  .schol-grid     { grid-template-columns: 1fr; max-width: 600px; }
}
@media(max-width:768px){
  .two-col,.col-3-2,.col-2-3 { grid-template-columns: 1fr; gap: 2.5rem; }
  .feat-grid      { grid-template-columns: 1fr; }
  .countries-grid { grid-template-columns: repeat(2,1fr); }
  .lang-grid      { grid-template-columns: repeat(3,1fr); }
  .doc-grid       { grid-template-columns: 1fr; }
  .contact-grid   { grid-template-columns: 1fr; gap: 2.5rem; }
  .subject-grid   { grid-template-columns: repeat(2,1fr); }
  .level-grid     { grid-template-columns: 1fr; }
  .stage-grid     { grid-template-columns: 1fr; }
  .sblocks        { grid-template-columns: 1fr; }
  .skills-row     { grid-template-columns: 1fr 1fr; }
  .pkg-grid       { grid-template-columns: 1fr; max-width: 400px; margin: 2rem auto 0; }
  .pkg-card.featured { transform: none; }
}
@media(max-width:480px){
  .countries-grid { grid-template-columns: repeat(2,1fr); }
  .lang-grid      { grid-template-columns: repeat(2,1fr); }
  .skills-row     { grid-template-columns: 1fr; }
}