/* ==========================================================================
   VELTRIS IO — Design System
   Dark technology aesthetic — cloud infrastructure / AI automation
   ========================================================================== */

:root{
  /* --- Color tokens --- */
  --bg:            #05070B;
  --bg-secondary:  #0A0F18;
  --surface:       #0D1420;
  --surface-2:     #101a29;
  --blue:          #4F7CFF;
  --cyan:          #22D3EE;
  --violet:        #7C5CFF;
  --white:         #F8FAFC;
  --muted:         #94A3B8;
  --muted-dim:     #5B6B82;
  --border:        rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.16);

  /* --- Gradients --- */
  --grad-primary: linear-gradient(135deg, var(--blue), var(--violet));
  --grad-accent:  linear-gradient(135deg, var(--cyan), var(--blue));
  --grad-line:    linear-gradient(90deg, transparent, var(--cyan), transparent);

  /* --- Typography --- */
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* --- Layout --- */
  --max-w: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  /* --- Motion --- */
  --ease: cubic-bezier(.16,.8,.24,1);
  --dur-fast: .2s;
  --dur-med: .5s;
  --dur-slow: 1.1s;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg{ max-width: 100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }
input, textarea{ font-family: inherit; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
p{ margin: 0 0 1em; color: var(--muted); }

:focus-visible{
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

.container{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* Background grid + glow, used behind most sections */
.bg-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 90%);
  pointer-events:none;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 18px;
}
.eyebrow::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background: var(--cyan);
  box-shadow: 0 0 10px 2px var(--cyan);
}

.section{
  position: relative;
  padding: clamp(64px, 10vw, 128px) 0;
}
.section-head{
  max-width: 680px;
  margin: 0 0 56px;
}
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size: clamp(28px, 4vw, 42px); }
.section-head p{ font-size: 17px; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn-primary{
  background: var(--grad-primary);
  color: var(--white);
  box-shadow: 0 0 0 0 rgba(79,124,255,0);
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 28px -6px rgba(79,124,255,.55);
}
.btn-ghost{
  background: rgba(255,255,255,.03);
  color: var(--white);
  border-color: var(--border-strong);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover{
  border-color: var(--cyan);
  background: rgba(34,211,238,.06);
  transform: translateY(-2px);
}
.btn-small{ padding: 10px 20px; font-size: 13px; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.6; cursor:not-allowed; transform:none !important; }

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 1000;
  border-bottom: 1px solid transparent;
  background: rgba(5,7,11,0);
  backdrop-filter: blur(0px);
  transition: background var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease), backdrop-filter var(--dur-med) var(--ease);
}
.site-header.scrolled{
  background: rgba(5,7,11,.78);
  border-bottom-color: var(--border);
  backdrop-filter: blur(14px);
}
.nav{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 18px var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .02em;
}
.brand-mark{
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--grad-primary);
  position: relative;
  flex-shrink:0;
}
.brand-mark::before,.brand-mark::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background: var(--white);
}
.brand-mark::before{ width:6px; height:6px; top:7px; left:7px; }
.brand-mark::after{ width:4px; height:4px; bottom:7px; right:7px; opacity:.85; }

.nav-links{
  display:flex;
  align-items:center;
  gap: 4px;
}
.nav-links a{
  position:relative;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  border-radius: 999px;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nav-links a:hover{ color: var(--white); background: rgba(255,255,255,.05); }
.nav-links a.active{ color: var(--white); background: rgba(255,255,255,.06); }
.nav-links a.active::after{
  content:"";
  position:absolute;
  left:14px; right:14px; bottom:2px;
  height:2px;
  background: var(--grad-accent);
  border-radius:2px;
}

.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{
  display:none;
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: rgba(255,255,255,.03);
  align-items:center; justify-content:center;
  flex-direction:column; gap:4px;
}
.nav-toggle span{
  width: 18px; height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle.open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.mobile-menu{
  display:none;
  position: fixed;
  inset: 0 0 0 0;
  top: 68px;
  z-index: 999;
  background: rgba(5,7,11,.98);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  padding: 28px var(--pad) 40px;
  transform: translateY(-12px);
  opacity: 0;
  pointer-events:none;
  transition: transform var(--dur-med) var(--ease), opacity var(--dur-med) var(--ease);
}
.mobile-menu.open{ transform: translateY(0); opacity:1; pointer-events:auto; }
.mobile-menu a{
  display:block;
  padding: 16px 4px;
  font-size: 20px;
  font-family: var(--font-display);
  border-bottom: 1px solid var(--border);
  color: var(--white);
}
.mobile-menu .btn{ margin-top: 24px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  padding: clamp(140px, 20vw, 200px) 0 clamp(80px,10vw,120px);
  overflow:hidden;
}
.hero-glow{
  position:absolute;
  top: -240px; left: 50%;
  width: 900px; height: 700px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(79,124,255,.24), rgba(124,92,255,.10) 45%, transparent 70%);
  filter: blur(10px);
  pointer-events:none;
}
.hero-grid{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items:center;
  position:relative;
  z-index:2;
}
.hero h1{
  font-size: clamp(38px, 5.2vw, 66px);
  max-width: 640px;
}
.hero-lead{
  font-size: 18px;
  max-width: 520px;
  color: var(--muted);
}
.hero-actions{
  display:flex;
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.hero-visual{
  position: relative;
  aspect-ratio: 1/1;
  max-width: 520px;
  justify-self:end;
  width:100%;
}

/* ==========================================================================
   Glass card
   ========================================================================== */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px;
  position: relative;
  transition: transform var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.card:hover{
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.6);
}
.card-icon{
  width: 44px; height:44px;
  border-radius: 12px;
  background: rgba(79,124,255,.12);
  border: 1px solid rgba(79,124,255,.25);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 20px;
  color: var(--cyan);
}
.card h3{ font-size: 18px; margin-bottom: 10px; }
.card p{ font-size: 14.5px; margin-bottom: 0; }

.grid{ display:grid; gap: 24px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
[data-reveal]{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].in-view{ opacity:1; transform: translateY(0); }
[data-reveal="fade"]{ transform:none; }

/* ==========================================================================
   Workflow diagram (signature element)
   ========================================================================== */
.flow-diagram{
  position:relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at 30% 20%, rgba(124,92,255,.10), transparent 60%), var(--surface);
  padding: clamp(24px,4vw,56px);
  overflow:hidden;
}
.flow-steps{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
  flex-wrap: wrap;
  position:relative;
  z-index:2;
}
.flow-step{
  flex:1 1 140px;
  min-width: 120px;
  text-align:center;
  padding: 18px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  position: relative;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.flow-step .dot{
  width: 8px; height:8px; border-radius:50%;
  background: var(--cyan);
  margin: 0 auto 10px;
  box-shadow: 0 0 12px 2px rgba(34,211,238,.6);
}
.flow-step.active{
  border-color: rgba(34,211,238,.5);
  background: rgba(34,211,238,.07);
}
.flow-arrow{
  flex: 0 0 auto;
  color: var(--muted-dim);
  font-size: 16px;
}

/* Node network canvas (hero + AI pages) */
.node-net{ width:100%; height:100%; }
.node-net .line{
  stroke: url(#lineGrad);
  stroke-width: 1;
  fill:none;
  stroke-dasharray: 6 10;
  animation: dash 6s linear infinite;
  opacity:.55;
}
@keyframes dash{ to{ stroke-dashoffset: -160; } }
.node-net .node{ filter: drop-shadow(0 0 6px rgba(34,211,238,.7)); }
.node-net .node circle{ animation: pulse 3.4s ease-in-out infinite; transform-origin: center; }
@keyframes pulse{
  0%,100%{ opacity:.75; transform: scale(1); }
  50%{ opacity:1; transform: scale(1.18); }
}

/* ==========================================================================
   Feature rows / stat blocks
   ========================================================================== */
.stat-block{
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  background: var(--surface);
}
.stat-block .label{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 10px;
  display:block;
}
.stat-block .desc{ font-size: 14px; color: var(--muted); margin:0; }

.divider{
  height:1px;
  background: var(--border);
  margin: 0;
  border:none;
}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: clamp(48px,7vw,88px) clamp(24px,6vw,72px);
  text-align:center;
  overflow:hidden;
  background: var(--surface);
}
.cta-band::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(124,92,255,.20), transparent 70%);
  pointer-events:none;
}
.cta-band h2{ font-size: clamp(26px,4vw,40px); max-width: 640px; margin-left:auto; margin-right:auto; }
.cta-band p{ max-width: 520px; margin: 0 auto 30px; }
.cta-band .btn{ position:relative; z-index:2; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  border-top: 1px solid var(--border);
  padding: 56px 0 32px;
  background: var(--bg-secondary);
}
.footer-top{
  display:flex;
  justify-content:space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 36px;
}
.footer-brand p{ max-width: 320px; font-size: 14px; margin-top: 12px; }
.footer-links{ display:flex; gap: 64px; flex-wrap: wrap; }
.footer-links h4{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin-bottom: 16px;
  font-weight:500;
}
.footer-links a{
  display:block;
  padding: 6px 0;
  font-size: 14px;
  color: var(--muted);
  transition: color var(--dur-fast) var(--ease);
}
.footer-links a:hover{ color: var(--cyan); }
.footer-bottom{
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display:flex;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted-dim);
}

/* ==========================================================================
   Contact form
   ========================================================================== */
.form-wrap{
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: clamp(24px,4vw,48px);
}
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field{ margin-bottom: 20px; }
.field label{
  display:block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--white);
}
.field .req{ color: var(--cyan); }
.field input, .field textarea{
  width:100%;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: rgba(255,255,255,.03);
  color: var(--white);
  font-size: 14.5px;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color: var(--muted-dim); }
.field input:focus, .field textarea:focus{
  outline:none;
  border-color: var(--cyan);
  background: rgba(34,211,238,.04);
}
.field textarea{ resize: vertical; min-height: 130px; }
.field.error input, .field.error textarea{ border-color: #FB7185; }
.field .err-msg{
  display:none;
  font-size: 12.5px;
  color: #FB7185;
  margin-top: 6px;
}
.field.error .err-msg{ display:block; }

.form-success{
  display:none;
  text-align:center;
  padding: 40px 20px;
}
.form-success.show{ display:block; }
.form-success .check{
  width: 56px; height:56px;
  border-radius:50%;
  background: rgba(34,211,238,.12);
  border: 1px solid rgba(34,211,238,.4);
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 20px;
  color: var(--cyan);
}
.form-fields.hidden{ display:none; }

/* ==========================================================================
   Utility
   ========================================================================== */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }
.tag{
  display:inline-block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  margin: 0 8px 8px 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px){
  .nav-links{ display:none; }
  .nav-cta .btn-ghost{ display:none; }
  .nav-toggle{ display:flex; }
  .mobile-menu{ display:block; }
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-visual{ justify-self:center; order:-1; max-width: 380px; }
  .grid-2{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr 1fr; }
  .grid-4{ grid-template-columns: 1fr 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  .footer-links{ gap: 36px; }
}
@media (max-width: 620px){
  .grid-3, .grid-4{ grid-template-columns: 1fr; }
  .flow-steps{ flex-direction: column; }
  .flow-arrow{ transform: rotate(90deg); }
  .footer-top{ flex-direction:column; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal]{ opacity:1; transform:none; }
}


/* Local visual assets */
.brand-logo{width:30px;height:30px;flex-shrink:0;}
.asset-panel{margin:42px auto 0;max-width:900px;padding:26px;border:1px solid var(--border);border-radius:var(--radius-lg);background:radial-gradient(circle at 50% 45%,rgba(79,124,255,.08),transparent 62%),rgba(255,255,255,.015);overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.28);}
.asset-panel img{width:100%;height:auto;filter:drop-shadow(0 0 22px rgba(34,211,238,.08));}
.hero-asset-panel{position:absolute;right:5%;top:120px;width:min(44vw,560px);margin:0;border:0;background:transparent;box-shadow:none;padding:0;opacity:.72;pointer-events:none;}
.hero-asset-panel img{mix-blend-mode:screen;}
@media(max-width:900px){.hero-asset-panel{position:relative;right:auto;top:auto;width:min(100%,620px);margin:28px auto 0;opacity:.8;}.asset-panel{margin-top:30px;padding:16px;}}

/* ==========================================================================\n   PREMIUM REFINEMENT LAYER\n   ========================================================================== */
:root{
  --bg:#030508; --bg-secondary:#070b12; --surface:#0a101a; --surface-2:#0e1623;
  --line:rgba(255,255,255,.085); --line-bright:rgba(255,255,255,.16);
  --text:#f5f7fb; --muted:#8d99aa; --cyan:#62e7ff; --blue:#6687ff; --violet:#8b6dff;
  --shadow:0 30px 100px rgba(0,0,0,.45);
}
body{background:radial-gradient(circle at 50% -15%,rgba(70,89,180,.13),transparent 38%),var(--bg);}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");}
.site-header{background:linear-gradient(180deg,rgba(3,5,8,.78),rgba(3,5,8,.22),transparent);}
.site-header.scrolled{background:rgba(4,7,11,.72);border-bottom-color:rgba(255,255,255,.08);box-shadow:0 12px 40px rgba(0,0,0,.18);}
.nav{padding-top:20px;padding-bottom:20px;}
.brand{font-size:15px;letter-spacing:.12em;font-weight:700;}
.brand-logo{width:28px;height:28px;filter:drop-shadow(0 0 12px rgba(98,231,255,.18));}
.nav-links{gap:2px;}
.nav-links a{font-size:13px;letter-spacing:.01em;padding:9px 13px;color:#9aa5b5;}
.nav-links a:hover,.nav-links a.active{background:rgba(255,255,255,.045);color:#fff;}
.btn{min-height:46px;padding:13px 22px;border-radius:12px;letter-spacing:-.01em;box-shadow:none;}
.btn-primary{background:linear-gradient(135deg,#6d82ff 0%,#795dff 55%,#4fc9ff 130%);border-color:rgba(255,255,255,.14);box-shadow:0 12px 35px rgba(94,108,255,.2),inset 0 1px rgba(255,255,255,.22);}
.btn-primary:hover{box-shadow:0 18px 48px rgba(94,108,255,.34),inset 0 1px rgba(255,255,255,.28);}
.btn-ghost{background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.12);box-shadow:inset 0 1px rgba(255,255,255,.04);}
.btn-ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(98,231,255,.35);}
.hero{min-height:820px;padding-top:185px;padding-bottom:110px;display:flex;align-items:center;}
.hero:after{content:"";position:absolute;left:50%;bottom:-1px;width:min(900px,90%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(98,231,255,.3),rgba(139,109,255,.3),transparent);}
.hero-glow{width:1100px;height:850px;top:-300px;background:radial-gradient(ellipse at center,rgba(75,106,255,.18),rgba(112,74,255,.10) 38%,transparent 68%);}
.bg-grid{background-size:72px 72px;opacity:.8;mask-image:radial-gradient(ellipse 70% 75% at 50% 10%,#000 18%,transparent 80%);}
.hero-grid{grid-template-columns:minmax(0,.92fr) minmax(420px,.8fr);gap:70px;}
.hero h1{font-size:clamp(48px,6.2vw,86px);line-height:.98;letter-spacing:-.055em;max-width:760px;text-wrap:balance;}
.hero h1:after{content:"";display:block;width:150px;height:2px;margin-top:30px;background:linear-gradient(90deg,var(--cyan),transparent);opacity:.65;}
.hero-lead{font-size:17px;line-height:1.75;max-width:570px;color:#9ba6b6;margin-top:26px;}
.eyebrow{font-size:10px;letter-spacing:.18em;color:#72dff5;margin-bottom:22px;}
.eyebrow:before{width:5px;height:5px;box-shadow:0 0 12px 2px rgba(98,231,255,.8);}
.hero-visual{max-width:600px;justify-self:end;filter:drop-shadow(0 30px 80px rgba(33,68,180,.16));}
.node-net{transform:scale(1.04);}
.node-net .line{opacity:.34;stroke-width:.8;}
.node-net .node{filter:drop-shadow(0 0 10px rgba(98,231,255,.8));}
.hero-asset-panel{right:0;top:92px;width:min(43vw,590px);opacity:.28;mix-blend-mode:screen;filter:blur(.2px) saturate(1.35);}
.hero-asset-panel:after{content:"";position:absolute;inset:10% 0 10%;background:radial-gradient(circle,rgba(98,231,255,.15),transparent 55%);}
.section{padding:clamp(82px,9vw,140px) 0;}
.section-head{max-width:720px;margin-bottom:64px;}
.section-head h2{font-size:clamp(32px,4vw,50px);letter-spacing:-.04em;line-height:1.02;}
.section-head p{font-size:16px;line-height:1.75;color:#8793a5;}
.card{padding:30px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012) 60%,rgba(87,93,255,.018));border-color:rgba(255,255,255,.09);box-shadow:inset 0 1px rgba(255,255,255,.045),0 20px 60px rgba(0,0,0,.16);overflow:hidden;}
.card:before{content:"";position:absolute;inset:-1px;background:radial-gradient(circle at 0 0,rgba(98,231,255,.09),transparent 35%);pointer-events:none;}
.card:hover{transform:translateY(-7px);border-color:rgba(98,231,255,.2);box-shadow:inset 0 1px rgba(255,255,255,.07),0 28px 80px rgba(0,0,0,.32);}
.card-icon{width:42px;height:42px;border-radius:11px;background:linear-gradient(145deg,rgba(98,231,255,.12),rgba(124,92,255,.09));border-color:rgba(98,231,255,.16);}
.card h3{font-size:17px;letter-spacing:-.02em;}
.card p{color:#8995a7;line-height:1.7;}
.section[style*="background"]{background:linear-gradient(180deg,#060a11,#070c14)!important;border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04);}
.flow-diagram{border-color:rgba(255,255,255,.1);background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.008));box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.04);}
.flow-diagram:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(98,231,255,.04),transparent);animation:scan 5s linear infinite;}
@keyframes scan{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.flow-step{border-color:rgba(255,255,255,.08);background:rgba(3,6,10,.45);backdrop-filter:blur(10px);}
.flow-step.active{border-color:rgba(98,231,255,.32);box-shadow:0 0 30px rgba(98,231,255,.06),inset 0 0 24px rgba(98,231,255,.04);}
.asset-panel{border-color:rgba(255,255,255,.08);background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.008));box-shadow:0 35px 100px rgba(0,0,0,.4),inset 0 1px rgba(255,255,255,.05);}
.cta-band{border-color:rgba(255,255,255,.1);background:radial-gradient(circle at 50% 0,rgba(104,116,255,.16),transparent 52%),linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.008));box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.06);}
.cta-band:after{content:"";position:absolute;inset:auto 10% 0;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),var(--violet),transparent);opacity:.5;}
.site-footer{background:#04070b;border-top-color:rgba(255,255,255,.08);}
.footer-brand .brand{font-size:14px;}
.footer-bottom{border-top-color:rgba(255,255,255,.07);}
@media(max-width:980px){.hero{min-height:auto;padding-top:145px}.hero-grid{grid-template-columns:1fr;gap:28px}.hero-visual{order:2;max-width:520px;justify-self:center}.hero-asset-panel{position:absolute;right:50%;transform:translateX(50%);top:90px;width:min(90vw,600px);opacity:.22}.hero h1{font-size:clamp(46px,9vw,72px)}}
@media(max-width:620px){.hero{padding-top:125px}.hero h1{font-size:clamp(42px,13vw,58px)}.hero-lead{font-size:16px}.hero-actions{gap:10px}.btn{width:auto}.card{padding:24px}.section-head{margin-bottom:42px}}

/* ==========================================================================
   Pricing + legal pages
   ========================================================================== */
.gradient-text{background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.pricing-teaser{padding-top:40px}
.pricing-teaser-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:stretch}
.pricing-teaser-grid>div:first-child{padding:32px 0}
.pricing-teaser-grid h2{font-size:clamp(32px,4vw,54px);max-width:720px;margin:10px 0 14px;line-height:1.05}
.pricing-teaser-grid p{max-width:650px;color:var(--muted);margin-bottom:24px}
.pricing-teaser-card{position:relative;border:1px solid var(--border-strong);border-radius:var(--radius-lg);padding:32px;background:radial-gradient(circle at 85% 10%,rgba(34,211,238,.12),transparent 32%),linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015));box-shadow:0 24px 80px rgba(0,0,0,.28);transition:transform .35s var(--ease),border-color .35s var(--ease)}
.pricing-teaser-card:hover{transform:translateY(-6px);border-color:rgba(34,211,238,.35)}
.teaser-top{display:flex;justify-content:space-between;color:var(--muted);font:500 11px var(--font-mono);letter-spacing:.12em}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 16px var(--cyan)}
.teaser-price{display:flex;align-items:baseline;gap:8px;margin:32px 0 10px}.teaser-price strong{font-size:58px;line-height:1;font-family:var(--font-display)}.teaser-price span{color:var(--muted);font-size:14px}
.teaser-link{display:inline-flex;gap:8px;color:var(--white);margin-top:14px;font-weight:600}
.page-hero,.legal-hero{padding:150px 0 70px;background:radial-gradient(circle at 75% 10%,rgba(79,124,255,.15),transparent 28%),radial-gradient(circle at 20% 0%,rgba(34,211,238,.08),transparent 24%);border-bottom:1px solid var(--border)}
.page-hero h1,.legal-hero h1{max-width:850px;font-size:clamp(42px,6vw,78px);line-height:.98;margin:12px 0 20px;letter-spacing:-.04em}.page-hero p,.legal-hero p{max-width:780px;color:var(--muted);font-size:18px}.pricing-section{padding-top:70px}
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}.pricing-card{position:relative;border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.015));display:flex;flex-direction:column;min-height:560px}.pricing-card.featured{border-color:rgba(34,211,238,.42);background:radial-gradient(circle at 70% 0%,rgba(34,211,238,.11),transparent 34%),linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));box-shadow:0 24px 80px rgba(34,211,238,.08)}.popular-badge{position:absolute;top:16px;right:16px;padding:6px 9px;border:1px solid rgba(34,211,238,.35);border-radius:999px;color:var(--cyan);font:500 9px var(--font-mono);letter-spacing:.08em}.pricing-card-head{display:flex;flex-direction:column;gap:5px}.pricing-label{font:600 12px var(--font-mono);letter-spacing:.12em;color:var(--white)}.pricing-use{font-size:12px;color:var(--muted-dim)}.pricing-amount{display:flex;align-items:baseline;gap:7px;margin:30px 0 10px}.pricing-amount strong{font:700 clamp(42px,4vw,58px) var(--font-display);letter-spacing:-.05em}.pricing-amount span{color:var(--muted);font-size:13px}.pricing-amount.custom strong{font-size:44px}.pricing-card>p{color:var(--muted);min-height:70px;font-size:14px}.pricing-card .btn{margin:10px 0 22px}.feature-list{display:grid;gap:11px;margin-top:auto;padding-top:22px;border-top:1px solid var(--border)}.feature-list li{position:relative;padding-left:20px;color:var(--muted);font-size:13px}.feature-list li::before{content:'✓';position:absolute;left:0;color:var(--cyan)}.pricing-note{color:var(--muted-dim);font-size:12px;max-width:850px;margin:24px auto 0;text-align:center}
.legal-meta{font:500 11px var(--font-mono);letter-spacing:.08em;color:var(--muted-dim);margin-top:22px;text-transform:uppercase}.legal-section{padding-top:55px}.legal-document{max-width:850px;margin:0 auto;border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(28px,5vw,60px);background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.012))}.legal-document h2{font-size:22px;margin:34px 0 10px}.legal-document h2:first-child{margin-top:0}.legal-document p{color:var(--muted);font-size:15px;line-height:1.8}.legal-document a{color:var(--cyan)}.legal-disclaimer{margin-top:42px;padding:18px;border:1px solid rgba(245,158,11,.22);border-radius:12px;background:rgba(245,158,11,.045);color:var(--muted);font-size:12px;line-height:1.7}.legal-disclaimer strong{color:var(--white)}
@media (max-width:1050px){.pricing-grid{grid-template-columns:repeat(2,1fr)}.pricing-teaser-grid{grid-template-columns:1fr}.nav-links a{padding-left:9px;padding-right:9px}}
@media (max-width:700px){.pricing-grid{grid-template-columns:1fr}.pricing-card{min-height:auto}.pricing-teaser-grid h2{font-size:38px}.page-hero,.legal-hero{padding-top:120px}.legal-document{padding:24px}.footer-links{gap:28px}}

/* Pricing v2 — monthly / annual enterprise presentation */
.billing-switch{display:flex;justify-content:center;gap:6px;margin:0 auto 34px;padding:5px;border:1px solid var(--border-strong);border-radius:999px;background:rgba(255,255,255,.035);width:max-content;box-shadow:0 12px 40px rgba(0,0,0,.18)}
.billing-btn{border:0;background:transparent;color:var(--muted);font:600 12px var(--font-mono);letter-spacing:.04em;padding:11px 18px;border-radius:999px;cursor:pointer;transition:.25s ease}
.billing-btn.active{background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(124,92,255,.2));color:var(--white);box-shadow:inset 0 1px rgba(255,255,255,.08)}
.billing-btn span{color:var(--cyan);margin-left:5px}
.users-pill{margin-top:24px;border:1px solid rgba(105,125,180,.28);border-radius:12px;padding:15px 12px;text-align:center;color:var(--cyan);font:600 12px var(--font-mono);background:rgba(4,10,27,.7);box-shadow:inset 0 1px rgba(255,255,255,.04)}
.billing-copy{font:500 11px var(--font-mono);color:var(--muted-dim);margin-top:-2px;margin-bottom:4px}
.pricing-features{margin-top:16px;padding-top:20px;gap:13px}
.pricing-features li{font-size:12.5px;line-height:1.45}
.pricing-card{padding:28px 28px 26px;min-height:860px;overflow:visible}
.pricing-card .btn{margin-top:auto}
.plan-badge{position:absolute;top:-17px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:7px 18px;border-radius:999px;background:linear-gradient(90deg,#16d9ef,#7c5cff);color:#06101b;font:700 9px var(--font-mono);letter-spacing:.08em;box-shadow:0 0 28px rgba(34,211,238,.28)}
.plan-badge.secondary{left:50%;background:linear-gradient(90deg,#17dce9,#7c5cff)}
.plan-badge.custom{background:linear-gradient(90deg,#14dce8,#8661ff)}
.pricing-card.featured{box-shadow:0 28px 90px rgba(34,211,238,.12),0 0 0 1px rgba(34,211,238,.12)}
.contact-details-section{padding-top:10px}
.contact-details-card{max-width:760px;margin:0 auto;padding:34px;border:1px solid var(--border-strong);border-radius:var(--radius-lg);background:radial-gradient(circle at 85% 10%,rgba(34,211,238,.1),transparent 35%),linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012));text-align:center}
.contact-details-card h2{margin:10px 0 14px;font-size:clamp(28px,4vw,44px)}
.contact-email{font:600 16px var(--font-mono);color:var(--cyan);text-decoration:none}.contact-email:hover{text-decoration:underline}
@media(max-width:1050px){.pricing-card{min-height:780px}.pricing-features li{font-size:12px}}
@media(max-width:700px){.billing-switch{width:100%;max-width:340px}.billing-btn{flex:1;padding:11px 8px}.pricing-card{min-height:auto}.plan-badge{font-size:8px;padding:6px 12px}.users-pill{margin-top:20px}.contact-details-card{padding:28px 20px}}

/* Pricing / contact refinements */
.pricing-intro-row{display:flex;justify-content:center;text-align:center;margin:0 auto 28px;max-width:720px}
.pricing-intro-row h2{margin:8px 0 8px;font-size:clamp(28px,4vw,42px)}
.pricing-intro-row p{margin:0;color:var(--muted,#91a0b8);line-height:1.7}
.contact-reference-card{padding:clamp(28px,5vw,52px)!important}
.contact-company-heading{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.contact-company-heading h2{margin:4px 0 0}
.contact-logo-mark{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;border:1px solid rgba(44,220,255,.45);background:linear-gradient(135deg,rgba(19,231,255,.14),rgba(127,80,255,.18));color:#45e9ff;font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:700;box-shadow:0 0 28px rgba(25,216,255,.14)}
.contact-company-description{max-width:900px;color:var(--muted,#91a0b8);font-size:17px;line-height:1.75;margin:0 0 30px}
.contact-meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;border-top:1px solid rgba(255,255,255,.08);padding-top:26px}
.contact-meta-grid>div{padding:18px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(8,15,32,.45)}
.contact-meta-grid .meta-wide{grid-column:1/-1}
.meta-label{display:block;color:#71819b;text-transform:uppercase;letter-spacing:.12em;font:500 11px 'JetBrains Mono',monospace;margin-bottom:8px}
.contact-meta-grid strong{display:block;color:#edf5ff;font-size:15px;line-height:1.55}
.contact-meta-grid .contact-email{font-size:16px}
@media(max-width:700px){.contact-meta-grid{grid-template-columns:1fr}.contact-meta-grid .meta-wide{grid-column:auto}.pricing-intro-row{margin-bottom:20px}}


/* Premium interactive homepage pricing */
.pricing-interactive{position:relative;overflow:hidden}
.pricing-interactive::before{content:"";position:absolute;inset:15% -20% auto;height:420px;background:radial-gradient(circle,rgba(34,211,238,.07),transparent 62%);pointer-events:none}
.pricing-interactive .section-head{position:relative;z-index:1;margin-bottom:38px}
.pricing-interactive-shell{position:relative;z-index:1;display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px;max-width:1120px;margin:0 auto;padding:14px;border:1px solid rgba(255,255,255,.07);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));box-shadow:0 30px 100px rgba(0,0,0,.28)}
.pricing-plan-tabs{display:flex;flex-direction:column;gap:10px;padding:8px}
.pricing-plan-tab{width:100%;display:grid;grid-template-columns:34px 1fr 22px;align-items:center;gap:12px;text-align:left;padding:18px 16px;border:1px solid rgba(255,255,255,.07);border-radius:18px;background:rgba(5,10,20,.62);color:var(--white);cursor:pointer;transition:transform .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease)}
.pricing-plan-tab:hover{transform:translateX(4px);border-color:rgba(34,211,238,.25);background:rgba(10,18,32,.9)}
.pricing-plan-tab.active{border-color:rgba(34,211,238,.5);background:linear-gradient(135deg,rgba(18,220,239,.12),rgba(124,92,255,.09));box-shadow:0 0 32px rgba(34,211,238,.08),inset 0 0 24px rgba(34,211,238,.025)}
.pricing-plan-tab .tab-index{font:500 10px var(--font-mono);color:var(--muted-dim)}
.pricing-plan-tab.active .tab-index{color:var(--cyan)}
.pricing-plan-tab strong{display:block;font:600 15px var(--font-display);letter-spacing:.01em}
.pricing-plan-tab small{display:block;margin-top:3px;color:var(--muted-dim);font-size:11px}
.tab-arrow{font-size:18px;color:var(--muted-dim);transition:transform .25s ease,color .25s ease}
.pricing-plan-tab.active .tab-arrow{color:var(--cyan);transform:translate(2px,-2px)}
.pricing-plan-panel{position:relative;overflow:hidden;min-height:390px;padding:42px;border:1px solid rgba(34,211,238,.16);border-radius:22px;background:radial-gradient(circle at 88% 4%,rgba(34,211,238,.13),transparent 30%),radial-gradient(circle at 12% 100%,rgba(124,92,255,.08),transparent 30%),linear-gradient(145deg,rgba(13,22,39,.95),rgba(5,10,20,.9));box-shadow:inset 0 1px rgba(255,255,255,.06)}
.pricing-panel-glow{position:absolute;right:-90px;top:-100px;width:280px;height:280px;border-radius:50%;background:rgba(34,211,238,.08);filter:blur(45px);pointer-events:none}
.pricing-panel-top{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:30px}
.pricing-panel-top h3{font-size:clamp(34px,4vw,52px);margin:7px 0 10px;letter-spacing:-.04em}
.pricing-panel-top p{max-width:520px;color:var(--muted);font-size:15px;line-height:1.7;margin:0}
.pricing-panel-price{text-align:right;white-space:nowrap;padding-top:8px}.pricing-panel-price strong{display:block;font:700 clamp(34px,4vw,52px) var(--font-display);letter-spacing:-.05em}.pricing-panel-price span{color:var(--muted);font-size:12px}
.pricing-panel-divider{height:1px;background:linear-gradient(90deg,rgba(255,255,255,.12),transparent);margin:30px 0 22px}
.pricing-panel-body{position:relative;display:grid;grid-template-columns:170px 1fr;gap:28px}.pricing-preview-list{margin:0;padding:0;border:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}.pricing-preview-list li{font-size:12px;line-height:1.45}
.pricing-panel-actions{position:relative;display:flex;align-items:center;gap:22px;margin-top:30px}.pricing-panel-actions .btn{margin:0}.text-link{color:var(--muted);font-size:13px;text-decoration:none}.text-link:hover{color:var(--cyan)}

/* Footer contact finesse */
.footer-contact{min-width:250px}.footer-contact h4{margin:0 0 16px;font:600 10px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dim)}
.footer-contact-line{display:grid;grid-template-columns:70px 1fr;gap:10px;margin:0 0 12px;font-size:12px;line-height:1.55}.footer-contact-line>span{color:var(--muted-dim)}.footer-contact-line a,.footer-contact-line strong{color:var(--cyan);font-weight:500;text-decoration:none}.footer-contact-line a:hover{text-decoration:underline;color:#8ff5ff}.footer-contact-line strong{font-family:var(--font-body)}
.footer-links{align-items:flex-start}
@media(max-width:1050px){.pricing-interactive-shell{grid-template-columns:220px 1fr}.pricing-panel-body{grid-template-columns:1fr}.footer-contact{flex:1 1 240px}}
@media(max-width:700px){.pricing-interactive-shell{grid-template-columns:1fr;padding:8px}.pricing-plan-tabs{display:grid;grid-template-columns:repeat(2,1fr);padding:6px}.pricing-plan-tab{grid-template-columns:24px 1fr;gap:8px;padding:13px}.pricing-plan-tab .tab-arrow{display:none}.pricing-plan-tab small{font-size:10px}.pricing-plan-panel{padding:26px 20px;min-height:0}.pricing-panel-top{flex-direction:column}.pricing-panel-price{text-align:left;padding:0}.pricing-preview-list{grid-template-columns:1fr}.pricing-panel-actions{flex-direction:column;align-items:stretch}.pricing-panel-actions .btn{text-align:center}.footer-contact{min-width:100%}}

/* ==========================================================================
   VELTRIS IO — Premium pricing + contact footer refresh
   ========================================================================== */
.pricing-page-hero{position:relative;overflow:hidden;min-height:390px;display:flex;align-items:center}
.pricing-page-hero .container{position:relative;z-index:2}
.pricing-hero-art{position:absolute;z-index:1;right:-4%;top:12%;width:min(650px,52vw);height:340px;background:url('../assets/generated/workflow-network.png') center/contain no-repeat;opacity:.34;filter:saturate(1.25) contrast(1.05);mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 100%);pointer-events:none}
.pricing-page-interactive{grid-template-columns:330px minmax(0,1fr);max-width:1180px;padding:14px;margin-top:10px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.01));border-color:rgba(95,137,255,.18);box-shadow:0 36px 120px rgba(0,0,0,.38),0 0 80px rgba(34,211,238,.035)}
.pricing-page-interactive .pricing-plan-tabs{padding:8px;gap:12px}
.pricing-page-interactive .pricing-plan-tab{min-height:92px;grid-template-columns:38px 1fr 24px;padding:18px;border-radius:20px;background:linear-gradient(145deg,rgba(8,15,29,.9),rgba(4,9,18,.78));}
.pricing-page-interactive .pricing-plan-tab strong{font-size:17px}
.pricing-page-interactive .pricing-plan-tab small{font-family:var(--font-mono);color:#6f819e;font-size:10px;letter-spacing:.01em}
.pricing-page-interactive .pricing-plan-tab.active{transform:translateX(6px);border-color:rgba(34,211,238,.52);background:linear-gradient(135deg,rgba(24,220,239,.13),rgba(124,92,255,.14));box-shadow:0 18px 45px rgba(0,0,0,.22),0 0 30px rgba(34,211,238,.08),inset 0 0 28px rgba(34,211,238,.035)}
.pricing-page-interactive .pricing-plan-tab.active strong{background:linear-gradient(90deg,#fff,#9eefff);-webkit-background-clip:text;background-clip:text;color:transparent}
.pricing-page-interactive .pricing-plan-panel{min-height:570px;padding:48px 46px;border-radius:24px;background:radial-gradient(circle at 90% 4%,rgba(34,211,238,.16),transparent 26%),radial-gradient(circle at 6% 96%,rgba(124,92,255,.13),transparent 28%),linear-gradient(145deg,rgba(13,22,39,.98),rgba(4,9,18,.95));border-color:rgba(76,130,255,.25);box-shadow:inset 0 1px rgba(255,255,255,.07),0 20px 80px rgba(0,0,0,.18)}
.pricing-page-interactive .pricing-panel-art{position:absolute;right:-30px;bottom:-35px;width:330px;height:230px;background:url('../assets/generated/workflow-network.png') center/contain no-repeat;opacity:.10;filter:blur(.2px);pointer-events:none}
.pricing-page-interactive .pricing-panel-top,.pricing-page-interactive .pricing-panel-divider,.pricing-page-interactive .pricing-panel-body,.pricing-page-interactive .pricing-panel-actions{position:relative;z-index:2}
.pricing-page-interactive .pricing-panel-top h3{font-size:clamp(40px,4vw,60px);margin-top:9px}
.pricing-page-interactive .pricing-panel-top p{max-width:570px;font-size:15px}
.pricing-page-interactive .pricing-panel-price strong{font-size:clamp(42px,4.6vw,64px)}
.pricing-page-interactive .pricing-panel-body{grid-template-columns:190px 1fr;gap:30px}
.pricing-page-interactive .pricing-preview-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 30px}
.pricing-page-interactive .pricing-preview-list li{font-size:12.5px;color:#b5c2d6}
.plan-mini-badge{display:block;width:max-content;margin-top:12px;padding:7px 10px;border:1px solid rgba(124,92,255,.3);border-radius:999px;color:#aeb8ff;font:500 9px var(--font-mono);letter-spacing:.08em}
.pricing-page-interactive .pricing-panel-actions{margin-top:38px}

.site-footer{position:relative;overflow:hidden;background:linear-gradient(180deg,#050914 0%,#03060c 100%);border-top:1px solid rgba(76,130,255,.18)}
.site-footer::after{content:"";position:absolute;right:2%;bottom:18px;width:250px;height:160px;background:url('../assets/generated/neon-paper-plane.png') center/contain no-repeat;opacity:.13;pointer-events:none}
.footer-top-premium{position:relative;z-index:1;display:grid;grid-template-columns:minmax(300px,1.15fr) minmax(180px,.7fr) minmax(380px,1.5fr);gap:52px;align-items:start}
.footer-contact-primary{min-width:0;padding-right:18px}
.footer-kicker{font:600 10px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin-bottom:12px}
.footer-contact-primary h3{font:600 clamp(24px,2.6vw,34px) var(--font-display);letter-spacing:-.025em;margin:0 0 10px;color:#f4f8ff}
.footer-contact-primary>p{max-width:420px;color:var(--muted);font-size:13px;line-height:1.65;margin:0 0 24px}
.footer-contact-primary .footer-contact-line{grid-template-columns:72px 1fr;gap:10px;margin-bottom:12px;font-size:12px}
.footer-contact-primary .footer-contact-line>span{color:#7d8ca6}
.footer-contact-primary .footer-contact-line a,.footer-contact-primary .footer-contact-line strong{color:#77eaff;text-decoration:none}
.footer-contact-primary .footer-contact-line a:hover{color:#fff;text-shadow:0 0 20px rgba(34,211,238,.45)}
.footer-contact-cta{display:inline-flex;align-items:center;gap:10px;margin-top:8px;padding:11px 15px;border:1px solid rgba(34,211,238,.24);border-radius:12px;background:rgba(34,211,238,.055);color:#dffbff;text-decoration:none;font-size:12px;transition:.25s ease}
.footer-contact-cta:hover{transform:translateY(-2px);border-color:rgba(34,211,238,.5);background:rgba(34,211,238,.09)}
.footer-brand{padding-top:3px}
.footer-brand .brand{font-size:15px}
.footer-brand p{max-width:250px;color:#7d8ca6;line-height:1.6}
.footer-status{display:flex;align-items:center;gap:8px;margin-top:20px;color:#8392aa;font:500 9px var(--font-mono);letter-spacing:.05em;text-transform:uppercase}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px rgba(34,211,238,.75)}
.footer-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.footer-links h4{color:#dfe8f5}
.footer-links a{font-size:12px}
.footer-bottom{position:relative;z-index:2}

@media(max-width:1050px){
 .pricing-page-interactive{grid-template-columns:260px 1fr}
 .pricing-page-interactive .pricing-plan-panel{padding:38px 32px}
 .pricing-page-interactive .pricing-panel-body{grid-template-columns:1fr}
 .footer-top-premium{grid-template-columns:1fr 1fr;gap:38px}
 .footer-links{grid-column:1/-1}
}
@media(max-width:700px){
 .pricing-page-hero{min-height:420px}
 .pricing-hero-art{right:-28%;top:8%;width:720px;max-width:none;opacity:.2}
 .pricing-page-interactive{grid-template-columns:1fr;padding:8px}
 .pricing-page-interactive .pricing-plan-tabs{display:grid;grid-template-columns:repeat(2,1fr);padding:6px}
 .pricing-page-interactive .pricing-plan-tab{min-height:86px;grid-template-columns:25px 1fr;padding:14px}
 .pricing-page-interactive .pricing-plan-tab.active{transform:none}
 .pricing-page-interactive .pricing-plan-tab .tab-arrow{display:none}
 .pricing-page-interactive .pricing-plan-panel{min-height:0;padding:28px 20px}
 .pricing-page-interactive .pricing-panel-top{flex-direction:column}
 .pricing-page-interactive .pricing-panel-price{text-align:left;padding-top:4px}
 .pricing-page-interactive .pricing-preview-list{grid-template-columns:1fr}
 .footer-top-premium{grid-template-columns:1fr;gap:32px}
 .footer-links{grid-template-columns:1fr 1fr;gap:28px 20px}
 .site-footer::after{opacity:.07;right:-30px}
}