/*
Theme Name: Pattern Theme
Author: WordPress Developer
Description: Full source styling for Pattern Retail Planning
Version: 1.0
*/

:root {
    --bg:        #0A0706;
    --bg-alt:    #100C08;
    --surface:   #1B140D;
    --surface-2: #221A11;
    --surface-3: #2A2017;
    --ink:       #F7F2E8;
    --ink-2:     #D9CFBE;
    --ink-3:     #9C8E78;
    --ink-4:     #5C5142;
    --border:    #2A2017;
    --border-2:  #3A2D1F;
    --accent:        #E8923E;
    --accent-bright: #F5A14B;
    --accent-deep:   #C77A28;
    --accent-soft:   rgba(232,146,62,0.16);
    --accent-soft-2: rgba(232,146,62,0.34);
    --success:   #6CC08A;
    --warn:      #F0B854;
    --warn-soft: rgba(240,184,84,0.16);
    --danger:    #E26A60;
    --danger-soft: rgba(226,106,96,0.16);
    --info:      #6FA6E0;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; overflow-x: hidden; }
  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
  a { color: inherit; text-decoration: none; }
  .num { font-variant-numeric: tabular-nums; }
  .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 11px; }
  .eyebrow::before { content: ''; width: 26px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); }
  .eyebrow .ix { color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .ac { color: var(--accent-bright); font-weight: 600; }
  h1, h2, h3 { letter-spacing: -0.025em; margin: 0; }
  h2 b { color: var(--accent-bright); font-weight: 600; }
  .chip { font-size:12px; font-weight:600; color:var(--ink-2); padding:8px 14px; border:1px solid var(--border-2); border-radius:99px; background:var(--surface); }
  .chip b { color:var(--accent-bright); }
  .btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 8px; font-size: 14px; font-weight: 600; font-family: var(--font); cursor: pointer; border: 1px solid var(--border-2); background: var(--surface); color: var(--ink); transition: all 120ms; }
  .btn:hover { border-color: var(--ink-3); }
  .btn-primary { background: linear-gradient(180deg, var(--accent-bright), var(--accent)); border-color: var(--accent); color: #fff; box-shadow: 0 4px 16px rgba(199,122,40,0.25); }
  .btn-primary:hover { background: linear-gradient(180deg, #F0A055, var(--accent-bright)); box-shadow: 0 6px 24px rgba(199,122,40,0.4); }
  .play { width: 15px; height: 15px; }

  /* ===== Scroll reveal — .reveal used on the homepage, .fx (lighter/faster) on module & content pages; site.js's initReveal() drives both generically ===== */
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
  .reveal.in { opacity: 1; transform: none; }
  .stagger > * { transition-delay: 0ms; }
  .stagger.in > *:nth-child(1){transition-delay:40ms}.stagger.in > *:nth-child(2){transition-delay:110ms}
  .stagger.in > *:nth-child(3){transition-delay:180ms}.stagger.in > *:nth-child(4){transition-delay:250ms}
  .stagger.in > *:nth-child(5){transition-delay:320ms}.stagger.in > *:nth-child(6){transition-delay:390ms}
  @media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none} }
  .fx { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
  .fx.in { opacity:1; transform:none; }

  /* premium card primitive: gradient surface + top highlight + glow on hover */
  .card-lift { position: relative; background: linear-gradient(180deg, var(--surface), #150F0A); border: 1px solid var(--border); border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 12px 30px rgba(0,0,0,0.35); transition: transform .25s var(--ease,cubic-bezier(.2,.7,.2,1)), border-color .25s, box-shadow .25s; }
  .card-lift:hover { transform: translateY(-4px); border-color: var(--accent-soft-2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 22px 50px rgba(0,0,0,0.5), 0 0 40px rgba(232,146,62,0.08); }

  /* ===== NAV ===== */
  .nav { position: absolute; top: 0; left: 0; right: 0; z-index: 50; }
  .nav-inner { display: flex; align-items: center; height: 76px; }
  .logo { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 19px; }
  .logo img { height: 42px; width: auto; display: block; }
  .nav-links { display: flex; gap: 28px; margin: 0 0 0 44px; list-style: none; padding: 0; }
  .nav-links li { list-style: none; }
  .nav-links a { font-size: 14px; font-weight: 500; color: var(--ink-2); opacity: 0.85; }
  .nav-links a:hover { color: var(--ink); opacity: 1; }
  .nav-cta { margin-left: auto; display: flex; gap: 14px; align-items: center; }

  /* ===== HERO ===== */
  .hero { position: relative; overflow: hidden; min-height: 94vh; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(ellipse 72% 64% at 50% 42%, rgba(232,146,62,0.10) 0%, rgba(232,146,62,0.04) 34%, rgba(232,146,62,0) 70%), radial-gradient(ellipse 120% 90% at 50% 8%, rgba(20,15,10,0.6), transparent 60%), var(--bg); }
  .hero-stage { position: relative; width: 100%; max-width: 1200px; padding: 90px 24px 0; }
  .hero-laptop { display: block; width: 100%; height: auto; filter: drop-shadow(0 60px 90px rgba(0,0,0,0.65)); }
  .hero-headline { position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%); width: 100%; text-align: center; pointer-events: none;
    font-weight: 300; font-size: clamp(30px, 4.7vw, 58px); line-height: 1.1; letter-spacing: -0.03em; color: #fff; text-shadow: 0 4px 60px rgba(0,0,0,0.55), 0 2px 14px rgba(0,0,0,0.5); }
  .hero-headline .line { display: block; }
  .hero-headline .cfg { font-weight: 800; color: var(--accent-bright); }
  .hero-scrim { position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%); width: 86%; height: 46%; background: radial-gradient(ellipse, rgba(8,6,5,0.55), transparent 70%); filter: blur(8px); pointer-events: none; }
  .hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(180deg, transparent, var(--bg)); pointer-events: none; }
  .scroll-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); color: var(--ink-3); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0.8; }
  .scroll-hint .arrow { width: 18px; height: 18px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg); animation: bob 1.8s ease-in-out infinite; }
  @keyframes bob { 0%,100%{ transform: rotate(45deg) translate(0,0);} 50%{ transform: rotate(45deg) translate(3px,3px);} }

  /* ===== Trusted ===== */
  .trusted { padding: 30px 0 40px; border-top: 1px solid var(--border); background: linear-gradient(180deg, var(--bg), var(--bg-alt)); }
  .trusted-label { text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 22px; }
  .logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 38px; align-items: center; max-width: 920px; margin: 0 auto; }

  /* ===== Section scaffolding ===== */
  .section { padding: 84px 0; position: relative; }
  .section-alt { background: var(--bg-alt); }
  .section.glow::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 60% 50% at 85% 12%, rgba(232,146,62,0.07), transparent 70%); }
  .sec-head { max-width: 760px; margin-bottom: 46px; position: relative; }
  .sec-head h2 { font-size: 44px; line-height: 1.06; font-weight: 300; letter-spacing: -0.035em; margin-top: 16px; }
  .sec-head p { font-size: 17px; color: var(--ink-2); margin-top: 16px; }

  /* ===== Stats (premium band) ===== */
  .stats { padding: 70px 0; position: relative; }
  .stats-band { position: relative; border-radius: 18px; padding: 1px;
    background: linear-gradient(120deg, rgba(232,146,62,0.5), rgba(232,146,62,0.06) 40%, var(--border) 70%); }
  .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 17px; overflow: hidden;
    background: linear-gradient(180deg, #1A130C, #120D08); position: relative; }
  .stats-grid::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 120% at 50% 0%, rgba(232,146,62,0.10), transparent 60%); pointer-events: none; }
  .stat { padding: 38px 34px; border-right: 1px solid var(--border); position: relative; }
  .stat:last-child { border-right: none; }
  .stat .big { font-size: 62px; font-weight: 200; letter-spacing: -0.04em; line-height: 0.95; background: linear-gradient(180deg, #FBC588, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; display: flex; align-items: baseline; }
  .stat .big.big-txt { font-size: 34px; font-weight: 300; }
  .stat .big .u { font-size: 15px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; -webkit-text-fill-color: var(--ink-3); color: var(--ink-3); margin-left: 9px; align-self: center; }
  .stat .desc { font-size: 14px; color: var(--ink-2); margin-top: 12px; max-width: 280px; }

  /* ===== Split / feature rows (Engine, How We Work) ===== */
  .feat { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
  .feat.rev { grid-template-columns: 1.05fr 1fr; }
  .feat.rev .feat-visual { order: -1; }
  .feat-copy h2 { font-size: 40px; line-height: 1.08; font-weight: 300; letter-spacing: -0.035em; margin-top: 16px; }
  .feat-copy p { font-size: 16px; color: var(--ink-2); margin: 16px 0 26px; max-width: 460px; }
  .feat-points { list-style: none; margin: 0 0 26px; padding: 0; }
  .feat-points li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; font-size: 14.5px; color: var(--ink-2); }
  .feat-points .tick { width: 20px; height: 20px; border-radius: 6px; background: var(--accent-soft); border: 1px solid var(--accent-soft-2); color: var(--accent-bright); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }

  /* Framed product device */
  .device { position: relative; }
  .device-glow { position: absolute; inset: -8% -6% -14% -6%; background: radial-gradient(ellipse at 60% 40%, rgba(232,146,62,0.22), transparent 68%); filter: blur(10px); z-index: 0; }
  .device-frame { position: relative; z-index: 1; border-radius: 14px; overflow: hidden; border: 1px solid var(--border-2);
    background: var(--bg-alt); box-shadow: 0 40px 90px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05); }
  .device-bar { height: 34px; background: var(--surface-2); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 7px; padding: 0 13px; }
  .device-bar .d { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-4); }
  .device-bar .u { margin-left: 12px; height: 16px; flex: 1; max-width: 280px; background: var(--surface-3); border-radius: 5px; }
  .device-frame img { display: block; width: 100%; height: auto; }
  /* floating accent card for layered depth */
  .float-card { position: absolute; z-index: 2; background: linear-gradient(180deg, var(--surface), #150F0A); border: 1px solid var(--accent-soft-2);
    border-radius: 12px; padding: 14px 16px; box-shadow: 0 24px 50px rgba(0,0,0,0.55); backdrop-filter: blur(6px); }
  .float-card .fc-lbl { font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
  .float-card .fc-val { font-size: 24px; font-weight: 700; color: var(--accent-bright); letter-spacing: -0.02em; margin-top: 3px; font-variant-numeric: tabular-nums; }
  .float-card .fc-sub { font-size: 11px; color: var(--success); margin-top: 2px; font-weight: 600; }
  .float-br { right: -22px; bottom: -22px; }
  .float-tl { left: -24px; top: -22px; }

  /* ===== Solutions cards (real screenshots) ===== */
  .modules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .module { overflow: hidden; }
  .module .shot { position: relative; height: 188px; overflow: hidden; border-bottom: 1px solid var(--border); }
  .module .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
  .module:hover .shot img { transform: scale(1.05); }
  .module .shot::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,7,6,0) 55%, rgba(21,15,10,0.95)); }
  .module .shot .tag { position: absolute; z-index: 2; left: 14px; top: 14px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-bright); background: rgba(10,7,6,0.6); border: 1px solid var(--accent-soft-2); padding: 5px 10px; border-radius: 6px; backdrop-filter: blur(4px); }
  .module-body { padding: 18px 22px 22px; }
  .module-body h3 { font-size: 18px; font-weight: 600; }
  .module-body p { font-size: 14px; color: var(--ink-2); margin: 8px 0 14px; line-height: 1.5; min-height: 63px; }
  .module-link { font-size: 13px; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 5px; transition: gap .2s; }
  .module:hover .module-link { gap: 9px; }

  /* ===== Outcomes accordion ===== */
  .acc { border-top: 1px solid var(--border); margin-top: 8px; }
  .acc-item { border-bottom: 1px solid var(--border); }
  .acc-head { display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: center; padding: 24px 6px; cursor: pointer; }
  .acc-no { font-size: 13px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
  .acc-title { font-size: 20px; font-weight: 600; color: var(--ink); }
  .acc-toggle { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border-2); display: flex; align-items: center; justify-content: center; color: var(--ink-2); transition: all 150ms; }
  .acc-item.open .acc-toggle { background: var(--accent); color: #15100A; border-color: var(--accent); transform: rotate(45deg); }
  .acc-panel { max-height: 0; overflow: hidden; transition: max-height 320ms ease; }
  .acc-item.open .acc-panel { max-height: 360px; }
  .acc-inner { padding: 0 6px 28px 60px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; }
  .acc-inner .lead { font-size: 15px; color: var(--ink); line-height: 1.6; }
  .acc-meta .ml { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
  .acc-meta ul { margin: 0 0 16px; padding-left: 18px; }
  .acc-meta li { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin-bottom: 5px; }
  .acc-meta li b { color: var(--ink); }

  /* ===== AGENT PLANNER — flagship (kept) ===== */
  .agent-section { position: relative; overflow: hidden; padding: 90px 0 96px; background: radial-gradient(ellipse 900px 520px at 80% 6%, rgba(232,146,62,0.18), transparent 70%), linear-gradient(180deg, var(--bg-alt), #0B0805); }
  .as-head { display: grid; grid-template-columns: 1.45fr 1fr; gap: 44px; align-items: end; margin-bottom: 36px; }
  .as-eyebrow-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
  .flagship-tag { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-bright); background: var(--accent-soft); border: 1px solid var(--accent-soft-2); border-radius: 5px; padding: 4px 9px; }
  .as-head h2 { font-size: 44px; line-height: 1.06; font-weight: 300; letter-spacing: -0.035em; max-width: 620px; }
  .as-head h2 .amber { color: var(--accent-bright); font-weight: 600; }
  .as-right p { font-size: 16px; color: var(--ink-2); margin: 0 0 22px; }
  .as-right p b { color: var(--ink); font-weight: 600; }
  .as-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
  .flagship { position: relative; }
  .app-frame { background: var(--bg-alt); border: 1px solid var(--border-2); border-radius: 12px; overflow: hidden; }
  .app-bar { height: 40px; background: var(--surface-2); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; padding: 0 14px; position: relative; }
  .app-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-4); }
  .app-bar .crumb { position: absolute; left: 0; right: 0; text-align: center; font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
  .app-bar .live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--success); z-index: 1; }
  .app-bar .live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px rgba(108,192,138,0.7); }
  .app-body { display: grid; grid-template-columns: 1fr 1.05fr; }
  .pane { padding: 26px 28px; }
  .pane.left { border-right: 1px solid var(--border); }
  .pane-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
  .brief-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
  .brief-icon { width: 44px; height: 44px; border-radius: 11px; background: linear-gradient(135deg, var(--accent-bright), var(--accent)); color: #15100A; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; box-shadow: 0 0 24px rgba(232,146,62,0.4); }
  .brief-meta { flex: 1; }
  .brief-name { font-size: 15px; font-weight: 700; color: var(--accent-bright); }
  .brief-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
  .brief-badge { background: var(--accent-soft); border: 1px solid var(--accent-soft-2); color: var(--accent-bright); font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; padding: 4px 9px; border-radius: 5px; white-space: nowrap; }
  .brief-headline { font-size: 23px; font-weight: 700; color: var(--ink); line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 12px; }
  .brief-body { font-size: 14px; color: var(--ink-2); line-height: 1.6; margin-bottom: 20px; }
  .brief-body b { color: var(--accent-bright); font-weight: 600; }
  .sources { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--border); }
  .sources .lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
  .src-pill { background: var(--surface-2); border: 1px solid var(--border-2); color: var(--ink-2); font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 13px; }
  .q-kpis { display: flex; gap: 22px; margin-bottom: 16px; }
  .q-kpi .k-lbl { font-size: 9.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
  .q-kpi .k-val { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; margin-top: 3px; }
  .q-kpi .k-val.accent { color: var(--accent-bright); }
  .q-kpi .k-val.danger { color: var(--danger); }
  .action { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 13px 15px; margin-bottom: 10px; }
  .action:last-child { margin-bottom: 0; }
  .action-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .act-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; background: var(--accent-soft); border: 1px solid var(--accent-soft-2); color: var(--accent-bright); border-radius: 12px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
  .act-style { font-size: 13px; font-weight: 600; color: var(--ink); }
  .act-value { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--accent-bright); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .act-value .cur { font-size: 11px; color: var(--ink-3); font-weight: 500; margin-right: 1px; }
  .act-rule { font-size: 12px; color: var(--ink-3); margin-bottom: 12px; }
  .act-rule b { color: var(--ink-2); font-weight: 500; }
  .act-btns { display: flex; gap: 8px; align-items: center; }
  .ab { height: 30px; padding: 0 14px; border-radius: 7px; font-family: var(--font); font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 6px; transition: all 120ms; }
  .ab-start { background: linear-gradient(180deg, var(--accent-bright), var(--accent)); color: #15100A; border-color: var(--accent); box-shadow: 0 2px 10px rgba(199,122,40,0.3); }
  .ab-resolve { background: var(--surface-3); color: var(--ink); border-color: var(--border-2); }
  .ab-dismiss { background: transparent; color: var(--ink-3); margin-left: auto; padding: 0 10px; }
  .pri { margin-left: 8px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; padding: 4px 9px; border-radius: 11px; border: 1px solid; }
  .pri.high { background: var(--danger-soft); color: var(--danger); border-color: rgba(226,106,96,0.4); }
  .pri.med  { background: var(--warn-soft);  color: var(--warn);  border-color: rgba(240,184,84,0.4); }
  .proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 60px; }
  .pf { background: linear-gradient(180deg, var(--surface), #150F0A); border: 1px solid var(--border); border-radius: 14px; padding: 22px; transition: transform .25s, border-color .25s; }
  .pf:hover { transform: translateY(-3px); border-color: var(--accent-soft-2); }
  .pf .ico { width: 38px; height: 38px; border-radius: 9px; background: var(--accent-soft); border: 1px solid var(--accent-soft-2); display: flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: 14px; }
  .pf h3 { font-size: 15.5px; font-weight: 600; line-height: 1.25; }
  .pf p { font-size: 13.5px; color: var(--ink-2); margin: 8px 0 0; line-height: 1.55; }
  .ba { margin-top: 60px; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface); }
  .ba-col { padding: 30px 34px; }
  .ba-col.before { background: var(--bg-alt); border-right: 1px solid var(--border); }
  .ba-col.after  { background: linear-gradient(180deg, rgba(232,146,62,0.08), rgba(232,146,62,0.02)); }
  .ba-tag { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; display: inline-block; padding: 4px 10px; border-radius: 5px; margin-bottom: 14px; }
  .ba-tag.b { color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--border-2); }
  .ba-tag.a { color: var(--accent-bright); background: var(--accent-soft); border: 1px solid var(--accent-soft-2); }
  .ba-col h3 { font-size: 19px; font-weight: 700; margin-bottom: 14px; }
  .ba-list { list-style: none; margin: 0; padding: 0; }
  .ba-list li { display: flex; gap: 11px; font-size: 14px; color: var(--ink-2); line-height: 1.5; padding: 7px 0; }
  .ba-list li .mk { flex-shrink: 0; margin-top: 2px; }
  .ba-col.after .ba-list li { color: var(--ink); }
  .cta-band { margin-top: 56px; border: 1px solid var(--accent-soft-2); border-radius: 16px; padding: 36px 40px; background: linear-gradient(120deg, rgba(232,146,62,0.16), rgba(232,146,62,0.03)); display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
  .cta-band .cta-copy { flex: 1; min-width: 320px; }
  .cta-band h3 { font-size: 24px; font-weight: 700; line-height: 1.15; }
  .cta-band p { font-size: 15px; color: var(--ink-2); margin: 8px 0 0; }
  .cta-band .cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }

  /* ===== Pattern AI Layer — section intro + module structure ===== */
  .ai-intro { max-width: 880px; margin-bottom: 8px; }
  .ai-intro h2 { font-size: 44px; line-height: 1.06; font-weight: 300; letter-spacing: -0.035em; margin-top: 16px; max-width: 780px; }
  .ai-intro h2 b { color: var(--accent-bright); font-weight: 600; }
  .ai-intro .lead { font-size: 17px; color: var(--ink-2); margin-top: 18px; line-height: 1.62; max-width: 740px; }
  .ai-intro .lead b { color: var(--ink); font-weight: 600; }
  .ai-chips { display: flex; gap: 12px; align-items: center; margin-top: 24px; flex-wrap: wrap; }
  .ai-chip { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--border-2); padding: 8px 14px; border-radius: 22px; }
  .ai-chip .n { color: var(--accent-bright); font-weight: 800; font-variant-numeric: tabular-nums; }
  .ai-chip-sep { font-size: 12px; color: var(--ink-4); }

  .module-block { margin-top: 64px; padding-top: 56px; border-top: 1px solid var(--border); }
  .module-block:first-of-type { border-top: 0; padding-top: 0; margin-top: 48px; }
  .mod-head { display: grid; grid-template-columns: 1.45fr 1fr; gap: 44px; align-items: end; margin-bottom: 28px; }
  .mod-eyebrow-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
  .mod-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 10px; }
  .mod-eyebrow::before { content: ''; width: 22px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); }
  .mod-eyebrow .mn { color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .mod-head h3 { font-size: 34px; line-height: 1.08; font-weight: 300; letter-spacing: -0.03em; max-width: 560px; }
  .mod-head h3 b { color: var(--accent-bright); font-weight: 600; }
  .mod-right p { font-size: 15px; color: var(--ink-2); margin: 0; line-height: 1.6; }
  .mod-right p b { color: var(--ink); font-weight: 600; }

  /* Forecaster mockup */
  .fc-body { display: grid; grid-template-columns: 1.22fr 1fr; }
  .fc-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 8px; padding: 3px; margin-bottom: 16px; }
  .fc-seg button { font-family: var(--font); font-size: 11.5px; font-weight: 600; color: var(--ink-3); background: transparent; border: 0; padding: 6px 13px; border-radius: 6px; cursor: pointer; transition: all 120ms; }
  .fc-seg button.on { background: var(--accent-soft); color: var(--accent-bright); }
  .fc-headline { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 4px; }
  .fc-headline .pct { color: var(--accent-bright); }
  .fc-sub { font-size: 12.5px; color: var(--ink-3); margin-bottom: 14px; }
  .fc-chart { width: 100%; height: auto; display: block; }
  .fc-legend { display: flex; gap: 18px; margin-top: 8px; flex-wrap: wrap; }
  .fc-legend span { font-size: 10.5px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 7px; }
  .fc-legend .sw { width: 16px; height: 0; border-top: 2px solid var(--accent-bright); border-radius: 2px; }
  .fc-legend .sw.dash { border-top-style: dashed; }
  .fc-legend .sw.band { height: 9px; border: 0; background: rgba(232,146,62,0.18); border-radius: 2px; }
  .fc-kpis { display: flex; gap: 22px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
  .fc-kpi .k-lbl { font-size: 9.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
  .fc-kpi .k-val { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; margin-top: 3px; }
  .fc-kpi .k-val.accent { color: var(--accent-bright); }
  .fc-kpi .k-val.good { color: var(--success); }
  .fc-driver { margin-bottom: 13px; }
  .fc-driver-top { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
  .fc-driver-ico { width: 26px; height: 26px; border-radius: 7px; background: var(--accent-soft); border: 1px solid var(--accent-soft-2); display: flex; align-items: center; justify-content: center; color: var(--accent-bright); flex-shrink: 0; }
  .fc-driver-name { font-size: 13px; font-weight: 600; color: var(--ink); }
  .fc-driver-val { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--accent-bright); font-variant-numeric: tabular-nums; }
  .fc-bar { height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
  .fc-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent-deep), var(--accent-bright)); }
  .fc-driver-note { font-size: 11.5px; color: var(--ink-3); margin-top: 6px; }
  .proof.three { grid-template-columns: repeat(3, 1fr); margin-top: 34px; }

  /* ===== Why Pattern (cards) ===== */
  .why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .why-card { padding: 28px 28px 30px; }
  .why-card .ico { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, var(--accent-soft), rgba(232,146,62,0.04)); border: 1px solid var(--accent-soft-2); display: flex; align-items: center; justify-content: center; color: var(--accent-bright); margin-bottom: 18px; }
  .why-card h3 { font-size: 18.5px; font-weight: 600; }
  .why-card p { font-size: 14px; color: var(--ink-2); margin-top: 8px; line-height: 1.55; }

  /* ===== Testimonials (editorial) ===== */
  .quotes { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; align-items: stretch; }
  .quote-feature { position: relative; padding: 40px 42px; overflow: hidden; }
  .quote-feature::before { content: '\201C'; position: absolute; top: 6px; left: 28px; font-size: 150px; line-height: 1; color: var(--accent); opacity: 0.16; font-family: Georgia, serif; }
  .quote-feature .qt { position: relative; font-size: 24px; line-height: 1.42; font-weight: 500; color: var(--ink); letter-spacing: -0.02em; }
  .quote-feature .qa { position: relative; margin-top: 24px; font-size: 13.5px; color: var(--ink-3); }
  .quote-feature .qa b { color: var(--accent-bright); font-weight: 600; }
  .quote-feature .qglow { position: absolute; right: -60px; bottom: -60px; width: 240px; height: 240px; background: radial-gradient(circle, rgba(232,146,62,0.16), transparent 70%); }
  .quote-side { padding: 30px 30px; display: flex; flex-direction: column; }
  .quote-side .qt { font-size: 16px; line-height: 1.5; color: var(--ink-2); font-weight: 500; }
  .quote-side .qa { margin-top: auto; padding-top: 22px; font-size: 12.5px; color: var(--ink-3); }
  .quote-side .qa b { color: var(--ink-2); font-weight: 600; }

  /* ===== Integrations ===== */
  .integ { text-align: center; }
  .integ-label { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 30px; }
  .integ-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
  .integ-logos .il { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border: 1px solid var(--border); border-radius: 10px; background: linear-gradient(180deg, var(--surface), #150F0A); transition: all .2s; }
  .integ-logos .il:hover { border-color: var(--accent-soft-2); transform: translateY(-2px); }
  .integ-logos .il img { display: block; height: 50px; width: auto; max-width: 160px; object-fit: contain; }

  /* ===== Final CTA (dramatic) ===== */
  .final { padding: 96px 0; }
  .final-panel { position: relative; overflow: hidden; border-radius: 22px; padding: 64px 56px; text-align: center;
    background: radial-gradient(ellipse 80% 130% at 50% 0%, rgba(232,146,62,0.22), transparent 60%), linear-gradient(180deg, #1C140C, #0E0A07);
    border: 1px solid var(--accent-soft-2); box-shadow: 0 40px 120px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05); }
  .final-panel .eyebrow { justify-content: center; }
  .final-panel h2 { font-size: 48px; line-height: 1.05; font-weight: 300; letter-spacing: -0.035em; margin: 16px auto 0; max-width: 780px; }
  .final-panel p { font-size: 17px; color: var(--ink-2); margin: 16px 0 30px; }
  .final-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

  /* ===== Footer ===== */
  .footer { border-top: 1px solid var(--border); padding: 56px 0 34px; background: var(--bg-alt); position: relative; }
  .footer::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-soft-2), transparent); }
  .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 36px; border-bottom: 1px solid var(--border); }
  .footer-brand .logo { margin-bottom: 14px; }
  .footer-brand p { font-size: 13.5px; color: var(--ink-2); max-width: 280px; line-height: 1.55; margin: 0 0 18px; }
  .footer-col h5 { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
  .footer-col a { display: block; font-size: 13.5px; color: var(--ink-2); margin-bottom: 9px; }
  .footer-col a:hover { color: var(--ink); }
  .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; padding-top: 24px; }
  .footer-bottom .muted { font-size: 12.5px; color: var(--ink-3); }
  .footer-legal { display: flex; gap: 22px; font-size: 12.5px; color: var(--ink-2); align-items: center; }
  .footer-linkedin { color: var(--ink-3); display: flex; align-items: center; transition: color .15s; }
  .footer-linkedin:hover { color: var(--accent-bright); }
  .footer-contact { font-size: 13.5px; color: var(--ink-2); }
  .footer-contact a { color: var(--accent-bright); }
  .footer-email { display: block; font-size: 13.5px; color: var(--accent-bright); margin-bottom: 6px; }
  .footer-address { display: block; font-size: 13.5px; color: var(--ink-3); margin-bottom: 9px; }
  .footer-book { color: var(--accent-bright) !important; font-weight: 600; }
  .footer-book:hover { text-decoration: underline; }

  @media (max-width: 900px) {
    .nav-links { display: none; }
    .feat, .feat.rev, .app-body, .as-head, .mod-head, .fc-body, .ba, .modules-grid, .why-grid, .quotes, .proof, .proof.three, .footer-top, .stats-grid { grid-template-columns: 1fr; }
    .feat.rev .feat-visual { order: 0; }
    .pane.left { border-right: none; border-bottom: 1px solid var(--border); }
    .float-card { display: none; }
  }

  .ign { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 8px; }
  .phase { position: relative; padding: 30px 32px 26px; }
  .phase-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 11px; border-radius: 6px; margin-bottom: 18px; }
  .phase-tag.weeks { color: var(--accent-bright); background: var(--accent-soft); border: 1px solid var(--accent-soft-2); }
  .phase-tag.prod { color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border-2); }
  .phase h3 { font-size: 22px; font-weight: 300; letter-spacing: -0.02em; margin-bottom: 18px; color: var(--ink); }
  .phase h3 b { font-weight: 600; }
  .steps { list-style: none; margin: 0; padding: 0; }
  .step { display: grid; grid-template-columns: 30px 1fr; gap: 15px; padding: 14px 0; border-top: 1px solid var(--border); }
  .step:first-child { border-top: none; padding-top: 4px; }
  .step .no { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .phase.weeks .step .no { background: linear-gradient(135deg, var(--accent-bright), var(--accent)); color: #15100A; box-shadow: 0 0 16px rgba(232,146,62,0.25); }
  .phase.prod .step .no { background: var(--surface-3); color: var(--ink-2); border: 1px solid var(--border-2); }
  .step .st { font-size: 15px; font-weight: 600; color: var(--ink); }
  .step .sd { font-size: 13px; color: var(--ink-3); margin-top: 3px; line-height: 1.5; }
  .phase-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-2); }
  .phase-foot .lp { width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft); border: 1px solid var(--accent-soft-2); color: var(--accent-bright); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .phase.prod .phase-foot .lp { background: var(--surface-2); border-color: var(--border-2); color: var(--success); }
  .phase-foot b { color: var(--accent-bright); font-weight: 600; }
  .phase.prod .phase-foot b { color: var(--ink); }
  @media (max-width: 900px){ .ign { grid-template-columns: 1fr; } }

  .hero::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 48% 52% at 38% 44%, rgba(245,200,140,0.16) 0%, rgba(245,200,140,0.08) 20%, rgba(245,200,140,0.03) 40%, rgba(245,200,140,0) 58%);animation:hazeA 17s ease-in-out infinite;}
  .hero::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 44% 50% at 58% 52%, rgba(232,146,62,0.12) 0%, rgba(232,146,62,0.05) 22%, rgba(232,146,62,0.018) 42%, rgba(232,146,62,0) 58%);animation:hazeB 23s ease-in-out infinite;}
  .hero-stage{z-index:1;}
  @keyframes hazeA{0%,100%{transform:translate(-6%,1%) scale(1);opacity:.6;}50%{transform:translate(9%,-3%) scale(1.14);opacity:1;}}
  @keyframes hazeB{0%,100%{transform:translate(3%,-2%) scale(1.05);opacity:.45;}50%{transform:translate(-6%,3%) scale(1);opacity:.8;}}
  .app-bar .live::before{animation:livePulse 2.6s ease-in-out infinite;}
  @keyframes livePulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.4);opacity:.65;}}
  .quotes{grid-template-columns:1fr 1fr !important;}
  .integ-logos{gap:16px;}
  .integ-logos .il{font-size:17px;padding:15px 28px;}
  @media (prefers-reduced-motion: reduce){.hero::before,.hero::after,.app-bar .live::before{animation:none;}}
  .marquee{position:relative;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
  .marquee-track{display:flex;width:max-content;align-items:center;animation:marqueeX 55s linear infinite;will-change:transform;}
  .marquee:hover .marquee-track{animation-play-state:paused;}
  .marquee-logo{flex:0 0 auto;margin:0 30px;height:50px;width:auto;max-width:160px;object-fit:contain;opacity:0.7;transition:opacity .2s,filter .2s;}
  .marquee-logo:hover{opacity:1;filter:brightness(0) invert(1);}
  @keyframes marqueeX{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  @media (prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;justify-content:center;}}
  .stack{position:relative;display:flex;flex-direction:column;}
  .stack-glow{position:absolute;inset:-8% -10%;z-index:0;background:radial-gradient(ellipse 60% 70% at 50% 28%, rgba(232,146,62,0.14), transparent 70%);pointer-events:none;}
  .layer{position:relative;z-index:1;display:grid;grid-template-columns:46px 1fr;gap:15px;align-items:center;background:linear-gradient(180deg,var(--surface),#150F0A);border:1px solid var(--border);border-radius:12px;padding:14px 16px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.04),0 10px 24px rgba(0,0,0,0.3);}
  .layer.top{background:linear-gradient(180deg,rgba(232,146,62,0.20),rgba(232,146,62,0.05));border-color:var(--accent-soft-2);}
  .layer .ic{width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);border:1px solid var(--accent-soft-2);color:var(--accent-bright);}
  .layer .lt{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-0.01em;}
  .layer.top .lt{color:var(--accent-bright);}
  .layer .ld{font-size:12px;color:var(--ink-3);margin-top:2px;line-height:1.45;}
  .layer .chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;}
  .layer .chips span{font-size:9.5px;font-weight:600;letter-spacing:0.03em;color:var(--ink-2);background:var(--surface-3);border:1px solid var(--border-2);padding:3px 7px;border-radius:5px;}
  .conn{position:relative;height:24px;z-index:1;}
  .conn::before{content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);width:2px;height:100%;background:linear-gradient(180deg,rgba(232,146,62,0.55),rgba(232,146,62,0.15));}
  .conn::after{content:'';position:absolute;left:50%;top:1px;width:8px;height:8px;transform:translateX(-50%) rotate(-45deg);border-top:2px solid var(--accent-bright);border-right:2px solid var(--accent-bright);}
  .pstack{position:relative;display:flex;flex-direction:column;gap:13px;}
  .slab{position:relative;display:grid;grid-template-columns:30px 40px 1fr;gap:13px;align-items:center;border-radius:11px;padding:15px 18px;border:1px solid var(--border);background:linear-gradient(180deg,var(--surface),#140E09);box-shadow:0 5px 0 -1px #0C0805,0 14px 26px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.04);}
  .slab .pidx{font-size:12px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;text-align:center;}
  .slab .pic{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);border:1px solid var(--accent-soft-2);color:var(--accent-bright);}
  .slab .pl{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-0.01em;}
  .slab .pt{font-size:11.5px;color:var(--ink-3);margin-top:2px;}
  .slab .chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;}
  .slab .chips span{font-size:9px;font-weight:600;color:var(--ink-2);background:var(--surface-3);border:1px solid var(--border-2);padding:2px 6px;border-radius:5px;}
  .slab.s5{background:linear-gradient(180deg,rgba(232,146,62,0.22),rgba(232,146,62,0.06));border-color:var(--accent-soft-2);}
  .slab.s5 .pl{color:var(--accent-bright);}
  .slab.s4{background:linear-gradient(180deg,rgba(232,146,62,0.11),#140E09);}
  .slab.s3{background:linear-gradient(180deg,rgba(232,146,62,0.05),#140E09);}
  .pstack{gap:9px;}
  .slab{z-index:1;background:linear-gradient(180deg,rgba(28,21,13,0.82),rgba(18,13,8,0.86));}
  .parrow{display:flex;justify-content:center;align-items:center;height:14px;margin:-1px 0;}
  .parrow svg{opacity:0.95;}

  /* v2 additions */
  .page-top{padding-top:150px}
  .stat-duo{display:flex;flex-direction:column;gap:18px}
  .stat-duo .stat{border-right:none;border-radius:14px}
  .ai-closing{font-size:16px;color:var(--ink-2);font-style:italic;margin:34px 0 0;max-width:760px}
  .ai-closing b{color:var(--accent-bright);font-weight:600;font-style:italic}
  .tag-new{font-size:8px;letter-spacing:.1em;color:#15100A;background:var(--accent);border-radius:3px;padding:2px 5px;vertical-align:2px;margin-left:6px;font-weight:800}