@charset "utf-8";
/**
 * Tabs section styles — tab navigation, content panels, and card visuals
 * for the "Step by Step" section (#tabs).
 */

/* ---- Tabs: Step by Step ---- */
.tabs-section {
    background: linear-gradient(180deg, transparent 0%, rgba(255, 215, 0, 0.03) 50%, transparent 100%);
}

.tabs-section .section-subtitle {
    max-width: 560px;
}

.tabs-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 48px;
    align-items: stretch;
}

.tabs-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tab-btn {
    padding: 18px 20px;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    color: var(--text-secondary);
    text-align: left;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Space Grotesk', sans-serif;
    transform: translateX(0);
    display: flex;
    align-items: center;
    gap: 16px;
}

.tab-btn:hover {
    border-color: var(--border-glow);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    transform: translateX(6px);
}

.tab-btn.active {
    background: linear-gradient(135deg, var(--accent-red), #ff6b6b);
    border-color: var(--accent-red);
    color: var(--text-primary);
    transform: translateX(8px);
    box-shadow: 0 4px 24px rgba(255, 61, 90, 0.35);
}

.tab-step {
    font-family: 'Syne', sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--accent-gold);
    opacity: 0.9;
    flex-shrink: 0;
}

.tab-btn.active .tab-step {
    color: rgba(255, 255, 255, 0.9);
}

.tab-label {
    flex: 1;
    line-height: 1.4;
}

.tabs-content {
    padding: 48px;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: 24px;
    min-height: 380px;
    position: relative;
    overflow: hidden;
}

.tabs-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-red), var(--accent-gold));
    opacity: 0.6;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block !important;
}

/* Tab content enter animation */
.tab-content .tab-text {
    opacity: 0;
}

.tab-content .tab-image {
    opacity: 0;
}

.tab-content.active .tab-text {
    animation: tabSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}

.tab-content.active .tab-image {
    animation: tabSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
}

.tab-content.active .tab-image img {
    animation: tabImageZoom 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

@keyframes tabSlideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes tabImageZoom {
    from {
        transform: scale(1.05);
    }
    to {
        transform: scale(1);
    }
}

.tab-content h3 {
    font-family: 'Syne', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -1px;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.tab-content p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.6;
}

.tab-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.tab-text {
    flex: 1;
}

.tab-badge {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--accent-gold);
    margin-bottom: 16px;
    text-transform: uppercase;
}

.tab-text h3 {
    font-family: 'Syne', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -1px;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.tab-text p {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 16px;
}

.tab-text p:last-child {
    margin-bottom: 0;
}

.tab-image {
    flex: 1;
    border-radius: 20px;
    overflow: hidden;
    height: 350px;
    position: relative;
}

.tab-image::after {
    content: '';
    position: absolute;
    inset: 0;
    /*background: linear-gradient(135deg, transparent 60%, rgba(255, 61, 90, 0.05) 100%);*/
    pointer-events: none;
}

.tab-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.tab-content.active .tab-image:hover img {
    transform: scale(1.03);
}

@media (max-width: 920px) {
    .tabs-container {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .tabs-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .tab-btn {
        flex: 1 1 calc(50% - 4px);
        min-width: 140px;
    }

    .tab-step {
        display: none;
    }

    .tabs-content {
        padding: 32px 24px;
        min-height: 320px;
    }

    .tab-image {
        height: 280px;
    }
}

/* ============================================================
   Tab card visuals — CSS illustrations inside each tab panel.
   Tab 3 (.sbc-*): website card with puzzle widget
   Tab 2 (.sb2-*, .cw-*): chat widget customiser
   Tab 1 (.t1-*): AI agent with signal arcs and corner badges
   ============================================================ */

.sbc-stage {
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 350px;
    --sbc-grad: linear-gradient(125deg, #ffcf3a 0%, #ff7a1e 45%, var(--accent-red) 100%);
    --sbc-gradV: linear-gradient(180deg, #ffcf3a 0%, var(--accent-red) 100%);
}
.sbc-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    aspect-ratio: 17 / 13;
    background: linear-gradient(160deg, rgba(251,176,11,.05), rgba(255,61,90,.05));
    border-radius: 18px 60px 18px 18px;
    container-type: inline-size;
}
.sbc-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px 60px 18px 18px;
    padding: 4px;
    background: var(--sbc-grad);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    filter: drop-shadow(0 0 8px rgba(255,61,90,.30));
}
.sbc-header {
    display: flex;
    align-items: center;
    gap: 3.4%;
    height: 22%;
    padding: 0 7%;
    border-bottom: 4px solid transparent;
    border-image: var(--sbc-grad) 1;
}
.sbc-ic { transition: transform .18s ease, filter .18s ease; }
.sbc-ic:hover { transform: scale(1.2); filter: drop-shadow(0 0 6px rgba(251,176,11,.55)); }
.sbc-oval   { width: 5.4%; aspect-ratio: 1/1; border-radius: 50%; background: #ff5d6c; }
.sbc-target { width: 5.4%; aspect-ratio: 1/1; border-radius: 50%; background: #fbb00b; }
.sbc-ring   { width: 5.4%; aspect-ratio: 1/1; border-radius: 50%; background: #ffd700; }
.sbc-body { display: flex; gap: 7%; padding: 7% 7% 0; }
.sbc-thumb {
    position: relative; flex: 0 0 32%; aspect-ratio: 1/1.03;
    border-radius: 8px; overflow: hidden;
    background: linear-gradient(135deg, rgba(251,176,11,.08), rgba(255,61,90,.08));
}
.sbc-thumb::before { content:""; position:absolute; inset:0; border-radius:8px; padding:4px; background: var(--sbc-gradV);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.sbc-sun { position:absolute; left:16%; top:18%; width:16%; aspect-ratio:1/1; border-radius:50%; background:#ffd700; }
.sbc-hill { position:absolute; left:0; bottom:0; width:100%; height:42%;
    background: linear-gradient(135deg,#ff6b82,var(--accent-red));
    clip-path: polygon(0 100%,18% 40%,42% 70%,68% 25%,100% 60%,100% 100%); }
.sbc-lines { flex:1; display:flex; flex-direction:column; gap:11%; padding-top:3%; }
.sbc-ln { height: 9px; border-radius: 6px; background: var(--sbc-grad); }
.sbc-ln.w1 { width:78%; } .sbc-ln.w2 { width:95%; opacity:.85; }
.sbc-ln.w3 { width:84%; opacity:.7; } .sbc-ln.w4 { width:62%; opacity:.55; }
.sbc-foot { display:flex; align-items:center; gap:18px; padding: 6% 7% 0; }
.sbc-foot .sbc-ln.f1 { width:64px; height:16px; opacity:1; }
.sbc-foot .sbc-ln.f2 { width:96px; height:30px; border-radius:15px; opacity:1; }
.sbc-pill { position:absolute; right:4%; top:30%; width:3%; height:38%; border-radius:10px; background: var(--sbc-gradV); opacity:.9; }
.sbc-puzzle { position:absolute; right:2%; bottom:-10%; width:30%; height:auto;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
    transform-origin: center;
    animation: sbcFloat 2.6s ease-in-out infinite; }
@keyframes sbcFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-7px) rotate(-2.5deg); }
}
.sbc-badge { position:absolute; right:5%; bottom:-9%; width:19%; aspect-ratio:1/1; border-radius:28%;
    background: var(--sbc-grad); display:flex; align-items:center; justify-content:center;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); transform-origin:center;
    animation: sbcFloat 2.6s ease-in-out infinite; }
.sbc-badge svg { width:56%; height:56%; }

.sbc-chat { height:78%; box-sizing:border-box; display:flex; flex-direction:column; gap:4.5%; padding:7% 8% 0; }
.sbc-bub { flex:0 0 auto; height:15%; border-radius:14px; }
.sbc-bub.in  { align-self:flex-start; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); border-bottom-left-radius:4px; }
.sbc-bub.out { align-self:flex-end; background:var(--sbc-grad); border-bottom-right-radius:4px; }
.sbc-bub.s1 { width:50%; } .sbc-bub.s2 { width:64%; } .sbc-bub.s3 { width:42%; } .sbc-bub.s4 { width:56%; }

.sb2-wrap { position:relative; width:100%; max-width:440px; aspect-ratio:17 / 13; box-sizing:border-box;
    display:flex; align-items:center; gap:5%; padding:4%; }
.cw-widget { flex:0 0 46%; height:96%; position:relative; border-radius:18px; overflow:hidden; box-sizing:border-box;
    display:flex; flex-direction:column; background:rgba(255,255,255,0.03); }
.cw-widget::before { content:""; position:absolute; inset:0; border-radius:18px; padding:2.5px; background:var(--sbc-gradV);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; z-index:2; pointer-events:none; }
.cw-head { height:20%; display:flex; align-items:center; gap:7px; padding:0 9%; background-color:#ff3d5a; animation:cwAccent 6s infinite; }
.cw-head .av { flex:0 0 auto; width:13px; height:13px; border-radius:50%; background:rgba(255,255,255,.92); }
.cw-head .ln { width:42%; height:5px; border-radius:3px; background:rgba(255,255,255,.75); }
.cw-body { flex:1; display:flex; flex-direction:column; justify-content:center; gap:9%; padding:8% 9%; }
.cw-b { height:15%; border-radius:9px; }
.cw-b.in  { align-self:flex-start; width:64%; background:rgba(255,255,255,.12); border-bottom-left-radius:3px; }
.cw-b.out { align-self:flex-end;   width:54%; background-color:#ff3d5a; border-bottom-right-radius:3px; animation:cwAccent 6s infinite; }
.cw-input { height:18%; margin:0 9% 9%; border-radius:16px; background:rgba(255,255,255,.07);
    display:flex; align-items:center; justify-content:flex-end; padding:0 5%; }
.cw-input .send { width:16px; height:16px; border-radius:50%; background-color:#ff3d5a; animation:cwAccent 6s infinite; }
@keyframes cwAccent {
    0%,20%   { background-color:#fbb00b; }
    25%,45%  { background-color:#ff3d5a; }
    50%,70%  { background-color:#ffd700; }
    75%,95%  { background-color:#ff6b82; }
    100%     { background-color:#fbb00b; }
}
.cw-panel { flex:1; align-self:stretch; position:relative; box-sizing:border-box;
    background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.09); border-radius:16px;
    display:flex; flex-direction:column; justify-content:space-evenly; padding:6% 9%; }
.cw-grp { display:flex; flex-direction:column; gap:10px; }
.cw-lab { width:34%; height:6px; border-radius:3px; background:rgba(255,255,255,0.28); }
.cw-sws { display:flex; gap:12px; }
.cw-sw { position:relative; width:22px; height:22px; border-radius:50%; }
.cw-sw.c1 { background:#fbb00b; } .cw-sw.c2 { background:#ff3d5a; } .cw-sw.c3 { background:#ffd700; } .cw-sw.c4 { background:#ff6b82; }
.cw-sw::after { content:""; position:absolute; inset:-5px; border-radius:50%; border:2.5px solid #fff; opacity:0; animation:cwRing 6s infinite; }
.cw-sw.c1::after { animation-delay:0s; } .cw-sw.c2::after { animation-delay:-1.5s; } .cw-sw.c3::after { animation-delay:-3s; } .cw-sw.c4::after { animation-delay:-4.5s; }
@keyframes cwRing { 0%{opacity:1} 20%{opacity:1} 25%{opacity:0} 100%{opacity:0} }
.cw-chips { display:flex; gap:12px; }
.cw-chip { width:38px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font:800 16px/1 'Syne',sans-serif; }
.cw-chip.on  { background:var(--sbc-grad); color:#1a1208; }
.cw-chip.off { color:#fff; border:2px solid transparent; background:linear-gradient(#0e0b12,#0e0b12) padding-box, var(--sbc-grad) border-box; }
.cw-slider { position:relative; display:flex; align-items:center; }
.cw-slider::before, .cw-slider::after { content:""; width:3px; height:16px; border-radius:2px; background:var(--sbc-grad); }
.cw-line { flex:1; height:3px; border-radius:2px; background:var(--sbc-grad); }
.cw-knob { position:absolute; left:58%; top:50%; width:15px; height:15px; border-radius:50%; background:#fff; transform:translateY(-50%); box-shadow:0 1px 4px rgba(0,0,0,.4); animation:cwKnob 6s ease-in-out infinite; }
@keyframes cwKnob { 0%,100%{ left:38%; } 50%{ left:74%; } }
.sb2-badge { position:absolute; right:1%; bottom:-1%; width:16%; aspect-ratio:1/1; border-radius:30%;
    background:var(--sbc-grad); display:flex; align-items:center; justify-content:center;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.45)); transform-origin:center;
    animation: sbcFloat 2.6s ease-in-out infinite; }
.sb2-badge svg { width:52%; height:52%; }

.t1-wrap { position:relative; width:100%; max-width:440px; margin-inline:auto; }
.t1-wrap::before { content:""; display:block; padding-top:76.47%; }
.t1-bg { position:absolute; inset:0; width:100%; height:100%; z-index:1; overflow:visible; }
.t1-logo2 { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:27%; z-index:2; filter:drop-shadow(0 5px 16px rgba(255,61,90,.4)); }
.tab-image .t1-logo2 img { display:block; width:100%; height:auto; object-fit:contain; }
/* dots march along the arcs (flowing signal) + a brightness pulse travelling outward */
.t1-wave { animation: t1march 1.6s linear infinite, t1glow 2.4s ease-in-out infinite; }
.t1-wave.w2 { animation-delay: 0s, 0.8s; }
.t1-wave.w3 { animation-delay: 0s, 1.6s; }
@keyframes t1march { to { stroke-dashoffset: -18; } }
@keyframes t1glow { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.t1-ico { position:absolute; z-index:3; width:17%; aspect-ratio:1; border-radius:50%; background:var(--sbc-grad);
    display:grid; place-items:center; box-shadow:0 5px 14px rgba(0,0,0,.45); }
.t1-ico svg { width:52%; height:52%; }
.t1-ico.tl { top:3%;    left:3%;  animation:t1float 4s ease-in-out 0s   infinite; }
.t1-ico.tr { top:3%;    right:3%; animation:t1float 4s ease-in-out -1s  infinite; }
.t1-ico.bl { bottom:3%; left:3%;  animation:t1float 4s ease-in-out -2s  infinite; }
.t1-ico.br { bottom:3%; right:3%; animation:t1float 4s ease-in-out -3s  infinite; }
@keyframes t1float { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

/* ===== Tab 4 — "Communicate With Customers": headset + platform avatars + conversation log ===== */
.t4-wrap {
    position: relative;
    width: 95%;
    max-width: 320px;
    aspect-ratio: 4 / 3;
    display: flex;
    gap: 6%;
    align-items: stretch;
    padding: 7% 8%;
    box-sizing: border-box;
    background: rgba(255,255,255,0.03);
    border-radius: 22px;
}
.t4-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 22px;
    padding: 2px;
    background: var(--sbc-gradV);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    filter: drop-shadow(0 0 8px rgba(255,61,90,.25));
}

/* left column: headset SVG + avatar row */
.t4-left { flex:0 0 46%; display:flex; flex-direction:column; align-items:center; justify-content:space-evenly; gap:0; }

.t4-hs { width:82%; filter:drop-shadow(0 6px 18px rgba(255,61,90,.4)); animation:sbcFloat 3.2s ease-in-out infinite; }
.t4-hs svg { width:100%; height:auto; display:block; }

/* platform avatar circles */
.t4-avs { display:flex; gap:8%; align-items:center; justify-content:center; width:100%; }

.t4-av {
    position: relative;
    width: 28%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1.5px solid rgba(255,255,255,0.14);
    animation: t1float 4s ease-in-out infinite;
}
.t4-av:nth-child(2) { animation-delay:-1.4s; }
.t4-av:nth-child(3) { animation-delay:-2.8s; }

/* platform icon — bottom-right corner of avatar */
.t4-plat {
    position: absolute;
    right: -3px; bottom: -3px;
    width: 38%; aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    outline: 1.5px solid #0e0b12;
}
.t4-plat svg { width:100%; height:100%; display:block; }

/* right column: conversation log entries */
.t4-log { flex:1; display:flex; flex-direction:column; gap:0; justify-content:space-evenly; }

.t4-entry {
    display: flex;
    flex-direction: column;
    gap: 5px;
    opacity: 0;
    animation: t4arrive 5s ease-in-out infinite;
}
.t4-entry:nth-child(1) { animation-delay:0s;   }
.t4-entry:nth-child(2) { animation-delay:0.9s; }
.t4-entry:nth-child(3) { animation-delay:1.8s; }
@keyframes t4arrive { 0%{ opacity:0; transform:translateX(8px); } 18%{ opacity:1; transform:none; } 100%{ opacity:1; } }

.t4-ts {
    font-family: 'Space Grotesk', monospace;
    font-size: 0.54rem;
    font-weight: 600;
    color: var(--accent-gold);
    opacity: 0.75;
}

/* message bars */
.t4-msg {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.14);
    width: 88%;
}
.t4-msg2 { width: 64%; opacity: 0.7; }

/* first entry gets the gradient (most recent / active) */
.t4-entry:nth-child(1) .t4-msg:not(.t4-msg2) { background: var(--sbc-grad); }

/* floating eye badge */
.t4-badge {
    position: absolute;
    right: -4%; bottom: -10%;
    width: 18%; aspect-ratio: 1;
    border-radius: 28%;
    background: var(--sbc-grad);
    display: flex; align-items:center; justify-content:center;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
    transform-origin: center;
    animation: sbcFloat 2.6s ease-in-out infinite;
}
.t4-badge svg { width:56%; height:56%; }

/* ---- Card interactivity ---- */

/* 3-D tilt base (transform applied by JS) */
.sbc-stage { will-change: transform; }

/* Tab 1 — corner icon hover (filter + shadow only — no transform so float animation runs clean) */
.t1-ico {
    cursor: pointer;
    transition: filter 0.2s ease, box-shadow 0.2s ease;
}
.t1-ico:hover {
    filter: brightness(1.25);
    box-shadow: 0 5px 14px rgba(0,0,0,.45), 0 0 0 3px rgba(255,207,58,.7), 0 0 18px rgba(255,122,30,.6);
}

/* Tab 2 — swatch cursor + picked ring */
.cw-sw { cursor: pointer; transition: outline 0.15s, outline-offset 0.15s; }
.cw-sw.picked { outline: 2.5px solid rgba(255,255,255,.85); outline-offset: 3px; }

/* Tab 3 — puzzle / badge hover brightness */
.sbc-puzzle, .sbc-badge {
    cursor: pointer;
    transition: filter 0.25s ease, transform 0.25s ease;
}
.sbc-puzzle:hover { filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)) brightness(1.35) saturate(1.2); }
.sbc-badge:hover  { filter: drop-shadow(0 8px 22px rgba(255,61,90,.65)) brightness(1.2); }

/* Tab 4 — avatar hover glow ring */
.t4-av {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.t4-av:hover {
    transform: scale(1.2) translateY(-3px);
    box-shadow: 0 0 0 2.5px rgba(255,207,58,.7), 0 8px 18px rgba(0,0,0,.45);
    animation-play-state: paused;
}

/* Tab 4 — headset hover glow */
.t4-hs { transition: filter 0.3s ease; }
.t4-hs:hover { filter: drop-shadow(0 8px 28px rgba(255,61,90,.7)); }

/* Tab 4 / Tab 2 / Tab 1 badges hover */
.sb2-badge, .t4-badge {
    cursor: pointer;
    transition: filter 0.25s ease;
}
.sb2-badge:hover, .t4-badge:hover { filter: drop-shadow(0 8px 22px rgba(255,61,90,.65)) brightness(1.15); }

@media (max-width: 920px) {
    .sbc-stage { height: 300px; }
    .sbc-card { max-width: 360px; }
}