/* === KANDYB STUDIO · home.css ===
   Redesign strony głównej (Claude Design → statyczny HTML).
   Space Grotesk (display) + Manrope (body), teal #1f7d6a + pomarańcz #f5a06f, jasny/profesjonalny.
   Osobny plik — podstrony dalej używają site.css.
   ================================================================== */

:root {
    --teal: #1f7d6a;
    --teal-dark: #155c4f;
    --teal-light: #2c9e87;
    --orange: #f5a06f;
    --orange-dark: #e07a44;

    --ink: #131c18;          /* nagłówki — ciepła czerń */
    --ink-2: #33413b;
    --body: #5a6a63;         /* tekst — ciepła szarość */
    --muted: #8a968f;
    --line: #e7e4dc;         /* ciepłe linie */
    --line-2: #f0ede6;
    --bg: #fbfaf7;           /* ciepła biel */
    --bg-card: #ffffff;
    --bg-soft: #f4f2ec;
    --dark: #141b17;         /* ciemny pill / chip */

    --r-lg: 26px;
    --r-md: 16px;
    --r-sm: 12px;
    --r-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(19, 28, 24, .04), 0 8px 24px -14px rgba(19, 28, 24, .12);
    --shadow-md: 0 2px 4px rgba(19, 28, 24, .05), 0 24px 48px -22px rgba(19, 28, 24, .20);

    --container: 1240px;
    --pad-x: clamp(20px, 5vw, 72px);

    --display: 'Space Grotesk', system-ui, sans-serif;
    --body-font: 'Manrope', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--body);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(31, 125, 106, .16); }

.wrap { max-width: var(--container); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }

/* === WORDMARK / LOGO (większe niż w projekcie) === */
.brand { display: inline-flex; align-items: baseline; gap: 11px; line-height: 1; }
.brand .name {
    font-family: var(--display);
    font-weight: 700;
    font-size: 34px;                 /* powiększone logo */
    letter-spacing: -0.03em;
    color: var(--ink);
}
.brand .name .a {
    color: var(--teal);
    position: relative;
}
.brand .name .a::after {
    content: "";
    position: absolute;
    top: .1em; right: -3px;
    width: 6px; height: 6px;
    background: var(--orange);
    border-radius: 50%;
}
.brand .tag {
    font-family: var(--display);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--muted);
}
.brand.sm .name { font-size: 26px; }
.brand.sm .tag { font-size: 11px; }

/* === NAV === */
.nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(251, 250, 247, .82);
    backdrop-filter: saturate(150%) blur(12px);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    border-bottom: 1px solid var(--line-2);
}
.nav-in {
    max-width: var(--container); margin: 0 auto;
    padding: 18px var(--pad-x);
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links > a {
    font-weight: 600; font-size: 15px; color: var(--ink-2);
    transition: color .15s;
}
.nav-links > a:hover { color: var(--teal); }

.lang {
    display: inline-flex; align-items: center; padding: 4px;
    background: var(--bg-soft); border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .06em;
}
.lang a { padding: 5px 12px; border-radius: var(--r-pill); color: var(--muted); line-height: 1; transition: .15s; }
.lang a.on { background: #fff; color: var(--teal); box-shadow: 0 1px 4px rgba(19,28,24,.1); }

/* === BUTTONS === */
.btn {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--body-font); font-weight: 700; font-size: 15px;
    padding: 13px 22px; border-radius: var(--r-pill); line-height: 1;
    white-space: nowrap; cursor: pointer; border: 1.5px solid transparent;
    transition: transform .15s, background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.btn svg { width: 17px; height: 17px; }
.btn-dark { background: var(--dark); color: #fff; }
.btn-dark:hover { transform: translateY(-1px); background: #000; }
.btn-teal { background: var(--teal); color: #fff; box-shadow: 0 10px 26px -10px rgba(31,125,106,.6); }
.btn-teal:hover { background: var(--teal-dark); transform: translateY(-1px); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-1px); }
.btn-lg { padding: 16px 28px; font-size: 15.5px; }

/* === Typografia sekcji === */
.eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--display); font-weight: 600; font-size: 12.5px;
    letter-spacing: .22em; text-transform: uppercase; color: var(--teal);
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--teal); border-radius: 2px; }

h1, h2, h3 { font-family: var(--display); color: var(--ink); margin: 0; letter-spacing: -0.03em; line-height: 1.05; }
h1 { font-size: clamp(44px, 6vw, 82px); font-weight: 700; text-wrap: balance; }
h1 .teal { color: var(--teal); }
h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 700; line-height: 1.08; text-wrap: balance; }
h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
p { margin: 0; }
.lead { font-size: 18px; line-height: 1.6; color: var(--body); max-width: 540px; }
.sub { font-size: 17px; color: var(--body); max-width: 640px; margin-top: 12px; }

/* === HERO === */
.hero { padding: clamp(48px, 6vw, 88px) 0 clamp(40px, 5vw, 64px); }
.hero-grid {
    display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
.hero h1 { margin: 20px 0 22px; }
.hero .lead { margin-bottom: 30px; }
.hero-ctas { display: flex; gap: 13px; flex-wrap: wrap; }

/* Dashboard mock */
.mock {
    position: relative; background: var(--bg-card); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--shadow-md);
    padding: 22px 22px 24px; max-width: 460px; margin-left: auto;
}
.mock-head { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.mock-head .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(31,125,106,.14); }
.mock-head .t { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--ink); }
.mock-head .dots { margin-left: auto; display: flex; gap: 4px; }
.mock-head .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--line); }
.mock-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.mock-label { font-size: 13px; color: var(--body); font-weight: 600; }
.mock-pill { font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--teal); }
.mock-chart { display: flex; align-items: flex-end; gap: 9px; height: 108px; margin: 10px 0 18px; }
.mock-chart span { flex: 1; background: var(--bg-soft); border-radius: 6px 6px 0 0; }
.mock-chart span:nth-child(6) { background: var(--teal); }
.mock-chart span:nth-child(7) { background: var(--orange); }
.mock-foot { display: flex; align-items: flex-end; justify-content: space-between; border-top: 1px solid var(--line-2); padding-top: 14px; }
.mock-kpi .k-label { font-size: 12.5px; color: var(--body); font-weight: 600; }
.mock-kpi .k-value { font-family: var(--display); font-weight: 700; font-size: 34px; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1; }
.mock-delta { font-size: 12.5px; color: var(--teal); font-weight: 600; text-align: right; max-width: 120px; }
.mock-chip {
    position: absolute; left: -18px; bottom: 96px;
    background: var(--dark); color: #fff; border-radius: 14px;
    padding: 12px 16px; box-shadow: var(--shadow-md); max-width: 200px;
}
.mock-chip .c-label { font-family: var(--display); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.mock-chip .c-row { display: flex; align-items: center; gap: 9px; margin-top: 4px; font-size: 13px; font-weight: 600; }
.mock-chip .c-row .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); border-top-color: var(--orange); animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* === STATS === */
.stats { border-top: 1px solid var(--line); padding: clamp(32px, 4vw, 48px) 0; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.stat .n { font-family: var(--display); font-weight: 700; font-size: clamp(38px, 4vw, 52px); color: var(--ink); letter-spacing: -0.03em; line-height: 1; }
.stat .n em { color: var(--teal); font-style: normal; }
.stat .d { margin-top: 8px; font-size: 15px; color: var(--body); }

/* === SECTION shell === */
.section { padding: clamp(56px, 7vw, 100px) 0; }
.section-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 48px); }
.section-head h2 { margin: 14px 0 0; }

/* === OFERTA === */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
    background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 30px 28px; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: rgba(31,125,106,.35); }
.ico { width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; background: rgba(31,125,106,.09); }
.ico svg { width: 25px; height: 25px; color: var(--teal); }
.ico.orange { background: rgba(245,160,111,.16); }
.ico.orange svg { color: var(--orange-dark); }
.card h3 { margin-bottom: 9px; }
.card p { font-size: 15px; line-height: 1.6; }

/* === PROJEKTY === */
.projects { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.proj {
    position: relative; border-radius: var(--r-lg); padding: 30px 30px 0; overflow: hidden;
    min-height: 340px; display: flex; flex-direction: column;
    color: var(--ink); border: 1px solid var(--line);
    transition: transform .25s, box-shadow .25s;
}
.proj:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.proj-hossa { background: linear-gradient(150deg, #fff, #fdf4ec 70%, #fbe6d3); }
.proj-thesis { background: linear-gradient(150deg, #fff, #eef8f4 70%, #d7efe7); }
.proj-pfe { background: linear-gradient(150deg, #fff, #f1f6f4 70%, #e3efe9); }
.proj-dob { background: linear-gradient(150deg, #17321f, #1f4a4a 70%, #2b5f57); color: #eef7f2; border-color: transparent; }
.proj-dob h3, .proj-dob p { color: #eef7f2; }
.proj-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
.tag { font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--r-pill); background: #fff; color: var(--ink-2); border: 1px solid var(--line); }
.proj-dob .tag { background: rgba(255,255,255,.14); color: #fff; border-color: transparent; }
.proj h3 { font-size: 26px; font-weight: 700; margin-bottom: 10px; }
.proj p { font-size: 14.5px; line-height: 1.55; max-width: 420px; margin-bottom: 6px; }
.proj-arrow { position: absolute; top: 26px; right: 26px; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 17px; box-shadow: var(--shadow-sm); transition: .2s; }
.proj:hover .proj-arrow { background: var(--teal); color: #fff; transform: translate(3px,-2px); }
.proj-dob .proj-arrow { background: rgba(255,255,255,.15); color: #fff; box-shadow: none; }
.proj-visual { margin-top: auto; display: flex; justify-content: flex-end; padding-top: 20px; }
.phone { width: 186px; height: 262px; background: linear-gradient(180deg, #1b1b20, #0d0d11); border-radius: 30px 30px 8px 8px; padding: 9px; transform: translateY(26px) rotate(-3deg); box-shadow: 0 24px 40px -16px rgba(19,28,24,.4); }
.phone .scr { background: #fff; border-radius: 23px 23px 4px 4px; width: 100%; height: 100%; padding: 22px 15px 12px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.phone .p-lab { font-family: var(--display); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.phone .p-big { font-family: var(--display); font-size: 50px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--orange-dark); margin: 2px 0 3px; }
.phone .p-sub { font-size: 11px; font-weight: 600; color: var(--ink-2); }
.phone .p-bar { height: 6px; border-radius: 99px; background: #f0e3d6; margin-top: 8px; overflow: hidden; }
.phone .p-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--orange), var(--orange-dark)); }

/* === APLIKACJE (siatka) === */
.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 14px; }
.app {
    display: flex; flex-direction: column; gap: 8px; padding: 18px 20px;
    background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-md);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.app:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: rgba(31,125,106,.3); }
.app-link { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.store-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); }
.store-mini {
    font-family: var(--display); font-size: 11.5px; font-weight: 600; line-height: 1;
    padding: 6px 11px; border-radius: var(--r-pill); border: 1px solid var(--line);
    display: inline-flex; align-items: center; gap: 6px; transition: opacity .15s, background .15s;
}
.store-mini::before { font-size: 10px; }
.store-mini.gp { background: #14202e; color: #fff; border-color: #14202e; }
.store-mini.gp::before { content: "▶"; color: #4ade80; }
.store-mini.as { background: #fff; color: #14202e; }
.store-mini.as::before { content: ""; }
.store-mini:hover { opacity: .82; }
.app-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.app-name { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ink); }
.app-cat { font-size: 11.5px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.app-tag { font-size: 13.5px; line-height: 1.45; color: var(--body); margin: 0; }
.app-docs { margin-top: auto; font-family: var(--display); font-size: 12px; font-weight: 600; color: var(--teal); }

/* === KONTAKT === */
.contact-card {
    background: linear-gradient(140deg, var(--teal-dark), var(--teal) 65%, var(--teal-light));
    color: #fff; border-radius: var(--r-lg); padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 60px);
    display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 40px;
    position: relative; overflow: hidden;
}
.contact-card::after { content: ""; position: absolute; top: -90px; right: -90px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(245,160,111,.42), transparent 62%); }
.contact-card .eyebrow { color: rgba(255,255,255,.85); }
.contact-card .eyebrow::before { background: rgba(255,255,255,.6); }
.contact-card h2 { color: #fff; margin: 14px 0 10px; }
.contact-card h2 .o { color: var(--orange); }
.contact-card p { color: rgba(255,255,255,.86); font-size: 16px; position: relative; }
.contact-card .btn { position: relative; justify-self: end; }
.btn-white { background: #fff; color: var(--teal-dark); }
.btn-white:hover { transform: translateY(-2px); }

/* === FOOTER === */
.footer { border-top: 1px solid var(--line); padding: 30px 0 40px; }
.footer-in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; }
.footer-copy { text-align: center; font-size: 13px; color: var(--muted); }
.footer-links { display: flex; gap: 22px; }
.footer-links a { font-size: 13px; font-weight: 600; color: var(--ink-2); transition: color .15s; }
.footer-links a:hover { color: var(--teal); }

/* === RESPONSIVE === */
@media (max-width: 980px) {
    .hero-grid { grid-template-columns: 1fr; }
    .mock { margin: 0 auto; }
    .services { grid-template-columns: 1fr; }
    .projects { grid-template-columns: 1fr; }
    .contact-card { grid-template-columns: 1fr; gap: 24px; }
    .contact-card .btn { justify-self: start; }
}
@media (max-width: 760px) {
    .nav-links > a:not(.btn) { display: none; }
    .stats-grid { grid-template-columns: 1fr; gap: 22px; }
    .footer-in { grid-template-columns: 1fr; text-align: center; gap: 16px; justify-items: center; }
    .footer-links { flex-wrap: wrap; justify-content: center; }
    .phone { width: 160px; height: 226px; }
}
@media (max-width: 520px) {
    .hero-ctas { flex-direction: column; align-items: stretch; }
    .hero-ctas .btn { justify-content: center; }
    .brand .name { font-size: 28px; }
}