/* Design system tokens. */
:root{
  /* Oromo flag palette: red, black, white. Green and yellow are avoided as they read as the Ethiopian national flag. */
  --deep-green:#161616; --forest-green:#2B2B2B;
  --font-serif:'DM Serif Display',serif;
  --odaa-red:#B3241C; --earth-brown:#6B1D16; --sand:#F7F5F1;
  --white:#fff; --text:#161616; --text-mid:#3D3D3D; --text-muted:#8A8A85;
  --border:rgba(20,20,20,.10); --border-md:rgba(20,20,20,.20);
  --shadow-sm:0 2px 14px rgba(20,20,20,.08);
  --shadow-md:0 8px 32px rgba(20,20,20,.14);
  --shadow-lg:0 18px 60px rgba(27,58,46,.18);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',sans-serif;
  color:var(--text);line-height:1.65;overflow-x:hidden;
  min-height:100vh;
  /* Backdrop for wide viewports */
  background:
    radial-gradient(circle at 15% 8%, rgba(47,93,68,.10), transparent 45%),
    radial-gradient(circle at 88% 92%, rgba(199,138,59,.10), transparent 45%),
    var(--sand);
}
h1,h2,h3,h4{font-family:'DM Serif Display',serif;line-height:1.2;font-weight:400}
a{color:inherit;text-decoration:none}
button{font-family:'Inter',sans-serif;cursor:pointer}
img{max-width:100%;display:block}
::selection{background:var(--earth-brown);color:#fff}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--sand)}
::-webkit-scrollbar-thumb{background:var(--forest-green);border-radius:3px}

/* VIEWS */
.view{display:none}
.view.active{display:block;animation:vfade .3s ease}
@keyframes vfade{from{opacity:0}to{opacity:1}}

/* APP SHELL */
.app-frame{
  max-width:480px;margin:0 auto;min-height:100vh;
  background:var(--sand);position:relative;
}

/* REVEAL */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s,transform .6s}
.reveal.in{opacity:1;transform:none}

/* PATTERN */
.pattern-trim{height:14px;background:repeating-linear-gradient(45deg,var(--odaa-red) 0 10px,var(--earth-brown) 10px 20px,var(--forest-green) 20px 30px,var(--sand) 30px 40px);opacity:.85}

/* Splash preview cards */
.splash-preview-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;
  width:100%;max-width:340px;margin:0 0 1.4rem;
}
.splash-preview-card{
  border-radius:16px;padding:.9rem .5rem;text-align:center;cursor:pointer;
  transition:transform .2s;position:relative;overflow:hidden;
}
.splash-preview-card:hover{transform:translateY(-3px)}
.splash-preview-card .pillar-icon{font-size:1.3rem;margin-bottom:.35rem;display:block}
.splash-preview-card .pillar-label{font-size:.62rem;font-weight:700;line-height:1.25}
.splash-preview-card.preview-black{background:linear-gradient(145deg,#3a3a3a,#565656);color:#fff}
.splash-preview-card.preview-red{background:linear-gradient(145deg,#8c1b14,#c9291f);color:#fff}
.splash-preview-card.preview-white{background:linear-gradient(145deg,#fdfcfa,#efece6);color:var(--text);border:1.5px solid rgba(20,20,20,.14)}
/* Lock badge marks these as preview only */
.splash-preview-card::after{
  content:'🔒';position:absolute;top:6px;right:7px;font-size:.6rem;opacity:.55;
}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.6rem;border-radius:14px;border:none;
  font-size:.95rem;font-weight:600;cursor:pointer;transition:all .22s;width:100%;
}
.btn-primary{background:var(--deep-green);color:#fff;box-shadow:0 4px 18px rgba(27,58,46,.28)}
.btn-primary:hover{background:var(--forest-green);transform:translateY(-1px)}
.btn-outline{background:transparent;border:2px solid var(--deep-green);color:var(--deep-green)}
.btn-outline:hover{background:rgba(27,58,46,.06)}
.btn-red{background:var(--odaa-red);color:#fff;box-shadow:0 4px 14px rgba(164,61,44,.28)}
.btn-red:hover{background:#8a3324}
.btn-sm{padding:.5rem 1rem;font-size:.82rem;width:auto;border-radius:10px}

/* Home dashboard */

.app-header{
  background:linear-gradient(160deg,#141414 0%,#2b2b2b 100%);
  border-radius:0 0 36px 36px;
  padding:1.4rem 1.5rem 2.8rem;
  position:relative;
  color:#fff;
  box-shadow:0 8px 32px rgba(27,58,46,.28);
}
.app-header::after{
  content:'';position:absolute;
  bottom:0;left:0;right:0;height:4px;
  background:repeating-linear-gradient(90deg,var(--odaa-red) 0 8px,var(--earth-brown) 8px 16px,transparent 16px 24px);
  border-radius:0 0 36px 36px;opacity:.5;
}
.app-header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem}
.app-logo{display:flex;align-items:center;gap:.6rem}
.app-logo-icon{font-size:1.4rem}
.app-logo-text{font-family:'DM Serif Display',serif;font-size:1.15rem;color:#fff}
.app-logo-text span{color:var(--earth-brown);display:block;font-size:.58rem;letter-spacing:.22em;font-family:'Inter',sans-serif;font-weight:700;margin-top:-2px}
.app-header-icons{display:flex;align-items:center;gap:.6rem}
.icon-btn{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:1rem;transition:background .2s;position:relative;
}
.icon-btn:hover{background:rgba(255,255,255,.26)}
.notif-badge{position:absolute;top:5px;right:5px;width:7px;height:7px;background:var(--odaa-red);border-radius:50%;border:1.5px solid #2b2b2b}
.greeting-title{font-family:'DM Serif Display',serif;font-size:1.55rem;margin-bottom:.22rem;letter-spacing:-.01em}
.greeting-sub{font-size:.84rem;color:rgba(255,255,255,.7);font-weight:400}

/* Pillar cards */
.pillars-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.7rem;
  margin:1.5rem 1rem 0;
  position:relative;z-index:2;
}
.pillar-card{
  border-radius:20px;
  padding:1.25rem .65rem 1.15rem;
  text-align:center;
  cursor:pointer;
  transition:transform .22s,box-shadow .22s;
  position:relative;overflow:hidden;
}
.pillar-card::before{
  content:'';position:absolute;
  top:0;left:0;right:0;height:45%;
  background:linear-gradient(180deg,rgba(255,255,255,.13),transparent);
  border-radius:20px 20px 0 0;pointer-events:none;
}
.pillar-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.pillar-card:active{transform:translateY(-1px)}
.pillar-card.active-green{
  /* Cultural Heritage */
  background:linear-gradient(145deg,#3a3a3a,#565656);
  color:#fff;box-shadow:0 6px 24px rgba(20,20,20,.28);
}
.pillar-card.active-red{
  /* Economic Opportunities */
  background:linear-gradient(145deg,#8c1b14,#c9291f);
  color:#fff;box-shadow:0 6px 24px rgba(179,36,28,.4);
}
.pillar-card.active-gold{
  /* Social Community */
  background:linear-gradient(145deg,#fdfcfa,#efece6);
  color:var(--text);border:1.5px solid rgba(20,20,20,.14);
  box-shadow:0 6px 24px rgba(20,20,20,.14);
}
.pillar-card.active-gold .pillar-icon{filter:none}
.pillar-card.active-gold .pillar-label{color:var(--text)}
.pillar-icon{font-size:1.65rem;margin-bottom:.5rem;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.18))}
.pillar-label{font-size:.72rem;font-weight:700;line-height:1.3;letter-spacing:.01em}

.section-block{padding:1.5rem 1.5rem}
.section-block-first{padding-top:4.5rem}  /* extra top spacing below the pillar row */
.section-head-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem}
.section-head-title{font-family:'DM Serif Display',serif;font-size:1.12rem;color:var(--text)}
.section-see-all{font-size:.8rem;font-weight:600;color:var(--forest-green);cursor:pointer}

/* Featured banner */
.featured-card{
  border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,var(--deep-green),var(--forest-green));
  min-height:155px;padding:1.3rem 1.4rem;
  display:flex;flex-direction:column;justify-content:flex-end;
  color:#fff;cursor:pointer;
}
.featured-tag{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--earth-brown);margin-bottom:.4rem;display:block}
.featured-desc{font-size:.84rem;color:rgba(255,255,255,.78);margin-bottom:.9rem;line-height:1.55}

/* OPPORTUNITY LIST ITEMS */
.opp-item{display:flex;align-items:center;gap:.9rem;padding:.8rem 0;border-bottom:1px solid var(--border);cursor:pointer;transition:opacity .2s}
.opp-item:last-child{border-bottom:none}
.opp-item:hover{opacity:.8}
.opp-icon{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.25rem}
.opp-icon.green{background:rgba(47,93,68,.12);color:var(--forest-green)}
.opp-icon.red{background:rgba(164,61,44,.12);color:var(--odaa-red)}
.opp-icon.gold{background:rgba(199,138,59,.15);color:var(--earth-brown)}
.opp-info{flex:1;min-width:0}
.opp-title{font-size:.9rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opp-meta{font-size:.76rem;color:var(--text-muted);margin-top:.1rem}
.opp-tag{font-size:.7rem;font-weight:600;padding:.22rem .6rem;border-radius:99px;flex-shrink:0}
.opp-tag.green{background:rgba(47,93,68,.1);color:var(--forest-green)}
.opp-tag.red{background:rgba(164,61,44,.1);color:var(--odaa-red)}
.opp-tag.gold{background:rgba(199,138,59,.15);color:var(--earth-brown)}

/* BOTTOM NAV */
.bottom-nav{
  position:fixed;bottom:0;left:50%;
  transform:translateX(-50%);
  width:100%;max-width:480px;
  background:var(--white);border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-around;
  padding:.6rem 0 1rem;z-index:500;
}
@media(min-width:560px){
  .bottom-nav{border-radius:0 0 32px 32px}
}
.nav-tab{display:flex;flex-direction:column;align-items:center;gap:.22rem;background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:.65rem;font-weight:500;padding:.3rem .5rem;transition:color .2s}
.nav-tab.active{color:var(--deep-green)}
.nav-tab-icon{font-size:1.25rem}
.nav-tab-center{width:46px;height:46px;border-radius:50%;background:var(--deep-green);color:#fff;display:flex;align-items:center;justify-content:center;margin-top:-20px;box-shadow:0 4px 14px rgba(27,58,46,.4);font-size:1.25rem}

/* DETAIL HEADER */
.detail-header{
  border-radius:0 0 28px 28px;color:#fff;
  padding:1.4rem 1.5rem 1.8rem;text-align:center;position:relative;
  background:linear-gradient(160deg,var(--deep-green),var(--forest-green));
}
.detail-header.red{background:linear-gradient(160deg,var(--odaa-red),#8a3324)}
.detail-back{
  position:absolute;top:1.4rem;left:1.4rem;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.18);border:none;color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;
}
.detail-back:hover{background:rgba(255,255,255,.28)}
.detail-emblem{
  width:66px;height:66px;border-radius:50%;border:2px solid var(--earth-brown);
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;margin:0 auto .8rem;background:rgba(255,255,255,.1);
}
.detail-title{font-family:'DM Serif Display',serif;font-size:1.3rem;margin-bottom:.25rem}
.detail-sub{font-size:.82rem;color:rgba(255,255,255,.75)}
.verified-pill{display:inline-flex;align-items:center;gap:.3rem;margin-top:.6rem;background:rgba(255,255,255,.18);padding:.26rem .7rem;border-radius:99px;font-size:.7rem;font-weight:600}

/* TABS */
.tab-row{display:flex;gap:1.3rem;padding:0 1.5rem;border-bottom:1px solid var(--border);overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.tab-row::-webkit-scrollbar{display:none}
.tab-item{padding:.8rem 0;font-size:.84rem;font-weight:600;color:var(--text-muted);border-bottom:2.5px solid transparent;cursor:pointer;transition:all .2s;flex-shrink:0;user-select:none}
.tab-item.active{color:var(--deep-green);border-bottom-color:var(--deep-green)}

/* CULTURE GRID */
.culture-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:.8rem}
.culture-card{background:var(--white);border-radius:16px;padding:1rem;border:1px solid var(--border);cursor:pointer;transition:all .22s}
.culture-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.culture-card-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.15rem;margin-bottom:.6rem}
.culture-card-title{font-size:.88rem;font-weight:700;margin-bottom:.2rem;color:var(--text)}
.culture-card-desc{font-size:.74rem;color:var(--text-muted);line-height:1.5}

/* INFO CARD */
.info-card{background:var(--white);border-radius:18px;padding:1.2rem;display:flex;gap:.9rem;align-items:center;border:1px solid var(--border)}
.info-card-art{width:56px;height:56px;border-radius:14px;flex-shrink:0;background:linear-gradient(135deg,var(--earth-brown),var(--odaa-red));display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.info-card-title{font-size:.9rem;font-weight:700;margin-bottom:.22rem;color:var(--text)}
.info-card-desc{font-size:.78rem;color:var(--text-muted);line-height:1.5;margin-bottom:.38rem}
.info-card-link{font-size:.78rem;font-weight:600;color:var(--forest-green)}

/* SUMMARY BOX */
.summary-box{background:var(--white);border-radius:16px;padding:1.2rem;border:1px solid var(--border);margin-bottom:.8rem}

/* Stat rows */
.stat-row{display:flex;align-items:center;justify-content:space-between;padding:.7rem 0;border-bottom:1px solid var(--border)}
.stat-row:last-child{border-bottom:none}
.stat-label{display:flex;align-items:center;gap:.6rem;font-size:.84rem;color:var(--text-muted);font-weight:500}
.stat-value{font-size:.9rem;font-weight:700;color:var(--text)}

/* PROGRESS BAR */
.progress-track{height:8px;background:rgba(27,58,46,.08);border-radius:99px;overflow:hidden;margin:.8rem 0}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--odaa-red),var(--earth-brown));border-radius:99px;transition:width 1s ease}

/* Story cards */
.story-card{background:var(--white);border-radius:16px;padding:1.2rem;border:1px solid var(--border);margin-bottom:.75rem}
.story-title{font-family:'DM Serif Display',serif;font-size:.98rem;color:var(--text);margin-bottom:.45rem}
.story-body{font-size:.86rem;color:var(--text-muted);line-height:1.75}

/* Auth screens */
.auth-screen{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:2.5rem 2rem;text-align:center;
  position:relative;overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
}
#view-splash .auth-logo-ring,
#view-splash .auth-title,
#view-splash .auth-title-sub,
#view-splash .auth-tagline,
#view-splash .auth-tagline-desc,
#view-splash .dots-row{
  position:relative;z-index:2;
}
/* Wider viewports: larger hero type and spacing */
@media(min-width:560px){
  .auth-screen{padding:4rem 3rem}
  .auth-logo-ring{width:150px;height:150px}
  .auth-title{font-size:3rem}
  .auth-tagline{font-size:1.2rem}
}
.auth-logo-ring{
  width:120px;height:120px;border-radius:50%;
  border:3px solid var(--earth-brown);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1.3rem;background:rgba(255,255,255,.6);position:relative;
}
.auth-logo-ring::before{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  background:repeating-conic-gradient(var(--earth-brown) 0deg 8deg,var(--odaa-red) 8deg 16deg,var(--forest-green) 16deg 24deg,transparent 24deg 32deg);
  z-index:-1;
}
.auth-title{font-family:'DM Serif Display',serif;font-size:2.4rem;color:var(--deep-green);margin-bottom:.15rem}
.auth-title-sub{font-size:.83rem;letter-spacing:.18em;color:var(--odaa-red);font-weight:700;margin-bottom:1.2rem}
.auth-tagline{font-size:1rem;font-weight:600;color:var(--text);margin-bottom:.4rem}
.auth-tagline-desc{font-size:.84rem;color:var(--text-muted);margin-bottom:1.8rem;max-width:290px}
.auth-form-wrap{width:100%;max-width:360px;text-align:left}
.form-group{margin-bottom:.95rem}
.form-label{display:block;font-size:.8rem;font-weight:600;color:var(--text-mid);margin-bottom:.35rem}
.form-input{
  width:100%;padding:.8rem 1rem;background:var(--white);
  border:1.5px solid var(--border-md);border-radius:12px;
  font-size:.9rem;color:var(--text);outline:none;transition:border-color .2s;
  font-family:'Inter',sans-serif;
}
.form-input:focus{border-color:var(--forest-green)}
.form-input::placeholder{color:var(--text-muted)}
.auth-alert{padding:.7rem 1rem;border-radius:10px;font-size:.84rem;margin-bottom:.85rem;display:none;line-height:1.5}
.auth-alert.show{display:block;animation:vfade .3s ease}
.auth-alert.ok{background:rgba(47,93,68,.1);border:1px solid var(--forest-green);color:var(--forest-green)}
.auth-alert.err{background:rgba(164,61,44,.1);border:1px solid var(--odaa-red);color:var(--odaa-red)}
.dots-row{display:flex;gap:.4rem;justify-content:center;margin:1.1rem 0}
.dot{width:7px;height:7px;border-radius:50%;background:var(--border-md)}
.dot.active{background:var(--deep-green);width:20px;border-radius:4px;transition:all .3s}
.auth-switch{margin-top:1.1rem;font-size:.84rem;color:var(--text-muted)}
.auth-switch a{color:var(--forest-green);font-weight:600}

/* Splash: keep the outline button legible on the hero */
#view-splash .btn-primary{
  background:var(--deep-green);color:#fff;
}
#view-splash .btn-outline{
  background:var(--white) !important;
  border:2px solid var(--deep-green) !important;
  color:var(--deep-green) !important;
  font-weight:700 !important;
}

/* AI MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(27,42,34,.75);z-index:9000;display:none;align-items:center;justify-content:center;padding:1.5rem;backdrop-filter:blur(5px)}
.modal-overlay.open{display:flex;animation:vfade .25s ease}
.modal-box{background:var(--white);border-radius:20px;max-width:420px;width:100%;padding:1.8rem;max-height:85vh;overflow-y:auto}
.ai-source-link{display:flex;align-items:center;gap:.6rem;padding:.52rem .8rem;background:var(--sand);border-radius:10px;margin-bottom:.4rem;font-size:.8rem;color:var(--text-mid);border:1px solid var(--border);text-decoration:none;transition:background .2s}
.ai-source-link:hover{background:#f0e5e3}

/* MAP */
.map-wrap{position:relative;border-radius:20px;overflow:hidden;margin:0 1.5rem}
#mapContainer{position:relative;width:100%;height:360px;background-image:url('https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=900&q=60');background-size:cover;background-position:center}
#mapContainer::before{content:'';position:absolute;inset:0;background:rgba(27,58,46,.45)}
.map-pin{position:absolute;width:36px;height:36px;border-radius:50%;background:#fff;border:2px solid var(--earth-brown);display:flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer;transform:translate(-50%,-50%);transition:transform .2s;box-shadow:0 2px 10px rgba(0,0,0,.3);z-index:2}
.map-pin:hover{transform:translate(-50%,-50%) scale(1.15)}
.map-info-panel{position:fixed;bottom:0;left:50%;transform:translate(-50%,100%);background:#fff;border-radius:24px 24px 0 0;padding:1.4rem;transition:transform .35s ease;z-index:600;box-shadow:0 -10px 40px rgba(0,0,0,.2);width:100%;max-width:480px}
.map-info-panel.open{transform:translate(-50%,0)}

/* TOAST */
.toast-wrap{position:fixed;bottom:85px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:.5rem;width:90%;max-width:340px;pointer-events:none}
.toast{background:var(--deep-green);color:#fff;border-radius:12px;padding:.78rem 1.1rem;font-size:.84rem;box-shadow:var(--shadow-md);animation:toastIn .3s ease}
.toast.err{background:var(--odaa-red)}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}


@media(max-width:380px){
  .pillars-row{gap:.4rem}
  .pillar-label{font-size:.66rem}
  .pillar-icon{font-size:1.3rem}
}
/* Post reactions. One reaction per user; reselecting the same emoji clears it. */
.react-wrap{position:relative;display:flex;align-items:center}
.post-react-btn.reacted{color:var(--odaa-red)}
.reaction-picker{
  position:absolute;bottom:calc(100% + 8px);left:0;
  display:flex;gap:.15rem;
  background:var(--white);
  border:1px solid var(--border-md);
  border-radius:99px;
  padding:.3rem .4rem;
  box-shadow:var(--shadow-md);
  z-index:120;
  opacity:0;visibility:hidden;
  transform:translateY(6px) scale(.94);
  transform-origin:bottom left;
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.reaction-picker.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.reaction-opt{
  background:none;border:none;cursor:pointer;
  font-size:1.25rem;line-height:1;
  padding:.3rem .32rem;border-radius:50%;
  transition:transform .14s ease,background .14s ease;
}
.reaction-opt:hover{transform:scale(1.28);background:var(--sand)}
.reaction-opt:active{transform:scale(1.05)}
.reaction-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.7rem}
.reaction-chip{
  display:inline-flex;align-items:center;gap:.25rem;
  background:var(--sand);border:1px solid var(--border);
  border-radius:99px;padding:.16rem .55rem;
  font-size:.78rem;font-weight:600;color:var(--text-mid);
  transition:background .18s;
}

/* Landing page sections. Scroll-in transitions reuse the .reveal observer. */
.splash-hero{min-height:100vh;justify-content:center}
.splash-hero .hero-bg{will-change:transform}
.splash-hero-inner{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;align-items:center}
.splash-hero-copy{display:flex;flex-direction:column;align-items:center}
.splash-cta-group{
  width:100%;max-width:330px;
  display:flex;flex-direction:column;gap:.7rem;
  position:relative;z-index:2;margin-top:.4rem;
}
.splash-cta-note{font-size:.74rem;color:var(--text-muted);margin-top:.6rem;letter-spacing:.02em}
.splash-hero-trim{position:absolute;bottom:0;left:0;right:0}
.splash-scroll-hint{
  position:relative;z-index:2;margin-top:1.6rem;
  font-size:.74rem;font-weight:600;letter-spacing:.06em;
  color:var(--text-muted);
  animation:scrollNudge 2.4s ease-in-out infinite;
}
@keyframes scrollNudge{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(5px);opacity:1}}
#view-splash .splash-preview-row{margin-top:1.6rem;margin-bottom:0}

.splash-section{padding:3.5rem 1.5rem}
.splash-section-alt{background:var(--white);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.splash-section-inner{max-width:900px;margin:0 auto}
.splash-eyebrow{
  font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--odaa-red);margin-bottom:.5rem;
}
.splash-h2{font-size:1.5rem;color:var(--text);margin-bottom:1.4rem;line-height:1.25}
.splash-body{font-size:.92rem;color:var(--text-mid);line-height:1.8}

.splash-feature-grid{display:grid;grid-template-columns:1fr;gap:.8rem}
.splash-feature{
  background:var(--white);border:1px solid var(--border);
  border-radius:16px;padding:1.2rem;
  border-left:3px solid var(--odaa-red);
  transition:transform .22s,box-shadow .22s;
}
.splash-feature:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.splash-feature-icon{font-size:1.5rem;display:block;margin-bottom:.55rem}
.splash-feature-title{font-size:.94rem;font-weight:700;color:var(--text);margin-bottom:.3rem;line-height:1.35}
.splash-feature-desc{font-size:.82rem;color:var(--text-muted);line-height:1.65}

.splash-map-pins{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.splash-map-pins span{
  width:44px;height:44px;border-radius:50%;
  background:var(--sand);border:2px solid var(--earth-brown);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;
  box-shadow:var(--shadow-sm);
}

.splash-proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.splash-proof-card{
  background:var(--white);border:1px dashed var(--border-md);
  border-radius:16px;padding:1.2rem .6rem;text-align:center;
}
.splash-proof-num{font-family:'DM Serif Display',serif;font-size:1.9rem;color:var(--text-muted)}
.splash-proof-label{font-size:.72rem;color:var(--text-muted);margin-top:.2rem;font-weight:600}
.splash-proof-note{
  font-size:.78rem;color:var(--text-muted);line-height:1.7;
  margin-top:1rem;text-align:center;font-style:italic;
}

.splash-final{
  background:linear-gradient(160deg,#141414 0%,#2b2b2b 100%);
  color:#fff;padding:3.5rem 1.5rem 0;position:relative;
}
.splash-final-inner{text-align:center;padding-bottom:3rem}
.splash-final-h2{font-size:1.7rem;color:#fff;margin-bottom:.5rem}
.splash-final-sub{font-size:.9rem;color:rgba(255,255,255,.72);margin-bottom:1.6rem;line-height:1.7}
.splash-cta-group-final{margin:0 auto;max-width:330px}
.splash-final .btn-primary{background:var(--odaa-red);box-shadow:0 4px 18px rgba(179,36,28,.4)}
.splash-final .btn-primary:hover{background:#c9291f}
.splash-final .btn-outline{background:transparent !important;border:2px solid rgba(255,255,255,.55) !important;color:#fff !important}
.splash-final .btn-outline:hover{background:rgba(255,255,255,.12) !important}
.splash-foot-links{margin-top:1.4rem;font-size:.78rem}
.splash-foot-links a{color:rgba(255,255,255,.65);font-weight:600;text-decoration:underline}
.splash-foot-links a:hover{color:#fff}

/* LANDING PAGE ON TABLET / DESKTOP */
@media(min-width:768px){
  .splash-section{padding:5rem 2.5rem}
  .splash-h2{font-size:2.1rem}
  .splash-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
  .splash-feature{padding:1.6rem}
  .splash-final{padding:5rem 2.5rem 0}
  .splash-final-h2{font-size:2.4rem}
  .splash-final-sub{font-size:1.02rem}
  .splash-proof-card{padding:1.8rem 1rem}
  .splash-proof-num{font-size:2.6rem}
  .splash-map-pins span{width:54px;height:54px;font-size:1.45rem}
}
@media(min-width:900px){
  /* Wide hero: copy left, preview cards right */
  .splash-hero-inner{
    flex-direction:row;align-items:center;justify-content:center;
    gap:4rem;max-width:1000px;margin:0 auto;text-align:left;
  }
  .splash-hero-copy{align-items:flex-start;text-align:left}
  .splash-hero-copy .auth-logo-ring{margin-left:0}
  .splash-hero-copy .auth-tagline-desc{max-width:380px}
  .splash-hero-copy .dots-row{justify-content:flex-start}
  .splash-cta-group{max-width:300px}
  #view-splash .splash-preview-row{
    grid-template-columns:1fr;max-width:230px;margin:0;gap:.9rem;
  }
  #view-splash .splash-preview-card{padding:1.3rem .9rem}
  .splash-map-teaser{display:grid;grid-template-columns:1.3fr 1fr;gap:3rem;align-items:center}
  .splash-map-teaser .splash-map-pins{margin-top:0}
}

/* Responsive shell. Below 768px: single column with a bottom tab bar.
   560-767px: same column presented as a floating app window.
   768px and up: sidebar navigation and a width-capped content column. */

/* Small tablets keep the single-column layout in a rounded frame */
@media(min-width:560px) and (max-width:767px){
  .app-frame{
    box-shadow:0 0 0 1px rgba(27,58,46,.06), 0 24px 70px rgba(27,58,46,.16);
    border-radius:32px;
    margin:2rem auto;
    min-height:calc(100vh - 4rem);
    overflow:hidden;
  }
}

/* Desktop: sidebar plus content grid */
.desktop-nav{display:none}
.app-main{min-width:0}

@media(min-width:768px){
  .app-frame{
    max-width:none;margin:0;border-radius:0;box-shadow:none;
    display:grid;
    grid-template-columns:250px minmax(0,1fr);
    align-items:start;
  }
  /* Auth screens span the full width; showView() sets .auth-mode */
  .app-frame.auth-mode{display:block}
  .app-frame.auth-mode .desktop-nav{display:none}

  /* Sidebar replaces the bottom tab bar */
  .bottom-nav{display:none !important}

  /* SIDEBAR */
  .desktop-nav{
    display:flex;flex-direction:column;
    position:sticky;top:0;height:100vh;
    background:var(--white);
    border-right:1px solid var(--border);
    padding:1.6rem 1rem 1.2rem;
    z-index:400;
  }
  .dnav-brand{display:flex;align-items:center;gap:.65rem;padding:0 .6rem 1.5rem}
  .dnav-brand-mark{display:flex;align-items:center}
  .dnav-brand-text{font-family:'DM Serif Display',serif;font-size:1.15rem;color:var(--text);line-height:1.1}
  .dnav-brand-text span{
    display:block;color:var(--odaa-red);font-size:.56rem;letter-spacing:.22em;
    font-family:'Inter',sans-serif;font-weight:700;margin-top:1px;
  }
  .dnav-list{display:flex;flex-direction:column;gap:.15rem;flex:1}
  /* Sidebar items are icon + label rows rather than stacked */
  .dnav-item{
    flex-direction:row !important;
    align-items:center;justify-content:flex-start;
    gap:.75rem !important;
    width:100%;padding:.7rem .8rem !important;
    border-radius:12px;font-size:.9rem !important;font-weight:600 !important;
    color:var(--text-mid) !important;text-align:left;
    transition:background .18s,color .18s;
  }
  .dnav-item .nav-tab-icon{font-size:1.15rem}
  .dnav-item:hover{background:var(--sand);color:var(--text) !important}
  .dnav-item.active{background:var(--deep-green);color:#fff !important}
  .dnav-foot{padding-top:.8rem;border-top:1px solid var(--border)}
  .dnav-signout{
    width:100%;padding:.65rem .8rem;border-radius:12px;
    background:transparent;border:1.5px solid var(--border-md);
    color:var(--text-mid);font-size:.85rem;font-weight:600;
    text-align:left;transition:all .18s;
  }
  .dnav-signout:hover{border-color:var(--odaa-red);color:var(--odaa-red);background:rgba(179,36,28,.06)}

  /* MAIN CONTENT */
  /* Headers stay full-bleed; body content is width-capped and centred */
  .app-main .section-block{
    max-width:900px;margin-left:auto;margin-right:auto;
    padding:2rem 2.5rem;
  }
  .app-main .app-header,
  .app-main .detail-header{border-radius:0 0 32px 32px;padding-left:2.5rem;padding-right:2.5rem}
  .app-main .app-header-row,
  .app-main .greeting-title,
  .app-main .greeting-sub{max-width:900px;margin-left:auto;margin-right:auto}
  .greeting-title{font-size:2rem}
  .detail-title{font-size:1.7rem}
  .detail-sub{font-size:.92rem}
  .detail-emblem{width:80px;height:80px;font-size:2rem}

  .pillars-row{max-width:900px;margin:1.8rem auto 0;gap:1.2rem}
  .pillar-card{padding:1.8rem 1rem 1.6rem}
  .pillar-icon{font-size:2.1rem}
  .pillar-label{font-size:.86rem}

  .featured-card{min-height:210px;padding:2rem}
  .featured-desc{font-size:.95rem;max-width:520px}

  .tab-row{max-width:900px;margin:0 auto;padding:0 2.5rem}

  /* Multi-column listings on wide viewports */
  #homeOppList,#exploreOppList{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2rem;
  }
  .culture-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
  #jobsTabContent .story-card{margin-bottom:1rem}

  /* Bottom spacers only exist to clear the mobile tab bar */
  .app-main .view > div[style*="height:90px"]{height:2rem !important}

  /* Desktop modal sizing */
  .modal-box{max-width:560px;padding:2.2rem}
  #aiModal .modal-box{max-width:600px !important}
  #bioModal .modal-box{max-width:520px !important}
  #bioInput{min-height:150px}

  /* Map panel becomes a right-hand drawer */
  .map-wrap{max-width:900px;margin:0 auto;border-radius:24px}
  #mapContainer{height:520px}
  .map-info-panel{
    left:auto;right:2rem;bottom:2rem;
    width:400px;max-width:400px;
    border-radius:20px;
    transform:translateY(140%);
  }
  .map-info-panel.open{transform:translateY(0)}

  .toast-wrap{bottom:2rem}
}

@media(min-width:1200px){
  .desktop-nav{padding:2rem 1.2rem 1.4rem}
  .app-frame{grid-template-columns:280px minmax(0,1fr)}
  #homeOppList,#exploreOppList{gap:0 2.5rem}
}

/* Category accent palette.
   Separate from the brand tokens in :root, which are unchanged. Used only to
   distinguish content categories: topic cards, opportunity tags, job badges.
   Avoids the Ethiopian flag triad: the teal is blue-leaning and the amber is
   burnt orange rather than gold. */
:root{
  --acc-violet:#6B4BC9;  --acc-violet-soft:rgba(107,75,201,.12);
  --acc-ocean:#1B7FA8;   --acc-ocean-soft:rgba(27,127,168,.12);
  --acc-teal:#0F7B6C;    --acc-teal-soft:rgba(15,123,108,.12);
  --acc-amber:#D2761A;   --acc-amber-soft:rgba(210,118,26,.14);
  --acc-magenta:#C3316C; --acc-magenta-soft:rgba(195,49,108,.12);
  --acc-indigo:#3B5BC0;  --acc-indigo-soft:rgba(59,91,192,.12);
}

/* Culture topic cards */
/* The accent class is applied in topicCardHTML and overrides the inline icon
   colour. Topics without one fall back to the colour key on the record. */
.culture-card{position:relative;overflow:hidden;transition:transform .22s,box-shadow .22s,border-color .22s}
.culture-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--card-accent,transparent);
}
.culture-card:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(20,20,20,.13);border-color:var(--card-accent,var(--border))}
.culture-card .culture-card-icon{
  background:var(--card-accent-soft,rgba(20,20,20,.08)) !important;
  color:var(--card-accent,var(--text)) !important;
  font-size:1.3rem;
}
.culture-card.accent-violet {--card-accent:var(--acc-violet); --card-accent-soft:var(--acc-violet-soft)}
.culture-card.accent-ocean  {--card-accent:var(--acc-ocean);  --card-accent-soft:var(--acc-ocean-soft)}
.culture-card.accent-teal   {--card-accent:var(--acc-teal);   --card-accent-soft:var(--acc-teal-soft)}
.culture-card.accent-amber  {--card-accent:var(--acc-amber);  --card-accent-soft:var(--acc-amber-soft)}
.culture-card.accent-magenta{--card-accent:var(--acc-magenta);--card-accent-soft:var(--acc-magenta-soft)}
.culture-card.accent-indigo {--card-accent:var(--acc-indigo); --card-accent-soft:var(--acc-indigo-soft)}

/* Opportunity icons and tags. The green/red/gold keys emitted by app.js are
   retained; only their appearance changed. */
.opp-icon.green{background:var(--acc-teal-soft);color:var(--acc-teal)}
.opp-icon.red  {background:var(--acc-magenta-soft);color:var(--acc-magenta)}
.opp-icon.gold {background:var(--acc-amber-soft);color:var(--acc-amber)}
.opp-tag.green{background:var(--acc-teal-soft);color:var(--acc-teal)}
.opp-tag.red  {background:var(--acc-magenta-soft);color:var(--acc-magenta)}
.opp-tag.gold {background:var(--acc-amber-soft);color:var(--acc-amber)}

/* Job type badges */
.job-type-badge{
  font-size:.7rem;font-weight:700;flex-shrink:0;margin-left:.5rem;
  padding:.22rem .6rem;border-radius:99px;
  background:var(--badge-soft,rgba(20,20,20,.08));
  color:var(--badge,var(--text-mid));
}
.job-type-badge.accent-violet {--badge:var(--acc-violet); --badge-soft:var(--acc-violet-soft)}
.job-type-badge.accent-ocean  {--badge:var(--acc-ocean);  --badge-soft:var(--acc-ocean-soft)}
.job-type-badge.accent-teal   {--badge:var(--acc-teal);   --badge-soft:var(--acc-teal-soft)}
.job-type-badge.accent-amber  {--badge:var(--acc-amber);  --badge-soft:var(--acc-amber-soft)}
.job-type-badge.accent-magenta{--badge:var(--acc-magenta);--badge-soft:var(--acc-magenta-soft)}
.job-type-badge.accent-indigo {--badge:var(--acc-indigo); --badge-soft:var(--acc-indigo-soft)}

/* Home pillar tiles. Brand palette only; the Cultural Heritage tile uses a
   light surface rather than a dark one. */
.pillar-card.active-green{
  background:linear-gradient(145deg,#fdfcfa,#f1eee8);
  color:var(--text);
  border:1.5px solid rgba(20,20,20,.14);
  box-shadow:0 6px 24px rgba(20,20,20,.10);
}
.pillar-card.active-green .pillar-label{color:var(--text)}
.pillar-card.active-green .pillar-icon{filter:none}

/* Generated artwork. CSS gradients and inline SVG only, so nothing depends on
   an external asset. */

/* Closing call to action */
.splash-final{
  background:
    radial-gradient(ellipse 120% 80% at 50% 100%, rgba(20,20,20,.05), transparent 70%),
    linear-gradient(180deg, var(--sand) 0%, #FBFAF7 55%, #F2EFE9 100%);
  color:var(--text);
  border-top:1px solid var(--border);
  overflow:hidden;
}
/* Layered hills and skyline */
.splash-final::before{
  content:'';position:absolute;left:0;right:0;bottom:0;height:190px;
  pointer-events:none;opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 190' preserveAspectRatio='none'%3E%3Cpath d='M0 150 L90 150 L90 96 L112 96 L112 150 L170 150 L170 74 L200 60 L230 74 L230 150 L300 150 L300 110 L340 110 L340 150 L1200 150 L1200 190 L0 190Z' fill='%23161616' opacity='0.10'/%3E%3Cpath d='M0 190 Q160 120 340 158 T700 150 T1030 162 T1200 138 L1200 190Z' fill='%23161616' opacity='0.07'/%3E%3Cpath d='M0 190 Q240 152 520 176 T980 170 T1200 182 L1200 190Z' fill='%23161616' opacity='0.05'/%3E%3C/svg%3E") bottom center / 100% 190px no-repeat;
}
.splash-final-inner{position:relative;z-index:2}
.splash-final-h2{color:var(--text)}
.splash-final-sub{color:var(--text-mid)}
/* Standard brand button treatment on the light ground */
.splash-final .btn-primary{background:var(--deep-green);box-shadow:0 4px 18px rgba(20,20,20,.22)}
.splash-final .btn-primary:hover{background:var(--forest-green)}
.splash-final .btn-outline{
  background:var(--white) !important;
  border:2px solid var(--deep-green) !important;
  color:var(--deep-green) !important;font-weight:700 !important;
}
.splash-final .btn-outline:hover{background:rgba(20,20,20,.05) !important}
.splash-final .splash-foot-links a{color:var(--text-muted)}
.splash-final .splash-foot-links a:hover{color:var(--text)}
.splash-final .pattern-trim{position:relative;z-index:2}

/* Map background. Generated rather than a third-party image. */
#mapContainer{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F7F5F1'/%3E%3Cstop offset='0.55' stop-color='%23EDE8E0'/%3E%3Cstop offset='1' stop-color='%23DFD8CD'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='800' height='600' fill='url(%23sky)'/%3E%3Ccircle cx='620' cy='120' r='46' fill='%23B3241C' opacity='0.13'/%3E%3Cpath d='M0 330 L120 250 L210 320 L300 240 L410 340 L520 260 L640 330 L800 270 L800 600 L0 600Z' fill='%23161616' opacity='0.09'/%3E%3Cpath d='M0 420 L150 350 L280 415 L420 345 L560 420 L700 370 L800 410 L800 600 L0 600Z' fill='%23161616' opacity='0.07'/%3E%3Cg opacity='0.10'%3E%3Crect x='352' y='300' width='9' height='70' fill='%23161616'/%3E%3Cellipse cx='356' cy='288' rx='74' ry='40' fill='%23161616'/%3E%3Cellipse cx='300' cy='308' rx='36' ry='22' fill='%23161616'/%3E%3Cellipse cx='412' cy='308' rx='36' ry='22' fill='%23161616'/%3E%3C/g%3E%3Cg opacity='0.09'%3E%3Cpolygon points='90,470 250,470 170,368' fill='%23161616'/%3E%3Cpolygon points='210,470 330,470 270,392' fill='%23161616'/%3E%3C/g%3E%3Cpath d='M0 520 Q200 486 400 512 T800 500 L800 600 L0 600Z' fill='%23161616' opacity='0.06'/%3E%3C/svg%3E");
  background-size:cover;background-position:center;
}
#mapContainer::before{background:rgba(20,20,20,.06)}
.map-pin{border-color:var(--odaa-red);box-shadow:0 3px 12px rgba(20,20,20,.22)}

/* Landing feature tiles */
.splash-feature:nth-child(1){border-left-color:var(--acc-violet)}
.splash-feature:nth-child(2){border-left-color:var(--acc-amber)}
.splash-feature:nth-child(3){border-left-color:var(--acc-magenta)}
.splash-feature:nth-child(4){border-left-color:var(--acc-indigo)}

/* Landing map teaser pins */
.splash-map-pins span:nth-child(odd){border-color:var(--acc-ocean)}
.splash-map-pins span:nth-child(even){border-color:var(--acc-amber)}

/* Surface treatment: gradient artwork on content tiles over a tinted page wash. */

/* Page wash built from the accent palette at low opacity */
body{
  background:
    radial-gradient(ellipse 70% 55% at 8% 0%,   rgba(107,75,201,.20), transparent 60%),
    radial-gradient(ellipse 65% 50% at 95% 8%,  rgba(27,127,168,.18), transparent 60%),
    radial-gradient(ellipse 75% 55% at 85% 95%, rgba(195,49,108,.16), transparent 62%),
    radial-gradient(ellipse 60% 45% at 10% 92%, rgba(59,91,192,.15), transparent 60%),
    var(--sand);
  background-attachment:fixed;
}
/* The content column stays near-opaque so the wash reads as a backdrop */
.app-frame{background:rgba(250,249,246,.94)}
@media(min-width:768px){
  .app-frame{background:rgba(250,249,246,.90)}
  .desktop-nav{background:rgba(255,255,255,.86);backdrop-filter:blur(10px)}
}

/* Gradient artwork, six colourways */
.tile-art,
.culture-card::before,
.opp-item::before,
.home-banner-art{
  background-image:
    radial-gradient(ellipse 80% 120% at 12% 8%,  var(--art-a), transparent 62%),
    radial-gradient(ellipse 90% 110% at 88% 22%, var(--art-b), transparent 60%),
    radial-gradient(ellipse 70% 90%  at 60% 100%,var(--art-c), transparent 65%),
    linear-gradient(125deg, var(--art-a), var(--art-b) 55%, var(--art-c));
}
.accent-violet { --art-a:#8B5CF6; --art-b:#6B4BC9; --art-c:#3B2A7A}
.accent-ocean  { --art-a:#38B6D9; --art-b:#1B7FA8; --art-c:#0E4F6B}
.accent-teal   { --art-a:#2FB8A4; --art-b:#0F7B6C; --art-c:#0A4A42}
.accent-amber  { --art-a:#F2A33C; --art-b:#D2761A; --art-c:#8A4409}
.accent-magenta{ --art-a:#EE5A92; --art-b:#C3316C; --art-c:#7C1A43}
.accent-indigo { --art-a:#6A8AE8; --art-b:#3B5BC0; --art-c:#1F3178}

/* Home banner */
.home-banner{
  position:relative;margin:1.2rem 1rem 0;
  border-radius:20px;overflow:hidden;
  min-height:132px;display:flex;align-items:flex-end;
  box-shadow:0 10px 30px rgba(20,20,20,.18);
}
.home-banner-art{
  position:absolute;inset:0;
  --art-a:#8B5CF6; --art-b:#C3316C; --art-c:#1B7FA8;
}
/* Brush texture over the gradient */
.home-banner-art::after{
  content:'';position:absolute;inset:0;
  background:
    repeating-linear-gradient(102deg, rgba(255,255,255,.16) 0 3px, transparent 3px 14px),
    repeating-linear-gradient(78deg,  rgba(20,20,20,.10)   0 2px, transparent 2px 19px);
  mix-blend-mode:overlay;
}
.home-banner-copy{
  position:relative;z-index:2;padding:1.1rem 1.2rem;color:#fff;
  text-shadow:0 1px 12px rgba(20,20,20,.45);
}
.home-banner-kicker{
  font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  opacity:.9;margin-bottom:.2rem;
}
.home-banner-title{font-family:'DM Serif Display',serif;font-size:1.3rem;line-height:1.2}

/* Culture topic cards: art header with an overlapping icon badge */
.culture-card{
  padding:0 1rem 1rem;border-radius:18px;background:var(--white);
  box-shadow:0 3px 14px rgba(20,20,20,.07);
}
.culture-card::before{
  content:'';position:relative;display:block;
  left:auto;right:auto;top:auto;height:84px;width:calc(100% + 2rem);
  margin:0 -1rem .1rem;
  border-radius:18px 18px 0 0;
}
.culture-card .culture-card-icon{
  position:relative;z-index:2;margin-top:-24px;margin-bottom:.55rem;
  width:48px;height:48px;font-size:1.4rem;
  background:var(--white) !important;
  color:var(--card-accent,var(--text)) !important;
  border:3px solid var(--white);
  box-shadow:0 4px 14px rgba(20,20,20,.18);
}
.culture-card-title{font-size:.92rem}
.culture-card:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(20,20,20,.16)}

/* Opportunity cards */
#homeOppList,#exploreOppList{display:grid;grid-template-columns:1fr;gap:.9rem}
.opp-item{
  display:block;position:relative;
  padding:0 0 .9rem;border-bottom:none;
  background:var(--white);border-radius:18px;overflow:hidden;
  box-shadow:0 3px 14px rgba(20,20,20,.07);
  transition:transform .22s,box-shadow .22s;
}
.opp-item:hover{opacity:1;transform:translateY(-4px);box-shadow:0 14px 34px rgba(20,20,20,.16)}
.opp-item::before{
  content:'';display:block;height:96px;width:100%;
}
.opp-item .opp-icon{
  position:relative;z-index:2;margin:-26px 0 .5rem .9rem;
  width:50px;height:50px;font-size:1.35rem;
  background:var(--white) !important;
  border:3px solid var(--white);
  box-shadow:0 4px 14px rgba(20,20,20,.18);
}
.opp-item .opp-info{padding:0 .9rem}
.opp-item .opp-title{font-size:.95rem;white-space:normal}
.opp-item .opp-tag{position:absolute;top:.7rem;right:.7rem;z-index:2;background:rgba(255,255,255,.92) !important;backdrop-filter:blur(4px)}

/* Featured card */
.featured-card{
  position:relative;overflow:hidden;
  --art-a:#6B4BC9; --art-b:#C3316C; --art-c:#161616;
  background-image:
    radial-gradient(ellipse 80% 120% at 10% 10%,  var(--art-a), transparent 60%),
    radial-gradient(ellipse 90% 110% at 90% 30%,  var(--art-b), transparent 58%),
    linear-gradient(140deg, var(--art-a), var(--art-b) 50%, var(--art-c));
}
.featured-card::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(100deg, rgba(255,255,255,.10) 0 3px, transparent 3px 16px);
  mix-blend-mode:overlay;
}
.featured-card-content{position:relative;z-index:2}
.featured-tag{color:#fff;opacity:.95}
.featured-desc{color:rgba(255,255,255,.92)}

/* Landing feature tiles */
.splash-feature{position:relative;overflow:hidden;border-left:none;padding-left:1.2rem}
.splash-feature::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:6px;
  background:linear-gradient(180deg,var(--art-a,var(--acc-violet)),var(--art-c,var(--acc-indigo)));
}
.splash-feature:nth-child(1){--art-a:#8B5CF6;--art-c:#3B2A7A}
.splash-feature:nth-child(2){--art-a:#F2A33C;--art-c:#8A4409}
.splash-feature:nth-child(3){--art-a:#EE5A92;--art-c:#7C1A43}
.splash-feature:nth-child(4){--art-a:#6A8AE8;--art-c:#1F3178}
.splash-feature-icon{
  width:46px;height:46px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--art-a),var(--art-c));
  box-shadow:0 5px 16px rgba(20,20,20,.18);margin-bottom:.7rem;
}

/* Closing call to action */
.splash-final{
  background-image:
    radial-gradient(ellipse 70% 90% at 12% 8%,  #8B5CF6, transparent 60%),
    radial-gradient(ellipse 80% 90% at 88% 18%, #C3316C, transparent 58%),
    radial-gradient(ellipse 90% 80% at 60% 100%,#1B7FA8, transparent 62%),
    linear-gradient(150deg,#6B4BC9,#C3316C 52%,#1F3178);
  color:#fff;border-top:none;
}
.splash-final::before{
  opacity:.30;
  filter:invert(1);
}
.splash-final-h2{color:#fff}
.splash-final-sub{color:rgba(255,255,255,.88)}
.splash-final .btn-primary{
  background:#fff !important;color:var(--text) !important;
  box-shadow:0 6px 22px rgba(20,20,20,.30) !important;font-weight:700;
}
.splash-final .btn-primary:hover{background:#f4f1ec !important}
.splash-final .btn-outline{
  background:rgba(255,255,255,.12) !important;
  border:2px solid rgba(255,255,255,.7) !important;
  color:#fff !important;backdrop-filter:blur(4px);
}
.splash-final .btn-outline:hover{background:rgba(255,255,255,.24) !important}
.splash-final .splash-foot-links a{color:rgba(255,255,255,.8)}
.splash-final .splash-foot-links a:hover{color:#fff}

/* Splash preview cards */
.splash-preview-card.preview-black{--art-a:#8B5CF6;--art-b:#6B4BC9;--art-c:#3B2A7A;
  background-image:linear-gradient(145deg,var(--art-a),var(--art-c))}
.splash-preview-card.preview-red{--art-a:#EE5A92;--art-b:#C3316C;--art-c:#7C1A43;
  background-image:linear-gradient(145deg,var(--art-a),var(--art-c))}
.splash-preview-card.preview-white{--art-a:#38B6D9;--art-b:#1B7FA8;--art-c:#0E4F6B;
  background-image:linear-gradient(145deg,var(--art-a),var(--art-c));color:#fff;border:none}
.splash-preview-card.preview-white .pillar-label{color:#fff}

/* Card surfaces */
.summary-box,.story-card,.post-card,.info-card{
  box-shadow:0 3px 14px rgba(20,20,20,.06);
}

/* Desktop tuning */
@media(min-width:768px){
  .home-banner{margin:1.6rem auto 0;max-width:900px;min-height:190px;border-radius:24px}
  .home-banner-title{font-size:1.9rem}
  .home-banner-copy{padding:1.8rem 2rem}
  #homeOppList,#exploreOppList{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}
  .culture-card::before{height:104px}
  .opp-item::before{height:118px}
}

/* Splash hero. The illustration is prominent, so the copy sits on a scrim to
   preserve contrast. */
.splash-hero{
  /* light at the top so the scene reads as sunrise */
  background:linear-gradient(180deg,#FDFCFA 0%,#F7F5F1 34%,rgba(247,245,241,0) 62%);
}
.splash-hero .hero-bg{opacity:1}

/* Halo behind the text block preserves contrast without hiding the artwork */
.splash-hero-copy{position:relative}
.splash-hero-copy::before{
  content:'';position:absolute;z-index:-1;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(150%,640px);height:130%;
  background:radial-gradient(ellipse at center, rgba(253,252,250,.94) 0%, rgba(253,252,250,.72) 52%, rgba(253,252,250,0) 78%);
  pointer-events:none;
}
@media(min-width:900px){
  /* Anchor the halo to the left-aligned copy */
  .splash-hero-copy::before{
    left:42%;width:min(170%,720px);
  }
}

/* Preview cards sit over the darker foreground and need extra lift */
#view-splash .splash-preview-card{box-shadow:0 10px 28px rgba(10,74,66,.28)}

/* Scroll hint sits on the darker foreground */
.splash-scroll-hint{color:#0A4A42;font-weight:700}

/* Hero artwork is drawn twice, portrait and landscape. preserveAspectRatio
   "slice" scales to cover, so a portrait viewBox on a wide viewport crops the
   canopy. Matching the viewBox to the viewport shape avoids that. Only one is
   rendered at a time. */
.hero-bg-wide{display:none}
@media(min-width:900px){
  #splashHeroBg{display:none}
  .hero-bg-wide{display:block}
}

/* Header tone, hero layout and category illustrations. */

/* App header. Vanilla ground with ink text; the brand pattern strip is kept. */
.app-header{
  background:linear-gradient(165deg,#FDF6E6 0%,#F7EBD4 55%,#F2E3C6 100%);
  color:var(--text);
  box-shadow:0 8px 28px rgba(20,20,20,.10);
  border-bottom:1px solid rgba(20,20,20,.06);
}
.app-header::after{opacity:.75}
.app-logo-text{color:var(--text)}
.app-logo-text span{color:var(--odaa-red)}
.app-logo-icon svg polygon[fill="#fff"],
.app-logo-icon svg rect[fill="#fff"],
.app-logo-icon svg ellipse[fill="#fff"]{fill:var(--text)}
.greeting-title{color:var(--text)}
.greeting-sub{color:var(--text-mid)}
.icon-btn{
  background:rgba(20,20,20,.06);
  border:1px solid rgba(20,20,20,.12);
  color:var(--text);
}
.icon-btn:hover{background:rgba(20,20,20,.12)}
.notif-badge{border-color:#F7EBD4}
/* The profile screen reuses .app-header and sets its name and handle inline in
   white; both are overridden here for the light ground. */
#view-profile #profileFullName{color:var(--text) !important}
#view-profile #profileHandle{color:var(--text-muted) !important}
#view-profile #profileAvatarInitial{
  border-color:#fff !important;
  box-shadow:0 6px 20px rgba(20,20,20,.18);
}

/* Wide-screen hero: single left-aligned column so the preview cards clear the
   illustration on the right. */
@media(min-width:900px){
  .splash-hero-inner{
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:1.7rem;
    max-width:1120px;margin:0 auto;
    text-align:left;
  }
  .splash-hero-copy{align-items:flex-start;text-align:left;max-width:560px}
  #view-splash .splash-preview-row{
    grid-template-columns:repeat(3,minmax(0,1fr));
    max-width:560px;margin:0;gap:.85rem;
  }
  #view-splash .splash-preview-card{padding:1rem .6rem}
  #view-splash .splash-preview-card .pillar-label{font-size:.66rem}
  /* Halo follows the left-aligned copy, and no longer needs to stretch right */
  .splash-hero-copy::before{left:46%;width:min(150%,660px)}
}

/* Category illustrations. Inline SVG layered over each gradient. */

/* Livestock */
.opp-item.accent-amber::before{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%23ffffff' opacity='0.30'%3E%3Cellipse cx='150' cy='78' rx='42' ry='23'/%3E%3Crect x='118' y='88' width='7' height='22' rx='3'/%3E%3Crect x='140' y='90' width='7' height='20' rx='3'/%3E%3Crect x='163' y='90' width='7' height='20' rx='3'/%3E%3Crect x='182' y='88' width='7' height='22' rx='3'/%3E%3Cellipse cx='196' cy='62' rx='17' ry='13'/%3E%3Cpath d='M186 52 q-9 -12 -19 -8 q9 -1 14 10z'/%3E%3Cpath d='M206 52 q9 -12 19 -8 q-9 -1 -14 10z'/%3E%3Cpath d='M108 74 q-14 6 -16 20 q8 -12 17 -12z'/%3E%3C/g%3E%3Cg fill='%23ffffff' opacity='0.18'%3E%3Cellipse cx='288' cy='90' rx='28' ry='15'/%3E%3Crect x='268' y='97' width='5' height='15' rx='2'/%3E%3Crect x='300' y='97' width='5' height='15' rx='2'/%3E%3Cellipse cx='318' cy='80' rx='11' ry='9'/%3E%3C/g%3E%3Cpath d='M0 108 Q100 96 200 104 T400 100 L400 120 L0 120Z' fill='%23ffffff' opacity='0.14'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 120% at 12% 8%,  var(--art-a), transparent 62%),
    radial-gradient(ellipse 90% 110% at 88% 22%, var(--art-b), transparent 60%),
    linear-gradient(125deg, var(--art-a), var(--art-b) 55%, var(--art-c));
}

/* Craft */
.opp-item.accent-magenta::before{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='xMidYMax slice'%3E%3Cg stroke='%23ffffff' stroke-width='3' opacity='0.26'%3E%3Cpath d='M120 18 L120 108M140 18 L140 108M160 18 L160 108M180 18 L180 108M200 18 L200 108M220 18 L220 108M240 18 L240 108M260 18 L260 108'/%3E%3C/g%3E%3Crect x='108' y='14' width='168' height='7' rx='3' fill='%23ffffff' opacity='0.34'/%3E%3Crect x='108' y='102' width='168' height='7' rx='3' fill='%23ffffff' opacity='0.34'/%3E%3Cg fill='%23ffffff' opacity='0.30'%3E%3Cpath d='M112 52 l24 -10 l24 10 l24 -10 l24 10 l24 -10 l24 10 l24 -10 l0 12 l-24 10 l-24 -10 l-24 10 l-24 -10 l-24 10 l-24 -10 l-24 10z'/%3E%3C/g%3E%3Cg fill='%23ffffff' opacity='0.22'%3E%3Cellipse cx='330' cy='78' rx='15' ry='24'/%3E%3Crect x='327' y='50' width='6' height='58' rx='3'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 120% at 12% 8%,  var(--art-a), transparent 62%),
    radial-gradient(ellipse 90% 110% at 88% 22%, var(--art-b), transparent 60%),
    linear-gradient(125deg, var(--art-a), var(--art-b) 55%, var(--art-c));
}

/* Agriculture */
.opp-item.accent-teal::before{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='xMidYMax slice'%3E%3Cg opacity='0.30'%3E%3Cpath d='M200 112 L200 24' stroke='%23ffffff' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M200 44 q-38 -16 -58 6 q34 16 58 -6z' fill='%23ffffff'/%3E%3Cpath d='M200 44 q38 -16 58 6 q-34 16 -58 -6z' fill='%23ffffff'/%3E%3Cpath d='M200 74 q-42 -16 -64 8 q38 16 64 -8z' fill='%23ffffff'/%3E%3Cpath d='M200 74 q42 -16 64 8 q-38 16 -64 -8z' fill='%23ffffff'/%3E%3C/g%3E%3Cg fill='%23ffffff' opacity='0.40'%3E%3Ccircle cx='166' cy='58' r='8'/%3E%3Ccircle cx='236' cy='60' r='8'/%3E%3Ccircle cx='158' cy='90' r='8'/%3E%3Ccircle cx='244' cy='88' r='8'/%3E%3Ccircle cx='200' cy='30' r='7'/%3E%3C/g%3E%3Cpath d='M0 110 Q100 100 200 106 T400 102 L400 120 L0 120Z' fill='%23ffffff' opacity='0.14'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 120% at 12% 8%,  var(--art-a), transparent 62%),
    radial-gradient(ellipse 90% 110% at 88% 22%, var(--art-b), transparent 60%),
    linear-gradient(125deg, var(--art-a), var(--art-b) 55%, var(--art-c));
}

/* Education */
.opp-item.accent-indigo::before{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%23ffffff' opacity='0.30'%3E%3Cpath d='M196 40 q-38 -18 -76 -8 l0 62 q38 -10 76 8z'/%3E%3Cpath d='M204 40 q38 -18 76 -8 l0 62 q-38 -10 -76 8z'/%3E%3C/g%3E%3Cg stroke='%23ffffff' stroke-width='3' opacity='0.34' stroke-linecap='round'%3E%3Cpath d='M136 54 h44M136 66 h44M136 78 h34M220 54 h44M220 66 h44M220 78 h34'/%3E%3C/g%3E%3Cg fill='%23ffffff' opacity='0.22'%3E%3Cpath d='M318 34 l8 18 l20 2 l-15 14 l4 20 l-17 -10 l-17 10 l4 -20 l-15 -14 l20 -2z'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 120% at 12% 8%,  var(--art-a), transparent 62%),
    radial-gradient(ellipse 90% 110% at 88% 22%, var(--art-b), transparent 60%),
    linear-gradient(125deg, var(--art-a), var(--art-b) 55%, var(--art-c));
}

/* Health */
.opp-item.accent-violet::before{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='xMidYMax slice'%3E%3Cg opacity='0.30' fill='%23ffffff'%3E%3Cpath d='M170 108 L170 46' stroke='%23ffffff' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M170 60 q-30 -14 -46 4 q28 14 46 -4z'/%3E%3Cpath d='M170 60 q30 -14 46 4 q-28 14 -46 -4z'/%3E%3Cpath d='M170 40 q-20 -18 -4 -32 q16 14 4 32z'/%3E%3C/g%3E%3Cg fill='%23ffffff' opacity='0.26'%3E%3Cpath d='M236 74 q34 0 34 0 q0 26 -17 26 q-17 0 -17 -26z'/%3E%3Crect x='232' y='68' width='42' height='7' rx='3'/%3E%3Crect x='262' y='40' width='6' height='30' rx='3' transform='rotate(18 265 55)'/%3E%3C/g%3E%3Cpath d='M0 110 Q120 100 240 106 T400 102 L400 120 L0 120Z' fill='%23ffffff' opacity='0.13'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 120% at 12% 8%,  var(--art-a), transparent 62%),
    radial-gradient(ellipse 90% 110% at 88% 22%, var(--art-b), transparent 60%),
    linear-gradient(125deg, var(--art-a), var(--art-b) 55%, var(--art-c));
}

/* Trade */
.opp-item.accent-ocean::before{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%23ffffff' opacity='0.28'%3E%3Cpath d='M148 72 h72 l-9 38 h-54z'/%3E%3Cpath d='M152 64 q32 -20 64 0z' opacity='0.7'/%3E%3Cpath d='M238 84 h54 l-7 26 h-40z'/%3E%3C/g%3E%3Cg stroke='%23ffffff' stroke-width='2.5' opacity='0.30'%3E%3Cpath d='M156 84 h56M153 96 h62M242 94 h46'/%3E%3C/g%3E%3Cg fill='%23ffffff' opacity='0.34'%3E%3Ccircle cx='168' cy='60' r='7'/%3E%3Ccircle cx='186' cy='56' r='7'/%3E%3Ccircle cx='204' cy='60' r='7'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 120% at 12% 8%,  var(--art-a), transparent 62%),
    radial-gradient(ellipse 90% 110% at 88% 22%, var(--art-b), transparent 60%),
    linear-gradient(125deg, var(--art-a), var(--art-b) 55%, var(--art-c));
}

/* Culture topic scenes */

/* Gadaa System: Namoratunga stone pillars beneath the star calendar */
.culture-card.accent-violet::before{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 110' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%23ffffff' opacity='0.55'%3E%3Ccircle cx='40' cy='20' r='2'/%3E%3Ccircle cx='72' cy='13' r='1.6'/%3E%3Ccircle cx='104' cy='25' r='2.2'/%3E%3Ccircle cx='140' cy='15' r='1.6'/%3E%3Ccircle cx='176' cy='27' r='2'/%3E%3Ccircle cx='208' cy='14' r='1.6'/%3E%3Ccircle cx='60' cy='38' r='1.5'/%3E%3Ccircle cx='122' cy='40' r='1.5'/%3E%3Ccircle cx='192' cy='42' r='1.5'/%3E%3C/g%3E%3Cg opacity='0.40'%3E%3Ccircle cx='246' cy='28' r='15' fill='%23ffffff'/%3E%3Cellipse cx='246' cy='28' rx='26' ry='6' fill='none' stroke='%23ffffff' stroke-width='2.6'/%3E%3C/g%3E%3Cg stroke='%23ffffff' stroke-width='1.4' opacity='0.30'%3E%3Cpath d='M40 20 L72 13 L104 25 L140 15 L176 27 L208 14'/%3E%3C/g%3E%3Cg fill='%23ffffff' opacity='0.34'%3E%3Crect x='44' y='58' width='15' height='52' rx='5'/%3E%3Crect x='74' y='50' width='16' height='60' rx='5'/%3E%3Crect x='106' y='62' width='14' height='48' rx='5'/%3E%3Crect x='136' y='46' width='17' height='64' rx='5'/%3E%3Crect x='170' y='60' width='14' height='50' rx='5'/%3E%3Crect x='200' y='54' width='16' height='56' rx='5'/%3E%3C/g%3E%3Cpath d='M0 100 Q75 92 150 98 T300 94 L300 110 L0 110Z' fill='%23ffffff' opacity='0.16'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 120% at 12% 8%,  var(--art-a), transparent 62%),
    radial-gradient(ellipse 90% 110% at 88% 22%, var(--art-b), transparent 60%),
    linear-gradient(125deg, var(--art-a), var(--art-b) 55%, var(--art-c));
}

/* African Roots */
.culture-card.accent-indigo::before{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 110' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%23ffffff' opacity='0.5'%3E%3Ccircle cx='56' cy='18' r='1.8'/%3E%3Ccircle cx='96' cy='12' r='1.5'/%3E%3Ccircle cx='210' cy='20' r='1.8'/%3E%3Ccircle cx='248' cy='14' r='1.5'/%3E%3C/g%3E%3Cg fill='%23ffffff' opacity='0.32'%3E%3Cpolygon points='40,100 132,100 86,40'/%3E%3Cpolygon points='86,40 132,100 108,100' opacity='0.55'/%3E%3Cpolygon points='120,100 188,100 154,56'/%3E%3C/g%3E%3Cg fill='%23ffffff' opacity='0.30'%3E%3Cpath d='M226 100 L226 34 l8 -14 l8 14 l0 66z'/%3E%3C/g%3E%3Cpath d='M0 98 Q75 90 150 96 T300 92 L300 110 L0 110Z' fill='%23ffffff' opacity='0.16'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 120% at 12% 8%,  var(--art-a), transparent 62%),
    radial-gradient(ellipse 90% 110% at 88% 22%, var(--art-b), transparent 60%),
    linear-gradient(125deg, var(--art-a), var(--art-b) 55%, var(--art-c));
}

/* Spirituality */
.culture-card.accent-teal::before{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 110' preserveAspectRatio='xMidYMax slice'%3E%3Ccircle cx='232' cy='30' r='18' fill='%23ffffff' opacity='0.34'/%3E%3Cg stroke='%23ffffff' stroke-width='2.4' opacity='0.26' stroke-linecap='round'%3E%3Cpath d='M232 4 L232 -2M232 58 L232 64M206 30 L200 30M258 30 L264 30M214 12 L210 8M250 48 L254 52M250 12 L254 8M214 48 L210 52'/%3E%3C/g%3E%3Cg fill='%23ffffff' opacity='0.34'%3E%3Crect x='96' y='52' width='12' height='58' rx='4'/%3E%3Cellipse cx='102' cy='44' rx='60' ry='30'/%3E%3Cellipse cx='58' cy='58' rx='28' ry='16'/%3E%3Cellipse cx='146' cy='57' rx='30' ry='17'/%3E%3C/g%3E%3Cpath d='M0 100 Q75 92 150 98 T300 94 L300 110 L0 110Z' fill='%23ffffff' opacity='0.16'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 120% at 12% 8%,  var(--art-a), transparent 62%),
    radial-gradient(ellipse 90% 110% at 88% 22%, var(--art-b), transparent 60%),
    linear-gradient(125deg, var(--art-a), var(--art-b) 55%, var(--art-c));
}

/* Art and Music */
.culture-card.accent-magenta::before{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 110' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%23ffffff' opacity='0.32'%3E%3Cpath d='M92 46 h76 l-10 60 h-56z'/%3E%3Cellipse cx='130' cy='46' rx='38' ry='11'/%3E%3C/g%3E%3Cg stroke='%23ffffff' stroke-width='2.4' opacity='0.34'%3E%3Cpath d='M96 60 l68 12M164 60 l-68 12'/%3E%3C/g%3E%3Cg fill='%23ffffff' opacity='0.34'%3E%3Cellipse cx='214' cy='72' rx='11' ry='8' transform='rotate(-18 214 72)'/%3E%3Crect x='222' y='30' width='4' height='42' rx='2'/%3E%3Cellipse cx='254' cy='58' rx='9' ry='7' transform='rotate(-18 254 58)'/%3E%3Crect x='261' y='22' width='4' height='36' rx='2'/%3E%3Cpath d='M222 30 q22 -6 43 -8 l0 9 q-21 2 -43 8z'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 120% at 12% 8%,  var(--art-a), transparent 62%),
    radial-gradient(ellipse 90% 110% at 88% 22%, var(--art-b), transparent 60%),
    linear-gradient(125deg, var(--art-a), var(--art-b) 55%, var(--art-c));
}

/* Language */
.culture-card.accent-ocean::before{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 110' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%23ffffff' opacity='0.26'%3E%3Cpath d='M52 34 h116 a14 14 0 0 1 14 14 v30 a14 14 0 0 1 -14 14 h-84 l-22 18 v-18 h-10 a14 14 0 0 1 -14 -14 v-30 a14 14 0 0 1 14 -14z'/%3E%3C/g%3E%3Cg fill='%23ffffff' opacity='0.55' font-family='Georgia,serif' font-size='30' font-weight='700'%3E%3Ctext x='62' y='74'%3EA a%3C/text%3E%3C/g%3E%3Cg fill='%23ffffff' opacity='0.30' font-family='Georgia,serif' font-size='26'%3E%3Ctext x='206' y='60'%3EQ%3C/text%3E%3Ctext x='236' y='88'%3Eb%3C/text%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 120% at 12% 8%,  var(--art-a), transparent 62%),
    radial-gradient(ellipse 90% 110% at 88% 22%, var(--art-b), transparent 60%),
    linear-gradient(125deg, var(--art-a), var(--art-b) 55%, var(--art-c));
}

/* History */
.culture-card.accent-amber::before{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 110' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%23ffffff' opacity='0.30'%3E%3Crect x='60' y='60' width='180' height='50'/%3E%3Crect x='60' y='52' width='16' height='10'/%3E%3Crect x='92' y='52' width='16' height='10'/%3E%3Crect x='124' y='52' width='16' height='10'/%3E%3Crect x='156' y='52' width='16' height='10'/%3E%3Crect x='188' y='52' width='16' height='10'/%3E%3Crect x='220' y='52' width='16' height='10'/%3E%3C/g%3E%3Cg fill='%23ffffff' opacity='0.5'%3E%3Crect x='96' y='76' width='14' height='34' rx='7'/%3E%3Crect x='142' y='72' width='18' height='38' rx='9'/%3E%3Crect x='192' y='76' width='14' height='34' rx='7'/%3E%3C/g%3E%3Cpath d='M0 62 L46 34 L92 60 L138 28 L188 60 L236 32 L300 58 L300 110 L0 110Z' fill='%23ffffff' opacity='0.12'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 120% at 12% 8%,  var(--art-a), transparent 62%),
    radial-gradient(ellipse 90% 110% at 88% 22%, var(--art-b), transparent 60%),
    linear-gradient(125deg, var(--art-a), var(--art-b) 55%, var(--art-c));
}

/* Scene layers cover the panel */
.opp-item::before,.culture-card::before{
  background-size:cover,auto,auto,auto;
  background-position:center bottom,center,center,center;
  background-repeat:no-repeat;
}

/* The pillar row inherits section padding but not the width cap, so it is
   constrained explicitly to avoid overflowing the content column. */
@media(min-width:768px){
  .pillars-row{
    max-width:900px;
    margin-left:auto;margin-right:auto;
    padding-left:0;padding-right:0;
    width:calc(100% - 5rem);
  }
}

/* Install-app button on the landing hero. Hidden until the browser reports the
   app is installable, or on iOS where the share-sheet route is explained. */
.btn-install{
  display:none;align-items:center;justify-content:center;gap:.4rem;
  margin-top:.9rem;padding:.6rem 1.1rem;
  background:rgba(20,20,20,.06);
  border:1.5px solid var(--border-md);
  border-radius:99px;
  font-size:.82rem;font-weight:600;color:var(--text-mid);
  cursor:pointer;transition:all .2s;
}
.btn-install:hover{background:rgba(20,20,20,.10);border-color:var(--text-mid);color:var(--text)}