/* AUTA AI Academy - Ubuntu AI Foundations */
:root{
  --ink:#0b1626; --indigo:#12224a; --indigo2:#1b3a7a; --indigo3:#24509f;
  --amber:#f5b042; --amber-d:#d98f1f; --teal:#1d8f88; --teal-l:#40c8be;
  --paper:#f7f5f0; --card:#ffffff; --line:#e6e1d6; --mut:#5b6472; --ok:#1d8f58; --bad:#c0392b;
  --shadow:0 10px 30px rgba(11,22,38,.10); --radius:16px;
  --font-h:'Sora',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-b:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-b);color:var(--ink);background:var(--paper);line-height:1.62;font-size:16.5px}
img{max-width:100%;display:block}
a{color:var(--indigo2);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-h);line-height:1.18;color:var(--indigo);letter-spacing:-.01em}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.eyebrow{font-family:var(--font-h);font-size:12.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--teal)}
.mut{color:var(--mut)}
/* top bar */
.top{position:sticky;top:0;z-index:50;background:rgba(247,245,240,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:26px;height:66px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-h);font-weight:800;color:var(--indigo);font-size:17px;letter-spacing:.01em}
.brand img{width:38px;height:38px;border-radius:9px}
.brand small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.18em;color:var(--teal);text-transform:uppercase}
nav.main{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
nav.main a{font-size:14.5px;font-weight:600;color:#33405a;padding:8px 11px;border-radius:9px}
nav.main a:hover{background:#eceada;text-decoration:none}
nav.main a.on{color:var(--indigo);background:#e7e3d4}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-h);font-weight:700;font-size:15px;
  padding:12px 22px;border-radius:12px;border:0;cursor:pointer;transition:.18s;text-decoration:none}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-amber{background:var(--amber);color:#2a1c05;box-shadow:0 6px 18px rgba(245,176,66,.35)}
.btn-amber:hover{background:#ffc258}
.btn-ind{background:var(--indigo);color:#fff}
.btn-ind:hover{background:var(--indigo2)}
.btn-ghost{background:transparent;color:var(--indigo);border:1.6px solid var(--indigo)}
.btn-sm{padding:8px 14px;font-size:13.5px;border-radius:10px}
/* hero */
.hero{position:relative;color:#fff;background:var(--indigo);overflow:hidden}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.92}
.hero .shade{position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,20,40,.94) 8%,rgba(10,20,40,.72) 45%,rgba(10,20,40,.25) 100%)}
.hero .wrap{position:relative;padding:86px 22px 92px}
.hero h1{color:#fff;font-size:clamp(34px,5vw,56px);font-weight:800;max-width:660px}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero p.lead{max-width:560px;margin:18px 0 26px;font-size:18px;color:#e8ecf5}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.badge{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:7px 15px;font-size:13px;font-weight:600;color:#eef2fa}
/* sections */
section{padding:64px 0}
section.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.shead{max-width:720px;margin-bottom:34px}
.shead h2{font-size:clamp(26px,3.4vw,38px);margin:8px 0 10px}
.shead p{color:var(--mut);font-size:16.5px}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.card h3{font-size:18.5px;margin-bottom:8px}
.card p{font-size:14.8px;color:var(--mut)}
.card .num{font-family:var(--font-h);font-weight:800;font-size:13px;color:var(--amber-d);letter-spacing:.14em}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:800px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--indigo);color:#fff;border-radius:var(--radius);padding:22px;text-align:center}
.kpi b{display:block;font-family:var(--font-h);font-size:34px;color:var(--amber)}
.kpi span{font-size:13px;color:#c9d4ea}
/* module cards */
.mod{display:grid;grid-template-columns:280px 1fr;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow)}
@media(max-width:800px){.mod{grid-template-columns:1fr}}
.mod .im{background-size:cover;background-position:center;min-height:200px}
.mod .bd{padding:26px}
.mod h3{font-size:22px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
.chip{font-size:12px;font-weight:700;letter-spacing:.04em;padding:5px 11px;border-radius:999px;background:#eef3fb;color:var(--indigo2)}
.chip.am{background:#fdf1dc;color:#8a5a10}
.chip.te{background:#e2f4f2;color:#116b64}
/* lesson list */
.lrow{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:10px}
.lrow .n{font-family:var(--font-h);font-weight:800;color:var(--amber-d);min-width:34px}
.lrow b{display:block;font-size:15.5px;color:var(--indigo)}
.lrow span{font-size:13.5px;color:var(--mut)}
.lrow .tags{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.tag{font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:7px;background:#f1efe6;color:#5c5648}
.tag.v{background:#e8f0fe;color:#1b3a7a}
.tag.p{background:#fdeeee;color:#a3372a}
/* video block */
.vwrap{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#000;aspect-ratio:16/9}
.vwrap video{width:100%;height:100%;display:block}
/* quiz */
.qcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.qopt{display:block;border:1.6px solid var(--line);border-radius:12px;padding:13px 16px;margin:9px 0;cursor:pointer;font-size:15px;transition:.15s;background:#fff}
.qopt:hover{border-color:var(--indigo3)}
.qopt.sel{border-color:var(--indigo2);background:#eef3fb;font-weight:600}
.qopt.right{border-color:var(--ok);background:#e9f6ee}
.qopt.wrong{border-color:var(--bad);background:#fdeeee}
.expl{font-size:13.5px;color:var(--mut);background:#f7f5f0;border-left:3px solid var(--teal);padding:9px 13px;border-radius:0 9px 9px 0;margin-top:8px}
.scorebar{height:12px;border-radius:99px;background:#eceada;overflow:hidden;margin:14px 0}
.scorebar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--amber));border-radius:99px}
/* forms */
label.fl{display:block;font-size:13px;font-weight:700;color:var(--indigo);margin:14px 0 5px;letter-spacing:.02em}
input[type=text],input[type=email],input[type=tel],select,textarea{width:100%;padding:12px 14px;border:1.6px solid var(--line);border-radius:11px;font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(27,58,122,.25);border-color:var(--indigo2)}
/* fee cards */
.fee{position:relative;background:#fff;border:1.8px solid var(--line);border-radius:18px;padding:30px;text-align:center;box-shadow:var(--shadow)}
.fee.hot{border-color:var(--amber);background:linear-gradient(180deg,#fffdf7,#fff)}
.fee .price{font-family:var(--font-h);font-size:46px;font-weight:800;color:var(--indigo)}
.fee .price small{font-size:16px;color:var(--mut);font-weight:600}
.fee ul{list-style:none;text-align:left;margin:16px 0}
.fee li{padding:7px 0 7px 26px;position:relative;font-size:14.5px;color:#33405a}
.fee li:before{content:"✓";position:absolute;left:2px;color:var(--ok);font-weight:800}
.ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--amber);color:#2a1c05;font-family:var(--font-h);font-weight:800;font-size:12px;letter-spacing:.1em;padding:5px 16px;border-radius:999px}
/* footer */
footer{background:var(--ink);color:#aeb8cc;padding:52px 0 30px;margin-top:0}
footer h4{color:#fff;font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
footer a{color:#aeb8cc;display:block;padding:3px 0;font-size:14px}
footer a:hover{color:var(--amber)}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
@media(max-width:800px){.fgrid{grid-template-columns:1fr 1fr}}
.fbot{border-top:1px solid #22304a;margin-top:34px;padding-top:20px;font-size:13px;display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}
/* misc */
.notice{border-radius:14px;padding:16px 20px;font-size:14.5px;margin:18px 0}
.notice.am{background:#fdf3e0;border:1px solid #f0d9a8;color:#6d4a0e}
.notice.te{background:#e6f5f3;border:1px solid #bfe4e0;color:#0f5b54}
.notice.in{background:#eaf0fb;border:1px solid #c6d5f0;color:#1b3a7a}
table.tb{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
table.tb th{background:var(--indigo);color:#fff;text-align:left;padding:11px 14px;font-size:13.5px;letter-spacing:.04em}
table.tb td{padding:11px 14px;border-bottom:1px solid var(--line);font-size:14.5px}
.prog-ring{position:relative;width:118px;height:118px}
.prog-ring svg{transform:rotate(-90deg)}
.prog-ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-size:24px;color:var(--indigo)}
.crumb{font-size:13px;color:var(--mut);padding:18px 0 0}
.crumb a{color:var(--teal)}
.pagehead{background:var(--indigo);color:#fff;padding:52px 0 46px}
.pagehead h1{color:#fff;font-size:clamp(28px,4vw,42px)}
.pagehead p{color:#c9d4ea;max-width:680px;margin-top:10px}
.two{display:grid;grid-template-columns:1.55fr 1fr;gap:30px}
@media(max-width:900px){.two{grid-template-columns:1fr}}
.sticky{position:sticky;top:86px}
.dl{display:inline-flex;align-items:center;gap:8px;background:#eef3fb;border:1px solid #c6d5f0;color:var(--indigo2);font-weight:700;font-size:13.5px;padding:9px 15px;border-radius:10px}
.dl:hover{background:#dfe9fb;text-decoration:none}
details.faq{background:#fff;border:1px solid var(--line);border-radius:13px;padding:16px 20px;margin-bottom:11px}
details.faq summary{cursor:pointer;font-weight:700;color:var(--indigo);font-size:15.5px;list-style:none;display:flex;justify-content:space-between;gap:12px}
details.faq summary:after{content:"+";color:var(--amber-d);font-size:20px;font-weight:800}
details.faq[open] summary:after{content:"–"}
details.faq p{margin-top:10px;font-size:14.6px;color:var(--mut)}
.step{display:flex;gap:16px;margin-bottom:18px}
.step .b{flex:0 0 42px;height:42px;border-radius:12px;background:var(--indigo);color:var(--amber);font-family:var(--font-h);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:17px}
.done{color:var(--ok);font-weight:800}
.toc a{display:block;padding:6px 0;font-size:14.5px}
@media print{.top,footer,.noprint{display:none!important}}
/* --- single-line nav with dropdown sub-tabs --- */
.brand span{white-space:nowrap}
.top .wrap{gap:18px}
nav.main{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
nav.main::-webkit-scrollbar{display:none}
nav.main a{white-space:nowrap}
.drop{position:relative}
.drop>.drop-toggle{display:inline-flex;align-items:center;gap:6px}
.caret{font-size:9px;opacity:.75;transform:translateY(1px)}
.drop-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:230px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:8px;z-index:80}
.drop:hover .drop-menu,.drop:focus-within .drop-menu{display:block}
.drop-menu a{display:block;padding:9px 13px;border-radius:10px;font-size:14px;color:#33405a;font-weight:600;white-space:nowrap}
.drop-menu a:hover{background:#f1efe6;text-decoration:none}
.drop-menu a.on{background:#e7e3d4;color:var(--indigo)}
/* contact / whatsapp cards */
.wa-card{background:#128c5a;color:#fff;border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow);display:flex;gap:14px;align-items:center}
.wa-card b{font-family:var(--font-h);font-size:16px;display:block}
.wa-card a{color:#fff;font-weight:700;text-decoration:underline}
.ic{width:38px;height:38px;flex:0 0 38px;border-radius:11px;background:#ffffff22;display:flex;align-items:center;justify-content:center;font-size:19px}

/* ---------- portal (student + admin) ---------- */
.notice.rd { background: #fdeae5; color: #8a2f18; border-color: #f3c9bb; }
.tb { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
.tb th { text-align: left; color: var(--muted); font-weight: 700; padding: 8px 10px; border-bottom: 2px solid var(--line); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.tb td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tb tr:last-child td { border-bottom: none; }
.tag { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; background: var(--soft); color: var(--navy); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 14px 0; }
.kpis .kpi { text-align: center; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.center { text-align: center; }
@media (max-width: 640px) {
  .tb, .tb tbody, .tb tr, .tb td { display: block; width: 100%; }
  .tb thead { display: none; }
  .tb tr { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; padding: 6px 4px; }
}