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

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

/* =========================================
ULTRA BACKGROUND SYSTEM
========================================= */

/* base gradient */

.process-overlay{
  position:absolute;
  inset:0;

  background:
  radial-gradient(circle at 20% 10%, rgba(201,161,90,.18), transparent 60%),
  radial-gradient(circle at 80% 90%, rgba(255,180,60,.12), transparent 60%),
  linear-gradient(180deg,#f6f7fb,#ffffff);

  z-index:1;
}

/* animated gold ambient */

.process::before{
  content:"";
  position:absolute;
  inset:-20%;

  background:
    radial-gradient(circle at 30% 40%, rgba(201,161,90,.35), transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,200,120,.25), transparent 55%);

  animation:processAmbient 18s linear infinite alternate;

  z-index:1;
  pointer-events:none;
}

@keyframes processAmbient{
  from{ transform:translate(0,0); }
  to{ transform:translate(120px,-80px); }
}

/* architectural SVG grid */

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

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

  opacity:.7;
  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;
  }
}

/* =========================================
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;
}

/* gold underline */

.process-intro::after{
  content:"";
  display:block;
  width:160px;
  height:4px;
  margin-top:28px;

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

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

/* =========================================
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;
}

/* gold line container */

.process-step::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:28px;
  padding:1px; /* ← 1px border */

  background:
    linear-gradient(
      120deg,
      transparent 0%,
      transparent 25%,
      rgba(201,161,90,.9) 50%,
      transparent 75%,
      transparent 100%
    );

  background-size:300% 300%;
  animation:vl24GoldBorderMove 6s linear infinite;

  /* ainult border */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;

  pointer-events:none;
}

/* animation */

@keyframes vl24GoldBorderMove{
  0%{ background-position:0% 50%; }
  100%{ background-position:200% 50%; }
}

/* hover tugevam */

.process-step:hover::after{
  animation-duration:2.5s;
  filter:brightness(1.3);
}

/* =========================================
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='%23c9a15a' 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='%23c9a15a' 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='%23c9a15a' 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='%23c9a15a' 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");
}

/* =========================================
VL24 — GOLD MOVING BORDER (FINAL)
========================================= */

.process-step{
  position:relative;
  overflow:hidden;
  border-radius:28px;
}

/* border layer */
.process-step::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:28px;
  padding:1px; /* border thickness */

  background:linear-gradient(
    120deg,
    transparent 0%,
    transparent 20%,
    rgba(201,161,90,.95) 45%,
    #fff3c9 50%,
    rgba(201,161,90,.95) 55%,
    transparent 80%
  );

  background-size:300% 300%;
  animation:vl24GoldBorderMove 6s linear infinite;

  /* ainult border */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;

  pointer-events:none;
  z-index:5;
}

/* animation */
@keyframes vl24GoldBorderMove{
  0%{ background-position:0% 50%; }
  100%{ background-position:200% 50%; }
}

/* hover boost */
.process-step:hover::after{
  animation-duration:2.5s;
  filter:brightness(1.4);
}

/* =========================================
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;
  }

}