/* Public pages (landing and sign-in) of Arunika People. Style cues from the BNI / Wondr references: white dominant, orange arcs, teal icon tiles,
   lime pills, purple accents, big rounded cards, Hanken Grotesk. The brand itself stays Arunika (own logo and name). */
@font-face{font-family:"Hanken Grotesk";font-weight:400;font-display:swap;src:url(/static/vendor/fonts/hanken-400.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:500;font-display:swap;src:url(/static/vendor/fonts/hanken-500.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:600;font-display:swap;src:url(/static/vendor/fonts/hanken-600.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:700;font-display:swap;src:url(/static/vendor/fonts/hanken-700.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(/static/vendor/fonts/plex-mono-400.woff2) format("woff2")}

:root{
  --orange:#FE8202;--orange-hi:#FFA94D;--orange-lo:#E56F00;--orange-deep:#B84A00;--orange-lt:#FFF1E3;
  --teal:#3EDAD6;--teal-deep:#0B6B68;--teal-lt:#E3F9F8;--lime:#DAF232;--purple:#7A62C6;--purple-lt:#EFEBFA;
  --ink:#17181B;--ink-2:#566070;--ink-3:#667080;--line:#E8EAEE;--surface:#F6F7F9;--white:#fff;--green:#1F9D6B;--red:#D64545;
  --shadow:0 1px 2px rgba(23,24,27,.05),0 12px 32px -12px rgba(23,24,27,.18);--shadow-lg:0 2px 4px rgba(23,24,27,.06),0 28px 60px -20px rgba(23,24,27,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--white);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
.wrap{width:min(1200px,100% - 48px);margin-inline:auto}
.mono{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--teal-deep);outline-offset:2px;border-radius:8px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:3rem;padding:0 1.5rem;border-radius:999px;border:1.5px solid transparent;font:inherit;font-weight:700;font-size:.97rem;
  cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--orange);color:var(--ink);box-shadow:0 8px 20px -8px rgba(254,130,2,.7)}
.btn-primary:hover{background:var(--orange-hi);box-shadow:0 12px 26px -8px rgba(254,130,2,.8)}
.btn-ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:#2c2f36}
.btn-light{background:#fff;color:var(--ink)}.btn-light:hover{background:var(--lime)}
.btn-sm{height:2.5rem;padding:0 1.15rem;font-size:.9rem}
.btn[disabled]{opacity:.6;cursor:progress}

/* brand */
.brand{display:inline-flex;align-items:center;gap:.65rem;font-size:1.15rem;font-weight:500;letter-spacing:-.01em}
.brand b{font-weight:800;letter-spacing:-.02em}.brand .wm{position:relative;line-height:1.1}
.brand .wm:after{content:"";position:absolute;left:0;bottom:-4px;width:1.6rem;height:3px;border-radius:2px;background:var(--teal)}
.brand .wm span{color:var(--orange-deep);font-weight:600}
.brand svg{flex:none}
.pill{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem .4rem .5rem;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:.82rem;font-weight:600;color:var(--ink-2)}
.pill i{display:inline-block;width:.6rem;height:.6rem;margin-left:.3rem;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(218,242,50,.35)}
.tag{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .65rem;border-radius:999px;font-size:.75rem;font-weight:700;background:var(--surface);color:var(--ink-2)}
.tag.lime{background:var(--lime);color:var(--ink)}.tag.teal{background:var(--teal-lt);color:var(--teal-deep)}.tag.orange{background:var(--orange-lt);color:var(--orange-deep)}.tag.purple{background:var(--purple-lt);color:#5a45a8}
.tile{display:inline-flex;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;border-radius:.9rem;background:var(--teal-lt);color:var(--teal-deep);font-size:1.35rem;flex:none}
.tile.orange{background:var(--orange-lt);color:var(--orange-deep)}.tile.purple{background:var(--purple-lt);color:#5a45a8}.tile.lime{background:#F6FBC4;color:#5d6a00}.tile.dark{background:var(--ink);color:var(--lime)}

/* reveal on scroll (only when JS is available) */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}.js .rv{opacity:1;transform:none}}

/* floating motion */
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes bob2{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(8px) rotate(2deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes dots{0%,80%,100%{opacity:.25}40%{opacity:1}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,157,107,.5)}100%{box-shadow:0 0 0 10px rgba(31,157,107,0)}}