:root{
  --bg:#0b0b0d; --panel:#101114;
  --text:#ffffff; --muted:#b8b9c0;
  --red:#e50914; --red-2:#ff2a3b; --border:rgba(255,255,255,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text);
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 120% -10%, rgba(229,9,20,.16), transparent 55%),
    radial-gradient(900px 500px at -10% 120%, rgba(229,9,20,.12), transparent 60%),
    linear-gradient(180deg, #0a0a0c 0%, #050506 100%);
  background-attachment: fixed;
}
.container{max-width:1200px; margin:0 auto; padding:0 24px}

/* Header */
.site-header{position:sticky; top:0; z-index:1000; background:rgba(12,12,14,.7); backdrop-filter:blur(10px); border-bottom:1px solid var(--border)}
.header-inner{display:flex; align-items:center; gap:16px; justify-content:space-between; height:68px}

/* Language switcher (left) */
.lang-switcher{position:relative; margin-left:auto; flex-shrink:0}
.lang-btn{
  display:inline-flex; align-items:center; gap:10px; padding:8px 10px;
  background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:10px;
  color:#fff; font-weight:700; cursor:pointer;
}
.lang-btn .fi{border-radius:3px}
.lang-menu{
  position:absolute; top:110%; right:0; min-width:190px; padding:8px;
  background:rgba(16,17,20,.98); border:1px solid var(--border); border-radius:12px;
  display:none; flex-direction:column; gap:6px; box-shadow:0 10px 40px rgba(0,0,0,.45);
}
.lang-menu.open{display:flex}
.lang-item{display:flex; align-items:center; gap:10px; color:#f2f2f5; text-decoration:none; padding:8px 10px; border-radius:8px}
.lang-item .fi{border-radius:3px}
.lang-item:hover{background:rgba(255,255,255,.06)}

/* Secondary contact bar */
.contact-bar{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:rgba(16,17,20,.85)}
.contact-bar__inner{display:flex; align-items:center; gap:12px; height:36px; font-size:12px; color:#c9c9cf}
.contact-bar .dot{opacity:.5}
.contact-link{display:inline-flex; align-items:center; gap:8px; opacity:.9; text-decoration:none; color:#e3e3e8; font-weight:600}
.contact-link:hover{opacity:1}
.contact-link svg{width:16px; height:16px; stroke:#fff}
.contact--small{font-size:12px}

/* Logo */
.logo{
  color:#fff; text-decoration:none; display:flex; align-items:center; gap:6px;
  font-weight:900;
  font-size: clamp(26px, 20px + 1.4vw, 38px);
  letter-spacing: .4px; line-height:1;
}
.logo-red{color:var(--red)}
.logo-white{color:#fff}

/* NAV */
.nav{display:flex; gap:16px; align-items:center; flex-wrap:nowrap}
.nav a{color:#fff; text-decoration:none; font-weight:600; opacity:.9; padding:8px 10px; border-radius:10px; transition:.25s; white-space:nowrap}
.nav a:hover{background:rgba(255,255,255,.06); opacity:1}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(90deg, var(--red), var(--red-2)); color:#fff; border:none; border-radius:999px;
  padding:14px 24px; font-weight:800; letter-spacing:.2px; text-decoration:none; box-shadow:0 8px 30px rgba(229,9,20,.35); transition:.25s;
  text-align:center;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 40px rgba(229,9,20,.45)}
.btn--ghost{background:transparent; border:1px solid var(--border); box-shadow:none}
.btn--ghost:hover{border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.04)}
.btn--sm{padding:10px 14px; font-weight:700}
.burger{display:none; background:none; border:0; cursor:pointer}
.burger span{display:block; width:26px; height:2px; background:#fff; margin:6px 0; transition:.25s}

/* Hero */
.hero{position:relative; min-height:88vh; display:flex; align-items:center}
.hero-bg{position:absolute; inset:0; overflow:hidden; pointer-events:none}
#tsparticles{position:absolute; inset:0; width:100%; height:100%}
.grid-overlay{
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px;
  mask-image: radial-gradient(circle at 50% 50%, #000 40%, transparent 70%);
}
.blobs::before,.blobs::after{
  content:""; position:absolute; width:520px; height:520px; border-radius:50%;
  filter:blur(70px); opacity:.35; background: radial-gradient(circle at 30% 30%, var(--red), transparent 60%);
}
.blobs::after{ right:-140px; bottom:-140px; background: radial-gradient(circle at 70% 70%, var(--red-2), transparent 60%)}
.hero-inner{position:relative; z-index:1; text-align:center}
.eyebrow{display:inline-block; font-weight:800; letter-spacing:.2em; text-transform:uppercase; font-size:.8rem; opacity:.9; background:rgba(255,255,255,.06); padding:8px 12px; border-radius:999px; border:1px solid var(--border)}
.hero h1{font-size:clamp(2rem,2.8rem + 1.2vw,4rem); margin:16px 0 10px; line-height:1.1; font-weight:800}
.grad{background:linear-gradient(90deg, var(--red), #ff737a); -webkit-background-clip:text; background-clip:text; color:transparent}
.subhead{max-width:780px; margin:0 auto 22px; color:var(--muted); font-size:1.05rem}
.hero-ctas{display:flex; gap:12px; justify-content:center}

/* Sections */
.section{padding:88px 0}
.section-head{max-width:860px; margin:0 auto 36px; text-align:center}
.section-head p{color:var(--muted)}
.muted{color:var(--muted)}

/* Grids & cards */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.grid-5{display:grid; grid-template-columns:repeat(5,1fr); gap:22px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
@media (max-width:1100px){ .grid-5{grid-template-columns:repeat(3,1fr)} }
@media (max-width:860px){ .grid-3,.grid-5{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .grid-3,.grid-5,.grid-2{grid-template-columns:1fr} }

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
  border:1px solid var(--border); border-radius:16px; padding:24px; position:relative; overflow:hidden;
  transition:.6s ease; transform:translateY(0);
}
.card h3{margin:12px 0 8px}
.card p{margin:0; color:var(--muted)}
.card:hover{transform:translateY(-4px); box-shadow:0 20px 50px rgba(0,0,0,.35)}

/* Icon wrapper (Lucide icons) */
.icon-wrap{
  width:56px; height:56px; border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(229,9,20,.9), rgba(229,9,20,.6));
  color:#fff; box-shadow:0 10px 30px rgba(229,9,20,.35);
}
.icon-wrap svg{width:28px; height:28px; stroke:#fff}

/* Waves background */
#industries{position:relative; overflow:hidden; background:linear-gradient(135deg, #1a0000, #000)}
#industries::before,#industries::after{
  content:""; position:absolute; left:-50%; width:200%; height:200%; z-index:0;
  background:radial-gradient(circle at 50% 50%, rgba(229,9,20,.25), transparent 70%);
  animation:waveMove 20s linear infinite;
}
#industries::after{animation-direction:reverse; background:radial-gradient(circle at 30% 70%, rgba(229,9,20,.20), transparent 80%)}
#industries h2,#industries .grid-2{position:relative; z-index:1}
@keyframes waveMove{from{transform:rotate(0)} to{transform:rotate(360deg)}}

/* Stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; text-align:center}
.stat{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--border); border-radius:16px; padding:24px}
.stat .counter{font-size:clamp(28px, 24px + 2vw, 48px); font-weight:900; letter-spacing:.5px}
.stat .unit{margin-left:6px; color:var(--red); font-weight:800}
.stat p{margin:8px 0 0; color:var(--muted)}
@media (max-width:860px){ .stats{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .stats{grid-template-columns:1fr} }

/* Contact */
.contact-form{max-width:560px; margin:0 auto}
.input input,.input textarea{
  width:100%; background:rgba(17,18,22,.9); border:1px solid var(--border); border-radius:12px;
  padding:14px 16px; color:#fff; font-size:15px; outline:none; transition:.2s;
}
.input input:focus,.input textarea:focus{border-color:rgba(255,255,255,.25); box-shadow:0 0 0 4px rgba(229,9,20,.12)}

/* Footer + CTA */
.site-footer{border-top:1px solid var(--border); background:rgba(12,12,14,.6)}
.footer-inner{display:flex; justify-content:space-between; align-items:center; padding:24px 0}
.site-footer p{font-size:12px; color:#bdbdc4}
.footer-links{display:flex; gap:18px}
.footer-links a{color:#bdbdc4; text-decoration:none}
.footer-links a:hover{color:#fff}
.floating-cta{
  position:fixed; right:22px; bottom:22px; z-index:999;
  background:linear-gradient(90deg, var(--red), var(--red-2)); color:#fff; text-decoration:none;
  padding:14px 22px; border-radius:999px; font-weight:800; box-shadow:0 10px 30px rgba(229,9,20,.45);
  transition:.25s;
}
.floating-cta:hover{transform:translateY(-2px)}

/* Mobile */
@media (max-width:900px){
  .nav{display:none}
  .burger{display:block}
  .site-header.open .nav{
    display:flex; position:absolute; top:68px; right:16px; left:16px; flex-direction:column; gap:8px; padding:14px;
    background:rgba(16,17,20,.95); border:1px solid var(--border); border-radius:14px;
  }
  .contact-bar__inner{justify-content:center}
}

/* --- Pricing (v7) --- */
.section--plans{background:linear-gradient(135deg, rgba(229,9,20,.08), rgba(255,255,255,0) 40%)}
.pricing{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch;
}
@media (max-width:980px){ .pricing{grid-template-columns:1fr} }
.price-card{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.03) 100%);
  border:1px solid var(--border); border-radius:18px; padding:26px; display:flex; flex-direction:column;
  overflow:hidden; transition:.35s; transform:translateY(0);
}
.price-card:hover{transform:translateY(-4px); box-shadow:0 30px 70px rgba(0,0,0,.35)}
.price-card__icon{width:56px; height:56px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(229,9,20,.9), rgba(229,9,20,.6)); box-shadow:0 10px 30px rgba(229,9,20,.35); margin-bottom:12px}
.price-card__icon svg{width:28px; height:28px; stroke:#fff}
.price-card__title{margin:4px 0 10px}
.price-card__price{display:flex; align-items:baseline; gap:10px; margin:6px 0 14px}
.price-card__price .amount{font-size:clamp(28px, 24px + 2vw, 42px); font-weight:900}
.price-card__price .period{color:var(--muted)}
.price-card__note{color:var(--muted); font-size:.92rem; margin-top:-8px; margin-bottom:10px}
.price-card__list{list-style:none; padding:0; margin:12px 0 18px; color:#d6d7dc}
.price-card__list li{display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-bottom:1px dashed rgba(255,255,255,.08)}
.price-card__list li::before{content:""; width:8px; height:8px; border-radius:999px; background:var(--red); margin-top:8px; flex-shrink:0}
.price-card__cta{margin-top:auto; align-self:flex-start}
.price-card.popular{border-color:rgba(229,9,20,.35); background:linear-gradient(180deg, rgba(229,9,20,.12) 0%, rgba(255,255,255,.03) 100%)}
.price-card__badge{
  position:absolute; top:16px; right:-40px; transform:rotate(35deg);
  background:linear-gradient(90deg, var(--red), var(--red-2)); color:#fff; font-weight:800;
  padding:6px 56px; letter-spacing:.5px; box-shadow:0 10px 30px rgba(229,9,20,.35);
}

/* --- Header unified row --- */
.header-inner{display:flex; align-items:center; gap:18px; justify-content:flex-start; flex-wrap:nowrap}
.nav-group{display:flex; align-items:center; gap:16px; margin-left:24px; flex-wrap:nowrap}
.nav{display:flex; gap:16px; align-items:center; flex-wrap:nowrap}
.nav-aux{display:flex; gap:12px; align-items:center}
.login-btn{white-space:nowrap}
/* Ensure one line, prevent wrapping on desktop */
@media (min-width:901px){
  .nav a, .btn, .lang-switcher{white-space:nowrap}
}

/* Mobile dropdown: burger toggles the whole group */
@media (max-width:900px){
  .nav-group{display:none}
  .site-header.open .nav-group{
    display:flex; flex-direction:column; align-items:stretch; gap:10px;
    position:absolute; top:68px; right:16px; left:16px;
    background:rgba(16,17,20,.95); border:1px solid var(--border); border-radius:14px; padding:14px;
  }
  .site-header.open .nav{flex-direction:column; align-items:stretch}
  .site-header.open .nav-aux{flex-direction:column; align-items:stretch}
  .site-header.open .nav-aux .btn{width:100%}
  .lang-menu{right:0; left:auto}
}

}

/* --- Ecosystem tag cloud (minimal) --- */
.section--ecosystem{padding:72px 0; background:transparent}
.tagcloud{display:flex; flex-wrap:wrap; gap:14px 18px; justify-content:center}
.tag{color:#fff; text-decoration:none; font-weight:800; letter-spacing:.01em; opacity:.95}

/* --- Tag cloud randomized sizing & float --- */
.tagcloud{display:flex; flex-wrap:wrap; gap:14px 18px; justify-content:center}
.tag{
  color:#fff; text-decoration:none; font-weight:800; letter-spacing:.01em; opacity:.95;
  cursor:default; user-select:none;
  font-size: var(--fs, clamp(16px, 1.6vw, 24px));
  will-change: transform;
  transform: translate(0,0);
  animation: tagFloat var(--dur, 4s) ease-in-out infinite alternate;
}
.tag:hover{opacity:1}
@keyframes tagFloat{
  from{ transform: translate(0,0) }
  to{ transform: translate(var(--tx, 4px), var(--ty, -4px)) }
}

/* === RTM override: keep logo on a single line === */
.site-header .logo{ font-size:20px !important; white-space:nowrap !important; }