/* ============================================================
   ELVIORA MARKETING — Premium Design System v2
   Direction: glassmorphic dark dashboard aesthetic — deep space
   navy, frosted glass panels, violet→blue signal gradient, precise
   data-forward typography. Built to read as a premium SaaS/agency
   product, not a template.

   Palette:
     --bg:         #06060f   (void navy)
     --bg-1:       #0a0a18   (raised base)
     --bg-2:       #0d0d1e   (section alt)
     --glass:      rgba(255,255,255,0.035)
     --glass-hi:   rgba(255,255,255,0.07)
     --hairline:   rgba(255,255,255,0.09)
     --hairline-2: rgba(124,92,255,0.28)
     --violet:     #7c5cff   (primary signal)
     --violet-2:   #5b6eff
     --blue:       #4f8cff
     --iris:       #b565f5   (secondary signal)
     --mint:       #34d399   (positive delta)
     --amber:      #ffb454   (rare warm accent, used sparingly)
     --ink:        #f3f2fb
     --ink-dim:    #c9c7dc
     --muted:      #8d8aa8
     --muted-2:    #605d7a
     --signal: linear-gradient(90deg,#5b6eff 0%,#7c5cff 45%,#b565f5 100%)
   Type:
     Display — 'Space Grotesk' (used with restraint, tight tracking)
     Body    — 'Inter'
     Data    — 'JetBrains Mono' (stat labels, eyebrows, deltas)
   Signature:
     The "signal line" — a thin animated gradient trace that runs
     through dividers, card tops and the hero, echoing the growth
     line in the brand's own reference mark.
   ============================================================ */

:root{
  --bg:#06060f;
  --bg-1:#0a0a18;
  --bg-2:#0d0d1e;
  --glass: rgba(255,255,255,0.035);
  --glass-hi: rgba(255,255,255,0.07);
  --hairline: rgba(255,255,255,0.09);
  --hairline-2: rgba(124,92,255,0.32);
  --violet:#7c5cff;
  --violet-2:#5b6eff;
  --blue:#4f8cff;
  --iris:#b565f5;
  --mint:#34d399;
  --amber:#ffb454;
  --ink:#f3f2fb;
  --ink-dim:#c9c7dc;
  --muted:#8d8aa8;
  --muted-2:#605d7a;
  --signal: linear-gradient(90deg,#5b6eff 0%,#7c5cff 45%,#b565f5 100%);
  --radius:16px;
  --radius-lg:24px;
  --shadow-glass: 0 1px 0 0 rgba(255,255,255,0.06) inset, 0 30px 60px -30px rgba(0,0,0,0.65);
  --shadow-glow: 0 20px 60px -20px rgba(124,92,255,0.35);
}

*{box-sizing:border-box;}
::selection{background:rgba(124,92,255,0.35); color:#fff;}

html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* layered ambient glow field — echoes the reference's chart glow */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  background:
    radial-gradient(38% 32% at 88% 4%, rgba(124,92,255,0.22), transparent 60%),
    radial-gradient(30% 26% at 12% 0%, rgba(181,101,245,0.14), transparent 60%),
    radial-gradient(46% 38% at 50% 108%, rgba(79,140,255,0.16), transparent 60%),
    var(--bg);
  pointer-events:none;
}
/* faint structural grid, like a dashboard canvas */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(80% 60% at 50% 0%, black, transparent 75%);
  -webkit-mask-image:radial-gradient(80% 60% at 50% 0%, black, transparent 75%);
  pointer-events:none;
}

h1,h2,h3,h4,h5,h6{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-0.015em;
}

.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:0.74rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--violet);
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.eyebrow::before{
  content:"";
  width:8px;height:8px;
  border-radius:50%;
  background:var(--signal);
  box-shadow:0 0 12px 2px rgba(124,92,255,0.7);
  display:inline-block;
}

a{color:var(--violet); text-decoration:none; transition:color .2s ease;}
a:hover{color:var(--iris);}

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

.muted{color:var(--muted);}

.section{padding:108px 0;}
.section-tight{padding:68px 0;}
@media (max-width:767.98px){
  .section{padding:68px 0;}
  .section-tight{padding:46px 0;}
}

.bg-alt{
  background:var(--bg-2);
  position:relative;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}

/* ---------- Buttons ---------- */
.btn{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  border-radius:999px;
  padding:13px 28px;
  font-size:0.94rem;
  letter-spacing:0.01em;
  transition:all .3s cubic-bezier(.2,.8,.2,1);
  border:1px solid transparent;
}
.btn-grad{
  background:var(--signal);
  background-size:200% 100%;
  background-position:0% 0%;
  color:#07060f !important;
  box-shadow:0 12px 32px -10px rgba(124,92,255,0.65), inset 0 1px 0 rgba(255,255,255,0.35);
  position:relative;
}
.btn-grad:hover{
  background-position:100% 0%;
  transform:translateY(-2px);
  box-shadow:0 18px 40px -10px rgba(181,101,245,0.6), inset 0 1px 0 rgba(255,255,255,0.4);
  color:#07060f !important;
}
.btn-outline-light-custom{
  border:1px solid var(--hairline);
  color:var(--ink);
  background:var(--glass);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.btn-outline-light-custom:hover{
  border-color:var(--hairline-2);
  color:var(--ink);
  background:rgba(124,92,255,0.10);
}
.btn-sm-pill{padding:9px 20px; font-size:0.85rem;}

/* ---------- Navbar ---------- */
.navbar-elviora{
  position:sticky; top:0; z-index:1000;
  background:rgba(6,6,15,0.72);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-bottom:1px solid var(--hairline);
  padding:16px 0;
}
.navbar-elviora::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--signal);
  opacity:0.5;
}
.navbar-elviora .navbar-brand{display:flex; align-items:center; gap:11px;}
.navbar-elviora .navbar-brand img{height:38px; width:auto; filter:drop-shadow(0 4px 14px rgba(124,92,255,0.35));}
.brand-word{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:1.12rem;
  color:var(--ink);
  line-height:1.1;
  letter-spacing:0.01em;
}
.brand-word span{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-weight:400;
  font-size:0.58rem;
  letter-spacing:0.2em;
  color:var(--iris);
}
.navbar-elviora .nav-link{
  color:var(--muted);
  font-weight:500;
  font-size:0.92rem;
  padding:9px 17px !important;
  border-radius:999px;
  transition:all .25s ease;
}
.navbar-elviora .nav-link:hover,
.navbar-elviora .nav-link.active{
  color:var(--ink);
  background:var(--glass-hi);
}
.navbar-toggler{border:none; box-shadow:none !important;}
.navbar-toggler .bar{
  display:block; width:24px; height:2px; margin:5px 0;
  background:var(--ink); transition:.2s;
}
.dropdown-menu-dark{
  background:rgba(13,13,26,0.92);
  backdrop-filter:blur(20px);
  border:1px solid var(--hairline);
  border-radius:14px;
  padding:8px;
  box-shadow:var(--shadow-glass);
}
.dropdown-menu-dark .dropdown-item{
  border-radius:8px;
  color:var(--ink-dim);
  font-size:0.9rem;
  padding:9px 14px;
}
.dropdown-menu-dark .dropdown-item:hover,
.dropdown-menu-dark .dropdown-item.active{
  background:rgba(124,92,255,0.14);
  color:var(--ink);
}

/* ---------- Hero ---------- */
.hero{
  padding:88px 0 64px;
  position:relative;
}
.hero-title{
  font-size:clamp(2.3rem, 5vw, 3.75rem);
  line-height:1.06;
  margin-bottom:24px;
}
.hero-sub{
  font-size:1.08rem;
  color:var(--muted);
  max-width:520px;
  margin-bottom:34px;
}
.trail-divider{
  height:1px;
  width:100%;
  background:linear-gradient(90deg, transparent, var(--hairline-2) 20%, var(--hairline-2) 80%, transparent);
  border:none;
  margin:0;
  position:relative;
}
.trail-divider::after{
  content:"";
  position:absolute; top:-1px; left:0;
  height:1px; width:140px;
  background:var(--signal);
  filter:blur(0.5px);
  animation:trail-move 7s ease-in-out infinite;
}
@keyframes trail-move{
  0%{left:-10%;}
  50%{left:70%;}
  100%{left:-10%;}
}

.trail-dots{
  display:flex; align-items:center; gap:6px; margin:28px 0;
}
.trail-dots span{
  width:5px;height:5px;border-radius:50%;
  background:var(--signal);
  opacity:0.8;
}
.trail-dots span:nth-child(1){width:3px;height:3px;opacity:0.35;}
.trail-dots span:nth-child(6){width:8px;height:8px; box-shadow:0 0 10px 2px rgba(124,92,255,0.6);}

/* ---------- Stat / trust bar ---------- */
.trust-bar{
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--glass-hi), var(--glass));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:var(--shadow-glass);
  padding:32px 24px;
}
.trust-bar .stat-num{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:2rem;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.trust-bar .stat-label{
  color:var(--muted);
  font-size:0.84rem;
  font-family:'JetBrains Mono',monospace;
  letter-spacing:0.02em;
}

/* ---------- Cards ---------- */
.card-elviora{
  background:linear-gradient(160deg, var(--glass-hi), var(--glass) 60%);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:34px 28px;
  height:100%;
  transition:all .4s cubic-bezier(.2,.8,.2,1);
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-glass);
}
.card-elviora::before{
  content:"";
  position:absolute; inset:0;
  border-radius:var(--radius);
  padding:1px;
  background:linear-gradient(160deg, rgba(255,255,255,0.18), transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.card-elviora::after{
  content:"";
  position:absolute; inset:0 0 auto 0; height:2px;
  background:var(--signal);
  opacity:0;
  transition:opacity .35s ease;
}
.card-elviora:hover{
  border-color:var(--hairline-2);
  transform:translateY(-6px);
  box-shadow:0 40px 70px -30px rgba(124,92,255,0.35), var(--shadow-glass);
}
.card-elviora:hover::after{opacity:1;}
.card-icon{
  width:54px;height:54px;
  border-radius:15px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg, rgba(124,92,255,0.28), rgba(181,101,245,0.14));
  border:1px solid var(--hairline-2);
  box-shadow:0 8px 24px -8px rgba(124,92,255,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
  margin-bottom:22px;
  font-size:1.45rem;
  color:var(--ink);
}
.card-elviora h3{font-size:1.16rem; margin-bottom:11px;}
.card-elviora p{color:var(--muted); font-size:0.94rem; margin-bottom:0;}
.card-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.85rem; font-weight:600; margin-top:18px;
  font-family:'Space Grotesk',sans-serif;
  color:var(--ink-dim);
}
.card-link:hover{color:var(--violet);}
.card-link i{transition:transform .25s ease;}
.card-link:hover i{transform:translate(3px,-3px);}

/* ---------- Numbered process ---------- */
.process-step{
  display:flex; gap:22px; padding:28px 0;
  border-bottom:1px solid var(--hairline);
}
.process-step:last-child{border-bottom:none;}
.process-num{
  font-family:'JetBrains Mono',monospace;
  font-size:0.85rem;
  color:transparent;
  background:var(--signal);
  -webkit-background-clip:text;
  background-clip:text;
  min-width:44px;
  font-weight:600;
}
.process-step h4{font-size:1.06rem; margin-bottom:7px;}
.process-step p{color:var(--muted); font-size:0.92rem; margin-bottom:0;}

/* ---------- Portfolio ---------- */
.portfolio-card{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--hairline);
  background:var(--glass);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:all .35s ease;
  box-shadow:var(--shadow-glass);
}
.portfolio-card:hover{transform:translateY(-6px); border-color:var(--hairline-2); box-shadow:0 30px 60px -25px rgba(124,92,255,0.3);}
.portfolio-thumb{
  height:190px;
  background:
    radial-gradient(60% 90% at 20% 0%, rgba(124,92,255,0.35), transparent 60%),
    radial-gradient(60% 90% at 100% 100%, rgba(181,101,245,0.25), transparent 60%),
    linear-gradient(160deg, #14142a, #0b0b18);
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
.portfolio-thumb .tag{
  position:absolute; top:14px; left:14px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.66rem; letter-spacing:0.09em; text-transform:uppercase;
  background:rgba(6,6,15,0.6); border:1px solid var(--hairline);
  backdrop-filter:blur(8px);
  padding:5px 11px; border-radius:999px; color:var(--ink);
}
.portfolio-body{padding:22px 24px;}
.portfolio-body h4{font-size:1.05rem; margin-bottom:7px;}
.portfolio-body p{color:var(--muted); font-size:0.88rem; margin-bottom:0;}
.result-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.78rem;
  color:var(--mint);
  background:rgba(52,211,153,0.10);
  border:1px solid rgba(52,211,153,0.28);
  padding:4px 11px;
  border-radius:999px;
  margin-top:14px;
}
.result-chip::before{content:"↑"; font-size:0.75rem;}

/* ---------- Testimonials ---------- */
.testimonial-card{
  background:linear-gradient(160deg, var(--glass-hi), var(--glass) 60%);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:32px 30px;
  height:100%;
  box-shadow:var(--shadow-glass);
}
.testimonial-card p{font-size:0.98rem; color:var(--ink-dim); font-style:italic;}
.testimonial-meta{display:flex; align-items:center; gap:13px; margin-top:20px;}
.testimonial-avatar{
  width:44px;height:44px;border-radius:50%;
  background:var(--signal);
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-weight:700; color:#07060f; font-size:0.9rem;
  box-shadow:0 6px 18px -4px rgba(124,92,255,0.6);
}
.testimonial-meta strong{font-size:0.9rem; display:block; color:var(--ink);}
.testimonial-meta span{font-size:0.78rem; color:var(--muted);}

/* ---------- Forms ---------- */
.form-elviora label{
  font-size:0.85rem; font-weight:600; color:var(--ink); margin-bottom:7px;
}
.form-elviora .form-control,
.form-elviora .form-select{
  background:rgba(255,255,255,0.03);
  border:1px solid var(--hairline);
  color:var(--ink);
  border-radius:11px;
  padding:13px 15px;
  font-size:0.94rem;
}
.form-elviora .form-control:focus,
.form-elviora .form-select:focus{
  background:rgba(124,92,255,0.05);
  border-color:var(--violet);
  color:var(--ink);
  box-shadow:0 0 0 4px rgba(124,92,255,0.15);
}
.form-elviora .form-control::placeholder{color:var(--muted-2);}
.form-elviora textarea{min-height:132px;}

.contact-info-card{
  background:linear-gradient(160deg, var(--glass-hi), var(--glass) 60%);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:26px;
  display:flex; gap:17px; align-items:flex-start;
  margin-bottom:16px;
  box-shadow:var(--shadow-glass);
}
.contact-info-card .icon-box{
  width:46px;height:46px;min-width:46px;
  border-radius:13px;
  background:linear-gradient(150deg, rgba(124,92,255,0.28), rgba(181,101,245,0.14));
  border:1px solid var(--hairline-2);
  display:flex;align-items:center;justify-content:center;
}
.contact-info-card h4{font-size:0.98rem; margin-bottom:5px;}
.contact-info-card p{color:var(--muted); font-size:0.9rem; margin-bottom:0;}

/* ---------- Page header (inner pages) ---------- */
.page-header{
  padding:72px 0 52px;
  border-bottom:1px solid var(--hairline);
  position:relative;
}
.breadcrumb-custom{
  font-family:'JetBrains Mono',monospace;
  font-size:0.78rem;
  color:var(--muted);
  margin-bottom:18px;
}
.breadcrumb-custom a{color:var(--muted);}
.breadcrumb-custom a:hover{color:var(--violet);}
.breadcrumb-custom .sep{margin:0 8px; color:var(--muted-2);}

/* ---------- CTA band ---------- */
.cta-band{
  border-radius:var(--radius-lg);
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(124,92,255,0.22), transparent 60%),
    radial-gradient(60% 120% at 100% 100%, rgba(181,101,245,0.18), transparent 60%),
    linear-gradient(160deg, var(--glass-hi), var(--glass));
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--hairline-2);
  box-shadow:var(--shadow-glass), 0 0 90px -30px rgba(124,92,255,0.35);
  padding:60px 44px;
  text-align:center;
}
@media (max-width:767.98px){.cta-band{padding:44px 26px;}}

/* ---------- Footer ---------- */
.footer-elviora{
  background:var(--bg-1);
  border-top:1px solid var(--hairline);
  padding:64px 0 26px;
  position:relative;
}
.footer-elviora::before{
  content:"";
  position:absolute; top:-1px; left:0; right:0; height:1px;
  background:var(--signal);
  opacity:0.4;
}
.footer-elviora h5{font-size:0.94rem; margin-bottom:20px; color:var(--ink);}
.footer-elviora ul{list-style:none; padding:0; margin:0;}
.footer-elviora ul li{margin-bottom:11px;}
.footer-elviora ul li a{color:var(--muted); font-size:0.92rem;}
.footer-elviora ul li a:hover{color:var(--violet);}
.footer-brand-word{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.2rem; color:var(--ink);
}
.footer-bottom{
  border-top:1px solid var(--hairline);
  margin-top:42px;
  padding-top:24px;
  font-size:0.82rem;
  color:var(--muted-2);
}
.social-dot{
  width:40px;height:40px;
  border-radius:50%;
  border:1px solid var(--hairline);
  background:var(--glass);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted);
  margin-right:8px;
  transition:.25s;
}
.social-dot:hover{border-color:var(--hairline-2); color:var(--ink); background:rgba(124,92,255,0.14); transform:translateY(-2px);}

/* ---------- Misc badges ---------- */
.pill-badge{
  display:inline-block;
  font-family:'JetBrains Mono',monospace;
  font-size:0.72rem; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--violet);
  background:rgba(124,92,255,0.10);
  border:1px solid var(--hairline-2);
  padding:6px 14px;
  border-radius:999px;
}

/* ---------- Utility: fade-in on scroll ---------- */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);}
.reveal.is-visible{opacity:1; transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
  .trail-divider::after{animation:none;}
}

/* ---------- Focus visibility ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible, .form-control:focus-visible{
  outline:2px solid var(--violet);
  outline-offset:2px;
}

/* ---------- Table (service comparison) ---------- */
.table-elviora{
  --bs-table-bg:transparent;
  color:var(--ink);
  border-color:var(--hairline);
}
.table-elviora thead th{
  font-family:'Space Grotesk',sans-serif;
  font-size:0.82rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--violet);
  border-bottom:1px solid var(--hairline);
  padding:15px 17px;
}
.table-elviora td{
  border-color:var(--hairline);
  padding:15px 17px;
  font-size:0.92rem;
  color:var(--muted);
}

/* ---------- Portfolio filter pills ---------- */
#portfolioFilter .nav-link{
  color:var(--muted);
  border:1px solid var(--hairline);
  background:var(--glass);
  border-radius:999px;
  font-size:0.87rem;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  padding:9px 18px;
  transition:all .25s ease;
}
#portfolioFilter .nav-link.active{
  background:var(--signal);
  color:#07060f;
  border-color:transparent;
  box-shadow:0 10px 26px -8px rgba(124,92,255,0.55);
}