/* =========================================================
   SiteVane — Design System
   Color system, typography, glassmorphism, gradients, animations
   ========================================================= */

:root{
  --bg:#0A0E17;
  --bg-alt:#0D1220;
  --surface:#121826;
  --surface-2:#171F31;
  --border:#232B3D;
  --text:#E8EAF0;
  --muted:#8B92A8;
  --blue:#3B82F6;
  --violet:#8B5CF6;
  --pink:#EC4899;
  --teal:#14B8A6;
  --amber:#F59E0B;
  --grad-primary: linear-gradient(120deg, var(--blue), var(--violet) 55%, var(--pink));
  --grad-teal: linear-gradient(120deg, var(--teal), var(--blue));
  --radius: 16px;
  --shadow-glow: 0 20px 60px rgba(139,92,246,0.18);
}

[data-theme="light"]{
  --bg:#F7F8FC;
  --bg-alt:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F2F1FB;
  --border:#E4E4F0;
  --text:#14161F;
  --muted:#5B5F75;
  --shadow-glow: 0 20px 60px rgba(99,102,241,0.12);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .3s ease, color .3s ease;
}
h1,h2,h3,h4,h5,h6{font-family:'Sora',sans-serif; font-weight:600; letter-spacing:-0.01em;}
.font-mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit;}
.text-muted-sv{color:var(--muted) !important;}

.gradient-text{
  background:var(--grad-primary);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Loading screen ---------- */
#sv-loader{
  position:fixed; inset:0; z-index:2000; background:var(--bg);
  display:flex; align-items:center; justify-content:center; transition:opacity .5s ease, visibility .5s ease;
}
#sv-loader.sv-hidden{opacity:0; visibility:hidden; pointer-events:none;}
.sv-loader-mark{width:56px; height:56px; border-radius:16px; background:var(--grad-primary); position:relative; animation:sv-pulse 1.1s ease-in-out infinite;}
@keyframes sv-pulse{0%,100%{transform:scale(1); opacity:1;} 50%{transform:scale(0.85); opacity:0.7;}}

/* ---------- Navbar ---------- */
.sv-navbar{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(10,14,23,0.7); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  transition:background .3s ease, box-shadow .3s ease;
}
[data-theme="light"] .sv-navbar{background:rgba(255,255,255,0.75);}
.sv-navbar.sv-scrolled{box-shadow:0 10px 30px rgba(0,0,0,0.25);}
.sv-navbar .navbar-brand{display:flex; align-items:center; gap:10px; font-family:'Sora',sans-serif; font-weight:700; font-size:1.15rem; color:var(--text);}
.sv-navbar .navbar-brand .mark{width:34px; height:34px; border-radius:9px; background:var(--grad-primary); display:flex; align-items:center; justify-content:center;}
.sv-navbar .nav-link{color:var(--muted) !important; font-weight:500; font-size:.92rem; padding:.5rem 1rem !important;}
.sv-navbar .nav-link:hover, .sv-navbar .nav-link.active{color:var(--text) !important;}
.sv-theme-toggle{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:var(--surface);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text);
}

/* ---------- Buttons ---------- */
.btn-sv-primary{
  background:var(--grad-primary); color:#fff; border:none; font-weight:600; padding:.85rem 1.7rem; border-radius:10px;
  box-shadow:0 10px 26px rgba(139,92,246,0.32); transition:transform .2s ease, box-shadow .2s ease;
}
.btn-sv-primary:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(139,92,246,0.42); color:#fff;}
.btn-sv-outline{
  background:transparent; color:var(--text); border:1px solid var(--border); font-weight:600; padding:.85rem 1.7rem; border-radius:10px;
  transition:all .2s ease;
}
.btn-sv-outline:hover{border-color:var(--violet); color:var(--text); background:rgba(139,92,246,0.08);}

/* ---------- Glassmorphism card ---------- */
.glass-card{
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border);
  border-radius:var(--radius);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
[data-theme="light"] .glass-card{background:rgba(255,255,255,0.7);}
.glass-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-glow); border-color:rgba(139,92,246,0.4);}

.gradient-border{
  position:relative; border-radius:var(--radius); background:var(--surface);
}
.gradient-border::before{
  content:''; position:absolute; inset:-1px; border-radius:var(--radius); padding:1px;
  background:var(--grad-primary);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}

/* ---------- Hero ---------- */
.sv-hero{
  position:relative; padding:150px 0 100px; overflow:hidden;
  background:radial-gradient(700px circle at 20% 0%, rgba(59,130,246,0.16), transparent 60%),
             radial-gradient(700px circle at 85% 20%, rgba(236,72,153,0.14), transparent 60%),
             var(--bg);
}
.sv-blob{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; z-index:0; pointer-events:none;
  animation:sv-float 10s ease-in-out infinite;
}
.sv-blob-1{width:380px; height:380px; background:var(--blue); top:-120px; right:5%;}
.sv-blob-2{width:320px; height:320px; background:var(--pink); bottom:-100px; left:0%; animation-delay:2s;}
.sv-blob-3{width:260px; height:260px; background:var(--violet); top:40%; right:35%; animation-delay:4s;}
@keyframes sv-float{0%,100%{transform:translateY(0px) translateX(0px);} 50%{transform:translateY(-30px) translateX(20px);}}

#sv-particles{position:absolute; inset:0; z-index:0; pointer-events:none;}

.sv-hero-content{position:relative; z-index:2;}
.sv-eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--violet); display:inline-flex; align-items:center; gap:10px; margin-bottom:1.2rem;
}
.sv-eyebrow::before{content:''; width:22px; height:2px; border-radius:2px; background:var(--grad-primary);}
.sv-hero h1{font-size:3.4rem; line-height:1.08; margin-bottom:1.2rem;}
.sv-typed-wrap{color:var(--muted); font-size:1.1rem;}
#sv-typed{color:var(--text); font-weight:600;}

.sv-stat{text-align:center;}
.sv-stat .num{font-family:'Sora',sans-serif; font-weight:700; font-size:2.1rem;}
.sv-stat .lbl{font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);}

/* ---------- Sections ---------- */
.sv-section{padding:100px 0;}
.sv-section-alt{background:var(--surface);}
.sv-section-head{margin-bottom:3rem;}
.sv-section-head h2{font-size:2.3rem;}
/*.sv-section-head p{color:var(--muted); max-width:1500px;}*/

/* ---------- Logo strip ---------- */
.sv-logo-strip{display:flex; flex-wrap:wrap; gap:2.2rem; align-items:center; justify-content:center; opacity:.75;}
.sv-logo-strip span{font-family:'JetBrains Mono',monospace; font-size:.85rem; color:var(--muted); border:1px solid var(--border); padding:.5rem 1rem; border-radius:20px;}

/* ---------- Feature / why cards ---------- */
.sv-feature-icon{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--grad-primary); color:#fff; font-size:1.3rem; margin-bottom:1.1rem;
}

/* ---------- Industry tabs / cards ---------- */
.sv-industry-card{padding:1.8rem; height:100%;}
.sv-industry-card .ic{
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border); color:var(--violet); font-size:1.2rem; margin-bottom:1rem;
}

/* ---------- Portfolio ---------- */
.sv-filter-btn{
  border:1px solid var(--border); background:transparent; color:var(--muted); padding:.5rem 1.1rem; border-radius:22px;
  font-size:.85rem; font-weight:600; transition:all .15s ease;
}
.sv-filter-btn.active, .sv-filter-btn:hover{background:var(--grad-primary); color:#fff; border-color:transparent;}
.sv-portfolio-card{overflow:hidden; position:relative;}
.sv-portfolio-thumb{aspect-ratio:4/3; background:linear-gradient(135deg, var(--surface-2), var(--bg)); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
.sv-portfolio-thumb::after{content:''; position:absolute; inset:0; background:var(--grad-primary); opacity:0; transition:opacity .3s ease;}
.sv-portfolio-card:hover .sv-portfolio-thumb::after{opacity:.14;}
.sv-portfolio-tag{font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--violet);}

/* ---------- Pricing ---------- */
.sv-price-card{padding:2.2rem; height:100%; display:flex; flex-direction:column;}
.sv-price-card.featured{position:relative;}
.sv-price-badge{position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--grad-primary); color:#fff; font-size:.72rem; font-family:'JetBrains Mono',monospace; padding:.3rem .9rem; border-radius:20px; letter-spacing:.06em;}
.sv-price-amount{font-family:'Sora',sans-serif; font-size:2.3rem; font-weight:700; margin:.8rem 0;}
.sv-price-amount small{font-size:.9rem; color:var(--muted); font-weight:400; font-family:'Inter',sans-serif;}
.sv-price-card ul{list-style:none; padding:0; margin:0 0 1.6rem;}
.sv-price-card ul li{padding:.55rem 0; border-top:1px solid var(--border); font-size:.9rem; display:flex; gap:.5rem;}
.sv-price-card ul li:first-child{border-top:none;}
.sv-price-card ul li i{color:var(--teal);}

/* ---------- Process ---------- */
.sv-process-step{padding:1.8rem; height:100%; position:relative;}
.sv-process-step .n{font-family:'JetBrains Mono',monospace; font-size:.85rem; color:var(--pink); font-weight:700;}

/* ---------- Testimonials ---------- */
.sv-testi-card{padding:1.8rem; height:100%;}
.sv-testi-stars{color:var(--amber); font-size:.85rem; margin-bottom:.8rem;}
.sv-testi-quote{font-family:'Sora',sans-serif; font-style:italic; font-size:1.02rem; line-height:1.6; margin-bottom:1rem;}

/* ---------- CTA band ---------- */
.sv-cta-band{
  background:var(--grad-primary); border-radius:24px; padding:70px 40px; text-align:center; color:#fff; position:relative; overflow:hidden;
}
.sv-cta-band h2{color:#fff;}
.sv-cta-band p{color:rgba(255,255,255,0.9);}
.sv-cta-band .btn-sv-primary{background:#fff; color:var(--violet); box-shadow:none;}
.sv-cta-band .btn-sv-outline{border-color:rgba(255,255,255,0.5); color:#fff;}

/* ---------- FAQ (bootstrap accordion re-skin) ---------- */
.sv-accordion .accordion-item{background:var(--surface); border:1px solid var(--border); border-radius:12px !important; margin-bottom:12px; overflow:hidden;}
.sv-accordion .accordion-button{background:var(--surface); color:var(--text); font-weight:600; font-family:'Sora',sans-serif;}
.sv-accordion .accordion-button:not(.collapsed){background:var(--surface-2); color:var(--violet); box-shadow:none;}
.sv-accordion .accordion-button::after{filter:invert(0.6);}
.sv-accordion .accordion-body{color:var(--muted); font-size:.92rem;}

/* ---------- Forms ---------- */
.sv-form .form-control, .sv-form .form-select{
  background:var(--surface-2); border:1px solid var(--border); color:var(--text); border-radius:10px; padding:.75rem 1rem;
}
.sv-form .form-control:focus, .sv-form .form-select:focus{
  background:var(--surface-2); border-color:var(--violet); box-shadow:0 0 0 .2rem rgba(139,92,246,0.2); color:var(--text);
}
.sv-form label{font-family:'JetBrains Mono',monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:.4rem;}
.sv-form-note{background:var(--surface-2); border:1px dashed var(--border); border-radius:12px; padding:1rem 1.2rem; font-size:.85rem; color:var(--muted);}
.sv-alert-success{display:none; background:rgba(20,184,166,0.12); border:1px solid var(--teal); color:var(--teal); padding:.9rem 1.1rem; border-radius:10px; font-size:.88rem;}
.sv-alert-error{display:none; background:rgba(236,72,153,0.1); border:1px solid var(--pink); color:var(--pink); padding:.9rem 1.1rem; border-radius:10px; font-size:.88rem;}

/* ---------- Footer ---------- */
.sv-footer{background:var(--bg-alt); border-top:1px solid var(--border); padding:70px 0 30px;}
.sv-footer h6{font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:1.1rem;}
.sv-footer a{color:var(--muted); font-size:.9rem; text-decoration:none; display:block; margin-bottom:.6rem;}
.sv-footer a:hover{color:var(--text);}
.sv-newsletter .form-control{border-radius:10px 0 0 10px;}
.sv-newsletter .btn{border-radius:0 10px 10px 0;}
.sv-social-icons a{display:inline-flex; width:36px; height:36px; border-radius:50%; border:1px solid var(--border); align-items:center; justify-content:center; margin-right:8px;}
.sv-social-icons a:hover{background:var(--grad-primary); border-color:transparent; color:#fff;}

/* ---------- Back to top ---------- */
#sv-back-to-top{
  position:fixed; bottom:96px; right:26px; z-index:150; width:44px; height:44px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border); color:var(--text); display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(10px); transition:all .25s ease; cursor:pointer;
}
#sv-back-to-top.show{opacity:1; visibility:visible; transform:translateY(0);}

/* ---------- Floating WhatsApp ---------- */
.sv-whatsapp{
  position:fixed; bottom:26px; left:26px; z-index:150; width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  box-shadow:0 10px 24px rgba(37,211,102,0.4); animation:sv-wa-pulse 2.4s ease-in-out infinite;
}
@keyframes sv-wa-pulse{0%,100%{box-shadow:0 10px 24px rgba(37,211,102,0.4);} 50%{box-shadow:0 10px 34px rgba(37,211,102,0.65);}}

/* ---------- Chatbot ---------- */
.sv-chat-launcher{
  position:fixed; bottom:26px; right:26px; z-index:200; width:60px; height:60px; border-radius:50%;
  background:var(--grad-primary); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 28px rgba(139,92,246,0.4); transition:transform .2s;
}
.sv-chat-launcher:hover{transform:scale(1.06);}
.sv-chat-badge{position:absolute; top:-4px; right:-4px; width:16px; height:16px; border-radius:50%; background:#22C55E; border:2px solid var(--bg);}
.sv-chat-panel{
  position:fixed; bottom:100px; right:26px; z-index:200; width:370px; max-width:90vw; height:520px; max-height:75vh;
  background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,0.5);
  display:none; flex-direction:column; overflow:hidden;
}
.sv-chat-panel.open{display:flex;}
.sv-chat-head{background:var(--grad-primary); color:#fff; padding:16px 18px; display:flex; align-items:center; gap:12px;}
.sv-chat-head .dot{width:8px; height:8px; border-radius:50%; background:#fff;}
.sv-chat-head .t{font-family:'Sora',sans-serif; font-size:15px;}
.sv-chat-head .s{font-size:11px; color:rgba(255,255,255,0.85); font-family:'JetBrains Mono',monospace;}
.sv-chat-close{margin-left:auto; background:none; border:none; color:#fff; cursor:pointer; font-size:18px; line-height:1; opacity:.85;}
.sv-chat-body{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; background:var(--bg);}
.sv-msg{max-width:82%; padding:10px 13px; border-radius:12px; font-size:13.5px; line-height:1.5;}
.sv-msg.bot{background:var(--surface-2); border:1px solid var(--border); align-self:flex-start; border-bottom-left-radius:3px;}
.sv-msg.user{background:var(--grad-primary); color:#fff; align-self:flex-end; border-bottom-right-radius:3px; font-weight:500;}
.sv-msg.bot a{color:var(--violet); text-decoration:underline;}
.sv-chat-suggest{display:flex; flex-wrap:wrap; gap:8px; padding:0 16px 12px; background:var(--bg);}
.sv-chat-chip{font-size:12px; padding:7px 12px; border:1px solid var(--border); border-radius:20px; background:var(--surface-2); cursor:pointer; color:var(--text); transition:all .15s;}
.sv-chat-chip:hover{border-color:var(--violet); color:var(--violet);}
.sv-chat-input-row{display:flex; gap:8px; padding:12px; border-top:1px solid var(--border); background:var(--surface);}
.sv-chat-input-row input{flex:1; border:1px solid var(--border); background:var(--surface-2); color:var(--text); padding:10px 12px; font-size:13.5px; border-radius:20px;}
.sv-chat-input-row button{background:var(--grad-primary); color:#fff; border:none; width:38px; height:38px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.sv-typing{display:flex; gap:4px; padding:10px 13px;}
.sv-typing span{width:6px; height:6px; border-radius:50%; background:var(--muted); animation:sv-blink 1.2s infinite;}
.sv-typing span:nth-child(2){animation-delay:.2s;} .sv-typing span:nth-child(3){animation-delay:.4s;}
@keyframes sv-blink{0%,80%,100%{opacity:.3;} 40%{opacity:1;}}

/* ---------- 404 ---------- */
.sv-404{min-height:80vh; display:flex; align-items:center; justify-content:center; text-align:center;}
.sv-404-num{font-family:'Sora',sans-serif; font-weight:700; font-size:9rem; line-height:1; letter-spacing:-.03em;}

/* ---------- Swiper testimonial dots ---------- */
.swiper-pagination-bullet{background:var(--muted) !important;}
.swiper-pagination-bullet-active{background:var(--violet) !important;}

/* ---------- Utilities ---------- */
.sv-divider{height:1px; background:var(--border); border:none;}

@media (max-width: 991px){
  .sv-hero h1{font-size:2.3rem;}
  .sv-404-num{font-size:5.5rem;}
  .sv-cta-band{padding:50px 24px;}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

/*homepage coding style*/
.code-editor{
    background:#0f172a;
    border-radius:12px;
    padding:18px;
    height:160px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
}

.code-editor pre{
    margin:0;
}

.code-editor code{
    color:#e5e7eb;
    font-size:14px;
    font-family:Consolas, Monaco, monospace;
    line-height:1.8;
    white-space:pre-wrap;
}

.cursor{
    display:inline-block;
    width:2px;
    background:#8B5CF6;
    animation:blink .8s infinite;
}

@keyframes blink{
    50%{
        opacity:0;
    }
}