/* =============================================================
   csr.css — Avon Alloys CSR Page styles
   Loaded only on csr.php via $page_stylesheet
   ============================================================= */

    :root {
        --gt-theme:   #29ABE2;
        --gt-theme-2: #29ABE2;
        --gt-theme-3: #29ABE2;
        --blue: #29ABE2;
        --blue-rgb: 41, 171, 226;
        --green: #4CAF50;
    }

    body { background: #060606; color: #fff; overflow-x: hidden; }

    /* ══════════════════════════════
       HERO
    ══════════════════════════════ */
    .csr-hero {
        min-height: 100vh;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        background: #060606;
        position: relative;
        overflow: hidden;
        padding-top: 90px;
    }
    .csr-hero::before {
        content: "";
        position: absolute; inset: 0;
        background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
        background-size: 36px 36px;
        pointer-events: none;
    }
    .csr-hero::after {
        content: "";
        position: absolute; top: 0; left: 0; right: 0; height: 2px;
        background: linear-gradient(90deg, #29ABE2 0%, rgba(41,171,226,0.2) 60%, transparent 100%);
    }

    .csr-hero__inner {
        position: relative; z-index: 2;
        padding: 80px 60px 80px 80px;
    }
    .csr-hero__eyebrow {
        display: flex; align-items: center; gap: 14px;
        margin-bottom: 36px;
    }
    .csr-hero__eyebrow-line {
        display: block; width: 36px; height: 1px;
        background: #29ABE2; flex-shrink: 0;
    }
    .csr-hero__eyebrow-text {
        font-family: 'Courier New', monospace;
        font-size: 10px; letter-spacing: 0.18em;
        text-transform: uppercase; color: #29ABE2;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        max-width: calc(100% - 60px);
    }
    .csr-hero__title {
        font-size: clamp(52px, 6.5vw, 108px);
        font-weight: 900; line-height: 0.9;
        letter-spacing: -0.045em;
        color: #fff; text-transform: uppercase;
        margin: 0 0 48px;
    }
    .csr-hero__title .csr-outline {
        display: block;
        -webkit-text-stroke: 1.5px rgba(255,255,255,0.16);
        color: transparent;
    }
    .csr-hero__pillars {
        display: flex; gap: 0;
        border-top: 1px solid rgba(255,255,255,0.08);
        padding-top: 28px; margin-bottom: 40px;
    }
    .csr-hero__pillar {
        padding: 0 28px 0 0; margin-right: 28px;
        border-right: 1px solid rgba(255,255,255,0.08);
    }
    .csr-hero__pillar:last-child { border-right: none; padding-right: 0; }
    .csr-hero__pillar-num {
        display: block;
        font-family: 'Courier New', monospace;
        font-size: 9px; letter-spacing: 0.3em;
        color: #29ABE2; margin-bottom: 6px;
    }
    .csr-hero__pillar-name {
        display: block;
        font-size: 12px; font-weight: 700;
        letter-spacing: 0.01em; color: rgba(255,255,255,0.65);
    }
    .csr-hero__desc {
        font-size: 14px; line-height: 1.8;
        color: rgba(255,255,255,0.36);
        max-width: 460px; margin: 0;
    }

    /* Right side: Orbital Visualization */
    .csr-hero__visual {
        position: relative; z-index: 2;
        display: flex; align-items: center; justify-content: center;
        height: 100%; min-height: 100vh;
        padding: 80px 60px;
    }
    .csr-viz {
        position: relative;
        width: 460px; height: 460px;
        flex-shrink: 0;
        overflow: visible;
    }
    .csr-viz__ring {
        position: absolute; top: 50%; left: 50%;
        border-radius: 50%;
        border: 1px solid rgba(41,171,226,0.1);
        transform: translate(-50%, -50%);
        animation: ring-pulse 3s ease-in-out infinite;
    }
    .csr-viz__ring--a { width: 460px; height: 460px; animation-delay: 0s; }
    .csr-viz__ring--b { width: 340px; height: 340px; animation-delay: 0.4s; border-style: dashed; border-color: rgba(41,171,226,0.08); }
    .csr-viz__ring--c { width: 220px; height: 220px; animation-delay: 0.8s; }
    @keyframes ring-pulse {
        0%, 100% { border-color: rgba(41,171,226,0.1); }
        50%       { border-color: rgba(41,171,226,0.22); }
    }
    .csr-viz__core {
        position: absolute; top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 100px; height: 100px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(41,171,226,0.18) 0%, rgba(41,171,226,0.05) 60%, transparent 100%);
        border: 1.5px solid rgba(41,171,226,0.4);
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        z-index: 10;
        animation: core-glow 2.5s ease-in-out infinite;
    }
    @keyframes core-glow {
        0%, 100% { box-shadow: 0 0 20px rgba(41,171,226,0.15), 0 0 40px rgba(41,171,226,0.06); }
        50%       { box-shadow: 0 0 36px rgba(41,171,226,0.3), 0 0 70px rgba(41,171,226,0.12); }
    }
    .csr-viz__core-label {
        font-family: 'Courier New', monospace;
        font-size: 15px; font-weight: 700;
        letter-spacing: 0.2em; color: #29ABE2;
    }
    .csr-viz__core-since {
        font-family: 'Courier New', monospace;
        font-size: 8px; letter-spacing: 0.15em;
        color: rgba(41,171,226,0.5); margin-top: 3px;
    }
    .csr-viz__orbit-track {
        position: absolute; top: 50%; left: 50%;
        width: 0; height: 0;
        animation: orbit-spin 18s linear infinite;
    }
    .csr-viz__orbit-track:nth-child(6) { animation-delay: 0s; }
    .csr-viz__orbit-track:nth-child(7) { animation-delay: -6s; }
    .csr-viz__orbit-track:nth-child(8) { animation-delay: -12s; }
    @keyframes orbit-spin {
        from { transform: rotate(0deg); }
        to   { transform: rotate(360deg); }
    }
    .csr-viz__node-arm {
        position: absolute;
        top: -200px; left: 0;
        transform: translateX(-50%);
        animation: counter-spin 18s linear infinite;
    }
    .csr-viz__orbit-track:nth-child(6) .csr-viz__node-arm { animation-delay: 0s; }
    .csr-viz__orbit-track:nth-child(7) .csr-viz__node-arm { animation-delay: -6s; }
    .csr-viz__orbit-track:nth-child(8) .csr-viz__node-arm { animation-delay: -12s; }
    @keyframes counter-spin {
        from { transform: translateX(-50%) rotate(0deg); }
        to   { transform: translateX(-50%) rotate(-360deg); }
    }
    .csr-viz__node {
        width: 84px; height: 84px;
        border-radius: 50%;
        background: #0d0d0d;
        border: 1.5px solid rgba(41,171,226,0.3);
        display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 5px;
        cursor: default;
    }
    .csr-viz__node:hover {
        background: rgba(41,171,226,0.08);
        border-color: rgba(41,171,226,0.7);
    }
    .csr-viz__node i { font-size: 18px; color: #29ABE2; }
    .csr-viz__node span {
        font-size: 7.5px; letter-spacing: 0.18em;
        text-transform: uppercase; color: rgba(255,255,255,0.5);
        font-weight: 700; text-align: center; line-height: 1.2;
    }
    .csr-viz__connector {
        position: absolute; top: 50%; left: 50%;
        height: 1px; width: 155px;
        transform-origin: left center;
        background: linear-gradient(to right, rgba(41,171,226,0.3), rgba(41,171,226,0.06));
    }
    .csr-viz__connector:nth-of-type(1) { transform: rotate(90deg); }
    .csr-viz__connector:nth-of-type(2) { transform: rotate(210deg); }
    .csr-viz__connector:nth-of-type(3) { transform: rotate(330deg); }
    .csr-viz__connector::after {
        content: "";
        position: absolute;
        top: -2px; left: 0;
        width: 4px; height: 4px;
        background: #29ABE2; border-radius: 50%;
        animation: dot-travel 3s linear infinite;
    }
    .csr-viz__connector:nth-of-type(2)::after { animation-delay: -1s; }
    .csr-viz__connector:nth-of-type(3)::after { animation-delay: -2s; }
    @keyframes dot-travel {
        0%   { left: 0; opacity: 0; }
        10%  { opacity: 1; }
        90%  { opacity: 1; }
        100% { left: 100%; opacity: 0; }
    }

    /* Hero responsive */
    @media (max-width: 1199px) {
        .csr-hero__inner { padding: 60px 40px 60px 60px; }
        .csr-hero__visual { padding: 60px 40px; }
        .csr-viz { width: 380px; height: 380px; }
        .csr-viz__ring--a { width: 380px; height: 380px; }
        .csr-viz__ring--b { width: 280px; height: 280px; }
        .csr-viz__ring--c { width: 180px; height: 180px; }
        .csr-viz__node-arm { top: -165px; }
        .csr-viz__connector { width: 125px; }
    }
    @media (max-width: 991px) {
        .csr-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 80px; }
        .csr-hero__inner { padding: 48px 40px 16px; }
        .csr-hero__visual { min-height: auto; padding: 20px 40px 48px; }
        .csr-viz { width: 300px; height: 300px; overflow: hidden; }
        .csr-viz__ring--a { width: 300px; height: 300px; }
        .csr-viz__ring--b { width: 220px; height: 220px; }
        .csr-viz__ring--c { width: 142px; height: 142px; }
        .csr-viz__node-arm { top: -116px; }
        .csr-viz__connector { width: 88px; }
        .csr-viz__node { width: 68px; height: 68px; }
        .csr-viz__node i { font-size: 16px; }
    }
    @media (max-width: 767px) {
        .csr-hero { padding-top: 70px; }
        .csr-hero__inner { padding: 40px 24px 12px; }
        .csr-hero__visual { padding: 16px 24px 40px; }
        .csr-hero__pillar { padding: 0 16px 0 0; margin-right: 16px; margin-bottom: 10px; }
        .csr-hero__desc { font-size: 13px; }
        .csr-viz { width: 240px; height: 240px; overflow: hidden; }
        .csr-viz__ring--a { width: 240px; height: 240px; }
        .csr-viz__ring--b { width: 178px; height: 178px; }
        .csr-viz__ring--c { width: 116px; height: 116px; }
        .csr-viz__node-arm { top: -91px; }
        .csr-viz__connector { width: 66px; }
        .csr-viz__node { width: 58px; height: 58px; }
        .csr-viz__node i { font-size: 14px; }
        .csr-viz__node span { font-size: 6.5px; }
        .csr-viz__core { width: 80px; height: 80px; }
        .csr-viz__core-label { font-size: 12px; }
    }
    @media (max-width: 575px) {
        .csr-hero { padding-top: 65px; }
        .csr-hero__inner { padding: 32px 20px 10px; }
        .csr-hero__visual { padding: 12px 20px 36px; }
        .csr-hero__title { margin-bottom: 24px; }
        .csr-hero__pillars { flex-wrap: nowrap; margin-bottom: 18px; padding-top: 18px; gap: 0; overflow: hidden; }
        .csr-hero__pillar { padding: 0 10px 0 0; margin-right: 10px; flex-shrink: 1; min-width: 0; }
        .csr-hero__pillar-num { font-size: 8px; letter-spacing: 0.2em; }
        .csr-hero__pillar-name { font-size: 10px; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .csr-hero__desc { font-size: 12.5px; line-height: 1.7; }
        .csr-viz { width: 200px; height: 200px; overflow: hidden; }
        .csr-viz__ring--a { width: 200px; height: 200px; }
        .csr-viz__ring--b { width: 148px; height: 148px; }
        .csr-viz__ring--c { width: 96px; height: 96px; }
        .csr-viz__node-arm { top: -75px; }
        .csr-viz__connector { width: 50px; }
        .csr-viz__node { width: 50px; height: 50px; }
        .csr-viz__node i { font-size: 13px; }
        .csr-viz__node span { display: none; }
        .csr-viz__core { width: 60px; height: 60px; }
        .csr-viz__core-label { font-size: 10px; letter-spacing: 0.12em; }
        .csr-viz__core-since { display: none; }
    }

    /* ══════════════════════════════
       PILLAR SECTIONS
    ══════════════════════════════ */
    .csr-pillar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        min-height: 600px;
        position: relative;
    }
    .csr-pillar--reverse { direction: rtl; }
    .csr-pillar--reverse > * { direction: ltr; }
    .csr-pillar__img {
        position: relative;
        overflow: hidden;
        min-height: 500px;
    }
    .csr-pillar__img img {
        width: 100%; height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        filter: brightness(0.75) saturate(0.85);
    }
    .csr-pillar__img:hover img { transform: scale(1.04); }
    .csr-pillar__img-overlay {
        position: absolute; inset: 0;
        background: linear-gradient(135deg, rgba(6,6,6,0.5) 0%, rgba(6,6,6,0.1) 100%);
        pointer-events: none;
    }
    .csr-pillar__img-num {
        position: absolute;
        bottom: 24px; left: 28px;
        font-size: 100px; font-weight: 900;
        line-height: 1; letter-spacing: -0.05em;
        -webkit-text-stroke: 1px rgba(255,255,255,0.15);
        color: transparent;
        pointer-events: none; user-select: none;
    }
    .csr-pillar__img-tag {
        position: absolute;
        top: 28px; right: 28px;
        font-family: 'Courier New', monospace;
        font-size: 9px; letter-spacing: 0.25em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.6);
        border: 1px solid rgba(255,255,255,0.2);
        padding: 5px 14px; border-radius: 100px;
        background: rgba(0,0,0,0.3);
        backdrop-filter: blur(4px);
    }
    .csr-pillar__content {
        background: #0a0a0a;
        padding: 80px 72px;
        display: flex; flex-direction: column;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }
    .csr-pillar__content::before {
        content: "";
        position: absolute; top: 0; left: 0;
        width: 100%; height: 2px;
        background: linear-gradient(90deg, #29ABE2, transparent);
    }
    .csr-pillar__content-icon {
        position: absolute;
        bottom: -20px; right: -10px;
        font-size: 160px; opacity: 0.04;
        line-height: 1; pointer-events: none;
    }
    .csr-pillar__label {
        font-family: 'Courier New', monospace;
        font-size: 9px; letter-spacing: 0.3em;
        text-transform: uppercase; color: #29ABE2;
        margin-bottom: 20px;
        display: flex; align-items: center; gap: 10px;
    }
    .csr-pillar__label::before {
        content: ""; display: block;
        width: 24px; height: 1px; background: #29ABE2; flex-shrink: 0;
    }
    .csr-pillar__heading {
        font-size: clamp(28px, 3.5vw, 48px);
        font-weight: 900; letter-spacing: -0.03em;
        color: #fff; line-height: 1.08;
        margin: 0 0 24px;
        text-transform: uppercase;
    }
    .csr-pillar__text {
        font-size: 15px; line-height: 1.8;
        color: rgba(255,255,255,0.48);
        margin: 0 0 36px; max-width: 440px;
    }
    .csr-pillar__facts { display: flex; flex-direction: column; gap: 12px; }
    .csr-pillar__fact {
        display: flex; align-items: flex-start; gap: 12px;
        font-size: 13px; color: rgba(255,255,255,0.55);
        line-height: 1.5;
    }
    .csr-pillar__fact-dot {
        width: 6px; height: 6px; border-radius: 50%;
        background: #29ABE2; flex-shrink: 0; margin-top: 6px;
    }
    @media (max-width: 1199px) {
        .csr-pillar { min-height: auto; }
        .csr-pillar__content { padding: 64px 56px; }
    }
    @media (max-width: 991px) {
        .csr-pillar { grid-template-columns: 1fr; min-height: auto; }
        .csr-pillar--reverse { direction: ltr; }
        .csr-pillar__img { min-height: 300px; }
        .csr-pillar__content { padding: 48px 40px; }
        .csr-pillar__heading { font-size: 32px; }
    }
    @media (max-width: 767px) {
        .csr-pillar__img { min-height: 240px; }
        .csr-pillar__content { padding: 36px 24px; }
        .csr-pillar__text { font-size: 14px; margin-bottom: 24px; }
    }
    @media (max-width: 575px) {
        .csr-pillar__img { min-height: 200px; }
        .csr-pillar__content { padding: 28px 20px; }
        .csr-pillar__heading { font-size: 26px; }
    }

    /* ══════════════════════════════
       IMPACT STATS STRIP
    ══════════════════════════════ */
    .csr-stats {
        background: #000;
        border-top: 1px solid rgba(41,171,226,0.15);
        border-bottom: 1px solid rgba(41,171,226,0.15);
        padding: 0;
    }
    .csr-stats__inner {
        max-width: 1360px; margin: 0 auto;
        display: grid; grid-template-columns: repeat(4, 1fr);
    }
    .csr-stat-item {
        padding: 52px 48px;
        border-right: 1px solid rgba(255,255,255,0.06);
        position: relative;
    }
    .csr-stat-item:last-child { border-right: none; }
    .csr-stat-item::before {
        content: ""; position: absolute;
        top: 0; left: 0; width: 0; height: 2px;
        background: #29ABE2;
        transition: width 0.6s ease;
    }
    .csr-stat-item:hover::before { width: 100%; }
    .csr-stat-item__num {
        font-size: clamp(36px, 4.5vw, 64px);
        font-weight: 900; color: #fff;
        letter-spacing: -0.04em; line-height: 1;
        margin-bottom: 10px;
    }
    .csr-stat-item__num span { color: #29ABE2; }
    .csr-stat-item__label {
        font-size: 10px; letter-spacing: 0.25em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.28); font-weight: 600;
    }
    .csr-stat-item__sub {
        font-size: 12px; color: rgba(255,255,255,0.2);
        margin-top: 4px; line-height: 1.4;
    }
    @media (max-width: 1199px) { .csr-stat-item { padding: 44px 36px; } }
    @media (max-width: 991px) {
        .csr-stats__inner { grid-template-columns: repeat(2, 1fr); }
        .csr-stat-item:nth-child(2) { border-right: none; }
        .csr-stat-item:nth-child(3) { border-top: 1px solid rgba(255,255,255,0.06); }
        .csr-stat-item:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.06); border-right: none; }
        .csr-stat-item { padding: 36px 32px; }
    }
    @media (max-width: 575px) {
        .csr-stats__inner { grid-template-columns: 1fr; }
        .csr-stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); padding: 28px 24px; }
        .csr-stat-item:nth-child(3), .csr-stat-item:nth-child(4) { border-top: none; }
    }

    /* ══════════════════════════════
       COMMITMENT QUOTE
    ══════════════════════════════ */
    .csr-quote {
        padding: 120px 80px;
        background: #060606;
        position: relative;
        overflow: hidden;
    }
    .csr-quote::before {
        content: "";
        position: absolute; inset: 0;
        background-image: radial-gradient(rgba(41,171,226,0.06) 1px, transparent 1px);
        background-size: 48px 48px;
        pointer-events: none;
    }
    .csr-quote__inner {
        max-width: 900px; margin: 0 auto;
        position: relative; z-index: 1;
        text-align: center;
    }
    .csr-quote__mark {
        font-size: 80px; line-height: 0.6;
        color: rgba(41,171,226,0.2);
        font-family: Georgia, serif;
        margin-bottom: 32px; display: block;
    }
    .csr-quote__text {
        font-size: clamp(22px, 3vw, 38px);
        font-weight: 700; line-height: 1.35;
        letter-spacing: -0.02em; color: #fff;
        margin: 0 0 32px;
    }
    .csr-quote__text em { font-style: normal; color: #29ABE2; }
    .csr-quote__attr {
        font-size: 11px; letter-spacing: 0.25em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.28);
        display: flex; align-items: center; justify-content: center; gap: 16px;
    }
    .csr-quote__attr::before,
    .csr-quote__attr::after {
        content: ""; display: block;
        width: 40px; height: 1px;
        background: rgba(255,255,255,0.15);
    }
    @media (max-width: 1199px) { .csr-quote { padding: 100px 60px; } }
    @media (max-width: 991px) { .csr-quote { padding: 80px 40px; } .csr-quote__text { font-size: clamp(18px, 2.8vw, 30px); } }
    @media (max-width: 767px) { .csr-quote { padding: 64px 24px; } .csr-quote__mark { font-size: 56px; margin-bottom: 20px; } .csr-quote__text { font-size: 18px; margin-bottom: 24px; } }
    @media (max-width: 575px) { .csr-quote { padding: 48px 20px; } .csr-quote__text { font-size: 16px; line-height: 1.5; } }

    /* ══════════════════════════════
       INITIATIVES BANNER
    ══════════════════════════════ */
    .csr-initiatives {
        background: #0a0a0a;
        padding: 80px 0;
        border-top: 1px solid rgba(255,255,255,0.05);
    }
    .csr-initiatives__inner {
        max-width: 1360px; margin: 0 auto; padding: 0 60px;
    }
    .csr-initiatives__label {
        font-family: 'Courier New', monospace;
        font-size: 10px; letter-spacing: 0.3em;
        text-transform: uppercase; color: #29ABE2;
        margin-bottom: 48px;
        display: flex; align-items: center; gap: 14px;
    }
    .csr-initiatives__label::before {
        content: ""; display: block;
        width: 32px; height: 1px; background: #29ABE2; flex-shrink: 0;
    }
    .csr-initiatives__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2px;
    }
    .csr-init-card {
        background: #111;
        padding: 44px 40px;
        position: relative; overflow: hidden;
        transition: background 0.3s;
    }
    .csr-init-card:hover { background: rgba(41,171,226,0.04); }
    .csr-init-card::before {
        content: ""; position: absolute;
        top: 0; left: 0; right: 0; height: 2px;
        background: transparent; transition: background 0.3s;
    }
    .csr-init-card:hover::before { background: #29ABE2; }
    .csr-init-card__icon {
        font-size: 28px; margin-bottom: 24px;
        color: rgba(255,255,255,0.15);
        transition: color 0.3s;
    }
    .csr-init-card:hover .csr-init-card__icon { color: #29ABE2; }
    .csr-init-card__title {
        font-size: 18px; font-weight: 700;
        color: #fff; letter-spacing: -0.02em;
        margin-bottom: 12px;
    }
    .csr-init-card__text {
        font-size: 13px; color: rgba(255,255,255,0.38);
        line-height: 1.7;
    }
    @media (max-width: 1199px) { .csr-initiatives { padding: 64px 0; } .csr-initiatives__inner { padding: 0 40px; } .csr-init-card { padding: 36px 32px; } }
    @media (max-width: 991px) { .csr-initiatives__grid { grid-template-columns: 1fr 1fr; gap: 2px; } .csr-initiatives__inner { padding: 0 32px; } .csr-initiatives { padding: 56px 0; } .csr-initiatives__label { margin-bottom: 32px; } }
    @media (max-width: 767px) { .csr-initiatives__grid { grid-template-columns: 1fr; } .csr-initiatives__inner { padding: 0 24px; } .csr-initiatives { padding: 48px 0; } .csr-init-card { padding: 32px 24px; } .csr-init-card__title { font-size: 16px; } }
    @media (max-width: 575px) { .csr-initiatives__inner { padding: 0 20px; } .csr-init-card { padding: 28px 20px; } }