/*
Theme Name: HReasily 2026
Theme URI: https://hreasilygroup.com/
Author: HReasily
Description: The 2026 HReasily marketing site - homepage plus 15 page templates,
             sharing one design system, one navigation and one footer.
Version: 2.0.3
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: Proprietary
Text Domain: hreasily-2026
*/

/* Shared design system. Loaded on every template that uses the hybrid dark
   system; the homepage, For-SMEs and buy-flow templates load their own
   stylesheet instead (see functions.php). */

:root{
 --bg:#14100E;--bg2:#1A1512;--card:#1D1815;--card2:#221C18;
 --ink:#F4EFEB;--muted:#A79E97;--line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.14);
 --red:#E43A3F;--red-2:#C62F34;--ok:#4FB286;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:
 radial-gradient(1250px 940px at 50% -16%,rgba(232,62,66,.30),transparent 60%),
 radial-gradient(820px 680px at 85% 6%,rgba(255,132,86,.18),transparent 60%),
 radial-gradient(900px 800px at 4% 90%,rgba(255,96,122,.13),transparent 58%)}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
h1,h2,h3,h4,.disp{font-family:'Sora'}
a{color:inherit;text-decoration:none}
.acc{background:linear-gradient(92deg,#FF7A5C,#E43A3F 52%,#FF6FA8);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font-family:'Sora';font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
nav{position:sticky;top:0;z-index:40;background:rgba(20,16,14,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{font-family:'Sora';font-weight:800;font-size:21px;letter-spacing:-.4px;color:var(--ink)}
.logo b{color:var(--red)}
.nlinks{display:flex;gap:26px;font-size:14.5px;font-weight:500;color:var(--muted)}
.nlinks a:hover{color:var(--ink)}
.nlinks a.on{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:'Sora';font-weight:600;font-size:14.5px;padding:11px 18px;border-radius:10px;cursor:pointer;border:1px solid transparent;transition:.15s}
.btn-red{color:#fff;background:linear-gradient(180deg,#F0484D,#E43A3F);box-shadow:0 12px 30px -10px rgba(232,62,66,.6),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-red:hover{filter:brightness(1.05)}
.btn-ghost{color:var(--ink);background:transparent;border-color:var(--line2)}
.btn-ghost:hover{border-color:var(--ink)}
.head{text-align:center;padding:74px 24px 30px}
.head h1{font-size:52px;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:14px 0 16px}
.head p{font-size:18px;color:#D7CFC8;max-width:60ch;margin:0 auto}
.lightband{--ink:#211B17;--muted:#6E635C;--line:rgba(24,18,15,.10);--line2:rgba(24,18,15,.16);position:relative;z-index:1;color:var(--ink)}
.lightband::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;background:#F5F2F0;z-index:-1}
.lband-pad{padding:56px 0 60px}
.final .btn-red{background:#fff;color:var(--red);box-shadow:0 14px 34px -12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.6)}
.final .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.final .btn-ghost:hover{border-color:#fff}
.ft-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;align-items:center}
.note{max-width:1120px;margin:0 auto;padding:26px 24px 0;font-size:11.5px;color:#8a807a;position:relative;z-index:2;text-align:center}
.rise{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.rise.in{opacity:1;transform:none}
.pill b{font-family:'Sora';color:var(--red)}
.subhook{font-family:'Sora';font-weight:600;font-size:13px;color:var(--red);margin-bottom:22px}
.aurora{position:absolute;inset:-16%;z-index:0;filter:blur(62px);pointer-events:none}
.blob{position:absolute;border-radius:50%;opacity:.8}
@keyframes d1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,32px) scale(1.12)}}
@keyframes d2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(42px,-26px) scale(1.14)}}
@keyframes d3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(24px,-32px) scale(.9)}}
.egrp .cap{font-family:'Sora';font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.ffeed{display:flex;gap:7px;flex-wrap:wrap}
.fchip{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:500;padding:7px 11px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);opacity:0;transform:translateY(-6px)}
.fchip b{font-family:'Sora';font-weight:700}
.play .fchip{animation:fin .5s ease-out forwards}
.play .in1{animation-delay:.2s}
.play .in2{animation-delay:.38s}
.play .in3{animation-delay:.56s}
.play .in4{animation-delay:.74s}
@keyframes fin{to{opacity:1;transform:none}}
.conn{height:26px;display:flex;justify-content:center;position:relative}
.conn::before{content:"";width:2px;height:100%;background:linear-gradient(180deg,rgba(228,58,63,.1),rgba(228,58,63,.55))}
.conn .pulse{position:absolute;top:0;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#FF9E86;box-shadow:0 0 10px #FF9E86;opacity:0}
.play .conn .pulse{animation:flow 1.5s linear .9s infinite}
@keyframes flow{0%{top:-2px;opacity:0}20%{opacity:1}80%{opacity:1}100%{top:24px;opacity:0}}
.core{display:flex;align-items:center;justify-content:center;padding:6px 0}
.ring{position:relative;width:100%;border-radius:16px;padding:16px 18px;background:linear-gradient(150deg,rgba(228,58,63,.5),rgba(255,111,168,.35));border:1px solid rgba(255,255,255,.24);display:flex;align-items:center;justify-content:space-between;box-shadow:0 0 0 0 rgba(255,158,134,.5)}
.play .ring{animation:beat 2.4s ease-in-out .9s infinite}
@keyframes beat{0%,100%{box-shadow:0 0 0 0 rgba(255,158,134,.0)}50%{box-shadow:0 0 34px -6px rgba(255,158,134,.6)}}
.ring .rl{font-family:'Sora';font-weight:700;font-size:16px}
.ring .rs{font-size:11px;color:rgba(244,239,235,.82)}
.ring .spin{width:30px;height:30px;border-radius:50%;border:2.5px solid rgba(255,255,255,.25);border-top-color:#fff}
.play .ring .spin{animation:spin 1s linear .9s 2}
@keyframes spin{to{transform:rotate(360deg)}}
.outc .fchip{background:rgba(79,178,134,.12);border-color:rgba(79,178,134,.24)}
.outc .fchip b{color:var(--ok)}
.play .outc .fchip{animation-delay:2.1s}
.play .outc .o2{animation-delay:2.28s}
.play .outc .o3{animation-delay:2.46s}
.stat small{display:block;color:var(--muted);font-size:12px}
.sec{padding:72px 0}
.cmp{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cmpcard{position:relative;background:rgba(255,255,255,.04);border:1px solid var(--line2);border-radius:18px;padding:22px;backdrop-filter:blur(14px);transition:border .15s,transform .15s}
.cmpcard:hover{border-color:rgba(255,255,255,.3);transform:translateY(-3px)}
.cmpcard .badge{position:absolute;top:-11px;left:22px;font-family:'Sora';font-weight:600;font-size:10.5px;color:#fff;background:linear-gradient(180deg,#F0484D,#E43A3F);padding:4px 10px;border-radius:999px}
.cmpcard .who{color:var(--red);font-family:'Sora';font-size:12px;font-weight:600;margin:4px 0 10px}
.cmpcard p{color:var(--muted);font-size:13px;line-height:1.5;margin-bottom:12px}
.cmpcard .go{display:inline-flex;font-family:'Sora';font-weight:600;font-size:13.5px;color:var(--ink)}
.vidsec{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}
.vidwrap{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line2);aspect-ratio:16/9;background:#000;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.vidwrap iframe{width:100%;height:100%;border:0;display:block}
.vby{display:flex;align-items:center;gap:12px;margin-top:16px}
.vby img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.vby span{color:var(--muted);font-size:13px}
.feat:last-child{margin-bottom:0}
.feat .k{font-family:'Sora';font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.feat .fl{list-style:none;display:flex;flex-direction:column;gap:9px}
.sbody{padding:14px 16px}
.mtabs{display:flex;gap:6px;margin-bottom:10px}
.mtab{font-size:11px;font-weight:600;padding:5px 10px;border-radius:8px;background:rgba(24,18,15,.05);color:var(--muted)}
.mtab.on{background:rgba(228,58,63,.12);color:var(--red)}
.tr .nm{font-weight:600;font-family:'Sora'}
.srun .meta{font-size:11.5px;color:var(--muted)}
.mbtn{font-family:'Sora';font-weight:600;font-size:12px;color:#fff;background:linear-gradient(180deg,#F0484D,#E43A3F);padding:7px 14px;border-radius:9px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.tile{background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px}
.tile .tv{font-family:'Sora';font-weight:800;font-size:16px;color:var(--ink)}
.tile .tl{font-size:10px;color:var(--muted);margin-top:2px}
.chart{display:flex;align-items:flex-end;gap:9px;height:92px}
.chart .bar{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#F0484D,rgba(228,58,63,.28))}
.cl{display:flex;gap:9px;margin-top:6px}
.cl span{flex:1;text-align:center;font-size:10px;color:var(--muted)}
.feed{display:flex;flex-direction:column;gap:7px}
.frw .nm{font-weight:600;font-family:'Sora'}
.frw .mono{font-variant-numeric:tabular-nums;color:var(--muted)}
.frw .ot{font-size:9px;font-weight:700;padding:2px 6px;border-radius:6px;background:rgba(240,194,74,.22);color:#9A7B16;justify-self:start}
.aprv{display:flex;flex-direction:column;gap:8px}
.arw{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:#fff;border:1px solid var(--line)}
.arw .ai{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;background:rgba(24,18,15,.05)}
.arw .at{font-family:'Sora';font-weight:600;font-size:12.5px;color:var(--ink)}
.arw .as{font-size:10.5px;color:var(--muted)}
.arw .lvl{margin-left:auto;font-size:9.5px;color:var(--muted);text-align:right;margin-right:8px;line-height:1.3}
.arw .ok{font-size:11px;font-weight:700;color:#1E7A4F;background:rgba(30,122,79,.14);border:1px solid rgba(30,122,79,.3);padding:5px 11px;border-radius:8px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr;gap:32px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.fcol h5{font-family:'Sora';font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#C7BFB8;margin-bottom:16px}
.fcol a{display:block;color:var(--muted);margin-bottom:10px;transition:.15s}
.fcol a:hover{color:var(--ink)}
.fbrand img{height:32px;margin-bottom:16px}
.fbrand p{font-size:13.5px;line-height:1.6;max-width:30ch;margin-bottom:18px}
.fsel{display:inline-flex;align-items:center;gap:8px;font-family:'Sora';font-weight:600;font-size:13px;color:var(--ink);border:1px solid var(--line2);border-radius:9px;padding:8px 13px}
.appbadges{display:flex;gap:10px;margin-top:16px}
.appbadge{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line2);border-radius:10px;padding:8px 13px;font-family:'Sora';color:var(--ink)}
.appbadge svg{width:20px;height:20px}
.appbadge small{display:block;font-size:9.5px;color:var(--muted);font-weight:500}
.appbadge b{font-size:13px;font-weight:600}
.fbot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:center;padding-top:26px}
.fsoc{display:flex;gap:12px}
.fsoc a{width:34px;height:34px;border-radius:8px;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--muted)}
.fsoc a:hover{color:var(--ink);border-color:var(--ink)}
svg.i{width:1em;height:1em;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block}
.shot img{display:block;width:100%;height:auto;border-radius:inherit}
.lightband .shot{background:#fff;border:1px solid rgba(24,18,15,.12);box-shadow:0 24px 50px -30px rgba(40,28,24,.30)}

/* --- added by the consolidation build: shared nav chrome --- */
.logo img{height:34px;display:block}
.nav-cta{display:flex;gap:12px;align-items:center}
.nav-login{font-size:14.5px;font-weight:600;color:var(--muted)}
.nav-login:hover{color:var(--ink)}