/*
Theme Name: IT Solutions
Theme URI: https://sylcom.pl/
Update URI: https://sylcom.pl/it-solutions
Author: IT Solutions
Description: Ciemny, edytowalny motyw dla firmy IT.
Version: 1.0.0
Text Domain: it-solutions
*/

:root { --bg:#0b080a; --panel:#160b10; --text:#f8f5f6; --muted:#ddd4d7; --accent:#ff3f62; --accent-dark:#76072b; --line:#46343a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:radial-gradient(circle at 10% 45%,#190a10 0,transparent 28%),var(--bg); color:var(--text); font-family:Arial,sans-serif; font-size:16px; line-height:1.65; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; height:auto; }
.site-header { position:relative; z-index:3; background:rgba(12,6,9,.94); }
.header-inner,.site-main,.footer-inner { width:min(1120px,calc(100% - 48px)); margin:auto; }
.header-inner { min-height:100px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:flex; align-items:center; gap:12px; font-size:18px; font-weight:700; }
.brand-mark { color:var(--accent); width:36px; height:36px; }
.brand-mark circle,.brand-mark path { stroke:currentColor; fill:none; stroke-width:2; }
.primary-menu { display:flex; align-items:center; gap:47px; list-style:none; margin:0; padding:0; font-size:14px; font-weight:700; text-transform:uppercase; }
.primary-menu a { display:block; padding:37px 0 16px; border-bottom:2px solid transparent; }
.primary-menu .current-menu-item a,.primary-menu a:hover { border-color:var(--accent); }
.menu-toggle { display:none; color:var(--text); border:1px solid var(--line); background:transparent; padding:9px 12px; font-weight:700; }
.hero { min-height:500px; display:flex; align-items:center; background-color:#10080b; background-image:linear-gradient(90deg,rgba(8,5,7,.88) 0%,rgba(8,5,7,.8) 38%,rgba(8,5,7,.2) 100%),var(--hero-image,radial-gradient(circle at 78% 48%,#3a101c,transparent 30%)); background-position:center; background-size:cover; }
.hero-content { max-width:600px; padding:80px 0; }
.hero h1 { margin:0; font-size:clamp(40px,5vw,61px); line-height:1.23; letter-spacing:.01em; text-transform:uppercase; }
.accent-line { width:39px; height:3px; margin:26px 0; background:var(--accent); }
.hero p { margin:0 0 24px; font-size:18px; }
.button { display:inline-block; padding:13px 31px; color:#fff; background:linear-gradient(100deg,var(--accent-dark),#5a0620); border:1px solid #83112f; font-size:14px; font-weight:700; text-transform:uppercase; }
.button:hover { background:var(--accent-dark); }
.section { padding:60px 0; }
.section-title { margin:0 auto 44px; text-align:center; font-size:25px; text-transform:uppercase; }
.section-title:after { content:""; display:block; width:37px; height:3px; margin:13px auto 0; background:var(--accent); }
.services { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.service { text-align:center; }
.service-icon { width:61px; height:61px; margin:0 auto 25px; color:var(--accent); }
.service-icon * { fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }
.service h3 { margin:0 0 14px; font-size:16px; text-transform:uppercase; }
.service h3:after { content:""; display:block; width:25px; height:2px; margin:18px auto 0; background:var(--accent); }
.service p { margin:0; color:var(--muted); font-size:14px; }
.about { display:grid; grid-template-columns:1.4fr .6fr; align-items:center; gap:40px; padding:40px; background:radial-gradient(circle at 87% 42%,#360912,transparent 24%),linear-gradient(110deg,#200b12,#170a0e); border:1px solid #271118; border-radius:5px; }
.about h2 { margin:0; font-size:24px; text-transform:uppercase; }
.about p { max-width:600px; margin:0; font-size:17px; }
.about-icon { justify-self:center; width:120px; color:var(--accent); }
.about-icon * { fill:none; stroke:currentColor; stroke-width:2; }
.contact-layout { display:grid; grid-template-columns:.75fr 1.25fr; gap:54px; }
.contact-details { display:grid; gap:21px; padding-right:42px; border-right:1px solid #85747a; }
.contact-detail { display:flex; align-items:center; gap:20px; }
.contact-detail svg { flex:none; width:24px; height:24px; color:var(--accent); }
.contact-detail svg * { fill:none; stroke:currentColor; stroke-width:1.8; }
.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.contact-form input,.contact-form textarea { width:100%; padding:13px 15px; color:var(--text); border:1px solid #57464c; border-radius:3px; background:transparent; font:inherit; font-size:13px; }
.contact-form textarea { grid-column:1/-1; min-height:105px; resize:vertical; }
.contact-form .button { grid-column:2; justify-self:end; min-width:150px; cursor:pointer; }
.form-notice { grid-column:1/-1; margin:0; color:#98e29b; }
.form-error { color:#ff8b9d; }
.content-page { max-width:820px; min-height:55vh; padding:74px 0; }
.content-page h1 { font-size:42px; line-height:1.2; text-transform:uppercase; }
.content-page a { color:var(--accent); text-decoration:underline; }
.site-footer { margin-top:60px; background:linear-gradient(100deg,#250a12,#12070a); }
.footer-inner { min-height:101px; display:flex; align-items:center; justify-content:space-between; gap:24px; font-size:14px; }
@media (max-width:760px) {
  .header-inner,.site-main,.footer-inner { width:min(100% - 32px,1120px); }
  .header-inner { min-height:75px; flex-wrap:wrap; padding:15px 0; }
  .menu-toggle { display:block; }
  .primary-menu { display:none; order:3; flex-basis:100%; flex-direction:column; align-items:stretch; gap:0; }
  .primary-menu.is-open { display:flex; }
  .primary-menu a { padding:9px 0; }
  .hero { min-height:550px; background-position:65% center; }
  .hero-content { padding:65px 0; }
  .hero h1 { font-size:39px; }
  .services { grid-template-columns:repeat(2,1fr); gap:44px 22px; }
  .about,.contact-layout { grid-template-columns:1fr; }
  .about { padding:30px 25px; }
  .about-icon { display:none; }
  .contact-details { padding:0 0 28px; border:0; border-bottom:1px solid #85747a; }
  .footer-inner { min-height:110px; flex-direction:column; justify-content:center; text-align:center; gap:4px; }
}
@media (max-width:420px) { .services { grid-template-columns:1fr; } .contact-form { grid-template-columns:1fr; } .contact-form .button { grid-column:1; } }