/* ── Design tokens (matching DealDunia brand) ───── */
    :root {
      --bg:        #f5f5f5;
      --surface:   #ffffff;
      --border:    #e0e0e0;
      --text:      #212121;
      --muted:     #757575;
      --hint:      #bdbdbd;
      --orange:    #ff5722;
      --amber:     #ff8f00;
      --green:     #2e7d32;
      --green-lt:  #e8f5e9;
      --blue:      #1565c0;
      --blue-lt:   #e3f2fd;
      --red:       #c62828;
      --red-lt:    #ffebee;
      --warn:      #f57f17;
      --warn-lt:   #fffde7;
      --pill-bg:   #ffffff;
      --pill-shadow: 0 1px 4px rgba(0,0,0,.08);
      --card-shadow: 0 2px 8px rgba(0,0,0,.08);
      --nav-bg:    #edeef0;
      --nav-border:#d0d3d8;
      --accent:    #111;
    }
    *,*::before,*::after{box-sizing:border-box}
    body{background:var(--bg);font-family:'Nunito',sans-serif;color:var(--text);font-size:.9rem;line-height:1.7}
    h1,h2,h3,.font-display{font-family:'Poppins',sans-serif}
    code,pre,.mono{font-family:'JetBrains Mono',monospace}

    /* ── Portfolio navbar ─────────────────────────── */
    .site-nav{background:var(--nav-bg);padding:1.1rem 2rem}
    
    .brand-logo{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700;letter-spacing:-.5px;color:var(--text)!important;line-height:1.15}
    .brand-sub{font-size:.62rem;font-weight:300;color:var(--muted);letter-spacing:.02em;display:block;text-align:center}
    .nav-pill{border:1.5px solid var(--nav-border);border-radius:50px;padding:.35rem 1.1rem;font-size:.82rem;font-weight:500;color:var(--text);background:var(--pill-bg);box-shadow:var(--pill-shadow);text-decoration:none;transition:background .18s,color .18s}
    
    .social-pill{border:1.5px solid var(--nav-border);border-radius:50px;padding:.3rem .85rem;font-size:.76rem;font-weight:500;color:var(--text);background:var(--pill-bg);box-shadow:var(--pill-shadow);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;transition:background .18s}
    .social-pill:hover{background:#f0f0f0;color:var(--text)}
    .back-pill{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:500;color:var(--muted);text-decoration:none;border:1.5px solid var(--nav-border);border-radius:50px;padding:.3rem .9rem;background:var(--pill-bg);transition:color .18s,background .18s}
    .back-pill:hover{background:#111;color:#fff;border-color:#111}

    .site-nav {
      background: var(--bg);
      padding: 1.1rem 2rem;
      border-bottom: none;
    }

    .brand-logo {
      font-family: 'Playfair Display', serif;
      font-size: 1.25rem;
      font-weight: 700;
      letter-spacing: -.5px;
      color: var(--text) !important;
      line-height: 1.15;
    }
    .brand-sub {
      font-size: .68rem;
      font-weight: 300;
      color: var(--muted);
      letter-spacing: .03em;
      display: block;
      text-align: center;
    }

    /* circular brand wrapper */
    .brand-wrap {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 6px;
    }

    /* nav pills */
    .nav-pill {
      border: 1.5px solid var(--border);
      border-radius: 50px;
      padding: .35rem 1.1rem;
      font-size: .82rem;
      font-weight: 500;
      color: var(--text);
      background: var(--pill-bg);
      box-shadow: var(--pill-shadow);
      text-decoration: none;
      transition: background .18s, color .18s, box-shadow .18s;
      white-space: nowrap;
    }
    .nav-pill:hover,
    .nav-pill.active {
      background: var(--accent);
      color: #fff;
      box-shadow: 0 2px 8px rgba(0,0,0,.18);
    }

    /* social pills */
    .social-pill {
      border: 1.5px solid var(--border);
      border-radius: 50px;
      padding: .3rem .85rem;
      font-size: .76rem;
      font-weight: 500;
      color: var(--text);
      background: var(--pill-bg);
      box-shadow: var(--pill-shadow);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      transition: background .18s, color .18s;
    }
    .social-pill:hover { background: #f0f0f0; color: var(--text); }

    .social-pill img {
      width: 16px;
      height: 16px;
      object-fit: contain;
    }


    /* ── Hero ─────────────────────────────────────── */
    .cs-hero{border-radius:20px;overflow:hidden;background:linear-gradient(135deg,#bf360c 0%,#e64a19 40%,#ff7043 100%);padding:3.5rem 3rem;position:relative;margin-bottom:1.5rem}
    .cs-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 75% 40%,rgba(255,143,0,.3) 0%,transparent 60%)}
    .cs-hero::after{content:'';position:absolute;top:-50px;right:-50px;width:300px;height:300px;border-radius:50%;background:rgba(255,112,67,.12)}
    .cs-hero-badge{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.25);border-radius:50px;padding:.25rem .85rem;margin-bottom:1rem;backdrop-filter:blur(4px)}
    .cs-hero h1{font-family:'Poppins',sans-serif;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;color:#fff;line-height:1.15;margin-bottom:.4rem;position:relative;z-index:1}
    .cs-hero .tagline{font-size:1.05rem;color:rgba(255,255,255,.8);font-style:italic;margin-bottom:1rem;position:relative;z-index:1}
    .cs-hero .sub{font-size:.88rem;color:rgba(255,255,255,.7);max-width:500px;position:relative;z-index:1}
    .hero-meta-pill{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);border-radius:50px;padding:.2rem .75rem;font-size:.76rem;color:#fff;margin:.2rem;backdrop-filter:blur(4px)}

    /* hero phone illustration */
    .hero-phone{position:absolute;right:2.5rem;top:50%;transform:translateY(-50%);z-index:2}

    /* ── TOC sidebar pills ────────────────────────── */
    .toc-pill{display:flex;align-items:center;gap:.6rem;text-decoration:none;padding:.45rem .9rem;border-radius:10px;font-size:.79rem;font-weight:500;color:var(--muted);transition:background .15s,color .15s;border:1px solid transparent}
    .toc-pill:hover{background:#fff;color:var(--text);border-color:var(--border)}
    .toc-pill.active{background:var(--orange);color:#fff;border-color:var(--orange)}
    .toc-num{width:22px;height:22px;border-radius:50%;background:rgba(255,87,34,.15);color:var(--orange);font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .toc-pill.active .toc-num{background:rgba(255,255,255,.25);color:#fff}

    /* ── Section wrapper ──────────────────────────── */
    .cs-section{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:2rem 2.2rem;margin-bottom:1.2rem;scroll-margin-top:80px}
    .cs-section-sm{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.4rem 1.6rem;height:100%}
    .phase-label{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);margin-bottom:.3rem;display:flex;align-items:center;gap:.5rem}
    .phase-label::before{content:'';display:inline-block;width:16px;height:2px;background:var(--orange)}
    .section-title{font-family:'Poppins',sans-serif;font-size:1.25rem;font-weight:700;margin-bottom:1rem;color:var(--text)}

    /* ── KPI table ────────────────────────────────── */
    .kpi-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1.1rem 1.3rem;text-align:center;border-top:3px solid var(--orange)}
    .kpi-value{font-family:'Poppins',sans-serif;font-size:1.5rem;font-weight:700;color:var(--orange);line-height:1}
    .kpi-label{font-size:.75rem;color:var(--muted);margin-top:.3rem}

    /* ── Competitive table ────────────────────────── */
    .comp-table{border-radius:12px;overflow:hidden;border:1px solid var(--border)}
    .comp-table table{margin:0;font-size:.8rem}
    .comp-table th{background:#212121;color:#fff;font-weight:600;font-size:.75rem;letter-spacing:.04em;padding:.65rem 1rem;border:none}
    .comp-table td{padding:.55rem 1rem;border-color:var(--border);vertical-align:middle}
    .comp-table tr:nth-child(even) td{background:#fafafa}
    .comp-table td:first-child{font-weight:600;color:var(--text)}
    .tick-yes{color:var(--green);font-size:1rem}
    .tick-no{color:var(--hint);font-size:1rem}
    .tick-partial{color:var(--warn)}
    .highlight-row td{background:#fff8f6!important;font-weight:600}

    /* ── Finding cards ────────────────────────────── */
    .finding-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1.1rem 1.2rem;height:100%;border-left:4px solid var(--orange)}
    .finding-pct{font-family:'Poppins',sans-serif;font-size:1.5rem;font-weight:700;color:var(--orange);line-height:1;margin-bottom:.3rem}
    .finding-title{font-weight:700;font-size:.86rem;margin-bottom:.3rem}
    .finding-card p{font-size:.8rem;color:var(--muted);margin:0}

    /* ── Affinity clusters ────────────────────────── */
    .affinity-chip{border-radius:12px;padding:1rem 1.1rem;height:100%;text-align:center}
    .affinity-chip .aff-icon{font-size:1.6rem;margin-bottom:.4rem}
    .affinity-chip strong{font-size:.86rem;display:block;margin-bottom:.2rem}
    .affinity-chip p{font-size:.76rem;color:var(--muted);margin:0}
    .aff-trust{background:#fff3e0;border:1px solid #ffcc80}
    .aff-discovery{background:#e3f2fd;border:1px solid #90caf9}
    .aff-earnings{background:#e8f5e9;border:1px solid #a5d6a7}
    .aff-speed{background:#fce4ec;border:1px solid #f48fb1}
    .aff-delight{background:#ede7f6;border:1px solid #b39ddb}

    /* ── Persona card ────────────────────────────── */
    .persona-card{border:1px solid var(--border);border-radius:14px;overflow:hidden;height:100%}
    .persona-header{padding:1.1rem 1.3rem;display:flex;align-items:center;gap:.85rem}
    .persona-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
    .persona-card:nth-child(1) .persona-header{background:#fff8e1}
    .persona-card:nth-child(1) .persona-avatar{background:#ffcc02;color:#5d4037}
    .persona-card:nth-child(2) .persona-header{background:#e8f5e9}
    .persona-card:nth-child(2) .persona-avatar{background:#66bb6a;color:#1b5e20}
    .persona-card:nth-child(3) .persona-header{background:#fce4ec}
    .persona-card:nth-child(3) .persona-avatar{background:#f06292;color:#880e4f}
    .persona-name{font-weight:700;font-size:.9rem}
    .persona-meta{font-size:.74rem;color:var(--muted)}
    .persona-body{padding:1rem 1.3rem;background:#fff}
    .persona-body .label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.3rem;margin-top:.7rem}
    .persona-body li{font-size:.79rem;color:var(--muted);margin-bottom:.2rem}
    .persona-quote{font-style:italic;font-size:.82rem;background:#f5f5f5;border-radius:8px;padding:.6rem .9rem;margin-top:.8rem;color:var(--text);border-left:3px solid var(--orange)}

    /* ── JTBD / HMW ───────────────────────────────── */
    .jtbd-item{background:#fff;border:1px solid var(--border);border-radius:10px;padding:.9rem 1.1rem;display:flex;gap:.8rem;align-items:flex-start}
    .jtbd-icon{width:30px;height:30px;border-radius:8px;background:#fff3e0;color:var(--orange);font-size:.9rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .jtbd-item p{font-size:.82rem;color:var(--muted);margin:0;font-style:italic}
    .hmw-item{background:#e3f2fd;border:1px solid #90caf9;border-radius:10px;padding:.75rem 1rem;font-size:.82rem;color:#0d47a1;font-weight:500}
    .hmw-item::before{content:'🤔 '}

    /* ── IA sitemap ───────────────────────────────── */
    .sitemap-tab{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;height:100%}
    .sitemap-tab-header{padding:.75rem 1.1rem;font-weight:700;font-size:.84rem;display:flex;align-items:center;gap:.6rem}
    .tab-home{background:#fff8e1}
    .tab-cat{background:#e8f5e9}
    .tab-wallet{background:#e3f2fd}
    .tab-profile{background:#fce4ec}
    .sitemap-tab-body{padding:.75rem 1.1rem}
    .sitemap-tab-body li{font-size:.79rem;color:var(--muted);margin-bottom:.3rem}

    /* ── Flow diagrams ────────────────────────────── */
    .flow-step{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
    .flow-node{background:var(--orange);color:#fff;border-radius:8px;padding:.3rem .8rem;font-size:.76rem;font-weight:600;white-space:nowrap}
    .flow-node.start{background:#212121}
    .flow-node.end{background:var(--green)}
    .flow-node.decision{background:var(--blue);border-radius:20px}
    .flow-arrow{color:var(--hint);font-size:.9rem;font-weight:700}

    /* ── Interaction cards ────────────────────────── */
    .interaction-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1.1rem 1.3rem;height:100%;border-top:3px solid var(--orange)}
    .interaction-card strong{font-size:.86rem;display:block;margin-bottom:.5rem}
    .interaction-card ol li,.interaction-card p{font-size:.8rem;color:var(--muted)}

    /* ── Micro-interaction table ──────────────────── */
    .mi-table{border-radius:12px;overflow:hidden;border:1px solid var(--border)}
    .mi-table th{background:var(--orange);color:#fff;font-size:.76rem;padding:.6rem 1rem;border:none;font-weight:600}
    .mi-table td{font-size:.8rem;padding:.55rem 1rem;border-color:var(--border)}
    .mi-table tr:nth-child(even) td{background:#fafafa}

    /* ── Error states ─────────────────────────────── */
    .error-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:.9rem 1.1rem;display:flex;gap:.75rem;align-items:flex-start}
    .error-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0}
    .err-expired .error-icon{background:var(--red-lt);color:var(--red)}
    .err-nottrack .error-icon{background:var(--warn-lt);color:var(--warn)}
    .err-offline .error-icon{background:var(--blue-lt);color:var(--blue)}
    .err-unavail .error-icon{background:#f5f5f5;color:#757575}
    .error-card strong{font-size:.82rem;display:block;margin-bottom:.15rem}
    .error-card p{font-size:.78rem;color:var(--muted);margin:0}
    .error-action{font-size:.74rem;color:var(--orange);font-weight:600;margin-top:.25rem;display:block}

    /* ── Color palette ────────────────────────────── */
    .color-swatch{width:100%;height:60px;border-radius:10px 10px 0 0}
    .color-card{border:1px solid var(--border);border-radius:10px;overflow:hidden;text-align:center}
    .color-info{padding:.5rem .6rem;background:#fff}
    .color-name{font-size:.76rem;font-weight:600;display:block}
    .color-hex{font-size:.68rem;font-family:'JetBrains Mono',monospace;color:var(--muted)}

    /* ── Type scale ───────────────────────────────── */
    .type-row{display:flex;align-items:baseline;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--border)}
    .type-row:last-child{border-bottom:none}
    .type-tag{min-width:52px;font-size:.7rem;font-weight:700;color:var(--orange);letter-spacing:.06em;text-transform:uppercase}
    .type-spec{font-size:.72rem;color:var(--hint);font-family:'JetBrains Mono',monospace;min-width:130px}

    /* ── Component chips ──────────────────────────── */
    .comp-chip{display:inline-flex;align-items:center;gap:.35rem;background:#fff;border:1px solid var(--border);border-radius:8px;padding:.3rem .7rem;font-size:.76rem;font-weight:500;color:var(--text);margin:.2rem}
    .comp-chip::before{content:'◆';font-size:.5rem;color:var(--orange)}

    /* ── Prototype stages ─────────────────────────── */
    .proto-stage{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1.1rem 1.3rem;height:100%;position:relative;overflow:hidden}
    .proto-stage::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
    .proto-stage:nth-child(1)::before{background:#bdbdbd}
    .proto-stage:nth-child(2)::before{background:var(--warn)}
    .proto-stage:nth-child(3)::before{background:var(--orange)}
    .proto-stage:nth-child(4)::before{background:var(--green)}
    .stage-num{font-family:'Poppins',sans-serif;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.4rem}
    .stage-title{font-weight:700;font-size:.9rem;margin-bottom:.4rem}
    .stage-body{font-size:.8rem;color:var(--muted)}

    /* ── Usability table ──────────────────────────── */
    .ux-table{border-radius:12px;overflow:hidden;border:1px solid var(--border)}
    .ux-table th{background:#212121;color:#fff;font-size:.75rem;padding:.6rem 1rem;border:none;font-weight:600}
    .ux-table td{font-size:.8rem;padding:.55rem 1rem;border-color:var(--border);vertical-align:middle}
    .ux-table tr:nth-child(even) td{background:#fafafa}
    .rate-pill{display:inline-block;border-radius:50px;padding:.15rem .6rem;font-size:.74rem;font-weight:700}
    .rate-high{background:var(--green-lt);color:var(--green)}
    .rate-mid{background:var(--warn-lt);color:var(--warn)}
    .rate-low{background:var(--red-lt);color:var(--red)}

    /* ── Iteration fixes ──────────────────────────── */
    .fix-item{background:#fff;border:1px solid var(--border);border-radius:10px;padding:1rem 1.1rem;border-left:4px solid var(--orange)}
    .fix-issue{font-size:.76rem;font-weight:700;color:var(--red);margin-bottom:.4rem;display:flex;align-items:center;gap:.4rem}
    .fix-arrow{font-size:.8rem;color:var(--green);font-weight:700;margin:.2rem 0}
    .fix-solution{font-size:.8rem;color:var(--muted)}

    /* ── AB test table ────────────────────────────── */
    .ab-table{border-radius:12px;overflow:hidden;border:1px solid var(--border)}
    .ab-table th{background:var(--blue);color:#fff;font-size:.75rem;padding:.6rem 1rem;border:none;font-weight:600}
    .ab-table td{font-size:.8rem;padding:.55rem 1rem;border-color:var(--border)}
    .ab-table tr:nth-child(even) td{background:#fafafa}

    /* ── Token block ──────────────────────────────── */
    .token-block{background:#1e1e2e;border-radius:12px;padding:1.3rem 1.5rem;font-size:.78rem;font-family:'JetBrains Mono',monospace;color:#cdd6f4;overflow-x:auto;line-height:1.7}
    .tk-key{color:#89b4fa}
    .tk-val{color:#a6e3a1}
    .tk-str{color:#f38ba8}
    .tk-comment{color:#6c7086}

    /* ── Roadmap ──────────────────────────────────── */
    .roadmap-item{background:#fff;border:1px solid var(--border);border-radius:10px;padding:.9rem 1rem}
    .roadmap-phase{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin-bottom:.3rem}
    .roadmap-title{font-size:.84rem;font-weight:600;margin:0}

    /* ── Analytic event chip ──────────────────────── */
    .event-chip{display:inline-block;background:#212121;color:#a6e3a1;border-radius:6px;padding:.15rem .55rem;font-size:.72rem;font-family:'JetBrains Mono',monospace;margin:.15rem}

    /* ── Stat cards ───────────────────────────────── */
    .stat-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.4rem 1.2rem;text-align:center;height:100%;position:relative;overflow:hidden}
    .stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--orange)}
    .stat-number{font-family:'Poppins',sans-serif;font-size:2rem;font-weight:700;color:var(--orange);line-height:1;margin-bottom:.3rem}
    .stat-label{font-size:.76rem;color:var(--muted);font-weight:500;line-height:1.4}

    /* ── Closing ──────────────────────────────────── */
    .closing-strip{background:linear-gradient(135deg,#bf360c 0%,#e64a19 60%,#ff8f00 100%);border-radius:16px;padding:2.2rem 2.5rem;margin-bottom:1.5rem}
    .closing-strip p{font-family:'Poppins',sans-serif;font-weight:600;font-size:1rem;line-height:1.6;margin:0;color:rgba(255,255,255,.95)}

    /* ── Appendix chips ───────────────────────────── */
    .appendix-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1.2rem 1.4rem}
    .appendix-card h6{font-size:.82rem;font-weight:700;margin-bottom:.6rem;color:var(--text)}
    .appendix-card li{font-size:.78rem;color:var(--muted);margin-bottom:.25rem}

    @media(max-width:768px){
      .cs-hero{padding:2rem 1.5rem 2.5rem}
      .hero-phone{display:none!important}
      .cs-section{padding:1.5rem 1.2rem}
    }