/* ==========================================================================
   ERPTech — Shared Design System
   Frosted Glassmorphism · Enterprise Consulting
   ========================================================================== */

:root{
  --navy: #0f172a;
  --slate: #475569;
  --slate-light: #94a3b8;
  --accent: #2563eb;
  --accent-light: #60a5fa;
  --accent-dark: #1d4ed8;
  --sky-from: #f0f9ff;
  --sky-to: #e0f2fe;

  --glass-bg: rgba(255,255,255,0.65);
  --glass-bg-strong: rgba(255,255,255,0.8);
  --glass-border: rgba(255,255,255,0.5);
  --glass-shadow: 0 8px 32px 0 rgba(31,38,135,0.07);
  --glass-shadow-lg: 0 20px 60px -12px rgba(15,23,42,0.16);

  --navy-glass-bg: rgba(15,23,42,0.85);
  --navy-glass-border: rgba(255,255,255,0.08);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--slate);
  background: linear-gradient(180deg, var(--sky-from) 0%, var(--sky-to) 45%, #eaf4fd 100%);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

h1,h2,h3,h4,h5{
  font-family: 'Sora', 'Inter', sans-serif;
  color: var(--navy);
  margin: 0;
  letter-spacing: -0.02em;
}

p{ margin:0; }
a{ text-decoration:none; color:inherit; }
button{ font-family:inherit; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }

/* ---------- Ambient mesh blobs ---------- */
.mesh-blob{
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
}
.blob-1{ width:520px; height:520px; top:-160px; left:-120px; background: radial-gradient(circle, #93c5fd 0%, transparent 70%); }
.blob-2{ width:600px; height:600px; top:20%; right:-220px; background: radial-gradient(circle, #bfdbfe 0%, transparent 70%); }
.blob-3{ width:480px; height:480px; bottom:-180px; left:30%; background: radial-gradient(circle, #7dd3fc 0%, transparent 70%); }

/* ---------- Glass primitives ---------- */
.glass{
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.glass-strong{
  background: var(--glass-bg-strong);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
}
.glass-navy{
  background: var(--navy-glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--navy-glass-border);
}

.container{ max-width: 1240px; margin:0 auto; padding: 0 24px; }
.section{ padding: 96px 0; position: relative; }
.section-sm{ padding: 56px 0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before{ content:''; width:18px; height:2px; background: var(--accent); border-radius:2px; }

.h1{ font-size: clamp(2.4rem, 4.6vw, 3.8rem); font-weight: 700; line-height: 1.08; }
.h2{ font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 700; line-height: 1.15; }
.h3{ font-size: 1.4rem; font-weight: 700; line-height: 1.25; }
.lead{ font-size: 1.15rem; line-height: 1.65; color: var(--slate); }
.body-text{ font-size: 1rem; line-height: 1.7; color: var(--slate); }

/* ---------- Buttons ---------- */
.btn{
  position: relative;
  display: inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 26px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  overflow: hidden;
  white-space: nowrap;
}
.btn-primary{
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #fff;
  box-shadow: 0 10px 25px -8px rgba(37,99,235,0.55);
}
.btn-primary:hover{ transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 32px -8px rgba(37,99,235,0.6); }
.btn-primary::after{
  content:''; position:absolute; top:0; left:-75%; width:50%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}
.btn-primary:hover::after{ left: 130%; }

.btn-glass{
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(37,99,235,0.25);
  color: var(--accent-dark);
  box-shadow: var(--glass-shadow);
}
.btn-glass:hover{ transform: translateY(-2px) scale(1.02); background: rgba(255,255,255,0.85); border-color: rgba(37,99,235,0.45); }

.btn-sm{ padding: 9px 18px; font-size: 0.85rem; border-radius: 10px; }
.btn-block{ width:100%; }

/* ---------- Navbar ---------- */
#site-header{ position: sticky; top:0; z-index: 100; }
.navbar{
  margin: 14px auto 0;
  max-width: 1240px;
  padding: 12px 20px;
  display:flex; align-items:center; justify-content:space-between;
  border-radius: 18px;
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; width:100%; }

.brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.15rem; color:var(--navy); }
.brand-badge{
  width:36px; height:36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:0.95rem;
  box-shadow: 0 6px 16px -4px rgba(37,99,235,.6);
}

.nav-menu{ display:flex; align-items:center; gap:2px; }
.nav-item{ position:relative; }
.nav-link{
  display:flex; align-items:center; gap:5px;
  padding: 10px 16px; border-radius: 10px;
  font-size: 0.92rem; font-weight: 600; color: var(--slate);
  transition: background .2s ease, color .2s ease;
}
.nav-link:hover, .nav-link.active{ background: rgba(37,99,235,0.08); color: var(--accent-dark); }
.nav-link svg{ width:13px; height:13px; transition: transform .2s ease; }
.nav-item:hover .nav-link svg{ transform: rotate(180deg); }

.dropdown{
  position:absolute; top: calc(100% + 0px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 260px;
  padding: 10px;
  border-radius: 16px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 50;
}
.nav-item:hover .dropdown{
  opacity:1; visibility:visible; pointer-events:auto; transform: translateX(-50%) translateY(0);
}
.dropdown-link{
  display:flex; flex-direction:column; gap:2px;
  padding: 10px 14px; border-radius: 10px;
  font-size: 0.88rem; font-weight:600; color: var(--navy);
  transition: background .18s ease;
}
.dropdown-link span.desc{ font-weight:500; font-size: 0.76rem; color: var(--slate-light); }
.dropdown-link:hover{ background: rgba(37,99,235,0.08); }

.nav-cta{ display:flex; align-items:center; gap:10px; }

.hamburger{ display:none; width:42px; height:42px; border-radius:10px; align-items:center; justify-content:center; background:var(--glass-bg); border:1px solid var(--glass-border); }
.hamburger span{ display:block; width:18px; height:2px; background: var(--navy); position:relative; }
.hamburger span::before, .hamburger span::after{ content:''; position:absolute; width:18px; height:2px; background:var(--navy); left:0; transition: transform .2s ease; }
.hamburger span::before{ top:-6px; } .hamburger span::after{ top:6px; }

.mobile-drawer{
  position: fixed; inset:0; z-index: 200;
  display:none;
}
.mobile-drawer.open{ display:block; }
.mobile-drawer-overlay{ position:absolute; inset:0; background: rgba(15,23,42,0.35); backdrop-filter: blur(2px); }
.mobile-drawer-panel{
  position:absolute; top:0; right:0; height:100%; width: min(340px, 86vw);
  padding: 22px; overflow-y:auto;
  display:flex; flex-direction:column; gap:6px;
  animation: slideIn .28s ease;
}
@keyframes slideIn{ from{ transform: translateX(100%);} to{ transform: translateX(0);} }
.mobile-drawer-close{ align-self:flex-end; width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.mobile-group summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding: 13px 14px; font-weight:700; color:var(--navy); border-radius:10px; }
.mobile-group summary::-webkit-details-marker{ display:none; }
.mobile-group[open] summary svg{ transform: rotate(180deg); }
.mobile-sub{ display:flex; flex-direction:column; padding: 2px 8px 10px 22px; gap:2px; }
.mobile-sub a{ padding: 9px 10px; font-size:0.88rem; font-weight:600; color:var(--slate); border-radius:8px; }
.mobile-top-link{ padding: 13px 14px; font-weight:700; color:var(--navy); border-radius:10px; }

@media (max-width: 980px){
  .nav-menu, .nav-cta .btn-glass{ display:none; }
  .hamburger{ display:flex; }
}

/* ---------- Cards ---------- */
.card{
  border-radius: 20px;
  padding: 28px;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.card:hover{ transform: translateY(-6px); box-shadow: var(--glass-shadow-lg); }

.icon-tile{
  width:52px; height:52px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(37,99,235,0.14), rgba(37,99,235,0.05));
  color: var(--accent);
  margin-bottom: 18px;
}
.icon-tile svg{ width:26px; height:26px; }

/* ---------- Badges / pills ---------- */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding: 6px 14px; border-radius: 999px;
  font-size: 0.78rem; font-weight:700;
}
.pill-blue{ background: rgba(37,99,235,0.1); color: var(--accent-dark); }

/* ---------- Tabs (platform ecosystem) ---------- */
.tab-btn{
  padding: 12px 22px; border-radius: 12px; font-weight:700; font-size:0.9rem;
  color: var(--slate); transition: all .25s ease;
}
.tab-btn.active{ background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color:#fff; box-shadow: 0 10px 24px -8px rgba(37,99,235,.5); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation: fadeUp .4s ease; }
@keyframes fadeUp{ from{ opacity:0; transform: translateY(10px);} to{opacity:1; transform:translateY(0);} }

/* ---------- Timeline ---------- */
.timeline-track{ position:relative; }
.timeline-line{ position:absolute; top:26px; left:0; right:0; height:2px; background: rgba(37,99,235,0.18); }
.timeline-step{ cursor:pointer; }
.timeline-dot{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.05rem; margin: 0 auto 16px;
  background: var(--glass-bg-strong); border:2px solid rgba(37,99,235,0.25); color: var(--accent-dark);
  transition: all .3s ease;
}
.timeline-step.active .timeline-dot{ background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color:#fff; border-color: transparent; box-shadow: 0 10px 24px -6px rgba(37,99,235,.55); }

/* ---------- Forms ---------- */
.field-label{ display:block; font-size:0.82rem; font-weight:700; color: var(--navy); margin-bottom:7px; }
.field-input{
  width:100%; padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(148,163,184,0.35);
  font-size: 0.92rem; color: var(--navy);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field-input:focus{ outline:none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(37,99,235,0.12); }
textarea.field-input{ resize: vertical; min-height: 110px; }

/* ---------- Footer ---------- */
#site-footer{ margin-top: 60px; }
.footer-wrap{ padding: 72px 0 28px; color: rgba(255,255,255,0.72); }
.footer-wrap h1, .footer-wrap h2, .footer-wrap h3, .footer-wrap h4{ color:#fff; }
.footer-col a{ display:block; padding:6px 0; font-size:0.9rem; color: rgba(255,255,255,0.68); transition: color .18s ease, padding-left .18s ease; }
.footer-col a:hover{ color:#fff; padding-left:4px; }
.footer-bottom{ border-top: 1px solid rgba(255,255,255,0.1); margin-top: 44px; padding-top: 22px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size: 0.82rem; color: rgba(255,255,255,0.5); }


/* ---------- social media footer page ---------- */

/*=====================================================
        APPLE VISIONOS LIQUID GLASS SOCIAL ICONS
=====================================================*/

.footer-social{
    display:flex;
    gap:16px;
    margin-top:26px;
    flex-wrap:wrap;
}

.footer-social a{

    position:relative;
    overflow:hidden;

    width:56px;
    height:56px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:18px;

    text-decoration:none;
    color:#fff;
    font-size:22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.18),
            rgba(255,255,255,.04)
        );

    border:1px solid rgba(255,255,255,.18);

    backdrop-filter:blur(28px) saturate(220%);
    -webkit-backdrop-filter:blur(28px) saturate(220%);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),
        inset 0 -1px 0 rgba(255,255,255,.05),
        0 12px 30px rgba(0,0,0,.18);

    transition:
        transform .55s cubic-bezier(.22,1,.36,1),
        box-shadow .45s ease,
        background .45s ease,
        border-color .45s ease;

    isolation:isolate;
}


.footer-social a::before{

    content:"";

    position:absolute;

    top:-45%;
    left:-20%;

    width:140%;
    height:75%;

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(255,255,255,.55),
        transparent 72%);

    filter:blur(10px);

    opacity:.8;

    transition:.45s;
}

.footer-social a::after{

    content:"";

    position:absolute;

    top:-70%;
    left:-140%;

    width:55%;
    height:240%;

    background:
        linear-gradient(
            115deg,
            transparent,
            rgba(255,255,255,.8),
            transparent);

    transform:rotate(25deg);

    transition:1s;
}

.footer-social a i{

    position:relative;
    z-index:5;

    transition:
        transform .45s ease,
        filter .45s ease;
}

.footer-social a:hover{

    transform:
        translateY(-8px)
        scale(1.12)
        rotateX(12deg);

}

.footer-social a:hover::before{

    opacity:1;

    transform:scale(1.25);

}

.footer-social a:hover::after{

    left:180%;

}

.footer-social a:hover i{

    transform:
        scale(1.22)
        rotate(-8deg);

    filter:drop-shadow(0 0 8px rgba(255,255,255,.35));

}


.footer-social a:nth-child(1):hover{

    background:#0A66C2;
    border-color:#0A66C2;

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.25),

        0 0 18px rgba(10,102,194,.55),

        0 0 45px rgba(10,102,194,.40),

        0 22px 55px rgba(10,102,194,.45);

}

/*=====================================
Facebook
======================================*/

.footer-social a:nth-child(2):hover{

    background:#1877F2;
    border-color:#1877F2;

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.25),

        0 0 18px rgba(24,119,242,.55),

        0 0 45px rgba(24,119,242,.40),

        0 22px 55px rgba(24,119,242,.45);

}

/*=====================================
Instagram
======================================*/

.footer-social a:nth-child(3):hover{

    background:
    linear-gradient(
        135deg,
        #F58529,
        #FEDA77,
        #DD2A7B,
        #8134AF,
        #515BD4);

    border:none;

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.25),

        0 0 22px rgba(245,133,41,.45),

        0 0 45px rgba(221,42,123,.45),

        0 22px 60px rgba(129,52,175,.45);

}

/*=====================================
X
======================================*/

/*.footer-social a:nth-child(4):hover{

    background:#000;

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.18),

        0 0 18px rgba(255,255,255,.15),

        0 0 40px rgba(255,255,255,.08),

        0 22px 60px rgba(0,0,0,.75);

}*/

/*=====================================
YouTube
======================================*/

.footer-social a:nth-child(4):hover{

    background:#FF0000;

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.25),

        0 0 22px rgba(255,0,0,.45),

        0 0 45px rgba(255,0,0,.35),

        0 22px 60px rgba(255,0,0,.40);

}

/*==============================
Responsive
==============================*/

@media(max-width:768px){

.footer-social{

    gap:12px;

}

.footer-social a{

    width:50px;
    height:50px;
    font-size:20px;

}

}


/* ---------- Misc utils ---------- */
.grid-auto{ display:grid; gap: 22px; }
.divider{ height:1px; background: linear-gradient(90deg, transparent, rgba(148,163,184,0.35), transparent); }
.hero-orbit{ animation: float 6s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-14px);} }

.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform: translateY(0); }

.accordion-item{ border-radius:16px; overflow:hidden; }
.accordion-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; cursor:pointer; font-weight:700; color:var(--navy); }
.accordion-body{ max-height:0; overflow:hidden; transition: max-height .3s ease; padding: 0 22px; }
.accordion-item.open .accordion-body{ padding-bottom: 20px; }
.accordion-head svg{ transition: transform .25s ease; flex-shrink:0; }
.accordion-item.open .accordion-head svg{ transform: rotate(45deg); }

@media (max-width: 640px){
  .section{ padding: 64px 0; }
  .navbar{ margin-top:10px; border-radius:16px; padding:10px 14px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}