/* ============================================================
   CITY PAGES  -  shared design layer
   (software-development-<city>.html, web-design-<city>.html,
    digital-marketing-<city>.html, web-designs-kolkata.html)

   This file is an ADDITION to css/software-development.css, never a
   replacement. Every city page loads software-development.css first and
   then this sheet, so the layout, spacing scale, colour tokens, cards,
   FAQ, process timeline and the section-level animated vector pan are
   literally the same design system as software-development.html. Nothing
   here can leak into the rest of the site: it is only linked by the city
   pages and everything is namespaced under .sd-page.

   What this file adds on top of the shared system:
     1. ct-  a richer animated VECTOR BACKDROP for the hero: a radar
            sweep, concentric range rings around a city map pin, a
            skyline that rises, and data lanes that stream between nodes.
     2. Local-SEO blocks with no equivalent on the national page:
            coverage areas, industry chips, engagement model table and
            the working-model fact strip.
     3. Hero artwork framing for the three city page families.
   ============================================================ */

/* ------------------------------------------------------------
   1. HERO BACKDROP  -  animated vector cityscape
   Sits inside .sd-hero, behind the .sd-container content (z-index 0/1).
   The <svg> uses preserveAspectRatio="xMidYMid slice" so the artwork
   crops rather than squashes on any viewport from 320px to 4K.
   ------------------------------------------------------------ */
.sd-page .ct-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sd-page .ct-bg svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* --- radar sweep: a wedge of light rotating around the city pin --- */
.sd-page .ct-sweep { transform-box: fill-box; transform-origin: 100% 100%;
                     animation: ct-sweep 9s linear infinite; animation-play-state: paused; }
/* --- range rings: expand and fade outward, like a locating pulse --- */
.sd-page .ct-ring { transform-box: fill-box; transform-origin: center;
                    animation: ct-ring 6.5s cubic-bezier(.2,.6,.3,1) infinite; animation-play-state: paused; }
/* --- the city pin: slow hover plus a pulsing halo --- */
.sd-page .ct-pin { animation: ct-pin 4.5s ease-in-out infinite alternate; animation-play-state: paused; }
.sd-page .ct-pin-halo { transform-box: fill-box; transform-origin: center; animation: ct-halo 3s ease-out infinite; animation-play-state: paused; }
/* --- data lanes: dashed strokes streaming between nodes --- */
.sd-page .ct-lane { stroke-dasharray: 10 22; animation: ct-lane 7s linear infinite; animation-play-state: paused; }
/* --- skyline: towers rise once as the hero enters view --- */
.sd-page .ct-tower { transform-box: fill-box; transform-origin: bottom; animation: ct-rise .9s cubic-bezier(.2,.7,.3,1) backwards; animation-play-state: paused; }
/* --- drifting orbs, far softer than the shared .sd-drift --- */

/* ------------------------------------------------------------
   2. HERO CONTENT EXTRAS
   ------------------------------------------------------------ */
/* Fact strip: honest working-model facts, never invented metrics. */
.sd-page .ct-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; list-style: none; padding: 0; margin: 30px 0 0; }
.sd-page .ct-facts li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; line-height: 1.5; color: #cddff2; max-width: 270px; }
.sd-page .ct-facts li::before { content: ''; flex: 0 0 auto; width: 7px; height: 7px; margin-top: 6px; border-radius: 2px; background: #77edcc; transform: rotate(45deg); }
.sd-page .ct-facts b { color: #fff; font-weight: 700; display: block; }

.sd-page .ct-region { display: inline-flex; align-items: center; gap: 8px; color: #a9c8ea; font-size: 12px; letter-spacing: .04em; }
.sd-page .ct-region svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* ------------------------------------------------------------
   3. LOCAL SEO BLOCKS
   ------------------------------------------------------------ */
/* --- coverage areas: the neighbourhoods / districts we actually cover --- */
.sd-page .ct-areas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; list-style: none; padding: 0; margin: 0; }
.sd-page .ct-areas li { display: flex; align-items: center; gap: 11px; padding: 15px 18px; background: #fff; border: 1px solid var(--sd-line); border-radius: 12px; }
.sd-page .ct-areas svg { width: 15px; height: 15px; flex: 0 0 auto; color: #0057d9; }
.sd-page .ct-areas span { font-size: 14.5px; font-weight: 600; color: var(--sd-ink); line-height: 1.4; }

/* --- industry chips --- */
.sd-page .ct-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.sd-page .ct-chips li { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--sd-line); font-size: 13.5px; font-weight: 600; color: #344962; }
.sd-page .ct-chips svg { width: 14px; height: 14px; color: #008a7a; flex: 0 0 auto; }
.sd-page .ct-chips li:hover { border-color: #9cbedf; color: var(--sd-ink); }

/* --- engagement model table --- */
.sd-page .ct-table-wrap { overflow-x: auto; border: 1px solid var(--sd-line); border-radius: 16px; background: #fff; -webkit-overflow-scrolling: touch; }
.sd-page .ct-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.sd-page .ct-table caption { caption-side: top; text-align: left; padding: 26px 26px 0; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #0057d9; }
.sd-page .ct-table th, .sd-page .ct-table td { padding: 16px 26px; text-align: left; border-bottom: 1px solid var(--sd-line); font-size: 14.5px; vertical-align: top; }
.sd-page .ct-table thead th { background: #071e3c; color: #fff; font-weight: 700; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; border-bottom: 0; white-space: nowrap; }
.sd-page .ct-table tbody tr:last-child th, .sd-page .ct-table tbody tr:last-child td { border-bottom: 0; }
.sd-page .ct-table tbody th { font-weight: 700; color: var(--sd-ink); white-space: nowrap; }
.sd-page .ct-table tbody td { color: var(--sd-muted); }
.sd-page .ct-table tbody td strong { color: var(--sd-ink); font-weight: 700; }
.sd-page .ct-table tbody tr:nth-child(even) { background: #f8fbff; }


/* --- local context: dark context panel with factual local points --- */
.sd-page .ct-local { background: #0e3157; border-radius: 20px; padding: 40px; color: #fff; border: 1px solid #0e3157; }
.sd-page .ct-local h3 { color: #fff; font-size: 22px; margin: 0 0 16px; }
.sd-page .ct-local p { color: #c6dbf0; font-size: 15px; }
.sd-page .ct-local ul { list-style: none; padding: 0; margin: 0; }
.sd-page .ct-local li { position: relative; padding: 11px 0 11px 28px; font-size: 14.5px; line-height: 1.65; color: #c6dbf0; border-bottom: 1px solid #ffffff1f; }
.sd-page .ct-local li:last-child { border-bottom: 0; }
.sd-page .ct-local li::before { content: ''; position: absolute; left: 0; top: 19px; width: 8px; height: 8px; border-radius: 2px; background: #77edcc; transform: rotate(45deg); }
.sd-page .ct-local strong { color: #fff; }

/* --- sibling links: the other two services in this same city --- */
.sd-page .ct-sibling { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.sd-page .ct-sibling a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 24px 26px; background: #fff; border: 1px solid var(--sd-line); border-radius: 14px; text-decoration: none; }
.sd-page .ct-sibling a:hover { text-decoration: none; }
.sd-page .ct-sibling .ct-sib-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: #eaf2ff; color: #0057d9; font-size: 19px; }
.sd-page .ct-sibling strong { display: block; font-size: 16px; color: var(--sd-ink); }
.sd-page .ct-sibling small { display: block; font-size: 13px; color: var(--sd-muted); }
.sd-page .ct-sibling .ct-sib-arrow { color: #0057d9; font-weight: 800; transition: transform .25s ease; }
.sd-page .ct-sibling a:hover { border-color: #9cbedf; box-shadow: 0 16px 34px #153d6710; }
.sd-page .ct-sibling a:hover .ct-sib-arrow { transform: translateX(5px); }

/* --- worldwide delivery note for the international city pages --- */
.sd-page .ct-globe { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.sd-page .ct-globe-art svg { width: 100%; height: auto; display: block; }
.sd-page .ct-zones { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 20px; }
.sd-page .ct-zones li { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #0b3d63; background: #e8f1fb; border-radius: 6px; padding: 6px 11px; }

/* ------------------------------------------------------------
   4. KEYFRAME DEFINITIONS
   ------------------------------------------------------------ */
@keyframes ct-sweep { to { transform: rotate(360deg); } }
@keyframes ct-ring { 0% { transform: scale(.42); opacity: .85; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes ct-halo { 0% { transform: scale(.6); opacity: .55; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes ct-pin { from { transform: translateY(0); } to { transform: translateY(-9px); } }
@keyframes ct-lane { to { stroke-dashoffset: -160; } }
@keyframes ct-rise { from { transform: scaleY(.04); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes ct-orb { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(34px, -26px, 0); } }
@keyframes ct-lit { from { opacity: .18; } to { opacity: 1; } }

/* ------------------------------------------------------------
   5. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 991px) {
  .sd-page .ct-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-page .ct-globe { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sd-page .ct-globe-art { width: min(420px, 100%); margin: 0 auto; }
  .sd-page .ct-local { padding: 30px; }
  .sd-page .ct-sibling { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575px) {
  .sd-page .ct-areas { grid-template-columns: minmax(0, 1fr); }
  .sd-page .ct-facts { gap: 10px 20px; }
  .sd-page .ct-facts li { max-width: none; }
  .sd-page .ct-local { padding: 24px 20px; }
  .sd-page .ct-table th, .sd-page .ct-table td { padding: 13px 18px; font-size: 14px; }
  .sd-page .ct-sibling a { grid-template-columns: auto 1fr; gap: 14px; padding: 20px; }
  .sd-page .ct-sibling .ct-sib-arrow { display: none; }
}

/* ------------------------------------------------------------
   6. MOTION PREFERENCES
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .sd-page .ct-sweep, .sd-page .ct-ring, .sd-page .ct-pin, .sd-page .ct-pin-halo,
  .sd-page .ct-lane, .sd-page .ct-tower, .sd-page .ct-orb, .sd-page .ct-lit { animation: none !important; }
  .sd-page .ct-tower { opacity: 1; transform: none; }
  .sd-page .ct-sibling a:hover .ct-sib-arrow { transform: none; }
}
.sd-page.sd-paused .ct-sibling a:hover .ct-sib-arrow { transform: none; }

/* ------------------------------------------------------------
   7. PRINT  -  the artwork is decorative, so it is dropped entirely.
   ------------------------------------------------------------ */
@media print {
  .sd-page .ct-bg { display: none; }
  .sd-page .ct-local, .sd-page .ct-sibling a, .sd-page .ct-areas li, .sd-page .ct-chips li { border-color: #999; }
}

.sd-page .ct-orb { animation: ct-orb 16s ease-in-out infinite alternate; animation-play-state: paused; }
/* --- window lights blinking on across the towers --- */
.sd-page .ct-lit { animation: ct-lit 5s var(--sd-delay, 0ms) ease-in-out infinite alternate; animation-play-state: paused; }

/* One rule runs every ct- loop only while the hero is on screen, so an
   off-screen hero never burns frames. */
.sd-page .ct-hero.sd-in-view .ct-sweep,
.sd-page .ct-hero.sd-in-view .ct-ring,
.sd-page .ct-hero.sd-in-view .ct-pin,
.sd-page .ct-hero.sd-in-view .ct-pin-halo,
.sd-page .ct-hero.sd-in-view .ct-lane,
.sd-page .ct-hero.sd-in-view .ct-tower,
.sd-page .ct-hero.sd-in-view .ct-orb,
.sd-page .ct-hero.sd-in-view .ct-lit { animation-play-state: running; }