/* ============================================================
   clawbox.css
   Styles for: clawbox-private-ai-assistant.html
   Veloryn — AI ClawBox product page
   ============================================================ */


/* ------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------ */

:root {
  --color-midnight-navy:   #131625;
  --color-deep-navy:       #0A1224;
  --color-veloryn-blue:    #1E5FFF;
  --color-sky-blue:        #4AA3FF;
  --color-aqua-glow:       #2EE6D6;
  --color-aurora-violet:   #5B4BFF;
  --color-surface:         #171C2F;
  --color-border-subtle:   rgba(255, 255, 255, 0.07);
  --color-hero-text:       #F5F7FF;
  --color-hero-subtext:    #AEB6D3;

  --font-display: 'Inter', sans-serif;
  --font-sora: 'Sora', sans-serif;

  --nav-height: 64px;
  --radius-btn: 5px;
  --transition-base: 200ms ease;
}


/* ------------------------------------------------------------
   2. GLOBAL RESETS / BASE
   ------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-deep-navy);
  color: var(--color-hero-text);
  font-family: var(--font-display);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ------------------------------------------------------------
   3. UTILITY
   ------------------------------------------------------------ */

.border-subtle {
  border-color: var(--color-border-subtle);
}


/* ------------------------------------------------------------
   4. NAVIGATION
   ------------------------------------------------------------ */

.nav-link {
  color: var(--color-hero-subtext);
  transition: color var(--transition-base);
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-hero-text);
}

.hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-hero-subtext);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.btn-get-started {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 1.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-hero-text);
  background-color: var(--color-veloryn-blue);
  border-radius: var(--radius-btn);
  transition: background-color var(--transition-base), box-shadow var(--transition-base);
  text-decoration: none;
}

.btn-get-started:hover {
  background-color: #3a72ff;
  box-shadow: 0 0 16px rgba(30, 95, 255, 0.35);
}


/* ------------------------------------------------------------
   5. HERO
   ------------------------------------------------------------ */

.clawbox-hero {
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  background-color: var(--color-midnight-navy);
  display: flex;
  align-items: flex-start;
}

.hero-bg-picture {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  display: block;
}

@media (max-width: 639px) {
  .hero-bg-img {
    object-position: 79% center;
  }
}

.hero-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    105deg,
    rgba(10, 18, 36, 0.82) 0%,
    rgba(10, 18, 36, 0.65) 45%,
    rgba(10, 18, 36, 0.30) 100%
  );
}

.hero-padding {
  padding-top: 5rem;
  padding-bottom: 6rem;
}

@media (min-width: 640px) {
  .hero-padding {
    padding-top: 6rem;
    padding-bottom: 8rem;
  }
}

.clawbox-hero .hero-rule {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-aqua-glow) 40%,
    var(--color-veloryn-blue) 60%,
    transparent 100%
  );
  opacity: 0.35;
}


/* ------------------------------------------------------------
   6. ENTRY ANIMATIONS
   ------------------------------------------------------------ */

.fade-up {
  opacity: 0;
  transform: translateY(28px);
  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fade-up-1 { animation-delay: 0.05s; }
.fade-up-2 { animation-delay: 0.18s; }
.fade-up-3 { animation-delay: 0.32s; }

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fade-up {
    animation: none;
    opacity: 1;
    transform: none;
  }
}


/* ------------------------------------------------------------
   7. BUTTONS
   ------------------------------------------------------------ */

.btn-radius {
  border-radius: var(--radius-btn);
  text-decoration: none;
  transition:
    background-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.btn-radius:hover {
  background-color: #3a72ff !important;
  box-shadow: 0 0 24px rgba(30, 95, 255, 0.40);
  transform: translateY(-1px);
}

.btn-radius:active {
  transform: translateY(0);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  min-width: 180px;
  padding: 0 2rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-hero-text);
  border: 1.5px solid rgba(57, 65, 86, 0.9);
  border-radius: var(--radius-btn);
  background: transparent;
  text-decoration: none;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.btn-outline:hover {
  border-color: var(--color-sky-blue);
  box-shadow: 0 0 16px rgba(74, 163, 255, 0.18);
  transform: translateY(-1px);
}


/* ------------------------------------------------------------
   8. SCROLL REVEAL
   ------------------------------------------------------------ */

.scroll-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ------------------------------------------------------------
   9. BODY SECTIONS
   ------------------------------------------------------------ */

.clawbox-overview-section,
.clawbox-config-section,
.clawbox-bestfit-section,
.clawbox-usecases-section {
  background-color: var(--color-deep-navy);
}

.clawbox-content-section + .clawbox-content-section {
  margin-top: 4rem;
}


/* ------------------------------------------------------------
   9.1 SECTION 1: OVERVIEW
   ------------------------------------------------------------ */

.clawbox-overview-card {
  background-color: var(--color-surface);
  border-color: #26304A;
}

.clawbox-overview-glow {
  position: absolute;
  top: -10rem;
  right: -10rem;
  width: 24rem;
  height: 24rem;
  border-radius: 9999px;
  background: rgba(74, 163, 255, 0.10);
  filter: blur(100px);
  pointer-events: none;
}

.clawbox-overview-callout {
  background-color: rgba(28, 35, 64, 0.50);
  border-color: #26304A;
}

.clawbox-overview-callout-rule {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: var(--color-veloryn-blue);
}

.clawbox-overview-visual-panel {
  background-color: var(--color-deep-navy);
  border-color: rgba(38, 48, 74, 0.50);
}

.clawbox-overview-visual-img {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: inherit;
}

.clawbox-overview-grid {
  position: absolute;
  inset: 0;
  opacity: 0.20;
  background-image:
    linear-gradient(#26304A 1px, transparent 1px),
    linear-gradient(90deg, #26304A 1px, transparent 1px);
  background-size: 20px 20px;
}


/* ------------------------------------------------------------
   9.2 SECTION 2: CONFIGURATIONS
   ------------------------------------------------------------ */

.clawbox-config-card {
  position: relative;
  overflow: hidden;
  background: rgba(28, 31, 46, 0.60);
  border: 1px solid rgba(67, 70, 86, 0.85);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.10);
  backdrop-filter: blur(12px);
  transition:
    border-color var(--transition-base),
    background-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.clawbox-config-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(46, 230, 214, 0.30);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.75;
  transition: opacity var(--transition-base), border-color var(--transition-base);
}

.clawbox-config-card:hover {
  border-color: rgba(46, 230, 214, 0.58);
  background-color: rgba(28, 31, 46, 0.72);
  box-shadow: 0 0 28px rgba(46, 230, 214, 0.08);
  transform: translateY(-1px);
}

.clawbox-config-card:hover::before {
  opacity: 1;
  border-color: rgba(46, 230, 214, 0.80);
}

.clawbox-config-icon {
  flex-shrink: 0;
  background-color: rgba(38, 41, 57, 0.90);
  border-color: rgba(67, 70, 86, 0.95);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.clawbox-config-card:hover .clawbox-config-icon {
  border-color: rgba(46, 230, 214, 0.75);
  box-shadow: 0 0 18px rgba(46, 230, 214, 0.12);
}

.clawbox-config-check {
  margin-top: 0.125rem;
  color: var(--color-aqua-glow);
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

.clawbox-config-note {
  background: rgba(10, 13, 28, 0.50);
  border-color: rgba(67, 70, 86, 0.55);
  backdrop-filter: blur(10px);
}

@media (max-width: 767px) {
  .clawbox-config-note {
    display: flex;
    width: 100%;
  }
}


/* ------------------------------------------------------------
   9.3 SECTION 3: BEST FIT
   ------------------------------------------------------------ */

.clawbox-bestfit-card {
  background-color: rgba(24, 27, 42, 0.88);
  border: 1px solid rgba(67, 70, 86, 0.55);
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.clawbox-bestfit-card:hover {
  background-color: rgba(38, 41, 57, 0.82);
  border-color: rgba(46, 230, 214, 0.35);
  box-shadow: 0 0 28px rgba(46, 230, 214, 0.08);
  transform: translateY(-1px);
}

.clawbox-bestfit-icon-wrap {
  width: 28px;
  height: 28px;
}

.clawbox-bestfit-icon {
  position: relative;
  z-index: 2;
  color: var(--color-aqua-glow);
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
}

.clawbox-bestfit-icon-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 9999px;
  background-color: var(--color-aqua-glow);
  opacity: 0.20;
  filter: blur(8px);
  transform: scale(1.5);
  transition: opacity var(--transition-base);
}

.clawbox-bestfit-card:hover .clawbox-bestfit-icon-glow {
  opacity: 0.40;
}


/* ------------------------------------------------------------
   9.4 SECTION 4: USE CASES
   ------------------------------------------------------------ */

.clawbox-usecases-section {
  min-height: 820px;
  background-color: var(--color-deep-navy);
  border-top: 1px solid rgba(38, 48, 74, 0.80);
  border-bottom: 1px solid rgba(38, 48, 74, 0.80);
}

.clawbox-usecases-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 24%, rgba(30, 95, 255, 0.16) 0%, rgba(30, 95, 255, 0.06) 24%, transparent 54%),
    radial-gradient(circle at 50% 82%, rgba(46, 230, 214, 0.15) 0%, rgba(30, 95, 255, 0.09) 32%, transparent 70%),
    linear-gradient(180deg, #0A1224 0%, #0A0D1C 100%);
}

.clawbox-usecases-horizon {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 614px;
  perspective: 1000px;
  pointer-events: none;
  overflow: hidden;
}

.clawbox-usecases-horizon::before,
.clawbox-usecases-horizon::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
}

.clawbox-usecases-horizon::before {
  opacity: 0.22;
  mix-blend-mode: screen;
  will-change: transform, opacity, filter;
  animation: clawboxWaveFloatA 18s ease-in-out infinite alternate, clawboxWaveShimmer 14s ease-in-out infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 760' fill='none'%3E%3Cg opacity='0.92' stroke='%232EE6D6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M-80 250C40 205 135 335 260 290C385 245 455 175 570 225C685 275 760 370 885 335C1010 300 1095 180 1215 230C1335 280 1410 410 1540 360C1625 327 1695 245 1760 220'/%3E%3Cpath d='M-60 320C40 355 130 250 245 280C360 310 465 420 590 392C715 364 760 280 880 305C1000 330 1090 430 1210 404C1330 378 1420 260 1540 286C1630 305 1705 380 1765 400' opacity='0.68'/%3E%3Cpath d='M-50 385C60 330 135 430 255 402C375 374 450 290 575 332C700 374 790 470 915 448C1040 426 1110 328 1230 354C1350 380 1435 474 1560 445C1645 425 1712 360 1770 340' opacity='0.48'/%3E%3C/g%3E%3C/svg%3E");
}

.clawbox-usecases-horizon::after {
  opacity: 0.14;
  filter: blur(1px);
  will-change: transform, opacity, filter;
  animation: clawboxWaveFloatB 22s ease-in-out infinite alternate, clawboxWaveShimmer 16s ease-in-out infinite reverse;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 760' fill='none'%3E%3Cg opacity='0.9' stroke='%231E5FFF' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M-90 280C20 360 130 245 245 275C360 305 435 390 555 360C675 330 760 225 875 255C990 285 1080 385 1205 352C1330 319 1420 205 1540 232C1640 255 1710 330 1768 355'/%3E%3Cpath d='M-70 355C40 302 128 395 248 365C368 335 455 240 578 274C701 308 778 410 900 385C1022 360 1102 265 1222 295C1342 325 1432 418 1560 390C1648 371 1715 310 1772 286' opacity='0.62'/%3E%3C/g%3E%3C/svg%3E");
}

.clawbox-usecases-plane {
  position: absolute;
  bottom: 0;
  left: -50%;
  width: 200%;
  height: 200%;
  transform: rotateX(75deg);
  transform-origin: bottom;
  will-change: transform, opacity;
  animation: clawboxPlaneDrift 20s ease-in-out infinite alternate;
  background: linear-gradient(to top, rgba(30, 95, 255, 0.20), rgba(46, 230, 214, 0.05), transparent);
}

.clawbox-usecases-grid {
  position: absolute;
  inset: 0;
  will-change: background-position, opacity;
  animation: clawboxGridDrift 24s linear infinite;
  background-image:
    linear-gradient(to right, rgba(30, 95, 255, 0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(30, 95, 255, 0.10) 1px, transparent 1px);
  background-size: 4rem 4rem;
}

.clawbox-usecases-glow-blue {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 150%;
  height: 400px;
  transform: translateX(-50%);
  border-radius: 100% 100% 0 0;
  background: rgba(30, 95, 255, 0.30);
  filter: blur(120px);
  opacity: 0.60;
  mix-blend-mode: screen;
  will-change: transform, opacity, filter;
  animation: clawboxGlowBluePulse 16s ease-in-out infinite alternate;
}

.clawbox-usecases-glow-aqua {
  position: absolute;
  bottom: -100px;
  left: 50%;
  width: 80%;
  height: 300px;
  transform: translateX(-50%);
  border-radius: 9999px;
  background: rgba(46, 230, 214, 0.34);
  filter: blur(100px);
  opacity: 0.70;
  mix-blend-mode: screen;
  will-change: transform, opacity, filter;
  animation: clawboxGlowAquaPulse 14s ease-in-out infinite alternate;
}

.clawbox-usecases-stage {
  z-index: 2;
}

.clawbox-usecases-nodes {
  min-height: 460px;
}

.clawbox-node {
  position: absolute;
  z-index: 3;
  cursor: default;
}

.clawbox-node-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  transition: transform 500ms ease;
}

.clawbox-node:hover .clawbox-node-inner {
  transform: translateY(-0.5rem) scale(1.06);
}

.clawbox-node-row {
  flex-direction: row;
  gap: 0.5rem;
}

.clawbox-node-dot-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clawbox-node-dot-wrap::before {
  content: '';
  position: absolute;
  border-radius: 9999px;
  filter: blur(10px);
  opacity: 0.75;
  animation: clawboxNodePulse 2.6s ease-in-out infinite;
}

.clawbox-node-dot {
  position: relative;
  z-index: 2;
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  background-color: var(--color-aqua-glow);
  border: 2px solid var(--color-deep-navy);
  box-shadow: 0 0 15px rgba(46, 230, 214, 0.85);
}

.clawbox-node-dot-aqua-lg::before {
  width: 3rem;
  height: 3rem;
  background: rgba(46, 230, 214, 0.20);
}

.clawbox-node-dot-aqua-lg .clawbox-node-dot {
  width: 1rem;
  height: 1rem;
}

.clawbox-node-dot-blue-xl::before {
  width: 4rem;
  height: 4rem;
  background: rgba(30, 95, 255, 0.30);
  animation-delay: 0.5s;
}

.clawbox-node-dot-blue-xl .clawbox-node-dot {
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--color-veloryn-blue);
  box-shadow: 0 0 20px rgba(30, 95, 255, 0.90);
}

.clawbox-node-dot-aqua-sm::before {
  width: 2rem;
  height: 2rem;
  background: rgba(46, 230, 214, 0.20);
}

.clawbox-node-dot-blue-sm::before {
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(30, 95, 255, 0.20);
}

.clawbox-node-dot-blue-sm .clawbox-node-dot {
  background-color: #B6C4FF;
  box-shadow: 0 0 12px rgba(182, 196, 255, 0.90);
}

.clawbox-node-dot-soft::before {
  width: 1.5rem;
  height: 1.5rem;
  background: rgba(210, 228, 255, 0.18);
}

.clawbox-node-dot-soft .clawbox-node-dot {
  width: 0.5rem;
  height: 0.5rem;
  background-color: #D2E4FF;
  box-shadow: 0 0 8px rgba(210, 228, 255, 0.80);
  border-width: 0;
}

.clawbox-node-dot-blue-xs::before {
  width: 1.25rem;
  height: 1.25rem;
  background: rgba(30, 95, 255, 0.18);
}

.clawbox-node-dot-blue-xs .clawbox-node-dot {
  width: 0.375rem;
  height: 0.375rem;
  background-color: var(--color-veloryn-blue);
  box-shadow: 0 0 5px rgba(30, 95, 255, 0.80);
  border-width: 0;
}

.clawbox-node-label {
  font-family: var(--font-display);
  color: var(--color-hero-text);
  text-align: center;
  white-space: nowrap;
}

.clawbox-node-label-card {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  background: rgba(28, 31, 46, 0.80);
  border: 1px solid rgba(67, 70, 86, 0.35);
  backdrop-filter: blur(12px);
  opacity: 0.84;
  transition: opacity var(--transition-base), border-color var(--transition-base), background-color var(--transition-base);
}

.clawbox-node:hover .clawbox-node-label-card {
  opacity: 1;
  border-color: rgba(46, 230, 214, 0.40);
  background: rgba(28, 31, 46, 0.92);
}

.clawbox-node-label-card span,
.clawbox-node-label-plain span {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}

.clawbox-node-label-mini span {
  display: block;
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(174, 182, 211, 0.75);
}

.clawbox-node-label-plain span {
  color: rgba(174, 182, 211, 0.88);
  transition: color var(--transition-base);
}

.clawbox-node:hover .clawbox-node-label-plain span {
  color: var(--color-aqua-glow);
}

.node-support { bottom: 12%; left: 5%; }
.node-lead-qualification { bottom: calc(14% - 5px); left: calc(35% - 10px); }
.node-appointment-booking { bottom: 12%; right: 6%; }
.node-email-summarisation { bottom: 31%; left: 11%; }
.node-daily-briefings { bottom: 33%; left: 40%; }
.node-hr-screening { bottom: 31%; right: 11%; }
.node-task-management { bottom: 51%; left: 4%; }
.node-learning-coach { bottom: 55%; left: 24%; }
.node-finance-assistant { bottom: 61%; left: 50%; transform: translateX(-50%); }
.node-study-mentor { bottom: 55%; right: 24%; }
.node-content-assistant { bottom: 51%; right: 4%; }
.node-reporting-automation { bottom: 72%; left: 40%; }

.clawbox-usecases-vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  box-shadow: inset 0 0 150px rgba(10, 13, 28, 0.90);
}

@keyframes clawboxNodePulse {
  0%, 100% { transform: scale(0.90); opacity: 0.55; }
  50% { transform: scale(1.10); opacity: 0.90; }
}

@keyframes clawboxWaveFloatA {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-0.6%, -0.5%, 0) scale(1.012); }
  100% { transform: translate3d(0.8%, 0.4%, 0) scale(1.018); }
}

@keyframes clawboxWaveFloatB {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0.7%, -0.4%, 0) scale(1.01); }
  100% { transform: translate3d(-0.8%, 0.5%, 0) scale(1.016); }
}

@keyframes clawboxWaveShimmer {
  0%, 100% { opacity: 0.12; filter: blur(1px) brightness(1); }
  50% { opacity: 0.19; filter: blur(1.4px) brightness(1.08); }
}

@keyframes clawboxPlaneDrift {
  0% { transform: rotateX(75deg) translate3d(0, 0, 0); opacity: 0.95; }
  50% { transform: rotateX(75deg) translate3d(-0.6%, 0.4%, 0); opacity: 1; }
  100% { transform: rotateX(75deg) translate3d(0.8%, -0.2%, 0); opacity: 0.96; }
}

@keyframes clawboxGridDrift {
  0% { background-position: 0 0, 0 0; opacity: 0.88; }
  50% { background-position: 0.6rem 0.9rem, 0 1.1rem; opacity: 1; }
  100% { background-position: 1.2rem 1.8rem, 0 2.2rem; opacity: 0.9; }
}

@keyframes clawboxGlowBluePulse {
  0% { transform: translateX(-50%) scale(1); opacity: 0.50; filter: blur(120px); }
  50% { transform: translateX(-50%) scale(1.03); opacity: 0.62; filter: blur(128px); }
  100% { transform: translateX(-50%) scale(1.05); opacity: 0.56; filter: blur(122px); }
}

@keyframes clawboxGlowAquaPulse {
  0% { transform: translateX(-50%) scale(1); opacity: 0.58; filter: blur(100px); }
  50% { transform: translateX(-50%) scale(1.04); opacity: 0.74; filter: blur(108px); }
  100% { transform: translateX(-50%) scale(1.02); opacity: 0.64; filter: blur(102px); }
}


@media (prefers-reduced-motion: reduce) {
  .clawbox-usecases-horizon::before,
  .clawbox-usecases-horizon::after,
  .clawbox-usecases-plane,
  .clawbox-usecases-grid,
  .clawbox-usecases-glow-blue,
  .clawbox-usecases-glow-aqua {
    animation: none !important;
  }
}




@media (max-width: 1023px) {
  .clawbox-usecases-section {
    min-height: auto;
  }

  .clawbox-usecases-stage {
    min-height: auto !important;
    padding-bottom: 3rem;
  }

  .clawbox-usecases-horizon {
    height: 100%;
    opacity: 0.65;
  }

  .clawbox-usecases-nodes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    min-height: auto;
    margin-top: 3rem;
  }

  .clawbox-usecases-nodes .clawbox-node {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    transform: none;
    opacity: 1;
  }

  .clawbox-node-inner,
  .clawbox-node-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 0.75rem;
    transform: none !important;
  }

  .clawbox-node-dot-wrap {
    flex: 0 0 2rem;
    width: 2rem;
    justify-content: center;
  }

  .clawbox-node-label,
  .clawbox-node-label-card,
  .clawbox-node-label-plain,
  .clawbox-node-label-mini,
  .clawbox-usecases-section .clawbox-node-label-card {
    width: 100%;
    max-width: none;
    min-width: 0;
    flex: 1 1 auto;
    padding: 0.75rem 1rem;
    text-align: left;
    border-radius: 8px;
    background: rgba(28, 31, 46, 0.72);
    border: 1px solid rgba(67, 70, 86, 0.35);
    backdrop-filter: blur(12px);
    white-space: normal;
  }

  .clawbox-node-label-card span,
  .clawbox-node-label-plain span,
  .clawbox-node-label-mini span {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--color-hero-text);
    text-transform: none;
    letter-spacing: 0;
  }

  .clawbox-usecases-section .clawbox-node-dot-wrap::before,
  .clawbox-usecases-section .clawbox-node-dot {
    animation-duration: 3.7s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }

  .node-support .clawbox-node-dot-wrap::before,
  .node-support .clawbox-node-dot { animation-name: clawboxMobileDotGlowA; animation-delay: 0.1s; }
  .node-lead-qualification .clawbox-node-dot-wrap::before,
  .node-lead-qualification .clawbox-node-dot { animation-name: clawboxMobileDotGlowB; animation-delay: 1.0s; }
  .node-appointment-booking .clawbox-node-dot-wrap::before,
  .node-appointment-booking .clawbox-node-dot { animation-name: clawboxMobileDotGlowC; animation-delay: 0.45s; }
  .node-email-summarisation .clawbox-node-dot-wrap::before,
  .node-email-summarisation .clawbox-node-dot { animation-name: clawboxMobileDotGlowA; animation-delay: 1.8s; }
  .node-daily-briefings .clawbox-node-dot-wrap::before,
  .node-daily-briefings .clawbox-node-dot { animation-name: clawboxMobileDotGlowB; animation-delay: 0.75s; }
  .node-hr-screening .clawbox-node-dot-wrap::before,
  .node-hr-screening .clawbox-node-dot { animation-name: clawboxMobileDotGlowC; animation-delay: 2.25s; }
  .node-task-management .clawbox-node-dot-wrap::before,
  .node-task-management .clawbox-node-dot { animation-name: clawboxMobileDotGlowA; animation-delay: 1.35s; }
  .node-learning-coach .clawbox-node-dot-wrap::before,
  .node-learning-coach .clawbox-node-dot { animation-name: clawboxMobileDotGlowB; animation-delay: 0.25s; }
  .node-finance-assistant .clawbox-node-dot-wrap::before,
  .node-finance-assistant .clawbox-node-dot { animation-name: clawboxMobileDotGlowC; animation-delay: 1.55s; }
  .node-study-mentor .clawbox-node-dot-wrap::before,
  .node-study-mentor .clawbox-node-dot { animation-name: clawboxMobileDotGlowA; animation-delay: 2.7s; }
  .node-content-assistant .clawbox-node-dot-wrap::before,
  .node-content-assistant .clawbox-node-dot { animation-name: clawboxMobileDotGlowB; animation-delay: 0.9s; }
  .node-reporting-automation .clawbox-node-dot-wrap::before,
  .node-reporting-automation .clawbox-node-dot { animation-name: clawboxMobileDotGlowC; animation-delay: 2.05s; }
}




/* ------------------------------------------------------------
   9.5 SECTION 5: WHY IT MATTERS
   ------------------------------------------------------------ */

.clawbox-why-section {
  min-height: auto;
  background-color: #0F1221;
  padding-bottom: 4rem;
}

.clawbox-why-bg,
.clawbox-why-bg-topography,
.clawbox-why-bg-gradient {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.clawbox-why-bg {
  z-index: 0;
  background:
    radial-gradient(circle at 58% 20%, rgba(91, 75, 255, 0.16) 0%, transparent 34%),
    radial-gradient(circle at 48% 78%, rgba(30, 95, 255, 0.16) 0%, transparent 42%),
    linear-gradient(180deg, #0A1224 0%, #0F1221 48%, #0A0D1C 100%);
}

.clawbox-why-bg-topography {
  z-index: 1;
  opacity: 0.18;
  mix-blend-mode: screen;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 140% 75%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 760' fill='none'%3E%3Cg opacity='0.95' stroke='%231E5FFF' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M-100 460C30 385 160 565 300 505C440 445 535 300 690 360C845 420 910 580 1080 520C1250 460 1340 305 1485 360C1605 405 1680 515 1760 480'/%3E%3Cpath d='M-100 520C45 440 165 625 315 570C465 515 545 370 700 420C855 470 935 635 1110 580C1285 525 1345 390 1510 420C1620 440 1700 535 1775 530' opacity='0.72'/%3E%3Cpath d='M-100 590C50 515 175 690 330 635C485 580 570 465 715 510C860 555 955 700 1125 650C1295 600 1375 485 1525 520C1640 548 1710 635 1780 610' opacity='0.52'/%3E%3Cpath d='M-100 650C65 595 180 740 340 700C500 660 590 560 735 602C880 644 970 750 1135 720C1300 690 1385 590 1535 626C1645 653 1715 715 1780 700' opacity='0.36'/%3E%3C/g%3E%3Cg opacity='0.72' stroke='%232EE6D6' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M-90 500C40 455 155 560 295 530C435 500 530 390 675 430C820 470 930 580 1085 550C1240 520 1340 415 1500 445C1615 466 1705 540 1770 535'/%3E%3Cpath d='M-90 620C65 560 180 675 335 650C490 625 590 535 730 570C870 605 975 705 1140 680C1305 655 1400 560 1545 595C1645 620 1715 675 1780 665' opacity='0.55'/%3E%3C/g%3E%3C/svg%3E");
}

.clawbox-why-bg-gradient {
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(15, 18, 33, 0.96) 0%, rgba(15, 18, 33, 0.54) 42%, rgba(15, 18, 33, 0.96) 100%),
    radial-gradient(ellipse at top, rgba(30, 95, 255, 0.10) 0%, transparent 52%);
}

.clawbox-why-card {
  background: rgba(15, 18, 33, 0.62);
  border: 1px solid rgba(67, 70, 86, 0.55);
  backdrop-filter: blur(18px);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.12);
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.clawbox-why-card:hover {
  background: rgba(28, 35, 64, 0.54);
  border-color: rgba(174, 182, 211, 0.34);
  box-shadow: 0 0 34px rgba(46, 230, 214, 0.08), 0 24px 80px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}

.clawbox-why-icon {
  background: rgba(28, 31, 46, 0.92);
  color: #B6C4FF;
  transition:
    color var(--transition-base),
    background-color var(--transition-base),
    box-shadow var(--transition-base);
}

.clawbox-why-card:hover .clawbox-why-icon {
  color: var(--color-aqua-glow);
  background: rgba(30, 95, 255, 0.16);
  box-shadow: 0 0 22px rgba(46, 230, 214, 0.08);
}

.clawbox-why-card-glow {
  position: absolute;
  right: -5rem;
  bottom: -5rem;
  width: 16rem;
  height: 16rem;
  border-radius: 9999px;
  background: rgba(30, 95, 255, 0.10);
  filter: blur(80px);
  pointer-events: none;
  transition: background-color var(--transition-base), opacity var(--transition-base);
}

.clawbox-why-card:hover .clawbox-why-card-glow {
  background: rgba(30, 95, 255, 0.18);
}

/* ------------------------------------------------------------
   10. FOOTER
   ------------------------------------------------------------ */

footer a {
  text-decoration: none;
}

footer .social-icon {
  transition: background-color var(--transition-base), color var(--transition-base);
}

/* Use Cases: apply the same block treatment to every use-case item */
.clawbox-usecases-section .clawbox-node-label-card {
  max-width: 280px;
  padding: 0.70rem 1.25rem;
  border-radius: 6px;
  background: rgba(28, 31, 46, 0.84);
  border: 1px solid rgba(67, 70, 86, 0.48);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(12px);
  opacity: 0.88;
  white-space: normal;
  transition: opacity var(--transition-base), border-color var(--transition-base), background-color var(--transition-base), box-shadow var(--transition-base);
}

.clawbox-usecases-section .clawbox-node-label-card span {
  white-space: normal;
}

.clawbox-usecases-section .clawbox-node:hover .clawbox-node-label-card {
  opacity: 1;
  border-color: rgba(46, 230, 214, 0.48);
  background: rgba(28, 31, 46, 0.94);
  box-shadow: 0 0 22px rgba(46, 230, 214, 0.10);
}

/* ------------------------------------------------------------
   9.6 SECTION: DIFFERENCE
   ------------------------------------------------------------ */

.clawbox-difference-section {
  background-color: var(--color-deep-navy);
  min-height: 420px;
}

.clawbox-difference-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 70% 20%, rgba(30, 95, 255, 0.14) 0%, transparent 36%),
    radial-gradient(circle at 40% 85%, rgba(46, 230, 214, 0.08) 0%, transparent 45%),
    linear-gradient(180deg, #0A1224 0%, #0A0D1C 100%);
}

@media (max-width: 767px) {
  .clawbox-difference-section {
    min-height: auto;
  }
}


@keyframes clawboxMobileDotGlowA {
  0%, 100% { opacity: 0.38; transform: scale(0.82); filter: brightness(0.85); }
  38% { opacity: 1; transform: scale(1.16); filter: brightness(1.35); }
  67% { opacity: 0.55; transform: scale(0.94); filter: brightness(1); }
}

@keyframes clawboxMobileDotGlowB {
  0%, 100% { opacity: 0.50; transform: scale(0.90); filter: brightness(0.90); }
  24% { opacity: 0.72; transform: scale(1.00); filter: brightness(1.05); }
  58% { opacity: 1; transform: scale(1.20); filter: brightness(1.45); }
}

@keyframes clawboxMobileDotGlowC {
  0%, 100% { opacity: 0.42; transform: scale(0.86); filter: brightness(0.88); }
  45% { opacity: 0.66; transform: scale(0.98); filter: brightness(1.05); }
  82% { opacity: 1; transform: scale(1.18); filter: brightness(1.40); }
}


/* Use Cases: hover border colours follow each node's circle colour */
.node-support:hover              .clawbox-node-label-card,
.node-appointment-booking:hover  .clawbox-node-label-card,
.node-hr-screening:hover         .clawbox-node-label-card,
.node-learning-coach:hover       .clawbox-node-label-card,
.node-content-assistant:hover    .clawbox-node-label-card {
  border-color: rgba(46, 230, 214, 0.72);
}

.node-lead-qualification:hover   .clawbox-node-label-card,
.node-email-summarisation:hover  .clawbox-node-label-card,
.node-task-management:hover      .clawbox-node-label-card,
.node-finance-assistant:hover    .clawbox-node-label-card,
.node-reporting-automation:hover .clawbox-node-label-card {
  border-color: rgba(30, 95, 255, 0.76);
}

.node-daily-briefings:hover .clawbox-node-label-card,
.node-study-mentor:hover    .clawbox-node-label-card {
  border-color: rgba(210, 228, 255, 0.76);
}

/* ------------------------------------------------------------
   FINAL FIX: Use Cases dot sizing + mobile card width
   Keep all node circles the same visual size as Content Assistant.
   ------------------------------------------------------------ */

.clawbox-usecases-section .clawbox-node-dot-wrap {
  width: 2rem !important;
  height: 2rem !important;
  flex: 0 0 2rem !important;
}

.clawbox-usecases-section .clawbox-node-dot-wrap::before,
.clawbox-usecases-section .clawbox-node-dot-aqua-lg::before,
.clawbox-usecases-section .clawbox-node-dot-blue-xl::before,
.clawbox-usecases-section .clawbox-node-dot-aqua-sm::before,
.clawbox-usecases-section .clawbox-node-dot-blue-sm::before,
.clawbox-usecases-section .clawbox-node-dot-soft::before,
.clawbox-usecases-section .clawbox-node-dot-blue-xs::before {
  width: 2rem !important;
  height: 2rem !important;
  filter: blur(9px) !important;
  opacity: 0.52;
}

.clawbox-usecases-section .clawbox-node-dot,
.clawbox-usecases-section .clawbox-node-dot-aqua-lg .clawbox-node-dot,
.clawbox-usecases-section .clawbox-node-dot-blue-xl .clawbox-node-dot,
.clawbox-usecases-section .clawbox-node-dot-aqua-sm .clawbox-node-dot,
.clawbox-usecases-section .clawbox-node-dot-blue-sm .clawbox-node-dot,
.clawbox-usecases-section .clawbox-node-dot-soft .clawbox-node-dot,
.clawbox-usecases-section .clawbox-node-dot-blue-xs .clawbox-node-dot {
  width: 0.75rem !important;
  height: 0.75rem !important;
  border-width: 2px !important;
}

.clawbox-usecases-section .clawbox-node:hover .clawbox-node-inner {
  transform: translateY(-0.35rem) scale(1.02);
}

@media (max-width: 1023px) {
  .clawbox-usecases-section .clawbox-usecases-nodes {
    width: 100%;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
  }

  .clawbox-usecases-section .clawbox-usecases-nodes .clawbox-node {
    width: 100% !important;
  }

  .clawbox-usecases-section .clawbox-node-inner,
  .clawbox-usecases-section .clawbox-node-row {
    display: grid !important;
    grid-template-columns: 2rem minmax(0, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    gap: 0.75rem !important;
    transform: none !important;
  }

  .clawbox-usecases-section .clawbox-node:hover .clawbox-node-inner,
  .clawbox-usecases-section .clawbox-node:hover .clawbox-node-row {
    transform: none !important;
  }

  .clawbox-usecases-section .clawbox-node-label-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}

/* ------------------------------------------------------------
   9.7 SECTION 6: FAQ
   ------------------------------------------------------------ */

.clawbox-faq-section {
  background-color: var(--color-deep-navy);
}

.faq-card {
  border: 1px solid rgba(38, 48, 74, 0.9);
  border-radius: 16px;
  background-color: var(--color-surface);
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    background-color 220ms ease,
    box-shadow 220ms ease;
}

.faq-card:hover {
  transform: translateY(-2px);
  border-color: rgba(30, 95, 255, 0.38);
  background-color: #1B2436;
  box-shadow: 0 0 24px rgba(30, 95, 255, 0.08);
}

.faq-answer {
  display: none;
  font-size: 0.875rem;
  line-height: 1.7;
}

.faq-card.active .faq-answer {
  display: block;
  margin-top: 0.75rem;
}

.faq-toggle {
  color: var(--color-aqua-glow);
  transition: all 0.2s ease;
  font-size: 22px;
}

.faq-card:hover .faq-toggle {
  filter: drop-shadow(0 0 6px rgba(46, 230, 214, 0.5));
}

.icon-plus  { display: inline; }
.icon-minus { display: none; }

.faq-card.active .icon-plus  { display: none; }
.faq-card.active .icon-minus { display: inline; }



/* ------------------------------------------------------------
   11. ORDER FORM
   ------------------------------------------------------------ */

.contact-form-grid {
  background-image:
    linear-gradient(to right, #26304A 1px, transparent 1px),
    linear-gradient(to bottom, #26304A 1px, transparent 1px);
  background-size: 40px 40px;
}

.contact-legal-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: solid;
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-style 0.2s ease;
}

.contact-legal-link:hover {
  color: #ffffff;
  text-decoration-style: dashed;
}

.contact-field-error {
  display: none;
  font-size: 0.7rem;
  color: #FF6B6B;
  margin-top: 4px;
  line-height: 1.4;
}

.contact-field-invalid {
  border-color: #FF6B6B !important;
}

.contact-field-invalid:focus {
  --tw-ring-color: rgba(255, 107, 107, 0.4);
  border-color: #FF6B6B !important;
}

.contact-form-error {
  font-size: 0.75rem;
  font-weight: 500;
  color: #FF6B6B;
  background: rgba(255, 107, 107, 0.08);
  border: 1px solid rgba(255, 107, 107, 0.3);
  border-radius: 6px;
  padding: 10px 14px;
  text-align: center;
}

.contact-eyebrow,
.contact-body-text {
  color: #AEB6D3;
}

.contact-heading-sora {
  font-family: 'Sora', sans-serif;
}


/* ------------------------------------------------------------
   12. OVERVIEW VIDEO PLAYER
   ------------------------------------------------------------ */

.clawbox-overview-video-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: #0A1224;
}

.clawbox-overview-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0A1224;
  z-index: 1;
}

.clawbox-overview-layout {
  grid-template-columns: 1fr !important;
}

.clawbox-overview-visual-panel {
  width: 100% !important;
  max-width: 711px;
  height: auto;
  aspect-ratio: 16 / 9;
  justify-self: start;
}

/* Mobile and smaller screens stay stacked with a true 16:9 video.
   Wider screens use a balanced two-column layout with a smaller
   711x400 video before expanding to the large 889x500 version. */
@media (min-width: 1440px) {
  .clawbox-overview-layout {
    grid-template-columns: minmax(380px, 520px) minmax(0, 711px) !important;
    justify-content: space-between;
  }

  .clawbox-overview-visual-panel {
    width: 711px !important;
    max-width: 100%;
    height: 400px;
    aspect-ratio: auto;
    justify-self: end;
  }
}

@media (min-width: 1720px) {
  .clawbox-overview-layout {
    grid-template-columns: minmax(420px, 520px) minmax(0, 889px) !important;
  }

  .clawbox-overview-visual-panel {
    width: 889px !important;
    height: 500px;
  }
}

.clawbox-overview-play-button {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 0;
  cursor: pointer;
  background:
    radial-gradient(circle at center, rgba(46, 230, 214, 0.18) 0%, rgba(30, 95, 255, 0.10) 18%, transparent 42%),
    linear-gradient(180deg, rgba(10, 18, 36, 0.05) 0%, rgba(10, 18, 36, 0.28) 100%);
  transition: opacity 240ms ease, visibility 240ms ease;
}

.clawbox-overview-video-player.is-playing .clawbox-overview-play-button {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.clawbox-overview-play-icon {
  position: relative;
  width: 86px;
  height: 86px;
  border-radius: 9999px;
  background: rgba(30, 95, 255, 0.92);
  border: 1px solid rgba(245, 247, 255, 0.42);
  box-shadow:
    0 0 0 10px rgba(30, 95, 255, 0.12),
    0 0 42px rgba(46, 230, 214, 0.28),
    0 18px 44px rgba(0, 0, 0, 0.34);
  transition: transform 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

.clawbox-overview-play-icon::before {
  content: "";
  position: absolute;
  left: 36px;
  top: 27px;
  width: 0;
  height: 0;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 23px solid #FFFFFF;
}

.clawbox-overview-play-button:hover .clawbox-overview-play-icon,
.clawbox-overview-play-button:focus-visible .clawbox-overview-play-icon {
  transform: scale(1.06);
  background: #1E5FFF;
  box-shadow:
    0 0 0 12px rgba(30, 95, 255, 0.14),
    0 0 54px rgba(46, 230, 214, 0.38),
    0 22px 54px rgba(0, 0, 0, 0.42);
}

.clawbox-overview-play-button:focus-visible {
  outline: 2px solid #2EE6D6;
  outline-offset: -6px;
}


/* ------------------------------------------------------------
   13. FONT FACE
   ------------------------------------------------------------ */

@font-face {
  font-family: 'Grava Roman';
  src: local('Grava Roman'), url('assets/fonts/Grava%20Roman.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}