/*
Theme Name: SystemSupport
Theme URI: https://systemsupport.hu/
Author: SystemSupport
Description: Magyar nyelvű, reszponzív bemutatkozó sablon hálózat- és rendszerüzemeltetéshez.
Version: 1.4.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: systemsupport
*/

    @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
    :root { --ink:#2a1940; --muted:#6e6080; --plum:#190d2d; --deep:#25143e; --violet:#caa8ff; --accent-dark:#6836a7; --paper:#f9f6fc; --line:#e8def2; }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body { margin:0; color:var(--ink); background:var(--paper); font-family:'DM Sans',Arial,sans-serif; line-height:1.58; }
    a { color:inherit; text-decoration:none; }
    a:focus-visible, button:focus-visible { outline:3px solid var(--violet); outline-offset:4px; }
    .container { width:min(1180px,calc(100% - 48px)); margin-inline:auto; }
    .top { color:white; background:linear-gradient(90deg,rgba(20,10,36,.15) 0%,rgba(24,11,43,.45) 36%,rgba(24,11,43,.88) 60%,rgba(20,10,36,.97) 100%),url('assets/server-operator.webp') center 47%/cover no-repeat var(--plum); }
    header { min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid rgba(255,255,255,.13); }
    .brand { display:inline-flex; align-items:center; gap:12px; color:#fff; font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:500; letter-spacing:-.055em; white-space:nowrap; line-height:1; }
    .brand-icon { width:42px; height:42px; display:block; flex:none; }
    .brand-word strong { color:var(--violet); font-weight:700; }
    nav { display:flex; gap:33px; align-items:center; font-size:14px; font-weight:600; color:#dbd0e8; }
    nav a:hover, footer a:hover { color:var(--violet); }
    .nav-contact { border:1px solid rgba(202,168,255,.45); padding:11px 18px; border-radius:4px; color:var(--violet); }
    .hero { display:grid; grid-template-columns:.88fr 1.12fr; align-items:center; min-height:630px; padding:95px 0 116px; }
    .hero-copy-block { grid-column:2; max-width:620px; }
    .eyebrow { display:flex; align-items:center; gap:11px; text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:700; color:var(--accent-dark); }
    .eyebrow::before { content:''; width:25px; height:2px; background:currentColor; }
    .hero .eyebrow { color:var(--violet); }
    h1,h2,h3,p { margin-top:0; }
    h1,h2,h3 { font-family:'Space Grotesk',sans-serif; letter-spacing:-.055em; line-height:1.08; }
    h1 { font-size:clamp(48px,5.3vw,79px); margin:24px 0 26px; font-weight:600; }
    h1 em { color:var(--violet); font-style:normal; }
    .hero-copy { color:#cbbbdc; font-size:18px; max-width:560px; margin-bottom:34px; }
    .actions { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
    .button { display:inline-flex; justify-content:center; align-items:center; gap:16px; min-height:52px; padding:13px 23px; border-radius:4px; font-size:14px; font-weight:700; transition:transform .2s,background .2s; }
    .button:hover { transform:translateY(-2px); }
    .button.primary { background:var(--violet); color:var(--plum); }
    .button.primary:hover { background:#dec9ff; }
    .button.text { color:#f3ebff; padding-left:0; }
    .button.text span { color:var(--violet); font-size:22px; line-height:0; }
    .intro { background:#f1e9fb; border-bottom:1px solid #e3d4f0; }
    .intro-inner { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:24px 0; }
    .intro strong { font-family:'Space Grotesk',sans-serif; font-size:16px; letter-spacing:-.03em; }.intro p { margin:0; font-size:14px; color:#634c78; max-width:710px; }
    section { scroll-margin-top:30px; }
    .section-pad { padding:112px 0; }
    .section-heading { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:end; margin-bottom:45px; }
    h2 { font-size:clamp(37px,4vw,56px); margin:16px 0 0; font-weight:600; }
    .section-heading p { color:var(--muted); max-width:480px; margin:0 0 3px; font-size:16px; }
    .services { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
    .service { background:#fff; min-height:279px; border:1px solid var(--line); padding:28px 29px 26px; transition:transform .2s,border-color .2s; }
    .service:hover { transform:translateY(-4px); border-color:#b791d6; }
    .service .num { display:block; color:#835bb1; font-family:'Space Grotesk',sans-serif; font-size:13px; margin-bottom:45px; }
    .service h3 { font-size:23px; margin:0 0 14px; }.service p { color:#6e617f; font-size:14px; margin:0; line-height:1.65; }
    .approach { background:#f3ecfa; padding:108px 0; }
    .approach-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; }
    .approach .lead { color:var(--muted); max-width:450px; margin-top:26px; font-size:17px; }
    .steps { border-top:1px solid #d8c5e9; }
    .step { display:grid; grid-template-columns:50px 1fr; gap:20px; border-bottom:1px solid #d8c5e9; padding:25px 0; }.step b { font-family:'Space Grotesk',sans-serif; color:#7540b5; font-size:15px; }.step h3 { font-size:19px; margin:0 0 7px; }.step p { margin:0; color:#6e617f; font-size:14px; }
    .band { background:#e9dcf8; padding:30px 0; }.band-inner { display:flex; align-items:center; gap:36px; flex-wrap:wrap; }.band strong { font-family:'Space Grotesk',sans-serif; font-size:15px; }.band span { font-size:13px; font-weight:700; color:#6f4a97; border-left:1px solid #cdb6e4; padding-left:23px; }
    .contact { background:var(--plum); color:#fff; padding:110px 0 92px; }
    .contact-inner { display:grid; grid-template-columns:1.1fr .9fr; gap:90px; align-items:end; }
    .contact h2 { max-width:680px; }.contact .eyebrow { color:var(--violet); }
    .contact p { color:#cab9dd; max-width:520px; font-size:16px; margin:23px 0 0; }
    .contact-note { border:1px solid #5f4778; background:#25143f; padding:29px; }
    .contact-note small { display:block; color:var(--violet); letter-spacing:.12em; text-transform:uppercase; font-weight:700; font-size:11px; margin-bottom:12px; }
    .contact-note strong { display:block; font-family:'Space Grotesk',sans-serif; font-size:23px; letter-spacing:-.04em; line-height:1.3; }.contact-note p { margin:13px 0 22px; font-size:13px; color:#bdaed0; }
    .contact-note a { display:inline-flex; align-items:center; gap:12px; color:var(--violet); border-bottom:1px solid rgba(202,168,255,.6); padding-bottom:4px; font-size:13px; font-weight:700; }
    .contact-note a.contact-detail { display:inline-block; max-width:100%; overflow-wrap:anywhere; margin-top:10px; color:#fff; font-family:'Space Grotesk',sans-serif; font-size:19px; letter-spacing:-.03em; }
    .contact-detail-label { display:block; margin-top:26px; color:var(--violet); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
    footer { background:#130921; color:#b5a7c4; padding:28px 0; font-size:12px; }.footer-inner { display:flex; justify-content:space-between; gap:20px; align-items:center; flex-wrap:wrap; }footer .brand { font-size:17px; }footer .brand-icon { width:30px; height:30px; }
    @media(max-width:900px) { nav { gap:17px; } .hero { grid-template-columns:.65fr 1.35fr; } .section-heading { gap:35px; } .approach-grid,.contact-inner { gap:45px; } }
    @media(max-width:720px) { .container { width:min(100% - 36px,1180px); } .top { background-image:linear-gradient(90deg,rgba(20,10,36,.68),rgba(20,10,36,.72)),url('assets/server-operator.webp'); background-position:27% center; } header { min-height:72px; } nav a:not(.nav-contact) { display:none; }.nav-contact { padding:8px 12px; } .hero { grid-template-columns:1fr; min-height:650px; padding:90px 0 90px; } .hero-copy-block { grid-column:1; max-width:540px; } h1 { font-size:clamp(46px,11vw,70px); }.intro-inner { display:block; }.intro p { margin-top:8px; }.section-pad,.approach { padding:75px 0; }.section-heading,.approach-grid,.contact-inner { grid-template-columns:1fr; gap:24px; }.section-heading { margin-bottom:30px; }.services { grid-template-columns:repeat(2,1fr); }.service { min-height:260px; }.contact { padding:78px 0; }.contact-inner { gap:38px; }.contact-note { max-width:510px; } }
    @media(max-width:530px) { .services { grid-template-columns:1fr; }.service { min-height:0; }.service .num { margin-bottom:27px; }.band-inner { gap:12px 18px; }.band strong { flex:0 0 100%; }.band span { padding-left:12px; }.band span:nth-child(2) { border-left:0; padding-left:0; } }
    @media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button,.service { transition:none; } }