/* ============================================================
   FS AI Detector — Production Stylesheet
   ============================================================ */

/* Universal box-sizing reset — sab elements pe apply */
*,
*::before,
*::after {
  margin: 0;                /* Default margins hatao */
  padding: 0;               /* Default paddings hatao */
  box-sizing: border-box;   /* Padding/border width me count ho */
}

/* Body — base styles */
body {
  background: #0a0a0f;                                          /* Dark background */
  color: #e8e8e8;                                               /* Light text */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',   /* System fonts */
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;                                             /* Line spacing */
  min-height: 100vh;                                            /* Full viewport height */
  -webkit-font-smoothing: antialiased;                          /* Smooth fonts */
  -moz-osx-font-smoothing: grayscale;                           /* Firefox smooth */
  overflow-x: hidden;                                           /* Horizontal scroll rok */
}

/* Skip link — accessibility ke liye (keyboard users) */
.skip-link {
  position: absolute;      /* Normal flow se bahar */
  top: -100px;             /* Screen ke bahar */
  left: 0;                 /* Left align */
  background: #266465;     /* Teal background */
  color: #fff;             /* White text */
  padding: 16px;           /* Spacing */
  z-index: 9999;           /* Sabse upar */
  text-decoration: none;   /* Underline hatao */
  border-radius: 0 0 8px 0;/* Bottom-right rounded */
}
/* Focus pe screen pe aa jaye */
.skip-link:focus {
  top: 0;
}

/* Container — content wrapper */
.container {
  max-width: 900px;        /* Max width */
  margin: 0 auto;          /* Center align */
  padding: 0 16px;         /* Side padding */
  width: 100%;             /* Full width */
}

/* ============ Header ============ */
.header {
  background: rgba(15, 15, 25, 0.85);   /* Semi-transparent dark */
  backdrop-filter: blur(12px);          /* Blur effect */
  -webkit-backdrop-filter: blur(12px);  /* Safari */
  border-bottom: 1px solid #1f1f2e;     /* Bottom border */
  position: sticky;                     /* Top pe stick */
  top: 0;                               /* Top position */
  z-index: 100;                         /* Above content */
  padding: 16px 0;                      /* Vertical padding */
}

/* Nav wrap — flex layout */
.nav-wrap {
  display: flex;                  /* Flex layout */
  justify-content: space-between; /* Logo left, nav right */
  align-items: center;            /* Vertical center */
  flex-wrap: wrap;                /* Wrap on small screens */
  gap: 8px;                       /* Gap between items */
}

/* ============ Logo ============ */
.logo {
  display: flex;              /* Flex layout */
  align-items: center;        /* Vertical center */
  gap: 8px;                   /* Icon-text gap */
  text-decoration: none;      /* Underline hatao */
  color: #8ed696;             /* Green color */
  font-weight: 700;           /* Bold */
  transition: opacity 0.2s ease;
}
.logo:hover {
  opacity: 0.85;              /* Hover pe fade */
  color: hwb(125 10% 13%);    /* Slightly different green */
}

.logo-icon {
  font-size: 26px;            /* Big emoji */
  line-height: 1;             /* Tight line height */
}

.logo-text {
  font-size: 16px;            /* Text size */
  letter-spacing: 0.5px;      /* Letter spacing */
}

.accent {
  color: #7c5cff;             /* Purple accent */
}

/* ============ Navigation ============ */
.nav {
  display: flex;              /* Flex layout */
  gap: 16px;                  /* Gap between links */
  flex-wrap: wrap;            /* Wrap on small */
}

.nav a {
  color: #38b8e6;                    /* Blue link color */
  text-decoration: none;             /* No underline */
  font-size: 14px;                   /* Font size */
  font-weight: 500;                  /* Medium weight */
  transition: color 0.2s ease;       /* Smooth color change */
  position: relative;                /* For ::after underline */
  padding: 4px 0;                    /* Vertical padding */
}
.nav a:hover,
.nav a:focus {
  color: #7c5cff;                    /* Purple on hover */
}
/* Animated underline */
.nav a::after {
  content: '';                       /* Empty content */
  position: absolute;                /* Positioned */
  bottom: 0;                         /* Bottom edge */
  left: 0;                           /* Left start */
  width: 0;                          /* Initially hidden */
  height: 2px;                       /* Thickness */
  background: #7c5cff;               /* Purple */
  transition: width 0.2s ease;       /* Smooth expand */
}
.nav a:hover::after {
  width: 100%;                       /* Full width on hover */
}
.nav a.active {
  color: #7c5cff;                    /* Active link purple */
}
.nav a.active::after {
  width: 100%;                       /* Active underline full */
}

/* ============ Hero section ============ */
.hero {
  text-align: center;        /* Center text */
  padding: 48px 0 24px;      /* Vertical spacing */
}

.hero h1 {
  font-size: clamp(24px, 5vw, 38px);  /* Responsive font */
  margin-bottom: 8px;                 /* Bottom space */
  font-weight: 800;                   /* Extra bold */
  letter-spacing: -0.5px;             /* Tight spacing */
}

/* AI span in hero title */
#ai {
  color: hwb(0 6% 5%);                /* Red color */
  border-bottom: 4px solid hwb(140 6% 24%);  /* Green underline */
}

/* Subtitle */
.subtitle {
  color: #0fce41;                     /* Green text */
  font-size: clamp(14px, 2vw, 16px);  /* Responsive */
  max-width: 600px;                   /* Max width */
  margin: 0 auto;                     /* Center */
}

/* Trust badges container */
.trust-badges {
  display: flex;              /* Flex layout */
  justify-content: center;    /* Center */
  gap: 10px;                  /* Gap */
  flex-wrap: wrap;            /* Wrap */
  margin-top: 24px;           /* Top space */
}

/* Badge styling */
.badge {
  position: relative;         /* For ::before */
  z-index: 1;                 /* Above glow */
  background: #081137;        /* Dark blue bg */
  border: 1px solid #37f540;  /* Green border */
  color: #23efd8;             /* Cyan text */
  padding: 6px 12px;          /* Padding */
  border-radius: 9999px;      /* Pill shape */
  font-size: 12px;            /* Small text */
  font-weight: 500;           /* Medium */
  white-space: nowrap;        /* No wrap */
  transition: 0.3s ease;      /* Smooth */
}

/* Glow effect behind badge */
.badge::before {
  content: "";                          /* Empty content */
  position: absolute;                   /* Positioned */
  left: 10%;                            /* Left offset */
  top: 20%;                             /* Top offset */
  width: 80%;                           /* Width */
  height: 60%;                          /* Height */
  background: linear-gradient(90deg, #00ff66, #00ffff, #0066ff, #00ff66);  /* Rainbow */
  filter: blur(18px);                   /* Blur */
  opacity: 0;                           /* Hidden */
  z-index: -1;                          /* Behind */
  transition: 0.3s;                     /* Smooth */
}

.badge:hover::before {
  opacity: 0.9;                         /* Show on hover */
  animation: hackerAura 1.5s infinite alternate;  /* Pulse */
}

/* Hacker aura animation */
@keyframes hackerAura {
  from {
    transform: scale(0.9);              /* Small */
    filter: blur(15px);                 /* Light blur */
  }
  to {
    transform: scale(1.15);             /* Bigger */
    filter: blur(25px);                 /* More blur */
  }
}

/* ============ Warning box ============ */
.warning-box {
  background: #113a4c;          /* Dark teal */
  border: 1px solid #5c3c0f;    /* Orange border */
  color: #fee461;               /* Yellow text */
  padding: 12px 16px;           /* Padding */
  border-radius: 12px;          /* Rounded */
  font-size: 13px;              /* Small text */
  margin-top: 24px;             /* Top space */
  line-height: 1.5;             /* Line height */
  transition: transform 0.3s ease;  /* Smooth */
  cursor: default;
}

.warning-box:hover {
  background-color: #17566f;    /* Red on hover */
  color: #fee461;               /* Blue text */
  transform: translateY(-4px);  /* Lift up */
}

/* ============ Main input box ============ */
.box {
  background: #14141f;                             /* Dark bg */
  border: 3px solid #65eadc;                       /* Cyan border */
  border-radius: 16px;                             /* Rounded */
  padding: 24px;                                   /* Padding */
  margin: 24px 0;                                  /* Vertical space */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);      /* Shadow */
}

.hint {
  color: #3172da;             /* Blue text */
  font-size: 15px;            /* Font size */
  margin-bottom: 16px;        /* Bottom space */
  font-weight: 500;           /* Medium */
}

/* ============ Textarea ============ */
textarea {
  position: relative;                          /* Positioned */
  z-index: 1;                                  /* Above bg */
  width: 100%;                                 /* Full width */
  min-height: 200px;                           /* Min height */
  background: hwb(202 3% 86%);                 /* Light gray */
  color: #81f8f0;                              /* Cyan text */
  border: 1px solid hwb(151 12% 58%);          /* Green border */
  border-radius: 12px;                         /* Rounded */
  padding: 16px;                               /* Padding */
  font-size: 16px;                             /* Font size */
  font-family: inherit;                        /* Same as body */
  line-height: 1.6;                            /* Line height */
  resize: vertical;                            /* Only vertical resize */
  outline: none;                               /* No default outline */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Fire aura on textarea focus */
textarea:focus {
  border-color: #ff8c00;                       /* Orange border */
  box-shadow:
    0 0 8px rgba(255, 140, 0, 0.8),            /* Inner glow */
    0 0 20px rgba(255, 100, 0, 0.7),           /* Middle glow */
    0 0 40px rgba(255, 70, 0, 0.5),            /* Outer glow */
    0 0 70px rgba(255, 50, 0, 0.3);            /* Far glow */
  animation: textareaFire 1.4s ease-in-out infinite alternate;
}

/* Fire animation */
@keyframes textareaFire {
  0% {
    box-shadow:
      0 0 8px rgba(255, 140, 0, 0.7),
      0 0 20px rgba(255, 100, 0, 0.5),
      0 0 35px rgba(255, 70, 0, 0.35);
  }
  50% {
    box-shadow:
      0 0 12px rgba(255, 160, 0, 0.85),
      0 0 28px rgba(255, 100, 0, 0.7),
      0 0 50px rgba(255, 60, 0, 0.5);
  }
  100% {
    box-shadow:
      0 0 15px rgba(255, 180, 0, 0.9),
      0 0 35px rgba(255, 100, 0, 0.8),
      0 0 60px rgba(255, 50, 0, 0.6),
      0 0 85px rgba(255, 30, 0, 0.3);
  }
}

/* Placeholder styling */
textarea::placeholder {
  color: #2df03cdd;           /* Green placeholder */
}

/* ============ Meta row ============ */
.meta-row {
  display: flex;                          /* Flex */
  justify-content: space-between;         /* Space between */
  font-size: 12px;                        /* Small text */
  color: #8a8a99;  /* muted, readable */
  margin-top: 8px;                        /* Top space */
  font-variant-numeric: tabular-nums;     /* Fixed-width numbers */
}

.warn-text {
  color: #ff8844;             /* Orange warning */
}

/* ============ Buttons ============ */
.btn-primary {
  width: 100%;                                                          /* Full width */
  background: linear-gradient(135deg, #1ba8a4, #1dd78a);                /* Teal-green gradient */
  color: #04221f;  /* dark text: readable on teal-green */
  border: none;                                                         /* No border */
  border-radius: 12px;                                                  /* Rounded */
  padding: 14px 24px;                                                   /* Padding */
  font-weight: 700;                                                     /* Bold */
  font-size: 16px;                                                      /* Font size */
  margin-top: 16px;                                                     /* Top space */
  cursor: pointer;                                                      /* Pointer */
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  font-family: inherit;                                                 /* Same font */
  touch-action: manipulation;                                           /* Touch friendly */
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);                                          /* Lift up */
  box-shadow: 0 8px 24px rgba(220, 250, 244, 0.75);                     /* Glow */
}
.btn-primary:active:not(:disabled) {
  transform: translateY(0);                                             /* Press down */
}
.btn-primary:disabled {
  opacity: 0.6;                                                         /* Dim */
  cursor: not-allowed;                                                  /* Not allowed */
}
.btn-primary:focus-visible {
  outline: 2px solid #27676f;                                           /* Focus outline */
  outline-offset: 2px;                                                  /* Outline gap */
}

/* Inline button (auto width) */
.inline-btn {
  display: inline-block;      /* Inline */
  width: auto;                /* Auto width */
  margin-top: 16px;           /* Top space */
  text-decoration: none;      /* No underline */
  text-align: center;         /* Center */
}

/* ============ Result box ============ */
.result {
  display: none;                          /* Hidden by default */
  margin-top: 24px;                       /* Top space */
  padding: 24px;                          /* Padding */
  border-radius: 12px;                    /* Rounded */
  background: #0a0a0f;                    /* Dark bg */
  border: 1px solid #1f1f2e;              /* Border */
  animation: fadeIn 0.3s ease;            /* Fade in */
}

/* Fade in animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.result h3 {
  font-size: 20px;            /* Font size */
  margin-bottom: 8px;         /* Bottom space */
}

/* ============ Progress bar ============ */
.bar {
  height: 10px;                       /* Height */
  background: #222;                   /* Dark bg */
  border-radius: 6px;                 /* Rounded */
  overflow: hidden;                   /* Clip */
  margin: 16px 0;                     /* Vertical space */
}

.fill {
  height: 100%;                       /* Full height */
  width: 0;                           /* Start at 0 */
  transition: width 0.8s ease;        /* Smooth fill */
  border-radius: 6px;                 /* Rounded */
}

.tag {
  font-size: 12px;            /* Small text */
  color: #1c7ae6;             /* Blue */
  margin-top: 8px;            /* Top space */
}

/* ============ Spinner ============ */
.spinner {
  width: 20px;                            /* Width */
  height: 20px;                           /* Height */
  border: 2px solid #2a2a3e;              /* Dark border */
  border-top-color: #7c5cff;              /* Purple top */
  border-radius: 50%;                     /* Circle */
  animation: spin 0.8s linear infinite;   /* Rotation */
  flex-shrink: 0;                         /* No shrink */
}
@keyframes spin {
  to { transform: rotate(360deg); }       /* Full rotation */
}

/* ============ Feature cards ============ */
.cards {
  display: grid;                          /* Grid layout */
  grid-template-columns: 1fr;             /* 1 column (mobile) */
  gap: 16px;                              /* Gap */
  margin: 32px 0;                         /* Vertical space */
}

.card {
  background: #14141f;                    /* Dark bg */
  border: 1px solid #1f1f2e;              /* Border */
  border-radius: 12px;                    /* Rounded */
  padding: 24px;                          /* Padding */
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.card:hover {
  transform: translateY(-2px);            /* Lift up */
  border-color: #2a2a3e;                  /* Brighter border */
}
.card h3 {
  font-size: 16px;                        /* Font size */
  margin-bottom: 8px;                     /* Bottom space */
  color: #7c5cff;                         /* Purple */
}
.card p {
  font-size: 14px;                        /* Font size */
  color: #aaa;                            /* Muted */
}

/* ============ Content section ============ */
.content {
  background: #14141f;                    /* Dark bg */
  border: 1px solid #1f1f2e;              /* Border */
  border-radius: 16px;                    /* Rounded */
  padding: 32px;                          /* Padding */
  margin: 24px 0;                         /* Vertical space */
}
.content h1 {
  font-size: 26px;                        /* Font size */
  margin-bottom: 16px;                    /* Bottom space */
}
.content h2 {
  font-size: 20px;                        /* Font size */
  margin: 24px 0 8px;                     /* Space */
  color: #7c5cff;                         /* Purple */
}
.content h3 {
  font-size: 16px;                        /* Font size */
  margin: 16px 0 8px;                     /* Space */
}
.content h4 {
  font-size: 15px;                        /* Font size */
  margin: 16px 0 4px;                     /* Space */
}
.content p {
  margin-bottom: 8px;                     /* Bottom space */
  color: #ccc;                            /* Light gray */
  font-size: 15px;                        /* Font size */
}
.content ul {
  margin: 8px 0 8px 24px;                 /* List margin */
  color: #ccc;                            /* Color */
}
.content li {
  margin-bottom: 4px;                     /* Item space */
}
.content a {
  color: #7c5cff;                         /* Purple */
  text-decoration: none;                  /* No underline */
}
.content a:hover {
  text-decoration: underline;             /* Underline on hover */
}

/* ============ Blog post ============ */
.blog-post {
  margin-bottom: 24px;                                          /* Bottom space */
  padding: 24px;                                                /* Padding */
  background: linear-gradient(145deg, #151522, #101018);        /* Gradient bg */
  border: 1px solid #25253a;                                    /* Border */
  border-radius: 16px;                                          /* Rounded */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);                  /* Shadow */
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.blog-post:hover {
  transform: translateY(-3px);                                  /* Lift up */
  border-color: #3a3760;                                        /* Brighter border */
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.35),
    0 0 24px rgba(124, 92, 255, 0.08);                          /* Glow */
}

.blog-title {
  font-size: 22px;                        /* Font size */
  margin-bottom: 8px;                     /* Bottom space */
  color: #8f83ff !important;              /* Purple (important) */
  line-height: 1.3;                       /* Line height */
  font-weight: 800;                       /* Extra bold */
}

.blog-meta {
  display: inline-block;                  /* Inline block */
  font-size: 13px;                        /* Font size */
  color: #58d6b3;                         /* Green */
  margin-bottom: 16px;                    /* Bottom space */
  font-style: normal;                     /* No italic */
  font-weight: 600;                       /* Semi bold */
  letter-spacing: 0.2px;                  /* Letter spacing */
}

.blog-post p {
  color: #c9c9d2;                         /* Light gray */
  line-height: 1.75;                      /* Line height */
}

.blog-post a {
  color: #65eadc;                         /* Cyan */
  font-weight: 600;                       /* Semi bold */
}

.blog-post a:hover {
  color: #9cfff5;                         /* Brighter cyan */
}

/* ============ Form inputs ============ */
input,
textarea.form-input {
  width: 100%;                                  /* Full width */
  padding: 12px;                                /* Padding */
  background: #0a0a0f;                          /* Dark bg */
  color: #fff;                                  /* White text */
  border: 1px solid #2a2a3e;                    /* Border */
  border-radius: 8px;                           /* Rounded */
  margin-bottom: 16px;                          /* Bottom space */
  font-family: inherit;                         /* Same font */
  font-size: 15px;                              /* Font size */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
textarea.form-input:focus {
  border-color: #7c5cff;                        /* Purple border */
  outline: none;                                /* No outline */
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.12); /* Focus glow */
}

label {
  display: block;                 /* Block level */
  font-size: 14px;                /* Font size */
  color: #aaa;                    /* Muted */
  margin-bottom: 4px;             /* Bottom space */
  font-weight: 500;               /* Medium */
}

/* ============ Form success ============ */
.form-success {
  margin-top: 24px;                                            /* Top space */
  padding: 28px;                                               /* Padding */
  border-radius: 16px;                                         /* Rounded */
  background: linear-gradient(145deg, #101c1d, #0c1415);       /* Gradient bg */
  border: 1px solid #1dd78a;                                   /* Green border */
  box-shadow:
    0 0 12px rgba(29, 215, 138, 0.22),
    0 0 34px rgba(29, 215, 138, 0.10);                         /* Glow */
  animation: successAppear 0.4s ease;                          /* Appear */
}

.form-success h2 {
  color: #1dd78a;                 /* Green */
  font-size: 28px;                /* Font size */
  margin-bottom: 8px;             /* Bottom space */
}

.form-success > p {
  color: #81f8f0;                 /* Cyan */
  margin-bottom: 20px;            /* Bottom space */
  font-weight: 700;               /* Bold */
}

.submitted-info {
  padding: 16px;                  /* Padding */
  border-radius: 10px;            /* Rounded */
  background: #0a0a0f;            /* Dark bg */
  border: 1px solid #1f1f2e;      /* Border */
}

.submitted-info p {
  color: #ccc;                    /* Light gray */
  margin: 6px 0;                  /* Vertical space */
}

.submitted-info strong {
  color: #7c5cff;                 /* Purple */
}

.form-error {
  margin-top: 16px;               /* Top space */
  padding: 14px;                  /* Padding */
  border-radius: 10px;            /* Rounded */
  background: #2a1014;            /* Dark red */
  border: 1px solid #ff5566;      /* Red border */
  color: #ff8894;                 /* Light red text */
}

/* Success appear animation */
@keyframes successAppear {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============ Footer ============ */
.footer {
  text-align: center;                             /* Center text */
  padding: 36px 16px;                             /* Padding */
  margin-top: 48px;                               /* Top space */
  background: #08080c;                            /* Very dark */
  border-top: 1px solid #29293a;                  /* Top border */
  color: #ffffff;                                 /* White text */
  font-size: 13px;                                /* Font size */
  font-weight: 600;                               /* Semi bold */
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.18);  /* Top shadow */
}

.footer p:first-child {
  color: #03c732;                                 /* Green */
  font-size: 14px;                                /* Font size */
  font-weight: 800;                               /* Extra bold */
  letter-spacing: 0.2px;                          /* Letter spacing */
  margin-bottom: 10px;                            /* Bottom space */
}

.footer a {
  color: #9f96ff;                                 /* Purple */
  text-decoration: none;                          /* No underline */
  margin: 0 4px;                                  /* Side margin */
  font-weight: 700;                               /* Bold */
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.footer a:hover {
  color: #65eadc;                                 /* Cyan */
  text-shadow: 0 0 10px rgba(101, 234, 220, 0.35);/* Glow */
}

/* ============ Responsive: tablet ============ */
@media (min-width: 640px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);        /* 3 columns */
  }
  .box {
    padding: 32px;                                /* More padding */
  }
  .hero {
    padding: 48px 0 32px;                         /* More space */
  }
  .content {
    padding: 48px;                                /* More padding */
  }
}

/* ============ Responsive: desktop ============ */
@media (min-width: 1024px) {
  .container {
    padding: 0 24px;                              /* More side padding */
  }
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;       /* Kill animations */
    transition-duration: 0.01ms !important;       /* Kill transitions */
  }
}

/* ============ Print styles ============ */
@media print {
  .header,
  .footer,
  .btn-primary,
  .warning-box {
    display: none;                                /* Hide these */
  }
  body {
    background: #fff;                             /* White bg */
    color: #000;                                  /* Black text */
  }
}

/* ============================================================
   CONTACT SUCCESS SECTION
   ============================================================ */
.contact-success {
  margin-top: 24px;                                     /* Top space */
  padding: 40px 28px;                                   /* Padding */
  text-align: center;                                   /* Center */
  background: #11151d;                                  /* Dark bg */
  border: 1px solid rgba(34, 204, 136, 0.45);           /* Green border */
  border-radius: 16px;                                  /* Rounded */
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.35),
    0 0 30px rgba(34, 204, 136, 0.08);                  /* Glow */
  animation: contactSuccessIn 0.4s ease;                /* Appear */
}

.contact-success-icon {
  width: 64px;                                          /* Width */
  height: 64px;                                         /* Height */
  margin: 0 auto 18px;                                  /* Center + bottom */
  display: flex;                                        /* Flex */
  align-items: center;                                  /* Center */
  justify-content: center;                              /* Center */
  border-radius: 50%;                                   /* Circle */
  background: rgba(34, 204, 136, 0.1);                  /* Green tint */
  border: 2px solid #22cc88;                            /* Green border */
  color: #22cc88;                                       /* Green */
  font-size: 34px;                                      /* Big */
  font-weight: 800;                                     /* Bold */
}

.contact-success h2 {
  margin-bottom: 8px;                                   /* Bottom space */
  color: #ffffff;                                       /* White */
  font-size: 28px;                                      /* Font size */
  font-weight: 800;                                     /* Extra bold */
}

.contact-success-title {
  margin-bottom: 22px;                                  /* Bottom space */
  color: #22cc88;                                       /* Green */
  font-size: 15px;                                      /* Font size */
  font-weight: 600;                                     /* Semi bold */
}

.contact-success-info {
  max-width: 500px;                                     /* Max width */
  margin: 0 auto 18px;                                  /* Center + bottom */
  padding: 15px 18px;                                   /* Padding */
  text-align: left;                                     /* Left align */
  background: #0a0a0f;                                  /* Dark bg */
  border: 1px solid #242b35;                            /* Border */
  border-radius: 10px;                                  /* Rounded */
}

.contact-success-info p {
  margin: 7px 0;                                        /* Vertical space */
  color: #cbd5e1;                                       /* Light gray */
  font-size: 14px;                                      /* Font size */
}

.contact-success-info strong {
  color: #ffffff;                                       /* White */
}

.contact-success-note {
  margin-bottom: 22px;                                  /* Bottom space */
  color: #999;                                          /* Muted */
  font-size: 13px;                                      /* Small */
}

.contact-another-btn {
  border: 1px solid #2a2a3e;                            /* Border */
  border-radius: 10px;                                  /* Rounded */
  padding: 11px 20px;                                   /* Padding */
  background: #181824;                                  /* Dark bg */
  color: #e8e8e8;                                       /* Text color */
  font-family: inherit;                                 /* Same font */
  font-size: 14px;                                      /* Font size */
  font-weight: 600;                                     /* Semi bold */
  cursor: pointer;                                      /* Pointer */
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.contact-another-btn:hover {
  background: #222235;                                  /* Brighter */
  border-color: #22cc88;                                /* Green border */
  transform: translateY(-1px);                          /* Lift */
}

@keyframes contactSuccessIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 480px) {
  .contact-success {
    padding: 32px 18px;                                 /* Less padding */
  }
  .contact-success h2 {
    font-size: 24px;                                    /* Smaller */
  }
}

/* ============================================================
   TABS (added for humanize feature)
   ============================================================ */

/* Tabs container */
.tabs {
  display: flex;                              /* Flex layout */
  gap: 8px;                                   /* Gap between tabs */
  margin: 24px 0 0;                           /* Top space */
  border-bottom: 1px solid #1f1f2e;           /* Bottom border */
  flex-wrap: wrap;                            /* Wrap on small */
}

/* Individual tab button */
.tab {
  background: transparent;                    /* No bg */
  border: none;                               /* No border */
  color: #aaa;                                /* Muted text */
  padding: 12px 20px;                         /* Padding */
  font-size: 15px;                            /* Font size */
  font-weight: 600;                           /* Semi bold */
  cursor: pointer;                            /* Pointer */
  border-bottom: 3px solid transparent;       /* Bottom border (hidden) */
  transition: all 0.2s ease;                  /* Smooth */
  font-family: inherit;                       /* Same font */
}

/* Hover state */
.tab:hover {
  color: #e8e8e8;                             /* Bright text */
}

/* Active tab */
.tab.active {
  color: #7c5cff;                             /* Purple */
  border-bottom-color: #7c5cff;               /* Purple underline */
}

/* Tab panel — hidden by default */
.tab-panel {
  display: none;
}

/* Active panel — visible */
.tab-panel.active {
  display: block;
  animation: fadeIn 0.3s ease;                /* Fade in */
}

/* Readonly textarea — humanized output ke liye */
textarea[readonly] {
  color: #81f8f0;                             /* Cyan */
  cursor: text;                               /* Text cursor */
}

/* Readonly focus — no fire animation */
textarea[readonly]:focus {
  animation: none;                            /* No fire */
  border-color: #22cc88;                      /* Green border */
  box-shadow: 0 0 12px rgba(34, 204, 136, 0.35); /* Green glow */
}

/* Select dropdown focus */
select:focus {
  outline: none;                              /* No outline */
  border-color: #7c5cff;                      /* Purple border */
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.12); /* Focus glow */
}


/* ============================================================
   FIXES
   ============================================================ */

/* hidden attribute must always win */
[hidden] { display: none !important; }

/* Link-buttons: .content a / .blog-post a colors were overriding button text */
.content a.btn-primary,
.content a.btn-primary:hover,
.blog-post a.btn-primary,
.blog-post a.btn-primary:hover {
  color: #04221f;
  text-decoration: none;
}

/* Select dropdown (was inline) */
select {
  width: 100%;
  padding: 12px;
  background: #0a0a0f;
  color: #fff;
  border: 1px solid #2a2a3e;
  border-radius: 8px;
  margin-bottom: 16px;
  font-family: inherit;
  font-size: 15px;
}