/* ==========================================================================
   Amartam Technology Solutions — 2026 Redesign
   Design system: light, clean, brand-gradient accents (plum/crimson/orange)
   ========================================================================== */

:root{
  --bg: #ffffff;
  --bg-alt: #f6f7fb;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --border: #e8eaf1;
  --border-strong: #d8dbe6;
  --text: #101828;
  --text-muted: #4b5568;
  --text-faint: #8993a6;

  --primary: #640D5F;
  --primary-2: #8a1178;
  --accent: #EB5B00;
  --accent-2: #D91656;
  --amber: #f5b942;

  --grad-primary: linear-gradient(91deg, #640D5F -15%, #D91656 47%, #EB5B00 110%);
  --grad-violet: linear-gradient(135deg, #D91656 0%, #640D5F 100%);
  --grad-text: linear-gradient(90deg, #D91656 0%, #EB5B00 50%, #640D5F 100%);

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 24px;

  --shadow-sm: 0 1px 2px rgba(16,24,40,0.04);
  --shadow-card: 0 1px 2px rgba(16,24,40,0.04), 0 12px 28px -12px rgba(16,24,40,0.10);
  --shadow-card-hover: 0 1px 2px rgba(16,24,40,0.04), 0 20px 40px -14px rgba(16,24,40,0.16);
  --container: 1180px;

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-head: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{ font-family:var(--font-head); font-weight:600; line-height:1.15; margin:0 0 .5em; letter-spacing:-0.01em; color:var(--text); }
h1{ font-size:clamp(2.4rem, 5vw, 3.2rem); font-weight:700; }
h2{ font-size:clamp(1.8rem, 3.2vw, 2.6rem); }
h3{ font-size:1.15rem; }
p{ margin:0 0 1em; color:var(--text-muted); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }

.text-grad{
  background:var(--grad-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.78rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--accent-2); padding:6px 14px; border:1px solid var(--border-strong);
  border-radius:999px; background:var(--bg-alt);
}
.eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--grad-primary); }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
section{ position:relative; padding:60px 0; }
.section-tight{ padding:34px 0; }
.section-head{ max-width:680px; margin:0 0 56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:999px; font-weight:600; font-size:0.95rem;
  cursor:pointer; border:1px solid transparent; transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--grad-primary); color:#ffffff; box-shadow:0 8px 24px -8px rgba(217,22,86,0.45); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -10px rgba(217,22,86,0.55); }
.btn-ghost{ background:#ffffff; border-color:var(--border-strong); color:var(--text); }
.btn-ghost:hover{ border-color:var(--accent); background:rgba(235,91,0,0.06); }
.btn-sm{ padding:10px 18px; font-size:0.85rem; }
.btn svg{ width:16px; height:16px; }

.tools{
  display: none;
}

/* Header / Nav */
header.site{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,0.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:80px; }
.logo{ display:flex; align-items:center; }
.logo img{ height:44px; width:auto; display:block; }

.nav-links{ display:flex; align-items:center; gap:2px; }
.nav-links > li{ position:relative; }
.nav-links a.nav-link{
  display:flex; align-items:center; gap:4px; padding:10px 16px; border-radius:8px; font-size:0.92rem; font-weight:500; color:var(--text-muted);
  transition:color .15s ease, background .15s ease;
}
.nav-links a.nav-link:hover, .nav-links a.nav-link.active{ color:var(--text); background:var(--bg-alt); }
.nav-cta{ display:flex; align-items:center; gap:14px; }

.dropdown{
  position:absolute; top:calc(100% + 1px); left:50%; transform:translateX(-50%);
  width:560px; background:#ffffff; border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; display:grid; grid-template-columns:1fr 1fr; gap:4px;
  opacity:0; visibility:hidden; translate:0 6px; transition:opacity .18s ease, translate .18s ease;
  box-shadow:0 30px 60px -20px rgba(16,24,40,0.25);
}
.nav-links > li:hover .dropdown{ opacity:1; visibility:visible; translate:0 0; }
.dropdown a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; font-size:0.87rem; color:var(--text-muted); }
.dropdown a:hover{ background:var(--bg-alt); color:var(--text); }
.dropdown a .ic{ width:32px; height:32px; border-radius:9px; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; flex:none; }
.dropdown a .ic svg{ width:16px; height:16px; color:var(--accent-2); }
.dropdown a.featured{ grid-column:1 / -1; background:linear-gradient(120deg, rgba(217,22,86,0.08), rgba(100,13,95,0.05)); border:1px solid var(--border); margin-bottom:6px; }

.mobile-toggle{ display:none; background:none; border:none; color:var(--text); cursor:pointer; padding:8px; }
.mobile-toggle svg{ width:24px; height:24px; }

@media (max-width: 960px){
  .nav-links, .nav-cta .btn-ghost-desktop{ display:none; }
  .mobile-toggle{ display:flex; }
}
/* Mobile menu */
.mobile-dropdown-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:14px 6px;
  font-size:1.05rem;
  color:var(--text);
  background:none;
  border:none;
  border-bottom:1px solid var(--border);
  cursor:pointer;
  font-family:inherit;
}
.mobile-dropdown-toggle.active{ color:var(--accent-2); }
.mobile-dropdown-toggle .chevron{
  width:18px; height:18px;
  transition:transform .25s ease;
}
.mobile-dropdown.open .chevron{ transform:rotate(180deg); }

.mobile-submenu{
  max-height:0;
  overflow:hidden;
  padding-left:16px;
  transition:max-height .3s ease;
}
.mobile-dropdown.open .mobile-submenu{
  max-height:500px;
}
.mobile-submenu > *{ min-height:0; }
.mobile-submenu a{
  display:block;
  font-size:0.95rem !important;
  color:var(--text-muted) !important;
  padding:12px 6px !important;
  border-bottom:1px solid var(--border);
}
.mobile-submenu a:hover{ color:var(--accent-2) !important; }

/* Hide "Start a Project" button from desktop header */
@media(max-width:960px){
  .nav-cta .btn1 {
  display: none;
}
}

/* Mobile menu CTA button - Base styling */
.mobile-drawer .mobile-cta-btn {
  display: block;
  width: 100%;
  margin-top: 24px;
  padding: 14px 24px;
  background: linear-gradient(135deg, #640d5f 0%, #d91656 100%);
  color: white;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  border-radius: 10px;
  text-decoration: none;
  border: none;
  box-shadow: 0 2px 8px rgba(100, 13, 95, 0.2);
  transition: all 0.2s ease;
}
 
.mobile-drawer .mobile-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(100, 13, 95, 0.28);
}
 
.mobile-drawer .mobile-cta-btn svg {
  width: 18px;
  height: 18px;
  margin-left: 8px;
  vertical-align: middle;
}
 
@media (min-width: 641px) and (max-width: 1024px) {
  .mobile-drawer .mobile-cta-btn {
    max-width: 220px; 
    margin-left: auto;
    margin-right: auto;
  }
}

 
@media (max-width: 640px) {
  .mobile-drawer .mobile-cta-btn {
    width: 100%; 
  }
}
 

/* Hero */
.hero{ padding:70px 0 70px; }
.hero-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:center; }
.hero-stats{ display:flex; gap:36px; margin-top:44px; flex-wrap:wrap; }
.hero-stats .stat b{ display:block; font-family:var(--font-head); font-size:1.6rem; color:var(--text); }
.hero-stats .stat span{ font-size:0.82rem; color:var(--text-faint); }
.hero-actions{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }

.hero-visual{ position:relative; aspect-ratio:1/1; }
.orb-card{
  position:relative; height:100%; border-radius:var(--radius-lg);
  background:var(--bg-alt);
  border:1px solid var(--border); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.orb-card .glow{ position:absolute; width:75%; aspect-ratio:1/1; border-radius:50%; background:conic-gradient(from 0deg, #640D5F, #D91656, #EB5B00, #640D5F); filter:blur(70px); opacity:0.22; animation:spin 14s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.orb-card .chip{ position:absolute; background:#ffffff; border:1px solid var(--border-strong); border-radius:12px; padding:10px 14px; font-size:0.78rem; font-weight:600; display:flex; align-items:center; gap:8px; box-shadow:var(--shadow-card); color:var(--text); }
.orb-card .chip svg{ width:15px; height:15px; color:var(--accent-2); }
.orb-card .chip.c1{ top:8%; left:6%; }
.orb-card .chip.c2{ bottom:14%; left:0%; }
.orb-card .chip.c3{ top:38%; right:2%; }
.orb-card .chip.c4{ bottom:6%; right:12%; }
.orb-card .core{ position:relative; width:120px; height:120px; border-radius:32px; background:#ffffff; border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-card); }
.orb-card .core svg{ width:52px; height:52px; color:var(--accent-2); }

/* Logo strip */
.logo-strip{ padding:40px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-alt); }
.logo-strip .container{ display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.logo-strip span.label{ font-size:0.78rem; color:var(--text-faint); letter-spacing:0.06em; text-transform:uppercase; flex:none; }
.logo-strip .marks{ display:flex; gap:34px; flex-wrap:wrap; opacity:0.75; font-family:var(--font-head); font-weight:600; color:var(--text-muted); }

/* Cards */
.grid{ display:grid; gap:22px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:#ffffff; border:1px solid var(--border); border-radius:var(--radius);
  padding:32px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position:relative; box-shadow:var(--shadow-card);
}
.card:hover{ transform:translateY(-4px); border-color:var(--border-strong); box-shadow:var(--shadow-card-hover); }
.card .ic-badge{ width:52px; height:52px; border-radius:15px; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.card .ic-badge svg{ width:24px; height:24px; color:var(--accent-2); }
.card h3{ margin-bottom:8px; }
.card a.card-link, span.card-link{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:0.85rem; font-weight:600; color:var(--accent-2); }
.card-link svg{ width:14px; height:14px; flex:none; }

.card.featured{ background:linear-gradient(150deg, rgba(217,22,86,0.05), rgba(100,13,95,0.03)); border:1px solid rgba(217,22,86,0.22); }
.card.featured .ic-badge{ background:linear-gradient(135deg, rgba(217,22,86,0.14), rgba(100,13,95,0.10)); }
.tag{ display:inline-block; font-size:0.7rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:#ffffff; background:var(--grad-primary); padding:4px 10px; border-radius:999px; margin-bottom:14px; }

/* Centered service card (icon + title + copy, matches brand reference) */
.service-card{ text-align:center; padding:40px 30px; }
.service-card .ic-badge{ margin:0 auto 20px; }
.service-card p{ font-size:0.92rem; }
.service-card .card-link{ justify-content:center; }
.ic-badge.rose{ background:#FCE7F0; } .ic-badge.rose svg{ color:#D91656; }
.ic-badge.amber{ background:#FDEEDD; } .ic-badge.amber svg{ color:#EB5B00; }
.ic-badge.violet{ background:#F1E7F0; } .ic-badge.violet svg{ color:#640D5F; }
.ic-badge.slate{ background:#EAEFF6; } .ic-badge.slate svg{ color:#475569; }
.ic-badge.teal{ background:#E3F5EF; } .ic-badge.teal svg{ color:#0F9D74; }

/* Stats band */
.stats-band{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-alt); }
.stats-band .grid-4{ text-align:center; }
.stats-band b{ display:block; font-family:var(--font-head); font-size:2.2rem; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stats-band span{ color:var(--text-faint); font-size:0.85rem; }

/* Process steps */
.steps{ counter-reset:step; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.step{ border:1px solid var(--border); border-radius:var(--radius); padding:26px; background:#ffffff; box-shadow:var(--shadow-card); }
.step .num{ font-family:var(--font-head); font-size:2rem; color:var(--border-strong); font-weight:700; margin-bottom:14px; -webkit-text-stroke:1px var(--text-faint); }

/* Testimonials */
.testi-card{ border:1px solid var(--border); border-radius:var(--radius); padding:32px; background:#ffffff; box-shadow:var(--shadow-card); }
.testi-card p.quote{ font-size:1.05rem; color:var(--text); font-style:italic; }
.testi-person{ display:flex; align-items:center; gap:12px; margin-top:20px; }
.testi-avatar{ width:44px; height:44px; border-radius:50%; background:var(--grad-violet); display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--font-head); color:#ffffff; }
.testi-person b{ display:block; font-size:0.9rem; }
.testi-person span{ font-size:0.78rem; color:var(--text-faint); }

/* CTA band */
.cta-band{ border-radius:var(--radius-lg); background:linear-gradient(135deg, rgba(217,22,86,0.07), rgba(100,13,95,0.05) 50%, rgba(235,91,0,0.06)); border:1px solid var(--border); padding:64px; text-align:center; }

/* Page hero (inner pages) */
.page-hero{ padding:64px 0 56px; border-bottom:1px solid var(--border); background:#fbfcfe; overflow:hidden; }
.page-hero-inner{ display:grid; grid-template-columns:1.25fr 0.75fr; gap:30px; align-items:center; }
.hero-visual.small{ width:300px; justify-self:end; }
.hero-visual.small .chip{ font-size:0.72rem; padding:8px 12px; }
.hero-visual.small .core{ width:96px; height:96px; border-radius:26px; }
.hero-visual.small .core svg{ width:42px; height:42px; }
@media (max-width: 900px){
  .page-hero-inner{ grid-template-columns:1fr; }
  .page-hero-inner .hero-visual{ width:100%; max-width:280px; justify-self:center; margin:32px auto 0; }
}
.breadcrumb{ display:flex; gap:8px; align-items:center; font-size:0.82rem; color:var(--text-faint); margin-bottom:22px; }
.breadcrumb a:hover{ color:var(--accent-2); }
.breadcrumb svg{ width:12px; height:12px; flex:none; }

/* Tables / lists with check */
.check-list li{ display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; color:var(--text-muted); }
.check-list svg{ width:18px; height:18px; color:var(--accent-2); flex:none; margin-top:2px; }

/* Tech pill cloud */
.pill-cloud{ display:flex; flex-wrap:wrap; gap:10px; }
.pill{ padding:8px 16px; border-radius:999px; border:1px solid var(--border-strong); background:#ffffff; font-size:0.82rem; color:var(--text-muted); }

/* Footer */
footer.site{ border-top:1px solid var(--border); padding:72px 0 28px; margin-top:60px; background:var(--bg-alt); }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:32px; margin-bottom:56px; }
.footer-grid h4{ font-size:0.82rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-faint); margin-bottom:18px; }
.footer-grid li{ margin-bottom:11px; }
.footer-grid a{ font-size:0.9rem; color:var(--text-muted); }
.footer-grid a:hover{ color:var(--accent-2); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:28px; border-top:1px solid var(--border); flex-wrap:wrap; gap:14px; }
.footer-bottom span{ font-size:0.82rem; color:var(--text-faint); }
.social-row{ display:flex; gap:10px; }
.social-row a{ width:36px; height:36px; border-radius:10px; border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; color:var(--text-muted); background:#ffffff; }
.social-row a:hover{ border-color:var(--accent-2); color:var(--accent-2); }
.social-row svg{ width:16px; height:16px; }
.footer-legal{ display:flex; gap:18px; }
.footer-legal a{ font-size:0.82rem; color:var(--text-faint); }

/* Form */
.form-card{ border:1px solid var(--border); border-radius:var(--radius-lg); padding:36px; background:#ffffff; box-shadow:var(--shadow-card); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-field label{ font-size:0.82rem; color:var(--text-muted); }
.form-field input, .form-field textarea, .form-field select{
  background:var(--bg-alt); border:1px solid var(--border-strong); border-radius:10px; padding:12px 14px;
  color:var(--text); font-family:var(--font-body); font-size:0.92rem;
}
.form-field input:focus, .form-field textarea:focus{ outline:none; border-color:var(--accent-2); }
#formMessage2{
  margin-bottom: 15px;
}
/* Base alert */
.alert {
  padding: 12px 16px;
  margin-top: 12px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: alertFade .3s ease;
}

/* Success */
.alert-success {
  color: #0f5132;
  background: #d1e7dd;
  border-color: #badbcc;
}

/* Error / danger */
.alert-danger {
  color: #842029;
  background: #f8d7da;
  border-color: #f5c2c7;
}

/* Warning */
.alert-warning {
  color: #664d03;
  background: #fff3cd;
  border-color: #ffecb5;
}

/* Info */
.alert-info {
  color: #055160;
  background: #cff4fc;
  border-color: #b6effb;
}

@keyframes alertFade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.office-card{ border:1px solid var(--border); border-radius:var(--radius); padding:26px; background:#ffffff; display:flex; gap:16px; box-shadow:var(--shadow-card); }
.office-card .ic{ width:42px; height:42px; border-radius:12px; background:var(--grad-primary); display:flex; align-items:center; justify-content:center; flex:none; }
.office-card .ic svg{ width:20px; height:20px; color:#ffffff; }

/* Locations band (flags + address cards) */
.locations-band{ background:#EEF1FC; border-radius:var(--radius-lg); padding:48px; }
.locations-band h2{ margin-bottom:32px; }
.location-card{ background:#F8F9FE; border:1px solid var(--border); border-radius:var(--radius); padding:32px; }
.location-card .flag{ font-size:2rem; line-height:1; margin-bottom:18px; }
.location-card h3{ font-size:1.3rem; margin-bottom:12px; }
.location-card p{ margin:0; }

/* Services grid: centers a trailing partial row instead of left-aligning it */
.services-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:22px; }
.services-grid > a{ flex:0 1 calc((100% - 44px)/3); max-width:calc((100% - 44px)/3); }
@media (max-width: 900px){
  .services-grid > a{ flex:0 1 calc((100% - 22px)/2); max-width:calc((100% - 22px)/2); }
}
@media (max-width: 600px){
  .services-grid > a{ flex:1 1 100%; max-width:100%; }
}

/* Blog / case study cards */
  .blog-hero-content {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 50px;
  align-items: center;
}

@media (max-width: 768px) {
  .blog-hero-content {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.blog-hero-text h1{
  font-size: 3rem;
}
.post-card{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:#ffffff; box-shadow:var(--shadow-card); }
.post-card .thumb{ height:170px; background:linear-gradient(135deg, rgba(217,22,86,0.16), rgba(100,13,95,0.12)); position:relative; }
.post-card .body{ padding:22px; }
.post-card .meta{ font-size:0.75rem; color:var(--text-faint); margin-bottom:10px; text-transform:uppercase; letter-spacing:0.04em; }
.thumb-icon{ position:absolute; top:16px; left:16px; background:#ffffff; border-radius:10px; padding:10px; display:flex; box-shadow:var(--shadow-card); }
.thumb-icon svg{ width:20px; height:20px; color:var(--accent-2); flex:none; }
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 48px 0 0;
}

.pagination li {
  display: inline-flex;
}

.pagination li a,
.pagination li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, .12);
  color: #111;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all .2s ease;
}

.pagination li a:hover {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* Active page */
.pagination li.active span,
.pagination li .active {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* Disabled (prev/next on edges) */
.pagination li.disabled span {
  opacity: .4;
  cursor: not-allowed;
}
.post-card .thumb {
  width: 100%;
  height: 220px;          /* fixed height */
  overflow: hidden;
  border-radius: 12px 12px 0 0;   /* top corners, adjust as needed */
}

.post-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* crop to fill, no stretch */
  display: block;
}
/* ===== Blog Detail Page ===== */

.post-article{ max-width:820px; margin:0 auto; }

.post-article-hero{
  width:100%;
  max-height:460px;
  overflow:hidden;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  margin-bottom:40px;
  box-shadow:var(--shadow-card);
}
.post-article-hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.post-article-body{
  font-size:16px;
  line-height:1.5;
  color:var(--text-muted);
}
.post-article-body h2{
  font-family:var(--font-head);
  font-size:clamp(1.8rem, 2.6vw, 2rem);
  color:var(--text);
  margin:40px 0 16px;
}
.post-article-body h3{
  font-family:var(--font-head);
  font-size:1.5rem;
  color:var(--text);
  margin:32px 0 14px;
}
/* .post-article-body p{ margin:0 0 20px; } */
.post-article-body ul,
.post-article-body ol{ margin:0 0 22px; padding-left:22px; }
.post-article-body ul{ list-style:disc; }
.post-article-body ol{ list-style:decimal; }
.post-article-body li{ margin-bottom:5px; color:var(--text-muted); }
.post-article-body img{
  max-width:100%;
  height:auto;
  border-radius:var(--radius);
  margin:28px 0;
  border:1px solid var(--border);
}
.post-article-body a{
  color:var(--accent-2);
  text-decoration:underline;
  text-underline-offset:2px;
}
.post-article-body a:hover{ color:var(--accent); }
.post-article-body blockquote{
  border-left:3px solid var(--accent-2);
  padding:6px 0 6px 22px;
  margin:28px 0;
  font-style:italic;
  color:var(--text);
}
.post-article-body strong{ color:var(--text); }

/* Author box */
.author-box{
  display:flex;
  gap:20px;
  align-items:flex-start;
  margin-top:56px;
  padding:32px;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:linear-gradient(150deg, rgba(217,22,86,0.05), rgba(100,13,95,0.03));
  box-shadow:var(--shadow-card);
}
.author-box-image{
  width:76px;
  height:76px;
  flex:none;
  border-radius:50%;
  overflow:hidden;
  border:2px solid #fff;
  box-shadow:var(--shadow-card);
  background:var(--bg-alt);
}
.author-box-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.author-box-content .author-eyebrow{
  display:inline-block;
  font-size:0.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--accent-2);
  margin-bottom:6px;
}
.author-box-content h3{
  font-family:var(--font-head);
  font-size:1.3rem;
  margin:0 0 10px;
  color:var(--text);
}
.author-box-content p{
  margin:0;
  line-height:1.7;
  color:var(--text-muted);
  font-size:0.95rem;
}

@media (max-width:560px){
  .author-box{ flex-direction:column; padding:24px; }
}
/* ===== Blog Content — Rich Elements (responsive) ===== */

/* Tables */
.post-article-body table{
  width:100%;
  border-collapse:collapse;
  margin:28px 0;
  font-size:0.92rem;
  background:#ffffff;
}
.post-article-body table th,
.post-article-body table td{
  padding:12px 16px;
  text-align:left;
  border:1px solid var(--border-strong) !important;
  vertical-align:top;
  background:#ffffff;
}
.post-article-body table th{
  font-family:var(--font-head);
  font-weight:600;
  color:var(--text);
}

/* Table horizontal scroll on small screens */
.post-article-body .table-wrap,
.post-article-body table{ display:block; }
.post-article-body .table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:28px 0;
}
.post-article-body .table-wrap table{ margin:0; min-width:520px; }
@media (min-width:640px){
  .post-article-body table{ display:table; }
}

/* Inline code */
.post-article-body code{
  background:var(--bg-alt);
  border:1px solid var(--border);
  border-radius:6px;
  padding:2px 7px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:0.88em;
  color:var(--accent-2);
}
/* Code block */
.post-article-body pre{
  background:#101828;
  color:#e8eaf1;
  border-radius:var(--radius-sm);
  padding:20px;
  overflow-x:auto;
  margin:28px 0;
  font-size:0.88rem;
  line-height:1.6;
  -webkit-overflow-scrolling:touch;
}
.post-article-body pre code{
  background:none;
  border:none;
  padding:0;
  color:inherit;
  font-size:inherit;
}

/* Blockquote (reinforced) */
.post-article-body blockquote{
  border-left:3px solid var(--accent-2);
  background:var(--bg-alt);
  padding:16px 22px;
  margin:28px 0;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-style:italic;
  color:var(--text);
}
.post-article-body blockquote p:last-child{ margin-bottom:0; }

/* Figure + caption */
.post-article-body figure{ margin:28px 0; }
.post-article-body figure img{ margin:0; }
.post-article-body figcaption{
  text-align:center;
  font-size:0.82rem;
  color:var(--text-faint);
  margin-top:10px;
}

/* Responsive embeds (iframe / video) */
.post-article-body iframe,
.post-article-body video{
  width:100%;
  max-width:100%;
  aspect-ratio:16/9;
  height:auto;
  border:none;
  border-radius:var(--radius-sm);
  margin:28px 0;
  display:block;
}

/* Horizontal rule */
.post-article-body hr{
  border:none;
  border-top:1px solid var(--border);
  margin:40px 0;
}

/* Nested lists */
.post-article-body li > ul,
.post-article-body li > ol{ margin:10px 0 0; }

/* Definition lists */
.post-article-body dl{ margin:24px 0; }
.post-article-body dt{ font-weight:600; color:var(--text); margin-top:14px; }
.post-article-body dd{ margin:4px 0 0; color:var(--text-muted); }

/* Small screens */
@media (max-width:600px){
  .post-article-body{ font-size:1rem; }
  .post-article-body table th,
  .post-article-body table td{ padding:10px 12px; }
  .post-article-body pre{ padding:16px; font-size:0.82rem; }
}

/* utils */
.mt-0{margin-top:0} .mb-0{margin-bottom:0}
.text-center{text-align:center}
.flex{display:flex} .items-center{align-items:center} .justify-between{justify-content:space-between} .gap-8{gap:8px} .gap-12{gap:12px} .gap-16{gap:16px}
.mx-auto{margin-left:auto;margin-right:auto}

@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ max-width:420px; margin:0 auto; }
  .grid-2, .grid-3, .grid-4{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:repeat(2,1fr); }
  .form-row{ grid-template-columns:1fr; }
  .cta-band{ padding:40px 24px; }
}
@media (max-width: 600px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  section{ padding:64px 0; }

  .btn-primary {
    font-size: 13px;
}
.nav-cta a {
    font-size: 12px;
    padding: 10px;
}
.nav {
    gap: 10px;
}
.locations-band {
    padding: 20px;
}
.location-card {
    padding: 18px;
}
.form-card {
    padding: 26px;
}
h1, .blog-hero-text h1 {
    
    font-size: 34px;
}
}

/* Mobile nav drawer */
.mobile-drawer{
  position:fixed; inset:0; z-index:200; background:#ffffff;
  display:flex; flex-direction:column; padding:24px; transform:translateX(100%);
  transition:transform .25s ease;
}
.mobile-drawer.open{ transform:translateX(0); }
.mobile-drawer .close-btn{ align-self:flex-end; background:none; border:none; color:var(--text); }
.mobile-drawer ul{ margin-top:32px; display:flex; flex-direction:column; gap:4px; }
.mobile-drawer a{ display:block; padding:14px 6px; font-size:1.05rem; border-bottom:1px solid var(--border); color:var(--text); }




.orb-card .chip svg{
  width:15px;
  height:15px;
  flex:none;          /* SVG ko shrink hone se roko */
}
.orb-card .core svg{
  width:52px;
  height:52px;
  flex:none;
}
@media (max-width: 900px){
  .orb-card .chip.c3 {
    top: 27%;
    right: 2%;
}
  .hero-visual,
  .hero-visual.small{
    width:100%;
    max-width:320px;
    margin:32px auto 0;
    aspect-ratio:auto;      /* aspect-ratio hata do */
  }
  .orb-card{
    height:320px;           /* explicit height */
    aspect-ratio:auto;
  }
  .orb-card .chip svg,
  .orb-card .core svg{ flex:none; }
  .orb-card .chip svg{ width:15px; height:15px; }
  .orb-card .core svg{ width:44px; height:44px; }
}