:root {
  --blue-950: #052c49;
  --blue-900: #07385b;
  --blue-800: #0b4b77;
  --blue-700: #0f6294;
  --blue-100: #eaf5fb;
  --orange: #ff781d;
  --orange-2: #ff9b22;
  --coral: #ff4f35;
  --white: #ffffff;
  --ink: #0e2940;
  --muted: #597082;
  --line: #d9e8f0;
  --shadow: 0 24px 60px rgba(4, 40, 68, .16);
  --radius: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.section { padding: 104px 0; }

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(5, 44, 73, .88);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.nav-wrap { min-height: 82px; display: flex; align-items: center; gap: 28px; }
.brand { width: 148px; flex: 0 0 auto; }
.brand img { width: 100%; }
.nav { display: flex; margin-left: auto; align-items: center; gap: 28px; }
.nav a { color: rgba(255,255,255,.78); font-size: 14px; font-weight: 750; letter-spacing: .02em; transition: .2s ease; }
.nav a:hover { color: #fff; }
.nav-number { width: 116px; margin-left: 8px; }
.nav-number img { width: 100%; }

.hero {
  position: relative;
  min-height: 820px;
  padding: 148px 0 96px;
  color: #fff;
  background:
    radial-gradient(circle at 15% 15%, rgba(21, 108, 157, .68), transparent 38%),
    linear-gradient(125deg, var(--blue-950) 0%, var(--blue-900) 48%, #052b47 100%);
  overflow: hidden;
}
.hero-grid { position: relative; z-index: 4; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 36px; }
.hero-copy { padding-bottom: 42px; }
.hero-logo { width: 355px; max-width: 72%; margin-bottom: 4px; }
.slogan-wrap { width: fit-content; max-width: 420px; margin: 2px 0 24px; }
.slogan-wrap img { width: 100%; }
.hero h1 { margin: 0; font-size: clamp(46px, 5vw, 72px); line-height: .98; letter-spacing: -.05em; max-width: 700px; }
.hero h1 span { color: var(--orange-2); }
.hero-copy > p { max-width: 660px; margin: 24px 0 0; color: rgba(255,255,255,.82); font-size: 19px; line-height: 1.65; }
.hero-copy > p strong { color: #fff; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn {
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 15px 23px;
  font: inherit;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: #fff; background: linear-gradient(90deg, var(--coral), var(--orange), var(--orange-2)); box-shadow: 0 16px 34px rgba(255, 104, 28, .28); }
.btn-secondary { color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.20); }
.hero-number { margin-top: 34px; display: flex; align-items: center; gap: 16px; }
.hero-number span { max-width: 105px; color: rgba(255,255,255,.64); font-size: 11px; font-weight: 900; line-height: 1.15; letter-spacing: .16em; }
.hero-number img { width: 225px; }

.hero-photo-wrap { position: relative; align-self: end; min-height: 650px; display: flex; align-items: flex-end; justify-content: center; }
.hero-photo { position: relative; z-index: 4; width: min(630px, 100%); transform: translateY(76px); filter: drop-shadow(0 35px 30px rgba(0,0,0,.18)); }
.photo-shape { position: absolute; z-index: 1; width: 520px; height: 520px; border-radius: 50%; bottom: -48px; background: linear-gradient(135deg, var(--orange-2), var(--orange), var(--coral)); box-shadow: 0 35px 80px rgba(255, 105, 31, .24); }
.photo-ring { position: absolute; border: 2px solid rgba(255,255,255,.12); border-radius: 50%; z-index: 0; }
.ring-one { width: 610px; height: 610px; bottom: -94px; }
.ring-two { width: 700px; height: 700px; bottom: -140px; border-color: rgba(255,132,37,.12); }
.hero-stamp { position: absolute; z-index: 6; right: 20px; top: 86px; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: var(--shadow); transform: rotate(8deg); }
.hero-stamp svg { width: 54px; fill: var(--orange); }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(6px); opacity: .35; }
.glow-one { width: 420px; height: 420px; background: #1774a8; left: -230px; top: 180px; }
.glow-two { width: 360px; height: 360px; background: #ff7b20; right: -240px; top: 120px; opacity: .16; }
.paw-pattern { position: absolute; inset: 0; opacity: .045; background-image: radial-gradient(circle at 30px 20px, #fff 0 6px, transparent 7px), radial-gradient(circle at 50px 28px, #fff 0 6px, transparent 7px), radial-gradient(circle at 38px 45px, #fff 0 10px, transparent 11px); background-size: 120px 120px; transform: rotate(-8deg) scale(1.2); }
.hero-wave { position: absolute; z-index: 5; left: 0; right: 0; bottom: -1px; height: 110px; }
.hero-wave svg { width: 100%; height: 100%; }
.hero-wave path { fill: #fff; }

.eyebrow { display: inline-block; margin-bottom: 14px; color: var(--orange); font-size: 12px; font-weight: 950; letter-spacing: .18em; }
.section h2 { margin: 0; font-size: clamp(38px, 4.2vw, 60px); line-height: 1.05; letter-spacing: -.045em; }
.section h2 span { color: var(--orange); }
.intro { padding-top: 86px; }
.intro-grid { display: grid; grid-template-columns: 1fr .9fr; gap: 90px; align-items: start; }
.intro-text { padding-top: 30px; }
.intro-text p { margin: 0 0 18px; font-size: 18px; line-height: 1.75; color: var(--muted); }

.timeline-section { background: linear-gradient(180deg, #f7fbfd 0%, #eef7fb 100%); position: relative; overflow: hidden; }
.timeline-section::after { content:""; position:absolute; width:420px; height:420px; border-radius:50%; background:rgba(255,124,31,.07); right:-180px; top:120px; }
.section-head { position: relative; z-index: 2; max-width: 780px; }
.section-head.centered { text-align: center; margin: 0 auto 66px; }
.section-head p { color: var(--muted); font-size: 18px; line-height: 1.65; }
.timeline { position: relative; width: min(900px, 100%); margin: 0 auto; }
.timeline::before { content:""; position:absolute; left: 138px; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--orange), #bcd8e6); }
.timeline-item { position: relative; display: grid; grid-template-columns: 112px 1fr; gap: 52px; margin-bottom: 28px; align-items: start; }
.timeline-item::before { content:""; position:absolute; left: 131px; top: 24px; width: 16px; height: 16px; border-radius:50%; background:#fff; border:4px solid var(--orange); box-shadow:0 0 0 6px #eef7fb; z-index:2; }
.year { padding-top: 16px; text-align: right; color: var(--blue-800); font-weight: 950; font-size: 13px; letter-spacing: .08em; }
.timeline-card { background: #fff; border: 1px solid #e4eef3; border-radius: 22px; padding: 28px 30px; box-shadow: 0 16px 36px rgba(9, 58, 88, .06); }
.timeline-card h3 { margin: 0 0 10px; font-size: 24px; letter-spacing: -.025em; }
.timeline-card p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.tag { display: inline-block; margin-bottom: 10px; padding: 7px 10px; border-radius: 999px; background: rgba(255,120,29,.1); color: var(--orange); font-size: 10px; font-weight: 950; letter-spacing: .13em; }
.timeline-item.featured .timeline-card, .timeline-item.now .timeline-card { border-color: rgba(255,120,29,.26); }
.timeline-item.now .timeline-card { background: linear-gradient(135deg, var(--blue-900), var(--blue-800)); color: #fff; border: 0; }
.timeline-item.now .timeline-card p { color: rgba(255,255,255,.76); }
.timeline-item.now .tag { background: rgba(255,255,255,.12); color: var(--orange-2); }
.timeline-item.now::before { background: var(--orange); border-color:#fff; box-shadow:0 0 0 6px rgba(255,120,29,.16); }

.causes { background: var(--blue-950); color: #fff; position: relative; overflow:hidden; }
.causes::before { content:""; position:absolute; width:600px; height:600px; border-radius:50%; border:100px solid rgba(255,255,255,.018); left:-250px; bottom:-300px; }
.section-head.light { max-width: 760px; margin-bottom: 54px; position: relative; z-index:2; }
.section-head.light h2 span { color: var(--orange-2); }
.cards-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position:relative; z-index:2; }
.cause-card { min-height: 310px; padding: 30px 26px; border-radius: 24px; background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); backdrop-filter: blur(12px); }
.cause-card.orange-card { background: linear-gradient(145deg, var(--coral), var(--orange), var(--orange-2)); border:0; box-shadow: 0 26px 58px rgba(255,107,28,.17); }
.icon { width: 56px; height: 56px; border-radius: 18px; display:grid; place-items:center; background: rgba(255,255,255,.10); margin-bottom: 26px; }
.icon svg { width: 28px; height: 28px; fill: #fff; }
.paw-icon svg { width: 34px; height: 34px; }
.cause-card h3 { margin:0 0 12px; font-size: 22px; }
.cause-card p { margin:0; color: rgba(255,255,255,.68); line-height:1.65; font-size:15px; }
.orange-card p { color: rgba(255,255,255,.9); }

.final-cta { padding-bottom: 110px; background: #fff; }
.final-grid { display:grid; grid-template-columns: .92fr 1.08fr; align-items:center; gap: 76px; }
.final-photo-card { position:relative; min-height: 590px; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; border-radius: 36px; background: linear-gradient(180deg, #eff8fc, #ddecf4); }
.final-photo-bg { position:absolute; width:440px; height:440px; border-radius:50%; background:linear-gradient(145deg, var(--orange-2), var(--orange), var(--coral)); bottom:-40px; }
.final-photo-card img { position:relative; z-index:2; width: 530px; margin-bottom:-2px; filter: drop-shadow(0 25px 25px rgba(7,53,84,.14)); }
.final-copy h2 { font-size: clamp(46px, 5vw, 68px); }
.final-copy > p { margin:24px 0 26px; color:var(--muted); font-size:18px; line-height:1.7; max-width:620px; }
.final-number { display:flex; align-items:center; gap:16px; margin: 20px 0 28px; }
.final-number span { max-width:105px; color:var(--blue-700); font-size:11px; font-weight:950; letter-spacing:.16em; line-height:1.15; }
.final-number img { width:260px; }
.dark-shadow { box-shadow: 0 16px 34px rgba(255,104,28,.23); }

.footer { background: #031f35; color:#fff; border-top: 4px solid var(--orange); }
.footer-inner { min-height: 190px; display:flex; align-items:center; justify-content:space-between; gap:40px; }
.footer-inner img { width:205px; }
.footer-inner p { margin:0; text-align:right; color:rgba(255,255,255,.72); font-size:12px; line-height:1.7; letter-spacing:.025em; }
.footer-inner strong { color:#fff; }

.toast { position:fixed; left:50%; bottom:26px; z-index:99; transform:translate(-50%, 20px); opacity:0; pointer-events:none; background:#092f4c; color:#fff; padding:12px 16px; border-radius:999px; box-shadow:var(--shadow); font-size:13px; font-weight:800; transition:.25s ease; }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width: 1000px) {
  .nav { display:none; }
  .brand { width:132px; }
  .nav-number { margin-left:auto; width:105px; }
  .hero { min-height:auto; padding-top:132px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { text-align:center; padding-bottom:0; }
  .hero-logo, .slogan-wrap { margin-left:auto; margin-right:auto; }
  .hero-copy > p { margin-left:auto; margin-right:auto; }
  .hero-actions, .hero-number { justify-content:center; }
  .hero-photo-wrap { min-height:590px; margin-top:-10px; }
  .hero-photo { width:600px; transform:translateY(86px); }
  .photo-shape { width:470px; height:470px; }
  .intro-grid { grid-template-columns:1fr; gap:28px; }
  .intro-text { padding-top:0; }
  .cards-grid { grid-template-columns:repeat(2,1fr); }
  .final-grid { grid-template-columns:1fr; gap:46px; }
  .final-photo-card { max-width:640px; width:100%; margin:0 auto; }
  .final-copy { text-align:center; }
  .final-copy > p { margin-left:auto; margin-right:auto; }
  .final-number { justify-content:center; }
}

@media (max-width: 680px) {
  .container { width:min(100% - 28px, 1180px); }
  .section { padding:76px 0; }
  .nav-wrap { min-height:70px; }
  .brand { width:112px; }
  .nav-number { width:92px; }
  .hero { padding:112px 0 52px; }
  .hero-logo { width:290px; max-width:88%; }
  .slogan-wrap { max-width:310px; margin-bottom:20px; }
  .hero h1 { font-size:43px; }
  .hero-copy > p { font-size:16px; line-height:1.6; }
  .hero-actions { display:grid; grid-template-columns:1fr; }
  .btn { width:100%; }
  .hero-number { flex-direction:column; gap:8px; }
  .hero-number span { max-width:none; }
  .hero-number img { width:230px; }
  .hero-photo-wrap { min-height:460px; margin-top:0; }
  .hero-photo { width:470px; max-width:112%; transform:translateY(66px); }
  .photo-shape { width:360px; height:360px; bottom:-28px; }
  .ring-one { width:430px; height:430px; bottom:-60px; }
  .ring-two { width:500px; height:500px; bottom:-90px; }
  .hero-stamp { width:70px; height:70px; right:2px; top:52px; }
  .hero-stamp svg { width:42px; }
  .hero-wave { height:72px; }
  .intro { padding-top:68px; }
  .section h2 { font-size:40px; }
  .intro-text p, .section-head p, .final-copy > p { font-size:16px; }
  .section-head.centered { margin-bottom:44px; }
  .timeline::before { left:10px; }
  .timeline-item { grid-template-columns:1fr; gap:9px; padding-left:34px; margin-bottom:22px; }
  .timeline-item::before { left:3px; top:8px; }
  .year { text-align:left; padding:0; }
  .timeline-card { padding:24px 22px; border-radius:18px; }
  .timeline-card h3 { font-size:21px; }
  .timeline-card p { font-size:15px; }
  .cards-grid { grid-template-columns:1fr; }
  .cause-card { min-height:auto; }
  .final-photo-card { min-height:470px; border-radius:26px; }
  .final-photo-bg { width:350px; height:350px; }
  .final-photo-card img { width:430px; max-width:105%; }
  .final-copy h2 { font-size:48px; }
  .final-number { flex-direction:column; gap:8px; }
  .final-number span { max-width:none; }
  .final-number img { width:250px; }
  .footer-inner { min-height:230px; flex-direction:column; justify-content:center; text-align:center; gap:20px; padding:36px 0; }
  .footer-inner img { width:180px; }
  .footer-inner p { text-align:center; font-size:11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}