:root{color-scheme:dark;--bg:#080d13;--panel:#101923;--panel2:#121f2a;--line:#263541;--text:#edf4f7;--muted:#9aabb5;--accent:#72e0bd;--blue:#8bb9ff;--max:1160px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:radial-gradient(ellipse at 78% 8%,rgba(39,103,91,.16),transparent 34%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}
.header{height:78px;max-width:var(--max);margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.07)}
.brand{display:inline-flex;align-items:center;gap:11px;font-size:14px;font-weight:850;letter-spacing:.17em}
.brand-mark{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:var(--accent);color:#07120f;font-size:19px;font-weight:950;letter-spacing:-.08em}
.nav{display:flex;align-items:center;gap:28px;color:var(--muted);font-size:13px}
.nav a:hover,.footer a:hover{color:var(--accent)}
.language{border:1px solid var(--line);background:transparent;color:var(--text);border-radius:7px;padding:7px 11px;font-weight:700;cursor:pointer}
.hero{max-width:var(--max);margin:auto;padding:104px 28px 90px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:65px;min-height:570px}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.19em}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent)}
h1{font-size:clamp(43px,5.4vw,70px);line-height:1.08;letter-spacing:-.065em;margin:24px 0 20px;font-weight:800}
h1 span{color:var(--accent)}
.hero-description{max-width:570px;color:#b3c1c9;font-size:16px;line-height:1.9}
.hero-actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:45px;padding:0 19px;border-radius:7px;font-size:13px;font-weight:750;transition:transform .2s,border-color .2s}
.button:hover{transform:translateY(-2px)}
.button-primary{background:var(--accent);color:#07130f}
.button-secondary{border:1px solid var(--line);color:var(--text)}
.hero-note{max-width:570px;margin-top:23px;color:#758893;font-size:11px}
.hero-visual{min-height:350px;border:1px solid #263a45;border-radius:15px;background:linear-gradient(145deg,rgba(21,42,51,.9),rgba(9,17,25,.94));position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 30px 90px rgba(0,0,0,.25)}
.visual-top{height:48px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:7px;padding:0 17px}
.visual-top>span{width:7px;height:7px;border-radius:50%;background:#42545d}
.visual-top small{margin-left:auto;color:#7f929d;font-size:9px;letter-spacing:.14em}
.visual-core{position:relative;display:grid;place-items:center;flex:1;min-height:245px}
.core-ring{position:absolute;border:1px solid rgba(114,224,189,.19);border-radius:50%;width:210px;height:210px}
.ring-two{width:150px;height:150px;border-color:rgba(139,185,255,.25)}
.core-logo{width:82px;height:82px;display:grid;place-items:center;border-radius:22px;background:linear-gradient(145deg,#a1f4d5,#45a98c);color:#071b15;font-size:49px;font-weight:950;box-shadow:0 0 65px rgba(114,224,189,.2)}
.visual-caption{display:flex;justify-content:center;align-items:center;gap:13px;padding:17px;border-top:1px solid rgba(255,255,255,.07);font-size:9px;letter-spacing:.16em;color:#91a6af}
.visual-caption i{width:4px;height:4px;border-radius:50%;background:var(--accent)}
.stats{max-width:var(--max);margin:0 auto;padding:23px 28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr)}
.stats div{display:flex;align-items:center;gap:15px;padding:7px 22px;border-right:1px solid var(--line)}
.stats div:first-child{padding-left:0}.stats div:last-child{border:0}
.stats strong{color:var(--accent);font-size:20px;letter-spacing:-.04em}
.stats span{color:var(--muted);font-size:12px}
.section,.platform-section{max-width:var(--max);margin:auto;padding:105px 28px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:37px}
.section-heading h2,.cta h2{font-size:clamp(30px,4vw,43px);letter-spacing:-.055em;line-height:1.16;margin:12px 0 0}
.section-heading>p{max-width:440px;color:var(--muted);font-size:13px;line-height:1.9;margin:0}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.product-card{min-height:220px;padding:23px;border:1px solid var(--line);border-radius:11px;background:linear-gradient(145deg,rgba(18,31,42,.86),rgba(12,20,29,.86));transition:border-color .2s,transform .2s}
.product-card:hover{border-color:#527e77;transform:translateY(-3px)}
.product-card.featured{border-color:#477b6d;background:linear-gradient(145deg,rgba(29,66,58,.42),rgba(12,20,29,.9))}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.product-icon{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;background:#1c3435;color:var(--accent);font-size:13px;font-weight:850}
.status{font-size:9px;letter-spacing:.04em;padding:5px 8px;border-radius:20px;white-space:nowrap}
.status-development{color:#d8c49a;background:rgba(191,153,79,.12)}
.status-api{color:#91d8b8;background:rgba(83,176,130,.13)}
.status-planned{color:#a7b6c7;background:rgba(125,148,173,.13)}
.status-integration{color:#a8c7ff;background:rgba(105,148,218,.13)}
.product-card h3{font-size:18px;margin:21px 0 7px;letter-spacing:-.025em}
.product-card p{min-height:62px;color:var(--muted);font-size:12px;line-height:1.8;margin:0}
.product-card>a{display:inline-block;margin-top:16px;color:var(--accent);font-size:11px;font-weight:750}
.platform-section{max-width:none;background:linear-gradient(180deg,rgba(17,29,39,.65),rgba(10,17,25,.45));border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05)}
.platform-section>.section-heading,.architecture{max-width:1104px;margin-left:auto;margin-right:auto}
.architecture{padding:30px;border:1px solid var(--line);border-radius:13px;background:rgba(7,14,21,.55)}
.architecture-main{max-width:460px;margin:auto;text-align:center;padding:24px;border:1px solid #477d70;border-radius:9px;background:rgba(43,100,83,.16);display:grid;gap:6px}
.architecture-label{font-size:9px;color:var(--accent);letter-spacing:.16em}
.architecture-main strong{font-size:22px;letter-spacing:.16em}
.architecture-main small,.architecture-grid small{color:var(--muted);font-size:11px}
.architecture-lines{height:43px;display:flex;justify-content:center;gap:25%;border-bottom:1px solid #466c66;max-width:70%;margin:auto}
.architecture-lines span{width:1px;height:100%;background:#466c66}
.architecture-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:23px}
.architecture-grid div{padding:17px 10px;text-align:center;border:1px solid var(--line);border-radius:8px;background:var(--panel);display:grid;gap:5px}
.architecture-grid b{font-size:13px}
.architecture-foot{text-align:center;color:#788b95;font-size:10px;margin:22px 0 0}
.roadmap{padding-top:95px;padding-bottom:95px}
.roadmap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.roadmap-grid>div{padding:23px;border-left:1px solid #426c61;background:linear-gradient(90deg,rgba(34,73,62,.16),transparent)}
.roadmap-grid span{color:var(--accent);font-size:11px;font-weight:800}
.roadmap-grid h3{font-size:16px;margin:17px 0 8px}
.roadmap-grid p{font-size:12px;line-height:1.8;color:var(--muted);margin:0}
.cta{max-width:var(--max);margin:0 auto 90px;padding:65px 25px;text-align:center;border:1px solid #31584f;border-radius:13px;background:radial-gradient(ellipse at center,rgba(53,117,96,.2),rgba(13,24,30,.7) 70%)}
.cta .eyebrow{justify-content:center}
.cta h2{margin:15px 0}
.cta>p:not(.eyebrow){color:var(--muted);font-size:13px;margin-bottom:24px}
.footer{max-width:var(--max);margin:auto;padding:25px 28px 35px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:18px;color:#82939c;font-size:10px}
.footer .brand{color:var(--text);font-size:12px}
.footer .brand-mark{width:25px;height:25px;font-size:15px}
.footer>a:not(.brand){color:var(--accent)}
.references-section{max-width:var(--max);margin:auto;padding:95px 28px}
.reference-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
.reference-card{padding:25px;border:1px solid var(--line);border-radius:11px;background:linear-gradient(145deg,rgba(18,31,42,.86),rgba(12,20,29,.86));min-height:180px}
.reference-card h3{font-size:20px;margin:17px 0 10px}
.reference-card p{color:var(--muted);font-size:13px;line-height:1.85;margin:0}
.reference-type{display:inline-block;color:var(--accent);font-size:10px;font-weight:800;letter-spacing:1.2px}
.references-note{margin:22px 0 0;color:var(--muted);font-size:11px;line-height:1.8}
@media(max-width:560px){.references-section{padding:70px 20px}.reference-grid{grid-template-columns:1fr}.reference-card{min-height:0}}
@media(max-width:800px){.hero{grid-template-columns:1fr;padding-top:75px;gap:40px}.hero-visual{min-height:300px}.product-grid{grid-template-columns:repeat(2,1fr)}.section-heading{align-items:start;flex-direction:column;gap:12px}.roadmap-grid{grid-template-columns:1fr}.architecture-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.header{height:auto;min-height:70px;padding:14px 18px;align-items:flex-start;gap:15px;flex-direction:column}.nav{width:100%;gap:15px;flex-wrap:wrap;font-size:11px}.hero{padding:60px 20px}.hero-description{font-size:14px}.stats{padding:15px 18px;grid-template-columns:1fr;gap:9px}.stats div{border:0;padding:6px 0}.section,.platform-section{padding:70px 20px}.product-grid{grid-template-columns:1fr}.product-card{min-height:0}.product-card p{min-height:0}.architecture{padding:17px}.architecture-grid{gap:8px}.architecture-grid div{padding:13px 5px}.architecture-lines{max-width:90%}.cta{margin:0 15px 60px;padding:48px 18px}.footer{padding:23px 20px;align-items:flex-start;flex-direction:column}}
/* =========================================
   NOVIFORM MOTION EXPERIENCE
   ========================================= */

:root {
  --motion-blue: #6daaff;
  --motion-cyan: #63e6d0;
  --motion-glow: rgba(92,166,255,.22);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 75% 12%, rgba(55,116,190,.13), transparent 35%),
    radial-gradient(ellipse at 15% 60%, rgba(35,130,112,.09), transparent 38%),
    var(--bg);
}

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  max-width: none;
  padding-left: max(28px, calc((100vw - var(--max))/2));
  padding-right: max(28px, calc((100vw - var(--max))/2));
  background: rgba(8,13,19,.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: background .35s, box-shadow .35s;
}

.header.scrolled {
  background: rgba(8,13,19,.94);
  box-shadow: 0 12px 35px rgba(0,0,0,.2);
}

.brand-mark {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg,#a1f4d5,#6daaff);
  box-shadow: 0 0 24px rgba(99,230,208,.18);
  transition: transform .4s, box-shadow .4s;
}

.brand:hover .brand-mark {
  transform: rotate(-9deg) scale(1.08);
  box-shadow: 0 0 32px rgba(99,230,208,.35);
}

.nav a {
  position: relative;
  transition: color .25s;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -8px;
  height: 2px;
  background: var(--motion-cyan);
  transition: right .3s;
}

.nav a:hover::after {
  right: 0;
}

.hero {
  position: relative;
  min-height: min(760px, calc(100vh - 78px));
  perspective: 1200px;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero h1 {
  animation: heroTextIn 1s cubic-bezier(.2,.75,.25,1) both;
}

.hero-description {
  animation: heroTextIn .9s .12s both;
}

.hero-actions {
  animation: heroTextIn .9s .23s both;
}

.hero-visual {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .18s ease-out, border-color .4s;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(77,148,210,.17), transparent 55%),
    linear-gradient(145deg,rgba(21,42,60,.94),rgba(8,15,25,.97));
  box-shadow: 0 35px 100px rgba(0,0,0,.36), 0 0 60px rgba(72,144,210,.07);
}

.hero-visual::before {
  content: "";
  position: absolute;
  inset: -60%;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    transparent,
    rgba(99,230,208,.08),
    transparent,
    rgba(109,170,255,.12),
    transparent
  );
  animation: visualRotate 22s linear infinite;
}

.visual-core {
  isolation: isolate;
}

.core-ring {
  border-color: rgba(99,230,208,.35);
  box-shadow: 0 0 35px rgba(99,230,208,.06);
  animation: ringFloat 7s ease-in-out infinite;
}

.ring-two {
  animation-delay: -3.5s;
}

.core-logo {
  position: relative;
  z-index: 2;
  background: linear-gradient(145deg,#b2f7e4,#65b8ff);
  box-shadow: 0 0 70px rgba(99,230,208,.25);
  animation: logoFloat 5s ease-in-out infinite;
}

.visual-caption span {
  transition: color .3s, text-shadow .3s;
}

.visual-caption span:hover {
  color: white;
  text-shadow: 0 0 16px var(--motion-cyan);
}

.button {
  transition: transform .3s cubic-bezier(.2,.8,.2,1),
              box-shadow .3s, background .3s;
}

.button-primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(99,230,208,.2);
}

.button-secondary:hover {
  border-color: var(--motion-blue);
  box-shadow: 0 8px 25px rgba(109,170,255,.1);
}

/* Scroll reveal */

.motion-reveal {
  opacity: 0;
  transform: translate3d(0,45px,0) scale(.985);
  filter: blur(5px);
  transition:
    opacity .85s cubic-bezier(.2,.7,.2,1),
    transform .9s cubic-bezier(.2,.7,.2,1),
    filter .8s ease;
  transition-delay: var(--reveal-delay,0ms);
}

.motion-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  filter: blur(0);
}

.product-card,
.reference-card,
.roadmap-grid > div {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    border-color .35s,
    box-shadow .4s;
}

.product-card::before,
.reference-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    450px circle at var(--mouse-x,50%) var(--mouse-y,50%),
    rgba(109,170,255,.14),
    transparent 48%
  );
  transition: opacity .35s;
}

.product-card:hover::before,
.reference-card:hover::before {
  opacity: 1;
}

.product-card:hover,
.reference-card:hover {
  transform: translateY(-8px) scale(1.012);
  border-color: rgba(109,170,255,.65);
  box-shadow: 0 22px 55px rgba(0,0,0,.24), 0 0 28px rgba(109,170,255,.06);
}

.product-card.featured:hover {
  border-color: var(--motion-cyan);
}

.product-icon {
  transition: transform .4s, box-shadow .4s;
}

.product-card:hover .product-icon {
  transform: translateY(-3px) rotate(-7deg);
  box-shadow: 0 0 25px rgba(99,230,208,.18);
}

/* Horizontal product and project galleries */

.product-grid,
.reference-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 12px 4px 28px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #34536a transparent;
  overscroll-behavior-x: contain;
}

.product-card {
  flex: 0 0 calc((100% - 32px)/3);
  scroll-snap-align: start;
  min-width: 270px;
}

.reference-card {
  flex: 0 0 calc((100% - 16px)/2);
  scroll-snap-align: start;
  min-width: 280px;
}

.product-grid::-webkit-scrollbar,
.reference-grid::-webkit-scrollbar {
  height: 5px;
}

.product-grid::-webkit-scrollbar-thumb,
.reference-grid::-webkit-scrollbar-thumb {
  background: #34536a;
  border-radius: 10px;
}

.product-grid::-webkit-scrollbar-track,
.reference-grid::-webkit-scrollbar-track {
  background: rgba(255,255,255,.035);
}

/* Architecture animation */

.architecture {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(80,153,210,.1), transparent 55%),
    rgba(7,14,21,.65);
}

.architecture::after {
  content: "";
  position: absolute;
  width: 180%;
  height: 1px;
  left: -40%;
  top: 0;
  background: linear-gradient(90deg,transparent,var(--motion-cyan),transparent);
  box-shadow: 0 0 15px var(--motion-cyan);
  animation: architectureScan 7s linear infinite;
}

.architecture-main {
  position: relative;
  box-shadow: 0 0 40px rgba(99,230,208,.06);
  animation: architecturePulse 5s ease-in-out infinite;
}

.architecture-lines span {
  background: linear-gradient(180deg,var(--motion-cyan),#466c66);
  transform-origin: top;
  animation: lineGlow 3s ease-in-out infinite alternate;
}

.architecture-lines span:nth-child(2) {
  animation-delay: .7s;
}

.architecture-lines span:nth-child(3) {
  animation-delay: 1.4s;
}

.architecture-grid > div {
  transition: transform .35s, border-color .35s, background .35s;
}

.architecture-grid > div:hover {
  transform: translateY(-6px);
  border-color: var(--motion-blue);
  background: #172b40;
}

/* Roadmap and closing scene */

.roadmap-grid > div {
  border-left: 1px solid rgba(99,230,208,.55);
  transition: background .4s, transform .4s;
}

.roadmap-grid > div:hover {
  transform: translateX(8px);
  background: linear-gradient(90deg,rgba(46,105,100,.25),transparent);
}

.cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 120%,rgba(99,230,208,.2),transparent 65%),
    radial-gradient(ellipse at 15% 0%,rgba(109,170,255,.12),transparent 55%),
    #0d181e;
}

.cta::before,
.cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(99,230,208,.13);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  animation: ctaOrbit 12s linear infinite;
}

.cta::after {
  width: 390px;
  height: 390px;
  animation-direction: reverse;
  animation-duration: 18s;
}

/* Scroll progress indicator */

.motion-progress {
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg,var(--motion-cyan),var(--motion-blue));
  box-shadow: 0 0 12px var(--motion-blue);
  pointer-events: none;
}

/* Animations */

@keyframes heroTextIn {
  from { opacity: 0; transform: translateY(25px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes visualRotate {
  to { transform: rotate(360deg); }
}

@keyframes ringFloat {
  0%,100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.08) rotate(18deg); }
}

@keyframes logoFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

@keyframes architectureScan {
  from { transform: translateX(-20%); }
  to { transform: translateX(70%); }
}

@keyframes architecturePulse {
  0%,100% { box-shadow: 0 0 20px rgba(99,230,208,.04); }
  50% { box-shadow: 0 0 45px rgba(99,230,208,.13); }
}

@keyframes lineGlow {
  from { opacity: .35; }
  to { opacity: 1; }
}

@keyframes ctaOrbit {
  from { transform: translate(-50%,-50%) rotate(0deg) scale(.9); }
  to { transform: translate(-50%,-50%) rotate(360deg) scale(1.1); }
}

/* Responsive */

@media(max-width:900px) {
  .product-card {
    flex-basis: min(78vw,340px);
  }

  .reference-card {
    flex-basis: min(82vw,420px);
  }

  .hero {
    min-height: auto;
  }
}

@media(max-width:560px) {
  .header {
    padding-left: 18px;
    padding-right: 18px;
  }

  .product-card {
    flex-basis: 86vw;
    min-width: 0;
  }

  .reference-card {
    flex-basis: 88vw;
    min-width: 0;
  }

  .hero-visual {
    min-height: 280px;
  }

  .motion-reveal {
    transform: translateY(24px);
    filter: none;
  }

  .product-card:hover,
  .reference-card:hover {
    transform: none;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .motion-reveal {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* NOVIFORM WHITE PREMIUM EXPERIENCE */
:root {
  --nv-bg: #ffffff;
  --nv-bg-soft: #f5f8ff;
  --nv-blue: #1769ff;
  --nv-cyan: #36c9e8;
  --nv-ink: #17243a;
  --nv-muted: #66758b;
  --nv-border: rgba(31, 86, 160, .12);
  --nv-shadow: 0 18px 55px rgba(35, 83, 150, .10);
}

html {
  scroll-behavior: smooth;
  background: var(--nv-bg);
}

body {
  color: var(--nv-ink);
  background:
    radial-gradient(ellipse at 12% 8%, rgba(68, 157, 255, .09), transparent 30%),
    radial-gradient(ellipse at 88% 32%, rgba(54, 201, 232, .08), transparent 28%),
    #fff !important;
}

section {
  position: relative;
  isolation: isolate;
}

header, .header, .site-header, nav {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.hero {
  background:
    radial-gradient(ellipse at 75% 35%, rgba(53, 156, 255, .12), transparent 38%),
    radial-gradient(ellipse at 20% 80%, rgba(54, 201, 232, .09), transparent 35%),
    #fff !important;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -180px;
  top: -160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(50, 153, 255, .13), transparent 68%);
  filter: blur(18px);
  pointer-events: none;
  animation: nvAmbient 12s ease-in-out infinite alternate;
  z-index: -1;
}

.hero::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  left: -180px;
  bottom: -150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(58, 213, 225, .12), transparent 70%);
  pointer-events: none;
  animation: nvAmbient 15s ease-in-out infinite alternate-reverse;
  z-index: -1;
}

.hero h1, .hero-title {
  color: var(--nv-ink);
  text-wrap: balance;
}

.hero p, .hero-description {
  color: var(--nv-muted);
}

.hero-visual {
  perspective: 1100px;
  transform-style: preserve-3d;
  filter: drop-shadow(0 28px 45px rgba(39, 115, 220, .12));
}

.product-card,
.reference-card {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.88) !important;
  color: var(--nv-ink);
  border: 1px solid var(--nv-border) !important;
  border-radius: 22px;
  box-shadow: 0 8px 28px rgba(31, 76, 137, .055);
  transition:
    transform .55s cubic-bezier(.2,.8,.2,1),
    box-shadow .55s ease,
    border-color .4s ease;
}

.product-card::before,
.reference-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(125deg,
    transparent 15%,
    rgba(60, 151, 255, .10) 48%,
    rgba(61, 214, 229, .10) 60%,
    transparent 82%);
  transform: translateX(-100%);
  transition: transform .8s ease, opacity .4s ease;
}

.product-card:hover,
.reference-card:hover {
  transform: translateY(-10px) scale(1.015);
  border-color: rgba(23, 105, 255, .30) !important;
  box-shadow: 0 24px 60px rgba(31, 100, 190, .14);
}

.product-card:hover::before,
.reference-card:hover::before {
  opacity: 1;
  transform: translateX(100%);
}

.architecture {
  background:
    radial-gradient(ellipse at center, rgba(48, 144, 255, .08), transparent 65%),
    #f7faff !important;
  border-radius: 28px;
}

.architecture::before {
  opacity: .7;
}

.cta {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(57, 187, 255, .18), transparent 38%),
    linear-gradient(135deg, #f5f9ff, #ffffff 55%, #f0fbff) !important;
  color: var(--nv-ink) !important;
  border: 1px solid var(--nv-border);
  overflow: hidden;
}

button, .button, .btn, a.button, a.btn {
  transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}

button:hover, .button:hover, .btn:hover, a.button:hover, a.btn:hover {
  transform: translateY(-2px);
  filter: saturate(1.12);
  box-shadow: 0 10px 28px rgba(23, 105, 255, .18);
}

.motion-reveal {
  will-change: transform, opacity;
}

@keyframes nvAmbient {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-28px, 24px, 0) scale(1.12); }
}

@keyframes nvParticleFloat {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: .25; }
  50% { transform: translate3d(12px, -24px, 0); opacity: .85; }
}

.nv-particle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #42b9ff;
  box-shadow: 0 0 16px rgba(40, 157, 255, .65);
  pointer-events: none;
  animation: nvParticleFloat var(--duration, 7s) ease-in-out infinite;
  z-index: 2;
}

@media (max-width: 768px) {
  .hero::before { width: 300px; height: 300px; }
  .hero::after { width: 220px; height: 220px; }
  .product-card:hover,
  .reference-card:hover {
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* NOVIFORM GLOBAL NAVY TEXT CONTRAST FIX */
:root {
  --nv-ink: #17243A;
  --nv-text: #17243A;
  --nv-muted: #53647C;
}

body,
body p,
body span,
body li,
body label,
body small,
body strong,
body em,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .hero h1,
body .hero p,
body .section-title,
body .section-subtitle,
body .product-card,
body .reference-card,
body .architecture,
body .roadmap,
body footer {
  color: #17243A;
}

body p,
body li,
body small,
body .hero p,
body .section-subtitle {
  color: #53647C;
}

body a:not(.button):not(.btn) {
  color: #1769FF;
}

body button,
body button *,
body .button,
body .button *,
body .btn,
body .btn *,
body a.btn,
body a.btn *,
body a.button,
body a.button *,
body input[type="button"],
body input[type="submit"] {
  color: #17243A !important;
}

body button:hover,
body .button:hover,
body .btn:hover,
body a.button:hover,
body a.btn:hover {
  color: #17243A !important;
}

body .reference-type {
  color: #1769FF;
}

body .nav-links a,
body header a,
body nav a {
  color: #17243A;
}

::placeholder {
  color: #718096 !important;
  opacity: 1;
}


/* NOVIFORM PURE WHITE HEADER */
header,
.header,
.site-header,
nav,
header nav {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #17243A !important;
    border-bottom: 1px solid rgba(23, 36, 58, 0.08) !important;
    box-shadow: 0 4px 22px rgba(23, 36, 58, 0.035) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

header a,
.header a,
.site-header a,
nav a,
header button {
    color: #17243A !important;
}

header a:hover,
nav a:hover {
    color: #1769FF !important;
}


/* NOVIFORM GLOBAL DARK NAVY TYPOGRAPHY */
:root {
    --nv-ink: #17243A;
    --nv-muted: #17243A;
    --text-primary: #17243A;
    --text-secondary: #17243A;
}

html, body, body * {
    color: #17243A !important;
}

body input,
body textarea,
body select,
body option,
body button,
body button *,
body a,
body a *,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body span,
body div,
body li,
body small,
body strong,
body label,
body footer,
body header,
body nav {
    color: #17243A !important;
}

body a:hover,
body button:hover {
    color: #1769FF !important;
}

body input::placeholder,
body textarea::placeholder {
    color: #53647C !important;
    opacity: 1;
}


/* NOVIFORM LIGHT TEXT BACKGROUNDS */
body {
    background-color: #ffffff !important;
}

/* Genel metin alanları */
p, h1, h2, h3, h4, h5, h6,
span, label, li, small, strong,
.section-title, .section-subtitle {
    background-color: transparent !important;
}

/* Metin içeren ana kartlar */
.product-card,
.reference-card,
.architecture,
.roadmap,
.cta {
    background-color: #ffffff !important;
    color: #17243A !important;
}

/* Üst menü */
header,
.header,
.site-header,
nav {
    background-color: #ffffff !important;
}

/* Form alanları */
input, textarea, select {
    background-color: #f5f8fc !important;
    color: #17243A !important;
}

/* Metin seçimi */
::selection {
    background: #dcecff;
    color: #17243A;
}


/* NOVIFORM NIGHT MODE */
html[data-theme="dark"],
html[data-theme="dark"] body {
    background: #101827 !important;
    color: #E7EDF7 !important;
}

html[data-theme="dark"] body,
html[data-theme="dark"] body * {
    color: #E7EDF7 !important;
}

html[data-theme="dark"] body {
    background:
      radial-gradient(ellipse at 15% 10%, rgba(23,105,255,.13), transparent 35%),
      radial-gradient(ellipse at 85% 35%, rgba(54,201,232,.09), transparent 30%),
      #101827 !important;
}

html[data-theme="dark"] header,
html[data-theme="dark"] .header,
html[data-theme="dark"] .site-header,
html[data-theme="dark"] nav,
html[data-theme="dark"] header nav {
    background: rgba(16,24,39,.94) !important;
    background-color: #101827 !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 5px 25px rgba(0,0,0,.18) !important;
}

html[data-theme="dark"] section,
html[data-theme="dark"] .hero {
    background-color: transparent !important;
}

html[data-theme="dark"] .product-card,
html[data-theme="dark"] .reference-card {
    background: rgba(30,43,64,.94) !important;
    border: 1px solid rgba(130,170,220,.18) !important;
    box-shadow: 0 15px 40px rgba(0,0,0,.20) !important;
}

html[data-theme="dark"] .architecture,
html[data-theme="dark"] .roadmap {
    background: #172338 !important;
    border-color: rgba(255,255,255,.08) !important;
}

html[data-theme="dark"] .cta {
    background:
      radial-gradient(ellipse at 80% 20%, rgba(57,187,255,.17), transparent 40%),
      #172338 !important;
    border-color: rgba(255,255,255,.10) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: #1c2a40 !important;
    border-color: rgba(255,255,255,.16) !important;
    color: #E7EDF7 !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #AAB8CC !important;
}

html[data-theme="dark"] a:not(.button):not(.btn) {
    color: #75B8FF !important;
}

html[data-theme="dark"] .nv-theme-toggle {
    color: #17243A !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(255,255,255,.35) !important;
}

html[data-theme="dark"] .nv-theme-toggle * {
    color: #17243A !important;
}

html[data-theme="dark"] .product-card:hover,
html[data-theme="dark"] .reference-card:hover {
    border-color: rgba(80,175,255,.45) !important;
    box-shadow: 0 22px 55px rgba(0,0,0,.35) !important;
}

.nv-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    margin-left: 12px;
    border-radius: 999px;
    border: 1px solid rgba(23,36,58,.15);
    background: #F1F6FF;
    color: #17243A !important;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: .25s ease;
}

.nv-theme-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(23,105,255,.14);
}

@media (max-width: 768px) {
    .nv-theme-toggle {
        padding: 8px 10px;
        font-size: 12px;
        margin-left: 5px;
    }
}


/* NOVIFORM DAY MODE - DARK ARCHITECTURE DIAGRAM TEXT */
html:not([data-theme="dark"]) .platform-section .architecture-main,
html:not([data-theme="dark"]) .platform-section .architecture-main *,
html:not([data-theme="dark"]) .platform-section .architecture-label,
html:not([data-theme="dark"]) .platform-section .architecture-grid > div,
html:not([data-theme="dark"]) .platform-section .architecture-grid > div *,
html:not([data-theme="dark"]) .platform-section .architecture-foot,
html:not([data-theme="dark"]) .platform-section .architecture-foot * {
    color: #F4F7FF !important;
}

html:not([data-theme="dark"]) .platform-section .architecture-grid b,
html:not([data-theme="dark"]) .platform-section .architecture-grid small {
    color: #FFFFFF !important;
}


/* NOVIFORM ARCHITECTURE - PRECISE DAY MODE TEXT COLORS */

/* Üstteki tek Noviform bloğu: koyu yazı */
html:not([data-theme="dark"]) .architecture-main,
html:not([data-theme="dark"]) .architecture-main *,
html:not([data-theme="dark"]) .architecture-main strong,
html:not([data-theme="dark"]) .architecture-main small {
    color: #17243A !important;
}

/* Alttaki dört uygulama: açık yazı */
html:not([data-theme="dark"]) .architecture-grid > div,
html:not([data-theme="dark"]) .architecture-grid > div * {
    color: #FFFFFF !important;
}


/* NOVIFORM ARCHITECTURE - PRECISE DAY MODE TEXT COLORS */

/* Üstteki tek Noviform bloğu: koyu yazı */
html:not([data-theme="dark"]) .architecture-main,
html:not([data-theme="dark"]) .architecture-main *,
html:not([data-theme="dark"]) .architecture-main strong,
html:not([data-theme="dark"]) .architecture-main small {
    color: #17243A !important;
}

/* Alttaki dört uygulama: açık yazı */
html:not([data-theme="dark"]) .architecture-grid > div,
html:not([data-theme="dark"]) .architecture-grid > div * {
    color: #FFFFFF !important;
}


/* FINAL FIX - NOVIFORM ARCHITECTURE DIAGRAM */

/* Gündüz modu: üstteki ana NOVIFORM kutusu */
html:not([data-theme="dark"]) body .platform-section .architecture .architecture-main,
html:not([data-theme="dark"]) body .platform-section .architecture .architecture-main *,
html:not([data-theme="dark"]) body .platform-section .architecture .architecture-main strong,
html:not([data-theme="dark"]) body .platform-section .architecture .architecture-main small {
    color: #17243A !important;
}

/* Gündüz modu: alttaki dört uygulama */
html:not([data-theme="dark"]) body .platform-section .architecture .architecture-grid > div,
html:not([data-theme="dark"]) body .platform-section .architecture .architecture-grid > div b,
html:not([data-theme="dark"]) body .platform-section .architecture .architecture-grid > div small,
html:not([data-theme="dark"]) body .platform-section .architecture .architecture-grid > div * {
    color: #FFFFFF !important;
}

/* Gece modu: beş kutunun tamamı açık yazı */
html[data-theme="dark"] body .platform-section .architecture .architecture-main,
html[data-theme="dark"] body .platform-section .architecture .architecture-main *,
html[data-theme="dark"] body .platform-section .architecture .architecture-grid > div,
html[data-theme="dark"] body .platform-section .architecture .architecture-grid > div * {
    color: #F4F7FF !important;
}


/* NOVIFORM FINAL ARCHITECTURE CONTRAST */
html:not([data-theme="dark"]) .platform-section .architecture .architecture-main,
html:not([data-theme="dark"]) .platform-section .architecture .architecture-main *,
html:not([data-theme="dark"]) .platform-section .architecture .architecture-main strong,
html:not([data-theme="dark"]) .platform-section .architecture .architecture-main small,
html:not([data-theme="dark"]) .platform-section .architecture .architecture-main span {
  color: #17243A !important;
}

html:not([data-theme="dark"]) .platform-section .architecture .architecture-grid > div,
html:not([data-theme="dark"]) .platform-section .architecture .architecture-grid > div *,
html:not([data-theme="dark"]) .platform-section .architecture .architecture-grid > div b,
html:not([data-theme="dark"]) .platform-section .architecture .architecture-grid > div small {
  color: #FFFFFF !important;
}

html[data-theme="dark"] .platform-section .architecture .architecture-main,
html[data-theme="dark"] .platform-section .architecture .architecture-main *,
html[data-theme="dark"] .platform-section .architecture .architecture-grid > div,
html[data-theme="dark"] .platform-section .architecture .architecture-grid > div * {
  color: #F4F7FF !important;
}
/* END NOVIFORM FINAL ARCHITECTURE CONTRAST */


/* NOVIFORM DESIGN SYSTEM TOKENS */
:root {
  color-scheme: dark;
  --nv-bg: #0B1020;
  --nv-surface: #111A2E;
  --nv-surface-elevated: #18243B;
  --nv-surface-hover: #202F4B;
  --nv-primary: #6C7CFF;
  --nv-primary-hover: #8793FF;
  --nv-secondary: #20C9A6;
  --nv-accent: #38BDF8;
  --nv-text: #F4F7FF;
  --nv-text-secondary: #A6B2CC;
  --nv-border: #263653;
  --nv-success: #22C55E;
  --nv-warning: #F59E0B;
  --nv-danger: #EF4444;
  --nv-font: Inter, "Segoe UI", sans-serif;
  --nv-radius-sm: 8px;
  --nv-radius-md: 12px;
  --nv-radius-lg: 18px;
  --nv-radius-panel: 22px;
  --nv-shadow: 0 12px 40px rgba(0, 0, 0, .22);
}

[data-theme="light"] {
  color-scheme: light;
  --nv-bg: #F4F7FC;
  --nv-surface: #FFFFFF;
  --nv-surface-elevated: #FFFFFF;
  --nv-surface-hover: #EAF0FA;
  --nv-primary: #5265E8;
  --nv-primary-hover: #4053D5;
  --nv-secondary: #079B7C;
  --nv-accent: #0284C7;
  --nv-text: #172033;
  --nv-text-secondary: #66738B;
  --nv-border: #DCE4F0;
  --nv-success: #16A34A;
  --nv-warning: #D97706;
  --nv-danger: #DC2626;
  --nv-shadow: 0 12px 40px rgba(20, 35, 65, .08);
}

html, body {
  font-family: var(--nv-font);
  background: var(--nv-bg);
  color: var(--nv-text);
}

.nv-card {
  background: var(--nv-surface);
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-radius-lg);
  box-shadow: var(--nv-shadow);
}

.nv-button-primary {
  background: var(--nv-primary);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--nv-radius-md);
  font-weight: 600;
  transition: background .18s ease, transform .18s ease;
}

.nv-button-primary:hover {
  background: var(--nv-primary-hover);
  transform: translateY(-1px);
}

.nv-input {
  background: var(--nv-surface-elevated);
  color: var(--nv-text);
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-radius-md);
}

.nv-input:focus {
  outline: 2px solid var(--nv-primary);
  outline-offset: 2px;
}

.nv-muted {
  color: var(--nv-text-secondary);
}

/* NOVIFORM PRODUCT CATALOG — FIXED 3x3 GRID */
.product-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  padding: 12px 0 20px !important;
  scroll-snap-type: none !important;
}
.product-card {
  min-width: 0 !important;
  width: auto !important;
  flex: initial !important;
  scroll-snap-align: none !important;
}
.product-card .status {
  display: none !important;
}
@media (max-width: 800px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 560px) {
  .product-grid {
    grid-template-columns: 1fr !important;
  }
}
CSS
echo "=== GRID KONTROL ==="; grep -n -A25 "NOVIFORM PRODUCT CATALOG" "$ROOT/style.css"; echo "=== URUN SAYISI ==="; grep -c "<article class=\"product-card" "$ROOT/index.html"; echo "=== ETIKET KONTROL ==="; grep -c "class=\"status" "$ROOT/index.html"