/* Fiber Optics Institute — design tokens
   ink navy #0B1226 · glass #F5F8FC · laser cyan #22D3EE · wavelength amber #F59E0B · signal red #EF4444 */
:root{
  --ink:#0B1226; --ink2:#131C36; --glass:#F5F8FC; --card:#FFFFFF;
  --line:#D9E2EF; --mut:#5B6B85; --txt:#16233F;
  --cyan:#22D3EE; --cyan-d:#0E9DB5; --amber:#F59E0B; --red:#EF4444; --green:#10B981;
  --disp:"Space Grotesk","IBM Plex Sans Arabic",sans-serif;
  --body:"IBM Plex Sans","IBM Plex Sans Arabic",sans-serif;
  --mono:"IBM Plex Mono",monospace;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--txt);background:var(--glass);line-height:1.6}
[dir="rtl"] body,[dir="rtl"]{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",sans-serif}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
a{color:var(--cyan-d);text-decoration:none} a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--disp);color:var(--ink);line-height:1.25;letter-spacing:-.01em}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{font-family:"IBM Plex Sans Arabic",sans-serif;font-weight:700}
.mono{font-family:var(--mono)}

/* ---- signature: the fiber strand with a travelling light pulse ---- */
.fiber-line{position:relative;height:2px;background:linear-gradient(90deg,transparent,var(--line) 8%,var(--line) 92%,transparent);overflow:hidden}
.fiber-line .pulse{position:absolute;top:-1px;height:4px;width:90px;border-radius:4px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.15),var(--cyan),#fff,var(--cyan),rgba(34,211,238,.15),transparent);
  filter:drop-shadow(0 0 6px rgba(34,211,238,.9));animation:travel 4.5s linear infinite}
.fiber-line.dim .pulse{opacity:.6}
.fiber-line .pulse.slow{animation-duration:8s}
@keyframes travel{from{left:-120px}to{left:calc(100% + 120px)}}
[dir="rtl"] .fiber-line .pulse{animation-name:travel-r}
@keyframes travel-r{from{right:-120px;left:auto}to{right:calc(100% + 120px);left:auto}}
@media (prefers-reduced-motion: reduce){.fiber-line .pulse{animation:none;opacity:0}}

/* ---- header ---- */
.site-head{background:var(--ink);position:sticky;top:0;z-index:50}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--disp);font-weight:600;font-size:1.05rem}
.brand:hover{text-decoration:none}
.brand-mark{width:26px;height:26px;border-radius:50%;border:2px solid var(--cyan);display:inline-flex;align-items:center;justify-content:center;position:relative}
.brand-mark i{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.brand.small{color:var(--ink);font-size:.95rem}
.brand.small .brand-mark{border-color:var(--cyan-d)} .brand.small i{background:var(--cyan-d);box-shadow:none}
.nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.nav a{color:#C6D3E8;font-size:.92rem}
.nav a:hover{color:#fff;text-decoration:none}
.btn-line{border:1px solid #3A4A6E;border-radius:8px;padding:5px 12px}
.lang-sw{border:1px solid var(--cyan);color:var(--cyan)!important;border-radius:8px;padding:5px 12px;font-weight:600}

/* ---- hero ---- */
.hero{background:var(--ink);color:#E7EEF9;padding:64px 0 72px;position:relative;overflow:hidden}
.hero h1{color:#fff;font-size:clamp(1.7rem,4vw,2.7rem);max-width:760px;margin:0 0 16px}
.hero p{max-width:640px;color:#AFC0DC;font-size:1.05rem;margin:0 0 28px}
.hero .wl{position:absolute;inset-inline-end:24px;top:22px;font-family:var(--mono);color:#31406b;font-size:.8rem;letter-spacing:.2em}
.btn{display:inline-block;background:var(--cyan);color:#06202a;font-weight:600;border:none;border-radius:10px;
  padding:12px 22px;font-size:1rem;cursor:pointer}
.btn:hover{background:#3ddcf5;text-decoration:none}
.btn.ghost{background:transparent;color:var(--cyan);border:1.5px solid var(--cyan)}
.btn.amber{background:var(--amber);color:#2b1900}
.btn.sm{padding:8px 14px;font-size:.9rem;border-radius:8px}
.hero .btn{margin-inline-end:12px;margin-bottom:8px}
.hero-strand{margin-top:44px}
.hero-stats{display:flex;gap:34px;margin-top:36px;flex-wrap:wrap}
.hstat b{display:block;font-family:var(--mono);font-size:1.5rem;color:var(--cyan)}
.hstat span{color:#8DA2C6;font-size:.85rem}

/* ---- sections & cards ---- */
.sec{padding:56px 0}
.sec.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec h2{font-size:1.6rem;margin:0 0 8px}
.sec .lead{color:var(--mut);max-width:700px;margin:0 0 30px}
.grid{display:grid;gap:18px}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px}
.card h3{margin:0 0 8px;font-size:1.08rem}
.card p{margin:0;color:var(--mut);font-size:.94rem}
.badge{display:inline-block;font-family:var(--mono);font-size:.74rem;background:var(--ink);color:var(--cyan);
  border-radius:6px;padding:3px 8px;margin-bottom:10px}
.badge.amber{background:#7c4a03;color:#ffd9a1}
.badge.soft{background:#E5F7FB;color:var(--cyan-d)}
.kv{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.kv span{font-size:.78rem;background:var(--glass);border:1px solid var(--line);border-radius:6px;padding:3px 8px;color:var(--mut)}

/* level cards */
.level-card{position:relative;border-top:3px solid var(--cyan)}
.level-card.b{border-top-color:var(--amber)}
.level-card.c{border-top-color:var(--ink)}
.level-code{font-family:var(--mono);font-weight:600;font-size:1.3rem;color:var(--ink)}

/* standards */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.filters a{font-size:.85rem;border:1px solid var(--line);background:#fff;border-radius:20px;padding:6px 14px;color:var(--mut)}
.filters a.on{background:var(--ink);color:var(--cyan);border-color:var(--ink)}
.filters a:hover{text-decoration:none}
.std-card .code{font-family:var(--mono);font-weight:600;color:var(--ink);font-size:1rem}
.std-card .body-tag{font-size:.72rem;color:var(--cyan-d);font-weight:600;letter-spacing:.08em}

/* best practices */
.bp{display:flex;gap:18px;align-items:flex-start}
.bp .n{font-family:var(--mono);color:var(--cyan-d);font-size:1.05rem;min-width:2.2em;border:1.5px solid var(--cyan);
  border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;flex:none}
.bp .refs{font-family:var(--mono);font-size:.74rem;color:var(--mut);margin-top:8px}

/* exam */
.exam-top{position:sticky;top:56px;background:var(--ink);color:#fff;z-index:40;border-radius:0 0 12px 12px}
.exam-top .in{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;gap:12px;flex-wrap:wrap}
.timer{font-family:var(--mono);font-size:1.15rem;color:var(--cyan)}
.timer.warn{color:var(--amber)} .timer.crit{color:var(--red)}
.progress{height:6px;background:#22304f;border-radius:4px;overflow:hidden;flex:1;min-width:130px}
.progress i{display:block;height:100%;background:var(--cyan);width:0%}
.qcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;margin:16px 0}
.qcard .qn{font-family:var(--mono);color:var(--cyan-d);font-size:.8rem;margin-bottom:8px}
.qcard .qt{font-weight:500;margin-bottom:14px}
.opt{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);border-radius:10px;
  padding:11px 14px;margin-bottom:9px;cursor:pointer;font-size:.95rem}
.opt:hover{border-color:var(--cyan)}
.opt input{margin-top:3px;accent-color:var(--cyan-d)}
.opt.sel{border-color:var(--cyan-d);background:#EFFBFE}
.exam-nav{display:flex;justify-content:space-between;gap:12px;margin:20px 0 60px}
.qmap{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.qmap a{width:30px;height:30px;border:1px solid var(--line);border-radius:6px;display:flex;align-items:center;
  justify-content:center;font-size:.75rem;font-family:var(--mono);color:var(--mut);background:#fff}
.qmap a.done{background:var(--ink);color:var(--cyan);border-color:var(--ink)}
.qmap a:hover{text-decoration:none;border-color:var(--cyan)}

/* result / verify */
.big-verdict{font-family:var(--disp);font-size:2rem;margin:8px 0}
.big-verdict.ok{color:var(--green)} .big-verdict.no{color:var(--red)}
.scorebar{height:14px;background:#E6EDF7;border-radius:8px;overflow:hidden;max-width:420px;margin:14px 0}
.scorebar i{display:block;height:100%;background:var(--cyan-d)}
.v-box{border-radius:14px;padding:22px;margin-top:20px;border:1.5px solid var(--line);background:#fff}
.v-box.active{border-color:var(--green);background:#F0FDF7}
.v-box.expired{border-color:var(--amber);background:#FFFAF0}
.v-box.revoked,.v-box.none{border-color:var(--red);background:#FEF2F2}
.v-title{font-family:var(--disp);font-size:1.2rem;margin-bottom:10px}
.v-box table{border-collapse:collapse}
.v-box td{padding:4px 14px 4px 0;font-size:.95rem}
[dir="rtl"] .v-box td{padding:4px 0 4px 14px}
.v-box td:first-child{color:var(--mut)}

/* certificate */
.cert-page{background:#fff;max-width:860px;margin:34px auto;border:1px solid var(--line);border-radius:6px;
  padding:0;overflow:hidden;box-shadow:0 8px 30px rgba(11,18,38,.08)}
.cert-band{background:var(--ink);padding:26px 40px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:12px}
.cert-band .brand-txt{font-family:var(--disp);font-size:1.15rem}
.cert-lvl{font-family:var(--mono);color:var(--cyan);font-size:.95rem}
.cert-body{padding:44px 48px;text-align:center}
.cert-body .who{font-family:var(--disp);font-size:2rem;color:var(--ink);margin:10px 0}
.cert-body .what{font-size:1.06rem;color:var(--txt);max-width:560px;margin:0 auto 8px}
.cert-meta{display:flex;justify-content:center;gap:38px;margin:26px 0 8px;flex-wrap:wrap}
.cert-meta div b{display:block;font-family:var(--mono);color:var(--ink)}
.cert-meta div span{font-size:.8rem;color:var(--mut)}
.cert-qr{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:26px;flex-wrap:wrap}
.cert-qr img{width:120px;height:120px;border:1px solid var(--line);border-radius:8px}
.cert-qr .hint{max-width:280px;font-size:.8rem;color:var(--mut);text-align:start}
.cert-ref{font-family:var(--mono);font-size:1.05rem;letter-spacing:.08em;color:var(--ink)}
@media print{.site-head,.site-foot,.no-print{display:none!important}
  .cert-page{box-shadow:none;border:none;margin:0}body{background:#fff}}

/* forms, tables, admin */
.form{max-width:420px;margin:44px auto;background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px}
.form label{display:block;font-size:.85rem;color:var(--mut);margin:14px 0 5px}
.form input{width:100%;border:1.5px solid var(--line);border-radius:9px;padding:10px 12px;font-size:1rem;font-family:inherit}
.form input:focus{outline:2px solid var(--cyan);border-color:var(--cyan)}
.form .btn{width:100%;margin-top:20px}
.flash{background:#FEF2F2;border:1px solid #FECACA;color:#991B1B;border-radius:10px;padding:10px 16px;margin:16px 0}
.tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tbl th{background:var(--ink);color:#C6D3E8;text-align:start;font-size:.78rem;letter-spacing:.05em;padding:10px 12px}
.tbl td{padding:9px 12px;border-top:1px solid var(--line);font-size:.9rem}
.pill{font-size:.74rem;border-radius:12px;padding:3px 10px;font-weight:600}
.pill.ok{background:#DCFCE7;color:#166534}.pill.no{background:#FEE2E2;color:#991B1B}
.pill.mid{background:#FEF3C7;color:#92400E}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:28px}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center}
.stat b{font-family:var(--mono);font-size:1.5rem;color:var(--ink);display:block}
.stat span{font-size:.8rem;color:var(--mut)}
.partner-tier h3{margin:34px 0 14px;font-size:1.1rem}
.p-card{display:flex;flex-direction:column;gap:6px}
.p-card .p-name{font-weight:600;color:var(--ink)}
.foot-in{display:flex;justify-content:space-between;gap:26px;padding:26px 20px;flex-wrap:wrap}
.site-foot{background:#EDF2F9;margin-top:60px}
.foot-note{font-size:.8rem;color:var(--mut);max-width:480px}
.foot-links{display:flex;flex-direction:column;gap:6px;font-size:.9rem}
.lesson{border-inline-start:3px solid var(--cyan);padding-inline-start:18px;margin-bottom:26px}
.lesson h3{margin:0 0 6px}
.pager{display:flex;gap:8px;margin:18px 0}
.pager a{border:1px solid var(--line);background:#fff;border-radius:8px;padding:5px 12px;font-size:.85rem}
.pager a.on{background:var(--ink);color:var(--cyan)}
@media (max-width:640px){.hero{padding:44px 0 54px}.cert-body{padding:30px 18px}.cert-band{padding:20px}}
:focus-visible{outline:2px solid var(--cyan-d);outline-offset:2px}

/* ===== v2 polish ===== */
.logo{flex:none;border-radius:10px}
.brand{gap:10px}
.nav{align-items:center}
.nav-grp{position:relative}
.nav-grp-t{cursor:default;color:var(--mut);padding:8px 4px}
.nav-grp:hover .nav-grp-t{color:var(--cyan)}
.nav-drop{display:none;position:absolute;top:100%;inset-inline-start:0;background:#0E1A33;border:1px solid #1E2C4D;border-radius:12px;padding:8px;min-width:220px;z-index:40;box-shadow:0 14px 34px rgba(0,0,0,.45)}
.nav-grp:hover .nav-drop{display:block}
.nav-drop a{display:block;padding:9px 12px;border-radius:8px}
.nav-drop a:hover{background:#16233F}
.nav-burger{display:none;background:none;border:1px solid #1E2C4D;color:var(--txt);border-radius:10px;padding:6px 12px;font-size:1.1rem}
@media(max-width:900px){
  .nav-burger{display:block}
  .nav{display:none;position:absolute;top:64px;inset-inline:12px;background:#0E1A33;border:1px solid #1E2C4D;border-radius:14px;padding:14px;flex-direction:column;align-items:stretch;gap:4px;z-index:50}
  body.nav-open .nav{display:flex}
  .nav-drop{display:block;position:static;border:none;box-shadow:none;padding:0 0 0 12px}
  .nav-grp-t{display:block;padding:8px 4px}
}
.crumb{color:var(--mut);font-size:.9rem;margin-bottom:10px}
.crumb a{color:var(--cyan)}
.page.narrow{max-width:820px}
.lead{color:var(--mut);max-width:70ch;margin-bottom:22px;font-size:1.05rem}
.diagram{margin:18px 0 26px;background:#0B1226;border:1px solid #1E2C4D;border-radius:16px;padding:10px}
.lesson-body{max-width:76ch;font-size:1.04rem;line-height:1.85}
.lesson-body h3{margin:26px 0 8px;color:var(--cyan);font-family:'Space Grotesk','IBM Plex Sans Arabic',sans-serif;font-size:1.12rem}
.lesson-body p{margin:0 0 14px;color:#C9D6EA}
.lesson-body strong{color:#fff}
.std-body{max-width:82ch}
.lesson-link{display:block;text-decoration:none;transition:.15s;border:1px solid transparent}
.lesson-link:hover{border-color:var(--cyan);transform:translateY(-1px)}
.done-dot,.todo-dot{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-size:.85rem;margin-inline-end:8px}
.done-dot{background:var(--green,#10B981);color:#04241a}
.todo-dot{background:#16233F;color:var(--mut);border:1px solid #1E2C4D}
.quiz-badge{display:inline-block;margin-top:8px;background:#16233F;border:1px solid #1E2C4D;color:var(--cyan);border-radius:999px;padding:2px 12px;font-size:.8rem}
.progress-bar{height:8px;background:#16233F;border-radius:99px;overflow:hidden;margin:14px 0 4px}
.progress-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),#0E9DB5)}
.small{font-size:.85rem}
.quizbox{margin-top:30px;max-width:76ch}
.qq{margin:16px 0}
.qq-t{font-weight:600;margin-bottom:8px}
.quizbox .opt{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border:1px solid #1E2C4D;border-radius:10px;margin:6px 0;cursor:pointer}
.quizbox .opt.sel{border-color:var(--cyan);background:#0E2A3A}
.quiz-res{margin-top:10px;color:var(--amber);font-weight:600}
.lesson-nav{display:flex;justify-content:space-between;gap:12px;margin-top:34px;max-width:76ch}
.btn.ghost{background:transparent;border:1px solid #2A3B60;color:var(--txt)}
.foi-grid .foi-card{display:block;text-decoration:none;transition:.15s}
.foi-card:hover{transform:translateY(-2px);border-color:var(--cyan)}
.foi-code{font-family:'IBM Plex Mono',monospace;color:var(--amber);font-weight:600;margin-bottom:8px}
.foi-code.big{font-size:1.15rem}
.foi-code .rev{color:var(--mut);font-weight:400;font-size:.8em}
.refs{font-size:.82rem;margin-top:8px}
.foi-head{margin-bottom:22px}
.faq-list details{margin-bottom:12px;padding:16px 20px}
.faq-list summary{cursor:pointer;font-weight:600;font-size:1.02rem}
.faq-list p{margin:10px 0 0;color:var(--mut);line-height:1.7}
.dom-table{width:100%;border-collapse:collapse;margin-top:8px}
.dom-table td{padding:7px 8px;border-bottom:1px solid #16233F;font-size:.92rem}
.dom-name{text-transform:capitalize;color:#C9D6EA}
.dom-table tr.weak .dom-name{color:var(--amber)}
.mini-bar{height:7px;background:#16233F;border-radius:99px;overflow:hidden}
.mini-bar i{display:block;height:100%;background:var(--cyan)}
tr.weak .mini-bar i{background:var(--amber)}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.lesson-h{max-width:76ch}

/* ===== v3 UI/UX polish (visual only) ===== */

/* smoother global feel */
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:rgba(34,211,238,.35)}
html{scrollbar-color:#9db2cf var(--glass)}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--glass)}
::-webkit-scrollbar-thumb{background:#B9C8DF;border-radius:8px;border:2px solid var(--glass)}
::-webkit-scrollbar-thumb:hover{background:#93A9C9}

/* page entrance */
main{animation:pagein .35s ease both}
@keyframes pagein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){main{animation:none}}

/* accessible focus */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2.5px solid var(--cyan);outline-offset:2px;border-radius:8px}

/* header depth */
.site-head{box-shadow:0 6px 24px rgba(6,12,30,.35);backdrop-filter:saturate(1.2)}
.nav a{position:relative;padding:6px 2px;transition:color .15s}
.nav a:not(.btn-line):not(.lang-sw)::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;
  background:var(--cyan);border-radius:2px;transform:scaleX(0);transform-origin:center;transition:transform .2s}
.nav a:not(.btn-line):not(.lang-sw):hover::after{transform:scaleX(1)}
.btn-line{transition:.15s}
.btn-line:hover{border-color:var(--cyan);color:#fff}
.lang-sw{transition:.15s}
.lang-sw:hover{background:var(--cyan);color:#06202a!important;text-decoration:none}

/* hero glow + subtle grid */
.hero{background:
  radial-gradient(700px 340px at 18% -10%,rgba(34,211,238,.16),transparent 60%),
  radial-gradient(560px 300px at 92% 115%,rgba(245,158,11,.10),transparent 60%),
  var(--ink)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(199,214,240,.10) 1px,transparent 1px);
  background-size:26px 26px}
.hero h1{text-wrap:balance}
.hstat b{text-shadow:0 0 18px rgba(34,211,238,.45)}

/* buttons: depth + press */
.btn,.btn-primary{box-shadow:0 4px 14px rgba(34,211,238,.30),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .12s,box-shadow .12s,background .12s}
.btn:hover,.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(34,211,238,.38)}
.btn:active,.btn-primary:active{transform:translateY(0);box-shadow:0 2px 8px rgba(34,211,238,.30)}
.btn.ghost,.btn-ghost{box-shadow:none}
.btn.ghost:hover,.btn-ghost:hover{background:rgba(34,211,238,.10);transform:translateY(-1px)}
.btn.amber{box-shadow:0 4px 14px rgba(245,158,11,.35)}

/* cards: layered depth + lift */
.card{box-shadow:0 1px 2px rgba(11,18,38,.05),0 6px 18px rgba(11,18,38,.05);
  transition:transform .16s,box-shadow .16s,border-color .16s}
.card:hover{box-shadow:0 2px 4px rgba(11,18,38,.06),0 14px 30px rgba(11,18,38,.10)}
a.card:hover,.lesson-link:hover,.foi-card:hover,.lesson-card:hover{transform:translateY(-3px);border-color:var(--cyan)}
.card h3{letter-spacing:-.005em}

/* section headers with accent tick */
.sec h2,.page-h,main h1{position:relative}
.page-h::after,.sec h2::after{content:"";display:block;width:52px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--cyan),var(--amber));margin-top:10px}
[dir="rtl"] .page-h::after,[dir="rtl"] .sec h2::after{background:linear-gradient(-90deg,var(--cyan),var(--amber))}

/* forms */
input,select,textarea{transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--cyan)!important;box-shadow:0 0 0 3px rgba(34,211,238,.18)}

/* lesson reading comfort */
.lesson-body,.lbody{letter-spacing:.005em}
.lesson-body h3,.lbody h3{display:flex;align-items:center;gap:10px}
.lesson-body h3::before,.lbody h3::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 8px rgba(34,211,238,.7);flex:none}
.diagram{box-shadow:0 10px 30px rgba(11,18,38,.25);transition:box-shadow .2s}
.diagram:hover{box-shadow:0 14px 36px rgba(11,18,38,.32)}
.diagram svg{display:block;border-radius:10px}

/* quiz options */
.quizbox .opt{transition:border-color .13s,background .13s,transform .13s}
.quizbox .opt:hover{border-color:var(--cyan-d);transform:translateX(2px)}
[dir="rtl"] .quizbox .opt:hover{transform:translateX(-2px)}
.quizbox .opt input{accent-color:var(--cyan-d)}
.quizbox .opt.sel{box-shadow:0 0 0 3px rgba(34,211,238,.15)}

/* progress bars glow */
.progress-bar span,.pbar i,.mini-bar i,#prog{box-shadow:0 0 10px rgba(34,211,238,.5)}
tr.weak .mini-bar i{box-shadow:0 0 10px rgba(245,158,11,.5)}

/* FAQ */
details.card summary{list-style:none;position:relative;padding-inline-end:30px}
details.card summary::-webkit-details-marker{display:none}
details.card summary::after{content:"+";position:absolute;inset-inline-end:2px;top:-2px;
  font-size:1.3rem;color:var(--cyan-d);transition:transform .2s}
details[open].card summary::after{transform:rotate(45deg)}
details.card{transition:border-color .15s}
details[open].card{border-color:var(--cyan)}

/* dropdown nav animation */
.nav-drop{animation:dropin .16s ease both}
@keyframes dropin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* footer */
.site-foot{background:linear-gradient(180deg,#fff, #EEF3FA)}
.foot-links a{transition:color .13s}
.foot-links a:hover{color:var(--cyan-d)}

/* tables */
.dom-table tr{transition:background .12s}
.dom-table tr:hover{background:rgba(34,211,238,.05)}

/* flash */
.flash{animation:pagein .3s ease both;border-inline-start:4px solid var(--cyan)}

/* certificate print stays clean */
@media print{.card,.cert{box-shadow:none!important}}

/* ===== v4 visible redesign (Flask templates) ===== */
body{background:
  radial-gradient(900px 500px at 100% 0%, rgba(34,211,238,.07), transparent 55%),
  radial-gradient(700px 420px at 0% 30%, rgba(245,158,11,.06), transparent 55%),
  linear-gradient(180deg,#F2F6FC,#E9F0F9)}
main h1::after{content:"";display:block;width:64px;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--cyan),var(--amber));margin-top:12px;
  box-shadow:0 0 12px rgba(34,211,238,.5)}
main h1.page-h::after{width:64px;height:4px}
.site-head{background:linear-gradient(180deg,#0B1226,#0D1730)}
.brand-txt{background:linear-gradient(90deg,#fff,#9FE8F6);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav a{border-radius:8px;padding:7px 11px}
.nav a:hover{background:rgba(34,211,238,.12)}
.hero{border-radius:0 0 28px 28px;
  background:
   radial-gradient(720px 360px at 15% -12%, rgba(34,211,238,.22), transparent 60%),
   radial-gradient(560px 320px at 95% 120%, rgba(245,158,11,.16), transparent 60%),
   linear-gradient(160deg,#0B1226 0%,#0E1B38 60%,#0B1226 100%)}
.hero h1{background:linear-gradient(92deg,#FFFFFF 30%,#7DE7F7 75%,#F6C560);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.btn{background:linear-gradient(120deg,#22D3EE,#3ddcf5);border-radius:12px}
.btn.ghost{background:transparent}
.btn.amber{background:var(--amber)}
.card{border-radius:16px;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--cyan),var(--amber));opacity:.85}
.badge{background:linear-gradient(120deg,#0B1226,#14325B);border:1px solid rgba(34,211,238,.35)}
.crumb{background:#fff;border:1px solid #DCE5F2;border-radius:99px;display:inline-block;
  padding:6px 16px;box-shadow:0 2px 8px rgba(11,18,38,.05)}
.site-foot{background:linear-gradient(180deg,#0B1226,#0A0F20)}
.site-foot,.site-foot .foot-note,.foot-links a{color:#8DA2C6}
.site-foot .brand.small{color:#E7EEF9}
.foot-links a:hover{color:#7DE7F7}