/* LoomiTV — why-us page styles */

:root{
    --radius:3px; --maxw:1240px;
  }

body{ background:var(--bg); color:var(--fg); font-family:'Inter',sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden;}

:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.eyebrow{ font-family:'Inter',sans-serif; font-weight:600; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted);}

h1,h2,h3,h4{ font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.01em; line-height:1.05;}

em{ font-style:italic; color:var(--gold); font-weight:500;}

.btn-primary:hover{ background:#A9291F; border-color:#A9291F;}

.page-hero{ padding:170px 0 90px; text-align:center; background:radial-gradient(ellipse 70% 60% at 50% 0%, rgba(227,166,62,0.14), transparent 60%);}

.page-hero h1{ font-size:clamp(42px,6vw,72px); margin-bottom:18px;}

.page-hero p{ color:var(--muted); font-size:17px; max-width:560px; margin:0 auto;}

.pillar{ padding:90px 0; border-top:1px solid var(--line); }

.pillar .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}

.pillar.reverse .wrap{ direction:rtl; }

.pillar.reverse .wrap > *{ direction:ltr; }

.pillar-visual{ aspect-ratio:4/3; border-radius:10px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;}

.pillar-visual .big-stat{ font-family:'Fraunces',serif; font-weight:800; color:#fff; text-align:center; position:relative; z-index:2;}

.pillar-visual .big-stat .num{ font-size:clamp(48px,6vw,80px); line-height:1;}

.pillar-visual .big-stat .lbl{ font-family:'Inter',sans-serif; font-weight:600; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.8); margin-top:10px;}

.v1{ background:linear-gradient(150deg,#2E5FA8,#152C52); }

.v2{ background:linear-gradient(150deg,#E3A63E,#8A5B12); }

.v3{ background:linear-gradient(150deg,#3E8F72,#164A38); }

.v4{ background:linear-gradient(150deg,#8A3E9E,#3C1A48); }

.v5{ background:linear-gradient(150deg,#C6342A,#7A1E1E); }

.v6{ background:linear-gradient(150deg,#4E4E9E,#211F52); }

.pillar-body h2{ font-size:clamp(28px,3.6vw,40px); margin-bottom:18px;}

.pillar-body p{ color:var(--muted); font-size:15.5px; margin-bottom:16px; max-width:480px;}

.pillar-quote{ font-family:'Fraunces',serif; font-style:italic; font-size:19px; color:var(--fg); border-left:2px solid var(--gold); padding-left:18px; margin-top:22px; max-width:460px;}

.cta-band{ padding:100px 0; text-align:center; background:radial-gradient(ellipse 70% 100% at 50% 100%, rgba(227,166,62,0.14), transparent 60%), var(--bg-deep); border-top:1px solid var(--line);}

.cta-band h2{ font-size:clamp(34px,4.6vw,52px); margin-bottom:24px;}

.cta-band p{ color:var(--muted); margin-bottom:32px;}

footer{ background:var(--bg-deep); border-top:1px solid var(--line); padding:48px 0; text-align:center;}

@media (max-width:900px){
    .pillar .wrap, .pillar.reverse .wrap{ grid-template-columns:1fr; direction:ltr; }
    .pillar-visual{ order:-1; }
  }