/* ============================================================
   KARAMBASE — About page extra sections (about-extra.css)
   Loaded only by the "Karambase — About" template (page 533).
   Cyberskins design language. Self-defines --cs-* as a safety net.
   ============================================================ */

:root{
    --cs-bg-0:#080A0E; --cs-bg-1:#0B0D12; --cs-bg-card:#0D1018;
    --cs-red:#F5222D; --cs-orange:#FF6B00;
    --cs-txt:#F0F2F8; --cs-txt2:#8B8F9A; --cs-txt3:#4A4E5A;
    --cs-bdr:rgba(255,255,255,.07); --cs-bdr2:rgba(255,255,255,.13);
}

.ab2 .container{ max-width:1224px; margin:0 auto; padding:0 clamp(20px,5vw,48px); }
.ab2 em{ font-style:normal; color:var(--cs-red); }

/* shared bits */
.ab2-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--cs-red); margin:0 0 14px; }
.ab2-eyebrow::before{ content:''; width:26px; height:2px; background:var(--cs-red); }
.ab2-eyebrow--center{ justify-content:center; }
.ab2-h2{ font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase; font-size:clamp(27px,4vw,44px); line-height:1.05; letter-spacing:.01em; color:#fff; margin:0 0 14px; }
.ab2-sec-head{ max-width:680px; margin:0 auto clamp(30px,5vw,52px); text-align:center; }
.ab2-sec-sub{ color:var(--cs-txt2); font-size:16px; line-height:1.6; max-width:560px; margin:6px auto 0; }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* section rhythm + alternating bg */
.ab2-story,.ab2-stats,.ab2-safe,.ab2-timeline,.ab2-reviews{ position:relative; padding:clamp(54px,8vw,100px) 0; }
.ab2-story{ background:var(--cs-bg-1); }
.ab2-stats{ background:var(--cs-bg-0); border-top:1px solid var(--cs-bdr); border-bottom:1px solid var(--cs-bdr); }
.ab2-safe{ background:var(--cs-bg-1); }
.ab2-timeline{ background:var(--cs-bg-0); }
.ab2-reviews{ background:var(--cs-bg-1); }

/* 2 — STORY */
.ab2-story__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,72px); align-items:center; }
.ab2-story__copy p{ color:var(--cs-txt2); font-size:16px; line-height:1.75; margin:0 0 16px; max-width:56ch; }
.ab2-story__sign{ font-family:'Rajdhani',sans-serif; font-weight:600; color:var(--cs-txt3); letter-spacing:.05em; margin-top:6px; }
.ab2-story__art{ position:relative; min-height:320px; display:flex; align-items:center; justify-content:center; }
.ab2-story__art img{ position:relative; z-index:2; width:min(100%,520px); filter:drop-shadow(0 24px 50px rgba(0,0,0,.6)); }
.ab2-story__glow{ position:absolute; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(245,34,45,.22),transparent 65%); filter:blur(18px); }
.ab2-story__hex{ position:absolute; width:300px; height:300px; clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%); background:linear-gradient(160deg,rgba(245,34,45,.12),rgba(0,0,0,.2)); border:1px solid var(--cs-bdr2); }
.ab2-story__tag{ position:absolute; right:4%; bottom:8%; z-index:3; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:rgba(13,16,24,.88); border:1px solid var(--cs-bdr2); padding:7px 12px; clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); }

/* 3 — STATS */
.ab2-stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.ab2-stat{ text-align:center; padding:26px 16px; background:var(--cs-bg-card); border:1px solid var(--cs-bdr); clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%); transition:border-color .3s,box-shadow .3s; }
.ab2-stat:hover{ border-color:rgba(245,34,45,.35); box-shadow:0 0 26px rgba(245,34,45,.12); }
.ab2-stat__num{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:clamp(32px,5vw,52px); line-height:1; color:#fff; }
.ab2-stat__lbl{ font-family:'Rajdhani',sans-serif; font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--cs-txt2); margin-top:8px; }

/* 4 — WHY (reuse .about-why; just give breathing room) */
.ab2-why{ background:var(--cs-bg-1); border-top:1px solid var(--cs-bdr); }

/* 5 — SAFE */
.ab2-safe__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.ab2-safe__card{ padding:26px 22px; background:var(--cs-bg-card); border:1px solid var(--cs-bdr); clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%); transition:transform .3s,border-color .3s,box-shadow .3s; }
.ab2-safe__card:hover{ transform:translateY(-6px); border-color:rgba(245,34,45,.4); box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 30px rgba(245,34,45,.12); }
.ab2-safe__icon{ width:46px; height:46px; display:flex; align-items:center; justify-content:center; color:var(--cs-red); background:rgba(245,34,45,.1); border:1px solid rgba(245,34,45,.25); clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); margin-bottom:16px; }
.ab2-safe__title{ font-family:'Barlow Condensed',sans-serif; font-weight:600; text-transform:uppercase; font-size:18px; letter-spacing:.02em; color:#fff; margin:0 0 8px; }
.ab2-safe__text{ color:var(--cs-txt2); font-size:14px; line-height:1.6; margin:0; }

/* 6 — TIMELINE */
.ab2-tl{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.ab2-tl__line{ position:absolute; top:9px; left:8px; right:8px; height:2px; background:linear-gradient(90deg,transparent,var(--cs-bdr2) 10%,var(--cs-bdr2) 90%,transparent); }
.ab2-tl__item{ position:relative; padding-top:36px; }
.ab2-tl__dot{ position:absolute; top:2px; left:0; width:16px; height:16px; border-radius:50%; background:var(--cs-red); box-shadow:0 0 0 4px rgba(245,34,45,.16),0 0 16px rgba(245,34,45,.6); }
.ab2-tl__year{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:22px; color:var(--cs-red); text-transform:uppercase; margin-bottom:8px; }
.ab2-tl__title{ font-family:'Barlow Condensed',sans-serif; font-weight:600; text-transform:uppercase; font-size:17px; color:#fff; margin:0 0 6px; }
.ab2-tl__text{ color:var(--cs-txt2); font-size:14px; line-height:1.6; margin:0; }

/* 7 — REVIEWS */
.ab2-reviews__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.ab2-rev{ padding:26px 24px; background:var(--cs-bg-card); border:1px solid var(--cs-bdr); clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%); display:flex; flex-direction:column; gap:14px; }
.ab2-rev__stars{ color:var(--cs-orange); letter-spacing:3px; font-size:15px; }
.ab2-rev__quote{ color:var(--cs-txt); font-size:15px; line-height:1.65; margin:0; flex:1; }
.ab2-rev__foot{ display:flex; align-items:center; gap:12px; border-top:1px solid var(--cs-bdr); padding-top:14px; }
.ab2-rev__av{ width:40px; height:40px; flex:none; display:flex; align-items:center; justify-content:center; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:15px; color:#fff; background:linear-gradient(135deg,var(--cs-red),var(--cs-orange)); clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); }
.ab2-rev__meta{ display:flex; flex-direction:column; }
.ab2-rev__name{ font-weight:600; color:#fff; font-size:14px; display:flex; align-items:center; gap:6px; }
.ab2-rev__check{ display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; font-size:10px; color:#0b0d12; background:#bef970; border-radius:50%; }
.ab2-rev__skin{ color:var(--cs-txt2); font-size:13px; font-family:'Rajdhani',sans-serif; letter-spacing:.02em; }

/* responsive */
@media (max-width:900px){
    .ab2-story__grid{ grid-template-columns:1fr; }
    .ab2-story__art{ order:-1; min-height:240px; }
    .ab2-stats__grid,.ab2-safe__grid,.ab2-tl{ grid-template-columns:repeat(2,1fr); }
    .ab2-reviews__grid{ grid-template-columns:1fr; }
    .ab2-tl__line{ display:none; }
    .ab2-tl__item{ padding-top:0; padding-left:30px; }
    .ab2-tl__dot{ top:6px; }
}
@media (max-width:560px){
    .ab2-stats__grid,.ab2-safe__grid,.ab2-tl{ grid-template-columns:1fr; }
}