:root{--navy:#0d2b49;--blue:#2675b9;--sky:#e7f5ff;--bg:#f6faff;--text:#17314a;--muted:#63788c;--line:#dbe7f0;--white:#fff;--shadow:0 20px 50px rgba(13,43,73,.09)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:linear-gradient(#fff,#f4f9fd)}a{text-decoration:none;color:inherit}.wrap{width:min(1180px,calc(100% - 36px));margin:auto}
header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.95);border-bottom:1px solid var(--line)}nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:18px}.logo img{height:43px}.links{display:flex;gap:20px;align-items:center;font-size:14px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 20px;border-radius:999px;font-weight:700;border:1px solid var(--line);background:#fff}.primary{background:var(--navy);color:#fff;border-color:var(--navy)}.ticket{background:var(--blue);color:#fff;border-color:var(--blue)}
.hero{padding:88px 0}.grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}.tag{font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--blue);margin-bottom:18px}.hero h1,.pagehero h1{font-size:clamp(45px,6vw,76px);line-height:.98;letter-spacing:-.055em;margin:0 0 22px;color:var(--navy)}.lead{font-size:18px;line-height:1.75;color:var(--muted);max-width:720px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.visual{min-height:480px;border-radius:34px;background:radial-gradient(circle at 75% 20%,#c9eaff 0 18%,transparent 19%),linear-gradient(145deg,#eef8ff,#fff);border:1px solid var(--line);box-shadow:var(--shadow);padding:34px;display:flex;align-items:center}.dash{width:100%;background:#fff;border:1px solid var(--line);border-radius:26px;padding:28px;box-shadow:var(--shadow)}.dash h3{margin:0 0 20px}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:13px}.metric{background:var(--sky);padding:20px;border-radius:20px}.metric small{display:block;color:var(--muted);margin-bottom:7px}.metric b{font-size:21px}
section{padding:86px 0}.head{max-width:800px;margin-bottom:36px}.head h2{font-size:clamp(34px,4vw,52px);line-height:1.05;letter-spacing:-.04em;margin:0 0 15px;color:var(--navy)}.head p,p.copy{color:var(--muted);line-height:1.75}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}.card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:30px;padding:34px;box-shadow:var(--shadow);min-height:270px}.num{display:grid;place-items:center;width:62px;height:62px;border-radius:20px;background:var(--sky);font-size:20px;font-weight:800;color:var(--navy);margin-bottom:24px}.card h3{font-size:27px;margin:0 0 12px;color:var(--navy)}.card p{color:var(--muted);line-height:1.75}.more{display:inline-block;margin-top:14px;color:var(--blue);font-weight:700}
.band{background:var(--navy);color:#fff;border-radius:34px;padding:44px}.band h2{font-size:42px;letter-spacing:-.04em;margin:0 0 15px}.band p{color:#d8e7f3;line-height:1.75}.values{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.value{background:#fff;border:1px solid var(--line);border-radius:23px;padding:24px}.value b{display:block;color:var(--navy);margin-bottom:8px}.value span{color:var(--muted);line-height:1.6}
.timeline{display:grid;gap:0;max-width:900px}.time{display:grid;grid-template-columns:100px 1fr;gap:22px;padding:0 0 34px;position:relative}.time:before{content:"";position:absolute;left:49px;top:38px;bottom:0;width:2px;background:#b8daf2}.time:last-child:before{display:none}.year{width:100px;height:48px;border-radius:18px;background:var(--sky);display:grid;place-items:center;font-weight:800;color:var(--navy);z-index:1}.time h3{margin:4px 0 8px;color:var(--navy)}.time p{margin:0;color:var(--muted);line-height:1.7}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:22px}.feature>div{padding:32px;border-radius:28px;background:#fff;border:1px solid var(--line)}.feature h3{font-size:26px;color:var(--navy);margin-top:0}.feature ul{padding-left:20px;color:var(--muted);line-height:1.9}
.cta{padding:44px;border-radius:34px;background:linear-gradient(135deg,#e8f6ff,#fff);border:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:25px}.cta h2{margin:0 0 10px;color:var(--navy);font-size:34px}.cta p{margin:0;color:var(--muted);line-height:1.7}
.pagehero{padding:78px 0 48px}.pagehero h1{font-size:clamp(44px,5vw,68px)}footer{margin-top:70px;border-top:1px solid var(--line);padding:35px 0 50px}.foot{display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:14px}.wa{position:fixed;right:20px;bottom:20px;background:var(--navy);color:#fff;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-weight:bold;box-shadow:var(--shadow)}
@media(max-width:900px){.links{display:none}.grid2,.cards,.values,.feature{grid-template-columns:1fr}.visual{min-height:350px}.cta,.foot{align-items:flex-start;flex-direction:column}.hero{padding:65px 0}}


/* ===== V2.1 RESPONSIVE / MOBILE ===== */
body{overflow-x:hidden}
img{max-width:100%;height:auto}
.main-nav{position:relative}
.menu-toggle{
  display:none;
  width:46px;height:46px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  padding:10px;
  cursor:pointer;
}
.menu-toggle span{
  display:block;
  width:100%;
  height:2px;
  background:var(--navy);
  margin:5px 0;
  transition:.2s ease;
}
.mobile-menu{
  display:none;
  padding:10px 0 18px;
  border-top:1px solid var(--line);
}
.mobile-menu.open{display:grid}
.mobile-menu a{
  padding:13px 4px;
  border-bottom:1px solid rgba(14,42,71,.06);
  color:var(--navy);
  font-weight:700;
}
.mobile-menu .mobile-ticket{
  margin-top:10px;
  text-align:center;
  background:var(--blue);
  color:#fff;
  border-radius:14px;
  border-bottom:0;
}
.nav-actions{display:flex;gap:9px;align-items:center}

/* Tablets and small laptops */
@media(max-width:1024px){
  .wrap{width:min(100% - 28px,1180px)}
  .desktop-links{display:none}
  .menu-toggle{display:block}
  .main-nav{min-height:74px}
  .nav-actions{margin-left:auto}
  .hero,.pagehero{padding-top:58px}
  .hero h1,.pagehero h1{font-size:clamp(42px,7vw,62px)}
  .grid2,.feature{grid-template-columns:1fr}
  .visual{min-height:360px}
  .timeline{max-width:100%}
  .cards{grid-template-columns:1fr 1fr}
  .values{grid-template-columns:1fr 1fr}
}

/* iPhone / Android portrait and landscape */
@media(max-width:768px){
  .wrap{width:calc(100% - 24px)}
  header .logo img{height:36px;max-width:170px;object-fit:contain}
  .nav-whatsapp{display:none}
  .nav-actions .ticket{
    min-height:44px;
    padding:0 14px;
    font-size:13px;
  }
  .menu-toggle{order:3}
  .nav-actions{order:2}
  .logo{order:1}
  .main-nav{gap:10px}

  .hero,.pagehero{padding:44px 0 34px}
  .hero h1,.pagehero h1{
    font-size:clamp(36px,11vw,52px);
    line-height:1;
    letter-spacing:-.045em;
  }
  .lead{font-size:16px;line-height:1.65}
  .actions{gap:10px}
  .actions .btn{width:100%;text-align:center}

  section{padding:58px 0}
  .head{margin-bottom:26px}
  .head h2{font-size:clamp(30px,9vw,42px)}
  .cards,.values,.metrics{grid-template-columns:1fr}
  .card{padding:26px;min-height:0}
  .card h3{font-size:24px}
  .num{width:54px;height:54px;margin-bottom:18px}

  .visual{min-height:0;padding:18px;border-radius:26px}
  .dash{padding:20px;border-radius:22px}
  .metric{padding:16px}

  .band{padding:28px;border-radius:26px}
  .band h2{font-size:32px}
  .cta{padding:28px;border-radius:26px;flex-direction:column;align-items:flex-start}
  .cta h2{font-size:30px}
  .cta .actions{width:100%}

  .time{grid-template-columns:78px 1fr;gap:16px;padding-bottom:28px}
  .year{width:78px;height:44px;font-size:12px}
  .time:before{left:38px}

  .feature>div{padding:24px}
  .feature h3{font-size:24px}

  footer{margin-top:50px;padding:28px 0 36px}
  .foot{font-size:13px}

  .wa{
    width:54px;height:54px;
    right:14px;bottom:14px;
  }
}

/* Small phones such as iPhone SE */
@media(max-width:480px){
  .wrap{width:calc(100% - 18px)}
  header .logo img{height:31px;max-width:145px}
  .menu-toggle{width:42px;height:42px;padding:9px}
  .nav-actions .ticket{
    font-size:12px;
    padding:0 11px;
    min-height:42px;
  }
  .hero h1,.pagehero h1{font-size:34px}
  .tag{font-size:10px}
  .lead{font-size:15px}
  .section-title,.head h2{font-size:30px}
  .card,.feature>div,.value{border-radius:22px}
  .card{padding:22px}
  .value{padding:20px}
  .cta,.band{padding:23px}
  .cta h2,.band h2{font-size:27px}
  .mobile-menu a{font-size:14px}
}

/* Safe-area support for notched iPhones */
@supports(padding:max(0px)){
  .wa{
    right:max(14px,env(safe-area-inset-right));
    bottom:max(14px,env(safe-area-inset-bottom));
  }
}