/* ═══════════════════════════════════════════════════════════════════
   Cofi Tools — premium SaaS landing (phong cách logto.io / linear).
   Aurora nền động · grid · glass · reveal khi cuộn · bento features.
   ĐỔI MÀU THƯƠNG HIỆU ở :root  →  --a1 / --a2 / --grad.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  /* ▸ Tone xanh dương neon TRẦM-TỐI. Đổi thương hiệu ở --a1 / --a2 / --grad. */
  --bg:#04060e;              /* nền navy-đen sâu */
  --bg-soft:#070a14;
  --card:rgba(255,255,255,.028);
  --card-hover:rgba(255,255,255,.05);
  --bd:rgba(255,255,255,.07);
  --bd-hover:rgba(120,170,255,.16);
  --bd-strong:rgba(47,125,255,.45);
  --tx:#eef2fb;
  --tx2:#98a4bd;
  --tx3:#5a6480;
  --a1:#2f7dff;              /* xanh dương neon chủ */
  --a2:#35c9ff;              /* cyan neon phụ (điểm nhấn) */
  --a3:#1e5bff;              /* xanh sâu */
  --grad:linear-gradient(120deg,#2f7dff 0%,#35c9ff 100%);
  --grad-3:linear-gradient(120deg,#1e5bff,#2f7dff 48%,#35c9ff);
  --grad-soft:linear-gradient(140deg,rgba(47,125,255,.13),rgba(53,201,255,.05));
  --ok:#25c281;
  --shadow:0 30px 70px -20px rgba(0,0,0,.8);
  --shadow-glow:0 0 0 1px rgba(47,125,255,.22),0 20px 60px -15px rgba(47,125,255,.4);
  --maxw:1160px;
  --r:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--tx);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  /* Sticky footer: trang luôn cao ít nhất 1 màn, footer dính đáy dù nội dung ngắn. */
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{flex:1 0 auto;}
.footer{flex-shrink:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.grad{background:var(--grad-3);-webkit-background-clip:text;background-clip:text;color:transparent;}
.muted{color:var(--tx3);}

/* ── Aurora + grid nền (cố định sau nội dung) ── */
.bg-fx{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;}
.bg-grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(120,170,255,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(120,170,255,.03) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 80% at 50% 0%,#000 30%,transparent 72%);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 30%,transparent 72%);}
.orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.34;
  animation:float 22s var(--ease) infinite alternate;}
.orb.o1{width:520px;height:520px;top:-170px;right:-90px;background:#1f6bff;}
.orb.o2{width:440px;height:440px;top:-40px;left:-120px;background:#144bd6;animation-delay:-7s;opacity:.24;}
.orb.o3{width:380px;height:380px;top:540px;left:42%;background:#1e8bff;opacity:.12;animation-delay:-12s;}
@keyframes float{to{transform:translate3d(40px,60px,0) scale(1.12);}}

/* ── Buttons ── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:12px;font-size:14.5px;font-weight:600;
  cursor:pointer;border:1px solid transparent;white-space:nowrap;
  transition:transform .18s var(--ease),background .18s,border-color .18s,box-shadow .25s,filter .18s;}
.btn i{font-size:18px;}
.btn-sm{padding:8px 16px;font-size:13.5px;border-radius:10px;}
.btn-block{width:100%;}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 26px -6px rgba(47,125,255,.6);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px -8px rgba(47,125,255,.75);filter:brightness(1.06);}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--tx);border-color:var(--bd);}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:var(--bd-hover);transform:translateY(-2px);}

/* ── Pills / badges ── */
.pill{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:#bcd4ff;
  background:rgba(47,125,255,.1);border:1px solid rgba(47,125,255,.26);
  padding:6px 14px;border-radius:999px;}
.pill i{font-size:14px;}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--a1);box-shadow:0 0 10px 2px var(--a1);animation:pulse 2s infinite;}
@keyframes pulse{50%{opacity:.35;}}
.badge{font-size:11px;padding:3px 10px;border-radius:999px;font-weight:600;letter-spacing:.02em;}
.badge-pro{color:#bcd4ff;background:rgba(47,125,255,.15);}
.badge-free{color:#7ee6b0;background:rgba(37,194,129,.15);}

/* ── NAV ── */
.nav{position:sticky;top:0;z-index:50;transition:.3s var(--ease);}
.nav.scrolled{backdrop-filter:blur(16px);background:rgba(4,6,14,.78);border-bottom:1px solid var(--bd);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:66px;}
.brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;letter-spacing:-.01em;}
.brand-logo{width:32px;height:32px;border-radius:10px;background:var(--grad);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;
  box-shadow:0 4px 16px -3px rgba(47,125,255,.7);}
.nav-links{display:flex;align-items:center;gap:26px;font-size:14px;color:var(--tx2);}
.nav-links a:not(.btn){position:relative;transition:color .15s;}
.nav-links a:not(.btn):hover{color:var(--tx);}
.nav-login{color:var(--tx);}
.nav-toggle{display:none;background:none;border:none;color:var(--tx);font-size:26px;cursor:pointer;}

/* ── HERO ── */
.hero{position:relative;padding:84px 0 60px;}
.hero-inner{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center;}
.hero-copy h1{font-size:clamp(34px,5vw,56px);line-height:1.04;font-weight:800;
  letter-spacing:-.03em;margin:22px 0 0;}
.lead{font-size:17px;color:var(--tx2);max-width:470px;margin-top:20px;}
.hero-cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap;}
.hero-note{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tx3);margin-top:16px;}
.hero-note i{color:var(--ok);font-size:15px;}
.stats{display:flex;gap:34px;margin-top:38px;padding-top:26px;border-top:1px solid var(--bd);}
.stats b{display:block;font-size:24px;font-weight:800;letter-spacing:-.02em;
  background:var(--grad-3);-webkit-background-clip:text;background-clip:text;color:transparent;}
.stats span{font-size:12.5px;color:var(--tx3);}

/* Mockup app (kính, nổi 3D) */
.hero-app{position:relative;}
.app-window{background:linear-gradient(180deg,rgba(16,22,40,.9),rgba(9,13,26,.93));
  border:1px solid var(--bd-hover);border-radius:18px;box-shadow:var(--shadow);
  backdrop-filter:blur(10px);overflow:hidden;
  transform:perspective(1600px) rotateY(-5deg) rotateX(2deg);
  transition:transform .5s var(--ease);}
.hero-app:hover .app-window{transform:perspective(1600px) rotateY(-1deg) rotateX(.5deg);}
.win-bar{display:flex;align-items:center;gap:7px;padding:12px 15px;border-bottom:1px solid var(--bd);}
.win-bar i{width:11px;height:11px;border-radius:50%;background:#3a3a48;}
.win-bar i:nth-child(1){background:#ff5f57;}.win-bar i:nth-child(2){background:#febc2e;}.win-bar i:nth-child(3){background:#28c840;}
.win-bar .win-title{margin-left:8px;font-size:11.5px;color:var(--tx3);}
.app-body{padding:15px;}
.app-thumb{position:relative;height:158px;border-radius:12px;overflow:hidden;
  background:linear-gradient(135deg,#123056,#0c1c3a);display:flex;align-items:center;justify-content:center;}
.app-thumb::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 20%,rgba(47,125,255,.4),transparent 60%);}
.app-tag{position:absolute;top:11px;left:12px;z-index:2;font-size:11px;color:#bcd4ff;
  background:rgba(0,0,0,.4);padding:4px 10px;border-radius:8px;backdrop-filter:blur(4px);}
.app-play{position:relative;z-index:2;width:54px;height:54px;border-radius:50%;
  background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;
  color:#0c1c3a;font-size:24px;box-shadow:0 8px 30px rgba(0,0,0,.4);}
.wave{display:flex;align-items:flex-end;gap:3px;height:34px;margin:16px 4px 12px;}
.wave span{flex:1;border-radius:2px;background:var(--grad);animation:eq 1.1s var(--ease) infinite alternate;}
@keyframes eq{from{transform:scaleY(.35);}to{transform:scaleY(1);}}
.app-sub{background:rgba(255,255,255,.05);border:1px solid var(--bd);border-radius:11px;padding:11px 13px;}
.app-sub-label{display:block;font-size:11.5px;color:var(--tx3);margin-bottom:2px;}
.app-sub-text{font-size:14px;color:var(--tx);}
.app-float{position:absolute;z-index:3;display:flex;align-items:center;gap:9px;
  background:rgba(16,16,26,.92);border:1px solid var(--bd-hover);border-radius:12px;
  padding:10px 14px;font-size:12.5px;box-shadow:var(--shadow);backdrop-filter:blur(8px);
  animation:bob 4s var(--ease) infinite alternate;}
.app-float i{color:var(--ok);font-size:17px;}
.app-float.f1{top:-18px;right:-22px;}
.app-float.f2{bottom:26px;left:-30px;animation-delay:-2s;}
@keyframes bob{to{transform:translateY(-10px);}}

/* ── Logo strip / trust ── */
.trust{padding:8px 0 26px;}
.trust p{text-align:center;font-size:12px;color:var(--tx3);letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.marquee-track{display:flex;gap:52px;width:max-content;animation:scroll 26s linear infinite;}
.marquee-track span{display:flex;align-items:center;gap:9px;color:var(--tx2);font-size:15px;font-weight:600;white-space:nowrap;opacity:.7;}
.marquee-track i{font-size:20px;color:var(--a1);}
@keyframes scroll{to{transform:translateX(-50%);}}

/* ── Sections ── */
.section{padding:70px 0;}
.section-head{text-align:center;max-width:640px;margin:0 auto 44px;}
.section-head .eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--a1);margin-bottom:12px;}
.section-head h2{font-size:clamp(26px,3.6vw,38px);font-weight:800;letter-spacing:-.025em;line-height:1.12;}
.section-head p{font-size:16px;color:var(--tx2);margin-top:14px;}

/* ── Bento features ── */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.bento .b-wide{grid-column:span 2;}
.feat{position:relative;background:var(--card);border:1px solid var(--bd);border-radius:18px;
  padding:24px;overflow:hidden;transition:border-color .25s,background .25s,transform .25s var(--ease);}
.feat::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:radial-gradient(180px 120px at var(--mx,50%) var(--my,0%),rgba(47,125,255,.55),transparent 65%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .25s;}
.feat:hover{transform:translateY(-4px);border-color:var(--bd-hover);background:var(--card-hover);}
.feat:hover::before{opacity:1;}
.feat-ico{width:46px;height:46px;border-radius:13px;background:var(--grad-soft);
  border:1px solid rgba(47,125,255,.3);color:#bcd4ff;display:flex;align-items:center;
  justify-content:center;font-size:23px;margin-bottom:16px;}
.feat h3{font-size:17px;font-weight:700;margin-bottom:8px;letter-spacing:-.01em;}
.feat p{font-size:14px;color:var(--tx2);}

/* ── Tool grid ── */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;}
.tool-card{position:relative;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);
  border-radius:18px;padding:22px;cursor:pointer;overflow:hidden;
  box-shadow:0 10px 30px -18px rgba(0,0,0,.7);
  transition:transform .25s var(--ease),border-color .25s,background .25s,box-shadow .25s;}
.tool-card::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;
  background:radial-gradient(120% 90% at 50% -10%,rgba(47,125,255,.14),transparent 60%);}
.tool-card:hover{transform:translateY(-6px);border-color:var(--bd-strong);background:var(--card-hover);
  box-shadow:0 24px 50px -22px rgba(47,125,255,.5);}
.tool-card:hover::after{opacity:1;}
.tool-card>*{position:relative;z-index:1;}
.tool-top{display:flex;align-items:center;justify-content:space-between;}
.tool-ico{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:24px;box-shadow:0 8px 22px -8px rgba(0,0,0,.6);}
/* Logo THẬT trong ô icon: ảnh tự chứa nền squircle riêng → bỏ gradient, chỉ đổ bóng. */
.tool-ico-img,.m-ico-img{background:none!important;box-shadow:none;overflow:hidden;}
.tool-ico-img img,.m-ico-img img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.55));}
.tool-card h3{font-size:17px;font-weight:700;margin:16px 0 5px;letter-spacing:-.01em;}
/* "Dub" đổ gradient ĐÚNG màu logo app (tím→xanh→cyan) → "Cofi" trắng, "Dub" màu, đồng bộ icon. */
.nm-dub{background:linear-gradient(120deg,#7C4DFF,#4D7CFF 55%,#22D3EE);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.tool-card p{font-size:13.5px;color:var(--tx2);min-height:40px;}
.tool-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--bd);}
.tool-price{font-size:15px;font-weight:700;}
.tool-arrow{color:var(--a1);font-size:19px;transition:transform .2s var(--ease);}
.tool-card:hover .tool-arrow{transform:translateX(4px);}
.tool-soon{border-style:dashed;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;color:var(--tx3);min-height:190px;background:rgba(255,255,255,.012);cursor:default;}
.tool-soon:hover{transform:none;box-shadow:none;border-color:var(--bd);}
.tool-soon i{font-size:28px;margin-bottom:8px;}

/* ── Showcase (mockup ngang) ── */
.showcase{position:relative;background:var(--grad-soft);border:1px solid var(--bd);
  border-radius:24px;padding:40px;display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;overflow:hidden;}
.showcase-copy h2{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.02em;line-height:1.14;}
.showcase-copy p{font-size:15.5px;color:var(--tx2);margin:16px 0 22px;}
.check-list{list-style:none;display:grid;gap:12px;margin-bottom:26px;}
.check-list li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;color:var(--tx);}
.check-list i{color:var(--ok);font-size:19px;margin-top:1px;flex-shrink:0;}
.code-card{background:#0a0a13;border:1px solid var(--bd-hover);border-radius:16px;
  overflow:hidden;box-shadow:var(--shadow);}
.code-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--bd);}
.code-head i{width:10px;height:10px;border-radius:50%;background:#3a3a48;}
.code-head span{margin-left:auto;font-size:11.5px;color:var(--tx3);}
.code-body{padding:18px 20px;font-family:'SFMono-Regular',ui-monospace,Menlo,monospace;
  font-size:13px;line-height:1.9;color:var(--tx2);white-space:pre;overflow-x:auto;}
.code-body .k{color:#35c9ff;}.code-body .s{color:#7ee6b0;}.code-body .c{color:var(--tx3);}.code-body .f{color:#2f7dff;}

/* ── Steps timeline ── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative;}
.step{position:relative;background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:22px;
  transition:transform .25s var(--ease),border-color .25s;}
.step:hover{transform:translateY(-4px);border-color:var(--bd-hover);}
.step-n{position:absolute;top:16px;right:18px;font-size:34px;font-weight:800;color:rgba(255,255,255,.05);letter-spacing:-.03em;}
.step-i{width:44px;height:44px;border-radius:12px;background:var(--grad-soft);border:1px solid rgba(47,125,255,.3);
  color:#bcd4ff;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px;}
.step b{display:block;font-size:15px;margin-bottom:6px;}
.step p{font-size:13px;color:var(--tx2);}

/* ── Pricing ── */
.price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:760px;margin:0 auto;}
.price-card{position:relative;background:var(--card);border:1px solid var(--bd);
  border-radius:20px;padding:30px;transition:transform .25s var(--ease),border-color .25s;}
.price-card:hover{transform:translateY(-4px);border-color:var(--bd-hover);}
.price-featured{border:1px solid var(--bd-strong);background:var(--grad-soft);box-shadow:var(--shadow-glow);}
.price-featured .badge{position:absolute;top:22px;right:22px;}
.price-name{font-size:14px;color:var(--tx2);font-weight:600;}
.price-amt{font-size:40px;font-weight:800;margin:8px 0 20px;letter-spacing:-.03em;}
.price-amt small{font-size:15px;font-weight:500;color:var(--tx3);letter-spacing:0;}
.price-card ul{list-style:none;margin-bottom:24px;display:grid;gap:2px;}
.price-card li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--tx2);padding:7px 0;}
.price-card li i{color:var(--ok);font-size:18px;}

/* ── FAQ ── */
.faq{max-width:760px;margin:0 auto;display:grid;gap:12px;}
.faq-item{background:var(--card);border:1px solid var(--bd);border-radius:14px;overflow:hidden;transition:border-color .2s;}
.faq-item:hover{border-color:var(--bd-hover);}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 22px;cursor:pointer;font-size:15.5px;font-weight:600;user-select:none;}
.faq-q i{font-size:20px;color:var(--a1);transition:transform .25s var(--ease);flex-shrink:0;}
.faq-item.open .faq-q i{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease);}
.faq-a p{padding:0 22px 20px;font-size:14.5px;color:var(--tx2);}

/* ── CTA band ── */
.cta-band{position:relative;text-align:center;background:var(--grad-soft);
  border:1px solid var(--bd-strong);border-radius:26px;padding:56px 30px;overflow:hidden;}
.cta-band::before{content:"";position:absolute;top:-60%;left:50%;transform:translateX(-50%);
  width:600px;height:600px;background:radial-gradient(circle,rgba(47,125,255,.3),transparent 60%);}
.cta-band>*{position:relative;}
.cta-band h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.025em;}
.cta-band p{font-size:16px;color:var(--tx2);margin:14px auto 28px;max-width:480px;}
.cta-band .hero-cta{justify-content:center;}

/* ── Footer ── */
.footer{border-top:1px solid var(--bd);padding:56px 0 30px;margin-top:40px;background:var(--bg-soft);}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;margin-bottom:40px;}
.footer-tag{font-size:13.5px;color:var(--tx2);margin-top:12px;max-width:260px;}
.footer-col h4{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);margin-bottom:14px;}
.footer-col a{display:block;font-size:14px;color:var(--tx2);padding:5px 0;transition:color .15s;}
.footer-col a:hover{color:var(--tx);}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:26px;border-top:1px solid var(--bd);font-size:12.5px;color:var(--tx3);}
.footer-social{display:flex;gap:10px;}
.footer-social a{width:36px;height:36px;border-radius:9px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;transition:transform .18s,box-shadow .18s;}
.footer-social a svg,.footer-social a img{display:block;width:36px;height:36px;object-fit:cover;}
.footer-social a:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.35);}

/* ── Modal ── */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;}
.modal[hidden]{display:none;}
.modal-backdrop{position:absolute;inset:0;background:rgba(4,4,10,.7);backdrop-filter:blur(6px);animation:fade .25s;}
.modal-card{position:relative;background:linear-gradient(180deg,#0f1524,#0a0e18);
  border:1px solid var(--bd-hover);border-radius:20px;padding:28px;max-width:470px;width:100%;
  max-height:calc(100vh - 40px);overflow-y:auto;
  box-shadow:var(--shadow);animation:pop .3s var(--ease);}
@keyframes fade{from{opacity:0;}}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.97);}}
.modal-x{position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid var(--bd);color:var(--tx2);
  font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.18s;}
.modal-x:hover{color:var(--tx);border-color:var(--bd-hover);}
.m-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.m-ico{width:56px;height:56px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:28px;box-shadow:0 10px 26px -8px rgba(0,0,0,.6);}
.m-head h3{font-size:20px;font-weight:700;}
.m-desc{font-size:14.5px;color:var(--tx2);margin-bottom:22px;}
.m-actions{display:flex;flex-direction:column;gap:10px;}

/* ═══ HERO GỌN ═══ */
.hero-lite{position:relative;text-align:center;padding:74px 0 30px;}
.hero-lite .pill{margin-bottom:20px;}
.hero-lite h1{font-size:clamp(30px,4.4vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.06;}
.hero-lite .lead{font-size:16.5px;color:var(--tx2);max-width:560px;margin:16px auto 0;}
.hero-lite .lead b{color:var(--tx);font-weight:600;}

/* ═══ SECTION DANH SÁCH TOOL ═══ */
.section-tools{padding:26px 0 80px;}
.tool-cta{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--a1);}
.tool-card:hover .tool-cta .tool-arrow{transform:translateX(4px);}

/* ═══ FOOTER GỌN ═══ */
.footer-lite{padding:26px 0;margin-top:0;}
.footer-lite .footer-bottom{border-top:none;padding-top:0;}
.footer-lite .brand{font-size:15px;}

/* ═══ TRANG CHI TIẾT TOOL (modal mở rộng) ═══ */
/* overflow: x ẩn (giữ bo góc video), y auto (CUỘN được khi cao hơn màn → không cắt nút dưới). */
.modal-card.is-detail{max-width:780px;padding:0;overflow:hidden auto;max-height:calc(100vh - 40px);}
.modal-card.is-detail .modal-x{background:rgba(4,6,14,.55);border-color:rgba(255,255,255,.14);
  backdrop-filter:blur(6px);z-index:5;}
.td-video{position:relative;aspect-ratio:16/9;background:#05070f;overflow:hidden;}
.td-video .v-frame{width:100%;height:100%;border:0;display:block;background:#05070f;object-fit:cover;}
.v-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;color:var(--tx3);background:
    radial-gradient(120% 100% at 50% 0%,rgba(47,125,255,.12),transparent 60%),#070b16;}
.v-empty i{font-size:38px;opacity:.7;}
.v-empty span{font-size:13.5px;letter-spacing:.02em;}
.td-tabs{display:flex;gap:8px;padding:12px 16px;border-bottom:1px solid var(--bd);
  background:rgba(255,255,255,.015);}
.td-tab{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;
  font-size:13px;font-weight:600;cursor:pointer;color:var(--tx2);
  background:transparent;border:1px solid transparent;transition:.18s var(--ease);}
.td-tab i{font-size:16px;}
.td-tab:hover{color:var(--tx);background:rgba(255,255,255,.05);}
.td-tab.active{color:#fff;background:var(--grad-soft);border-color:var(--bd-strong);}
.td-body{padding:22px 26px 26px;}
.td-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.td-title h3{font-size:20px;font-weight:700;letter-spacing:-.01em;}
.td-meta{display:flex;align-items:center;gap:10px;margin-top:5px;}
.td-price{font-size:15px;font-weight:700;}
.td-price small{font-size:12px;font-weight:500;color:var(--tx3);}
.td-desc{font-size:14.5px;color:var(--tx2);margin-bottom:16px;}
.td-feats{list-style:none;display:grid;gap:9px;margin-bottom:22px;}
.td-feats li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--tx);}
.td-feats i{color:var(--ok);font-size:18px;flex-shrink:0;margin-top:1px;}
/* Dòng lưu ý (vd: không kèm API) — hộp cảnh báo nhẹ, viền trái vàng. */
.td-note{display:flex;align-items:flex-start;gap:10px;margin:0 0 20px;padding:12px 14px;
  border:1px solid rgba(245,180,60,.28);border-left:3px solid #f5b43c;border-radius:10px;
  background:rgba(245,180,60,.07);font-size:13.5px;color:var(--tx2);line-height:1.5;}
.td-note i{color:#f5b43c;font-size:18px;flex-shrink:0;margin-top:1px;}
.td-note b{color:var(--tx);}
.td-actions{display:flex;gap:10px;flex-wrap:wrap;}
.td-actions .btn{flex:1;min-width:150px;}

/* ── Trang chi tiết tool (tool.html) ── */
.tool-page{max-width:840px;margin:0 auto;padding:26px 20px 72px;}
.tool-back{display:inline-flex;align-items:center;gap:7px;color:var(--tx2);
  font-size:14px;margin-bottom:18px;transition:color .15s;}
.tool-back:hover{color:var(--tx);}
.tool-back i{font-size:17px;}
.tp-card{position:relative;background:linear-gradient(180deg,#0f1524,#0a0e18);
  border:1px solid var(--bd);border-radius:20px;overflow:hidden;}
.tp-missing{padding:56px 26px;text-align:center;}
.tp-missing i{font-size:52px;color:var(--tx3);}
.tp-missing h3{font-size:22px;font-weight:700;margin:14px 0 6px;}
.tp-missing p{color:var(--tx2);font-size:14.5px;margin-bottom:22px;}
.tp-missing .btn{display:inline-flex;}

/* ── Reveal khi cuộn ── */
[data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);}
[data-reveal].in{opacity:1;transform:none;}

/* ── Responsive ── */
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:50px;}
  .hero{padding:56px 0 40px;}
  .app-window{transform:none;}
  .hero-app:hover .app-window{transform:none;}
  .bento{grid-template-columns:repeat(2,1fr);}
  .bento .b-wide{grid-column:span 2;}
  .steps{grid-template-columns:repeat(2,1fr);}
  .showcase{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .nav-links{position:absolute;top:66px;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:2px;padding:16px 24px;background:rgba(5,7,14,.98);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--bd);display:none;}
  .nav-links.open{display:flex;}
  .nav-links a:not(.btn){padding:11px 0;}
  .nav-toggle{display:block;}
}
@media(max-width:560px){
  .stats{gap:22px;flex-wrap:wrap;}
  .bento,.price-grid,.steps{grid-template-columns:1fr;}
  .bento .b-wide{grid-column:span 1;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .showcase{padding:26px;}
  .footer-lite .footer-bottom{flex-direction:column;gap:14px;text-align:center;}
  .td-actions{flex-direction:column;}
  .td-actions .btn{width:100%;}
  .td-tabs{flex-wrap:wrap;}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;}
  [data-reveal]{opacity:1;transform:none;}
}