:root { --bx-bg-primary:#191A1E; --bx-bg-surface:#313447; --bx-accent-purple:    #A183E0; --bx-violet-primary:   #4E1FA3; --bx-violet-electric:  #661EB9; --bx-highlight-yellow: #F5D255; --bx-accent-cyan:      #36E7C4; --bx-white:     #FFFFFF; --bx-text-body: rgba(210, 218, 235, 0.82); --bx-text-secondary:   rgba(214, 220, 235, 0.72); --bx-border-card:      rgba(161, 131, 224, 0.18); --bx-border-row:rgba(161, 131, 224, 0.07); --bx-grad-text: linear-gradient(90deg, #36E7C4 0%, #A183E0 50%, #661EB9 100%); --bx-grad-primary:     linear-gradient(135deg, #4E1FA3 0%, #661EB9 100%); --bx-grad-secondary:   linear-gradient(135deg, #F5D255 0%, #36E7C4 100%); --bx-font-primary:     'Exo 2', sans-serif; --bx-font-secondary:   'Epilogue', sans-serif; }
.bx-table-wrap { background: rgba(49, 52, 71, 0.32); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--bx-border-card); border-radius: 20px; overflow: hidden; box-shadow: 0 4px 48px rgba(102, 30, 185, 0.13), 0 1px 4px rgba(0,0,0,0.45); }
.bx-table-wrap::before { content: ''; display: block; height: 2px; background: var(--bx-grad-secondary); }
.bx-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bx-table-wrap--center-outer { display: flex; justify-content: center; }
.bx-table-wrap--auto { display: inline-block; width: 100%; }
/* ── TABLE BASE ── */
.bx-table { width: 100%; border-collapse: collapse; font-family: var(--bx-font-secondary); font-size: 0.9rem; table-layout: auto; }
.bx-table--auto { width: auto; }
.bx-table thead tr { background: linear-gradient(135deg, rgba(78,31,163,0.55) 0%, rgba(102,30,185,0.45) 100%); border-bottom: 1px solid rgba(54, 231, 196, 0.22); }
.bx-table thead th { font-family: var(--bx-font-primary); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bx-white); padding: 18px 28px; text-align: left; border: none; white-space: nowrap; }
.bx-table thead th:first-child { color: var(--bx-accent-cyan); }
.bx-table tbody tr { border-bottom: 1px solid var(--bx-border-row); transition: background 0.18s ease; }
.bx-table tbody tr:last-child { border-bottom: none; }
.bx-table tbody tr:hover { background: rgba(161, 131, 224, 0.055); }
.bx-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.016); }
.bx-table tbody tr:nth-child(even):hover { background: rgba(161, 131, 224, 0.065); }
.bx-table tbody td { padding: 15px 28px; color: var(--bx-text-body); vertical-align: middle; border: none; line-height: 1.6; }
.bx-table tbody td:first-child { font-family: var(--bx-font-primary); font-size: 0.85rem; font-weight: 700; color: var(--bx-white); letter-spacing: 0.02em; border-right: 1px solid rgba(161, 131, 224, 0.09); white-space: nowrap; }
.bx-table tbody td + td { border-left: 1px solid rgba(161, 131, 224, 0.05); }
/* ── ICON CELL ── */
.bx-cell-icon { display: flex; align-items: center; gap: 12px; }
.bx-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(54, 231, 196, 0.08); border: 1px solid rgba(54, 231, 196, 0.18); color: var(--bx-accent-cyan); flex-shrink: 0; transition: background 0.2s ease, border-color 0.2s ease; }
.bx-table tbody tr:hover .bx-icon { background: rgba(54, 231, 196, 0.14); border-color: rgba(54, 231, 196, 0.32); }
/* Purple icon variant */
.bx-icon--purple { background: rgba(161, 131, 224, 0.08); border-color: rgba(161, 131, 224, 0.18); color: var(--bx-accent-purple); }
.bx-table tbody tr:hover .bx-icon--purple { background: rgba(161, 131, 224, 0.14); border-color: rgba(161, 131, 224, 0.32); }
/* Yellow icon variant */
.bx-icon--yellow { background: rgba(245, 210, 85, 0.08); border-color: rgba(245, 210, 85, 0.18); color: var(--bx-highlight-yellow); }
.bx-table tbody tr:hover .bx-icon--yellow { background: rgba(245, 210, 85, 0.14); border-color: rgba(245, 210, 85, 0.32); }
/* ── COST VALUE ── */
.bx-cost-val { font-family: var(--bx-font-primary); font-weight: 800; font-size: 0.95rem; background: var(--bx-grad-secondary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; white-space: nowrap; }
/* ── WEEK BADGE ── */
.bx-week-badge { display: inline-block; font-family: var(--bx-font-primary); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; color: var(--bx-accent-cyan); background: rgba(54, 231, 196, 0.08); border: 1px solid rgba(54, 231, 196, 0.2); border-radius: 8px; padding: 3px 10px; white-space: nowrap; }
/* ── SECTION BACKGROUNDS ── */
.bx-section--dark { background-color: var(--bx-bg-primary); }
.bx-section--surface { background: linear-gradient(160deg, #13102b 0%, #1c1430 45%, #191A1E 100%); }
.bx-section--surface .bx-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(161, 131, 224, 0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(161, 131, 224, 0.028) 1px, transparent 1px); background-size: 56px 56px; pointer-events: none; z-index: 0; mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%); }
.bx-glow--cyan-tr { width: 400px; height: 400px; background: radial-gradient(circle, rgba(54,231,196,0.06) 0%, transparent 68%); top: -60px; right: -80px; }
.bx-glow--purple-bl { width: 350px; height: 350px; background: radial-gradient(circle, rgba(161,131,224,0.08) 0%, transparent 68%); bottom: -50px; left: -60px; }
.bx-glow--violet-br { width: 500px; height: 500px; background: radial-gradient(circle, rgba(78,31,163,0.18) 0%, transparent 62%); bottom: -80px; right: -100px; }
.bx-glow--cyan-tl { width: 320px; height: 320px; background: radial-gradient(circle, rgba(54,231,196,0.065) 0%, transparent 65%); top: 30px; left: -50px; }
/* ── RESPONSIVE ── */
@media (max-width: 991px) {
  /* Fix mobile TOC position — remove sticky so it flows naturally above content */
  .table-content.mobile-view {
    position: relative !important;
    top: 0 !important;
    margin-bottom: 20px;
    z-index: 9;
  }
}
@media (max-width: 767.98px) {
  .bx-section { padding-left: 20px; padding-right: 20px; }
  .bx-table { font-size: 0.8rem; }
  .bx-table thead th,
  .bx-table tbody td { padding: 12px 16px; }
  .bx-table tbody td:first-child { white-space: normal; }
  .bx-icon { width: 28px; height: 28px; }
}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes floatIcon{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes spinRing{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.wrap{background:#ffffff;border-radius:24px;padding:32px 24px 32px;font-family:system-ui,-apple-system,sans-serif;}
.title{text-align:center;font-size:21px;font-weight:700;color:#1a1240;margin-bottom:5px}
.title span{background:linear-gradient(135deg,#6C5CE7,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.subtitle{text-align:center;font-size:14px;color:#000;margin-bottom:28px;letter-spacing:0.03em}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:720px;margin:0 auto;}
.card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 12px 18px;border-radius:18px;background:#f8f8fc;border:1.5px solid #ebe8ff;cursor:pointer;transition:all 0.3s cubic-bezier(.34,1.56,.64,1);animation:fadeUp 0.55s both;position:relative;overflow:hidden;min-height:160px;justify-content:center;}
.card::before{content:'';position:absolute;inset:0;background:var(--acc);opacity:0;transition:opacity 0.3s;border-radius:18px;}
.card:hover::before{opacity:1;}
.card:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 16px 36px var(--shad);border-color:transparent;}
.card:hover .label{color:#fff}
.card:hover .desc{color:rgba(255,255,255,0.75)}
.card:hover .step-num{color:rgba(255,255,255,0.45)}
.card:hover .icon-bg{background:rgba(255,255,255,0.15)}
.card:hover .ring-el{animation:spinRing 2.5s linear infinite}
.card:hover .main-icon{animation:floatIcon 1.1s ease-in-out infinite}
.card>*{position:relative;z-index:1;}
.step-num{position:absolute;top:12px;right:14px;font-size:14px;font-weight:700;color:var(--acc);opacity:0.55;transition:color 0.3s;z-index:1;}
.icon-wrap{position:relative;width:64px;height:64px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.icon-bg{position:absolute;inset:0;border-radius:50%;background:var(--ibg);transition:background 0.3s;}
.ring-svg{position:absolute;inset:0;width:64px;height:64px;overflow:visible;}
.ring-el{transform-origin:32px 32px;}
.main-icon{position:relative;width:32px;height:32px;}
.label{font-size:16px;font-weight:700;color:#1a1240;text-align:center;line-height:1.4;transition:color 0.3s;}
.desc{font-size:14px;color:#000;text-align:center;line-height:1.45;transition:color 0.3s;}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes flowH{from{stroke-dashoffset:0}to{stroke-dashoffset:-28}}
@keyframes flowV{from{stroke-dashoffset:0}to{stroke-dashoffset:-28}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}}
@keyframes bgShift{
  0%{background:#ede9fe}
  25%{background:#e0f2fe}
  50%{background:#fce7f3}
  75%{background:#ecfdf5}
  100%{background:#ede9fe}
}
@keyframes starPulse{0%,100%{opacity:0.5;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}
.outer{border-radius:28px;padding:32px 28px 36px;font-family:system-ui,-apple-system,sans-serif;position:relative;animation:bgShift 8s ease-in-out infinite;}
.stars{position:absolute;inset:0;pointer-events:none;}
.star{position:absolute;font-size:16px;color:#a78bfa;}
.star:nth-child(1){top:5%;left:3%;animation:starPulse 2.1s ease-in-out infinite;}
.star:nth-child(2){top:7%;right:4%;animation:starPulse 2.6s ease-in-out infinite 0.4s;}
.star:nth-child(3){bottom:7%;left:2.5%;animation:starPulse 2.3s ease-in-out infinite 0.8s;}
.star:nth-child(4){bottom:5%;right:3.5%;animation:starPulse 2.8s ease-in-out infinite 1.2s;}
.title{text-align:center;font-size:22px;font-weight:800;color:#1a1240;margin-bottom:28px;}
.title span{color:#6C5CE7;}
.works-grid{display:grid;grid-template-columns:1fr 50px 1fr;gap:0 0;align-items:center;}
.works-card{background:#fff;border-radius:16px;padding:16px 14px 16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;animation:fadeUp 0.5s both;cursor:default;transition:box-shadow 0.2s,transform 0.2s;border:1.5px solid #e0d7f7;}
.works-card:hover{box-shadow:0 8px 28px rgba(108,92,231,0.18);transform:translateY(-2px);}
.card-left{display:flex;flex-direction:column;gap:3px;}
.step-label{font-size:14px;color:#000;font-weight:500;}
.card-title{font-size:16px;font-weight:800;color:#1a1240;line-height:1.35;}
.icon-box{width:54px;height:54px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;animation:breathe 2.4s ease-in-out infinite;}
.icon-box:nth-of-type(1){animation-delay:0s}
.icon-box svg{width:28px;height:28px;}
.vgap{height:14px;}
.flow-h{stroke:#9b72ef;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:7 5;animation:flowH 0.65s linear infinite;fill:none;}
.flow-h-rev{stroke:#9b72ef;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:7 5;animation:flowH 0.65s linear infinite reverse;fill:none;}
.flow-v{stroke:#9b72ef;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:7 5;animation:flowV 0.65s linear infinite;fill:none;}
.ib1{animation:breathe 2.2s ease-in-out infinite 0.0s;}
.ib2{animation:breathe 2.2s ease-in-out infinite 0.4s;}
.ib3{animation:breathe 2.2s ease-in-out infinite 0.8s;}
.ib4{animation:breathe 2.2s ease-in-out infinite 1.2s;}
.ib5{animation:breathe 2.2s ease-in-out infinite 1.6s;}
.ib6{animation:breathe 2.2s ease-in-out infinite 2.0s;}

@media (max-width: 767.98px) {
  .outer { padding: 24px 16px 28px; border-radius: 18px; }
  .works-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .works-grid > div { width: 100%; }
  .bx-connector { display: none !important; }
  .works-card {
    width: 100%;
    padding: 14px 14px 14px 16px;
  }
  .card-title { font-size: 15px; }
  .icon-box { width: 46px; height: 46px; }
  .icon-box svg { width: 24px; height: 24px; }
}