/* Basyra hero — extracted & scoped from monolith landing page */

:root {
  --bg: #FAFAF9;
  --ink: #1A1A1A;
  --ink-muted: #52525B;
  --ink-quiet: #A1A1AA;
  --accent: #2D6BF7;
  --accent-soft: #EEF2FF;
  --accent-strong: #1D4FD8;
  --accent-line: #93B4F6;
  --line-strong: #D6D3D1;
  --on-accent: #FFFFFF;
  --font-display: 'Urbanist', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Urbanist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Fragment Mono', 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
}

/* ---- hero rules ---- */

#basyra-hero .h-hero {
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(3rem, 7.6vw, 7rem);
    line-height:1.02;
    letter-spacing:-0.03em;
    max-width:18ch;
    color:#0A0A0A;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
    font-optical-sizing:auto;
  }

#basyra-hero .hero {
    position:relative;
    overflow:hidden;
    padding: 88px 24px 0;
    background:
      radial-gradient(ellipse 90% 60% at 50% 0%, #F0F5FA 0%, transparent 55%),
      radial-gradient(ellipse 70% 40% at 50% 40%, #FAF3EC 0%, transparent 65%),
      radial-gradient(ellipse 70% 55% at 50% 90%, rgba(122,31,61,0.20) 0%, rgba(122,31,61,0.10) 30%, transparent 65%),
      var(--bg);
  }

#basyra-hero .hero::after {
    content:''; position:absolute; inset:0; pointer-events:none;
    background: radial-gradient(ellipse 60% 40% at 50% 90%, rgba(122,31,61,0.18) 0%, transparent 60%);
    animation:hero-glow-breath 8s ease-in-out infinite alternate;
  }

#basyra-hero .hero-text {
    position:relative; z-index:5;
    max-width:900px; width:100%; margin: 0 auto 40px;
    text-align:center;
    will-change:transform, opacity;
  }

#basyra-hero .hero-viz {
    position:relative;
    max-width:1400px; margin: 0 auto;
    padding: 0 24px;
    perspective:1400px;
    /* Big negative margin so the top of the dashboard tucks up beside the clouds */
    z-index:2;
  }

#basyra-hero .hero-dash-wrap {
    position:relative; z-index:2;
    will-change: transform;
  }

#basyra-hero .hero-dash { width:100%; }

#basyra-hero .hero-dash .rop-dash__panel {
    box-shadow:
      0 60px 120px -30px rgba(122,31,61,0.45),
      0 30px 60px -20px rgba(122,31,61,0.28),
      0 12px 28px -8px rgba(0,0,0,0.16),
      0 0 0 1px rgba(122,31,61,0.10) !important;
    border-radius:18px;
  }

#basyra-hero .hero-cloud-back,
#basyra-hero .hero-cloud {
    position:absolute; left:-4%; right:-4%; width:108%;
    pointer-events:none;
    will-change:transform, opacity;
    z-index:3;
  }

#basyra-hero .hero-cloud-back { top:-110px; opacity:0.55; z-index:1; }

#basyra-hero .hero-cloud { top:-60px; opacity:0.88; z-index:3; }

#basyra-hero .hero-pill {
    display:inline-flex; align-items:center;
    font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; font-weight:600;
    color:var(--accent-strong); background:var(--accent-soft);
    border:1px solid var(--accent-line); border-radius:999px;
    padding:7px 16px; margin-bottom:22px;
  }

#basyra-hero .hero-text .h-hero {
    color:#0A0A0A;
    font-size:clamp(46px, 8vw, 128px);
    line-height:0.98;
    letter-spacing:-0.045em;
    margin:0 auto;
    max-width:14ch;
    font-weight:700;
    -webkit-font-smoothing:antialiased;
  }

#basyra-hero .h-hero .mul,
#basyra-hero .h-hero .mul-second { color:var(--accent); font-weight:700; }

#basyra-hero .hero-text .hero-sub { font-family:var(--font-body); font-size:19px; color:var(--ink-muted); margin-top:20px; margin-inline:auto; max-width:52ch; line-height:1.55; }

#basyra-hero .hero-text .hero-proof { font-family:var(--font-mono); font-size:12px; color:var(--ink-quiet); margin-top:14px; letter-spacing:.02em; }

#basyra-hero .hero-cta-row { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:32px; }

#basyra-hero .hero-cta-row .cta { display:inline-flex; align-items:center; gap:6px; padding:13px 26px; border-radius:8px; font-size:15px; font-weight:600; text-decoration:none; border:1px solid transparent; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease; }

#basyra-hero .hero-cta-row .cta.primary { background:var(--accent); color:var(--on-accent); box-shadow:0 1px 2px rgba(90,15,40,.15); }

#basyra-hero .hero-cta-row .cta.primary:hover { background:var(--accent-strong); transform:translateY(-1px); box-shadow:0 6px 16px -6px rgba(90,15,40,.45); }

#basyra-hero .hero-cta-row .cta.ghost { background:transparent; color:var(--ink); border-color:var(--line-strong); }

#basyra-hero .hero-cta-row .cta.ghost:hover { border-color:var(--accent); color:var(--accent); }

#basyra-hero .hero-dash [data-anim="fadein"] { opacity:0; transition:opacity .8s ease .6s; }

#basyra-hero .hero-nav-item { position:relative; }

#basyra-hero .hero-navlink-product { display:inline-flex; align-items:center; gap:5px; }

#basyra-hero .hero-navlink-product svg { transition:transform .18s ease; opacity:.55; }

#basyra-hero .hero-nav-item:hover .hero-navlink-product svg,
#basyra-hero .hero-nav-item:focus-within .hero-navlink-product svg { transform:rotate(180deg); }

#basyra-hero .hero-megamenu {
    position:absolute; top:calc(100% + 14px); left:50%;
    width:min(400px, 92vw);
    transform:translateX(-50%) translateY(8px);
    background:rgba(255,255,255,0.86);
    -webkit-backdrop-filter:saturate(160%) blur(18px);
    backdrop-filter:saturate(160%) blur(18px);
    border:1px solid rgba(20,27,52,0.06);
    border-radius:20px; padding:10px;
    box-shadow:0 24px 60px -20px rgba(15,10,5,0.16), 0 4px 14px -6px rgba(15,10,5,0.08);
    display:flex; flex-direction:column; gap:2px;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index:95;
  }

#basyra-hero .hero-nav-item:hover .hero-megamenu,
#basyra-hero .hero-nav-item:focus-within .hero-megamenu,
#basyra-hero .hero-nav-item.is-open .hero-megamenu {
    opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
  }
#basyra-hero .hero-nav-item.is-closed:hover .hero-megamenu,
#basyra-hero .hero-nav-item.is-closed:focus-within .hero-megamenu {
    opacity:0; visibility:hidden; pointer-events:none; transform:translateX(-50%) translateY(8px);
  }

#basyra-hero .hero-megamenu-item {
    display:flex; gap:14px; align-items:center; padding:12px 14px; border-radius:12px;
    text-decoration:none; color:inherit;
    transition:background .18s ease, transform .18s ease;
  }

#basyra-hero .hero-megamenu-item:hover,
#basyra-hero .hero-megamenu-item:focus-visible { background:rgba(45,107,247,0.06); outline:none; }

#basyra-hero .hero-mm-icon {
    flex:0 0 22px; width:22px; height:22px; display:flex; align-items:center; justify-content:center;
    background:transparent; color:#4A5568;
    transition:color .18s ease, transform .18s ease;
  }
#basyra-hero .hero-megamenu-item:hover .hero-mm-icon,
#basyra-hero .hero-megamenu-item:focus-visible .hero-mm-icon { color:#2D6BF7; transform:translateX(1px); }

#basyra-hero .hero-mm-name { display:block; font-family:'Urbanist','Inter',sans-serif; font-weight:600; font-size:14.5px; color:#141B34; letter-spacing:-0.005em; line-height:1.25; }

#basyra-hero .hero-mm-desc { display:block; font-family:'Urbanist','Inter',sans-serif; font-weight:400; font-size:12.5px; color:#6B7280; margin-top:3px; line-height:1.4; }

#basyra-hero .hero-navlink { color:#2A3340; text-decoration:none; transition:color .15s ease; }

#basyra-hero .hero-navlink:hover { color:#1D4FD8; }

#basyra-hero #hero-lang-btn:hover { border-color:#C7D4EA; background:#F7F9FC; }

#basyra-hero .hero-lang-pick:hover { background:#F1F5FE; }

#basyra-hero #hero-nav-cta:hover { filter:brightness(1.04); box-shadow:0 8px 16px -3px rgba(37,99,235,0.5),0 2px 4px rgba(37,99,235,0.3),0 1px 0 rgba(255,255,255,0.45) inset; transform:translateY(-1px); color:#fff; }

#basyra-hero #hero-nav-cta:active { transform:translateY(0); color:#fff; }

#basyra-hero #hero-cta-primary:hover { filter:brightness(1.04); box-shadow:0 8px 18px -3px rgba(37,99,235,0.5),0 2px 4px rgba(37,99,235,0.3),0 1px 0 rgba(255,255,255,0.45) inset; transform:translateY(-1px); color:#fff; }

#basyra-hero #hero-cta-primary:active { transform:translateY(0); box-shadow:0 1px 3px rgba(37,99,235,0.4),0 1px 2px rgba(15,23,42,0.2) inset; }

#basyra-hero #hero-cta-ghost:hover { color:#0A0A0A; background:#E6E6EC; }

#basyra-hero #hero-cta-ghost:active { color:#0A0A0A; }

/* ---- hero media queries ---- */

@media (max-width:768px) {
#basyra-hero .hero-stage { height:140vh; }
#basyra-hero .hero-dash-wrap .hero-dash { width:96%; }
#basyra-hero .h-hero { font-size:clamp(36px, 8vw, 56px); }
}

@media (prefers-reduced-motion: reduce) {
#basyra-hero .hero-stage { height:100vh; }
#basyra-hero .hero-sky,
#basyra-hero .hero-text { transform:none !important; opacity:1 !important; }
#basyra-hero .hero-dash-wrap { transform:translateX(-50%) translateY(-8%) !important; opacity:1 !important; }
#basyra-hero .hero-cloud { transform:none !important; opacity:0.55 !important; }
#basyra-hero .hero-cloud-back { transform:none !important; opacity:0.35 !important; }
#basyra-hero .hero-sky::before,
#basyra-hero .hero-sky::after { animation:none; }
#basyra-hero .hero-dash-wrap .hero-dash { transform:none !important; }
#basyra-hero .hero-dash [data-anim="fadein"] { opacity:1 !important; transition:none !important; }
}

@media (max-width:900px) {
#basyra-hero .hero-megamenu { display:none !important; }
}

/* ---- hero keyframes ---- */

@keyframes hero-glow-breath { from{ opacity:0.7; } to{ opacity:1; } }

@keyframes hero-driftBack {0%{transform:translate(-50%,0) scale(1.1);}50%{transform:translate(-48%,-1.4vh) scale(1.12);}100%{transform:translate(-50%,0) scale(1.1);}}

@keyframes hero-smk1 {0%,100%{transform:rotate(-8deg) translate(0,0);}50%{transform:rotate(-8deg) translate(26px,-10px);}}

@keyframes hero-smk2 {0%,100%{transform:rotate(11deg) translate(0,0);}50%{transform:rotate(11deg) translate(-30px,8px);}}

@keyframes hero-smk3 {0%,100%{transform:rotate(4deg) translate(0,0);}50%{transform:rotate(4deg) translate(18px,12px);}}

@keyframes hero-smk4 {0%,100%{transform:rotate(-5deg) translate(0,0);}50%{transform:rotate(-5deg) translate(-22px,-8px);}}

@keyframes hero-caretBlink {0%,100%{opacity:1;}50%{opacity:0;}}