/* ============================================================
   REVAH TECH — Shared Design System
   A single source of truth for the premium UI used across
   every page: tokens, layout, navigation, components & motion.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root{
    /* Brand navy scale */
    --navy-900:#081229;
    --navy-800:#0c1a3d;
    --navy-700:#112554;
    --navy-600:#1a3673;
    --navy-500:#214488;

    /* Accents */
    --blue:#60a5fa;
    --blue-strong:#3b82f6;
    --indigo:#6366f1;
    --purple:#a78bfa;
    --purple-strong:#8b5cf6;
    --green:#4ade80;
    --red:#f87171;

    /* Text */
    --text:#ffffff;
    --text-dim:#cbd5e1;
    --text-dimmer:#94a3b8;

    /* Surfaces */
    --glass-bg:rgba(17,37,84,.55);
    --glass-border:rgba(255,255,255,.10);
    --glass-border-hover:rgba(167,139,250,.45);

    /* Gradients */
    --grad-accent:linear-gradient(90deg,#60a5fa,#a78bfa);
    --grad-btn:linear-gradient(90deg,#3b82f6,#6366f1);
    --grad-soft:linear-gradient(135deg,rgba(17,37,84,.85),rgba(26,54,115,.7));

    /* Shape & depth */
    --radius:20px;
    --radius-sm:12px;
    --radius-pill:40px;
    --shadow-md:0 10px 30px rgba(0,0,0,.30);
    --shadow-lg:0 24px 60px rgba(0,0,0,.45);
    --glow:0 0 30px rgba(96,165,250,.25);

    /* Motion */
    --ease:cubic-bezier(.16,1,.3,1);
    --ease-out:cubic-bezier(.22,.61,.36,1);
    --t-fast:.25s;
    --t:.45s;

    /* Layout */
    --max:1200px;
    --nav-h:84px;
    --gutter:clamp(20px,6vw,80px);
}

/* ---------- Reset ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    color:var(--text);
    background-color:var(--navy-600);
    line-height:1.6;
    min-height:100vh;
    overflow-x:hidden;
    position:relative;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

/* Animated ambient background (sits behind everything, fixed) */
body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-2;
    background:
        radial-gradient(1100px 600px at 12% -10%, rgba(99,102,241,.28), transparent 60%),
        radial-gradient(900px 600px at 95% 0%, rgba(96,165,250,.22), transparent 55%),
        radial-gradient(1000px 700px at 50% 115%, rgba(139,92,246,.20), transparent 60%),
        var(--navy-600);
    background-image:url('../images/bg_pattern.png'),
        radial-gradient(1100px 600px at 12% -10%, rgba(99,102,241,.28), transparent 60%),
        radial-gradient(900px 600px at 95% 0%, rgba(96,165,250,.22), transparent 55%),
        radial-gradient(1000px 700px at 50% 115%, rgba(139,92,246,.20), transparent 60%);
    background-size:cover, auto, auto, auto;
    background-position:center;
    background-attachment:fixed;
}

/* Slow drifting aurora orbs for subtle motion */
body::after{
    content:"";
    position:fixed;
    inset:-20%;
    z-index:-1;
    pointer-events:none;
    background:
        radial-gradient(420px 420px at 20% 30%, rgba(96,165,250,.18), transparent 70%),
        radial-gradient(520px 520px at 80% 70%, rgba(167,139,250,.16), transparent 70%);
    animation:auroraDrift 22s ease-in-out infinite alternate;
}

@keyframes auroraDrift{
    0%   { transform:translate3d(-3%,-2%,0) scale(1); }
    50%  { transform:translate3d(3%,2%,0)  scale(1.06); }
    100% { transform:translate3d(-2%,3%,0) scale(1.02); }
}

/* ---------- Typography ---------- */
h1,h2,h3,h4{
    font-family:'Space Grotesk','Inter',sans-serif;
    line-height:1.15;
    font-weight:700;
    letter-spacing:-.01em;
}

.gradient-text{
    background:var(--grad-accent);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

::selection{ background:rgba(96,165,250,.35); color:#fff; }

a{ color:inherit; }

/* ---------- Layout helpers ---------- */
.container{
    width:100%;
    max-width:var(--max);
    margin-inline:auto;
    padding-inline:var(--gutter);
}

.section{ padding:clamp(60px,9vw,110px) 0; }
.section-tight{ padding:clamp(40px,6vw,70px) 0; }

.eyebrow{
    display:inline-block;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--blue);
    padding:7px 16px;
    border-radius:var(--radius-pill);
    background:rgba(96,165,250,.10);
    border:1px solid rgba(96,165,250,.35);
    margin-bottom:20px;
}

.section-title{
    font-size:clamp(1.9rem,4vw,2.9rem);
    margin-bottom:18px;
}

.section-lead{
    color:var(--text-dim);
    font-size:1.08rem;
    max-width:680px;
    line-height:1.8;
}

.text-center{ text-align:center; }
.center-x{ margin-inline:auto; }

/* ============================================================
   NAVBAR
   ============================================================ */
.site-nav{
    position:sticky;
    top:0;
    z-index:900;
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:var(--nav-h);
    padding:0 var(--gutter);
    transition:background var(--t) var(--ease),
               backdrop-filter var(--t) var(--ease),
               box-shadow var(--t) var(--ease),
               border-color var(--t) var(--ease);
    border-bottom:1px solid transparent;
}

.site-nav.scrolled{
    background:rgba(10,18,41,.72);
    backdrop-filter:blur(16px) saturate(140%);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    border-bottom-color:rgba(255,255,255,.08);
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.nav-logo{ display:inline-flex; align-items:center; transition:transform var(--t-fast) var(--ease); }
.nav-logo:hover{ transform:translateY(-1px); }
.nav-logo img{ height:42px; display:block; }

.menu-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
    font-weight:600;
    font-size:1rem;
    padding:9px 18px;
    border-radius:var(--radius-pill);
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.05);
    transition:all var(--t-fast) var(--ease);
    user-select:none;
}
.menu-btn:hover{
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.3);
    transform:translateY(-1px);
}

/* Animated hamburger lines */
.burger{ display:inline-flex; flex-direction:column; gap:5px; width:22px; }
.burger span{
    height:2px; width:100%;
    background:currentColor; border-radius:2px;
    transition:transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

/* ============================================================
   SIDEBAR (slide-in nav)
   ============================================================ */
.nav-overlay{
    position:fixed; inset:0; z-index:990;
    background:rgba(4,9,24,.55);
    backdrop-filter:blur(3px);
    opacity:0; visibility:hidden;
    transition:opacity var(--t) var(--ease), visibility var(--t) var(--ease);
}
.nav-overlay.active{ opacity:1; visibility:visible; }

#revah-sidebar{
    position:fixed; top:0; right:0; z-index:1000;
    width:min(360px,100%); height:100dvh;
    background:linear-gradient(180deg,var(--navy-700),var(--navy-800));
    border-left:1px solid rgba(255,255,255,.08);
    padding:36px 40px;
    box-shadow:-20px 0 60px rgba(0,0,0,.5);
    transform:translateX(105%);
    transition:transform var(--t) var(--ease);
    display:flex; flex-direction:column;
    overflow-y:auto;
}
#revah-sidebar.active{ transform:translateX(0); }

.sidebar-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:48px; }
.sidebar-header .brand{ height:34px; opacity:.9; }

.close-btn{
    display:inline-flex; align-items:center; gap:10px;
    cursor:pointer; font-weight:600; font-size:.95rem;
    padding:8px 14px; border-radius:var(--radius-pill);
    border:1px solid rgba(255,255,255,.14);
    transition:all var(--t-fast) var(--ease);
}
.close-btn:hover{ background:rgba(255,255,255,.1); }
.close-btn svg{ width:16px; height:16px; }

.revah-links{ list-style:none; display:flex; flex-direction:column; gap:6px; }

.revah-links > li{
    opacity:0; transform:translateX(24px);
}
/* Staggered entrance when sidebar opens */
#revah-sidebar.active .revah-links > li{
    animation:linkIn .5s var(--ease) forwards;
}
#revah-sidebar.active .revah-links > li:nth-child(1){ animation-delay:.06s; }
#revah-sidebar.active .revah-links > li:nth-child(2){ animation-delay:.12s; }
#revah-sidebar.active .revah-links > li:nth-child(3){ animation-delay:.18s; }
#revah-sidebar.active .revah-links > li:nth-child(4){ animation-delay:.24s; }
#revah-sidebar.active .revah-links > li:nth-child(5){ animation-delay:.30s; }
@keyframes linkIn{ to{ opacity:1; transform:translateX(0);} }

.revah-links a{
    text-decoration:none; color:var(--text);
    display:flex; align-items:center; gap:12px;
    font-size:1.12rem; font-weight:500;
    padding:12px 14px; border-radius:12px;
    transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.revah-links a:hover{ background:rgba(255,255,255,.07); color:#fff; transform:translateX(4px); }

/* Active page highlight */
.revah-links a.is-active{
    background:rgba(96,165,250,.14);
    color:#fff;
    box-shadow:inset 3px 0 0 var(--blue);
}

.revah-arrow{
    display:inline-block; font-size:.7rem;
    transition:transform var(--t-fast) var(--ease);
    color:var(--text-dimmer);
}
.revah-toggle[aria-expanded="true"] .revah-arrow{ transform:rotate(90deg); color:var(--blue); }

.revah-submenu{
    max-height:0; overflow:hidden; opacity:0;
    transition:max-height var(--t) var(--ease), opacity var(--t) var(--ease), margin var(--t) var(--ease);
    margin-left:18px;
}
.revah-submenu.show-menu{ max-height:320px; opacity:1; margin:6px 0 6px 18px; }
.revah-submenu-list{ list-style:none; display:flex; flex-direction:column; gap:2px;
    border-left:1px solid rgba(255,255,255,.12); padding-left:8px; }
.revah-submenu-list a{ color:var(--text-dim); font-size:1rem; }

.sidebar-cta{ margin-top:auto; padding-top:28px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
    --shine:0;
    position:relative;
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding:14px 32px; border-radius:var(--radius-pill);
    font-weight:600; font-size:1rem; text-decoration:none;
    cursor:pointer; border:1px solid transparent;
    transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
               background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
    overflow:hidden; white-space:nowrap;
}
/* moving sheen */
.btn::after{
    content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
    transform:skewX(-20deg); transition:left .6s var(--ease);
}
.btn:hover::after{ left:130%; }

.btn-primary{ background:var(--grad-btn); color:#fff; box-shadow:0 8px 22px rgba(59,130,246,.4); }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(59,130,246,.6); }

.btn-light{ background:#fff; color:var(--navy-600); }
.btn-light:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(255,255,255,.25); }

.btn-ghost{ background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.22); }
.btn-ghost:hover{ background:rgba(255,255,255,.12); transform:translateY(-3px); border-color:rgba(255,255,255,.4); }

.btn-arrow{ transition:transform var(--t-fast) var(--ease); }
.btn:hover .btn-arrow{ transform:translateX(4px); }

/* ============================================================
   GLASS CARDS
   ============================================================ */
.glass{
    position:relative;
    background:var(--glass-bg);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid var(--glass-border);
    border-radius:var(--radius);
    padding:36px;
    transition:transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.glass:hover{
    transform:translateY(-6px);
    border-color:var(--glass-border-hover);
    box-shadow:var(--shadow-lg), inset 0 0 24px rgba(167,139,250,.06);
}

/* Pointer-follow spotlight (enhanced in JS via --mx/--my) */
.spotlight::before{
    content:""; position:absolute; inset:0; border-radius:inherit;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(96,165,250,.14), transparent 45%);
    opacity:0; transition:opacity var(--t) var(--ease); pointer-events:none;
}
.spotlight:hover::before{ opacity:1; }

.icon-tile{
    width:58px; height:58px; border-radius:15px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:22px;
    background:rgba(96,165,250,.10);
    border:1px solid rgba(96,165,250,.3);
    transition:transform var(--t) var(--ease), background var(--t) var(--ease);
}
.glass:hover .icon-tile{ transform:scale(1.08) rotate(-3deg); background:rgba(96,165,250,.18); }
.icon-tile svg{ width:30px; height:30px; stroke:var(--blue); }

.card-title{ font-size:1.3rem; font-weight:700; margin-bottom:12px; }
.card-desc{ color:var(--text-dim); font-size:1rem; line-height:1.7; }

/* Generic responsive grid */
.grid{ display:grid; gap:28px; }
.grid-auto{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }

/* ============================================================
   SCROLL-REVEAL MOTION
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); will-change:opacity,transform; }
.reveal.in{ opacity:1; transform:none; }
.reveal-left{ opacity:0; transform:translateX(-32px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-left.in{ opacity:1; transform:none; }
.reveal-right{ opacity:0; transform:translateX(32px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-right.in{ opacity:1; transform:none; }
.reveal-scale{ opacity:0; transform:scale(.94); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-scale.in{ opacity:1; transform:none; }
/* No-JS / pre-JS fallback: never hide content unless JS is present to reveal it.
   An inline <script> in each <head> adds the `js` class before first paint. */
html:not(.js) .reveal,
html:not(.js) .reveal-left,
html:not(.js) .reveal-right,
html:not(.js) .reveal-scale,
html:not(.js) [data-stagger] > *{ opacity:1 !important; transform:none !important; }

/* stagger children */
[data-stagger] > *{ opacity:0; transform:translateY(26px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
[data-stagger].in > *{ opacity:1; transform:none; }
[data-stagger].in > *:nth-child(1){ transition-delay:.05s; }
[data-stagger].in > *:nth-child(2){ transition-delay:.13s; }
[data-stagger].in > *:nth-child(3){ transition-delay:.21s; }
[data-stagger].in > *:nth-child(4){ transition-delay:.29s; }
[data-stagger].in > *:nth-child(5){ transition-delay:.37s; }
[data-stagger].in > *:nth-child(6){ transition-delay:.45s; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
    margin-top:40px;
    border-top:1px solid rgba(255,255,255,.08);
    background:rgba(8,18,41,.55);
    backdrop-filter:blur(10px);
}
.footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1.2fr;
    gap:40px;
    padding:64px 0 40px;
}
.footer-brand img{ height:40px; margin-bottom:18px; }
.footer-brand p{ color:var(--text-dimmer); max-width:280px; line-height:1.7; font-size:.95rem; }
.footer-col h4{ font-size:1rem; margin-bottom:18px; color:#fff; }
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:11px; }
.footer-col a{ color:var(--text-dimmer); text-decoration:none; font-size:.95rem; transition:color var(--t-fast) var(--ease), padding var(--t-fast) var(--ease); }
.footer-col a:hover{ color:#fff; padding-left:4px; }
.footer-social{ display:flex; gap:12px; margin-top:6px; }
.footer-social a{
    width:40px; height:40px; border-radius:11px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
    transition:all var(--t-fast) var(--ease);
}
.footer-social a:hover{ background:var(--grad-btn); transform:translateY(-3px); border-color:transparent; }
.footer-social svg{ width:18px; height:18px; fill:#fff; }
.footer-bottom{
    border-top:1px solid rgba(255,255,255,.07);
    padding:22px 0; text-align:center;
    color:var(--text-dimmer); font-size:.88rem;
}

/* ============================================================
   UTILITY OVERLAYS — scroll progress & back-to-top
   ============================================================ */
.scroll-progress{
    position:fixed; top:0; left:0; height:3px; width:0;
    background:var(--grad-accent); z-index:1100;
    box-shadow:0 0 12px rgba(96,165,250,.6);
    transition:width .1s linear;
}

.to-top{
    position:fixed; right:24px; bottom:24px; z-index:850;
    width:48px; height:48px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--grad-btn); color:#fff; border:none; cursor:pointer;
    box-shadow:0 10px 24px rgba(59,130,246,.45);
    opacity:0; transform:translateY(20px) scale(.8); pointer-events:none;
    transition:opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ transform:translateY(-3px); }
.to-top svg{ width:22px; height:22px; }

/* Page-load fade for first viewport content */
.page-enter{ animation:pageEnter .8s var(--ease) both; }
@keyframes pageEnter{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:none; } }

/* Custom scrollbar */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:rgba(255,255,255,.04); }
*::-webkit-scrollbar-thumb{ background:linear-gradient(var(--blue),var(--purple)); border-radius:10px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:linear-gradient(var(--blue-strong),var(--purple-strong)); background-clip:padding-box; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:860px){
    .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media(max-width:560px){
    :root{ --nav-h:72px; }
    .nav-logo img{ height:36px; }
    .menu-btn span.label{ display:none; }
    .menu-btn{ padding:10px; }
    .footer-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   ACCESSIBILITY — honor reduced motion
   ============================================================ */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
    body::after{ animation:none; }
    .reveal,.reveal-left,.reveal-right,.reveal-scale,[data-stagger] > *{ opacity:1 !important; transform:none !important; }
}