/* =========================================================
   Anisan Techsoft — Design System
   Modern, sophisticated dark theme with violet/teal accents
   ========================================================= */

:root{
  --bg:            #0b0a17;
  --bg-alt:        #100e22;
  --surface:       #15132b;
  --surface-2:     #1b1836;
  --border:        rgba(255,255,255,.08);
  --text:          #f2f1fb;
  --text-muted:    #b6b3d0;
  --text-muted-2:  #8f8bb3;

  --accent:        #7c5cff;
  --accent-2:      #22d3c5;
  --accent-3:      #ff6fa5;
  --gradient:      linear-gradient(135deg, #7c5cff 0%, #22d3c5 100%);
  --gradient-2:    linear-gradient(135deg, #ff6fa5 0%, #7c5cff 100%);

  --radius:        18px;
  --radius-sm:     12px;
  --shadow-lg:     0 20px 60px -20px rgba(124,92,255,.35);
  --shadow-md:     0 10px 30px -12px rgba(0,0,0,.5);
  --ease:          cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:
    radial-gradient(60% 50% at 85% -10%, rgba(124,92,255,.20), transparent 60%),
    radial-gradient(50% 40% at 0% 10%, rgba(34,211,197,.12), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  line-height:1.65;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6,.font-display{
  font-family:'Sora', 'Inter', sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--text);
}

a{color:inherit; text-decoration:none; transition:color .25s var(--ease);}
::selection{background:var(--accent); color:#fff;}

.text-accent{
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.text-muted-2{color:var(--text-muted-2) !important;}
.text-muted{color:var(--text-muted) !important;}

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--accent); color:#fff;
  padding:.6rem 1rem; z-index:2000; border-radius:0 0 8px 0;
}
.skip-link:focus{left:0;}

/* ---------------- Section rhythm ---------------- */
.section{padding:6.5rem 0;}
.section-sm{padding:4rem 0;}
@media(max-width:768px){
  .section{padding:4.5rem 0;}
  .section-sm{padding:3rem 0;}
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-2);
  padding:.4rem .9rem;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(124,92,255,.08);
}
.eyebrow::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--gradient);}

.section-title{font-size:clamp(1.9rem, 3.2vw, 2.75rem); margin-bottom:1rem;}
.section-sub{color:var(--text-muted); max-width:640px; font-size:1.05rem;}

/* ---------------- Navbar ---------------- */
.site-nav{
  padding:1.1rem 0;
  background:transparent;
  transition:all .35s var(--ease);
  z-index:1000;
}
.site-nav.scrolled{
  padding:.7rem 0;
  background:rgba(11,10,23,.85);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  box-shadow:0 10px 30px -20px rgba(0,0,0,.6);
}
.navbar-brand{display:inline-flex; align-items:center; gap:.6rem; font-family:'Sora',sans-serif; font-weight:700; font-size:1.15rem;}
.brand-mark{
  width:36px; height:36px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--gradient); color:#fff; font-weight:800; box-shadow:var(--shadow-lg);
}
.brand-text{color:var(--text);}

.nav-link{
  color:var(--text-muted) !important;
  font-weight:500; font-size:.95rem;
  padding:.5rem 1rem !important;
  position:relative;
}
.nav-link:hover, .nav-link.active{color:var(--text) !important;}
.nav-link.active::after{
  content:''; position:absolute; left:1rem; right:1rem; bottom:.15rem; height:2px;
  background:var(--gradient); border-radius:2px;
}
.navbar-toggler{border:none; box-shadow:none !important;}
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(242,241,251,0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@media(max-width:991px){
  #navMain{background:var(--surface); margin-top:1rem; padding:1rem 1.2rem; border-radius:var(--radius-sm); border:1px solid var(--border);}
}

/* ---------------- Buttons ---------------- */
.btn{border-radius:999px; font-weight:600; padding:.65rem 1.5rem; transition:all .3s var(--ease); border:1px solid transparent;}
.btn-gradient{
  background:var(--gradient); color:#fff; border:none;
  box-shadow:0 8px 24px -8px rgba(124,92,255,.55);
}
.btn-gradient:hover{transform:translateY(-2px); box-shadow:0 14px 32px -8px rgba(124,92,255,.7); color:#fff;}
.btn-outline-light{border-color:var(--border); color:var(--text);}
.btn-outline-light:hover{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.25); color:var(--text);}
.btn-lg{padding:.85rem 2rem; font-size:1.02rem;}
.btn-sm{padding:.5rem 1.1rem; font-size:.85rem;}

/* ---------------- Cards ---------------- */
.card-surface{
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--border);
  border-radius:var(--radius);
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.card-surface:hover{
  transform:translateY(-6px);
  border-color:rgba(124,92,255,.35);
  box-shadow:var(--shadow-lg);
}

.service-card{padding:2.1rem 1.8rem; height:100%;}
.service-icon{
  width:56px; height:56px; border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(124,92,255,.12); color:var(--accent-2);
  font-size:1.5rem; margin-bottom:1.3rem;
  transition:transform .4s var(--ease), background .4s var(--ease);
}
.service-card:hover .service-icon{background:var(--gradient); color:#fff; transform:rotate(-8deg) scale(1.08);}

.badge-tag{
  display:inline-block; font-size:.74rem; font-weight:600; padding:.3rem .7rem;
  border-radius:999px; background:rgba(255,255,255,.06); color:var(--text-muted); margin:.2rem .3rem .2rem 0;
  border:1px solid var(--border);
}

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  padding:9.5rem 0 6rem;
  overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(45% 60% at 90% 10%, rgba(34,211,197,.18), transparent 60%),
    radial-gradient(45% 60% at 10% 30%, rgba(124,92,255,.22), transparent 60%);
}
.hero-blob{
  position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; z-index:-1;
  animation:float 9s ease-in-out infinite;
}
.hero-blob.b1{width:340px; height:340px; background:var(--accent); top:-60px; right:8%;}
.hero-blob.b2{width:260px; height:260px; background:var(--accent-2); bottom:-40px; left:6%; animation-delay:-3s;}

@keyframes float{
  0%,100%{transform:translateY(0) translateX(0);}
  50%{transform:translateY(-24px) translateX(14px);}
}

.hero-badge{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:600;
  color:var(--text); background:rgba(255,255,255,.05); border:1px solid var(--border);
  padding:.45rem 1rem; border-radius:999px; margin-bottom:1.5rem;
}
.hero-badge .dot{width:8px; height:8px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 0 4px rgba(34,211,197,.18); animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}

.hero h1{font-size:clamp(2.4rem, 5.2vw, 4rem); line-height:1.1;}
.hero-stats{border-top:1px solid var(--border); margin-top:3rem; padding-top:2rem;}
.hero-stats .stat-num{font-family:'Sora',sans-serif; font-size:2rem; font-weight:800;}

.code-window{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); overflow:hidden;
  animation:floatSlow 6s ease-in-out infinite;
}
@keyframes floatSlow{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
.code-window-head{display:flex; gap:.4rem; padding:.9rem 1rem; background:var(--surface-2); border-bottom:1px solid var(--border);}
.code-window-head span{width:11px; height:11px; border-radius:50%; display:inline-block;}
.code-window-head span:nth-child(1){background:#ff5f57;}
.code-window-head span:nth-child(2){background:#febc2e;}
.code-window-head span:nth-child(3){background:#28c840;}
.code-window pre{margin:0; padding:1.4rem; font-family:'SFMono-Regular',Consolas,monospace; font-size:.83rem; color:var(--text-muted); overflow-x:auto;}
.code-window .tok-kw{color:#ff6fa5;}
.code-window .tok-fn{color:#22d3c5;}
.code-window .tok-str{color:#ffd166;}
.code-window .tok-com{color:#6f6c8f;}
.code-window .tok-var{color:#7c9dff;}

/* ---------------- Logos strip ---------------- */
.logo-strip{opacity:.65; font-family:'Sora',sans-serif; font-weight:700; letter-spacing:.05em;}
.logo-strip span{font-size:1.1rem; color:var(--text-muted-2);}

/* ---------------- Timeline ---------------- */
.timeline{position:relative; padding-left:2.2rem; border-left:2px solid var(--border);}
.timeline-item{position:relative; padding-bottom:2.4rem;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{
  content:''; position:absolute; left:-2.55rem; top:.3rem; width:14px; height:14px; border-radius:50%;
  background:var(--gradient); box-shadow:0 0 0 4px var(--bg), 0 0 0 6px rgba(124,92,255,.3);
}
.timeline-period{font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-2);}

/* ---------------- Skill bars ---------------- */
.skill-row{margin-bottom:1.4rem;}
.skill-row .skill-label{display:flex; justify-content:space-between; font-weight:600; margin-bottom:.5rem; font-size:.92rem;}
.skill-bar{height:8px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden;}
.skill-bar-fill{
  height:100%; border-radius:999px; background:var(--gradient); width:0;
  transition:width 1.4s var(--ease);
}

/* ---------------- Testimonials ---------------- */
.testimonial-card{padding:2rem; height:100%;}
.testimonial-card .bi-quote{font-size:1.8rem; color:var(--accent); opacity:.6;}
.avatar-circle{
  width:44px; height:44px; border-radius:50%; background:var(--gradient);
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; color:#fff;
}

/* ---------------- Process ---------------- */
.process-step{padding:2rem 1.6rem; position:relative; height:100%;}
.process-num{
  font-family:'Sora',sans-serif; font-size:2.6rem; font-weight:800;
  background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.85;
}

/* ---------------- CTA band ---------------- */
.cta-band{
  border-radius:28px; padding:4rem 2.5rem; position:relative; overflow:hidden;
  background:linear-gradient(135deg, rgba(124,92,255,.18), rgba(34,211,197,.12));
  border:1px solid var(--border);
}
.cta-band::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(50% 80% at 100% 0%, rgba(124,92,255,.25), transparent 60%);
}

/* ---------------- Forms ---------------- */
.form-control, .form-select{
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  padding:.8rem 1rem; border-radius:var(--radius-sm);
}
.form-control:focus, .form-select:focus{
  background:var(--surface); color:var(--text); border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(124,92,255,.18);
}
.form-control::placeholder{color:var(--text-muted-2);}
.form-label{font-weight:600; font-size:.9rem; margin-bottom:.5rem;}

.contact-info-item{display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.6rem;}
.contact-info-icon{
  width:46px; height:46px; min-width:46px; border-radius:12px; background:rgba(124,92,255,.12);
  color:var(--accent-2); display:flex; align-items:center; justify-content:center; font-size:1.15rem;
}

.alert-soft{border-radius:var(--radius-sm); border:1px solid var(--border); background:rgba(34,211,197,.1);}
.alert-soft.alert-danger{background:rgba(255,111,165,.1);}

/* ---------------- Footer ---------------- */
.site-footer{background:var(--bg-alt); border-top:1px solid var(--border); padding:4.5rem 0 1.5rem; margin-top:4rem;}
.footer-heading{font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:1.1rem; color:var(--text);}
.footer-links{list-style:none; padding:0; margin:0;}
.footer-links li{margin-bottom:.7rem; color:var(--text-muted-2); font-size:.92rem;}
.footer-links a{color:var(--text-muted-2);}
.footer-links a:hover{color:var(--accent-2);}
.footer-rule{border-color:var(--border); margin:2.5rem 0 1.5rem;}
.social-btn{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--border);
  display:inline-flex; align-items:center; justify-content:center; color:var(--text-muted);
  transition:all .3s var(--ease);
}
.social-btn:hover{background:var(--gradient); color:#fff; transform:translateY(-3px); border-color:transparent;}

.back-to-top{
  position:fixed; bottom:1.6rem; right:1.6rem; width:46px; height:46px; border-radius:50%;
  background:var(--gradient); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transform:translateY(10px);
  transition:all .35s var(--ease); z-index:900;
}
.back-to-top.show{opacity:1; pointer-events:auto; transform:translateY(0);}
.back-to-top:hover{color:#fff; transform:translateY(-4px);}

/* ---------------- Page hero (inner pages) ---------------- */
.page-hero{padding:8.5rem 0 3.5rem; position:relative; overflow:hidden;}
.page-hero::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(55% 70% at 80% 0%, rgba(124,92,255,.2), transparent 60%);
}
.breadcrumb-modern{font-size:.85rem; color:var(--text-muted-2);}
.breadcrumb-modern a{color:var(--text-muted-2);}
.breadcrumb-modern a:hover{color:var(--accent-2);}

/* ---------------- OrdrFlow product page ---------------- */
.product-hero{
  border-radius:28px; padding:3.5rem; background:linear-gradient(135deg, rgba(124,92,255,.16), rgba(34,211,197,.1));
  border:1px solid var(--border); position:relative; overflow:hidden;
}
.feature-check{display:flex; gap:.8rem; align-items:flex-start; margin-bottom:1.2rem;}
.feature-check i{color:var(--accent-2); font-size:1.2rem; margin-top:.15rem;}
.pricing-card{padding:2.4rem 2rem; text-align:center; position:relative;}
.pricing-card.featured{border-color:var(--accent); box-shadow:var(--shadow-lg); transform:scale(1.03);}
.pricing-card .price{font-family:'Sora',sans-serif; font-size:2.6rem; font-weight:800;}
.pricing-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--gradient); color:#fff; padding:.35rem 1.1rem; border-radius:999px; font-size:.78rem; font-weight:700;
}

/* ---------------- Team — 3D flip circles ---------------- */
.team-card{display:flex; justify-content:center;}

.team-flip{
  width:clamp(210px, 22vw, 250px);
  height:clamp(210px, 22vw, 250px);
  perspective:1400px;
  cursor:pointer;
  outline:none;
}
.team-flip-inner{
  position:relative;
  width:100%; height:100%;
  transition:transform .8s var(--ease);
  transform-style:preserve-3d;
  border-radius:50%;
}
/* Desktop: flip on hover. Touch/keyboard: flip via .flipped (toggled by JS). */
@media (hover:hover) and (pointer:fine){
  .team-flip:hover .team-flip-inner{transform:rotateY(180deg);}
}
.team-flip.flipped .team-flip-inner{transform:rotateY(180deg);}

.team-flip:focus-visible .team-flip-inner{
  transform:rotateY(180deg);
}
.team-flip:focus-visible{
  box-shadow:0 0 0 4px rgba(124,92,255,.35);
  border-radius:50%;
}

.team-flip-face{
  position:absolute; inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:1.4rem 1.3rem;
}

.team-flip-front{
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--border);
  box-shadow:var(--shadow-md);
  transition:box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.team-flip:hover .team-flip-front,
.team-flip.flipped .team-flip-front{
  box-shadow:var(--shadow-lg);
  border-color:rgba(124,92,255,.35);
}

.team-flip-ring{
  width:38%; height:38%;
  min-width:76px; min-height:76px;
  border-radius:50%;
  padding:4px;
  background:var(--gradient);
  box-shadow:0 8px 22px -8px rgba(124,92,255,.5);
  transition:transform .5s var(--ease);
}
.team-flip:hover .team-flip-ring{transform:scale(1.06);}
.team-flip-ring .inner{
  width:100%; height:100%; border-radius:50%; background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-weight:800; color:var(--text);
  font-size:1.8rem;
}
.team-flip-ring .profile-photo-img{border-radius:50%;}

.flip-hint{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.72rem; font-weight:600; color:var(--accent-2);
  opacity:.85;
  animation:hintPulse 2.4s ease-in-out infinite;
}
@keyframes hintPulse{0%,100%{opacity:.5;}50%{opacity:1;}}

.team-flip-back{
  background:var(--gradient);
  color:#fff;
  transform:rotateY(180deg);
  overflow:hidden;
}
.team-flip-role{color:rgba(255,255,255,.85); font-size:.82rem; font-weight:600;}
.team-flip-bio{color:rgba(255,255,255,.92); line-height:1.4; font-size:.78rem;}

.badge-tag-light{
  background:rgba(255,255,255,.18); color:#fff; border-color:rgba(255,255,255,.3);
}

.social-btn-sm{width:32px; height:32px; font-size:.85rem; border-color:rgba(255,255,255,.35); color:#fff;}
.social-btn-sm:hover{background:#fff; color:var(--accent);}

.team-flip-back .btn-gradient{
  background:#fff; color:var(--accent); box-shadow:none; font-size:.78rem; padding:.4rem 1rem;
}
.team-flip-back .btn-gradient:hover{background:rgba(255,255,255,.9); color:var(--accent);}

@media (max-width:767px){
  .team-flip-back{padding:1.1rem 1rem;}
  .team-flip-bio{display:none;} /* keep the circle tidy on small screens */
}

/* ---------------- Portfolio ---------------- */
.profile-photo-ring{
  width:clamp(150px, 40vw, 220px);
  height:clamp(150px, 40vw, 220px);
  border-radius:50%;
  padding:6px;
  background:var(--gradient);
  margin:0 auto;
  box-shadow:var(--shadow-lg);
  animation:floatSlow 6s ease-in-out infinite;
}
.profile-photo-ring .inner{
  width:100%; height:100%; border-radius:50%; background:var(--surface);
  display:flex; align-items:center; justify-content:center; font-family:'Sora',sans-serif;
  font-size:clamp(2.5rem, 10vw, 4rem); font-weight:800; color:var(--text);
}
.profile-photo-img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  object-position:center top;
  display:block;
  background:var(--surface);
}

/* Larger portrait on the dedicated portfolio hero */
.page-hero .profile-photo-ring{
  width:clamp(180px, 45vw, 260px);
  height:clamp(180px, 45vw, 260px);
}

/* ---------------- Utilities ---------------- */
.divider-grad{height:2px; width:70px; background:var(--gradient); border-radius:2px; margin:0 auto 1.2rem;}
.divider-grad.start{margin:0 0 1.2rem;}

.marquee{overflow:hidden; white-space:nowrap; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);}
.marquee-track{display:inline-flex; gap:3.5rem; animation:scrollx 26s linear infinite;}
@keyframes scrollx{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

[data-aos]{transition-duration:.7s !important;}

::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--surface-2); border-radius:6px;}
::-webkit-scrollbar-thumb:hover{background:var(--accent);}