/* =========================================================
   DDTank – Novo Tema (design ddtank.io)
   Sobrescreve Bootstrap e theme.min nas páginas que
   incluem este arquivo via Controller/header.php
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap');

/* ---------- Reset / Base ---------- */
*, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100vh;
  background: #050508;
  color: #fff;
  font-family: 'Outfit', 'Open Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: #ff6a00; text-decoration: none; }
a:hover { color: #ff8c38; text-decoration: none; }

/* ---------- Variáveis ---------- */
:root {
  --orange:    #ff6a00;
  --orange2:   #cc2200;
  --bg:        #050508;
  --bg2:       #0a0a0f;
  --card-bg:   rgba(22, 22, 34, 0.97);
  --border:    rgba(255, 106, 0, 0.22);
  --muted:     #5c5c6c;
  --radius:    14px;
}

/* ---------- Navbar ---------- */
.nt-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  min-height: 104px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 28px;
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-bottom: none;
  -webkit-transition: background .3s, box-shadow .3s, border-color .3s, backdrop-filter .3s;
          transition: background .3s, box-shadow .3s, border-color .3s, backdrop-filter .3s;
}
.nt-nav.nt-nav-solid {
  background: rgba(5, 5, 8, 0.85);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 106, 0, 0.12);
}
.nt-nav-shell {
  width: 100%;
  max-width: 1280px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 16px;
}
/* fallback gap para flex em browsers antigos */
.nt-nav-shell > * + * { margin-left: 16px; }
@supports (gap: 1px) { .nt-nav-shell > * + * { margin-left: 0; } }

.nt-nav-brand {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-self: start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  min-height: 72px;
  overflow: visible;
  line-height: 0;
}
.nt-nav-logo {
  height: 52px;
  width: auto;
  /* fallback para browsers sem suporte a min() */
  max-width: 300px;
  max-width: min(300px, 38vw);
  object-fit: contain;
  display: block;
  margin-left: 30px;
  -webkit-transform: scale(3.6);
      -ms-transform: scale(3.6);
          transform: scale(3.6);
  -webkit-filter: drop-shadow(0 0 14px rgba(255, 106, 0, 0.4));
          filter: drop-shadow(0 0 14px rgba(255, 106, 0, 0.4));
}
@media (max-width: 900px) {
  .nt-nav-logo {
    height: 46px;
    -webkit-transform: scale(3.6);
        -ms-transform: scale(3.6);
            transform: scale(3.6);
    max-width: 260px;
    max-width: min(260px, 55vw);
  }
}
.nt-nav-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}
.nt-nav-actions > * + * { margin-left: 10px; }
@supports (gap: 1px) { .nt-nav-actions > * + * { margin-left: 0; } }

.nt-nav-play-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-filter: drop-shadow(0 0 6px rgba(255, 106, 0, 0.35));
          filter: drop-shadow(0 0 6px rgba(255, 106, 0, 0.35));
}
.nt-nav-enter {
  padding: 10px 20px;
  background: rgba(255, 106, 0, 0.1);
  color: #ff6a00 !important;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 8px;
  border: 1px solid rgba(255, 106, 0, 0.35);
  -webkit-transition: background .15s, border-color .15s;
          transition: background .15s, border-color .15s;
  text-decoration: none !important;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
}
.nt-nav-enter > * + * { margin-left: 6px; }
@supports (gap: 1px) { .nt-nav-enter > * + * { margin-left: 0; } }
.nt-nav-enter-label {
  display: inline-block;
  line-height: 1.2;
}
.nt-nav-enter:hover {
  background: rgba(255, 106, 0, 0.2);
  color: #ff8c38 !important;
}
.nt-nav-btn {
  padding: 10px 22px;
  background: -webkit-linear-gradient(315deg, var(--orange), var(--orange2));
  background:         linear-gradient(135deg, var(--orange), var(--orange2));
  color: #fff !important; font-weight: 700; font-size: 13px;
  border-radius: 10px; border: none; cursor: pointer;
  -webkit-box-shadow: 0 4px 16px rgba(255,106,0,.3);
          box-shadow: 0 4px 16px rgba(255,106,0,.3);
  -webkit-transition: opacity .2s;
          transition: opacity .2s;
  text-decoration: none !important;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
}
.nt-nav-btn > * + * { margin-left: 6px; }
@supports (gap: 1px) { .nt-nav-btn > * + * { margin-left: 0; } }
.nt-nav-btn:hover { opacity: .88; color: #fff !important; }
@media (max-width: 900px) {
  .nt-nav-shell {
    width: 100%;
    max-width: none;
  }
}

/* ---------- Page wrapper ---------- */
.nt-page {
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 118px 20px 48px;
  background: radial-gradient(ellipse at 50% 28%, #2a1208 0%, #0a0a0f 55%, #050508 100%);
  position: relative; overflow: hidden;
}

/* Grid overlay */
.nt-page::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
  background-image:
    -webkit-gradient(linear, left top, left bottom, from(rgba(255,106,0,.03)), color-stop(1px, transparent), to(transparent)),
    -webkit-gradient(linear, left top, right top, from(rgba(255,106,0,.03)), color-stop(1px, transparent), to(transparent));
  background-image:
    linear-gradient(rgba(255,106,0,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,106,0,.03) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Top glow */
.nt-page::after {
  content: '';
  position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);
  width: 90vw; max-width: 720px; height: 360px;
  background: radial-gradient(ellipse, rgba(255,106,0,.13) 0%, transparent 68%);
  pointer-events: none;
}

/* ---------- Card ---------- */
.nt-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 480px;
  background: -webkit-linear-gradient(325deg, var(--card-bg) 0%, rgba(14,14,22,.98) 100%);
  background:         linear-gradient(145deg, var(--card-bg) 0%, rgba(14,14,22,.98) 100%);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 32px;
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  -webkit-box-shadow: 0 28px 64px rgba(0,0,0,.55), 0 0 48px rgba(255,106,0,.05);
          box-shadow: 0 28px 64px rgba(0,0,0,.55), 0 0 48px rgba(255,106,0,.05);
}

.nt-logo-wrap {
  text-align: center;
  margin-bottom: 24px;
}
.nt-logo-wrap img {
  width: 90%; max-width: 340px; height: auto;
  -webkit-filter: drop-shadow(0 0 28px rgba(255,106,0,.55));
          filter: drop-shadow(0 0 28px rgba(255,106,0,.55));
}

/* ---------- Tabs ---------- */
.nt-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding: 5px;
  margin-bottom: 24px;
}
.nt-tab {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1; padding: 11px 14px;
  border: none; background: transparent;
  color: var(--muted); font-weight: 800; font-size: 13px;
  letter-spacing: .4px; border-radius: 11px;
  cursor: pointer;
  -webkit-transition: all .2s;
          transition: all .2s;
}
.nt-tab.active {
  background: -webkit-linear-gradient(315deg, var(--orange), var(--orange2));
  background:         linear-gradient(135deg, var(--orange), var(--orange2));
  color: #fff;
  -webkit-box-shadow: 0 6px 20px rgba(255,106,0,.35);
          box-shadow: 0 6px 20px rgba(255,106,0,.35);
}

/* ---------- Form ---------- */
.nt-label {
  display: block; font-size: 11px; font-weight: 700;
  color: var(--muted); letter-spacing: .8px;
  text-transform: uppercase; margin-bottom: 6px;
}
.nt-input {
  width: 100%; padding: 12px 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; color: #fff; font-size: 14px;
  outline: none;
  -webkit-transition: border-color .2s;
          transition: border-color .2s;
}
.nt-input:focus { border-color: rgba(255,106,0,.55); }
.nt-input::-webkit-input-placeholder { color: #555; }
.nt-input::-moz-placeholder          { color: #555; }
.nt-input:-ms-input-placeholder      { color: #555; }
.nt-input::placeholder                { color: #555; }

.nt-input-wrap { position: relative; }
.nt-input-wrap .nt-input { padding-right: 44px; }
.nt-eye {
  position: absolute; right: 10px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);
  background: none; border: none; color: #666; cursor: pointer;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 4px;
}

.nt-field { margin-bottom: 16px; }
.nt-field-last { margin-bottom: 22px; }

.nt-forgot {
  font-size: 12px; font-weight: 600; color: var(--orange);
  float: right; line-height: 1;
}
.nt-forgot:hover { color: #ff8c38; }

/* ---------- Button ---------- */
.nt-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
  width: 100%; padding: 14px;
  background: -webkit-linear-gradient(315deg, var(--orange), var(--orange2));
  background:         linear-gradient(135deg, var(--orange), var(--orange2));
  color: #fff; font-weight: 800; font-size: 15px;
  border: none; border-radius: 12px; cursor: pointer;
  -webkit-box-shadow: 0 6px 24px rgba(255,106,0,.35);
          box-shadow: 0 6px 24px rgba(255,106,0,.35);
  -webkit-transition: opacity .2s;
          transition: opacity .2s;
}
.nt-btn > * + * { margin-left: 8px; }
@supports (gap: 1px) { .nt-btn > * + * { margin-left: 0; } }
.nt-btn:hover:not(:disabled) { opacity: .88; }
.nt-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Alert ---------- */
.nt-alert-err {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 8px;
  background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3);
  border-radius: 10px; padding: 10px 14px;
  font-size: 13px; color: #ef4444; margin-bottom: 16px; line-height: 1.5;
}
.nt-alert-err > * + * { margin-left: 8px; }
@supports (gap: 1px) { .nt-alert-err > * + * { margin-left: 0; } }
.nt-alert-ok {
  background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.35);
  border-radius: 12px; padding: 12px 14px;
  font-size: 13px; color: #4ade80; margin-bottom: 18px; line-height: 1.5;
}

/* ---------- Titles ---------- */
.nt-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 6px;
}
.nt-subtitle {
  color: var(--muted); font-size: 14px; margin-bottom: 24px;
}

/* ---------- Checkbox ---------- */
.nt-check-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  cursor: pointer; font-size: 13px; color: #777; margin-bottom: 20px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.nt-check-wrap > * + * { margin-left: 10px; }
@supports (gap: 1px) { .nt-check-wrap > * + * { margin-left: 0; } }
.nt-check-wrap input[type=checkbox] {
  width: 16px; height: 16px; cursor: pointer;
}

/* ---------- Back link ---------- */
.nt-back {
  text-align: center; margin-top: 20px;
}
.nt-back a {
  color: #555; font-size: 13px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
}
.nt-back a > * + * { margin-left: 6px; }
@supports (gap: 1px) { .nt-back a > * + * { margin-left: 0; } }
.nt-back a:hover { color: #888; }

/* ---------- Hero (landing) ---------- */
.nt-hero {
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  padding: 80px 24px 60px;
  background: radial-gradient(ellipse at 50% 30%, #2a1208 0%, #0a0a0f 55%, #050508 100%);
  position: relative; overflow: hidden;
}
.nt-hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,106,0,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,106,0,.03) 1px, transparent 1px);
  background-size: 48px 48px;
}
.nt-hero::after {
  content: '';
  position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);
  width: 90vw; max-width: 900px; height: 500px;
  background: radial-gradient(ellipse, rgba(255,106,0,.15) 0%, transparent 68%);
  pointer-events: none;
}
.nt-hero-inner { position: relative; z-index: 1; max-width: 680px; }
.nt-hero-logo {
  width: 88vw; max-width: 460px; height: auto;
  -webkit-filter: drop-shadow(0 0 48px rgba(255,106,0,.65));
          filter: drop-shadow(0 0 48px rgba(255,106,0,.65));
  margin-bottom: 8px;
}
.nt-hero-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 36px;
  font-size: clamp(32px, 6vw, 56px);
  font-weight: 700; color: #fff;
  line-height: 1.1; margin-bottom: 16px;
}
.nt-hero-title span { color: var(--orange); }
.nt-hero-sub {
  font-size: 16px;
  font-size: clamp(14px, 2vw, 18px);
  color: #888; max-width: 520px; margin: 0 auto 36px; line-height: 1.6;
}
.nt-hero-btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.nt-hero-btns > * + * { margin-left: 16px; }
@supports (gap: 1px) { .nt-hero-btns > * + * { margin-left: 0; } }

.nt-hero-btn-primary {
  padding: 16px 40px;
  background: -webkit-linear-gradient(315deg, var(--orange), var(--orange2));
  background:         linear-gradient(135deg, var(--orange), var(--orange2));
  color: #fff; font-weight: 800; font-size: 16px;
  border: none; border-radius: 14px; cursor: pointer;
  -webkit-box-shadow: 0 8px 32px rgba(255,106,0,.4);
          box-shadow: 0 8px 32px rgba(255,106,0,.4);
  text-decoration: none; display: inline-block;
  -webkit-transition: opacity .2s;
          transition: opacity .2s;
}
.nt-hero-btn-primary:hover { opacity: .88; color: #fff; }
.nt-hero-btn-secondary {
  padding: 16px 40px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: #ddd; font-weight: 700; font-size: 16px;
  border-radius: 14px; cursor: pointer;
  text-decoration: none; display: inline-block;
  -webkit-transition: all .2s;
          transition: all .2s;
}
.nt-hero-btn-secondary:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ---------- Features strip ---------- */
.nt-features {
  padding: 80px 24px;
  background: #050508;
  text-align: center;
}
.nt-section-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 28px;
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700;
  color: #fff; margin-bottom: 8px;
}
.nt-section-sub { color: var(--muted); font-size: 15px; margin-bottom: 48px; }
.nt-features-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(220px, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px; max-width: 960px; margin: 0 auto;
}
.nt-feature-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 24px; text-align: center;
}
.nt-feature-icon {
  font-size: 36px; margin-bottom: 16px;
}
.nt-feature-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 8px;
}
.nt-feature-desc { color: var(--muted); font-size: 13px; line-height: 1.6; }

/* ---------- Footer ---------- */
.nt-footer {
  padding: 32px 24px;
  text-align: center;
  border-top: 1px solid rgba(255,106,0,.1);
  color: var(--muted); font-size: 13px;
}