/* =============================================================
   NexusRWE — Shared Stylesheet
   Reference base: problem.html
   ============================================================= */

/* RESET */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

/* VARIABLES */
:root {
  --teal:#29A8A3; --teal-dk:#1b7e7a; --teal-xdk:#104c49;
  --teal-lt:#d0f0ee; --teal-xlt:#edfaf9; --purple:#6B5AB8;
  --purple-dk:#4e3f8e; --purple-lt:#e2ddf5; --purple-xlt:#f2f0fc;
  --grad:linear-gradient(90deg,#29A8A3 0%,#6B5AB8 100%);
  --grad-v:linear-gradient(145deg,#29A8A3 0%,#6B5AB8 100%);
  --bg:#f7f8fc; --white:#ffffff; --text:#0d1a2a;
  --text-2:#1e2e40; --text-3:#3a5060; --border:#dde4f0;
}

/* BASE */
html { scroll-behavior:smooth; overflow-x:hidden; }
body { background:var(--bg); color:var(--text); font-family:'DM Sans',sans-serif; font-size:18px; font-weight:400; line-height:1.75; overflow-x:hidden; }

/* NAV */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0.4rem 3.5rem; background:rgba(255,255,255,0.97);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--border);
  box-shadow:0 1px 16px rgba(0,0,0,0.07);
}
.nav-logo img { height:110px; display:block; }
.nav-links { display:flex; gap:2rem; align-items:center; }
.nav-links a { font-family:'Space Mono',monospace; font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-3); text-decoration:none; transition:color 0.2s; }
.nav-links a:hover { color:var(--teal); }
.nav-links a.active { color:var(--teal); font-weight:700; }
.nav-cta { background:var(--grad) !important; color:#fff !important; padding:0.55rem 1.4rem; border-radius:4px; font-weight:700 !important; transition:opacity 0.2s !important; }
.nav-cta:hover { opacity:0.85 !important; }

/* HAMBURGER */
.nav-hamburger { display:none; flex-direction:column; justify-content:space-between; width:24px; height:18px; background:none; border:none; cursor:pointer; padding:0; flex-shrink:0; }
.nav-hamburger span { display:block; width:100%; height:2px; background:var(--text); border-radius:2px; transition:all 0.25s; }
.nav-hamburger.open span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }

/* BUTTONS */
.btn { font-family:'Space Mono',monospace; font-size:0.82rem; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; padding:1rem 2.2rem; border-radius:4px; text-decoration:none; display:inline-block; transition:all 0.18s; border:none; cursor:pointer; white-space:nowrap; }
.btn-grad { background:var(--grad); color:#fff; box-shadow:0 4px 16px rgba(41,168,163,0.22); }
.btn-grad:hover { opacity:0.88; transform:translateY(-2px); }
.btn-outline { background:transparent; color:var(--teal-dk); border:2px solid var(--teal); }
.btn-outline:hover { background:var(--teal-xlt); transform:translateY(-2px); }
.btn-outline-purple { background:transparent; color:var(--purple-dk); border:2px solid var(--purple); }
.btn-outline-purple:hover { background:var(--purple-xlt); transform:translateY(-2px); }
.btn-white { background:#fff; color:var(--teal-xdk); font-weight:700; }
.btn-white:hover { background:var(--teal-lt); transform:translateY(-2px); }
.btn-ghost { background:transparent; color:#fff; border:2px solid rgba(255,255,255,0.5); }
.btn-ghost:hover { background:rgba(255,255,255,0.12); border-color:#fff; }

/* LAYOUT */
section { padding:6rem 3.5rem; }
.max-w { max-width:1100px; margin:0 auto; }
.section-label { font-family:'Space Mono',monospace; font-size:0.82rem; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:0.9rem; display:flex; align-items:center; gap:0.65rem; }
.grad-text { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.grad-line { display:inline-block; width:2.8rem; height:2px; background:var(--grad); border-radius:1px; flex-shrink:0; }
.cta-row { display:flex; flex-wrap:wrap; gap:1rem; }

/* TYPOGRAPHY */
h1 { font-family:'DM Serif Display',serif; font-size:clamp(2.5rem,4vw,3.5rem); line-height:1.15; color:var(--text); margin-bottom:1.4rem; }
h2 { font-family:'DM Serif Display',serif; font-size:clamp(1.8rem,3vw,2.5rem); color:var(--text); line-height:1.2; margin-bottom:1.4rem; margin-top:2rem; }
h2:first-of-type { margin-top:0; }
h3 { font-family:'DM Serif Display',serif; font-size:1.5rem; line-height:1.3; margin-bottom:1rem; }
h4 { font-family:'Space Mono',monospace; font-size:1.1rem; font-weight:700; line-height:1.4; margin-bottom:0.5rem; }
p { font-size:1.1rem; color:var(--text-2); line-height:1.75; margin-bottom:1.1rem; }

/* FOOTER */
footer { background:#ffffff; padding:1.6rem 3.5rem; display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--border); }
.footer-logo img { height:72px; display:block; }
footer p { font-size:0.78rem; color:var(--text-3); margin:0; }

/* PROBLEM PAGE */
.problem { background:var(--bg); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding-top:10rem; }
.problem p { margin-bottom:1.1rem; max-width:780px; }
.callout { border-radius:12px; padding:3rem; background:var(--grad-v); box-shadow:0 10px 36px rgba(41,168,163,0.22); max-width:780px; }
.callout p { font-family:'DM Serif Display',serif; font-size:1.55rem; color:#fff; line-height:1.45; margin:0; }

/* HOW IT WORKS */
.how { background:var(--grad-v); padding-top:10rem; }
.how h2 { color:#fff; }
.how-lead { color:rgba(255,255,255,0.78); max-width:580px; margin-bottom:0; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); margin-top:3rem; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,0.15); }
.step { padding:2.5rem 2rem; border-right:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.08); transition:background 0.2s; }
.step:last-child { border-right:none; }
.step:hover { background:rgba(255,255,255,0.14); }
.step-num { font-family:'Space Mono',monospace; font-size:0.82rem; font-weight:700; color:rgba(255,255,255,0.5); margin-bottom:1rem; }
.step h3 { font-family:'DM Serif Display',serif; color:#fff; margin-bottom:0.75rem; }
.step p { color:rgba(255,255,255,0.75); line-height:1.68; }

/* PHARMA & HOSPITAL PAGES */
.intro-section { background:var(--white); border-top:1px solid var(--border); padding-top:10rem; padding-bottom:0; }
.main-section { background:var(--white); padding-top:3rem; }
.use-case-list { display:flex; flex-direction:column; gap:0.75rem; margin:1.5rem 0 2.5rem; }
.use-case-item { display:flex; align-items:flex-start; gap:0.85rem; font-size:1.1rem; color:var(--text-2); }
.uc-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:0.45rem; background:var(--grad); }
.divider-section { background:var(--bg); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:3rem 3.5rem; }
.divider-section p { font-family:'Space Mono',monospace; font-size:0.82rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-3); margin:0; }
.use-case-section { background:var(--grad-v); padding:6rem 3.5rem; color:#fff; }
.use-case-section h2 { color:#fff; }
.use-case-section h3 { font-family:'DM Serif Display',serif; color:#fff; line-height:1.2; margin-bottom:0.5rem; }
.use-case-section .eyebrow { font-family:'Space Mono',monospace; font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.65); margin-bottom:1rem; }
.use-case-section p { color:rgba(255,255,255,0.88); margin-bottom:1.1rem; }
.use-case-section p:last-of-type { margin-bottom:0; }
.uc-block { background:rgba(255,255,255,0.1); border-radius:12px; padding:2rem 2.5rem; margin-top:2.5rem; }
.uc-block h3 { color:#fff; margin-top:0; margin-bottom:0.75rem; }

/* TEAM PAGE */
.team { background:var(--bg); border-top:1px solid var(--border); padding-top:10rem; }
.team-grid { display:grid; grid-template-columns:1fr; gap:2rem; margin:3rem auto 0 auto; max-width:700px; }
.team-card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:2.8rem; transition:box-shadow 0.2s; }
.team-card:hover { box-shadow:0 10px 36px rgba(0,0,0,0.08); }
.team-header { display:flex; align-items:center; gap:1.6rem; margin-bottom:1.6rem; padding-bottom:1.6rem; border-bottom:1px solid var(--border); }
.photo-ring { width:108px; height:108px; border-radius:50%; flex-shrink:0; background:var(--grad); padding:3px; box-shadow:0 4px 18px rgba(41,168,163,0.25); }
.photo-ring img { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.team-name { font-family:'DM Serif Display',serif; font-size:1.5rem; color:var(--text); margin-bottom:0.2rem; }
.team-title { font-family:'Space Mono',monospace; font-size:0.65rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:700; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.team-years { font-family:'Space Mono',monospace; font-size:0.68rem; color:var(--teal); letter-spacing:0.08em; margin-top:0.3rem; }
.team-bio { color:var(--text-2); line-height:1.78; }
.why { background:var(--white); border-top:1px solid var(--border); }
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2.5rem; }
.why-card { border:1.5px solid var(--border); border-radius:12px; padding:2.3rem; background:var(--bg); transition:all 0.22s; position:relative; overflow:hidden; }
.why-card-top { position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform 0.3s ease; }
.why-card:hover .why-card-top { transform:scaleX(1); }
.why-card:hover { box-shadow:0 8px 28px rgba(41,168,163,0.1); border-color:var(--teal-lt); }
.why-icon { font-size:1.6rem; margin-bottom:1rem; }
.why-card h3 { font-family:'DM Serif Display',serif; color:var(--text); margin-bottom:0.75rem; }
.why-card p { color:var(--text-2); line-height:1.72; }
.cta-section { background:var(--grad-v); padding:7rem 3.5rem; position:relative; overflow:hidden; }
.cta-section::before { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 60% 80% at 10% 50%,rgba(255,255,255,0.07) 0%,transparent 55%), radial-gradient(ellipse 50% 70% at 90% 20%,rgba(0,0,0,0.08) 0%,transparent 50%); }
.cta-section h2 { color:#fff; margin-bottom:0.75rem; }
.cta-section > .max-w > p { color:rgba(255,255,255,0.75); max-width:520px; margin:0 0 2.8rem; }

/* STORY SECTION */
.story-section { background:var(--white); border-top:1px solid var(--border); padding-top:10rem; }

/* HERO (index.html) */
.hero { min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:11rem 3.5rem 7rem; position:relative; overflow:hidden; background:var(--white); }
.hero-bg { position:absolute; inset:0; pointer-events:none; background: radial-gradient(ellipse 65% 70% at 95% 15%,rgba(41,168,163,0.1) 0%,transparent 60%), radial-gradient(ellipse 55% 60% at 85% 85%,rgba(107,90,184,0.08) 0%,transparent 55%), radial-gradient(ellipse 40% 45% at 5% 55%,rgba(41,168,163,0.05) 0%,transparent 50%); }
.hero-eyebrow { font-family:'Space Mono',monospace; font-size:0.82rem; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:1.5rem; display:flex; align-items:center; gap:0.85rem; }
.hero h1 { font-family:'DM Serif Display',serif; font-size:clamp(3rem,5.5vw,5rem); line-height:1.1; color:var(--text); max-width:730px; margin-bottom:1.4rem; }
.hero h1 em { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-style:italic; }
.hero-sub { font-size:1.2rem; color:var(--text-2); max-width:580px; margin-bottom:0.9rem; line-height:1.7; }
.fact-badge { display:inline-flex; align-items:center; gap:0.7rem; font-size:0.88rem; color:var(--text-3); margin-bottom:2.6rem; background:var(--white); border:1.5px solid var(--teal-lt); padding:0.5rem 1.2rem; border-radius:20px; box-shadow:0 2px 12px rgba(41,168,163,0.1); }
.badge-dot { width:8px; height:8px; border-radius:50%; background:var(--grad); flex-shrink:0; }

/* USE CASE PAGES */
.uc-page h1 { color:#fff; }
.uc-page h2 { color:#fff; }
.uc-page h3 { color:#fff; }
.uc-page main p { color:rgba(255,255,255,0.88); margin-bottom:1.75rem; }

/* RESPONSIVE — nav breakpoint (many items need room until 900px) */
@media(max-width:900px) {
  nav { padding:0.4rem 1.5rem; }
  .nav-logo img { height:72px; }
  .nav-hamburger { display:flex; }
  .nav-links { display:none; position:absolute; top:100%; left:0; right:0; background:rgba(255,255,255,0.98); backdrop-filter:blur(10px); flex-direction:column; align-items:flex-start; padding:1.5rem 1.5rem 2rem; gap:1.2rem; border-bottom:1px solid var(--border); box-shadow:0 8px 24px rgba(0,0,0,0.08); }
  .nav-links.open { display:flex !important; }
  .nav-links a { font-size:1rem; padding:0.35rem 0; }
}

/* RESPONSIVE — mobile layout, grids, fonts */
@media(max-width:768px) {
  /* Section padding: 1.5rem sides */
  section { padding:2.5rem 1.5rem; }
  .divider-section { padding:1.5rem; }
  footer { flex-direction:column; gap:1rem; text-align:center; padding:1.5rem; }

  /* First-section nav clearance (reduced from 10rem) */
  .problem { padding-top:6rem; }
  .how { padding-top:6rem; }
  .team { padding-top:6rem; }
  .intro-section { padding-top:6rem; }
  .story-section { padding-top:6rem; }
  .hero { padding:6rem 1.5rem 3rem; }

  /* Font sizes scale down */
  h1 { font-size:2rem; line-height:1.2; }
  h2 { font-size:1.5rem; line-height:1.25; }
  h3 { font-size:1.2rem; }

  /* All grids → single column */
  .problem-grid { grid-template-columns:1fr; gap:1.5rem; }
  .steps { grid-template-columns:1fr; }
  .step { border-right:none; border-bottom:1px solid rgba(255,255,255,0.1); }
  .team-grid { grid-template-columns:1fr; gap:1.5rem; }
  .why-grid { grid-template-columns:1fr; gap:1rem; }

  /* Cards */
  .team-card { padding:1.5rem; }
  .uc-block { padding:1.5rem; }

  /* Buttons full width */
  .btn { display:block; width:100%; text-align:center; box-sizing:border-box; }
  .cta-row { flex-direction:column; }

  /* Use-case pages: override inline-styled main element */
  .uc-page main { margin-top:72px !important; padding:3rem 1.5rem 4rem !important; }
}