/* =========================================
VL24 PROCESS — ULTRA PREMIUM 2026
========================================= */

.process{
  position:relative;
  overflow:hidden;
  padding:140px 0;
}


/* =========================================
LAYOUT
========================================= */

.process-layout{
  position:relative;
  z-index:5;

  display:grid;
  grid-template-columns:420px 1fr;
  gap:90px;
}

@media(max-width:900px){
  .process-layout{
    grid-template-columns:1fr;
    gap:50px;
  }
}

/* =========================================
LEFT INTRO
========================================= */

.process-intro{
  position:sticky;
  top:140px;
}

.process-intro h2{
  font-size:48px;
  font-weight:900;
  line-height:1.1;

  background:
    linear-gradient(
      120deg,
      #0f172a,
      #1e293b,
      #0f172a
    );

  -webkit-background-clip:text;
  color:transparent;
}

.process-intro p{
  margin-top:16px;
  font-size:18px;
  color:#475569;
}


/* =========================================
TIMELINE
========================================= */

.process-steps{
  position:relative;
  display:grid;
  gap:40px;
}

/* glowing gold line */

.process-steps::before{
  content:"";
  position:absolute;
  left:22px;
  top:0;
  bottom:0;
  width:3px;

  background:
    linear-gradient(
      to bottom,
      rgba(201,161,90,.2),
      #c9a15a,
      rgba(201,161,90,.2)
    );

  box-shadow:
    0 0 30px rgba(201,161,90,.6);

    z-index:0;
}

/* =========================================
STEP CARD
========================================= */

.process-step{
  position:relative;

  display:grid;
  grid-template-columns:120px 1fr;
  gap:28px;

  padding:40px;

  border-radius:28px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.9),
      rgba(255,255,255,.75)
    );

  backdrop-filter:blur(22px);

  border:1px solid rgba(15,23,42,.06);

  box-shadow:
    0 40px 100px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.9);

  transition:.35s;
}

.process-step{
  position:relative;
  z-index:2; /* ⭐ card joone peal */

  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(transparent,transparent) border-box;
}


/* hover energy */

.process-step:hover{
  transform:translateY(-8px);
  box-shadow:
    0 60px 140px rgba(0,0,0,.18),
    0 0 40px rgba(201,161,90,.18);
}




/* =========================================
HUGE NUMBER — HERO STYLE
========================================= */

.step-num{
  font-size:90px;
  font-weight:900;
  line-height:1;

  background:
    linear-gradient(
      120deg,
      #c9a15a,
      #fff3c9,
      #c9a15a
    );

  -webkit-background-clip:text;
  color:transparent;

  text-shadow:
    0 10px 40px rgba(201,161,90,.45);

  opacity:.95;
}

/* =========================================
TEXT
========================================= */

.process-step h3{
  font-size:24px;
  font-weight:900;
  margin-bottom:10px;
  color:#0f172a;
}

.process-step p{
  font-size:17px;
  line-height:1.6;
  color:#475569;
}

/* =========================================
PROCESS — INNER GOLD MOVING BORDER (VL24)
========================================= */

.process-step{
  position:relative;
  overflow:hidden;
}


/* =========================================
PROCESS TITLE — ULTRA DARK → GOLD
========================================= */

.process-intro h2{

  background: linear-gradient(
    105deg,
    #020617 0%,     /* deep black */
    #0f172a 35%,    /* dark navy */
    #1e293b 60%,    /* dark slate */
    #c9a15a 88%,    /* gold */
    #fff3c9 100%    /* gold highlight */
  );

  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;

  font-weight:900;
  letter-spacing:-0.02em;

  /* tugev depth */
  text-shadow:
    0 2px 4px rgba(0,0,0,.25),
    0 8px 30px rgba(0,0,0,.18),
    0 6px 18px rgba(201,161,90,.12);
}



/* =========================================
PROCESS STEP — SVG ICON RIGHT (FINAL)
========================================= */

.process-step::before{
  content:"";
  position:absolute;

  right:30px;
  top:50%;
  transform:translateY(-50%);

  width:240px;
  height:240px;

  opacity:.26; /* ⭐ natuke rohkem nähtav */

  pointer-events:none;

  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;

  filter:
    drop-shadow(0 25px 60px rgba(201,161,90,.45));

  z-index:0;
}


/* sisu peale */
.process-step > *{
  position:relative;
  z-index:2;
}

/* float */

@media (prefers-reduced-motion: no-preference){
  .process-step::before{
    animation:processIconFloat 8s ease-in-out infinite alternate;
  }
}

.process-step{
  padding-right:140px;
}



/* =====================================================
01 — FLOOR PLAN
===================================================== */

.process-step[data-icon="plan"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4e157' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18'/%3E%3Cpath d='M9 3v7h6V3'/%3E%3Cpath d='M9 14v7M15 10v11M3 9h6M15 14h6'/%3E%3C/svg%3E");
}


/* =====================================================
02 — CALENDAR / BOOKING
===================================================== */

.process-step[data-icon="calendar"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4e157' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18M8 14h3M8 18h6'/%3E%3C/svg%3E");
}


/* =====================================================
03 — CONTRACT / DOCUMENT
===================================================== */

.process-step[data-icon="contract"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4e157' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l3 3v15a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/%3E%3Cpath d='M14 3v4h4M8 13h8M8 17h6M8 9h4'/%3E%3C/svg%3E");
}


/* =====================================================
04 — KEYS
===================================================== */

.process-step[data-icon="keys"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4e157' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 14a4 4 0 1 1 3.6-2.2L21 12v3h-3v3h-3v-3l-5.2-.2'/%3E%3Ccircle cx='7' cy='14' r='1'/%3E%3C/svg%3E");
}


/* =========================================
PROCESS MOBILE SPACING FIX
========================================= */

@media (max-width: 900px){

  /* rohkem ruumi teksti ja esimese kasti vahele */
  .process-intro{
    margin-bottom:120px;
  }

}

/* =========================================
PROCESS — MOBILE MOVE UP
========================================= */

@media (max-width:900px){

  .process{
    padding-top:0px;   /* enne 140px */
    padding-bottom:100px;
  }

}

/* =========================================
PROCESS STEP — MOBILE STACK LAYOUT
number → title → text
========================================= */

@media (max-width:900px){

  .process-step{
    grid-template-columns:1fr;   /* kõik üksteise alla */
    gap:12px;
    padding:30px 24px;
  }

  /* number keskele */
  .step-num{
    font-size:120px;
    text-align:center;
    margin-bottom:6px;
  }

  /* text block */
  .process-step > div{
    text-align:center;
  }

}

/* =========================================
PROCESS — MOBILE SVG ICON TO BOTTOM CENTER
(REAL FIX)
========================================= */

@media (max-width:900px){

  /* ruum ikoonile */
  .process-step{
    padding-bottom:140px;
    padding-right:24px; /* eemaldab desktop offseti */
  }

  /* ⭐ SVG watermark liigub alla keskele */
  .process-step::before{
    right:auto;
    left:50%;
    top:auto;
    bottom:20px;

    transform:translateX(-50%);

    width:260px;
    height:260px;

    opacity:.18;
  }

}

/* =========================================
VL24 PROCESS — HEATEENUS LIGHT PREMIUM
========================================= */

.process{
  position:relative;
  overflow:hidden;
  padding:140px 0;
  background:#f3f6f9;
}


/* subtle architectural grid */

.process::before{
  content:"";
  position:absolute;
  inset:0;

  background-image:url("data:image/svg+xml,%3Csvg width='160' height='160' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='rgba(15,23,42,.04)' stroke-width='1'%3E%3Cpath d='M0 80H160M80 0V160'/%3E%3C/g%3E%3C/svg%3E");

  opacity:.8;
  z-index:1;
}


/* =========================================
LAYOUT
========================================= */

.process-layout{
  position:relative;
  z-index:5;

  display:grid;
  grid-template-columns:420px 1fr;
  gap:90px;
}

@media(max-width:900px){
  .process-layout{
    grid-template-columns:1fr;
    gap:50px;
  }
}


/* =========================================
INTRO
========================================= */

.process-intro{
  position:sticky;
  top:140px;
}

.process-intro h2{
  font-family:"Outfit",sans-serif;
  font-size:48px;
  font-weight:600;
  color:#0f172a;
}

.process-intro p{
  margin-top:16px;
  font-size:18px;
  color:#475569;
}


/* =========================================
TIMELINE
========================================= */

.process-steps{
  position:relative;
  display:grid;
  gap:40px;
}

.process-steps::before{
  content:"";
  position:absolute;
  left:22px;
  top:0;
  bottom:0;
  width:2px;
  background:rgba(15,23,42,.08);
}


/* =========================================
STEP CARD — CLEAN PREMIUM
========================================= */

.process-step{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:120px 1fr;
  gap:28px;

  padding:40px;

  border-radius:24px;

  background:#fff;

  border:1px solid rgba(15,23,42,.06);

  box-shadow:
    0 20px 60px rgba(0,0,0,.08);

  transition:.3s ease;
}

.process-step:hover{
  transform:translateY(-6px);
  border-color:var(--brand-primary);
  box-shadow:
    0 30px 80px rgba(0,0,0,.12);
}


/* =========================================
STEP NUMBER
========================================= */

.step-num{
  font-size:90px;
  font-weight:800;
  line-height:1;

  color:var(--brand-primary);
  opacity:.9;
}


/* =========================================
TEXT
========================================= */

.process-step h3{
  font-size:24px;
  font-weight:600;
  margin-bottom:10px;
  color:#0f172a;
}

.process-step p{
  font-size:17px;
  line-height:1.6;
  color:#475569;
}


/* =========================================
SVG WATERMARK ICON
========================================= */

.process-step::before{
  content:"";
  position:absolute;
  right:30px;
  top:50%;
  transform:translateY(-50%);

  width:200px;
  height:200px;

  opacity:.06;

  background-repeat:no-repeat;
  background-size:contain;
}


/* =========================================
MOBILE
========================================= */

@media(max-width:900px){

  .process-step{
    grid-template-columns:1fr;
    text-align:center;
  }

  .step-num{
    font-size:120px;
  }

}

/* =========================================
PROCESS EYEBROW — HERO STYLE
========================================= */

.process .vl24-eyebrow-pill{
  background:rgba(255,255,255,.7);
  border:1px solid var(--brand-primary);
  backdrop-filter:blur(10px);
}

.process .hero-eyebrow{
  color:#111;
}

/* =========================================
PROCESS CARDS — BRAND GREEN BORDER
========================================= */

.process-step{
  border:2px solid var(--brand-primary) !important;
}

/* =========================================
PROCESS STEP NUMBER — GREEN OUTLINE STYLE
01 / 02 / 03
========================================= */

.step-num{

  /* remove vana gradient/gold */
  background:none !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  text-shadow:none !important;

  /* roheline outline */
  -webkit-text-stroke:1px var(--brand-primary);
  text-stroke:1px var(--brand-primary); /* future support */

  /* veidi premium spacing */
  letter-spacing:-0.02em;

  opacity:1;
}

/* =========================================
PROCESS TIMELINE LINE — BRAND GREEN
========================================= */

.process-steps::before{
  background:var(--brand-primary) !important;
  box-shadow:none !important; /* eemaldab vana glow */
}

/* =========================================
PROCESS BG — DIAGONAL GREEN FLOW LINES
dense / premium / brand color
========================================= */

.process{
  position:relative !important;
  overflow:hidden !important;

  /* neutraalne taust (mitte roheline) */
  background:linear-gradient(
    180deg,
    #f2f5f8 0%,
    #f8fafc 50%,
    #ffffff 100%
  ) !important;
}


/* =========================================
DENSE DIAGONAL FLOW LINES
========================================= */

.process::before{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  z-index:0;

  /* SVG flow lines — diagonaalis + tihedad */
  background-image:url("data:image/svg+xml,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'>\
<g stroke='%23d4e157' stroke-width='2' fill='none' opacity='0.1'>\
<path d='M-200 100 Q200 -50 1000 300'/>\
<path d='M-200 180 Q200 30 1000 380'/>\
<path d='M-200 260 Q200 110 1000 460'/>\
<path d='M-200 340 Q200 190 1000 540'/>\
<path d='M-200 420 Q200 270 1000 620'/>\
<path d='M-200 500 Q200 350 1000 700'/>\
<path d='M-200 580 Q200 430 1000 780'/>\
</g>\
</svg>");

  background-size:1600px 1600px;
  background-repeat:no-repeat;

  /* diagonaalne suund */
  transform:rotate(-12deg);
}


/* soft depth */
.process::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.6), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.4), transparent 50%);
}


/* content above */
.process-layout{
  position:relative;
  z-index:5;
}

/* =================================
PROCESS TITLE — SAME AS SERVICES
================================= */

.process .section-title,
.process-intro h2{

  font-family:"Outfit",sans-serif !important;
  font-weight:600 !important;

  font-size:clamp(36px,4vw,56px) !important;
  line-height:1.1 !important;

  letter-spacing:-0.02em !important;
  margin:0 0 16px !important;

  /* ⭐ IDENTNE SERVICES GRADIENT */
  background:linear-gradient(
    90deg,
    #111 0%,
    #111 3%,
    #2a3a12 5%,
    var(--brand-primary) 50%,
    #2a3a12 70%,
    #111 90%
  ) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;

  color:transparent !important;
  text-shadow:none !important;
}

/* =========================================
PROCESS — MOBILE/TABLET SPACING FIX
removes huge empty space before steps
========================================= */

@media (max-width:900px){

  /* ⭐ sticky põhjustab ghost spacingu */
  .process-intro{
    position:relative !important;
    top:auto !important;
    margin-bottom:30px !important; /* enne 120px */
  }

  /* section ei tohi jätta suurt ülemist õhku */
  .process{
    padding-top:80px !important;
  }

  /* layout gap väiksemaks */
  .process-layout{
    gap:30px !important;
  }

}