/* ==========================================================
   CodeDK Studio — style wspólne dla stron demonstracyjnych
   szablonów (/templates/*). Niezależne od głównego designu
   CodeDK — każdy szablon ma być wizualnie odrębnym produktem.
   ========================================================== */

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

:root{
    --accent:#4F46E5;
    --accent-dark:#3730a3;
    --bg:#0b0d12;
    --bg2:#12151c;
    --card:#171b24;
    --text:#f3f4f6;
    --text2:#9ca3af;
    --border:#242832;
    --radius:14px;
}

html{ scroll-behavior:smooth; }
body{
    font-family:'Space Grotesk', Arial, sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
    overflow-x:hidden;
}
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
ul{ list-style:none; }

.td-container{ max-width:1140px; margin:0 auto; padding:0 24px; }
.td-section{ padding:80px 0; }
.td-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:13px 26px;
    border-radius:10px;
    font-weight:600;
    font-size:.92rem;
    background:var(--accent);
    color:#fff;
    transition:transform .2s ease, opacity .2s ease;
}
.td-btn:hover{ transform:translateY(-2px); opacity:.92; }
.td-btn-outline{
    background:none;
    border:1px solid var(--border);
    color:var(--text);
}
.td-eyebrow{
    display:inline-block;
    padding:6px 14px;
    border-radius:999px;
    background:color-mix(in srgb, var(--accent) 18%, transparent);
    color:var(--accent);
    font-size:.78rem;
    font-weight:600;
    margin-bottom:16px;
}
.td-head{ max-width:640px; margin:0 auto 48px; text-align:center; }
.td-head h2{ font-size:clamp(1.7rem,3.5vw,2.3rem); margin-bottom:12px; letter-spacing:-.01em; }
.td-head p{ color:var(--text2); }

/* ---------- Demo bar (wspólny dla wszystkich 3 szablonów) ---------- */
.demo-bar{
    position:sticky;
    top:0;
    z-index:200;
    background:#000;
    border-bottom:1px solid var(--border);
    padding:11px 0;
    font-size:.82rem;
}
.demo-bar-inner{
    max-width:1140px;
    margin:0 auto;
    padding:0 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
}
.demo-bar-inner span{ color:#d1d5db; }
.demo-bar-inner span strong{ color:#fff; }
.demo-bar-actions{ display:flex; gap:10px; }
.demo-bar-actions a{
    padding:7px 14px;
    border-radius:8px;
    font-size:.78rem;
    font-weight:600;
    white-space:nowrap;
}
.demo-bar-actions a.primary{ background:var(--accent); color:#fff; }
.demo-bar-actions a.secondary{ border:1px solid #333; color:#d1d5db; }

/* ---------- Nawigacja demo ---------- */
.td-nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 0;
}
.td-logo{ font-size:1.2rem; font-weight:700; }
.td-nav-links{ display:flex; gap:26px; }
.td-nav-links a{ font-size:.88rem; color:var(--text2); }
.td-nav-links a:hover{ color:var(--text); }
@media (max-width:760px){ .td-nav-links{ display:none; } }

/* ---------- Hero ---------- */
.td-hero{ padding:70px 0 90px; text-align:center; }
.td-hero h1{ font-size:clamp(2.1rem,5vw,3.2rem); letter-spacing:-.02em; margin-bottom:20px; }
.td-hero p{ color:var(--text2); max-width:560px; margin:0 auto 32px; font-size:1.05rem; }
.td-hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- Grid kart ---------- */
.td-grid{ display:grid; gap:22px; }
.td-grid-3{ grid-template-columns:repeat(3,1fr); }
.td-grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:860px){ .td-grid-3, .td-grid-2{ grid-template-columns:1fr; } }

.td-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:28px;
}
.td-card h3{ font-size:1.1rem; margin-bottom:10px; }
.td-card p{ color:var(--text2); font-size:.9rem; }

.td-visual{
    height:160px;
    border-radius:var(--radius);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2.2rem;
    color:var(--accent);
    background:
        radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%),
        var(--bg2);
    border:1px solid var(--border);
    margin-bottom:16px;
}

/* ---------- Footer demo ---------- */
.td-footer{
    padding:40px 0;
    border-top:1px solid var(--border);
    text-align:center;
    color:var(--text2);
    font-size:.82rem;
}

/* ==========================================================
   Warianty: SKLEP (produkty + koszyk) — dla demo Tech Store / Fashion Boutique
   ========================================================== */
.td-shop-topbar{ display:flex; align-items:center; gap:16px; padding:16px 0; border-bottom:1px solid var(--border); }
.td-shop-search{
    flex:1;
    padding:10px 16px;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--card);
    color:var(--text);
}
.td-cart-btn{
    position:relative;
    width:42px; height:42px;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--card);
    color:var(--text);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
}
.td-cart-count{
    position:absolute; top:-6px; right:-6px;
    width:18px; height:18px;
    border-radius:50%;
    background:var(--accent);
    color:#fff;
    font-size:.65rem;
    display:flex; align-items:center; justify-content:center;
}
.td-shop-categories{ display:flex; gap:10px; padding:20px 0; flex-wrap:wrap; }
.td-shop-categories button{
    padding:8px 16px;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--card);
    color:var(--text2);
    font-size:.82rem;
    cursor:pointer;
}
.td-shop-categories button.active{ background:var(--accent); color:#fff; border-color:transparent; }
.td-product-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.td-product-img{
    height:150px;
    display:flex; align-items:center; justify-content:center;
    font-size:2.2rem;
    color:var(--accent);
    background:var(--bg2);
}
.td-product-info{ padding:18px; }
.td-product-info h4{ font-size:.95rem; margin-bottom:6px; }
.td-product-price{ font-weight:700; font-size:1.1rem; margin:8px 0; }
.td-add-cart{
    width:100%;
    padding:9px;
    border-radius:8px;
    border:none;
    background:var(--accent);
    color:#fff;
    font-size:.82rem;
    font-weight:600;
    cursor:pointer;
}
.td-cart-drawer{
    position:fixed; top:0; right:0; bottom:0;
    width:340px; max-width:calc(100vw - 32px);
    background:var(--bg2);
    border-left:1px solid var(--border);
    z-index:300;
    padding:24px;
    transform:translateX(100%);
    transition:transform .3s ease;
    overflow-y:auto;
}
.td-cart-drawer.open{ transform:translateX(0); }
.td-cart-item{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); font-size:.85rem; }
.td-cart-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:290; display:none; }
.td-cart-overlay.open{ display:block; }

/* ==========================================================
   Wariant: CRM (sidebar + dashboard) — dla demo CRM
   ========================================================== */
.td-crm-layout{ display:grid; grid-template-columns:220px 1fr; min-height:100vh; }
@media (max-width:860px){ .td-crm-layout{ grid-template-columns:1fr; } .td-crm-sidebar{ display:none; } }
.td-crm-sidebar{ background:var(--bg2); border-right:1px solid var(--border); padding:24px 18px; }
.td-crm-sidebar .td-logo{ margin-bottom:30px; display:block; }
.td-crm-sidebar nav a{
    display:flex; align-items:center; gap:10px;
    padding:11px 14px;
    border-radius:9px;
    color:var(--text2);
    font-size:.88rem;
    margin-bottom:4px;
}
.td-crm-sidebar nav a.active{ background:var(--accent); color:#fff; }
.td-crm-main{ padding:28px 32px; }
.td-crm-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }
@media (max-width:760px){ .td-crm-stats{ grid-template-columns:repeat(2,1fr); } }
.td-crm-stat{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:18px; }
.td-crm-stat span{ color:var(--text2); font-size:.78rem; display:block; margin-bottom:6px; }
.td-crm-stat strong{ font-size:1.5rem; }
.td-crm-table{ width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.td-crm-table th, .td-crm-table td{ padding:12px 16px; text-align:left; font-size:.85rem; border-bottom:1px solid var(--border); }
.td-crm-table th{ color:var(--text2); font-weight:600; background:var(--bg2); }
.td-status-pill{ padding:4px 10px; border-radius:999px; font-size:.72rem; font-weight:600; }
.td-status-new{ background:rgba(79,70,229,.18); color:#a5b4fc; }
.td-status-progress{ background:rgba(217,119,6,.18); color:#fbbf24; }
.td-status-done{ background:rgba(22,163,74,.18); color:#4ade80; }

/* ==========================================================
   Case Study — badge demo, wspólne dla stron case-study.php
   ========================================================== */
.cs-demo-badge{
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 12px; border-radius:999px;
    background:rgba(255,255,255,.06); border:1px solid var(--border);
    color:var(--text2); font-size:.72rem; font-weight:600;
}