 *,
 *::before,
 *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 :root {
   --orange: #EA4435;
   --dark: #0f0f10;
   --card: #1a1a1d;
   --border: rgba(255, 255, 255, 0.08);
   --text: #f0f0f0;
   --muted: #6b6b72;
 }

 html,
 body {
   min-height: 100%;
   background: var(--dark);
   color: var(--text);
   font-family: 'DM Sans', sans-serif;
   -webkit-font-smoothing: antialiased;
 }

 .bg-glow {
   position: fixed;
   inset: 0;
   z-index: 0;
   pointer-events: none;
   background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(234, 68, 53, 0.15), transparent);
 }

 .container {
   position: relative;
   z-index: 1;
   max-width: 900px;
   margin: 0 auto;
   padding: 48px 24px 80px;
 }

 /* ── Header ── */
 .header {
   text-align: center;
   margin-bottom: 48px;
 }

 .header img {
   width: clamp(100px, 14vw, 150px);
   margin-bottom: 20px;
 }

 .header h1 {
   font-family: 'Bebas Neue', sans-serif;
   font-size: clamp(32px, 5vw, 56px);
   letter-spacing: 0.04em;
   line-height: 1.1;
   margin-bottom: 12px;
 }

 .header h1 span {
   color: var(--orange);
 }

 .header p {
   font-size: 15px;
   color: var(--muted);
   line-height: 1.6;
   max-width: 460px;
   margin: 0 auto;
 }

 /* ── Section title ── */
 .section-title {
   font-size: 11px;
   font-weight: 700;
   color: var(--muted);
   letter-spacing: 0.15em;
   text-transform: uppercase;
   margin-bottom: 14px;
   margin-top: 36px;
 }

 /* ── Features ── */
 .features-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
 }

 .feature-card {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 16px;
   padding: 16px;
 }

 .feature-icon {
   width: 42px;
   height: 42px;
   flex-shrink: 0;
   background: rgba(234, 68, 53, 0.1);
   border: 1px solid rgba(234, 68, 53, 0.2);
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .feature-icon svg {
   width: 20px;
   height: 20px;
   stroke: var(--orange);
 }

 .feature-text strong {
   display: block;
   font-size: 14px;
   font-weight: 700;
   margin-bottom: 3px;
 }

 .feature-text p {
   font-size: 12px;
   color: var(--muted);
   line-height: 1.5;
 }

 /* ── Steps ── */
 .steps {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 12px;
 }

 .step {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 16px;
   padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 10px;
 }

 .step-num {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   flex-shrink: 0;
   background: rgba(234, 68, 53, 0.15);
   border: 1.5px solid rgba(234, 68, 53, 0.4);
   color: var(--orange);
   font-size: 14px;
   font-weight: 900;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .step strong {
   display: block;
   font-size: 13px;
   font-weight: 700;
   margin-bottom: 2px;
 }

 .step p {
   font-size: 12px;
   color: var(--muted);
   line-height: 1.5;
 }

 /* ── Ocasiões ── */
 .occasions {
   margin-bottom: 28px;
 }

 .occasions-grid {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
   gap: 8px;
 }

 .occasion-btn {
   background: var(--card);
   border: 1.5px solid var(--border);
   border-radius: 14px;
   padding: 12px 6px 10px;
   cursor: pointer;
   text-align: center;
   transition: all 0.2s;
   user-select: none;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
 }

 .occasion-btn:hover {
   border-color: rgba(234, 68, 53, 0.4);
   background: rgba(234, 68, 53, 0.06);
 }

 .occasion-btn.active {
   border-color: var(--orange);
   background: rgba(234, 68, 53, 0.12);
 }

 .occasion-btn svg {
   width: 22px;
   height: 22px;
   stroke: var(--muted);
   transition: stroke 0.2s;
 }

 .occasion-btn:hover svg,
 .occasion-btn.active svg {
   stroke: var(--orange);
 }

 .occasion-btn .label {
   font-size: 10px;
   font-weight: 700;
   color: var(--muted);
   line-height: 1.2;
   transition: color 0.2s;
 }

 .occasion-btn:hover .label,
 .occasion-btn.active .label {
   color: var(--orange);
 }

 /* ── Form ── */
 .form-card {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 24px;
   padding: 32px;
   margin-bottom: 16px;
 }

 .form-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0 24px;
 }

 .form-group {
   margin-bottom: 20px;
 }

 .form-group:last-child {
   margin-bottom: 0;
 }

 .form-full {
   grid-column: 1 / -1;
 }

 label {
   display: block;
   font-size: 11px;
   font-weight: 700;
   color: var(--muted);
   letter-spacing: 0.1em;
   text-transform: uppercase;
   margin-bottom: 8px;
 }

 label span {
   color: var(--orange);
 }

 input,
 select,
 textarea {
   width: 100%;
   background: rgba(255, 255, 255, 0.05);
   border: 1.5px solid var(--border);
   border-radius: 14px;
   padding: 12px 16px;
   color: var(--text);
   font-size: 14px;
   font-family: 'DM Sans', sans-serif;
   outline: none;
   transition: border-color 0.2s;
   -webkit-appearance: none;
   appearance: none;
 }

 input:focus,
 select:focus,
 textarea:focus {
   border-color: rgba(234, 68, 53, 0.5);
 }

 input::placeholder,
 textarea::placeholder {
   color: var(--muted);
 }

 select {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6b72' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 14px center;
   padding-right: 36px;
 }

 select option {
   background: #1a1a1d;
 }

 textarea {
   resize: vertical;
   min-height: 120px;
   line-height: 1.6;
 }

 input[type="date"]::-webkit-calendar-picker-indicator {
   filter: invert(0.5);
   cursor: pointer;
 }

 .phone-wrap {
   display: flex;
   gap: 8px;
   align-items: center;
 }

 .phone-flag {
   background: rgba(255, 255, 255, 0.05);
   border: 1.5px solid var(--border);
   border-radius: 14px;
   padding: 12px 14px;
   font-size: 16px;
   white-space: nowrap;
 }

 .char-count {
   font-size: 10px;
   color: var(--muted);
   text-align: right;
   margin-top: 4px;
 }

 .required-note {
   font-size: 11px;
   color: var(--muted);
   text-align: right;
   margin-bottom: 20px;
 }

 .required-note span {
   color: var(--orange);
 }

 /* ── Botão ── */
 .btn-send {
   width: 100%;
   padding: 16px;
   border-radius: 18px;
   border: none;
   cursor: pointer;
   background: #25D366;
   color: #fff;
   font-size: 16px;
   font-weight: 900;
   font-family: 'DM Sans', sans-serif;
   letter-spacing: 0.03em;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   transition: all 0.2s;
   box-shadow: 0 8px 28px rgba(37, 211, 102, 0.3);
 }

 .btn-send:hover {
   background: #20b859;
   transform: translateY(-1px);
 }

 .btn-send:active {
   transform: scale(0.98);
 }

 .btn-send svg {
   width: 22px;
   height: 22px;
   fill: #fff;
   flex-shrink: 0;
 }

 /* ── Footer ── */
 .footer {
   text-align: center;
   margin-top: 32px;
 }

 .footer p {
   font-size: 11px;
   color: var(--muted);
   opacity: 0.5;
 }

 /* ── Toast ── */
 #toast {
   position: fixed;
   bottom: 24px;
   left: 50%;
   transform: translateX(-50%) translateY(80px);
   background: #1a1a1d;
   border: 1px solid rgba(234, 68, 53, 0.3);
   border-radius: 14px;
   padding: 12px 20px;
   font-size: 13px;
   font-weight: 700;
   color: var(--text);
   white-space: nowrap;
   z-index: 999;
   transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   pointer-events: none;
 }

 #toast.show {
   transform: translateX(-50%) translateY(0);
 }

 /* ── Mobile ── */
 @media (max-width: 700px) {
   .container {
     padding: 24px 16px 60px;
   }

   .features-grid {
     grid-template-columns: 1fr;
   }

   .steps {
     grid-template-columns: 1fr 1fr;
   }

   .occasions-grid {
     grid-template-columns: repeat(4, 1fr);
   }

   .form-grid {
     grid-template-columns: 1fr;
   }

   .form-card {
     padding: 20px;
   }
 }

 @media (max-width: 400px) {
   .steps {
     grid-template-columns: 1fr;
   }
 }