/* ==========================
   lethianhhong.cloud — style.css
   Theme: MIDNIGHT / EMERALD / GOLD (premium cloud)
   ========================== */

*,*::before,*::after{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
html,body{height:100%}
body{margin:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
input,button,textarea,select{font:inherit}
a{color:inherit;text-decoration:none}
p{margin:0 0 1rem}
h1,h2,h3{margin:0 0 .75rem;line-height:1.15}
ul,ol{margin:0;padding:0}
li{list-style:none}
details summary{cursor:pointer}

:root{
  --bg:#050714;
  --bg2:#070A1D;
  --card:rgba(255,255,255,.035);
  --stroke:rgba(255,255,255,.10);

  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --muted2:rgba(255,255,255,.56);

  /* emerald + gold */
  --e1:#10B981;
  --e2:#34D399;
  --g1:#D6B36A;
  --g2:#F5D58A;

  --grad:linear-gradient(135deg,var(--e1),var(--g1) 55%, var(--e2));
  --grad2:linear-gradient(135deg, rgba(16,185,129,.20), rgba(214,179,106,.14) 55%, rgba(52,211,153,.10));

  --glow:0 18px 70px rgba(16,185,129,.14), 0 18px 60px rgba(214,179,106,.12);
  --shadow:0 12px 44px rgba(0,0,0,.55);
  --shadow2:0 10px 26px rgba(0,0,0,.38);

  --r-lg:22px;
  --r-md:16px;
  --container:1120px;

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

body{
  font-family:var(--font);
  background: var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

/* Animated background */
.bgFX{
  position:fixed; inset:-2px; z-index:-2;
  background:
    radial-gradient(900px 520px at 10% 10%, rgba(16,185,129,.18), transparent 55%),
    radial-gradient(800px 520px at 90% 15%, rgba(214,179,106,.14), transparent 58%),
    radial-gradient(900px 620px at 70% 85%, rgba(52,211,153,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 55%);
  filter:saturate(1.05);
  animation:bgMove 14s ease-in-out infinite alternate;
}
@keyframes bgMove{
  from{ transform: translate3d(0,0,0) scale(1); }
  to{ transform: translate3d(0,-10px,0) scale(1.02); }
}

/* Cursor glow (controlled by JS) */
.cursorGlow{
  position:fixed; left:0; top:0; width: 280px; height: 280px;
  transform: translate(-50%,-50%);
  border-radius:999px;
  pointer-events:none;
  z-index:-1;
  background: radial-gradient(circle at 40% 40%, rgba(214,179,106,.18), rgba(16,185,129,.12) 45%, transparent 70%);
  filter: blur(2px);
  opacity:.9;
}

.container{ width:min(var(--container), calc(100% - 2rem)); margin-inline:auto; }

.skip-link{position:absolute;left:-9999px;top:12px;z-index:9999;background:#fff;color:#111;padding:.75rem 1rem;border-radius:10px}
.skip-link:focus{left:12px}

.header{
  position:sticky; top:0; z-index:1000;
  background: rgba(5,7,20,.62);
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0}

.brand{display:flex;align-items:center;gap:.8rem;min-width:220px}
.brand__mark{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background: var(--grad); box-shadow: var(--glow);
  font-weight: 900; letter-spacing:.5px;
}
.brand__text{display:flex;flex-direction:column;gap:.1rem}
.brand__text strong{font-size:.98rem}
.brand__sub{font-size:.78rem;color:var(--muted2)}

.nav{display:flex;align-items:center;gap:.6rem}
.nav__menu{display:flex;align-items:center;gap:.9rem}
.nav__menu a{
  font-size:.92rem;color:var(--muted);
  padding:.55rem .6rem;border-radius:12px;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.nav__menu a:hover{background:rgba(255,255,255,.06);color:var(--text);transform:translateY(-1px)}
.nav__toggle{
  display:none;width:44px;height:44px;border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);color:var(--text);
}
.nav__toggleLines{width:18px;height:2px;background:var(--text);display:block;margin:0 auto;position:relative}
.nav__toggleLines::before,.nav__toggleLines::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--text)}
.nav__toggleLines::before{top:-6px}.nav__toggleLines::after{top:6px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border-radius:14px;padding:.85rem 1.05rem;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color:var(--text);cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  box-shadow: 0 8px 22px rgba(0,0,0,.24);
  position:relative; overflow:hidden;
}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.18)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--grad);border-color:rgba(255,255,255,.10);box-shadow:var(--glow)}
.btn--ghost{background:transparent;border-color:rgba(255,255,255,.14)}
.btn--sm{padding:.6rem .85rem;border-radius:12px;font-size:.9rem}
.btn--block{width:100%}

/* Shine effect */
.btn--shine::after{
  content:""; position:absolute; inset:-40%;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.22), transparent 60%);
  transform: translateX(-60%) rotate(8deg);
  animation: shine 2.4s ease-in-out infinite;
  opacity:.55;
}
@keyframes shine{
  0%{ transform: translateX(-80%) rotate(8deg); }
  60%{ transform: translateX(90%) rotate(8deg); }
  100%{ transform: translateX(90%) rotate(8deg); }
}

/* HERO */
.hero{padding:3.25rem 0 1.4rem; position:relative; overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.2fr .9fr;gap:2rem;align-items:center}
.kicker{
  display:inline-flex;align-items:center;gap:.6rem;
  color:var(--muted);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  padding:.5rem .75rem;border-radius:999px;width:fit-content;margin-bottom:1rem
}
.dot{width:10px;height:10px;border-radius:99px;background:var(--grad);box-shadow:0 0 0 4px rgba(16,185,129,.16)}
.hero__title{font-size:clamp(2rem,4vw,3.35rem);letter-spacing:-0.02em}
.accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__subtitle{color:var(--muted);font-size:1.05rem;line-height:1.65;max-width:62ch}
.hero__cta{display:flex;gap:.75rem;flex-wrap:wrap;margin:1.25rem 0 1rem}
.hero__note{color:var(--muted);line-height:1.8;margin-top:.8rem}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:1rem}
.cardMini{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow2);
  padding:.85rem .9rem;
}
.stat__num{font-weight:900;font-size:1.4rem;letter-spacing:-0.02em}
.stat__label{display:block;color:var(--muted2);margin-top:.2rem;font-size:.86rem}

.hero__media{display:flex;justify-content:flex-end}
.portrait{
  margin:0;width:min(420px,100%);
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  position:relative;
}
.portrait img{width:100%;height:auto;transform:scale(1.02);filter:saturate(1.05) contrast(1.03)}
.portrait::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(5,7,20,.66), transparent 55%);
  pointer-events:none;
}
.portrait__cap{
  position:absolute;left:14px;right:14px;bottom:14px;
  padding:.85rem .9rem;border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(5,7,20,.55);
  backdrop-filter: blur(10px);
}
.portrait__capTitle{display:block;font-weight:900}
.portrait__capSub{display:block;color:var(--muted2);margin-top:.15rem}
.portrait__capSub a{text-decoration:underline;text-underline-offset:3px}

/* Tilt container (subtle) */
.tilt{ transform-style:preserve-3d; will-change: transform; }

/* Marquee */
.marquee{
  margin-top:1.2rem;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  border-radius:999px;
  overflow:hidden;
  box-shadow: var(--shadow2);
}
.marquee__track{
  display:flex; gap:2rem;
  padding:.65rem 1rem;
  white-space:nowrap;
  will-change: transform;
  animation: marquee 14s linear infinite;
  color: rgba(255,255,255,.78);
}
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* Sections */
.section{padding:4rem 0}
.section--alt{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.section__head{margin-bottom:1.5rem}
.section__title{font-size:clamp(1.55rem,2.5vw,2.2rem);letter-spacing:-0.015em}
.section__lead{color:var(--muted);line-height:1.75;max-width:78ch}

.grid{display:grid;gap:1.1rem}
.grid--2{grid-template-columns:1fr 1fr}
.grid--3{grid-template-columns:repeat(3,1fr)}

.card{
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow2);
  padding:1.25rem 1.25rem;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:-1px; pointer-events:none;
  background: var(--grad2);
  opacity:.45;
  mask: linear-gradient(#000, transparent 58%);
}
.card--soft{ background: rgba(255,255,255,.022); }
.card--accent{ border-color: rgba(214,179,106,.25); box-shadow: var(--glow); }
.card__title{font-size:1.15rem;letter-spacing:-0.01em}
.card__text{color:var(--muted);line-height:1.85}

.list{margin-top:.75rem;display:grid;gap:.55rem}
.list li{color:var(--muted);line-height:1.65;padding-left:1.1rem;position:relative}
.list li::before{
  content:""; width:8px;height:8px;border-radius:99px;
  background: var(--grad);
  position:absolute;left:0;top:.55rem;
  box-shadow: 0 0 0 3px rgba(214,179,106,.14);
}
.list--cols{grid-template-columns:1fr 1fr;column-gap:1.2rem}

.quote{
  margin-top:1.1rem;
  padding:1.1rem 1.1rem;
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}
.quote__text{color:var(--text);line-height:1.75}
.quote__by{color:var(--muted2);margin-top:.6rem}

.callout{
  margin-top:1.2rem;
  border-radius:var(--r-lg);
  padding:1.2rem 1.2rem;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(16,185,129,.14), rgba(214,179,106,.10) 55%, rgba(52,211,153,.08));
  box-shadow: var(--shadow2);
}
.callout__title{font-size:1.1rem}
.callout__text{color:var(--muted);line-height:1.8}
.callout a{text-decoration:underline;text-underline-offset:3px}

.notice{
  margin-top:1rem;
  border-radius:var(--r-md);
  padding:.85rem .95rem;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
  color:var(--muted);
  line-height:1.65;
}

.pillGrid{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1rem}
.pill{
  padding:.55rem .8rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color:var(--muted);
  font-size:.92rem;
}

.faq{display:grid;gap:.75rem}
.faq__item{
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.faq__q{
  padding:1rem 1.05rem;
  list-style:none;
  font-weight:800;
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{
  content:"+";
  width:28px;height:28px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  text-align:center;line-height:26px;
  color:var(--muted);
}
details[open] .faq__q::after{content:"–";color:rgba(255,255,255,.88)}
.faq__a{padding:0 1.05rem 1rem;color:var(--muted);line-height:1.75}

.form{margin-top:.9rem;display:grid;gap:.85rem}
.field{display:grid;gap:.45rem}
.field span{color:var(--muted2);font-size:.9rem}
.field input,.field textarea{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  color:var(--text);
  padding:.85rem .95rem;
  outline:none;
}
.field input:focus,.field textarea:focus{
  border-color: rgba(214,179,106,.42);
  box-shadow: 0 0 0 4px rgba(16,185,129,.16);
}
.form__hint{color:var(--muted2);font-size:.88rem;line-height:1.6;margin-top:.2rem}

.footer{
  padding:2.8rem 0 1.3rem;
  border-top:1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.18);
}
.footer__grid{display:grid;grid-template-columns:1.2fr .9fr 1fr;gap:1.1rem;align-items:start}
.brand--footer .brand__mark{width:40px;height:40px;border-radius:14px}
.footer__title{font-size:1rem;margin-bottom:.65rem}
.footer__text{color:var(--muted);line-height:1.75}
.footer__links{display:grid;gap:.4rem}
.footer__links a{color:var(--muted);padding:.25rem 0;border-radius:10px}
.footer__links a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}

.footer__bottom{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:1.2rem;margin-top:1.2rem;border-top:1px solid rgba(255,255,255,.06);
  color:var(--muted2);
}
.toTop{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  transition: transform .2s ease, background .2s ease;
}
.toTop:hover{transform:translateY(-1px);background:rgba(255,255,255,.06)}

.noscript{
  position:fixed;left:12px;right:12px;bottom:12px;
  padding:.9rem 1rem;border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(5,7,20,.85);
  color:var(--muted);
  backdrop-filter: blur(10px);
}

/* Reveal */
[data-reveal]{opacity:0;transform:translateY(10px);transition:opacity .75s ease, transform .75s ease}
.revealed{opacity:1!important;transform:translateY(0)!important}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  html:focus-within{scroll-behavior:auto}
  .bgFX{animation:none}
  .marquee__track{animation:none}
  .btn--shine::after{animation:none}
  [data-reveal]{transition:none}
}

/* Responsive */
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr}
  .hero__media{justify-content:flex-start}
  .grid--3{grid-template-columns:1fr}
  .grid--2{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .list--cols{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
}
@media (max-width:860px){
  .nav__toggle{display:inline-flex;align-items:center;justify-content:center}
  .nav__menu{
    position:absolute;right:1rem;top:68px;
    width:min(520px, calc(100% - 2rem));
    display:none;flex-direction:column;align-items:stretch;gap:.25rem;
    padding:.7rem;border-radius:var(--r-lg);
    border:1px solid rgba(255,255,255,.12);
    background: rgba(5,7,20,.92);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow);
  }
  .nav__menu a{padding:.75rem .85rem;border-radius:14px;background:rgba(255,255,255,.03)}
  .nav__menu.is-open{display:flex}
}
@media (max-width:520px){
  .hero{padding-top:2.5rem}
  .hero__cta{flex-direction:column}
  .btn{width:100%}
  .brand__sub{display:none}
}