/* =====================================================
   Anklix Technologies — Shared Stylesheet
   Design tokens: blue/purple gradient system, dark+light mode
   Fonts: Space Grotesk (display) / Inter (body) / JetBrains Mono (utility)
===================================================== */
:root{
  --blue:#4F6BFF;
  --blue-2:#7C8CFF;
  --purple:#9B5DE5;
  --purple-2:#C08CFF;
  --ink:#0A0D18;
  --ink-2:#12162A;
  --ink-3:#1A1F3B;
  --paper:#F5F6FB;
  --paper-2:#FFFFFF;
  --paper-3:#ECEEF9;
  --line-dark: rgba(255,255,255,0.10);
  --line-light: rgba(16,20,40,0.10);
  --radius: 20px;
}
html[data-theme="dark"]{
  --bg: var(--ink);
  --surface: var(--ink-2);
  --surface-2: var(--ink-3);
  --text: #E9EBF7;
  --muted: #9AA1C3;
  --line: var(--line-dark);
  --glass: rgba(18,22,42,0.55);
  --shadow: 0 20px 60px rgba(0,0,0,0.45);
}
html[data-theme="light"]{
  --bg: var(--paper);
  --surface: var(--paper-2);
  --surface-2: var(--paper-3);
  --text: #12162A;
  --muted: #5B6180;
  --line: var(--line-light);
  --glass: rgba(255,255,255,0.6);
  --shadow: 0 20px 50px rgba(30,40,90,0.10);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--text);
  font-family:'Inter',sans-serif;
  transition:background .35s ease,color .35s ease;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif; letter-spacing:-0.02em; line-height:1.08;}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer; border:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
.eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--blue-2); display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
}
.eyebrow::before{content:''; width:16px; height:1px; background:var(--blue-2);}
.grad-text{
  background:linear-gradient(100deg,var(--blue) 0%, var(--purple) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
section{position:relative; padding:110px 0;}
section.tight{padding:80px 0;}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head h2{font-size:clamp(30px,4vw,42px); font-weight:600;}
.section-head p{color:var(--muted); font-size:17px; margin-top:14px; line-height:1.6;}
.center{text-align:center; margin-left:auto; margin-right:auto;}

/* ---------- Page header banner (non-home pages) ---------- */
.page-banner{padding:150px 0 60px; position:relative; overflow:hidden;}
.page-banner::before{
  content:''; position:absolute; top:-180px; right:-140px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle,rgba(124,92,255,0.22),transparent 70%); pointer-events:none;
}
.page-banner h1{font-size:clamp(32px,4.6vw,50px); font-weight:700; position:relative;}
.page-banner p{color:var(--muted); font-size:16.5px; margin-top:16px; max-width:560px; position:relative;}
.breadcrumb{font-family:'JetBrains Mono'; font-size:12.5px; color:var(--muted); margin-bottom:18px;}
.breadcrumb a:hover{color:var(--blue-2);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:100px; font-weight:600; font-size:14.5px;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(100deg,var(--blue),var(--purple)); color:#fff;
  box-shadow:0 10px 30px -8px rgba(124,92,255,0.55);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 34px -8px rgba(124,92,255,0.7);}
.btn-ghost{background:transparent; color:var(--text); border:1px solid var(--line);}
.btn-ghost:hover{border-color:var(--blue-2); background:var(--surface);}
.btn-sm{padding:10px 18px; font-size:13px;}

/* ---------- Nav ---------- */
header{position:fixed; top:0; left:0; right:0; z-index:1000; padding:14px 0; transition:all .3s ease;}
header.scrolled{background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--line);}
nav{display:flex; align-items:center; justify-content:space-between;}
.logo{display:flex; align-items:center; gap:10px; font-family:'Space Grotesk'; font-weight:700; font-size:19px;}
.logo-mark{
  width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,var(--blue),var(--purple));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; font-weight:700;
  box-shadow:0 6px 16px -4px rgba(124,92,255,0.6);
}
.nav-links{display:flex; align-items:center; gap:28px;}
.nav-links a{font-size:14.5px; font-weight:500; color:var(--muted); position:relative; padding:4px 0;}
.nav-links a:hover, .nav-links a.active{color:var(--text);}
.nav-links a::after{content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:linear-gradient(90deg,var(--blue),var(--purple)); transition:width .25s ease;}
.nav-links a:hover::after, .nav-links a.active::after{width:100%;}
.nav-actions{display:flex; align-items:center; gap:14px;}
.theme-toggle{
  width:40px; height:40px; border-radius:50%; background:var(--surface); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--text); transition:transform .3s ease;
}
.theme-toggle:hover{transform:rotate(20deg);}
.burger{display:none; width:40px; height:40px; border-radius:50%; background:var(--surface); border:1px solid var(--line); align-items:center; justify-content:center; color:var(--text);}
.mobile-menu{
  position:fixed; inset:0; z-index:1100; background:var(--bg);
  display:flex; flex-direction:column; padding:24px; transform:translateX(100%); transition:transform .35s ease;
}
.mobile-menu.open{transform:translateX(0);}
.mobile-menu a{font-size:22px; font-family:'Space Grotesk'; font-weight:600; padding:14px 0; border-bottom:1px solid var(--line);}

/* ---------- Hero (home only) ---------- */
.hero{padding:170px 0 100px; position:relative; overflow:hidden;}
.hero::before{
  content:''; position:absolute; top:-200px; right:-160px; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,rgba(124,92,255,0.25),transparent 70%); filter:blur(10px); pointer-events:none;
}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center;}
.hero h1{font-size:clamp(38px,5.2vw,60px); font-weight:700;}
.hero p.sub{font-size:18px; color:var(--muted); margin-top:22px; max-width:520px; line-height:1.7;}
.hero-ctas{display:flex; gap:14px; margin-top:36px; flex-wrap:wrap;}
.hero-meta{display:flex; gap:28px; margin-top:44px; flex-wrap:wrap;}
.hero-meta div{display:flex; flex-direction:column;}
.hero-meta b{font-family:'Space Grotesk'; font-size:22px;}
.hero-meta span{font-size:12.5px; color:var(--muted); margin-top:2px;}

.console{background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); overflow:hidden; position:relative;}
.console-bar{display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--surface-2);}
.console-dot{width:10px; height:10px; border-radius:50%;}
.console-body{padding:22px; font-family:'JetBrains Mono',monospace; font-size:13px; line-height:1.8; min-height:230px;}
.console-body .c1{color:var(--purple-2);}
.console-body .c2{color:var(--blue-2);}
.console-body .c3{color:var(--muted);}
.console-cursor{display:inline-block; width:7px; height:14px; background:var(--blue-2); vertical-align:middle; animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
.console-preview{display:flex; gap:10px; padding:0 22px 22px; opacity:0; transform:translateY(10px); transition:all .6s ease;}
.console-preview.show{opacity:1; transform:translateY(0);}
.preview-card{flex:1; height:64px; border-radius:10px; background:linear-gradient(135deg,var(--blue),var(--purple)); opacity:0.15;}
.preview-card:nth-child(2){opacity:0.28;}
.preview-card:nth-child(3){opacity:0.42;}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; background:var(--surface);}
.marquee-track{display:flex; gap:60px; width:max-content; animation:scroll 26s linear infinite;}
@keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.marquee-item{font-family:'JetBrains Mono'; font-size:14px; color:var(--muted); white-space:nowrap;}

/* ---------- Stats ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.stat-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; text-align:center; transition:transform .3s ease;}
.stat-card:hover{transform:translateY(-4px);}
.stat-num{font-family:'Space Grotesk'; font-size:38px; font-weight:700;}
.stat-label{color:var(--muted); font-size:13.5px; margin-top:6px;}

/* ---------- Cards / grids ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease; position:relative; overflow:hidden;
}
.card:hover{transform:translateY(-6px); border-color:transparent; box-shadow:var(--shadow);}
.card-icon{
  width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,rgba(79,107,255,0.15),rgba(155,93,229,0.15)); color:var(--blue-2); margin-bottom:20px;
}
.card h3{font-size:19px; font-weight:600; margin-bottom:10px;}
.card p{color:var(--muted); font-size:14.5px; line-height:1.65; margin-bottom:16px;}
.tag-list{display:flex; flex-wrap:wrap; gap:8px;}
.tag{font-size:12.5px; padding:5px 12px; border-radius:100px; background:var(--surface-2); color:var(--muted); border:1px solid var(--line);}

.sub-list{margin-top:14px; padding-top:14px; border-top:1px solid var(--line);}
.sub-list li{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted); padding:5px 0;}
.sub-list li::before{content:''; width:5px; height:5px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--purple)); flex-shrink:0;}

/* ---------- Feature grid (why choose us) ---------- */
.feature-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.feature{padding:26px 20px; border-radius:16px; background:var(--surface); border:1px solid var(--line); text-align:left;}
.feature-icon{width:42px; height:42px; border-radius:12px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--purple-2); margin-bottom:16px; font-size:18px;}
.feature h4{font-size:15.5px; font-weight:600; margin-bottom:6px;}
.feature p{font-size:13.5px; color:var(--muted); line-height:1.6;}

/* ---------- Technologies ---------- */
.tech-cat{margin-bottom:36px;}
.tech-cat h4{font-family:'JetBrains Mono'; font-size:13px; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); margin-bottom:16px;}
.tech-badges{display:flex; flex-wrap:wrap; gap:12px;}
.tech-badge{padding:12px 20px; border-radius:12px; background:var(--surface); border:1px solid var(--line); font-size:14px; font-weight:500; transition:all .25s ease; display:flex; align-items:center; gap:8px;}
.tech-badge:hover{border-color:var(--blue-2); transform:translateY(-3px); color:var(--blue-2);}
.tech-dot{width:6px; height:6px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--purple));}

/* ---------- Process timeline ---------- */
.timeline{position:relative; margin-top:20px;}
.timeline::before{content:''; position:absolute; left:23px; top:6px; bottom:6px; width:2px; background:linear-gradient(var(--blue),var(--purple)); opacity:0.35;}
.tl-item{display:flex; gap:24px; padding:22px 0; position:relative;}
.tl-num{
  width:48px; height:48px; min-width:48px; border-radius:50%; background:var(--surface); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono'; font-weight:500; font-size:15px; z-index:2;
}
.tl-item.active .tl-num{background:linear-gradient(135deg,var(--blue),var(--purple)); color:#fff; border-color:transparent;}
.tl-content h4{font-size:16.5px; font-weight:600; margin-bottom:6px;}
.tl-content p{color:var(--muted); font-size:14px; line-height:1.6; max-width:520px;}

/* ---------- Portfolio ---------- */
.port-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .3s ease, box-shadow .3s ease;}
.port-card:hover{transform:translateY(-6px); box-shadow:var(--shadow);}
.port-thumb{height:160px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.port-thumb span{font-family:'JetBrains Mono'; font-size:12.5px; color:rgba(255,255,255,0.85); z-index:2; letter-spacing:0.05em; text-align:center; padding:0 16px;}
.port-thumb::after{content:''; position:absolute; inset:0; background:rgba(0,0,0,0.15);}
.port-body{padding:22px;}
.port-body h4{font-size:16.5px; font-weight:600; margin-bottom:8px;}
.port-body p{font-size:13.5px; color:var(--muted); line-height:1.6; margin-bottom:14px;}
.port-actions{display:flex; gap:10px; margin-top:16px;}
.port-filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:34px;}
.filter-btn{padding:9px 18px; border-radius:100px; border:1px solid var(--line); background:var(--surface); font-size:13.5px; color:var(--muted); transition:all .2s ease;}
.filter-btn.active, .filter-btn:hover{color:#fff; background:linear-gradient(100deg,var(--blue),var(--purple)); border-color:transparent;}

/* ---------- Testimonials ---------- */
.testi-track{display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px;}
.testi-track::-webkit-scrollbar{height:6px;}
.testi-track::-webkit-scrollbar-thumb{background:var(--line); border-radius:10px;}
.testi-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
.testi-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px;}
.testi-card.wide{min-width:340px; scroll-snap-align:start;}
.stars{color:#F5B942; font-size:15px; margin-bottom:14px; letter-spacing:2px;}
.testi-card p.quote{font-size:14.5px; line-height:1.7; color:var(--text); margin-bottom:20px;}
.testi-person{display:flex; align-items:center; gap:12px;}
.avatar{width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--purple)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:15px;}
.testi-person b{font-size:14px; display:block;} .testi-person span{font-size:12.5px; color:var(--muted);}
.review-badge{display:inline-flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); padding:14px 20px; border-radius:14px; margin-top:10px;}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--line); padding:22px 0;}
.faq-q{display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:600; font-size:16px; gap:16px;}
.faq-q svg{transition:transform .3s ease; flex-shrink:0;}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease;}
.faq-a p{color:var(--muted); font-size:14.5px; line-height:1.7; padding-top:14px; max-width:640px;}
.faq-cats{display:flex; gap:10px; margin-bottom:30px; flex-wrap:wrap;}

/* ---------- CTA band ---------- */
.cta-band{
  border-radius:28px; padding:60px; background:linear-gradient(120deg,var(--blue),var(--purple)); color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; position:relative; overflow:hidden;
}
.cta-band::before{content:''; position:absolute; inset:0; background:radial-gradient(circle at 80% 20%,rgba(255,255,255,0.18),transparent 60%);}
.cta-band h3{font-size:28px; font-weight:700; position:relative;}
.cta-band p{opacity:0.9; margin-top:8px; position:relative;}
.cta-band .btn-primary{background:#fff; color:var(--blue); box-shadow:none; position:relative;}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
.form-group{margin-bottom:18px;}
.form-group label{display:block; font-size:13px; color:var(--muted); margin-bottom:8px; font-weight:500;}
.form-group input, .form-group textarea, .form-group select{
  width:100%; padding:14px 16px; border-radius:12px; border:1px solid var(--line); background:var(--surface);
  color:var(--text); font-family:inherit; font-size:14.5px; transition:border-color .25s ease;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus{outline:none; border-color:var(--blue-2);}
.contact-info-item{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line);}
.contact-info-item .card-icon{margin-bottom:0;}
.map-placeholder{
  height:220px; border-radius:16px; margin-top:24px; border:1px solid var(--line);
  background:
    linear-gradient(var(--surface-2) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg, var(--surface-2) 1px, transparent 1px) 0 0/28px 28px,
    var(--surface);
  display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:13px; font-family:'JetBrains Mono';
}
.form-note{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); margin-top:14px;}

/* ---------- Blog ---------- */
.blog-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.blog-thumb{height:120px; background:linear-gradient(135deg,var(--surface-2),var(--surface));}
.blog-body{padding:22px;}
.blog-body .eyebrow{margin-bottom:10px;}
.blog-body h4{font-size:16px; margin-bottom:8px; font-weight:600;}
.blog-body p{font-size:13.5px; color:var(--muted); line-height:1.6;}

/* ---------- Footer ---------- */
footer{background:var(--surface); border-top:1px solid var(--line); padding:70px 0 26px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr; gap:40px;}
.footer-col h5{font-size:13.5px; margin-bottom:18px; color:var(--text); font-weight:600;}
.footer-col a, .footer-col p{font-size:14px; color:var(--muted); display:block; margin-bottom:12px; line-height:1.6;}
.footer-col a:hover{color:var(--blue-2);}
.newsletter{display:flex; gap:8px; margin-top:6px;}
.newsletter input{flex:1; padding:11px 14px; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--text); font-size:13.5px;}
.social-row{display:flex; gap:10px; margin-top:16px;}
.social-row a{width:36px; height:36px; border-radius:50%; background:var(--surface-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; margin:0; color:var(--text);}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; margin-top:50px; padding-top:24px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); flex-wrap:wrap; gap:12px;}
.foot-bottom-links{display:flex; gap:20px;}

/* ---------- Floating buttons ---------- */
.float-btns{position:fixed; right:24px; bottom:24px; display:flex; flex-direction:column; gap:12px; z-index:900;}
.fab{width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px -6px rgba(0,0,0,0.35); transition:transform .25s ease; opacity:0; transform:scale(0.6);}
.fab.show{opacity:1; transform:scale(1);}
.fab:hover{transform:translateY(-3px) scale(1.05);}
.fab-whatsapp{background:#25D366; color:#fff;}
.fab-top{background:var(--surface); color:var(--text); border:1px solid var(--line);}

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed; bottom:0; left:0; right:0; z-index:1200; background:var(--surface); border-top:1px solid var(--line);
  padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  transform:translateY(120%); transition:transform .4s ease; box-shadow:0 -10px 30px rgba(0,0,0,0.15);
}
.cookie-banner.show{transform:translateY(0);}
.cookie-banner p{font-size:13.5px; color:var(--muted); max-width:640px;}

.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- About page extras ---------- */
.value-row{display:flex; gap:18px; padding:20px 0; border-bottom:1px solid var(--line);}
.value-row:last-child{border-bottom:none;}
.value-num{font-family:'JetBrains Mono'; font-size:13px; color:var(--blue-2); min-width:28px;}
.audience-pills{display:flex; flex-wrap:wrap; gap:10px;}
.audience-pills span{padding:10px 18px; border-radius:100px; background:var(--surface); border:1px solid var(--line); font-size:13.5px;}

@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .grid-3, .grid-2, .stats, .feature-grid, .grid-4, .testi-grid{grid-template-columns:repeat(2,1fr);}
  .contact-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:repeat(2,1fr);}
  .nav-links{display:none;}
  .burger{display:flex;}
}
@media(max-width:600px){
  .grid-3,.grid-2,.stats,.feature-grid,.grid-4,.footer-grid,.testi-grid{grid-template-columns:1fr;}
  section{padding:70px 0;}
  .page-banner{padding:130px 0 50px;}
  .cta-band{padding:36px 24px; text-align:center; justify-content:center;}
  .testi-card.wide{min-width:280px;}
}