/* Hero v10.5 mobile-centered, smaller logo, no bottom cards on phones, underline persists */

/* Local tokens (isolated from other sections) */
.hero{
  --ink:#e9edf2; --muted:#b7c0cc;
  --accent:#58a6ff; --accent-2:#8b5cf6;
  --glass:rgba(255,255,255,.06); --stroke:rgba(255,255,255,.18);
  --maxw:1100px;
  /* slightly smaller caps so the title block is “zoomed out” */
  --qs-top-max:80px;   /* was 92px - cap for QUANTIC */
  --qs-bot-max:32px;   /* was 38px - cap for SOLUTIONS */
}

/* Keyframe animations */
@keyframes fadeIn-down { from{opacity:0;transform:translateY(15px)} to{opacity:1;transform:translateY(0)} }
@keyframes draw-line { from{transform:scaleX(0)} to{transform:scaleX(1)} }

@keyframes fadeIn-glow {
  from { color: var(--ink); text-shadow: 0 0 0 transparent; }
  to   { color: hsl(230,40%,80%);
         text-shadow:
           0 0 1em hsla(320,100%,50%,.2),
           0 0 .125em hsla(320,100%,60%,.3),
           -1em -.125em .5em hsla(40,100%,60%,0),
           1em  .125em .5em hsla(200,100%,60%,0); }
}
@keyframes lights {
  0%   { color:hsl(230,40%,80%); text-shadow:0 0 1em hsla(320,100%,50%,.2),0 0 .125em hsla(320,100%,60%,.3),-1em -.125em .5em hsla(40,100%,60%,0),1em .125em .5em hsla(200,100%,60%,0) }
  30%  { color:hsl(230,80%,90%); text-shadow:0 0 1em hsla(320,100%,50%,.5),0 0 .125em hsla(320,100%,60%,.5),-.5em -.125em .25em hsla(40,100%,60%,.2), .5em .125em .25em hsla(200,100%,60%,.4) }
  40%  { color:hsl(230,100%,95%);text-shadow:0 0 1em hsla(320,100%,50%,.5),0 0 .125em hsla(320,100%,90%,.5),-.25em -.125em .125em hsla(40,100%,60%,.2), .25em .125em .125em hsla(200,100%,60%,.4) }
  70%  { color:hsl(230,80%,90%); text-shadow:0 0 1em hsla(320,100%,50%,.5),0 0 .125em hsla(320,100%,60%,.5), .5em -.125em .25em hsla(40,100%,60%,.2),-.5em .125em .25em hsla(200,100%,60%,.4) }
  100% { color:hsl(230,40%,80%); text-shadow:0 0 1em hsla(320,100%,50%,.2),0 0 .125em hsla(320,100%,60%,.3), 1em -.125em .5em hsla(40,100%,60%,0),-.1em .125em .5em hsla(200,100%,60%,0) }
}

@keyframes logo-glow {
  0%   { filter: brightness(0.8) drop-shadow(0 0 0 transparent); }
  30%  { filter: brightness(1.1) drop-shadow(0 0 12px rgba(88,166,255,.5)); }
  70%  { filter: brightness(1.1) drop-shadow(0 0 12px rgba(139,92,246,.5)); }
  100% { filter: brightness(0.8) drop-shadow(0 0 0 transparent); }
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
ul{list-style:none;margin:0;padding:0}

/* Layout */
.hero{
  position:relative;
  height:100svh;
  min-height:560px;
  overflow:hidden;
  color:var(--ink);
}
body.admin-bar .hero{height:calc(100svh - 32px)}
.hero video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  filter:saturate(1.05) contrast(1.05) brightness(.6);
  z-index:1
}
.overlay{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    radial-gradient(1100px 800px at 75% 50%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(115deg, rgba(10,14,22,.90) 0%, rgba(20,26,44,.80) 40%, rgba(35,22,70,.70) 70%, rgba(60,20,110,.62) 100%),
    radial-gradient(150% 115% at 50% 100%, rgba(0,0,0,.55), transparent 65%);
}

.wrap{
  position:relative;
  z-index:3;
  height:100%;
  perspective:1000px;
}
.container{
  max-width:860px;
  margin:0 auto;
  padding:40px clamp(14px,3.6vw,28px) 0;  /* +40px top so we clear the nav */
  display:grid;
  align-content:center;
  justify-items:center;
  text-align:center;
  /* slightly less height so the block is “smaller” vertically */
  height: calc(100% - 164px); /* was 100% - 124px */
  transition:transform .1s ease-out;
}

/* Headline */
.brand-lockup{
  color:var(--ink);
  text-transform:uppercase;
  line-height:.9;
  margin:0 0 8px;
  opacity:0;
  animation:fadeIn-down .8s ease-out .1s forwards;
}

/* Logo */
.hero-logo{
  display:block;
  margin:0 auto 4px;
  height:150px;          /* was 190px - smaller logo */
  width:auto;
  mix-blend-mode:luminosity;
  filter:brightness(.8) drop-shadow(0 0 0 transparent);
  transition:filter .5s ease-out;
}
.brand-lockup.glowing .hero-logo{animation:logo-glow 5s 1.5s linear infinite}

/* Text lines */
.brand-lockup.glowing .q-line,
.brand-lockup.glowing .s-line{
  animation:fadeIn-glow 1.5s ease-out forwards, lights 5s 1.5s linear infinite
}

.brand-lockup .q-line{
  display:block;
  font-weight:500;
  font-size:clamp(32px,6.2vw,var(--qs-top-max));
  letter-spacing:.06em
}
.brand-lockup .s-line{
  display:block;
  font-weight:400;
  font-size:clamp(14px,2.8vw,var(--qs-bot-max));
  letter-spacing:.05em;
  margin-top:6px;
  position:relative
}
.brand-lockup .s-line::after{
  content:"";
  display:block;
  height:2px;
  border-radius:2px;
  width:44%;
  margin:8px auto 0;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);
  opacity:.85;
  /* keep final state visible */
  animation:draw-line .8s cubic-bezier(.19,1,.22,1) 2.4s forwards;
}

/* Tagline and CTA */
.tagline,.cta{opacity:0;animation:fadeIn-down .8s ease-out forwards}
.tagline{
  animation-delay:2.2s;
  margin:10px 0 18px;
  color:var(--muted);
  font-size:clamp(14px,1.8vw,18px)
}
.cta{
  animation-delay:2.4s;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:auto;
  padding:12px 18px;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
  color:var(--ink);
  background:rgba(49,104,180,.18);
  box-shadow:inset 0 0 0 1px rgba(88,166,255,.35);
  backdrop-filter:saturate(140%) blur(6px);
  transition:box-shadow .25s ease
}
.cta:hover{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 0 16px rgba(88,166,255,.5)
}

/* Bottom cards */
.hero-cards{
  position:absolute;
  left:0;right:0;
  bottom:18px;
  z-index:3
}
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 clamp(14px,3.6vw,28px);
  transition:transform .1s;
}
.card{
  background:var(--glass);
  border-radius:14px;
  padding:14px 16px;
  box-shadow:0 6px 26px rgba(0,0,0,.22), inset 0 0 0 1px var(--stroke);
  backdrop-filter:saturate(130%) blur(8px);
  text-align:left;
  position:relative;
  overflow:hidden;
  transition:transform .25s, box-shadow .25s;
  color:var(--ink)
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 32px rgba(0,0,0,.28), inset 0 0 0 1px var(--stroke)
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  border:2px solid transparent;
  background:linear-gradient(120deg,var(--accent-2),var(--accent)) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .25s
}
.card:hover::before{opacity:.8}
.card h4{margin:0 0 4px;font-size:15px}
.card p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}

/* Height responsiveness */
@media (max-height:900px){
  .brand-lockup .q-line{font-size:clamp(28px,5.5vw,84px)}
  .brand-lockup .s-line{font-size:clamp(12px,2.4vw,32px);letter-spacing:.32em}
  .tagline{margin:8px 0 14px}
  .hero-cards{bottom:14px}
}
@media (max-height:780px){
  .container{height: calc(100% - 156px)} /* keep proportion with new base height */
  .brand-lockup .q-line{font-size:clamp(26px,5vw,76px)}
  .brand-lockup .s-line{font-size:clamp(11px,2.2vw,28px)}
  .cards{gap:18px}
  .card{padding:12px 14px}
}
@media (max-height:700px){
  .container{height: calc(100% - 148px)}
  .tagline{font-size:clamp(13px,1.6vw,16px)}
  .cta{padding:10px 16px;border-radius:9px}
  .cards{gap:16px}
}

/* Mobile centered version */
@media (max-width:900px){
  /* remove bottom cards */
  .hero-cards{display:none}

  /* centered vertical stack */
  .wrap{
    height:100%;
    display:grid;
    place-items:center;
  }

  .container{
    height:100%;
    max-width:92vw;
    padding:0 18px;      /* no extra top padding on mobile */
    display:grid;
    align-content:center;
    justify-items:center;
    row-gap:10px;
  }

  /* tighter caps on mobile */
  .hero{
    --qs-top-max:60px;
    --qs-bot-max:26px;
  }

  /* logo smaller to match text */
  .hero-logo{
    height:120px;
    margin-bottom:2px;
  }

  .brand-lockup{margin-bottom:6px}
  .brand-lockup .q-line{
    font-size:clamp(24px,12vw,var(--qs-top-max));
    letter-spacing:.05em;
  }
  .brand-lockup .s-line{
    font-size:clamp(12px,5.2vw,var(--qs-bot-max));
    letter-spacing:.12em;
    margin-top:4px;
  }
  .brand-lockup .s-line::after{
    width:42%;
    margin-top:6px;
    /* keep forwards on mobile too */
    animation:draw-line .8s cubic-bezier(.19,1,.22,1) 2.4s forwards;
  }

  .tagline{
    margin:6px 0 12px;
    font-size:clamp(13px,4vw,16px);
  }

  .cta{
    padding:10px 16px;
    border-radius:10px;
    font-size:.95rem;
  }
}

/* Ultra-narrow phones */
@media (max-width:360px){
  .hero-logo{height:100px}
  .brand-lockup .q-line{font-size:clamp(22px,11.5vw,52px)}
  .brand-lockup .s-line{font-size:clamp(11px,4.8vw,22px)}
  .tagline{font-size:clamp(12px,3.8vw,15px)}
  .cta{padding:9px 14px;font-size:.9rem}
}