/* Bespoke styling for services-website-development-for-ca-india.html.
   Mirrors src/views/WebDevelopment.tsx section by section. Structurally
   similar to seo-ca.css (shared section/label/orbit patterns) but kept as
   its own file since the two bespoke pages are independent. */

.wd-page { overflow-x: hidden; }
.wd-section { padding: 6rem 4%; position: relative; overflow: hidden; }
.wd-label { display: inline-flex; align-items: center; gap: 0.4rem; font-family: "Space Mono", monospace; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.4rem 1rem; border-radius: 999px; border: 1px solid hsl(var(--accent) / 0.2); background: hsl(var(--accent) / 0.1); color: hsl(var(--accent)); margin-bottom: 1.25rem; }
.wd-label.is-hot { border-color: hsl(var(--hot) / 0.2); background: hsl(var(--hot) / 0.1); color: hsl(var(--hot)); }
.wd-section-head { text-align: center; max-width: 56rem; margin: 0 auto 3.5rem; }
.wd-section-head h2 { font-size: clamp(2rem, 1.6rem + 2.5vw, 3.5rem); font-weight: 800; margin-bottom: 1.25rem; line-height: 1.15; }
.wd-section-head p { font-size: 1.1rem; color: hsl(var(--muted-foreground)); max-width: 42rem; margin-inline: auto; }
.wd-accent { color: hsl(var(--accent)); }

/* Hero */
.wd-hero { padding: 7rem 4% 0; background: hsl(var(--background)); }
.wd-hero-grid { display: grid; gap: 2rem; align-items: end; max-width: 1400px; margin: 0 auto; position: relative; }
@media (min-width: 1024px) { .wd-hero-grid { grid-template-columns: 52% 48%; } }
.wd-hero-copy { padding-bottom: 3rem; position: relative; z-index: 2; }
.wd-hero-copy h1 { font-size: clamp(1.75rem, 1.2rem + 3vw, 3.4rem); font-weight: 800; line-height: 1.15; margin: 1.5rem 0; }
.wd-hero-copy > p { color: hsl(var(--muted-foreground)); max-width: 42rem; margin-bottom: 1rem; line-height: 1.7; }
.wd-hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0; }
.wd-hero-trust { display: flex; align-items: center; gap: 1rem; }
.wd-hero-avatars { display: flex; }
.wd-hero-avatars span { width: 2.25rem; height: 2.25rem; border-radius: 999px; border: 2px solid hsl(var(--background)); background: hsl(var(--accent) / 0.15); color: hsl(var(--accent)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem; margin-left: -0.6rem; }
.wd-hero-avatars span:first-child { margin-left: 0; }
.wd-hero-stars { display: flex; gap: 0.15rem; color: hsl(var(--accent)); }
.wd-hero-visual { display: none; position: relative; }
@media (min-width: 1024px) { .wd-hero-visual { display: block; min-height: 30rem; } }
.wd-hero-composite { position: relative; width: 130%; margin-top: 3rem; }
.wd-hero-rock { position: relative; z-index: 1; width: 100%; display: block; }
.wd-hero-laptop { position: absolute; z-index: 2; width: 62%; left: 2%; bottom: 32%; filter: drop-shadow(0 20px 40px rgb(0 0 0 / 0.2)); }
.wd-float-badge { position: absolute; z-index: 3; background: hsl(var(--background) / 0.95); border: 1px solid hsl(var(--border)); padding: 0.65rem 0.9rem; border-radius: 1rem; box-shadow: var(--shadow-elevated); display: flex; align-items: center; gap: 0.6rem; }
.wd-float-badge .icon { width: 2.1rem; height: 2.1rem; border-radius: 0.6rem; background: hsl(var(--accent) / 0.1); color: hsl(var(--accent)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wd-float-1 { top: 2%; right: 0; animation: float 7s ease-in-out infinite; }
.wd-float-2 { top: 8%; left: -4%; animation: float 6s ease-in-out infinite reverse; }
.wd-float-3 { top: 42%; right: -4%; animation: float 8s ease-in-out infinite; }
.wd-float-4 { top: 40%; left: -8%; animation: float 7.5s ease-in-out infinite reverse; }
.wd-float-5 { bottom: 26%; left: 0; animation: float 6.5s ease-in-out infinite; }
.wd-float-6 { bottom: 20%; right: 3%; animation: float 8.5s ease-in-out infinite reverse; }
.wd-trust-strip { max-width: 1400px; margin: 3rem auto 0; padding: 2.5rem 0; border-top: 1px solid hsl(var(--border) / 0.5); }
.wd-trust-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .wd-trust-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .wd-trust-grid { grid-template-columns: repeat(5, 1fr); } }
.wd-trust-item { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 1rem; border: 1px solid hsl(var(--border)); }
.wd-trust-item svg { width: 1.25rem; height: 1.25rem; color: hsl(var(--accent)); flex-shrink: 0; }
.wd-trust-item .l1 { font-size: 0.8rem; font-weight: 700; }
.wd-trust-item .l2 { font-size: 0.7rem; color: hsl(var(--muted-foreground)); }
.wd-trusted-row { margin-top: 2.5rem; text-align: center; }
.wd-trusted-row p.label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-bottom: 1.5rem; }
.wd-trusted-firms { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 2.5rem; }
.wd-trusted-firm { display: flex; align-items: center; gap: 0.6rem; }
.wd-trusted-firm .initial { width: 2rem; height: 2rem; border-radius: 0.5rem; background: hsl(var(--accent) / 0.1); color: hsl(var(--accent)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem; }
.wd-trusted-firm .name { font-size: 0.85rem; font-weight: 700; }
.wd-trusted-firm .sub { font-size: 0.65rem; color: hsl(var(--muted-foreground)); }

/* Reality (why sites fail) */
.wd-keywords-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 2rem; }
.wd-keywords-row .lbl { font-size: 0.7rem; font-weight: 700; color: hsl(var(--accent)); text-transform: uppercase; letter-spacing: 0.1em; margin-right: 0.5rem; }
.wd-keyword-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border-radius: 999px; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); font-size: 0.8rem; font-weight: 500; }
.wd-reality-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 3rem; }
@media (min-width: 768px) { .wd-reality-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .wd-reality-grid { grid-template-columns: repeat(3, 1fr); } }
.wd-reality-card { padding: 1.75rem; border-radius: 1.25rem; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); }
.wd-reality-card .top { display: flex; gap: 1.25rem; }
.wd-reality-card .icon { width: 3.25rem; height: 3.25rem; border-radius: 999px; background: hsl(var(--accent) / 0.1); color: hsl(var(--accent)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wd-reality-card .num { font-size: 0.75rem; font-weight: 700; color: hsl(var(--accent)); background: hsl(var(--accent) / 0.1); padding: 0.15rem 0.5rem; border-radius: 0.4rem; }
.wd-reality-card h4 { font-size: 1.05rem; font-weight: 700; margin: 0.5rem 0; }
.wd-reality-card p { font-size: 0.85rem; color: hsl(var(--muted-foreground)); line-height: 1.6; margin-bottom: 0.75rem; }
.wd-reality-card .kw { font-size: 0.7rem; color: hsl(var(--muted-foreground)); }
.wd-reality-card .kw strong { color: hsl(var(--accent)); }
.seoca-opportunity-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.75rem; border-radius: 1.5rem; background: hsl(var(--accent) / 0.06); border: 1px solid hsl(var(--accent) / 0.2); max-width: 56rem; margin-inline: auto; }

/* What we build */
.wd-build-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .wd-build-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .wd-build-grid { grid-template-columns: repeat(3, 1fr); } }
.wd-build-card { background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: 1.5rem; padding: 1.5rem; }
.wd-build-icon { width: 3rem; height: 3rem; border-radius: 0.85rem; background: hsl(var(--accent) / 0.1); color: hsl(var(--accent)); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.wd-build-num { display: inline-block; font-size: 0.7rem; font-weight: 700; background: hsl(var(--accent) / 0.1); color: hsl(var(--accent)); padding: 0.2rem 0.6rem; border-radius: 999px; margin-bottom: 0.75rem; }
.wd-build-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.6rem; }
.wd-build-card p { font-size: 0.85rem; color: hsl(var(--muted-foreground)); line-height: 1.6; margin-bottom: 1.25rem; }
.wd-build-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid hsl(var(--border)); }
.wd-build-pill { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; font-weight: 600; background: hsl(var(--surface)); padding: 0.3rem 0.6rem; border-radius: 0.5rem; border: 1px solid hsl(var(--border)); }
.wd-build-pill svg { width: 0.85rem; height: 0.85rem; color: hsl(var(--accent)); }

/* Orbit (3 rings) */
.wd-orbit-section { background: hsl(220 30% 98%); }
.wd-orbit-wrap { position: relative; width: 100%; max-width: 48rem; aspect-ratio: 1; margin: 3rem auto; }
.wd-orbit-hub { position: absolute; top: 50%; left: 50%; width: 28%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 999px; background: #fff; box-shadow: var(--shadow-elevated); border: 1px solid hsl(var(--border)); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 5; }
.wd-orbit-hub img { width: 100%; height: 100%; object-fit: contain; }

/* Decorative rotating ring border — purely visual, no children (see
   seo-ca.css for why: putting a continuous spin animation and each
   icon's own static placement angle on the same element's `transform`
   lets the animation silently win, collapsing every icon to one spot
   instead of spreading around the circle). */
.wd-orbit-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 999px; pointer-events: none; }
.wd-orbit-ring.is-r1 { width: 46%; height: 46%; border: 1px solid hsl(var(--accent) / 0.25); animation: wd-spin-cw 42s linear infinite; }
.wd-orbit-ring.is-r2 { width: 72%; height: 72%; border: 1px solid hsl(224 62% 60% / 0.25); animation: wd-spin-ccw 55s linear infinite; }
.wd-orbit-ring.is-r3 { width: 97%; height: 97%; border: 1px solid hsl(190 62% 60% / 0.25); animation: wd-spin-cw 68s linear infinite; }

/* Icon layer — same size/position as its matching ring, but static. */
.wd-orbit-items { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.wd-orbit-items.is-r1 { width: 46%; height: 46%; }
.wd-orbit-items.is-r2 { width: 72%; height: 72%; }
.wd-orbit-items.is-r3 { width: 97%; height: 97%; }
.wd-orbit-pivot { position: absolute; inset: 0; transform: rotate(var(--pivot-angle, 0deg)); }
.wd-orbit-item-pos { position: absolute; top: 0; left: 50%; width: 2.6rem; height: 2.6rem; transform: translate(-50%, -50%); }
.wd-orbit-btn { width: 100%; height: 100%; border-radius: 999px; background: #fff; border: 1px solid hsl(var(--border)); box-shadow: var(--shadow-soft); display: flex; align-items: center; justify-content: center; color: hsl(var(--accent)); transform: rotate(var(--icon-angle, 0deg)); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.wd-orbit-btn:hover { transform: scale(1.15) rotate(var(--icon-angle, 0deg)); border-color: hsl(var(--accent)); box-shadow: var(--shadow-glow); }
@keyframes wd-spin-cw { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes wd-spin-ccw { to { transform: translate(-50%, -50%) rotate(-360deg); } }
.wd-orbit-banner { max-width: 1400px; margin: 3rem auto 0; background: #fff; border: 1px solid hsl(var(--border)); border-radius: 1.75rem; padding: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; box-shadow: var(--shadow-soft); }
.wd-orbit-banner-stats { display: flex; align-items: center; gap: 1.5rem; }
.wd-orbit-banner-stats .num { font-size: 1.35rem; font-weight: 800; }
.wd-orbit-banner-stats .lbl { font-size: 0.6rem; text-transform: uppercase; color: hsl(var(--muted-foreground)); font-weight: 700; }

/* Process timeline */
.wd-timeline { position: relative; max-width: 60rem; margin: 0 auto; }
.wd-timeline::before { content: ""; position: absolute; left: 1.5rem; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, hsl(var(--accent)), transparent); }
@media (min-width: 768px) { .wd-timeline::before { left: 50%; transform: translateX(-50%); } }
.wd-timeline-step { position: relative; display: flex; margin-bottom: 2rem; padding-left: 4rem; }
@media (min-width: 768px) { .wd-timeline-step { padding-left: 0; justify-content: flex-start; } .wd-timeline-step.is-odd { justify-content: flex-end; } }
.wd-timeline-node { position: absolute; left: 1.5rem; top: 0.5rem; transform: translateX(-50%); width: 2.25rem; height: 2.25rem; border-radius: 999px; background: hsl(var(--accent)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.7rem; box-shadow: 0 0 0 4px hsl(var(--surface)); z-index: 2; }
@media (min-width: 768px) { .wd-timeline-node { left: 50%; } }
.wd-timeline-card { width: 100%; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: 1.25rem; padding: 1.25rem 1.5rem; }
@media (min-width: 768px) { .wd-timeline-card { width: 45%; } .wd-timeline-step:not(.is-odd) .wd-timeline-card { margin-right: auto; padding-right: 2rem; } .wd-timeline-step.is-odd .wd-timeline-card { margin-left: auto; padding-left: 2rem; } }
.wd-timeline-card-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.wd-timeline-card-head .icon { width: 2.5rem; height: 2.5rem; border-radius: 999px; background: hsl(var(--accent) / 0.1); color: hsl(var(--accent)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wd-timeline-card h4 { font-weight: 700; font-size: 1rem; }
.wd-timeline-card p { font-size: 0.85rem; color: hsl(var(--muted-foreground)); line-height: 1.6; }

/* Business outcomes */
.wd-outcomes-toggle { display: flex; justify-content: center; margin-bottom: 2.5rem; }
.wd-outcomes-toggle-track { position: relative; display: inline-flex; background: #fff; border-radius: 999px; padding: 0.35rem; border: 1px solid hsl(var(--border)); box-shadow: var(--shadow-soft); }
.wd-outcomes-toggle-track button { position: relative; z-index: 2; padding: 0.75rem 1.25rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: hsl(var(--muted-foreground)); }
.wd-outcomes-toggle-track button.is-active { color: #fff; }
.wd-outcomes-thumb { position: absolute; top: 0.35rem; bottom: 0.35rem; left: 0.35rem; width: calc(50% - 0.35rem); border-radius: 999px; background: hsl(var(--accent)); transition: transform 0.3s ease, background 0.3s ease; }
.wd-outcomes-thumb.is-right { transform: translateX(100%); background: hsl(0 72% 55%); }
.wd-outcomes-panels { display: grid; gap: 2rem; max-width: 1200px; margin: 0 auto; }
@media (min-width: 1024px) { .wd-outcomes-panels { grid-template-columns: 1fr 1fr; } }
.wd-outcomes-col { border-left: 2px solid hsl(var(--border)); padding-left: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.wd-outcomes-col.is-hidden-mobile { display: none; }
@media (min-width: 1024px) { .wd-outcomes-col.is-hidden-mobile { display: flex; } }
.wd-outcome-item { background: hsl(var(--surface) / 0.5); border: 1px solid hsl(var(--border)); border-radius: 1.25rem; padding: 1.25rem; position: relative; }
.wd-outcome-item .month { display: inline-block; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.2rem 0.6rem; border-radius: 0.4rem; background: hsl(var(--accent) / 0.1); color: hsl(var(--accent)); margin-bottom: 0.6rem; }
.wd-outcome-item.is-negative .month { background: hsl(0 72% 55% / 0.1); color: hsl(0 72% 45%); }
.wd-outcome-item h5 { font-weight: 700; margin-bottom: 0.4rem; }
.wd-outcome-item p { font-size: 0.8rem; color: hsl(var(--muted-foreground)); line-height: 1.6; }
.wd-outcome-item .stat { margin-top: 0.75rem; font-weight: 800; color: hsl(var(--accent)); }
.wd-outcome-item.is-negative .stat { color: hsl(0 72% 45%); }

/* Comparison table */
.wd-compare-tabs { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.wd-compare-tabs button { padding: 0.6rem 1.25rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; border: 1px solid hsl(var(--border)); background: hsl(var(--background)); }
.wd-compare-tabs button.is-active { background: hsl(var(--accent)); color: #fff; border-color: transparent; }
.wd-compare-grid { display: grid; gap: 1.25rem; max-width: 1200px; margin: 0 auto; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .wd-compare-grid { grid-template-columns: repeat(3, 1fr); } }
.wd-compare-col { border-radius: 1.5rem; border: 1px solid hsl(var(--border)); overflow: hidden; background: hsl(var(--background)); }
.wd-compare-col.is-primansh { border-color: hsl(142 71% 45% / 0.4); }
.wd-compare-col-head { padding: 1.25rem; text-align: center; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--surface)); }
.wd-compare-col.is-primansh .wd-compare-col-head { background: hsl(142 71% 45% / 0.06); }
.wd-compare-col-head .name { font-weight: 700; }
.wd-compare-col-head .price { font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin-top: 0.25rem; }
.wd-compare-row { display: flex; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid hsl(var(--border) / 0.5); }
.wd-compare-row:last-child { border-bottom: none; }
.wd-compare-row svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.15rem; }
.wd-compare-row .title { font-size: 0.85rem; font-weight: 700; }
.wd-compare-row .val { font-size: 0.8rem; color: hsl(var(--muted-foreground)); }
.wd-compare-col.is-primansh .val { color: hsl(142 71% 40%); font-weight: 600; }

/* Tech stack */
.wd-tech-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); max-width: 60rem; margin: 0 auto 2.5rem; }
@media (min-width: 640px) { .wd-tech-grid { grid-template-columns: repeat(4, 1fr); } }
.wd-tech-item { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 1.5rem 1rem; border-radius: 1.25rem; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); text-align: center; }
.wd-tech-item .icon { width: 3rem; height: 3rem; border-radius: 999px; background: hsl(var(--surface)); display: flex; align-items: center; justify-content: center; }
.wd-tech-item .name { font-size: 0.8rem; font-weight: 700; }

/* Industries */
.wd-industries-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .wd-industries-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .wd-industries-grid { grid-template-columns: repeat(4, 1fr); } }
.wd-industry-card { padding: 1.5rem; border-radius: 1.5rem; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); }
.wd-industry-card .icon { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: hsl(var(--accent) / 0.1); color: hsl(var(--accent)); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.wd-industry-card h4 { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; }
.wd-industry-card p { font-size: 0.8rem; color: hsl(var(--muted-foreground)); line-height: 1.6; }

/* Knowledge / ICAI prose */
.wd-hub { max-width: 48rem; margin: 0 auto; }
.wd-hub h2 { font-size: clamp(1.75rem, 1.4rem + 2vw, 2.75rem); font-weight: 700; margin-bottom: 0.75rem; }
.wd-hub > p.lead { color: hsl(var(--accent)); font-weight: 500; margin-bottom: 2rem; }
.wd-hub p { color: hsl(var(--muted-foreground)); line-height: 1.75; margin-bottom: 1.25rem; }

/* FAQ grid */
.wd-faq-grid { display: grid; gap: 1rem; max-width: 72rem; margin: 0 auto; }
@media (min-width: 1024px) { .wd-faq-grid { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Closing CTA */
.wd-cta-box { max-width: 1400px; margin: 0 auto; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: 2.5rem; padding: 3rem 1.5rem; text-align: center; box-shadow: var(--shadow-elevated); }
@media (min-width: 768px) { .wd-cta-box { padding: 5rem 3rem; } }
.wd-cta-box h2 { font-size: clamp(1.75rem, 1.3rem + 2.2vw, 3rem); font-weight: 700; margin-bottom: 1.25rem; max-width: 48rem; margin-inline: auto; }
.wd-cta-box > p { color: hsl(var(--muted-foreground)); max-width: 40rem; margin: 0 auto 2rem; }