@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');



  :root {

    --navy: #0A0E1A;

    --deep: #0D1F3C;

    --cyan: #00D4FF;

    --violet: #7B2FFF;

    --white: #F0F4FF;

    --muted: #8892A4;

    --border: rgba(0,212,255,0.15);

    --glass: rgba(13,31,60,0.6);

    --card: rgba(15,28,55,0.8);

  }



  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }



  html { scroll-behavior: smooth; }



  body {

    font-family: 'Inter', sans-serif;

    background: var(--navy);

    color: var(--white);

    overflow-x: hidden;

  }



  /* ── CANVAS PARTICLES ── */

  #particle-canvas {

    position: fixed;

    top: 0; left: 0;

    width: 100%; height: 100%;

    pointer-events: none;

    z-index: 0;

    opacity: 0.4;

  }



  /* ── NAVIGATION ── */

  nav {

    position: fixed;

    top: 0; left: 0; right: 0;

    z-index: 1000;

    padding: 0 48px;

    height: 72px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: rgba(10,14,26,0.85);

    backdrop-filter: blur(20px);

    border-bottom: 1px solid var(--border);

    transition: all 0.3s;

  }



  .nav-logo {

    display: flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;

    cursor: pointer;

  }



  .logo-icon {

    width: 38px; height: 38px;

    background: linear-gradient(135deg, var(--cyan), var(--violet));

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 900;

    font-size: 16px;

    color: #fff;

    letter-spacing: -1px;

    flex-shrink: 0;

  }



  .logo-text {

    font-size: 18px;

    font-weight: 800;

    letter-spacing: -0.5px;

    color: var(--white);

  }



  .logo-text span { color: var(--cyan); }



  .nav-links {

    display: flex;

    align-items: center;

    gap: 4px;

    list-style: none;

  }



  .nav-links a {

    color: var(--muted);

    text-decoration: none;

    font-size: 13.5px;

    font-weight: 500;

    padding: 8px 14px;

    border-radius: 8px;

    transition: all 0.2s;

    cursor: pointer;

  }



  .nav-links a:hover, .nav-links a.active {

    color: var(--cyan);

    background: rgba(0,212,255,0.08);

  }



  .nav-cta {

    background: linear-gradient(135deg, var(--cyan), var(--violet)) !important;

    color: #fff !important;

    padding: 9px 20px !important;

    border-radius: 8px !important;

    font-weight: 600 !important;

  }



  .nav-cta:hover { opacity: 0.9; transform: translateY(-1px); }



  /* ── SECTIONS ── */

  .section {

    position: relative;

    z-index: 1;

    min-height: 100vh;

    display: none;

    padding: 120px 48px 80px;

  }



  .section.active { display: block; }



  .section-eyebrow {

    font-family: 'JetBrains Mono', monospace;

    font-size: 12px;

    font-weight: 500;

    color: var(--cyan);

    letter-spacing: 3px;

    text-transform: uppercase;

    margin-bottom: 16px;

    display: flex;

    align-items: center;

    gap: 12px;

  }



  .section-eyebrow::before {

    content: '';

    display: block;

    width: 32px;

    height: 1px;

    background: var(--cyan);

  }



  .section-title {

    font-size: clamp(36px, 5vw, 64px);

    font-weight: 800;

    letter-spacing: -2px;

    line-height: 1.05;

    margin-bottom: 24px;

  }



  .section-title .accent { color: var(--cyan); }

  .section-title .violet { color: var(--violet); }



  .section-subtitle {

    font-size: 17px;

    color: var(--muted);

    line-height: 1.7;

    max-width: 600px;

  }



  /* ── HERO ── */

  #home {

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding-top: 72px;

  }



  #home.active { display: flex; }



  .hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: rgba(0,212,255,0.1);

    border: 1px solid rgba(0,212,255,0.3);

    padding: 6px 16px;

    border-radius: 100px;

    font-size: 12px;

    font-weight: 600;

    color: var(--cyan);

    margin-bottom: 40px;

    font-family: 'JetBrains Mono', monospace;

    letter-spacing: 1px;

  }



  .badge-dot {

    width: 6px; height: 6px;

    background: var(--cyan);

    border-radius: 50%;

    animation: pulse 2s infinite;

  }



  @keyframes pulse {

    0%, 100% { opacity: 1; transform: scale(1); }

    50% { opacity: 0.4; transform: scale(0.8); }

  }



  .hero-headline {

    font-size: clamp(48px, 7vw, 88px);

    font-weight: 900;

    letter-spacing: -3px;

    line-height: 0.95;

    margin-bottom: 32px;

  }



  .hero-headline .line2 { color: var(--cyan); }

  .hero-headline .line3 {

    background: linear-gradient(135deg, var(--violet), var(--cyan));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

  }



  .cursor-blink {

    display: inline-block;

    width: 4px;

    height: 0.85em;

    background: var(--cyan);

    margin-left: 4px;

    vertical-align: middle;

    animation: blink 1s step-end infinite;

  }



  @keyframes blink {

    0%, 100% { opacity: 1; }

    50% { opacity: 0; }

  }



  .hero-desc {

    font-size: 18px;

    color: var(--muted);

    line-height: 1.75;

    max-width: 560px;

    margin-bottom: 48px;

  }



  .hero-actions {

    display: flex;

    gap: 16px;

    align-items: center;

    flex-wrap: wrap;

    margin-bottom: 80px;

  }



  .btn-primary {

    background: linear-gradient(135deg, var(--cyan), var(--violet));

    color: #fff;

    border: none;

    padding: 15px 32px;

    border-radius: 12px;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    transition: all 0.2s;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    letter-spacing: -0.3px;

  }



  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,212,255,0.3); }



  .btn-secondary {

    background: transparent;

    color: var(--white);

    border: 1px solid var(--border);

    padding: 15px 32px;

    border-radius: 12px;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s;

    display: inline-flex;

    align-items: center;

    gap: 8px;

  }



  .btn-secondary:hover {

    border-color: var(--cyan);

    color: var(--cyan);

    background: rgba(0,212,255,0.05);

  }



  .hero-stats {

    display: flex;

    gap: 48px;

    padding-top: 48px;

    border-top: 1px solid var(--border);

  }



  .stat-item { }



  .stat-number {

    font-size: 36px;

    font-weight: 900;

    letter-spacing: -1.5px;

    color: var(--white);

    line-height: 1;

    margin-bottom: 6px;

  }



  .stat-number span { color: var(--cyan); }



  .stat-label {

    font-size: 13px;

    color: var(--muted);

    font-weight: 500;

  }



  /* ── GRID CARDS ── */

  .cards-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 24px;

    margin-top: 64px;

  }



  .card {

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: 20px;

    padding: 36px;

    transition: all 0.3s;

    position: relative;

    overflow: hidden;

  }



  .card::before {

    content: '';

    position: absolute;

    top: 0; left: 0; right: 0;

    height: 2px;

    background: linear-gradient(90deg, var(--cyan), var(--violet));

    transform: scaleX(0);

    transform-origin: left;

    transition: transform 0.4s;

  }



  .card:hover { transform: translateY(-4px); border-color: rgba(0,212,255,0.3); }

  .card:hover::before { transform: scaleX(1); }



  .card-icon {

    width: 52px; height: 52px;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

    margin-bottom: 24px;

    background: rgba(0,212,255,0.1);

    border: 1px solid rgba(0,212,255,0.2);

  }



  .card-icon.violet-bg {

    background: rgba(123,47,255,0.1);

    border-color: rgba(123,47,255,0.2);

  }



  .card-title {

    font-size: 19px;

    font-weight: 700;

    letter-spacing: -0.5px;

    margin-bottom: 12px;

    color: var(--white);

  }



  .card-desc {

    font-size: 14.5px;

    color: var(--muted);

    line-height: 1.7;

  }



  .card-link {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-top: 24px;

    font-size: 13.5px;

    font-weight: 600;

    color: var(--cyan);

    cursor: pointer;

    transition: gap 0.2s;

  }



  .card-link:hover { gap: 10px; }



  /* ── PORTFOLIO ── */

  .portfolio-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));

    gap: 24px;

    margin-top: 64px;

  }



  .portfolio-card {

    border-radius: 20px;

    overflow: hidden;

    background: var(--card);

    border: 1px solid var(--border);

    transition: all 0.3s;

    cursor: pointer;

  }



  .portfolio-card:hover { transform: translateY(-4px); border-color: rgba(123,47,255,0.4); }



  .portfolio-thumb {

    height: 220px;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 48px;

  }



  .portfolio-thumb.g1 { background: linear-gradient(135deg, #0d1f3c, #1a0a3c); }

  .portfolio-thumb.g2 { background: linear-gradient(135deg, #0a1f0d, #0d3c1a); }

  .portfolio-thumb.g3 { background: linear-gradient(135deg, #1f0a0d, #3c0d1a); }

  .portfolio-thumb.g4 { background: linear-gradient(135deg, #1a1000, #3c2800); }

  .portfolio-thumb.g5 { background: linear-gradient(135deg, #001a2c, #003c5c); }

  .portfolio-thumb.g6 { background: linear-gradient(135deg, #1a001f, #3c0050); }



  .portfolio-thumb-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(to bottom, transparent, rgba(10,14,26,0.8));

  }



  .portfolio-tag {

    position: absolute;

    top: 16px; left: 16px;

    background: rgba(0,212,255,0.15);

    border: 1px solid rgba(0,212,255,0.3);

    color: var(--cyan);

    font-size: 11px;

    font-weight: 600;

    padding: 4px 10px;

    border-radius: 100px;

    font-family: 'JetBrains Mono', monospace;

    letter-spacing: 1px;

  }



  .portfolio-info { padding: 24px; }



  .portfolio-title {

    font-size: 17px;

    font-weight: 700;

    margin-bottom: 8px;

    letter-spacing: -0.4px;

  }



  .portfolio-client {

    font-size: 13px;

    color: var(--muted);

  }



  /* ── CLIENTS ── */

  .clients-logos {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

    gap: 16px;

    margin-top: 64px;

  }



  .client-logo {

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: 16px;

    padding: 32px 24px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 12px;

    transition: all 0.3s;

    text-align: center;

  }



  .client-logo:hover {

    border-color: rgba(0,212,255,0.3);

    background: rgba(0,212,255,0.05);

  }



  .client-logo .icon { font-size: 32px; }



  .client-name {

    font-size: 13px;

    font-weight: 600;

    color: var(--muted);

  }



  .testimonials {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 24px;

    margin-top: 48px;

  }



  .testimonial-card {

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: 20px;

    padding: 36px;

  }



  .testimonial-stars {

    color: var(--cyan);

    font-size: 14px;

    margin-bottom: 20px;

    letter-spacing: 2px;

  }



  .testimonial-text {

    font-size: 15px;

    color: var(--muted);

    line-height: 1.75;

    font-style: italic;

    margin-bottom: 28px;

  }



  .testimonial-author {

    display: flex;

    align-items: center;

    gap: 12px;

  }



  .author-avatar {

    width: 44px; height: 44px;

    border-radius: 50%;

    background: linear-gradient(135deg, var(--cyan), var(--violet));

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    font-size: 16px;

    color: #fff;

    flex-shrink: 0;

  }



  .author-name {

    font-size: 14px;

    font-weight: 700;

    color: var(--white);

  }



  .author-role {

    font-size: 12px;

    color: var(--muted);

  }



  /* ── PRICING / ORCAMENTO ── */

  .pricing-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 24px;

    margin-top: 64px;

  }



  .pricing-card {

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: 24px;

    padding: 40px;

    position: relative;

    transition: all 0.3s;

  }



  .pricing-card.featured {

    border-color: var(--cyan);

    background: rgba(0,212,255,0.05);

  }



  .pricing-card.featured::before {

    content: 'MAIS POPULAR';

    position: absolute;

    top: -14px;

    left: 50%;

    transform: translateX(-50%);

    background: linear-gradient(135deg, var(--cyan), var(--violet));

    color: #fff;

    font-size: 10px;

    font-weight: 700;

    padding: 4px 16px;

    border-radius: 100px;

    font-family: 'JetBrains Mono', monospace;

    letter-spacing: 2px;

    white-space: nowrap;

  }



  .pricing-tier {

    font-size: 12px;

    font-weight: 700;

    color: var(--cyan);

    letter-spacing: 2px;

    text-transform: uppercase;

    font-family: 'JetBrains Mono', monospace;

    margin-bottom: 16px;

  }



  .pricing-price {

    font-size: 48px;

    font-weight: 900;

    letter-spacing: -2px;

    color: var(--white);

    margin-bottom: 4px;

  }



  .pricing-price span {

    font-size: 20px;

    font-weight: 600;

    color: var(--muted);

    letter-spacing: 0;

  }



  .pricing-desc {

    font-size: 14px;

    color: var(--muted);

    margin-bottom: 32px;

    line-height: 1.6;

  }



  .pricing-features {

    list-style: none;

    margin-bottom: 36px;

  }



  .pricing-features li {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 14px;

    color: var(--muted);

    padding: 8px 0;

    border-bottom: 1px solid rgba(255,255,255,0.04);

  }



  .pricing-features li::before {

    content: '✓';

    color: var(--cyan);

    font-weight: 700;

    flex-shrink: 0;

  }



  /* ── CONTACT FORM ── */

  .contact-grid {

    display: grid;

    grid-template-columns: 1fr 1.5fr;

    gap: 64px;

    margin-top: 64px;

  }



  .contact-info-items {

    display: flex;

    flex-direction: column;

    gap: 28px;

  }



  .contact-info-item {

    display: flex;

    align-items: flex-start;

    gap: 16px;

  }



  .contact-info-icon {

    width: 44px; height: 44px;

    border-radius: 12px;

    background: rgba(0,212,255,0.1);

    border: 1px solid rgba(0,212,255,0.2);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    flex-shrink: 0;

  }



  .contact-info-text strong {

    display: block;

    font-size: 14px;

    font-weight: 700;

    color: var(--white);

    margin-bottom: 4px;

  }



  .contact-info-text span {

    font-size: 14px;

    color: var(--muted);

  }



  .form-panel {

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: 24px;

    padding: 44px;

  }



  .form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

  }



  .form-group {

    margin-bottom: 20px;

  }



  .form-group label {

    display: block;

    font-size: 13px;

    font-weight: 600;

    color: var(--muted);

    margin-bottom: 8px;

    letter-spacing: 0.3px;

  }



  .form-group input,

  .form-group select,

  .form-group textarea {

    width: 100%;

    background: rgba(255,255,255,0.04);

    border: 1px solid var(--border);

    border-radius: 10px;

    padding: 12px 16px;

    color: var(--white);

    font-family: 'Inter', sans-serif;

    font-size: 14px;

    outline: none;

    transition: all 0.2s;

  }



  .form-group input:focus,

  .form-group select:focus,

  .form-group textarea:focus {

    border-color: var(--cyan);

    background: rgba(0,212,255,0.05);

    box-shadow: 0 0 0 3px rgba(0,212,255,0.1);

  }



  .form-group select option { background: #0d1f3c; }



  .form-group textarea { resize: vertical; min-height: 120px; }



  /* ── BUDGET FORM ── */

  .budget-steps {

    display: flex;

    gap: 0;

    margin-bottom: 48px;

    position: relative;

  }



  .budget-steps::before {

    content: '';

    position: absolute;

    top: 20px;

    left: 20px;

    right: 20px;

    height: 2px;

    background: var(--border);

    z-index: 0;

  }



  .budget-step {

    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    position: relative;

    z-index: 1;

  }



  .step-circle {

    width: 40px; height: 40px;

    border-radius: 50%;

    background: var(--deep);

    border: 2px solid var(--border);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 13px;

    font-weight: 700;

    color: var(--muted);

    transition: all 0.3s;

  }



  .step-circle.active {

    background: linear-gradient(135deg, var(--cyan), var(--violet));

    border-color: transparent;

    color: #fff;

  }



  .step-circle.done {

    background: var(--cyan);

    border-color: transparent;

    color: var(--navy);

  }



  .step-label {

    font-size: 11px;

    font-weight: 600;

    color: var(--muted);

    text-align: center;

    letter-spacing: 0.5px;

  }



  .step-label.active { color: var(--cyan); }



  .budget-panel {

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: 24px;

    padding: 48px;

    max-width: 740px;

    margin: 0 auto;

  }



  .service-options {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 16px;

    margin-top: 16px;

  }



  .service-option {

    background: rgba(255,255,255,0.03);

    border: 2px solid var(--border);

    border-radius: 14px;

    padding: 20px 16px;

    cursor: pointer;

    transition: all 0.2s;

    text-align: center;

  }



  .service-option:hover {

    border-color: rgba(0,212,255,0.4);

    background: rgba(0,212,255,0.05);

  }



  .service-option.selected {

    border-color: var(--cyan);

    background: rgba(0,212,255,0.1);

  }



  .service-option .opt-icon { font-size: 28px; margin-bottom: 10px; }

  .service-option .opt-name { font-size: 13px; font-weight: 600; color: var(--white); }



  .budget-nav {

    display: flex;

    justify-content: space-between;

    margin-top: 36px;

  }



  /* ── ADMIN PANEL ── */

  .admin-layout {

    display: grid;

    grid-template-columns: 240px 1fr;

    gap: 0;

    margin-top: 48px;

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: 24px;

    overflow: hidden;

    min-height: 600px;

  }



  .admin-sidebar {

    background: rgba(13,31,60,0.8);

    border-right: 1px solid var(--border);

    padding: 28px 0;

  }



  .admin-sidebar-title {

    font-size: 11px;

    font-weight: 700;

    color: var(--muted);

    letter-spacing: 2px;

    text-transform: uppercase;

    padding: 0 24px 16px;

    font-family: 'JetBrains Mono', monospace;

  }



  .admin-nav-item {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 24px;

    font-size: 14px;

    font-weight: 500;

    color: var(--muted);

    cursor: pointer;

    transition: all 0.2s;

    border-left: 2px solid transparent;

  }



  .admin-nav-item:hover {

    color: var(--white);

    background: rgba(255,255,255,0.04);

  }



  .admin-nav-item.active {

    color: var(--cyan);

    border-left-color: var(--cyan);

    background: rgba(0,212,255,0.06);

  }



  .admin-nav-item .icon { font-size: 16px; }



  .admin-content { padding: 32px; overflow: auto; }



  .admin-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 32px;

  }



  .admin-title {

    font-size: 22px;

    font-weight: 800;

    letter-spacing: -0.8px;

  }



  .admin-kpis {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 16px;

    margin-bottom: 32px;

  }



  .kpi-card {

    background: rgba(255,255,255,0.03);

    border: 1px solid var(--border);

    border-radius: 16px;

    padding: 24px;

  }



  .kpi-label {

    font-size: 11px;

    font-weight: 600;

    color: var(--muted);

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 10px;

    font-family: 'JetBrains Mono', monospace;

  }



  .kpi-value {

    font-size: 30px;

    font-weight: 900;

    letter-spacing: -1px;

    color: var(--white);

    margin-bottom: 4px;

  }



  .kpi-change {

    font-size: 12px;

    color: #22c55e;

    font-weight: 600;

  }



  .kpi-change.down { color: #ef4444; }



  .admin-table {

    width: 100%;

    border-collapse: collapse;

  }



  .admin-table th {

    font-size: 11px;

    font-weight: 700;

    color: var(--muted);

    letter-spacing: 1.5px;

    text-transform: uppercase;

    padding: 12px 16px;

    text-align: left;

    border-bottom: 1px solid var(--border);

    font-family: 'JetBrains Mono', monospace;

  }



  .admin-table td {

    padding: 14px 16px;

    font-size: 13.5px;

    color: var(--muted);

    border-bottom: 1px solid rgba(255,255,255,0.04);

  }



  .admin-table tr:hover td { background: rgba(255,255,255,0.02); }



  .status-badge {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 4px 10px;

    border-radius: 100px;

    font-size: 11px;

    font-weight: 600;

  }



  .status-badge.pending { background: rgba(251,191,36,0.15); color: #fbbf24; }

  .status-badge.active { background: rgba(34,197,94,0.15); color: #22c55e; }

  .status-badge.done { background: rgba(0,212,255,0.15); color: var(--cyan); }



  /* ── FEATURES SECTION ── */

  .features-split {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;

    margin-top: 80px;

  }



  .features-list {

    display: flex;

    flex-direction: column;

    gap: 28px;

  }



  .feature-item {

    display: flex;

    gap: 16px;

    align-items: flex-start;

  }



  .feature-icon {

    width: 40px; height: 40px;

    border-radius: 10px;

    background: rgba(0,212,255,0.1);

    border: 1px solid rgba(0,212,255,0.2);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    flex-shrink: 0;

  }



  .feature-text strong {

    display: block;

    font-size: 15px;

    font-weight: 700;

    color: var(--white);

    margin-bottom: 4px;

  }



  .feature-text p {

    font-size: 14px;

    color: var(--muted);

    line-height: 1.65;

  }



  .visual-panel {

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: 24px;

    padding: 32px;

    position: relative;

    overflow: hidden;

  }



  .terminal-header {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 24px;

  }



  .terminal-dot {

    width: 12px; height: 12px;

    border-radius: 50%;

  }



  .t-red { background: #ff5f57; }

  .t-yellow { background: #febc2e; }

  .t-green { background: #28c840; }



  .terminal-title {

    flex: 1;

    text-align: center;

    font-size: 12px;

    color: var(--muted);

    font-family: 'JetBrains Mono', monospace;

  }



  .terminal-body {

    font-family: 'JetBrains Mono', monospace;

    font-size: 13px;

    line-height: 1.9;

  }



  .t-prompt { color: var(--cyan); }

  .t-cmd { color: var(--white); }

  .t-output { color: #22c55e; }

  .t-comment { color: var(--muted); }



  /* ── HOSTING SECTION ── */

  .hosting-plans {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;

    margin-top: 64px;

  }



  .hosting-plan {

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: 20px;

    padding: 36px;

    transition: all 0.3s;

  }



  .hosting-plan:hover { transform: translateY(-4px); border-color: rgba(123,47,255,0.4); }



  .hosting-plan.featured {

    border-color: var(--violet);

    background: rgba(123,47,255,0.05);

  }



  .plan-badge {

    font-size: 10px;

    font-weight: 700;

    color: var(--violet);

    letter-spacing: 2px;

    font-family: 'JetBrains Mono', monospace;

    text-transform: uppercase;

    margin-bottom: 12px;

  }



  .plan-name {

    font-size: 22px;

    font-weight: 800;

    letter-spacing: -0.7px;

    margin-bottom: 8px;

  }



  .plan-price {

    font-size: 38px;

    font-weight: 900;

    letter-spacing: -1.5px;

    color: var(--cyan);

    margin-bottom: 4px;

  }



  .plan-price span {

    font-size: 16px;

    font-weight: 600;

    color: var(--muted);

  }



  .plan-period {

    font-size: 13px;

    color: var(--muted);

    margin-bottom: 28px;

  }



  .plan-specs {

    list-style: none;

    margin-bottom: 32px;

  }



  .plan-specs li {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 0;

    border-bottom: 1px solid rgba(255,255,255,0.04);

    font-size: 13.5px;

  }



  .plan-specs li span:first-child { color: var(--muted); }

  .plan-specs li span:last-child { color: var(--white); font-weight: 600; }



  /* ── FOOTER ── */

  footer {

    position: relative;

    z-index: 1;

    background: rgba(10,14,26,0.95);

    border-top: 1px solid var(--border);

    padding: 64px 48px 40px;

  }



  .footer-grid {

    display: grid;

    grid-template-columns: 2fr 1fr 1fr 1fr;

    gap: 48px;

    margin-bottom: 56px;

  }



  .footer-brand p {

    font-size: 14px;

    color: var(--muted);

    line-height: 1.75;

    margin-top: 16px;

    max-width: 280px;

  }



  .footer-col h4 {

    font-size: 13px;

    font-weight: 700;

    color: var(--white);

    letter-spacing: 0.5px;

    margin-bottom: 20px;

    text-transform: uppercase;

    font-family: 'JetBrains Mono', monospace;

    font-size: 11px;

    letter-spacing: 2px;

  }



  .footer-col ul { list-style: none; }



  .footer-col ul li {

    margin-bottom: 10px;

  }



  .footer-col ul li a {

    font-size: 14px;

    color: var(--muted);

    text-decoration: none;

    cursor: pointer;

    transition: color 0.2s;

  }



  .footer-col ul li a:hover { color: var(--cyan); }



  .footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 32px;

    border-top: 1px solid var(--border);

  }



  .footer-bottom p {

    font-size: 13px;

    color: var(--muted);

  }



  .footer-bottom p span { color: var(--cyan); }



  .social-links {

    display: flex;

    gap: 12px;

  }



  .social-link {

    width: 36px; height: 36px;

    border-radius: 8px;

    background: rgba(255,255,255,0.05);

    border: 1px solid var(--border);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 15px;

    cursor: pointer;

    transition: all 0.2s;

  }



  .social-link:hover {

    border-color: var(--cyan);

    background: rgba(0,212,255,0.1);

  }



  /* ── TOAST ── */

  .toast {

    position: fixed;

    bottom: 32px;

    right: 32px;

    background: rgba(0,212,255,0.15);

    border: 1px solid var(--cyan);

    color: var(--cyan);

    padding: 14px 24px;

    border-radius: 12px;

    font-size: 14px;

    font-weight: 600;

    z-index: 9999;

    transform: translateY(80px);

    opacity: 0;

    transition: all 0.3s;

    backdrop-filter: blur(10px);

  }



  .toast.show { transform: translateY(0); opacity: 1; }



  /* ── MOBILE MENU ── */

  .menu-toggle {

    display: none;

    background: none;

    border: 1px solid var(--border);

    color: var(--white);

    width: 38px; height: 38px;

    border-radius: 8px;

    cursor: pointer;

    font-size: 18px;

  }



  @media (max-width: 900px) {

    nav { padding: 0 24px; }

    .nav-links { display: none; }

    .menu-toggle { display: flex; align-items: center; justify-content: center; }

    .section { padding: 100px 24px 60px; }

    .hero-headline { font-size: 44px; }

    .hero-stats { gap: 28px; flex-wrap: wrap; }

    .cards-grid, .portfolio-grid { grid-template-columns: 1fr; }

    .contact-grid { grid-template-columns: 1fr; }

    .features-split { grid-template-columns: 1fr; }

    .footer-grid { grid-template-columns: 1fr 1fr; }

    .admin-layout { grid-template-columns: 1fr; }

    .admin-sidebar { display: none; }

    .admin-kpis { grid-template-columns: 1fr 1fr; }

    .hosting-plans { grid-template-columns: 1fr; }

    .service-options { grid-template-columns: repeat(2, 1fr); }

    .form-row { grid-template-columns: 1fr; }

  }
/* Enterprise hardening additions */
.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.admin-login-link{opacity:.78;font-size:.86rem}
.admin-login-page{min-height:100vh;display:flex!important;align-items:center;justify-content:center}
.admin-login-card{width:min(440px,92vw);margin:auto}
.form-error{padding:12px 14px;border:1px solid rgba(239,68,68,.4);background:rgba(239,68,68,.1);color:#fecaca;border-radius:10px;margin:14px 0}
.menu-toggle{border:0;background:transparent;color:var(--white);font-size:1.65rem;cursor:pointer}
@media(max-width:900px){.nav-links.mobile-open{display:flex!important;flex-direction:column;position:absolute;top:72px;left:0;right:0;background:rgba(10,14,26,.98);padding:16px;border-bottom:1px solid rgba(0,212,255,.15);backdrop-filter:blur(20px);z-index:999}.nav-links.mobile-open li,.nav-links.mobile-open a{width:100%}}