/* ============================================================================
   HERO — home page opening screen
   ----------------------------------------------------------------------------
   Loaded by : index.html
   Depends on: base/tokens.css

   Two columns: headline + CTAs on the left, the Elyco brand mark on the right.

   BACKGROUND
   The right-hand tint is built from soft radial gradients that reach full
   transparency before any viewport edge, plus a blurred ellipse and a masked
   dot grid. Nothing here has a hard boundary — that is deliberate. An earlier
   version used a clip-path diagonal and the visible seam read as a template.
   If you edit these values, keep every colour stop ending at 0 alpha.
   ============================================================================ */

.hero{
  padding-top:0;min-height:88vh;
  display:flex;align-items:center;
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 95% at 84% 12%, #dce8ff 0%, rgba(220,232,255,0.55) 32%, rgba(220,232,255,0) 68%),
    radial-gradient(85% 75% at 104% 92%, var(--light2) 0%, rgba(238,242,255,0) 72%),
    var(--white);
}

/* Soft ambient glow behind the logo — blurred, so it never draws an edge. */
.hero::before{
  content:'';position:absolute;pointer-events:none;
  top:6%;right:-6%;width:52%;height:78%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#cfe0ff 0%,rgba(207,224,255,0) 70%);
  filter:blur(60px);
  opacity:0.75;
}

/* Faint dot texture, dissolved by a radial mask so it has no boundary. */
.hero::after{
  content:'';position:absolute;pointer-events:none;
  top:0;right:0;width:70%;height:100%;
  background-image:radial-gradient(var(--navy) 1px,transparent 1px);
  background-size:24px 24px;
  opacity:0.05;
  -webkit-mask-image:radial-gradient(60% 60% at 70% 35%,#000 0%,transparent 72%);
  mask-image:radial-gradient(60% 60% at 70% 35%,#000 0%,transparent 72%);
}

.hero-inner{
  max-width:var(--content-max);margin:0 auto;padding:80px var(--gutter);
  display:grid;grid-template-columns:1fr 1fr;gap:5rem;
  align-items:center;width:100%;
  position:relative;z-index:1;   /* lifts content above both pseudo-elements */
}

/* ── Left column: copy ──────────────────────────────────────────────────── */
.hero-eyebrow{
  display:inline-block;
  font-size:0.75rem;font-weight:700;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--blue);margin-bottom:1.2rem;
}
.hero-title{
  font-size:clamp(2.2rem,4vw,3.4rem);font-weight:800;
  line-height:1.15;color:var(--text-dark);margin-bottom:1.4rem;
}
.hero-title span{color:var(--navy);}
.hero-sub{
  font-size:1.05rem;color:var(--text-mid);
  max-width:480px;margin-bottom:2.5rem;line-height:1.85;
}
.hero-btns{display:flex;gap:1rem;flex-wrap:wrap;}

/* ── Right column: brand mark ───────────────────────────────────────────── */
/*  The official lockup: wordmark with "Elyco Technology International" on one
    line beneath it, exactly as supplied in images/ElycoLogo1.jpg.

    It is one image rather than a mark plus CSS text because the company name
    in the lockup is set in the brand's own typeface at the full width of the
    wordmark. Inter cannot reproduce that: at a matching size it renders barely
    half the width, so a text version would not be the same lockup.

    The image is images/ElycoLogo-lockup.png, which is ElycoLogo1.jpg with the
    white background keyed out. Its alt text carries the company name.        */

.hero-brand{
  display:flex;align-items:center;justify-content:center;
  animation:heroBrandIn 0.6s cubic-bezier(0.22,0.61,0.36,1) both;
}

.hero-brand-mark{
  width:min(100%,470px);
  height:auto;   /* overrides the width/height attributes, keeping the ratio */
}

@keyframes heroBrandIn{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}

@media(max-width:960px){
  .hero-inner{grid-template-columns:1fr;gap:3rem;}
  .hero-sub{max-width:100%;}
  /* Keep some tone on small screens rather than going stark white. */
  .hero::before{width:100%;right:-20%;opacity:0.45;}
  .hero::after{opacity:0.03;}
  .hero-brand-mark{width:min(100%,360px);}
}

@media(prefers-reduced-motion:reduce){
  .hero-brand{animation:none;}
}