/* ===== 20ο PHARMAPOINT — modern redesign (#SYFANewEra) ===== */
:root{
  --navy:#263a5b; --navy-deep:#16233b; --cyan:#00a8e8; --cyan-light:#5dd0ff;
  --ink:#1a2740; --paper:#f4f7fb; --white:#fff;
  --radius:18px; --shadow:0 18px 50px -12px rgba(8,20,40,.45); --maxw:1180px; --nav-h:70px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--paper);line-height:1.7;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{position:relative}

/* NAVBAR */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;
  background:rgba(20,33,55,.55);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.08);transition:background .35s,height .35s,box-shadow .35s}
.nav.scrolled{background:rgba(14,23,38,.95);height:60px;box-shadow:0 10px 30px -10px rgba(0,0,0,.55)}
.nav .container{display:flex;align-items:center;justify-content:space-between;width:100%}
.nav-logo{display:flex;align-items:center;gap:11px;flex-shrink:0;color:#fff}
.nav-logo .pp{font-family:'Montserrat',sans-serif;font-weight:800;font-size:16px;letter-spacing:.5px;white-space:nowrap}
.nav-logo .era{color:var(--cyan-light);font-weight:600;font-size:12px}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none}
.nav-links a{color:#dfe8f4;font-size:13.5px;font-weight:500;padding:9px 13px;border-radius:999px;transition:.25s;cursor:pointer;white-space:nowrap}
.nav-links a:hover{color:#fff;background:rgba(0,168,232,.22)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:26px;height:2.5px;background:#fff;border-radius:2px;transition:.3s}
.burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* HERO */
.hero{min-height:92vh;display:flex;align-items:center;color:#fff;position:relative;overflow:hidden;padding:calc(var(--nav-h) + 40px) 0 70px}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.05)}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(11,19,33,.96) 0%,rgba(16,26,44,.9) 48%,rgba(14,30,52,.74) 100%)}
.hero .container{position:relative;z-index:2;max-width:900px}
.hero .era-tag{display:inline-block;background:var(--cyan);color:#04263a;font-weight:800;letter-spacing:1px;padding:7px 18px;border-radius:999px;font-size:14px;margin-bottom:20px;animation:fadeUp .9s both}
.hero .kicker{display:block;color:var(--cyan-light);font-weight:600;letter-spacing:3px;text-transform:uppercase;font-size:13px;margin-bottom:12px;animation:fadeUp .9s .1s both}
.hero h1{font-family:'Montserrat',sans-serif;font-weight:800;line-height:1.08;font-size:clamp(34px,6vw,68px);animation:fadeUp .9s .2s both}
.hero h1 b{color:var(--cyan-light)}
.hero .sub{color:#c6d4e8;font-size:clamp(16px,2.2vw,20px);margin-top:20px;max-width:640px;animation:fadeUp .9s .3s both}

/* STATS */
.stats{background:var(--navy-deep);padding:0}
.stats .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.08)}
.stat{background:var(--navy-deep);padding:40px 20px;text-align:center;color:#fff}
.stat .num{font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(30px,4vw,46px);color:var(--cyan-light);line-height:1}
.stat .lbl{color:#a9b8d0;font-size:14px;margin-top:8px;letter-spacing:.5px}

/* SECTIONS */
.sec{padding:88px 0}
.sec.alt{background:var(--white)}
.sec-head{max-width:780px;margin:0 auto 46px;text-align:center}
.sec-head .tag{color:var(--cyan);font-weight:700;letter-spacing:2.5px;text-transform:uppercase;font-size:12.5px}
.sec-head h2{font-family:'Montserrat',sans-serif;font-weight:800;color:var(--navy);font-size:clamp(24px,3.4vw,38px);margin-top:10px;line-height:1.15}
.sec-head.light h2{color:#fff}
.sec-head.light .tag{color:var(--cyan-light)}

/* PROSE (long real texts) */
.prose{max-width:820px;margin:0 auto;font-size:17px;color:#33425c}
.prose p{margin-bottom:18px}
.prose .lead{font-size:20px;color:var(--navy);font-weight:500}
.prose b{color:var(--navy)}
.prose figure{margin:32px 0}
.prose figure img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%}
.prose .quote{border-left:4px solid var(--cyan);background:#eef6fc;padding:20px 26px;border-radius:0 12px 12px 0;margin:24px 0;font-style:italic;color:var(--navy)}
.prose .src-quote{text-align:center;color:#6a7890;font-style:italic;font-size:15px;margin:30px auto;max-width:680px}

/* INITIATIVE CARDS */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1000px;margin:0 auto}
.card{background:var(--white);border:1px solid #e4ecf5;border-radius:var(--radius);padding:30px 26px;box-shadow:0 10px 30px -18px rgba(8,20,40,.4);transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(0,168,232,.4)}
.card .ic{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--cyan),#0076b8);display:grid;place-items:center;color:#fff;font-weight:800;font-size:20px;margin-bottom:16px;font-family:'Montserrat',sans-serif}
.card h3{font-family:'Montserrat',sans-serif;color:var(--navy);font-size:18px;font-weight:800;margin-bottom:8px}
.card p{color:#52617a;font-size:14.5px}

/* DARK SECTION */
.on-dark{background:linear-gradient(160deg,#1c2c47,var(--navy-deep))}
.on-dark .prose{color:#c7d3e6}
.on-dark .prose .lead,.on-dark .prose b{color:#fff}
.on-dark .prose .quote{background:rgba(0,168,232,.1);color:#eaf4fb;border-left-color:var(--cyan-light)}

/* VIDEOS */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.vcard{background:#1b2a45;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:transform .3s,box-shadow .3s}
.vcard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.vcard .thumb{position:relative;aspect-ratio:16/9;overflow:hidden}
.vcard .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.vcard:hover .thumb img{transform:scale(1.08)}
.vcard .pico{position:absolute;inset:0;display:grid;place-items:center}
.vcard .pico span{width:56px;height:56px;border-radius:50%;background:rgba(0,168,232,.92);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.4);transition:.3s}
.vcard:hover .pico span{transform:scale(1.12);background:var(--cyan-light)}
.vcard .pico span::before{content:"";border-left:15px solid #04263a;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}

/* GALLERY */
.gwrap{max-width:1280px;margin:0 auto}
.gmasonry{column-count:4;column-gap:14px}
.gitem{break-inside:avoid;margin:0 0 14px;border-radius:12px;overflow:hidden;cursor:pointer;position:relative;background:#dde6f0;display:block}
.gitem img{width:100%;height:auto;display:block;transition:transform .5s,opacity .5s;opacity:0}
.gitem img.loaded{opacity:1}
.gitem::after{content:"";position:absolute;inset:0;background:rgba(0,168,232,0);transition:.3s}
.gitem:hover::after{background:rgba(0,168,232,.2)}
.gitem:hover img{transform:scale(1.05)}

/* LIGHTBOX */
.glb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(6,12,22,.94);backdrop-filter:blur(6px);padding:20px}
.glb.open{display:flex;animation:fade .25s}
.glb img{max-width:92vw;max-height:84vh;border-radius:10px;box-shadow:var(--shadow)}
.glb iframe{width:min(1000px,92vw);aspect-ratio:16/9;max-height:84vh;border:0;border-radius:10px;box-shadow:var(--shadow)}
.glb.single .glb-btn{display:none}
.glb-btn{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.12);color:#fff;font-size:25px;display:grid;place-items:center;transition:.2s}
.glb-btn:hover{background:var(--cyan);color:#04263a}
.glb-prev{left:20px}.glb-next{right:20px}
.glb-close{position:absolute;top:20px;right:20px;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;background:var(--cyan);color:#04263a;font-size:23px;display:grid;place-items:center;transition:.2s}
.glb-close:hover{transform:rotate(90deg)}
.glb-counter{position:absolute;top:28px;left:50%;transform:translateX(-50%);color:#cdd9ec;font-size:14px}

/* FOOTER */
.footer{background:#0f1a2e;color:#fff;padding:60px 0 28px}
.footer .top{display:flex;flex-wrap:wrap;gap:30px;align-items:center;justify-content:space-between}
.footer .brandbar{background:#fff;border-radius:12px;padding:14px 20px;max-width:520px}
.footer .brandbar img{width:100%}
.footer .info{color:#b9c6db;font-size:14px;text-align:right}
.footer .info a{color:var(--cyan-light)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:22px;text-align:center;color:#8295b0;font-size:13px}

/* REVEAL */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s}
.reveal.visible{opacity:1;transform:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* RESPONSIVE */
@media(max-width:1100px){.gmasonry{column-count:3}}
@media(max-width:980px){.stats .grid{grid-template-columns:repeat(2,1fr)}.cards{grid-template-columns:repeat(2,1fr)}.vgrid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){
  .nav-links{position:fixed;top:60px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:rgba(14,23,38,.98);padding:10px 18px 22px;border-bottom:1px solid rgba(255,255,255,.1);transform:translateY(-130%);transition:transform .35s}
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:14px 10px;font-size:15px;border-radius:10px}
  .burger{display:flex}
  .gmasonry{column-count:2}.vgrid{grid-template-columns:1fr}.cards{grid-template-columns:1fr}
  .footer .info{text-align:left}
}
@media(max-width:430px){.gmasonry{column-count:1}}

/* exhibitor chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.chips span{display:inline-block;background:rgba(0,168,232,.12);border:1px solid rgba(0,168,232,.35);color:var(--navy);font-weight:600;font-size:13.5px;padding:7px 15px;border-radius:999px}
.on-dark .chips span{background:rgba(0,168,232,.16);border-color:rgba(93,208,255,.4);color:#eaf4fb}

/* SYFATHESS logo in navbar */
.nav-badge{height:32px;width:auto;display:block;flex-shrink:0}
@media(max-width:520px){.nav-logo .pp,.nav-logo .era{display:none}}