/* ============================================================================
   KURELA — "BUILD SOMETHING REAL" LANDING PAGE
   ----------------------------------------------------------------------------
   Built to the approved full-page mockup (2026-09-22): light #f6f9ff page,
   navy ink, blue→violet gradient headlines, the dark partner / journey / CTA
   bands, product-tinted ecosystem tiles, and the pricing trio.

   TYPE: DM Sans throughout, matched to the mockup's letterforms — circular
   bowls, double-storey 'a', single-storey 'g' with an open hook, slanted 't'
   top and tight tracking. (Inter, used in the first pass, is a grotesque:
   too narrow and too closed for this design.) The handwritten Caveat
   annotations were removed on the user's direction 2026-09-23.

   The HERO runs on the real photograph supplied by the user
   (assets/hero-student.jpg): full-bleed, student right of centre, copy on
   the bright wall at the left. The remaining photo slots (project card
   headers, industry tiles, testimonial avatars, the campus block) still
   carry designed gradient treatments — the mockup's own images are
   667px-wide webp, too soft to reuse — and are ready to swap for real
   photography the same way the hero was.
   ========================================================================== */

:root{
  --page:#f6f9ff;
  --ink:#101733;
  --ink-soft:#4c5872;
  --ink-faint:#8b96ad;
  --blue:#2563eb;
  --blue-deep:#1d4fd7;
  --violet:#7c3aed;
  --navy:#0b1026;
  --navy2:#141b3f;
  --border:#e5eaf6;
  --card:#ffffff;
  --r-lg:18px;
  --r-md:13px;
  --shadow:0 10px 30px -18px rgba(16,23,51,.18);
  --shadow-lg:0 24px 60px -28px rgba(16,23,51,.28);
  --ease:170ms cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--page);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit;}
input{font-family:inherit;}
i{line-height:1;}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px;}

.blue{color:var(--blue-deep);}
.grad{background:linear-gradient(92deg,#2563eb 10%,#7c3aed 85%);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:700;border-radius:12px;padding:11px 20px;
  transition:transform var(--ease),box-shadow var(--ease),background var(--ease),border-color var(--ease);
  white-space:nowrap;
}
.btn.primary{background:var(--blue);color:#fff;box-shadow:0 10px 24px -10px rgba(37,99,235,.55);}
.btn.primary:hover{background:var(--blue-deep);transform:translateY(-1px);}
.btn.ghost{background:#fff;border:1.5px solid #d9e2f6;color:var(--blue-deep);}
.btn.ghost:hover{border-color:#b8cbf5;box-shadow:var(--shadow);}
.btn.outline{border:1.5px solid rgba(255,255,255,.35);color:#fff;}
.btn.outline:hover{background:rgba(255,255,255,.08);}
.btn.lg{padding:13px 24px;font-size:14.5px;}
.btn.sm{padding:9px 16px;font-size:12.5px;border-radius:10px;}
.btn.block{width:100%;justify-content:center;margin-top:16px;}

/* ===================== NAVBAR ===================== */
/* Dark masthead, matching kloudcourse.in: the bar runs edge to edge, the logo
   sits flush against the left with no gutter in front of it, and the links
   start immediately after it rather than centring in the remaining space. */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(8,8,16,.94);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav .wrap{max-width:none;padding:0 24px 0 0;}
.nav-in{display:flex;align-items:center;gap:18px;height:72px;}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
/* The supplied logo carries its own wordmark on its own dark field, so it
   stands alone in the bar as a plate — no crop, no recolour, no text beside
   it that would print the brand name twice. */
.brand-mark{height:44px;width:auto;flex:0 0 auto;display:block;}

/* One unbroken row: nothing in the bar is allowed to wrap, so the links
   share a single baseline with the brand and the buttons. */
.nav-links{display:flex;align-items:center;gap:1px;margin-right:auto;white-space:nowrap;}
.nav-links > a{
  font-size:13.5px;font-weight:600;color:#dfe3f2;white-space:nowrap;
  padding:9px 11px;border-radius:10px;line-height:1;
  transition:background var(--ease),color var(--ease);
}
.nav-links > a:hover{background:rgba(255,255,255,.08);color:#fff;}

/* Plans dropdown */
.plans-drop{position:relative;}
.plans-btn{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:700;color:#cfd8ff;
  border:1.5px solid rgba(255,255,255,.18);border-radius:11px;padding:8px 13px;
  background:rgba(255,255,255,.06);
  transition:border-color var(--ease),background var(--ease),color var(--ease);
}
.plans-btn:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.12);color:#fff;}
.plans-btn .fa-chevron-down{font-size:10px;transition:transform var(--ease);}
.plans-drop.open .fa-chevron-down{transform:rotate(180deg);}
.new-tag{
  font-size:9px;font-weight:800;letter-spacing:.5px;color:#fff;
  background:linear-gradient(92deg,#16a34a,#22c55e);border-radius:6px;padding:2.5px 6px;
}
.plans-panel{
  position:absolute;right:-90px;top:calc(100% + 12px);width:460px;
  background:#fff;border:1px solid var(--border);border-radius:20px;
  box-shadow:0 34px 90px -24px rgba(16,23,51,.35);padding:18px 18px 10px;
  opacity:0;pointer-events:none;translate:0 -8px;transition:opacity var(--ease),translate var(--ease);
}
.plans-drop.open .plans-panel{opacity:1;pointer-events:auto;translate:0 0;}
.pp-head{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800;padding:2px 8px 12px;}
.pp-new{font-size:9.5px;font-weight:800;color:#fff;background:var(--blue);border-radius:99px;padding:3px 9px;letter-spacing:.4px;}
.pp-all{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--blue-deep);}
.pp-row{
  display:flex;align-items:center;gap:14px;padding:13px 10px;border-radius:14px;
  transition:background var(--ease);
}
.pp-row:hover{background:#f3f7ff;}
.pp-row + .pp-row{border-top:1px solid #f0f3fb;}
.pp-ico{width:44px;height:44px;border-radius:13px;flex:0 0 44px;display:grid;place-items:center;font-size:17px;}
.pp-ico.blue{background:#e7efff;color:var(--blue);}
.pp-ico.violet{background:#f1e9ff;color:var(--violet);}
.pp-ico.navy{background:#e8ecfb;color:#1e3a8a;}
.pp-body{flex:1;}
.pp-body b{display:block;font-size:14.5px;}
.pp-body small{font-size:12px;color:var(--ink-faint);}
.pp-price{text-align:right;line-height:1.15;}
.pp-price small{display:block;font-size:11px;color:var(--ink-faint);}
.pp-price b{font-size:16px;}
.pp-row > i{color:var(--ink-faint);font-size:13px;}

.nav-cta{display:flex;align-items:center;gap:10px;flex:0 0 auto;white-space:nowrap;}
.icon-btn{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  color:#dfe3f2;font-size:15px;transition:background var(--ease),color var(--ease);
}
.icon-btn:hover{background:rgba(255,255,255,.1);color:#fff;}

/* The outline button has to read against the dark bar, not the light page. */
.nav-cta .btn.ghost{
  background:transparent;color:#eef1fb;border-color:rgba(255,255,255,.24);
}
.nav-cta .btn.ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);color:#fff;}

/* ===================== HERO =================================================
   The mockup's hero is one photograph, full-bleed: a student building at a
   laptop, bright wall on the left. The copy sits ON that wall — so the veil
   below only lifts the left third, leaving the student, the window light and
   the library depth untouched. No card, no frame; the page opens with a room.
   ========================================================================== */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border);isolation:isolate;}
.hero-photo{
  position:absolute;inset:0;z-index:0;
  background:url('assets/hero-student.jpg') center right/cover no-repeat;
}
/* Left-weighted wash: opaque where the words are, clear where the photo is. */
.hero-veil{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(96deg,
      rgba(246,249,255,.97) 0%,
      rgba(246,249,255,.94) 26%,
      rgba(243,247,255,.72) 41%,
      rgba(240,246,255,.26) 54%,
      rgba(255,255,255,0) 66%),
    linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 22%);
}
.hero-in{position:relative;z-index:2;display:flex;align-items:center;gap:24px;min-height:600px;padding-top:66px;padding-bottom:72px;}
.hero-copy{max-width:560px;padding-left:22px;}
.hero h1{font-size:52px;line-height:1.06;font-weight:900;letter-spacing:-1.6px;margin:16px 0 18px;}
.lede{font-size:16px;color:var(--ink-soft);max-width:52ch;}
.hero-cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap;}
.hero-feats{display:flex;gap:26px;margin-top:36px;flex-wrap:wrap;}
.hero-feats span{
  display:flex;align-items:center;gap:10px;
  font-size:12px;font-weight:700;color:var(--ink);line-height:1.25;
}
.hero-feats i{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.9);border:1px solid var(--border);box-shadow:var(--shadow);
  color:var(--blue);font-size:14px;backdrop-filter:blur(4px);
}

/* Floating chips read against the photo, so they keep a solid card. */
.hero-art{position:absolute;inset:0;z-index:3;pointer-events:none;}
.ha-chip{
  position:absolute;background:rgba(255,255,255,.96);border:1px solid var(--border);
  border-radius:14px;padding:10px 15px;box-shadow:var(--shadow-lg);line-height:1.25;
  backdrop-filter:blur(6px);
}
.ha-chip b{display:block;font-size:13px;}
.ha-chip small{font-size:11px;color:var(--ink-faint);}
.ha-chip.bottom{bottom:86px;right:300px;}
.ha-chip.bottom small{display:block;}
.ha-chip.bottom b{color:#15803d;}
.ha-chip.bottom .fa-circle-check{color:#22c55e;}

/* ===================== PARTNERS =============================================
   Read off the mockup: a navy→purple band, the label in title case (not
   letterspaced caps), hairline dividers between each credential, and the
   four proof points as translucent circular badges with the reading stacked
   over its qualifier — not pill chips with inline text.
   ========================================================================== */
.partners{
  background:linear-gradient(92deg,#0d1f3f 0%,#152150 34%,#2b1f63 68%,#492a86 100%);
  color:#fff;
}
.partners-in{display:flex;align-items:center;gap:30px;padding:22px 28px;flex-wrap:wrap;}
.pt-left small{
  display:block;font-size:12px;font-weight:500;color:#9fb0d8;letter-spacing:.1px;
  margin-bottom:10px;
}
.pt-logos{display:flex;align-items:center;gap:26px;}
.pt-logo b{display:block;font-size:26px;font-weight:800;letter-spacing:-.7px;line-height:1.05;color:#fff;}
.pt-logo span{display:block;font-size:11.5px;color:#93a4cf;margin-top:5px;}

/* hairline rules, as in the mockup */
.pt-div{width:1px;height:46px;background:rgba(255,255,255,.16);flex:0 0 1px;display:block;}
.pt-div.tall{height:58px;margin-left:4px;}

.pt-stats{display:flex;align-items:center;gap:30px;margin-left:auto;flex-wrap:wrap;}
.pt-stat{display:flex;align-items:center;gap:13px;}
.pt-ico{
  width:50px;height:50px;border-radius:50%;flex:0 0 50px;
  display:grid;place-items:center;font-size:19px;
  background:rgba(255,255,255,.07);
}
/* the icon tint travels with the band, blue at the navy end, violet at the purple */
.pt-ico.b1{color:#5ea8ff;}
.pt-ico.b2{color:#6e9bff;}
.pt-ico.b3{color:#9b8cff;}
.pt-ico.b4{color:#b18cff;}
.pt-stat em{font-style:normal;line-height:1.35;}
.pt-stat em b{display:block;font-size:14px;font-weight:700;color:#fff;}
.pt-stat em{font-size:12.5px;color:#a3b2d9;}

/* ===================== SECTIONS ===================== */
.sec{padding:64px 0;}
.sec.tint{background:linear-gradient(180deg,#f1f5ff,#f7faff);}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;margin-bottom:30px;flex-wrap:wrap;}
.sec-head h2{font-size:30px;font-weight:900;letter-spacing:-.8px;}
.sec-head p{color:var(--ink-soft);margin-top:8px;max-width:72ch;}

/* ---- ecosystem tiles ---- */
.eco-row{display:grid;grid-template-columns:repeat(9,1fr);gap:12px;}
.eco-tile{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-md);
  padding:20px 10px 16px;text-align:center;box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  transition:transform var(--ease),box-shadow var(--ease);
}
.eco-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
/* Real brand marks where the product has one. KloudExam, KloudLyra and
   KloudApprentice have no logo yet — Kurela's own products page represents
   them with two-letter monograms, so this does the same rather than invent
   a mark. */
.eco-mk{
  height:34px;display:flex;align-items:center;justify-content:center;
  margin-bottom:3px;
}
.eco-mk img{max-height:34px;max-width:48px;object-fit:contain;display:block;border-radius:9px;}
/* The KloudCourse artwork ships on its own dark field, so it sits in the tile
   as a logo plate rather than being cropped or recoloured. */
.eco-mk.plate img{max-width:104px;max-height:26px;border-radius:6px;}
.eco-mk.mono{
  min-width:34px;padding:0 9px;border-radius:10px;
  background:#efedf8;color:#6e3fc0;
  font-size:13px;font-weight:800;letter-spacing:-.3px;
}
.eco-tile b{font-size:12.5px;line-height:1.2;}
.eco-tile small{font-size:10.5px;color:var(--ink-faint);line-height:1.3;}
.t-blue{background:#f2f7ff;}   .t-blue i{color:#2563eb;}
.t-indigo{background:#f2f3ff;} .t-indigo i{color:#4f46e5;}
.t-sky{background:#f0f7ff;}    .t-sky i{color:#0284c7;}
.t-red{background:#fff3f4;}    .t-red i{color:#dc2626;}
.t-violet{background:#f7f2ff;} .t-violet i{color:#7c3aed;}
.t-blue2{background:#f0f6ff;}  .t-blue2 i{color:#1d4ed8;}
.t-purple{background:#f9f2ff;} .t-purple i{color:#9333ea;}
.t-green{background:#f1fbf4;}  .t-green i{color:#16a34a;}
.t-amber{background:#fff8ee;}  .t-amber i{color:#b45309;}

/* ---- build path ---- */
.path-grid{display:block;}
.path-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;}
.path{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-md);
  padding:15px 13px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:6px;
  transition:transform var(--ease),box-shadow var(--ease);
}
.path:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.path i{font-size:21px;margin-bottom:4px;}
.path b{font-size:13px;}
.path small{font-size:11px;color:var(--ink-faint);}
.c-violet{color:#7c3aed;} .c-teal{color:#0d9488;} .c-blue{color:#2563eb;}
.c-indigo{color:#4f46e5;} .c-slate{color:#475569;} .c-amber{color:#d97706;}
.c-purple{color:#9333ea;} .c-green{color:#16a34a;} .c-red{color:#dc2626;}
.c-pink{color:#db2777;}

/* ---- trending domains (the aside beside the build paths) ---------------- */

/* the trending domains use the SAME tile as the build paths beside them —
   one vocabulary for "a domain you can pick", wherever it appears. */

/* ---- featured projects ---- */
.proj-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.proj{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:transform var(--ease),box-shadow var(--ease);
}
.proj:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.proj-img{position:relative;height:130px;overflow:hidden;background:#dbe4f6;}
.proj-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 500ms cubic-bezier(.4,0,.2,1);}
.proj:hover .proj-img img{transform:scale(1.05);}
/* a soft scrim so the category tag stays readable on any photograph */
.proj-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,14,36,.42) 0%,rgba(9,14,36,.05) 45%,rgba(9,14,36,0) 100%);
}
.proj-tag{
  position:absolute;top:10px;left:10px;z-index:2;
  font-size:10px;font-weight:800;letter-spacing:.4px;border-radius:99px;padding:4px 11px;color:#fff;
}
.t-tblue{background:#2563eb;} .t-tgreen{background:#16a34a;} .t-tamber{background:#ca8a04;}
.t-tpink{background:#db2777;} .t-tindigo{background:#4338ca;}
.proj-body{padding:16px 16px 14px;display:flex;flex-direction:column;flex:1;}
.proj-body h4{font-size:14.5px;font-weight:800;line-height:1.3;}
.proj-body > p{font-size:12px;color:var(--ink-soft);margin:7px 0 11px;flex:0;}
.proj-stack{display:flex;flex-wrap:wrap;gap:6px;}
.proj-stack span{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:700;color:var(--ink-soft);
  background:#f1f5ff;border-radius:99px;padding:4px 10px;
}
.proj-meta{display:flex;gap:14px;margin-top:11px;font-size:11px;color:var(--ink-soft);font-weight:600;}
.proj-meta i{color:var(--blue);}
.proj-foot{
  margin-top:auto;padding-top:12px;border-top:1px solid #f0f3fb;
  display:flex;align-items:center;justify-content:space-between;
}
.lvl{font-size:11.5px;font-weight:800;color:#16a34a;}
.lvl.adv{color:#d97706;}
.go{color:var(--blue);font-size:14px;}

/* ---- plans ---- */
.plans-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch;}
.plan{
  position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  padding:24px;box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.badge{
  position:absolute;top:18px;right:18px;
  font-size:10.5px;font-weight:800;color:#fff;border-radius:99px;padding:5px 12px;
  background:linear-gradient(92deg,#7c3aed,#a855f7);
}
.plan-head{display:flex;align-items:center;gap:13px;}
.pl-ico{width:52px;height:52px;border-radius:50%;flex:0 0 52px;display:grid;place-items:center;font-size:19px;}
.pl-ico.blue{background:#e7efff;color:var(--blue);}
.pl-ico.violet{background:#f1e9ff;color:var(--violet);}
.pl-ico.navy{background:#e8ecfb;color:#1e3a8a;}
.plan-head b{font-size:16.5px;}
.plan-head small{display:block;font-size:11.5px;color:var(--ink-faint);}
.plan-price{margin:20px 0 6px;line-height:1.1;}
.plan-price small{font-size:12px;color:var(--ink-faint);}
.plan-price b{display:block;font-size:38px;font-weight:900;letter-spacing:-1px;}
.plan-price span{font-size:12px;color:var(--ink-faint);}
.plan-price.custom b{font-size:26px;margin-top:2px;}
.plan ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:9px;flex:1;}
.plan li{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--ink-soft);font-weight:500;}
.plan li i{color:var(--blue);margin-top:3px;font-size:12px;}
.plan ul.green li i{color:#16a34a;}

/* ===================== JOURNEY ==============================================
   Eight steps that read as one continuous path: a gradient rail runs behind
   the row, each node sits on it inside a glowing halo, and the step number
   rides the node as a badge. Hovering lifts a node and brightens its halo,
   so the journey feels traversable rather than printed.
   ========================================================================== */
.journey{
  position:relative;overflow:hidden;
  background:
    radial-gradient(620px 320px at 84% 0%,rgba(124,58,237,.42),transparent 62%),
    radial-gradient(520px 300px at 8% 100%,rgba(37,99,235,.32),transparent 60%),
    linear-gradient(120deg,#080d28 0%,#111842 58%,#22165a 100%);
  color:#fff;padding:62px 0 66px;
}
/* faint engineering grid, so the band has texture under the glow */
.journey::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000 0%,transparent 100%);
          mask-image:radial-gradient(70% 60% at 50% 40%,#000 0%,transparent 100%);
}
.jr-head{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;}
.jr-head h2{font-size:31px;font-weight:900;letter-spacing:-.8px;}
.jr-head p{color:#aeb8e4;margin-top:9px;}

.jr-steps{
  position:relative;display:grid;grid-template-columns:repeat(8,1fr);
  gap:8px;margin-top:46px;
}
/* the rail the nodes sit on — stops at the first and last node centres */
.jr-rail{
  position:absolute;left:6.25%;right:6.25%;top:31px;height:2px;
  background:linear-gradient(90deg,#3b82f6 0%,#6366f1 45%,#a855f7 100%);
  opacity:.5;border-radius:2px;
}
.jr-rail::after{
  content:'';position:absolute;inset:-1px 0;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  width:28%;filter:blur(1px);
  animation:jrflow 5.5s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes jrflow{0%{transform:translateX(-30%);opacity:0;}
  12%{opacity:.85;} 88%{opacity:.85;} 100%{transform:translateX(390%);opacity:0;}}

.jr{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;}
.jr-ico{
  position:relative;width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;font-size:19px;color:#fff;margin-bottom:16px;
  background:linear-gradient(145deg,#3b82f6,#7c3aed);
  box-shadow:0 0 0 5px rgba(99,102,241,.14),0 0 0 11px rgba(99,102,241,.07),
             0 16px 34px -12px rgba(59,130,246,.75);
  transition:transform var(--ease),box-shadow var(--ease);
}
/* the step number rides the node */
.jr b{
  position:absolute;top:44px;left:50%;transform:translateX(-50%);
  font-size:10.5px;font-weight:800;letter-spacing:.4px;color:#cfd9ff;
  background:#131a44;border:1px solid rgba(255,255,255,.16);
  border-radius:99px;padding:2px 9px;z-index:2;
}
.jr u{text-decoration:none;font-size:13.5px;font-weight:800;margin-top:6px;}
.jr small{font-size:11px;color:#a9b2da;line-height:1.4;max-width:16ch;}
.jr:hover .jr-ico{
  transform:translateY(-4px) scale(1.06);
  box-shadow:0 0 0 5px rgba(147,197,253,.22),0 0 0 13px rgba(147,197,253,.10),
             0 22px 44px -12px rgba(96,165,250,.9);
}

/* ===================== TECH / WORK ===================== */
/* Each platform keeps its own brand colour (--brand, set inline): a tinted
   chip at rest, and on hover the card takes that colour's glow — twelve logos
   read as twelve technologies, not twelve grey boxes. */
.tech-row{display:grid;grid-template-columns:repeat(12,1fr);gap:10px;}
.tech{
  position:relative;background:#fff;border:1px solid var(--border);
  border-radius:var(--r-md);padding:18px 6px 14px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:11px;font-weight:700;box-shadow:var(--shadow);
  transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease);
}
.tech i{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  font-size:21px;color:var(--brand);
  background:color-mix(in srgb,var(--brand) 12%,#fff);
  transition:transform var(--ease),background var(--ease);
}
.tech em{font-style:normal;text-align:center;line-height:1.25;}
.tech:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--brand) 45%,#fff);
  box-shadow:0 18px 38px -16px color-mix(in srgb,var(--brand) 62%,transparent);
}
.tech:hover i{transform:scale(1.08);background:color-mix(in srgb,var(--brand) 20%,#fff);}

.work-wrap{position:relative;}
/* Each deliverable owns a colour (--brand, inline) and says plainly that it is
   included — the row should read as a kit you walk away with, not a feature
   list. */
.work-row{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;}
.work{
  position:relative;overflow:hidden;background:#fff;border:1px solid var(--border);
  border-radius:var(--r-md);padding:20px 10px 16px;
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  box-shadow:var(--shadow);color:inherit;
  transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease);
}
.work::before{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--brand);opacity:0;transition:opacity var(--ease);
}
.work-ico{
  width:48px;height:48px;border-radius:15px;display:grid;place-items:center;
  font-size:19px;color:var(--brand);margin-bottom:4px;
  background:color-mix(in srgb,var(--brand) 12%,#fff);
  transition:transform var(--ease),background var(--ease),color var(--ease);
}
.work b{font-size:12.5px;line-height:1.25;}
.work small{font-size:10.5px;color:var(--ink-faint);}
.work-chk{
  margin-top:8px;font-style:normal;font-size:9.5px;font-weight:800;
  letter-spacing:.3px;text-transform:uppercase;color:var(--brand);
  display:inline-flex;align-items:center;gap:4px;opacity:.75;
}
.work:hover{
  transform:translateY(-5px);border-color:color-mix(in srgb,var(--brand) 40%,#fff);
  box-shadow:0 20px 40px -18px color-mix(in srgb,var(--brand) 60%,transparent);
}
.work:hover::before{opacity:1;}
.work:hover .work-ico{transform:scale(1.07);background:var(--brand);color:#fff;}

/* ===================== INDUSTRIES ===========================================
   Each industry is a photograph with a dark scrim, not a coloured block —
   the sector should be recognisable before the label is read.
   ========================================================================== */
.ind-row{display:grid;grid-template-columns:repeat(11,1fr);gap:10px;}
.ind{
  position:relative;border-radius:var(--r-md);overflow:hidden;height:150px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:8px;padding:12px 8px;color:#fff;text-align:center;
  box-shadow:var(--shadow);isolation:isolate;
  transition:transform var(--ease),box-shadow var(--ease);
}
.ind:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.ind img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform 600ms cubic-bezier(.4,0,.2,1);
}
.ind:hover img{transform:scale(1.08);}
.ind::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(9,14,36,.18) 0%,rgba(9,14,36,.52) 52%,rgba(9,14,36,.86) 100%);
}
.ind i{font-size:20px;opacity:.95;text-shadow:0 2px 10px rgba(0,0,0,.45);}
.ind b{font-size:11px;font-weight:700;line-height:1.25;text-shadow:0 1px 6px rgba(0,0,0,.6);}

/* ===================== TESTIMONIALS ===================== */
.test-wrap{display:grid;grid-template-columns:300px 1fr;gap:34px;align-items:start;}
.test-left h2{font-size:30px;font-weight:900;letter-spacing:-.7px;line-height:1.15;}
.test-left p{color:var(--ink-soft);margin-top:12px;}
.test-nav{display:flex;gap:10px;margin-top:22px;}
.round{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--border);color:var(--blue);
  box-shadow:var(--shadow);transition:transform var(--ease);
}
.round:hover{transform:translateY(-2px);}
.test-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.test{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  padding:20px;box-shadow:var(--shadow);display:flex;gap:15px;
}
.avatar{
  width:62px;height:62px;border-radius:50%;flex:0 0 62px;
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:19px;
}
.a-blue{background:linear-gradient(140deg,#2563eb,#0ea5e9);}
.a-violet{background:linear-gradient(140deg,#7c3aed,#c026d3);}
.a-teal{background:linear-gradient(140deg,#0d9488,#22c55e);}
.q{color:#bcd0fb;font-size:17px;}
.test p{font-size:12.5px;color:var(--ink-soft);margin:6px 0 10px;line-height:1.55;}
.test b{font-size:13px;display:block;}
.test small{font-size:11.5px;color:var(--ink-faint);}
.stars{display:block;color:#f59e0b;font-size:12px;letter-spacing:2px;margin-top:5px;}

/* ===================== COLLEGES ===================== */
.col-wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center;}
.col-left h2{font-size:30px;font-weight:900;letter-spacing:-.7px;}
.col-left > p{color:var(--ink-soft);margin:12px 0 20px;max-width:52ch;}
.col-chips{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:26px;}
.col-chips span{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-md);
  padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;
  text-align:center;box-shadow:var(--shadow);
}
.col-chips i{font-size:17px;color:var(--blue);margin-bottom:4px;}
.col-chips b{font-size:11px;line-height:1.25;}
.col-chips small{font-size:9.5px;color:var(--ink-faint);}
.col-art{position:relative;}
.col-photo{
  width:100%;height:300px;object-fit:cover;object-position:center;
  border-radius:24px;display:block;box-shadow:var(--shadow-lg);
}

/* ===================== CTA ===================== */
.cta{
  background:
    radial-gradient(500px 260px at 80% 20%,rgba(124,58,237,.5),transparent 60%),
    linear-gradient(100deg,#0a0f2b 0%,#1c2260 55%,#372074 100%);
  color:#fff;
}
/* The skyline sits at the right edge and dissolves leftward into the gradient,
   so the band reads as one image rather than a photo pasted onto a colour. */
.cta{position:relative;overflow:hidden;}
.cta-art{
  position:absolute;inset:0 0 0 34%;z-index:0;
  background:url('assets/cta-skyline.jpg?v=1') center 30%/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 36%,#000 74%);
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 36%,#000 74%);
  opacity:.7;
}
.cta-in{position:relative;z-index:1;display:flex;align-items:center;gap:30px;
  padding-top:64px;padding-bottom:64px;}
.cta-copy{margin:0;text-align:left;max-width:560px;padding-left:22px;}
.cta-copy h2{font-size:34px;font-weight:900;letter-spacing:-.8px;}
.cta-copy p{color:#c1c9ef;margin:12px 0 24px;}
.cta-btns{display:flex;gap:12px;justify-content:flex-start;flex-wrap:wrap;}

/* ===================== FOOTER ===================== */
.foot{background:#090d24;color:#aab3d6;}
.foot-grid{
  display:grid;grid-template-columns:1.3fr .8fr 1fr .8fr 1.2fr;gap:34px;
  padding-top:52px;padding-bottom:40px;
}
.fo-brand p{font-size:13px;margin:16px 0 18px;max-width:30ch;}
.socials{display:flex;gap:10px;}
.socials a{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:#fff;font-size:14px;
  transition:background var(--ease);
}
.socials a:hover{background:var(--blue);}
.fo-col{display:flex;flex-direction:column;gap:10px;}
.fo-col b{color:#fff;font-size:14px;margin-bottom:6px;}
.fo-col a{font-size:13px;transition:color var(--ease);}
.fo-col a:hover{color:#fff;}
.fo-news b{color:#fff;font-size:14px;}
.fo-news p{font-size:12.5px;margin:12px 0 14px;}
.news-form{display:flex;gap:8px;}
.news-form input{
  flex:1;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:12px 15px;font-size:13px;color:#fff;outline:none;min-width:0;
}
.news-form input::placeholder{color:#7d87b4;}
.news-form button{
  width:46px;border-radius:12px;background:var(--blue);color:#fff;font-size:15px;
  transition:background var(--ease);
}
.news-form button:hover{background:var(--blue-deep);}
.foot-base{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.09);
  padding-top:22px;padding-bottom:26px;font-size:12.5px;color:#7d87b4;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1180px){
  .eco-row{grid-template-columns:repeat(5,1fr);}
  .proj-row{grid-template-columns:repeat(3,1fr);}
  .tech-row{grid-template-columns:repeat(6,1fr);}
  .ind-row{grid-template-columns:repeat(6,1fr);}
  .work-row{grid-template-columns:repeat(4,1fr);padding-right:0;}
  .jr-steps{grid-template-columns:repeat(4,1fr);row-gap:34px;}
  .jr-rail{display:none;}
  .path-tiles{grid-template-columns:repeat(4,1fr);}
  .hero-note{display:none;}
  .foot-grid{grid-template-columns:1fr 1fr 1fr;}
}
@media (max-width:960px){
  .nav-links{display:none;}
  /* Narrow: the photograph becomes atmosphere behind the copy rather than a
     composition beside it — so the veil covers the full width, and the
     floating chips and handwriting (which need the photo's empty areas)
     step aside instead of landing on the words. */
  .hero-in{flex-direction:column;align-items:flex-start;min-height:0;}
  .hero h1{font-size:40px;}
  .hero-photo{background-position:72% center;}
  .hero-veil{
    background:
      linear-gradient(180deg,rgba(246,249,255,.97) 0%,rgba(246,249,255,.93) 62%,rgba(246,249,255,.88) 100%);
  }
  .hero-art{display:none;}
  .test-wrap,.col-wrap{grid-template-columns:1fr;}
  .path-tiles{grid-template-columns:repeat(3,1fr);}
  .plans-row{grid-template-columns:1fr;}
  .test-cards{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .wrap{padding:0 18px;}
  .hero h1{font-size:33px;letter-spacing:-1px;}
  .eco-row{grid-template-columns:repeat(3,1fr);}
  .path-tiles{grid-template-columns:repeat(2,1fr);}
  .proj-row{grid-template-columns:1fr;}
  .tech-row,.ind-row{grid-template-columns:repeat(3,1fr);}
  .work-row{grid-template-columns:repeat(2,1fr);}
  .jr-steps{grid-template-columns:repeat(2,1fr);}
  .jr-rail{display:none;}
  .col-chips{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr;gap:24px;}
  .nav-cta .ghost{display:none;}
  .sec-head h2,.jr-head h2{font-size:24px;}
}