/* Srikrung Broker | homepage hero refresh
   All selectors are scoped to .hero-modern to preserve legacy page styles.
   Compatible with current PHP 8.4 homepage; CSS has no PHP dependency. */
.hero.hero-modern {
  min-height:620px;
  background:radial-gradient(circle at 71% 39%,#17a45f 0,transparent 42%),
    linear-gradient(115deg,#01452f 0%,#006b42 47%,#008c53 100%);
  isolation:isolate;
}
.hero-modern .hero-orb {opacity:.37;pointer-events:none}
.hero-modern .hero-shell {
  grid-template-columns:minmax(0,1.09fr) minmax(0,.91fr);
  min-height:620px;
  align-items:center;
  gap:clamp(8px,2vw,35px);
}
.hero-modern .hero-copy {padding:72px 0 80px;z-index:4;min-width:0}
.hero-modern .hero-tag {font-size:11px;letter-spacing:1.2px;color:#ddf7cd;line-height:1.6}
.hero-modern h1 {
  font-size:clamp(38px,4.55vw,67px);
  line-height:1.29;
  letter-spacing:-1.8px;
  max-width:735px;
  margin:19px 0 22px;
  text-wrap:balance;
}
.hero-modern h1 span {color:#eaff91}
.hero-modern h1 em {font-style:normal;color:#fff}
.hero-modern .hero-copy>p {max-width:590px;font-size:clamp(14px,1.18vw,17px);line-height:1.95;margin-bottom:26px;color:#e1f7ed}
.hero-modern .hero-actions .btn {border-radius:100px}
.hero-modern .hero-trust {margin-top:25px;gap:12px 19px;font-size:12px;color:#def7e9}
.hero-modern .hero-modern-visual {
  min-width:0;
  width:100%;
  height:555px;
  position:relative;
  isolation:isolate;
  align-self:end;
}
.hero-modern .hero-photo-glow {
  position:absolute;
  inset:15% 2% 6% 6%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(203,255,148,.42),rgba(170,250,139,.08) 58%,transparent 72%);
  filter:blur(5px);
  z-index:-1;
}
.hero-modern .hero-photo-frame {
  position:absolute;
  z-index:1;
  top:24px;
  right:clamp(1px,2%,24px);
  bottom:16px;
  width:min(86%,440px);
  overflow:hidden;
  border-radius:43% 43% 28px 28px / 28% 28% 28px 28px;
  background:linear-gradient(140deg,#b2e4b6,#148a4a);
  border:2px solid rgba(255,255,255,.43);
  box-shadow:0 29px 60px rgba(0,37,23,.29),inset 0 0 0 8px rgba(255,255,255,.08);
}
.hero-modern .hero-advisor-photo {width:100%;height:100%;object-fit:cover;object-position:center 23%;display:block}
.hero-modern .hero-brand-mini {
  position:absolute;z-index:3;top:31px;left:0;
  display:flex;flex-direction:column;gap:4px;
  border:1px solid rgba(255,255,255,.86);
  background:rgba(255,255,255,.95);
  color:#06452e;
  border-radius:17px;
  box-shadow:0 14px 30px rgba(2,50,29,.17);
  padding:13px 19px;
  text-align:center;
  transform:rotate(-4deg);
}
.hero-modern .hero-brand-mini strong{font-size:22px;font-weight:800;line-height:1.15;white-space:nowrap}
.hero-modern .hero-brand-mini strong span{display:block;letter-spacing:3px;font-size:11px;color:#0a8b55;margin-top:4px}
.hero-modern .hero-brand-mini small{font-size:10px;color:#769789}
.hero-modern .hero-feature {
  position:absolute;z-index:3;
  display:flex;align-items:center;gap:11px;
  width:min(290px,70%);
  min-height:80px;
  padding:12px 15px;
  border-radius:19px;
  border:1px solid rgba(255,255,255,.86);
  background:rgba(255,255,255,.96);
  box-shadow:0 15px 30px rgba(2,48,29,.25);
  color:#0b3e31;
  text-align:left;
}
.hero-modern .hero-feature-icon {
  display:grid;place-items:center;flex:0 0 45px;
  width:45px;height:45px;border-radius:15px;
  color:#048350;background:#daf6dc;
}
.hero-modern .hero-feature-icon svg {width:23px;height:23px}
.hero-modern .hero-feature strong{display:block;font-size:15px;font-weight:800;line-height:1.4}
.hero-modern .hero-feature small{display:block;margin-top:3px;font-size:11px;color:#607f73;line-height:1.55}
.hero-modern .hero-feature-protect {top:245px;left:-16px}
.hero-modern .hero-feature-growth {bottom:56px;right:-13px}
.hero-modern .hero-photo-disclaimer {
  position:absolute;z-index:4;bottom:0;left:0;
  color:rgba(255,255,255,.72);font-size:10px;letter-spacing:.1px;
}
@media (max-width:1200px) {
  .hero-modern h1{font-size:clamp(35px,4.5vw,56px)}
  .hero-modern .hero-feature-protect{left:-2px;top:250px}
  .hero-modern .hero-feature-growth{right:-2px}
}
@media (max-width:900px) {
  .hero-modern .hero-shell{grid-template-columns:minmax(0,1fr);min-height:0;gap:0}
  .hero-modern .hero-copy{padding:58px 0 10px}
  .hero-modern h1{font-size:clamp(39px,7.2vw,60px);max-width:700px}
  .hero-modern .hero-copy>p{max-width:650px}
  .hero-modern .hero-modern-visual{height:500px;max-width:640px;justify-self:center;align-self:auto}
  .hero-modern .hero-photo-frame{width:min(68%,390px);right:12%;top:20px;bottom:20px}
  .hero-modern .hero-brand-mini{left:5%;top:38px}
  .hero-modern .hero-feature-protect{left:2%;top:270px}
  .hero-modern .hero-feature-growth{right:2%;bottom:50px}
}
@media (max-width:540px) {
  .hero-modern .hero-copy{padding:48px 0 11px}
  .hero-modern .hero-tag{font-size:9px;letter-spacing:.75px}
  .hero-modern h1{font-size:clamp(30px,8vw,43px);line-height:1.37;letter-spacing:-.8px;margin:13px 0 14px}
  .hero-modern .hero-copy>p{font-size:14px;line-height:1.8;margin-bottom:17px}
  .hero-modern .hero-actions{gap:8px}
  .hero-modern .hero-actions .btn{min-height:45px;padding:11px 14px;font-size:12px}
  .hero-modern .hero-trust{font-size:10px;gap:6px 13px;margin:16px 0 0}
  .hero-modern .hero-modern-visual{height:380px;width:100%;margin-top:14px}
  .hero-modern .hero-photo-frame{top:8px;right:1%;width:81%;bottom:31px;border-radius:38% 38% 18px 18px / 26% 26% 18px 18px}
  .hero-modern .hero-brand-mini{top:15px;left:0;padding:9px 11px;border-radius:12px}
  .hero-modern .hero-brand-mini strong{font-size:16px}
  .hero-modern .hero-brand-mini strong span{font-size:9px;letter-spacing:2px}
  .hero-modern .hero-brand-mini small{font-size:8px}
  .hero-modern .hero-feature{min-height:57px;padding:8px 10px;gap:8px;width:min(242px,73%);border-radius:14px}
  .hero-modern .hero-feature-icon{width:31px;height:31px;flex-basis:31px;border-radius:10px}
  .hero-modern .hero-feature-icon svg{width:17px;height:17px}
  .hero-modern .hero-feature strong{font-size:11px}
  .hero-modern .hero-feature small{font-size:9px;margin-top:2px}
  .hero-modern .hero-feature-protect{top:205px;left:0}
  .hero-modern .hero-feature-growth{bottom:52px;right:0}
  .hero-modern .hero-photo-disclaimer{bottom:12px;font-size:9px}
}
@media (max-width:360px) {
  .hero-modern .hero-visual{height:345px}
  .hero-modern .hero-feature{width:76%}
  .hero-modern .hero-photo-frame{width:80%}
}
@media(prefers-reduced-motion:reduce) {
  .hero-modern .hero-photo-frame,.hero-modern .hero-feature{transition:none}
}