:root{
  --bg:#07080B;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.10);
  --text: rgba(245,245,245,.92);
  --muted: rgba(245,245,245,.70);
  --line: rgba(245,245,245,.12);
  --accent:#4C8BF5;
  --accent2:#7C3AED;
  --glow: rgba(76,139,245,.22);
  --glow2: rgba(124,58,237,.16);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  color:var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  overflow-x:hidden;
  background: var(--bg);
}

/* ======= DYNAMIC BACKGROUND LAYER (dev-style) ======= */
.bgfx{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
}

/* soft aurora */
.bgfx::before{
  content:"";
  position:absolute; inset:-20%;
  background:
    radial-gradient(900px 600px at 20% 15%, var(--glow), transparent 60%),
    radial-gradient(900px 650px at 82% 25%, var(--glow2), transparent 62%),
    radial-gradient(850px 600px at 55% 80%, rgba(76,139,245,.12), transparent 62%);
  filter: blur(12px);
  opacity:.95;
  animation: floatAurora 10s ease-in-out infinite alternate;
}

/* subtle tech grid */
.bgfx::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity:.08;
  mask-image: radial-gradient(650px 420px at 50% 20%, rgba(0,0,0,1), transparent 70%);
}

@keyframes floatAurora{
  from{ transform: translate3d(-1.5%, -1.0%, 0) scale(1.02); }
  to  { transform: translate3d( 1.5%,  1.2%, 0) scale(1.06); }
}

/* ======= BASE ======= */
a{color:inherit; text-decoration:none}
.container{width:min(1120px, 92vw); margin:0 auto}
.hr{height:1px; background:var(--line); margin:22px 0}

/* NAV */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(7,8,11,.55);
  border-bottom: 1px solid var(--line);
  transition: background .25s ease;
}
.nav.scrolled{ background: rgba(7,8,11,.86); }

.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:12px}
.brand{display:flex; align-items:center; gap:10px; letter-spacing:.4px}
.logo{
  width:34px; height:34px; border-radius:10px;
  background: linear-gradient(135deg, rgba(76,139,245,.95), rgba(124,58,237,.35));
  box-shadow: 0 12px 30px rgba(76,139,245,.18);
}
.brand strong{font-size:14px}
.brand span{display:block; font-size:12px; color:var(--muted)}

.nav-links{display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.nav-links a{font-size:13px; color:var(--muted)}
.nav-links a:hover{color:var(--text)}

/* BUTTONS */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color:var(--text);
  font-size:13px;
  white-space:nowrap;
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn::before{
  content:"";
  position:absolute; inset:0;
  left:-120%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transition:left .55s ease;
}
.btn:hover::before{ left:120%; }
.btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.09);
  border-color: rgba(245,245,245,.18);
  box-shadow: 0 10px 24px rgba(0,0,0,.30);
}
.btn.primary{
  border-color: rgba(76,139,245,.55);
  background: rgba(76,139,245,.14);
}
.btn.primary:hover{
  background: rgba(76,139,245,.24);
  box-shadow: 0 12px 34px rgba(76,139,245,.22);
}
.btn.ghost{background:transparent}

/* LAYOUT */
.hero{padding:78px 0 20px}
.hero-grid{display:grid; grid-template-columns: 1.25fr .75fr; gap:20px; align-items:stretch}
.section{padding:34px 0}
.section-head{margin-bottom:14px}
.grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}

/* TYPO */
.kicker{
  color:rgba(156, 186, 255, .95);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:10px;
}

/* FIX “poziome linie” — teraz to jest krótki, stały akcent */
.kicker::before{
  content:"";
  width:22px;
  height:2px;
  border-radius:99px;
  background: linear-gradient(90deg, rgba(76,139,245,.95), rgba(124,58,237,.70));
  box-shadow: 0 0 18px rgba(76,139,245,.35);
}

.h1{
  font-size:48px;
  line-height:1.06;
  margin:10px 0 14px;
  letter-spacing:-0.02em;
}
.h2{font-size:20px; margin:0 0 10px}
.p{color:var(--muted); font-size:15px; line-height:1.65; margin:0 0 16px; max-width:72ch}
.small{font-size:12px; color:var(--muted)}

.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}

/* CARDS */
.card{
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius:18px;
  padding:20px;
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
  position:relative;
  overflow:hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

/* glow overlay inside card */
.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(700px 240px at 20% 0%, rgba(76,139,245,.18), transparent 60%),
    radial-gradient(700px 240px at 80% 0%, rgba(124,58,237,.12), transparent 60%);
  opacity:.75;
  pointer-events:none;
  z-index:0;
  transition: opacity .35s ease, transform .55s ease;
}
.card > *{ position:relative; z-index:1; }

.card:hover{
  transform: translateY(-7px);
  box-shadow: 0 26px 54px rgba(0,0,0,.42);
  border-color: rgba(245,245,245,.18);
}
.card:hover::before{
  opacity:1;
  transform: scale(1.04);
}

/* “graphics” without images: icon chips */
.iconchip{
  width:44px; height:44px;
  border-radius:14px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(245,245,245,.12);
  box-shadow: inset 0 0 0 1px rgba(76,139,245,.18);
}
.iconchip svg{width:22px;height:22px; opacity:.95}

/* LIST */
.list{display:grid; gap:10px}
.item{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px; border-radius:16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
}
.icon{
  width:34px; height:34px; border-radius:12px;
  background: rgba(76,139,245,.14);
  border:1px solid rgba(76,139,245,.35);
  flex:0 0 auto;
}

/* BADGE */
@keyframes subtlePulse{ 0%,100%{opacity:.85} 50%{opacity:1} }
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:16px;
  border:1px solid rgba(76,139,245,.35);
  background: rgba(76,139,245,.10);
  color:rgba(245,245,245,.88);
  font-size:12px;
  animation: subtlePulse 4s infinite ease-in-out;
}

/* FOOTER */
.footer{padding:28px 0; border-top:1px solid var(--line); color:var(--muted); font-size:12px}
.footer a{color:rgba(245,245,245,.82)}
.footer a:hover{color:var(--text)}

/* ANIMATIONS (fail-safe) */
@keyframes fadeInUp{ from{opacity:0; transform: translateY(18px)} to{opacity:1; transform: translateY(0)} }
.reveal{ opacity: 1; transform:none; }
html.js .reveal{ opacity:0; transform: translateY(18px); }
html.js .reveal.visible{ animation: fadeInUp .70s ease forwards; }

/* MOBILE */
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .hero{padding:64px 0 18px}
  .h1{font-size:38px}
}
@media (max-width: 560px){
  .h1{font-size:32px; line-height:1.12}
  .card{padding:18px}
  .nav-links{gap:10px}
}

/* ===== BEGIN_TRUSTED_CSS ===== */
.trusted-strip{
  border: 1px solid rgba(245,245,245,.12);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 14px;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
}

.marquee{
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.track{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  white-space: nowrap;
  animation: marqueeMove 22s linear infinite;
  will-change: transform;
}

.chip{
  display:inline-flex;
  align-items:center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(245,245,245,.12);
  background: rgba(255,255,255,.04);
  color: rgba(245,245,245,.86);
  font-size: 12px;
  letter-spacing: .02em;
}

@keyframes marqueeMove{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce){
  .track{ animation: none; }
}

.usecases .uc-tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top: 14px;
}

.usecases .tag{
  font-size:12px;
  color: rgba(245,245,245,.82);
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(245,245,245,.12);
  background: rgba(76,139,245,.08);
}
/* ===== END_TRUSTED_CSS ===== */