/* ============================================================
   About SEO Services IT — clean, symmetric section
   (rebuilt: straight layout, balanced columns, tidy badges)
   ============================================================ */
:root{
  --ssi-green:#0ca766;
  --ssi-green-dk:#075b3e;
  --ssi-ink:#0d2233;
  --ssi-muted:#5d6b73;
}

.ssi-about-3d, .ssi-about-3d *{ box-sizing:border-box; }

.ssi-about-3d{
  position:relative;
  padding:52px 20px;
  font-family:Inter, 'Plus Jakarta Sans', Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ssi-ink);
  background:
    radial-gradient(circle at 88% 6%, rgba(12,167,102,.08), transparent 42%),
    radial-gradient(circle at 6% 96%, rgba(12,167,102,.06), transparent 40%),
    linear-gradient(180deg,#ffffff 0%, #f4faf7 100%);
}

/* clutter from the old design — hidden for a clean look */
.ssi-orb, .ssi-cube, .ssi-glass-layer, .ssi-glow-ring, .ssi-success-pill{ display:none !important; }

/* container panel */
.ssi-about-wrap{
  max-width:1180px;
  margin:0 auto;
  background:#fff;
  border:1px solid rgba(12,167,102,.10);
  border-radius:26px;
  padding:38px 42px 0;
  box-shadow:0 26px 60px rgba(7,57,43,.10);
}

.ssi-about-grid{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:44px;
  align-items:center;
}

/* ---------- Left: founder photo ---------- */
.ssi-about-visual{
  position:relative;
  display:flex;
  justify-content:center;
}
.ssi-about-visual::before{
  content:""; position:absolute; left:-18px; bottom:-18px;
  width:150px; height:150px; border-radius:24px;
  background:linear-gradient(135deg,#5ee49f,#0c7e50);
  opacity:.16; transform:rotate(16deg); z-index:0;
}
.ssi-about-visual::after{
  content:""; position:absolute; right:-16px; top:-16px;
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle,#0ca766,#075b3e);
  opacity:.14; z-index:0;
}

.ssi-photo-card{
  position:relative;
  z-index:1;
  width:100%;
  max-width:368px;
  padding:9px;
  border-radius:24px;
  background:#fff;
  box-shadow:0 26px 60px rgba(7,57,43,.16);
  transition:transform .4s ease, box-shadow .4s ease;
}
.ssi-about-visual:hover .ssi-photo-card{
  transform:translateY(-6px);
  box-shadow:0 38px 80px rgba(7,57,43,.20);
}
.ssi-photo-card img{
  display:block;
  width:100%;
  aspect-ratio:1 / 1.04;
  object-fit:cover;
  object-position:50% 20%;
  border-radius:18px;
}
.ssi-photo-ph{
  aspect-ratio:1 / 1.04; border-radius:18px; display:grid; place-items:center;
  background:linear-gradient(135deg,#0ca766,#053b30);
}
.ssi-photo-ph img{ width:60%; aspect-ratio:auto; object-fit:contain; }

/* Since 2012 — top-left corner badge */
/* Compact "SINCE 2012" tag (single small pill) */
.ssi-since-card{
  position:absolute; top:-10px; left:-10px; z-index:3;
  width:auto; padding:7px 13px;
  display:inline-flex; align-items:baseline; gap:6px;
  color:#fff; border-radius:11px;
  background:linear-gradient(150deg,#0fae69,#0a6b47);
  box-shadow:0 10px 22px rgba(12,167,102,.32);
  animation:none;
}
.ssi-since-card span{ font-size:10.5px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; opacity:.9; }
.ssi-since-card strong{ margin:0; font-size:16px; font-weight:900; line-height:1; }
.ssi-since-card small{ display:none; }

/* 500+ Brands — bottom-right corner chip */
.ssi-stat-chip{
  position:absolute; right:-14px; bottom:-12px; left:auto; top:auto; z-index:3;
  display:flex; align-items:center; gap:11px;
  padding:12px 18px 12px 12px; border-radius:14px;
  background:#fff; border:1px solid rgba(6,63,45,.07);
  box-shadow:0 16px 34px rgba(7,57,43,.16);
  animation:none;
}
.ssi-stat-chip .ic{
  width:40px; height:40px; flex:0 0 auto; border-radius:11px; display:grid; place-items:center;
  color:#fff; background:linear-gradient(135deg,#0ca766,#075b3e);
}
.ssi-stat-chip .ic svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
.ssi-stat-chip strong{ display:block; font-size:20px; font-weight:900; color:#0a5439; line-height:1; }
.ssi-stat-chip small{ display:block; font-size:11px; font-weight:700; color:var(--ssi-muted); margin-top:2px; }

/* ---------- Right: content ---------- */
.ssi-about-card{
  position:relative;
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
  transform:none;
}
.ssi-about-card::before{ display:none; }

.ssi-kicker{
  margin:0;
  display:inline-block;
  color:var(--ssi-green-dk);
  font-size:13px; font-weight:800; letter-spacing:2.5px; text-transform:uppercase;
}
.ssi-kicker::after{
  content:""; display:block; width:54px; height:3px; border-radius:2px;
  background:var(--ssi-green); margin-top:12px;
}

.ssi-about-card h2{
  margin:12px 0 0;
  color:var(--ssi-ink);
  font-size:clamp(28px, 2.9vw, 40px);
  line-height:1.1; letter-spacing:-1px; font-weight:900;
}

.ssi-title-line{ display:none; }

.ssi-copy{ margin-top:15px; max-width:none; }
.ssi-copy p{ margin:0 0 11px; color:#3a474e; font-size:15px; line-height:1.62; }
.ssi-copy strong{ color:#0d6a45; font-weight:800; }
.ssi-copy em{ color:#0a5e3e; font-style:italic; font-weight:800; }

.ssi-goal-box{
  margin:18px 0 0;
  display:flex; align-items:center; gap:14px;
  padding:14px 18px; border-radius:14px;
  background:linear-gradient(100deg, rgba(231,248,238,.92), rgba(255,255,255,.6));
  border:1px solid rgba(12,167,102,.16);
  box-shadow:none;
}
.ssi-target-icon{
  width:48px; height:48px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center;
  color:#fff; background:linear-gradient(135deg,#0ca766,#075b3e);
  box-shadow:0 12px 24px rgba(12,167,102,.3);
}
.ssi-target-icon svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.ssi-goal-box p{
  margin:0; font-size:14px; line-height:1.5; font-weight:700; color:#0a5e3e; font-style:italic;
}
.ssi-goal-box p strong{ color:var(--ssi-ink); font-weight:900; font-style:normal; }

/* ---------- Feature row ---------- */
.ssi-about-features{
  width:auto;
  margin:34px -42px 0;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border-top:1px solid rgba(12,167,102,.14);
  background:#fbfffd;
  border-radius:0 0 28px 28px;
  box-shadow:none;
  padding:0;
}
.ssi-feature-item{
  display:flex; gap:14px; align-items:flex-start;
  grid-template-columns:none;
  padding:17px 20px;
  border-right:1px solid rgba(12,167,102,.12);
}
.ssi-feature-item:last-child{ border-right:0; }
.ssi-feature-icon{
  width:46px; height:46px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center;
  color:var(--ssi-green); background:rgba(12,167,102,.10);
}
.ssi-feature-icon svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ssi-feature-item strong{ display:block; margin-bottom:5px; color:var(--ssi-ink); font-size:14.5px; font-weight:800; }
.ssi-feature-item p{ margin:0; color:var(--ssi-muted); font-size:12.5px; line-height:1.55; }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .ssi-about-wrap{ padding:40px 28px 0; }
  .ssi-about-grid{ grid-template-columns:1fr; gap:54px; }
  .ssi-about-visual{ max-width:430px; margin:0 auto; }
  .ssi-about-features{ margin:42px -28px 0; grid-template-columns:1fr 1fr; }
  .ssi-feature-item:nth-child(2){ border-right:0; }
  .ssi-feature-item:nth-child(-n+2){ border-bottom:1px solid rgba(12,167,102,.12); }
}
@media (max-width:560px){
  .ssi-about-3d{ padding:56px 14px; }
  .ssi-about-wrap{ padding:30px 18px 0; border-radius:22px; }
  .ssi-about-card h2{ font-size:30px; }
  .ssi-copy p{ font-size:15.5px; }
  .ssi-about-features{ margin:34px -18px 0; grid-template-columns:1fr; }
  .ssi-feature-item{ border-right:0; border-bottom:1px solid rgba(12,167,102,.12); }
  .ssi-feature-item:last-child{ border-bottom:0; }
  .ssi-since-card{ width:108px; top:-10px; left:-10px; }
  .ssi-stat-chip{ right:-6px; bottom:-10px; }
}
@media (prefers-reduced-motion:reduce){
  .ssi-photo-card{ transition:none; }
}