/* ═══════════════════════════════════════
   WOLKNETZ DESIGN SYSTEM v2
   Global theme styles — loaded on every page
═══════════════════════════════════════ */

/* ── Variables ── */
:root {
    --wn-primary:      #5046e4;
    --wn-primary-dark: #3730a3;
    --wn-primary-rgb:  80,70,228;
    --wn-secondary:    #8b5cf6;
    --wn-accent:       #0ea5e9;
    --wn-success:      #10b981;
    --wn-dark:         #0f172a;
    --wn-dark2:        #1e293b;
    --wn-body:         #374151;
    --wn-muted:        #6b7280;
    --wn-light:        #f9fafb;
    --wn-light2:       #f1f5f9;
    --wn-border:       #e5e7eb;
    --wn-grad:         linear-gradient(135deg,#5046e4 0%,#8b5cf6 100%);
    --wn-shadow-sm:    0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
    --wn-shadow:       0 4px 24px rgba(80,70,228,.14);
    --wn-shadow-lg:    0 20px 60px rgba(80,70,228,.2),0 4px 16px rgba(0,0,0,.08);
    --wn-r-sm: 8px; --wn-r-md: 14px; --wn-r-lg: 20px; --wn-r-xl: 28px; --wn-r-pill: 9999px;
    --wn-ease: cubic-bezier(.4,0,.2,1);
    --wn-dur:  .25s;
    --wn-t:    all .25s cubic-bezier(.4,0,.2,1);
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    font-size: 15px; line-height: 1.7;
    color: var(--wn-body); background: #fff;
    -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 {
    font-family: 'Space Grotesk', sans-serif;
    color: var(--wn-dark); line-height: 1.2; font-weight: 700;
}
a { color: var(--wn-primary); transition: color .2s; }
img { max-width: 100%; height: auto; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--wn-light); }
::-webkit-scrollbar-thumb { background: var(--wn-primary); border-radius: 3px; }

/* ── Skip nav ── */
.skip-nav { position:absolute; top:-100px; left:0; z-index:9999; padding:10px 20px; background:var(--wn-primary); color:#fff; border-radius:0 0 10px 0; text-decoration:none; }
.skip-nav:focus { top:0; color:#fff; }

/* ── Preloader ── */
#preloader { position:fixed; inset:0; z-index:99999; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
#preloader .wn-pre-brand { font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:800; color:var(--wn-dark); letter-spacing:-0.5px; }
#preloader .wn-pre-ring { width:42px; height:42px; border:3px solid rgba(80,70,228,.12); border-top-color:var(--wn-primary); border-radius:50%; animation:wnSpin .8s linear infinite; }
@keyframes wnSpin { to { transform:rotate(360deg); } }

/* ── Flash alert ── */
.alert-flash { position:fixed; top:80px; right:20px; z-index:9999; min-width:300px; max-width:460px; border-radius:var(--wn-r-md); border:none; box-shadow:var(--wn-shadow-lg); animation:wnSlide .3s var(--wn-ease); }
@keyframes wnSlide { from{opacity:0;transform:translateX(30px);}to{opacity:1;transform:translateX(0);} }

/* ── Section spacing ── */
.section { padding: 80px 0; }

/* ── Section headings ── */
.wn-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--wn-primary); margin-bottom:12px; }
.wn-eyebrow::before { content:''; display:block; width:20px; height:2px; background:var(--wn-primary); border-radius:2px; }
.wn-heading { font-size:clamp(1.7rem,3.2vw,2.4rem); font-weight:800; letter-spacing:-.5px; color:var(--wn-dark); margin-bottom:16px; }
.wn-subheading { font-size:1.05rem; color:var(--wn-muted); max-width:560px; line-height:1.75; }
.text-gradient { background:var(--wn-grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ── Buttons ── */
.btn-wn { display:inline-flex; align-items:center; gap:8px; padding:11px 26px; font-size:14px; font-weight:600; border-radius:var(--wn-r-pill); border:none; cursor:pointer; transition:var(--wn-t); text-decoration:none; white-space:nowrap; }
.btn-wn-primary { background:var(--wn-grad); color:#fff; box-shadow:0 4px 16px rgba(var(--wn-primary-rgb),.3); }
.btn-wn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(var(--wn-primary-rgb),.4); color:#fff; }
.btn-wn-ghost { background:rgba(255,255,255,.12); color:#fff; border:1.5px solid rgba(255,255,255,.3); backdrop-filter:blur(8px); }
.btn-wn-ghost:hover { background:rgba(255,255,255,.22); color:#fff; }
.btn-wn-outline { background:transparent; color:var(--wn-primary); border:1.5px solid var(--wn-primary); }
.btn-wn-outline:hover { background:var(--wn-primary); color:#fff; }

/* ── Back to top ── */
#back-to-top { position:fixed; bottom:28px; right:24px; width:44px; height:44px; background:var(--wn-grad); border:none; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:var(--wn-shadow); z-index:999; opacity:0; pointer-events:none; transition:opacity .3s,transform .3s; cursor:pointer; }
#back-to-top.wn-show { opacity:1; pointer-events:all; }
#back-to-top:hover { transform:translateY(-3px); box-shadow:var(--wn-shadow-lg); }

/* ── Navbar ── */
#wn-nav { position:fixed; top:0; left:0; right:0; z-index:1000; padding:18px 0; transition:padding .3s var(--wn-ease),background .3s,box-shadow .3s; }
#wn-nav.wn-scrolled { padding:10px 0; background:rgba(255,255,255,.94); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:0 1px 0 rgba(0,0,0,.06),0 4px 24px rgba(0,0,0,.05); }
.wn-nav-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.wn-logo img { display:block; height:28px; width:auto; }
.wn-logo .logo-dark  { display:none; }
.wn-logo .logo-light { display:block; }
#wn-nav.wn-scrolled .wn-logo .logo-dark  { display:block; }
#wn-nav.wn-scrolled .wn-logo .logo-light { display:none; }
.wn-nav-links { list-style:none; padding:0; margin:0; display:flex; align-items:center; gap:2px; }
.wn-nav-links > li { position:relative; }
.wn-nav-links > li > a, .wn-dd-btn { display:flex; align-items:center; gap:5px; padding:8px 14px; font-size:14px; font-weight:500; border-radius:var(--wn-r-sm); border:none; background:none; cursor:pointer; color:rgba(255,255,255,.85); text-decoration:none; transition:var(--wn-t); white-space:nowrap; line-height:1; font-family:'Inter',sans-serif; }
#wn-nav.wn-scrolled .wn-nav-links > li > a,
#wn-nav.wn-scrolled .wn-dd-btn { color:var(--wn-body); }
.wn-nav-links > li > a:hover, .wn-dd-btn:hover { background:rgba(255,255,255,.12); color:#fff; }
#wn-nav.wn-scrolled .wn-nav-links > li > a:hover,
#wn-nav.wn-scrolled .wn-dd-btn:hover { background:rgba(var(--wn-primary-rgb),.08); color:var(--wn-primary); }
.wn-nav-links > li > a.active { background:rgba(255,255,255,.18); color:#fff; font-weight:600; }
#wn-nav.wn-scrolled .wn-nav-links > li > a.active { background:rgba(var(--wn-primary-rgb),.1); color:var(--wn-primary); }
.wn-dd-chevron { width:14px; height:14px; transition:transform .2s; }
.wn-has-dd:hover .wn-dd-chevron { transform:rotate(180deg); }

/* Solutions dropdown — bridged hover gap */
.wn-dropdown {
    position:absolute;
    top:calc(100% + 12px);
    left:50%;
    transform:translateX(-50%) translateY(8px);
    min-width:500px;
    background:#fff;
    border-radius:var(--wn-r-lg);
    box-shadow:0 24px 64px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.04);
    padding:12px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:all .2s var(--wn-ease);
}
.wn-has-dd:hover .wn-dropdown { opacity:1; visibility:visible; pointer-events:all; transform:translateX(-50%) translateY(0); }
/* Invisible bridge: keeps hover state when mouse moves across the gap */
.wn-has-dd::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -8px;
    right: -8px;
    height: 16px; /* covers the 12px gap + buffer */
    z-index: 1001;
}

.wn-dd-grid { display:grid; grid-template-columns:1fr 1fr; gap:3px; }
.wn-dd-item { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px; text-decoration:none; transition:background .15s; }
.wn-dd-item:hover { background:var(--wn-light); }
.wn-dd-icon { width:38px; height:38px; border-radius:9px; flex-shrink:0; background:rgba(var(--wn-primary-rgb),.08); color:var(--wn-primary); display:flex; align-items:center; justify-content:center; }
.wn-dd-icon svg { width:17px; height:17px; }
.wn-dd-title { font-size:13px; font-weight:600; color:var(--wn-dark); font-family:'Space Grotesk',sans-serif; display:block; }
.wn-dd-sub   { font-size:11.5px; color:var(--wn-muted); margin-top:1px; display:block; }

.wn-nav-actions { display:flex; align-items:center; gap:10px; }
.wn-burger { background:none; border:none; padding:8px; cursor:pointer; display:none; flex-direction:column; gap:5px; }
.wn-burger span { display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition:var(--wn-t); }
#wn-nav.wn-scrolled .wn-burger span { background:var(--wn-dark); }
.wn-burger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.wn-burger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.wn-burger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }
.wn-mob-drawer { display:none; flex-direction:column; background:#fff; border-top:1px solid var(--wn-border); padding:12px 20px 20px; }
.wn-mob-drawer.open { display:flex; }
.wn-mob-link { display:block; padding:12px 0; font-size:15px; font-weight:500; color:var(--wn-body); text-decoration:none; border-bottom:1px solid var(--wn-border); transition:color .15s; }
.wn-mob-link:hover, .wn-mob-link.active { color:var(--wn-primary); }
.wn-mob-acc { display:flex; justify-content:space-between; align-items:center; width:100%; background:none; border:none; cursor:pointer; padding:12px 0; font-size:15px; font-weight:500; color:var(--wn-body); border-bottom:1px solid var(--wn-border); font-family:'Inter',sans-serif; }
.wn-mob-sub { display:none; padding:4px 0 4px 16px; }
.wn-mob-sub.open { display:block; }
.wn-mob-sub a { display:block; padding:8px 0; font-size:14px; color:var(--wn-muted); text-decoration:none; }
.wn-mob-sub a:hover { color:var(--wn-primary); }
@media (max-width:991px) {
    .wn-nav-links, .wn-nav-actions .btn-wn { display:none; }
    .wn-burger { display:flex; }
}

/* ── Footer ── */
.wn-footer { background:var(--wn-dark); position:relative; overflow:hidden; padding-top:72px; }
.wn-footer::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--wn-grad); }
.wn-footer-grid { display:grid; grid-template-columns:2.2fr 1fr 1.1fr 1.2fr; gap:48px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.07); }
.wn-footer-brand img { display:block; height:26px; margin-bottom:20px; }
.wn-footer-brand p { color:rgba(255,255,255,.45); font-size:14px; line-height:1.75; margin-bottom:24px; }
.wn-social { display:flex; gap:8px; }
.wn-social a { width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.07); border-radius:var(--wn-r-sm); color:rgba(255,255,255,.45); text-decoration:none; transition:var(--wn-t); }
.wn-social a svg { width:15px; height:15px; }
.wn-social a:hover { background:var(--wn-primary); color:#fff; transform:translateY(-2px); }
.wn-footer-col h6 { color:rgba(255,255,255,.9); font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:20px; }
.wn-footer-col ul { list-style:none; padding:0; margin:0; }
.wn-footer-col li { margin-bottom:10px; }
.wn-footer-col a { color:rgba(255,255,255,.45); font-size:14px; text-decoration:none; transition:color .2s; display:inline-flex; align-items:center; gap:6px; }
.wn-footer-col a:hover { color:rgba(255,255,255,.9); }
.wn-footer-bar { display:flex; align-items:center; justify-content:space-between; padding:20px 0; }
.wn-footer-bar p { color:rgba(255,255,255,.3); font-size:13px; margin:0; }
.wn-footer-legal { display:flex; gap:20px; }
.wn-footer-legal a { color:rgba(255,255,255,.3); font-size:13px; text-decoration:none; transition:color .2s; }
.wn-footer-legal a:hover { color:rgba(255,255,255,.6); }
@media (max-width:991px) { .wn-footer-grid { grid-template-columns:1fr 1fr; } .wn-footer-brand { grid-column:1/-1; } }
@media (max-width:575px) { .wn-footer-grid { grid-template-columns:1fr; gap:28px; } .wn-footer-bar { flex-direction:column; gap:10px; text-align:center; } }

/* ── Inner page header ── */
.wn-page-header { padding:140px 0 80px; background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 100%); position:relative; overflow:hidden; }
.wn-page-header::after { content:''; position:absolute; bottom:-1px; left:0; right:0; height:48px; background:#fff; clip-path:ellipse(55% 100% at 50% 100%); }
.wn-page-header .wn-ph-inner { position:relative; z-index:1; }
.wn-page-header h1 { color:#fff; font-size:clamp(1.8rem,3.5vw,2.8rem); margin-bottom:10px; }
.wn-page-header .lead { color:rgba(255,255,255,.55); font-size:1rem; margin-bottom:0; }
.wn-breadcrumb { display:flex; align-items:center; gap:8px; margin-top:16px; font-size:13px; list-style:none; padding:0; margin-left:0; }
.wn-breadcrumb a { color:rgba(255,255,255,.45); text-decoration:none; transition:color .2s; }
.wn-breadcrumb a:hover { color:rgba(255,255,255,.8); }
.wn-breadcrumb .sep { color:rgba(255,255,255,.25); }
.wn-breadcrumb .cur { color:rgba(255,255,255,.8); font-weight:500; }
.wn-page-header .dots { position:absolute; top:30px; right:60px; opacity:.06; width:200px; height:200px; background-image:radial-gradient(circle,#fff 1px,transparent 1px); background-size:20px 20px; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* ── Shared components ── */
.svc-card { background:#fff; border:1px solid var(--wn-border); border-radius:var(--wn-r-lg); padding:28px; height:100%; transition:var(--wn-t); }
.svc-card:hover { transform:translateY(-6px); box-shadow:var(--wn-shadow-lg); border-color:transparent; }
.svc-icon { width:56px; height:56px; border-radius:var(--wn-r-md); background:var(--wn-grad); color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:20px; box-shadow:0 8px 24px rgba(var(--wn-primary-rgb),.3); flex-shrink:0; }
.svc-card h5 { font-size:16px; font-weight:700; color:var(--wn-dark); margin-bottom:8px; }
.svc-card p  { font-size:14px; color:var(--wn-muted); margin-bottom:0; line-height:1.65; }