/* ============================================================================
 * IFW Demonstration Hub - house brand, dark-first.
 *
 * This is the Innova Forge Works brand, NOT a demo skin: Anton + Barlow, the
 * hot-orange forge palette, squared geometry with a single chamfered corner,
 * and drop-shadow (never box-shadow) so the shadow follows the cut.
 *
 * Self-contained: the hub shares no assets with the demos it links to.
 * ========================================================================== */

:root {
  /* Forge palette, taken from the live ifw-forge theme. */
  --c-base:        #1c1815;   /* ink, used as the dark ground here */
  --c-base-2:      #16120f;
  --c-surface:     #241f1a;
  --c-surface-2:   #2c2620;
  --c-line:        #3a332c;
  --c-ink:         #faf6ef;   /* bone */
  --c-ink-2:       #fff8f1;
  --c-muted:       #cdc0ad;
  --c-muted-2:     #9d9080;
  --c-forge:       #e2560f;
  --c-forge-hot:   #ff7a1a;
  --c-forge-deep:  #bb470c;
  --c-amber:       #f59e0b;

  --gutter: 24px;
  --maxw: 1120px;
  --chamfer-btn: 9px;
  --chamfer-card: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--c-base);
  color: var(--c-ink);
  font-family: 'Barlow', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Warm forge glow, layered gradients rather than an image asset. */
  background-image:
    radial-gradient(90% 60% at 82% -5%, rgba(226,86,15,.20), transparent 60%),
    radial-gradient(70% 50% at 5% 100%, rgba(245,158,11,.08), transparent 60%);
  background-attachment: fixed;
}

h1, h2, h3 {
  font-family: 'Anton', 'Barlow Semi Condensed', system-ui, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.02;
}

a { color: var(--c-forge-hot); text-decoration: none; }
a:hover { color: var(--c-ink); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow {
  display: inline-block;
  font-family: 'Barlow Semi Condensed', 'Barlow', sans-serif;
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-forge-hot);
  margin-bottom: .6rem;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--c-forge); color: var(--c-ink-2);
  padding: .7rem 1.1rem; font-weight: 600;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--c-forge-hot); outline-offset: 3px; }

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: 'Barlow', sans-serif; font-weight: 600; font-size: .95rem;
  padding: .8rem 1.5rem; cursor: pointer; border: 1px solid transparent;
  border-radius: 0;
  /* Single cut corner, the house geometry. */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer-btn)), calc(100% - var(--chamfer-btn)) 100%, 0 100%);
  transition: transform .15s ease, filter .2s ease, background .2s ease, color .2s ease;
}
.btn-primary {
  background: var(--c-forge); color: var(--c-ink-2);
  /* drop-shadow, not box-shadow, so the shadow follows the chamfer. */
  filter: drop-shadow(0 8px 14px rgba(187,71,12,.35));
}
.btn-primary:hover {
  background: var(--c-forge-hot); color: var(--c-base);
  transform: translateY(-2px);
  filter: drop-shadow(0 12px 22px rgba(255,122,26,.45));
}
.btn-disabled {
  background: transparent; color: var(--c-muted-2);
  border-color: var(--c-line); cursor: default;
}

/* ---- Header ----------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(28,24,21,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-line);
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 74px;
}
.brand { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: 'Anton', sans-serif; text-transform: uppercase;
  font-size: 1.1rem; letter-spacing: .06em; color: var(--c-ink);
}
.brand-accent { color: var(--c-forge); }
.brand-kind {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-muted-2);
}

.nav { display: flex; align-items: center; gap: 8px; }
.nav-link {
  font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; font-size: .78rem;
  color: var(--c-muted); padding: .55em .8em;
}
.nav-link:hover { color: var(--c-ink); }
.nav-cta {
  color: var(--c-ink-2); background: var(--c-forge);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer-btn)), calc(100% - var(--chamfer-btn)) 100%, 0 100%);
}
.nav-cta:hover { background: var(--c-forge-hot); color: var(--c-base); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--c-line);
  color: var(--c-ink); padding: 8px 11px; cursor: pointer; font-size: 1rem;
}

/* ---- Hero ------------------------------------------------------------- */
.hero { padding: clamp(56px, 10vw, 110px) 0 clamp(32px, 5vw, 56px); }
.hero-inner { max-width: 780px; }
.hero h1 { font-size: clamp(2.6rem, 8vw, 5rem); margin-bottom: 1.1rem; }
.lede { font-size: clamp(1.02rem, 2.2vw, 1.2rem); color: var(--c-muted); max-width: 62ch; }
.hero-note {
  margin-top: 1.4rem; font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-muted-2);
}

/* ---- Sections + grid -------------------------------------------------- */
.section { padding: clamp(36px, 6vw, 70px) 0 clamp(60px, 9vw, 110px); }
/* The header is sticky, so an anchor jump would otherwise land the heading
   underneath it. */
[id] { scroll-margin-top: 96px; }
.section-head { margin-bottom: 34px; }
.section-head h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); }

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  align-items: start;
}

/* ---- Cards ------------------------------------------------------------ */
.card {
  display: flex; flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer-card)), calc(100% - var(--chamfer-card)) 100%, 0 100%);
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.38));
  transition: transform .2s ease, filter .2s ease;
  overflow: hidden;
}
.card:hover { transform: translateY(-4px); filter: drop-shadow(0 18px 34px rgba(0,0,0,.5)); }
.card-forge { background: var(--c-base-2); }
.card-forge:hover { transform: none; }

/* Placeholder artwork: layered gradients, no image dependency. A card with no
   photograph keeps this and needs no markup change. */
.card-art { aspect-ratio: 16 / 9; border-bottom: 1px solid var(--c-line); }

/* The membership card carries a photograph. The image is the LAST background
   layer, so the scrim above it does the legibility work and the card copy sits
   over both. Bottom-weighted: the keys are lit from the upper right, so the
   strongest darkening belongs where the eyebrow, headline and body copy land.
   The gradient stack is kept underneath as the fallback if the file is ever
   pulled, the same arrangement the membership demo's own hero uses. */
.card-art[data-art="membership"] {
  /* FRAMING. The card is portrait and the photograph is 16:9, so `cover` scales
     it by height, leaves zero vertical overflow, and background-position-y then
     does nothing at all: the key ring stayed pinned at 38% down, directly
     behind the headline. Zooming to 130% of the card height restores vertical
     overflow so the Y axis becomes live, and 50%/80% then lands the ring at
     roughly 70% across and 25% down, clear of the copy band that starts at 36%.

     SCRIM. Two layers. The diagonal carries the directional weight the design
     asks for (dark at lower left under the copy, open at upper right over the
     keys); the vertical floor beneath it guarantees legibility across the FULL
     width, because the copy block spans the whole card and a purely diagonal
     scrim would leave the lower-right corner too light. Measured, not guessed:
     see the contrast figures recorded against each text band. */
  background:
    linear-gradient(205deg,
      rgba(10,8,6,0) 0%,
      rgba(10,8,6,.06) 30%,
      rgba(10,8,6,.34) 62%,
      rgba(10,8,6,.52) 100%),
    linear-gradient(180deg,
      rgba(10,8,6,.16) 0,
      rgba(10,8,6,.26) calc(var(--photo-copy-top, 230px) - 90px),
      rgba(10,8,6,.74) var(--photo-copy-top, 230px),
      rgba(10,8,6,.82) calc(var(--photo-copy-top, 230px) + 120px),
      rgba(10,8,6,.92) 100%),
    url("../assets/hero.jpg") 50% 80% / auto 130% no-repeat,
    radial-gradient(120% 100% at 78% 16%, rgba(255,122,26,.42), transparent 58%),
    radial-gradient(90% 80% at 14% 92%, rgba(245,158,11,.20), transparent 62%),
    linear-gradient(155deg, #2b231c 0%, #16120f 74%);
}

/* With a photograph behind it the copy moves ON TO the art rather than sitting
   under it: the art block becomes the card's own backdrop and the body overlays
   its lower half. Only the membership card does this, so every other card keeps
   the stacked art-then-body layout unchanged. */
.card-photo { position: relative; }
.card-photo .card-art {
  position: absolute; inset: 0; aspect-ratio: auto; border-bottom: 0;
}
/* One source of truth for where the copy begins. The scrim ramp above is
   expressed in the SAME value, so the darkening always lands exactly where the
   text starts. They drifted apart at 400px when this was a bare clamp: the copy
   rose to 22% of the card while the ramp stayed at 33%, and the eyebrow fell to
   3.5:1. Tying them together fixes every width at once rather than per
   breakpoint. The floor of 200px also keeps the copy clear of the key ring,
   which sits at about 25% down whatever the card size. */
.card-photo { --photo-copy-top: clamp(200px, 30vw, 240px); }
.card-photo .card-body { position: relative; padding-top: var(--photo-copy-top); }
.card-photo .card-body p { color: #E8DFD4; }
/* A lighter tint of the same accent hue, for this card only. The brand orange
   measured 4.1 against the lit brass even under a heavier scrim; lifting the
   tint reaches 5.5 while leaving more of the photograph visible than crushing
   the image would. Every other eyebrow on the hub keeps --c-accent. */
.card-photo .eyebrow { color: #FFA55C; }
/* The type sits on a photograph, so it carries its own shadow rather than
   relying on the scrim alone. Cheap insurance where a line crosses the bright
   part of an image, which is where mobile crops tend to land. */
.card-photo .card-body h3,
.card-photo .card-body p,
.card-photo .eyebrow { text-shadow: 0 1px 3px rgba(9,12,18,.62); }
.card-photo .card-meta li { border-color: rgba(255,255,255,.28); color: #D9CFC2; }
/* Cadentium's card art: a photograph of the product running on a phone.
   FRAMING. The phone occupies the right of a 3:2 frame and the left is empty
   backdrop. The card is portrait, so `cover` crops the sides and would cut the
   phone in half. Zooming to 128% of the card HEIGHT and pulling the horizontal
   origin to 82% keeps the whole handset in frame and lets the empty backdrop
   fall off the left edge, where the copy is going anyway.

   SCRIM. This photograph is the opposite problem to the membership one: it is
   near-white, and the card's copy is white. Three layers. The vertical ramp is
   the workhorse, opaque by the time it reaches the copy band. The diagonal
   adds weight at the lower left so the first words of each line are never the
   least legible. A flat wash over everything takes the bare backdrop far
   enough from white that the eyebrow reads against it. Measured, not guessed. */
.card-art[data-art="cadentium"] {
  background:
    linear-gradient(180deg,
      rgba(16,20,30,.10) 0,
      rgba(16,20,30,.30) calc(var(--photo-copy-top, 230px) - 110px),
      rgba(16,20,30,.86) var(--photo-copy-top, 230px),
      rgba(16,20,30,.93) calc(var(--photo-copy-top, 230px) + 110px),
      rgba(16,20,30,.96) 100%),
    linear-gradient(74deg,
      rgba(16,20,30,.62) 0%,
      rgba(16,20,30,.28) 34%,
      rgba(16,20,30,0) 62%),
    linear-gradient(rgba(16,20,30,.24), rgba(16,20,30,.24)),
    var(--card-img, none) 82% 46% / auto 128% no-repeat,
    linear-gradient(155deg, #1f2333 0%, #14120f 78%);
}

.card-art[data-art="forge"] {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 12px, transparent 12px 24px),
    linear-gradient(155deg, #221d19 0%, #14110e 76%);
}

/* ProNetworker OS. No photograph for this demo, so it takes the same CSS-only
   treatment the forge card uses rather than the photo scrim the other two live
   cards need. The art is the product's own mark, inlined as a data URI so it
   costs no extra request and no asset file: three nodes joined by two edges,
   one node in the brand red, on the product's ink. The faint red glow behind it
   picks up the accent without competing with the copy below. */
.card-art[data-art="pronetworker"] {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9 10.5 22.5 9.5M9.6 12l5.4 9M21.8 11.3l-5.3 9.2' stroke='%236e6c7a' stroke-width='1.6'/%3E%3Ccircle cx='8.5' cy='10.5' r='3.2' fill='%23d0202e'/%3E%3Ccircle cx='23.3' cy='9.4' r='2.6' fill='%23ffffff'/%3E%3Ccircle cx='16' cy='22.5' r='3.6' fill='%23ffffff'/%3E%3C/svg%3E")
      center / auto 52% no-repeat,
    radial-gradient(ellipse 60% 70% at 50% 46%, rgba(208,32,46,.20) 0%, rgba(208,32,46,0) 70%),
    linear-gradient(155deg, #17171b 0%, #0e0e10 78%);
}

/* No photograph for Craft + Capital either. The mark is the outlined crown
   from the demo, over Master Your Mint's green. Her colour is confined to
   this panel; the card around it stays in the house style. */
.card-art[data-art="craftcapital"] {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M9 34 L9 18 L18 26 L24 14 L30 26 L39 18 L39 34 Z' fill='none' stroke='%23ffed9f' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / auto 46% no-repeat,
    radial-gradient(ellipse 62% 72% at 50% 44%, rgba(255,237,159,.18) 0%, rgba(255,237,159,0) 70%),
    linear-gradient(155deg, #22b573 0%, #10492f 82%);
}

.card-body { padding: 26px 24px 28px; display: flex; flex-direction: column; gap: .55rem; }
.card-body h3 { font-size: 1.55rem; }
.card-body p { color: var(--c-muted); font-size: .98rem; }

.card-meta {
  list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: .5rem 0 .2rem;
}
.card-meta li {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-muted-2);
  border: 1px solid var(--c-line);
  padding: .3rem .55rem;
}

.card-actions { margin-top: .9rem; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Status note beside a launch button. Borrows the card-meta pill shape so it
   reads as part of the same family, and wraps under the button on a narrow
   card rather than pushing the row wide. */
.card-chip {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: .82rem; font-weight: 600; letter-spacing: .02em;
  color: var(--c-muted-2); border: 1px solid var(--c-line);
  border-radius: 999px; padding: 4px 11px; white-space: nowrap;
}

.card-variants {
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--c-line);
  display: flex; flex-direction: column; gap: .5rem;
}
.variants-label {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-muted-2);
}
.variant-links { display: flex; flex-wrap: wrap; gap: 8px; }
.variant {
  font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600;
  font-size: .76rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-muted);
  border: 1px solid var(--c-line);
  padding: .45rem .8rem;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.variant:hover { color: var(--c-ink-2); border-color: var(--c-forge); background: rgba(226,86,15,.14); }

/* ---- Footer ----------------------------------------------------------- */
.footer { border-top: 1px solid var(--c-line); background: var(--c-base-2); padding: 40px 0; }
.footer-inner { display: flex; flex-direction: column; gap: .4rem; }
.footer-brand { font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.footer-tag { color: var(--c-muted); font-size: .95rem; }
.footer-fine { color: var(--c-muted-2); font-size: .82rem; margin-top: .4rem; }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 860px) {
  .grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .topbar-inner { position: relative; min-height: 66px; }
  .nav-toggle { display: inline-block; }
  .nav {
    display: none; position: absolute; top: 66px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--c-base); border: 1px solid var(--c-line);
    padding: 8px var(--gutter) 14px;
  }
  .nav.open { display: flex; }
  .nav-link { padding: .85rem .2rem; font-size: .9rem; border-bottom: 1px solid var(--c-line); }
  .nav-cta { margin-top: 10px; text-align: center; border-bottom: 0; }
  .brand-kind { display: none; }
}
/* Narrow screens: the photo stops being a backdrop and becomes a banner again.
   A 16:9 photograph behind a card that is 350 wide and 735 tall crops to a
   twenty-percent-wide slice, which reads as an abstract blur rather than a set
   of keys, and no amount of scrim tuning fixes a bad crop. Above this width the
   card is wide enough for the overlay to work; below it the original stacked
   layout shows the whole frame and puts the copy back on solid card surface,
   where legibility needs no gradient at all. */
@media (max-width: 560px) {
  .card-photo .card-art {
    position: static; inset: auto; aspect-ratio: 16 / 9;
    border-bottom: 1px solid var(--c-line);
    /* Whole frame, no zoom, no scrim: nothing sits on top of it here. */
    background:
      var(--card-img, url("../assets/hero.jpg")) center / cover no-repeat,
      linear-gradient(155deg, #2b231c 0%, #16120f 74%);
  }
  /* A 3:2 photograph cropped to a 16:9 band loses the sides, and Cadentium's
     subject is the phone on the right, so centring it clips the handset. The
     keys in the membership photograph are central and keep the default. */
  .card-photo .card-art[data-art="cadentium"] { background-position: 72% center; }
  .card-photo .card-body { padding-top: 26px; }
  .card-photo .card-body p { color: var(--c-muted); }
  .card-photo .eyebrow { color: var(--c-accent); }
  .card-photo .card-meta li { border-color: var(--c-line); color: var(--c-muted-2); }
}

@media (max-width: 420px) {
  .card-body { padding: 22px 18px 24px; }
  .variant-links { flex-direction: column; }
  .variant { text-align: center; }
}

/* A colour-and-lift hover is decoration; motion-sensitive users opt out. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .card, .variant { transition: none; }
  .btn-primary:hover, .card:hover { transform: none; }
}