/* ============================================================
   APWAY Website — Main Styles · Ivory & Indigo
   ============================================================ */

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

#root {
  position: relative;
  z-index: 2;
}

/* Flat ivory canvas — no ambient colour wash. The frosted-glass
   surfaces stay translucent over the plain background. */

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg-1);
  overflow-x: hidden;
  line-height: 1.5;
}

/* ── Pick-&-place motion ─────────────────────────────
   Elements "place" into view on scroll, like components
   being set onto the board — quick descend + servo settle,
   staggered in sequence (delay set per-item in JS). ── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  will-change: opacity, transform;
}
.reveal.placed {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-place) var(--ease-place),
              transform var(--dur-place) var(--ease-settle);
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.placed { opacity: 1; transform: none; transition: none; }
  .cta-rangoli { transition: none; }
  .bloom-layer { animation: none !important; }
  * { scroll-behavior: auto; }
}

/* ── Navigation ──────────────────────────────────── */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  height: 64px;
  background: var(--glass-sheen), rgba(247, 243, 234, 0.1);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-edge);
  box-shadow: var(--glass-highlight);
  transition: background 0.4s, box-shadow 0.4s, backdrop-filter 0.4s;
}

.site-nav.scrolled {
  background: var(--glass-sheen), rgba(249, 246, 239, 0.18);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  box-shadow: var(--glass-highlight), 0 6px 24px rgba(30, 42, 74, 0.08);
}

.nav-logo {
  font-family: var(--font-wordmark);
  font-weight: 900;
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  text-decoration: none;
  text-transform: uppercase;
}
.nav-logo span { color: var(--orange-500); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
}

.nav-links a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-300);
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--fg-1); }

/* underline travels in like a gantry sweep */
.nav-links a:not(.nav-cta) { position: relative; }
.nav-links a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1.5px;
  background: var(--orange-500);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-travel) var(--ease-gantry);
}
.nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); }

.nav-cta {
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--orange-600) !important;
  background: var(--glass-sheen), var(--glass-accent), var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  padding: 7px 22px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), 0 4px 14px rgba(30, 42, 74, 0.06);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s, background 0.2s, box-shadow 0.2s,
              transform var(--dur-pick) var(--ease-settle);
}
.nav-cta:hover {
  color: #fff !important;
  background: var(--orange-500);
  border-color: var(--orange-500);
  box-shadow: 0 6px 18px rgba(224, 138, 43, 0.28);
  transform: translateY(-2px);
}
.nav-cta:active {
  transform: translateY(1px) scale(0.98);
  transition-duration: var(--dur-instant);
}

/* ── Hero Section ────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 64px;
  overflow: hidden;
  background: transparent;
}

.hero-animation {
  position: relative;
  width: 100%;
  max-width: 1280px;
  aspect-ratio: 16 / 9;
  margin: 0 auto 80px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow-lg);
}

.hero-text {
  text-align: left;
  padding: 48px 48px 64px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

.hero-text h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 5.4vw, 72px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--fg-1);
  margin-bottom: 18px;
}
.hero-text h1 span { color: var(--orange-500); }
.hero-text h1 .h1-line1,
.hero-text h1 .h1-line2 {
  display: block;
  color: var(--fg-1);
}
.hero-text h1 .h1-line1 { font-size: clamp(34px, 5.4vw, 72px); }
.hero-text h1 .h1-line2 {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.1vw, 28px);
  font-weight: 400;
  color: var(--ink-300);
  letter-spacing: 0.005em;
  margin-top: 8px;
}
.hero-text h1 .accent { color: var(--orange-500); }

.hero-text p {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--ink-300);
  line-height: 1.6;
  max-width: 560px;
  margin: 0 0 32px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--glass-sheen), var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--orange-600);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange-500);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

/* ── Jaali divider (subtle Indian lattice motif) ──── */
.jaali-divider {
  width: 100%;
  max-width: 1280px;
  height: 30px;
  margin: 0 auto;
  background-image: var(--jaali);
  background-repeat: repeat-x;
  background-position: center;
  background-size: 44px 30px;
  opacity: 0.14;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}

/* ── Section Layout ──────────────────────────────── */
.section {
  padding: 120px 48px;
  max-width: 1280px;
  margin: 0 auto;
}

.section-eyebrow {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--orange-600);
  margin-bottom: 16px;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4.2vw, 54px);
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--fg-1);
  margin-bottom: 20px;
}

.section-desc {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--ink-300);
  line-height: 1.65;
  max-width: 600px;
}

/* ── Made in India Banner ─────────────────────────── */
.india-banner {
  position: relative;
  background: var(--indigo);
  padding: 80px 48px;
  text-align: center;
  overflow: hidden;
}
.india-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--jaali);
  background-size: 44px 44px;
  opacity: 0.08;
  pointer-events: none;
}
.india-banner > * { position: relative; z-index: 1; }

.india-banner h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 4.2vw, 52px);
  color: var(--fg-1-invert);
  letter-spacing: -0.005em;
  line-height: 1.18;
  margin-bottom: 20px;
}
.india-banner h2 span { color: var(--orange-400); }

.india-banner p {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--fg-2-invert);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto;
}

/* ── Specs Grid ──────────────────────────────────── */
.specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 56px;
}

.spec-card {
  padding: 36px 28px;
  border-radius: 18px;
  border: 1px solid var(--glass-border);
  background: var(--glass-sheen), var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease,
              transform var(--dur-travel) var(--ease-settle);
}
.spec-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, var(--glass-accent) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
}
.spec-card:hover::before { opacity: 1; }
.spec-card:hover {
  border-color: rgba(224, 138, 43, 0.4);
  background: var(--glass-sheen), var(--glass-bg-strong);
  box-shadow: var(--glass-highlight), var(--glass-shadow-lg);
  transform: translateY(-3px);
}
.spec-card > * { position: relative; z-index: 1; }

.spec-number {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 42px;
  color: var(--orange-600);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 8px;
}
.spec-number span {
  font-size: 18px;
  color: var(--ink-400);
  font-weight: 500;
}

.spec-label {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-1);
  margin-bottom: 8px;
}

.spec-desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-400);
  line-height: 1.5;
}

/* ── Features Grid ───────────────────────────────── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin-top: 56px;
}

.feature-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.feature-icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--glass-sheen), var(--glass-accent), var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange-600);
  font-size: 22px;
  transition: transform var(--dur-pick) var(--ease-settle),
              box-shadow var(--dur-pick) ease,
              border-color var(--dur-pick) ease;
}
/* nozzle "picks up" the icon on hover */
.feature-item:hover .feature-icon {
  transform: translateY(-4px) scale(1.06);
  border-color: rgba(224, 138, 43, 0.4);
  box-shadow: var(--glass-highlight), var(--glass-shadow-lg);
}

.feature-content h3 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 17px;
  color: var(--fg-1);
  margin-bottom: 6px;
}

.feature-content p {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-400);
  line-height: 1.55;
}

/* ── CTA Section ─────────────────────────────────── */
.cta-section {
  position: relative;
  text-align: center;
  padding: 120px 48px;
  background: transparent;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 520px;
  height: 520px;
  transform: translate(-50%, -50%);
  background-image: var(--jaali);
  background-size: 44px 44px;
  background-position: center;
  opacity: 0.1;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 68%);
  mask-image: radial-gradient(circle, #000 0%, transparent 68%);
}
.cta-section > * { position: relative; z-index: 1; }
/* keep section copy above the rangoli that radiates from the button */
.cta-section > .section-eyebrow,
.cta-section > .section-title,
.cta-section > .section-desc { z-index: 2; }

/* wrapper holds the rangoli behind the (opaque) button */
.cta-wrap {
  position: relative;
  display: inline-block;
  z-index: 1;
}
/* two-layer lotus that unfurls from BEHIND the button, then the
   two rings of petals gently counter-rotate */
.cta-rangoli {
  position: absolute;
  left: 50%; top: 50%;
  width: 340px; height: 340px;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.12) rotate(-22deg);
  transform-origin: center center;
  transition: opacity 0.5s ease, transform 0.85s var(--ease-settle);
}
.cta-wrap:hover .cta-rangoli {
  opacity: 0.7;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
}
.bloom-layer {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform-origin: center center;
  animation-duration: 60s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}
.bloom-out { background-image: url("lotus-outer.svg?v=2"); animation-name: bloom-cw; }
.bloom-in  { background-image: url("lotus-inner.svg?v=2"); animation-name: bloom-ccw; animation-duration: 46s; }
.cta-wrap:hover .bloom-layer { animation-play-state: running; }
@keyframes bloom-cw  { to { transform: rotate(360deg); } }
@keyframes bloom-ccw { to { transform: rotate(-360deg); } }

.cta-button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 42px;
  background: linear-gradient(160deg, #ECA13F, #D9821F);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid rgba(217, 130, 31, 0.6);
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(224, 138, 43, 0.28);
  transition: background 0.2s, box-shadow 0.25s,
              transform var(--dur-pick) var(--ease-settle);
}
/* label + arrow */
.cta-label { position: relative; z-index: 1; }
/* arrow advances along its axis like a gantry move */
.cta-button::after {
  content: '\2192';
  position: relative;
  z-index: 1;
  display: inline-block;
  transition: transform var(--dur-travel) var(--ease-gantry);
}
.cta-button:hover {
  background: linear-gradient(160deg, #EDA64A, #C9741C);
  box-shadow: 0 16px 38px rgba(224, 138, 43, 0.4);
  transform: translateY(-3px);
}
.cta-button:hover::after { transform: translateX(6px); }
.cta-button:active {
  transform: translateY(1px) scale(0.985);
  transition-duration: var(--dur-instant);
}

/* ── Footer ──────────────────────────────────────── */
.site-footer {
  padding: 48px;
  border-top: 1px solid rgba(30, 42, 74, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
}

.footer-logo {
  font-family: var(--font-wordmark);
  font-weight: 900;
  font-style: italic;
  font-size: 18px;
  color: var(--fg-1);
  text-transform: uppercase;
}
.footer-logo span { color: var(--orange-500); }

.footer-tagline {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-400);
}

.footer-copy {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-400);
  opacity: 0.7;
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 768px) {
  .site-nav { padding: 0 20px; }
  .nav-links { gap: 16px; }
  .section { padding: 80px 20px; }
  .india-banner { padding: 60px 20px; }
  /* Flow from the top instead of vertically centering — avoids large empty
     gaps above the badge and below the animation when content is shorter than the viewport */
  /* overflow:visible lets the animation card's shadow spill past the hero's
     bottom edge (into the divider/next section) instead of being hard-clipped
     by the hero's overflow:hidden — that clip was the seam below the card */
  .hero { min-height: auto; justify-content: flex-start; padding-top: 64px; overflow: visible; }
  .hero-animation { border-radius: 8px; margin: 0 12px 40px; }
  .hero-text { padding: 32px 16px 32px; }
  .cta-section { padding: 80px 20px; }
  .site-footer { flex-direction: column; gap: 12px; text-align: center; padding: 32px 20px; }
}

/* On phones the full link row can't fit — keep logo + CTA only */
@media (max-width: 600px) {
  .nav-links { gap: 0; }
  .nav-links li:not(:last-child) { display: none; }
}

/* Portrait viewports (phones & tablets, incl. wide phones >768px) are far
   taller than the hero content. Flow from the top instead of vertically
   centering inside 100vh, which otherwise dumps the leftover space as large
   empty gaps above the badge and below the animation. */
@media (orientation: portrait) {
  /* overflow:visible lets the card shadow spill past the hero into the divider
     and section below, so it fades continuously instead of being clipped */
  .hero { min-height: auto; justify-content: flex-start; padding-top: 64px; overflow: visible; }
  .hero-animation { margin-bottom: 40px; }
}