/* ============================================================================
   MF Agency — wspólny styl podstron treściowych
   Wyodrębniony z polityka-prywatnosci.html, by wszystkie podstrony
   (o-nas, realizacje, faq, kontakt, regulamin, dziekujemy…) dzieliły
   jeden, spójny wygląd. index.html ma własny CSS pod silnik cząsteczek.
   ============================================================================ */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

/* Orbitron (z polskimi znakami) dla marki i nagłówków; treść w czytelnym Space Grotesk */
@font-face{font-family:'Orbitron';src:url('orbitron-pl-600.woff2?v=4') format('woff2');font-weight:500 600;font-display:swap}
@font-face{font-family:'Orbitron';src:url('orbitron-pl-700.woff2?v=4') format('woff2');font-weight:700 900;font-display:swap}

body{background:#000;color:#e7e7ea;font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.65;}
::selection{background:#8052ff;color:#fff}
a{color:#a98bff;text-decoration:none;transition:color .2s}
a:hover{color:#c4b1ff;text-decoration:underline}
img{max-width:100%;display:block}

.wrap{max-width:820px;margin:0 auto;padding:0 clamp(22px,5vw,40px);}
.wrap.wide{max-width:1060px;}

/* subtelna poświata u góry, żeby ciemna strona nie była płaska */
.bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(120% 80% at 50% -10%, rgba(128,82,255,0.14) 0%, rgba(0,0,0,0) 55%), #000;}

/* ---------- Nawigacja ---------- */
nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px clamp(22px,5vw,40px);background:rgba(0,0,0,0.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,0.07);}
.brand{display:flex;align-items:center;gap:11px;color:#fff;}
.brand:hover{text-decoration:none;}
.brand span{font-family:'Orbitron',ui-sans-serif,system-ui,sans-serif;font-size:17px;font-weight:600;letter-spacing:0.01em;}
.nav-links{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px);}
.nav-links a{font-size:13px;font-weight:500;letter-spacing:0.05em;text-transform:uppercase;color:#9a9a9a;}
.nav-links a:hover{color:#fff;text-decoration:none;}
.nav-links a[aria-current="page"]{color:#fff;}
.nav-right{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);}
.nav-cta{position:relative;overflow:hidden;font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:#fff;background:#8052ff;padding:11px 18px;border-radius:24px;transition:background .25s,transform .25s;white-space:nowrap;}
.nav-cta:hover{background:#9168ff;transform:translateY(-1px);text-decoration:none;color:#fff;}

/* Lśnienie — smuga światła przechodząca w pętli przez fioletowe przyciski CTA (nie dotyczy .btn-ghost) */
.btn::after,.nav-cta::after{content:"";position:absolute;top:0;left:0;width:55%;height:100%;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.55) 50%,rgba(255,255,255,0) 100%);transform:translateX(-200%) skewX(-18deg);animation:btnShine 4s ease-in-out infinite;pointer-events:none;}
@keyframes btnShine{0%{transform:translateX(-200%) skewX(-18deg);}55%{transform:translateX(320%) skewX(-18deg);}100%{transform:translateX(320%) skewX(-18deg);}}
@media (prefers-reduced-motion:reduce){.btn::after,.nav-cta::after{animation:none;display:none;}}
.back{font-size:13px;font-weight:500;letter-spacing:0.04em;color:#9a9a9a;}
.back:hover{color:#fff;text-decoration:none;}

/* ---------- Nagłówek dokumentu ---------- */
header.doc{padding:clamp(48px,8vw,90px) 0 26px;border-bottom:1px solid rgba(255,255,255,0.08);}
header.doc.plain{border-bottom:none;padding-bottom:8px;}
.eyebrow{font-family:'Orbitron',ui-sans-serif,system-ui,sans-serif;font-size:12px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:#ffb829;margin-bottom:18px;}
.eyebrow.violet{color:#8052ff;}
h1{font-family:'Orbitron',ui-sans-serif,system-ui,sans-serif;font-size:clamp(34px,5vw,56px);font-weight:700;line-height:1.05;letter-spacing:-0.02em;color:#fff;margin-bottom:18px;}
.meta{font-size:13px;color:#7d7d83;letter-spacing:0.02em;}
.lead{font-size:clamp(17px,1.6vw,20px);color:#c4c4c9;max-width:680px;margin:8px 0 0;}

/* ---------- Treść ---------- */
main{padding:14px 0 40px;}
section{padding:30px 0;border-bottom:1px solid rgba(255,255,255,0.06);}
section:last-of-type{border-bottom:none;}
section.flush{border-bottom:none;}
h2{font-family:'Orbitron',ui-sans-serif,system-ui,sans-serif;font-size:clamp(20px,2.4vw,27px);font-weight:600;letter-spacing:-0.01em;color:#fff;margin-bottom:14px;}
h2 .num{color:#8052ff;font-weight:600;margin-right:10px;}
h3{font-size:16px;font-weight:600;color:#fff;margin:18px 0 8px;}
p{margin:0 0 12px;color:#c4c4c9;}
ul{margin:6px 0 12px;padding-left:22px;}
li{margin:7px 0;color:#c4c4c9;}
li::marker{color:#8052ff;}
strong{color:#fff;font-weight:600;}
.note{margin-top:8px;padding:14px 16px;background:rgba(128,82,255,0.08);border:1px solid rgba(128,82,255,0.22);border-radius:12px;font-size:13.5px;color:#bdbdbd;}
.ph{color:#ffb829;font-weight:500;}

/* ---------- Przyciski ---------- */
.btn{position:relative;overflow:hidden;display:inline-block;font-size:13px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:#fff;background:#8052ff;padding:15px 26px;border-radius:24px;border:none;cursor:pointer;transition:background .25s,transform .25s;}
.btn:hover{background:#9168ff;transform:translateY(-2px);text-decoration:none;color:#fff;}
.btn-ghost{display:inline-block;font-size:13px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:#e7e7ea;background:transparent;border:1px solid rgba(255,255,255,0.22);padding:14px 24px;border-radius:24px;transition:border-color .25s,color .25s;}
.btn-ghost:hover{border-color:rgba(255,255,255,0.5);color:#fff;text-decoration:none;}

/* ---------- Karty / siatka ---------- */
.grid{display:grid;gap:18px;}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.10);border-radius:18px;padding:24px;}
.card h3{margin-top:0;font-family:'Orbitron',ui-sans-serif,system-ui,sans-serif;font-size:18px;}
.card .tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#ffb829;margin-bottom:10px;}

/* metryki (np. na case studies) */
.stats{display:flex;flex-wrap:wrap;gap:24px;margin:14px 0 4px;}
.stat-num{font-family:'Orbitron',ui-sans-serif,system-ui,sans-serif;font-size:clamp(26px,3vw,36px);font-weight:700;color:#8052ff;line-height:1;}
.stat-lbl{font-size:12.5px;color:#9a9a9a;margin-top:6px;}

/* ---------- FAQ (natywne details, bez JS) ---------- */
.faq-item{border-bottom:1px solid rgba(255,255,255,0.08);}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:'Orbitron',ui-sans-serif,system-ui,sans-serif;font-size:clamp(16px,1.8vw,19px);font-weight:600;color:#fff;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";font-family:ui-sans-serif,system-ui;font-size:24px;font-weight:400;color:#8052ff;transition:transform .25s;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item .faq-a{padding:0 0 22px;color:#c4c4c9;}
.faq-item .faq-a p:last-child{margin-bottom:0;}

/* ---------- Kontakt ---------- */
.contact-list{list-style:none;margin:8px 0 0;padding:0;}
.contact-list li{display:flex;flex-direction:column;gap:3px;margin:0 0 22px;}
.contact-list .k{font-size:12px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:#ffb829;}
.contact-list .v{font-size:17px;color:#fff;}
.contact-list .v a{color:#fff;}

/* ---------- Stopka ---------- */
footer{padding:48px 0 60px;color:#7d7d83;font-size:13px;}
footer .links{display:flex;flex-wrap:wrap;gap:14px 26px;padding-bottom:24px;}
footer .links a{color:#9a9a9a;text-transform:uppercase;font-size:12px;letter-spacing:0.05em;}
footer .links a:hover{color:#fff;text-decoration:none;}
footer .row{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;padding-top:24px;border-top:1px solid rgba(255,255,255,0.08);}

/* ---------- Responsywność ---------- */
@media (max-width:760px){
  .nav-links{display:none;}            /* na mobile nawigacja sekcji żyje w stopce */
  .grid.cols-2,.grid.cols-3{grid-template-columns:1fr;}
}