/* VOKANUSA catalog page — complementary styles to /styles.css */
.catalog-page { background:#fff; }
.catalog-page .site-nav a[aria-current="page"] { color:#465ee8; }
.sr-only { position:absolute!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;border:0!important; }
.catalog-hero { position:relative;overflow:hidden;background:radial-gradient(ellipse at 88% 36%,#e8ebff,transparent 66%),linear-gradient(140deg,#fbfcff,#fff);border-bottom:1px solid #edf0f7; }
.catalog-hero-grid { display:grid;grid-template-columns:1.06fr .94fr;gap:32px;align-items:center;min-height:570px;padding:60px 0 76px; }
.catalog-hero-copy { position:relative;z-index:2; }
.catalog-breadcrumb { display:flex;align-items:center;gap:11px;color:#97a3b6;font-size:11px;font-weight:650;margin-bottom:51px; }
.catalog-breadcrumb a:hover { color:#465ee8; }
.catalog-breadcrumb span:last-child { color:#4e6083; }
.catalog-hero h1 { font-size:clamp(40px,4.4vw,61px);line-height:1.11;letter-spacing:-.065em;font-weight:840;max-width:640px; }
.catalog-hero .section-kicker { margin-bottom:19px; }
.catalog-lead { max-width:535px;color:#77849b;line-height:1.85;font-size:15px;margin:23px 0 30px; }
.catalog-art { position:relative;isolation:isolate;height:430px;max-width:540px; }
.catalog-art-orbit { position:absolute;inset:12px 40px;border:1px solid #d8e0fd;border-radius:50%;transform:rotate(-10deg); }
.catalog-art-orbit.orbit-b { inset:57px 85px;border:1px dashed #dfe4fc;transform:rotate(18deg); }
.catalog-art-center { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(8deg);width:152px;height:152px;border-radius:35px;background:linear-gradient(138deg,#6176ef,#334bd2);box-shadow:0 30px 70px rgba(65,87,213,.25);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px; }
.catalog-art-center>span { font-size:73px;line-height:.8;font-weight:850;letter-spacing:-.08em; }
.catalog-art-center small { font-size:8px;letter-spacing:.13em;text-align:center;font-weight:800;line-height:1.5;color:#dfe4ff; }
.art-bubble { position:absolute;z-index:2;display:flex;align-items:center;gap:12px;min-width:200px;max-width:235px;padding:15px;border:1px solid #e7eafa;border-radius:16px;background:rgba(255,255,255,.97);box-shadow:0 16px 43px rgba(42,60,117,.09); }
.art-bubble strong { display:block;font-size:13px;letter-spacing:-.025em; }
.art-bubble small { display:block;font-size:10px;color:#9ca8ba;margin-top:4px;white-space:nowrap; }
.art-bubble>b { margin-left:auto;color:#8d9ab5;font-size:16px;font-weight:500; }
.art-icon { width:41px;height:41px;flex:0 0 41px;display:grid;place-items:center;border-radius:12px;font-size:18px;font-weight:810; }
.bubble-vocab { left:0;top:25px;transform:rotate(-5deg); }.bubble-vocab .art-icon { background:#e9edff;color:#566ce0; }
.bubble-grammar { right:0;top:91px;transform:rotate(5deg); }.bubble-grammar .art-icon { background:#e6f8ee;color:#239a70; }
.bubble-ielts { left:-4px;bottom:50px;transform:rotate(4deg); }.bubble-ielts .art-icon { background:#fff1df;color:#dd9443; }
.bubble-kids { right:5px;bottom:3px;transform:rotate(-5deg); }.bubble-kids .art-icon { background:#ffe8f2;color:#d36396; }
.catalog-section { background:#fff; }
.catalog-section-heading,.catalog-guidance-intro { display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:33px; }
.catalog-section-heading h2,.catalog-guidance-intro h2,.catalog-detail-heading h2,.catalog-faq h2 { font-size:clamp(32px,3.25vw,45px);letter-spacing:-.057em;line-height:1.17;font-weight:830; }
.catalog-section-heading>p,.catalog-guidance-intro>p { font-size:13px;line-height:1.8;color:#7c889e;max-width:350px; }
.catalog-toolbar { display:flex;gap:15px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-top:1px solid #eef0f6;padding-top:25px; }
.catalog-filters { display:flex;gap:8px;flex-wrap:wrap; }
.catalog-filter { padding:10px 16px;background:#f5f6fa;color:#75829b;border:1px solid transparent;border-radius:9px;cursor:pointer;font-size:12px;font-weight:760;transition:background .2s,color .2s;min-height:42px; }
.catalog-filter.is-active,.catalog-filter[aria-pressed="true"] { background:#475ee7;color:white;box-shadow:0 6px 15px rgba(72,92,219,.13); }
.catalog-filter:not(.is-active):hover { background:#e9edfa;color:#384ebf; }
.catalog-search { display:flex;align-items:center;gap:9px;min-height:44px;padding:0 13px;border:1px solid #e0e6f1;border-radius:10px;min-width:230px;max-width:290px;flex:1 1 230px;color:#97a5bc; }
.catalog-search:focus-within { outline:2px solid #aebaff;outline-offset:2px; }
.catalog-search svg { width:19px;height:19px;flex:0 0 19px; }
.catalog-search input { width:100%;min-width:0;font:inherit;border:0;outline:0;background:transparent;font-size:12px;color:#233252; }
.catalog-search input::placeholder { color:#a2adbf; }
.catalog-count { margin:21px 0 15px;color:#9ca5b8;font-size:11px;font-weight:700; }
.catalog-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px; }
.catalog-card { overflow:hidden;min-width:0;display:flex;flex-direction:column;background:#fff;border:1px solid #e7ebf5;border-radius:19px;transition:transform .2s,box-shadow .2s; }
.catalog-card:hover { transform:translateY(-3px);box-shadow:0 15px 38px rgba(38,59,123,.08); }
.catalog-card[hidden] { display:none!important; }
.catalog-card-visual { position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;height:224px;background:var(--cat-bg);color:var(--cat-color); }
.catalog-card-visual:before { content:"";width:270px;height:270px;position:absolute;right:-60px;top:-122px;border:1px solid var(--cat-ring);border-radius:50%; }
.catalog-card-visual:after { content:"";width:330px;height:330px;position:absolute;left:-185px;bottom:-210px;border:1px solid var(--cat-ring);border-radius:50%; }
.catalog-card-kind { position:absolute;top:19px;left:23px;z-index:2;font-size:9px;font-weight:850;letter-spacing:.13em;color:var(--cat-color);opacity:.73; }
.catalog-visual-decoration { position:absolute;bottom:-78px;right:-24px;font-size:255px;font-weight:900;line-height:1;opacity:.045;pointer-events:none; }
.catalog-visual-graphic { position:relative;z-index:2; }
.vocab-graphic { display:flex;flex-direction:column;align-items:center;gap:8px;transform:rotate(-5deg); }
.vocab-graphic span { display:block;min-width:149px;text-align:center;padding:9px 26px;border:1px solid #dce3fc;background:#fff;border-radius:10px;box-shadow:0 8px 20px rgba(69,95,186,.08);color:#5365c9;font-size:18px;font-weight:830;letter-spacing:-.045em; }
.vocab-graphic span:first-child { margin-left:-48px;font-size:13px; }
.vocab-graphic span:last-child { margin-left:55px;font-size:13px; }
.grammar-graphic { display:flex;align-items:center;gap:5px;transform:rotate(-3deg); }
.grammar-graphic span { padding:13px 12px;background:#fff;border:1px solid #d1eede;border-radius:12px;color:#258a65;box-shadow:0 10px 23px rgba(47,132,104,.08);font-size:13px;font-weight:800; }
.grammar-graphic em { color:#8bc7ae;font-size:17px;font-style:normal; }
.ielts-graphic { padding:22px 28px;background:#fff;border:1px solid #f4dfc2;border-radius:16px;box-shadow:0 15px 26px rgba(172,122,67,.08);transform:rotate(4deg); }
.ielts-graphic strong { display:block;color:#c57a31;font-size:36px;line-height:1.1;letter-spacing:-.055em; }
.ielts-graphic>span { display:block;font-size:10px;color:#bf9e7d;margin:5px 0 15px; }
.score-pills { display:flex;gap:6px; }
.score-pills small { display:grid;place-items:center;width:24px;height:24px;border-radius:6px;background:#fff3e3;color:#be823e;font-size:10px;font-weight:800; }
.kids-graphic { display:grid;place-items:center;width:134px;height:134px;background:#fff;border:1px solid #f8d7e5;border-radius:39px;box-shadow:0 15px 34px rgba(192,90,137,.11);transform:rotate(-8deg); }
.kids-graphic span { font-size:39px;font-weight:850;letter-spacing:-.07em; }
.kids-graphic i { position:absolute;top:-20px;right:-23px;color:#dc90b3;font-style:normal;font-size:40px; }
.kids-graphic b { position:absolute;left:-36px;bottom:14px;color:#e2b368;font-size:28px; }
.theme-vocabulary { --cat-bg:#eef1ff;--cat-color:#5167d9;--cat-ring:#d4dcfb; }
.theme-grammar { --cat-bg:#e8f8f0;--cat-color:#239872;--cat-ring:#d3ebde; }
.theme-ielts { --cat-bg:#fff3e6;--cat-color:#ce8640;--cat-ring:#f1ddc5; }
.theme-kids { --cat-bg:#fff0f6;--cat-color:#d2699c;--cat-ring:#f5d6e5; }
.catalog-card-body { flex:1;display:flex;flex-direction:column;padding:25px 26px 26px; }
.catalog-card-eyebrow { color:#a4acbf;font-size:9px;font-weight:820;letter-spacing:.13em;margin-bottom:10px; }
.catalog-card h3 { font-size:24px;font-weight:830;letter-spacing:-.05em;margin-bottom:11px; }
.catalog-card-body>p:not(.catalog-card-eyebrow) { color:#7a869b;font-size:13px;line-height:1.8;min-height:48px; }
.catalog-card-tags { display:flex;gap:7px;flex-wrap:wrap;margin:18px 0 23px; }
.catalog-card-tags span { font-size:10px;padding:6px 10px;border-radius:7px;background:#f3f5f9;font-weight:740;color:#8994a9; }
.catalog-card-link { margin-top:auto;padding-top:17px;border-top:1px solid #edf0f5;display:flex;justify-content:space-between;align-items:center;color:#31466b;font-size:12px;font-weight:810;min-height:45px; }
.catalog-card-link span { font-size:18px;color:var(--cat-color); }
.catalog-card-link:hover { color:var(--cat-color); }
.catalog-empty { border:1px dashed #d6dff1;border-radius:14px;padding:30px;text-align:center;color:#7f8ca3;font-size:13px;margin-top:17px; }
.catalog-empty[hidden] { display:none!important; }
.catalog-disclaimer { margin-top:20px;font-size:11px;color:#9ba6b9;line-height:1.65; }
.catalog-guidance { background:#f9faff;border-top:1px solid #f1f2f8;border-bottom:1px solid #f1f2f8; }
.catalog-guidance-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }
.catalog-guidance-grid>a { background:white;min-width:0;border:1px solid #e8ebf5;border-radius:15px;padding:23px 20px;display:flex;align-items:center;gap:17px;transition:transform .2s,border-color .2s; }
.catalog-guidance-grid>a:hover { transform:translateY(-2px);border-color:#b7c4e9; }
.guidance-symbol { flex:0 0 52px;display:grid;place-items:center;width:52px;height:52px;border-radius:13px;font-weight:850;font-size:20px; }
.sym-vocab { background:#eef0ff;color:#566ade; }.sym-grammar { background:#e4f9ed;color:#279b71; }.sym-ielts { background:#fff2df;color:#d18b41; }.sym-kids { background:#ffedf5;color:#d26796; }
.catalog-guidance-grid strong { font-size:13px;line-height:1.4;display:block; }
.catalog-guidance-grid small { display:block;font-size:11px;color:#8995aa;line-height:1.4;margin-top:5px; }
.guidance-arrow { margin-left:auto;color:#9cabc4;font-size:19px; }
.catalog-detail-heading { margin-bottom:30px; }
.catalog-details { display:grid;gap:13px; }
.catalog-detail { --accent:var(--cat-color);display:grid;grid-template-columns:1fr 1fr;gap:45px;scroll-margin-top:108px;padding:36px 41px;background:#fff;border:1px solid #e7ebf4;border-left:5px solid var(--accent);border-radius:15px; }
.detail-label { display:block;font-size:10px;color:var(--accent);font-weight:820;letter-spacing:.11em;margin-bottom:16px; }
.detail-heading h3 { font-size:25px;letter-spacing:-.05em;line-height:1.2;max-width:430px;margin-bottom:12px; }
.detail-heading p { font-size:13px;line-height:1.8;color:#75829a;max-width:455px;margin-bottom:19px; }
.detail-cta { display:inline-flex;align-items:center;gap:12px;color:var(--accent);font-size:12px;font-weight:820;padding:8px 0; }
.detail-cta:hover { text-decoration:underline;text-underline-offset:4px; }
.detail-content { padding-top:28px; }
.detail-content h4 { font-size:13px;font-weight:830;margin-bottom:14px; }
.detail-content ul { margin:0;padding:0;list-style:none;display:grid;gap:11px; }
.detail-content li { position:relative;padding-left:23px;color:#66748c;font-size:12px;line-height:1.6; }
.detail-content li:before { position:absolute;left:0;top:2px;content:"✓";color:var(--accent);font-weight:850; }
.detail-for { border-top:1px solid #edf0f5;margin-top:22px;padding-top:16px;font-size:11px;color:#8390a7;line-height:1.7; }
.detail-for strong { color:#4b5d80;font-weight:750; }
.catalog-faq { background:#fbfcff; }
.catalog-faq-grid { display:grid;grid-template-columns:.75fr 1.25fr;gap:85px; }
.catalog-faq-lead { margin-top:18px;font-size:13px;color:#7f8da1;line-height:1.8;max-width:300px; }
.catalog-bottom-cta { padding:0 0 96px;background:#fbfcff; }
.catalog-cta-box { border-radius:25px;padding:65px 28px 69px;text-align:center;background:linear-gradient(130deg,#364cc7,#6d7dea);position:relative;overflow:hidden;isolation:isolate; }
.catalog-cta-box:before { content:"";position:absolute;z-index:-1;top:-420px;right:-130px;width:650px;height:650px;border:1px solid rgba(255,255,255,.19);border-radius:50%; }
.catalog-cta-box .section-kicker { color:#bfc8ff; }
.catalog-cta-box h2 { font-size:clamp(32px,3.3vw,45px);color:white;letter-spacing:-.055em;margin:13px 0 13px; }
.catalog-cta-box>p:not(.section-kicker) { color:#e5e8ff;font-size:13px;line-height:1.8;margin-bottom:24px; }
@media (max-width:1080px) {
  .catalog-hero-grid { gap:10px; }.catalog-hero h1 { font-size:clamp(38px,4.6vw,52px); }
  .art-bubble { min-width:170px; }
  .catalog-detail { gap:22px;padding:30px; }
}
@media (max-width:800px) {
  .catalog-hero-grid { display:flex;flex-direction:column;align-items:stretch;padding:34px 0 65px;gap:0; }
  .catalog-breadcrumb { margin-bottom:37px; }
  .catalog-hero-copy { text-align:center; }
  .catalog-hero h1 { max-width:620px;margin:auto;font-size:clamp(41px,7vw,55px); }
  .catalog-lead { margin:21px auto 25px;max-width:550px; }
  .catalog-art { margin:40px auto 0;width:min(100%,520px); }
  .catalog-section-heading,.catalog-guidance-intro { display:block; }
  .catalog-section-heading>p,.catalog-guidance-intro>p { max-width:550px;margin-top:16px; }
  .catalog-detail { grid-template-columns:1fr;gap:10px; }
  .detail-content { padding-top:0; }
  .catalog-faq-grid { grid-template-columns:1fr;gap:35px; }
  .catalog-section,.catalog-guidance,.catalog-detail-section,.catalog-faq { padding:76px 0; }
}
@media (max-width:560px) {
  .catalog-hero-grid { padding:28px 0 57px; }
  .catalog-breadcrumb { margin-bottom:39px;font-size:10px; }
  .catalog-hero h1 { font-size:clamp(38px,9.3vw,48px); }
  .catalog-lead { font-size:13px; }
  .catalog-art { height:365px;width:100%;margin-top:32px; }
  .catalog-art-orbit { inset:18px 22px; }
  .catalog-art-orbit.orbit-b { inset:57px 58px; }
  .catalog-art-center { width:112px;height:112px;border-radius:27px; }
  .catalog-art-center>span { font-size:53px; }.catalog-art-center small { font-size:7px; }
  .art-bubble { padding:10px;gap:8px;min-width:0;width:177px;border-radius:13px; }
  .art-icon { width:34px;height:34px;flex-basis:34px;font-size:15px; }
  .art-bubble strong { font-size:11px; }.art-bubble small { font-size:8px; }
  .bubble-vocab { top:17px;left:0; }.bubble-grammar { top:89px;right:0; }
  .bubble-ielts { left:0;bottom:46px; }.bubble-kids { right:0;bottom:0; }
  .catalog-section,.catalog-guidance,.catalog-detail-section,.catalog-faq { padding:66px 0; }
  .catalog-section-heading h2,.catalog-guidance-intro h2,.catalog-detail-heading h2,.catalog-faq h2 { font-size:35px; }
  .catalog-toolbar { align-items:stretch; }.catalog-filters { gap:7px; }
  .catalog-filter { font-size:11px;padding:9px 12px; }
  .catalog-search { max-width:none;width:100%; }
  .catalog-grid { grid-template-columns:1fr;gap:16px; }
  .catalog-card-visual { height:204px; }
  .catalog-card-body { padding:23px 21px; }
  .catalog-card h3 { font-size:23px; }
  .catalog-guidance-grid { grid-template-columns:1fr;gap:10px; }
  .catalog-guidance-grid>a { padding:17px 15px;gap:12px; }
  .guidance-symbol { flex-basis:47px;width:47px;height:47px; }
  .catalog-detail { padding:26px 22px 29px; }
  .detail-heading h3 { font-size:23px; }
  .detail-content li { font-size:12px; }
  .catalog-bottom-cta { padding-bottom:66px; }
  .catalog-cta-box { border-radius:19px;padding:50px 17px 53px; }
  .catalog-cta-box h2 { font-size:34px; }
}
@media (max-width:375px) {
  .catalog-hero h1 { font-size:35px; }
  .catalog-art { height:330px; }
  .art-bubble { width:145px;gap:6px; }
  .art-bubble small { font-size:7px; }
  .art-bubble b { display:none; }
  .catalog-art-center { width:95px;height:95px; }
  .catalog-art-center>span { font-size:45px; }
  .catalog-filter { padding:9px 11px;font-size:10px; }
  .catalog-section-heading h2,.catalog-guidance-intro h2,.catalog-detail-heading h2,.catalog-faq h2 { font-size:32px; }
}
@media (prefers-reduced-motion:reduce) {
  .catalog-card,.catalog-guidance-grid>a { transition:none; }
}