/* ==========================================================================
   siteXclusive — Premium Agency Design System v4
   Dark Navy · Electric Blue · Space Grotesk × Inter
   Clean, crisp, no grids, smooth gradients
   ========================================================================== */

/* --- Design Tokens --- */
:root {
  --bg:        #050810;
  --bg-2:      #06091a;
  --bg-3:      #080b1e;
  --surface:   #0b1028;
  --surface-2: #0d1230;
  --card:      rgba(10,15,35,0.75);
  --card-solid:#091020;

  --border:        rgba(255,255,255,0.06);
  --border-md:     rgba(255,255,255,0.10);
  --border-hover:  rgba(91,157,255,0.45);

  --white:    #ffffff;
  --gray-100: #eaeff8;
  --gray-200: #c4cedf;
  --gray-300: #8e9ab5;
  --gray-400: #5f6e8a;
  --gray-500: #3f4e68;

  --blue:        #2563eb;
  --blue-light:  #60a5fa;
  --blue-bright: #93c5fd;
  --blue-deep:   #1d4ed8;
  --blue-glow:   rgba(37,99,235,0.50);
  --blue-soft:   rgba(37,99,235,0.12);
  --blue-faint:  rgba(37,99,235,0.06);
  --blue-border: rgba(96,165,250,0.30);

  --red:       #ef4444;
  --red-glow:  rgba(239,68,68,0.45);

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

  --header-height:  76px;
  --container:      1240px;
  --section-pad:    clamp(5rem,9vw,9rem);

  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  32px;

  --shadow-card:  0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 60px rgba(0,0,0,0.50);
  --shadow-hover: 0 32px 80px rgba(0,0,0,0.55), 0 0 50px rgba(37,99,235,0.18);
  --shadow-blue:  0 8px 30px rgba(37,99,235,0.40);

  --t-fast:   0.16s cubic-bezier(0.4,0,0.2,1);
  --t-smooth: 0.38s cubic-bezier(0.4,0,0.2,1);
  --t-spring: 0.6s  cubic-bezier(0.34,1.5,0.64,1);
  --t-reveal: 0.85s cubic-bezier(0.16,1,0.3,1);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.72;
  color: var(--gray-200);
  background: var(--bg);
  overflow-x: hidden;
}

/* Smooth navy background — NO GRID, NO TILES */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(37,99,235,0.16) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 100% 5%,  rgba(29,78,216,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 0%   80%, rgba(37,99,235,0.07) 0%, transparent 55%),
    var(--bg);
}

main { position: relative; z-index: 1; }
body.nav-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
ul { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; border: none; background: none; }
::selection { background: var(--blue); color: #fff; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 clamp(1.25rem,4vw,2rem); }

/* ---- Typography ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  color: var(--white);
  letter-spacing: -0.025em;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blue-light);
  margin-bottom: 1.1rem;
  padding: 0.42rem 1rem;
  border: 1px solid rgba(96,165,250,0.25);
  border-radius: 100px;
  background: var(--blue-faint);
}
.eyebrow__x { display: none; }
.section-title { font-size: clamp(2rem,4.5vw,3.4rem); margin-bottom: 1rem; letter-spacing: -0.03em; }
.highlight {
  background: linear-gradient(118deg, var(--blue-bright) 0%, var(--blue-light) 50%, var(--blue) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.section-desc { font-size: 1.05rem; color: var(--gray-300); max-width: 620px; line-height: 1.78; }
.section-header { text-align: center; margin-bottom: clamp(3rem,6vw,5rem); }
.section-header .section-desc { margin: 0 auto; }
.section { padding: var(--section-pad) 0; position: relative; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.9rem 2rem; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.01em;
  border-radius: var(--r-sm); cursor: pointer;
  transition: all var(--t-smooth); white-space: nowrap; position: relative; overflow: hidden;
}
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.btn--primary {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
  color: #fff; box-shadow: 0 4px 24px var(--blue-glow), inset 0 1px 0 rgba(255,255,255,0.10);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px var(--blue-glow); }
.btn--outline {
  border: 1px solid var(--border-hover); color: var(--white);
  background: rgba(96,165,250,0.04); backdrop-filter: blur(14px);
}
.btn--outline:hover { border-color: var(--blue-light); transform: translateY(-2px); box-shadow: 0 8px 30px var(--blue-soft); }
.btn--ghost { color: var(--gray-300); }
.btn--ghost:hover { color: var(--white); }
.btn--sm { padding: 0.55rem 1.2rem; font-size: 0.82rem; }
.btn--full { width: 100%; }
.btn--magnetic { --mx:0px; --my:0px; transform: translate(var(--mx),var(--my)); transition: transform 0.14s ease, box-shadow var(--t-smooth); }
.btn--primary.btn--magnetic:hover { transform: translate(var(--mx), calc(var(--my) - 2px)); }
.btn--outline.btn--magnetic:hover { transform: translate(var(--mx), calc(var(--my) - 2px)); }

/* ---- Logo ---- */
.logo {
  display: inline-flex; align-items: baseline;
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  color: var(--white); letter-spacing: -0.02em; transition: transform var(--t-smooth);
}
.logo:hover { transform: scale(1.02); }
.logo__x-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; margin: 0 -0.01em; }
.logo__x { position: relative; z-index: 1; color: var(--red); font-size: 2.1rem; font-weight: 700; line-height: 1; text-shadow: 0 0 24px var(--red-glow); animation: xPulse 3.5s ease-in-out infinite; }
.logo__x-glow { position: absolute; width: 150%; height: 150%; background: radial-gradient(circle, var(--red-glow) 0%, transparent 70%); border-radius: 50%; filter: blur(8px); animation: xGlow 3.5s ease-in-out infinite; }
.logo--footer .logo__x { font-size: 1.8rem; }
@keyframes xPulse { 0%,100% { text-shadow: 0 0 16px var(--red-glow); } 50% { text-shadow: 0 0 40px var(--red-glow); } }
@keyframes xGlow  { 0%,100% { opacity:.5; transform: scale(1); } 50% { opacity:.8; transform: scale(1.3); } }

/* ---- Custom Cursor ---- */
/* Legacy cursor visuals fully removed */
#cursor-dot, #cursor-ring { display:none !important; }
/* Soft ice-blue light that follows the pointer across dark areas */
#bg-glow {
  position:absolute; inset:0; pointer-events:none;
  opacity:0; transition:opacity .6s ease;
  background:radial-gradient(360px circle at var(--gx,50%) var(--gy,50%),
    rgba(150,190,255,.06) 0%, rgba(120,170,255,.03) 35%, transparent 62%);
}

/* ---- Page Transition ---- */
#page-transition { position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;align-items:center;justify-content:center;transition:opacity .5s ease; }
#page-transition.loaded { opacity:0;pointer-events:none; }
.pt-logo { font-family:var(--font-display);font-size:1.7rem;font-weight:700;color:var(--white);letter-spacing:-.02em;animation:ptPulse .85s ease-in-out; }
.pt-x { color:var(--red);text-shadow:0 0 24px var(--red-glow); }
@keyframes ptPulse { 0% { opacity:0;transform:scale(.92); } 60% { opacity:1;transform:scale(1.02); } 100% { opacity:1;transform:scale(1); } }

/* ---- Scroll Progress ---- */
.scroll-progress { position:fixed;top:0;left:0;right:0;height:2px;z-index:9000;background:rgba(255,255,255,.035); }
.scroll-progress__bar { height:100%;width:0;background:linear-gradient(90deg,var(--blue-deep),var(--blue-light));transition:width .1s linear; }

/* ---- Ambient ---- */
.ambient { position:fixed;inset:0;pointer-events:none;z-index:0; }
.ambient__noise { position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");opacity:.4; }
.ambient__vignette { position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 50%,rgba(5,8,16,.6) 100%); }

/* Watermark */
.watermark { position:absolute;pointer-events:none;font-family:var(--font-display);font-size:clamp(7rem,20vw,18rem);font-weight:700;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.02);line-height:1;user-select:none;will-change:transform; }
.watermark--global { top:8vh;right:-3vw; }
.watermark--section { bottom:-2rem;right:-1rem; }

/* ---- Header ---- */
.site-header { position:fixed;top:0;left:0;right:0;height:var(--header-height);z-index:800;transition:background var(--t-smooth),box-shadow var(--t-smooth); }
.site-header.is-scrolled { background:rgba(5,8,16,.88);backdrop-filter:blur(24px) saturate(1.5);box-shadow:0 1px 0 rgba(255,255,255,.05),0 4px 28px rgba(0,0,0,.4); }
.header-inner { display:flex;align-items:center;justify-content:space-between;height:var(--header-height); }

/* Nav */
.nav-list { display:flex;align-items:center;gap:.2rem; }
.nav-item { position:relative; }
/* Invisible bridge: extends the hover zone below the nav link to cover the gap before the dropdown */
.nav-item::after { content:''; position:absolute; top:100%; left:-10px; right:-10px; height:16px; }
.nav-link { display:flex;align-items:center;gap:.3rem;padding:.5rem .9rem;font-size:.9rem;font-weight:500;color:var(--gray-300);border-radius:var(--r-sm);transition:color var(--t-fast),background var(--t-fast); }
.nav-link svg { width:13px;height:13px;transition:transform var(--t-fast); }
.nav-link:hover, .nav-link.is-active { color:var(--white);background:rgba(255,255,255,.055); }
.nav-item:hover .nav-link svg { transform:rotate(180deg); }
.nav-link--cta { background:rgba(37,99,235,.12);border:1px solid var(--blue-border);color:var(--blue-light);padding:.5rem 1.1rem; }
.nav-link--cta:hover { background:rgba(37,99,235,.22);border-color:var(--blue-light);color:#fff; }
.nav-link--cta.is-active { background:var(--blue);border-color:var(--blue);color:#fff; }

/* Dropdown */
.nav-dropdown {
  position:absolute; top:100%; left:50%;
  transform: translateX(-50%) translateY(4px);
  min-width:260px;
  background:rgba(6,9,26,.97); border:1px solid var(--border-md);
  border-radius:var(--r-md); padding:.6rem;
  backdrop-filter:blur(24px);
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:900;
  margin-top:10px;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown { opacity:1; pointer-events:all; transform:translateX(-50%) translateY(0); }
.nav-dropdown a {
  display:flex; align-items:center; gap:.75rem;
  padding:.6rem .85rem; border-radius:var(--r-sm);
  font-size:.87rem; color:var(--gray-300);
  transition:color var(--t-fast), background var(--t-fast);
}
.nav-dropdown a:hover { color:var(--white); background:rgba(255,255,255,.05); }
.nav-dropdown a svg { width:15px;height:15px;stroke:var(--blue-light);flex-shrink:0; }
.nav-dropdown__sep { height:1px;background:var(--border);margin:.4rem .5rem; }

/* Mobile toggle */
.nav-toggle { display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;z-index:10; }
.nav-toggle__bar { display:block;width:22px;height:2px;background:var(--gray-200);border-radius:2px;transition:all var(--t-smooth); }
.nav-toggle.is-open .nav-toggle__bar:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bar:nth-child(2) { opacity:0;transform:scaleX(0); }
.nav-toggle.is-open .nav-toggle__bar:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.nav-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);z-index:799;opacity:0;transition:opacity var(--t-smooth); }
.nav-overlay.is-visible { opacity:1; }

/* ---- Scroll Reveal ---- */
.reveal { opacity:0;transform:translateY(32px);transition:opacity var(--t-reveal),transform var(--t-reveal); }
.reveal.is-visible { opacity:1;transform:none; }
.reveal--d1 { transition-delay:.1s; }
.reveal--d2 { transition-delay:.2s; }
.reveal--d3 { transition-delay:.3s; }
.reveal--d4 { transition-delay:.4s; }
@media (prefers-reduced-motion:reduce) {
  .reveal,.hero__title-line { opacity:1;transform:none;transition:none; }
}

/* ---- Breadcrumb ---- */
.breadcrumb { font-size:.82rem;color:var(--gray-400);margin-bottom:1.1rem;display:flex;align-items:center;gap:.45rem; }
.breadcrumb a:hover { color:var(--blue-light); }
.breadcrumb span { color:var(--gray-500); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height:100svh; display:flex; align-items:center;
  padding-top:var(--header-height); position:relative; overflow:hidden;
}
.hero__bg { position:absolute;inset:0;pointer-events:none;overflow:hidden; }
.hero__orb {
  position:absolute; top:-20%; left:40%; transform:translateX(-50%);
  width:900px; height:700px;
  background:radial-gradient(ellipse at 50% 35%, rgba(37,99,235,.20) 0%, transparent 62%);
  filter:blur(70px);
}
.hero__orb-2 {
  position:absolute; top:30%; right:-8%;
  width:500px; height:450px;
  background:radial-gradient(ellipse, rgba(29,78,216,.12) 0%, transparent 70%);
  filter:blur(90px);
}
/* Very subtle hero grid — fades to transparent, NO tile look */
.hero__grid {
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(96,165,250,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,165,250,.018) 1px, transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(ellipse 65% 55% at 50% 30%, black 0%, transparent 75%);
}
.hero__inner { display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:center;padding:clamp(2.5rem,5vw,5rem) 0; }
.hero__content { position:relative;z-index:2; }
.hero__eyebrow {
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-light); margin-bottom:1.6rem;
  padding:.5rem 1.1rem; border:1px solid var(--blue-border); border-radius:100px;
  background:var(--blue-faint);
}
.hero__eyebrow-dot { width:6px;height:6px;border-radius:50%;background:var(--blue-light);box-shadow:0 0 8px var(--blue-glow);animation:dotPulse 2s ease-in-out infinite; }
@keyframes dotPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.6);opacity:.7; } }
.hero__title { font-size:clamp(2rem,4.2vw,3.8rem);font-weight:700;letter-spacing:-.035em;line-height:1.08;margin-bottom:1.6rem;color:var(--white); }
.hero__title-line { display:block;opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1); }
.hero__title-line.is-visible { opacity:1;transform:none; }
.hero__title-accent { background:linear-gradient(118deg,#fff 0%,var(--blue-bright) 55%,var(--blue-light) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
.hero__desc { font-size:clamp(1rem,1.7vw,1.15rem);color:var(--gray-300);max-width:530px;line-height:1.8;margin-bottom:2.5rem; }
.hero__actions { display:flex;gap:.85rem;flex-wrap:wrap; }
.hero__stats { display:flex;gap:2.5rem;margin-top:clamp(2.5rem,4.5vw,4rem);padding-top:clamp(1.5rem,3vw,2.5rem);border-top:1px solid var(--border); }
.hero__stat-value { font-family:var(--font-display);font-size:clamp(1.7rem,3vw,2.2rem);font-weight:700;color:var(--white);letter-spacing:-.02em;line-height:1;margin-bottom:.3rem;display:block; }
.hero__stat-label { font-size:.78rem;color:var(--gray-400);letter-spacing:.04em; }

/* Hero Visual */
.hero__visual { position:relative;z-index:2;display:flex;align-items:center;justify-content:center; }
.hero__mockup-wrap { position:relative;width:clamp(300px,42vw,520px); }
.hero__browser {
  background:var(--surface);border:1px solid var(--border-md);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.04),0 0 70px rgba(37,99,235,.10);
}
.hero__browser-bar { display:flex;align-items:center;gap:.5rem;padding:.8rem 1.1rem;background:rgba(255,255,255,.025);border-bottom:1px solid var(--border); }
.hero__browser-dots { display:flex;gap:5px; }
.hero__browser-dots span { width:9px;height:9px;border-radius:50%; }
.hero__browser-dots span:nth-child(1) { background:#ff5f57; }
.hero__browser-dots span:nth-child(2) { background:#febc2e; }
.hero__browser-dots span:nth-child(3) { background:#28c840; }
.hero__browser-url { flex:1;text-align:center;font-size:.75rem;color:var(--gray-400);background:rgba(255,255,255,.04);border-radius:5px;padding:.25rem .8rem; }
.hero__browser-body { min-height:300px;overflow:hidden; }
.hero__float-card { position:absolute;background:rgba(10,15,35,.92);border:1px solid var(--border-md);border-radius:var(--r-md);padding:.9rem 1.1rem;backdrop-filter:blur(20px);box-shadow:var(--shadow-card);animation:floatCard 4s ease-in-out infinite; }
.hero__float-card--1 { bottom:-1.2rem;left:-2rem;animation-delay:0s; }
.hero__float-card--2 { top:-.8rem;right:-1.2rem;animation-delay:2s; }
@keyframes floatCard { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }
.hero__float-label { font-size:.68rem;color:var(--gray-400);margin-bottom:.25rem; }
.hero__float-value { font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--white); }
.hero__float-icon { font-size:1.2rem;margin-bottom:.3rem; }

/* ============================================================
   HERO — CENTERED SHOWCASE (fanned browser mockups)
   ============================================================ */
.hero--showcase { display:block;min-height:0;padding-bottom:clamp(3rem,6vw,5.5rem);overflow:hidden; }
.hero__head { max-width:820px;margin:0 auto;text-align:center;position:relative;z-index:2;padding-top:clamp(2.5rem,5vw,4.5rem); }
.hero__head .hero__eyebrow { margin-left:auto;margin-right:auto; }
.hero__head .hero__desc { margin-left:auto;margin-right:auto;text-align:center; }
.hero__head .hero__actions { justify-content:center; }
.container--wide { max-width:1400px; }

.hero-showcase { position:relative;margin:clamp(2.25rem,4.5vw,3.75rem) auto 0;height:clamp(340px,38vw,540px);perspective:2200px; }
.sb {
  position:absolute;top:0;border-radius:14px;overflow:hidden;
  background:#0b1020;border:1px solid rgba(255,255,255,.10);
  box-shadow:0 34px 80px rgba(0,0,0,.55);
  transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .55s;
  will-change:transform;
}
.sb--center { left:50%;width:min(56%,660px);transform:translateX(-50%);z-index:3;box-shadow:0 50px 120px rgba(0,0,0,.6),0 0 90px rgba(37,99,235,.16); }
.sb--side { width:min(43%,520px);top:8%;z-index:1; }
.sb--left  { left:0;transform-origin:right center;transform:rotateY(15deg) scale(.94); }
.sb--right { right:0;transform-origin:left center;transform:rotateY(-15deg) scale(.94); }
.hero-showcase:hover .sb--left  { transform:rotateY(11deg) scale(.95) translateX(-2%); }
.hero-showcase:hover .sb--right { transform:rotateY(-11deg) scale(.95) translateX(2%); }

/* Browser chrome */
.sb-bar { display:flex;align-items:center;gap:.55rem;padding:7px 12px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.07); }
.sb--light .sb-bar { background:#e9edf5;border-bottom-color:#d2d9e6; }
.sb-dots { display:flex;gap:4px; }
.sb-dots i { width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22); }
.sb-dots i:nth-child(1) { background:#ff5f57; }
.sb-dots i:nth-child(2) { background:#febc2e; }
.sb-dots i:nth-child(3) { background:#28c840; }
.sb-url { font-size:9px;color:var(--gray-400);background:rgba(255,255,255,.05);border-radius:4px;padding:2px 10px;letter-spacing:.01em; }
.sb--light .sb-url { color:#5a657a;background:#dde3ee; }

/* Themed screen */
.sb-screen { --acc:var(--blue); }
.sb--blue  .sb-screen { --acc:#3b82f6;background:linear-gradient(160deg,#0c1322 0%,#0a1a36 100%);color:#e8eefc; }
.sb--red   .sb-screen { --acc:#ef4444;background:linear-gradient(160deg,#160c0e 0%,#241016 100%);color:#f4e9ec; }
.sb--light .sb-screen { --acc:#2563eb;background:#ffffff;color:#101828; }

.sb-nav { display:flex;align-items:center;justify-content:space-between;padding:9px 15px; }
.sb-brand { display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.01em; }
.sb-brand__mark { width:15px;height:15px;border-radius:4px;background:var(--acc);flex-shrink:0; }
.sb-brand small { font-weight:500;font-size:7px;letter-spacing:.16em;opacity:.55;display:block;line-height:1; }
.sb-links { display:flex;align-items:center;gap:11px;font-size:8.5px;font-weight:500;opacity:.72; }
.sb-links .sb-cta { background:var(--acc);color:#fff;padding:4px 9px;border-radius:5px;opacity:1;font-weight:600; }
.sb--light .sb-links { opacity:.85; }

.sb-hero { display:grid;grid-template-columns:1.12fr 1fr;gap:13px;padding:5px 15px 12px;align-items:center; }
.sb-eyebrow { font-size:7.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--acc);font-weight:700;margin-bottom:5px; }
.sb-title { font-family:var(--font-display);font-size:clamp(13px,1.7vw,19px);font-weight:700;line-height:1.12;letter-spacing:-.02em;margin-bottom:5px; }
.sb-sub { font-size:8px;opacity:.66;line-height:1.55;margin-bottom:9px; }
.sb-btns { display:flex;gap:6px; }
.sb-btn { font-size:8px;font-weight:600;padding:5px 10px;border-radius:5px;white-space:nowrap; }
.sb-btn--solid { background:var(--acc);color:#fff; }
.sb-btn--ghost { border:1px solid currentColor;opacity:.45; }
.sb-hero__media { aspect-ratio:4/3;border-radius:8px;position:relative;overflow:hidden; }
.sb--blue  .sb-hero__media { background:radial-gradient(circle at 68% 28%,rgba(96,165,250,.5),transparent 62%),linear-gradient(140deg,#16243f,#0b1730); }
.sb--red   .sb-hero__media { background:radial-gradient(circle at 68% 28%,rgba(239,68,68,.45),transparent 62%),linear-gradient(140deg,#2c1014,#15070a); }
.sb--light .sb-hero__media { background:radial-gradient(circle at 68% 28%,rgba(37,99,235,.28),transparent 62%),linear-gradient(140deg,#e7ecf6,#d4ddec); }
.sb-hero__media::after { content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.08) 50%,transparent 60%); }

.sb-feats { display:flex;gap:8px;padding:0 15px 14px; }
.sb-feat { flex:1;display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);border-radius:7px;padding:6px 8px; }
.sb--light .sb-feat { background:#f4f6fb;border-color:#e4e9f3; }
.sb-feat__ic { width:15px;height:15px;border-radius:4px;background:var(--acc);opacity:.9;flex-shrink:0; }
.sb-feat b { font-size:7.5px;font-weight:700;display:block;line-height:1.2; }
.sb-feat i { font-size:6.5px;opacity:.58;font-style:normal;line-height:1.2; }

/* Industry themes (used by portfolio carousel) */
.sb--food   .sb-screen { --acc:#f59e0b;background:linear-gradient(160deg,#1a1206,#241a08);color:#f6ecdd; }
.sb--food   .sb-hero__media { background:radial-gradient(circle at 68% 28%,rgba(245,158,11,.42),transparent 62%),linear-gradient(140deg,#2a1d08,#160f04); }
.sb--auto   .sb-screen { --acc:#3b82f6;background:linear-gradient(160deg,#0a1322,#0c1d3a);color:#e6eefc; }
.sb--auto   .sb-hero__media { background:radial-gradient(circle at 68% 28%,rgba(59,130,246,.44),transparent 62%),linear-gradient(140deg,#13233f,#0a1730); }
.sb--gym    .sb-screen { --acc:#ef4444;background:linear-gradient(160deg,#160a0a,#221010);color:#f4e7e7; }
.sb--gym    .sb-hero__media { background:radial-gradient(circle at 68% 28%,rgba(239,68,68,.44),transparent 62%),linear-gradient(140deg,#2a1212,#150808); }
.sb--realty .sb-screen { --acc:#c9a24a;background:linear-gradient(160deg,#14110a,#1d1809);color:#f1ead9; }
.sb--realty .sb-hero__media { background:radial-gradient(circle at 68% 28%,rgba(201,162,74,.42),transparent 62%),linear-gradient(140deg,#241d0c,#140f06); }
.sb--beauty .sb-screen,
.sb--med    .sb-screen { background:#fff; }
.sb--beauty .sb-bar, .sb--med .sb-bar { background:#e9edf5;border-bottom-color:#d2d9e6; }
.sb--beauty .sb-url, .sb--med .sb-url { color:#5a657a;background:#dde3ee; }
.sb--beauty .sb-feat, .sb--med .sb-feat { background:#f4f6fb;border-color:#e4e9f3; }
.sb--beauty .sb-links, .sb--med .sb-links { opacity:.85; }
.sb--beauty .sb-screen { --acc:#db4d96;color:#1d1118; }
.sb--beauty .sb-hero__media { background:radial-gradient(circle at 68% 28%,rgba(219,77,150,.28),transparent 62%),linear-gradient(140deg,#f6e7f0,#ecd9e6); }
.sb--med    .sb-screen { --acc:#10a37f;color:#0f1c18; }
.sb--med    .sb-hero__media { background:radial-gradient(circle at 68% 28%,rgba(16,163,127,.26),transparent 62%),linear-gradient(140deg,#e4f2ee,#d3e8e1); }

@media (max-width:760px) {
  .hero-showcase { height:auto;perspective:none;margin-top:2.25rem; }
  .sb--side { display:none; }
  .sb--center { position:relative;left:auto;transform:none;width:100%; }
}

/* ---- Page Hero ---- */
.page-hero { padding:calc(var(--header-height) + clamp(2.5rem,5vw,4.5rem)) 0 clamp(3.5rem,6vw,5.5rem);position:relative;overflow:hidden; }
.page-hero__bg { position:absolute;inset:0;pointer-events:none;overflow:hidden; }
.page-hero__orb { position:absolute;top:-25%;left:50%;transform:translateX(-50%);width:850px;height:550px;background:radial-gradient(ellipse at 50% 30%,rgba(37,99,235,.16) 0%,transparent 60%);filter:blur(70px); }
.page-hero__content { position:relative;z-index:2; }
.page-hero__title { font-size:clamp(2.4rem,5vw,4.2rem);letter-spacing:-.035em;max-width:820px;margin-bottom:1.1rem; }
.page-hero__desc { font-size:clamp(1rem,1.7vw,1.15rem);color:var(--gray-300);max-width:600px;line-height:1.78; }

/* ---- Trust Bar ---- */
.trust-bar {
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:rgba(10,15,35,.5);
  backdrop-filter:blur(12px);
  padding:0;
}
.trust-bar__inner {
  display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none;
}
.trust-bar__inner::-webkit-scrollbar { display:none; }
.trust-item {
  display:flex;align-items:center;gap:.65rem;
  padding:1rem 1.6rem;
  white-space:nowrap;flex-shrink:0;
  font-size:.83rem;font-weight:500;color:var(--gray-400);
  border-right:1px solid var(--border);
  transition:color var(--t-fast),background var(--t-fast);
}
.trust-item:last-child { border-right:none; }
.trust-item:hover { color:var(--gray-200);background:rgba(255,255,255,.025); }
.trust-item svg { width:15px;height:15px;stroke:var(--blue-light);flex-shrink:0; }

/* ---- Stats Strip ---- */
.stats-strip { display:flex;align-items:stretch;flex-wrap:wrap;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--card);backdrop-filter:blur(20px);overflow:hidden; }
.stat { flex:1;min-width:140px;padding:clamp(1.4rem,2.5vw,2rem) clamp(1.25rem,2vw,2rem);text-align:center;border-right:1px solid var(--border); }
.stat:last-child { border-right:none; }
.stat__value { display:block;font-family:var(--font-display);font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:700;color:var(--white);letter-spacing:-.02em;line-height:1;margin-bottom:.35rem; }
.stat__label { font-size:.78rem;color:var(--gray-400);letter-spacing:.04em; }

/* ============================================================
   SERVICES ACCORDION
   ============================================================ */
.svc-accordion { border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--card);backdrop-filter:blur(16px); }
.svc-item { border-bottom:1px solid var(--border);transition:background var(--t-smooth); }
.svc-item:last-child { border-bottom:none; }
.svc-item.is-open { background:rgba(37,99,235,.04); }
.svc-header { display:flex;align-items:center;gap:1.25rem;padding:1.6rem 1.75rem;cursor:pointer;user-select:none;transition:background var(--t-fast); }
.svc-header:hover { background:rgba(255,255,255,.02); }
.svc-num { font-family:var(--font-display);font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--gray-500);min-width:1.8rem;transition:color var(--t-fast); }
.svc-item.is-open .svc-num { color:var(--blue-light); }
.svc-icon { width:40px;height:40px;border-radius:var(--r-sm);background:var(--blue-faint);border:1px solid var(--blue-border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--t-smooth),border-color var(--t-smooth); }
.svc-icon svg { width:18px;height:18px;stroke:var(--blue-light); }
.svc-item.is-open .svc-icon { background:var(--blue-soft);border-color:var(--blue-light); }
.svc-title { font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--gray-200);letter-spacing:-.01em;flex:1;transition:color var(--t-fast); }
.svc-item.is-open .svc-title { color:var(--white); }
.svc-tag { font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-400);padding:.28rem .65rem;border:1px solid var(--border);border-radius:100px;display:none; }
@media(min-width:640px) { .svc-tag { display:block; } }
.svc-chevron { width:26px;height:26px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform var(--t-smooth),background var(--t-smooth),border-color var(--t-smooth); }
.svc-chevron svg { width:13px;height:13px;stroke:var(--gray-400);transition:stroke var(--t-fast); }
.svc-item.is-open .svc-chevron { transform:rotate(180deg);background:var(--blue-soft);border-color:var(--blue-border); }
.svc-item.is-open .svc-chevron svg { stroke:var(--blue-light); }
.svc-body { max-height:0;overflow:hidden;transition:max-height .42s cubic-bezier(.4,0,.2,1); }
.svc-item.is-open .svc-body { max-height:500px; }
.svc-content { display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 2.5rem;padding:0 1.75rem 1.75rem;padding-left:calc(1.75rem + 1.25rem + 40px + 1.25rem); }
.svc-desc { font-size:.95rem;color:var(--gray-300);line-height:1.78;grid-column:1/-1;margin-bottom:.25rem; }
.svc-list { display:flex;flex-direction:column;gap:.55rem; }
.svc-list li { display:flex;align-items:center;gap:.65rem;font-size:.88rem;color:var(--gray-300); }
.svc-list li svg { width:15px;height:15px;stroke:var(--blue-light);flex-shrink:0; }
.svc-link { margin-top:1rem;display:inline-flex;align-items:center;gap:.45rem;font-size:.87rem;font-weight:600;color:var(--blue-light);transition:gap var(--t-fast),color var(--t-fast); }
.svc-link:hover { gap:.75rem;color:var(--white); }
.svc-link svg { width:15px;height:15px; }
@media(max-width:680px) {
  .svc-content { grid-template-columns:1fr;padding-left:1.75rem; }
  .svc-header { gap:.9rem;padding:1.25rem; }
  .svc-content { padding:0 1.25rem 1.5rem; }
}

/* ============================================================
   SERVICE CARDS (leistungen.html detail)
   ============================================================ */
.services-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem; }
.service-card { position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(1.6rem,2.5vw,2.1rem);backdrop-filter:blur(16px);transition:border-color var(--t-smooth),box-shadow var(--t-smooth),transform var(--t-smooth);overflow:hidden;scroll-margin-top:100px; }
.service-card::before { content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--blue-border),transparent);opacity:0;transition:opacity var(--t-smooth); }
.service-card:hover { border-color:var(--blue-border);box-shadow:var(--shadow-hover);transform:translateY(-3px); }
.service-card:hover::before { opacity:1; }
.service-card__icon { width:48px;height:48px;border-radius:var(--r-sm);background:var(--blue-faint);border:1px solid var(--blue-border);display:flex;align-items:center;justify-content:center;margin-bottom:1.4rem;transition:background var(--t-smooth); }
.service-card:hover .service-card__icon { background:var(--blue-soft); }
.service-card__icon svg { width:20px;height:20px;stroke:var(--blue-light); }
.service-card__title { font-size:1.1rem;margin-bottom:.65rem;letter-spacing:-.01em; }
.service-card__text { font-size:.9rem;color:var(--gray-300);line-height:1.7;margin-bottom:1.1rem; }
.service-card__list { display:flex;flex-direction:column;gap:.5rem; }
.service-card__list li { display:flex;align-items:center;gap:.55rem;font-size:.84rem;color:var(--gray-300); }
.service-card__list li svg { width:13px;height:13px;stroke:var(--blue-light);flex-shrink:0; }

/* ============================================================
   PREMIUM LEISTUNG CARDS (leistungen.html overview)
   ============================================================ */
.leistung-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,1.8vw,1.6rem); }
.leistung-card {
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(168deg,rgba(255,255,255,.035) 0%,rgba(255,255,255,.012) 100%);
  border:1px solid rgba(255,255,255,.07);
  border-radius:20px;
  padding:clamp(1.7rem,2.6vw,2.3rem);
  backdrop-filter:blur(18px);
  overflow:hidden;
  transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .5s,box-shadow .5s,background .5s;
}
.leistung-card::before {
  content:'';position:absolute;inset:0;border-radius:20px;pointer-events:none;
  background:radial-gradient(120% 90% at 50% -20%,rgba(37,99,235,.16) 0%,transparent 55%);
  opacity:0;transition:opacity .5s;
}
.leistung-card:hover {
  transform:translateY(-6px);
  border-color:rgba(96,165,250,.32);
  background:linear-gradient(168deg,rgba(37,99,235,.07) 0%,rgba(255,255,255,.015) 100%);
  box-shadow:0 24px 60px rgba(0,0,0,.4),0 0 60px rgba(37,99,235,.10);
}
.leistung-card:hover::before { opacity:1; }
.leistung-card__icon {
  width:56px;height:56px;border-radius:15px;flex-shrink:0;
  background:linear-gradient(150deg,rgba(37,99,235,.18),rgba(37,99,235,.05));
  border:1px solid rgba(96,165,250,.22);
  display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;
  transition:transform .5s,box-shadow .5s;
}
.leistung-card:hover .leistung-card__icon { transform:scale(1.06);box-shadow:0 0 28px rgba(37,99,235,.25); }
.leistung-card__icon svg { width:24px;height:24px;stroke:var(--blue-light); }
.leistung-card__title { font-family:var(--font-display);font-size:1.18rem;font-weight:700;color:var(--white);letter-spacing:-.02em;margin-bottom:.6rem;line-height:1.25; }
.leistung-card__text { font-size:.9rem;color:var(--gray-400);line-height:1.7;margin-bottom:1.5rem;flex-grow:1; }
.leistung-card__foot { display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1.35rem;border-top:1px solid rgba(255,255,255,.06); }
.leistung-card__price { display:flex;flex-direction:column;gap:.1rem; }
.leistung-card__price small { font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-500); }
.leistung-card__price b { font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--white);letter-spacing:-.02em; }
.leistung-card__more {
  display:inline-flex;align-items:center;gap:.4rem;flex-shrink:0;
  font-size:.82rem;font-weight:600;color:var(--blue-light);
  padding:.6rem .95rem;border-radius:100px;border:1px solid rgba(96,165,250,.25);
  background:rgba(37,99,235,.06);transition:all var(--t-fast);
}
.leistung-card__more svg { width:14px;height:14px;stroke:currentColor;transition:transform var(--t-fast); }
.leistung-card:hover .leistung-card__more { background:var(--blue);border-color:var(--blue);color:#fff; }
.leistung-card:hover .leistung-card__more svg { transform:translateX(3px); }
@media (max-width:980px) { .leistung-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px) { .leistung-grid { grid-template-columns:1fr; } }

/* ============================================================
   SERVICE DETAIL PAGES (website-erstellen.html etc.)
   ============================================================ */
.lp-hero { position:relative;padding:clamp(7rem,12vw,10rem) 0 clamp(3.5rem,6vw,5.5rem);overflow:hidden; }
.lp-hero__inner { max-width:760px;position:relative;z-index:2; }
.lp-hero__price-badge { display:inline-flex;align-items:baseline;gap:.5rem;margin-bottom:1.6rem;padding:.55rem 1.15rem;border:1px solid var(--blue-border);border-radius:100px;background:var(--blue-faint);backdrop-filter:blur(10px); }
.lp-hero__price-badge small { font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-400); }
.lp-hero__price-badge b { font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--blue-light); }
.lp-hero__title { font-family:var(--font-display);font-size:clamp(2.1rem,4.6vw,3.7rem);font-weight:700;line-height:1.08;letter-spacing:-.035em;color:var(--white);margin-bottom:1.3rem; }
.lp-hero__title .highlight { color:var(--blue-light);background:linear-gradient(118deg,#fff,var(--blue-bright) 60%,var(--blue-light));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
.lp-hero__lead { font-size:clamp(1.02rem,1.7vw,1.2rem);color:var(--gray-300);line-height:1.75;margin-bottom:2.2rem;max-width:620px; }
.lp-hero__actions { display:flex;gap:.85rem;flex-wrap:wrap; }

/* Problem / Lösung split */
.lp-split { display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.25rem,2.5vw,2rem); }
.lp-panel { position:relative;border-radius:20px;padding:clamp(1.8rem,3vw,2.6rem);border:1px solid rgba(255,255,255,.07);backdrop-filter:blur(16px);overflow:hidden; }
.lp-panel--problem { background:linear-gradient(165deg,rgba(239,68,68,.05),rgba(255,255,255,.012)); }
.lp-panel--problem .lp-panel__tag { color:#f87171;border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.07); }
.lp-panel--solution { background:linear-gradient(165deg,rgba(37,99,235,.08),rgba(255,255,255,.012));border-color:rgba(96,165,250,.22); }
.lp-panel__tag { display:inline-flex;align-items:center;gap:.45rem;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-light);border:1px solid var(--blue-border);background:var(--blue-faint);border-radius:100px;padding:.35rem .85rem;margin-bottom:1.2rem; }
.lp-panel__title { font-family:var(--font-display);font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:700;color:var(--white);letter-spacing:-.02em;margin-bottom:1rem;line-height:1.2; }
.lp-panel__text { font-size:.96rem;color:var(--gray-300);line-height:1.8; }
.lp-panel__text + .lp-panel__text { margin-top:.9rem; }

/* Advantages */
.lp-benefits { display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,1.5rem); }
.lp-benefit { display:flex;gap:1rem;align-items:flex-start;padding:clamp(1.2rem,2vw,1.6rem);border:1px solid rgba(255,255,255,.06);border-radius:16px;background:rgba(255,255,255,.018);transition:border-color var(--t-smooth),background var(--t-smooth); }
.lp-benefit:hover { border-color:var(--blue-border);background:rgba(37,99,235,.04); }
.lp-benefit__check { flex-shrink:0;width:30px;height:30px;border-radius:9px;background:var(--blue-soft);border:1px solid var(--blue-border);display:flex;align-items:center;justify-content:center; }
.lp-benefit__check svg { width:15px;height:15px;stroke:var(--blue-light); }
.lp-benefit p { font-size:.94rem;color:var(--gray-200);line-height:1.55;font-weight:500;padding-top:.25rem; }

/* Target audience chips */
.lp-audience { display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center; }
.lp-audience__chip { display:inline-flex;align-items:center;gap:.55rem;font-size:.92rem;font-weight:500;color:var(--gray-200);padding:.75rem 1.3rem;border:1px solid rgba(255,255,255,.08);border-radius:100px;background:rgba(255,255,255,.025);transition:all var(--t-fast); }
.lp-audience__chip:hover { border-color:var(--blue-border);background:var(--blue-faint);color:#fff; }
.lp-audience__chip svg { width:16px;height:16px;stroke:var(--blue-light); }

/* Process timeline */
.lp-steps { display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem); }
.lp-step { position:relative;padding:clamp(1.4rem,2.2vw,1.9rem);border:1px solid rgba(255,255,255,.06);border-radius:16px;background:rgba(255,255,255,.018);transition:border-color var(--t-smooth),transform var(--t-smooth); }
.lp-step:hover { border-color:var(--blue-border);transform:translateY(-3px); }
.lp-step__num { font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--blue-light);background:var(--blue-soft);border:1px solid var(--blue-border);width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem; }
.lp-step__title { font-family:var(--font-display);font-size:1.02rem;font-weight:600;color:var(--white);margin-bottom:.4rem; }
.lp-step__text { font-size:.85rem;color:var(--gray-400);line-height:1.6; }
.lp-step__opt { display:inline-block;margin-top:.6rem;font-size:.68rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--gray-500); }

/* Price box */
.lp-pricebox { max-width:430px;margin:0 auto;text-align:center;position:relative;border-radius:20px;padding:clamp(1.9rem,3.4vw,2.5rem) clamp(1.6rem,3vw,2.3rem);border:1px solid var(--blue-border);background:linear-gradient(165deg,rgba(37,99,235,.10),rgba(255,255,255,.014));backdrop-filter:blur(20px);overflow:hidden;box-shadow:0 22px 55px rgba(0,0,0,.3); }
.lp-pricebox::before { content:'';position:absolute;inset:0;background:radial-gradient(130% 90% at 50% -10%,rgba(37,99,235,.15),transparent 62%);pointer-events:none; }
.lp-pricebox__label { position:relative;font-family:var(--font-display);font-size:clamp(1.5rem,2.8vw,2rem);font-weight:700;color:var(--white);letter-spacing:-.02em;line-height:1.2;margin-bottom:.65rem;text-transform:none; }
.lp-pricebox__price { position:relative;display:inline-flex;align-items:baseline;gap:.34rem;font-family:var(--font-display);font-size:clamp(1.9rem,3.1vw,2.35rem);font-weight:700;color:var(--white);letter-spacing:-.02em;line-height:1;margin-bottom:.95rem; }
.lp-pricebox__price::before { content:'ab';font-family:var(--font-body);font-size:.78rem;font-weight:500;color:var(--gray-400);letter-spacing:.04em;text-transform:uppercase; }
.lp-pricebox__price span { font-size:.92rem;color:var(--gray-400);font-weight:500; }
.lp-pricebox__hint { position:relative;font-size:.92rem;color:var(--gray-300);line-height:1.6;margin:0 auto 1.5rem;max-width:330px; }
.lp-pricebox .btn { position:relative;padding:.85rem 1.7rem;font-size:.94rem;border-radius:12px; }

/* Premium Leistung-Card (besonders hochwertig) */
.leistung-card--premium { border-color:rgba(96,165,250,.4);background:linear-gradient(168deg,rgba(37,99,235,.13) 0%,rgba(37,99,235,.03) 100%); }
.leistung-card--premium::before { opacity:.7; }
.leistung-card--premium:hover { border-color:rgba(96,165,250,.55);box-shadow:0 28px 70px rgba(0,0,0,.45),0 0 70px rgba(37,99,235,.18); }
.leistung-card__badge { position:absolute;top:1.4rem;right:1.4rem;display:inline-flex;align-items:center;gap:.35rem;font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--blue),var(--blue-deep));border-radius:100px;padding:.34rem .8rem;box-shadow:0 6px 18px rgba(37,99,235,.4); }
.leistung-card--premium .leistung-card__icon { background:linear-gradient(150deg,rgba(37,99,235,.3),rgba(37,99,235,.08));border-color:rgba(96,165,250,.4); }

/* FAQ reuse .faq-* ; CTA reuse .cta-box */
.lp-section-num { display:inline-block;font-family:var(--font-display);font-size:.8rem;font-weight:600;letter-spacing:.1em;color:var(--blue-light);margin-bottom:.5rem; }

@media (max-width:820px) {
  .lp-split { grid-template-columns:1fr; }
  .lp-benefits { grid-template-columns:1fr; }
  .lp-steps { grid-template-columns:1fr; }
}

/* ============================================================
   MINI WEBSITES — rich CSS mockups
   ============================================================ */
.mini {
  width:100%; height:280px;
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}
/* Backgrounds */
.mini--beauty { background:linear-gradient(160deg,#12002a 0%,#280050 50%,#150030 100%); }
.mini--food   { background:linear-gradient(160deg,#1a0800 0%,#3d1500 50%,#1a0800 100%); }
.mini--auto   { background:linear-gradient(160deg,#030b18 0%,#071530 50%,#030b18 100%); }
.mini--med    { background:linear-gradient(160deg,#001810 0%,#002e1e 50%,#001810 100%); }
.mini--realty { background:linear-gradient(160deg,#0a0800 0%,#1f1a00 50%,#0a0800 100%); }
.mini--gym    { background:linear-gradient(160deg,#180000 0%,#360000 50%,#180000 100%); }
.mini--install{ background:linear-gradient(160deg,#00101a 0%,#002436 50%,#00101a 100%); }

/* Mini nav */
.m-nav { display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0; }
.m-logo { width:38px;height:5px;border-radius:3px;background:rgba(255,255,255,.65); }
.m-links { display:flex;gap:5px; }
.m-links i { display:block;width:20px;height:3.5px;border-radius:2px;background:rgba(255,255,255,.22); }
.m-links i:last-child { width:28px;height:14px;border-radius:4px;background:rgba(96,165,250,.55); }

/* Mini hero */
.m-hero { padding:14px 12px 10px;flex-shrink:0; }
.m-tag { width:50px;height:5px;border-radius:2px;background:rgba(255,255,255,.25);margin-bottom:8px; }
.m-h1 { width:78%;height:8px;border-radius:3px;background:rgba(255,255,255,.82);margin-bottom:5px; }
.m-h2 { width:58%;height:8px;border-radius:3px;background:rgba(255,255,255,.82);margin-bottom:8px; }
.m-p  { width:88%;height:4px;border-radius:2px;background:rgba(255,255,255,.28);margin-bottom:3px; }
.m-p2 { width:65%;height:4px;border-radius:2px;background:rgba(255,255,255,.28);margin-bottom:10px; }
.m-btn { display:inline-block;width:58px;height:17px;border-radius:4px;margin-right:6px; }
.mini--beauty .m-btn { background:rgba(210,100,180,.8); }
.mini--food   .m-btn { background:rgba(230,140,30,.8); }
.mini--auto   .m-btn { background:rgba(50,100,220,.8); }
.mini--med    .m-btn { background:rgba(30,160,100,.8); }
.mini--realty .m-btn { background:rgba(200,160,40,.8); }
.mini--gym    .m-btn { background:rgba(220,40,40,.8); }
.mini--install{ background:rgba(30,120,200,.8); }
.m-btn2 { display:inline-block;width:44px;height:17px;border-radius:4px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2); }

/* Mini cards row */
.m-cards { display:flex;gap:6px;padding:0 12px 12px;flex-shrink:0; }
.m-card { flex:1;border-radius:6px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);padding:8px 7px; }
.m-c-icon { width:16px;height:16px;border-radius:50%;background:rgba(96,165,250,.5);margin-bottom:5px; }
.mini--beauty .m-c-icon { background:rgba(210,100,180,.5); }
.mini--food   .m-c-icon { background:rgba(230,140,30,.5); }
.mini--auto   .m-c-icon { background:rgba(50,100,220,.5); }
.mini--med    .m-c-icon { background:rgba(30,160,100,.5); }
.mini--realty .m-c-icon { background:rgba(200,160,40,.5); }
.mini--gym    .m-c-icon { background:rgba(220,40,40,.5); }
.m-c-t { width:70%;height:3.5px;border-radius:2px;background:rgba(255,255,255,.5);margin-bottom:3px; }
.m-c-s { width:90%;height:3px;border-radius:2px;background:rgba(255,255,255,.2); }
.m-c-s2 { width:60%;height:3px;border-radius:2px;background:rgba(255,255,255,.2);margin-top:2px; }

/* ============================================================
   PORTFOLIO SHOWCASE (index grid)
   ============================================================ */
.portfolio-showcase { display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem; }
.pf-showcase-card {
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;backdrop-filter:blur(16px);
  transition:border-color var(--t-smooth),box-shadow var(--t-smooth),transform var(--t-smooth);
  cursor:pointer; display:block;
}
.pf-showcase-card:hover { border-color:var(--blue-border);box-shadow:var(--shadow-hover);transform:translateY(-5px); }
.pf-showcase-card__browser { background:var(--surface);padding:.6rem .8rem 0;border-bottom:1px solid var(--border); }
.pf-showcase-card__bar { display:flex;align-items:center;gap:4px;margin-bottom:.5rem; }
.pf-showcase-card__dot { width:7px;height:7px;border-radius:50%; }
.pf-showcase-card__dot:nth-child(1) { background:rgba(255,95,87,.45); }
.pf-showcase-card__dot:nth-child(2) { background:rgba(254,188,46,.45); }
.pf-showcase-card__dot:nth-child(3) { background:rgba(40,200,64,.45); }
.pf-showcase-card__mini { border-radius:5px 5px 0 0;overflow:hidden;height:156px; }
.pf-showcase-card__info { padding:1.1rem 1.35rem 1.35rem; }
.pf-showcase-card__tag { font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-light);margin-bottom:.45rem; }
.pf-showcase-card__title { font-size:1rem;font-weight:700;color:var(--white);letter-spacing:-.01em;margin-bottom:.35rem; }
.pf-showcase-card__desc { font-size:.82rem;color:var(--gray-400);line-height:1.58; }

/* Portfolio carousel (portfolio.html) */
.pf-stage { position:relative;height:clamp(360px,42vw,470px);perspective:1700px;display:flex;align-items:center;justify-content:center;margin-bottom:2.25rem; }
.portfolio-carousel-wrap { position:relative;height:460px;perspective:1200px;display:flex;align-items:center;justify-content:center;overflow:hidden; }
.pf-track { position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center; }
.pf-card { position:absolute;width:min(500px,86vw);background:var(--surface);border:1px solid var(--border-md);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);transition:transform .6s cubic-bezier(.34,1.1,.64,1),opacity .5s ease;cursor:pointer; }
.pf-card[data-pos="center"] { transform:translateX(0) scale(1) translateZ(0);opacity:1;z-index:4; }
.pf-card[data-pos="left"]   { transform:translateX(-60%) scale(.82) rotateY(16deg) rotateZ(-2.5deg);opacity:.48;z-index:2; }
.pf-card[data-pos="right"]  { transform:translateX(60%) scale(.82) rotateY(-16deg) rotateZ(2.5deg);opacity:.48;z-index:2; }
.pf-card[data-pos="hidden"] { transform:translateX(0) scale(.55);opacity:0;z-index:1;pointer-events:none; }
.pf-card:hover { box-shadow:var(--shadow-hover); }
.browser { background:var(--card-solid); }
.browser__bar { display:flex;align-items:center;gap:.4rem;padding:.6rem .9rem;border-bottom:1px solid var(--border);background:rgba(255,255,255,.02); }
.browser__dots { display:flex;gap:4px; }
.browser__dots span { width:7px;height:7px;border-radius:50%; }
.browser__dots span:nth-child(1) { background:rgba(255,95,87,.5); }
.browser__dots span:nth-child(2) { background:rgba(254,188,46,.5); }
.browser__dots span:nth-child(3) { background:rgba(40,200,64,.5); }
.browser__url { flex:1;text-align:center;font-size:.7rem;color:var(--gray-400);background:rgba(255,255,255,.04);border-radius:4px;padding:.2rem .6rem; }
.browser__viewport { overflow:hidden; }

/* Portfolio nav */
.portfolio-nav { display:flex;align-items:center;justify-content:center;gap:.9rem;margin-top:2.25rem; }
.pf-arrow { width:44px;height:44px;border-radius:50%;border:1px solid var(--border-md);background:var(--card);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--t-fast); }
.pf-arrow:hover { border-color:var(--blue-border);background:var(--blue-faint); }
.pf-arrow svg { width:16px;height:16px;stroke:var(--gray-200); }
.pf-dots { display:flex;gap:.45rem; }
.pf-dot { width:6px;height:6px;border-radius:50%;background:var(--gray-500);cursor:pointer;transition:all var(--t-fast); }
.pf-dot.is-active { background:var(--blue-light);width:20px;border-radius:3px; }
.pf-controls { display:flex;align-items:center;justify-content:center;gap:.9rem;margin-top:2.25rem; }
/* Branche-Grid: 3 oben, 3 unten, zentriert */
.why-grid.why-grid--3 { grid-template-columns:repeat(3,1fr);max-width:1040px;margin-left:auto;margin-right:auto; }
@media (max-width:920px) { .why-grid.why-grid--3 { grid-template-columns:repeat(2,1fr);max-width:580px; } }
@media (max-width:560px) { .why-grid.why-grid--3 { grid-template-columns:1fr;max-width:360px; } }
.pf-info { text-align:center;margin-top:1.35rem; }
.pf-info__industry { font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-light);margin-bottom:.3rem; }
.pf-info__title { font-size:1.25rem;font-weight:700;color:var(--white);margin-bottom:.3rem; }
.pf-info__desc { font-size:.9rem;color:var(--gray-300);max-width:460px;margin:0 auto; }

/* ============================================================
   PROCESS
   ============================================================ */
.process-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1px;position:relative; }
.process-step { background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(1.6rem,2.5vw,2.25rem);position:relative;transition:border-color var(--t-smooth),box-shadow var(--t-smooth),transform var(--t-smooth);overflow:hidden; }
.process-step::after { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--blue-light),transparent);opacity:0;transition:opacity var(--t-smooth); }
.process-step:hover { border-color:var(--blue-border);box-shadow:var(--shadow-hover);transform:translateY(-3px); }
.process-step:hover::after { opacity:1; }
.process-step__num { font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--blue-light);display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;border:1px solid var(--blue-border);background:var(--blue-faint);margin-bottom:1.35rem; }
.process-step__title { font-size:1.05rem;margin-bottom:.55rem; }
.process-step__text { font-size:.87rem;color:var(--gray-300);line-height:1.68; }

/* ============================================================
   PRICING CARDS
   ============================================================ */
.pricing-grid-3 { display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;align-items:start; }
.pricing-grid-4 { display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;align-items:start; }
.pricing-grid-dynamic { display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.25rem;align-items:start; }
.pricing-card { background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(1.6rem,2.5vw,2.25rem);backdrop-filter:blur(16px);position:relative;transition:border-color var(--t-smooth),box-shadow var(--t-smooth),transform var(--t-smooth);overflow:hidden; }
.pricing-card:hover { border-color:var(--blue-border);box-shadow:var(--shadow-hover);transform:translateY(-3px); }
.pricing-card--featured { border-color:var(--blue-border);background:linear-gradient(160deg,rgba(37,99,235,.09) 0%,var(--card) 55%);box-shadow:0 0 0 1px var(--blue-border),var(--shadow-hover);transform:translateY(-6px); }
.pricing-card--featured:hover { transform:translateY(-9px); }
.pricing-card__badge { position:absolute;top:1.35rem;right:1.35rem;font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--blue),var(--blue-deep));border-radius:100px;padding:.28rem .7rem; }
.pricing-card__name { font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-400);margin-bottom:.65rem; }
.pricing-card__price { font-family:var(--font-display);font-size:clamp(2rem,3.5vw,2.7rem);font-weight:700;color:var(--white);letter-spacing:-.03em;line-height:1;margin-bottom:.3rem; }
.pricing-card__price-sub { font-size:.82rem;color:var(--gray-400);margin-bottom:1.25rem; }
.pricing-card__divider { height:1px;background:var(--border);margin:1.25rem 0; }
.pricing-card__desc { font-size:.88rem;color:var(--gray-300);line-height:1.7;margin-bottom:1.35rem; }
.pricing-card__features { display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.75rem; }
.pricing-card__features li { display:flex;align-items:center;gap:.65rem;font-size:.87rem;color:var(--gray-300); }
.pricing-card__features li svg { width:14px;height:14px;stroke:var(--blue-light);flex-shrink:0; }
.pricing-card__cta { width:100%; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem; }
.testimonial-card { background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(1.6rem,2.5vw,2.1rem);backdrop-filter:blur(16px);position:relative;transition:border-color var(--t-smooth),box-shadow var(--t-smooth),transform var(--t-smooth);overflow:hidden; }
.testimonial-card::before { content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--blue-border),transparent);opacity:0;transition:opacity var(--t-smooth); }
.testimonial-card:hover { border-color:var(--blue-border);box-shadow:var(--shadow-hover);transform:translateY(-3px); }
.testimonial-card:hover::before { opacity:1; }
.testimonial-card__stars { display:flex;gap:2px;margin-bottom:1.1rem; }
.testimonial-card__stars svg { width:14px;height:14px;fill:#f59e0b;stroke:none; }
.testimonial-card__quote { font-size:.95rem;color:var(--gray-200);line-height:1.75;margin-bottom:1.5rem;font-style:italic; }
.testimonial-card__quote::before { content:'\201C';color:var(--blue-light);font-size:1.5em;line-height:0;vertical-align:-.35em;margin-right:.1em; }
.testimonial-card__author { display:flex;align-items:center;gap:.9rem;padding-top:1.1rem;border-top:1px solid var(--border); }
.testimonial-card__avatar { width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--blue-deep),var(--blue));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:.8rem;font-weight:700;color:#fff;flex-shrink:0;border:1px solid var(--blue-border); }
.testimonial-card__avatar--alt { background:linear-gradient(135deg,#1a1440,#2d1b6e); }
.testimonial-card__avatar--3   { background:linear-gradient(135deg,#0a2a1a,#0d4a2a); }
.testimonial-card__name { font-weight:700;font-size:.9rem;color:var(--white);margin-bottom:.15rem; }
.testimonial-card__company { font-size:.78rem;color:var(--gray-400); }

/* ============================================================
   SERVICE DETAIL BLOCKS (leistungen.html)
   ============================================================ */
.svc-details { display:flex;flex-direction:column;gap:clamp(1.25rem,2.5vw,1.85rem); }
.svc-detail { scroll-margin-top:96px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(1.6rem,3vw,2.6rem);backdrop-filter:blur(16px);position:relative;overflow:hidden;transition:border-color var(--t-smooth); }
.svc-detail:hover { border-color:var(--blue-border); }
.svc-detail::before { content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:linear-gradient(180deg,var(--blue) 0%,transparent 85%); }
.svc-detail__head { display:flex;align-items:center;gap:1rem;margin-bottom:1.1rem; }
.svc-detail__icon { width:54px;height:54px;flex-shrink:0;border-radius:var(--r-md);background:var(--blue-faint);border:1px solid var(--blue-border);display:flex;align-items:center;justify-content:center; }
.svc-detail__icon svg { width:26px;height:26px;stroke:var(--blue-light); }
.svc-detail__tag { font-size:.68rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-light);display:block;margin-bottom:.3rem; }
.svc-detail__title { font-family:var(--font-display);font-size:clamp(1.2rem,2.2vw,1.65rem);font-weight:700;color:var(--white);letter-spacing:-.02em;line-height:1.15; }
.svc-detail__lead { font-size:.98rem;color:var(--gray-300);line-height:1.75;max-width:780px;margin-bottom:1.7rem; }
.svc-detail__cols { display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 2.5rem;margin-bottom:1.7rem; }
.svc-detail__col h4 { font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gray-200);margin-bottom:.9rem;display:flex;align-items:center;gap:.5rem; }
.svc-detail__col h4 svg { width:15px;height:15px;stroke:var(--blue-light);flex-shrink:0; }
.svc-detail__list { display:flex;flex-direction:column;gap:.6rem; }
.svc-detail__list li { display:flex;align-items:flex-start;gap:.6rem;font-size:.89rem;color:var(--gray-300);line-height:1.5; }
.svc-detail__list li svg { width:15px;height:15px;stroke:var(--blue-light);flex-shrink:0;margin-top:.18rem; }
.svc-detail__steps { display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.7rem;padding-top:1.5rem;border-top:1px solid var(--border); }
.svc-detail__step { display:flex;gap:.65rem;align-items:flex-start; }
.svc-detail__step span { flex-shrink:0;width:25px;height:25px;border-radius:7px;background:var(--blue-soft);border:1px solid var(--blue-border);color:var(--blue-light);font-family:var(--font-display);font-weight:700;font-size:.78rem;display:flex;align-items:center;justify-content:center; }
.svc-detail__step b { display:block;font-size:.82rem;color:var(--white);font-weight:600;margin-bottom:.15rem;line-height:1.25; }
.svc-detail__step i { font-size:.73rem;color:var(--gray-400);font-style:normal;line-height:1.4; }
.svc-detail__cta { display:inline-flex; }
@media (max-width:760px) {
  .svc-detail__cols { grid-template-columns:1fr; }
  .svc-detail__steps { grid-template-columns:1fr 1fr; }
}

/* ============================================================
   PRICING NOTE
   ============================================================ */
.pricing-note { display:flex;align-items:flex-start;gap:1.25rem;background:var(--card);border:1px solid var(--blue-border);border-radius:var(--r-lg);padding:2rem 2.25rem;backdrop-filter:blur(14px); }
.pricing-note__icon { flex-shrink:0;width:44px;height:44px;border-radius:var(--r-sm);background:var(--blue-faint);border:1px solid var(--blue-border);display:flex;align-items:center;justify-content:center; }
.pricing-note__icon svg { width:20px;height:20px;stroke:var(--blue-light); }
.pricing-note h3 { font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--white);margin-bottom:.4rem; }
.pricing-note p { font-size:.88rem;color:var(--gray-400);line-height:1.65; }

/* ============================================================
   TARGET AUDIENCE
   ============================================================ */
.audience-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:1rem; }
.audience-card { background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:1.5rem 1.25rem;text-align:center;backdrop-filter:blur(14px);transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast); }
.audience-card:hover { border-color:var(--blue-border);box-shadow:0 12px 40px rgba(37,99,235,.14);transform:translateY(-3px); }
.audience-card__icon { width:46px;height:46px;border-radius:var(--r-sm);background:var(--blue-faint);border:1px solid var(--blue-border);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;transition:background var(--t-fast); }
.audience-card:hover .audience-card__icon { background:var(--blue-soft); }
.audience-card__icon svg { width:20px;height:20px;stroke:var(--blue-light); }
.audience-card__title { font-family:var(--font-display);font-size:.92rem;font-weight:700;color:var(--white);margin-bottom:.3rem; }
.audience-card__text { font-size:.78rem;color:var(--gray-400);line-height:1.55; }

/* ============================================================
   CASE STUDIES
   ============================================================ */
.cases-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem; }
.case-card { background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(1.6rem,2.5vw,2.1rem);backdrop-filter:blur(16px);transition:border-color var(--t-smooth),box-shadow var(--t-smooth);position:relative;overflow:hidden; }
.case-card::before { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--blue-deep),var(--blue-light),transparent);opacity:.6; }
.case-card:hover { border-color:var(--blue-border);box-shadow:var(--shadow-hover); }
.case-card__num { font-family:var(--font-display);font-size:2.5rem;font-weight:700;color:transparent;-webkit-text-stroke:1px rgba(96,165,250,.12);line-height:1;margin-bottom:1rem; }
.case-card__title { font-size:1.05rem;margin-bottom:.6rem; }
.case-card__text { font-size:.88rem;color:var(--gray-300);line-height:1.7; }
.case-card__tags { display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.1rem; }
.case-tag { font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.25rem .65rem;border-radius:100px;border:1px solid var(--blue-border);color:var(--blue-light);background:var(--blue-faint); }

/* ============================================================
   WHY CARDS
   ============================================================ */
.why-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem; }
.why-card { background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(1.4rem,2.2vw,1.9rem);backdrop-filter:blur(16px);transition:border-color var(--t-smooth),box-shadow var(--t-smooth),transform var(--t-smooth);position:relative;overflow:hidden; }
.why-card::before { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--blue-deep),var(--blue-light));opacity:0;transition:opacity var(--t-smooth); }
.why-card:hover { border-color:var(--blue-border);box-shadow:var(--shadow-hover);transform:translateY(-3px); }
.why-card:hover::before { opacity:1; }
.why-card__icon { width:44px;height:44px;border-radius:var(--r-sm);background:var(--blue-faint);border:1px solid var(--blue-border);display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem;transition:background var(--t-smooth); }
.why-card:hover .why-card__icon { background:var(--blue-soft); }
.why-card__icon svg { width:20px;height:20px;stroke:var(--blue-light); }
.why-card__title { font-size:1rem;margin-bottom:.5rem; }
.why-card__text { font-size:.85rem;color:var(--gray-300);line-height:1.68; }

/* ============================================================
   TEAM
   ============================================================ */
.team-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;max-width:880px;margin:0 auto; }
.team-card { background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(1.75rem,3vw,2.5rem);backdrop-filter:blur(16px);transition:border-color var(--t-smooth),box-shadow var(--t-smooth);position:relative;overflow:hidden; }
.team-card::before { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--blue-deep),var(--blue-light),transparent);opacity:.55; }
.team-card:hover { border-color:var(--blue-border);box-shadow:var(--shadow-hover); }
.team-card__top { display:flex;align-items:center;gap:1.1rem;margin-bottom:1.1rem; }
.team-card__avatar { width:60px;height:60px;border-radius:var(--r-md);background:linear-gradient(135deg,var(--blue-deep),var(--blue));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:.95rem;font-weight:700;color:#fff;flex-shrink:0;border:1px solid var(--blue-border); }
.team-card__avatar--alt { background:linear-gradient(135deg,#1a1440,#3b2d8a); }
.team-card__name { font-size:1.2rem;font-weight:700;letter-spacing:-.01em;margin-bottom:.2rem; }
.team-card__role { font-size:.82rem;color:var(--gray-400); }
.team-card__bio { font-size:.9rem;color:var(--gray-300);line-height:1.75;margin-bottom:1.1rem; }
.team-card__skills { display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.1rem; }
.skill-tag { font-size:.72rem;font-weight:600;padding:.28rem .7rem;border-radius:100px;border:1px solid var(--border);color:var(--gray-300);background:rgba(255,255,255,.03);transition:border-color var(--t-fast),color var(--t-fast); }
.skill-tag:hover { border-color:var(--blue-border);color:var(--blue-light); }
.team-card__contact { display:inline-flex;align-items:center;gap:.45rem;font-size:.86rem;font-weight:600;color:var(--blue-light);transition:gap var(--t-fast),color var(--t-fast); }
.team-card__contact:hover { gap:.7rem;color:var(--white); }
.team-card__contact svg { width:15px;height:15px; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;max-width:840px;margin:0 auto; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-item:last-child { border-bottom:none; }
.faq-question { display:flex;align-items:center;justify-content:space-between;width:100%;padding:1.35rem 1.6rem;font-family:var(--font-display);font-size:.97rem;font-weight:700;color:var(--gray-200);text-align:left;cursor:pointer;gap:.9rem;transition:color var(--t-fast),background var(--t-fast); }
.faq-question:hover { color:var(--white);background:rgba(255,255,255,.02); }
.faq-item.is-open .faq-question { color:var(--white);background:rgba(37,99,235,.04); }
.faq-icon { width:26px;height:26px;flex-shrink:0;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:transform var(--t-smooth),background var(--t-smooth),border-color var(--t-smooth); }
.faq-icon svg { width:13px;height:13px;stroke:var(--gray-400); }
.faq-item.is-open .faq-icon { transform:rotate(45deg);background:var(--blue-soft);border-color:var(--blue-border); }
.faq-item.is-open .faq-icon svg { stroke:var(--blue-light); }
.faq-answer { max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(.4,0,.2,1); }
.faq-item.is-open .faq-answer { max-height:360px; }
.faq-answer p { padding:0 1.6rem 1.35rem;font-size:.92rem;color:var(--gray-300);line-height:1.78; }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-box { background:linear-gradient(140deg,rgba(37,99,235,.12) 0%,rgba(29,78,216,.05) 100%);border:1px solid var(--blue-border);border-radius:var(--r-xl);padding:clamp(2.5rem,5.5vw,5rem) clamp(2rem,5vw,4.5rem);text-align:center;position:relative;overflow:hidden; }
.cta-box::before { content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 45% at 50% 0%,rgba(37,99,235,.14),transparent);pointer-events:none; }
.cta-box__content { position:relative;z-index:2; }
.cta-box__title { font-size:clamp(1.9rem,3.8vw,2.8rem);margin-bottom:.9rem;letter-spacing:-.03em; }
.cta-box__desc { font-size:1rem;color:var(--gray-300);max-width:520px;margin:0 auto 2.25rem;line-height:1.78; }
.cta-box__actions { display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-wrapper { display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:start; }
.contact-card-box { display:flex;flex-direction:column;gap:.9rem;margin-top:1.75rem; }
.contact-detail { display:flex;align-items:flex-start;gap:.9rem;padding:1.1rem;background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);backdrop-filter:blur(12px);transition:border-color var(--t-fast); }
.contact-detail:hover { border-color:var(--blue-border); }
.contact-detail__icon { width:38px;height:38px;flex-shrink:0;border-radius:var(--r-sm);background:var(--blue-faint);border:1px solid var(--blue-border);display:flex;align-items:center;justify-content:center; }
.contact-detail__icon svg { width:16px;height:16px;stroke:var(--blue-light); }
.contact-detail__label { font-size:.74rem;color:var(--gray-400);margin-bottom:.15rem; }
.contact-detail__value { font-size:.9rem;font-weight:600;color:var(--white); }
.contact-detail__value a:hover { color:var(--blue-light); }
.contact-form { display:flex;flex-direction:column;gap:1.1rem; }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:1.1rem; }
.form-group { display:flex;flex-direction:column;gap:.42rem; }
.form-group label { font-size:.82rem;font-weight:600;color:var(--gray-300); }
.form-group input,.form-group select,.form-group textarea { background:var(--surface);border:1px solid var(--border-md);border-radius:var(--r-sm);padding:.8rem 1rem;font-size:.92rem;color:var(--white);transition:border-color var(--t-fast),box-shadow var(--t-fast);resize:vertical; }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { outline:none;border-color:var(--blue-border);box-shadow:0 0 0 3px rgba(37,99,235,.10); }
.form-group input::placeholder,.form-group textarea::placeholder { color:var(--gray-500); }
.form-group select option { background:var(--surface-2); }
.form-feedback { font-size:.86rem;padding:.7rem .9rem;border-radius:var(--r-sm);display:none; }
.form-feedback.error { display:block;background:rgba(239,68,68,.10);border:1px solid rgba(239,68,68,.28);color:#f87171; }
.form-feedback.success { display:block;background:rgba(34,197,94,.09);border:1px solid rgba(34,197,94,.28);color:#4ade80; }
.form-note { font-size:.78rem;color:var(--gray-500);text-align:center; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background:var(--bg-2);border-top:1px solid var(--border);position:relative; }
.site-footer::before { content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,var(--blue-border) 28%,rgba(96,165,250,.5) 50%,var(--blue-border) 72%,transparent 100%); }
.footer-top { display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:clamp(2rem,4vw,3rem);padding:clamp(3.5rem,6vw,5.5rem) 0 clamp(2.5rem,4vw,4rem); }
.footer-tagline { font-size:.88rem;color:var(--gray-400);line-height:1.68;margin-top:.9rem;max-width:270px; }
.footer-social { display:flex;gap:.65rem;margin-top:1.35rem; }
.footer-social a { width:38px;height:38px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--gray-400);transition:all var(--t-fast); }
.footer-social a:hover { border-color:var(--blue-border);color:var(--blue-light);background:var(--blue-faint); }
.footer-social a svg { width:15px;height:15px; }
.footer-col h4 { font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-400);margin-bottom:1.1rem; }
.footer-col ul { display:flex;flex-direction:column;gap:.62rem; }
.footer-col a { font-size:.87rem;color:var(--gray-400);transition:color var(--t-fast); }
.footer-col a:hover { color:var(--white); }
.footer-bottom { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.9rem;padding:1.35rem 0;border-top:1px solid var(--border);font-size:.8rem;color:var(--gray-500); }

/* ---- Cookie Banner ---- */
.cookie-banner { position:fixed;bottom:1.35rem;left:50%;transform:translateX(-50%) translateY(120%);width:min(94vw,620px);z-index:8000;transition:transform .42s cubic-bezier(.34,1.2,.64,1); }
.cookie-banner.is-visible { transform:translateX(-50%) translateY(0); }
.cookie-banner__inner { background:rgba(8,11,28,.97);border:1px solid var(--border-md);border-radius:var(--r-md);padding:1.1rem 1.35rem;backdrop-filter:blur(24px);display:flex;align-items:center;gap:1.35rem;flex-wrap:wrap;box-shadow:0 20px 60px rgba(0,0,0,.6); }
.cookie-banner__inner p { font-size:.86rem;color:var(--gray-300);flex:1;line-height:1.6; }
.cookie-banner__actions { display:flex;gap:.55rem;flex-shrink:0; }

/* ---- Legal ---- */
.legal h2 { font-size:1.25rem;margin:2.25rem 0 .7rem;color:var(--white); }
.legal h2:first-child { margin-top:0; }
.legal p { font-size:.93rem;color:var(--gray-300);line-height:1.78;margin-bottom:.7rem; }
.legal ul { margin:.7rem 0 .7rem 1.35rem;display:flex;flex-direction:column;gap:.38rem; }
.legal ul li { font-size:.93rem;color:var(--gray-300);list-style:disc; }
.legal a { color:var(--blue-light); }
.legal a:hover { color:var(--white); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px) {
  .hero__inner { grid-template-columns:1fr;max-width:660px;margin:0 auto; }
  .hero__visual { display:none; }
  .why-grid { grid-template-columns:repeat(2,1fr); }
  .portfolio-showcase { grid-template-columns:repeat(2,1fr); }
  .pricing-grid-3 { grid-template-columns:1fr;max-width:440px;margin:0 auto; }
  .pricing-grid-4 { grid-template-columns:repeat(2,1fr); }
  .pricing-card--featured { transform:none; }
  .pricing-card--featured:hover { transform:translateY(-3px); }
  .testimonials-grid { grid-template-columns:1fr;max-width:540px;margin:0 auto; }
  .process-grid { grid-template-columns:repeat(2,1fr); }
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .audience-grid { grid-template-columns:repeat(3,1fr); }
  .cases-grid { grid-template-columns:repeat(2,1fr); }
  .footer-top { grid-template-columns:1fr 1fr; }
  .team-grid { grid-template-columns:1fr;max-width:540px; }
}
@media(max-width:768px) {
  :root { --section-pad:clamp(3.5rem,7vw,6rem); }
  .hero__actions { flex-direction:column; }
  .hero__actions .btn { justify-content:center; }
  .hero__stats { gap:1.5rem; }
  .form-row { grid-template-columns:1fr; }
  .contact-wrapper { grid-template-columns:1fr; }
  .portfolio-showcase { grid-template-columns:1fr; }
  .pricing-grid-4 { grid-template-columns:1fr; }
  .audience-grid { grid-template-columns:repeat(2,1fr); }
  .cases-grid { grid-template-columns:1fr; }
  .why-grid { grid-template-columns:repeat(2,1fr); }
  .process-grid { grid-template-columns:1fr; }
  .stats-strip { flex-direction:column; }
  .stat { border-right:none;border-bottom:1px solid var(--border); }
  .stat:last-child { border-bottom:none; }
  .footer-top { grid-template-columns:1fr 1fr; }
  .footer-bottom { flex-direction:column;text-align:center; }
  .portfolio-carousel-wrap { height:360px; }
  .mini { height:220px; }
  .trust-item { padding:.85rem 1.1rem; }
}
@media(max-width:580px) {
  .nav-toggle { display:flex; }
  .site-nav { position:fixed;top:0;right:-100%;height:100vh;height:100dvh;width:min(300px,88vw);background:rgba(5,8,22,.98);backdrop-filter:blur(32px);z-index:1200;display:flex;flex-direction:column;padding:calc(var(--header-height) + 1.5rem) 1.75rem 2rem;transition:right var(--t-smooth);border-left:1px solid var(--border);overflow-y:auto; }
  .site-nav.is-open { right:0; }
  .nav-list { flex-direction:column;align-items:flex-start;gap:.2rem;width:100%; }
  .nav-link { width:100%;padding:.85rem .9rem;font-size:1.05rem; }
  .site-nav .nav-link svg { display:none; }
  .nav-dropdown { display:none; }
  .nav-item:hover .nav-link svg { transform:none; }
  .nav-overlay { display:block; }
  .why-grid { grid-template-columns:1fr; }
  .audience-grid { grid-template-columns:1fr 1fr; }
  .footer-top { grid-template-columns:1fr; }
  .services-grid { grid-template-columns:1fr; }
}
@media(min-width:581px) { .nav-toggle { display:none; } }