/* ============================================================
   Dương Gia Holdings — Quantitative Trading
   "Royal house" — ivory parchment · ceremonial deep red · antique gold
   Cormorant Garamond (display) · EB Garamond (body) · classical, symmetric, spacious
   ============================================================ */

:root {
  --paper:#F5EFE2; --paper-2:#EFE6D4; --paper-3:#EAE0CB;
  --ink:#27160F; --ink-soft:#5B463B; --ink-faint:#8A7867;

  --red-900:#3A0A11; --red-800:#52101B; --red-700:#6E1423; --red-600:#7E1A2A;
  --gold-700:#7E6026; --gold-600:#9A7A30; --gold-500:#B0903E; --gold-400:#C2A14F; --gold-300:#D8BE76; --gold-200:#E7D49A;

  --line: rgba(39,22,15,.14);
  --line-2: rgba(39,22,15,.22);
  --gold-line: rgba(176,144,62,.5);

  --grad-gold: linear-gradient(115deg, #E7D49A 0%, #C2A14F 32%, #A7842F 55%, #8A6A24 72%, #E1CC8E 100%);
  --grad-red: linear-gradient(165deg, #6E1423 0%, #52101B 52%, #3A0A11 100%);

  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body:"EB Garamond", Georgia, "Times New Roman", serif;

  --container:1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:340ms;
  --header-h:88px;
}

*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top: var(--header-h); }
body {
  font-family: var(--body); color: var(--ink); background: var(--paper);
  font-size:19px; line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; position:relative;
}
/* parchment grain */
body::after {
  content:""; position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul { list-style:none; padding:0; }
::selection { background: var(--gold-400); color:#2a2008; }
:focus-visible { outline:1px solid var(--gold-600); outline-offset:4px; }

/* ---------- Type ---------- */
.display,h1,h2 { font-family:var(--serif); font-weight:500; line-height:1.05; letter-spacing:.002em; }
h3 { font-family:var(--serif); font-weight:600; }
.display { font-size: clamp(2.8rem, 7vw, 6rem); line-height:1.02; }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
p { color: var(--ink-soft); }
.lead { font-size: clamp(1.18rem,1.6vw,1.42rem); line-height:1.7; color: var(--ink-soft); }
.serif-italic { font-style:italic; }

.gold { background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }

.eyebrow {
  font-family:var(--body); font-weight:600; font-size:.8rem; letter-spacing:.34em; text-transform:uppercase;
  color: var(--gold-700);
}
.eyebrow.on-red { color: var(--gold-300); }

/* ornament divider */
.ornament { display:flex; align-items:center; justify-content:center; gap:1.1rem; }
.ornament::before, .ornament::after { content:""; width:clamp(48px,9vw,110px); height:1px; }
.ornament::before { background:linear-gradient(90deg, transparent, var(--gold-line)); }
.ornament::after { background:linear-gradient(90deg, var(--gold-line), transparent); }
.ornament i { display:block; width:7px; height:7px; transform:rotate(45deg); background:var(--grad-gold); flex:none; }
.ornament.on-red::before { background:linear-gradient(90deg, transparent, rgba(216,190,118,.55)); }
.ornament.on-red::after { background:linear-gradient(90deg, rgba(216,190,118,.55), transparent); }

/* ---------- Layout ---------- */
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:32px; position:relative; z-index:2; }
.section { padding: clamp(96px,14vw,200px) 0; position:relative; z-index:1; }
.section-head { max-width:760px; margin-inline:auto; text-align:center; }
.section-head .ornament { margin:1.4rem auto 0; }
.section-head h2 { margin-top:1.3rem; }

/* ---------- Header ---------- */
.site-header {
  position:fixed; inset:0 0 auto 0; z-index:60; height:var(--header-h); display:flex; align-items:center;
  transition: background-color .45s var(--ease), box-shadow .45s, border-color .45s; border-bottom:1px solid transparent;
}
.site-header.scrolled { background: rgba(245,239,226,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom-color: var(--gold-line); }
.site-header .container { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

.brand { display:flex; align-items:center; gap:.85rem; }
.brand .mark { width:46px; height:46px; flex:none; transition: transform var(--dur) var(--ease); }
.brand:hover .mark { transform: scale(1.05); }
.brand .word { display:flex; flex-direction:column; line-height:1; }
.brand .word .vn { font-family:var(--serif); font-weight:600; font-size:1.4rem; letter-spacing:.01em; color:var(--ink); }
.brand .word .sub { font-family:var(--body); font-weight:600; font-size:.6rem; letter-spacing:.36em; text-transform:uppercase; color:var(--gold-700); margin-top:5px; }
/* over red hero */
.site-header:not(.scrolled) .brand .word .vn { color:#F7EFDD; }
.site-header:not(.scrolled) .brand .word .sub { color: var(--gold-300); }

.nav { display:flex; align-items:center; gap:2.4rem; }
.nav-links { display:flex; align-items:center; gap:2.1rem; }
.nav-links a { font-family:var(--body); font-weight:500; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); position:relative; padding:.3rem 0; transition:color var(--dur); }
.nav-links a::after { content:""; position:absolute; left:50%; right:50%; bottom:-3px; height:1px; background:var(--grad-gold); transition:left var(--dur) var(--ease), right var(--dur) var(--ease); }
.nav-links a:hover, .nav-links a.active { color:var(--gold-700); }
.nav-links a:hover::after, .nav-links a.active::after { left:0; right:0; }
.site-header:not(.scrolled) .nav-links a { color: rgba(247,239,221,.82); }
.site-header:not(.scrolled) .nav-links a:hover, .site-header:not(.scrolled) .nav-links a.active { color:#fff; }

.nav-actions { display:flex; align-items:center; gap:1.1rem; }
.lang { display:inline-flex; border:1px solid var(--line-2); border-radius:2px; overflow:hidden; font-family:var(--body); font-weight:600; font-size:.74rem; letter-spacing:.08em; }
.site-header:not(.scrolled) .lang { border-color: rgba(247,239,221,.4); }
.lang button { padding:.34rem .62rem; color:var(--ink-faint); transition:all var(--dur); }
.site-header:not(.scrolled) .lang button { color: rgba(247,239,221,.75); }
.lang button.active { background:var(--grad-gold); color:#2a2008; }

.nav-toggle { display:none; width:42px; height:42px; align-items:center; justify-content:center; position:relative; }
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after { content:""; display:block; width:24px; height:1.4px; background:var(--ink); transition:transform var(--dur); }
.site-header:not(.scrolled) .nav-toggle span, .site-header:not(.scrolled) .nav-toggle span::before, .site-header:not(.scrolled) .nav-toggle span::after { background:#F7EFDD; }
.nav-toggle span::before { position:absolute; transform:translateY(-7px); }
.nav-toggle span::after { position:absolute; transform:translateY(7px); }
body.menu-open .nav-toggle span { background:transparent; }
body.menu-open .nav-toggle span::before { transform:rotate(45deg); }
body.menu-open .nav-toggle span::after { transform:rotate(-45deg); }

/* ---------- Hero (ceremonial red) ---------- */
.hero { position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center;
  background: var(--grad-red); color:#F7EFDD; overflow:hidden; padding: calc(var(--header-h) + 40px) 0 80px; }
.hero__scale { position:absolute; inset:0; z-index:0; opacity:.5;
  background-image: radial-gradient(circle at 50% 100%, transparent 10px, rgba(200,162,75,.10) 11px, rgba(200,162,75,.10) 12px, transparent 13px);
  background-size:30px 15px;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.hero__glow { position:absolute; left:50%; top:38%; width:80vw; max-width:900px; height:80vw; max-height:900px; transform:translate(-50%,-50%); z-index:0;
  background: radial-gradient(circle, rgba(200,162,75,.16), transparent 60%); }
.hero__curve { position:absolute; left:0; right:0; bottom:0; height:40%; z-index:0; pointer-events:none; opacity:.6; }
.hero__curve svg { width:100%; height:100%; }
.curve-line { stroke-dasharray:1; stroke-dashoffset:1; animation:draw 3s var(--ease) .4s forwards; }
@keyframes draw { to { stroke-dashoffset:0; } }
.hero .container { z-index:3; }
.hero__crest { width:clamp(120px,16vw,180px); margin:0 auto 2rem; filter:drop-shadow(0 10px 40px rgba(0,0,0,.4)); }
.hero h1 { color:#F8F1E0; margin:0 auto; max-width:16ch; }
.hero h1 .gold { background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__tagline { font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(1.3rem,2.6vw,2rem); line-height:1.3; color:var(--gold-200); margin:1.3rem auto 0; max-width:24ch; }
.hero .lead { color: rgba(247,239,221,.8); max-width:560px; margin:1.6rem auto 0; }
.hero__motto { margin-top:2.2rem; }
.hero__motto .latin { font-family:var(--serif); font-style:italic; font-size:clamp(1.1rem,1.8vw,1.5rem); letter-spacing:.06em; color:var(--gold-200); }
.hero__motto .gloss { font-family:var(--body); font-size:.74rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(247,239,221,.5); margin-top:.7rem; }
.hero .ornament { margin:2rem auto 0; }
.hero__est { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:3; font-family:var(--body); font-size:.7rem; letter-spacing:.34em; text-transform:uppercase; color:rgba(247,239,221,.45); }

/* ---------- Statement ---------- */
.statement { text-align:center; max-width:900px; margin-inline:auto; }
.statement .big { font-family:var(--serif); font-weight:500; font-size:clamp(1.9rem,4vw,3.2rem); line-height:1.3; }
.statement .big .muted { color:var(--ink-faint); font-style:italic; }

/* ---------- Approach (three columns) ---------- */
.cols3 { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:clamp(48px,6vw,80px); }
.disc { text-align:center; padding: clamp(20px,3vw,40px) clamp(20px,3vw,40px); border-left:1px solid var(--line); }
.disc:first-child { border-left:none; }
.disc .rn { font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(2.2rem,3.4vw,3rem); color:var(--gold-600); line-height:1; }
.disc .rule { width:34px; height:1px; background:var(--gold-line); margin:1.2rem auto; }
.disc h3 { margin-bottom:.7rem; }
.disc p { font-size:1.02rem; max-width:32ch; margin-inline:auto; }

/* ---------- Figures ---------- */
.figures { display:grid; grid-template-columns:repeat(3,1fr); max-width:840px; margin:clamp(56px,7vw,96px) auto 0; border-top:1px solid var(--gold-line); border-bottom:1px solid var(--gold-line); text-align:center; }
.figure { padding:clamp(30px,4vw,50px) 1rem; border-left:1px solid var(--line); }
.figure:first-child { border-left:none; }
.figure .n { font-family:var(--serif); font-weight:500; font-size:clamp(2.6rem,5vw,4.2rem); line-height:1; letter-spacing:.01em; }
.figure .l { font-family:var(--body); font-weight:600; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin-top:1rem; }

/* ---------- Credo ---------- */
.credo { font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(1.9rem,4vw,3rem); line-height:1.32; color:#F8F1E0; max-width:20ch; margin:1.6rem auto 0; }
.credo-cite { font-family:var(--body); font-size:.82rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-300); margin-top:1.6rem; }

/* ---------- Mandate / markets ---------- */
.markets { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.8rem 0; margin-top:clamp(36px,5vw,56px); }
.markets span { font-family:var(--serif); font-size:clamp(1.4rem,2.4vw,1.9rem); color:var(--ink); padding:0 clamp(1rem,3vw,2.2rem); position:relative; }
.markets span:not(:last-child)::after { content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:5px; height:5px; background:var(--grad-gold); border-radius:50% 0; rotate:45deg; }

/* ---------- Ceremonial red band ---------- */
.band { background: var(--grad-red); color:#F7EFDD; text-align:center; position:relative; overflow:hidden; }
.band .hero__scale { opacity:.4; }
.band .container { z-index:2; }
.band h2 { color:#F8F1E0; }
.band p { color: rgba(247,239,221,.8); }
.band .lead { max-width:680px; margin:1.4rem auto 0; }

/* ---------- Community ---------- */
.ticks { display:inline-grid; gap:1rem; margin:2rem auto 0; text-align:left; }
.ticks li { display:flex; gap:1rem; align-items:baseline; color:var(--ink-soft); }
.band .ticks li { color: rgba(247,239,221,.82); }
.ticks .tk { color:var(--gold-400); }

/* ---------- Connect ---------- */
.connect { text-align:center; }
.connect h2 { margin:1.3rem auto 1.3rem; max-width:18ch; }
.connect .lead { max-width:520px; margin-inline:auto; }
.mailrow { margin-top:2.4rem; display:flex; gap:2rem; justify-content:center; flex-wrap:wrap; font-family:var(--body); font-weight:500; font-size:1rem; letter-spacing:.04em; }
.mailrow a { padding-bottom:4px; border-bottom:1px solid var(--gold-line); transition:all var(--dur); }
.mailrow a:hover { color:var(--gold-700); border-color:var(--gold-600); }

/* ---------- Buttons / link ---------- */
.link-arrow { display:inline-flex; align-items:center; gap:.6rem; font-family:var(--body); font-weight:600; font-size:.82rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-700); padding-bottom:5px; border-bottom:1px solid var(--gold-line); transition:gap var(--dur) var(--ease), color var(--dur), border-color var(--dur); }
.band .link-arrow, .hero .link-arrow { color:var(--gold-200); border-color:rgba(216,190,118,.5); }
.link-arrow svg { width:16px; height:16px; transition:transform var(--dur) var(--ease); }
.link-arrow:hover { gap:.95rem; color:var(--gold-600); }
.band .link-arrow:hover, .hero .link-arrow:hover { color:#fff; }
.link-arrow:hover svg { transform:translateX(4px); }

/* ---------- Footer (red) ---------- */
.site-footer { background:var(--grad-red); color:rgba(247,239,221,.7); position:relative; overflow:hidden; padding: clamp(60px,8vw,90px) 0 40px; z-index:1; text-align:center; }
.site-footer .hero__scale { opacity:.3; }
.site-footer .container { z-index:2; }
.site-footer .crest { width:64px; margin:0 auto 1.3rem; }
.site-footer .fname { font-family:var(--serif); font-weight:600; font-size:1.5rem; color:#F8F1E0; }
.site-footer .ftag { font-family:var(--body); font-size:.74rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-300); margin-top:.6rem; }
.site-footer .ornament { margin:1.8rem auto; }
.site-footer .copy { font-family:var(--body); font-size:.78rem; letter-spacing:.1em; color:rgba(247,239,221,.5); }

/* ---------- Corner marks + watermark ---------- */
.frame { position:fixed; inset:16px; z-index:55; pointer-events:none; }
.frame .c { position:absolute; width:14px; height:14px; opacity:.6; }
.frame .c::before,.frame .c::after { content:""; position:absolute; background:var(--gold-500); }
.frame .c::before { width:14px; height:1px; } .frame .c::after { width:1px; height:14px; }
.frame .tl{top:0;left:0} .frame .tr{top:0;right:0} .frame .bl{bottom:0;left:0} .frame .br{bottom:0;right:0}
.frame .tl::before,.frame .tl::after{top:0;left:0}
.frame .tr::before{top:0;right:0}.frame .tr::after{top:0;right:0}
.frame .bl::before{bottom:0;left:0}.frame .bl::after{bottom:0;left:0}
.frame .br::before{bottom:0;right:0}.frame .br::after{bottom:0;right:0}

.bignum { position:absolute; top:clamp(30px,6vw,70px); left:50%; transform:translateX(-50%); font-family:var(--serif); font-weight:500; font-size:clamp(8rem,20vw,18rem); line-height:.8; color:rgba(176,144,62,.06); z-index:0; pointer-events:none; user-select:none; }

/* ---------- Reveal ---------- */
.reveal { opacity:0; transform:translateY(20px); transition:opacity 1.2s var(--ease), transform 1.2s var(--ease); will-change:opacity,transform; }
.reveal.in { opacity:1; transform:none; }
.reveal[data-delay="1"]{transition-delay:.14s} .reveal[data-delay="2"]{transition-delay:.28s}
.reveal[data-delay="3"]{transition-delay:.42s} .reveal[data-delay="4"]{transition-delay:.56s}
.lines span { display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; }
.lines span > i { display:inline-block; font-style:inherit; transform:translateY(110%); opacity:0; transition:transform 1.3s var(--ease), opacity 1.3s var(--ease); }
.lines span > i.ital { font-style:italic; }
.lines.in span > i { transform:none; opacity:1; }
.lines.in span:nth-child(3) > i { transition-delay:.18s; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .cols3 { grid-template-columns:1fr; }
  .disc { border-left:none; border-top:1px solid var(--line); padding:2.4rem 1rem; }
  .disc:first-child { border-top:none; }
  .nav-links { position:fixed; inset:var(--header-h) 0 auto 0; flex-direction:column; align-items:center; gap:.3rem;
    background:rgba(245,239,226,.98); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); padding:1.6rem 0 2rem;
    border-bottom:1px solid var(--gold-line); transform:translateY(-100%); transition:transform .45s var(--ease), visibility .45s;
    visibility:hidden; z-index:55; }
  body.menu-open .nav-links { transform:none; visibility:visible; }
  .nav-links a { color:var(--ink-soft) !important; padding:.85rem 0; font-size:.92rem; }
  .nav-toggle { display:flex; }
  .nav { gap:.6rem; }
}
@media (max-width:560px){
  .figures { grid-template-columns:1fr; }
  .figure{ border-left:none; border-top:1px solid var(--line); } .figure:first-child{ border-top:none; }
  body{font-size:18px;} .frame{inset:10px;}
}

/* Mobile hero: align to top so tall content is never clipped */
@media (max-width:680px){
  .hero { align-items:flex-start; padding-top: calc(var(--header-h) + 18px); padding-bottom: 64px; }
  .hero__crest { width:96px; margin-bottom:1.4rem; }
  .display { font-size: clamp(2.5rem, 11vw, 3.2rem); }
  .hero h1 { margin:1.2rem auto 1.4rem; }
  .hero .lead { margin-top:1.2rem; }
  .hero__motto { margin-top:1.6rem; }
  .hero .ornament { margin:1.6rem auto 0; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal,.lines span > i { opacity:1 !important; transform:none !important; }
  .curve-line { stroke-dashoffset:0 !important; }
}