/* ============================================================
   arti.css — iBAZ Arti digital marketing division page
   ------------------------------------------------------------
   Built on base.css tokens. Header and footer are the shared
   site-wide components, unmodified.

   NAMING: the reference brief calls this "rMAR Arti", but this
   project has always called the division "iBAZ Arti" (orbit card
   7, and the Divisions mega-menu on all 7 pages). Used the
   project's own name so the site stays internally consistent —
   flagged for the founder rather than silently renaming a
   division across the whole site.

   CONTENT NOTE — every figure on this page is placeholder:
     · 150+ Campaigns / 75+ Happy Clients / 98% Success Rate /
       5+ Years Experience
     · 4.9 Google Rating, 100+ Reviews
     · +185% traffic, +72% leads, 3.8X ROAS, -34% cost per lead
     · All three case studies and their result numbers
     · All pricing (Rs 14,999 / 24,999 / 49,999 per month)
     · All client logos and testimonials
   The reference is a generic agency mockup ("Digitax") — none of
   these describe TAAMSI. Treat every one as sample data requiring
   founder confirmation before publishing.
   ============================================================ */

:root {
  --at-r-sm: 10px;
  --at-r-md: 16px;
  --at-r-lg: 24px;
  --at-elev: 0 18px 44px -28px rgba(6, 58, 120, 0.34);
}

.arti-page main { overflow-x: clip; }

/* ---------------- shared shell ---------------- */
.at-sec { padding: clamp(2.75rem, 5vw, 4.5rem) 0; }
.at-sec--tint { background: var(--color-bg, #F8FAFD); }
.at-head { text-align: center; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.at-pill {
  display: inline-block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-primary);
  background: var(--color-sky); border-radius: 999px; padding: 0.3rem 0.85rem; margin-bottom: 0.7rem;
}
.at-title { font-size: clamp(1.5rem, 2.7vw, 2.15rem); font-weight: 800; letter-spacing: -0.03em; color: var(--color-primary); margin: 0 0 0.5rem; }
.at-sub { font-size: 0.9rem; color: var(--color-text-muted); margin: 0; max-width: 54ch; margin-inline: auto; }

/* ---------------- hero ---------------- */
.at-hero {
  background: linear-gradient(160deg, #F4F7FD 0%, #EFF1FB 50%, #F9FAFE 100%);
  padding: clamp(2.25rem, 4.5vw, 3.75rem) 0 clamp(2.5rem, 4.5vw, 4rem);
  overflow: hidden;
}
.at-hero-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 3vw, 2.75rem); align-items: center; }
.at-hero-title { font-size: clamp(2rem, 3.9vw, 3rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.035em; color: var(--color-primary); margin: 0 0 1rem; }
.at-hero-title em { font-style: normal; color: var(--color-primary-light, #2C6FC4); display: block; }
.at-hero-copy { font-size: 0.95rem; line-height: 1.65; color: var(--color-text-muted); margin: 0 0 1.5rem; max-width: 44ch; }
.at-hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.75rem; }

.at-hero-stats { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; }
.at-hstat { display: flex; align-items: center; gap: 0.55rem; }
.at-hstat i { color: var(--color-primary-light, #2C6FC4); font-size: 1rem; }
.at-hstat b { display: block; font-size: 1.05rem; font-weight: 800; color: var(--color-primary); line-height: 1.15; }
.at-hstat span { font-size: 0.68rem; color: var(--color-text-muted); }

/* dashboard composition */
.at-dash { position: relative; min-height: 340px; display: grid; place-items: center; }
.at-dash-screen {
  position: relative; z-index: 2; width: min(400px, 100%);
  background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--at-r-lg);
  padding: 1.1rem; box-shadow: var(--at-elev);
}
.at-dash-label { font-size: 0.66rem; color: var(--color-text-muted); }
.at-dash-value { font-size: 1.5rem; font-weight: 800; color: var(--color-primary); letter-spacing: -0.03em; line-height: 1.2; }
.at-dash-delta { font-size: 0.66rem; font-weight: 700; color: #159447; }
.at-chart { margin-top: 0.9rem; }
.at-dash-row { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem; align-items: center; margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); }
.at-donut { width: 46px; height: 46px; }

.at-float {
  position: absolute; z-index: 3; background: #FFFFFF; border: 1px solid var(--color-border);
  border-radius: 14px; padding: 0.55rem 0.7rem; box-shadow: 0 10px 26px -14px rgba(6,58,120,0.35);
  display: flex; align-items: center; gap: 0.45rem; font-size: 0.68rem; font-weight: 700; color: var(--color-primary);
}
.at-float i { font-size: 0.95rem; }
.at-f1 { top: 2%;  left: 4%;  } .at-f1 i { color: #2C6FC4; }
.at-f2 { top: 0;   right: 6%; } .at-f2 i { color: #159447; }
.at-f3 { top: 34%; left: -1%; } .at-f3 i { color: #1677FF; }
.at-f4 { top: 32%; right: -2%;} .at-f4 i { color: #E99A00; }
.at-f5 { bottom: 6%; left: 6%;} .at-f5 i { color: var(--color-accent); }
.at-f6 { bottom: 2%; right: 4%;} .at-f6 i { color: #7C3AED; }

@media (max-width: 991.98px) {
  .at-hero-grid { grid-template-columns: 1fr; }
  .at-dash { order: -1; margin-bottom: 1rem; }
  .at-f1,.at-f2,.at-f3,.at-f4,.at-f5,.at-f6 { display: none; }
}

/* ---------------- trust strip ---------------- */
.at-trust { padding: clamp(1.5rem, 3vw, 2.25rem) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: #FFFFFF; }
.at-trust-title { text-align: center; font-size: 0.86rem; font-weight: 700; color: var(--color-text-muted); margin: 0 0 1rem; }
.at-trust-row { display: flex; align-items: center; justify-content: center; gap: clamp(1.25rem, 3vw, 2.5rem); flex-wrap: wrap; }
.at-logo { font-size: 0.95rem; font-weight: 800; color: var(--color-primary); opacity: 0.55; letter-spacing: -0.01em; }
.at-rating { display: flex; align-items: center; gap: 0.6rem; border: 1px solid var(--color-border); border-radius: var(--at-r-md); padding: 0.5rem 0.85rem; }
.at-rating b { font-size: 1.1rem; font-weight: 800; color: var(--color-primary); }
.at-rating span { display: block; font-size: 0.62rem; color: var(--color-text-muted); }
.at-stars { color: #E99A00; font-size: 0.7rem; letter-spacing: 0.05em; }

/* ---------------- generic card grids ---------------- */
.at-grid-6 { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 0.85rem; }
.at-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0.85rem; }
.at-card {
  background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--at-r-md);
  padding: 1.15rem 1rem; text-align: center;
  transition: transform 280ms cubic-bezier(.22,1,.36,1), box-shadow 280ms cubic-bezier(.22,1,.36,1), border-color 280ms cubic-bezier(.22,1,.36,1);
}
.at-card:hover { transform: translateY(-4px); border-color: rgba(0,42,97,0.16); box-shadow: var(--at-elev); }
.at-card-ico { width: 46px; height: 46px; margin: 0 auto 0.7rem; border-radius: 12px; display: grid; place-items: center; font-size: 1.15rem; }
.at-card h4 { font-size: 0.84rem; font-weight: 800; color: var(--color-primary); margin: 0 0 0.3rem; }
.at-card p { font-size: 0.73rem; color: var(--color-text-muted); margin: 0; line-height: 1.45; }

/* service cards are left-aligned with a Learn More — deliberately a
   different card treatment from the centred challenge cards above */
.at-svc { text-align: left; display: flex; gap: 0.8rem; }
.at-svc .at-card-ico { margin: 0; flex: none; width: 40px; height: 40px; font-size: 1rem; }
.at-svc h4 { margin-bottom: 0.25rem; }
.at-svc a { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.5rem; font-size: 0.73rem; font-weight: 700; color: var(--color-primary-light, #2C6FC4); text-decoration: none; }
.at-svc a:hover { color: var(--color-accent); }

@media (max-width: 1199.98px) { .at-grid-6 { grid-template-columns: repeat(3, minmax(0,1fr)); } .at-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 767.98px)  { .at-grid-6 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 479.98px)  { .at-grid-6, .at-grid-4 { grid-template-columns: 1fr; } }

/* ---------------- process ---------------- */
.at-process { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 2fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.at-steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0.85rem; position: relative; }
.at-steps::before {
  content: ""; position: absolute; top: 30px; left: 12%; right: 12%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--color-border) 0 6px, transparent 6px 12px);
}
.at-step { position: relative; z-index: 1; text-align: center; }
.at-step-ico { width: 60px; height: 60px; margin: 0 auto 0.7rem; border-radius: 50%; background: #FFFFFF; border: 2px solid var(--color-border); display: grid; place-items: center; font-size: 1.25rem; color: var(--color-primary); }
.at-step-n { display: block; font-size: 0.62rem; font-weight: 800; color: var(--color-text-muted); margin-bottom: 0.2rem; }
.at-step h4 { font-size: 0.84rem; font-weight: 800; color: var(--color-primary); margin: 0 0 0.25rem; }
.at-step p { font-size: 0.72rem; color: var(--color-text-muted); margin: 0; line-height: 1.45; }

@media (max-width: 991.98px) {
  .at-process { grid-template-columns: 1fr; }
  .at-steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .at-steps::before { display: none; }
}
@media (max-width: 575.98px) { .at-steps { grid-template-columns: 1fr; } }

/* ---------------- results ---------------- */
.at-results { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 2fr); gap: clamp(1.5rem, 3vw, 2.25rem); align-items: start; }
.at-metrics { display: flex; flex-direction: column; gap: 0.85rem; }
.at-metric { display: flex; align-items: center; gap: 0.75rem; }
.at-metric-ico { width: 42px; height: 42px; flex: none; border-radius: 11px; background: var(--color-sky); color: var(--color-primary); display: grid; place-items: center; font-size: 1rem; }
.at-metric b { display: block; font-size: 1.3rem; font-weight: 800; color: var(--color-primary); letter-spacing: -0.03em; line-height: 1.15; }
.at-metric span { font-size: 0.7rem; color: var(--color-text-muted); }

.at-cases { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0.85rem; }
.at-case { background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--at-r-md); overflow: hidden; transition: transform 280ms cubic-bezier(.22,1,.36,1), box-shadow 280ms cubic-bezier(.22,1,.36,1); }
.at-case:hover { transform: translateY(-4px); box-shadow: var(--at-elev); }
.at-case-shot { position: relative; aspect-ratio: 16/10; background: linear-gradient(140deg, var(--color-sky), #DDE7F3); display: grid; place-items: center; color: var(--color-primary-light, #2C6FC4); font-size: 1.6rem; }
.at-case-tag { position: absolute; left: 0.6rem; bottom: 0.6rem; font-size: 0.6rem; font-weight: 800; color: #FFFFFF; background: var(--color-primary); border-radius: 999px; padding: 0.2rem 0.6rem; }
.at-case-body { padding: 0.85rem 0.9rem 1rem; }
.at-case-body h4 { font-size: 0.86rem; font-weight: 800; color: var(--color-primary); margin: 0 0 0.3rem; }
.at-case-body p { font-size: 0.73rem; color: var(--color-text-muted); margin: 0 0 0.5rem; line-height: 1.45; }
.at-case-body a { font-size: 0.72rem; font-weight: 700; color: var(--color-primary-light, #2C6FC4); text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; }
.at-case-body a:hover { color: var(--color-accent); }

@media (max-width: 991.98px) { .at-results { grid-template-columns: 1fr; } }
@media (max-width: 767.98px) { .at-cases { grid-template-columns: 1fr; } }

/* ---------------- pricing ---------------- */
.at-plans { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(0.85rem, 1.5vw, 1.25rem); align-items: start; }
.at-plan { background: #FFFFFF; border: 1px solid var(--color-border); border-radius: var(--at-r-lg); padding: clamp(1.25rem, 2vw, 1.75rem); text-align: center; }
/* Growth plan carries the emphasis — accent border, slight lift, badge */
.at-plan--pop { border: 2px solid var(--color-accent); transform: translateY(-8px); box-shadow: 0 22px 48px -26px rgba(167,21,1,0.35); position: relative; }
.at-plan-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-size: 0.6rem; font-weight: 800; color: #FFFFFF; background: var(--color-accent); border-radius: 999px; padding: 0.22rem 0.7rem; white-space: nowrap; }
.at-plan h3 { font-size: 1rem; font-weight: 800; color: var(--color-primary); margin: 0 0 0.3rem; }
.at-plan-note { font-size: 0.73rem; color: var(--color-text-muted); margin: 0 0 1rem; line-height: 1.45; }
.at-plan-price { font-size: clamp(1.5rem, 2.4vw, 1.95rem); font-weight: 800; color: var(--color-primary); letter-spacing: -0.03em; margin-bottom: 1.1rem; }
.at-plan-price span { font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted); }
.at-plan ul { list-style: none; margin: 0 0 1.25rem; padding: 0; text-align: left; }
.at-plan li { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.76rem; color: var(--color-text); margin-bottom: 0.4rem; }
.at-plan li i { color: #159447; font-size: 0.7rem; margin-top: 0.2rem; flex: none; }
.at-plan .btn-primary-premium, .at-plan .btn-outline-premium { width: 100%; justify-content: center; }

@media (max-width: 991.98px) {
  .at-plans { grid-template-columns: 1fr; }
  .at-plan--pop { transform: none; }
}

/* ---------------- final CTA ---------------- */
.at-cta { background: linear-gradient(150deg, #001A3D 0%, #002A61 60%, #0D4A96 140%); color: #FFFFFF; padding: clamp(1.75rem, 3.5vw, 2.75rem) 0; }
.at-cta-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.at-cta-row h2 { font-size: clamp(1.25rem, 2.2vw, 1.7rem); font-weight: 800; margin: 0 0 0.3rem; color: #FFFFFF; }
.at-cta-row p { font-size: 0.88rem; color: rgba(255,255,255,0.82); margin: 0; }
.at-cta-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.at-cta-actions .btn-outline-premium { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); color: #FFFFFF; }
.at-cta-actions .btn-outline-premium:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--color-primary); }

@media (prefers-reduced-motion: reduce) {
  .at-card, .at-case { transition: none; }
  .at-card:hover, .at-case:hover { transform: none; }
}