/* =========================================================
   SKALIOR — CUSTOM CSS
   Works with the HTML structure supplied by the user.
   Tailwind handles the basic layout; this file handles
   the visual system, glass effects, 3D-style graphics,
   reveals and responsive behavior.
   ========================================================= */

:root {
  --ink: #000710;
  --panel: #07111f;
  --panel-2: #0b1018;
  --blue: #0055f1;
  --violet: #7c3aed;
  --white: #f5f7fa;
  --muted: #8c96a8;
  --line: rgba(255,255,255,.10);
  --blue-glow: rgba(0,85,241,.35);
  --violet-glow: rgba(124,58,237,.30);
}

html { scroll-behavior: auto; }

body {
  background:
    radial-gradient(circle at 75% 10%, rgba(0,85,241,.10), transparent 28rem),
    radial-gradient(circle at 20% 35%, rgba(124,58,237,.08), transparent 26rem),
    var(--ink);
  overflow-x: hidden;
}

::selection {
  background: rgba(0,85,241,.65);
  color: #fff;
}

.site-noise {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.hero-grid {
  opacity: .35;
  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: 55px 55px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 75%);
}

.gradient-text {
  background: linear-gradient(110deg, #fff 0%, #65a5ff 38%, #a78bfa 78%, #fff 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientShift 7s ease-in-out infinite;
}

@keyframes gradientShift {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.eyebrow {
  color: #7896c8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .24em;
}

.section-title {
  font-size: clamp(2.4rem, 5vw, 5rem);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 800;
}

.nav-link {
  position: relative;
  transition: color .25s ease;
}
.nav-link:hover { color: white; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -7px;
  height: 1px;
  background: linear-gradient(90deg,var(--blue),var(--violet));
  transition: right .3s ease;
}
.nav-link:hover::after { right: 0; }

.brand-mark {
  color: white;
  text-shadow: 0 0 25px rgba(0,85,241,.35);
}

.pill-button,
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  border-radius: 999px;
  padding: .95rem 1.25rem;
  font-size: .78rem;
  font-weight: 700;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pill-button {
  color: white;
  background: linear-gradient(135deg,#0055f1,#4f46e5);
  box-shadow: 0 10px 40px rgba(0,85,241,.25);
}
.pill-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 55px rgba(0,85,241,.38);
}
.pill-button-sm { padding: .65rem 1rem; }
.ghost-button {
  color: #c8d0dc;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.025);
}
.ghost-button:hover {
  transform: translateY(-3px);
  border-color: rgba(120,160,255,.4);
}
.section-pad { padding-top: 8rem; padding-bottom: 8rem; }

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Hero core */
.core-wrap {
  position: relative;
  width: min(34rem, 82vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 60px rgba(0,85,241,.18));
  transform-style: preserve-3d;
}
.core-sphere {
  position: relative;
  width: 35%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, #ffffff 0 2%, #7db2ff 5%, #245ee8 28%, #111a78 55%, #060916 75%);
  box-shadow:
    inset -20px -22px 45px rgba(0,0,0,.65),
    inset 12px 12px 30px rgba(255,255,255,.3),
    0 0 35px rgba(0,85,241,.6),
    0 0 100px rgba(124,58,237,.25);
  z-index: 3;
}
.core-sphere::before {
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  border: 1px solid rgba(115,170,255,.35);
  box-shadow: 0 0 35px rgba(0,85,241,.25);
}
.core-inner {
  font-size: clamp(.45rem,1vw,.7rem);
  font-weight: 800;
  letter-spacing: .25em;
  transform: translateX(.12em);
  color: white;
}

.core-orbit {
  position: absolute;
  width: 78%;
  height: 30%;
  border: 1px solid rgba(93,145,255,.35);
  border-radius: 50%;
  box-shadow: 0 0 25px rgba(0,85,241,.08);
}
.orbit-a { transform: rotateX(68deg) rotateZ(15deg); }
.orbit-b { transform: rotateX(68deg) rotateZ(-48deg); border-color: rgba(167,139,250,.28); }
.orbit-c { transform: rotateX(68deg) rotateZ(78deg); border-color: rgba(255,255,255,.16); }

.orbit-label {
  position: absolute;
  z-index: 5;
  padding: .38rem .55rem;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(3,8,18,.72);
  backdrop-filter: blur(12px);
  border-radius: 999px;
  font-size: 8px;
  letter-spacing: .16em;
  color: #aab7ca;
  box-shadow: 0 0 25px rgba(0,0,0,.25);
}
.label-ads { top: 13%; left: 12%; }
.label-ai { top: 25%; right: 7%; }
.label-funnel { bottom: 19%; right: 7%; }
.label-auto { bottom: 8%; left: 21%; }
.label-data { top: 52%; left: 2%; }

/* Journey tunnel */
.journey-tunnel {
  background:
    radial-gradient(ellipse at center, rgba(0,85,241,.18), transparent 35%),
    repeating-radial-gradient(ellipse at center, rgba(90,140,255,.13) 0 1px, transparent 1px 52px);
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 72%);
  transform: perspective(700px) rotateX(55deg) scale(1.5);
  animation: tunnelPulse 8s ease-in-out infinite;
}
@keyframes tunnelPulse {
  0%,100% { transform: perspective(700px) rotateX(55deg) scale(1.35); opacity:.65; }
  50% { transform: perspective(700px) rotateX(55deg) scale(1.65); opacity:1; }
}

/* Cards */
.glass-card,
.detail-panel,
.ai-feature,
.final-cta,
.case-card {
  border: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    rgba(4,10,20,.7);
  box-shadow: 0 25px 80px rgba(0,0,0,.18);
  backdrop-filter: blur(18px);
}

.glass-card {
  border-radius: 1.4rem;
  padding: 1.5rem;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease;
}
.glass-card:hover {
  transform: translateY(-8px);
  border-color: rgba(90,145,255,.3);
  box-shadow: 0 30px 90px rgba(0,50,160,.12);
}
.service-card h3,
.mini-card h3 { margin-top: 1rem; font-size: 1.35rem; font-weight: 700; }
.service-card > p:not(.service-number),
.mini-card p { color: var(--muted); font-size: .88rem; line-height: 1.7; }
.service-card ul { margin-top: 1.25rem; display:grid; gap:.45rem; color:#9ba8bb; font-size:.75rem; }
.service-card li::before { content:"→"; color:#6799ff; margin-right:.5rem; }
.service-number { color:#4f79bc; font-size:.65rem; letter-spacing:.18em; font-weight:700; }

.service-visual {
  position:relative;
  height:170px;
  overflow:hidden;
  border-radius:1rem;
  border:1px solid rgba(255,255,255,.06);
  background:#030814;
}
.ads-visual { display:grid; place-items:center; }
.ads-visual span,
.ai-visual span { font-size:2.2rem; font-weight:900; letter-spacing:.15em; color:#dce8ff; text-shadow:0 0 35px #2d75ff; }
.ads-visual i {
  position:absolute; width:65%; height:1px; background:linear-gradient(90deg,transparent,#2f79ff,transparent);
  animation: scan 3s linear infinite;
}
.ads-visual i:nth-child(2){transform:rotate(35deg);animation-delay:-1s}
.ads-visual i:nth-child(3){transform:rotate(-35deg);animation-delay:-2s}
@keyframes scan { from{translate:-50% 0} to{translate:50% 0} }

.funnel-visual { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem; }
.funnel-visual b {
  padding:.35rem .8rem; border-radius:999px; font-size:.5rem; letter-spacing:.14em;
  border:1px solid rgba(100,150,255,.22); background:rgba(0,85,241,.08);
}
.funnel-visual b:nth-child(2){width:62%;text-align:center}
.funnel-visual b:nth-child(3){width:47%;text-align:center}
.funnel-visual b:nth-child(4){width:34%;text-align:center;background:rgba(124,58,237,.12)}

.ai-visual { display:grid; place-items:center; }
.ai-visual i {
  position:absolute; width:8px; height:8px; border-radius:50%; background:#6ea2ff;
  box-shadow:0 0 20px #0055f1; animation: floatNode 3s ease-in-out infinite;
}
.ai-visual i:nth-child(2){top:25%;left:20%}
.ai-visual i:nth-child(3){top:25%;right:20%;animation-delay:.6s}
.ai-visual i:nth-child(4){bottom:22%;left:28%;animation-delay:1.2s}
.ai-visual i:nth-child(5){bottom:22%;right:28%;animation-delay:1.8s}
@keyframes floatNode { 50%{transform:translateY(-10px) scale(1.3)} }

.data-visual { display:flex; align-items:flex-end; justify-content:center; gap:10px; padding:25px; }
.data-visual div { width:14%; border-radius:8px 8px 2px 2px; background:linear-gradient(to top,#1549bb,#76a8ff); box-shadow:0 0 20px rgba(0,85,241,.2); }
.data-visual div:nth-child(1){height:35%}
.data-visual div:nth-child(2){height:55%}
.data-visual div:nth-child(3){height:78%}
.data-visual strong { position:absolute; top:20px; right:20px; color:#9cc0ff; font-size:1.5rem; }

/* Detail panels */
.detail-panel {
  min-height: 460px;
  border-radius: 1.7rem;
  padding: clamp(1.5rem,4vw,4rem);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:center;
  overflow:hidden;
}
.detail-panel > div:first-child { max-width: 580px; }
.detail-panel h2 { margin-top:1rem; font-size:clamp(2.5rem,5vw,4.8rem); line-height:.98; letter-spacing:-.05em; font-weight:800; }
.detail-panel p:not(.eyebrow) { margin-top:1.5rem; color:var(--muted); line-height:1.8; max-width:34rem; }
.detail-reverse > div:first-child { order:2; }
.detail-reverse > div:last-child { order:1; }

.tag-row { margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:.5rem; }
.tag-row span { padding:.45rem .65rem; border:1px solid rgba(255,255,255,.09); border-radius:999px; color:#aab5c7; font-size:.65rem; background:rgba(255,255,255,.025); }

.dashboard-mock,
.analytics-mock,
.big-funnel,
.ai-network {
  position:relative;
  min-height:300px;
  border-radius:1.25rem;
  border:1px solid rgba(255,255,255,.08);
  background:radial-gradient(circle at center,rgba(0,85,241,.12),transparent 60%),#030814;
  overflow:hidden;
}
.dashboard-mock { padding:1.3rem; }
.mock-top { display:flex; justify-content:space-between; font-size:.65rem; color:#8491a5; }
.mock-top b { color:#72f1b1; }
.chart-line {
  height:180px; margin-top:1.5rem;
  background:
    linear-gradient(155deg,transparent 47%,rgba(87,145,255,.8) 48% 49%,transparent 50%),
    linear-gradient(180deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:100% 100%,100% 36px;
  filter:drop-shadow(0 0 12px rgba(0,85,241,.4));
}
.mock-metrics { display:flex; gap:1rem; flex-wrap:wrap; color:#738197; font-size:.7rem; }
.mock-metrics b { color:#d9e6ff; font-size:1rem; margin-right:.2rem; }

.big-funnel { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:.35rem; }
.big-funnel span { padding:.75rem 1rem; border:1px solid rgba(98,150,255,.2); border-radius:999px; font-size:.6rem; letter-spacing:.2em; color:#b7c7df; }
.big-funnel span:nth-child(2){width:72%;text-align:center}
.big-funnel span:nth-child(3){width:52%;text-align:center}
.big-funnel span:nth-child(4){width:35%;text-align:center;background:rgba(0,85,241,.12)}

.ai-network { min-height:300px; }
.ai-node { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.core-node {
  width:80px;height:80px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#9ec7ff,#1745c8 48%,#090c35);
  box-shadow:0 0 45px rgba(0,85,241,.55);
  font-weight:900; z-index:3;
}
.net-node {
  position:absolute; padding:.45rem .6rem; border-radius:999px; border:1px solid rgba(255,255,255,.1);
  color:#aebbd0; font-size:.55rem; letter-spacing:.12em; background:rgba(2,7,16,.8);
}
.n1{left:14%;top:20%}.n2{right:13%;top:24%}.n3{left:10%;bottom:22%}.n4{right:12%;bottom:18%}
.ai-network::before,
.ai-network::after {
  content:"";position:absolute;left:25%;right:25%;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,#4c8cff,transparent);
  transform:rotate(28deg);opacity:.65;
}
.ai-network::after { transform:rotate(-28deg); }

/* Journey */
.journey-flow { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.journey-stage { flex:1; min-width:110px; padding:1.2rem; border:1px solid rgba(255,255,255,.08); border-radius:1rem; background:rgba(255,255,255,.025); }
.journey-stage span { color:#5577ac; font-size:.6rem; }
.journey-stage strong { display:block; margin-top:.6rem; font-size:1rem; }
.journey-stage small { color:#69778d; }
.journey-arrow { color:#4269a9; }

/* Process */
.process-row {
  display:grid; grid-template-columns:45px 1fr 30px; align-items:center; gap:1rem;
  padding:1.25rem 0; border-bottom:1px solid rgba(255,255,255,.08);
  transition:padding .3s ease, border-color .3s ease;
}
.process-row:hover { padding-left:.5rem; border-color:rgba(75,130,255,.4); }
.process-row > span { color:#5674a4; font-size:.7rem; }
.process-row h3 { font-size:1.1rem; font-weight:700; }
.process-row p { margin-top:.25rem; color:#78859a; font-size:.82rem; }
.process-row b { color:#638bd0; }

/* Cases */
.case-card { border-radius:1.5rem; padding:1rem; transition:transform .4s ease,border-color .3s ease; }
.case-card:hover { transform:translateY(-7px); border-color:rgba(90,145,255,.28); }
.case-screen { min-height:300px; border-radius:1rem; padding:1.4rem; background:radial-gradient(circle at 50% 30%,rgba(0,85,241,.25),transparent 45%),#030814; border:1px solid rgba(255,255,255,.06); display:grid; align-content:center; gap:.1rem; }
.case-screen.small { min-height:240px; }
.case-screen p { color:#7083a1; font-size:.6rem; letter-spacing:.18em; }
.case-screen strong { font-size:3rem; line-height:.95; letter-spacing:-.06em; color:#dce8ff; }
.case-screen span { color:#6c7d98; font-size:.55rem; letter-spacing:.18em; margin-bottom:.8rem; }
.case-card h3 { margin:1.1rem .4rem .35rem; font-weight:700; }
.case-card > p { margin:0 .4rem 1rem; color:#7e8a9d; font-size:.8rem; line-height:1.6; }

/* AI feature / final */
.ai-feature,
.final-cta { border-radius:1.7rem; padding:clamp(1.5rem,5vw,4rem); display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; }
.final-core { min-height:320px; display:grid; place-items:center; position:relative; }
.final-core .core-sphere { width:170px; }
.final-core span { position:absolute; font-size:.55rem; letter-spacing:.2em; color:#6f84a5; }
.final-core span:nth-of-type(1){top:20%;left:12%}.final-core span:nth-of-type(2){top:12%;right:14%}.final-core span:nth-of-type(3){bottom:18%;left:18%}.final-core span:nth-of-type(4){bottom:10%;right:13%}

/* Particles */
#particle-field { overflow:hidden; }
.particle {
  position:absolute;
  width:2px;height:2px;border-radius:50%;
  background:#79a9ff; box-shadow:0 0 10px #0055f1;
  opacity:.45;
}

/* Mobile */
@media (max-width: 900px) {
  .detail-panel,
  .ai-feature,
  .final-cta { grid-template-columns:1fr; }
  .detail-reverse > div:first-child,
  .detail-reverse > div:last-child { order:initial; }
  .journey-flow { overflow-x:auto; justify-content:flex-start; padding-bottom:1rem; }
  .journey-arrow { flex:0 0 auto; }
  .journey-stage { flex:0 0 145px; }
}

@media (max-width: 640px) {
  .section-pad { padding-top:5rem; padding-bottom:5rem; }
  .core-wrap { width:90vw; }
  .detail-panel { min-height:auto; }
  .detail-panel h2 { font-size:2.7rem; }
  .dashboard-mock,.analytics-mock,.big-funnel,.ai-network { min-height:250px; }
}

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