/* ============================================================
   Neeva Radiant – About Page Widgets  |  Master CSS v1.0
   ============================================================ */

/* ── Design tokens ───────────────────────────────────────── */
:root {
  --nra-navy:       #061748;
  --nra-yellow:     #fed019;
  --nra-yellow-dim: #eec200;
  --nra-secondary:  #725c00;
  --nra-on-sec-cnt: #6f5900;
  --nra-surface:    #faf8ff;
  --nra-surf-low:   #f2f3ff;
  --nra-surf-cnt:   #eaedff;
  --nra-surf-high:  #e1e7ff;
  --nra-white:      #ffffff;
  --nra-on-surf-v:  #45464f;
  --nra-outline:    #767680;
  --nra-outline-v:  #c5c5d3;
  --nra-primary-fd: #b6c4fe;
  --nra-glass:      rgba(0,17,66,0.8);
  --nra-font-h:     'Montserrat', sans-serif;
  --nra-font-b:     'Inter', sans-serif;
  --nra-radius:     16px;
}

/* ── Reset / box-sizing ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
.nra-section { width: 100%; }
.nra-container { margin: 0 auto; }

/* ── Typography helpers ──────────────────────────────────── */
.nra-disp    { font-family:var(--nra-font-h); font-size:48px; line-height:56px; letter-spacing:-0.02em; font-weight:700; }
.nra-hl      { font-family:var(--nra-font-h); font-size:32px; line-height:40px; letter-spacing:-0.01em; font-weight:600; }
.nra-title   { font-family:var(--nra-font-h); font-size:20px; line-height:28px; font-weight:600; }
.nra-body-lg { font-family:var(--nra-font-b); font-size:18px; line-height:28px; }
.nra-body-md { font-family:var(--nra-font-b); font-size:16px; line-height:24px; }
.nra-label   { font-family:var(--nra-font-b); font-size:12px; line-height:16px; letter-spacing:.05em; font-weight:600; text-transform:uppercase; }
.material-symbols-outlined { font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; vertical-align:middle; }

/* ── Buttons ─────────────────────────────────────────────── */
.nra-btn-yellow  { background:var(--nra-yellow); color:var(--nra-on-sec-cnt); padding:16px 32px; font-family:var(--nra-font-h); font-size:12px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; border:none; cursor:pointer; display:inline-block; text-decoration:none; transition:opacity .25s; }
.nra-btn-yellow:hover { opacity:.85; }
.nra-btn-outline { background:transparent; border:2px solid #fff; color:#fff; padding:16px 32px; font-family:var(--nra-font-h); font-size:12px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; cursor:pointer; display:inline-block; text-decoration:none; transition:background .25s,color .25s; }
.nra-btn-outline:hover { background:#fff; color:var(--nra-navy); }

/* ── Two-col layout ──────────────────────────────────────── */
.nra-two-col {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
}
.nra-two-col > * {
    flex: 1 1 0;
    min-width: 0;
}
/* When explicit width is set via Elementor controls, honour it */
.nra-two-col > [style*="width"] {
    flex: 0 0 auto;
}
@media(max-width:768px) {
    .nra-two-col {
        flex-direction: column;
    }
    .nra-two-col > * {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100%;
    }
}

/* ── Hover lift ──────────────────────────────────────────── */
.nra-lift { transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s; }
.nra-lift:hover { transform:translateY(-8px); box-shadow:0 20px 25px -5px rgba(0,0,0,.1); }

/* ── Glass card ──────────────────────────────────────────── */
.nra-glass { backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }

/* ============================================================
   1 · HEADER
   ============================================================ */
.nra-header { position:fixed; top:0; left:0; right:0; z-index:9999; background:var(--nra-glass); backdrop-filter:blur(20px); border-bottom:1px solid rgba(198,198,208,.3); transition:all .3s; }
.nra-header-inner { display:flex; justify-content:space-between; align-items:center; margin:0 auto; }
.nra-header-logo  { display:flex; align-items:center; gap:16px; }
.nra-header-logo img { height:40px; width:auto; object-fit:contain; }
.nra-header-logo span { font-family:var(--nra-font-h); color:#fff; font-size:28px; font-weight:700; }
.nra-header-nav   { display:flex; gap:32px; align-items:center; }
.nra-header-nav a { font-family:var(--nra-font-h); font-size:14px; font-weight:600; color:#fff; text-decoration:none; text-transform:uppercase; letter-spacing:.1em; transition:color .2s; }
.nra-header-nav a:hover,.nra-header-nav a.active { color:var(--nra-yellow-dim); }
.nra-header-nav a.active { border-bottom:2px solid var(--nra-yellow-dim); padding-bottom:2px; }
.nra-hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:8px; }
.nra-hamburger span { display:block; width:24px; height:2px; background:#fff; transition:all .3s; }
.nra-mobile-nav { display:flex; flex-direction:column; overflow:hidden; max-height:0; transition:max-height .4s ease; background:var(--nra-navy); padding:0 24px; }
.nra-mobile-nav.open { max-height:400px; }
.nra-mobile-nav a { display:block; padding:12px 0; color:#fff; font-family:var(--nra-font-h); font-size:16px; font-weight:600; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.1); }
@media(max-width:768px) { .nra-header-nav { display:none; } .nra-hamburger { display:flex; } }

/* ============================================================
   2 · HERO
   ============================================================ */
.nra-hero-wrap    { position:relative; overflow:hidden; display:flex; align-items:center; }
.nra-hero-bg      { position:absolute; inset:0; }
.nra-hero-bg img  { width:100%; height:100%; object-fit:cover; }
.nra-hero-overlay { position:absolute; inset:0; }
.nra-hero-content { position:relative; z-index:2; }
.nra-hero-btns    { display:flex; flex-wrap:wrap; gap:16px; }
@media(max-width:640px) { .nra-hero-btns { flex-direction:column; } .nra-disp { font-size:30px; line-height:38px; } }

/* ============================================================
   3 · OUR STORY
   ============================================================ */
.nra-story-mini-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.nra-story-card { padding:24px; border-radius:12px; }
.nra-story-card .mat-icon { font-size:36px; margin-bottom:16px; }
@media(max-width:640px) { .nra-story-mini-grid { grid-template-columns:1fr; } }

/* ============================================================
   4 · FOUNDER
   ============================================================ */
.nra-founder-float { position:absolute; bottom:-32px; right:-32px; padding:32px; border-radius:12px; border:1px solid rgba(255,255,255,.2); }
@media(max-width:768px) { .nra-founder-float { display:none; } }

/* ============================================================
   5 · TIMELINE
   ============================================================ */
.nra-timeline-line { position:absolute; left:50%; transform:translateX(-50%); top:0; bottom:0; width:1px; background:var(--nra-outline-v); }
.nra-timeline-dot  { width:32px; height:32px; border-radius:50%; background:var(--nra-navy); border:4px solid var(--nra-yellow-dim); flex-shrink:0; z-index:2; }
.nra-timeline-dot.featured { width:48px; height:48px; background:var(--nra-yellow-dim); border-color:var(--nra-navy); display:flex; align-items:center; justify-content:center; }
.nra-timeline-row { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nra-timeline-side { flex:1; }
@media(max-width:768px) { .nra-timeline-line { display:none; } .nra-timeline-row { flex-direction:column; } .nra-timeline-year { display:none; } }

/* ============================================================
   6 · VISION IMPACT
   ============================================================ */
.nra-vision-wrap { position:relative; text-align:center; overflow:hidden; }
.nra-vision-bg   { position:absolute; inset:0; }
.nra-vision-bg img { width:100%; height:100%; object-fit:cover; }

/* ============================================================
   7 · ESG
   ============================================================ */
.nra-esg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.nra-esg-card { padding:40px; border-radius:16px; border:1px solid rgba(198,198,208,.5); background:#fff; transition:transform .3s,box-shadow .3s; }
.nra-esg-card:hover { transform:translateY(-8px); box-shadow:0 20px 25px -5px rgba(0,0,0,.1); }
.nra-esg-icon { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:24px; transition:background .3s; }
.nra-esg-card:hover .nra-esg-icon { background:var(--nra-yellow) !important; }
@media(max-width:768px) { .nra-esg-grid { grid-template-columns:1fr; } }
@media(max-width:1024px) and (min-width:769px) { .nra-esg-grid { grid-template-columns:1fr 1fr; } }

/* ============================================================
   8 · BENTO (Engineered for Success)
   ============================================================ */
.nra-bento-grid { display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:repeat(2,1fr); gap:24px; min-height:600px; }
.nra-bento-a { grid-column:span 8; }
.nra-bento-b { grid-column:span 4; }
.nra-bento-c { grid-column:span 4; }
.nra-bento-d { grid-column:span 8; }
.nra-bento-card { border-radius:16px; padding:32px; display:flex; flex-direction:column; justify-content:space-between; transition:opacity .3s; }
.nra-bento-icon { font-size:48px; display:block; }
.nra-bento-icon img { width:48px; height:48px; object-fit:contain; }
/* SVG code icon */
.nra-bento-icon svg { width:48px; height:48px; }
@media(max-width:768px) { .nra-bento-grid { grid-template-columns:1fr; min-height:auto; } .nra-bento-a,.nra-bento-b,.nra-bento-c,.nra-bento-d { grid-column:span 1; } }

/* ============================================================
   9 · LEADERSHIP TEAM
   ============================================================ */
.nra-team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.nra-team-card .img-wrap { overflow:hidden; border-radius:12px; }
.nra-team-card .img-wrap img { width:100%; object-fit:cover; display:block; transition:all .5s; filter:grayscale(1); }
.nra-team-card:hover .img-wrap img { filter:grayscale(0); }
@media(max-width:1024px) { .nra-team-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px)  { .nra-team-grid { grid-template-columns:1fr; } }

/* ============================================================
   10 · ROADMAP
   ============================================================ */
.nra-roadmap-grid { display:flex; gap:24px; }
.nra-roadmap-card { flex:1; padding:32px; border-radius:16px; border-top:4px solid; }
@media(max-width:768px) { .nra-roadmap-grid { flex-direction:column; } }

/* ============================================================
   11 · PARTNERS + DOWNLOADS
   ============================================================ */
.nra-partners-grid { display:grid; grid-template-columns:1fr 1fr; gap:96px; align-items:start; }
.nra-logos-grid    { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; align-items:center; }
.nra-logo-slot     { height:48px; border-radius:4px; }
.nra-dl-item       { display:flex; align-items:center; justify-content:space-between; padding:16px; border-radius:12px; text-decoration:none; transition:background .2s; }
.nra-dl-item:hover { background:rgba(255,255,255,.2); }
.nra-dl-item .arrow { transition:transform .2s; }
.nra-dl-item:hover .arrow { transform:translateX(4px); }
@media(max-width:1024px) { .nra-partners-grid { grid-template-columns:1fr; gap:48px; } }

/* ============================================================
   12 · FAQ
   ============================================================ */
.nra-faq-item { border-radius:12px; overflow:hidden; }
.nra-faq-summary { display:flex; justify-content:space-between; align-items:center; padding:24px; cursor:pointer; list-style:none; gap:16px; }
.nra-faq-summary::-webkit-details-marker { display:none; }
.nra-faq-icon { transition:transform .3s; flex-shrink:0; }
details[open] .nra-faq-icon { transform:rotate(180deg); }
.nra-faq-body { padding:0 24px 24px; }

/* ============================================================
   13 · FINAL CTA
   ============================================================ */
.nra-cta-wrap { border-radius:32px; overflow:hidden; position:relative; text-align:center; }
.nra-cta-inner { position:relative; z-index:1; }
.nra-cta-deco { position:absolute; top:0; right:0; width:33%; height:100%; background:linear-gradient(to left,rgba(254,208,25,.1),transparent); pointer-events:none; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
.nra-fade      { animation:nraFade .8s ease both; }
.nra-slide-up  { animation:nraSlideUp .7s ease both; }
.nra-slide-left { animation:nraSlideLeft .7s ease both; }
.nra-slide-right{ animation:nraSlideRight .7s ease both; }
.nra-zoom      { animation:nraZoom .6s ease both; }
.nra-d1 { animation-delay:.1s; }
.nra-d2 { animation-delay:.2s; }
.nra-d3 { animation-delay:.3s; }
.nra-d4 { animation-delay:.4s; }
@keyframes nraFade       { from{opacity:0}                         to{opacity:1} }
@keyframes nraSlideUp    { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:none} }
@keyframes nraSlideLeft  { from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:none} }
@keyframes nraSlideRight { from{opacity:0;transform:translateX(40px)}  to{opacity:1;transform:none} }
@keyframes nraZoom       { from{opacity:0;transform:scale(.9)}       to{opacity:1;transform:none} }

/* ── RESPONSIVE UTILITIES ──────────────────────────────────── */
@media(max-width:768px) {
  .nra-disp  { font-size:30px !important; line-height:38px !important; }
  .nra-hl    { font-size:24px !important; line-height:32px !important; }
  .nra-title { font-size:18px !important; }
  .nra-hide-mobile { display:none !important; }
}