:root{
  /* Base tokens */
  --bg:#242a41;
  --btn1:#3ba95e;  /* primary */
  --btn1-hover:#2f8a4d;
  --btn1-disabled:#58be79;
  --btn2:#0180ff;  /* secondary */
  --btn2-hover:#0169cf;
  --btn2-disabled:#4ca5ff;

  /* Theme variables used by template */
  --nxp-bg:var(--bg);
  --nxp-surface:#2b3252;
  --nxp-muted:#313a5f;
  --nxp-text:#E6EDF7;
  --nxp-sub:#C5CEE0;
  --nxp-primary:var(--btn1); /* primary CTA */
  --nxp-accent:var(--btn2);  /* secondary CTA + focus */
  --nxp-danger:#FF4D4F;
  --nxp-radius:18px;
  --nxp-gap:14px;
  --nxp-shadow:0 8px 24px rgba(0,0,0,.35);
  --nxp-h1:clamp(28px,3.4vw,40px);
  --nxp-h2:clamp(20px,2.8vw,30px);
  --nxp-h3:clamp(16px,2.2vw,22px);
  --nxp-tabbar-h:60px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans";
  color:var(--nxp-text);
  background:var(--nxp-bg);
  padding-bottom:calc(var(--nxp-tabbar-h) + env(safe-area-inset-bottom));
}
@media(min-width:1025px){ body{padding-bottom:0} }
a{color:inherit;text-decoration:none}
a:focus,button:focus,.nxp-chip:focus{outline:2px solid var(--nxp-accent);outline-offset:2px;border-radius:8px}

.nxp-shell{display:grid;grid-template-columns:272px 1fr;min-height:100vh}
@media(max-width:1024px){.nxp-shell{grid-template-columns:1fr}}

/* Sidebar */
.nxp-sidebar{
  position:sticky;top:0;height:100vh;background:var(--nxp-surface);
  border-right:1px solid #20284a;padding:18px 14px;display:flex;flex-direction:column;gap:14px
}
@media(max-width:1024px){.nxp-sidebar{display:none}}
.nxp-logo{display:inline-flex;align-items:center;gap:8px}
.nxp-brand{font-weight:700;letter-spacing:.2px}
.nxp-nav{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.nxp-nav a{padding:8px 10px;border-radius:12px;color:var(--nxp-sub);display:flex;align-items:center;gap:8px;font-size:14px}
.nxp-nav a[aria-current="true"], .nxp-nav a:hover{background:var(--nxp-muted);color:var(--nxp-text)}

/* Container */
.nxp-container{max-width:980px;margin:0 auto;width:100%;overflow:visible}

/* Mobile tab bar */
.nxp-tabbar{
  position:fixed;left:0;right:0;bottom:0;background:rgba(43,50,82,.95);
  backdrop-filter: blur(8px);border-top:1px solid #20284a;display:none;z-index:50;height:var(--nxp-tabbar-h)
}
@media(max-width:1024px){.nxp-tabbar{display:block}}
.nxp-tabbar ul{display:grid;grid-template-columns:repeat(6,1fr);margin:0;padding:6px 8px;list-style:none;height:100%}
.nxp-tabbar a{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;height:100%;color:var(--nxp-sub);font-size:11px;border-radius:12px}
.nxp-tabbar a[aria-current="true"]{color:var(--nxp-text);background:var(--nxp-muted)}

/* Main */
.nxp-main{padding:18px}
@media(min-width:1025px){.nxp-main{padding:24px 24px 36px}}

/* Sections */
.nxp-section{background:rgba(43,50,82,.65);border:1px solid #20284a;border-radius:var(--nxp-radius);padding:22px;box-shadow:var(--nxp-shadow);margin-bottom:var(--nxp-gap)}
.nxp-section h2{font-size:var(--nxp-h2);margin:0 0 10px}
.nxp-kicker{font-size:11px;letter-spacing:.18em;color:var(--nxp-accent);text-transform:uppercase}

/* HERO */
.nxp-hero{
  background:var(--nxp-surface);
  border:1px solid #20284a;
  border-radius:var(--nxp-radius);
  box-shadow:var(--nxp-shadow);
  padding:18px;
  margin:0 0 18px;
}
.nxp-hero-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;align-items:stretch}
@media(max-width:1024px){.nxp-hero-wrap{grid-template-columns:1fr;gap:12px}}
.nxp-hero-left{padding:8px 8px 12px}
.nxp-hero-left .nxp-title{font-size:var(--nxp-h1);margin:4px 0 8px}
.nxp-hero-left p{color:var(--nxp-sub);margin:0 0 12px}
.nxp-row{display:flex;gap:8px;flex-wrap:wrap}

/* CTA buttons */
.nxp-cta{
  display:inline-flex;gap:8px;align-items:center;background:var(--nxp-primary);color:#fff;
  border-radius:12px;padding:10px 14px;font-weight:600;transition:background-color .18s ease,opacity .18s ease,transform .06s ease
}
.nxp-cta:hover{background:var(--btn1-hover)}
.nxp-cta:active{transform:translateY(1px)}
.nxp-cta[disabled], .nxp-cta.is-disabled{background:var(--btn1-disabled);opacity:.7;pointer-events:none}
.nxp-cta--alt{background:var(--nxp-accent);color:#fff}
.nxp-cta--alt:hover{background:var(--btn2-hover)}
.nxp-cta--alt[disabled]{background:var(--btn2-disabled);opacity:.7;pointer-events:none}

/* Chips + scroll-snap */
.nxp-chips{display:flex;gap:8px;overflow:auto;padding-bottom:2px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.nxp-chip{flex:0 0 auto;scroll-snap-align:start;background:#232a49;border:1px solid #20284a;border-radius:999px;padding:8px 12px;color:var(--nxp-sub);cursor:pointer;white-space:nowrap}
.nxp-chip[aria-current="true"], .nxp-chip[aria-selected="true"]{background:var(--nxp-primary);color:#fff}

/* Grid */
.nxp-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--nxp-gap);margin-top:12px}
@media(max-width:1200px){.nxp-grid{grid-template-columns:repeat(8,1fr)}}
@media(max-width:1024px){.nxp-grid{grid-template-columns:repeat(6,1fr)}}
@media(max-width:640px){.nxp-grid{grid-template-columns:repeat(2,1fr)}}
.nxp-card{grid-column:span 4;border:1px solid transparent;border-radius:14px;padding:14px;color:#fff;position:relative}
@media(max-width:1024px){.nxp-card{grid-column:span 6}}
@media(max-width:640px){.nxp-card{grid-column:span 2}}
.nxp-card h3{margin:8px 0 6px;font-size:16px}
.nxp-meta{font-size:12px;color:#EEF3FF}
.nxp-card[hidden]{display:none}

/* Card image placeholders */
.nxp-thumb{display:block;width:100%;height:auto;object-fit:cover;border-radius:12px;overflow:hidden;border:1px solid #2a355c;background:#222949}

/* Vibrant card backgrounds */
.nxp-card:nth-child(6n+1){background:linear-gradient(135deg,#6E00FF 0%,#BA00FF 100%);border-color:#9A2BFF}
.nxp-card:nth-child(6n+2){background:linear-gradient(135deg,#FF5F6D 0%,#FFC371 100%);border-color:#FF8A6C}
.nxp-card:nth-child(6n+3){background:linear-gradient(135deg,#00C6FF 0%,#0072FF 100%);border-color:#2A8FFF}
.nxp-card:nth-child(6n+4){background:linear-gradient(135deg,#00F260 0%,#0575E6 100%);border-color:#1BBE80}
.nxp-card:nth-child(6n+5){background:linear-gradient(135deg,#F7971E 0%,#FFD200 100%);border-color:#F9B23C;color:#1b1b1b}
.nxp-card:nth-child(6n+6){background:linear-gradient(135deg,#e53935 0%,#e35d5b 100%);border-color:#F26A67}

/* Timeline */
.nxp-timeline{position:relative;padding-left:22px;margin-top:6px}
.nxp-timeline:before{content:"";position:absolute;left:8px;top:0;bottom:0;width:2px;background:#2a355c}
.nxp-step{position:relative;margin:0 0 12px;padding:8px 10px;border-radius:12px;background:#232a49;border:1px solid #20284a}
.nxp-step:before{content:"";position:absolute;left:-7px;top:12px;width:12px;height:12px;border-radius:50%;background:var(--nxp-accent);box-shadow:0 0 0 3px #232a49}

/* Contact */
.nxp-contacts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:900px){.nxp-contacts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.nxp-contacts{grid-template-columns:1fr}}
.nxp-contact{display:flex;gap:10px;align-items:center;background:#232a49;border:1px solid #20284a;border-radius:14px;padding:10px}

/* Footer */
.nxp-footer{color:#B7C3D9;text-align:center;padding:28px 10px 80px}
@media(min-width:1025px){.nxp-footer{padding-bottom:18px}}

/* Utilities */
.nxp-muted{color:var(--nxp-sub)}
.nxp-hr{height:1px;background:#20284a;border:0;margin:8px 0}

/* Legacy play badge (kept for compatibility) */
.nxp-play{position:absolute;left:50%;top:37%;transform:translate(-50%,-50%) scale(1);opacity:1;z-index:2;padding:12px 16px;border-radius:999px;background:#FFC83D;color:#111;text-decoration:none;font-weight:800;display:inline-flex;align-items:center;gap:8px;box-shadow:0 6px 18px rgba(255,200,61,.35);transition:transform .18s ease,box-shadow .18s ease}
.nxp-card:hover .nxp-play,.nxp-card:focus-within .nxp-play{transform:translate(-50%,-50%) scale(1.06);box-shadow:0 10px 26px rgba(255,200,61,.5)}
.nxp-play i{font-size:.95em}