/* ==========================================================================
   Webziko — stylesheet
   ========================================================================== */

/* Self-hosted Nunito. One variable file covers 400–800, latin subset only.
   Preloaded in index.html. Never swap this back to the Google Fonts CDN —
   that added a third-party DNS lookup, TLS handshake and a blocking
   stylesheet before the font could even start downloading. */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('nunito-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Sentinel for the navbar IntersectionObserver — see script.js */
#navSentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 40px;
  pointer-events: none;
}

:root {
  --bg-cream: #fff9f5;
  --text-dark: #3f2f2b;
  --text-muted: #6b554f;
  --white: #ffffff;

  /* Brand fills — use these for backgrounds, icons and shapes */
  --teal-primary: #38b4a1;
  --teal-dark: #2a8a7b;
  --teal-deep: #1f7466;
  --coral-primary: #ff7657;
  --coral-hover: #e85f40;
  --mint-soft: #c4ede3;
  --peach-soft: #ffd8c5;

  /* Brand inks — accessible text versions of the fills above (WCAG AA).
     Use --coral-ink on white/cream; use --coral-ink-deep on tinted coral
     backgrounds (pills, chips, badges), where the plain ink falls short. */
  --coral-ink: #c2451f;
  --coral-ink-deep: #a83a19;
  --teal-ink: #1c6b5e;

  /* WhatsApp green, darkened so white text passes contrast */
  --wa-green: #0f7c46;
  --wa-green-hover: #0b6538;

  --card-shadow: 0 15px 35px rgba(63, 47, 43, 0.06);
  --card-shadow-hover: 0 25px 50px rgba(63, 47, 43, 0.12);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-pill: 50px;
  --transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --nav-h: 88px;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background-color: var(--bg-cream);
  color: var(--text-dark);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

body.nav-open {
  overflow: hidden;
}

/* Anchor targets clear the fixed navbar */
section[id],
main[id] {
  scroll-margin-top: calc(var(--nav-h) + 16px);
}

img, svg {
  max-width: 100%;
}

/* Keyboard focus is always visible */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--coral-ink);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--text-dark);
  color: var(--white);
  padding: 12px 22px;
  border-radius: 0 0 12px 0;
  font-weight: 800;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* --- BACKGROUND BLOB SHAPES --- */
/* The blobs are deliberately positioned past the right edge. This wrapper is
   what actually clips them: `overflow-x: hidden` on the body alone doesn't,
   because the body's overflow propagates to the viewport instead of clipping
   the body's own box, so the document still measured ~160px wider than the
   screen. Phones then shrink-to-fit the whole page and every fixed element
   lands off-screen. Keep the blobs inside this wrapper. */
.bg-decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.bg-blob {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  filter: blur(80px);
}
.blob-peach-1 {
  width: 450px;
  height: 450px;
  background-color: var(--peach-soft);
  top: -140px;
  right: -120px;
  opacity: 0.75;
}
.blob-mint-1 {
  width: 350px;
  height: 350px;
  background-color: var(--mint-soft);
  top: 55vh;
  left: -140px;
  opacity: 0.6;
}
.blob-peach-2 {
  width: 400px;
  height: 400px;
  background-color: var(--peach-soft);
  top: 165vh;
  right: -160px;
  opacity: 0.5;
}

/* --- REUSABLE UTILITIES & BUTTONS --- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}
.container-narrow {
  max-width: 820px;
}

.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background-color: rgba(255, 118, 87, 0.14);
  color: var(--coral-ink-deep);
  font-weight: 800;
  font-size: 0.85rem;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: var(--transition);
  cursor: pointer;
  border: none;
  line-height: 1.2;
}
.btn-sm {
  padding: 10px 22px;
  font-size: 0.95rem;
}
.btn-block {
  width: 100%;
}
.btn-ico {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  background-color: var(--coral-ink);
  color: var(--white);
  box-shadow: 0 10px 25px rgba(255, 118, 87, 0.25);
}
.btn-primary:hover:not(:disabled) {
  background-color: var(--coral-ink-deep);
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(255, 118, 87, 0.35);
}

.btn-secondary {
  background-color: var(--teal-deep);
  color: var(--white);
  box-shadow: 0 10px 25px rgba(56, 180, 161, 0.25);
}
.btn-secondary:hover:not(:disabled) {
  background-color: #175a4f;
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(56, 180, 161, 0.35);
}

.btn-whatsapp {
  background-color: var(--wa-green);
  color: var(--white);
  box-shadow: 0 10px 25px rgba(15, 124, 70, 0.22);
}
.btn-whatsapp:hover:not(:disabled) {
  background-color: var(--wa-green-hover);
  transform: translateY(-3px);
}

/* --- HEADER / NAVIGATION --- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 20px 0;
  transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}
.navbar.scrolled {
  background-color: rgba(255, 249, 245, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 12px 0;
  box-shadow: 0 10px 30px rgba(63, 47, 43, 0.05);
}
.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.logo-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-dot {
  display: block;
  width: 24px;
  height: 24px;
  background-color: var(--coral-primary);
  border-radius: 50%;
  flex-shrink: 0;
}
.logo-dot-sm { width: 22px; height: 22px; }
.logo-dot-xs { width: 16px; height: 16px; }

.logo-text {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: -0.5px;
}
.logo-text-light { color: var(--white); }

.nav-links ul {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}
.nav-link {
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 700;
  font-size: 1.05rem;
  transition: color 0.2s ease;
}
.nav-link:hover {
  color: var(--coral-ink);
}

/* Hamburger */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  background: var(--white);
  border: 1px solid rgba(63, 47, 43, 0.08);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  cursor: pointer;
  padding: 0 11px;
  z-index: 1100;
}
.menu-bar {
  display: block;
  height: 2.5px;
  width: 100%;
  background: var(--text-dark);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.mobile-menu-btn[aria-expanded="true"] .menu-bar:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.mobile-menu-btn[aria-expanded="true"] .menu-bar:nth-child(2) {
  opacity: 0;
}
.mobile-menu-btn[aria-expanded="true"] .menu-bar:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

.nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(63, 47, 43, 0.45);
  backdrop-filter: blur(2px);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.nav-scrim.show {
  opacity: 1;
}

/* --- HERO SECTION --- */
.hero {
  padding: 170px 0 90px;
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}
.hero-content h1 {
  font-size: 3.8rem;
  font-weight: 800;
  line-height: 1.12;
  color: var(--text-dark);
  margin-bottom: 18px;
  letter-spacing: -1px;
}
.h1-sub {
  display: block;
  margin-top: 14px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--text-muted);
}
.hero-subline {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--coral-ink);
  margin-bottom: 20px;
}
.hero-desc {
  font-size: 1.15rem;
  color: var(--text-muted);
  margin-bottom: 30px;
  max-width: 540px;
}
.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-note {
  margin-top: 18px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-muted);
}

/* --- HERO VISUAL / 3D CARD FLIP PREVIEW --- */
.hero-visual {
  display: flex;
  justify-content: center;
  perspective: 1200px;
}
.card-scene {
  width: 100%;
  max-width: 440px;
  position: relative;
}
.card-flipper {
  display: block;
  width: 100%;
  height: 270px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  /* Touch devices flip on tap — keep the tap instant and unhighlighted */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.card-flipper.flipped {
  transform: rotateY(180deg);
}
/* Mouse users get the flip on hover; touch users tap (handled in script.js) */
@media (hover: hover) and (pointer: fine) {
  .card-scene:hover .card-flipper {
    transform: rotateY(180deg);
  }
}

.card-face-demo {
  position: absolute;
  inset: 0;
  /* `visibility` alone decides which face shows — deliberately NOT
     `backface-visibility`. iOS Safari flattens this 3D context (a <button> is
     one of the elements WebKit won't keep in 3D), and in a flattened context
     backface-visibility is unreliable: it left both faces painted on iPhone,
     the front showing through the back as mirrored text. Pairing the two is
     worse still — flatten the context with both in play and they can hide
     *every* face, blanking the card. One mechanism, no 3D dependency.

     The 0.4s delay is half the 0.8s rotation, so the swap lands while the card
     is edge-on and neither face is legible. If you retime the flip, retime
     this to match. */
  transition: visibility 0s linear 0.4s;
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow-hover);
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

/* Which face is showing. Resting: front visible, back genuinely hidden. */
.card-flipper.flipped .demo-front { visibility: hidden; }
.card-flipper.flipped .demo-back { visibility: visible; }

@media (hover: hover) and (pointer: fine) {
  .card-scene:hover .demo-front { visibility: hidden; }
  .card-scene:hover .demo-back { visibility: visible; }
}

.demo-front {
  visibility: visible;
  background-color: var(--bg-cream);
  border: 1px solid rgba(255, 216, 197, 0.6);
}
.demo-front .shape-1 {
  position: absolute;
  top: -40px;
  right: -30px;
  width: 180px;
  height: 180px;
  background-color: var(--peach-soft);
  border-radius: 50%;
}
.demo-front .shape-2 {
  position: absolute;
  bottom: -50px;
  right: 100px;
  width: 140px;
  height: 140px;
  background-color: var(--mint-soft);
  border-radius: 50%;
}
.demo-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}
.demo-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: auto;
}
.demo-brand-text {
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--text-dark);
  letter-spacing: -0.5px;
}
.demo-brand-text.light {
  font-size: 1.2rem;
  color: var(--white);
}
.demo-title {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.demo-tag {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  /* The soft shapes pass behind this line. --coral-ink only manages 3.98:1 on
     --mint-soft and 3.81:1 on --peach-soft; the deep ink clears 4.5:1 on both
     (5.04:1 and 4.83:1) as well as on the cream card (6.13:1). */
  color: var(--coral-ink-deep);
  line-height: 1.4;
}

.demo-back {
  visibility: hidden;
  background-color: var(--teal-deep);
  color: var(--white);
  transform: rotateY(180deg);
}
.demo-back-head {
  display: block;
}
.demo-back-title {
  display: block;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--white);
  margin-top: 10px;
}
.demo-back-sub {
  display: block;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.88);
}
.demo-back-rows {
  display: block;
}
.demo-back .pill-item {
  background-color: rgba(255, 255, 255, 0.22);
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 0.78rem;
  font-weight: 700;
  width: 108px;
  text-align: center;
  flex-shrink: 0;
}
.demo-back .info-item {
  font-size: 0.88rem;
  font-weight: 600;
}
.demo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.flip-hint {
  text-align: center;
  margin-top: 14px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* --- SECTION HEADERS --- */
.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}
.section-title {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 16px;
  color: var(--text-dark);
}
.section-desc {
  font-size: 1.1rem;
  color: var(--text-muted);
}
.section-title-left { text-align: left; }
.section-desc-left { text-align: left; margin-bottom: 18px; }

/* --- SERVICES SECTION --- */
.services-section {
  padding: 90px 0;
  position: relative;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}
.service-card {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  padding: 38px 32px;
  box-shadow: var(--card-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(63, 47, 43, 0.04);
  position: relative;
  overflow: hidden;
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--card-shadow-hover);
}
.service-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.service-icon svg {
  width: 30px;
  height: 30px;
}
.icon-teal  { background-color: rgba(56, 180, 161, 0.14); color: var(--teal-ink); }
.icon-coral { background-color: rgba(255, 118, 87, 0.14); color: var(--coral-ink); }
.icon-mint  { background-color: rgba(196, 237, 227, 0.7); color: var(--teal-ink); }
.icon-peach { background-color: rgba(255, 216, 197, 0.7); color: var(--coral-ink); }

.service-card h3 {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--text-dark);
}
.service-card p {
  color: var(--text-muted);
  font-size: 1rem;
  margin-bottom: 22px;
}
.service-features {
  list-style: none;
}
.service-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-dark);
  margin-bottom: 8px;
}
.service-features li::before {
  content: "✓";
  color: var(--teal-ink);
  font-weight: 800;
}

/* --- OUR WORK SECTION --- */
.work-section {
  padding: 90px 0;
  position: relative;
}
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}
.work-card {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(63, 47, 43, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.work-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--card-shadow-hover);
}
.work-thumb {
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -1px;
}

/* Real screenshot tile — same height as the lettered placeholders above */
.work-shot {
  display: block;
  height: 190px;
  overflow: hidden;
  background-color: var(--bg-cream);
  border-bottom: 1px solid rgba(63, 47, 43, 0.06);
}
.work-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.4s ease;
}
.work-card:hover .work-shot img {
  transform: scale(1.04);
}
.thumb-peach { background-color: var(--peach-soft); color: var(--coral-ink); }
.thumb-mint  { background-color: var(--mint-soft);  color: var(--teal-ink); }
.thumb-coral { background-color: rgba(255, 118, 87, 0.2); color: var(--coral-ink); }

.work-body {
  padding: 26px 28px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.work-body h3 {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 10px 0 10px;
}
.work-body p {
  color: var(--text-muted);
  font-size: 0.98rem;
  margin-bottom: 18px;
}
.status-chip {
  align-self: flex-start;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.status-live {
  background-color: rgba(15, 124, 70, 0.12);
  color: var(--wa-green-hover);
}
.status-building {
  background-color: rgba(255, 118, 87, 0.16);
  color: var(--coral-ink-deep);
}
.work-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}
.work-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  color: var(--coral-ink);
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
}
.work-link svg {
  width: 15px;
  height: 15px;
  transition: transform 0.25s ease;
}
.work-link:hover {
  text-decoration: underline;
}
.work-link:hover svg {
  transform: translate(2px, -2px);
}
.work-tags li {
  background-color: rgba(63, 47, 43, 0.06);
  color: var(--text-muted);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
}
.work-cta {
  text-align: center;
  margin-top: 44px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-muted);
}
.work-cta a {
  color: var(--coral-ink);
  font-weight: 800;
  text-decoration: none;
}
.work-cta a:hover { text-decoration: underline; }

/* --- ABOUT & PROCESS SECTION --- */
.about-section {
  padding: 90px 0;
}
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: center;
}
.process-card {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  padding: 38px 36px;
  box-shadow: var(--card-shadow);
}
.process-title {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 26px;
}
.process-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.process-steps li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.step-num {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: rgba(255, 118, 87, 0.14);
  color: var(--coral-ink-deep);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-body {
  font-size: 0.98rem;
  color: var(--text-muted);
}
.step-body strong {
  display: block;
  color: var(--text-dark);
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 2px;
}

.stat-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.stat-box {
  background: var(--white);
  padding: 20px 24px;
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
  flex: 1;
  min-width: 180px;
}
.stat-num {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.2;
}
.stat-coral { color: var(--coral-ink); }
.stat-teal  { color: var(--teal-ink); }
.stat-box p {
  font-weight: 700;
  color: var(--text-dark);
  font-size: 0.98rem;
}

/* --- FAQ SECTION --- */
.faq-section {
  padding: 90px 0;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq-item {
  background-color: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(63, 47, 43, 0.04);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  padding: 22px 26px;
  font-weight: 800;
  font-size: 1.08rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--coral-ink);
  line-height: 1;
  transition: transform 0.25s ease;
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
}
.faq-answer {
  padding: 0 26px 24px;
  color: var(--text-muted);
  font-size: 1rem;
}
.faq-answer p + p {
  margin-top: 12px;
}

/* --- CONTACT SECTION --- */
.contact-section {
  padding: 90px 0;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
}
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-heading {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 8px;
}
.contact-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 12px;
  margin: 0 -12px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
a.contact-item:hover {
  background-color: rgba(56, 180, 161, 0.1);
  transform: translateX(4px);
}
.contact-ico {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(56, 180, 161, 0.14);
  color: var(--teal-ink);
}
.contact-ico svg {
  width: 19px;
  height: 19px;
}
.contact-ico.ico-wa {
  background-color: rgba(15, 124, 70, 0.12);
  color: var(--wa-green-hover);
}
/* Location keeps the default teal tint — only WhatsApp gets its own colour,
   because that green is a recognised brand mark rather than decoration. */
.contact-pill {
  background-color: rgba(56, 180, 161, 0.16);
  color: var(--teal-ink);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: 0.9rem;
  min-width: 124px;
  text-align: center;
  flex-shrink: 0;
}
.contact-val {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text-dark);
  word-break: break-word;
}
.contact-wa-btn {
  margin-top: 16px;
  align-self: flex-start;
}

.contact-form-card {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  padding: 38px;
  box-shadow: var(--card-shadow);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-group {
  margin-bottom: 18px;
}
.form-group label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 0.95rem;
}
.optional {
  font-weight: 600;
  color: var(--text-muted);
}
.form-control {
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  border: 2px solid rgba(63, 47, 43, 0.12);
  font-family: inherit;
  font-size: 1rem;
  color: var(--text-dark);
  background: var(--white);
  transition: border-color 0.2s ease;
}
.form-control:focus {
  border-color: var(--teal-primary);
}
.form-control[aria-invalid="true"] {
  border-color: var(--coral-ink);
}
.form-error {
  color: var(--coral-ink);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 14px;
}
.form-privacy {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

/* Honeypot — hidden from people, visible to bots */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-success {
  text-align: center;
  padding: 30px 10px;
}
.success-emoji {
  font-size: 3rem;
  margin-bottom: 12px;
}
.form-success h3 {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--teal-ink);
  margin-bottom: 12px;
}
.form-success p {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-bottom: 24px;
}

/* --- FOOTER --- */
.footer {
  background-color: var(--text-dark);
  color: var(--white);
  padding: 60px 0 30px;
  margin-top: 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 50px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-tag {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
  margin-top: 14px;
}
.footer-addr {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
  margin-top: 6px;
}
.footer-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 30px;
}
.footer-nav h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 14px;
}
.footer-nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.footer-nav a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.98rem;
  transition: color 0.2s ease;
  word-break: break-word;
}
.footer-nav a:hover {
  color: var(--peach-soft);
}
.footer-bottom {
  text-align: center;
  padding-top: 28px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.92rem;
}

/* --- FLOATING WHATSAPP BUTTON --- */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px 14px 18px;
  background-color: var(--wa-green);
  color: var(--white);
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(15, 124, 70, 0.35);
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.wa-float svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.wa-float:hover {
  background-color: var(--wa-green-hover);
  transform: translateY(-3px);
}

/* --- RESPONSIVE MEDIA QUERIES --- */
@media (max-width: 992px) {
  .hero-grid,
  .about-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .hero-content h1 { font-size: 3rem; }
  .section-title { font-size: 2.2rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 900px) {
  .mobile-menu-btn { display: flex; }

  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: min(330px, 86vw);
    background: var(--bg-cream);
    box-shadow: -20px 0 50px rgba(63, 47, 43, 0.18);
    padding: 104px 26px 40px;
    overflow-y: auto;
    transform: translateX(105%);
    /* visibility:hidden also pulls the closed panel's links out of the tab order */
    visibility: hidden;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0.32s;
    z-index: 1050;
  }
  .nav-links.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0s;
  }
  .nav-links ul {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .nav-links li { width: 100%; }
  .nav-link {
    display: block;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    font-size: 1.15rem;
  }
  .nav-link:hover { background-color: rgba(255, 118, 87, 0.1); }
  .nav-links .btn {
    width: 100%;
    margin-top: 14px;
    font-size: 1.05rem;
    padding: 14px 24px;
  }
}

@media (max-width: 768px) {
  .hero { padding: 140px 0 70px; }
  .hero-content h1 { font-size: 2.4rem; }
  .h1-sub { font-size: 1.1rem; }
  .section-title { font-size: 2rem; }
  .services-section,
  .work-section,
  .about-section,
  .faq-section,
  .contact-section { padding: 70px 0; }
  .contact-form-card,
  .process-card { padding: 28px 22px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .contact-pill { min-width: 96px; font-size: 0.82rem; padding: 7px 12px; }
  .contact-val { font-size: 0.98rem; }
  .contact-item { gap: 12px; }
  .contact-ico { width: 34px; height: 34px; border-radius: 10px; }
  .contact-ico svg { width: 17px; height: 17px; }
  .hero-actions .btn { flex: 1 1 100%; }

  /* Hero flip card — the desktop proportions leave a dead band of empty space
     on a phone-width card, and the decorative circles crowd the copy. Shrink
     the box and the shapes together so the two faces stay balanced.
     The height stays generous enough for the back face, which needs ~230px
     for its heading block plus three contact rows. */
  .card-flipper { height: 252px; }
  .card-face-demo { padding: 24px 22px; }
  .demo-front .shape-1 {
    top: -34px;
    right: -26px;
    width: 148px;
    height: 148px;
  }
  .demo-front .shape-2 {
    bottom: -46px;
    right: 86px;
    width: 116px;
    height: 116px;
  }
  .demo-brand-text { font-size: 1.45rem; }
  .demo-brand-text.light { font-size: 1.1rem; }
  .demo-title { font-size: 1.2rem; }
  .demo-tag { font-size: 0.78rem; }
  .demo-back-title { font-size: 1.08rem; margin-top: 8px; }
  .demo-back-sub { font-size: 0.82rem; }
  .demo-back .pill-item { width: 96px; font-size: 0.74rem; padding: 4px 8px; }
  .demo-back .info-item { font-size: 0.84rem; }
  .demo-row { gap: 10px; margin-bottom: 7px; }

  /* Collapse the float to a circle so it never covers content */
  .wa-float {
    right: 16px;
    bottom: 16px;
    padding: 15px;
    border-radius: 50%;
  }
  .wa-float-label { display: none; }
}

@media (max-width: 380px) {
  .logo-text { font-size: 1.7rem; }

  /* Below ~384px the pill + value pair no longer fits on one line, so the
     email and the location were wrapping to two. Trim the icon, the pill and
     the gaps to buy the value back its ~180px. */
  .contact-item { gap: 10px; }
  .contact-ico { width: 30px; height: 30px; }
  .contact-pill { min-width: 84px; font-size: 0.78rem; padding: 6px 10px; }
  .contact-val { font-size: 0.92rem; }

  /* At 320–380px the back face's pill + value pair is the tightest row on the
     site. Trim both so "+91 81051 12048" and "Mangaluru, Karnataka" stay on
     one line instead of wrapping the card past its fixed height. */
  .card-face-demo { padding: 22px 18px; }
  .demo-brand-text { font-size: 1.35rem; }
  .demo-title { font-size: 1.1rem; }
  .demo-tag { font-size: 0.74rem; }
  .demo-back .pill-item { width: 88px; font-size: 0.7rem; }
  .demo-back .info-item { font-size: 0.8rem; }
  .demo-row { gap: 8px; margin-bottom: 6px; }
}

/* --- MOTION PREFERENCES --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .card-scene:hover .card-flipper,
  .card-flipper.flipped { transition: none; }
  /* The flip is instant here, so the face swap has to be too — otherwise the
     wrong face lingers for 0.4s. Duration is already forced to ~0 above; the
     delay is what needs clearing. */
  .card-face-demo { transition-delay: 0s; }
  .service-card:hover,
  .work-card:hover,
  .btn:hover,
  .wa-float:hover { transform: none; }
}