/* ==========================================================================
   INVEST TELANGANA — Ecosystem
   Loaded after main.css. Scoped .ec-* so the shared system (header, footer,
   buttons, type scale, .rv motion) carries over untouched.
   --------------------------------------------------------------------------
   01  Tokens
   02  Hero
   03  The eight cards
   04  Closing band
   05  Responsive
   ========================================================================== */

.ec{
  --lg-blue:#0060E0;
  --lg-navy:#0024B4;
  --lg-green:#007028;
  --lg-green-2:#40B060;
  --lg-lime:#98D048;
  --lg-yellow:#F8C828;
  --lg-amber:#E0A800;
  --lg-red:#E80000;
  --ec-ink:#061034;
}

/* 02 ── HERO ─────────────────────────────────────────────────────────── */

.ec-hero{
  position:relative;overflow:hidden;
  padding-top:calc(var(--hdr-h) + var(--util-h) + clamp(2rem,5vw,3.6rem));
  padding-bottom:clamp(2.2rem,4.5vw,3.6rem);
  background:
    radial-gradient(64% 58% at 84% 2%,rgba(0,96,224,.11),transparent 62%),
    radial-gradient(58% 60% at 4% 96%,rgba(0,112,40,.10),transparent 64%),
    linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
}
/* the hairline grid the rest of the site uses on light grounds */
.ec-hero__grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%;
  mask-image:linear-gradient(180deg,#000,transparent 88%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 88%);
}
.ec-hero__in{
  position:relative;z-index:1;
  width:var(--shell);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(2rem,4.5vw,4.2rem);align-items:center;
}
.ec-hero__copy{display:grid;gap:clamp(1rem,1.9vw,1.4rem);justify-items:start}
.ec-hero__h{
  font-size:clamp(2.2rem,4.2vw,3.4rem);line-height:1.03;letter-spacing:-.038em;
}
/* main.css parks .mask-l > span at translateY(110%) and only the home page's
   hero timeline pulls it back — that timeline never runs here, so line one sat
   158px below a 144px clipping box and simply was not on the page. Its
   overflow:hidden also shaved Ubuntu's ascenders against the tight leading.
   Own both: the resting state is visible, and the clip box is padded out to
   clear the glyphs while staying in the same place. */
.ec-hero__h .mask-l{
  overflow:hidden;
  padding-block:.13em;margin-block:-.13em;
}
html.js .ec-hero__h .mask-l > *,
html.no-motion .ec-hero__h .mask-l > *{
  transform:none;opacity:1;
}
.ec-hero__h em{
  font-style:normal;display:block;
  background:linear-gradient(96deg,var(--lg-blue),var(--lg-navy) 44%,var(--lg-green));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.ec-hero__p{
  font-size:clamp(.98rem,.42vw + .89rem,1.1rem);line-height:1.64;
  color:var(--ink-2);max-width:58ch;
}
.ec-hero__p b{color:var(--ink);font-weight:700}

/* the photograph */
.ec-hero__panel{position:relative}
/* a soft accent bloom behind the panel, so it sits on the page rather than
   being pasted onto it */
.ec-hero__panel::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  inset:auto -6% -9% -10%;height:72%;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,96,224,.30),transparent 72%);
  filter:blur(34px);
}
.ec-hero__fig{
  position:relative;z-index:1;margin:0;
  aspect-ratio:5 / 4;overflow:hidden;
  border-radius:var(--r-lg);
  box-shadow:0 34px 70px rgba(0,36,180,.20),0 4px 16px rgba(10,12,43,.08);
}
.ec-hero__fig img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.01);
  transition:transform 1.4s var(--e-out);
}
.ec-hero__panel:hover .ec-hero__fig img{transform:scale(1.05)}
/* a gentle wash at the foot of the photograph so the caption always reads */
.ec-hero__fig::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(6,16,52,.58));
}
.ec-hero__cap{
  position:absolute;z-index:2;left:clamp(.9rem,2vw,1.3rem);bottom:clamp(.9rem,2vw,1.3rem);
  display:flex;align-items:baseline;gap:.55rem;
  padding:.6rem 1rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.ec-hero__cap b{
  font-family:var(--f-head);font-weight:700;font-size:1.02rem;
  letter-spacing:-.02em;color:#fff;
}
.ec-hero__cap span{
  font-family:var(--f-head);font-size:.63rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.86);
}

/* the eight names, as a chain under both columns */
.ec-hero__foot{
  position:relative;z-index:1;
  width:var(--shell);margin-inline:auto;
  padding-top:clamp(1.6rem,3.2vw,2.6rem);
}
.ec-chain{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:.5rem clamp(.5rem,1.2vw,.8rem);
}
.ec-chain a{
  font-family:var(--f-head);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
  padding:.46rem .85rem;border-radius:var(--r-pill);
  border:1px solid var(--line);background:rgba(255,255,255,.72);
  transition:color .3s,border-color .3s,background .3s,transform .35s var(--e-out);
}
.ec-chain a:hover{
  color:var(--c,var(--lg-navy));border-color:var(--c,var(--lg-navy));
  background:#fff;transform:translateY(-2px);
}

/* 03 ── THE EIGHT CARDS ──────────────────────────────────────────────── */

.ec-list{background:var(--paper);overflow:hidden}
.ec-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.6rem);
}

.ec-card{
  position:relative;overflow:hidden;isolation:isolate;
  display:grid;grid-template-rows:auto auto 1fr auto;
  gap:clamp(.8rem,1.5vw,1.1rem);
  padding:clamp(1.4rem,2.6vw,2.1rem);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--paper);
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-out),border-color .4s;
}
/* the accent rule along the top */
.ec-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--c,var(--lg-blue)),transparent 78%);
}
/* a soft wash of the accent, following the cursor */
.ec-card::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,70%) var(--my,0%),
             color-mix(in srgb,var(--c,var(--lg-blue)) 12%,transparent),transparent 68%);
  opacity:0;transition:opacity .45s var(--e-out);
}
.ec-card:hover{
  transform:translateY(-6px);box-shadow:var(--sh-3);border-color:transparent;
}
.ec-card:hover::after{opacity:1}

/* The logo tile — identical on every card, so eight marks ranging from 0.90
   to 2.82 in aspect ratio all read at the same weight. The tile is white
   because three of the supplied files are opaque on pure white, which then
   blends away instead of showing a box on the card. */
.ec-card__tile{
  
}

/* Sized off the tile's own height rather than a fixed pixel value, so the cap
   shrinks with the tile through its clamp(). --s is a per-logo optical nudge
   and is wrapped in min() so it can only ever reduce the mark: no value can
   push a logo outside its box, which is what let the taller lockups spill.
   A percentage height cannot be used here — it resolves as auto against a
   centred grid item, and max-height:100% then never clamps. */
.ec-card__logo{
  display:block; height: 75px;
}
/* used only by a body whose logo has not been supplied yet */
.ec-card__wordmark{
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(1.3rem,2.2vw,1.75rem);letter-spacing:-.03em;
  color:var(--c,var(--lg-blue));white-space:nowrap;
}
.ec-card__role{
  display: none;
  font-family:var(--f-head);font-size:.63rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-4);
}
.ec-card__p{
  font-size:clamp(.92rem,.4vw + .84rem,1rem);line-height:1.66;color:var(--ink-2);
}
.ec-card__foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding-top:.35rem;
}
.ec-card__go{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.72rem 1.25rem;border-radius:var(--r-pill);
  font-family:var(--f-body);font-size:.87rem;font-weight:700;letter-spacing:-.01em;
  color:#fff;background:var(--c,var(--lg-blue));
  transition:transform .35s var(--e-out),box-shadow .35s var(--e-out),filter .3s;
}
.ec-card__go svg{width:14px;height:14px;transition:transform .35s var(--e-out)}
.ec-card__go:hover{transform:translateY(-2px);filter:brightness(1.08);
  box-shadow:0 12px 28px color-mix(in srgb,var(--c,var(--lg-blue)) 34%,transparent)}
.ec-card__go:hover svg{transform:translate(3px,-3px)}
.ec-card__host{
  display: none;
  font-family:var(--f-head);font-size:.66rem;letter-spacing:.08em;
  color:var(--ink-4);word-break:break-all;text-align:right;
}

/* 04 ── CLOSING BAND ─────────────────────────────────────────────────── */

.ec-cta{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,var(--lg-navy) 0%,#0742B8 46%,var(--lg-blue) 100%);
  isolation:isolate;
}
.ec-cta::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(50% 60% at 84% 10%,rgba(248,200,40,.24),transparent 62%),
    radial-gradient(46% 56% at 8% 92%,rgba(64,176,96,.26),transparent 64%);
}
.ec-cta .shell{position:relative;z-index:1}
.ec-cta__in{display:grid;gap:1.2rem;justify-items:start;max-width:62ch}
.ec-cta__h{font-size:clamp(1.9rem,3.8vw,3.2rem);line-height:1.04;letter-spacing:-.036em;color:#fff}
.ec-cta__h em{font-style:normal;color:var(--lg-yellow)}
.ec-cta__p{color:rgba(255,255,255,.85);font-size:clamp(1rem,.5vw + .9rem,1.12rem);line-height:1.62}
.ec-cta__row{display:flex;gap:.75rem;flex-wrap:wrap;padding-top:.3rem}
.ec-cta .btn--out{color:#fff;border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.08)}
.ec-cta .btn--out:hover{background:#fff;color:var(--lg-navy);border-color:#fff}

/* 05 ── RESPONSIVE ───────────────────────────────────────────────────── */

@media (max-width:980px){
  .ec-hero__in{grid-template-columns:minmax(0,1fr);gap:clamp(1.8rem,4vw,2.6rem)}
  .ec-hero__panel{max-width:560px;width:100%}
  .ec-hero__fig{aspect-ratio:16 / 10}
}

@media (max-width:900px){
  .ec-grid{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:560px){
  .ec-card__foot{flex-direction:column;align-items:flex-start;gap:.7rem}
  .ec-card__host{text-align:left}
  .ec-card__go{width:100%;justify-content:center}
}

html.no-motion .ec-card{transform:none}
html.no-motion .ec-card::after{display:none}