/* =========================================================
   ĐẢO SỐ — SECTION CHAPTER RHYTHM
   Makes long pages feel like distinct chapters, not one dashboard.
   ========================================================= */

:root{
  --chapter-night:#03050d;
  --chapter-ink:#121d32;
  --chapter-paper:#f6f8fc;
  --chapter-paper-2:#edf2f8;
  --chapter-deep:#08101d;
  --chapter-deep-2:#0b1424;
  --chapter-line-dark:rgba(255,255,255,.075);
  --chapter-line-light:#dce3ee;
}

main{
  counter-reset:chapter;
}

section[data-chapter]{
  position:relative;
  isolation:isolate;
}

section[data-chapter]:not([data-chapter="hero"]):not([data-chapter="signal"]):not([data-chapter="closing"]):not([data-chapter="note"]){
  counter-increment:chapter;
}

section[data-chapter]:not([data-chapter="hero"]):not([data-chapter="signal"]):not([data-chapter="closing"]):not([data-chapter="note"])::before{
  content:"0" counter(chapter);
  position:absolute;
  top:clamp(1rem,2vw,1.6rem);
  right:max(16px,calc((100vw - var(--max,1180px))/2));
  z-index:2;
  font-size:.64rem;
  font-weight:900;
  letter-spacing:.16em;
  color:color-mix(in srgb,currentColor 38%,transparent);
  pointer-events:none;
}

/* HERO — remains the page's strongest opening statement */
section[data-chapter="hero"]{
  z-index:3;
}

/* SIGNAL — a narrow transition, never a full chapter */
section[data-chapter="signal"]{
  z-index:2;
  box-shadow:
    inset 0 1px rgba(255,255,255,.045),
    inset 0 -1px rgba(255,255,255,.045);
}

/* PAPER — bright breathing room, clear reading chapter */
section[data-chapter="paper"]{
  background:
    radial-gradient(ellipse 62% 48% at 8% 5%,
      color-mix(in srgb,var(--vh-accent,#5572ff) 8%,transparent),transparent 72%),
    radial-gradient(ellipse 48% 42% at 94% 92%,
      rgba(139,92,246,.055),transparent 74%),
    linear-gradient(180deg,#fbfcff 0%,var(--chapter-paper) 48%,#f2f5fa 100%)!important;
  color:var(--chapter-ink);
  border-top:1px solid var(--chapter-line-light);
  border-bottom:1px solid var(--chapter-line-light);
  box-shadow:
    inset 0 1px rgba(255,255,255,.95),
    inset 0 -36px 90px rgba(47,63,105,.025);
}

section[data-chapter="paper"]::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.72;
  background-image:
    linear-gradient(rgba(70,86,118,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(70,86,118,.03) 1px,transparent 1px);
  background-size:96px 96px;
  mask-image:linear-gradient(90deg,#000 0 12%,transparent 34% 66%,#000 88% 100%);
}

section[data-chapter="paper"] :where(h2,h3,h4){
  color:#142039;
}

section[data-chapter="paper"] :where(.eyebrow,[class*="kicker"]){
  color:var(--vh-accent,#5572ff);
}

section[data-chapter="paper"] .section-heading,
section[data-chapter="paper"] [class*="-section-heading"]{
  max-width:930px;
}

section[data-chapter="paper"]::before,
section[data-chapter="data"]::before{
  background:rgba(255,255,255,.66);
  border:1px solid rgba(104,119,151,.16);
  border-radius:999px;
  padding:.34rem .48rem;
  box-shadow:0 8px 24px rgba(42,57,96,.055);
  color:#68758d;
}

/* EDITORIAL — quiet dark chapter led by typography */
section[data-chapter="editorial"]{
  background:var(--chapter-night)!important;
  color:#f4f7ff;
  border-top:1px solid var(--chapter-line-dark);
  border-bottom:1px solid var(--chapter-line-dark);
}

section[data-chapter="editorial"] :where(h2,h3,h4){
  color:#f4f7ff;
}

section[data-chapter="editorial"] :where(.lead,p){
  color:rgba(220,228,244,.68);
}

section[data-chapter="editorial"] .section-heading,
section[data-chapter="editorial"] [class*="-section-heading"]{
  max-width:860px;
}

section[data-chapter="editorial"] .section-heading h2,
section[data-chapter="editorial"] [class*="-section-heading"] h2{
  max-width:12ch;
}

/* VISUAL — full-bleed stage for product/demo/artwork */
section[data-chapter="visual"]{
  overflow:hidden;
  background:var(--chapter-deep)!important;
  color:#f7faff;
  border-top:1px solid rgba(85,114,255,.16);
  border-bottom:1px solid rgba(0,245,255,.10);
}

section[data-chapter="visual"]::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.28;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);
}

section[data-chapter="visual"] :where(h2,h3,h4){
  color:#f7faff;
}

section[data-chapter="visual"] :where(.lead,p){
  color:rgba(218,226,242,.7);
}

/* DATA — cool analytical chapter, sharper geometry */
section[data-chapter="data"]{
  background-color:var(--chapter-paper-2)!important;
  color:var(--chapter-ink);
  border-top:3px solid color-mix(in srgb,var(--vh-accent,#5572ff) 58%,#ffffff);
  border-bottom:1px solid #d5dde9;
  background-image:
    radial-gradient(circle at 12% 12%,
      color-mix(in srgb,var(--vh-accent,#5572ff) 10%,transparent),transparent 24rem),
    radial-gradient(circle at 88% 84%,rgba(139,92,246,.06),transparent 28rem),
    linear-gradient(rgba(71,88,120,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(71,88,120,.06) 1px,transparent 1px),
    linear-gradient(180deg,#f3f6fb 0%,var(--chapter-paper-2) 58%,#eaf0f7 100%)!important;
  background-size:auto,auto,42px 42px,42px 42px,auto!important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.9),
    inset 0 30px 90px rgba(255,255,255,.32),
    inset 0 -38px 90px rgba(46,61,103,.035);
}

section[data-chapter="data"]::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,.18) 22%,
      rgba(255,255,255,.48) 50%,
      rgba(255,255,255,.18) 78%,
      transparent 100%);
  opacity:.65;
  mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
}

section[data-chapter="data"] :where(h2,h3,h4){
  color:#111c31;
}

section[data-chapter="data"] :where(.eyebrow,[class*="kicker"]){
  color:var(--vh-accent,#5572ff);
}

section[data-chapter="data"] :where(.card,.panel,[class*="card"],[class*="panel"]){
  border-radius:14px;
}

/* TIMELINE — process chapter with a horizontal guide rail */
section[data-chapter="timeline"]{
  background:var(--chapter-deep-2)!important;
  color:#f2f6ff;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}

section[data-chapter="timeline"]::after{
  content:"";
  position:absolute;
  left:max(16px,calc((100vw - var(--max,1180px))/2));
  right:max(16px,calc((100vw - var(--max,1180px))/2));
  top:clamp(2.5rem,5vw,4.5rem);
  height:1px;
  z-index:-1;
  background:linear-gradient(90deg,var(--vh-accent,#5572ff),rgba(255,255,255,.08) 36%,transparent);
  opacity:.56;
}

section[data-chapter="timeline"] :where(h2,h3,h4){
  color:#f4f7ff;
}

section[data-chapter="timeline"] :where(.lead,p){
  color:rgba(219,227,242,.67);
}

/* NOTE — deliberately small, low-emphasis transition */
section[data-chapter="note"]{
  background:#0a101b!important;
  color:#8996aa;
  border-top:1px solid rgba(255,255,255,.055);
  border-bottom:1px solid rgba(255,255,255,.055);
}

/* CLOSING — keep page-specific CTA visual, add a decisive boundary */
section[data-chapter="closing"]{
  border-top:1px solid color-mix(in srgb,var(--vh-accent,#5572ff) 42%,transparent);
  box-shadow:inset 0 24px 70px rgba(0,0,0,.12);
}

/* Make adjacent chapters visibly change plane */
section[data-chapter="paper"] + section[data-chapter="paper"],
section[data-chapter="editorial"] + section[data-chapter="editorial"],
section[data-chapter="data"] + section[data-chapter="data"]{
  border-top-width:5px;
  border-top-color:color-mix(in srgb,var(--vh-accent,#5572ff) 12%,transparent);
}

/* Legal pages remain highly readable despite chapter system. */
.privacy-page section[data-chapter="paper"],
.terms-page section[data-chapter="paper"]{
  background:#fbfcfe!important;
}

.privacy-page section[data-chapter="paper"] :where(p,li),
.terms-page section[data-chapter="paper"] :where(p,li){
  color:#59677f;
}

/* Mobile keeps the same chapter identity with quieter decoration. */
@media(max-width:760px){
  section[data-chapter]:not([data-chapter="hero"]):not([data-chapter="signal"]):not([data-chapter="closing"]):not([data-chapter="note"])::before{
    top:.85rem;
    right:16px;
    font-size:.58rem;
  }

  section[data-chapter="paper"]::after{
    background-size:72px 72px;
    opacity:.42;
  }

  section[data-chapter="data"]::after{
    opacity:.38;
  }

  section[data-chapter="visual"]::after{
    background-size:40px 40px;
    opacity:.18;
  }

  section[data-chapter="timeline"]::after{
    left:16px;
    right:16px;
    top:2rem;
  }
}

@media(prefers-reduced-motion:reduce){
  section[data-chapter]{
    scroll-behavior:auto;
  }
}