/* ===== Process Steps Section ===== */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600&display=swap');

.process-steps {
    padding: 6rem 2rem;
    background-color: #f6f6f8; /* subtle off-white/gray */
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.ps-container {
    position: relative;
    max-width: 1000px;
    width: 100%;
}

/* Header */
.ps-header {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    z-index: 10;
}

.ps-header .ps-tag {
    display: inline-block;
    color: #f97316; /* orange */
    background: #ffedd5;
    padding: 0.4rem 1.25rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.ps-header .ps-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.ps-header .ps-desc {
    color: #64748b;
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto;
}

/* Handwritten Annotations */
.ps-note {
    position: absolute;
    font-family: 'Caveat', cursive;
    color: #8b96a5;
    font-size: 1.25rem;
    line-height: 1.1;
    z-index: 10;
}

.ps-note svg {
    position: absolute;
    width: 40px;
    height: 40px;
    overflow: visible;
}

.note-1 {
    top: 32%;
    left: -12%;
    text-align: right;
    transform: rotate(-3deg);
}
.note-1 svg { top: -20px; right: -45px; stroke: #f97316; }

.note-2 {
    top: 32%;
    right: -12%;
    text-align: left;
    transform: rotate(-5deg);
}
.note-2 svg { top: 5px; left: -50px; stroke: #3b82f6; }

.note-3 {
    top: 72%;
    left: -12%;
    text-align: right;
    transform: rotate(2deg);
}
.note-3 svg { top: -20px; right: -45px; stroke: #8b5cf6; }

.note-4 {
    top: 72%;
    right: -14%;
    text-align: left;
    transform: rotate(-4deg);
}
.note-4 svg { top: 10px; left: -45px; stroke: #f97316; }


/* Grid Layout */
.ps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    position: relative;
    z-index: 5;
}

/* Individual Cards */
.ps-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05);
    height: 100%;
    min-height: 380px;
    position: relative;
    /* Start hidden for scroll animation */
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* Each card comes from a different direction */
.ps-card:nth-child(1) { transform: translateX(-60px) translateY(-30px); transition-delay: 0s; }
.ps-card:nth-child(2) { transform: translateX(60px) translateY(-30px);  transition-delay: 0.15s; }
.ps-card:nth-child(3) { transform: translateX(-60px) translateY(30px);  transition-delay: 0.3s; }
.ps-card:nth-child(4) { transform: translateX(60px) translateY(30px);   transition-delay: 0.45s; }

/* Triggered state */
.process-steps.ps-animated .ps-card {
    opacity: 1;
    transform: translateX(0) translateY(0);
}

.ps-step {
    font-size: 0.9rem;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 1rem;
}

/* Visual Area (Top Half) */
.ps-visual {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 160px;
    margin-bottom: -40px; /* pull down to intersect deeply with tab */
    z-index: 1; /* Puts visual BEHIND the content area */
}

/* Generic mockups inside visuals */
.ps-mockup {
    position: relative;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* Content Area (Bottom Half folder tab) */
.ps-content {
    background: var(--bg-c);
    border-radius: 16px;
    padding: 1.5rem;
    position: relative;
    z-index: 2; /* Content tab sets ON TOP of visual */
    /* This clip-path creates the folder tab cutout effect */
    clip-path: polygon(0 35px, 25% 35px, 35% 0, 100% 0, 100% 100%, 0% 100%);
    margin-top: 0;
    min-height: 140px;
}

/* Inner line for styling */
.ps-content::after {
    content: '';
    position: absolute;
    bottom: 45%;
    left: 1.5rem;
    right: 1.5rem;
    height: 1px;
    background: rgba(0,0,0,0.06);
}

.ps-content h3 {
    color: var(--txt-c);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    margin-top: 1.5rem; /* push down clear of the tab */
}

.ps-content p {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
    font-weight: 500;
}

/* --- Specific Card Visual Decorations --- */

/* Card 1 */

.vis-1 .photo {
    width: 260px;
    height: 185px;
    border: 4px solid #fff;
    border-radius: 16px;
    transform: rotate(-5deg);
    background-image: url('https://images.unsplash.com/photo-1560250097-0b93528c311a?w=520&h=370&fit=crop&crop=face');
    background-size: cover;
    background-position: center top;
    box-shadow: 0 10px 30px rgba(0,0,0,0.14);
    overflow: hidden;
}
.vis-1 .icon-badge {
    position: absolute;
    top: 12px;
    left: -22px;
    width: 52px;
    height: 52px;
    background: #3b82f6;
    border-radius: 50%;
    border: 3px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Card 2 */
.vis-2 .note1, .vis-2 .note2 {
    width: 120px;
    height: 120px;
    background: #fef08a; /* sticky yellow */
    box-shadow: 2px 8px 20px rgba(0,0,0,0.1);
    position: relative;
    background-repeat: no-repeat;
    background-position: center 25px; /* offset below the top band */
    background-size: 70%;
    border-radius: 2px;
}
/* creating the slightly darker top adhesive band of a post-it */
.vis-2 .note1::before, .vis-2 .note2::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 18px;
    background: rgba(0,0,0,0.04);
}

.vis-2 .note1 { 
    transform: rotate(-6deg) translate(15px, 5px); 
    z-index: 2;
    /* Sketch SVG 1 (arrows & curves) */
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g stroke="%23334155" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M40 20 L60 35 L40 50 M15 20 Q5 35 15 50 M25 25 Q15 35 25 45 M30 80 Q10 70 30 60 M60 70 L75 80 L60 90 M50 80 L65 90 L50 100"/></g></svg>');
}
.vis-2 .note2 { 
    transform: rotate(8deg) translate(-5px, -5px); 
    background-color: #fde047; /* Slightly deeper yellow for contrast */
    z-index: 1;
    /* Sketch SVG 2 (spheres & lines) */
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g stroke="%23334155" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none"><circle cx="70" cy="30" r="22"/><line x1="52" y1="20" x2="88" y2="20"/><line x1="48" y1="30" x2="92" y2="30"/><line x1="52" y1="40" x2="88" y2="40"/><path d="M20 70 Q40 50 60 70 Q40 90 20 70 M10 60 Q30 40 50 60 M20 80 Q40 60 60 80"/></g></svg>');
}

/* Card 3 */
.vis-3 {
    perspective: 1000px;
}
.vis-3 .app1, .vis-3 .app2 {
    width: 120px;
    height: 120px;
    border-radius: 26px;
    border: 4px solid #fff;
    background-size: cover;
    background-position: center;
}
.vis-3 .app1 {
    box-shadow: 0 15px 25px rgba(225, 29, 72, 0.2), 0 0 0 8px rgba(254, 226, 226, 0.4);
    background-color: #f43f5e;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="g" width="12" height="12" patternUnits="userSpaceOnUse"><path d="M12 0L0 0 0 12" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23g)"/><path d="M45 25 A16 16 0 0 1 70 35 A16 16 0 0 1 55 52 A22 22 0 0 1 55 90 A22 22 0 0 1 25 65 A16 16 0 0 1 45 42" fill="none" stroke="rgba(159,18,57,0.8)" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    transform: rotate(-8deg) translate(5px, 0px);
    z-index: 2;
    position: relative;
}
.vis-3 .app2 {
    box-shadow: 0 15px 25px rgba(88, 28, 135, 0.2), 0 0 0 8px rgba(243, 232, 255, 0.5);
    background-color: #5b21b6;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="16" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/><circle cx="50" cy="50" r="28" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/><circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/><g transform="rotate(45 50 50)" fill="%23fff" opacity="0.8"><rect x="45" y="20" width="10" height="10" rx="1"/><rect x="20" y="45" width="10" height="10" rx="1"/><rect x="70" y="45" width="10" height="10" rx="1"/><rect x="45" y="70" width="10" height="10" rx="1"/><rect x="32" y="32" width="10" height="10" rx="1"/><rect x="58" y="32" width="10" height="10" rx="1"/><rect x="32" y="58" width="10" height="10" rx="1"/><rect x="58" y="58" width="10" height="10" rx="1"/></g><rect x="32" y="45" width="36" height="14" rx="4" transform="rotate(-45 50 50)" fill="rgba(255,255,255,0.3)"/><path d="M65 35 L75 25" stroke="rgba(255,255,255,0.9)" stroke-width="8" stroke-linecap="round"/></svg>');
    transform: rotate(6deg) translate(-25px, 20px);
    z-index: 1;
}

/* Card 4 */
.vis-4 {
    display: flex;
    gap: 16px;
    align-items: center;
}
.vis-4 .logo-icon {
    width: 75px;
    height: 75px;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}
.vis-4 .logo-icon:nth-child(1) { 
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g transform="rotate(45 50 50)" fill="%23fff"><rect x="44" y="16" width="12" height="12" rx="2"/><rect x="16" y="44" width="12" height="12" rx="2"/><rect x="72" y="44" width="12" height="12" rx="2"/><rect x="44" y="72" width="12" height="12" rx="2"/><rect x="30" y="30" width="12" height="12" rx="2"/><rect x="58" y="30" width="12" height="12" rx="2"/><rect x="30" y="58" width="12" height="12" rx="2"/><rect x="58" y="58" width="12" height="12" rx="2"/></g><rect x="32" y="44" width="36" height="14" rx="4" transform="rotate(-45 50 50)" fill="%230f172a"/></svg>'), linear-gradient(135deg, #a855f7, #fbcfe8); 
}
.vis-4 .logo-icon:nth-child(2) { 
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M45 25 A16 16 0 0 1 70 35 A16 16 0 0 1 55 52 A22 22 0 0 1 55 90 A22 22 0 0 1 25 65 A16 16 0 0 1 45 42" fill="none" stroke="%23fff" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/></svg>'), linear-gradient(135deg, #f43f5e, #fb7185); 
}
.vis-4 .logo-icon:nth-child(3) { 
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M50 15 L50 85 M15 50 L85 50 M25 25 L75 75 M25 75 L75 25" stroke="%23fff" stroke-width="12" stroke-linecap="round"/></svg>'), linear-gradient(135deg, #c084fc, #38bdf8, #fde047); 
}


/* Responsive */
@media (max-width: 768px) {
    .ps-header .ps-title {
        font-size: 1.9rem;
    }
}

@media (max-width: 900px) {
    .ps-grid {
        grid-template-columns: 1fr;
    }
    .ps-note {
        display: none; /* Hide handwritten notes on small screens */
    }
}