/*
Theme Name: Cronizen
Theme URI: https://cronizen.com
Author: Cronizen
Description: Egyoldalas bemutatkozó téma a Cronizen számára – online megjelenés, web design és beüzemelés, Meta és Google hirdetések. Sötét, prémium megjelenés, beépített kapcsolati űrlappal.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cronizen
Tags: one-column, custom-colors, dark, landing-page
*/


  :root{
    --ink:#0B0E13;
    --ink-2:#0F131A;
    --panel:#141924;
    --panel-2:#181E2A;
    --line:#232B3A;
    --line-soft:#1A2029;
    --text:#E9ECF1;
    --muted:#98A2B2;
    --dim:#6A7383;
    --accent:#3ECFAE;
    --accent-deep:#1C7A67;
    --sand:#E3C79E;
    --maxw:1120px;
    --step-0:1rem;
    --step-1:1.15rem;
    --step-2:1.45rem;
    --step-3:2rem;
    --step-4:2.9rem;
    --step-5:clamp(2.6rem,6.2vw,4.6rem);
    --serif:"Fraunces","Iowan Old Style",Georgia,"Times New Roman",serif;
    --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
    --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  }

  *,*::before,*::after{box-sizing:border-box}

  body{
    margin:0;
    background:var(--ink);
    color:var(--text);
    font-family:var(--sans);
    font-size:var(--step-0);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3{font-family:var(--serif);font-weight:600;text-wrap:balance;margin:0;line-height:1.08}
  p{margin:0}
  a{color:inherit}
  ul{margin:0;padding:0;list-style:none}

  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

  .eyebrow{
    font-family:var(--mono);
    font-size:.72rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--accent);
  }
  .eyebrow--sand{color:var(--sand)}

  /* ---------- header ---------- */
  .site-head{
    position:sticky;top:0;z-index:40;
    background:rgba(11,14,19,.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line-soft);
  }
  .head-row{
    display:flex;align-items:center;gap:32px;
    height:66px;
  }
  .brand{
    display:flex;align-items:baseline;gap:9px;
    font-family:var(--serif);font-size:1.32rem;font-weight:700;
    letter-spacing:-.015em;text-decoration:none;
  }
  .brand .dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--accent);display:inline-block;
    transform:translateY(-1px);
  }
  .nav{display:flex;gap:26px}
  .nav a{
    text-decoration:none;color:var(--muted);font-size:.9rem;
    padding:4px 0;border-bottom:1px solid transparent;transition:color .18s,border-color .18s;
  }
  .nav a:hover{color:var(--text);border-color:var(--accent)}
  @media (max-width:860px){.nav{display:none}}

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    font-family:var(--sans);font-size:.92rem;font-weight:600;
    padding:12px 20px;border-radius:3px;text-decoration:none;
    border:1px solid transparent;cursor:pointer;
    transition:background .18s,border-color .18s,color .18s,transform .18s;
  }
  .btn--primary{background:var(--accent);color:#06120F;border-color:var(--accent)}
  .btn--primary:hover{background:#57E0C0;border-color:#57E0C0}
  .btn--ghost{border-color:var(--line);color:var(--text);background:transparent}
  .btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
  .btn--sm{padding:9px 16px;font-size:.85rem}
  .head-row .brand{margin-right:auto}

  /* ---------- hero ---------- */
  .hero{
    position:relative;overflow:hidden;
    border-bottom:1px solid var(--line-soft);
    padding:88px 0 64px;
  }
  .hero::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(720px 340px at 78% -10%, rgba(62,207,174,.14), transparent 62%),
      radial-gradient(560px 300px at 8% 108%, rgba(227,199,158,.07), transparent 60%);
  }
  .hero-inner{position:relative;z-index:1}
  .hero h1{
    font-size:var(--step-5);
    letter-spacing:-.02em;
    max-width:15ch;
    margin:20px 0 0;
  }
  .hero h1 em{font-style:normal;color:var(--accent)}
  .hero-lead{
    margin-top:26px;max-width:56ch;
    font-size:var(--step-1);color:var(--muted);
  }
  .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

  .facts{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:1px;background:var(--line-soft);
    border-block:1px solid var(--line-soft);
    margin-top:64px;
  }
  .fact{background:var(--ink);padding:22px 24px 24px}
  .fact dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
  .fact dd{margin:8px 0 0;font-size:1.02rem;color:var(--text)}
  @media (max-width:760px){.facts{grid-template-columns:1fr}}

  /* ---------- generic section ---------- */
  section{padding:92px 0}
  .sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:48px;max-width:62ch}
  .sec-head h2{font-size:var(--step-4);letter-spacing:-.015em}
  .sec-head p{color:var(--muted);max-width:58ch}

  /* ---------- services ---------- */
  #szolgaltatasok{border-bottom:1px solid var(--line-soft)}
  .services{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  @media (max-width:920px){.services{grid-template-columns:1fr}}
  .svc{
    display:flex;flex-direction:column;
    background:linear-gradient(180deg,var(--panel),var(--ink-2));
    border:1px solid var(--line);border-radius:4px;
    padding:28px 26px 26px;
    transition:border-color .2s,transform .2s;
  }
  .svc:hover{border-color:var(--accent-deep);transform:translateY(-2px)}
  .svc-mark{
    width:34px;height:34px;border:1px solid var(--line);border-radius:3px;
    display:grid;place-items:center;color:var(--accent);margin-bottom:20px;
  }
  .svc h3{font-size:var(--step-2);letter-spacing:-.01em}
  .svc > p{margin-top:12px;color:var(--muted);font-size:.95rem}
  .svc ul{margin-top:22px;display:flex;flex-direction:column;gap:10px;flex:1}
  .svc li{
    position:relative;padding-left:20px;font-size:.92rem;color:var(--text);
  }
  .svc li::before{
    content:"";position:absolute;left:0;top:.62em;
    width:7px;height:1px;background:var(--accent);
  }
  .svc-foot{
    margin-top:26px;padding-top:16px;border-top:1px solid var(--line-soft);
    font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--sand);
  }

  /* ---------- process ---------- */
  #folyamat{background:var(--ink-2);border-bottom:1px solid var(--line-soft)}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
  @media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
  @media (max-width:560px){.steps{grid-template-columns:1fr}}
  .step{padding:26px 26px 30px 0;border-top:1px solid var(--line);position:relative}
  .step + .step{padding-left:26px}
  @media (min-width:561px){.step + .step{border-left:1px solid var(--line-soft)}}
  .step-no{
    font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;
    color:var(--accent);display:block;margin-bottom:14px;
  }
  .step h3{font-size:1.18rem;font-family:var(--sans);font-weight:600;letter-spacing:-.005em;line-height:1.3}
  .step p{margin-top:10px;color:var(--muted);font-size:.92rem}

  /* ---------- about ---------- */
  .about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:start}
  @media (max-width:900px){.about-grid{grid-template-columns:1fr;gap:40px}}
  .about-body p + p{margin-top:18px}
  .about-body p{color:var(--muted);font-size:var(--step-1);line-height:1.62}
  .about-body strong{color:var(--text);font-weight:600}
  .pullquote{
    border-left:2px solid var(--accent);
    padding:4px 0 4px 24px;
    font-family:var(--serif);font-size:1.6rem;line-height:1.28;
    color:var(--text);margin:0 0 30px;
  }
  .creds{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
  .cred{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line-soft)}
  .cred-k{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);min-width:104px;padding-top:3px}
  .cred-v{font-size:.96rem}

  /* ---------- faq ---------- */
  #gyik{background:var(--ink-2);border-block:1px solid var(--line-soft)}
  .faq{border-top:1px solid var(--line)}
  details{border-bottom:1px solid var(--line-soft)}
  summary{
    list-style:none;cursor:pointer;
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    padding:20px 0;font-size:1.05rem;font-weight:500;
    transition:color .18s;
  }
  summary::-webkit-details-marker{display:none}
  summary:hover{color:var(--accent)}
  .chev{color:var(--dim);transition:transform .2s,color .2s;flex:0 0 auto}
  details[open] .chev{transform:rotate(45deg);color:var(--accent)}
  details p{padding:0 0 22px;color:var(--muted);max-width:70ch;font-size:.96rem}

  /* ---------- contact ---------- */
  .contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
  @media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:36px}}
  .contact-side h2{font-size:var(--step-3);letter-spacing:-.015em;margin-bottom:16px}
  .contact-side p{color:var(--muted);margin-bottom:28px}
  .contact-line{display:flex;flex-direction:column;gap:4px;margin-bottom:22px}
  .contact-line span{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
  .contact-line a{font-size:1.02rem;text-decoration:none;border-bottom:1px solid var(--accent-deep);width:fit-content;padding-bottom:2px}
  .contact-line a:hover{color:var(--accent)}

  form{
    background:var(--panel);border:1px solid var(--line);border-radius:4px;
    padding:30px 28px;
    display:grid;grid-template-columns:1fr 1fr;gap:18px;
  }
  @media (max-width:560px){form{grid-template-columns:1fr;padding:24px 20px}}
  .field{display:flex;flex-direction:column;gap:7px}
  .field--full{grid-column:1/-1}
  label{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
  input,select,textarea{
    font-family:var(--sans);font-size:.95rem;color:var(--text);
    background:var(--ink);border:1px solid var(--line);border-radius:3px;
    padding:11px 13px;width:100%;
    transition:border-color .18s;
  }
  textarea{min-height:118px;resize:vertical;line-height:1.5}
  input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none}
  input::placeholder,textarea::placeholder{color:#5C6473}
  select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
  .form-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
  .form-note{font-size:.78rem;color:var(--dim);max-width:38ch}
  .err{color:#F2836B;font-size:.8rem;min-height:1em}

  .sent{
    grid-column:1/-1;border:1px solid var(--accent-deep);border-radius:3px;
    background:rgba(62,207,174,.06);padding:20px 22px;display:none;
  }
  .sent h3{font-family:var(--sans);font-size:1.02rem;font-weight:600;color:var(--accent)}
  .sent p{margin-top:8px;color:var(--muted);font-size:.9rem}
  .sent-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
  form.done .field,form.done .form-foot{display:none}
  form.done .sent{display:block}

  /* ---------- footer ---------- */
  .site-foot{border-top:1px solid var(--line-soft);padding:40px 0 52px}
  .foot-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
  .foot-row p{font-size:.84rem;color:var(--dim)}
  .foot-links{display:flex;gap:20px}
  .foot-links a{font-size:.84rem;color:var(--muted);text-decoration:none}
  .foot-links a:hover{color:var(--accent)}

  /* ---------- motion ---------- */
  .rise{animation:rise .62s cubic-bezier(.2,.7,.3,1) both}
  .rise:nth-child(2){animation-delay:.06s}
  .rise:nth-child(3){animation-delay:.12s}
  .rise:nth-child(4){animation-delay:.18s}
  @keyframes rise{from{opacity:.001;transform:translateY(14px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
  }

  /* ---------- WordPress ---------- */
  .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
  .sent{display:block}
  .form-msg{
    grid-column:1/-1;border:1px solid var(--accent-deep);border-radius:3px;
    background:rgba(62,207,174,.06);padding:16px 18px;
  }
  .form-msg--err{border-color:#7A3B2F;background:rgba(242,131,107,.07)}
  .form-msg p{font-size:.92rem;color:var(--muted)}
  .form-msg strong{color:var(--text)}

  .page-body{max-width:760px;margin:0 auto;padding:96px 24px 110px}
  .page-body h1{font-size:var(--step-4);letter-spacing:-.015em;margin-bottom:28px}
  .page-body h2{font-size:var(--step-3);margin:40px 0 16px}
  .page-body p,.page-body li{color:var(--muted);margin-bottom:16px}
  .page-body ul{list-style:disc;padding-left:22px}
  .page-body a{color:var(--accent)}
  .page-body img{max-width:100%;height:auto;border-radius:4px}
  .post-list{display:flex;flex-direction:column;gap:28px;margin-top:36px}
  .post-list article{border-top:1px solid var(--line);padding-top:22px}
  .post-list h2{font-size:1.5rem;margin:0 0 8px}
  .post-list h2 a{text-decoration:none}
  .post-list h2 a:hover{color:var(--accent)}
  .post-meta{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

  .admin-bar .site-head{top:32px}
  @media (max-width:782px){.admin-bar .site-head{top:46px}}