/* ============================================================
   NEXT — NEXTCALL  |  Design System v5
   Palette: charte "Next Call" officielle — Greige bg · Brand Red · Neutral dark
   ============================================================ */

:root {
  /* ── Backgrounds ── */
  --bg:       #F6F3EE;
  --bg-2:     #EDE9E2;
  --bg-3:     #E4DFD6;
  --white:    #FFFFFF;
  --dark:     #0E0E10;
  --dark-2:   #16171B;

  /* ── Brand Red (primary accent — sparing use: CTA, key word, live dot) ── */
  --v:        #E2392D;
  --v-dark:   #B82C22;
  --v-mid:    #E2392D;
  --v-soft:   #C6362B;
  --v-pale:   #FBEAE8;
  --v-light:  #F2C6C1;

  /* ── Neutral dark (secondary — was Brown/Amber) ── */
  --a:        #17171A;
  --a-mid:    #5C5C61;
  --a-bright: #5C5C61;
  --a-light:  #DEDACF;
  --a-pale:   #F2F0EA;

  /* ── Text ── */
  --t1: #1A1614;
  --t2: #44403B;
  --t3: #78716C;

  /* ── UI ── */
  --border:  #D6D0C8;
  --border2: #C4BDB3;

  /* ── Gradients ── */
  --gv:    #E2392D;
  --ga:    #17171A;
  --ghero: linear-gradient(155deg,#0E0E10 0%,#17171A 45%,#2B2C31 100%);
  --gmix:  linear-gradient(135deg,#0E0E10 0%,#17171A 50%,#2B2C31 100%);

  /* ── Shadows ── */
  --s1: 0 1px 4px rgba(26,22,20,.07);
  --s2: 0 4px 20px rgba(26,22,20,.10);
  --s3: 0 12px 40px rgba(26,22,20,.13);
  --s4: 0 28px 70px rgba(26,22,20,.16);
  --sv: 0 8px 28px rgba(226,57,45,.22);
  --sa: 0 8px 28px rgba(23,23,26,.20);

  /* ── Radius ── */
  --r1: 8px; --r2: 14px; --r3: 22px; --r4: 32px; --rf: 9999px;

  --font: 'Inter','Helvetica Neue',Arial,sans-serif;
  --font-display: 'Anton','Inter','Helvetica Neue',Arial,sans-serif;
  --ease: all .26s cubic-bezier(.4,0,.2,1);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-font-smoothing:antialiased}
body{font-family:var(--font);background:var(--bg);color:var(--t2);line-height:1.65}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:var(--font);cursor:pointer;border:none;background:none}

/* ── Reveal ── */
.js-ok .reveal       {opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.js-ok .reveal-l     {opacity:0;transform:translateX(-32px);transition:opacity .6s ease,transform .6s ease}
.js-ok .reveal-r     {opacity:0;transform:translateX(32px);transition:opacity .6s ease,transform .6s ease}
.js-ok .reveal-s     {opacity:0;transform:scale(.93);transition:opacity .55s ease,transform .55s ease}
.reveal.on,.reveal-l.on,.reveal-r.on{opacity:1;transform:none}
.reveal-s.on        {opacity:1;transform:scale(1)}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
.d4{transition-delay:.32s}.d5{transition-delay:.40s}.d6{transition-delay:.48s}

/* ══════════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  height:66px;display:flex;align-items:center;justify-content:space-between;
  padding:0 5%;
  background:rgba(246,243,238,.93);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(214,208,200,.5);
  transition:var(--ease);
}
.nav.scrolled{background:rgba(246,243,238,.98);box-shadow:0 2px 16px rgba(26,22,20,.07)}
.nav-logo{
  font-size:1.35rem;font-weight:900;letter-spacing:-.04em;
  color:var(--t1);display:flex;align-items:center;gap:6px;
}
.nav-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--v);
  box-shadow:0 0 8px rgba(226,57,45,.7);
  animation:dot-pulse 2.2s ease-in-out infinite;
}
@keyframes dot-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.5);box-shadow:0 0 14px rgba(226,57,45,.9)}}

.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{
  font-size:.875rem;font-weight:500;color:var(--t2);
  position:relative;transition:color .2s;
}
.nav-links a::after{
  content:'';position:absolute;bottom:-3px;left:0;
  width:0;height:2px;background:var(--v);border-radius:2px;
  transition:width .22s ease;
}
.nav-links a:hover{color:var(--v)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a.active{color:var(--v)}

/* ── Nav dropdowns (Products / Use Cases) ── */
.nav-drop{position:relative}
.nav-drop-btn{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--font);font-size:.875rem;font-weight:500;color:var(--t2);
  background:none;border:none;cursor:pointer;padding:0;position:relative;
  transition:color .2s;
}
.nav-drop-caret{width:13px;height:13px;transition:transform .2s ease}
.nav-drop.open .nav-drop-caret{transform:rotate(180deg)}
.nav-drop-btn::after{
  content:'';position:absolute;bottom:-3px;left:0;
  width:0;height:2px;background:var(--v);border-radius:2px;
  transition:width .22s ease;
}
.nav-drop-btn:hover{color:var(--v)}
.nav-drop-btn:hover::after,.nav-drop.has-active .nav-drop-btn::after{width:100%}
.nav-drop.has-active .nav-drop-btn{color:var(--v)}

.nav-drop-menu{
  display:none;flex-direction:column;gap:2px;
  position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%);
  min-width:230px;background:var(--white);border:1px solid var(--border);
  border-radius:var(--r2);box-shadow:var(--s3);padding:.5rem;
}
.nav-drop.open .nav-drop-menu{display:flex}
.nav-drop-menu a{
  display:flex;flex-direction:column;gap:2px;
  padding:.6rem .75rem;border-radius:var(--r1);
  font-size:.85rem;font-weight:600;color:var(--t1);transition:background .15s;
}
.nav-drop-menu a:hover{background:var(--bg)}
.nav-drop-menu a.active{color:var(--v)}
.nav-drop-menu a span{font-size:.72rem;font-weight:400;color:var(--t3)}

.nav-btns{display:flex;align-items:center;gap:.65rem}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font);font-weight:600;font-size:.875rem;
  padding:10px 20px;border-radius:var(--r1);
  transition:var(--ease);cursor:pointer;border:none;
}
.btn-v{background:var(--gv);color:#fff;box-shadow:var(--sv)}
.btn-v:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(226,57,45,.32)}
.btn-a{background:var(--ga);color:#fff;box-shadow:var(--sa)}
.btn-a:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(23,23,26,.28)}
.btn-ghost{background:transparent;color:var(--t2);border:1.5px solid var(--border2)}
.btn-ghost:hover{border-color:var(--v);color:var(--v);background:var(--v-pale)}
.btn-ghost-inv{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.22)}
.btn-ghost-inv:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5)}
.btn-lg{padding:13px 28px;font-size:.95rem;border-radius:var(--r2)}
.btn-sm{padding:7px 14px;font-size:.8rem}
.btn svg{width:16px;height:16px;flex-shrink:0}

.burger{display:none;flex-direction:column;gap:5px;padding:8px;cursor:pointer}
.burger span{width:22px;height:2px;background:var(--t1);border-radius:2px;transition:var(--ease)}

/* ── Layout ── */
section{padding:96px 5%}
.wrap{max-width:1180px;margin:0 auto;width:100%}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}

.lbl{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--v-mid);margin-bottom:.9rem;
}
.lbl::before{content:'';width:18px;height:2px;background:var(--v-mid);border-radius:2px}
.lbl.amber{color:var(--a-mid)}.lbl.amber::before{background:var(--a-mid)}

.h2{
  font-size:clamp(1.85rem,3.6vw,2.9rem);font-weight:800;
  color:var(--t1);line-height:1.11;letter-spacing:-.03em;margin-bottom:1rem;
}
.h2 b{color:var(--v)}
.h2 i{font-style:normal;color:var(--a-mid)}
.desc{font-size:1.02rem;color:var(--t3);line-height:1.75;max-width:580px}

/* Cards */
.card{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r2);padding:1.75rem;
  box-shadow:var(--s1);transition:var(--ease);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--s2);border-color:var(--border2)}

/* ══════════════════════════════════════════════════════════
   HERO — video background, light greige overlay
══════════════════════════════════════════════════════════ */
.hero{
  min-height:100vh;
  display:flex;align-items:center;
  padding:110px 5% 100px;
  position:relative;overflow:hidden;
  background:var(--bg);
}
/* Video layer */
.hero-vid-wrap{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 30%;
  filter:saturate(.7) brightness(.9);
}
/* Warm greige overlay — video shows through, text stays dark and legible */
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(
    110deg,
    rgba(246,243,238,.90) 0%,
    rgba(246,243,238,.82) 45%,
    rgba(246,243,238,.62) 100%
  );
}

.hero-inner{
  max-width:1180px;margin:0 auto;width:100%;
  display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;
  position:relative;z-index:2;
}

.hero-badge{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(226,57,45,.08);border:1px solid rgba(226,57,45,.22);
  color:var(--v-mid);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 13px;border-radius:var(--rf);margin-bottom:1.5rem;
}
.hero-badge-dot{width:5px;height:5px;border-radius:50%;background:var(--v-mid);animation:dot-pulse 2s infinite}

.hero h1{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(2.6rem,5.5vw,4.4rem);font-weight:400;
  line-height:.98;letter-spacing:0;
  color:var(--t1);margin-bottom:1.3rem;
}
.hero h1 em{
  font-style:normal;
  background:var(--gv);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-p{font-size:1.08rem;color:var(--t2);line-height:1.75;max-width:560px;margin-bottom:2.25rem}
.hero-actions{display:flex;gap:.85rem;flex-wrap:wrap;margin-bottom:2.5rem}

/* Ghost outline button for light bg */
.btn-outline-light{
  background:rgba(255,255,255,.65);color:var(--t1);
  border:1.5px solid var(--border2);backdrop-filter:blur(4px);
}
.btn-outline-light:hover{background:var(--white);border-color:var(--v);color:var(--v);transform:translateY(-2px)}

.hero-trust{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.hero-trust-lbl{font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);white-space:nowrap}
.hero-pills{display:flex;gap:.45rem;flex-wrap:wrap}
.hero-pill{
  font-size:.71rem;font-weight:500;color:var(--t2);
  background:rgba(255,255,255,.7);border:1px solid var(--border);
  padding:3px 11px;border-radius:var(--rf);backdrop-filter:blur(3px);
}

/* Scroll hint */
.hero-scroll{
  position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:5px;
  font-size:.65rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--t3);animation:scroll-bob 2.2s ease-in-out infinite;
}
.hero-scroll svg{width:16px;height:16px}
@keyframes scroll-bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}

/* ══════════════════════════════════════════════════════════
   MARQUEE (no hover effects — purely decorative)
══════════════════════════════════════════════════════════ */
.marquee-sec{
  padding:28px 0;background:var(--white);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  overflow:hidden;
}
.marquee-lbl{
  text-align:center;font-size:.68rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--t3);margin-bottom:1.1rem;
}
.marquee-track{
  display:flex;gap:2.5rem;
  animation:marquee 24s linear infinite;
  width:max-content;
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Static items — no hover, no pointer */
.mi{
  display:flex;align-items:center;gap:.55rem;
  font-size:.82rem;font-weight:600;color:var(--t3);
  white-space:nowrap;user-select:none;cursor:default;
}
.mi svg{width:15px;height:15px;color:var(--t3);opacity:.55}

/* ══════════════════════════════════════════════════════════
   PROBLEM SECTION
══════════════════════════════════════════════════════════ */
.problem-sec{background:var(--bg)}
.problem-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:5rem;align-items:center}
.prob-cards{display:flex;flex-direction:column;gap:.85rem}
.prob-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r2);padding:1.25rem 1.4rem;
  display:flex;gap:.95rem;align-items:flex-start;
  border-left:3px solid var(--border);
  transition:border-color .25s, transform .25s, box-shadow .25s;
  cursor:default;
}
.prob-card:hover{border-left-color:var(--a-mid);transform:translateX(4px);box-shadow:var(--s2)}
.prob-icon{
  width:38px;height:38px;flex-shrink:0;
  background:var(--a-pale);border:1px solid var(--a-light);
  border-radius:var(--r1);display:flex;align-items:center;justify-content:center;
}
.prob-icon svg{width:18px;height:18px;color:var(--a-mid)}
.prob-card h4{font-size:.9rem;font-weight:700;color:var(--t1);margin-bottom:.25rem}
.prob-card p{font-size:.82rem;color:var(--t3);line-height:1.6}

/* ══════════════════════════════════════════════════════════
   SOLUTION PILLARS
══════════════════════════════════════════════════════════ */
.pillars-sec{background:var(--bg-2)}
.pillars-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:3rem}
.pillar{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r2);padding:1.75rem;
  border-top:3px solid var(--v-light);
  transition:var(--ease);cursor:default;
}
.pillar:hover{transform:translateY(-4px);box-shadow:var(--s2);border-top-color:var(--v-mid)}
.pillar-icon{
  width:44px;height:44px;
  border-radius:12px;display:flex;align-items:center;justify-content:center;
  margin-bottom:1.1rem;
}
.pi-v{background:var(--v-light)}.pi-v svg{color:var(--v)}
.pi-a{background:var(--a-pale)}.pi-a svg{color:var(--a-mid)}
.pillar-icon svg{width:22px;height:22px}
.pillar h3{font-size:1rem;font-weight:700;color:var(--t1);margin-bottom:.5rem}
.pillar p{font-size:.82rem;color:var(--t3);line-height:1.65}

/* ══════════════════════════════════════════════════════════
   DEMO (split workspace — light bg)
══════════════════════════════════════════════════════════ */
.demo-sec{background:var(--bg-2);position:relative;overflow:hidden}
.demo-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.3fr;gap:4rem;align-items:start}
.demo-lbl{color:var(--a-mid)}.demo-lbl::before{background:var(--a-mid)}
.demo-h2{color:var(--t1)}.demo-h2 b{color:var(--v)}.demo-h2 i{color:var(--a-mid);font-style:normal}
.demo-desc{color:var(--t3)}

/* Sidebar steps */
.demo-steps{display:flex;flex-direction:column;gap:.65rem;margin-top:1.75rem}
.ds{
  display:flex;gap:.85rem;align-items:flex-start;
  padding:.85rem 1.1rem;border-radius:var(--r2);
  background:var(--white);border:1px solid var(--border);
  transition:all .35s ease;cursor:default;
}
.ds.on{background:var(--v-pale);border-color:var(--v-soft)}
.ds-num{
  width:26px;height:26px;flex-shrink:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.68rem;font-weight:800;
  border:1.5px solid var(--border2);color:var(--t3);
  transition:var(--ease);
}
.ds.on .ds-num{background:var(--v);border-color:var(--v);color:#fff}
.ds h5{font-size:.82rem;font-weight:700;color:var(--t3);margin-bottom:.15rem;transition:color .3s}
.ds p {font-size:.74rem;color:var(--t3);line-height:1.5;opacity:.7;transition:color .3s}
.ds.on h5{color:var(--t1)}.ds.on p{color:var(--t2);opacity:1}

.demo-cta{margin-top:1.75rem}

/* Workspace panel — light */
.workspace{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r3);overflow:hidden;
  box-shadow:var(--s3);
}
.ws-header{
  background:var(--bg-2);padding:.7rem 1rem;
  display:flex;align-items:center;gap:.5rem;
  border-bottom:1px solid var(--border);
}
.ws-dot{width:9px;height:9px;border-radius:50%}
.ws-title{margin-left:.35rem;font-size:.68rem;color:var(--t3);font-weight:500;letter-spacing:.03em}
.ws-body{display:grid;grid-template-columns:1fr 1.1fr;min-height:400px}
.ws-left{
  border-right:1px solid var(--border);
  padding:1rem;display:flex;flex-direction:column;gap:.45rem;
  background:var(--bg);
}
.ws-left-title{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-bottom:.3rem;padding:.2rem 0}
.ws-flow-step{
  display:flex;align-items:center;gap:.6rem;
  padding:.6rem .8rem;border-radius:var(--r1);
  background:var(--white);border:1px solid var(--border);
  transition:all .4s ease;
}
.ws-flow-step.active{background:var(--v-pale);border-color:var(--v-soft)}
.ws-flow-step.done{background:#F0FDF4;border-color:#BBF7D0}
.wfs-icon{font-size:.85rem;flex-shrink:0}
.wfs-name{font-size:.7rem;font-weight:600;color:var(--t3);transition:color .3s}
.ws-flow-step.active .wfs-name{color:var(--v)}
.ws-flow-step.done  .wfs-name{color:#15803D}
.wfs-badge{
  margin-left:auto;font-size:.55rem;font-weight:700;
  padding:2px 6px;border-radius:var(--rf);flex-shrink:0;
}
.wb-wait{background:var(--bg-3);color:var(--t3)}
.wb-run {background:var(--v-light);color:var(--v)}
.wb-done{background:#DCFCE7;color:#15803D}

/* Chat transcript — light */
.ws-right{padding:1rem;display:flex;flex-direction:column;gap:.5rem;overflow:hidden;background:var(--white)}
.ws-right-title{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-bottom:.3rem;padding:.2rem 0}
.chat-scroll{display:flex;flex-direction:column;gap:.5rem;max-height:320px;overflow-y:auto;padding-bottom:.25rem}
.chat-scroll::-webkit-scrollbar{width:3px}
.chat-scroll::-webkit-scrollbar-track{background:transparent}
.chat-scroll::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

.bubble{
  max-width:90%;padding:.55rem .8rem;border-radius:12px;
  font-size:.72rem;line-height:1.55;
  animation:bub-in .3s ease forwards;opacity:0;
}
@keyframes bub-in{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
.bub-user{
  align-self:flex-end;
  background:var(--v);color:#fff;
  border-radius:12px 12px 3px 12px;
}
.bub-ai{
  align-self:flex-start;
  background:var(--bg);color:var(--t1);
  border-radius:12px 12px 12px 3px;
  border:1px solid var(--border);
}
.bub-sys{
  align-self:center;font-size:.62rem;font-weight:600;
  background:var(--v-pale);color:var(--v);
  border:1px solid var(--v-light);border-radius:var(--rf);padding:3px 10px;
}
.bub-pill{
  align-self:flex-start;display:flex;align-items:center;gap:4px;
  font-size:.62rem;font-weight:600;
  background:var(--a-pale);color:var(--a-mid);
  border:1px solid var(--a-light);border-radius:var(--rf);padding:3px 10px;
}
.bub-typing{
  align-self:flex-start;
  background:var(--bg);border:1px solid var(--border);
  border-radius:12px 12px 12px 3px;
  padding:.55rem .8rem;display:flex;gap:4px;align-items:center;
}
.tdot{
  width:6px;height:6px;border-radius:50%;background:var(--border2);
  animation:td .9s ease-in-out infinite;
}
.tdot:nth-child(2){animation-delay:.15s}.tdot:nth-child(3){animation-delay:.3s}
@keyframes td{0%,80%,100%{transform:scale(.7);opacity:.4}40%{transform:scale(1.1);opacity:1}}

.ws-replay{
  margin-top:auto;padding:.45rem .85rem;
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--rf);font-size:.68rem;font-weight:600;color:var(--t3);
  cursor:pointer;display:flex;align-items:center;gap:5px;align-self:flex-end;
  opacity:0;transition:opacity .3s,background .2s,color .2s;
}
.ws-replay.show{opacity:1}
.ws-replay:hover{background:var(--v-pale);color:var(--v);border-color:var(--v-soft)}
.ws-replay svg{width:11px;height:11px}

/* ══════════════════════════════════════════════════════════
   STATS BAND
══════════════════════════════════════════════════════════ */
.stats-band{
  padding:56px 5%;background:var(--white);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.stats-row{display:flex;justify-content:center;gap:5rem;flex-wrap:wrap;max-width:860px;margin:0 auto}
.stat{text-align:center}
.stat-n{
  font-size:2.8rem;font-weight:900;letter-spacing:-.05em;line-height:1;display:block;
  background:var(--gv);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.stat-n.amber{background:var(--ga);-webkit-background-clip:text;background-clip:text}
.stat-lbl{font-size:.8rem;color:var(--t3);margin-top:.35rem;font-weight:500}

/* ══════════════════════════════════════════════════════════
   NEXTCALL FEATURE SHOWCASE
══════════════════════════════════════════════════════════ */
.feature-sec{background:var(--bg)}
.feature-row{
  display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;
  padding:4.5rem 0 5.5rem;border-bottom:1px solid var(--border);
}
.feature-row:last-child{border-bottom:none;padding-bottom:1.5rem}
.feature-row.flip{direction:rtl}.feature-row.flip>*{direction:ltr}

.fi-list{display:flex;flex-direction:column;gap:.65rem;margin-top:1.5rem}
.fi{
  display:flex;gap:.85rem;padding:.85rem 1rem;border-radius:var(--r1);
  border:1px solid transparent;transition:var(--ease);cursor:default;
}
.fi:hover{background:var(--white);border-color:var(--border);box-shadow:var(--s1)}
.fi-ic{
  width:30px;height:30px;flex-shrink:0;border-radius:8px;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.fi-ic.v{background:var(--v-pale)}.fi-ic.v svg{color:var(--v);width:15px;height:15px}
.fi-ic.a{background:var(--a-pale)}.fi-ic.a svg{color:var(--a-mid);width:15px;height:15px}
.fi h5{font-size:.875rem;font-weight:700;color:var(--t1);margin-bottom:.15rem}
.fi p{font-size:.8rem;color:var(--t3);line-height:1.6}

/* Dashboard mockup */
.dash{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;box-shadow:var(--s3)}
.dash-top{
  background:var(--white);padding:.65rem 1rem;
  display:flex;align-items:center;gap:.4rem;border-bottom:1px solid var(--border);
}
.dd{width:9px;height:9px;border-radius:50%}
.dash-body{padding:1.1rem;display:flex;flex-direction:column;gap:.85rem}
.kpi-row{display:flex;gap:.65rem}
.kpi-c{
  flex:1;background:var(--white);border:1px solid var(--border);border-radius:var(--r1);
  padding:.8rem .9rem;transition:var(--ease);cursor:default;
}
.kpi-c:hover{border-color:var(--v);box-shadow:var(--s1)}
.kpi-v{
  font-size:1.3rem;font-weight:900;letter-spacing:-.03em;display:block;
  background:var(--gv);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.kpi-v.a{background:var(--ga);-webkit-background-clip:text;background-clip:text}
.kpi-l{font-size:.64rem;color:var(--t3);margin-top:2px;font-weight:500}
.chart-bar-row{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r1);
  height:80px;padding:.65rem;display:flex;align-items:flex-end;gap:3px;
}
.bar{flex:1;border-radius:3px 3px 0 0;transform-origin:bottom;animation:bar-up .7s ease forwards}
.bar.v{background:var(--v-light)}.bar.a{background:var(--a-light)}
@keyframes bar-up{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.list-row{display:flex;flex-direction:column;gap:.4rem}
.list-item{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r1);
  padding:.5rem .85rem;display:flex;align-items:center;gap:.65rem;font-size:.72rem;
  transition:var(--ease);cursor:default;
}
.list-item:hover{border-color:var(--v);transform:translateX(2px)}
.tag{font-size:.58rem;font-weight:700;padding:2px 7px;border-radius:var(--rf);letter-spacing:.04em;text-transform:uppercase;flex-shrink:0}
.tg{background:#DCFCE7;color:#15803D}.tv{background:var(--v-light);color:var(--v)}.ta{background:var(--a-pale);color:var(--a-mid)}

/* ══════════════════════════════════════════════════════════
   TESTIMONIALS — light
══════════════════════════════════════════════════════════ */
.testi-sec{background:var(--bg-2)}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.75rem}
.testi{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r3);padding:1.75rem;transition:var(--ease);cursor:default;
}
.testi:hover{border-color:var(--v-soft);transform:translateY(-4px);box-shadow:var(--s2)}
.tq{font-size:2.2rem;line-height:.8;color:var(--a-mid);opacity:.4;font-family:Georgia,serif;margin-bottom:.4rem}
.tt{font-size:.875rem;color:var(--t2);line-height:1.75;font-style:italic;margin-bottom:1.25rem}
.ta-name{font-size:.78rem;font-weight:700;color:var(--a-mid)}

/* ══════════════════════════════════════════════════════════
   CTA
══════════════════════════════════════════════════════════ */
.cta-sec{background:var(--bg);padding:96px 5%}
.cta-card{
  background:var(--ghero);border-radius:var(--r4);padding:5rem;text-align:center;
  position:relative;overflow:hidden;box-shadow:var(--s4);
}
.cta-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(226,57,45,.14) 0%,transparent 55%);
  pointer-events:none;
}
.cta-card h2{font-size:clamp(1.7rem,3.8vw,2.8rem);font-weight:900;color:#fff;letter-spacing:-.03em;margin-bottom:.9rem;position:relative;z-index:1}
.cta-card p{font-size:1rem;color:rgba(255,255,255,.58);max-width:500px;margin:0 auto 2.25rem;line-height:1.75;position:relative;z-index:1}
.cta-btns{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}

/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
footer{background:var(--dark-2);border-top:1px solid rgba(255,255,255,.06);padding:76px 5% 40px}
.ft-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:4rem;max-width:1180px;margin:0 auto 3.5rem}
.ft-brand .nav-logo{color:#fff;font-size:1.2rem;margin-bottom:.9rem;display:inline-flex}
.ft-brand p{font-size:.85rem;color:rgba(255,255,255,.38);line-height:1.75;max-width:270px}
.ft-col h5{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.28);margin-bottom:1.1rem}
.ft-col ul{display:flex;flex-direction:column;gap:.65rem}
.ft-col a{font-size:.85rem;color:rgba(255,255,255,.42);transition:color .2s}
.ft-col a:hover{color:#fff}
.ft-bottom{
  max-width:1180px;margin:0 auto;padding-top:1.75rem;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex;justify-content:space-between;align-items:center;
  font-size:.78rem;color:rgba(255,255,255,.22);
}
.ft-bottom a{color:rgba(255,255,255,.22);transition:color .2s}
.ft-bottom a:hover{color:#fff}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   PHOTO STACK — photo + floating card overlay
══════════════════════════════════════════════════════════ */
.photo-stack{
  position:relative;
  border-radius:var(--r3);overflow:visible;
}
.photo-stack-img{
  width:100%;height:400px;object-fit:cover;
  border-radius:var(--r3);
  display:block;
  box-shadow:var(--s3);
  transition:transform .6s ease;
}
.photo-stack:hover .photo-stack-img{transform:scale(1.02)}
.photo-stack-overlay{
  position:absolute;inset:0;border-radius:var(--r3);
  background:linear-gradient(
    180deg,
    rgba(246,243,238,.05) 0%,
    rgba(246,243,238,.15) 100%
  );
  pointer-events:none;
}

/* Floating UI card on top of photo */
.photo-float-card{
  position:absolute;
  bottom:-24px;right:-24px;
  width:72%;
  background:var(--white);
  border-radius:var(--r2);
  box-shadow:0 20px 60px rgba(26,22,20,.18);
  border:1px solid var(--border);
  overflow:hidden;
  transition:transform .4s ease, box-shadow .4s ease;
}
.photo-stack:hover .photo-float-card{
  transform:translateY(-4px);
  box-shadow:0 28px 70px rgba(26,22,20,.22);
}

/* Floating stat chips on photo */
.photo-chip{
  position:absolute;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.95);
  border-radius:var(--r2);
  padding:.75rem 1rem;
  display:flex;align-items:center;gap:.65rem;
  box-shadow:0 8px 24px rgba(26,22,20,.1);
  animation:chip-float 4s ease-in-out infinite;
}
.photo-chip-tl{top:1.25rem;left:1.25rem;animation-delay:0s}
.photo-chip-br{bottom:1.5rem;left:1.25rem;animation-delay:1.2s}
@keyframes chip-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.photo-chip-icon{font-size:1.1rem;flex-shrink:0}
.photo-chip-val{font-size:1rem;font-weight:900;background:var(--ga);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.photo-chip-lbl{font-size:.68rem;color:var(--t3);margin-top:2px;font-weight:500}

@media(max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:3rem}
  .voice-anim{display:none}
  .problem-grid{grid-template-columns:1fr;gap:3rem}
  .demo-inner{grid-template-columns:1fr;gap:3rem}
  .ws-body{grid-template-columns:1fr}
  .ws-left{border-right:none;border-bottom:1px solid rgba(255,255,255,.07)}
  .feature-row,.feature-row.flip{grid-template-columns:1fr;direction:ltr;gap:3rem}
  .testi-grid{grid-template-columns:1fr 1fr}
  .ft-grid{grid-template-columns:1fr 1fr;gap:2.5rem}
  .pillars-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .nav-links{display:none}
  .burger{display:flex}
  /* Keep only the primary CTA in the top bar so buttons don't cram/wrap */
  .nav-btns{gap:.5rem}
  .nav-btns .btn-ghost{display:none}
  /* Dropdowns become plain stacked accordions inside the mobile nav */
  .nav-drop-btn{width:100%;justify-content:space-between}
  .nav-drop-menu{
    position:static;transform:none;display:none;
    min-width:0;border:none;box-shadow:none;padding:0 0 0 1rem;margin-top:.35rem;
  }
  .nav-drop.open .nav-drop-menu{display:flex}
  section{padding:68px 5%}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .testi-grid{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr}
  .cta-card{padding:2.5rem 1.5rem}
  .stats-row{gap:2rem}
  .ft-bottom{flex-direction:column;gap:.65rem;text-align:center}
  .pillars-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .hero h1{font-size:2.1rem}
  .hero-actions,.cta-btns{flex-direction:column;align-items:flex-start}
  .hero-actions .btn,.cta-btns .btn{width:100%;justify-content:center}
  .pillars-grid{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════
   VOICE ANIMATION — horizontal waveform (no circles)
══════════════════════════════════════════════════════════ */
.voice-anim{
  display:flex;align-items:center;justify-content:center;
  position:relative;height:480px;
}

/* Live badge */
.va-live{
  position:absolute;top:1rem;left:50%;transform:translateX(-50%);
  background:rgba(255,255,255,.9);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.95);
  border-radius:var(--rf);padding:5px 14px;
  display:flex;align-items:center;gap:7px;
  font-size:.68rem;font-weight:700;color:var(--t2);
  box-shadow:0 4px 16px rgba(26,22,20,.1);
  white-space:nowrap;z-index:10;
}
.va-live-dot{
  width:7px;height:7px;border-radius:50%;background:#22C55E;
  animation:va-live-pulse 1.5s ease-in-out infinite;
}
@keyframes va-live-pulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}
  70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}

/* Waveform container */
.va-waveform-wrap{
  display:flex;flex-direction:column;align-items:center;
  gap:1.5rem;width:100%;
}

/* Label above waveform */
.va-waveform-label{
  display:flex;align-items:center;gap:.5rem;
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--t3);
}
.va-waveform-label::before,
.va-waveform-label::after{
  content:'';flex:1;height:1px;background:var(--border);
}

/* The waveform itself */
.va-waveform{
  display:flex;align-items:center;gap:3px;
  height:120px;padding:0 1rem;
  width:100%;
}
.va-w-bar{
  flex:1;border-radius:2px;
  background:linear-gradient(to top, var(--a) 0%, var(--a-bright) 50%, var(--a-mid) 100%);
  transform-origin:center;
  animation:wf-bounce 1.4s ease-in-out infinite;
  min-width:4px;max-width:9px;
}
/* Heights create realistic voice waveform shape */
.va-w-bar:nth-child(1) {height:12%;animation-delay:.00s}
.va-w-bar:nth-child(2) {height:18%;animation-delay:.04s}
.va-w-bar:nth-child(3) {height:28%;animation-delay:.08s}
.va-w-bar:nth-child(4) {height:22%;animation-delay:.12s}
.va-w-bar:nth-child(5) {height:38%;animation-delay:.16s}
.va-w-bar:nth-child(6) {height:55%;animation-delay:.20s}
.va-w-bar:nth-child(7) {height:42%;animation-delay:.24s}
.va-w-bar:nth-child(8) {height:68%;animation-delay:.28s}
.va-w-bar:nth-child(9) {height:80%;animation-delay:.32s}
.va-w-bar:nth-child(10){height:90%;animation-delay:.36s}
.va-w-bar:nth-child(11){height:100%;animation-delay:.40s}
.va-w-bar:nth-child(12){height:88%;animation-delay:.36s}
.va-w-bar:nth-child(13){height:72%;animation-delay:.32s}
.va-w-bar:nth-child(14){height:95%;animation-delay:.28s}
.va-w-bar:nth-child(15){height:100%;animation-delay:.24s}
.va-w-bar:nth-child(16){height:82%;animation-delay:.20s}
.va-w-bar:nth-child(17){height:68%;animation-delay:.16s}
.va-w-bar:nth-child(18){height:88%;animation-delay:.12s}
.va-w-bar:nth-child(19){height:75%;animation-delay:.08s}
.va-w-bar:nth-child(20){height:60%;animation-delay:.04s}
.va-w-bar:nth-child(21){height:45%;animation-delay:.00s}
.va-w-bar:nth-child(22){height:32%;animation-delay:.04s}
.va-w-bar:nth-child(23){height:22%;animation-delay:.08s}
.va-w-bar:nth-child(24){height:14%;animation-delay:.12s}
.va-w-bar:nth-child(25){height:10%;animation-delay:.16s}
.va-w-bar:nth-child(26){height:18%;animation-delay:.20s}
.va-w-bar:nth-child(27){height:30%;animation-delay:.24s}
.va-w-bar:nth-child(28){height:50%;animation-delay:.28s}
.va-w-bar:nth-child(29){height:70%;animation-delay:.32s}
.va-w-bar:nth-child(30){height:85%;animation-delay:.36s}
.va-w-bar:nth-child(31){height:95%;animation-delay:.40s}
.va-w-bar:nth-child(32){height:100%;animation-delay:.36s}
.va-w-bar:nth-child(33){height:88%;animation-delay:.32s}
.va-w-bar:nth-child(34){height:72%;animation-delay:.28s}
.va-w-bar:nth-child(35){height:55%;animation-delay:.24s}
.va-w-bar:nth-child(36){height:38%;animation-delay:.20s}
.va-w-bar:nth-child(37){height:25%;animation-delay:.16s}
.va-w-bar:nth-child(38){height:18%;animation-delay:.12s}
.va-w-bar:nth-child(39){height:12%;animation-delay:.08s}
.va-w-bar:nth-child(40){height:8% ;animation-delay:.04s}

@keyframes wf-bounce{
  0%,100%{transform:scaleY(.25);opacity:.4}
  50%{transform:scaleY(1);opacity:1}
}

/* Center line behind waveform */
.va-centerline{
  position:absolute;left:0;right:0;
  height:1px;background:var(--border);top:50%;
  transform:translateY(-50%);pointer-events:none;
}

/* Floating info cards — repositioned for horizontal layout */
.va-card{
  position:absolute;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.98);
  border-radius:var(--r2);padding:.7rem 1rem;
  box-shadow:0 8px 28px rgba(26,22,20,.11);
  display:flex;align-items:center;gap:.6rem;
  min-width:160px;opacity:0;
  animation:va-card-in .5s ease forwards, va-card-float 4s ease-in-out infinite;
}
.va-card-1{top:3.5rem;left:0;   animation-delay:.7s, .7s}
.va-card-2{top:3.5rem;right:0;  animation-delay:1.3s, 1.3s}
.va-card-3{bottom:2.5rem;left:0; animation-delay:1.9s, 1.9s}
.va-card-4{bottom:2.5rem;right:0;animation-delay:2.5s, 2.5s}

@keyframes va-card-in{
  from{opacity:0;transform:translateY(10px) scale(.93)}
  to{opacity:1;transform:none}
}
@keyframes va-card-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
/* Override float for right cards */
.va-card-2,.va-card-4{animation:va-card-in .5s ease forwards, va-card-float-r 4.5s ease-in-out infinite}
.va-card-2{animation-delay:1.3s,1.3s}
.va-card-4{animation-delay:2.5s,2.5s}
@keyframes va-card-float-r{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(5px)}
}

.va-card-icon{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:.9rem;
}
.vc-v{background:var(--v-pale)}
.vc-g{background:#F0FDF4}
.vc-a{background:var(--a-pale)}
.va-card-label{font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);display:block;margin-bottom:1px}
.va-card-val{font-size:.78rem;font-weight:700;color:var(--t1)}
.va-card-val.v{color:var(--v-mid)}
.va-card-val.g{color:#15803D}
.va-card-val.a{color:var(--a-mid)}

/* ══════════════════════════════════════════════════════════
   ARTICLE PAGE (single blog post)
══════════════════════════════════════════════════════════ */
.article-hero{padding:128px 5% 0;background:var(--bg)}
.article-hero .wrap{max-width:820px}
.article-back{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.8rem;font-weight:600;color:var(--t3);
  margin-bottom:1.5rem;transition:var(--ease);
}
.article-back:hover{color:var(--v);gap:9px}
.article-back svg{width:14px;height:14px}
.article-cat{
  display:inline-block;font-size:.64rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 11px;border-radius:var(--rf);
  background:var(--v-pale);color:var(--v);margin-bottom:1.1rem;
}
.article-cat.amber{background:var(--a-pale);color:var(--a-mid)}
.article-cat.green{background:#F0FDF4;color:#15803D}
.article-hero h1{
  font-size:clamp(2rem,4.2vw,3rem);font-weight:900;letter-spacing:-.035em;
  color:var(--t1);line-height:1.1;margin-bottom:1.25rem;
}
.article-lead{font-size:1.15rem;color:var(--t2);line-height:1.7;max-width:680px;margin-bottom:1.75rem}
.article-meta{
  display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;
  font-size:.8rem;color:var(--t3);padding-bottom:2rem;border-bottom:1px solid var(--border);
}
.article-meta .am-author{display:flex;align-items:center;gap:.55rem;font-weight:600;color:var(--t2)}
.article-meta .am-avatar{
  width:30px;height:30px;border-radius:50%;background:var(--gv);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:.72rem;font-weight:800;
}
.article-meta .am-sep{width:3px;height:3px;border-radius:50%;background:var(--border2)}
.article-fig{margin:2.5rem 0 0}
.article-fig img{width:100%;height:clamp(260px,42vw,440px);object-fit:cover;border-radius:var(--r3);box-shadow:var(--s3)}

.article-body{padding:3rem 5% 5rem;background:var(--bg)}
.article-body .wrap{max-width:720px}
.prose>p{font-size:1.05rem;color:var(--t2);line-height:1.85;margin-bottom:1.5rem}
.prose>p:first-of-type::first-letter{font-size:1rem}
.prose h2{font-size:1.55rem;font-weight:800;color:var(--t1);letter-spacing:-.02em;line-height:1.2;margin:2.75rem 0 1.1rem}
.prose h2 .num{color:var(--a-mid);margin-right:.4rem}
.prose h3{font-size:1.12rem;font-weight:700;color:var(--t1);margin:1.75rem 0 .75rem}
.prose strong{color:var(--t1);font-weight:700}
.prose ul{margin:0 0 1.5rem;padding-left:0;display:flex;flex-direction:column;gap:.7rem}
.prose ul li{position:relative;padding-left:1.6rem;font-size:1.02rem;color:var(--t2);line-height:1.7}
.prose ul li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--v-soft)}
.prose blockquote{
  border-left:3px solid var(--v);padding:.35rem 0 .35rem 1.6rem;
  font-size:1.3rem;font-weight:600;font-style:italic;color:var(--t1);
  line-height:1.5;margin:2.25rem 0;letter-spacing:-.01em;
}
.callout{
  background:var(--white);border:1px solid var(--border);border-left:4px solid var(--a-mid);
  border-radius:var(--r2);padding:1.5rem 1.75rem;margin:2.25rem 0;box-shadow:var(--s1);
}
.callout-k{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--a-mid);margin-bottom:.6rem}
.callout-stats{display:flex;gap:2.5rem;flex-wrap:wrap;margin-top:.4rem}
.callout-stat .cs-n{font-size:2rem;font-weight:900;letter-spacing:-.04em;line-height:1;background:var(--gv);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.callout-stat .cs-n.a{background:var(--ga);-webkit-background-clip:text;background-clip:text}
.callout-stat .cs-l{font-size:.74rem;color:var(--t3);margin-top:.3rem}
.article-source{font-size:.78rem;color:var(--t3);font-style:italic;margin:1.5rem 0 0}
.article-end{
  margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:.9rem;
}
.article-end .am-avatar{width:44px;height:44px;font-size:.95rem}
.article-end h4{font-size:.9rem;font-weight:700;color:var(--t1)}
.article-end p{font-size:.8rem;color:var(--t3);margin-top:1px}

/* Blog listing — placeholder (coming soon) cards */
.art-card.placeholder{opacity:.92}
.art-card.placeholder .art-thumb{position:relative}
.art-card.placeholder img{filter:grayscale(1) contrast(.92);opacity:.5}
.art-card.placeholder .art-thumb::after{
  content:'Coming soon';position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--t2);background:rgba(237,233,226,.35);
}
.art-card.placeholder .art-link{color:var(--t3);cursor:default;pointer-events:none}
.art-card.placeholder .art-link:hover{gap:4px;color:var(--t3)}

/* Resources listing — placeholder (coming soon) card */
.res-card.placeholder{opacity:.92}
.res-card.placeholder .res-thumb{position:relative}
.res-card.placeholder .res-card-img{filter:grayscale(1) contrast(.92);opacity:.5}
.res-card.placeholder .res-thumb::after{
  content:'Coming soon';position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--t2);background:rgba(237,233,226,.35);
}
.res-card.placeholder .res-link{color:var(--t3);cursor:default;pointer-events:none}
.res-card.placeholder .res-link:hover{gap:4px;color:var(--t3)}