/*
Theme Name: CloudTopSaaS
Theme URI: https://cloudtopsaas.com
Author: CloudTopSaaS
Author URI: https://cloudtopsaas.com
Description: Hand-built classic theme for the CloudTopSaaS marketing site. Tailwind-driven, mobile-first, no page builder.
Version: 1.0.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary
Text Domain: cloudtopsaas
*/

:root{
    --primary:#0A4F8C; --primary-deep:#073968; --primary-light:#1B6BB0;
    --accent:#22B8E6; --accent-bright:#38D4FF;
    --ink:#0B1220; --slate:#1F2937; --gray:#6B7280; --gray-2:#94A3B8; --gray-3:#E5E7EB;
    --off-white:#F8FAFC;
  }
  *{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
  html{ scroll-behavior:smooth; }
  body{ font-family:'Inter',system-ui,-apple-system,sans-serif; color:var(--ink); background:#fff; }
  .serif{ font-family:'Instrument Serif','Times New Roman',serif; font-weight:400; font-style:italic; letter-spacing:-0.02em; }
  .tabular{ font-variant-numeric:tabular-nums; }

  .hero-bg{
    background:
      radial-gradient(ellipse 70% 50% at 85% 0%, rgba(34,184,230,0.20), transparent 60%),
      radial-gradient(ellipse 65% 80% at 0% 60%, rgba(10,79,140,0.50), transparent 60%),
      linear-gradient(180deg,#0B1220 0%,#0A1A35 55%,#0B1220 100%);
  }
  .grid-overlay{
    background-image:
      linear-gradient(rgba(255,255,255,0.04) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px);
    background-size:56px 56px;
    -webkit-mask-image:radial-gradient(ellipse at center, black 25%, transparent 75%);
            mask-image:radial-gradient(ellipse at center, black 25%, transparent 75%);
  }
  .dark-section{ background:linear-gradient(180deg,#0B1220 0%,#0F1A30 100%); }
  .gradient-accent{
    background:linear-gradient(90deg,#22B8E6 0%,#38D4FF 50%,#22B8E6 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; font-weight:500; transition:all .2s ease; white-space:nowrap; }
  .btn-primary{ background:var(--ink); color:#fff; }
  .btn-primary:hover{ background:var(--primary); transform:translateY(-1px); box-shadow:0 12px 28px -12px rgba(10,79,140,.55); }
  .btn-light{ background:#fff; color:var(--ink); border:1px solid var(--gray-3); }
  .btn-light:hover{ background:var(--off-white); border-color:#cbd5e1; }
  .btn-ghost-dark{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); color:#fff; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
  .btn-ghost-dark:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); }
  .btn-accent{ background:var(--accent-bright); color:var(--ink); }
  .btn-accent:hover{ background:#5DDEFF; transform:translateY(-1px); box-shadow:0 12px 28px -12px rgba(56,212,255,.55); }

  .card{ background:#fff; border:1px solid var(--gray-3); border-radius:14px; transition:all .25s cubic-bezier(.4,0,.2,1); }
  .card-hover:hover{ transform:translateY(-3px); border-color:#cbd5e1; box-shadow:0 12px 32px -16px rgba(15,23,42,.18); }
  .card-dark{ background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,.10); border-radius:14px; }

  /* nav */
  #nav.nav-scrolled{ background:rgba(11,18,32,.85); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.08); }
  #nav.nav-light{ background:rgba(255,255,255,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--gray-3); }
  #nav.nav-light .nav-link{ color:var(--slate); }
  #nav.nav-light .nav-link:hover{ color:var(--ink); }
  #nav.nav-light .nav-wordmark{ color:var(--ink); }
  #nav.nav-light .nav-cta{ background:var(--ink); color:#fff; border-color:var(--ink); }
  #nav.nav-light .nav-cta:hover{ background:var(--primary); }

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

  /* animations */
  @keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
  .float-a{ animation:float 6s ease-in-out infinite; }
  .float-b{ animation:float 7.5s ease-in-out infinite; animation-delay:-2s; }
  .float-c{ animation:float 9s ease-in-out infinite; animation-delay:-4s; }
  @keyframes dash{ to{ stroke-dashoffset:-24; } }
  .dash-flow{ stroke-dasharray:5 6; animation:dash 2.2s linear infinite; }
  @keyframes pulse-soft{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.55; transform:scale(.94); } }
  .pulse-soft{ animation:pulse-soft 3s ease-in-out infinite; transform-origin:center; }

  /* timeline */
  .timeline-line{ background:linear-gradient(90deg, var(--gray-3) 0%, var(--accent) 50%, var(--gray-3) 100%); }

  /* logo strip */
  .wordmark-logo{ color:#94A3B8; font-weight:600; letter-spacing:-0.01em; transition:color .2s ease; }
  .wordmark-logo:hover{ color:#1F2937; }

  /* selection */
  ::selection{ background:var(--accent); color:var(--ink); }

/* logo image rendering on dark vs light backgrounds */
.nav-logo { filter: invert(1) hue-rotate(180deg); transition: filter .3s ease; }
.nav-light .nav-logo { filter: none; }
.footer-logo { filter: invert(1) hue-rotate(180deg); }

/* hero illustration parallax layers - drive --mx and --my via mousemove JS in hero.php */
.hero-illustration .px-1 { transform: translate(calc(var(--mx, 0) * -3px), calc(var(--my, 0) * -3px)); transition: transform .25s ease-out; }
.hero-illustration .px-2 { transform: translate(calc(var(--mx, 0) * -8px), calc(var(--my, 0) * -8px)); transition: transform .25s ease-out; }
.hero-illustration .px-3 { transform: translate(calc(var(--mx, 0) * -16px), calc(var(--my, 0) * -16px)); transition: transform .25s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .hero-illustration .px-1, .hero-illustration .px-2, .hero-illustration .px-3 { transform: none !important; transition: none !important; }
}

/* blog post body content typography */
.blog-content { font-size: 1.0625rem; line-height: 1.75; color: var(--ink); }
.blog-content > * + * { margin-top: 1.25em; }
.blog-content h2 { font-size: 1.875rem; line-height: 1.2; margin-top: 2.75rem; margin-bottom: 0.85rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.blog-content h3 { font-size: 1.4rem; margin-top: 2.25rem; margin-bottom: 0.65rem; font-weight: 600; color: var(--ink); }
.blog-content h4 { font-size: 1.15rem; margin-top: 1.75rem; font-weight: 600; color: var(--ink); }
.blog-content p { color: var(--gray); }
.blog-content strong { color: var(--ink); font-weight: 600; }
.blog-content a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .2s; }
.blog-content a:hover { color: var(--primary-deep); }
.blog-content ul, .blog-content ol { padding-left: 1.5rem; color: var(--gray); }
.blog-content ul { list-style-type: disc; }
.blog-content ol { list-style-type: decimal; }
.blog-content li { margin: 0.4rem 0; }
.blog-content li::marker { color: var(--accent); }
.blog-content blockquote { border-left: 3px solid var(--accent); padding: 0.25rem 0 0.25rem 1.5rem; margin: 1.75rem 0; font-size: 1.15rem; color: var(--ink); font-style: italic; }
.blog-content code { background: #F1F5F9; padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.9em; color: var(--primary-deep); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.blog-content pre { background: var(--ink); color: #E2E8F0; padding: 1.25rem 1.5rem; border-radius: 12px; overflow-x: auto; margin: 1.5rem 0; font-size: 0.92rem; line-height: 1.6; }
.blog-content pre code { background: transparent; padding: 0; color: inherit; font-size: inherit; }
.blog-content img, .blog-content figure { border-radius: 12px; margin: 1.75rem 0; }
.blog-content figcaption { font-size: 0.875rem; color: var(--gray); text-align: center; margin-top: 0.5rem; }
.blog-content hr { margin: 2.75rem 0; border: 0; border-top: 1px solid var(--gray-3); }
.blog-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.95rem; }
.blog-content th, .blog-content td { padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--gray-3); text-align: left; }
.blog-content th { font-weight: 600; color: var(--ink); background: #F8FAFC; }