/* Home hero: headline left, metallic ribbon right, benefits strip below. Loaded after home.css and visuals.css, so these rules win. */
:root{--bg:#060918;--hero-blue:#345DFF;--hero-violet:#925CFF;--hero-grad:linear-gradient(120deg,#345DFF 0%,#6F5CFF 52%,#925CFF 100%)}
body{background:#060918}
.bg-fx{background:
  radial-gradient(900px circle at 0% 0%,rgba(52,93,255,.17),transparent 62%),
  radial-gradient(760px circle at 100% 26%,rgba(146,92,255,.12),transparent 62%),
  #060918}

/* Header shares the hero container width */
.nav .nav-inner{max-width:1440px;width:100%;margin-inline:auto;padding-inline:clamp(14px,3vw,48px) clamp(10px,1.6vw,16px)}
.nav .container{max-width:1440px;padding-inline:clamp(10px,3vw,48px)}
.nav-links a.is-active{background:rgba(255,255,255,.07)}
.nav-links a.is-active::after{background:var(--hero-grad);width:18px}

/* Layout */
.hero{padding:clamp(104px,13vh,132px) 0 clamp(28px,5vh,56px);min-height:0;display:block}
.hero-wrap{max-width:1440px;margin:0 auto;padding-inline:clamp(20px,4vw,64px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:clamp(28px,4vw,64px);align-items:center}
.hero-copy{min-width:0}
.hero h1.motto{margin:22px 0 22px;font-size:clamp(2.2rem,3.85vw,4.4rem);line-height:1.06;letter-spacing:-.035em;font-weight:700}
.hero h1 .grad-text{background-image:var(--hero-grad)}
.hero .lead{font-size:clamp(1.02rem,1.3vw,1.2rem);line-height:1.7;color:#A9B2CE;max-width:560px;margin-bottom:34px}
.hero .btn-primary{background-image:var(--hero-grad)}
.hero .btn-ghost{background:rgba(255,255,255,.03);border:1px solid rgba(201,209,230,.2)}
.hero .btn{transition:transform .25s var(--ease),box-shadow .25s,background .25s,border-color .25s}
.hero .btn:hover{transform:translateY(-2px)}
.hero .btn .i{transition:transform .25s var(--ease)}
.hero .btn:hover .i{transform:translateX(4px)}
.hero .btn:focus-visible{outline:2px solid #8FA6FF;outline-offset:3px}
@media (min-width:1100px){.hero h1.motto{white-space:nowrap}}

/* Artwork: glow, float and pointer tilt live on separate elements so their transforms never collide */
.hero-art{position:relative;display:grid;place-items:center;perspective:1100px;min-width:0;
  opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease-out) .25s,transform 1s var(--ease-out) .25s}
.hero.hero-in .hero-art,.js-off .hero-art{opacity:1;transform:none}
.ribbon-glow{position:absolute;left:50%;bottom:3%;width:84%;height:15%;transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(86,92,255,.55) 0%,rgba(146,92,255,.22) 48%,transparent 72%);filter:blur(30px)}
.ribbon-float{position:relative;animation:ribbonFloat 9s ease-in-out infinite}
.ribbon-tilt{transition:transform .9s var(--ease-out)}
.ribbon-tilt.is-tracking{transition:transform .22s ease-out}
.ribbon-tilt img{display:block;width:auto;max-width:100%;height:clamp(340px,64vh,650px);object-fit:contain}
@keyframes ribbonFloat{
  0%,100%{transform:translateY(0) rotate(-.9deg)}
  50%{transform:translateY(-11px) rotate(1.1deg)}
}

/* Benefits strip */
.hero-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 40px;margin-top:clamp(24px,4vh,44px);padding-top:26px;border-top:1px solid rgba(201,209,230,.09)}
.benefits{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.benefits li{display:flex;align-items:center;gap:12px;padding:4px clamp(16px,2.4vw,34px);font-size:.94rem;color:#C7CDE3;line-height:1.3}
.benefits li:first-child{padding-left:0}
.benefits li+li{border-left:1px solid rgba(201,209,230,.12)}
.benefits .i{width:22px;height:22px;color:#9C8CFF;flex:none}
.strip-note{margin:0;font-size:.94rem;color:#8F99B8}

/* Tablet and phone: copy first, artwork below, everything fits */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero h1.motto{white-space:normal;font-size:clamp(2.1rem,6.2vw,3.2rem)}
  .hero-art{order:2}
  .ribbon-tilt img{height:clamp(300px,52vh,460px)}
}
@media (max-width:640px){
  .hero{padding-top:104px}
  .hero h1.motto{font-size:clamp(2.25rem,10vw,2.75rem)}
  .benefits{flex-direction:column;align-items:flex-start;gap:12px}
  .benefits li{padding:0}
  .benefits li+li{border-left:0}
  .hero-strip{gap:14px}
  .ribbon-tilt img{height:min(46vh,380px)}
}

@media (prefers-reduced-motion:reduce){
  .ribbon-float{animation:none}
  .ribbon-tilt{transition:none;transform:none!important}
  .hero-art{opacity:1;transform:none;transition:none}
  .hero .btn:hover{transform:none}
}

/* keep the note clear of the floating WhatsApp button */
.strip-note{padding-right:72px}
@media (max-width:640px){.strip-note{padding-right:0}}