@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700;800&display=swap");

/* =====================================================================
   Opportunity — "Warm & Playful" THEME OVERLAY for inner pages.
   Loaded AFTER style.css; re-skins existing markup, keeps all layouts
   and script.js working. Matches index2.html / redesign.css.
   ===================================================================== */
:root{
  --red:#e61b38; --red-dark:#c30f28; --coral:#ff7a59; --peach:#ffd9c7;
  --sun:#ffc73a; --mint:#3ecfa4; --sky:#58b6ff; --cream:#fff6ee; --cream-2:#fdeee2;
  --ink:#3a2630; --text:#6b5860; --muted:#a2919a; --line:#f0e2d8; --plum:#341521;
  --radius:24px; --radius-sm:16px;
  --shadow-soft:0 14px 34px rgba(120,60,40,.12);
  --shadow-pop:0 20px 44px rgba(230,27,56,.18);
}
html,body{ overflow-x:hidden !important; max-width:100%; }
body{ background:var(--cream) !important; font-family:"Nunito",system-ui,sans-serif !important; color:var(--ink) !important; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,.title{ font-family:"Fredoka","Nunito",sans-serif !important; letter-spacing:-.01em; }

/* ---------- Header ---------- */
header{ background:rgba(255,246,238,.86) !important; backdrop-filter:blur(12px); box-shadow:none !important; border-bottom:1px solid transparent; transition:box-shadow .25s ease,border-color .25s ease; }
header.scroll{ box-shadow:0 8px 26px rgba(120,60,40,.10) !important; border-bottom-color:var(--line); }
header .headerMenu a{ font-family:"Fredoka" !important; font-weight:500 !important; color:var(--ink) !important; transition:color .16s ease, transform .16s ease; }
header .headerMenu a:hover{ color:var(--red) !important; transform:translateY(-1px); }
header .headerMenu a.selected{ color:var(--red) !important; opacity:1 !important; }
header .headerMenu.mobile{ background:#fff; }

/* ---------- Buttons ---------- */
.button{
  background:var(--red) !important; color:#fff !important; font-family:"Fredoka" !important; font-weight:600 !important;
  border-radius:999px !important; padding:13px 26px !important; box-shadow:var(--shadow-pop);
  transition:transform .16s cubic-bezier(.34,1.56,.64,1), background .18s ease, box-shadow .18s ease !important;
}
.button:hover{ background:var(--red-dark) !important; transform:translateY(-3px) rotate(-1deg) scale(1.03); }

/* ---------- Typography / sections ---------- */
h1.title{ font-size:clamp(34px,5vw,52px) !important; line-height:1.05; color:var(--ink); margin-bottom:16px !important; }
section .title{ font-size:clamp(24px,3vw,32px) !important; color:var(--ink); }
section .description{ color:var(--text) !important; opacity:1 !important; font-weight:600; font-size:16.5px; line-height:1.7; }
section .description.black{ color:var(--ink) !important; }
.coursesSection .sectionText h1.title + .description, .sectionText .description{ max-width:60ch; }
section li{ font-weight:600; }
section ul li::marker{ color:var(--red); }

/* hero image → soft rounded blob */
section .heroImg{ border-radius:44% 56% 52% 48% / 55% 48% 52% 45% !important; box-shadow:var(--shadow-soft); filter:none !important; }

/* ---------- Course teasers (playful cards) ---------- */
section .imgTeaser{ border-radius:var(--radius) !important; box-shadow:var(--shadow-soft) !important; border:3px solid #fff; transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease !important; }
section .imgTeaser:hover{ transform:translateY(-6px) rotate(-1deg); box-shadow:var(--shadow-pop) !important; }
section .imgTeaser p{ font-family:"Fredoka" !important; font-weight:600; }

/* ---------- Price cards (playful) ---------- */
.priceCard{ border-radius:var(--radius) !important; border:1px solid var(--line) !important; box-shadow:var(--shadow-soft) !important; }
.priceCard:hover{ transform:translateY(-4px) rotate(-.6deg); box-shadow:var(--shadow-pop) !important; }
.priceCard__title{ font-family:"Fredoka" !important; color:var(--ink); }
.priceCard__list b{ font-family:"Fredoka" !important; }
.priceCard--featured{ border:2px solid var(--red) !important; }
.priceCard__badge{ background:var(--red) !important; font-family:"Fredoka"; }
section.pricesSection video{ border-radius:var(--radius) !important; box-shadow:var(--shadow-soft); }

/* ---------- Contacts (2x2 grid handled in style.css; warm skin) ---------- */
section .contactBlock .addressText{ font-family:"Nunito"; font-weight:700; color:var(--ink); }
section.contactsPage .contacts .phone a{ color:var(--ink) !important; }
section.contactsPage .contacts .phone a:hover{ color:var(--red) !important; }
section.contactsPage iframe{ border-radius:var(--radius) !important; }

/* ---------- Reviews ---------- */
.reviewsSection{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.reviewCard{ background:#fff; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-soft); border:3px solid #fff; transition:transform .2s ease, box-shadow .2s ease; }
.reviewCard:hover{ transform:translateY(-5px) rotate(-.6deg); box-shadow:var(--shadow-pop); border-color:var(--peach); }
.reviewCard .userInfo{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.reviewCard .userAvatar{ width:52px; height:52px; border-radius:50%; object-fit:cover; }
.reviewCard .userName{ font-family:"Fredoka"; font-weight:600; color:var(--ink); }
.reviewCard .userStars img{ width:16px; height:16px; }
.reviewCard .reviewText{ color:var(--text); font-weight:600; line-height:1.6; }
.videosContainer{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.videosContainer video{ width:100%; border-radius:var(--radius); box-shadow:var(--shadow-soft); background:#000; }

/* ---------- News ---------- */
.newsSection, .newsSectionContent{ gap:22px !important; }
.newsCard{ border-radius:var(--radius) !important; box-shadow:var(--shadow-soft) !important; transition:transform .22s ease, box-shadow .22s ease !important; }
.newsCard:hover{ transform:translateY(-6px) rotate(-1deg); box-shadow:var(--shadow-pop) !important; }
.newsInfo .title{ font-family:"Fredoka" !important; }
.heroNewsImg{ border-radius:var(--radius) !important; box-shadow:var(--shadow-soft); }

/* ---------- IELTS results grid ---------- */
.ieltsSection{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ieltsSection img{ width:100%; border-radius:var(--radius-sm); box-shadow:var(--shadow-soft); border:3px solid #fff; transition:transform .2s ease; }
.ieltsSection img:hover{ transform:translateY(-4px) rotate(-1deg); }

/* ---------- Footer → warm plum ---------- */
footer{ background:var(--plum) !important; color:#e7d3d9 !important; }
footer .schoolContacts, footer .socialNetworks{ background:transparent !important; }
footer .schoolContacts, footer .schoolContacts .address, footer .schoolContacts .phone, footer .schoolContacts .phone a, footer .time{ color:#e7d3d9 !important; }
footer .schoolContacts .address b{ color:#fff !important; }
footer .schoolContacts .phone a:hover{ color:#fff !important; }
footer .socialNetworks a{ background:rgba(255,255,255,.1); border-radius:50%; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; transition:transform .18s ease, background .18s ease; }
footer .socialNetworks a:hover{ background:var(--red); transform:translateY(-3px) rotate(-6deg); }
footer .socialNetworks img{ filter:brightness(0) invert(1); width:18px; height:18px; }
footer .authors{ color:#b79aa4 !important; }
footer .authors a{ color:#e7d3d9 !important; }

/* ---------- Reveal (safe: content always visible) ---------- */
.reveal.in{ animation:pfUp .6s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes pfUp{ from{ opacity:0; transform:translateY(24px);} to{ opacity:1; transform:none;} }

@media (max-width:720px){
  .reviewsSection, .videosContainer, .ieltsSection{ grid-template-columns:1fr; }
}


/* ---------- Floating decorative stickers (site-wide) ---------- */
.container.pt72{ position:relative; }
.pfStickers{ position:absolute; top:70px; left:0; right:0; height:440px; pointer-events:none; z-index:1; }
.pfStickers span{ position:absolute; font-size:36px; animation:pfFloat 5s ease-in-out infinite; }
.pfStickers .s1{ top:18px; left:-10px; }
.pfStickers .s2{ top:210px; left:-14px; font-size:32px; animation-delay:.8s; }
.pfStickers .s3{ top:14px; right:1%; font-size:30px; animation-delay:1.4s; }
.pfStickers .s4{ top:165px; right:-10px; font-size:32px; animation-delay:.5s; }
@keyframes pfFloat{ 0%,100%{ transform:translateY(0) rotate(-5deg); } 50%{ transform:translateY(-15px) rotate(6deg); } }
@media (max-width:820px){ .pfStickers{ display:none; } }

section.pricesSection .pricesPromo{ width:100%; display:block; border-radius:var(--radius); box-shadow:var(--shadow-soft); }