/* ═══════════════════════════════════════════════════════════════════
   GoroSolution — about.css  ·  About Us Page
   One rule per line · Requires navbar-footer.css loaded first
═══════════════════════════════════════════════════════════════════ */

/* ── Shared layout ── */
.ab-container { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
.ab-section { padding: 96px 0; }
.ab-section-alt { background: rgba(26,79,255,.025); transition: background .35s cubic-bezier(.16,1,.3,1); }
[data-theme="dark"] .ab-section-alt { background: rgba(77,127,255,.04); }
.ab-label { display: inline-flex; align-items: center; gap: 7px; font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--c-acc-b); margin-bottom: 14px; transition: color .35s; }
[data-theme="dark"] .ab-label { color: #7FA8FF; }
.ab-heading { font-size: clamp(1.7rem, 3.5vw, 2.5rem); font-weight: 900; color: var(--c-text); letter-spacing: -.035em; line-height: 1.12; margin-bottom: 22px; transition: color .35s; }
.ab-section-header { text-align: center; max-width: 600px; margin: 0 auto 60px; }
.ab-section-sub { font-size: .92rem; color: var(--c-text2); line-height: 1.72; transition: color .35s; }

/* ══════════════════════════════
   HERO
══════════════════════════════ */
.ab-hero { padding: 100px 0 88px; position: relative; overflow: hidden; }
.ab-hero::before { content: ''; position: absolute; top: -160px; left: 50%; transform: translateX(-50%); width: 820px; height: 820px; background: radial-gradient(circle, rgba(26,79,255,.07) 0%, transparent 65%); pointer-events: none; }
.ab-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--c-border), transparent); }
.ab-hero-inner { max-width: 1160px; margin: 0 auto; padding: 0 28px; text-align: center; position: relative; }
.ab-hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 18px; background: linear-gradient(135deg, rgba(26,79,255,.09) 0%, rgba(224,16,10,.05) 100%); border: 1px solid rgba(26,79,255,.16); border-radius: 100px; font-size: .73rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--c-acc-b); margin-bottom: 28px; }
[data-theme="dark"] .ab-hero-badge { background: rgba(77,127,255,.1); border-color: rgba(77,127,255,.22); color: #7FA8FF; }
.ab-hero-badge i { font-size: .75rem; }
.ab-hero-title { font-size: clamp(2.8rem, 6vw, 4.8rem); font-weight: 900; color: var(--c-text); letter-spacing: -.048em; line-height: 1.04; margin-bottom: 26px; }
.ab-hero-accent { background: linear-gradient(135deg, #1A4FFF 0%, #E01010 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.ab-hero-sub { font-size: clamp(.92rem, 1.6vw, 1.06rem); color: var(--c-text2); line-height: 1.76; max-width: 620px; margin: 0 auto 52px; }

/* Stats row */
.ab-hero-stats { display: inline-flex; align-items: center; gap: 0; background: var(--c-surf); border: 1px solid var(--c-border); border-radius: var(--rad-lg); padding: 20px 36px; box-shadow: var(--shadow-sm); flex-wrap: wrap; justify-content: center; transition: background .35s cubic-bezier(.16,1,.3,1), border-color .35s; }
[data-theme="dark"] .ab-hero-stats { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.07); }
.ab-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 28px; }
.ab-stat-num { font-size: 1.65rem; font-weight: 900; color: var(--c-text); letter-spacing: -.04em; line-height: 1; }
.ab-stat-label { font-size: .72rem; font-weight: 600; color: var(--c-text3); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.ab-stat-div { width: 1px; height: 42px; background: var(--c-border); flex-shrink: 0; }

/* ══════════════════════════════
   MISSION — TWO COLUMN
══════════════════════════════ */
.ab-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.ab-col-text p { font-size: .91rem; color: var(--c-text2); line-height: 1.8; margin-bottom: 16px; transition: color .35s; }
.ab-col-text p:last-child { margin-bottom: 0; }
.ab-col-text strong { color: var(--c-text); font-weight: 700; transition: color .35s; }

/* Visual card */
.ab-col-visual { display: flex; justify-content: center; }
.ab-visual-card { width: 100%; max-width: 360px; aspect-ratio: 4/3; background: linear-gradient(145deg, var(--c-surf) 0%, rgba(26,79,255,.04) 100%); border: 1px solid var(--c-border); border-radius: var(--rad-xl); padding: 36px 32px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; box-shadow: var(--shadow-md); position: relative; overflow: hidden; transition: background .35s cubic-bezier(.16,1,.3,1), border-color .35s; }
.ab-visual-card::before { content: ''; position: absolute; top: -60px; right: -60px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(26,79,255,.1) 0%, transparent 70%); pointer-events: none; }
.ab-visual-icon { width: 64px; height: 64px; border-radius: var(--rad-lg); background: linear-gradient(135deg, rgba(26,79,255,.12) 0%, rgba(224,16,10,.08) 100%); border: 1px solid rgba(26,79,255,.15); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--c-acc-b); }
[data-theme="dark"] .ab-visual-icon { color: #7FA8FF; background: rgba(77,127,255,.12); border-color: rgba(77,127,255,.2); }
.ab-visual-lines { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.ab-vline { height: 8px; border-radius: 100px; background: var(--c-border); animation: ab-pulse 2.4s ease-in-out infinite; }
.ab-vline-1 { width: 85%; animation-delay: 0s; }
.ab-vline-2 { width: 65%; animation-delay: .3s; }
.ab-vline-3 { width: 75%; animation-delay: .6s; }
.ab-vline-4 { width: 50%; animation-delay: .9s; }
@keyframes ab-pulse { 0%, 100% { opacity: .35; } 50% { opacity: .75; background: linear-gradient(90deg, rgba(26,79,255,.4), rgba(224,16,10,.25)); } }
.ab-visual-tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ab-tag { padding: 5px 12px; border-radius: 100px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.ab-tag-red { background: rgba(224,16,10,.1); border: 1px solid rgba(224,16,10,.2); color: #E01010; }
.ab-tag-blue { background: rgba(26,79,255,.1); border: 1px solid rgba(26,79,255,.2); color: var(--c-acc-b); }
[data-theme="dark"] .ab-tag-blue { color: #7FA8FF; }
.ab-tag-gray { background: var(--c-border); border: 1px solid var(--c-border); color: var(--c-text2); }

/* ══════════════════════════════
   VALUES GRID
══════════════════════════════ */
.ab-values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ab-value-card { background: var(--c-surf); border: 1px solid var(--c-border); border-radius: var(--rad-lg); padding: 30px 26px; transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s, background .35s cubic-bezier(.16,1,.3,1); position: relative; overflow: hidden; }
.ab-value-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(26,79,255,.04) 0%, transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.ab-value-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(26,79,255,.18); }
.ab-value-card:hover::before { opacity: 1; }
[data-theme="dark"] .ab-value-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.07); }
[data-theme="dark"] .ab-value-card:hover { border-color: rgba(77,127,255,.28); box-shadow: 0 8px 32px rgba(0,0,0,.4); }
.ab-value-icon { width: 44px; height: 44px; border-radius: var(--rad-sm); background: linear-gradient(135deg, rgba(26,79,255,.1) 0%, rgba(224,16,10,.06) 100%); border: 1px solid rgba(26,79,255,.13); display: flex; align-items: center; justify-content: center; font-size: .95rem; color: var(--c-acc-b); margin-bottom: 18px; transition: transform .2s var(--ease-back), background .35s, color .35s; }
[data-theme="dark"] .ab-value-icon { color: #7FA8FF; background: rgba(77,127,255,.11); border-color: rgba(77,127,255,.18); }
.ab-value-card:hover .ab-value-icon { transform: scale(1.1) rotate(-4deg); }
.ab-value-card h3 { font-size: .95rem; font-weight: 800; color: var(--c-text); margin-bottom: 10px; letter-spacing: -.015em; transition: color .35s; }
.ab-value-card p { font-size: .845rem; color: var(--c-text2); line-height: 1.72; margin: 0; transition: color .35s; }

/* ══════════════════════════════
   STORY + TIMELINE
══════════════════════════════ */
.ab-story { max-width: 780px; margin: 0 auto; }
.ab-story-body { margin-bottom: 52px; }
.ab-story-body p { font-size: .91rem; color: var(--c-text2); line-height: 1.82; margin-bottom: 18px; transition: color .35s; }
.ab-story-body p:last-child { margin-bottom: 0; }

/* Timeline */
.ab-timeline { position: relative; padding-left: 28px; }
.ab-timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--c-acc-b) 0%, rgba(26,79,255,.15) 100%); border-radius: 2px; }
[data-theme="dark"] .ab-timeline::before { background: linear-gradient(180deg, #7FA8FF 0%, rgba(77,127,255,.12) 100%); }
.ab-tl-item { position: relative; padding: 0 0 40px 28px; }
.ab-tl-item:last-child { padding-bottom: 0; }
.ab-tl-dot { position: absolute; left: -21px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--c-acc-b); border: 3px solid var(--c-bg); box-shadow: 0 0 0 2px var(--c-acc-b); transition: transform .2s var(--ease-back); }
[data-theme="dark"] .ab-tl-dot { background: #7FA8FF; box-shadow: 0 0 0 2px #7FA8FF; border-color: var(--c-bg); }
.ab-tl-item:hover .ab-tl-dot { transform: scale(1.25); }
.ab-tl-year { display: inline-block; font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--c-acc-b); margin-bottom: 6px; }
[data-theme="dark"] .ab-tl-year { color: #7FA8FF; }
.ab-tl-content h4 { font-size: 1rem; font-weight: 800; color: var(--c-text); margin-bottom: 6px; letter-spacing: -.02em; transition: color .35s; }
.ab-tl-content p { font-size: .875rem; color: var(--c-text2); line-height: 1.72; margin: 0; transition: color .35s; }

/* ══════════════════════════════
   TECH GRID
══════════════════════════════ */
.ab-tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ab-tech-card { background: var(--c-surf); border: 1px solid var(--c-border); border-radius: var(--rad-lg); padding: 28px 22px; text-align: center; transition: transform .22s var(--ease), box-shadow .22s, border-color .22s, background .35s cubic-bezier(.16,1,.3,1); }
.ab-tech-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(26,79,255,.16); }
[data-theme="dark"] .ab-tech-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.07); }
[data-theme="dark"] .ab-tech-card:hover { border-color: rgba(77,127,255,.25); box-shadow: 0 8px 32px rgba(0,0,0,.4); }
.ab-tech-icon { font-size: 2rem; margin-bottom: 14px; display: block; transition: transform .2s var(--ease-back); }
.ab-tech-card:hover .ab-tech-icon { transform: scale(1.12); }
/* Brand colors */
.ab-tech-card:nth-child(1) .ab-tech-icon { color: #FF9900; }
.ab-tech-card:nth-child(2) .ab-tech-icon { color: #F6821F; }
.ab-tech-card:nth-child(3) .ab-tech-icon { color: #6772E5; }
.ab-tech-card:nth-child(4) .ab-tech-icon { color: var(--c-acc-b); }
[data-theme="dark"] .ab-tech-card:nth-child(4) .ab-tech-icon { color: #7FA8FF; }
.ab-tech-card h4 { font-size: .88rem; font-weight: 800; color: var(--c-text); margin-bottom: 8px; letter-spacing: -.015em; transition: color .35s; }
.ab-tech-card p { font-size: .8rem; color: var(--c-text2); line-height: 1.7; margin: 0; transition: color .35s; }

/* ══════════════════════════════
   CTA SECTION
══════════════════════════════ */
.ab-cta-section { padding: 96px 0; }
.ab-cta-box { position: relative; border-radius: var(--rad-xl); overflow: hidden; background: linear-gradient(135deg, #07101E 0%, #0D1F44 50%, #0A0F1A 100%); padding: 72px 48px; text-align: center; box-shadow: var(--shadow-xl); }
[data-theme="light"] .ab-cta-box { background: linear-gradient(135deg, #07101E 0%, #1A3A80 50%, #07101E 100%); }
.ab-cta-glow { position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 600px; height: 400px; background: radial-gradient(ellipse, rgba(26,79,255,.35) 0%, transparent 70%); pointer-events: none; }
.ab-cta-content { position: relative; z-index: 1; }
.ab-cta-content h2 { font-size: clamp(1.7rem, 3.5vw, 2.6rem); font-weight: 900; color: #ECF1FF; letter-spacing: -.04em; margin-bottom: 14px; }
.ab-cta-content p { font-size: .96rem; color: rgba(236,241,255,.55); max-width: 480px; margin: 0 auto 40px; line-height: 1.72; }
.ab-cta-btns { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* Primary CTA */
.ab-cta-primary { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 30px; background: linear-gradient(to right,#0A2299,#4D7FFF,#0A2299,#0A2299,#4D7FFF,#0A2299); background-size: 250%; background-position: left; color: #FFFFFF; border-radius: 100px; font-size: .92rem; font-weight: 700; text-decoration: none; letter-spacing: .02em; overflow: hidden; transition-duration: 1s; box-shadow: 0 6px 28px rgba(26,79,255,.5); border: none; cursor: pointer; }
.ab-cta-primary::before { content: ''; position: absolute; display: flex; align-items: center; justify-content: center; width: 97%; height: 88%; border-radius: 100px; background-color: rgba(0,0,0,.8); background-size: 200%; transition-duration: 1s; z-index: 0; }
.ab-cta-primary span, .ab-cta-primary i { position: relative; z-index: 1; color: #fff; }
.ab-cta-primary:hover { background-position: right; transition-duration: 1s; box-shadow: 0 10px 40px rgba(26,79,255,.7); }
.ab-cta-primary:hover::before { background-position: right; transition-duration: 1s; }
.ab-cta-primary:active { transform: scale(.95); }

/* Secondary CTA */
.ab-cta-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; border: 1.5px solid rgba(255,255,255,.15); color: rgba(236,241,255,.7); border-radius: 100px; font-size: .92rem; font-weight: 600; text-decoration: none; transition: all .22s var(--ease); letter-spacing: .01em; }
.ab-cta-secondary:hover { border-color: rgba(255,255,255,.4); color: #ECF1FF; background: rgba(255,255,255,.06); transform: translateY(-2px); }
.ab-cta-secondary:active { transform: scale(.97); }

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 1040px) { .ab-tech-grid { grid-template-columns: repeat(2, 1fr); } .ab-values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .ab-two-col { grid-template-columns: 1fr; gap: 44px; } .ab-col-visual { order: -1; } .ab-visual-card { max-width: 320px; } .ab-section { padding: 72px 0; } .ab-cta-box { padding: 52px 28px; } }
@media (max-width: 640px) { .ab-values-grid { grid-template-columns: 1fr; } .ab-tech-grid { grid-template-columns: repeat(2, 1fr); } .ab-hero { padding: 72px 0 60px; } .ab-hero-stats { padding: 16px 20px; gap: 0; } .ab-stat { padding: 0 16px; } .ab-stat-div { height: 32px; } .ab-container { padding: 0 16px; } .ab-section { padding: 56px 0; } .ab-cta-section { padding: 56px 0; } .ab-cta-btns { flex-direction: column; align-items: stretch; } .ab-cta-primary, .ab-cta-secondary { justify-content: center; } }
@media (max-width: 420px) { .ab-hero-stats { flex-direction: column; gap: 16px; } .ab-stat-div { display: none; } .ab-tech-grid { grid-template-columns: 1fr; } }