:root {

  --bg:#0b1220;

  --card:#0f172a;

  --text:#e5e7eb;

  --muted:#94a3b8;

  --accent:#7c3aed;   /* purple */

  --accent-2:#22d3ee; /* teal */

}



* { box-sizing:border-box }



html, body { min-height:100% }



body {

  margin:0;

  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,Helvetica,Arial,sans-serif;

  background:

    /* subtle static base so content stays crisp */

    radial-gradient(1200px 600px at 80% -10%, rgba(124,58,237,.18), transparent 60%),

    radial-gradient(900px 500px at 0% 110%, rgba(34,211,238,.18), transparent 60%),

    var(--bg);

  background-attachment: fixed;

  color:var(--text);

  display:flex;

  align-items:center;

  justify-content:center;

  position:relative;

  overflow-x:hidden;

}



/* breathing overlays (crossfade + scale) */

body::before,

body::after {

  content:"";

  position:fixed;

  inset:0;

  pointer-events:none;

  will-change: transform, opacity;

  background-repeat:no-repeat;

  background-size:cover;

  filter: saturate(115%);

}



/* Layer A: purple top-right, teal bottom-left */

body::before {

  background:

    radial-gradient(1200px 600px at 80% -10%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 60%),

    radial-gradient(900px 500px at 0% 110%, color-mix(in srgb, var(--accent-2) 55%, transparent), transparent 60%);

  animation: breatheLayer 8s ease-in-out infinite;

  opacity:.55;

}



/* Layer B (phase-shifted): swap colors for a gentle hue morph */

body::after {

  background:

    radial-gradient(1200px 600px at 80% -10%, color-mix(in srgb, var(--accent-2) 55%, transparent), transparent 60%),

    radial-gradient(900px 500px at 0% 110%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 60%);

  animation: breatheLayer 8s ease-in-out infinite reverse;

  opacity:.0;

}



/* prefer reduced motion */

@media (prefers-reduced-motion: reduce) {

  body::before, body::after { animation:none; opacity:.5; }

}



/* one keyframe controls scale + opacity; layers run in opposite phases */

@keyframes breatheLayer {

  0%   { transform:scale(1);    opacity:.45; }

  50%  { transform:scale(1.07); opacity:.85; }

  100% { transform:scale(1);    opacity:.45; }

}



/* ---- layout & components ---- */



.container {

  width:min(920px,92vw);

  margin:auto;

  display:grid;

  gap:28px;

  place-items:center;

  text-align:center;

}



.logo {

  display:inline-flex;

  align-items:center;

  gap:.6rem;

  font-weight:800;

  letter-spacing:.2px;

}



.badge {

  font-size:.7rem;

  background:linear-gradient(90deg,var(--accent),var(--accent-2));

  padding:.35rem .6rem;

  border-radius:999px;

  color:white;

}



h1 {

  font-size:clamp(2rem,6vw,3.25rem);

  line-height:1.2;

  margin:0 0 0.2em 0;

  padding-bottom: 0.15em;

  overflow: visible;

}



p.lede {

  color:var(--muted);

  font-size:clamp(1rem,2.5vw,1.15rem);

  max-width:60ch;

  margin:0;

}



.card {

  width:100%;

  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));

  backdrop-filter:blur(8px);

  border:1px solid rgba(148,163,184,.25);

  border-radius:20px;

  padding:22px 18px;

  box-shadow:0 10px 30px rgba(0,0,0,.25);

}



/* ---- Common Page Layouts ---- */

.page-wrapper {

  flex: 1;

  display: flex;

  flex-direction: column;

}



.hero-section {

  flex: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 4rem 0;

  position: relative;

}



.content-section {

  padding: 4rem 0;

  position: relative;

  z-index: 1;

}



.section-header {

  text-align: center;

  margin-bottom: 3rem;

}



.back-link {

  text-align: center;

  margin-top: 3rem;

}



/* ---- Forms ---- */

form {

  display:flex;

  gap:10px;

  flex-wrap:wrap;

  justify-content:center;

}



input[type=email] {

  flex:1 1 260px;

  min-width:240px;

  padding:14px 14px;

  border-radius:12px;

  border:1px solid rgba(148,163,184,.35);

  background:#0b1220;

  color:var(--text);

  outline:none;

}



input[type=email]::placeholder { color:#93a4bd }



button {

  padding:14px 18px;

  border-radius:12px;

  border:0;

  background:linear-gradient(90deg,var(--accent),var(--accent-2));

  color:white;

  font-weight:700;

  cursor:pointer;

  transition:transform .06s ease;

  position:relative;

  overflow:hidden;

}



button::before {

  content:'';

  position:absolute;

  top:0;

  left:-100%;

  width:100%;

  height:100%;

  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);

  transition:left 0.5s;

}



button:hover::before {

  left:100%;

}



button:active { transform:translateY(1px) }



.fine { color:var(--muted); font-size:.85rem }



.row {

  display:flex;

  gap:14px;

  align-items:center;

  flex-wrap:wrap;

  justify-content:center;

}



.pill {

  padding:.5rem .8rem;

  border:1px solid rgba(148,163,184,.25);

  border-radius:999px;

  color:var(--muted);

  font-size:.9rem;

}



/* ---- Accordion Styles ---- */

.accordion {

  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));

  backdrop-filter: blur(8px);

  border: 1px solid rgba(148,163,184,.25);

  border-radius: 12px;

  margin-bottom: 0.9rem;

  overflow: hidden;

  box-shadow: 0 4px 15px rgba(0,0,0,.15);

  transition: all 0.3s ease;

}



.accordion:hover {

  border-color: rgba(148,163,184,.35);

  box-shadow: 0 6px 20px rgba(0,0,0,.2);

}



.accordion-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 1.25rem 1.5rem;

  cursor: pointer;

  user-select: none;

  transition: background 0.3s ease;

}



.accordion-header:hover {

  background: rgba(255,255,255,.03);

}



.accordion-header h2 {

  margin: 0;

  font-size: 1.1rem;

  font-weight: 600;

  color: var(--text);

  flex: 1;

}



.accordion-icon {

  font-size: 0.85rem;

  transition: transform 0.3s ease;

  color: var(--accent);

  opacity: 0.8;

}



.accordion.active .accordion-icon {

  transform: rotate(180deg);

}



.accordion-content {

  max-height: 0;

  overflow: hidden;

  padding: 0;

  opacity: 0;

  visibility: hidden;

  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease, visibility 0s 0.4s;

}



.accordion.active .accordion-content {

  max-height: 1500px;

  padding: 0 1.5rem 1.5rem 1.5rem;

  opacity: 1;

  visibility: visible;

  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease, visibility 0s 0s;

}



.accordion-content p {

  color: var(--muted);

  line-height: 1.7;

  margin: 0 0 1rem 0;

}



.accordion-content p:last-child {

  margin-bottom: 0;

}



.accordion-content ul {

  color: var(--muted);

  line-height: 1.7;

  margin: 0.5rem 0 1rem 1.5rem;

  padding: 0;

}



.accordion-content a {

  color: var(--accent-2);

  text-decoration: none;

  transition: color 0.3s ease;

}



.accordion-content a:hover {

  color: var(--accent);

  text-decoration: underline;

}



footer { color:var(--muted); font-size:.9rem }



a { color:#cbd5e1 }



.sr-only {

  position:absolute;

  width:1px;

  height:1px;

  padding:0;

  margin:-1px;

  overflow:hidden;

  clip:rect(0,0,0,0);

  white-space:nowrap;

  border:0;

}



/* floating blob kept subtle */

.blob {

  position:fixed;

  inset:auto -20% -20% auto;

  width:60vmin;

  height:60vmin;

  background:

    radial-gradient(circle at 30% 30%, rgba(124,58,237,.5), transparent 60%),

    radial-gradient(circle at 70% 70%, rgba(34,211,238,.45), transparent 60%);

  filter:blur(40px);

  opacity:.35;

  animation: float 24s ease-in-out infinite;

}



@keyframes float {

  0%,100% { transform:translate(0,0) rotate(0) }

  50%     { transform:translate(-4%,8%) rotate(8deg) }

}



#tablogo {

  transition: transform 0.6s cubic-bezier(.68,-0.55,.27,1.55); /* reverted to original speed */

  vertical-align: middle;

  transform-style: preserve-3d;

}

#tablogo.rotate {

  animation: rupee-spin-jump 0.6s ease-in-out;

}



@keyframes rupee-spin-jump {

  0%   { transform: rotateY(0deg) translateY(0); }

  15%  { transform: rotateY(54deg) translateY(-6px); }

  30%  { transform: rotateY(108deg) translateY(-12px); }

  50%  { transform: rotateY(180deg) translateY(-16px); }

  70%  { transform: rotateY(252deg) translateY(-12px); }

  85%  { transform: rotateY(306deg) translateY(-6px); }

  100% { transform: rotateY(360deg) translateY(0); }

}



/* Common animations */

body {

  overflow-x: hidden;

}



/* Floating particles */

.particle {

  position: fixed;

  width: 4px;

  height: 4px;

  background: var(--accent-2);

  border-radius: 50%;

  opacity: 0;

  animation: float-particle 8s infinite ease-in-out;

  pointer-events: none;

  z-index: 0;

}



@keyframes float-particle {

  0%, 100% {

    transform: translateY(0) translateX(0) scale(0);

    opacity: 0;

  }

  10% {

    opacity: 0.6;

  }

  50% {

    transform: translateY(-100vh) translateX(50px) scale(1);

    opacity: 0.3;

  }

  100% {

    transform: translateY(-100vh) translateX(100px) scale(0);

    opacity: 0;

  }

}



/* Fade in animation */

.fade-in {

  animation: fadeIn 0.8s ease-out forwards;

  opacity: 0;

}



.fade-in-delay-1 { animation-delay: 0.2s; }

.fade-in-delay-2 { animation-delay: 0.4s; }

.fade-in-delay-3 { animation-delay: 0.6s; }

.fade-in-delay-4 { animation-delay: 0.8s; }



@keyframes fadeIn {

  from {

    opacity: 0;

    transform: translateY(20px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* Shimmer animation for h1 */

h1 {

  background: linear-gradient(90deg, #e5e7eb, var(--accent-2), var(--accent), #e5e7eb);

  background-size: 200% auto;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  animation: shimmer 15s ease-in-out infinite;

}



@keyframes shimmer {

  0%, 100% {

    background-position: 0% center;

  }

  50% {

    background-position: 100% center;

  }

}



/* Pulse animation for badges */

.badge {

  animation: pulse 2s ease-in-out infinite;

  box-shadow: 0 0 0 0 rgba(124,58,237,0.4);

}



@keyframes pulse {

  0%, 100% {

    box-shadow: 0 0 0 0 rgba(124,58,237,0.4);

  }

  50% {

    box-shadow: 0 0 0 10px rgba(124,58,237,0);

  }

}



/* Slide up animation */

@keyframes slideUp {

  from {

    opacity: 0;

    transform: translateY(30px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* Mobile optimizations */

@media (max-width: 768px) {

  body {

    padding-top: 70px;

  }



  .container {

    width: 94vw;

    gap: 20px;

    padding: 1rem 0;

  }



  h1 {

    font-size: clamp(1.75rem, 8vw, 2.5rem);

    line-height: 1.25;

    margin-bottom: 0.5rem;

  }



  p.lede {

    font-size: clamp(0.95rem, 4vw, 1.1rem);

  }



  .card {

    padding: 18px 14px;

    border-radius: 16px;

  }



  form {

    gap: 12px;

  }



  input[type=email] {

    min-width: 100%;

    padding: 12px;

    font-size: 16px; /* Prevents zoom on iOS */

  }



  button {

    width: 100%;

    padding: 14px 20px;

    font-size: 16px;

  }



  .row {

    gap: 10px;

  }



  .pill {

    font-size: 0.8rem;

    padding: 0.4rem 0.7rem;

  }



  .badge {

    font-size: 0.65rem;

    padding: 0.3rem 0.5rem;

  }



  /* Reduce animation intensity on mobile */

  .blob {

    width: 80vmin;

    height: 80vmin;

    filter: blur(60px);

    opacity: 0.2;

  }



  body::before,

  body::after {

    filter: saturate(100%);

  }



  /* Better touch targets */

  a, button, input, select, textarea {

    min-height: 44px;

  }



  /* Improve readability */

  .fine {

    font-size: 0.8rem;

    line-height: 1.5;

  }



  footer {

    font-size: 0.85rem;

    padding: 1rem;

  }

}



/* Small mobile devices */

@media (max-width: 480px) {

  .container {

    width: 92vw;

    gap: 16px;

  }



  h1 {

    font-size: clamp(1.5rem, 9vw, 2rem);

  }



  .card {

    padding: 16px 12px;

  }



  input[type=email],

  button {

    padding: 12px 16px;

  }

}



/* ---- Footer Styles ---- */

footer {

  padding: 3rem 0 2rem 0;

  text-align: center;

  margin-top: 5rem;

  border-top: 1px solid rgba(148, 163, 184, 0.2);

  width: 100%;

}



footer .row {

  display: flex;

  gap: 0;

  justify-content: center;

  align-items: center;

  flex-wrap: wrap;

  color: var(--muted);

  font-size: 0.9rem;

}



footer .row > * {

  margin: 0 0.375rem;

}



footer .row > span:not(:first-child):not(:last-child) {

  margin: 0 0.25rem;

}



footer a {

  color: var(--text);

  text-decoration: none;

  transition: color 0.3s ease;

}



footer a:hover {

  color: var(--accent);

  text-decoration: underline;

}



/* ---- Button Styles ---- */

.btn-primary,

.cta-button {

  padding: 1rem 2rem;

  background: linear-gradient(90deg, var(--accent), var(--accent-2));

  color: white;

  text-decoration: none;

  border-radius: 12px;

  font-weight: 700;

  font-size: 1.05rem;

  transition: all 0.3s ease;

  display: inline-block;

  position: relative;

  overflow: hidden;

  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);

  border: none;

  cursor: pointer;

}



.btn-primary::before,

.cta-button::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);

  transition: left 0.5s;

}



.btn-primary:hover::before,

.cta-button:hover::before {

  left: 100%;

}



.btn-primary:hover,

.cta-button:hover {

  transform: translateY(-2px) scale(1.05);

  box-shadow: 0 6px 25px rgba(124, 58, 237, 0.5);

}



.btn-primary:active,

.cta-button:active {

  transform: translateY(0) scale(0.98);

}



.btn-secondary {

  padding: 1rem 2rem;

  background: rgba(148, 163, 184, 0.2);

  border: 1px solid rgba(148, 163, 184, 0.3);

  color: var(--text);

  text-decoration: none;

  border-radius: 12px;

  font-weight: 700;

  font-size: 1.05rem;

  transition: all 0.3s ease;

  display: inline-block;

  position: relative;

  overflow: hidden;

  cursor: pointer;

}



.btn-secondary::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

  transition: left 0.5s;

}



.btn-secondary:hover::before {

  left: 100%;

}



.btn-secondary:hover {

  transform: translateY(-2px);

  background: rgba(148, 163, 184, 0.3);

  border-color: var(--accent-2);

  box-shadow: 0 4px 15px rgba(34, 211, 238, 0.2);

}



.btn-secondary:active {

  transform: translateY(0) scale(0.98);

}