/* ==========================================================================
   fizesan.ro — service pages

   Three pages that each answer one thing somebody types into Google. They
   sit on the same dark ground and reuse site.css for everything shared —
   type scale, buttons, the ember canvas, the footer. What is here is only
   the layout those three pages need.
   ========================================================================== */

.svc-hero{
  position:relative; z-index:14;
  padding-block:clamp(84px,13vh,150px) clamp(44px,7vh,86px);
  padding-inline:var(--pad);
}
.svc-hero__in{ max-width:1560px; margin-inline:auto; }
.svc-hero h1{
  font-family:var(--f-display); font-weight:800; font-stretch:116%;
  text-transform:uppercase; letter-spacing:-.035em; line-height:1.0;
  font-size:clamp(34px,6vw,84px); margin:.12em 0 0; max-width:17ch;
}
.svc-hero h1 em{ font-style:normal; color:var(--gold); display:block; }
.svc-hero .lede{ margin-top:clamp(18px,2.6vw,28px); }

.svc-act{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(24px,3.4vw,36px); }

/* three quick facts under the hero, in place of a paragraph nobody reads */
.svc-facts{
  list-style:none; margin:clamp(30px,5vh,56px) 0 0; padding:0;
  display:grid; gap:1px; background:var(--line-soft);
  border-block:1px solid var(--line-soft);
  grid-template-columns:1fr;
}
@media (min-width:700px){ .svc-facts{ grid-template-columns:repeat(3,1fr); } }
.svc-facts li{ background:var(--ink); padding:clamp(18px,2.4vw,26px) clamp(4px,1.4vw,22px); }
.svc-facts b{
  display:block; font-family:var(--f-display); font-weight:800; font-stretch:112%;
  font-size:clamp(22px,2.6vw,34px); letter-spacing:-.03em; line-height:1;
}
.svc-facts span{
  display:block; margin-top:8px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--paper-faint);
}

/* ------------------------------------------------------------- sections */

.svc{
  position:relative; z-index:14;
  padding-block:clamp(54px,8vh,104px);
  padding-inline:var(--pad);
}
.svc__in{ max-width:1560px; margin-inline:auto; }
.svc__h{
  font-family:var(--f-display); font-weight:800; font-stretch:114%;
  text-transform:uppercase; letter-spacing:-.032em; line-height:1.04;
  font-size:clamp(24px,3.6vw,50px); margin:.15em 0 0; text-wrap:balance;
}
.svc__h em{ font-style:normal; color:var(--gold); display:block; }
.svc__lede{ margin:clamp(14px,2vw,22px) 0 0; max-width:60ch; color:var(--paper-dim); }

/* what you get */
.svc-list{
  list-style:none; margin:clamp(26px,4vw,44px) 0 0; padding:0;
  display:grid; gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft);
  grid-template-columns:1fr;
}
@media (min-width:760px){ .svc-list{ grid-template-columns:repeat(2,1fr); } }
.svc-list li{ background:var(--ink); padding:clamp(20px,2.6vw,30px); }
.svc-list h3{
  font-family:var(--f-display); font-weight:700; font-stretch:108%;
  font-size:clamp(15px,1.5vw,19px); letter-spacing:-.02em; margin:0 0 7px;
}
.svc-list p{ margin:0; color:var(--paper-dim); font-size:.95rem; }

/* how it goes */
.svc-steps{ display:grid; gap:clamp(20px,3vw,34px); margin-top:clamp(26px,4vw,44px); grid-template-columns:1fr; }
@media (min-width:860px){ .svc-steps{ grid-template-columns:repeat(4,1fr); } }
.svc-step{ border-top:1px solid var(--line-soft); padding-top:16px; }
.svc-step b{
  display:block; font-family:var(--f-mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); margin-bottom:9px;
}
.svc-step h3{
  font-family:var(--f-display); font-weight:700; font-stretch:108%;
  font-size:clamp(15px,1.5vw,19px); letter-spacing:-.02em; margin:0 0 6px;
}
.svc-step p{ margin:0; color:var(--paper-dim); font-size:.93rem; }

/* the proof: a real page of the same kind, running in a frame */
.svc-proof{ margin-top:clamp(26px,4vw,44px); }
.svc-proof__frame{
  position:relative; border:1px solid var(--line-soft); background:var(--ink-2);
  aspect-ratio:16/10; overflow:hidden;
}
@media (max-width:720px){ .svc-proof__frame{ aspect-ratio:4/5; } }
.svc-proof__frame iframe{
  position:absolute; inset:0; width:1440px; height:900px; border:0;
  transform-origin:0 0; pointer-events:none;
}
@media (max-width:720px){ .svc-proof__frame iframe{ width:900px; height:1120px; } }
.svc-proof__bar{
  display:flex; gap:6px; padding:9px 12px;
  border-bottom:1px solid var(--line-soft); background:rgba(8,9,13,.86);
  position:relative; z-index:2;
}
.svc-proof__bar i{ width:7px; height:7px; border-radius:50%; background:var(--line); }
.svc-proof__foot{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  margin-top:16px;
}
.svc-proof__note{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--paper-faint);
}

/* questions */
.svc-faq{ margin-top:clamp(26px,4vw,44px); border-top:1px solid var(--line-soft); }
.svc-faq details{ border-bottom:1px solid var(--line-soft); }
.svc-faq summary{
  list-style:none; cursor:pointer; position:relative;
  padding:clamp(16px,2vw,22px) 44px clamp(16px,2vw,22px) 0;
  font-family:var(--f-display); font-weight:700; font-stretch:108%;
  font-size:clamp(15px,1.6vw,20px); letter-spacing:-.02em;
  transition:color .3s var(--ease);
}
.svc-faq summary::-webkit-details-marker{ display:none; }
.svc-faq summary:hover{ color:var(--gold); }
.svc-faq summary::after{
  content:'+'; position:absolute; right:6px; top:50%; translate:0 -50%;
  font-family:var(--f-mono); font-size:19px; color:var(--gold);
  transition:transform .3s var(--ease);
}
.svc-faq details[open] summary::after{ transform:rotate(45deg); }
.svc-faq p{ margin:0 0 clamp(16px,2vw,22px); max-width:66ch; color:var(--paper-dim); }

/* the other two services, at the end of each page */
.svc-more{
  display:grid; gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft); margin-top:clamp(26px,4vw,44px);
  grid-template-columns:1fr;
}
@media (min-width:700px){ .svc-more{ grid-template-columns:repeat(2,1fr); } }
.svc-more a{
  background:var(--ink); padding:clamp(20px,2.6vw,28px);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  transition:background .35s var(--ease);
}
.svc-more a:hover{ background:var(--ink-3); }
.svc-more b{
  display:block; font-family:var(--f-display); font-weight:700; font-stretch:108%;
  font-size:clamp(15px,1.5vw,19px); letter-spacing:-.02em;
}
.svc-more span{
  display:block; margin-top:5px; color:var(--paper-dim); font-size:.9rem;
}
.svc-more .arw{ color:var(--gold); flex:none; }

/* the footer carries the whole set, small */
.foot__svc{
  display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center;
  font-size:9.5px; letter-spacing:.16em; color:rgba(239,234,225,.28);
}
.foot__svc a{ color:rgba(239,234,225,.34); }
.foot__svc a:hover{ color:var(--gold); }

/* ---------------------------------------------------- the closing block

   These live in index.html's own <style>, which the service pages never
   load — so .wrap had no width and no padding and the whole closing block
   sat flush against the left edge. Ported here, once, for all three. */

.wrap{ width:100%; padding-inline:var(--pad); margin-inline:auto; max-width:1560px; }

.cta{
  position:relative; overflow:hidden; z-index:14;
  padding-block:clamp(68px,11.5vh,140px);
  text-align:center;
}
.cta::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(80% 90% at 50% 120%, rgba(216,162,74,.17), transparent 66%);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 22%);
          mask-image:linear-gradient(180deg, transparent, #000 22%);
}
.cta > *{ position:relative; z-index:1; }
.cta h2{
  font-family:var(--f-display); font-weight:800; font-stretch:114%;
  text-transform:uppercase; letter-spacing:-.035em; line-height:.88;
  font-size:clamp(32px,5.4vw,76px); margin:.2em 0 0;
}
.cta h2 em{ font-style:normal; color:var(--gold); display:block; }
.cta .eyebrow{ justify-content:center; }
.cta__row{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
  margin-top:clamp(28px,5vh,52px);
}
@media (max-width:640px){
  .cta__row{ flex-direction:column; align-items:stretch; }
  .cta__row .btn{ justify-content:center; }
}