/* ========== Solutionary — Liquid Glass Design System ========== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Barlow:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700;800;900&display=swap');

/* ---------- Kanit (Jack-style sections) ---------- */
.font-kanit { font-family: 'Kanit', sans-serif; }

.hero-heading {
  background: linear-gradient(180deg, #646973 0%, #BBCCD7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

:root {
  --bg: #050507;
  --fg: #ffffff;
  --muted: rgba(255, 255, 255, 0.6);
  --muted-2: rgba(255, 255, 255, 0.4);
  --hairline: rgba(255, 255, 255, 0.1);
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.18);
  --radius: 9999px;

  /* atmospheric tint used in section backdrops, inspired by the spec's blue */
  --atmos-1: 213 45% 67%;
  --atmos-2: 213 60% 28%;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Barlow', system-ui, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow-x: hidden; }

.font-heading { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }
.font-body    { font-family: 'Barlow', sans-serif; }

/* ---------- LIQUID GLASS ---------- */

.liquid-glass {
  background: rgba(255, 255, 255, 0.02);
  background-blend-mode: luminosity;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.12) 22%,
    rgba(255, 255, 255, 0) 45%,
    rgba(255, 255, 255, 0) 55%,
    rgba(255, 255, 255, 0.12) 78%,
    rgba(255, 255, 255, 0.45) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.liquid-glass-strong {
  background: rgba(255, 255, 255, 0.03);
  background-blend-mode: luminosity;
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  border: none;
  box-shadow:
    4px 4px 18px rgba(0, 0, 0, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.18);
  position: relative;
  overflow: hidden;
}
.liquid-glass-strong::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.18) 22%,
    rgba(255, 255, 255, 0) 45%,
    rgba(255, 255, 255, 0) 55%,
    rgba(255, 255, 255, 0.18) 78%,
    rgba(255, 255, 255, 0.55) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* ---------- Cinematic backdrops (placeholder for video) ---------- */

.cinematic {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.cinematic .layer {
  position: absolute;
  inset: -10%;
  filter: blur(60px);
  opacity: 0.85;
  mix-blend-mode: screen;
}
.cinematic .l1 {
  background: radial-gradient(ellipse at 20% 30%, hsl(var(--atmos-1) / 0.55), transparent 60%);
  animation: drift1 24s ease-in-out infinite alternate;
}
.cinematic .l2 {
  background: radial-gradient(ellipse at 80% 60%, hsl(218 80% 55% / 0.5), transparent 60%);
  animation: drift2 30s ease-in-out infinite alternate;
}
.cinematic .l3 {
  background: radial-gradient(ellipse at 50% 90%, hsl(208 70% 50% / 0.35), transparent 65%);
  animation: drift3 36s ease-in-out infinite alternate;
}
.cinematic .grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.35;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.cinematic.desat { filter: saturate(0.15) brightness(0.85); }

@keyframes drift1 { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.1); } }
@keyframes drift2 { from { transform: translate3d(2%, 3%, 0) scale(1.05); } to { transform: translate3d(-4%, -2%, 0) scale(1); } }
@keyframes drift3 { from { transform: translate3d(0%, 2%, 0) scale(1); } to { transform: translate3d(3%, -3%, 0) scale(1.08); } }

.fade-top {
  position: absolute; left: 0; right: 0; top: 0; height: 200px;
  background: linear-gradient(to bottom, #050507, transparent);
  pointer-events: none; z-index: 1;
}
.fade-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; height: 200px;
  background: linear-gradient(to top, #050507, transparent);
  pointer-events: none; z-index: 1;
}
.fade-bottom-hero {
  position: absolute; left: 0; right: 0; bottom: 0; height: 300px;
  background: linear-gradient(to top, #050507, transparent);
  pointer-events: none; z-index: 1;
}

/* selection */
::selection { background: rgba(255,255,255,0.18); color: #fff; }

/* hairline */
.hairline { border-color: var(--hairline); }

/* tracking helper for hero heading */
.tracking-tightest { letter-spacing: -0.04em; }

/* slim scroll appearance + offset for fixed navbar */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

/* hover affordance for nav pill */
.nav-link {
  transition: color .2s ease, background-color .2s ease;
  border-radius: 9999px;
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,0.06); }

/* details/summary FAQ chrome */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-plus { transform: rotate(45deg); }
.faq-plus { transition: transform .25s ease; }

/* placeholder media block (where the gif/video would live) */
.media-frame {
  position: relative;
  background:
    linear-gradient(135deg, rgba(120,160,220,0.18), rgba(40,60,100,0.18)),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 14px);
  overflow: hidden;
}
.media-frame::after {
  content: attr(data-label);
  position: absolute;
  top: 12px; left: 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* moving sheen on media */
.media-frame .sheen {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.12) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: sheen 6s ease-in-out infinite;
}
@keyframes sheen { 0% { transform: translateX(-100%); } 60% { transform: translateX(120%); } 100% { transform: translateX(120%); } }

/* tiny dot */
.dot { width: 6px; height: 6px; border-radius: 9999px; display: inline-block; }

/* check / x marks for compare */
.mark-pos { color: #b8d8ff; }
.mark-neg { color: rgba(255,255,255,0.35); }

/* process step number */
.step-num {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 56px;
  line-height: 1;
  background: linear-gradient(180deg, #fff, rgba(255,255,255,0.35));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ---------- Brand hero backdrop ---------- */

@media (max-width: 768px) {
  .step-num { font-size: 44px; }
}

.brand-orb {
  position: absolute;
  width: 1200px; height: 1200px;
  left: 50%; top: 30%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(120,170,240,0.45) 0%, rgba(80,130,220,0.18) 30%, transparent 60%);
  filter: blur(60px);
  animation: orb-pulse 14s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}
.brand-orb-2 {
  position: absolute;
  width: 700px; height: 700px;
  right: -10%; bottom: -20%;
  background: radial-gradient(circle, rgba(180,210,255,0.35) 0%, transparent 65%);
  filter: blur(80px);
  animation: orb-pulse 18s ease-in-out infinite alternate-reverse;
  mix-blend-mode: screen;
}
@keyframes orb-pulse {
  from { transform: translate(-50%, -50%) scale(0.95); opacity: 0.85; }
  to   { transform: translate(-48%, -52%) scale(1.08); opacity: 1; }
}

.ribbon { stroke-dasharray: 1200; stroke-dashoffset: 0; animation: ribbon-flow 22s linear infinite; }
.ribbon.r2 { animation-duration: 28s; animation-delay: -4s; }
.ribbon.r3 { animation-duration: 34s; animation-delay: -10s; }
.ribbon.r4 { animation-duration: 40s; animation-delay: -16s; }
@keyframes ribbon-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -2400; }
}

.brand-particles { position: absolute; inset: 0; pointer-events: none; }
.brand-particles .particle {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 0 8px rgba(180,210,255,0.7);
  animation: particle-float 12s ease-in-out infinite;
}
@keyframes particle-float {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate3d(20px, -120px, 0); opacity: 0; }
}
@media (max-width: 768px) {
  .step-num { font-size: 44px; }
}