/* EROLTECH V14 — brand hero typography. All V13 sections and actions preserved. */
.hero-brand-title{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:max-content;
  max-width:100%;
  margin:26px 0 24px;
  line-height:1;
  letter-spacing:normal;
  isolation:isolate;
}
.hero-brand-lockup{
  position:relative;
  display:block;
  padding:8px 16px 24px 2px;
  max-width:100%;
  perspective:850px;
}
.hero-brand-lockup::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:67%;height:70%;
  left:25%;top:2%;
  background:radial-gradient(ellipse,#19e5b32b 0%,#19e5b30d 35%,transparent 73%);
  filter:blur(21px);
  pointer-events:none;
}
.hero-brand-word{
  display:block;
  position:relative;
  font-size:clamp(60px,6.5vw,110px);
  font-weight:1000;
  letter-spacing:-.097em;
  line-height:.98;
  white-space:nowrap;
  transform:rotateY(-6deg) rotateX(3deg);
  transform-origin:30% 50%;
  filter:drop-shadow(0 18px 15px #0007);
  transition:transform .55s cubic-bezier(.16,1,.3,1),filter .55s;
  font-family:Inter,'Arial Black',system-ui,sans-serif;
}
.hero-brand-word::before{
  content:attr(data-word);
  position:absolute;
  inset:0;
  z-index:-1;
  color:#071914;
  -webkit-text-stroke:1px #29f2b86b;
  transform:translate(5px,7px);
  text-shadow:1px 1px #0e7c62,2px 2px #0c6c57,3px 3px #075343,4px 4px #063c34,5px 5px #032b26;
  opacity:.92;
  pointer-events:none;
}
.hero-erol{color:#f5f9fa;text-shadow:0 2px 0 #c4d3d5,0 8px 25px #ffffff13}
.hero-tech{
  color:#20eab7;
  background:linear-gradient(115deg,#0cbf91 2%,#60ffd2 27%,#c7fff0 48%,#1de5ad 68%,#0d9978 100%);
  background-size:240% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 16px #13d5a338);
  animation:eroltech-metal-shine 8s ease-in-out infinite;
}
.hero-brand-underline{
  position:absolute;
  bottom:8px;left:2px;
  width:100%;height:4px;
  transform:skewX(-28deg);
  background:linear-gradient(90deg,#f32948 0%,#f32948 18%,#fff8 18.4%,#fff8 20%,#1de5b2 21%,#1de5b2 72%,transparent 98%);
  box-shadow:0 0 15px #19e5b344;
}
.hero-brand-underline i{display:block;position:absolute;left:0;top:-4px;width:19%;height:12px;border-left:4px solid #f32948;transform:skewX(-20deg);filter:drop-shadow(0 0 10px #f3294855)}
.hero-brand-title .accent{
  display:block;
  font-size:clamp(27px,2.8vw,45px);
  line-height:1.17;
  letter-spacing:-.055em;
  font-weight:850;
  margin:7px 0 0 2px;
  background:linear-gradient(90deg,#eaf4f2 5%,#b6f9e8 52%,#21dba9 98%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
@keyframes eroltech-metal-shine{0%,18%,100%{background-position:100% 50%}45%,55%{background-position:0% 50%}}
@media(hover:hover) and (pointer:fine){.hero-brand-lockup:hover .hero-brand-word{transform:rotateY(0deg) rotateX(0deg) translateY(-3px);filter:drop-shadow(0 21px 20px #000a)}}
@media(max-width:1180px){.hero-brand-word{font-size:clamp(54px,6.3vw,90px)}}
@media(max-width:900px){.hero-brand-title{margin:22px 0}.hero-brand-word{font-size:clamp(58px,10vw,92px)}.hero-brand-title .accent{font-size:clamp(29px,5vw,44px)}}
@media(max-width:600px){
  .hero-brand-title{margin:21px 0 18px;width:100%}
  .hero-brand-lockup{padding:5px 7px 20px 0}
  .hero-brand-word{font-size:clamp(47px,11.3vw,69px);letter-spacing:-.102em;transform:rotateY(-3deg)}
  .hero-brand-word::before{transform:translate(3px,5px);text-shadow:1px 1px #0e7c62,2px 2px #075343,3px 3px #032b26}
  .hero-brand-title .accent{font-size:clamp(25px,6.1vw,35px);line-height:1.2;margin-top:5px}
  .hero-brand-underline{height:3px;bottom:8px}
}
@media(max-width:360px){.hero-brand-word{font-size:clamp(40px,11vw,47px)}.hero-brand-title .accent{font-size:24px}}
@media(prefers-reduced-motion:reduce){.hero-tech{animation:none}.hero-brand-word{transition:none}}