/*
Theme Name: Creuo Exam Portal
Theme URI: https://creuo.com/
Author: Creuo
Description: Custom responsive WordPress theme converted from the Creuo Exam Portal HTML design.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: creuo-exam-portal
*/

/* ===== EDIT COLORS HERE ===== */
:root{--primary:#1a3fa6;--primary-dark:#0f2a75;--accent:#f28c1b;--bg:#f4f6fb;--card:#fff;--text:#16213b;--muted:#5d6985;--line:#dde3f0;--ok:#1f9d63;--fs:16px}
body.dark{--bg:#0e1424;--card:#172038;--text:#eaf0ff;--muted:#a3b0d0;--line:#2a3558;--primary:#5b82ff;--primary-dark:#0a1020}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:var(--fs)}
body{font-family:'Plus Jakarta Sans',Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.55}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{max-width:1440px;margin:0 auto;padding:0 20px}
.btn{display:inline-block;padding:10px 20px;border-radius:8px;font-weight:700;font-size:.92rem;border:2px solid transparent;cursor:pointer;font-family:inherit}
.b-main{background:var(--primary);color:#fff}.b-line{border-color:var(--primary);color:var(--primary);background:none}.b-acc{background:var(--accent);color:#1a1200}

/* top bar */
.top{background:var(--primary-dark);color:#d4defa;font-size:.8rem}
.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:38px;flex-wrap:wrap}
.top .g{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.top button,.top select{background:none;border:1px solid #4a63b0;color:#fff;border-radius:4px;padding:2px 8px;font:inherit;cursor:pointer}
.top select option{color:#000}

/* header */
header{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
header .wrap{display:flex;align-items:center;gap:24px;min-height:68px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.logo{font-size:1.9rem;font-weight:800;color:var(--primary);letter-spacing:-.5px;line-height:1}
.logo small{display:block;font-size:.62rem;font-weight:600;color:var(--muted);letter-spacing:.4px;margin-top:2px}
nav{flex:1}
nav ul{list-style:none;display:flex;gap:4px;flex-wrap:wrap}
nav a{display:block;padding:8px 12px;border-radius:6px;font-weight:600;font-size:.9rem}
nav a:hover,nav a.on{color:var(--primary);background:rgba(26,63,166,.08)}
.hr{display:flex;gap:10px;align-items:center}
.bell{position:relative;background:none;border:0;font-size:1.3rem;cursor:pointer;color:var(--text)}
.bell i{position:absolute;top:-4px;right:-6px;background:#e5383b;color:#fff;font:700 .65rem 'Plus Jakarta Sans';border-radius:10px;padding:1px 5px}
.hello{font-size:.85rem;color:var(--muted)}

/* hero */
.hero{padding:44px 0 36px;background:linear-gradient(135deg,#e9efff,#fff3e3)}
body.dark .hero{background:linear-gradient(135deg,#111a33,#1a2240)}
.hero .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:36px;align-items:center}
.hero h1{font-size:3.3rem;line-height:1.1;letter-spacing:-1px;color:var(--primary)}
.hero h1 em{display:block;font-style:normal;color:var(--accent)}
.hero p{margin:14px 0 20px;color:var(--muted);max-width:56ch}
.search{display:flex;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 6px 20px rgba(20,40,100,.08)}
.search input{flex:1;border:0;padding:14px 16px;font:inherit;background:transparent;color:var(--text);min-width:0}
.search button{border:0;background:var(--primary);color:#fff;padding:0 26px;font:700 .95rem inherit;font-family:inherit;cursor:pointer}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;font-size:.82rem;align-items:center}
.chip{background:var(--card);border:1px solid var(--line);padding:4px 12px;border-radius:20px;cursor:pointer;font:inherit;color:var(--text);font-size:.82rem}
.chip:hover{border-color:var(--primary);color:var(--primary)}
.quiz{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px}
.quiz h3{font-size:1.05rem;margin-bottom:4px}
.quiz .q{margin:10px 0;font-weight:600}
.opt{display:block;width:100%;text-align:left;padding:10px 14px;margin-bottom:8px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font:inherit;cursor:pointer}
.opt:hover{border-color:var(--primary)}
.opt.right{background:#d8f3e5;border-color:var(--ok);color:#0b4b2c}
.opt.wrong{background:#fde2e2;border-color:#e5383b;color:#6d1010}
#qmsg{font-size:.88rem;color:var(--muted);min-height:1.3em}

/* ticker */
.tick{background:var(--card);border-bottom:1px solid var(--line)}
.tick .wrap{display:flex;gap:14px;align-items:center;padding-top:9px;padding-bottom:9px}
.tick b{background:#e5383b;color:#fff;padding:3px 12px;border-radius:6px;font-size:.82rem;white-space:nowrap}
.track{overflow:hidden;flex:1}
.move{display:inline-block;white-space:nowrap;padding-left:100%;animation:s 45s linear infinite}
.track:hover .move{animation-play-state:paused}
.move span{margin-right:44px;font-size:.9rem}
.move span u{background:var(--accent);color:#1a1200;text-decoration:none;font-size:.68rem;padding:1px 6px;border-radius:3px;margin-left:5px;font-weight:700}
@keyframes s{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.move{animation:none;padding-left:0}}

/* layout */
.main{display:grid;grid-template-columns:1fr 370px;gap:30px;padding:36px 20px}
.sec{margin-bottom:38px}
.title{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;gap:10px}
.title h2{font-size:1.35rem}
.title p{color:var(--muted);font-size:.88rem}
.title a{color:var(--primary);font-weight:700;font-size:.88rem}
.grid{display:grid;gap:14px}.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px}
a.cat{display:block;transition:border-color .15s}
a.cat:hover{border-color:var(--primary)}
.ic{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;font-size:1.3rem;margin-bottom:10px}
.cat h3{font-size:.98rem;margin-bottom:3px}
.cat p{color:var(--muted);font-size:.82rem}
.exam{text-align:center;font-weight:600;font-size:.88rem;padding:14px 8px}
.exam span{display:block;font-size:1.5rem;margin-bottom:4px}

/* topic chips */
.topics{display:flex;flex-wrap:wrap;gap:10px}
.topics a{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 16px;font-weight:600;font-size:.9rem}
.topics a small{display:block;color:var(--muted);font-weight:500;font-size:.75rem}
.topics a:hover{border-color:var(--primary)}

/* planner */
.plan label{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);cursor:pointer;font-size:.93rem}
.plan label:last-of-type{border:0}
.plan input{width:18px;height:18px;accent-color:var(--primary)}
.plan input:checked+span{text-decoration:line-through;color:var(--muted)}
.streak{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:700}
.streak b{color:var(--accent)}

/* notices, jobs */
.nl{list-style:none}
.nl li{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.nl li:last-child{border:0}
.pdf{background:#e5383b;color:#fff;font-size:.65rem;font-weight:800;padding:3px 6px;border-radius:4px}
.nl small{margin-left:auto;color:var(--muted);white-space:nowrap}
.badge{font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:20px;margin-left:auto;white-space:nowrap}
.rel{background:#d8f3e5;color:#0b4b2c}.wait{background:#fff0d1;color:#7a4a00}

/* sidebar */
.side .card{margin-bottom:18px}
.side h3{font-size:1.02rem;margin-bottom:10px}
.up{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.up:last-child{border:0}
.dt{background:rgba(26,63,166,.1);color:var(--primary);border-radius:8px;text-align:center;padding:4px 10px;font-size:.7rem;font-weight:700;line-height:1.2}
.dt b{display:block;font-size:1.15rem}
.up div:nth-child(2){flex:1;font-size:.9rem;font-weight:600}
.up div:nth-child(2) small{display:block;color:var(--muted);font-weight:500}
.dl{color:#c43a00;font-weight:800;font-size:.8rem;text-align:center;line-height:1.2}
.dl b{display:block;font-size:1.2rem}
.bar{height:8px;background:var(--line);border-radius:6px;overflow:hidden;margin:6px 0 12px}
.bar i{display:block;height:100%;background:var(--ok)}
.pr{display:flex;justify-content:space-between;font-size:.86rem;color:var(--muted);padding:3px 0}
.app{background:linear-gradient(135deg,#ffe3b8,#ffd08a);color:#2b1c00;border:0}
.app p{font-size:.85rem;margin-bottom:12px}
.tg{background:#229ed9;color:#fff;border:0}
.tg p{font-size:.88rem;margin-bottom:12px}

/* footer, chat */
footer{background:var(--primary-dark);color:#cfd9f7;padding:38px 0 18px;font-size:.88rem}
footer .c{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:26px}
footer h4{color:#fff;margin-bottom:10px}
footer li{list-style:none;margin-bottom:6px}
footer a:hover{color:#fff;text-decoration:underline}
footer .cp{border-top:1px solid #2b3f82;margin-top:24px;padding-top:14px;font-size:.78rem}
.help{font-size:1.4rem;color:#fff;font-weight:800}
.bot{position:fixed;right:20px;bottom:20px;background:var(--primary);color:#fff;border:0;border-radius:30px;padding:13px 20px;font:700 .9rem 'Plus Jakarta Sans';cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:30}
#chat{position:fixed;right:20px;bottom:76px;width:300px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.25);display:none;z-index:30;overflow:hidden}
#chat header{position:static;background:var(--primary);color:#fff;padding:12px 16px;font-weight:700;border:0}
#chat .m{padding:14px;font-size:.88rem}
#chat .m button{display:block;width:100%;text-align:left;margin-top:8px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font:inherit;font-size:.84rem;cursor:pointer}
.quick{position:fixed;left:0;top:45%;z-index:25;display:flex;flex-direction:column}
.quick a{background:var(--accent);color:#1a1200;font-weight:700;font-size:.72rem;padding:9px 8px;writing-mode:vertical-rl;border-radius:0 8px 8px 0;margin-bottom:4px}


.stats{display:grid;grid-template-columns:repeat(4,1fr);background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:34px}
.stats div{padding:18px;text-align:center;border-right:1px solid var(--line)}.stats div:last-child{border:0}
.stats b{display:block;font-size:1.6rem;color:var(--primary)}.stats span{font-size:.85rem;color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{text-align:left;padding:10px 12px;background:rgba(26,63,166,.07);font-size:.8rem;color:var(--muted)}
td{padding:12px;border-bottom:1px solid var(--line)}tr:last-child td{border:0}
.tw{overflow-x:auto;padding:0!important}
.vid{overflow:hidden;padding:0!important}
.th{height:130px;display:grid;place-items:center;color:#fff;font-size:2.2rem;position:relative}
.th small{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.7);font-size:.72rem;padding:2px 7px;border-radius:4px}
.vid div.t{padding:14px}.vid h3{font-size:.95rem;margin-bottom:4px}.vid p{font-size:.82rem;color:var(--muted)}
.chart{display:flex;align-items:flex-end;gap:18px;height:170px;padding:10px 6px 0}
.chart div{flex:1;text-align:center;font-size:.78rem;color:var(--muted)}
.chart i{display:block;background:var(--primary);border-radius:6px 6px 0 0;margin-bottom:6px;color:#fff;font-style:normal;font-weight:700;padding-top:4px}
.av{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;font-size:1.2rem;margin-bottom:10px}
.mt p,.ss p{font-size:.86rem;color:var(--muted);margin:4px 0 12px}.ss q{font-size:.9rem;display:block;margin-bottom:12px}
.lb{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.88rem}.lb:last-child{border:0}
.lb .av{width:34px;height:34px;font-size:.8rem;margin:0}.lb b{margin-left:auto}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:13px 16px;margin-bottom:8px}.faq summary{cursor:pointer;font-weight:600}.faq p{margin-top:8px;color:var(--muted);font-size:.9rem}
@media (max-width:980px){.stats{grid-template-columns:1fr 1fr}}
@media (max-width:980px){.hero .wrap,.main,footer .c{grid-template-columns:1fr}.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr}.hero h1{font-size:2.2rem}.quick{display:none}}

/* ===== REDESIGNED TOP SECTION ===== */
.illus{display:flex;justify-content:center}.illus svg{width:100%;max-width:560px;height:auto;filter:drop-shadow(0 20px 30px rgba(0,0,0,.25))}
header{background:var(--card)}
header .hrow{display:flex;justify-content:space-between;align-items:center;min-height:76px;padding-top:10px;padding-bottom:10px}
.logo{font-size:2.1rem}
.hello{font-size:.88rem;color:var(--muted)}.hello b{color:var(--text)}
nav.menu{background:var(--primary-dark);flex:none}
nav.menu ul{gap:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
nav.menu a{color:#dbe5ff;padding:14px 18px;border-radius:0;white-space:nowrap;font-size:.92rem;border-bottom:3px solid transparent}
nav.menu a:hover{background:rgba(255,255,255,.08);color:#fff}
nav.menu a.on{background:rgba(255,255,255,.1);color:#fff;border-bottom-color:var(--accent)}
body .hero,body.dark .hero{background:radial-gradient(circle at 85% 20%,rgba(242,140,27,.28),transparent 40%),linear-gradient(120deg,#0b2060,#1a3fa6 65%,#2a57c9);padding:56px 0 52px;position:relative}
.hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);background-size:22px 22px;pointer-events:none}
.hero .wrap{position:relative;z-index:1;grid-template-columns:1.35fr 1fr;gap:56px}
.hero h1{color:#fff;font-size:3.5rem}
.hero h1 em{color:#ffb454}
.hero p{color:#cfdcff;font-size:1.05rem;margin:16px 0 24px}
.hero .search{border:0;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.hero .search input{color:#16213b}
.hero .search button{background:var(--accent);color:#1a1200}
.hero .chips{color:#cfdcff}
.hero .chip{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#fff}
.hero .chip:hover{background:rgba(255,255,255,.22);color:#fff;border-color:#fff}
.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px}
.qa a{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:14px;color:#fff;font-weight:700;font-size:.9rem;line-height:1.3}
.qa a:hover{background:rgba(255,255,255,.18)}
.qa b{display:block;font-size:1.3rem;margin-bottom:6px}
.qa small{display:block;font-weight:500;font-size:.75rem;color:#bcd0ff;margin-top:2px}
.hero .quiz{background:var(--card);border:0;border-radius:18px;padding:26px;box-shadow:0 24px 50px rgba(0,0,0,.35);border-top:5px solid var(--accent)}
.qh{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.qh h3{font-size:1.1rem;margin:0}.qh span{font-size:.75rem;color:var(--muted);background:var(--bg);padding:3px 10px;border-radius:20px}
.hero .quiz .q{font-size:1.05rem;line-height:1.4;margin:4px 0 16px}
#qo{counter-reset:o}
.opt{display:flex;align-items:center;gap:12px}
.opt::before{counter-increment:o;content:counter(o,upper-alpha);width:28px;height:28px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;font-weight:700;font-size:.8rem;flex:none}
.tick .wrap{padding-top:10px;padding-bottom:10px}
.move{padding-left:0;animation:t 40s linear infinite}
@keyframes t{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.move{animation:none}}
@media (max-width:980px){.hero h1{font-size:2.4rem}.qa{grid-template-columns:1fr 1fr}.hero .wrap{gap:32px}header .hrow{flex-wrap:wrap}}

/* ===== REDESIGNED LOWER SECTIONS CSS ===== */
.pn{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 4px 18px rgba(20,40,100,.05);margin-bottom:22px;position:relative}
.ph{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.pi{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:1.4rem;flex:none}
.ph h2{font-size:1.2rem;line-height:1.2}.ph p{font-size:.84rem;color:var(--muted)}
.ph .vl{margin-left:auto;color:var(--primary);font-weight:700;font-size:.88rem;white-space:nowrap}
.tps{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.tp{background:var(--t);border:1px solid var(--line);border-radius:12px;padding:14px 12px 16px;position:relative;display:block;transition:transform .15s}
.tp:hover{transform:translateY(-2px)}
body.dark .tp{background:var(--bg)}
.tp i{font-style:normal;font-size:1.6rem;display:block;margin-bottom:8px}
.tp b{display:block;font-size:.9rem}.tp small{font-size:.72rem;color:var(--muted);display:block}
.tp s{text-decoration:none;position:absolute;right:8px;bottom:12px;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--c);display:grid;place-items:center;font-weight:800;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:22px}.duo>.pn{margin:0}
.duo2{grid-template-columns:1.25fr 1fr}
.plan2 label{display:flex;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);cursor:pointer;font-size:.93rem;width:68%}
.plan2 label:nth-of-type(4){border:0}
.plan2 input{width:20px;height:20px;accent-color:var(--primary)}
.plan2 input:checked+span{text-decoration:line-through;color:var(--muted)}
.stk{margin-left:auto;color:#e8590c;font-weight:700;font-size:.9rem}
.clip{position:absolute;right:12px;top:58px;width:150px}
.gb{display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,#f26b1d,#ff9a2e);color:#fff;font-weight:700;padding:12px 18px;border-radius:10px;margin-top:16px;width:80%}
.nb{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.nr{display:flex;align-items:center;gap:14px;padding:12px 14px;border-bottom:1px solid var(--line);font-size:.93rem}
.nr:last-child{border:0}.nr small{margin-left:auto;color:var(--muted)}
.pf{width:36px;height:36px;border-radius:9px;background:#fde2e6;color:#e5383b;font-weight:800;font-size:.62rem;display:grid;place-items:center;flex:none}
.bg{margin-left:auto;padding:4px 20px;border-radius:6px;font-weight:700;font-size:.82rem}
.bg.g{background:#d8f3e5;color:#0b6b3a}.bg.y{background:#fff0c7;color:#8a5a00}
.jw{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
.jt{width:100%;border-collapse:collapse;font-size:.88rem;min-width:640px}
.jt th{background:#eaf1ff;color:var(--muted);text-align:left;padding:10px 12px;font-size:.8rem}
body.dark .jt th{background:var(--bg)}
.jt td{padding:9px 12px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.jt td:last-child{border-right:0;width:120px}.jt tr:last-child td{border-bottom:0}
.ap{display:block;text-align:center;background:linear-gradient(90deg,#f26b1d,#ff9a2e);color:#fff;font-weight:700;border-radius:6px;padding:6px 0}
.vg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.vc{border:1px solid var(--line);border-radius:12px;overflow:hidden;display:block;background:var(--card)}
.vt{position:relative;height:130px}.vt svg{width:100%;height:100%;display:block}
.pl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:50px;height:50px;border-radius:50%;background:#fff;color:#1a3fa6;display:grid;place-items:center;font-size:1.1rem;padding-left:3px;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.dur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.75);color:#fff;font-size:.72rem;font-weight:700;padding:2px 7px;border-radius:4px}
.vb{padding:12px}.vb h3{font-size:.95rem;margin-bottom:8px}
.vm{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--muted)}.dot{font-size:.6rem}
.av2{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.62rem;flex:none}
.ct{position:relative;height:200px;margin:8px 0 0 38px;padding-bottom:24px}
.yl{position:absolute;inset:0 0 24px 0;background:repeating-linear-gradient(to top,var(--line) 0 1px,transparent 1px 25%)}
.yl b{position:absolute;left:-38px;transform:translateY(50%);width:30px;text-align:right;font-size:.72rem;color:var(--muted);font-weight:500}
.bars{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-around;padding:0 10px}
.bc{flex:1;max-width:76px;margin:0 8px;height:calc(100% - 24px);position:relative}
.bc i{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(#5b92ff,#3b6fe8);border-radius:6px 6px 0 0}
.bc span{position:absolute;left:0;right:0;font-weight:800;font-size:.8rem;text-align:center;bottom:calc(var(--h,0) + 6px)}
.bc em{position:absolute;left:0;right:0;bottom:-24px;text-align:center;font-style:normal;font-size:.75rem;color:var(--muted)}
.lbx{border:1px solid var(--line);border-radius:12px;padding:4px 12px}
.lr{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.lr:last-child{border:0}.lr b{margin-left:auto}
.lr .av2{width:30px;height:30px;font-size:.7rem}
.rk{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.78rem;flex:none}
.r1{background:#f6a21a;color:#fff}.r2{background:#dfe4ee;color:#4a5878}.r3{background:#f26b1d;color:#fff}
@media (max-width:1200px){.tps{grid-template-columns:repeat(4,1fr)}}
@media (max-width:980px){.duo,.duo2,.vg{grid-template-columns:1fr}.plan2 label,.gb{width:100%}.clip{display:none}}
@media (max-width:520px){.tps{grid-template-columns:1fr 1fr}}

/* ===== REDESIGNED FOOTER ===== */
body.hc{filter:contrast(1.3) saturate(1.1)}
footer.ft{background:radial-gradient(circle at 80% 20%,#1c46b0,transparent 45%),linear-gradient(160deg,#0a2166,#0d2d85 55%,#0a2166);color:#d6e0ff;padding:56px 0 0;margin-top:48px;position:relative;overflow:hidden;font-size:.92rem}
.deco{position:absolute;opacity:.2;pointer-events:none}
.deco.l{left:0;bottom:130px;width:260px}.deco.r{right:-40px;top:70px;width:260px}
.ft .wrap{position:relative;z-index:1}
.fmain{display:grid;grid-template-columns:1.3fr repeat(4,1fr) 1.15fr;gap:28px}
.flogo{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.flogo b{display:block;font-size:2.4rem;font-weight:800;color:#fff;line-height:1;letter-spacing:-1px}
.flogo small{font-size:.78rem;color:#d6e0ff}
.fb p{line-height:1.7;max-width:36ch}
.soc{display:flex;gap:12px;margin-top:20px}
.soc a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:1rem}
.soc a:hover{transform:translateY(-2px)}
.ft h4{color:#fff;font-size:1.05rem;margin-bottom:22px;position:relative;padding-bottom:12px}
.ft h4::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:3px;border-radius:2px;background:#f26b1d}
.fc ul{list-style:none}
.fc li{margin:0}
.fc a{display:flex;justify-content:space-between;align-items:center;padding:7px 0;color:#d6e0ff;gap:10px}
.fc a::after{content:"›";font-size:1.2rem;opacity:.8}
.fc a:hover{color:#fff;text-decoration:none;padding-left:4px}
.fh{border-left:1px solid rgba(255,255,255,.15);padding-left:28px}
.ph2{display:flex;align-items:center;gap:14px}
.phc{width:60px;height:60px;border-radius:50%;background:#1f5df0;display:grid;place-items:center;font-size:1.5rem;flex:none}
.ph2 b{display:block;color:#fff;font-size:1.5rem;font-weight:800;line-height:1.2}
.ph2 small{color:#d6e0ff}
.fct{border-top:1px solid rgba(255,255,255,.15);margin-top:18px;padding-top:16px}
.fct p{margin-bottom:12px}
.frow{display:grid;grid-template-columns:1.25fr 1fr;gap:22px;margin-top:34px}
.fsub,.fapp{background:rgba(8,24,80,.55);border:1px solid rgba(120,160,255,.25);border-radius:12px;padding:16px 20px;display:flex;align-items:center;gap:16px}
.fic{width:46px;height:46px;border-radius:50%;background:#1a45b5;display:grid;place-items:center;font-size:1.3rem;flex:none}
.ft1 b{display:block;color:#fff;font-size:1rem}.ft1 small{color:#cbd8ff;font-size:.82rem}
.fin{display:flex;margin-left:auto;background:#fff;border-radius:8px;padding:3px;flex:none}
.fin input{border:0;padding:0 14px;font:inherit;width:230px;min-width:0;background:transparent;color:#16213b}
.fin button{border:0;background:linear-gradient(90deg,#f26b1d,#ff9a2e);color:#fff;font:700 .9rem 'Plus Jakarta Sans',Arial;padding:11px 20px;border-radius:6px;cursor:pointer}
.fapp .st{display:flex;align-items:center;gap:8px;background:#000;border:1px solid #555;border-radius:8px;padding:6px 12px;color:#fff;margin-left:auto;flex:none}
.fapp .st+.st{margin-left:0}
.st span{font-size:1.4rem}.st small{display:block;font-size:.6rem;color:#fff}.st b{display:block;font-size:1rem;line-height:1.1;color:#fff}
.fbar{border-top:1px solid rgba(255,255,255,.12);margin-top:28px;padding:20px 0 24px}
.fbi{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-right:200px}
.fcp{color:#fff}.fcp small{display:block;color:#8fb0ff;margin-top:4px}
.ftr{list-style:none;display:flex;gap:28px;flex-wrap:wrap;font-size:.85rem;color:#b9c9f5}
.facc{display:flex;gap:16px;align-items:center;font-size:.85rem;color:#b9c9f5}
.facc button{background:none;border:0;color:#d6e0ff;font:inherit;cursor:pointer}
.facc button:hover{color:#fff}

/* helpline number size fix */
.ph2{gap:12px}
.phc{width:48px;height:48px;font-size:1.2rem}
.ph2 b{font-size:1.2rem;white-space:nowrap;letter-spacing:.2px}
.ph2 b a{color:#fff}
.ph2 small{display:block;font-size:.8rem;margin-top:2px}
.fct p{overflow-wrap:anywhere}
.fmain{grid-template-columns:1.25fr repeat(4,1fr) 1.3fr}

/* chatbot: circle button with label below */
.bot{background:none;box-shadow:none;padding:0;border-radius:0;display:flex;flex-direction:column;align-items:center;gap:6px;right:22px;bottom:18px}
.bot .bc{width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,#2d5bd1,#1a3fa6);display:grid;place-items:center;font-size:1.6rem;box-shadow:0 8px 24px rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.35);transition:transform .15s}
.bot:hover .bc{transform:scale(1.07)}
.bot .bl{background:#0f2a75;color:#fff;font-size:.72rem;font-weight:700;padding:3px 11px;border-radius:12px;box-shadow:0 3px 10px rgba(0,0,0,.3);white-space:nowrap}
#chat{bottom:112px;right:22px}

/* chatbot: force a perfect circle */
.bot{cursor:pointer;width:auto;height:auto}
.bot .bc{flex:none;box-sizing:border-box;width:64px;height:64px;min-width:64px;min-height:64px;max-width:64px;max-height:64px;aspect-ratio:1/1;padding:0;margin:0;line-height:1;cursor:pointer;color:#fff;font-family:inherit;font-size:1.7rem;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden}
@media (max-width:1200px){.fmain{grid-template-columns:repeat(3,1fr)}.fb{grid-column:1/-1}.fh{border:0;padding:0}.frow{grid-template-columns:1fr}.fbi{padding-right:0}}
@media (max-width:700px){.fmain{grid-template-columns:1fr 1fr}.fsub,.fapp{flex-wrap:wrap}.fin{margin:0;width:100%}.fin input{flex:1;width:auto}.fapp .st{margin-left:0}}
@media (max-width:520px){.g4{grid-template-columns:1fr 1fr}.hello{display:none}}

/* ===================== MOBILE & RESPONSIVE ===================== */
html{-webkit-text-size-adjust:100%}
body{overflow-x:clip}
img,svg{max-width:100%}
.burger{display:none;background:none;border:1px solid var(--line);color:var(--text);border-radius:8px;width:44px;height:44px;font-size:1.4rem;cursor:pointer}
.mob{display:none}

/* tablet and below: hamburger menu */
@media (max-width:1100px){
  .burger{display:block}
  nav.menu{display:none}
  nav.menu.open{display:block}
  nav.menu ul{flex-direction:column;overflow:visible}
  nav.menu a{padding:15px 20px;border-bottom:1px solid rgba(255,255,255,.1);border-left:3px solid transparent}
  nav.menu a.on{border-bottom:1px solid rgba(255,255,255,.1);border-left-color:var(--accent)}
  .mob{display:block}
  header{position:sticky;top:0}
  .hello{display:none}
}
@media (max-width:980px){
  .hero{padding:36px 0 32px!important}
  .hero .wrap{grid-template-columns:1fr!important;gap:28px!important}
  .hero h1{font-size:clamp(2.1rem,7vw,3rem)!important}
  .illus svg{max-width:440px}
  .main{grid-template-columns:1fr!important;padding:28px 16px}
  .side{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .side .card{margin:0}
  .g3,.vg{grid-template-columns:repeat(2,1fr)}
  .tps{grid-template-columns:repeat(4,1fr)}
  .card[style*="repeat(4,1fr)"]{grid-template-columns:1fr 1fr!important}
  .card[style*="repeat(4,1fr)"] .btn{grid-column:1/-1}
  .fmain{grid-template-columns:repeat(2,1fr)!important}
  .fb,.fh{grid-column:1/-1}
  .fh{border:0!important;padding:0!important}
  .frow{grid-template-columns:1fr!important}
  .fbi{padding-right:0!important}
  .deco{display:none}
}

/* phones */
@media (max-width:700px){
  .top .wrap>span{display:none}
  .top .wrap{justify-content:center;padding-top:6px;padding-bottom:6px}
  .top button,.top select{padding:6px 10px;min-height:32px}
  header .hrow{min-height:62px;padding-top:8px;padding-bottom:8px;flex-wrap:nowrap}
  .logo{font-size:1.7rem}.logo small{font-size:.55rem}
  .hr{gap:8px}
  .hr .b-main{display:none}
  .hr .btn{padding:9px 14px}
  .tick .btn{display:none}
  .tick b{font-size:.72rem;padding:3px 8px}
  .move span{font-size:.84rem;margin-right:30px}
  .hero{padding:28px 0 26px!important}
  .hero p{font-size:.98rem;margin:12px 0 18px!important}
  .search button{padding:0 16px}
  .search input{padding:13px 12px;font-size:.95rem}
  .chips{gap:6px}
  .chip{padding:7px 13px;min-height:34px}
  .qa{grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
  .qa a{padding:12px}
  .stats{grid-template-columns:1fr 1fr!important;margin-bottom:26px}
  .stats div{padding:14px 8px;border-bottom:1px solid var(--line)}
  .stats div:nth-child(2n){border-right:0}
  .stats div:nth-child(n+3){border-bottom:0}
  .stats b{font-size:1.3rem}
  .g4,.g3{grid-template-columns:1fr 1fr}
  .grid{gap:10px}
  .card{padding:14px}
  .title{flex-wrap:wrap}.title h2{font-size:1.2rem}
  .tps{grid-template-columns:1fr 1fr}
  .pn{padding:16px;border-radius:14px;margin-bottom:16px}
  .ph{flex-wrap:wrap;gap:10px}.ph h2{font-size:1.08rem}
  .pi{width:40px;height:40px;font-size:1.2rem}
  .ph .vl{margin-left:auto}
  .stk{margin-left:0;width:100%}
  .duo,.duo2{gap:16px;margin-bottom:16px}
  .plan2 label{padding:12px 0}
  .gb{width:100%}
  .nr{flex-wrap:wrap;gap:10px}
  .nr span:not(.pf):not(.bg){flex:1;min-width:140px}
  /* job table becomes stacked cards */
  .jw{border:0;overflow:visible}
  .jt{min-width:0;border:0}
  .jt,.jt tbody,.jt tr,.jt td{display:block;width:100%}
  .jt tr:first-child{display:none}
  .jt tr{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px;background:var(--card)}
  .jt td{display:flex;justify-content:space-between;gap:12px;border:0!important;padding:5px 0;text-align:right;width:100%!important}
  .jt td::before{content:attr(data-label);color:var(--muted);font-weight:600;font-size:.78rem;text-align:left}
  .jt td:first-child{font-size:1rem;text-align:left;padding-bottom:8px}
  .jt td:first-child::before{display:none}
  .jt td:last-child{padding-top:10px}.jt td:last-child::before{display:none}
  .ap{width:100%;padding:11px 0}
  /* videos: swipe sideways */
  .vg{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:6px;margin:0 -4px;padding-left:4px}
  .vc{flex:0 0 82%;scroll-snap-align:start}
  .ct{height:180px;margin-left:34px}
  .bc{margin:0 4px}
  .card[style*="repeat(4,1fr)"]{grid-template-columns:1fr!important}
  .side{grid-template-columns:1fr}
  .mt .btn,.faq summary{min-height:44px}
  .faq summary{padding:4px 0}
  /* footer */
  footer.ft{padding-top:36px}
  .fmain{grid-template-columns:1fr 1fr!important;gap:20px 16px}
  .flogo b{font-size:2rem}
  .ft h4{margin-bottom:12px}
  .fc a{padding:10px 0}
  .ph2 b{font-size:1.15rem}
  .frow{margin-top:24px}
  .fsub,.fapp{flex-wrap:wrap;padding:16px}
  .fin{margin:0;width:100%}.fin input{flex:1;width:auto}
  .fapp .st{margin-left:0;flex:1;min-width:140px}
  .fbi{flex-direction:column;align-items:flex-start;gap:16px}
  .ftr{gap:10px 20px}
  .facc{flex-wrap:wrap;gap:12px}
  .fbar{padding-bottom:20px}
  /* floating chat */
  .bot{right:14px;bottom:14px}
  .bot .bc{width:54px;height:54px;min-width:54px;min-height:54px;max-width:54px;max-height:54px;font-size:1.4rem}
  #chat{width:auto;left:14px;right:14px;bottom:100px}
}
@media (max-width:340px){
  .g4,.g3,.tps{grid-template-columns:1fr}
  .fmain{grid-template-columns:1fr!important}
  .qa{grid-template-columns:1fr}
  .vc{flex-basis:90%}
}
@media (hover:none){.tp:hover,.bot:hover .bc{transform:none}}

/* active menu: no box, sliding underline */
nav.menu a.on,nav.menu a.on:hover{background:none}
nav.menu .wrap{position:relative}
@media (min-width:1101px){
  nav.menu a.on{border-bottom-color:transparent}
  nav.menu .ind{position:absolute;bottom:0;height:3px;left:0;width:0;background:var(--accent);transition:left .3s ease,width .3s ease;pointer-events:none}
}
@media (max-width:1100px){nav.menu .ind{display:none}}
@media (prefers-reduced-motion:reduce){nav.menu .ind{transition:none}}

/* overflow fix: let grid columns shrink */
.main{grid-template-columns:minmax(0,1fr) 370px}
.main>*{min-width:0}
@media (max-width:1100px){.main{grid-template-columns:minmax(0,1fr) 320px;gap:22px}}
@media (max-width:980px){.main{grid-template-columns:minmax(0,1fr)!important}}

/* phone fixes: single-column testimonials/mentors, footer panels fit */
@media (max-width:700px){
  .g3{grid-template-columns:1fr}
  .frow{grid-template-columns:minmax(0,1fr)!important}
  .fsub,.fapp{min-width:0}
  .fin{flex:1 1 100%;min-width:0}
  .fapp .st{flex:1 1 130px;min-width:0}
}

/* bigger tap targets on touch screens */
@media (max-width:1100px){
  .bell{min-width:40px;min-height:44px;display:grid;place-items:center}
  .bell i{top:4px;right:0}
  .facc button{min-height:40px;min-width:40px;padding:0 8px}
  .facc{gap:6px}
}

/* very small phones: keep header on one line */
@media (max-width:400px){
  header .hrow{gap:6px}
  .logo{font-size:1.45rem}
  .hr{gap:2px}
  .hr .btn{padding:8px 10px;font-size:.85rem}
  .bell{min-width:34px}
  .burger{width:40px;height:40px;margin-left:4px}
}

/* mobile menu: full-width panel */
@media (max-width:1100px){
  nav.menu .wrap{padding:0}
  nav.menu ul,nav.menu li{width:100%}
  nav.menu a{width:100%}
  nav.menu.open{max-height:calc(100vh - 110px);overflow-y:auto}
}

/* mobile header: menu on the left, user icon on the right */
.uwrap{display:none;position:relative}
.usr{width:44px;height:44px;border-radius:50%;border:2px solid var(--primary);background:transparent;color:var(--primary);display:grid;place-items:center;cursor:pointer}
body.dark .usr{color:var(--text);border-color:var(--line)}
.umenu{display:none;position:absolute;right:0;top:calc(100% + 10px);width:200px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.25);padding:12px;flex-direction:column;gap:10px;z-index:60}
.umenu.open{display:flex}
.umenu .btn{display:block!important;width:100%;text-align:center;padding:11px 14px}
@media (max-width:1100px){
  header .hrow{justify-content:flex-start;gap:12px}
  .burger{margin:0}
  .hr{margin-left:auto}
}
@media (max-width:700px){
  .hr>.btn{display:none!important}
  .uwrap{display:block}
}
@media (max-width:400px){
  header .hrow{gap:8px}
  .burger{width:40px;height:40px}
  .usr{width:40px;height:40px}
  .logo{font-size:1.4rem}
}

/* mobile: no extra space at the bottom of the footer */
@media (max-width:700px){
  .fbar{padding:18px 0 16px;margin-top:20px}
  .fbi{gap:12px}
  .facc{padding-bottom:0}
  footer.ft{padding-bottom:0}
}

/* mobile: keep footer text clear of the chat button without adding bottom space */
@media (max-width:700px){
  .fbi{padding-right:84px!important}
}

/* mobile header: menu left, logo centered, user icon right; no bell/bookmark */
@media (max-width:700px){
  header .hrow{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px}
  header .hrow .logo{justify-self:center;text-align:center}
  header .hrow .hr{margin-left:0;justify-self:end}
  .hr .bell{display:none}
}
@media (max-width:400px){header .hrow{grid-template-columns:40px 1fr 40px}}

/* ===== MOBILE HOTFIX: v1.0.1 =====
   Strong, isolated overrides for narrow screens. */
@media (max-width:700px) {
  body { overflow-x:hidden; }
  header .hrow {
    display:grid !important;
    grid-template-columns:42px minmax(0,1fr) 42px !important;
    align-items:center !important;
    gap:8px !important;
    min-height:68px !important;
    padding:8px 14px !important;
    flex-wrap:nowrap !important;
  }
  header .hrow > .burger { display:flex !important; align-items:center; justify-content:center; width:42px; height:42px; padding:0; }
  header .hrow > .logo { justify-self:center !important; text-align:center !important; font-size:1.55rem !important; line-height:1 !important; white-space:nowrap; }
  header .hrow > .logo small { font-size:.48rem !important; line-height:1.15; letter-spacing:.2px; }
  header .hrow > .hr {
    display:flex !important;
    justify-self:end !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:0 !important;
    min-width:0 !important;
    margin:0 !important;
  }
  header .hrow > .hr > .hello,
  header .hrow > .hr > .bell,
  header .hrow > .hr > a.btn { display:none !important; }
  header .hrow .uwrap { display:block !important; position:relative; }
  header .hrow .usr { display:grid !important; width:40px !important; height:40px !important; min-width:40px; padding:0; }
  header .hrow .umenu { right:0; top:calc(100% + 8px); }

  .top .wrap { padding:7px 10px !important; gap:6px; }
  .top .g { justify-content:center; gap:6px !important; width:100%; }
  .top button,.top select { min-height:34px; padding:5px 8px !important; font-size:.78rem !important; }

  .hero { padding:30px 0 28px !important; }
  .hero .wrap { display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:24px !important; padding-left:20px !important; padding-right:20px !important; }
  .hero h1 { font-size:clamp(2rem,8vw,2.55rem) !important; line-height:1.12 !important; letter-spacing:-.7px !important; overflow-wrap:normal; }
  .hero p { font-size:1rem !important; line-height:1.65 !important; margin:14px 0 20px !important; }
  .hero .search { width:100%; min-width:0; }
  .hero .search input { min-width:0; width:0; flex:1 1 auto; padding:13px 12px !important; font-size:.9rem !important; }
  .hero .search button { flex:0 0 auto; padding:0 14px !important; font-size:.88rem !important; }
  .hero .chips { gap:7px !important; align-items:center; }
  .hero .chip { padding:7px 11px !important; min-height:36px; font-size:.82rem !important; }
  .qa { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; }
  .qa a { min-width:0; padding:12px !important; font-size:.84rem !important; overflow-wrap:anywhere; }
  .qa small { font-size:.72rem !important; }
  .illus { min-width:0; }
  .illus svg { width:100%; height:auto; }
  .bot { right:12px !important; bottom:12px !important; }
  .bot .bc { width:50px !important; height:50px !important; min-width:50px !important; min-height:50px !important; max-width:50px !important; max-height:50px !important; }
  #chat { left:12px !important; right:12px !important; bottom:90px !important; width:auto !important; max-width:none !important; }
}
@media (max-width:380px) {
  header .hrow { grid-template-columns:38px minmax(0,1fr) 38px !important; gap:5px !important; padding-left:10px !important; padding-right:10px !important; }
  header .hrow > .burger, header .hrow .usr { width:38px !important; height:38px !important; min-width:38px; }
  header .hrow > .logo { font-size:1.4rem !important; }
  .hero .wrap { padding-left:16px !important; padding-right:16px !important; }
  .hero .search button { padding:0 10px !important; }
  .qa a { padding:10px !important; }
}


/* ===== MOBILE HEADER REFERENCE MATCH =====
   Compact accessibility strip, centered Creuo wordmark, menu left, account right. */
@media (max-width:700px) {
  .top .wrap { min-height:46px !important; padding:5px 10px !important; }
  .top .g { display:flex !important; flex-wrap:nowrap !important; justify-content:center !important; gap:6px !important; }
  .top button, .top select { min-height:34px !important; padding:4px 8px !important; font-size:.76rem !important; white-space:nowrap; }
  header .hrow { min-height:64px !important; padding:6px 14px !important; grid-template-columns:40px minmax(0,1fr) 40px !important; gap:8px !important; }
  header .hrow > .burger { width:40px !important; height:40px !important; min-width:40px !important; border-radius:9px !important; font-size:1.35rem !important; }
  header .hrow > .logo { font-size:1.5rem !important; }
  header .hrow > .logo small { white-space:nowrap !important; display:block !important; font-size:.48rem !important; letter-spacing:0 !important; }
  header .hrow .usr { width:40px !important; height:40px !important; min-width:40px !important; border-radius:50% !important; border:2px solid var(--primary) !important; background:transparent !important; }
}