@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Cormorant+Garamond:wght@600;700&display=swap');

:root{
  --bg:#0b1020;
  --surface:#131b37;
  --surface-2:#0f1731;
  --surface-3:#192246;
  --text:#e9ecf8;
  --muted:#a4aed0;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.16);
  --accent:#b14cff;
  --accent-strong:#5847d6;
  --accent-cyan:#28e0ff;
  --accent-pink:#ff4fa3;
  --ok:#39c793;
  --err:#ff8ea8;
  --radius:14px;
  --shadow-sm:0 10px 20px rgba(0,0,0,.22);
  --shadow:0 20px 44px rgba(0,0,0,.34);
  --shadow-deep:0 30px 72px rgba(0,0,0,.46);
  --inner-light:0 1px 0 rgba(255,255,255,.05) inset, 0 0 0 1px rgba(255,255,255,.03) inset;
  --angel-glow:rgba(130,175,255,.12);
  --angel-gold:rgba(255,79,163,.10);
  --angel-blue:rgba(0,212,255,.10);
}
body.theme-dark{
  --bg:#080c18;
  --surface:#0f1630;
  --surface-2:#0c1228;
  --surface-3:#141d3f;
  --text:#edf0ff;
  --muted:#a9b2d5;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.14);
  --accent:#b14cff;
  --accent-strong:#6a5ce8;
  --accent-cyan:#28e0ff;
  --accent-pink:#ff4fa3;
  --ok:#42d79f;
  --err:#ff9bb4;
  --shadow-sm:0 12px 24px rgba(0,0,0,.28);
  --shadow:0 24px 52px rgba(0,0,0,.50);
  --shadow-deep:0 36px 82px rgba(0,0,0,.60);
  --inner-light:0 1px 0 rgba(255,255,255,.04) inset, 0 0 0 1px rgba(255,255,255,.02) inset;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  font-family:"Inter","Plus Jakarta Sans","Manrope","Segoe UI",Arial,sans-serif;
  color:var(--text);
  background:
    linear-gradient(180deg, rgba(8,12,24,.92), rgba(8,12,24,.98)),
    radial-gradient(1100px 520px at 18% 8%, rgba(108,92,231,.18) 0%, transparent 60%),
    radial-gradient(900px 520px at 88% 18%, rgba(0,212,255,.12) 0%, transparent 60%),
    radial-gradient(900px 600px at 60% 110%, rgba(255,79,163,.08) 0%, transparent 60%),
    url("/assets/skillao/hero.png") center top / cover fixed no-repeat,
    var(--bg);
}
body.theme-dark{
  background:
    linear-gradient(180deg, rgba(8,12,24,.92), rgba(8,12,24,.98)),
    radial-gradient(1100px 520px at 18% 8%, rgba(108,92,231,.18) 0%, transparent 60%),
    radial-gradient(900px 520px at 88% 18%, rgba(0,212,255,.12) 0%, transparent 60%),
    radial-gradient(900px 600px at 60% 110%, rgba(255,79,163,.08) 0%, transparent 60%),
    url("/assets/skillao/hero.png") center top / cover fixed no-repeat,
    var(--bg);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,0) 28%, rgba(255,255,255,.06) 46%, rgba(255,255,255,0) 62%);
  opacity:.32;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    url("/assets/skillao/hero.png") center top / 100% auto repeat-y,
    radial-gradient(520px 300px at 14% 20%, rgba(108,92,231,.12), transparent 72%),
    radial-gradient(620px 340px at 86% 14%, rgba(0,212,255,.08), transparent 76%),
    radial-gradient(680px 360px at 52% 68%, rgba(255,79,163,.06), transparent 78%);
  opacity:.22;
}
body.theme-dark::before{
  background:linear-gradient(115deg, rgba(255,255,255,0) 34%, rgba(255,255,255,.05) 48%, rgba(255,255,255,0) 64%);
  opacity:.24;
}
body.theme-dark::after{
  background:
    url("/assets/skillao/hero.png") center top / 100% auto repeat-y,
    radial-gradient(460px 260px at 14% 20%, rgba(124,109,255,.10), transparent 74%),
    radial-gradient(560px 300px at 86% 14%, rgba(39,221,255,.07), transparent 78%),
    radial-gradient(620px 340px at 52% 68%, rgba(255,99,175,.06), transparent 80%);
  opacity:.18;
}
.container{max-width:1560px;margin:0 auto;padding:24px 24px 56px;position:relative;z-index:1}
.card{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(140% 120% at 12% -10%, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 42%, transparent 70%),
    radial-gradient(90% 70% at 100% 0%, rgba(39,221,255,.06), transparent 66%),
    linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid color-mix(in srgb, var(--line) 92%, transparent);
  border-radius:calc(var(--radius) + 2px);
  box-shadow:var(--shadow), var(--inner-light);
  backdrop-filter:none !important;
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(260px 120px at 16% 8%, var(--angel-glow), transparent 72%),
    radial-gradient(220px 110px at 88% 12%, var(--angel-gold), transparent 74%),
    radial-gradient(280px 140px at 60% 110%, var(--angel-blue), transparent 78%);
  opacity:.34;
  transition:opacity .22s ease, transform .22s ease;
}
.card::after{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:calc(var(--radius) + 12px);
  pointer-events:none;
  background:
    radial-gradient(52% 38% at 20% 18%, rgba(255,255,255,.52), transparent 78%),
    radial-gradient(44% 34% at 84% 14%, rgba(242,227,193,.34), transparent 82%),
    radial-gradient(48% 40% at 50% 88%, rgba(229,241,255,.26), transparent 84%);
  opacity:0;
  filter:blur(10px);
  transition:opacity .22s ease;
}
.card:hover{
  border-color:color-mix(in srgb, var(--line) 100%, rgba(255,79,163,.10));
  box-shadow:0 16px 28px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.04) inset;
  transform:translateY(-1px);
}
.card:hover::before{opacity:.22; transform:none}
.card:hover::after{opacity:.16}
.btn{min-height:44px;padding:10px 14px;border-radius:12px;border:1px solid rgba(40,224,255,.34);background:linear-gradient(135deg,color-mix(in srgb,var(--accent-cyan) 90%, #7fdfff), color-mix(in srgb,var(--accent) 55%, var(--accent-cyan)));color:#05101d;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 12px 24px rgba(0,0,0,.22), 0 8px 22px rgba(40,224,255,.14);line-height:1.2;text-align:center;white-space:normal;transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease}
.btn.primary{background:linear-gradient(135deg,var(--accent-cyan),color-mix(in srgb,var(--accent) 65%, var(--accent-cyan)));border-color:rgba(40,224,255,.38);color:#04101c;box-shadow:0 14px 28px rgba(40,224,255,.18), 0 6px 20px rgba(177,76,255,.12)}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,79,163,.52);background:linear-gradient(135deg, color-mix(in srgb,var(--accent-pink) 88%, #ff7abb), color-mix(in srgb,var(--accent-pink) 72%, var(--accent)));color:#fff1e7;box-shadow:0 16px 28px rgba(0,0,0,.28),0 8px 20px rgba(255,79,163,.20)}
.btn:active{transform:translateY(0);box-shadow:0 8px 16px rgba(0,0,0,.30) inset}
a.btn, a.btn:hover, a.btn:focus, a.btn:visited{ text-decoration:none; }
.btn.primary:hover{background:linear-gradient(135deg,var(--accent-pink),color-mix(in srgb,var(--accent) 78%, var(--accent-pink)));border-color:rgba(255,79,163,.58);color:#fff;box-shadow:0 0 0 1px rgba(255,79,163,.18) inset, 0 16px 30px rgba(255,79,163,.30), 0 0 24px rgba(255,79,163,.18)}
.input,select,textarea{width:100%;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:linear-gradient(180deg,rgba(11,16,32,.74),rgba(11,16,32,.86));color:var(--text);padding:12px;outline:none;box-shadow:0 6px 14px rgba(0,0,0,.16), 0 1px 0 rgba(255,255,255,.04) inset;font-size:16px;transition:border-color .16s ease, box-shadow .16s ease, background .16s ease}
.input::placeholder,textarea::placeholder{color:#8490b7}
.input:focus,select:focus,textarea:focus{border-color:rgba(255,79,163,.46);box-shadow:0 0 0 3px rgba(255,79,163,.14), 0 10px 20px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.04) inset;background:linear-gradient(180deg,rgba(13,19,38,.88),rgba(11,16,32,.94))}
.msg{display:none;padding:10px 12px;border-radius:10px;font-size:14px;background:rgba(17,23,50,.75);border:1px solid rgba(255,255,255,.10)}
.msg.ok{display:block;background:rgba(57,199,147,.10);border:1px solid rgba(57,199,147,.30);color:var(--ok)}
.msg.err{display:block;background:rgba(255,79,163,.10);border:1px solid rgba(255,79,163,.26);color:var(--err)}
.small{font-size:13px;color:var(--muted)}
.hidden{display:none!important}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.page-title{margin:0;font-size:clamp(30px,4vw,56px);line-height:1.04;font-family:"Cormorant Garamond","Playfair Display",Georgia,serif;letter-spacing:.01em}
.subtitle{margin:0;color:var(--muted);font-size:17px;line-height:1.45}
.grid{display:grid;gap:14px}
.theme-switcher{
  position:fixed;
  top:12px;
  right:12px;
  z-index:1200;
  display:none;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(11,16,32,.78);
  backdrop-filter:blur(10px);
  box-shadow:0 14px 30px rgba(0,0,0,.28), 0 0 20px rgba(108,92,231,.08);
}
.mode-label{font-size:12px;font-weight:700;color:var(--muted);line-height:1}
.mode-toggle{
  position:relative;
  width:52px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(34,44,84,.95),rgba(20,27,55,.96));
  padding:0;
  cursor:pointer;
}
.mode-toggle-knob{
  position:absolute;
  top:2px;
  left:2px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:linear-gradient(180deg,#fff,#e8ecff);
  box-shadow:0 2px 8px rgba(0,0,0,.28), 0 0 10px rgba(255,79,163,.12);
  transition:transform .2s ease;
}
.mode-toggle.is-dark{
  background:linear-gradient(180deg,#2d3443,#1d2431);
  border-color:#364156;
}
.mode-toggle.is-dark .mode-toggle-knob{transform:translateX(24px)}
body.theme-dark .card{
  background:
    radial-gradient(140% 120% at 12% -10%, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 46%, transparent 70%),
    radial-gradient(100% 80% at 100% 0%, rgba(214,181,122,.05), transparent 68%),
    linear-gradient(180deg,var(--surface),var(--surface-2));
  border-color:color-mix(in srgb, var(--line) 90%, #3b465b);
  box-shadow:0 18px 38px rgba(0,0,0,.34), var(--inner-light);
}
body.theme-dark .card::before{
  background:
    radial-gradient(240px 110px at 16% 8%, rgba(175,205,255,.10), transparent 74%),
    radial-gradient(210px 100px at 88% 12%, rgba(214,181,122,.10), transparent 76%),
    radial-gradient(260px 130px at 60% 110%, rgba(160,180,255,.08), transparent 80%);
  opacity:.22;
}
body.theme-dark .card::after{
  background:
    radial-gradient(52% 38% at 20% 18%, rgba(170,205,255,.10), transparent 78%),
    radial-gradient(44% 34% at 84% 14%, rgba(214,181,122,.08), transparent 82%),
    radial-gradient(48% 40% at 50% 88%, rgba(160,180,255,.08), transparent 84%);
  filter:blur(12px);
}
body.theme-dark .card:hover{
  border-color:color-mix(in srgb, var(--accent) 24%, var(--line));
  box-shadow:0 22px 42px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.03) inset;
}
body.theme-dark .card:hover::before{opacity:.34}
body.theme-dark .card:hover::after{opacity:.38}
body.theme-dark .btn{background:linear-gradient(135deg,var(--accent-cyan),color-mix(in srgb,var(--accent) 62%, var(--accent-cyan)))!important;border-color:rgba(40,224,255,.34)!important;color:#04101c!important;box-shadow:0 12px 22px rgba(0,0,0,.22), 0 6px 18px rgba(40,224,255,.12)!important}

body.theme-dark .btn:hover{background:linear-gradient(135deg, color-mix(in srgb,var(--accent-pink) 88%, #ff7abb), color-mix(in srgb,var(--accent-pink) 72%, var(--accent)));border-color:rgba(255,79,163,.52);color:#fff1e7;box-shadow:0 14px 24px rgba(0,0,0,.28), 0 8px 18px rgba(255,79,163,.16)}
body.theme-dark .btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-cyan));border-color:transparent;color:#fff;box-shadow:0 14px 28px rgba(177,76,255,.26), 0 8px 20px rgba(40,224,255,.14)}
body.theme-dark .btn.primary:hover{background:linear-gradient(135deg,var(--accent-pink),color-mix(in srgb,var(--accent) 78%, var(--accent-pink)));border-color:rgba(255,79,163,.58);box-shadow:0 0 0 1px rgba(255,79,163,.18) inset, 0 16px 30px rgba(255,79,163,.28), 0 0 24px rgba(255,79,163,.18)}
body.theme-dark .input,
body.theme-dark select,
body.theme-dark textarea{
  background:linear-gradient(180deg,rgba(12,17,34,.84),rgba(9,13,26,.92));
  border-color:rgba(255,255,255,.10);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
}
body.theme-dark .input:focus,
body.theme-dark select:focus,
body.theme-dark textarea:focus{
  border-color:rgba(255,99,175,.44);
  box-shadow:0 0 0 3px rgba(255,99,175,.14), 0 1px 0 rgba(255,255,255,.04) inset;
}
body.theme-dark .mode-label-dark{color:var(--text)}
body:not(.theme-dark) .mode-label-light{color:var(--text)}
body.theme-dark .theme-switcher{background:rgba(20,24,33,.85);border-color:#2e3747;box-shadow:0 14px 30px rgba(0,0,0,.28), 0 0 20px rgba(140,170,255,.06)}
@media (max-width:760px){
  .container{padding:16px 12px 44px}
  .page-title{font-size:34px}
  .topbar{align-items:flex-start}
  .theme-switcher{top:8px;right:8px;padding:5px 6px;gap:6px}
  .theme-switcher .mode-label{display:none}
  .mode-toggle{width:48px;height:26px}
  .mode-toggle-knob{width:20px;height:20px}
  .mode-toggle.is-dark .mode-toggle-knob{transform:translateX(22px)}
  body::before, body::after{opacity:.4}
}

/* Single visual mode (Skillao only) */
body.theme-dark{background:
  linear-gradient(180deg, rgba(8,12,24,.92), rgba(8,12,24,.98)),
  radial-gradient(1100px 520px at 18% 8%, rgba(108,92,231,.18) 0%, transparent 60%),
  radial-gradient(900px 520px at 88% 18%, rgba(0,212,255,.12) 0%, transparent 60%),
  radial-gradient(900px 600px at 60% 110%, rgba(255,79,163,.08) 0%, transparent 60%),
  url("/assets/skillao/hero.png") center top / cover fixed no-repeat,
  var(--bg)
}
body.theme-dark::before{opacity:.32}
body.theme-dark::after{opacity:.85}
body.theme-dark .theme-switcher{display:none!important}

/* Light Brand Refresh 2026-03-04 */
:root{
  --bg:#f5f8ff;
  --surface:#ffffff;
  --surface-2:#f2f7ff;
  --surface-3:#eaf2ff;
  --text:#163057;
  --muted:#4d678f;
  --line:rgba(22,48,87,.14);
  --line-strong:rgba(22,48,87,.20);
  --accent:#0f4dbd;
  --accent-strong:#3caef6;
  --accent-cyan:#3caef6;
  --accent-pink:#dd490a;
  --ok:#1d8f66;
  --err:#c44f44;
  --shadow-sm:0 8px 18px rgba(15,58,121,.10);
  --shadow:0 16px 38px rgba(15,58,121,.12);
  --shadow-deep:0 24px 56px rgba(15,58,121,.14);
  --inner-light:0 1px 0 rgba(255,255,255,.82) inset, 0 0 0 1px rgba(22,48,87,.03) inset;
}

body,
body.theme-dark{
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 10% 10%, rgba(60,174,246,.22), transparent 62%),
    radial-gradient(960px 620px at 88% 12%, rgba(243,174,86,.18), transparent 64%),
    radial-gradient(900px 640px at 78% 80%, rgba(15,77,189,.16), transparent 66%),
    linear-gradient(180deg, rgba(245,248,255,.96), rgba(236,244,255,.98)),
    url("/assets/skillao/hero.png") center top / cover fixed no-repeat,
    var(--bg) !important;
}

body::before,
body::after,
body.theme-dark::before,
body.theme-dark::after{
  content:none !important;
  display:none !important;
}

.card,
body.theme-dark .card{
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(242,247,255,.96)) !important;
  border:1px solid rgba(22,48,87,.14) !important;
  box-shadow:0 14px 30px rgba(15,58,121,.12), 0 1px 0 rgba(255,255,255,.82) inset !important;
}

.card::before,
.card::after,
body.theme-dark .card::before,
body.theme-dark .card::after{
  opacity:.08 !important;
}

.btn,
body.theme-dark .btn{
  border:1px solid rgba(15,77,189,.34) !important;
  background:linear-gradient(135deg, #3caef6, #0f4dbd) !important;
  color:#ffffff !important;
  box-shadow:0 10px 24px rgba(15,77,189,.20) !important;
}

.btn:hover,
.btn.primary:hover,
body.theme-dark .btn:hover,
body.theme-dark .btn.primary:hover{
  border-color:rgba(221,73,10,.46) !important;
  background:linear-gradient(135deg, #f3ae56, #dd490a) !important;
  color:#fff8ef !important;
  box-shadow:0 14px 28px rgba(221,73,10,.22) !important;
}

.input,
select,
textarea,
body.theme-dark .input,
body.theme-dark select,
body.theme-dark textarea{
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(22,48,87,.18) !important;
  color:var(--text) !important;
  box-shadow:0 6px 14px rgba(15,58,121,.08) !important;
}

.input::placeholder,
textarea::placeholder{color:#6d82a8 !important}

.input:focus,
select:focus,
textarea:focus,
body.theme-dark .input:focus,
body.theme-dark select:focus,
body.theme-dark textarea:focus{
  border-color:rgba(60,174,246,.62) !important;
  box-shadow:0 0 0 3px rgba(60,174,246,.18), 0 8px 18px rgba(15,58,121,.10) !important;
}

.msg{background:rgba(255,255,255,.88); border:1px solid rgba(22,48,87,.14)}
.msg.ok{background:rgba(29,143,102,.10); border-color:rgba(29,143,102,.28)}
.msg.err{background:rgba(196,79,68,.10); border-color:rgba(196,79,68,.28)}

/* Shared Header (single-source component) */
:root{--header-logo-h:96px}
.site-header{position:sticky;top:0;z-index:1100;overflow:visible;margin:0;border-bottom:1px solid rgba(22,48,87,.10);background:linear-gradient(180deg, rgba(245,248,255,.96), rgba(245,248,255,.86));backdrop-filter:none;-webkit-backdrop-filter:none}
.site-header .inner{width:min(1560px, calc(100% - 48px));max-width:none;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 0;min-height:58px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand img{height:var(--header-logo-h);width:auto;max-width:100%;display:block;margin-top:0;margin-bottom:0;filter:drop-shadow(0 6px 14px rgba(15,77,189,.20))}
.header-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.header-nav a{color:#4d678f;text-decoration:none;font-weight:600;font-size:14px;padding:8px 10px;border-radius:10px;border:1px solid transparent}
.header-nav a:hover{color:#163057;background:rgba(60,174,246,.10);border-color:rgba(60,174,246,.22)}
.header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.header-actions .btn{min-height:36px;padding:0 12px;font-size:13px}
@media (max-width:980px){
  :root{--header-logo-h:84px}
  .brand img{margin-top:0;margin-bottom:0}
  .site-header .inner{width:min(1560px, calc(100% - 24px));min-height:54px}
  .header-nav{display:none}
}