
/* LogicByte premium home + skill landing refresh */
:root{--lb-blue:#1d4ed8;--lb-navy:#0b1631;--lb-orange:#f97316;--lb-ice:#eff6ff}
.skill-grid-enhanced{gap:22px;perspective:1000px}
.skill-grid-enhanced .skill-card{position:relative;isolation:isolate;overflow:hidden;min-height:276px;padding:25px 23px 23px;border-radius:23px;border:1px solid #dce6f6;background:linear-gradient(145deg,#fff 0%,#f8fbff 72%,#fff7ed 140%);box-shadow:0 8px 24px rgba(17,40,85,.045);transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s,border-color .38s}
.skill-grid-enhanced .skill-card:before{content:"";position:absolute;z-index:-1;width:180px;height:180px;right:-80px;top:-90px;border-radius:50%;background:radial-gradient(circle,rgba(96,165,250,.20),rgba(249,115,22,.07) 48%,transparent 72%);transition:transform .5s}
.skill-grid-enhanced .skill-card:after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:3px;border-radius:8px 8px 0 0;background:linear-gradient(90deg,#1d4ed8,#60a5fa,#f97316);transform:scaleX(.12);transform-origin:left;opacity:.5;transition:transform .4s,opacity .4s}
.skill-grid-enhanced .skill-card:hover{transform:translateY(-9px) rotateX(1deg);border-color:#a9c8ff;box-shadow:0 24px 48px rgba(30,64,175,.13)}
.skill-grid-enhanced .skill-card:hover:before{transform:scale(1.4) translate(-8px,8px)}
.skill-grid-enhanced .skill-card:hover:after{transform:scaleX(1);opacity:1}
.skill-logo-wrap{width:64px;height:64px;border-radius:19px;display:grid;place-items:center;background:linear-gradient(145deg,#eff6ff,#fff);border:1px solid #e0eaff;box-shadow:0 8px 18px rgba(30,64,175,.08);transition:transform .35s,box-shadow .35s}
.skill-logo{width:44px;height:44px;object-fit:contain;transition:transform .35s}
.skill-grid-enhanced .skill-card:hover .skill-logo-wrap{transform:rotate(-5deg) scale(1.07);box-shadow:0 12px 25px rgba(30,64,175,.15)}
.skill-grid-enhanced .skill-card:hover .skill-logo{transform:scale(1.06)}
.skill-grid-enhanced .card-index{display:block;margin-top:18px;color:#64748b;font-size:10px;font-weight:900;letter-spacing:.14em}
.skill-grid-enhanced .skill-card h3{margin:8px 0 9px;font-size:23px;letter-spacing:-.6px;color:#10244b}
.skill-grid-enhanced .skill-card p{min-height:48px;color:#5b6b82;font-size:13px;line-height:1.75}
.skill-grid-enhanced .skill-card>a{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:#1d4ed8}
.skill-grid-enhanced .skill-card>a span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#eaf1ff;transition:transform .25s,background .25s}
.skill-grid-enhanced .skill-card:hover>a span{transform:translate(3px,-2px);background:#dbeafe}
.proof-strip{position:relative;overflow:hidden;background:linear-gradient(100deg,#f7faff,#fff 45%,#fff8f1);border-block:1px solid #e6edf8}
.proof-grid>div{transition:transform .3s}
.proof-grid>div:hover{transform:translateY(-4px)}
.proof-icon{display:grid;place-items:center;width:46px;height:46px;border:1px solid #e0e9f8;border-radius:15px;background:#fff;box-shadow:0 6px 17px rgba(15,23,42,.05)}
.proof-icon img{display:block;object-fit:contain}
.hero-enhanced{position:relative;background:radial-gradient(ellipse at 83% 8%,rgba(37,99,235,.4),transparent 35%),radial-gradient(ellipse at 8% 94%,rgba(249,115,22,.12),transparent 32%),linear-gradient(128deg,#071126 0%,#0e1c3c 55%,#101b35 100%)}
.hero-enhanced:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.17;background-image:linear-gradient(rgba(147,197,253,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(147,197,253,.12) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(90deg,transparent,#000 45%,#000)}
.hero-orb{filter:blur(2px);animation:lbOrbDrift 11s ease-in-out infinite alternate}
.hero-orb-two{animation-delay:-4s}
.preview-card{border-color:rgba(191,219,254,.23);background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.045));box-shadow:0 32px 90px rgba(2,6,23,.55),inset 0 1px rgba(255,255,255,.12);transition:transform .4s,box-shadow .4s}
.hero-visual:hover .preview-card{transform:translateY(-5px) rotateY(-1deg);box-shadow:0 40px 100px rgba(2,6,23,.62),inset 0 1px rgba(255,255,255,.15)}
.floating-chip{box-shadow:0 12px 30px rgba(2,6,23,.24);animation:lbFloat 5s ease-in-out infinite}
.chip-bottom{animation-delay:-2.5s}
.section-heading h2{letter-spacing:-1.35px}
.activity-card,.feature-card,.price-card,.step-card{transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s,border-color .32s}
.activity-card:hover,.feature-card:hover,.step-card:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(15,23,42,.09)}
.price-card:hover{transform:translateY(-7px)}
.reveal{transition:opacity .65s ease,transform .65s cubic-bezier(.2,.75,.25,1)}
/* Skill landing pages now use the same blue/navy LogicByte brand system. */
.skill-landing{background:#fbfcff;color:#17233d}
.skill-breadcrumb{color:#64748b}
.skill-breadcrumb a{color:#1d4ed8}
.skill-hero{position:relative;isolation:isolate;background:radial-gradient(ellipse at 88% 10%,rgba(96,165,250,.22),transparent 30%),radial-gradient(ellipse at 8% 100%,rgba(249,115,22,.09),transparent 30%),linear-gradient(130deg,#f0f5ff 0%,#fff 53%,#f4f7ff 100%);color:#13284e;border-bottom:1px solid #dce7fa}
.skill-hero:before{border-color:rgba(37,99,235,.12);box-shadow:0 0 0 36px rgba(37,99,235,.035),0 0 0 72px rgba(249,115,22,.025)}
.skill-hero:after{background:#f97316;box-shadow:-70px 90px 0 #93c5fd,-150px 35px 0 #60a5fa,60px 140px 0 #fed7aa}
.skill-eyebrow,.skill-section-kicker{color:#1d4ed8}
.skill-hero h1{color:#10244b}
.skill-lead{color:#53647d}
.skill-hero .btn-primary{background:#1d4ed8;border-color:#1d4ed8;box-shadow:0 9px 22px rgba(29,78,216,.2)}
.skill-hero .btn-primary:hover{background:#1e40af;border-color:#1e40af}
.skill-hero .btn-outline{border-color:#cbd8ee;color:#24416e;background:rgba(255,255,255,.78)}
.skill-hero .btn-outline:hover{background:#fff;border-color:#93b4ed}
.skill-benefits{color:#354a6b}
.skill-benefits li span{color:#1d4ed8;background:#e3edff}
.skill-hero-panel{border-color:#dce6f7;background:rgba(255,255,255,.86);box-shadow:0 24px 60px rgba(27,57,112,.10);color:#1c3154;backdrop-filter:blur(12px)}
.skill-panel-label{color:#1d4ed8}
.skill-panel-step{border-bottom-color:#e6edf8}
.skill-panel-step>span{background:#eaf1ff;color:#1d4ed8}
.skill-panel-step strong{color:#1c3154}
.skill-panel-step p{color:#64748b}
.skill-panel-note{color:#536b91}
.skill-hero-stats strong{color:#1d4ed8}
.skill-content-section{background:#fbfcff}
.skill-content-block h2,.skill-cert-grid h2{color:#14264a}
.skill-topic-card,.skill-example-card,.skill-sidebar-card,.skill-faq{border-color:#e1e9f6;box-shadow:0 7px 24px rgba(15,23,42,.025);transition:transform .3s,box-shadow .3s,border-color .3s}
.skill-topic-card:hover,.skill-example-card:hover{transform:translateY(-5px);border-color:#b9cff7;box-shadow:0 16px 34px rgba(30,64,175,.08)}
.skill-topic-card>span{background:#eaf1ff;color:#1d4ed8}
.skill-cert-section{background:linear-gradient(120deg,#edf4ff,#fbfcff 62%,#fff4e9);border-color:#e1e9f6}
.skill-cert-card{border-color:#dbe5f5;box-shadow:0 20px 50px rgba(30,64,175,.08)}
.skill-cert-icon{background:#eaf1ff;color:#1d4ed8}
.skill-bottom-cta{background:radial-gradient(circle at 85% 15%,rgba(96,165,250,.35),transparent 28%),linear-gradient(110deg,#102653,#1d4ed8)}
.skill-landing .reveal{opacity:0;transform:translateY(18px)}
.skill-landing .reveal.is-visible{opacity:1;transform:translateY(0)}
@keyframes lbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes lbOrbDrift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(18px,-12px,0) scale(1.08)}}
@media(max-width:900px){.skill-grid-enhanced{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.skill-grid-enhanced{grid-template-columns:1fr}.skill-grid-enhanced .skill-card{min-height:0}.hero-grid{gap:36px;padding-block:62px}.skill-hero-grid{gap:30px}}
@media(prefers-reduced-motion:reduce){.hero-orb,.floating-chip{animation:none!important}.skill-grid-enhanced .skill-card,.skill-logo,.skill-logo-wrap,.activity-card,.feature-card,.price-card,.step-card,.skill-topic-card,.skill-example-card{transition:none!important}.skill-landing .reveal{opacity:1;transform:none;transition:none}}


/* LogicByte skill showcase pages — strict brand palette alignment (navy, blue, orange).
   Scoped to .skill-landing so other public and dashboard pages remain unchanged. */
.skill-landing {
  --skill-ink:#102653;
  --skill-navy:#0b1631;
  --skill-blue:#245de7;
  --skill-blue-deep:#153a78;
  --skill-orange:#f97316;
  --skill-line:#e1e9f6;
  --skill-muted:#53647d;
  background:#fbfcff;
  color:var(--skill-ink);
  overflow:hidden;
}
.skill-landing .skill-breadcrumb { color:#64748b; }
.skill-landing .skill-breadcrumb a,
.skill-landing .skill-section-kicker,
.skill-landing .skill-eyebrow,
.skill-landing .skill-panel-label { color:var(--skill-blue); }
.skill-landing .skill-breadcrumb a:hover { color:var(--skill-orange); }
.skill-landing .skill-hero {
  isolation:isolate;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 88% 8%,rgba(65,112,240,.30),transparent 32%),
    radial-gradient(ellipse at 8% 100%,rgba(249,115,22,.17),transparent 31%),
    linear-gradient(128deg,#081735 0%,#102653 54%,#1b49a4 100%);
  color:#fff;
  border-bottom:1px solid rgba(191,219,254,.2);
}
.skill-landing .skill-hero:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.16;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(90deg,transparent,#000 38%,#000);
}
.skill-landing .skill-hero:after {
  opacity:.75;
  background:#f97316;
  box-shadow:-70px 90px 0 #93c5fd,-150px 35px 0 #60a5fa,60px 140px 0 #fed7aa;
}
.skill-landing .skill-eyebrow {
  color:#ffbd8a;
  border-color:rgba(255,255,255,.2);
}
.skill-landing .skill-hero h1 { color:#fff; letter-spacing:-.045em; text-wrap:balance; }
.skill-landing .skill-lead { color:#d7e4ff; }
.skill-landing .skill-hero .btn-primary {
  color:#fff;
  background:linear-gradient(135deg,#2c67f1,#1d4ed8);
  border-color:#5c8cff;
  box-shadow:0 12px 28px rgba(3,13,39,.28);
}
.skill-landing .skill-hero .btn-primary:hover {
  background:linear-gradient(135deg,#3c78ff,#2453cb);
  transform:translateY(-2px);
}
.skill-landing .skill-hero .btn-outline {
  color:#fff;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.28);
  backdrop-filter:blur(10px);
}
.skill-landing .skill-hero .btn-outline:hover {
  background:rgba(255,255,255,.15);
  border-color:#ffb77e;
}
.skill-landing .skill-benefits { color:#e0eaff; }
.skill-landing .skill-benefits li span {
  color:#ffb77e;
  background:rgba(249,115,22,.16);
  border:1px solid rgba(249,115,22,.24);
}
.skill-landing .skill-hero-panel {
  border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.075));
  box-shadow:0 30px 75px rgba(1,10,31,.34),inset 0 1px rgba(255,255,255,.13);
  color:#fff;
  backdrop-filter:blur(18px);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s;
}
.skill-landing .skill-hero-panel:hover {
  transform:translateY(-5px);
  box-shadow:0 38px 85px rgba(1,10,31,.4),inset 0 1px rgba(255,255,255,.16);
}
.skill-landing .skill-panel-label,
.skill-landing .skill-hero-stats strong { color:#ffbd8a; }
.skill-landing .skill-panel-step { border-bottom-color:rgba(219,234,254,.17); }
.skill-landing .skill-panel-step>span {
  color:#fff;
  background:linear-gradient(135deg,#245de7,#3f7cff);
  box-shadow:0 6px 16px rgba(3,13,39,.22);
}
.skill-landing .skill-panel-step strong { color:#fff; }
.skill-landing .skill-panel-step p,
.skill-landing .skill-panel-note { color:#d0def9; }
.skill-landing .skill-content-section { background:linear-gradient(180deg,#fff 0%,#f7faff 100%); }
.skill-landing .skill-content-section:nth-of-type(even) { background:#f3f7ff; }
.skill-landing .section-heading h2,
.skill-landing .skill-content-block h2,
.skill-landing .skill-cert-grid h2 { color:#102653; letter-spacing:-.035em; }
.skill-landing .section-heading p,
.skill-landing .skill-content-block p { color:#53647d; }
.skill-landing .skill-topic-card,
.skill-landing .skill-example-card,
.skill-landing .skill-sidebar-card,
.skill-landing .skill-faq {
  position:relative;
  border:1px solid #e1e9f6;
  border-radius:20px;
  background:linear-gradient(150deg,#fff 0%,#fbfdff 72%,#fff8f1 160%);
  box-shadow:0 8px 25px rgba(16,38,83,.045);
  transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s,border-color .32s;
}
.skill-landing .skill-topic-card:hover,
.skill-landing .skill-example-card:hover,
.skill-landing .skill-sidebar-card:hover {
  transform:translateY(-6px);
  border-color:#b8cdf9;
  box-shadow:0 20px 42px rgba(30,64,175,.11);
}
.skill-landing .skill-topic-card>span {
  color:#245de7;
  background:linear-gradient(145deg,#eaf1ff,#f4f7ff);
  border:1px solid #dbe7ff;
}
.skill-landing .skill-topic-card h3,
.skill-landing .skill-example-card h3,
.skill-landing .skill-sidebar-card h3 { color:#102653; }
.skill-landing .skill-topic-card p,
.skill-landing .skill-example-card p,
.skill-landing .skill-sidebar-card p { color:#53647d; }
.skill-landing .skill-content-section a:not(.btn),
.skill-landing .skill-faq a { color:#245de7; }
.skill-landing .skill-content-section a:not(.btn):hover,
.skill-landing .skill-faq a:hover { color:#f97316; }
.skill-landing .skill-cert-section {
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 100%,rgba(249,115,22,.09),transparent 28%),
    linear-gradient(120deg,#edf4ff,#fff 58%,#fff6ed);
  border-color:#e1e9f6;
}
.skill-landing .skill-cert-card {
  border:1px solid #dbe5f5;
  border-radius:24px;
  background:linear-gradient(155deg,#fff,#f8fbff);
  box-shadow:0 24px 55px rgba(16,38,83,.09);
}
.skill-landing .skill-cert-icon {
  color:#f97316;
  background:linear-gradient(145deg,#fff1e5,#eaf1ff);
  border:1px solid #f7d8bd;
}
.skill-landing .skill-cert-card li::marker { color:#f97316; }
.skill-landing .skill-cert-disclaimer { color:#64748b; }
.skill-landing .skill-faq[open] { border-color:#b8cdf9; box-shadow:0 12px 28px rgba(30,64,175,.08); }
.skill-landing .skill-faq summary { color:#102653; }
.skill-landing .skill-faq summary::marker { color:#245de7; }
.skill-landing .skill-bottom-cta {
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:26px;
  background:
    radial-gradient(ellipse at 90% 0%,rgba(249,115,22,.25),transparent 34%),
    radial-gradient(ellipse at 0% 100%,rgba(96,165,250,.24),transparent 38%),
    linear-gradient(120deg,#0b1631,#153a78 58%,#245de7);
  box-shadow:0 24px 60px rgba(16,38,83,.18);
}
.skill-landing .skill-bottom-cta h2,
.skill-landing .skill-bottom-cta p { color:#fff; }
.skill-landing .skill-bottom-cta .btn-outline {
  color:#fff;
  border-color:rgba(255,255,255,.35);
  background:rgba(255,255,255,.08);
}
.skill-landing .skill-bottom-cta .btn-outline:hover { background:rgba(255,255,255,.16); }
.skill-landing .reveal { transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.25,1); }
.skill-landing .reveal.is-visible { opacity:1; transform:translateY(0); }
.skill-landing .skill-hero .reveal-delay-1 { transition-delay:.12s; }
@keyframes lbSkillGlow {
  0%,100% { opacity:.45; transform:scale(1); }
  50% { opacity:.8; transform:scale(1.08); }
}
.skill-landing .skill-hero-panel:before {
  content:"";
  position:absolute;
  width:210px;height:210px;
  top:-125px;right:-95px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(96,165,250,.28),transparent 70%);
  animation:lbSkillGlow 7s ease-in-out infinite;
}
@media(max-width:720px) {
  .skill-landing .skill-hero { background:radial-gradient(ellipse at 85% 5%,rgba(65,112,240,.26),transparent 34%),linear-gradient(145deg,#081735,#153a78); }
  .skill-landing .skill-bottom-cta { border-radius:20px; }
}
@media(prefers-reduced-motion:reduce) {
  .skill-landing .skill-hero-panel:before { animation:none!important; }
  .skill-landing .skill-hero-panel,
  .skill-landing .skill-topic-card,
  .skill-landing .skill-example-card,
  .skill-landing .skill-sidebar-card,
  .skill-landing .skill-faq,
  .skill-landing .reveal { transition:none!important; }
  .skill-landing .reveal { opacity:1!important; transform:none!important; }
}
