/* ===== Lagtuz Local Support — Landing styles ===== */
:root{
  /* brand */
  --teal:#1FB6AE;
  --teal-deep:#138c85;
  --teal-ink:#0f4f4b;
  --green:#3DBA6F;
  --amber:#F4B400;
  --amber-deep:#d99a00;
  --red:#E5352B;

  /* surfaces */
  --cream:#FBF5E9;
  --cream-2:#F4EAD6;
  --paper:#ffffff;
  --teal-tint:#EAF7F5;
  --ink:#1c2b2a;
  --muted:#5d6b69;
  --line:#e7ddc8;

  /* shape */
  --radius:22px;
  --radius-sm:14px;
  --radius-lg:34px;
  --ho:1; /* hero overlay scale (tweakable) */
  --shadow:0 18px 40px -24px rgba(15,79,75,.45);
  --shadow-soft:0 10px 30px -20px rgba(15,79,75,.4);
  --maxw:1180px;

  --font-display:"Inter Tight", system-ui, sans-serif;
  --font-body:"Inter Tight", system-ui, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.12;margin:0;color:var(--teal-ink);letter-spacing:-.01em;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
section{position:relative;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-display);font-weight:600;font-size:1.02rem;
  padding:.58em 1.4em;border-radius:999px;cursor:pointer;border:0;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
  white-space:nowrap;
}
.btn svg{width:1.05em;height:1.05em;}
.btn-primary{background:var(--teal);color:#fff;box-shadow:0 12px 24px -12px rgba(31,182,174,.9);}
.btn-primary:hover{background:var(--teal-deep);transform:translateY(-2px);}
.btn-amber{background:var(--amber);color:#3a2a00;box-shadow:0 12px 24px -12px rgba(244,180,0,.85);}
.btn-amber:hover{background:var(--amber-deep);transform:translateY(-2px);}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.55);backdrop-filter:blur(4px);}
.btn-ghost:hover{background:rgba(255,255,255,.24);transform:translateY(-2px);}
.btn-outline{background:#fff;color:var(--teal-deep);border:1.5px solid var(--teal);}
.btn-outline:hover{background:var(--teal-tint);transform:translateY(-2px);}

/* ---------- eyebrow / badge ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-display);font-weight:600;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.16em;color:var(--teal-deep);
  background:var(--teal-tint);padding:.45em 1em;border-radius:999px;
}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--amber);}

.ls-badge{font-family:var(--font-display);font-weight:800;letter-spacing:.04em;line-height:.95;text-transform:uppercase;}
.ls-badge .l{color:var(--amber);}
.ls-badge .s{color:var(--teal);}

/* ---------- header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
  padding:18px 0;
}
.site-header.scrolled{background:rgba(251,245,233,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line);padding:11px 0;}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{height:34px;width:auto;}
.brand .tag{font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.04em;color:#fff;background:var(--teal);padding:.2em .6em;border-radius:7px;text-transform:uppercase;}
.site-header.scrolled .brand .tag{background:var(--teal);}
.nav{display:flex;align-items:center;gap:30px;}
.nav a{font-weight:500;font-size:.96rem;color:#fff;opacity:.92;transition:opacity .2s;}
.nav a:hover{opacity:1;}
.site-header.scrolled .nav a{color:var(--ink);}
.site-header.scrolled .brand .logo-w{display:none;}
.brand .logo-c{display:none;}
.site-header.scrolled .brand .logo-c{display:block;}
.site-header.scrolled .brand .logo-w{display:none;}
.nav-cta{display:flex;align-items:center;gap:14px;}
.menu-btn{display:none;}

/* ---------- hero ---------- */
.hero{
  min-height:100vh;display:flex;align-items:center;
  background:linear-gradient(180deg, rgba(8,40,38,calc(.62*var(--ho))), rgba(8,40,38,calc(.42*var(--ho))) 45%, rgba(8,40,38,calc(.80*var(--ho))) ), url("assets/oasis-cover.jpg") center/cover no-repeat;
  color:#fff;padding:140px 0 90px;
}
.hero-inner{max-width:820px;}
.hero .ls-badge{font-size:1.05rem;margin-bottom:22px;display:inline-flex;gap:.35em;
  background:rgba(255,255,255,.12);padding:.5em 1em;border-radius:999px;backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.22);}
.hero h1{color:#fff;font-size:clamp(2.5rem,5.4vw,4.4rem);font-weight:800;letter-spacing:-.02em;text-shadow:0 4px 30px rgba(0,0,0,.3);}
.hero h1 .hl{color:var(--amber);}
.hero .lead{font-size:clamp(1.05rem,1.7vw,1.32rem);max-width:640px;margin:24px 0 34px;color:rgba(255,255,255,.94);font-weight:400;}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
.hero-note{margin-top:26px;display:flex;align-items:center;gap:10px;font-size:.95rem;color:rgba(255,255,255,.85);}
.hero-note b{color:#fff;font-weight:600;}
.hero-stats{display:flex;gap:38px;margin-top:54px;flex-wrap:wrap;}
.hero-stats .st .n{font-family:var(--font-display);font-weight:800;font-size:2.1rem;color:#fff;line-height:1;}
.hero-stats .st .l{font-size:.9rem;color:rgba(255,255,255,.82);margin-top:6px;}
.hero-stats .st .n .free{color:var(--amber);}

/* ---------- section heading ---------- */
.sec{padding:96px 0;}
.sec-tint{background:var(--teal-tint);}
.sec-paper{background:var(--paper);}
.sec-head{max-width:720px;margin-bottom:54px;}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.sec-head h2{font-size:clamp(2rem,3.6vw,2.9rem);font-weight:700;margin:14px 0 0;}
.sec-head p{color:var(--muted);font-size:1.1rem;margin-top:16px;}

/* ---------- intro band ---------- */
.intro{background:var(--paper);padding:84px 0;}
.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;}
.intro-grid .lead-lg{font-size:1.28rem;line-height:1.55;color:var(--ink);font-weight:500;}
.intro-grid p{color:var(--muted);margin-top:18px;}
.intro-card{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-lg);padding:38px;box-shadow:var(--shadow-soft);}
.intro-card .ic-row{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px dashed var(--line);}
.intro-card .ic-row:last-child{border-bottom:0;}
.intro-card .ic-ico{flex:0 0 44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--teal-tint);color:var(--teal-deep);}
.intro-card .ic-ico svg{width:22px;height:22px;}
.intro-card .ic-row h4{font-size:1.05rem;margin-bottom:2px;}
.intro-card .ic-row p{margin:0;font-size:.95rem;}

/* ---------- audience ---------- */
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;}
.chip{display:inline-flex;align-items:center;gap:.5em;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:.6em 1.15em;font-weight:500;font-size:.98rem;box-shadow:var(--shadow-soft);}
.chip .em{width:9px;height:9px;border-radius:50%;}
.audience-foot{margin-top:26px;color:var(--muted);font-size:1.02rem;}
.audience-foot b{color:var(--teal-deep);}

.pain-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:54px;}
.pain{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;box-shadow:var(--shadow-soft);position:relative;overflow:hidden;}
.pain::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--accent,var(--teal));}
.pain .pn{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--accent,var(--teal));margin-bottom:14px;}
.pain h4{font-size:1.08rem;line-height:1.3;}
.pain p{color:var(--muted);font-size:.96rem;margin-top:10px;}

/* ---------- scope ---------- */
.scope-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px;}
.scope-card{border-radius:var(--radius);padding:34px 30px;position:relative;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-soft);}
.scope-card.free{background:linear-gradient(160deg,var(--teal),var(--teal-deep));color:#fff;border:0;box-shadow:var(--shadow);}
.scope-card .tagpill{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-display);font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.1em;padding:.4em .9em;border-radius:999px;margin-bottom:18px;}
.scope-card.free .tagpill{background:var(--amber);color:#3a2a00;}
.scope-card .tagpill.you{background:var(--cream-2);color:var(--teal-deep);}
.scope-card h3{font-size:1.4rem;margin-bottom:10px;}
.scope-card.free h3{color:#fff;}
.scope-card p{color:var(--muted);font-size:1rem;}
.scope-card.free p{color:rgba(255,255,255,.92);}
.scope-card .ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.18);margin-bottom:18px;}
.scope-card:not(.free) .ico{background:var(--teal-tint);color:var(--teal-deep);}
.scope-card .ico svg{width:28px;height:28px;}

/* ---------- benefits ---------- */
.benefit-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;margin-top:8px;}
.benefit{grid-column:span 2;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-soft);transition:transform .2s ease, box-shadow .2s ease;}
.benefit:nth-child(4){grid-column:2/4;}
.benefit:nth-child(5){grid-column:4/6;}
.benefit:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.benefit .bi{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:18px;background:var(--teal-tint);color:var(--teal-deep);}
.benefit .bi svg{width:26px;height:26px;}
.benefit h4{font-size:1.18rem;margin-bottom:8px;}
.benefit p{color:var(--muted);font-size:.97rem;}
.benefit .pop{color:var(--amber-deep);font-weight:700;}

/* ---------- process ---------- */
.proc{position:relative;}
.proc-list{display:flex;flex-direction:column;gap:0;margin-top:20px;}
.step{display:grid;grid-template-columns:120px 1fr;gap:34px;padding:34px 0;border-bottom:1px solid var(--line);align-items:flex-start;}
.step:last-child{border-bottom:0;}
.step .num{font-family:var(--font-display);font-weight:800;font-size:3.2rem;color:var(--teal);line-height:1;position:relative;}
.step .num small{display:block;font-size:.8rem;font-family:var(--font-body);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-deep);margin-bottom:6px;}
.step .sc h3{font-size:1.45rem;margin-bottom:10px;}
.step .sc p{color:var(--muted);font-size:1.05rem;max-width:680px;}
.step .sc .meta{margin-top:14px;display:inline-flex;gap:8px;align-items:center;font-size:.9rem;color:var(--teal-deep);font-weight:600;background:var(--teal-tint);padding:.35em .9em;border-radius:999px;}

/* ---------- about ---------- */
.about{background:linear-gradient(165deg,#0f4f4b,#0a3a37);color:#fff;overflow:hidden;}
.about .sec-head h2{color:#fff;}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.about .est{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-display);font-weight:600;color:var(--amber);letter-spacing:.04em;margin-bottom:20px;}
.about h2{color:#fff;font-size:clamp(1.9rem,3.4vw,2.7rem);}
.about .body{color:rgba(255,255,255,.88);font-size:1.1rem;margin-top:20px;}
.about .quote{margin-top:30px;border-left:3px solid var(--amber);padding:6px 0 6px 22px;font-family:var(--font-display);font-style:normal;font-weight:500;font-size:1.32rem;line-height:1.4;color:#fff;}
.svc-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-lg);padding:34px;}
.svc-box h4{color:#fff;font-size:1.05rem;margin-bottom:16px;display:flex;align-items:center;gap:.5em;}
.svc-tags{display:flex;flex-wrap:wrap;gap:10px;}
.svc-tags span{font-size:.9rem;font-weight:500;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.92);padding:.45em .9em;border-radius:999px;}

/* about — learn more */
.about-more{margin-top:56px;text-align:center;}

/* ---------- CTA / form ---------- */
.cta{background:var(--cream);padding:96px 0;}
.cta-panel{position:relative;overflow:hidden;background:linear-gradient(140deg,var(--teal-ink),var(--teal-deep));border-radius:var(--radius-lg);padding:74px 56px;text-align:center;box-shadow:var(--shadow);}
.cta-panel::after{content:"";position:absolute;right:-60px;bottom:-80px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(244,180,0,.22),transparent 70%);pointer-events:none;}
.cta-panel > *{position:relative;z-index:1;}
.cta-panel .eyebrow{background:rgba(255,255,255,.14);color:#fff;white-space:nowrap;}
.cta-panel h2{color:#fff;font-size:clamp(2rem,3.8vw,3rem);max-width:18ch;margin:20px auto 0;}
.cta-panel p{color:rgba(255,255,255,.85);font-size:1.14rem;line-height:1.6;max-width:58ch;margin:18px auto 0;}
.cta-actions{margin-top:34px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.cta-badges{margin-top:32px;display:flex;gap:14px 30px;justify-content:center;flex-wrap:wrap;}
.cta-badges span{display:inline-flex;align-items:center;gap:.55em;color:rgba(255,255,255,.92);font-weight:500;font-size:1rem;}
.cta-badges svg{width:18px;height:18px;color:var(--amber);flex:none;}

.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:40px;box-shadow:var(--shadow);}
.form-card h3{font-size:1.5rem;margin-bottom:6px;}
.form-card .sub{color:var(--muted);font-size:.98rem;margin-bottom:26px;}
.field{margin-bottom:18px;}
.field.row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:0;}
.field.row .field{margin-bottom:18px;}
label{display:block;font-weight:600;font-size:.92rem;margin-bottom:7px;color:var(--ink);}
label .req{color:var(--red);}
input,select,textarea{
  width:100%;font-family:var(--font-body);font-size:1rem;color:var(--ink);
  background:var(--cream);border:1.5px solid var(--line);border-radius:13px;padding:.8em 1em;transition:border .2s, box-shadow .2s;
}
input::placeholder,textarea::placeholder{color:#9aa6a4;}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 4px rgba(31,182,174,.15);background:#fff;}
textarea{resize:vertical;min-height:92px;}
label .opt{color:var(--muted);font-weight:500;}
input[type=file]{padding:.55em .8em;cursor:pointer;font-size:.95rem;color:var(--muted);}
input[type=file]::file-selector-button{font-family:var(--font-body);font-weight:600;font-size:.85rem;color:#fff;background:var(--teal);border:0;border-radius:9px;padding:.55em .95em;margin-right:.9em;cursor:pointer;transition:background .2s;}
input[type=file]:hover::file-selector-button{background:var(--teal-deep);}
.form-card .btn-primary{width:100%;justify-content:center;font-size:1.04rem;padding:.7em;margin-top:8px;}
.form-foot{margin-top:16px;font-size:.85rem;color:var(--muted);text-align:center;}
.form-success{display:none;text-align:center;padding:30px 10px;}
.form-success.show{display:block;}
.form-success .big{width:74px;height:74px;border-radius:50%;background:var(--green);display:grid;place-items:center;margin:0 auto 22px;color:#fff;}
.form-success .big svg{width:38px;height:38px;}
.form-success h3{font-size:1.6rem;margin-bottom:10px;}
.form-success p{color:var(--muted);}

/* ---------- tile divider ---------- */
.tile-strip{height:40px;background:url("assets/footer-loop.png") repeat-x center/auto 40px;}

/* ---------- footer signature (gế nhựa + gạch bông) ---------- */
.footer-sign{position:relative;line-height:0;}
.footer-sign .footer-full{display:block;width:100%;height:auto;}

/* ---------- footer ---------- */
.site-footer{background:#0a302e;color:rgba(255,255,255,.85);padding:64px 0 30px;}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;}
.footer-brand img{height:38px;filter:brightness(0) invert(1);margin-bottom:18px;}
.footer-brand p{color:rgba(255,255,255,.65);font-size:.97rem;max-width:340px;}
.footer-col h5{font-family:var(--font-display);font-weight:700;font-size:1rem;color:#fff;margin-bottom:16px;}
.footer-col a,.footer-col p{display:block;color:rgba(255,255,255,.7);font-size:.96rem;margin-bottom:10px;transition:color .2s;}
.footer-col a:hover{color:var(--amber);}
.footer-social-row{display:flex;justify-content:center;margin-bottom:22px;}
.footer-social-link{display:inline-flex!important;align-items:center;gap:10px;width:max-content;max-width:100%;margin-top:18px;padding:9px 14px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.06);color:#fff!important;font-weight:700;text-decoration:none;box-shadow:0 12px 28px -20px rgba(0,0,0,.65);transition:transform .2s,background .2s,border-color .2s,color .2s;}
.footer-social-link svg{width:18px;height:18px;flex:none;fill:currentColor;}
.footer-social-link:hover{transform:translateY(-1px);background:var(--teal);border-color:rgba(255,255,255,.28);color:#fff!important;}
.footer-bottom{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:.88rem;color:rgba(255,255,255,.55);}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:none;}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .intro-grid,.about-grid,.cta-grid{grid-template-columns:1fr;gap:36px;}
  .pain-grid{grid-template-columns:repeat(2,1fr);}
  .scope-grid{grid-template-columns:1fr;}
  .benefit-grid{grid-template-columns:repeat(2,1fr);}
  .benefit,.benefit:nth-child(4),.benefit:nth-child(5){grid-column:auto;}
}
@media (max-width:720px){
  body{font-size:16px;}
  .nav{display:none;}
  .hero{padding:120px 0 70px;}
  .hero-stats{gap:26px;}
  .pain-grid,.benefit-grid{grid-template-columns:1fr;}
  .field.row{grid-template-columns:1fr;}
  .step{grid-template-columns:1fr;gap:10px;}
  .step .num{font-size:2.4rem;}
  .sec{padding:70px 0;}
  .footer-top{grid-template-columns:1fr;gap:30px;}
  .nav-cta .btn span.lbl{display:none;}
}