/* ============ TiQ Global — Modern Minimal ============ */
:root{
  --bg: #0e1116;
  --panel: #11161d;
  --muted: #9aa4b2;
  --text: #e9eef5;
  --accent: #4aa3ff;           /* change this to match brand (e.g., #0051c2) */
  --accent-2: #7bd389;
  --radius: 14px;
  --shadow-1: 0 10px 25px rgba(0,0,0,.35);
  --shadow-2: inset 0 1px 0 rgba(255,255,255,.04), 0 2px 12px rgba(0,0,0,.25);
  --max: 1180px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  color:var(--text);
  background:linear-gradient(180deg,#0c0f14 0%, #0e1116 100%);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:inline-block}
a{color:var(--text);text-decoration:none}
a.link{color:var(--accent)}
.muted{color:var(--muted)}
.tiny{font-size:.9rem}
.center{text-align:center}
.mt-lg{margin-top:2.2rem}

.container{max-width:var(--max);margin:0 auto;padding:0 20px}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(14,17,22,.7);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex;               /* ensures vertical alignment */
  align-items: center;         /* vertically centers children */
  height: 80px;                /* total header height */
}

.nav-wrap {
  display: flex;
  align-items: center;         /* centers logo + menu */
  justify-content: space-between;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;             /* horizontal spacing */
}

.brand img {
  height: 70px;                /* slightly smaller than total header */
  width: auto;
  display: block;              /* removes baseline offset */
  object-fit: contain;         /* keeps it sharp if resized */
}

.brand-text{font-weight:700;letter-spacing:.2px}
.nav{display:flex;gap:22px;align-items:center}
.nav a{opacity:.9}
.nav a:hover{opacity:1}
.nav .active{color:var(--accent)}
.nav-toggle{display:none;border:0;background:none;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:#dfe7f2;margin:5px 0;border-radius:2px}

/* Hero */
.hero{padding:84px 0 40px;background:
radial-gradient(800px 400px at 10% -10%, rgba(74,163,255,.25), transparent 60%),
radial-gradient(1000px 600px at 110% 10%, rgba(123,211,137,.18), transparent 50%);
}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.hero h1{font-size: clamp(34px, 5vw, 52px);line-height:1.1;margin:0 0 12px}
.accent{color:var(--accent)}
.hero p{color:#cbd6e5;margin:0 0 22px}
.badges{display:flex;gap:12px;list-style:none;padding:0;margin:16px 0 0}
.badges li{font-size:.9rem;border:1px solid rgba(255,255,255,.1);padding:6px 10px;border-radius:999px;color:#cbd6e5;background:rgba(255,255,255,.03)}
.cta-row{display:flex;gap:12px;margin:16px 0 0}

.mockup-card{
  background:linear-gradient(180deg,#121721,#0e1116);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:22px;
  box-shadow:var(--shadow-1);
}
.metric{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);padding:14px 16px;border-radius:12px;margin:12px 0;box-shadow:var(--shadow-2)}
.metric-key{color:var(--muted)}
.metric-val{font-weight:700;font-size:1.1rem}




/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.12);transition:.2s;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent}
.btn-primary{background:linear-gradient(180deg, var(--accent), #2a73ff);border:none;color:#fff;box-shadow:0 10px 25px rgba(74,163,255,.35)}

/* Sections */
.section{padding:70px 0}
.section.alt{background:linear-gradient(180deg,#0e1116,#0c1016)}
.section-head{text-align:center;margin:0 0 28px}
.section-head h2{font-size:clamp(26px,3.6vw,36px);margin:0 0 8px}

/* Cards & grids */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}
.cards .card{
  padding:18px;border-radius:16px;background:linear-gradient(180deg,#141a23,#10151c);
  border:1px solid rgba(255,255,255,.08);
  transition:.2s;box-shadow:var(--shadow-2);position:relative;overflow:hidden
}
.cards .card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.18)}
.card h3{margin:6px 0 6px}
.card p{color:#c6d0dd}
.card .link{color:var(--accent);font-size:.95rem}
.icon{width:44px;height:44px;border-radius:12px;margin-bottom:8px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-2)}
/* (Simple icon placeholders by CSS classes; replace with SVGs if you have them) */
.icon-tax{background-image: radial-gradient(circle at 60% 30%, rgba(74,163,255,.7), transparent 40%)}
.icon-books{background-image: radial-gradient(circle at 60% 30%, rgba(123,211,137,.7), transparent 40%)}
.icon-advisory{background-image: radial-gradient(circle at 60% 30%, rgba(255,173,90,.8), transparent 40%)}
.icon-compliance{background-image: radial-gradient(circle at 60% 30%, rgba(204,153,255,.8), transparent 40%)}
.icon-integrations{background-image: radial-gradient(circle at 60% 30%, rgba(255,112,112,.8), transparent 40%)}
.icon-outsourcing{background-image: radial-gradient(circle at 60% 30%, rgba(86,215,255,.8), transparent 40%)}

/* Features */
.features .feature{
  background:linear-gradient(180deg,#141a23,#0f141c);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:16px;box-shadow:var(--shadow-2)
}
.features h4{margin:.2rem 0 .4rem}
.features p{color:#c6d0dd}

/* Slider */
.slider{position:relative;overflow:hidden;border-radius:18px;background:linear-gradient(180deg,#141a23,#10151c);border:1px solid rgba(255,255,255,.08);padding:20px}
.slide{display:none}
.slide.active{display:block}
blockquote{margin:0;font-size:1.1rem;color:#dfe7f2}
.author{margin-top:8px;color:var(--muted)}
.slider-nav{

  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;text
}
.slider-nav:hover{background:rgba(255,255,255,.12)}
.slider-nav.prev{display:none}
.slider-nav.next{display:none}
.slider-dots{display:flex;gap:8px;justify-content:center;margin-top:12px}
.slider-dots button{width:7px;height:7px;border-radius:999px;border:0;background:#506070;opacity:.6;cursor:pointer}
.slider-dots button.active{background:var(--accent);opacity:1}

/* CTA */
.cta-inner{display:grid;gap:10px;justify-items:center;text-align:center}
.cta h2{margin:0}

/* Page hero */
.page-hero{padding:70px 0 30px;background:radial-gradient(800px 400px at -20% -10%, rgba(74,163,255,.2), transparent 60%)}
.page-hero h1{margin:0 0 6px;font-size:clamp(28px,4vw,42px)}

/* Forms */
.form .field{display:grid;gap:6px;margin-bottom:12px}
input,textarea,select{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,#0f141c,#0b0f15);color:var(--text);outline:none
}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(74,163,255,.2)}
.form .btn{width:100%}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.08);margin-top:40px}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;align-items:center;padding:24px 0}
.footer-nav{display:flex;gap:16px;justify-content:center}
.legal{text-align:center;color:var(--muted);padding:10px 0;border-top:1px solid rgba(255,255,255,.06)}

/* Utilities */
.narrow{max-width:820px;margin:0 auto}
.card{border-radius:16px}
hr{border:0;border-top:1px solid rgba(255,255,255,.1);margin:18px 0}
.dash{list-style:none;padding:0;margin:8px 0}
.dash li{padding-left:18px;position:relative;margin:6px 0;color:#cbd6e5}
.dash li::before{content:"–";position:absolute;left:0;color:var(--accent)}
.checklist{list-style:none;padding:0;margin:8px 0}
.checklist li{padding-left:26px;position:relative;margin:8px 0}
.checklist li::before{content:"✓";position:absolute;left:0;color:var(--accent)}

/* Responsive */
@media (max-width: 980px){
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .nav{position:fixed;inset:60px 12px auto 12px;background:#0f141c;border:1px solid rgba(255,255,255,.08);border-radius:16px;flex-direction:column;padding:16px;display:none}
  .nav.show{display:flex}
  .nav-toggle{display:block}
}
/* Modern Footer */
.footer-new {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 40px;
  padding: 60px 0 30px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-new .brand img {
  height: 70px;
  margin-bottom: 10px;
}
.footer-new .tagline {
  font-weight: 600;
  color: var(--accent);
  margin: 4px 0 12px;
}
.footer-new .desc {
  color: #cbd6e5;
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 320px;
}

.footer-links h4,
.footer-contact h4 {
  font-size: 1.1rem;
  margin-bottom: 12px;
  color: var(--text);
}
.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li {
  margin-bottom: 6px;
}
.footer-links a {
  color: #cbd6e5;
  transition: color .2s;
}
.footer-links a:hover {
  color: var(--accent);
}
.footer-contact a {
  color: #cbd6e5;
  transition: color .2s;
}
.footer-contact a:hover {
  color: var(--accent);
}

.socials {
  display: flex;
  gap: 14px;
  margin-top: 12px;
}
.socials img {
  width: 33px;
  height: 33px;
  opacity: .8;
  transition: opacity .2s, transform .2s;
}
.socials img:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  text-align: center;
  padding: 16px 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Responsive */
@media(max-width: 980px){
  .footer-new {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-new .desc {margin: 0 auto;}
  .socials {justify-content: center;}
}

/* ===== TiQ Global — Pricing Slider (7 Services) ===== */
#pricing {
  background: linear-gradient(180deg,#0f141c,#0e1116);
  position: relative;
}

.pricing-slider {
  position: relative;
  overflow: hidden;
  margin-top: 40px;
  padding-top: 10px;
}

.pricing-track {
  display: flex;
  transition: transform 0.6s ease;
}

.pricing-card {
  min-width: 320px;
  max-width: 360px;
  flex: 0 0 90%;
  background: linear-gradient(180deg,#141a23,#0f131b);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 30px 24px;
  margin: 0 10px;
  box-shadow: var(--shadow-2);
  transition: transform .25s,border-color .25s;
}

@media (min-width: 800px) {
  .pricing-card { flex: 0 0 45%; }
}
@media (min-width: 1200px) {
  .pricing-card { flex: 0 0 32%; }
}

.pricing-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 0 12px rgba(0,81,194,.3);
}

.pricing-card h3 {
  font-size: 1.2rem;
  color: #e9eef5;
  margin-bottom: 8px;
}
.pricing-card .price {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent,#0051c2);
  margin: 10px 0 18px;
}
.pricing-card .price {
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.pricing-card .price span {
  font-size: 0.9rem;
  color: #9aa4b2;
  margin-left: 3px;
}

.pricing-track {
  align-items: stretch; /* ensures equal card height within flex row */
}

.pricing-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* pushes button down */
  height: 100%;
  min-height: 440px; /* adjust if you want taller cards */
}
.pricing-card .price span {
  font-size: .9rem;
  color: #9aa4b2;
}
.pricing-card .features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.pricing-card .features li {
  margin: 8px 0;
  padding-left: 22px;
  position: relative;
  color: #cbd6e5;
  font-size: 0.95rem;
}
.pricing-card .features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent,#0051c2);
  font-weight: bold;
}
.pricing-card .btn {
  margin-top: auto;
  width: 100%;
  justify-content: center;
  align-self: flex-end;
}

/* Nav Arrows */
.pricing-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #dfe7f2;
  font-size: 1.5rem;
  cursor: pointer;
  display: none;
  transition: background .2s,transform .2s;
}
.pricing-nav:hover { background: rgba(255,255,255,.15); transform: translateY(-50%) scale(1.1); }
.pricing-nav.prev { left: 10px; }
.pricing-nav.next { right: 10px; }

/* Dots */
.pricing-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}
.pricing-dots button {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  background: #506070;
  opacity: .6;
  cursor: pointer;
  transition: background .3s,transform .2s;
}
.pricing-dots button.active {
  background: var(--accent,#0051c2);
  opacity: 1;
  transform: scale(1.2);
}

/* Explore More Button */
.pricing-more {
  margin-top: 30px;
  text-align: center;
}

.pricing-more .btn {
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 28px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--accent), #2a73ff);
  box-shadow: 0 10px 25px rgba(74,163,255,.35);
  transition: transform .2s, box-shadow .2s;
}

.pricing-more .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(74,163,255,.5);
}
/* See More Button */
.pricing-more {
  margin-top: 30px;
  text-align: center;
}

.pricing-more .btn {
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 28px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--accent), #2a73ff);
  box-shadow: 0 10px 25px rgba(74,163,255,.35);
  transition: transform .2s, box-shadow .2s;
}

.pricing-more .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(74,163,255,.5);
}



/* ===== Fix: Center Testimonials Properly ===== */
#testimonials {
  text-align: center;
}

#testimonials .slider {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#testimonials .slide {
  display: none;
  max-width: 820px;
  margin: 0 auto;
}

#testimonials .slide.active {
  display: block;
}

#testimonials blockquote {
  font-size: 1.2rem;
  color: #e9eef5;
  line-height: 1.6;
  font-style: italic;
}

#testimonials .author {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Cookie banner */
.cookie-banner{
  position: fixed; inset: auto 16px 16px 16px; z-index: 9999;
  background: linear-gradient(180deg,#141a23,#0f131b);
  border:1px solid rgba(255,255,255,.12); color:#e9eef5;
  border-radius:16px; box-shadow:0 10px 25px rgba(0,0,0,.45);
}
.cookie-inner{ padding:16px; max-width:800px; margin:0 auto; }
.cookie-inner p{ margin:0 0 12px; color:#cbd6e5; }
.cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cookie-manage-panel{ margin-top:12px; display:grid; gap:10px; }
.cookie-manage-panel label{ color:#cbd6e5; font-size:.95rem; }
.cookie-banner .btn-primary{
  background: linear-gradient(180deg, var(--accent, #0051c2), #2a73ff);
  border:none; color:#fff; padding:10px 14px; border-radius:12px; cursor:pointer;
}
.cookie-banner .btn-outline{
  background: transparent; border:1px solid rgba(255,255,255,.18);
  padding:10px 14px; border-radius:12px; color:#e9eef5; cursor:pointer;
}
.cookie-banner button:hover{ transform: translateY(-1px); }

.footer-bottom a {
  color: var(--accent);
  text-decoration: none;
  margin-left: 6px;
}
.footer-bottom a:hover {
  text-decoration: underline;
}

/* ===== Contact Form Fixes ===== */

/* Ensure textarea width stays consistent */
.modern-form textarea {
  width: 100%;
  min-height: 140px;
  max-height: 200px;
  resize: vertical; /* allows user to expand only vertically */
  box-sizing: border-box;
}

/* Prevent flex/grid overflow on form fields */
.modern-form input,
.modern-form select,
.modern-form textarea {
  display: block;
  width: 100%;
}
/* ===== Fixed Brief Textarea (No Resize) ===== */
.modern-form textarea {
  width: 100%;
  height: 140px;           /* fixed height */
  resize: none;            /* completely disable resizing */
  box-sizing: border-box;
  overflow-y: auto;        /* add scroll if text exceeds limit */
  border-radius: 12px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
}
/* Center-align button text perfectly */
.modern-form .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  padding: 12px 0;
  font-weight: 600;
}
.icon-img {
  width: 50px;
  height: 50px;
  margin-bottom: 12px;
  object-fit: contain;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.card:hover .icon-img {
  transform: translateY(-4px);
  opacity: 100;
}

/* ===== Top Offer Banner ===== */
.top-offer-banner {
  background: linear-gradient(90deg, #1d1d1d, #1d1d1d);
  color: #fff200;
  font-size: 0.95rem;
  font-weight: 500;
  text-align: center;
  padding: 4px 0;
  position: sticky;
  top: 0;
  z-index: 9999;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.top-offer-banner a {
  color: #fff;
  text-decoration: underline;
  font-weight: 600;
}
.top-offer-banner marquee {
  display: block;
  white-space: nowrap;
}


/* ===== Animated Scrolling Offer Banner ===== */
.scroll-banner {
  position: sticky;
  top: 0;
  z-index: 60;
  overflow: hidden;
  white-space: nowrap;
  background: linear-gradient(90deg, #0051c2, #2a73ff);
  color: #fff;
  padding: 2px 0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
}

.scroll-text {
  display: inline-block;
  padding-left: 100%;
  animation: scroll-left 26s linear infinite;
  font-size: 1rem;
  font-weight: 500;
}

.scroll-banner strong {
  color: #fff;
}

.scroll-banner .banner-btn {
  display: inline-block;
  margin-left: 5px;
  background: rgba(255,255,255,.2);
  color: #fff;
  padding: 0px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  transition: background .25s ease;
}

.scroll-banner .banner-btn:hover {
  background: rgba(255,255,255,.4);
}

/* Animation Keyframes */
@keyframes scroll-left {
  10% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* 🖱 Pause animation on hover */
.scroll-banner:hover .scroll-text {
  animation-play-state: paused;
}