/* =================================================================
   DinMind Infotech — Global Styles
   Extracted verbatim from the original single-file preview
   to preserve the exact trendy 2026 design.
   ================================================================= */

:root { --brand:#0E7C66; --brand-2:#14B391; --ink:#0A0D14; }
html,body { background:#FFFFFF; color:#0A0D14; font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
::selection { background:#0E7C66; color:#fff; }

/* Headline gradient */
.h-gradient   { background:linear-gradient(115deg,#0A0D14 0%,#0A0D14 30%,#0E7C66 65%,#14B391 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.h-gradient-2 { background:linear-gradient(90deg,#0E7C66,#14B391 60%,#0E7C66); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 6s linear infinite; }
@keyframes shine { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }

/* Background grids */
.bg-grid { background-image:
    linear-gradient(to right,rgba(14,124,102,.06) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(14,124,102,.06) 1px,transparent 1px);
    background-size:56px 56px;
    mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 50%,transparent 100%);
}
.bg-dotted { background-image:radial-gradient(rgba(14,124,102,.18) 1px,transparent 1px); background-size:20px 20px; }

/* Glass */
.glass { backdrop-filter:blur(14px) saturate(140%); background:rgba(255,255,255,.72); border:1px solid rgba(14,124,102,.10); }

/* Nav links */
.nav-link { position:relative; }
.nav-link::after {
  content:''; position:absolute; left:12px; right:12px; bottom:6px; height:2px;
  background:linear-gradient(90deg,#0E7C66,#14B391);
  transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.8,.2,1);
  border-radius:2px;
}
.nav-link:hover::after, .nav-link.active::after { transform:scaleX(1); }

/* Card lift */
.card-lift { transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .35s ease; }
.card-lift:hover { transform:translateY(-6px); box-shadow:0 24px 48px -16px rgba(14,124,102,.18),0 8px 16px -8px rgba(15,23,42,.10); border-color:rgba(14,124,102,.35); }

/* Reveal on scroll */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:.08s } .reveal-delay-2 { transition-delay:.16s }
.reveal-delay-3 { transition-delay:.24s } .reveal-delay-4 { transition-delay:.32s }

/* Marquee mask */
.marquee-mask { mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }

/* Buttons */
.btn-primary {
  background:linear-gradient(180deg,#14B391,#0E7C66);
  box-shadow:0 10px 24px -8px rgba(14,124,102,.45), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-primary:hover { transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 18px 32px -10px rgba(14,124,102,.55), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-primary:disabled { opacity:.7; cursor:not-allowed; transform:none; }
.btn-ghost { transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; }
.btn-ghost:hover { background:#F7F8FA; transform:translateY(-2px); border-color:#0E7C66; color:#0E7C66; }

/* Hero blob */
.blob { background:radial-gradient(circle at 30% 30%,#14B391,#0E7C66 45%,#06372D 100%); filter:blur(48px); opacity:.32; }

/* Logo card */
.logo-img { filter:drop-shadow(0 1px 0 rgba(14,124,102,.06)); }

/* Bento icon chip */
.icon-chip { background:linear-gradient(135deg,rgba(20,179,145,.14),rgba(14,124,102,.06)); border:1px solid rgba(14,124,102,.18); }

/* Eyebrow label */
.eyebrow { letter-spacing:.18em; text-transform:uppercase; font-size:12px; font-weight:600; color:#0E7C66; }

/* Dashboard skeleton (custom UI mocks) */
.ui-card { border:1px solid #EEF0F4; border-radius:18px; background:#fff; }
.ui-bar  { background:linear-gradient(90deg,#0E7C66,#14B391); border-radius:6px; }
.ui-row  { display:grid; grid-template-columns:1.6fr .8fr .8fr .6fr; gap:12px; align-items:center; padding:10px 12px; border-radius:10px; }
.ui-row + .ui-row { margin-top:6px; }
.ui-pill { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; font-size:11px; font-weight:600; border-radius:999px; }
.ui-dot  { width:6px; height:6px; border-radius:999px; }

.spark { stroke:#0E7C66; fill:none; stroke-width:2.2; stroke-linecap:round; }
.spark-fill { fill:url(#sparkGrad); }

/* Hamburger */
.hamb span { transition:transform .35s, opacity .25s; }
.hamb.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamb.open span:nth-child(2) { opacity:0; }
.hamb.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu { transform:translateY(-12px); opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s ease; }
.mobile-menu.open { transform:translateY(0); opacity:1; pointer-events:auto; }

body.lock { overflow:hidden; }

/* Scroll progress */
@supports (animation-timeline: scroll()) {
  .scroll-progress { animation:progress linear; animation-timeline:scroll(root); transform-origin:0 50%; }
  @keyframes progress { from{transform:scaleX(0)} to{transform:scaleX(1)} }
}

/* Kinetic underline */
.kinetic { position:relative; display:inline-block; }
.kinetic svg { position:absolute; left:0; right:0; bottom:-10px; width:100%; height:14px; }
.kinetic svg path { stroke-dasharray:600; stroke-dashoffset:600; animation:drawLine 1.6s ease forwards .6s; }
@keyframes drawLine { to { stroke-dashoffset:0 } }

/* Word swap (kinetic) */
.word-swap { display:inline-grid; vertical-align:bottom; }
.word-swap > span { grid-area:1/1; opacity:0; transform:translateY(14px); animation:swap 9s infinite; }
.word-swap > span:nth-child(1) { animation-delay:0s }
.word-swap > span:nth-child(2) { animation-delay:3s }
.word-swap > span:nth-child(3) { animation-delay:6s }
@keyframes swap {
  0%,30% { opacity:1; transform:translateY(0) }
  33%,100% { opacity:0; transform:translateY(-14px) }
}

/* Logo wall */
.logo-pill { border:1px solid #EEF0F4; background:#fff; padding:18px 22px; border-radius:18px; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.logo-pill:hover { transform:translateY(-3px); box-shadow:0 18px 30px -16px rgba(14,124,102,.18); border-color:rgba(14,124,102,.30); }
.brand-name { font-family:'Sora',sans-serif; font-weight:800; letter-spacing:-.02em; color:#1F2532; font-size:20px; }

/* Floating action button */
.floating-cta {
  position:fixed; right:18px; bottom:18px; z-index:60;
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(180deg,#25D366,#0E7C66);
  color:#fff; font-weight:700; padding:14px 18px; border-radius:999px;
  box-shadow:0 18px 32px -10px rgba(14,124,102,.55), 0 0 0 6px rgba(37,211,102,.15);
  transition:transform .3s ease, box-shadow .3s ease;
}
.floating-cta:hover { transform:translateY(-2px); box-shadow:0 22px 40px -10px rgba(14,124,102,.65), 0 0 0 8px rgba(37,211,102,.20); }

/* Form messages */
.form-alert { padding:14px 16px; border-radius:14px; font-size:14px; font-weight:500; }
.form-alert-success { background:#ECFDF5; border:1px solid #A7F3D0; color:#065F46; }
.form-alert-error   { background:#FEF2F2; border:1px solid #FECACA; color:#991B1B; }

/* Loader */
.spinner { display:inline-block; width:18px; height:18px; border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg) } }