/* ============================================================
   Identity Bytes — identity-bytes.com marketing layer
   iSkills-inspired light theme (purple / violet + pink gradient)
   Used by: home (index.html), track index pages, FAQ articles.
   Lab bodies keep the dark ib-sentrion.css theme.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ib-violet:#7c3aed;      /* primary */
  --ib-violet-600:#6d28d9;
  --ib-violet-700:#5b21b6;
  --ib-violet-300:#a78bfa;
  --ib-violet-050:#f5f3ff;
  --ib-pink:#ec4899;        /* gradient partner */
  --ib-fuchsia:#d946ef;
  --ib-grad:linear-gradient(90deg,var(--ib-violet),var(--ib-pink));
  --ib-grad-135:linear-gradient(135deg,var(--ib-violet-600),var(--ib-pink));
  --ib-ink:#0f1020;         /* headings */
  --ib-body:#4b5168;        /* body text */
  --ib-mute:#8890a6;        /* muted */
  --ib-line:#eceaf5;        /* hairline */
  --ib-line-2:#e2def2;
  --ib-bg:#ffffff;
  --ib-bg-soft:#f8f7fe;     /* lavender wash */
  --ib-bg-slate:#f8fafc;
  --ib-card:#ffffff;
  --ib-dark:#120a2a;        /* course-card dark bg */
  --ib-dark-2:#1c1140;
  --ib-shadow:0 18px 48px -20px rgba(91,33,182,.35);
  --ib-shadow-sm:0 10px 30px -16px rgba(91,33,182,.28);
  --ib-radius:18px;
  --ib-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ib-head:"Poppins",var(--ib-font);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--ib-font);
  color:var(--ib-body);
  background:var(--ib-bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
h1,h2,h3,h4,h5{font-family:var(--ib-head);color:var(--ib-ink);line-height:1.14;letter-spacing:-.02em;margin:0;}
a{color:var(--ib-violet);text-decoration:none;}
img{max-width:100%;display:block;}
.accent{color:var(--ib-violet);}
.grad-text{background:var(--ib-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ---------- Announcement bar ------------------------------ */
.topbar{background:#140a2e;color:#e9e4ff;font-size:13px;}
.topbar .wrap{display:flex;align-items:center;gap:14px;height:42px;}
.topbar .live{display:inline-flex;align-items:center;gap:7px;background:#ff4d6d;color:#fff;font-weight:700;font-size:11px;letter-spacing:.04em;padding:4px 10px;border-radius:999px;text-transform:uppercase;}
.topbar .live::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:ib-pulse 1.6s infinite;}
.topbar .msg{color:#cfc6ef;}
.topbar .msg b{color:#fff;}
.topbar .right{margin-left:auto;display:flex;gap:16px;align-items:center;color:#b9aee6;}
.topbar .right a{color:#cfc6ef;font-weight:600;}
@keyframes ib-pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- Nav ------------------------------------------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--ib-line);}
.nav .wrap{display:flex;align-items:center;gap:28px;height:72px;}
.brand-logo{display:flex;align-items:center;gap:10px;font-family:var(--ib-head);font-weight:800;font-size:22px;color:var(--ib-ink);letter-spacing:-.02em;}
.brand-logo .dot{width:34px;height:34px;border-radius:10px;background:var(--ib-grad-135);display:grid;place-items:center;color:#fff;font-size:17px;box-shadow:var(--ib-shadow-sm);}
.brand-logo b{color:var(--ib-violet);}
.nav nav{display:flex;gap:26px;margin-left:12px;}
.nav nav a{color:#3d4256;font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:6px;}
.nav nav a:hover{color:var(--ib-violet);}
.nav .cta{margin-left:auto;display:flex;gap:12px;align-items:center;}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--ib-head);font-weight:700;font-size:14px;padding:12px 22px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:transform .16s,box-shadow .16s,background .16s,color .16s;white-space:nowrap;}
.btn.primary{background:var(--ib-grad-135);color:#fff;box-shadow:var(--ib-shadow-sm);}
.btn.primary:hover{transform:translateY(-2px);box-shadow:var(--ib-shadow);}
.btn.ghost{background:#fff;color:var(--ib-violet);border-color:var(--ib-line-2);}
.btn.ghost:hover{border-color:var(--ib-violet);color:var(--ib-violet-700);}
.btn.light{background:var(--ib-violet-050);color:var(--ib-violet-700);}
.btn.light:hover{background:#ece7ff;}

/* ---------- Eyebrow --------------------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--ib-head);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ib-violet);}
.eyebrow::before{content:"";width:20px;height:2px;border-radius:2px;background:var(--ib-grad);}
.eyebrow.center{justify-content:center;}
.eyebrow.center::after{content:"";width:20px;height:2px;border-radius:2px;background:var(--ib-grad);}

/* ---------- Hero ------------------------------------------ */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(42rem 30rem at 88% -10%, rgba(236,72,153,.14), transparent 60%),
  radial-gradient(46rem 32rem at 8% 20%, rgba(124,58,237,.14), transparent 62%),
  var(--ib-bg-soft);}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:72px 24px 84px;}
.hero-badge{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--ib-line-2);border-radius:999px;padding:9px 16px;font-weight:600;font-size:13px;color:var(--ib-violet-700);box-shadow:var(--ib-shadow-sm);}
.hero-badge .i{width:20px;height:20px;border-radius:50%;background:var(--ib-grad-135);color:#fff;display:grid;place-items:center;font-size:11px;}
.hero h1{font-size:clamp(2.4rem,4.6vw,4rem);font-weight:800;color:var(--ib-ink);margin:22px 0 0;}
.hero h1 u{text-decoration:none;position:relative;color:var(--ib-violet);white-space:nowrap;}
.hero h1 u::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.16em;background:var(--ib-grad);border-radius:4px;opacity:.9;}
.hero p.lede{font-size:1.12rem;color:var(--ib-body);margin:22px 0 30px;max-width:52ch;}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;}
.hero-visual{position:relative;}
.hero-panel{background:var(--ib-dark);border-radius:24px;padding:30px;color:#fff;box-shadow:var(--ib-shadow);position:relative;overflow:hidden;min-height:340px;}
.hero-panel::before{content:"";position:absolute;inset:0;background:
  radial-gradient(20rem 14rem at 90% 0%, rgba(124,58,237,.5), transparent 60%),
  radial-gradient(18rem 12rem at 0% 100%, rgba(236,72,153,.4), transparent 60%);}
.hero-panel .pc{position:relative;z-index:1;}
.hero-panel .term-dots{display:flex;gap:7px;margin-bottom:16px;}
.hero-panel .term-dots i{width:11px;height:11px;border-radius:50%;display:inline-block;}
.hero-panel .term-dots i:nth-child(1){background:#ff5f57;}
.hero-panel .term-dots i:nth-child(2){background:#febc2e;}
.hero-panel .term-dots i:nth-child(3){background:#28c840;}
.hero-panel pre{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px;font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:12.5px;line-height:1.7;color:#e9e4ff;overflow:auto;}
.hero-panel pre .g{color:#7cff9a;}.hero-panel pre .v{color:#a78bfa;}.hero-panel pre .c{color:#8b84b0;}.hero-panel pre .y{color:#ffd479;}
.float-card{position:absolute;background:#fff;border-radius:16px;padding:14px 18px;box-shadow:var(--ib-shadow);display:flex;gap:12px;align-items:center;}
.float-card .fi{width:40px;height:40px;border-radius:12px;background:var(--ib-violet-050);color:var(--ib-violet);display:grid;place-items:center;font-size:18px;}
.float-card .fn{font-family:var(--ib-head);font-weight:800;color:var(--ib-ink);font-size:18px;line-height:1;}
.float-card .fl{font-size:11px;color:var(--ib-mute);font-weight:600;}
.float-card.a{top:24px;right:-14px;}
.float-card.b{bottom:26px;left:-18px;}

/* ---------- Stat strip ------------------------------------ */
.stripe{background:#fff;border-top:1px solid var(--ib-line);border-bottom:1px solid var(--ib-line);}
.stripe .wrap{display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:space-between;padding:20px 24px;}
.stripe .item{display:flex;align-items:center;gap:10px;color:#3d4256;font-weight:600;font-size:14px;}
.stripe .item i{color:var(--ib-violet);font-style:normal;}

/* ---------- Section shell --------------------------------- */
section.blk{padding:84px 0;}
section.blk.soft{background:var(--ib-bg-soft);}
section.blk.slate{background:var(--ib-bg-slate);}
.sec-head{text-align:center;max-width:60ch;margin:0 auto 48px;}
.sec-head h2{font-size:clamp(1.9rem,3.2vw,2.8rem);font-weight:800;margin:14px 0 12px;}
.sec-head p{color:var(--ib-body);font-size:1.05rem;margin:0;}
.sec-head.left{text-align:left;margin-left:0;}

/* ---------- Filter chips ---------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:38px;}
.chip{border:1px solid var(--ib-line-2);background:#fff;color:#3d4256;font-weight:600;font-size:13.5px;padding:9px 18px;border-radius:999px;cursor:pointer;transition:.16s;font-family:var(--ib-head);}
.chip:hover{border-color:var(--ib-violet-300);color:var(--ib-violet);}
.chip.active{background:var(--ib-grad-135);color:#fff;border-color:transparent;}

/* ---------- Program (track) cards ------------------------- */
.grid-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.pcard{background:var(--ib-card);border:1px solid var(--ib-line);border-radius:var(--ib-radius);overflow:hidden;box-shadow:var(--ib-shadow-sm);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--ib-shadow);}
.pcard .top{position:relative;background:var(--ib-dark);color:#fff;padding:22px 22px 26px;overflow:hidden;}
.pcard .top::before{content:"";position:absolute;inset:0;background:
  radial-gradient(14rem 10rem at 100% 0%, rgba(124,58,237,.55), transparent 62%),
  radial-gradient(12rem 9rem at 0% 120%, rgba(236,72,153,.42), transparent 60%);}
.pcard .top > *{position:relative;z-index:1;}
.pcard .catrow{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;}
.pcard .cat{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#fff;font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;font-family:var(--ib-head);}
.pcard .count{background:var(--ib-grad);color:#fff;font-weight:700;font-size:12px;padding:6px 12px;border-radius:999px;font-family:var(--ib-head);}
.pcard .kick{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#c3b8ec;font-weight:700;}
.pcard .top h3{color:#fff;font-size:1.28rem;font-weight:700;margin:6px 0 0;}
.pcard .body{padding:22px;display:flex;flex-direction:column;gap:14px;flex:1;}
.pcard .body p{margin:0;font-size:.94rem;color:var(--ib-body);}
.pcard .tags{display:flex;flex-wrap:wrap;gap:6px;}
.pcard .tags span{background:var(--ib-violet-050);color:var(--ib-violet-700);font-size:11px;font-weight:600;padding:4px 9px;border-radius:6px;}
.pcard .pfoot{margin-top:auto;display:flex;gap:10px;padding-top:6px;}
.pcard .pfoot a{flex:1;text-align:center;}
.pcard .lite{font-size:13px;padding:11px 14px;}

/* ---------- About ----------------------------------------- */
.about{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:center;}
.about-visual{position:relative;border-radius:24px;overflow:hidden;background:var(--ib-dark);min-height:380px;box-shadow:var(--ib-shadow);}
.about-visual::before{content:"";position:absolute;inset:0;background:
  radial-gradient(22rem 16rem at 20% 10%, rgba(124,58,237,.5), transparent 60%),
  radial-gradient(20rem 15rem at 100% 100%, rgba(236,72,153,.42), transparent 60%);}
.about-visual .lbl{position:absolute;left:26px;bottom:26px;z-index:1;color:#fff;}
.about-visual .lbl b{font-family:var(--ib-head);font-size:1.5rem;display:block;}
.about-visual .glyph{position:absolute;inset:0;display:grid;place-items:center;z-index:1;font-family:"JetBrains Mono",monospace;color:rgba(255,255,255,.14);font-size:8rem;font-weight:700;}
.about h2{font-size:clamp(1.9rem,3.2vw,2.7rem);font-weight:800;}
.about .feat{display:grid;gap:16px;margin-top:22px;}
.about .feat .f{display:flex;gap:14px;align-items:flex-start;}
.about .feat .fi{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:var(--ib-violet-050);color:var(--ib-violet);display:grid;place-items:center;font-size:19px;}
.about .feat .ft b{color:var(--ib-ink);font-family:var(--ib-head);display:block;margin-bottom:2px;}
.about .feat .ft span{font-size:.94rem;}

/* ---------- Feature strip (why) --------------------------- */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.why{background:#fff;border:1px solid var(--ib-line);border-radius:var(--ib-radius);padding:26px;box-shadow:var(--ib-shadow-sm);transition:transform .18s;}
.why:hover{transform:translateY(-4px);}
.why .wi{width:50px;height:50px;border-radius:14px;background:var(--ib-grad-135);color:#fff;display:grid;place-items:center;font-size:22px;margin-bottom:16px;box-shadow:var(--ib-shadow-sm);}
.why h4{font-size:1.1rem;margin-bottom:8px;}
.why p{margin:0;font-size:.93rem;}

/* ---------- FAQ ------------------------------------------- */
.faq-wrap{max-width:1000px;margin:0 auto;}
.faq-head{background:linear-gradient(135deg,#faf8ff,#f3effe);border:1px solid var(--ib-line-2);border-radius:22px;padding:34px 38px;display:flex;align-items:center;gap:26px;margin-bottom:26px;position:relative;overflow:hidden;}
.faq-head .q{flex:0 0 auto;width:74px;height:74px;border-radius:20px;background:var(--ib-grad-135);color:#fff;display:grid;place-items:center;font-size:34px;font-family:var(--ib-head);font-weight:800;box-shadow:var(--ib-shadow-sm);}
.faq-head h2{font-size:clamp(1.6rem,2.8vw,2.3rem);font-weight:800;margin-bottom:8px;}
.faq-head p{margin:0;font-size:.98rem;}
.faq-list{display:grid;gap:12px;}
.faq-item{background:#fff;border:1px solid var(--ib-line);border-radius:14px;overflow:hidden;transition:box-shadow .18s,border-color .18s;}
.faq-item[open]{border-color:var(--ib-violet-300);box-shadow:var(--ib-shadow-sm);}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 22px;font-family:var(--ib-head);font-weight:600;color:var(--ib-ink);font-size:1.02rem;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .fi{flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:var(--ib-violet-050);color:var(--ib-violet);display:grid;place-items:center;font-size:15px;}
.faq-item summary .plus{margin-left:auto;flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--ib-violet-050);color:var(--ib-violet);display:grid;place-items:center;font-size:18px;transition:transform .2s,background .2s,color .2s;}
.faq-item[open] summary .plus{transform:rotate(45deg);background:var(--ib-grad-135);color:#fff;}
.faq-item .ans{padding:0 22px 20px 70px;color:var(--ib-body);font-size:.97rem;}
.faq-item .ans p{margin:0 0 10px;}
.faq-item .ans p:last-child{margin-bottom:0;}
.faq-item .ans a{font-weight:600;border-bottom:1px solid var(--ib-violet-300);}

/* ---------- CTA band -------------------------------------- */
.cta-band{background:var(--ib-grad-135);border-radius:26px;padding:52px 48px;text-align:center;color:#fff;position:relative;overflow:hidden;box-shadow:var(--ib-shadow);}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(24rem 16rem at 10% 0%, rgba(255,255,255,.16), transparent 60%);}
.cta-band > *{position:relative;z-index:1;}
.cta-band h2{color:#fff;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;margin-bottom:12px;}
.cta-band p{color:#f0e9ff;max-width:56ch;margin:0 auto 26px;font-size:1.05rem;}
.cta-band .btn.primary{background:#fff;color:var(--ib-violet-700);}
.cta-band .btn.primary:hover{background:#f4f0ff;}
.cta-band .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);}
.cta-band .btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.1);}

/* ---------- Footer ---------------------------------------- */
.footer{background:#0f0a20;color:#c8c1e0;padding:64px 0 30px;}
.footer .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;}
.footer .brand-logo{color:#fff;}
.footer .brand-logo b{color:var(--ib-violet-300);}
.footer p{color:#9d95bd;font-size:.94rem;margin:16px 0 0;max-width:34ch;}
.footer h5{color:#fff;font-family:var(--ib-head);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.footer ul a{color:#a99fce;font-size:.94rem;}
.footer ul a:hover{color:#fff;}
.footer .bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:#8b83ab;font-size:13px;}
.footer .bottom a{color:var(--ib-violet-300);}

/* ---------- Article (FAQ page) body ----------------------- */
.article{max-width:820px;margin:0 auto;}
.article .lead{font-size:1.14rem;color:var(--ib-body);margin:0 0 8px;}
.article h2{font-size:1.55rem;margin:38px 0 14px;font-weight:800;}
.article h3{font-size:1.2rem;margin:26px 0 10px;font-weight:700;color:var(--ib-ink);}
.article p{margin:0 0 14px;}
.article ul{margin:0 0 16px;padding-left:22px;}
.article li{margin:7px 0;}
.article code{background:var(--ib-violet-050);color:var(--ib-violet-700);border-radius:5px;padding:2px 6px;font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:.88em;}
.kw{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0;}
.kw span{background:var(--ib-violet-050);color:var(--ib-violet-700);font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;}
.crumbs{color:var(--ib-mute);font-size:13px;font-weight:600;margin-bottom:16px;}
.crumbs a{color:var(--ib-mute);}
.crumbs a:hover{color:var(--ib-violet);}

/* ---------- Responsive ------------------------------------ */
@media(max-width:960px){
  .hero .wrap{grid-template-columns:1fr;padding:52px 24px 64px;}
  .hero-visual{order:-1;}
  .grid-cards{grid-template-columns:1fr 1fr;}
  .why-grid{grid-template-columns:1fr 1fr;}
  .about{grid-template-columns:1fr;}
  .footer .grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:860px){
  .nav nav{display:none;}
  .nav .cta .btn.ghost{display:none;}
  .topbar .msg{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .topbar .right{display:none;}
}
@media(max-width:640px){
  .grid-cards,.why-grid{grid-template-columns:1fr;}
  .footer .grid{grid-template-columns:1fr;}
  .faq-head{flex-direction:column;text-align:center;}
  section.blk{padding:60px 0;}
  .nav .wrap{gap:14px;}
  .brand-logo{font-size:19px;}
  .cta-band{padding:38px 24px;}
  .faq-item .ans{padding-left:22px;}
}
html,body{overflow-x:hidden;max-width:100%;}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;}}