/*
WARNING: PROPRIETARY & CONFIDENTIAL
This code is the exclusive property of PutFyre Innovations.
Any unauthorized viewing, editing, copying or distribution is strictly prohibited.
If you wish to edit this code, you must obtain explicit written permission.
Ownership Signature (Encrypted): UHV0RnlyZSBJbm5vdmF0aW9ucyAtIEF1dGhvcml6ZWQgQWNjZXNzIE9ubHk=
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;600;800&family=Cormorant+Garamond:wght@600;700&display=swap');

* {
  box-sizing: border-box;
}

html {
  overflow-x: auto;
  overflow-y: auto;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  min-width: 100%;
  /* Use flex to center body, enabling zoom-to-center behavior */
  display: flex;
  flex-direction: column;
  align-items: center;
}

body {
  overflow-x: visible;
  overflow-y: auto;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  min-width: 100%;
  font-family: "Inter", sans-serif;
  background-color: #ffffff;
  color: #1e293b;
  scroll-behavior: smooth;
}
:root {
  --primary-color: #7b2587;
  --accent-teal: #0df2c1;
  --accent-pink: #f0576f;
  --accent-purple: #9953ed;
  --title-txt-color: #404040;
  --common-txt-color: #58595d;
  --theme-txt-color: #e62170;
  --theme-border-color: #e62170;
  --nav-text-color: #2e2f35;
  --glass-bg: rgba(0, 0, 0, 0.05);
  --glass-border: rgba(0, 0, 0, 0.1);
}
/* ── Custom Scrollbar ───────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7b2587 0%, #e62170 100%);
  border-radius: 10px;
  border: 2px solid #f1f1f1;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #a0256b 0%, #f0576f 100%);
}
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #7b2587 #f1f1f1;
}

/* ── Layout ─────────────────────────────────────────────────── */
.container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Allow horizontal scroll on zoom for static layout on desktop */
  overflow-x: visible;
  /* Pad content below the absolute-positioned header */
  padding-top: 54px;
  min-width: 100%;
}

/* ── Header / Nav ────────────────────────────────────────────── */
.header {
  padding: 4px 40px;
  position: fixed; /* Header stays visible on scroll */
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  /* Ensure header never shrinks below container's padding-top clearance */
  min-height: 54px;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1000;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  box-sizing: border-box;
}
.header.scrolled {
  padding: 2px 40px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.head-container {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.col1 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.logo {
  width: 160px;
  height: auto;
  max-width: 100%;
  min-height: 36px; /* Prevents logo from collapsing at tiny viewport widths */
  display: block;
  transition: transform 0.3s ease;
}
.logo:hover {
  /* transform: scale(1.05); - Removed for static feel */
}
.head-module ul {
  display: flex;
  list-style: none;
  gap: 40px;
  margin: 0;
  padding: 0;
}
.head-module ul li button {
  border: none;
  background-color: transparent;
  color: #1e293b;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  padding: 8px 0;
}
.head-module ul li button::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary-color);
  transition: width 0.3s ease;
}
.head-module ul li button:hover {
  color: var(--primary-color);
  cursor: pointer;
}
.head-module ul li button:hover::after {
  width: 100%;
}
.head-module ul li button.active {
  color: var(--primary-color);
  font-weight: 600;
}
.head-module ul li button.active::after {
  width: 100%;
}
.head-module button {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.home {
  cursor: pointer;
}
/* ── Hamburger Button ───────────────────────────────────────── */
.bar {
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  align-self: center;
  flex-shrink: 0;
}
.bar img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.bar img:hover {
  transform: scale(1.08);
  opacity: 0.85;
}

/* ── Mobile Drawer ───────────────────────────────────────────── */
.mobile-nav-drawer {
  display: none;
  position: fixed;
  top: 46px; /* Adjusted to match new slimmer header */
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
  padding: 0;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease, opacity 0.3s ease, visibility 0.4s ease;
}
.mobile-nav-drawer.open {
  max-height: 400px;
  padding: 8px 0 16px 0;
  opacity: 1;
  visibility: visible;
}
.mobile-nav-drawer ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;
}
.mobile-nav-drawer ul li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.mobile-nav-drawer ul li:last-child {
  border-bottom: none;
}
.mobile-nav-drawer ul li button {
  width: 100%;
  padding: 16px 28px;
  text-align: left;
  background: transparent;
  border: none;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
  position: relative;
}
.mobile-nav-drawer ul li button::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--primary-color);
  border-radius: 0 3px 3px 0;
  transition: height 0.25s ease;
}
.mobile-nav-drawer ul li button:hover {
  background: rgba(123, 37, 135, 0.04);
  color: var(--primary-color);
  padding-left: 36px;
}
.mobile-nav-drawer ul li button:hover::before {
  height: 60%;
}
.mobile-nav-drawer ul li button.active {
  color: var(--primary-color);
  font-weight: 700;
}
.mobile-nav-drawer ul li button.active::before {
  height: 60%;
}

/* ── Main Column ─────────────────────────────────────────────── */
.main-col {
  background-color: #ffffff;
  width: 100%;
}

/* ── Home Page Hero ──────────────────────────────────────────── */
#main-container {
  background: linear-gradient(135deg, #6b1f75 0%, #a0256b 35%, #d93d6e 70%, #f0576f 100%);
  /* background-attachment: fixed removed to match infosys.com natural scrolling */
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 54px; /* compensate for container's padding-top so gradient starts flush */
  padding-bottom: 0; /* vertical spacing handled by .hero-section padding */
  margin-top: -54px; /* Pull the hero up to fill the container padding gap */
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}
#main-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 10% 50%, rgba(255,255,255,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 90% 50%, rgba(0,0,0,0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.mesh-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-main-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 100px;
  width: 100%;
  padding: 60px 60px 20px 60px;
  max-width: 1600px;
  margin: 0 auto;
}
.hero-left-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 600px;
}
.zero-shape {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.hero-right-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 600px;
}
.ignite-highlight-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 500px;
  padding: 50px 40px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 30px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  animation: highlightFloat 6s ease-in-out infinite;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.ignite-highlight-box:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 100%);
  box-shadow: 0 35px 70px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  /* transform: translateY(-5px); - Removed for static feel */
}
@keyframes highlightFloat {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
  100% { transform: translateY(0px); }
}
.ignite-number {
  font-size: 120px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.06);
  position: absolute;
  top: -50px;
  right: 20px;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.05em;
  transition: all 0.4s ease;
}
.ignite-highlight-box:hover .ignite-number {
  color: rgba(255, 255, 255, 0.1);
  transform: translateY(-3px);
}
.ignite-image-large {
  max-width: 100%;
  width: 100%;
  height: auto;
  object-fit: contain;
  z-index: 2;
  position: relative;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.ignite-highlight-box:hover .ignite-image-large {
  /* transform: scale(1.03); - Removed for static feel */
}
.hero-description-center {
  max-width: 900px;
  margin: 40px auto 60px auto;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.8;
  text-align: center;
  font-weight: 300;
  padding: 30px 40px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 25px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-description {
  max-width: 800px;
  margin: 40px auto;
  color: rgba(255, 255, 255, 0.9);
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  line-height: 1.8;
  text-align: center;
  font-weight: 300;
  padding: 30px 50px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  text-align: justify;
  text-align-last: center;
  transition: all 0.5s ease;
}
@keyframes blobFloat {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(100px, 50px) scale(1.2); }
}
.home-image {
  max-width: 100%;
  height: auto;
  animation: floatShip 6s ease-in-out infinite;
  filter: drop-shadow(0px 30px 60px rgba(0, 0, 0, 0.35));
  object-fit: contain;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.zero-shape:hover .home-image {
  /* transform: scale(1.08); - Removed for static feel */
  filter: drop-shadow(0px 40px 70px rgba(0, 0, 0, 0.45));
}
@keyframes floatShip {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-35px) rotate(2deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}
@keyframes floatShipMobile {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(1.5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}
.orb {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 70%);
  filter: blur(100px);
  z-index: -1;
  pointer-events: none;
  animation: meshMove1 25s infinite alternate ease-in-out;
}
.orb-2 {
  background: radial-gradient(circle, rgba(153, 83, 237, 0.4), transparent 70%);
  width: 800px;
  height: 800px;
  bottom: -200px;
  right: -200px;
  animation: meshMove2 35s infinite alternate ease-in-out;
}
.orb-3 {
  position: absolute;
  background: radial-gradient(circle, rgba(240, 87, 111, 0.4), transparent 70%);
  width: 700px;
  height: 700px;
  top: -100px;
  right: 10%;
  filter: blur(120px);
  z-index: -1;
  animation: meshMove3 30s infinite alternate-reverse ease-in-out;
}
@keyframes meshMove1 {
  0% { transform: translate(-10%, -10%) scale(1); }
  100% { transform: translate(20%, 30%) scale(1.2); }
}
@keyframes meshMove2 {
  0% { transform: translate(10%, 20%) scale(1.1); }
  100% { transform: translate(-20%, -10%) scale(0.9); }
}
@keyframes meshMove3 {
  0% { transform: translate(20%, -20%) rotate(0deg); }
  100% { transform: translate(-10%, 10%) rotate(45deg); }
}
.watermark-i {
  position: absolute;
  font-family: 'Outfit', sans-serif;
  font-size: 800px;
  color: rgba(255, 255, 255, 0.03);
  z-index: -1;
  user-select: none;
  font-weight: 800;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in-right {
  opacity: 0;
  transform: translateX(30px);
  animation: fadeInRight 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeInRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }
.delay-5 { animation-delay: 1.0s; }

/* ── Hero Roman "I" Typography (Home) ──────────────────────── */
.hero-roman-i {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  perspective: 1500px;
  margin-top: -100px;
}
.ignite-image {
  animation: igniteFloat 6s ease-in-out infinite;
  transition: filter 0.3s ease;
}
.ignite-image:hover {
  filter: drop-shadow(0px 30px 50px rgba(0, 0, 0, 0.4)) !important;
}
@keyframes igniteFloat {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(-1deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}
.ignite-cap {
  font-family: 'Cormorant Garamond', serif;
  font-size: 85px;
  font-weight: 700;
  letter-spacing: 0.25em;
  background: linear-gradient(to bottom, #fff7ed, #fbbf24);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: -5px;
}
.your-stem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin: 15px 0;
  color: #fff7ed;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: 58px;
  letter-spacing: 0.1em;
  position: relative;
  filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.3));
}
.your-stem span {
  display: block;
  line-height: 0.85;
}
.imagination-base {
  font-family: 'Cormorant Garamond', serif;
  font-size: 95px;
  font-weight: 700;
  letter-spacing: 0.15em;
  background: linear-gradient(to right, #fbbf24, #ffffff, #fbbf24);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 8s linear infinite;
  line-height: 1;
  margin-top: -5px;
}
@keyframes shine {
  to { background-position: 200% center; }
}

/* ── Section Header (all pages) ─────────────────────────────── */
.section-header {
  text-align: center;
  max-width: 750px;
  margin: 70px auto 10px auto;
}
.section-label {
  color: var(--accent-pink);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.85rem;
  margin-bottom: 12px;
  display: block;
}
.section-title {
  color: #334155;
  font-family: 'Outfit', sans-serif;
  font-size: 34px;
  margin: 0;
  font-weight: 600;
  line-height: 1.1;
  width: 100%;
}
/* Inner-page section headings: scoped to be clearly distinct from body text */
.section-header .section-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ── About / Services page layouts ──────────────────────────── */
.first, .second, .third, .fourth, .fifth, .sixth {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 35px 60px 80px 60px;
  margin: 0 auto 40px auto;
  max-width: 1400px;
}
.left-pic, .right-pic, .left-pic2 {
  flex: 0 0 auto;
  max-width: 45%;
}
.left-pic img, .right-pic img, .left-pic2 img {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  object-fit: contain;
  background-color: #ffffff;
  padding: 30px;
  box-sizing: border-box;
  display: block;
  transition: transform 0.5s ease;
  margin: 0 auto;
}
.left-pic img:hover, .right-pic img:hover, .left-pic2 img:hover {
  /* transform: scale(1.02); - Removed for static feel */
}

.right-text, .left-text, .right-text2 {
  flex: 1;
  font-size: 15px;
  line-height: 1.8;
  color: #334155;
  text-align: justify;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.module-title {
  font-size: 1.4rem;
  text-align: left;
  font-weight: 700;
  color: #7b2587;
  margin-bottom: 16px;
  padding-bottom: 8px;
  display: inline-block;
}
.content p {
  padding: 10px !important;
  margin: 10px !important;
}

/* ── About page stats grid ────────────────────────────────── */
.stats-grid {
  display: flex;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding: 20px;
}
.stat-card {
  text-align: center;
  padding: 20px 10px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(123, 37, 135, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  width: 160px;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: default;
}
.stat-card:hover {
  transform: translateY(-10px) scale(1.04);
  box-shadow: 0 24px 48px rgba(123, 37, 135, 0.14);
  border-color: var(--primary-color);
}
.stat-icon {
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), filter 0.4s ease;
  filter: drop-shadow(0 4px 8px rgba(123, 37, 135, 0.15));
  mix-blend-mode: multiply;
}
.stat-card:hover .stat-icon {
  transform: scale(1.15) rotate(-4deg);
  filter: drop-shadow(0 8px 16px rgba(240, 87, 111, 0.3));
}
@media (max-width: 768px) and (pointer: coarse) {
  .hero-main-row {
    flex-direction: column;
    gap: 40px;
    padding: 40px 20px 20px 20px;
  }
  .hero-left-section, .hero-right-section {
    max-width: 100%;
  }
  .ignite-highlight-box {
    max-width: 100%;
    padding: 40px 30px;
  }
  .ignite-number {
    font-size: 80px;
    top: -35px;
    right: 15px;
  }
  .hero-description-center {
    margin: 30px auto 40px auto;
    padding: 25px 20px;
    font-size: 16px;
  }
  .stats-grid { gap: 25px; }
  .stat-card { min-width: 120px; padding: 20px 15px; }
}

/* ── Footer ──────────────────────────────────────────────────── */
/* ── Footer ──────────────────────────────────────────────────── */
.footer {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: #000000;
  color: #fff;
  padding: 60px 0 40px 0;
  margin-top: 0;
  border-radius: 0;
  position: relative;
  z-index: 4;
}
.footer-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1200px;
}
.footer-media {
  margin-top: 30px;
}
.footer-media ul {
  display: flex;
  justify-content: center;
  list-style: none;
  gap: 40px;
}
.logo-icon {
  width: 32px;
  transition: transform 0.3s ease;
}
.logo-icon:hover {
  transform: translateY(-3px);
}
.copy-rights {
  text-align: center;
  font-size: 14px;
  opacity: 0.6;
  margin-top: 20px;
}
.cp-logo {
  margin-top: 40px !important;
}
.footer .logo.home {
  width: 140px;
}

/* ── Careers page ────────────────────────────────────────────── */
.career-container {
  padding: 40px 60px;
  max-width: 1400px;
  margin: 0 auto;
}
.career-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(220px, auto);
  grid-auto-flow: dense;
  gap: 25px;
  margin: 60px 0;
  padding: 0 20px;
}
.career-grid ::selection {
  background: var(--accent-pink);
  color: #fff;
}
.career-grid ::-moz-selection {
  background: var(--accent-pink);
  color: #fff;
}
.career-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 40px 30px;
  border-radius: 28px;
  text-align: center;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  position: relative;
  overflow: hidden;
}
.career-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-pink) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.career-card:hover {
  transform: translateY(-12px) scale(1.02);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 30px 60px rgba(240, 87, 111, 0.12), 0 15px 30px rgba(0, 0, 0, 0.05);
  border-color: rgba(240, 87, 111, 0.2);
}
.career-card:active {
  transform: translateY(-8px) scale(0.98);
  box-shadow: 0 5px 15px rgba(240, 87, 111, 0.2);
}
.career-card:active .card-category {
  color: var(--accent-pink);
}

/* ── Modal Popup Styling ────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(49, 10, 93, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease;
}
.modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}
.modal-content {
  background: #ffffff;
  width: 90%;
  max-width: 600px;
  border-radius: 40px;
  padding: 50px;
  position: relative;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.2);
  transform: scale(0.9) translateY(20px);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.modal-backdrop.active .modal-content {
  transform: scale(1) translateY(0);
}
.modal-close {
  position: absolute;
  top: 30px;
  right: 30px;
  background: #f1f5f9;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  transition: all 0.3s ease;
}
.modal-close:hover {
  background: #e2e8f0;
  color: #0f172a;
  transform: rotate(90deg);
}
.modal-header {
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  padding-bottom: 20px;
}
.modal-header h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 32px;
  color: #1e293b;
  margin-top: 5px;
}
.modal-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.modal-body li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 1.6;
  color: #475569;
}
.modal-body li::before {
  content: '✦';
  position: absolute;
  left: 0;
  color: #fbbf24;
  font-size: 14px;
}
.modal-body .policy {
  margin-top: 30px;
  padding: 20px;
  background: #fdfae6;
  border-radius: 16px;
  color: #854d0e;
  font-weight: 600;
  font-size: 14px;
  border-left: 4px solid #fbbf24;
}
.modal-body .policy::before { display: none; }

.modal-footer {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

/* ── Bento Card Interaction ── */
.view-details {
  font-size: 0.85rem;
  color: var(--primary-color);
  font-weight: 700;
  margin-top: 15px;
  opacity: 0.7;
  transition: all 0.3s ease;
}
.career-card:hover .view-details {
  opacity: 1;
  transform: translateX(5px);
}
.career-card {
  cursor: pointer;
}

.career-card h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
  color: #334155;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.career-card .card-category {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary-color);
  font-weight: 700;
  margin-bottom: 12px;
  opacity: 0.8;
}
.career-info-text {
  max-width: 900px;
  margin: 40px auto;
  text-align: justify;
  text-align-last: center;
  font-size: 18px;
  line-height: 1.8;
  color: #475569;
}
.career-apply-box {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  padding: 50px;
  border-radius: 30px;
  text-align: center;
  margin: 80px 0;
  border: 1px solid rgba(0,0,0,0.03);
}
.career-apply-box h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 28px;
  margin-bottom: 20px;
  color: #334155;
}
.career-apply-box p {
  font-size: 18px;
  line-height: 1.8;
  color: #475569;
  margin-bottom: 25px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
  text-align-last: center;
}
.email-highlight {
  color: var(--primary-color);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.3s ease;
}
.email-highlight:hover {
  color: var(--accent-pink);
}

/* ── Scroll / Fade animations ────────────────────────────────── */
.fall-down {
  opacity: 0;
  transform: translateY(-80px);
  transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fall-down.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Contact page ────────────────────────────────────────────── */
.contact-hero-container {
  background: #ffffff;
  min-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-bottom: 60px;
}
.contact-section {
  padding: 20px 20px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.contact-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  margin: 30px auto 0 auto;
  width: 100%;
  max-width: 900px;
}
.details-map-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 50px;
  width: 100%;
  max-width: 1100px;
  margin: 40px auto 0 auto;
  align-items: center;
}
.map-container {
  width: 100%;
  height: 100%;
  min-height: 450px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 15px 45px rgba(0,0,0,0.03);
  transition: all 0.4s ease;
}
.map-container:hover {
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}
.map-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.left-column {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  align-items: center;
}
.info-under-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  width: 100%;
}
.info-box-compact {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  padding: 5px 0;
  background: transparent;
  transition: all 0.3s ease;
  text-align: left;
  width: 100%;
}
.info-box-compact:hover {
  background: #ffffff;
  border-color: var(--primary-color);
  box-shadow: 0 10px 20px rgba(0,0,0,0.03);
  transform: translateY(-2px);
}
.icon-wrap {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-pink) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 10px 20px rgba(123, 37, 135, 0.15);
}
.icon-wrap .info-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.info-box-compact .info-details h4 {
  display: none;
}
.info-box-compact .info-details p {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #1e293b;
  font-weight: 500;
}
.contact-card {
  background: #ffffff;
  border-radius: 30px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.05);
  padding: 45px 50px;
  width: 100%;
  max-width: 800px;
  margin: 20px auto 0 auto;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.contact-card:hover {
  box-shadow: 0 50px 100px rgba(0, 0, 0, 0.2);
  transform: translateY(-5px);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
}
.field-wrapper {
  margin-bottom: 32px;
  position: relative;
}
.field-wrapper input,
.field-wrapper textarea {
  width: 100%;
  border: none;
  border-bottom: 2px solid rgba(0,0,0,0.06);
  padding: 10px 0;
  font-size: 15px;
  color: #1e293b;
  background: transparent;
  outline: none;
  transition: all 0.3s ease;
  font-family: 'Inter', sans-serif;
  resize: none;
  letter-spacing: -0.01em;
}
.field-wrapper textarea {
  min-height: 70px;
  overflow: hidden;
}
.field-wrapper input::placeholder,
.field-wrapper textarea::placeholder {
  color: #94a3b8;
  font-size: 15px;
}
.field-wrapper input:focus,
.field-wrapper textarea:focus {
  border-bottom-color: var(--primary-color);
}
.field-wrapper input.invalid,
.field-wrapper textarea.invalid {
  border-bottom-color: #ef4444;
}
.field-wrapper .err-msg {
  color: #ef4444;
  font-size: 12px;
  font-weight: 500;
  margin-top: 6px;
  display: none;
  position: absolute;
  left: 0;
}
.field-wrapper .err-msg.show {
  display: block;
}
.submit-btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.contact-submit-btn {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-pink) 100%);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 16px 60px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.05em;
  box-shadow: 0 10px 30px rgba(123, 37, 135, 0.3);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  font-family: 'Outfit', sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-align: center;
}
.contact-submit-btn:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 15px 40px rgba(123, 37, 135, 0.4);
}
.contact-submit-btn:active {
  transform: scale(0.98);
}
.contact-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* ── Toast Notification ──────────────────────────────────────── */
#toast {
  position: fixed;
  top: 40px;
  right: 40px;
  padding: 20px 35px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
  display: none;
  z-index: 9999;
  animation: toastSlideIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  font-family: 'Inter', sans-serif;
}
#toast.success {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}
#toast.error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(100px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Spinner (form loading) ──────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: contactSpin 0.7s linear infinite;
  margin-right: 12px;
  vertical-align: middle;
}
@keyframes contactSpin {
  to { transform: rotate(360deg); }
}

/* ── Products Page — Launch Dashboard ───────────────────────── */
.products-dashboard {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px 80px 20px;
  width: 100%;
  box-sizing: border-box;
}
.products-hero-img {
  display: flex;
  justify-content: center;
  padding: 20px;
  margin-bottom: 20px;
}
.products-hero-img img {
  max-width: 500px;
  width: 100%;
  height: auto;
  border-radius: 30px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
  object-fit: cover;
}
.countdown-section {
  text-align: center;
  margin-bottom: 80px;
}
.countdown-grid {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 40px 0 30px 0;
  flex-wrap: wrap;
}
.time-unit {
  background: #ffffff;
  border: 2px solid rgba(123, 37, 135, 0.08);
  min-width: 110px;
  padding: 28px 15px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 10px 30px rgba(123, 37, 135, 0.06);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.time-unit:hover {
  transform: translateY(-6px);
  border-color: var(--accent-pink);
  box-shadow: 0 20px 40px rgba(240, 87, 111, 0.2);
}
.time-val {
  font-family: 'Outfit', sans-serif;
  font-size: 46px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-pink));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: 1;
  margin-bottom: 10px;
}
.time-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #94a3b8;
}
.launch-note {
  font-size: 18px;
  color: #475569;
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto;
}
.newsletter-section {
  max-width: 860px;
  margin: 0 auto;
}
#nl-name, #fullname {
  text-transform: capitalize;
}
.newsletter-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 30px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.05);
  padding: 60px 55px;
  text-align: center;
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.newsletter-card:hover {
  box-shadow: 0 50px 100px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}
.newsletter-header h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 34px;
  font-weight: 800;
  color: #334155;
  margin-bottom: 14px;
}
.newsletter-header p {
  color: #64748b;
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 45px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.sub-counter-wrap {
  margin-top: 30px;
  padding-top: 25px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.sub-counter-text {
  font-size: 18px;
  color: #64748b;
  margin: 0;
  font-weight: 500;
  letter-spacing: 0.02em;
}
#sub-count {
  color: #682285;
  font-weight: 800;
  font-size: 18px;
  margin-right: 2px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 40px;
  margin-bottom: 10px;
  text-align: left;
}

/* ── Responsive (≤960px) ─────────────────────────────────────── */
@media (max-width: 960px) {
  html, body, .container {
    min-width: 100% !important;
  }
  html {
    display: block !important; /* Fixes subpixel top gaps/offsets caused by flex centering on mobile */
  }
  .first, .second, .third, .fourth, .fifth, .sixth {
    padding: 25px 40px 55px 40px;
    gap: 30px;
  }
  .section-header { padding: 0 20px; }
  .career-container { padding: 30px 40px; }

  /* Navigation Drawer toggle */
  .head-module { display: none !important; }
  .bar { display: flex; }
  .mobile-nav-drawer { display: block; }
}

@media (max-width: 768px) {
  .details-map-grid { grid-template-columns: 1fr; gap: 30px; }
  .first, .second, .third, .fourth, .fifth, .sixth {
    flex-direction: column;
    padding: 35px 30px;
    gap: 30px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 30px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.03);
    margin: 0 20px 40px 20px;
    width: auto;
  }
  .second, .fourth, .sixth {
    flex-direction: column-reverse;
  }
  .left-pic img, .right-pic img, .left-pic2 img {
    margin: 0 auto !important;
    max-width: 380px !important;
    border-radius: 20px;
  }
  .left-pic, .right-pic, .left-pic2 { max-width: 100%; text-align: center; }
  .left-pic img, .right-pic img, .left-pic2 img { margin-left: 0 !important; margin-right: 0 !important; max-width: 100%; }
  .section-header .section-title { font-size: 28px; }
  .career-grid { 
    grid-template-columns: repeat(2, 1fr); 
    gap: 20px; 
    grid-auto-rows: minmax(180px, auto);
  }
  .stats-grid { gap: 30px; }
  .career-container { padding: 20px 30px; }

  /* Remove body padding — container already handles header clearance */
  .header {
    padding: 4px 20px;
    top: 0 !important;
    margin-top: 0 !important;
  }
  .header.scrolled {
    padding: 2px 20px;
  }
  /* Contact */
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .contact-card { padding: 30px 20px; }
  .info-box-compact { padding: 12px; }
  .form-grid { grid-template-columns: 1fr; }
  /* Products countdown */
  .countdown-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px 10px;
    justify-items: center;
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
  .time-unit { min-width: 0; width: 100%; padding: 12px 5px; }
  .time-val { font-size: 28px; }
  .newsletter-card { padding: 35px 20px; text-align: left; hyphens: none; -webkit-hyphens: none; }
  /* Content sections */
  .first, .second, .third, .fourth, .fifth, .sixth {
    padding: 25px 20px;
    gap: 25px;
    margin: 0 10px 30px 10px;
    border-radius: 25px;
  }
  .second, .fourth, .sixth {
    flex-direction: column-reverse;
  }
  .left-pic img, .right-pic img, .left-pic2 img {
    margin: 0 auto !important;
    max-width: 100% !important;
    width: 280px !important;
  }
  .right-text, .left-text, .right-text2 { font-size: 14px; line-height: 1.7; text-align: left; hyphens: none; -webkit-hyphens: none; }
  .story-content, .launch-note { text-align: left; hyphens: none; -webkit-hyphens: none; }
  /* Section headers */
  .section-header { margin: 35px auto 8px auto; padding: 0 15px; }
  .section-header .section-title { font-size: 24px; }
  .section-label { font-size: 0.75rem; }
  .info-details p { text-align: left; hyphens: none; -webkit-hyphens: none; }
  .stat-card p, .difference-card p { text-align: center; hyphens: none; -webkit-hyphens: none; }
  .career-container > .fall-down:first-child { margin-bottom: 30px !important; }
  /* Careers */
  .career-grid { 
    grid-template-columns: 1fr; 
    gap: 20px; 
    padding: 0 10px; 
    grid-auto-rows: auto;
  }
  .career-container { padding: 15px 20px; }
  .career-info-text { font-size: 15px; margin: 20px auto; text-align: left; hyphens: none; -webkit-hyphens: none; }
  .career-apply-box { padding: 30px 20px; margin: 40px 0; }
  .career-apply-box h2 { font-size: 22px; }
  /* Stats */
  .stats-grid { gap: 20px; padding: 10px; }
  .stat-card { min-width: 110px; padding: 20px 15px; }
  /* Footer */
  .footer-media ul { gap: 20px; flex-wrap: wrap; justify-content: center; }
  .logo-icon { width: 30px; }
  /* Home hero (carried over) */
  .hero-main-row { flex-direction: column; gap: 40px; padding: 40px 20px 20px 20px; }
  .hero-left-section, .hero-right-section { max-width: 100%; }
  .ignite-highlight-box { max-width: 100%; padding: 40px 30px; }
  .ignite-number { font-size: 80px; top: -35px; right: 15px; }
  .hero-description-center { margin: 30px auto 40px auto; padding: 25px 20px; font-size: 16px; text-align: left; hyphens: none; -webkit-hyphens: none; }
  .logo { width: 130px; }
  /* Hero section mobile */
  .hero-section { padding: 30px 20px; }
  .hero-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .hero-main-title { font-size: 2.8rem; }
  .hero-ship-container { height: 300px; max-width: 100%; }
  .hero-buttons { flex-direction: column; gap: 12px; margin-bottom: 0; }
  .hero-buttons .btn { width: 100%; text-align: center; }
}

/* ── Extra-small screens (≤480px) ──────────────────────────── */
@media (max-width: 480px) {
  .logo { width: 100px; min-height: 30px; }
  .header { padding: 4px 16px; min-height: 54px; }
  .header.scrolled { padding: 2px 16px; }
  .hero-main-title { font-size: 2.2rem; }
  .hero-section { padding: 20px 16px; }
  .hero-ship-container { height: 220px; }
}

/* ========== NEW HERO SECTION ========== */
.hero-section {
  position: relative;
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px; /* equal top & bottom for visual centering */
  overflow: hidden;
  background: transparent;
  z-index: 1;
  width: 100%;
}
.hero-container {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  background: transparent;
}
.hero-left {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.hero-ship-container {
  position: relative;
  width: 100%;
  max-width: 550px;
  height: 550px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  background: transparent;
}
.hero-ship-image {
  width: 100%;
  height: 140%;
  object-fit: contain;
  animation: floatShip 6s ease-in-out infinite;
  filter: drop-shadow(0px 35px 60px rgba(0, 0, 0, 0.3));
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.hero-ship-container:hover .hero-ship-image {
  /* transform: scale(1.08); - Removed for static feel */
  filter: drop-shadow(0px 45px 80px rgba(0, 0, 0, 0.4));
}
.hero-right {
  display: flex;
  flex-direction: column;
  gap: 25px;
  z-index: 2;
  background: transparent;
}
.hero-main-title {
  font-family: 'Outfit', sans-serif;
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 1.1;
  color: #ffffff;
  letter-spacing: -0.02em;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  margin: 0;
}
.hero-subtext {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.8;
  font-weight: 300;
  margin: 0;
  min-height: 3.6em; /* Prevent layout jump */
}
.hero-subtext::after {
  content: '|';
  display: inline-block;
  margin-left: 2px;
  color: var(--accent-pink);
  animation: cursorBlink 0.8s infinite;
}
@keyframes cursorBlink {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
#swap-word {
  background: linear-gradient(180deg, #FFD95A 0%, #FFC300 50%, #F59E0B 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;
  display: inline-block;
  animation: shine 6s linear infinite;
}
.word-fade-out {
  opacity: 0;
  transform: translateY(-10px);
  filter: blur(5px);
}
.word-fade-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.hero-support-line {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
  margin: 0;
  border-left: 3px solid #FFD700;
  padding-left: 15px;
}
.hero-buttons {
  display: flex;
  gap: 20px;
  margin-top: 10px;
  margin-bottom: 75px; /* Give some space after the buttons in desktop view */
}
.btn {
  padding: 14px 32px;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.05em;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn:focus, .btn:active {
  outline: none;
}
/* Default branded button (for white backgrounds) */
.btn-primary {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-pink) 100%);
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(123, 37, 135, 0.2);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-pink) 0%, var(--primary-color) 100%);
  box-shadow: 0 20px 40px rgba(240, 87, 111, 0.3);
  transform: translateY(-4px);
}

/* White buttons specifically for sections with pink gradient backgrounds */
#main-container .btn-primary,
.cta-section .btn-primary {
  background: #ffffff;
  color: var(--primary-color);
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
}
#main-container .btn-primary:hover,
.cta-section .btn-primary:hover {
  background: var(--accent-pink);
  color: #ffffff;
  box-shadow: 0 15px 40px rgba(240, 87, 111, 0.4);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-bottom: 2px solid #ffffff;
  backdrop-filter: blur(10px);
  font-weight: 800;
}
.btn-secondary:hover {
  background: #ffffff;
  border-color: #ffffff;
  transform: translateY(-3px);
  color: var(--primary-color);
  box-shadow: 0 10px 20px rgba(255, 255, 255, 0.2);
}
.btn-large {
  padding: 16px 48px;
  font-size: 1.1rem;
}

.story-section {
  position: relative;
  padding: 100px 60px 80px 60px;
  background: #ffffff;
  margin: -50px 0 0 0; 
  z-index: 2;
  border-radius: 50% 50% 0 0 / 50px 50px 0 0;
  box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.05);
}

.story-container {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}
.story-left {
  display: flex;
  flex-direction: column;
  gap: 35px;
  z-index: 2;
}
.story-content {
  font-size: 1.1rem;
  line-height: 1.9;
  color: #334155;
  font-weight: 400;
  margin: 0;
}
.story-content-extended {
  margin-top: 25px;
}
.story-content-extended p {
  font-size: 1.5rem;
  line-height: 1.8;
  color: #201b1b;
  font-weight: 300;
  margin: 0 0 18px 0;
}
.story-points {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}
.story-point {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 15px;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.story-point:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateX(8px);
}
.point-icon {
  font-size: 2rem;
  flex-shrink: 0;
}
.story-point h4 {
  font-size: 1.1rem;
  color: #ffffff;
  margin: 0 0 5px 0;
  font-weight: 600;
}
.story-point p {
  font-size: 0.95rem;
  color: rgba(29, 26, 26, 0.7);
  margin: 0;
}
.story-right {
  display: flex;
  align-items: center;
  justify-content: center;
}
.story-image-container {
  width: 100%;
  max-width: 500px;
  height: 500px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
  background: linear-gradient(135deg, rgba(123, 37, 135, 0.2), rgba(13, 242, 193, 0.1));
}
.story-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.story-image-container:hover .story-image {
  /* transform: scale(1.05); - Removed for static feel */
}

/* ========== DIFFERENCE SECTION ========== */
.difference-section {
  position: relative;
  padding: 80px 60px 120px 60px;
  background: #ffffff;
  margin: 0;
  z-index: 3;
  border-radius: 0 0 50% 50% / 0 0 50px 50px; /* Convex bottom creates 'U' dip in CTA */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
}
.difference-container {
  max-width: 1400px;
  margin: 0 auto;
}
.section-title {
  font-family: 'Outfit', sans-serif;
  font-size: 3.5rem;
  font-weight: 800;
  color: #1e0b2e;
  margin: 0 0 20px 0;
  letter-spacing: -0.02em;
}
.section-centered {
  text-align: center;
}
.section-subtitle {
  font-size: 1.2rem;
  color: #5b467e;
  text-align: center;
  margin: 0 0 70px 0;
  font-weight: 400;
}
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 60px;
}
.difference-card {
  position: relative;
  padding: 45px;
  background: #ffffff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(135, 34, 171, 0.15);
  border-radius: 24px;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden;
  box-shadow: 0 15px 45px rgba(30, 11, 46, 0.05);
}
.difference-card:hover {
  /* transform: translateY(-12px); - Removed for static feel */
  border-color: var(--accent-pink);
  box-shadow: 0 30px 70px rgba(30, 11, 46, 0.1);
}
.card-hover-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color), var(--accent-pink));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.difference-card:hover .card-hover-effect {
  transform: scaleX(1);
}
.card-icon {
  font-size: 3.5rem;
  margin-bottom: 25px;
  display: block;
  filter: drop-shadow(0 5px 15px rgba(240, 87, 111, 0.4));
}
.difference-card h3 {
  font-size: 1.6rem;
  color: #1e0b2e;
  margin: 0 0 15px 0;
  font-weight: 700;
}
.difference-card p {
  font-size: 1.05rem;
  color: #5b467e;
  line-height: 1.7;
  margin: 0;
}

/* ========== CTA SECTION ========== */
.cta-section {
  position: relative;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 150px 60px;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-pink) 100%);
  text-align: center;
  overflow: hidden;
  margin-top: -50px; /* Underlap the difference section's curve */
  z-index: 2;
  border-radius: 0;
}

.cta-dash {
  font-size: 0.85em;
  vertical-align: middle;
  display: inline-block;
  margin: 0 8px;
  font-weight: 300;
}
.cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 80% 50%, rgba(0, 0, 0, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
}
.cta-container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.cta-title {
  font-family: 'Outfit', sans-serif;
  font-size: 3.5rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 25px 0;
  letter-spacing: -0.02em;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.cta-text {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.8;
  margin: 0 0 40px 0;
  font-weight: 300;
}


/* ========== RESPONSIVE DESIGN ========== */
@media (max-width: 1023px) and (pointer: coarse) {
  .hero-container {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .hero-main-title {
    font-size: 3.5rem;
  }
  .story-container {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .section-title {
    font-size: 2.5rem;
  }
  .cta-title {
    font-size: 2.8rem;
  }
}
@media (max-width: 768px) and (pointer: coarse) {
  .hero-section {
    padding: 60px 30px;
    min-height: auto;
  }
  .hero-container {
    gap: 40px;
  }
  .hero-ship-container {
    max-width: 100%;
    height: 550px;
  }
  .hero-ship-image {
    height: 140%;
    animation: floatShipMobile 6s ease-in-out infinite;
  }
  .hero-main-title {
    font-size: 2.2rem;
    hyphens: none;
    -webkit-hyphens: none;
  }
  .hero-subtext {
    font-size: 1rem;
    text-align: left;
    hyphens: none;
    -webkit-hyphens: none;
  }
  .hero-buttons {
    flex-direction: column;
    margin-bottom: 0;
  }
  .story-section {
    padding: 60px 30px;
  }
  .difference-section {
    padding: 60px 30px;
  }
  .cards-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .difference-card {
    padding: 30px;
  }
  .cta-section {
    padding: 80px 30px;
  }
  .cta-title {
    font-size: 2rem;
  }
  .cta-text {
    font-size: 1rem;
    text-align: left;
    hyphens: none;
    -webkit-hyphens: none;
  }
  /* About page – paragraph font scale-down */
  .right-text p, .left-text p, .right-text2 p {
    font-size: 15px !important;
    line-height: 1.7;
  }
  /* Logo – tighter on tablet */
  .logo { width: 140px; }
  .header { padding: 4px 20px; }
  .header.scrolled { padding: 2px 20px; }
}
@media (max-width: 576px) and (pointer: coarse) {
  body { padding-top: 50px; }
  .header { padding: 4px 15px; }
  .header.scrolled { padding: 2px 15px; }
  .logo { width: 120px; }
  /* Home hero */
  .hero-section { padding: 40px 20px; }
  .hero-container { gap: 30px; }
  #main-container { border-radius: 0; margin-top: 0; padding-bottom: 80px; }
  .story-section { border-radius: 50% 50% 0 0 / 30px 30px 0 0; margin: -30px 0 0 0; padding: 60px 20px; z-index: 2; }
  .difference-section { border-radius: 0 0 50% 50% / 0 0 30px 30px; margin: 0; padding: 40px 20px 60px 20px; z-index: 3; }
  .cta-section { border-radius: 0; margin: -30px 0 0 0; padding: 60px 20px; z-index: 2; }
  .hero-ship-container { height: 500px; }
  .hero-main-title { 
    font-size: 1.8rem; 
    hyphens: none;
    -webkit-hyphens: none;
  }
  .story-container { gap: 30px; }
  .story-image-container { max-width: 100%; height: 300px; }
  .cards-grid { grid-template-columns: 1fr; gap: 20px; }
  .cta-title { font-size: 1.8rem; }
  /* Inner pages */
  .career-grid { grid-template-columns: 1fr; gap: 15px; padding: 0 5px; }
  .career-container { padding: 10px 15px; }
  .section-header .section-title { font-size: 21px; }
  .section-label { font-size: 0.7rem; }
  .stats-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 15px; 
  }
  .stat-card { 
    min-width: 0; 
    padding: 20px 10px; 
    width: 100%;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
  }
  .career-apply-box { padding: 25px 15px; }
  .products-hero-img img { max-width: 100%; border-radius: 20px; }
  .contact-section { padding: 10px 15px; }
  .time-unit { min-width: 65px; padding: 12px 6px; }
  .time-val { font-size: 22px; }
  /* Nav */
  .head-module { display: none; }
  .bar { display: block; }
  /* Footer */
  .footer { border-radius: 0; margin-top: 0; padding: 40px 0; }
  .footer-media ul { gap: 12px; }
  .copy-rights { font-size: 13px; }
  /* About page – paragraph font scale-down */
  .right-text p, .left-text p, .right-text2 p {
    font-size: 14px !important;
    line-height: 1.65;
  }
  .sub-counter-wrap {
    text-align: center;
  }
}
@media (max-width: 400px) and (pointer: coarse) {
  .section-header .section-title { font-size: 19px; }
  .section-label { font-size: 0.65rem; letter-spacing: 0.07em; }
  .header { padding: 3px 10px; }
  .header.scrolled { padding: 1px 10px; }
  .logo { width: 105px; }
  .stats-grid { 
    grid-template-columns: 1fr; /* Stack into 1 column on extremely small screens */
    gap: 15px;
  }
  .stat-card { min-width: 100%; }
  .footer-media ul { gap: 10px; }
  .career-apply-box { padding: 20px 12px; }
  /* About page – paragraph font scale-down */
  .right-text p, .left-text p, .right-text2 p {
    font-size: 13px !important;
    line-height: 1.6;
  }
}
/* ========== BRANDED GLASSMORPHISM GRAPHICS ========== */
.branded-graphic {
  width: 100%;
  max-width: 400px;
  height: 350px;
  background: #f8fafc;
  border-radius: 30px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.03);
  margin: 0 auto;
}

.graphic-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Identity Variant: The Spark */
.identity-graphic {
  background: radial-gradient(circle at center, #371457 0%, #1e0b2e 100%);
}
.identity-graphic .spark-core {
  width: 80px;
  height: 80px;
  background: #fbbf24;
  border-radius: 50%;
  filter: blur(15px);
  box-shadow: 0 0 60px #fbbf24, 0 0 100px #f59e0b;
  animation: sparkPulse 4s infinite alternate ease-in-out;
  z-index: 2;
}
.identity-graphic .spark-aura {
  position: absolute;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(158, 50, 171, 0.4) 0%, transparent 70%);
  filter: blur(30px);
  animation: auraRotate 10s infinite linear;
}

/* Mission Variant: The Network */
.mission-graphic {
  background: #1e0b2e;
}
.mission-graphic .pulse-node {
  position: absolute;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 50%;
  backdrop-filter: blur(5px);
  animation: floatNode 8s infinite alternate ease-in-out;
}
.mission-graphic .node-1 { width: 120px; height: 120px; top: 10%; left: 10%; animation-delay: 0s; }
.mission-graphic .node-2 { width: 80px; height: 80px; bottom: 20%; right: 15%; animation-delay: -2s; }
.mission-graphic .node-3 { width: 150px; height: 150px; top: 40%; right: -10%; background: rgba(158, 50, 171, 0.15); border-color: rgba(158, 50, 171, 0.4); animation-delay: -4s; }

/* Process Variant: The Flow */
.process-graphic {
  background: #1e0b2e;
}
.process-graphic .flow-layer {
  position: absolute;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 180deg at 50% 50%, #371457, #fbbf24, #9e32ab, #371457);
  filter: blur(60px);
  opacity: 0.4;
  animation: flowRotate 15s infinite linear;
}
.process-graphic .glass-overlay {
  position: absolute;
  width: 80%;
  height: 80%;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  z-index: 2;
}

/* Animations */
@keyframes sparkPulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.3); opacity: 1; }
}
@keyframes auraRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes floatNode {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(20px, 30px) scale(1.1); }
}
@keyframes flowRotate {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

/* Responsive adjustment for graphics */
@media (max-width: 768px) and (pointer: coarse) {
  .branded-graphic {
    height: 280px;
    max-width: 100%;
  }
}

/* ── Scroll To Top Button ────────────────────────────────────── */
.scroll-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: var(--primary-color);
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-pink) 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.8);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.scroll-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.scroll-to-top:hover {
  background: linear-gradient(135deg, var(--accent-pink) 0%, var(--primary-color) 100%);
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(240, 87, 111, 0.4);
  filter: brightness(1.1);
}

.scroll-to-top svg {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.scroll-to-top:hover svg {
  transform: translateY(-2px);
}

@media (max-width: 768px) and (pointer: coarse) {
  .scroll-to-top {
    bottom: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
  }
}

/* ── Phone Group — Custom Country Dropdown ───────────────────── */
.phone-group {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  border-bottom: 2px solid rgba(0,0,0,0.06);
  transition: border-bottom-color 0.3s ease;
  position: relative;
}
.phone-group:focus-within {
  border-bottom-color: var(--primary-color);
}
.phone-group.invalid {
  border-bottom-color: #ef4444;
}

/* ── Trigger Button ──────────────────────────────────────────── */
.country-dropdown {
  position: relative;
  flex-shrink: 0;
}
.country-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  border-right: 1.5px solid rgba(0,0,0,0.07);
  padding: 10px 12px 10px 2px;
  margin-right: 12px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  color: #1e293b;
  white-space: nowrap;
  outline: none;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.country-trigger:hover,
.country-dropdown.open .country-trigger {
  color: var(--primary-color);
}
.trigger-flag {
  font-size: 19px;
  line-height: 1;
  display: block;
}
.trigger-code {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  min-width: 32px;
}
.drop-arrow {
  color: #94a3b8;
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1), color 0.2s ease;
  flex-shrink: 0;
  display: block;
}
.country-dropdown.open .drop-arrow {
  transform: rotate(180deg);
  color: var(--primary-color);
}

/* ── Dropdown Panel ──────────────────────────────────────────── */
.country-list {
  position: absolute;
  top: calc(100% + 10px);
  left: -4px;
  width: 275px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.13), 0 4px 14px rgba(0,0,0,0.05);
  z-index: 600;
  overflow: hidden;
  display: none;
  transform-origin: top left;
}
.country-dropdown.open .country-list {
  display: block;
  animation: cdSlideIn 0.2s cubic-bezier(0.16,1,0.3,1);
}
@keyframes cdSlideIn {
  from { opacity: 0; transform: scale(0.96) translateY(-6px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

/* ── Search Bar ──────────────────────────────────────────────── */
.country-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: #f8fafc;
}
.country-search-wrap svg { flex-shrink: 0; }
.country-search {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  color: #1e293b;
  outline: none;
  width: 100%;
}
.country-search::placeholder { color: #94a3b8; }

/* ── Options List ────────────────────────────────────────────── */
.country-options {
  max-height: 215px;
  overflow-y: auto;
  padding: 5px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(123,37,135,0.18) transparent;
}
.country-options::-webkit-scrollbar { width: 4px; }
.country-options::-webkit-scrollbar-track { background: transparent; }
.country-options::-webkit-scrollbar-thumb {
  background: rgba(123,37,135,0.18);
  border-radius: 4px;
}
.country-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.14s ease;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #334155;
  user-select: none;
}
.country-option:hover {
  background: rgba(123,37,135,0.05);
}
.country-option.selected {
  background: rgba(123,37,135,0.08);
  color: var(--primary-color);
  font-weight: 600;
}
.co-flag {
  font-size: 18px;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  line-height: 1;
}
.co-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.co-code {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
  flex-shrink: 0;
}
.country-option.selected .co-code { color: var(--primary-color); }
.country-option.cd-no-result {
  color: #94a3b8;
  justify-content: center;
  font-style: italic;
  cursor: default;
  padding: 14px;
}
.country-option.cd-no-result:hover { background: none; }

/* ── Phone number input (right side of group) ────────────────── */
.phone-number-input {
  flex: 1;
  border: none !important;
  padding: 10px 0;
  font-size: 15px;
  color: #1e293b;
  background: transparent;
  outline: none;
  font-family: 'Inter', sans-serif;
  min-width: 0;
}
.phone-number-input::placeholder {
  color: #94a3b8;
  font-size: 14px;
}
.field-wrapper:has(.phone-group) .err-msg { left: 0; }