body {
      background: #f0eeff;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    /* NAV */
    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 22px 52px;
      background: transparent;
      border: none;
      height: auto;
    }
    .nav-logo {
      font-size: 22px;
      font-weight: 900;
      color: #0f0a1e;
      letter-spacing: -0.5px;
    }
    .nav-logo em {
      color: #7c3aed;
      font-style: normal;
    }
    .btn-entrar {
      background: #7c3aed;
      color: #fff;
      border: none;
      border-radius: 10px;
      padding: 11px 28px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.15s;
    }
    .btn-entrar:hover { background: #6d28d9; }

    /* HERO */
    .hero {
      padding: 72px 52px 64px;
      flex: 1;
      position: relative;
      overflow: hidden;
    }
    #hero-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
    }
    .hero-inner {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 64px;
      max-width: 1100px;
      margin: 0 auto;
    }
    .hero-left {
      flex: 1;
      max-width: 520px;
    }
    .hero-right {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 0;
    }
    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(124,58,237,0.1);
      border: 1px solid rgba(124,58,237,0.18);
      border-radius: 999px;
      padding: 8px 20px;
      font-size: 13px;
      font-weight: 500;
      color: #6d28d9;
      margin-bottom: 36px;
    }
    .hero h1 {
      font-size: 50px;
      font-weight: 900;
      color: #0f0a1e;
      line-height: 1.1;
      letter-spacing: -2px;
      margin-bottom: 22px;
    }
    .hero h1 em {
      color: #7c3aed;
      font-style: normal;
    }
    .hero-sub {
      font-size: 15px;
      color: #6b7280;
      line-height: 1.8;
      max-width: 460px;
      margin: 0 0 40px;
    }
    .btn-cta {
      background: #7c3aed;
      color: #fff;
      border: none;
      border-radius: 12px;
      padding: 15px 38px;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all 0.15s;
      box-shadow: 0 6px 24px rgba(124,58,237,0.35);
    }
    .btn-cta:hover {
      background: #6d28d9;
      transform: translateY(-1px);
      box-shadow: 0 10px 30px rgba(124,58,237,0.45);
    }

    /* === Celular flutuante === */
    .nc-phone {
      position: relative;
      width: 280px;
      aspect-ratio: 568 / 1024;
      border-radius: 40px;
      background: #0B0D1A;
      padding: 9px;
      transform: rotate(-8deg);
      filter:
        drop-shadow(0 30px 50px rgba(46,26,90,.35))
        drop-shadow(0 12px 30px rgba(0,0,0,.35));
      animation: nc-float 5.5s ease-in-out infinite;
    }
    .nc-phone::before {
      content: ""; position: absolute; inset: 0; border-radius: 40px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.18), transparent 30%),
        linear-gradient(315deg, rgba(255,255,255,.10), transparent 35%);
      pointer-events: none; z-index: 2;
    }
    .nc-phone::after {
      content: ""; position: absolute; inset: 6px; border-radius: 34px;
      box-shadow: inset 0 0 0 1.5px #1c1830, inset 0 0 14px rgba(0,0,0,.6);
      pointer-events: none; z-index: 3;
    }
    .nc-screen {
      position: relative; width: 100%; height: 100%;
      border-radius: 32px; overflow: hidden; background: #fff;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.4);
    }
    .nc-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .nc-screen::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(140deg,
        rgba(255,255,255,.22),
        rgba(255,255,255,0) 28%,
        rgba(255,255,255,0) 72%,
        rgba(255,255,255,.06));
      pointer-events: none;
    }
    .nc-btn { position: absolute; background: linear-gradient(180deg,#2a2740,#14111e); border-radius: 2px; z-index: 1; }
    .nc-btn.power { right: -2px; top: 24%; width: 4px; height: 64px; border-radius: 0 3px 3px 0; }
    .nc-btn.vu    { left: -2px;  top: 20%; width: 4px; height: 46px; border-radius: 3px 0 0 3px; }
    .nc-btn.vd    { left: -2px;  top: 30%; width: 4px; height: 46px; border-radius: 3px 0 0 3px; }
    .nc-btn.mute  { left: -2px;  top: 13%; width: 4px; height: 22px; border-radius: 3px 0 0 3px; }
    @keyframes nc-float {
      0%, 100% { transform: rotate(-8deg) translateY(0); }
      50%       { transform: rotate(-8deg) translateY(-12px); }
    }
    @media (prefers-reduced-motion: reduce) { .nc-phone { animation: none; } }


    /* CARDS */
    .cards-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      max-width: 860px;
      margin: 56px auto 64px;
      padding: 0 40px;
      width: 100%;
    }
    .feat-card {
      background: #fff;
      border-radius: 18px;
      padding: 30px 26px;
      box-shadow: 0 2px 16px rgba(124,58,237,0.08);
    }
    .feat-card-icon {
      width: 46px;
      height: 46px;
      border-radius: 13px;
      background: #ede9ff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
    }
    .feat-card-icon svg {
      width: 22px;
      height: 22px;
      color: #7c3aed;
      stroke: #7c3aed;
    }
    .feat-card-title {
      font-size: 15px;
      font-weight: 700;
      color: #0f0a1e;
      margin-bottom: 9px;
    }
    .feat-card-text {
      font-size: 13px;
      color: #f59e0b;
      line-height: 1.7;
      font-weight: 500;
    }

    /* TICKER */
    .ticker-wrap {
      background: #fff;
      border-top: 1px solid #ede9ff;
      border-bottom: 1px solid #ede9ff;
      overflow: hidden;
      height: 38px;
      display: flex;
      align-items: center;
    }
    .ticker-label {
      background: #1e1b4b;
      color: #fff;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.8px;
      padding: 0 20px 0 18px;
      height: 100%;
      display: flex;
      align-items: center;
      gap: 7px;
      white-space: nowrap;
      flex-shrink: 0;
      border-radius: 6px;
    }
    .ticker-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #22c55e;
      animation: blink 1.4s infinite;
    }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
    .ticker-track { display: flex; overflow: hidden; flex: 1; }
    .ticker-inner {
      display: flex;
      align-items: center;
      animation: ticker 40s linear infinite;
      white-space: nowrap;
    }
    .ticker-inner:hover { animation-play-state: paused; }
    @keyframes ticker {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .t-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0 24px;
      border-right: 1px solid #ede9ff;
      height: 38px;
      cursor: pointer;
      transition: background 0.12s;
    }
    .t-item:hover { background: #f5f3ff; }
    .t-sigla { font-size: 12px; font-weight: 800; color: #7c3aed; }
    .t-sep   { font-size: 11px; color: #d1d5db; }
    .t-org   { font-size: 11px; color: #6b7280; }
    .t-vagas { font-size: 11px; font-weight: 600; color: #374151; }
    .t-aberto {
      font-size: 10px;
      font-weight: 800;
      color: #16a34a;
      background: #dcfce7;
      border-radius: 4px;
      padding: 2px 7px;
    }

    /* CONCURSOS GRID */
    .conc-section {
      background: #fff;
      padding: 56px 52px 64px;
      border-top: 1px solid #ede9ff;
    }
    .conc-section h2 {
      text-align: center;
      font-size: 32px;
      font-weight: 900;
      color: #0f0a1e;
      letter-spacing: -1px;
      margin-bottom: 24px;
    }
    .conc-filters {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-bottom: 32px;
    }
    .conc-filter {
      font-size: 13px;
      font-weight: 600;
      padding: 8px 20px;
      border-radius: 999px;
      border: none;
      background: transparent;
      color: #6b7280;
      cursor: pointer;
      transition: all 0.15s;
    }
    .conc-filter.active {
      background: #fde8c8;
      color: #c2410c;
      font-weight: 700;
    }
    .conc-filter:not(.active):hover { color: #0f0a1e; }
    .conc-carousel-wrap { position: relative; }
    .conc-grid {
      display: flex;
      gap: 14px;
      overflow-x: auto;
      scroll-behavior: smooth;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding-bottom: 4px;
    }
    .conc-grid::-webkit-scrollbar { display: none; }
    .conc-nav {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 24px;
    }
    .conc-nav-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1.5px solid #ddd6fe;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s;
      flex-shrink: 0;
    }
    .conc-nav-btn:hover { background: #7c3aed; border-color: #7c3aed; }
    .conc-nav-btn:hover svg { stroke: #fff; }
    .conc-nav-btn svg { width: 16px; height: 16px; stroke: #7c3aed; stroke-width: 2; fill: none; }
    .conc-card {
      background: #fff;
      border: 1.5px solid #e9e4ff;
      border-radius: 14px;
      padding: 16px;
      cursor: pointer;
      transition: all 0.15s;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-width: 220px;
      max-width: 220px;
      min-height: 140px;
      flex-shrink: 0;
    }
    .conc-card:hover {
      border-color: #7c3aed;
      box-shadow: 0 4px 16px rgba(124,58,237,0.1);
      transform: translateY(-2px);
    }
    .conc-card-top {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 16px;
    }
    .conc-logo {
      width: 46px;
      height: 46px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 900;
      color: #fff;
      flex-shrink: 0;
    }
    .conc-card-name {
      font-size: 12px;
      font-weight: 700;
      color: #0f0a1e;
      line-height: 1.4;
    }
    .conc-card-bottom {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
    }
    .conc-vagas {
      font-size: 22px;
      font-weight: 900;
      color: #7c3aed;
      letter-spacing: -0.5px;
      line-height: 1;
    }
    .conc-vagas.indefinido {
      font-size: 16px;
      color: #7c3aed;
    }
    .conc-sal {
      text-align: right;
    }
    .conc-sal-label { font-size: 10px; color: #9ca3af; }
    .conc-sal-val   { font-size: 12px; font-weight: 700; color: #374151; }
    .conc-card-promo {
      background: #1e1b4b;
      border: none;
      border-radius: 14px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      cursor: pointer;
      transition: background 0.15s;
      min-height: 130px;
    }
    .conc-card-promo:hover { background: #2d2a5e; }
    .conc-card-promo p {
      font-size: 12px;
      color: #a78bfa;
      line-height: 1.6;
      margin-bottom: 14px;
    }
    .conc-card-promo button {
      background: #f59e0b;
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 9px 22px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.15s;
    }
    .conc-card-promo button:hover { background: #d97706; }

    /* BANNER PROMO */
    .promo-banner { position: relative; overflow: hidden; background: linear-gradient(110deg, #1a0f5e 0%, #4c1d95 45%, #7c3aed 100%); padding: 36px 52px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
    /* Foguete grande de fundo — decorativo, atrás do conteúdo, cortado pelo
       overflow:hidden do banner (nunca estoura pra fora nem esconde texto). */
    .promo-decor { position: absolute; top: 50%; right: -30px; width: 260px; height: 260px; transform: translateY(-50%) rotate(18deg); opacity: .16; pointer-events: none; z-index: 0; }
    .promo-decor svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
    .promo-left, .promo-right { position: relative; z-index: 1; }
    .promo-left { flex: 1; }
    .promo-eyebrow { font-size: 15px; font-weight: 500; color: rgba(255,255,255,.75); margin-bottom: 4px; }
    .promo-title { font-size: 32px; font-weight: 900; color: #fff; line-height: 1.1; letter-spacing: -0.8px; margin-bottom: 12px; }
    .promo-sub { font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.75; margin-bottom: 22px; max-width: 400px; }
    .promo-btn { display: inline-flex; align-items: center; gap: 7px; background: #fff; color: #4c1d95; border: none; border-radius: 10px; padding: 12px 24px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all .15s; font-family: inherit; }
    .promo-btn:hover { background: #f5f3ff; transform: translateY(-1px); }
    .promo-right { flex-shrink: 0; text-align: right; }
    .promo-badge { display: inline-flex; align-items: center; gap: 6px; background: #f59e0b; color: #1a0f5e; border-radius: 6px; padding: 4px 12px; font-size: 10px; font-weight: 800; letter-spacing: 0.6px; margin-bottom: 14px; }
    .promo-price-label { font-size: 12px; color: rgba(255,255,255,.65); margin-bottom: 4px; }
    .promo-price { display: flex; align-items: flex-start; justify-content: flex-end; line-height: 1; }
    .promo-cur { font-size: 18px; font-weight: 800; color: #fff; margin-top: 8px; margin-right: 2px; }
    .promo-val { font-size: 64px; font-weight: 900; color: #fff; letter-spacing: -3px; }
    .promo-cents { display: flex; flex-direction: column; justify-content: flex-end; margin-bottom: 6px; margin-left: 2px; }
    .promo-dec { font-size: 22px; font-weight: 800; color: #fff; line-height: 1; }
    .promo-mes { font-size: 12px; color: rgba(255,255,255,.7); font-weight: 600; }
    .promo-price-nota { font-size: 10.5px; color: rgba(255,255,255,.55); margin-top: 2px; margin-bottom: 14px; }
    .promo-chips { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; align-items: flex-end; }
    .promo-chip { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 7px 12px 7px 10px; font-size: 11px; color: rgba(255,255,255,.9); font-weight: 600; white-space: nowrap; }
    .promo-chip .selo { background: #34d399; color: #052e21; font-size: 9.5px; font-weight: 800; letter-spacing: 0.3px; border-radius: 5px; padding: 2px 6px; }
    .promo-chip .valor { color: #fcd34d; font-weight: 800; }
    .promo-bonus { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 7px; padding: 6px 14px; font-size: 11px; color: rgba(255,255,255,.9); font-weight: 600; }
    .promo-bonus strong { color: #fcd34d; }

    /* Ícone SVG inline — mesmo estilo das .feat-card-icon (linha fina, sem preenchimento) */
    .pico { display: inline-flex; width: 13px; height: 13px; flex-shrink: 0; vertical-align: -2px; }
    .pico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .promo-eyebrow .pico, .promo-badge .pico { width: 11px; height: 11px; }
    .promo-bonus .pico { color: #fcd34d; }

    @media (max-width: 768px) {
      .promo-banner { flex-direction: column; padding: 28px 24px; gap: 24px; text-align: center; }
      .promo-right { text-align: center; }
      .promo-price { justify-content: center; }
      .promo-chips { align-items: center; }
      .promo-sub { margin-left: auto; margin-right: auto; }
      .promo-title { font-size: 24px; }
      .promo-decor { width: 180px; height: 180px; right: -50px; opacity: .12; }
    }

    @media (max-width: 768px) {
      .nav { padding: 12px 20px; }
      .nav-logo { font-size: 16px; letter-spacing: -0.3px; white-space: nowrap; }
      .hero { padding: 40px 24px 48px; }
      .hero-inner { flex-direction: column; gap: 40px; }
      .hero-left { text-align: center; max-width: 100%; }
      .hero-sub { margin: 0 auto 32px; }
      .hero-right { padding: 0; }
      .nc-phone { width: 210px; }
      .hero h1 { font-size: 30px; letter-spacing: -1px; }
      .btn-cta { width: 100%; justify-content: center; font-size: 15px; padding: 14px 24px; }
      .cards-row { grid-template-columns: 1fr; padding: 0 20px; margin: 32px auto 40px; }
      .ticker-label { padding: 0 12px; font-size: 9px; }
      .conc-section { padding: 40px 20px 48px; }
      .conc-section h2 { font-size: 24px; }
      .conc-filters { gap: 6px; flex-wrap: wrap; }
      .conc-filter { font-size: 12px; padding: 6px 14px; }
      .conc-card { min-width: 180px; max-width: 180px; }
    }