
/* =========================================================
   CHAPTER 009 — THE DELHI DOSSIER
   NEON AFTERDARK V2 — COMPLETE VISUAL TRANSFORMATION
   ========================================================= */

.dd-section {
    --dd-cyan:#75ffe8;
    --dd-violet:#ca83ff;
    --dd-pink:#ff65c9;
    --dd-orange:#ffb079;
    --dd-text:#f8f3ff;
    --dd-muted:#b5b5cf;
    position:relative;
    isolation:isolate;
    overflow:hidden;
    padding:125px 24px 135px;
    color:var(--dd-text);
    background:
      radial-gradient(ellipse at 10% 9%,rgba(16,196,184,.17),transparent 36%),
      radial-gradient(ellipse at 93% 25%,rgba(166,54,234,.19),transparent 39%),
      radial-gradient(ellipse at 15% 78%,rgba(255,71,166,.12),transparent 37%),
      radial-gradient(ellipse at 85% 95%,rgba(255,133,66,.10),transparent 32%),
      #080b18;
}

.dd-section *,
.dd-section *::before,
.dd-section *::after {
    box-sizing:border-box;
}

.dd-section::before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.32;
    background-image:
      linear-gradient(rgba(102,244,232,.10) 1px,transparent 1px),
      linear-gradient(90deg,rgba(102,244,232,.10) 1px,transparent 1px);
    background-size:76px 76px;
    mask-image:linear-gradient(to bottom,black,transparent 88%);
    -webkit-mask-image:linear-gradient(to bottom,black,transparent 88%);
}

.dd-section::after {
    content:"";
    position:absolute;
    top:-30%;
    left:-50%;
    width:80%;
    height:180%;
    pointer-events:none;
    transform:rotate(22deg);
    background:linear-gradient(
      90deg,transparent 44%,
      rgba(112,255,235,.045) 49%,
      rgba(255,105,223,.07) 50%,
      transparent 56%
    );
    animation:dd-light-travel 19s ease-in-out infinite alternate;
}

.dd-shell {
    position:relative;
    z-index:2;
    max-width:1450px;
    margin:auto;
}

.dd-orbit {
    position:absolute;
    pointer-events:none;
    border:1px solid rgba(112,255,235,.22);
    border-radius:35%;
    filter:drop-shadow(0 0 18px rgba(95,255,236,.13));
}

.dd-orbit-one {
    width:770px;
    height:770px;
    top:-380px;
    right:-280px;
    transform:rotate(25deg);
    animation:dd-orbit-one 32s linear infinite;
}

.dd-orbit-two {
    width:850px;
    height:450px;
    bottom:-230px;
    left:-330px;
    border-color:rgba(255,105,223,.28);
    transform:rotate(-32deg);
    animation:dd-orbit-two 26s ease-in-out infinite alternate;
}

.dd-topline,
.dd-chamber-head {
    display:flex;
    justify-content:space-between;
    gap:20px;
    font:800 11px/1.5 Arial,sans-serif;
    letter-spacing:.25em;
    text-transform:uppercase;
}

.dd-topline {
    color:var(--dd-cyan);
    border-bottom:1px solid rgba(112,255,235,.36);
    padding-bottom:23px;
    text-shadow:0 0 20px rgba(112,255,235,.45);
}

.dd-intro {
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(0,.65fr);
    gap:7%;
    align-items:end;
    margin:90px 0 85px;
}

.dd-eyebrow {
    display:inline-flex;
    align-items:center;
    gap:12px;
    font:800 11px/1.4 Arial,sans-serif;
    letter-spacing:.29em;
    color:var(--dd-cyan);
}

.dd-eyebrow::before {
    content:"";
    width:34px;
    height:1px;
    background:var(--dd-cyan);
    box-shadow:0 0 12px var(--dd-cyan);
}

.dd-intro h2 {
    font-family:Georgia,serif;
    font-weight:400;
    font-size:clamp(67px,8.6vw,155px);
    line-height:.9;
    letter-spacing:-.078em;
    margin:28px 0 0;
    text-wrap:balance;
    text-shadow:0 16px 45px rgba(0,0,0,.4);
}

.dd-intro h2 em {
    display:block;
    font-weight:400;
    color:var(--dd-pink);
    background:linear-gradient(115deg,#ff80d7 0%,#cf8dff 45%,#7bffe4 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 0 24px rgba(237,104,242,.23));
}

.dd-intro-side {
    position:relative;
    padding:30px 25px;
    border:1px solid rgba(114,255,232,.24);
    background:linear-gradient(145deg,rgba(32,64,81,.36),rgba(29,17,54,.5));
    box-shadow:inset 0 0 35px rgba(88,255,234,.04),0 20px 55px rgba(0,0,0,.2);
    clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%);
}

.dd-intro-side::after {
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:30px;
    height:30px;
    border-left:1px solid rgba(112,255,235,.6);
    transform:rotate(-45deg) translate(-9px,-12px);
}

.dd-intro-mark {
    display:block;
    width:max-content;
    font-size:65px;
    line-height:1;
    margin-bottom:28px;
    color:var(--dd-cyan);
    text-shadow:0 0 30px rgba(112,255,235,.55);
    animation:dd-symbol-float 6s ease-in-out infinite;
}

.dd-markdown {
    font:400 16px/1.9 Arial,sans-serif;
    color:#c6c8dc;
}

.dd-markdown p {margin:0 0 15px}
.dd-markdown p:last-child {margin-bottom:0}
.dd-markdown strong {color:#fff}
.dd-markdown a {
    color:var(--dd-cyan);
    text-decoration:underline;
    text-decoration-color:rgba(112,255,235,.5);
    text-underline-offset:4px;
}
.dd-markdown a:hover {color:#fff}

/* Four individual sculptural neon statistics */

.dd-stats {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:17px;
    margin:0 0 115px;
}

.dd-stat {
    --stat-glow:#75ffe8;
    position:relative;
    min-width:0;
    min-height:250px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:28px 25px;
    border:1px solid color-mix(in srgb,var(--stat-glow) 55%,transparent);
    background:
      radial-gradient(circle at 85% 10%,color-mix(in srgb,var(--stat-glow) 19%,transparent),transparent 55%),
      linear-gradient(145deg,#142c37,#0c1524);
    clip-path:polygon(0 0,calc(100% - 35px) 0,100% 35px,100% 100%,0 100%);
    box-shadow:inset 0 0 45px color-mix(in srgb,var(--stat-glow) 7%,transparent);
    transition:transform .4s ease,filter .4s ease;
}

.dd-stat:nth-child(2) {
    --stat-glow:#df87ff;
    background:
      radial-gradient(circle at 85% 10%,rgba(211,87,255,.25),transparent 55%),
      linear-gradient(145deg,#332044,#141327);
    transform:translateY(32px);
}

.dd-stat:nth-child(3) {
    --stat-glow:#ff87c8;
    background:
      radial-gradient(circle at 85% 10%,rgba(255,87,171,.23),transparent 55%),
      linear-gradient(145deg,#41223e,#181324);
}

.dd-stat:nth-child(4) {
    --stat-glow:#ffb079;
    background:
      radial-gradient(circle at 85% 10%,rgba(255,150,80,.24),transparent 55%),
      linear-gradient(145deg,#423027,#191b29);
    transform:translateY(32px);
}

.dd-stat::before {
    content:"";
    position:absolute;
    width:165px;
    height:165px;
    border:1px solid color-mix(in srgb,var(--stat-glow) 40%,transparent);
    border-radius:50%;
    top:-78px;
    right:-68px;
    box-shadow:0 0 28px color-mix(in srgb,var(--stat-glow) 12%,transparent);
    transition:transform .6s ease;
}

.dd-stat::after {
    content:"";
    position:absolute;
    height:2px;
    left:0;
    right:0;
    top:0;
    background:linear-gradient(90deg,transparent,var(--stat-glow),transparent);
    box-shadow:0 0 18px var(--stat-glow);
    opacity:.8;
}

.dd-stat:hover {
    filter:brightness(1.16);
}

.dd-stat:nth-child(odd):hover {transform:translateY(-12px)}
.dd-stat:nth-child(even):hover {transform:translateY(18px)}
.dd-stat:hover::before {transform:scale(1.3) rotate(20deg)}

.dd-stat-index,
.dd-stat-label {
    position:relative;
    z-index:1;
    font:800 10px/1.5 Arial,sans-serif;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.dd-stat-index {color:var(--stat-glow)}
.dd-stat-label {color:#e9e8f4}

.dd-stat strong {
    position:relative;
    z-index:1;
    font:400 clamp(38px,4.1vw,69px)/1 Georgia,serif;
    letter-spacing:-.06em;
    color:#fff;
    overflow-wrap:anywhere;
    text-shadow:0 0 30px color-mix(in srgb,var(--stat-glow) 45%,transparent);
}

.dd-stat-star {
    position:absolute;
    right:21px;
    bottom:18px;
    font-size:27px;
    color:var(--stat-glow);
    opacity:.6;
}

/* Architectural editorial chamber */

.dd-chamber {
    position:relative;
    overflow:hidden;
    padding:48px;
    border:1px solid rgba(131,117,255,.4);
    background:
      radial-gradient(ellipse at 0% 0%,rgba(62,180,173,.14),transparent 47%),
      radial-gradient(ellipse at 100% 100%,rgba(208,70,196,.14),transparent 48%),
      repeating-linear-gradient(130deg,transparent 0 100px,rgba(137,112,250,.035) 101px,transparent 102px 200px),
      #101323;
    box-shadow:
      0 45px 110px rgba(0,0,0,.45),
      inset 0 0 75px rgba(127,90,255,.045);
}

.dd-chamber::before,
.dd-chamber::after {
    content:"";
    position:absolute;
    width:100px;
    height:100px;
    pointer-events:none;
    z-index:2;
}

.dd-chamber::before {
    top:0;
    left:0;
    border-top:3px solid var(--dd-cyan);
    border-left:3px solid var(--dd-cyan);
    filter:drop-shadow(0 0 11px rgba(112,255,235,.75));
}

.dd-chamber::after {
    right:0;
    bottom:0;
    border-right:3px solid var(--dd-pink);
    border-bottom:3px solid var(--dd-pink);
    filter:drop-shadow(0 0 11px rgba(255,101,201,.75));
}

.dd-chamber-head {
    position:relative;
    color:var(--dd-cyan);
    padding-bottom:34px;
    border-bottom:1px solid rgba(132,255,235,.25);
}

.dd-editorial-grid {
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    gap:32px;
    padding:70px 0 65px;
}

.dd-editorial {
    position:relative;
    min-width:0;
    overflow:hidden;
    padding:45px 40px 65px;
    border:1px solid rgba(116,255,233,.35);
    background:
      radial-gradient(circle at 90% 12%,rgba(83,255,218,.15),transparent 45%),
      linear-gradient(145deg,rgba(24,69,75,.82),rgba(11,27,39,.9));
    box-shadow:inset 0 0 55px rgba(87,255,227,.045),0 22px 55px rgba(0,0,0,.22);
    clip-path:polygon(0 0,calc(100% - 40px) 0,100% 40px,100% 100%,0 100%);
    transition:transform .45s ease,filter .45s ease;
}

.dd-editorial::before {
    content:"";
    position:absolute;
    width:250px;
    height:250px;
    right:-130px;
    bottom:-140px;
    border:1px solid rgba(112,255,235,.25);
    border-radius:40%;
    transform:rotate(30deg);
}

.dd-editorial::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.035) 50%,transparent 65%);
    transform:translateX(-120%);
    transition:transform .8s ease;
}

.dd-editorial:hover::after {transform:translateX(120%)}
.dd-editorial:hover {transform:translateY(-9px);filter:brightness(1.08)}

.dd-editorial-secondary {
    margin:65px 0 0;
    padding:45px 40px 65px;
    border:1px solid rgba(255,108,211,.4);
    background:
      radial-gradient(circle at 88% 12%,rgba(255,103,210,.2),transparent 47%),
      linear-gradient(145deg,rgba(74,29,79,.88),rgba(25,18,49,.95));
}

.dd-editorial-secondary::before {
    border-color:rgba(255,126,217,.3);
}

.dd-editorial-number {
    display:inline-block;
    color:var(--dd-cyan);
    font:800 11px/1.5 Arial,sans-serif;
    letter-spacing:.23em;
}

.dd-editorial-secondary .dd-editorial-number {color:#ff98dd}

.dd-editorial h3 {
    font:400 clamp(37px,3.7vw,64px)/1.09 Georgia,serif;
    letter-spacing:-.055em;
    margin:30px 0;
    color:#fff;
}

.dd-editorial h3 p,
.dd-finale h3 p {margin:0}

.dd-editorial h3 em {color:var(--dd-cyan)}
.dd-editorial-secondary h3 em {color:var(--dd-pink)}

.dd-editorial-decoration {
    display:block;
    margin-top:25px;
    font-size:95px;
    line-height:1;
    color:var(--dd-cyan);
    opacity:.25;
    text-shadow:0 0 30px var(--dd-cyan);
    animation:dd-symbol-float 8s ease-in-out infinite;
}

/* Category constellation */

.dd-category-zone {
    padding:45px 0 20px;
    border-top:1px solid rgba(146,130,255,.35);
}

.dd-category-label {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:32px;
    color:var(--dd-cyan);
    font:800 11px/1.5 Arial,sans-serif;
    letter-spacing:.22em;
}

.dd-category-list {
    display:flex;
    flex-wrap:wrap;
    gap:13px;
}

.dd-category-link {
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:17px;
    min-height:66px;
    padding:17px 23px;
    border:1px solid rgba(123,255,234,.42);
    background:linear-gradient(135deg,rgba(27,73,77,.65),rgba(35,24,65,.8));
    color:#f9f4ff!important;
    font:800 12px/1.3 Arial,sans-serif;
    letter-spacing:.04em;
    text-decoration:none!important;
    box-shadow:inset 0 0 25px rgba(112,255,235,.045);
    transition:transform .35s ease,box-shadow .35s ease,background .35s ease;
}

.dd-category-link:nth-child(3n+2) {
    border-color:rgba(218,126,255,.55);
    background:linear-gradient(135deg,rgba(80,30,98,.65),rgba(31,21,61,.8));
}

.dd-category-link:nth-child(3n+3) {
    border-color:rgba(255,132,185,.55);
    background:linear-gradient(135deg,rgba(95,34,69,.65),rgba(42,23,54,.8));
}

.dd-category-link:hover {
    transform:translateY(-7px) rotate(-1deg);
    box-shadow:0 13px 35px rgba(117,255,232,.13),inset 0 0 30px rgba(112,255,235,.12);
}

.dd-category-index {
    color:var(--dd-cyan);
    font:800 10px Arial,sans-serif;
}

.dd-category-link:nth-child(3n+2) .dd-category-index {color:#e1a4ff}
.dd-category-link:nth-child(3n+3) .dd-category-index {color:#ff9fce}

/* Signature contact finale */

.dd-finale {
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(300px,.8fr);
    gap:55px;
    align-items:center;
    margin-top:95px;
    padding:65px;
    overflow:hidden;
    border:1px solid rgba(199,111,255,.42);
    background:
      radial-gradient(ellipse at 0% 0%,rgba(125,51,200,.2),transparent 60%),
      radial-gradient(ellipse at 100% 100%,rgba(38,196,172,.13),transparent 60%),
      linear-gradient(120deg,#181126,#101b2a);
    box-shadow:0 35px 90px rgba(0,0,0,.35),inset 0 0 50px rgba(190,91,255,.045);
}

.dd-finale::before {
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    border:1px solid rgba(206,122,255,.22);
    border-radius:50%;
    top:-320px;
    right:-100px;
    pointer-events:none;
}

.dd-finale::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:repeating-linear-gradient(145deg,transparent 0 65px,rgba(231,144,255,.025) 66px,transparent 67px 130px);
}

.dd-finale-copy,
.dd-actions {position:relative;z-index:1}

.dd-finale-copy>span {
    font:800 11px/1.5 Arial,sans-serif;
    letter-spacing:.25em;
    color:var(--dd-cyan);
}

.dd-finale h3 {
    font:400 clamp(43px,5vw,77px)/1.06 Georgia,serif;
    letter-spacing:-.06em;
    margin:24px 0;
    color:#fff;
}

.dd-finale h3 em {
    color:var(--dd-pink);
    text-shadow:0 0 25px rgba(255,101,201,.3);
}

.dd-actions {
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
    min-width:0;
}

.dd-action {
    position:relative;
    isolation:isolate;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    min-height:104px;
    padding:28px 30px;
    overflow:hidden;
    border:1px solid;
    color:white!important;
    font:900 13px/1.5 Arial,sans-serif;
    letter-spacing:.15em;
    text-decoration:none!important;
    transition:transform .4s ease,box-shadow .4s ease,filter .4s ease;
}

.dd-action::before {
    content:"";
    position:absolute;
    width:130px;
    height:130px;
    right:-60px;
    top:-50px;
    border:1px solid rgba(255,255,255,.4);
    border-radius:50%;
    transition:transform .5s ease;
}

.dd-action::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.15) 50%,transparent 70%);
    transform:translateX(-130%);
    transition:transform .75s ease;
}

.dd-action:hover {
    transform:translateY(-7px) scale(1.015);
    filter:brightness(1.15);
}

.dd-action:hover::before {transform:scale(1.4)}
.dd-action:hover::after {transform:translateX(130%)}

.dd-action>span {position:relative;z-index:1}
.dd-action>span:last-child {font-size:27px;font-weight:400}

.dd-action-wa {
    border-color:#65ffe0;
    background:linear-gradient(125deg,#07694e,#0b9b7b 60%,#124c57);
    box-shadow:0 0 25px rgba(33,235,181,.16),inset 0 0 35px rgba(130,255,222,.13);
}

.dd-action-wa:hover {
    box-shadow:0 0 55px rgba(33,235,181,.32),inset 0 0 40px rgba(130,255,222,.2);
}

.dd-action-call {
    border-color:#ee91ff;
    background:linear-gradient(125deg,#522276,#a53b9b 60%,#a44d75);
    box-shadow:0 0 25px rgba(217,83,255,.17),inset 0 0 35px rgba(255,153,230,.12);
}

.dd-action-call:hover {
    box-shadow:0 0 55px rgba(217,83,255,.34),inset 0 0 40px rgba(255,153,230,.2);
}

/* Motion */

@keyframes dd-light-travel {
    from {transform:translateX(-20%) rotate(22deg)}
    to {transform:translateX(170%) rotate(22deg)}
}

@keyframes dd-orbit-one {
    from {transform:rotate(25deg)}
    to {transform:rotate(385deg)}
}

@keyframes dd-orbit-two {
    from {transform:rotate(-32deg) translateY(0)}
    to {transform:rotate(-12deg) translateY(-60px)}
}

@keyframes dd-symbol-float {
    0%,100% {transform:translateY(0) rotate(0deg)}
    50% {transform:translateY(-12px) rotate(13deg)}
}

/* Responsive */

@media(max-width:1100px) {
    .dd-intro {grid-template-columns:1fr;gap:35px}
    .dd-intro h2 {font-size:clamp(65px,10vw,125px)}
    .dd-stats {grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
    .dd-stat:nth-child(even) {transform:none}
    .dd-stat:nth-child(even):hover {transform:translateY(-10px)}
    .dd-editorial-grid {gap:20px}
    .dd-editorial {padding:35px 27px 50px}
    .dd-editorial-secondary {margin-top:40px}
    .dd-finale {padding:45px;gap:35px}
}

@media(max-width:750px) {
    .dd-section {padding:85px 18px 100px}
    .dd-intro {margin:65px 0}
    .dd-intro h2 {font-size:clamp(58px,12vw,90px)}
    .dd-chamber {padding:25px}
    .dd-editorial-grid {grid-template-columns:1fr;padding:40px 0}
    .dd-editorial-secondary {margin-top:0}
    .dd-finale {grid-template-columns:1fr;margin-top:65px}
    .dd-actions {grid-template-columns:1fr 1fr}
    .dd-action {min-height:90px;padding:22px 20px;font-size:11px}
}

@media(max-width:520px) {
    .dd-section {padding:65px 14px 80px}
    .dd-topline,.dd-chamber-head {font-size:9px;letter-spacing:.1em}
    .dd-intro h2 {font-size:clamp(49px,12.6vw,69px)}
    .dd-intro-side {padding:25px 20px}
    .dd-stats {gap:10px;margin-bottom:75px}
    .dd-stat {min-height:170px;padding:18px 13px}
    .dd-stat strong {font-size:clamp(29px,8vw,45px)}
    .dd-stat-index,.dd-stat-label {font-size:8px;letter-spacing:.08em}
    .dd-chamber {padding:20px 14px}
    .dd-editorial {padding:32px 22px 45px}
    .dd-editorial h3 {font-size:clamp(33px,9vw,48px)}
    .dd-category-zone {padding:35px 0 10px}
    .dd-category-link {min-height:56px;padding:13px 15px;font-size:11px}
    .dd-finale {padding:35px 22px}
    .dd-finale h3 {font-size:clamp(38px,10vw,55px)}
    .dd-actions {grid-template-columns:1fr}
    .dd-action {min-height:85px;padding:22px 25px;font-size:12px}
}

@media(prefers-reduced-motion:reduce) {
    .dd-section::after,
    .dd-orbit,
    .dd-intro-mark,
    .dd-editorial-decoration {
        animation:none!important;
    }
    .dd-stat,
    .dd-stat::before,
    .dd-editorial,
    .dd-editorial::after,
    .dd-category-link,
    .dd-action,
    .dd-action::before,
    .dd-action::after {
        transition:none!important;
    }
}
