/* ==========================================================================
   ERPRO.az — Design System
   Palette: Ağ (White) · Tünd Göy (Deep Navy) · Mavi Gradient (Blue Gradient)
   Signature motif: "stacked chevron" — echoes the ERPRO logo's layered
   arrow-modules, used as section dividers, corner accents & hover states.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* Core palette */
  --navy-950:#050914;
  --navy-900:#0a1128;
  --navy-800:#0f1b3d;
  --navy-700:#15264f;
  --blue-600:#1d5ce0;
  --blue-500:#2e6ff2;
  --blue-400:#4e8cff;
  --blue-300:#7bafff;
  --blue-100:#e8f0ff;
  --white:#ffffff;
  --ink-900:#0b1220;
  --ink-600:#485270;
  --ink-400:#8b93a7;
  --line:#e6ebf5;
  --glass-bg:rgba(255,255,255,0.06);
  --glass-brd:rgba(255,255,255,0.14);

  /* Gradients */
  --grad-hero: radial-gradient(120% 120% at 15% 0%, #123071 0%, #0a1128 45%, #050914 100%);
  --grad-blue: linear-gradient(135deg, #2e6ff2 0%, #4e8cff 55%, #7bafff 100%);
  --grad-line: linear-gradient(90deg, transparent, rgba(78,140,255,.55), transparent);

  /* Type */
  --font-display:'Space Grotesk', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;

  /* Layout */
  --container:1200px;
  --radius:16px;
  --radius-sm:10px;
  --shadow-lg:0 30px 60px -20px rgba(10,17,40,.35);
  --shadow-sm:0 10px 24px -12px rgba(10,17,40,.18);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--navy-900);
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
p{line-height:1.7; color:var(--ink-600); margin:0 0 1em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{padding:0; margin:0; list-style:none;}
:focus-visible{outline:3px solid var(--blue-400); outline-offset:2px;}

.container{max-width:var(--container); margin:0 auto; padding:0 24px;}
.section{padding:100px 0;}
.section--tight{padding:64px 0;}
.section--dark{background:var(--grad-hero); color:var(--white);}
.section--dark p{color:rgba(255,255,255,.72);}
.section--dark h2, .section--dark h3{color:var(--white);}
.section--soft{background:#f5f8ff;}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-size:13px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue-500);
  margin-bottom:14px;
}
.eyebrow::before{
  content:''; width:22px; height:2px; background:var(--grad-blue); border-radius:2px;
}
.section--dark .eyebrow{color:var(--blue-300);}
.fab--whatsapp,.fab--phone{    text-align: center;
    padding-top: 16px;}
.h-xl{font-size:clamp(2.4rem, 4.4vw, 4rem); font-weight:700;}
.h-lg{font-size:clamp(2rem, 3vw, 2.75rem); font-weight:700;}
.h-md{font-size:clamp(1.4rem, 2vw, 1.75rem); font-weight:600;}
.lead{font-size:1.15rem; color:var(--ink-600); max-width:640px;}
.section--dark .lead{color:rgba(255,255,255,.75);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:999px; font-weight:600; font-size:15px;
  font-family:var(--font-display); cursor:pointer; border:1px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn--primary{background:var(--grad-blue); color:var(--white); box-shadow:0 14px 30px -10px rgba(46,111,242,.55);}
.btn--primary:hover{box-shadow:0 18px 36px -8px rgba(46,111,242,.65);}
.btn--ghost{background:rgba(255,255,255,.06); color:var(--white); border-color:rgba(255,255,255,.28); backdrop-filter:blur(6px);}
.btn--ghost:hover{background:rgba(255,255,255,.14);}
.btn--outline{background:transparent; color:var(--navy-900); border-color:var(--line);}
.btn--outline:hover{border-color:var(--blue-400); color:var(--blue-500);}
.btn--sm{padding:10px 20px; font-size:14px;}
.btn--block{width:100%;}

/* ---------- Header ---------- */
.header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:18px 0; transition:background .3s ease, padding .3s ease, box-shadow .3s ease;
}
.header.is-scrolled{
  background:rgba(5,9,20,.82); backdrop-filter:blur(14px);
  padding:12px 0; box-shadow:0 8px 30px -14px rgba(0,0,0,.5);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header .container{display:flex; align-items:center; justify-content:space-between; gap:24px;}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{height:34px; width:auto;}
.nav{display:flex; align-items:center; gap:2px;}
.nav a{
  color:rgba(255,255,255,.82); font-size:14.5px; font-weight:500; padding:10px 14px;
  border-radius:8px; transition:color .2s ease, background .2s ease; position:relative;
}
.nav a:hover{color:#fff; background:rgba(255,255,255,.07);}
.nav-actions{display:flex; align-items:center; gap:10px;}
.nav-dropdown{position:relative;}
.nav-dropdown__menu{
  position:absolute; top:calc(100% + 10px); left:0; min-width:280px;
  background:var(--navy-900); border:1px solid rgba(255,255,255,.1);
  border-radius:14px; padding:10px; box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:all .22s ease; display:grid; gap:2px;
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu{opacity:1; visibility:visible; transform:translateY(0);}
.nav-dropdown__menu a{display:block; padding:10px 12px; font-size:14px; border-radius:8px;}
.burger{display:none; background:none; border:none; color:#fff; font-size:24px; cursor:pointer;}

/* ---------- Hero ---------- */
.hero{
  position:relative; padding:168px 0 120px; background:var(--grad-hero); color:#fff; overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(600px 300px at 85% 20%, rgba(78,140,255,.25), transparent 70%),
    repeating-linear-gradient(120deg, rgba(255,255,255,.025) 0 2px, transparent 2px 60px);
  pointer-events:none;
}
.hero .container{position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center;}
.hero-badge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px;
  background:var(--glass-bg); border:1px solid var(--glass-brd); border-radius:999px;
  font-size:13px; font-weight:500; color:rgba(255,255,255,.85); margin-bottom:24px;
}
.hero-badge .dot{width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 4px rgba(74,222,128,.2);}
.hero h1{font-size:clamp(2.6rem, 5vw, 4.4rem);color:white;}
.hero h1 span{background:var(--grad-blue); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero-cta{display:flex; gap:14px; margin-top:36px; flex-wrap:wrap;}
.hero-stats{display:flex; gap:36px; margin-top:56px; flex-wrap:wrap;}
.hero-stat b{display:block; font-family:var(--font-display); font-size:2rem; color:#fff;}
.hero-stat span{font-size:13px; color:rgba(255,255,255,.6);}

/* Chevron stack visual — echoes the logo's layered arrow modules */
.chevron-stack{position:relative; height:420px;}
.chevron-stack .layer{
  position:absolute; left:0; right:0; height:96px; border-radius:18px;
  background:var(--glass-bg); border:1px solid var(--glass-brd);
  backdrop-filter:blur(10px); display:flex; align-items:center; gap:16px; padding:0 24px;
  box-shadow:var(--shadow-lg);
  animation:floatY 6s ease-in-out infinite;
}
.chevron-stack .layer:nth-child(1){top:0; animation-delay:0s;}
.chevron-stack .layer:nth-child(2){top:112px; left:28px; right:-28px; animation-delay:.4s;}
.chevron-stack .layer:nth-child(3){top:224px; animation-delay:.8s;}
.chevron-stack .layer:nth-child(4){top:336px; left:28px; right:-28px; animation-delay:1.2s;}
.chevron-stack .ic{
  width:44px; height:44px; border-radius:12px; flex:none;
  background:var(--grad-blue); display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px;
}
.chevron-stack .txt b{display:block; font-size:14.5px; color:#fff; font-weight:600;}
.chevron-stack .txt span{font-size:12.5px; color:rgba(255,255,255,.55);}
@keyframes floatY{0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);}}

/* ---------- Trust strip ---------- */
.trust-strip{padding:40px 0; border-bottom:1px solid var(--line);}
.trust-strip .container{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;}
.trust-strip span{font-size:13px; color:var(--ink-400); text-transform:uppercase; letter-spacing:.08em;}
.trust-logos{display:flex; gap:32px; flex-wrap:wrap; align-items:center;}
.trust-logos b{font-family:var(--font-display); color:var(--ink-400); font-size:15px; font-weight:600; opacity:.7;}

/* ---------- Cards / Grids ---------- */
.grid{display:grid; gap:28px;}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}
.grid--2{grid-template-columns:repeat(2,1fr);}

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:32px; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  position:relative; overflow:hidden;
}
.card::after{
  content:''; position:absolute; top:0; right:0; width:56px; height:56px;
  background:var(--grad-blue); clip-path:polygon(100% 0, 0 0, 100% 100%);
  opacity:0; transition:opacity .3s ease;
}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-sm); border-color:transparent;}
.card:hover::after{opacity:.12;}
.card .ic{
  width:52px; height:52px; border-radius:14px; background:var(--blue-100); color:var(--blue-500);
  display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:20px;
}
.card h3{font-size:1.15rem; margin-bottom:8px;}
.card p{font-size:14.5px; margin-bottom:0;}
.card a.card-link{display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:14px; font-weight:600; color:var(--blue-500);}
.card a.card-link .arrow{transition:transform .25s ease;}
.card:hover a.card-link .arrow{transform:translateX(4px);}

/* Glass card variant for dark sections */
.card--glass{background:var(--glass-bg); border-color:var(--glass-brd); backdrop-filter:blur(10px);}
.card--glass h3{color:#fff;}
.card--glass p{color:rgba(255,255,255,.65);}
.card--glass .ic{background:rgba(255,255,255,.1); color:var(--blue-300);}

/* ---------- Section header ---------- */
.section-head{max-width:680px; margin:0 auto 56px; text-align:center;}
.section-head.left{margin:0 0 56px; text-align:left;}

/* ---------- Stats counter ---------- */
.stats-row{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;}
.stat-box{padding:36px 20px; border-radius:var(--radius); background:var(--glass-bg); border:1px solid var(--glass-brd);}
.stat-box .num{font-family:var(--font-display); font-size:2.6rem; font-weight:700; color:#fff;}
.stat-box .num small{font-size:1.5rem; color:var(--blue-300);}
.stat-box .lbl{font-size:13.5px; color:rgba(255,255,255,.6); margin-top:6px;}

/* ---------- Testimonials ---------- */
.testi{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px;}
.testi .stars{color:#f5a623; font-size:14px; margin-bottom:14px; letter-spacing:2px;}
.testi p{font-style:italic; color:var(--ink-900); font-size:15px;}
.testi-person{display:flex; align-items:center; gap:12px; margin-top:20px;}
.testi-avatar{
  width:44px; height:44px; border-radius:50%; background:var(--grad-blue); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--font-display); flex:none;
}
.testi-person b{display:block; font-size:14px; color:var(--navy-900);}
.testi-person span{font-size:12.5px; color:var(--ink-400);}

/* ---------- FAQ accordion ---------- */
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 4px; cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--navy-900);
}
.faq-q .plus{
  width:28px; height:28px; border-radius:50%; border:1px solid var(--line); flex:none;
  display:flex; align-items:center; justify-content:center; transition:transform .3s ease, background .3s ease, border-color .3s ease; font-size:16px; color:var(--blue-500);
}
.faq-item.is-open .plus{transform:rotate(45deg); background:var(--blue-500); border-color:var(--blue-500); color:#fff;}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease;}
.faq-a p{padding:0 4px 22px; font-size:15px;}
.section--dark .faq-q{color:#fff;}
.section--dark .faq-item{border-color:rgba(255,255,255,.12);}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--grad-blue); border-radius:28px; padding:64px; text-align:center; color:#fff;
  position:relative; overflow:hidden;
}
.cta-band::before{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(120deg, rgba(255,255,255,.06) 0 2px, transparent 2px 40px);
}
.cta-band h2{color:#fff; position:relative;}
.cta-band p{color:rgba(255,255,255,.85); position:relative;}
.cta-band .hero-cta{justify-content:center; position:relative;}
.cta-band .btn--ghost{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4);}
.cta-band .btn--ghost:hover{background:rgba(255,255,255,.26);}
.cta-band .btn--white{background:#fff; color:var(--blue-600);}

/* ---------- Footer ---------- */
.footer{background:var(--navy-950); color:rgba(255,255,255,.6); padding:80px 0 0;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:32px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.08);}
.footer h4{color:#fff; font-size:14.5px; margin-bottom:18px;}
.footer-brand img{height:32px; margin-bottom:16px;}
.footer-brand p{font-size:14px; max-width:280px;}
.footer li{margin-bottom:11px;}
.footer a{font-size:14px; color:rgba(255,255,255,.6); transition:color .2s ease;}
.footer a:hover{color:#fff;}
.footer-social{display:flex; gap:10px; margin-top:20px;}
.footer-social a{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding:24px 0; font-size:13px; flex-wrap:wrap; gap:12px;}
.footer-bottom a{color:rgba(255,255,255,.5); margin-left:18px;}

/* ---------- Floating action buttons ---------- */
.fab-group{position:fixed; right:22px; bottom:22px; z-index:900; display:flex; flex-direction:column; gap:12px;}
.fab{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:24px; box-shadow:var(--shadow-lg); transition:transform .25s ease;
}
.fab:hover{transform:scale(1.08);}
.fab--whatsapp{background:#25D366;}
.fab--phone{background:var(--grad-blue);}

/* ---------- Breadcrumb ---------- */
.breadcrumb{padding:130px 0 0;}
.breadcrumb .container{padding-bottom:28px;}
.breadcrumb ul{display:flex; gap:8px; flex-wrap:wrap; font-size:13.5px; color:rgba(255,255,255,.55);}
.breadcrumb a{color:rgba(255,255,255,.75);}
.breadcrumb li:not(:last-child)::after{content:'/'; margin-left:8px; color:rgba(255,255,255,.3);}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{background:var(--grad-hero); color:#fff; padding:0 0 90px;}
.page-hero h1{font-size:clamp(2.2rem,4vw,3.2rem);color:white!important;}
.page-hero .lead{max-width:720px;}

/* ---------- Table ---------- */
.table-wrap{overflow-x:auto; border-radius:var(--radius); border:1px solid var(--line);}
table{width:100%; border-collapse:collapse; font-size:14.5px;}
th,td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--line);}
thead th{background:#f5f8ff; color:var(--navy-900); font-family:var(--font-display); font-weight:600;}
tr:last-child td{border-bottom:none;}
td.yes{color:#16a34a; font-weight:600;}
td.no{color:var(--ink-400);}

/* ---------- Comparison list ---------- */
.check-list li{display:flex; gap:12px; margin-bottom:14px; align-items:flex-start;}
.check-list .tick{
  width:22px; height:22px; border-radius:50%; background:var(--blue-100); color:var(--blue-500);
  display:flex; align-items:center; justify-content:center; flex:none; font-size:12px; margin-top:2px;
}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* ---------- Sidebar (service pages) ---------- */
.service-layout{display:grid; grid-template-columns:2.1fr .9fr; gap:56px; align-items:start;}
.sidebar{position:sticky; top:110px; display:grid; gap:20px;}
.sidebar-card{background:#f5f8ff; border:1px solid var(--line); border-radius:var(--radius); padding:26px;}
.sidebar-card h4{font-size:15px; margin-bottom:14px;}
.sidebar-card ul li{margin-bottom:10px;}
.sidebar-card ul a{font-size:14px; color:var(--ink-600); display:flex; gap:8px;}
.sidebar-card ul a:hover{color:var(--blue-500);}
.sidebar-cta{background:var(--grad-hero); color:#fff; text-align:center;}
.sidebar-cta p{color:rgba(255,255,255,.7); font-size:13.5px;}

/* ---------- Prose (long-form content) ---------- */
.prose h2{margin-top:2.2em; font-size:1.7rem;}
.prose h3{margin-top:1.6em; font-size:1.25rem;}
.prose p{font-size:16px; color:var(--ink-600);}
.prose ul{margin:0 0 1.4em; padding-left:0;}
.prose ul li{position:relative; padding-left:26px; margin-bottom:10px; color:var(--ink-600); font-size:15.5px;}
.prose ul li::before{content:'▸'; position:absolute; left:0; color:var(--blue-500); font-weight:700;}
.prose blockquote{
  border-left:3px solid var(--blue-400); margin:1.6em 0; padding:6px 0 6px 22px; font-style:italic; color:var(--navy-900);
}

/* ---------- Utilities ---------- */
.text-center{text-align:center;}
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.gap-tight{gap:18px;}
.badge-soft{display:inline-block; padding:6px 14px; border-radius:999px; background:var(--blue-100); color:var(--blue-600); font-size:12.5px; font-weight:600;}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .grid--4{grid-template-columns:repeat(2,1fr);}
  .grid--3{grid-template-columns:repeat(2,1fr);}
  .service-layout{grid-template-columns:1fr;}
  .sidebar{position:static;}
  .footer-grid{grid-template-columns:repeat(3,1fr);}
  .hero .container{grid-template-columns:1fr; gap:48px;}
  .chevron-stack{height:340px; max-width:440px; margin:0 auto;}
}
@media (max-width:720px){
  .nav, .nav-actions .btn--outline{display:none;}
  .burger{display:block;}
  .section{padding:64px 0;}
  .grid--4, .grid--3, .grid--2{grid-template-columns:1fr;}
  .stats-row{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:repeat(2,1fr);}
  .trust-strip .container{flex-direction:column; align-items:flex-start;}
  .cta-band{padding:44px 24px;}
}

/* ---------- Mobile menu ---------- */
.mobile-menu{
  position:fixed; inset:0; background:var(--navy-950); z-index:1100; padding:24px;
  transform:translateX(100%); transition:transform .35s ease; overflow-y:auto;
}
.mobile-menu.is-open{transform:translateX(0);}
.mobile-menu__top{display:flex; justify-content:space-between; align-items:center; margin-bottom:32px;}
.mobile-menu__top img{height:30px;}
.mobile-menu__close{background:none; border:none; color:#fff; font-size:28px;}
.mobile-menu a{display:block; padding:16px 4px; font-size:17px; color:#fff; border-bottom:1px solid rgba(255,255,255,.08); font-family:var(--font-display); font-weight:500;}
.mobile-menu .btn{margin-top:24px;}