/*
Theme Name: CloudByVin
Theme URI: https://cloudbyvin.com
Author: CloudByVin
Author URI: https://cloudbyvin.com
Description: AI-Powered Cloud & Digital Solutions — dark neural-network design with Calendly booking.
Version: 3.0.0
License: GNU General Public License v2 or later
Text Domain: cloudbyvin
Tags: technology, saas, dark, custom-menu, full-width-template, responsive-layout
*/

:root {
  --bg-deep: #030712;
  --bg-card: #0a1128;
  --bg-card-hover: #0f1a36;
  --accent-blue: #3b82f6;
  --accent-cyan: #06d6a0;
  --accent-violet: #8b5cf6;
  --accent-pink: #ec4899;
  --accent-gold: #f59e0b;
  --text-primary: #f0f4f8;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --border: rgba(59, 130, 246, 0.1);
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Sora', sans-serif;
  background: var(--bg-deep);
  color: var(--text-primary);
  overflow-x: hidden;
  line-height: 1.65;
}

/* Neural Canvas */
#neural-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.mesh-overlay {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(139,92,246,0.07), transparent),
    radial-gradient(ellipse 60% 50% at 90% 80%, rgba(6,214,160,0.05), transparent),
    radial-gradient(ellipse 70% 40% at 50% 50%, rgba(59,130,246,0.04), transparent);
}
.scanlines {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.008) 2px, rgba(255,255,255,0.008) 4px);
}

/* Nav */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 0.8rem 2rem;
  backdrop-filter: blur(24px) saturate(180%);
  background: rgba(3,7,18,0.75);
  border-bottom: 1px solid var(--border);
}
.nav-inner { max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--text-primary); }
.logo-icon {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-family: 'Space Mono', monospace; font-weight: 700; font-size: 0.8rem; color: white; position: relative;
}
.logo-icon::after {
  content: ''; position: absolute; inset: -2px; border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
  z-index: -1; opacity: 0.3; filter: blur(8px);
}
.logo-text { font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; }
.logo-text span { color: var(--accent-cyan); }
.logo-img { display: block; object-fit: contain; }
.nav-links { display: flex; gap: 1.8rem; list-style: none; align-items: center; }
.nav-links li { list-style: none; }
.nav-links a {
  color: var(--text-secondary); text-decoration: none; font-size: 0.88rem;
  font-weight: 500; transition: color 0.2s; position: relative;
}
.nav-links a:hover { color: var(--text-primary); }
.nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
  height: 1.5px; background: var(--accent-cyan); transform: scaleX(0); transition: transform 0.3s;
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta {
  padding: 0.55rem 1.4rem;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
  border-radius: 8px; color: white; font-weight: 600;
  border: none; cursor: pointer; transition: all 0.3s; font-family: 'Sora', sans-serif; font-size: 0.88rem;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(139,92,246,0.3); color: white; }
.nav-phone { color: var(--accent-cyan) !important; font-family: 'Space Mono', monospace; font-size: 0.82rem !important; }
.nav-phone::after { display: none !important; }
.mobile-toggle {
  display: none; background: none; border: 1px solid var(--border);
  color: var(--text-primary); font-size: 1.3rem; cursor: pointer; padding: 0.4rem 0.7rem; border-radius: 8px;
}

/* Sections */
section { position: relative; z-index: 1; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.section-label {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: 'Space Mono', monospace; font-size: 0.72rem; font-weight: 700;
  color: var(--accent-cyan); text-transform: uppercase; letter-spacing: 0.15em;
  margin-bottom: 1rem; padding: 0.35rem 0.9rem;
  background: rgba(6,214,160,0.06); border: 1px solid rgba(6,214,160,0.12); border-radius: 100px;
}
.section-title { font-size: clamp(1.9rem,3.5vw,2.7rem); font-weight: 700; letter-spacing: -0.025em; margin-bottom: 1rem; line-height: 1.15; }
.section-subtitle { font-size: 1.05rem; color: var(--text-secondary); max-width: 640px; line-height: 1.7; }

/* Hero */
.hero { min-height: 100vh; display: flex; align-items: center; padding-top: 80px; position: relative; }
.hero-content { max-width: 800px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.4rem 1.1rem; background: rgba(139,92,246,0.08);
  border: 1px solid rgba(139,92,246,0.15); border-radius: 100px;
  font-size: 0.78rem; font-weight: 600; color: var(--accent-violet);
  margin-bottom: 1.8rem; font-family: 'Space Mono', monospace;
  animation: fadeUp 0.7s ease both;
}
.pulse-dot {
  width: 7px; height: 7px; background: var(--accent-cyan); border-radius: 50%;
  animation: pulseDot 2s ease-in-out infinite; box-shadow: 0 0 8px var(--accent-cyan);
}
@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.8)} }
.hero h1 { font-size: clamp(2.6rem,5.5vw,4.4rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.035em; margin-bottom: 1.6rem; animation: fadeUp 0.7s ease 0.1s both; }
.gradient-text {
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan), var(--accent-violet));
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; animation: gradientShift 6s ease infinite;
}
@keyframes gradientShift { 0%,100%{background-position:0% center} 50%{background-position:100% center} }
.hero p { font-size: 1.15rem; color: var(--text-secondary); max-width: 620px; line-height: 1.75; margin-bottom: 2.5rem; animation: fadeUp 0.7s ease 0.2s both; }
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; animation: fadeUp 0.7s ease 0.3s both; }

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.9rem 2rem; background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
  color: white; border: none; border-radius: 12px; font-size: 0.95rem; font-weight: 600;
  cursor: pointer; transition: all 0.3s; text-decoration: none; font-family: 'Sora', sans-serif; position: relative; overflow: hidden;
}
.btn-primary::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,var(--accent-violet),var(--accent-pink)); opacity:0; transition:opacity 0.3s; }
.btn-primary:hover::before { opacity: 1; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(139,92,246,0.35); color: white; }
.btn-primary span { position:relative; z-index:1; display:flex; align-items:center; gap:0.5rem; }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.9rem 2rem; background: rgba(255,255,255,0.03);
  color: var(--text-primary); border: 1px solid rgba(148,163,184,0.15);
  border-radius: 12px; font-size: 0.95rem; font-weight: 500;
  cursor: pointer; transition: all 0.3s; text-decoration: none; font-family: 'Sora', sans-serif;
}
.btn-secondary:hover { border-color: var(--accent-cyan); background: rgba(6,214,160,0.04); transform: translateY(-2px); color: var(--text-primary); }

/* Floating AI Tags */
.hero-float-tags { position:absolute; right:5%; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:1.2rem; opacity:0.35; }
.float-tag { font-family:'Space Mono',monospace; font-size:0.7rem; color:var(--accent-cyan); padding:0.35rem 0.8rem; border:1px solid rgba(6,214,160,0.15); border-radius:6px; background:rgba(6,214,160,0.03); white-space:nowrap; animation:floatTag 4s ease-in-out infinite; }
.float-tag:nth-child(2){animation-delay:0.5s;color:var(--accent-violet);border-color:rgba(139,92,246,0.15)}
.float-tag:nth-child(3){animation-delay:1s}
.float-tag:nth-child(4){animation-delay:1.5s;color:var(--accent-blue);border-color:rgba(59,130,246,0.15)}
.float-tag:nth-child(5){animation-delay:2s;color:var(--accent-pink);border-color:rgba(236,72,153,0.15)}
.float-tag:nth-child(6){animation-delay:2.5s}
.float-tag:nth-child(7){animation-delay:3s;color:var(--accent-violet);border-color:rgba(139,92,246,0.15)}
@keyframes floatTag{0%,100%{transform:translateX(0)}50%{transform:translateX(-8px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* Trust */
.trust{padding:6rem 0;border-top:1px solid var(--border)}
.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.trust-content h2{font-size:2.2rem;font-weight:700;letter-spacing:-0.02em;margin-bottom:1.2rem}
.trust-content h2 .hl{color:var(--accent-cyan)}
.trust-content p{color:var(--text-secondary);font-size:1.02rem;line-height:1.75}
.trust-checks{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.trust-check{padding:1.2rem 1.3rem;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;display:flex;align-items:center;gap:0.8rem;transition:all 0.3s}
.trust-check:hover{border-color:rgba(6,214,160,0.2);transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,0.3)}
.check-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1rem}
.check-icon.blue{background:rgba(59,130,246,0.1);color:var(--accent-blue)}
.check-icon.cyan{background:rgba(6,214,160,0.1);color:var(--accent-cyan)}
.check-icon.violet{background:rgba(139,92,246,0.1);color:var(--accent-violet)}
.check-icon.gold{background:rgba(245,158,11,0.1);color:var(--accent-gold)}
.trust-check .label{font-size:0.88rem;font-weight:600;line-height:1.3}
.trust-check .sub{font-size:0.72rem;color:var(--text-muted);font-family:'Space Mono',monospace}

/* Services */
.services{padding:7rem 0}
.services-header{text-align:center;margin-bottom:4rem}
.services-header .section-subtitle{margin:0 auto}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.service-card{background:var(--bg-card);border:1px solid var(--border);border-radius:18px;padding:2rem 1.8rem;transition:all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);position:relative;overflow:hidden}
.service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--card-accent,var(--accent-blue)),transparent);opacity:0;transition:opacity 0.4s}
.service-card::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at center,var(--card-glow,rgba(59,130,246,0.03)),transparent 60%);opacity:0;transition:opacity 0.4s}
.service-card:hover{border-color:rgba(255,255,255,0.08);transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,0.4)}
.service-card:hover::before{opacity:1}
.service-card:hover::after{opacity:1}
.service-card>*{position:relative;z-index:1}
.service-card:nth-child(1){--card-accent:var(--accent-blue);--card-glow:rgba(59,130,246,0.05)}
.service-card:nth-child(2){--card-accent:var(--accent-cyan);--card-glow:rgba(6,214,160,0.05)}
.service-card:nth-child(3){--card-accent:var(--accent-gold);--card-glow:rgba(245,158,11,0.05)}
.service-card:nth-child(4){--card-accent:var(--accent-violet);--card-glow:rgba(139,92,246,0.05)}
.service-card:nth-child(5){--card-accent:var(--accent-pink);--card-glow:rgba(236,72,153,0.05)}
.service-card:nth-child(6){--card-accent:#10b981;--card-glow:rgba(16,185,129,0.05)}
.service-card:nth-child(7){--card-accent:#6366f1;--card-glow:rgba(99,102,241,0.05)}
.service-icon-wrap{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:1.3rem;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06)}
.service-card h3{font-size:1.12rem;font-weight:700;margin-bottom:0.35rem;letter-spacing:-0.01em}
.service-tagline{font-size:0.75rem;font-family:'Space Mono',monospace;font-weight:700;color:var(--card-accent,var(--accent-cyan));margin-bottom:0.9rem;text-transform:uppercase;letter-spacing:0.05em}
.service-card p{font-size:0.9rem;color:var(--text-secondary);line-height:1.65;margin-bottom:1.2rem}
.service-tags{display:flex;flex-wrap:wrap;gap:0.35rem}
.service-tag{font-size:0.68rem;font-family:'Space Mono',monospace;padding:0.25rem 0.65rem;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:6px;color:var(--text-muted);font-weight:500}

/* Why */
.why{padding:7rem 0;border-top:1px solid var(--border)}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:3.5rem}
.why-card{padding:2rem 1.5rem;border:1px solid var(--border);border-radius:18px;background:var(--bg-card);transition:all 0.35s}
.why-card:hover{border-color:rgba(139,92,246,0.2);transform:translateY(-4px);box-shadow:0 16px 50px rgba(0,0,0,0.3)}
.why-number{font-family:'Space Mono',monospace;font-size:2rem;font-weight:700;background:linear-gradient(135deg,var(--accent-blue),var(--accent-violet));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:0.8rem;line-height:1}
.why-card h3{font-size:1.05rem;font-weight:700;margin-bottom:0.6rem}
.why-card p{font-size:0.88rem;color:var(--text-secondary);line-height:1.65}

/* Results */
.results{padding:7rem 0;border-top:1px solid var(--border)}
.results-content{display:grid;grid-template-columns:1fr 1.2fr;gap:3rem;align-items:center;margin-top:3rem}
.results-list{display:flex;flex-direction:column;gap:0.8rem}
.result-item{display:flex;align-items:center;gap:1rem;padding:1rem 1.3rem;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;transition:all 0.3s}
.result-item:hover{border-color:rgba(6,214,160,0.2);transform:translateX(6px)}
.result-check{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:0.9rem;flex-shrink:0;background:rgba(6,214,160,0.1);color:var(--accent-cyan)}
.result-item span{font-size:0.92rem;font-weight:500}
.results-partner{padding:2.5rem;background:linear-gradient(135deg,rgba(139,92,246,0.06),rgba(6,214,160,0.04));border:1px solid rgba(139,92,246,0.12);border-radius:22px;position:relative;overflow:hidden}
.results-partner::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent-violet),var(--accent-cyan),var(--accent-blue))}
.results-partner h3{font-size:1.7rem;font-weight:700;letter-spacing:-0.02em;margin-bottom:1rem;line-height:1.2}
.results-partner p{color:var(--text-secondary);font-size:1rem;line-height:1.75}

/* CTA */
.cta-section{padding:7rem 0 5rem}
.cta-box{text-align:center;padding:5rem 3rem;background:linear-gradient(135deg,rgba(59,130,246,0.06),rgba(139,92,246,0.05),rgba(6,214,160,0.03));border:1px solid rgba(139,92,246,0.12);border-radius:28px;position:relative;overflow:hidden}
.cta-box::before{content:'';position:absolute;top:-1px;left:15%;right:15%;height:2px;background:linear-gradient(90deg,transparent,var(--accent-violet),var(--accent-cyan),transparent)}
.cta-box h2{font-size:clamp(2rem,4vw,2.8rem);font-weight:700;letter-spacing:-0.025em;margin-bottom:1rem}
.cta-box p{color:var(--text-secondary);font-size:1.1rem;max-width:560px;margin:0 auto 2.5rem;line-height:1.75}
.cta-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* Footer */
footer{position:relative;z-index:1;border-top:1px solid var(--border);padding:3.5rem 0 2rem}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:3rem;margin-bottom:2.5rem}
.footer-brand p{font-size:0.88rem;color:var(--text-muted);line-height:1.7;margin-top:0.8rem;max-width:340px}
.footer-col h4{font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-secondary);margin-bottom:1rem;font-family:'Space Mono',monospace}
.footer-col a{display:block;color:var(--text-muted);text-decoration:none;font-size:0.88rem;padding:0.25rem 0;transition:color 0.2s}
.footer-col a:hover{color:var(--accent-cyan)}
.footer-contact-item{display:flex;align-items:center;gap:0.6rem;margin-bottom:0.7rem}
.footer-contact-item .icon{width:32px;height:32px;background:rgba(6,214,160,0.08);border:1px solid rgba(6,214,160,0.1);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:0.85rem;flex-shrink:0}
.footer-contact-item a,.footer-contact-item span{color:var(--text-secondary);text-decoration:none;font-size:0.88rem;font-family:'Space Mono',monospace;transition:color 0.2s}
.footer-contact-item a:hover{color:var(--accent-cyan)}
.footer-bottom{border-top:1px solid var(--border);padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-bottom p{font-size:0.8rem;color:var(--text-muted)}
.footer-bottom-links{display:flex;gap:1.5rem}
.footer-bottom-links a{font-size:0.8rem;color:var(--text-muted);text-decoration:none;transition:color 0.2s}
.footer-bottom-links a:hover{color:var(--text-primary)}

/* Reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 0.7s ease,transform 0.7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* Responsive */
@media(max-width:1024px){
  .hero-float-tags{display:none}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .trust-grid{grid-template-columns:1fr;gap:2.5rem}
  .results-content{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .nav-links{display:none}
  .nav-links.show{display:flex;flex-direction:column;position:fixed;top:60px;left:0;right:0;background:rgba(3,7,18,0.98);border-bottom:1px solid var(--border);padding:1.5rem 2rem;gap:1rem;z-index:99}
  .mobile-toggle{display:block}
  .services-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .trust-checks{grid-template-columns:1fr}
  .hero{min-height:auto;padding:7rem 0 4rem}
  .cta-box{padding:3rem 1.5rem}
  .footer-grid{grid-template-columns:1fr;gap:2rem}
}
.admin-bar nav{top:32px}
@media(max-width:782px){.admin-bar nav{top:46px}}