/* =============================================================================
   Project Details Template — Case Study Design
   All selectors scoped under .cs-wrap to avoid theme conflicts.
   Uses --accent from :root (defined globally in footer.css).
   ============================================================================= */

/* Reset ScrollSmoother — global.css locks html/body overflow and sets #smooth-wrapper
   to position:fixed for smooth scroll on other pages. On this page it is not active. */
html, body {
    overflow: auto !important;
    height: auto !important;
}

/* Fix header on project details page — transparent so it merges with white hero */
.header-area {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: none !important;
}
/* Once user scrolls past hero, give header a solid white background */
.header-area.sticky,
.header-area.header-scrolled,
.header-area.scrolled {
    background: #fff !important;
    box-shadow: 0 2px 20px rgba(0,0,0,.08) !important;
}

/* Hide desktop nav + CTA button on mobile, show burger instead */
@media (max-width: 1199px) {
    .header-area .header__nav,
    .header-area .header__button {
        display: none !important;
    }
    .header-area .header__navicon {
        display: block !important;
    }
}
#smooth-wrapper {
    overflow: visible !important;
    position: static !important;
    height: auto !important;
    width: 100% !important;
    transform: none !important;
    will-change: auto !important;
}
#smooth-content {
    overflow: visible !important;
    position: static !important;
    height: auto !important;
    width: 100% !important;
    transform: none !important;
    will-change: auto !important;
}

.cs-wrap {
    --cs-dark:   #0a0a0a;
    --cs-muted:  rgba(0,0,0,.45);
    --cs-border: rgba(0,0,0,.08);
    --cs-ease:   cubic-bezier(.22,1,.36,1);
    -webkit-font-smoothing: antialiased;
}

/* ── Fade-in on scroll ── */
.cs-wrap .cs-fade {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .75s var(--cs-ease), transform .75s var(--cs-ease);
}
.cs-wrap .cs-fade.cs-in { opacity: 1; transform: none; }
.cs-wrap .cs-d1 { transition-delay: .1s; }
.cs-wrap .cs-d2 { transition-delay: .2s; }
.cs-wrap .cs-d3 { transition-delay: .3s; }
.cs-wrap .cs-d4 { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
    .cs-wrap .cs-fade { opacity:1; transform:none; transition:none; }
}

/* =============================================================================
   HERO
   ============================================================================= */
.cs-wrap .cs-hero {
    min-height: 85vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 100px 60px 140px;
    position: relative;
    overflow: hidden;
    background: #fff;
}

/* Dot-grid removed */
/* Centre glow */
.cs-wrap .cs-hero::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(255,255,255,.75) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ── Decorative animations ── */
@keyframes cs-grow1 { to { width:55%; } }
@keyframes cs-grow2 { to { width:40%; } }
@keyframes cs-spin  { 0%{transform:scale(1) rotate(0deg)} 50%{transform:scale(1.1) rotate(90deg)} 100%{transform:scale(1) rotate(0deg)} }
@keyframes cs-flt   { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-35px) scale(1.15)} }
@keyframes cs-sqr   { 0%,100%{transform:rotate(45deg)} 50%{transform:rotate(135deg)} }
@keyframes cs-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(209,248,67,.5)} 50%{box-shadow:0 0 0 8px rgba(209,248,67,0)} }

.cs-wrap .cs-aline-top { position:absolute; top:0; left:0; height:4px; background:linear-gradient(90deg,var(--accent),transparent); width:0; animation:cs-grow1 1.5s ease-out .3s forwards; z-index:1; }
.cs-wrap .cs-aline-bot { position:absolute; bottom:0; right:0; height:4px; background:linear-gradient(270deg,var(--accent),transparent); width:0; animation:cs-grow2 1.5s ease-out .8s forwards; z-index:1; }
.cs-wrap .cs-a-circle  { position:absolute; top:5%; right:-60px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle,rgba(209,248,67,.14) 0%,rgba(209,248,67,.04) 60%,transparent 100%); border:2px solid rgba(209,248,67,.3); animation:cs-spin 20s linear infinite; pointer-events:none; z-index:0; }
.cs-wrap .cs-a-circle2 { position:absolute; top:20%; left:-100px; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle,rgba(209,248,67,.06) 0%,transparent 70%); border:1.5px solid rgba(209,248,67,.2); animation:cs-spin 28s linear infinite reverse; pointer-events:none; z-index:0; }
.cs-wrap .cs-a-dot     { position:absolute; bottom:22%; right:12%; width:90px; height:90px; border-radius:50%; background:var(--accent); opacity:.3; animation:cs-flt 8s ease-in-out infinite; pointer-events:none; z-index:0; }
.cs-wrap .cs-a-dot2    { position:absolute; bottom:28%; left:5%; width:60px; height:60px; border-radius:50%; background:var(--accent); opacity:.22; animation:cs-flt 9s ease-in-out 1s infinite; pointer-events:none; z-index:0; }
.cs-wrap .cs-a-square  { position:absolute; bottom:6%; right:3%; width:220px; height:220px; border:2px solid rgba(209,248,67,.35); animation:cs-sqr 15s ease-in-out infinite; pointer-events:none; z-index:0; }
.cs-wrap .cs-a-square2 { position:absolute; top:18%; left:38%; width:120px; height:120px; border:1.5px solid rgba(209,248,67,.25); animation:cs-sqr 18s ease-in-out 2s infinite; pointer-events:none; z-index:0; }
.cs-wrap .cs-a-dash    { position:absolute; bottom:36%; left:0; width:0; height:3px; background:linear-gradient(90deg,var(--accent),rgba(209,248,67,.2)); border-radius:2px; animation:cs-grow1 2s ease-out 1.2s forwards; pointer-events:none; opacity:.6; z-index:0; }

/* ── Floating metric cards ── */
@keyframes cs-cardIn { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:translateY(0)} }
@keyframes cs-fc1    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)} }
@keyframes cs-fc2    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes cs-fc3    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
@keyframes cs-fc4    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes cs-fc5    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }

.cs-wrap .cs-hero-cards {
    position: absolute; right: 7%; top: 50%; transform: translateY(-50%);
    width: 380px; height: 520px; pointer-events: none; z-index: 2;
}
.cs-wrap .cs-hc {
    position: absolute;
    background: #fff;
    border: 1px solid rgba(0,0,0,.07);
    border-radius: 18px;
    box-shadow: 0 8px 40px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
    padding: 18px 22px;
}
.cs-wrap .cs-hc1 { top:0;    left:10px; width:228px; animation:cs-cardIn .7s var(--cs-ease) .4s  both, cs-fc1  8s ease-in-out 1.3s infinite; }
.cs-wrap .cs-hc2 { top:24px; right:0;   width:168px; animation:cs-cardIn .7s var(--cs-ease) .65s both, cs-fc2 11s ease-in-out 2s   infinite; }
.cs-wrap .cs-hc3 { top:195px;left:0;    width:218px; animation:cs-cardIn .7s var(--cs-ease) .85s both, cs-fc3  9s ease-in-out 1.6s infinite; }
.cs-wrap .cs-hc4 { top:210px;right:8px; width:158px; animation:cs-cardIn .7s var(--cs-ease) 1.05s both,cs-fc4  7s ease-in-out 2.4s infinite; }
.cs-wrap .cs-hc5 { bottom:0; left:46px; width:204px; animation:cs-cardIn .7s var(--cs-ease) 1.25s both,cs-fc5 10s ease-in-out 1.8s infinite; }

.cs-wrap .cs-hc-label     { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(0,0,0,.38); margin-bottom:8px; }
.cs-wrap .cs-hc-big       { font-size:40px; font-weight:900; letter-spacing:-.05em; line-height:1; color:var(--cs-dark); }
.cs-wrap .cs-hc-sub       { font-size:11px; color:rgba(0,0,0,.38); margin-top:6px; }
.cs-wrap .cs-hc-trend     { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:#007a4d; background:rgba(209,248,67,.2); padding:3px 9px; border-radius:100px; margin-left:8px; }
.cs-wrap .cs-hc-chart     { display:flex; align-items:flex-end; gap:3px; height:42px; margin-top:14px; }
.cs-wrap .cs-hc-chart span{ flex:1; border-radius:3px 3px 0 0; background:rgba(0,0,0,.07); }
.cs-wrap .cs-hc-chart span.cs-hi  { background:var(--accent); }
.cs-wrap .cs-hc-chart span.cs-mid { background:rgba(209,248,67,.45); }
.cs-wrap .cs-hc-notif-top { display:flex; align-items:center; gap:7px; margin-bottom:10px; }
.cs-wrap .cs-hc-notif-top span { font-size:11px; font-weight:700; color:var(--cs-dark); flex:1; }
.cs-wrap .cs-hc-dot       { width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0; animation:cs-pulse 2s ease-in-out infinite; }
.cs-wrap .cs-hc-time      { font-size:10px !important; font-weight:500 !important; color:rgba(0,0,0,.35) !important; }
.cs-wrap .cs-hc-brand     { font-size:11px; color:rgba(0,0,0,.4); margin-bottom:4px; }
.cs-wrap .cs-hc-price     { font-size:24px; font-weight:900; letter-spacing:-.04em; color:var(--cs-dark); }
.cs-wrap .cs-hc-price-sub { font-size:10px; font-weight:600; color:#007a4d; margin-top:3px; }
.cs-wrap .cs-hc3-top      { display:flex; align-items:baseline; gap:0; }
.cs-wrap .cs-hc-bar-track { height:6px; background:rgba(0,0,0,.07); border-radius:100px; margin-top:14px; overflow:hidden; }
.cs-wrap .cs-hc-bar-fill  { height:100%; width:76%; background:linear-gradient(90deg,rgba(209,248,67,.5),var(--accent)); border-radius:100px; }
.cs-wrap .cs-hc-bar-labs  { display:flex; justify-content:space-between; margin-top:5px; font-size:10px; color:rgba(0,0,0,.3); font-weight:600; }
.cs-wrap .cs-hc4          { border-top:3px solid var(--accent); }
.cs-wrap .cs-hc4 .cs-hc-icon { width:32px; height:32px; background:rgba(209,248,67,.15); border-radius:8px; display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.cs-wrap .cs-hc4 .cs-hc-icon svg { width:15px; height:15px; stroke:#5a7a00; fill:none; stroke-width:2.5; }
.cs-wrap .cs-hc4 .cs-hc-big { font-size:32px; }
.cs-wrap .cs-hc5          { background:var(--cs-dark); border-color:transparent; }
.cs-wrap .cs-hc5 .cs-hc-label { color:rgba(255,255,255,.35); }
.cs-wrap .cs-hc5 .cs-hc-big   { color:var(--accent); }
.cs-wrap .cs-hc5 .cs-hc-sub   { color:rgba(255,255,255,.3); }
.cs-wrap .cs-hc5-foot { display:flex; align-items:center; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08); }
.cs-wrap .cs-hc5-foot span { font-size:10px; color:rgba(255,255,255,.35); font-weight:600; }
.cs-wrap .cs-hc5-dot  { width:6px; height:6px; border-radius:50%; background:var(--accent); }

/* ── Mobile hero panel ── */
.cs-wrap .cs-hero-panel { display:none; }

/* ── Hero content ── */
.cs-wrap .cs-hero-content {
    position: relative; z-index: 1;
    max-width: calc(100% - 480px);
}
.cs-wrap .cs-hero-tag {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: #5a7a00; margin-bottom: 32px;
    padding: 8px 18px;
    background: rgba(209,248,67,.15);
    border: 1px solid rgba(209,248,67,.5);
    border-radius: 100px;
}
.cs-wrap .cs-tag-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
    animation: cs-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
.cs-wrap .cs-hero-title {
    font-size: clamp(60px,10vw,130px);
    font-weight: 900; letter-spacing: -.04em; line-height: .9;
    color: var(--cs-dark); margin-bottom: 0;
}
.cs-wrap .cs-hl { color: var(--accent); }
.cs-wrap .cs-hero-meta {
    display: flex; align-items: center;
    margin-top: 40px; padding-top: 32px;
    border-top: 1px solid rgba(0,0,0,.15);
    flex-wrap: wrap; row-gap: 20px; gap: 0;
}
.cs-wrap .cs-m-item { padding-right: 36px; margin-right: 36px; border-right: 1px solid rgba(0,0,0,.15); }
.cs-wrap .cs-m-item:last-of-type { border-right: none; }
.cs-wrap .cs-m-lbl  { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(0,0,0,.55); margin-bottom:6px; }
.cs-wrap .cs-m-val  { font-size:15px; font-weight:700; color:var(--cs-dark); white-space:nowrap; }
.cs-wrap .cs-m-link {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 700;
    background: var(--accent); color: var(--cs-dark);
    border-radius: 100px; padding: 12px 24px;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
    white-space: nowrap;
}
.cs-wrap .cs-m-link:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(209,248,67,.45); color: var(--cs-dark); }
.cs-wrap .cs-m-link svg  { width:14px; height:14px; stroke:currentColor; fill:none; flex-shrink:0; }

/* =============================================================================
   SHARED SECTION STYLES
   ============================================================================= */
.cs-wrap .cs-section { padding: 110px 60px; }
.cs-wrap .cs-inner   { max-width: 1080px; margin: 0 auto; }
.cs-wrap .cs-stag {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: #5a7a00; margin-bottom: 20px;
}
.cs-wrap .cs-stag::before { content:''; width:18px; height:3px; background:var(--accent); border-radius:2px; }

/* =============================================================================
   FULL-WIDTH IMAGE
   ============================================================================= */
.cs-wrap .cs-img-sec { padding: 0 60px 110px; }
.cs-wrap .cs-img-wrap {
    max-width: 1080px; margin: 0 auto;
    aspect-ratio: 16/7; border-radius: 20px; overflow: hidden;
    border: 1px solid rgba(0,0,0,.07);
    box-shadow: 0 20px 80px rgba(0,0,0,.1);
}
.cs-wrap .cs-img-wrap img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; transition:transform .8s var(--cs-ease); }
.cs-wrap .cs-img-wrap:hover img { transform: scale(1.02); }

/* =============================================================================
   RESULTS — Dark section with animated dot-grid
   ============================================================================= */
.cs-wrap .cs-results-sec {
    background: var(--cs-dark);
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
    position: relative; overflow: hidden;
}

/* Nəticə watermark */
.cs-wrap .cs-results-sec::before {
    content: 'Nəticə';
    position: absolute; top: -16px; left: -8px;
    font-size: clamp(100px,14vw,200px); font-weight: 900; letter-spacing: -.05em;
    color: rgba(209,248,67,.07); line-height: 1;
    pointer-events: none; user-select: none; z-index: 0;
}

/* Dot grid */
.cs-wrap .cs-results-sec::after {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.13) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none; z-index: 0;
}

/* Animated spotlight 1 */
.cs-wrap .cs-results-sec .cs-inner::after {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(209,248,67,.22) 0%, rgba(209,248,67,.08) 35%, transparent 70%);
    pointer-events: none; z-index: 1;
    animation: cs-spotMove 8s ease-in-out infinite;
    filter: blur(40px);
    top: 0; left: 0;
}

/* Animated spotlight 2 */
.cs-wrap .cs-results-sec .cs-inner::before {
    content: '';
    position: absolute;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(209,248,67,.18) 0%, transparent 65%);
    pointer-events: none; z-index: 1;
    filter: blur(24px);
    animation: cs-spotMove2 5s ease-in-out infinite;
    top: 0; left: 0;
}

@keyframes cs-spotMove {
    0%   { transform: translate(-10%, 20%); opacity: .7; }
    25%  { transform: translate(60%, -10%); opacity: 1;  }
    50%  { transform: translate(90%, 50%);  opacity: .6; }
    75%  { transform: translate(30%, 80%);  opacity: 1;  }
    100% { transform: translate(-10%, 20%); opacity: .7; }
}
@keyframes cs-spotMove2 {
    0%   { transform: translate(80%, 10%);  opacity: .5; }
    33%  { transform: translate(10%, 60%);  opacity: .9; }
    66%  { transform: translate(70%, 80%);  opacity: .4; }
    100% { transform: translate(80%, 10%);  opacity: .5; }
}

.cs-wrap .cs-results-sec .cs-inner { position: relative; z-index: 2; }
.cs-wrap .cs-results-sec .cs-stag  { color: var(--accent); }
.cs-wrap .cs-results-sec .cs-stag::before { background: var(--accent); }

.cs-wrap .cs-rg { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; margin-top: 56px; }
.cs-wrap .cs-rtitle { font-size: clamp(30px,3.5vw,48px); font-weight: 900; letter-spacing: -.035em; line-height: 1.05; margin-bottom: 20px; color: #fff; }
.cs-wrap .cs-rdesc  { font-size: 17px; line-height: 1.8; color: rgba(255,255,255,.5); }

.cs-wrap .cs-mbox {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2px; background: rgba(255,255,255,.1);
    border-radius: 20px; overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,.3);
}
.cs-wrap .cs-mcell {
    padding: 40px 36px;
    background: #fff;
    border-bottom: 1px solid var(--cs-border);
    position: relative; transition: background .2s;
}
.cs-wrap .cs-mcell:hover { background: #f9fafb; }
.cs-wrap .cs-mcell::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent); }
.cs-wrap .cs-mbig {
    font-size: clamp(48px,5vw,68px); font-weight: 900; letter-spacing: -.05em; line-height: 1;
    margin-bottom: 10px; color: var(--cs-dark);
    display: flex; align-items: baseline; gap: 3px;
}
.cs-wrap .cs-mbig span { font-size: .42em; font-weight: 800; color: var(--accent); }
.cs-wrap .cs-mlbl { font-size: 13px; font-weight: 500; color: var(--cs-muted); line-height: 1.5; }

/* =============================================================================
   TESTIMONIAL
   ============================================================================= */
.cs-wrap .cs-quote-sec {
    background: var(--accent);
    padding: 110px 60px;
    position: relative; overflow: hidden;
}
.cs-wrap .cs-quote-sec::before {
    content: '';
    position: absolute; top: -100px; right: -80px;
    width: 500px; height: 500px; border-radius: 50%;
    background: rgba(0,0,0,.06);
    animation: cs-spin 25s linear infinite;
    pointer-events: none;
}
.cs-wrap .cs-quote-sec::after {
    content: '';
    position: absolute; bottom: -60px; left: 5%;
    width: 180px; height: 180px;
    border: 2px solid rgba(0,0,0,.1);
    animation: cs-sqr 18s ease-in-out infinite;
    pointer-events: none;
}
.cs-wrap .cs-qi    { max-width: 820px; margin: 0 auto; position: relative; z-index: 1; }
.cs-wrap .cs-qmark { font-size: 140px; line-height: .8; color: rgba(0,0,0,.15); }
.cs-wrap .cs-qtext {
    font-size: clamp(20px,2.8vw,32px); font-weight: 400;
    line-height: 1.55; color: rgba(0,0,0,.85); font-style: italic;
    letter-spacing: -.01em; margin-top: -8px;
}
.cs-wrap .cs-qauthor { display:flex; align-items:center; gap:16px; margin-top:48px; padding-top:28px; border-top:1px solid rgba(0,0,0,.12); }
.cs-wrap .cs-qav     { width:52px; height:52px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; color:#5a7a00; flex-shrink:0; }
.cs-wrap .cs-qname   { font-size:15px; font-weight:700; color:var(--cs-dark); }
.cs-wrap .cs-qrole   { font-size:12px; color:rgba(0,0,0,.5); margin-top:2px; }
.cs-wrap .cs-qstars  { display:flex; gap:3px; margin-top:5px; }
.cs-wrap .cs-qstars svg { width:11px; height:11px; fill:var(--cs-dark); }

/* =============================================================================
   PROCESS
   ============================================================================= */
.cs-wrap .cs-process-sec { border-top: 1px solid var(--cs-border); background: #fff; }
.cs-wrap .cs-process-heading {
    font-size: clamp(32px,3.8vw,52px); font-weight: 900;
    letter-spacing: -.035em; line-height: 1.05;
    margin-bottom: 0; color: var(--cs-dark);
}
.cs-wrap .cs-steps { margin-top: 64px; }
.cs-wrap .cs-step {
    display: grid;
    grid-template-columns: 88px 1px 56px 1fr auto;
    align-items: center;
    gap: 36px;
    padding: 40px 0;
    border-top: 1px solid var(--cs-border);
    position: relative;
    cursor: default;
    transition: background .3s var(--cs-ease);
}
.cs-wrap .cs-step:last-child { border-bottom: 1px solid var(--cs-border); }
.cs-wrap .cs-step::after { content:''; position:absolute; top:-1px; left:0; height:2px; width:0; background:var(--accent); transition:width .45s var(--cs-ease); }
.cs-wrap .cs-step:hover::after { width: 100%; }
.cs-wrap .cs-step:hover { background: rgba(209,248,67,.04); }
.cs-wrap .cs-step-n { font-size:80px; font-weight:900; letter-spacing:-.05em; line-height:1; color:rgba(0,0,0,.07); transition:color .3s var(--cs-ease); user-select:none; }
.cs-wrap .cs-step:hover .cs-step-n { color: var(--accent); }
.cs-wrap .cs-step-connector { width:1px; height:100%; background:var(--cs-border); position:relative; align-self:stretch; }
.cs-wrap .cs-step-connector::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:9px; height:9px; border-radius:50%; background:#fff; border:2px solid rgba(0,0,0,.15); transition:border-color .3s, background .3s; }
.cs-wrap .cs-step:hover .cs-step-connector::before { background:var(--accent); border-color:var(--accent); }
.cs-wrap .cs-step-icon { width:56px; height:56px; border-radius:14px; background:rgba(0,0,0,.04); border:1px solid var(--cs-border); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .3s, border-color .3s, box-shadow .3s; }
.cs-wrap .cs-step:hover .cs-step-icon { background:var(--accent); border-color:var(--accent); box-shadow:0 8px 24px rgba(209,248,67,.4); }
.cs-wrap .cs-step-icon svg { width:22px; height:22px; stroke:rgba(0,0,0,.4); fill:none; stroke-width:1.8; transition:stroke .3s; }
.cs-wrap .cs-step:hover .cs-step-icon svg { stroke: #5a7a00; }
.cs-wrap .cs-step-body  { min-width: 0; }
.cs-wrap .cs-step-title { font-size:22px; font-weight:800; letter-spacing:-.03em; color:var(--cs-dark); margin-bottom:8px; }
.cs-wrap .cs-step-desc  { font-size:14px; line-height:1.7; color:rgba(0,0,0,.5); max-width:440px; }
.cs-wrap .cs-step-dur   { flex-shrink:0; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(0,0,0,.35); border:1.5px solid var(--cs-border); border-radius:100px; padding:8px 20px; transition:border-color .3s, color .3s, background .3s; white-space:nowrap; }
.cs-wrap .cs-step:hover .cs-step-dur { border-color:var(--accent); color:#5a7a00; background:rgba(209,248,67,.1); }

/* =============================================================================
   GALLERY
   ============================================================================= */
.cs-wrap .cs-gallery-sec { border-top: 1px solid var(--cs-border); }
.cs-wrap .cs-gg { display:grid; gap:14px; margin-top:48px; grid-template-columns:1.4fr 1fr; grid-template-rows:auto auto; }
.cs-wrap .cs-gi { border-radius:14px; overflow:hidden; }
.cs-wrap .cs-gi:first-child { grid-row:1/3; height:500px; }
.cs-wrap .cs-gi:not(:first-child) { height:243px; }
.cs-wrap .cs-gi img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--cs-ease); }
.cs-wrap .cs-gi:hover img { transform: scale(1.04); }

/* =============================================================================
   MOBILE HERO PANEL (≤1100px)
   ============================================================================= */
@media (max-width: 1100px) {
    .cs-wrap .cs-hero-cards { display: none; }
    .cs-wrap .cs-hero-panel {
        display: block;
        position: absolute; right: 40px; top: 50%; transform: translateY(-50%);
        width: 260px; background: var(--cs-dark);
        border-radius: 20px; padding: 20px;
        border: 1px solid rgba(255,255,255,.1);
        z-index: 2;
    }
    .cs-wrap .cs-hero-content { max-width: 100%; }
    .cs-wrap .cs-hp-accent { height:3px; background:var(--accent); border-radius:2px; margin-bottom:14px; }
    .cs-wrap .cs-hp-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
    .cs-wrap .cs-hp-live { display:flex; align-items:center; gap:7px; font-size:11px; font-weight:700; color:rgba(255,255,255,.7); }
    .cs-wrap .cs-hp-live-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; animation:cs-pulse 2s ease-in-out infinite; }
    .cs-wrap .cs-hp-date { font-size:10px; color:rgba(255,255,255,.35); }
    .cs-wrap .cs-hp-big { font-size:42px; font-weight:900; letter-spacing:-.04em; color:var(--accent); line-height:1; }
    .cs-wrap .cs-hp-big-lbl { font-size:11px; color:rgba(255,255,255,.45); margin-top:4px; margin-bottom:14px; }
    .cs-wrap .cs-hp-bar-wrap { display:flex; align-items:flex-end; gap:3px; height:36px; margin-bottom:14px; }
    .cs-wrap .cs-hp-bar-wrap span { flex:1; border-radius:2px 2px 0 0; background:rgba(255,255,255,.1); }
    .cs-wrap .cs-hp-bar-wrap span.a { background:rgba(209,248,67,.4); }
    .cs-wrap .cs-hp-bar-wrap span.b { background:var(--accent); }
    .cs-wrap .cs-hp-stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }
    .cs-wrap .cs-hp-stat { background:rgba(255,255,255,.06); border-radius:8px; padding:8px 6px; text-align:center; }
    .cs-wrap .cs-hp-sn { font-size:14px; font-weight:900; color:#fff; }
    .cs-wrap .cs-hp-sl { font-size:9px; color:rgba(255,255,255,.4); margin-top:2px; }
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
    .cs-wrap .cs-section,
    .cs-wrap .cs-img-sec,
    .cs-wrap .cs-quote-sec { padding-left:40px; padding-right:40px; }
    .cs-wrap .cs-rg  { grid-template-columns:1fr; gap:48px; }
    .cs-wrap .cs-step { grid-template-columns:60px 1px 48px 1fr auto; gap:20px; }
    .cs-wrap .cs-step-n { font-size:56px; }
    .cs-wrap .cs-gg  { grid-template-columns:1fr 1fr; }
    .cs-wrap .cs-gi:first-child { grid-row:auto; }
}

@media (max-width: 768px) {
    .cs-wrap .cs-hero { padding: 120px 20px 80px; min-height:auto; }
    .cs-wrap .cs-hero-panel { display:none; }
    .cs-wrap .cs-hero-content { max-width:100%; }
    .cs-wrap .cs-hero-title { font-size: clamp(44px,13vw,80px); }
    .cs-wrap .cs-hero-meta { display:grid; grid-template-columns:1fr 1fr; gap:18px 12px; padding-top:24px; margin-top:28px; }
    .cs-wrap .cs-m-item { border-right:none; padding-right:0; margin-right:0; }
    .cs-wrap .cs-m-link { grid-column:1/-1; margin-left:0; justify-content:center; }
    .cs-wrap .cs-section { padding:64px 20px; }
    .cs-wrap .cs-img-sec { padding:0 20px 64px; }
    .cs-wrap .cs-quote-sec { padding:64px 20px; }
    .cs-wrap .cs-step { grid-template-columns:36px 1px 36px 1fr; gap:10px; padding:22px 0; }
    .cs-wrap .cs-step-n { font-size:34px; }
    .cs-wrap .cs-step-icon { width:36px; height:36px; border-radius:10px; }
    .cs-wrap .cs-step-icon svg { width:16px; height:16px; }
    .cs-wrap .cs-step-dur { display:none; }
    .cs-wrap .cs-step-title { font-size:16px; }
    .cs-wrap .cs-step-desc { font-size:13px; }
    .cs-wrap .cs-gg { grid-template-columns:1fr; }
    .cs-wrap .cs-gi:first-child { height:260px; grid-row:auto; }
    .cs-wrap .cs-gi:not(:first-child) { height:180px; }
}

/* =============================================================================
   CTA SECTION
   ============================================================================= */
.cs-wrap .cs-cta-sec {
    background: var(--cs-dark);
    padding: 130px 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cs-wrap .cs-cta-line-t  { position:absolute; top:0; left:0; height:3px; background:linear-gradient(90deg,#c2f971,transparent); width:0; animation:cs-grow1 1.5s ease-out .5s forwards; }
.cs-wrap .cs-cta-circle  { position:absolute; top:-60px; right:-60px; width:440px; height:440px; border-radius:50%; border:2px solid rgba(209,248,67,.25); animation:cs-spin 20s linear infinite; pointer-events:none; }
.cs-wrap .cs-cta-dot     { position:absolute; bottom:12%; left:8%; width:80px; height:80px; border-radius:50%; background:#c2f971; opacity:.25; animation:cs-flt 8s ease-in-out infinite; pointer-events:none; }
.cs-wrap .cs-cta-square  { position:absolute; bottom:5%; right:4%; width:200px; height:200px; border:1px solid rgba(209,248,67,.2); animation:cs-sqr 15s ease-in-out infinite; pointer-events:none; }
.cs-wrap .cs-cta-inner   { position:relative; z-index:1; }
.cs-wrap .cs-cta-ey      { font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:#c2f971; margin-bottom:20px; }
.cs-wrap .cs-cta-title   { font-size:clamp(48px,7vw,100px); font-weight:900; letter-spacing:-.04em; line-height:.92; color:#fff; margin-bottom:0; }
.cs-wrap .cs-cta-title em { font-style:normal; color:#c2f971; }
.cs-wrap .cs-cta-sub     { font-size:18px; color:rgba(255,255,255,.5); margin:24px auto 0; max-width:440px; line-height:1.7; }
.cs-wrap .cs-cta-btns    { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:48px; flex-wrap:wrap; }
.cs-wrap .cs-btn-acc     { background:#c2f971; color:#0a0a0a; font-size:15px; font-weight:700; padding:16px 34px; border-radius:100px; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:10px; transition:transform .15s,box-shadow .15s; text-decoration:none; }
.cs-wrap .cs-btn-acc:hover { transform:translateY(-2px); box-shadow:0 16px 48px rgba(209,248,67,.4); color:#0a0a0a; }
.cs-wrap .cs-btn-acc svg { width:16px; height:16px; stroke:#0a0a0a; fill:none; }
.cs-wrap .cs-btn-wh      { background:transparent; color:#fff; font-size:15px; font-weight:600; padding:16px 30px; border-radius:100px; border:1.5px solid rgba(255,255,255,.15); cursor:pointer; transition:border-color .2s; text-decoration:none; display:inline-flex; align-items:center; }
.cs-wrap .cs-btn-wh:hover { border-color:rgba(255,255,255,.35); color:#fff; }

@media (max-width: 768px) {
    .cs-wrap .cs-cta-sec  { padding:80px 20px; }
    .cs-wrap .cs-cta-btns { flex-direction:column; }
    .cs-wrap .cs-btn-acc,
    .cs-wrap .cs-btn-wh   { width:100%; justify-content:center; }
}