/* index.html style block 1 */
:root { --bg-color:#ffffff; --text-color:#111111; --text-secondary:#666666; --accent-color:#007bff; --border-color:#eaeaea; --card-bg:#ffffff; --card-shadow:0 12px 32px rgba(0, 0, 0, 0.05); --header-height:64px; --banner-height:40px; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color:#ffffff; color:var(--text-color); line-height:1.6; }
.navbar { position:fixed; top:var(--banner-height); left:0; right:0; height:var(--header-height); background:rgba(255, 255, 255, 0.85); backdrop-filter:blur(12px); display:flex; align-items:center; justify-content:space-between; padding:0 40px; z-index:1000; }
.nav-left { display:flex; align-items:center; gap:40px; }
.nav-brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text-color); font-weight:700; font-size:20px; margin-top:4px; }
.nav-brand img { height:32px; }
.nav-links { display:flex; gap:32px; margin-top:5px; }
.nav-link { text-decoration:none; color:var(--text-secondary); font-weight:500; font-size:15px; transition:color 0.2s; }
.nav-link:hover, .nav-link.active { color:var(--text-color); }
.nav-actions { display:flex; gap:16px; align-items:center; }
.user-profile { display:flex; align-items:center; color:var(--text-secondary); margin-top:15px; gap:12px; font-size:14px; font-weight:500; text-decoration:none; padding:6px 12px; border-radius:100px; transition:background 0.2s; line-height:1.2; }
.user-profile:hover { background:#f1f5f9; color:var(--text-color); }
.user-avatar { width:36px; height:36px; background:#e2e8f0; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#94a3b8; font-size:18px; flex-shrink:0; }
.mobile-menu-btn { display:none; background:none; border:none; font-size:24px; color:var(--text-color); cursor:pointer; }
.hero { padding:calc(var(--header-height) + var(--banner-height) + 80px) 20px 18px; max-width:1480px; margin:0 auto; }
.hero-surface { position:relative; overflow:hidden; border-radius:44px; padding:40px 40px 55px; margin-top:40px; background:border-box; isolation:isolate; }
.hero-surface::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 7% 22%, rgba(255, 255, 255, 0.8) 0 0.55%, transparent 0.2%), radial-gradient(circle at 18% 52%, rgba(255, 255, 255, 0.7) 0 0.42%, transparent 0.2%), radial-gradient(circle at 56% 16%, rgba(255, 255, 255, 0.76) 0 0.33%, transparent 0.2%), radial-gradient(circle at 71% 35%, rgba(255, 255, 255, 0.64) 0 0.36%, transparent 0.2%), radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.75) 0 0.3%, transparent 0.2%); pointer-events:none; }
.hero-surface::after { content:""; position:absolute; inset:auto -8% -22% auto; width:400px; height:400px; border-radius:50%; background:none; pointer-events:none; z-index:0; filter:blur(12px); }
.hero-copy { position:relative; z-index:2; text-align:center; max-width:940px; margin:0 auto; margin-bottom:80px; }
.hero-chip { display:inline-flex; align-items:center; gap:8px; padding:7px 12px; margin-bottom:14px; border-radius:999px; background:rgba(255, 250, 244, 0.72); border:1px solid rgba(246, 214, 183, 0.88); color:#9e6239; font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; backdrop-filter:blur(14px); box-shadow:0 12px 30px rgba(172, 110, 49, 0.10); }
.hero-chip::before { content:""; width:7px; height:7px; border-radius:999px; background:linear-gradient(135deg, #efb26d 0%, #d67632 100%); }
.hero-script { position:absolute; left:50%; top:12px; transform:translateX(-50%); font-family:"Georgia", "Times New Roman", serif; font-size:clamp(72px, 13vw, 150px); line-height:0.9; color:rgba(148, 163, 184, 0.14); letter-spacing:0.02em; white-space:nowrap; pointer-events:none; user-select:none; font-style:italic; }
.hero-title { position:relative; z-index:2; font-size:50px; font-weight:800; color:#21140b; margin:0 0 10px; letter-spacing:-0.04em; line-height:1.04; margin-bottom:20px; }
.hero-subtitle { position:relative; z-index:2; font-size:15px; color:#64748b; max-width:760px; margin:0 auto; font-weight:600; line-height:1.62; }
.hero-actions { position:relative; z-index:2; display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; margin-top:35px; }
.hero-primary-action { position:relative; z-index:2; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 28px; margin-top:0; border-radius:999px; background:#0b0f19; color:#ffffff; text-decoration:none; font-size:15px; font-weight:800; line-height:1; box-shadow:0 16px 34px rgba(15, 23, 42, 0.18); transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.hero-primary-action:hover { transform:translateY(-2px); background:#111827; box-shadow:0 20px 42px rgba(15, 23, 42, 0.22); }
.hero-free-badge { display:inline-flex; align-items:center; justify-content:center; min-height:24px; font-size:10px; font-weight:850; }
.hero-secondary-action { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 24px; border-radius:999px; background:#ffffff; border:1px solid #e5e7eb; color:#111827; text-decoration:none; font-size:15px; font-weight:800; line-height:1; box-shadow:0 12px 28px rgba(15, 23, 42, 0.06); transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.hero-secondary-action:hover { transform:translateY(-2px); border-color:#d1d5db; box-shadow:0 18px 34px rgba(15, 23, 42, 0.1); }
.matrix-section { max-width:1400px; margin:110px auto 80px; padding:0 20px; }
.agent-matrix-section { margin-top:28px; }
.matrix-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:40px; }
.matrix-header h2 { font-size:32px; font-weight:800; color:#111; margin-bottom:12px; letter-spacing:-0.5px; }
.matrix-header p { font-size:15px; color:var(--text-secondary); }
.nav-arrows { display:flex; gap:12px; }
.arrow-btn { width:40px; height:40px; border-radius:50%; border:1px solid #eaeaea; background:#fff; display:flex; align-items:center; justify-content:center; color:#111; cursor:pointer; transition:all 0.2s; }
.arrow-btn:hover { border-color:#111; }
.matrix-cards { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.agent-matrix-layout { grid-template-columns:repeat(12, minmax(0, 1fr)); grid-template-rows:132px 112px 132px; gap:16px; align-items:stretch; }
.m-card { border-radius:24px; padding:32px 24px; height:420px; position:relative; display:flex; flex-direction:column; color:#fff; overflow:hidden; text-decoration:none; transition:all 0.3s ease; }
.agent-matrix-layout .m-card { height:auto; min-height:0; border-radius:24px; box-shadow:none; }
.agent-matrix-layout .m-card:hover { transform:translateY(-4px); box-shadow:0 18px 42px rgba(15, 23, 42, 0.12); }
.agent-matrix-layout .m-card:first-child { grid-column:1 / span 6; grid-row:1 / span 3; padding:30px 32px; border-radius:26px; }
.agent-matrix-layout .m-card.agent-card-clone { grid-column:7 / span 6; grid-row:1; }
.agent-matrix-layout .m-card.agent-card-product { grid-column:7 / span 3; grid-row:2; }
.agent-matrix-layout .m-card.agent-card-fashion { grid-column:10 / span 3; grid-row:2; }
.agent-matrix-layout .m-card.agent-card-image { grid-column:7 / span 6; grid-row:3; }
.agent-matrix-layout .m-card:not(:first-child) { padding:18px 20px 16px; }
.agent-matrix-layout .m-card:not(:first-child) .m-card-top { align-items:flex-start; gap:10px; }
.agent-matrix-layout .m-card:not(:first-child) .m-card-huge { margin-top:0; font-size:21px; line-height:1.1; letter-spacing:0; white-space:nowrap; }
.agent-matrix-layout .m-card.agent-card-product .m-card-huge, .agent-matrix-layout .m-card.agent-card-fashion .m-card-huge { font-size:18px; }
.agent-matrix-layout .m-card:not(:first-child) .m-card-bottom-header { margin-bottom:6px; }
.agent-matrix-layout .m-card:not(:first-child) .m-card-desc { font-size:11px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.agent-matrix-section { max-width:1360px; }
.agent-matrix-layout { position:relative; overflow:hidden; isolation:isolate; padding:10px; border-radius:34px; background:linear-gradient(135deg, rgba(245, 247, 251, 0.94), rgba(232, 238, 248, 0.82) 48%, rgba(247, 244, 250, 0.92)); border:1px solid rgba(255, 255, 255, 0.76); box-shadow:0 30px 90px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.92); }
.agent-matrix-layout::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(115deg, rgba(255, 255, 255, 0.62) 0 18%, transparent 18% 44%, rgba(255, 255, 255, 0.34) 44% 45%, transparent 45% 100%), linear-gradient(28deg, rgba(255, 227, 196, 0.34), transparent 34%, rgba(199, 233, 255, 0.28) 68%, rgba(242, 215, 255, 0.24)); }
.agent-matrix-layout .m-card { z-index:1; border-radius:26px; border:1px solid rgba(255, 255, 255, 0.58); box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -1px 0 rgba(255, 255, 255, 0.18), 0 18px 46px rgba(15, 23, 42, 0.08); }
.agent-matrix-layout .m-card:hover { transform:translateY(-3px); box-shadow:0 20px 44px rgba(15, 23, 42, 0.1); }
.agent-matrix-layout .m-card:not(:first-child) { background:#fff !important; color:#111827; }
.agent-matrix-layout .m-card:not(:first-child)::before { background:linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.4)) !important; opacity:1; }
.agent-matrix-layout .m-card:not(:first-child) .agent-card-visual::before { background:linear-gradient(135deg, rgba(15, 23, 42, 0.05), rgba(15, 23, 42, 0)); opacity:1; }
.agent-matrix-layout .m-card:not(:first-child) .agent-card-visual::after { background:transparent; box-shadow:none; border:1px solid rgba(15, 23, 42, 0.06); opacity:1; }
.agent-matrix-layout .m-card:not(:first-child) .m-card-huge { color:#111827; font-weight:820; }
.agent-matrix-layout .m-card:not(:first-child) .m-card-title-small { color:#334155; }
.agent-matrix-layout .m-card:not(:first-child) .m-card-desc { color:#64748b !important; opacity:1; }
.agent-matrix-layout .m-card:not(:first-child) .badge-new { background:#f5f5f7 !important; color:#111827 !important; border:1px solid rgba(15, 23, 42, 0.06); }
.agent-matrix-layout .m-card:not(:first-child) .tag-small { background:#f1f5f9 !important; color:#475569 !important; }
.agent-matrix-layout .m-card:not(:first-child) .card-arrow { background:#111827 !important; color:#fff !important; width:30px; height:30px; }
.agent-matrix-layout .m-card.agent-card-clone { background:linear-gradient(180deg, #ffffff 0%, #fbfaff 100%) !important; }
.agent-matrix-layout .m-card.agent-card-product { background:linear-gradient(180deg, #ffffff 0%, #fffaf0 100%) !important; }
.agent-matrix-layout .m-card.agent-card-fashion { background:linear-gradient(180deg, #ffffff 0%, #f0fdfa 100%) !important; }
.agent-matrix-layout .m-card.agent-card-image { background:linear-gradient(180deg, #ffffff 0%, #fff7f7 100%) !important; }
.agent-matrix-layout .m-card.agent-card-clone { background:#111827 !important; border-color:rgba(255, 255, 255, 0.2); color:#fff !important; }
.agent-matrix-layout .m-card.agent-card-clone::before { background:linear-gradient(90deg, rgba(8, 13, 24, 0.92) 0%, rgba(8, 13, 24, 0.64) 46%, rgba(8, 13, 24, 0.18) 100%) !important; opacity:1; z-index:1; }
.agent-matrix-layout .m-card.agent-card-clone::after { content:""; position:absolute; inset:1px; border-radius:25px; border:1px solid rgba(255, 255, 255, 0.13); pointer-events:none; z-index:2; }
.agent-matrix-layout .m-card.agent-card-clone .m-card-content { width:100%; max-width:none; z-index:3; }
.agent-matrix-layout .m-card.agent-card-clone .m-card-top,
.agent-matrix-layout .m-card.agent-card-clone .m-card-title-small,
.agent-matrix-layout .m-card.agent-card-clone .m-card-desc { max-width:68%; }
.agent-matrix-layout .m-card.agent-card-clone .m-card-huge,
.agent-matrix-layout .m-card.agent-card-clone .m-card-title-small,
.agent-matrix-layout .m-card.agent-card-clone .m-card-desc { color:#fff !important; }
.agent-matrix-layout .m-card.agent-card-clone .m-card-desc { opacity:0.92; }
.agent-matrix-layout .m-card.agent-card-clone .badge-new,
.agent-matrix-layout .m-card.agent-card-clone .tag-small { background:rgba(255, 255, 255, 0.18) !important; color:#fff !important; border:1px solid rgba(255, 255, 255, 0.24) !important; }
.agent-matrix-layout .m-card.agent-card-clone .card-arrow { position:absolute; right:0; bottom:0; background:#fff !important; color:#111827 !important; z-index:4; }
.clone-card-video { position:absolute; inset:-1px; width:auto; z-index:0; overflow:hidden; pointer-events:none; border-radius:inherit; }
.clone-card-video video { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.06) contrast(1.02); }
.clone-card-video::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(8, 13, 24, 0.42), rgba(8, 13, 24, 0.05)); }
.agent-matrix-layout .m-card.agent-card-product { background:linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(255, 241, 190, 0.2)) !important; border-color:rgba(255, 255, 255, 0.7); backdrop-filter:blur(30px) saturate(1.35); -webkit-backdrop-filter:blur(30px) saturate(1.35); box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.96), inset 0 -1px 0 rgba(255, 255, 255, 0.24), 0 18px 46px rgba(120, 53, 15, 0.1); }
.agent-matrix-layout .m-card.agent-card-fashion { background:linear-gradient(145deg, rgba(255, 255, 255, 0.46), rgba(196, 241, 233, 0.2)) !important; border-color:rgba(255, 255, 255, 0.68); backdrop-filter:blur(30px) saturate(1.35); -webkit-backdrop-filter:blur(30px) saturate(1.35); box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.96), inset 0 -1px 0 rgba(255, 255, 255, 0.24), 0 18px 46px rgba(15, 118, 110, 0.1); }
.agent-matrix-layout .m-card.agent-card-image { background:linear-gradient(145deg, rgba(255, 255, 255, 0.47), rgba(248, 211, 226, 0.22)) !important; border-color:rgba(255, 255, 255, 0.68); backdrop-filter:blur(30px) saturate(1.35); -webkit-backdrop-filter:blur(30px) saturate(1.35); box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.96), inset 0 -1px 0 rgba(255, 255, 255, 0.24), 0 18px 46px rgba(190, 18, 60, 0.08); }
.agent-matrix-layout .m-card.agent-card-product::before,
.agent-matrix-layout .m-card.agent-card-fashion::before,
.agent-matrix-layout .m-card.agent-card-image::before { background:linear-gradient(118deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.24) 31%, rgba(255, 255, 255, 0.04) 58%), linear-gradient(25deg, transparent 0 62%, rgba(255, 255, 255, 0.34) 62% 63%, transparent 63% 100%) !important; opacity:1; }
.agent-matrix-layout .m-card.agent-card-product::after,
.agent-matrix-layout .m-card.agent-card-fashion::after,
.agent-matrix-layout .m-card.agent-card-image::after { content:""; position:absolute; inset:1px; border-radius:25px; border:1px solid rgba(255, 255, 255, 0.78); pointer-events:none; z-index:0; box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.agent-matrix-layout .m-card.agent-card-product .m-card-huge,
.agent-matrix-layout .m-card.agent-card-product .m-card-title-small,
.agent-matrix-layout .m-card.agent-card-product .m-card-desc { color:#5f4114 !important; }
.agent-matrix-layout .m-card.agent-card-fashion .m-card-huge,
.agent-matrix-layout .m-card.agent-card-fashion .m-card-title-small,
.agent-matrix-layout .m-card.agent-card-fashion .m-card-desc,
.agent-matrix-layout .m-card.agent-card-image .m-card-huge,
.agent-matrix-layout .m-card.agent-card-image .m-card-title-small,
.agent-matrix-layout .m-card.agent-card-image .m-card-desc { color:#334155 !important; }
.agent-matrix-layout .m-card.agent-card-product .badge-new,
.agent-matrix-layout .m-card.agent-card-product .tag-small { background:rgba(255, 255, 255, 0.42) !important; color:#5f4114 !important; border:1px solid rgba(255, 255, 255, 0.62) !important; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.72); }
.agent-matrix-layout .m-card.agent-card-fashion .badge-new,
.agent-matrix-layout .m-card.agent-card-fashion .tag-small,
.agent-matrix-layout .m-card.agent-card-image .badge-new,
.agent-matrix-layout .m-card.agent-card-image .tag-small { background:rgba(255, 255, 255, 0.42) !important; color:#334155 !important; border:1px solid rgba(255, 255, 255, 0.62) !important; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.72); }
.agent-matrix-layout .m-card.agent-card-product .card-arrow { background:rgba(255, 255, 255, 0.48) !important; color:#5f4114 !important; border:1px solid rgba(255, 255, 255, 0.68); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 10px 22px rgba(120, 53, 15, 0.08); }
.agent-matrix-layout .m-card.agent-card-fashion .card-arrow,
.agent-matrix-layout .m-card.agent-card-image .card-arrow { background:rgba(255, 255, 255, 0.48) !important; color:#334155 !important; border:1px solid rgba(255, 255, 255, 0.68); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 10px 22px rgba(15, 23, 42, 0.08); }
.m-card:hover { transform:translateY(-8px); box-shadow:0 20px 40px rgba(0, 0, 0, 0.1); }
.m-card.red { background:linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%); }
.m-card.red::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%), linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0.05) 60%, transparent 60%); z-index:0; pointer-events:none; }
.m-card.purple { background:linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%); }
.m-card.purple::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 100% 100%, rgba(255, 255, 255, 0.1) 0%, transparent 60%), linear-gradient(to right, rgba(255, 255, 255, 0.05) 50%, transparent 50%); z-index:0; pointer-events:none; }
.m-card.video-bg { background:url('../images/home/agent-product-1.png') center/cover; background-color:#1f2937; }
.m-card.video-bg::before { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 60%); z-index:0; }
.m-card.yellow { background:linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); }
.m-card.yellow::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 0% 50%, transparent 40%, rgba(255, 255, 255, 0.1) 41%, rgba(255, 255, 255, 0.1) 42%, transparent 43%), radial-gradient(circle at 0% 50%, transparent 60%, rgba(255, 255, 255, 0.05) 61%, rgba(255, 255, 255, 0.05) 62%, transparent 63%); z-index:0; pointer-events:none; }
.m-card.teal { background:linear-gradient(135deg, #0f766e 0%, #14b8a6 100%); }
.m-card.teal::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 88% 14%, rgba(255,255,255,0.18) 0%, transparent 42%), linear-gradient(135deg, transparent 0 44%, rgba(255,255,255,0.08) 44% 58%, transparent 58% 100%); z-index:0; pointer-events:none; }
.m-card-content { position:relative; z-index:1; height:100%; display:flex; flex-direction:column; }
.agent-card-kicker { position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; width:max-content; min-height:28px; padding:0 12px; border-radius:999px; background:rgba(255,255,255,0.18); color:rgba(255,255,255,0.92); font-size:12px; font-weight:760; backdrop-filter:blur(12px); }
.agent-card-kicker::before { content:""; width:7px; height:7px; border-radius:50%; background:#fff; opacity:0.9; }
.agent-matrix-layout .m-card:first-child { background:linear-gradient(145deg, #050505 0%, #141416 52%, #242426 100%) !important; border-color:rgba(255, 255, 255, 0.08); box-shadow:0 22px 54px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.agent-matrix-layout .m-card:first-child::before { background:radial-gradient(circle at 82% 28%, rgba(255, 255, 255, 0.1), transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)) !important; opacity:1; }
.agent-matrix-layout .m-card:first-child .agent-card-visual::before { inset:12% -8% auto auto; width:45%; height:46%; background:rgba(255, 255, 255, 0.08); clip-path:polygon(26% 0, 100% 0, 76% 100%, 0 100%); }
.agent-matrix-layout .m-card:first-child .agent-card-lines { opacity:0.32; background:linear-gradient(112deg, transparent 0 22%, rgba(255,255,255,0.14) 22% 22.4%, transparent 22.4% 100%), linear-gradient(63deg, transparent 0 51%, rgba(255,255,255,0.12) 51% 51.35%, transparent 51.35% 100%); }
.agent-matrix-layout .m-card:first-child .m-card-content { max-width:560px; }
.agent-matrix-layout .m-card:first-child .m-card-huge { margin-top:0; font-size:clamp(25px, 2.2vw, 40px); letter-spacing:0; max-width:680px; white-space:nowrap; }
.agent-matrix-layout .m-card:first-child .m-card-bottom { margin-top:22px; max-width:620px; }
.agent-matrix-layout .m-card:first-child .card-arrow { position:absolute; right:0; bottom:0; width:34px; height:34px; background:rgba(255, 255, 255, 0.12) !important; color:#fff !important; border:1px solid rgba(255, 255, 255, 0.18); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 16px 34px rgba(0, 0, 0, 0.22); }
.agent-card-visual { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.agent-card-visual::before { content:""; position:absolute; inset:-18% -10% auto auto; width:54%; height:72%; background:rgba(255,255,255,0.16); clip-path:polygon(28% 0, 100% 0, 72% 100%, 0 100%); }
.agent-card-visual::after { content:""; position:absolute; right:9%; bottom:5%; width:32%; aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,0.12); box-shadow:inset 0 0 0 10px rgba(255,255,255,0.08), inset 0 0 0 38px rgba(255,255,255,0.06); }
.agent-matrix-layout .m-card:first-child .agent-card-visual::after { display:none; }
.agent-card-lines { position:absolute; inset:0; background:linear-gradient(118deg, transparent 0 18%, rgba(255,255,255,0.15) 18% 18.6%, transparent 18.6% 100%), linear-gradient(64deg, transparent 0 52%, rgba(255,255,255,0.12) 52% 52.5%, transparent 52.5% 100%); opacity:0.85; }
.agent-card-dot { display:none; position:absolute; width:18px; height:18px; border-radius:50%; background:#fff; opacity:0.86; box-shadow:0 0 0 7px rgba(255,255,255,0.16); }
.agent-card-dot.one { left:18%; top:34%; }
.agent-card-dot.two { right:12%; top:68%; }
.agent-card-visual.compact::before { inset:-16% -14% auto auto; width:58%; height:82%; opacity:0.75; }
.agent-card-visual.compact::after { right:-8%; bottom:-34%; width:44%; opacity:0.8; }
.agent-card-visual.light::before, .agent-card-visual.light::after { background:rgba(17,24,39,0.08); box-shadow:inset 0 0 0 8px rgba(17,24,39,0.05), inset 0 0 0 30px rgba(17,24,39,0.035); }
.m-card-top { display:flex; justify-content:space-between; align-items:flex-start; }
.m-card-huge { font-size:35px; line-height:1.1; margin-top:40px; letter-spacing:0; }
.badge-new { background:#fff; color:#111; font-size:11px; font-weight:800; padding:4px 10px; border-radius:100px; }
.m-card-bottom { margin-top:auto; }
.m-card-bottom-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.m-card-title-small { font-size:13px; font-weight:700; display:flex; align-items:center; gap:8px; white-space:nowrap; min-width:0; }
.tag-small { background:rgba(255, 255, 255, 0.25); padding:2px 8px; border-radius:4px; font-size:10px; font-weight:600; }
.m-card-desc { font-size:12px; opacity:0.95; line-height:1.45; font-weight:500; }
.card-arrow { width:28px; height:28px; background:#fff; color:#111; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; }
.agent-matrix-section { max-width:1280px; margin-top:30px; }
.agent-matrix-layout {
display:grid !important;
grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
grid-template-rows:none !important;
gap:18px;
align-items:stretch;
padding:0 !important;
overflow:visible;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
}
.agent-matrix-layout::before { display:none !important; }
.agent-matrix-layout .m-card,
.agent-matrix-layout .m-card:first-child,
.agent-matrix-layout .m-card.agent-card-clone,
.agent-matrix-layout .m-card.agent-card-product,
.agent-matrix-layout .m-card.agent-card-fashion,
.agent-matrix-layout .m-card.agent-card-image {
grid-column:auto !important;
grid-row:auto !important;
aspect-ratio:9 / 16;
min-height:0 !important;
height:auto !important;
padding:18px 16px 16px !important;
border-radius:26px !important;
color:#111827 !important;
border:1px solid rgba(255, 255, 255, 0.68) !important;
background:linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.38)) !important;
backdrop-filter:blur(26px) saturate(1.18);
-webkit-backdrop-filter:blur(26px) saturate(1.18);
box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 22px 54px rgba(15, 23, 42, 0.1) !important;
}
.agent-matrix-layout .m-card:hover {
transform:translateY(-4px);
border-color:rgba(255, 255, 255, 0.88) !important;
box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 28px 68px rgba(15, 23, 42, 0.15) !important;
}
.agent-matrix-layout .m-card::before {
content:"" !important;
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
opacity:1 !important;
background:linear-gradient(152deg, rgba(255, 255, 255, 0.88) 0 36%, rgba(255, 255, 255, 0.16) 36% 100%) !important;
}
.agent-matrix-layout .m-card::after {
content:"";
position:absolute;
inset:1px;
z-index:0;
pointer-events:none;
border-radius:25px;
border:1px solid rgba(255, 255, 255, 0.55);
}
.agent-matrix-layout .m-card.video-bg {
background:linear-gradient(145deg, rgba(16, 20, 28, 0.9), rgba(31, 41, 55, 0.66)) !important;
color:#fff !important;
border-color:rgba(255, 255, 255, 0.16) !important;
box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 24px 62px rgba(15, 23, 42, 0.22) !important;
}
.agent-matrix-layout .m-card.video-bg::before {
background:linear-gradient(180deg, rgba(4, 7, 13, 0.28), rgba(4, 7, 13, 0.86)) !important;
z-index:1;
}
.agent-matrix-layout .m-card.agent-card-clone { background:linear-gradient(145deg, rgba(238, 242, 255, 0.78), rgba(255, 255, 255, 0.46)) !important; }
.agent-matrix-layout .m-card.agent-card-product { background:linear-gradient(145deg, rgba(255, 248, 232, 0.82), rgba(255, 255, 255, 0.44)) !important; }
.agent-matrix-layout .m-card.agent-card-fashion { background:linear-gradient(145deg, rgba(230, 250, 247, 0.8), rgba(255, 255, 255, 0.44)) !important; }
.agent-matrix-layout .m-card.agent-card-image { background:linear-gradient(145deg, rgba(255, 237, 242, 0.82), rgba(255, 255, 255, 0.44)) !important; }
.agent-matrix-layout .m-card.agent-card-aplus { background:linear-gradient(145deg, rgba(239, 246, 255, 0.82), rgba(255, 255, 255, 0.48)) !important; cursor:not-allowed; }
.agent-matrix-layout .clone-card-video { z-index:0; opacity:0.55; }
.agent-matrix-layout .clone-card-video::after { background:linear-gradient(180deg, rgba(4, 7, 13, 0.1), rgba(4, 7, 13, 0.78)); }
.agent-matrix-layout .agent-card-visual { z-index:0; opacity:1; }
.agent-matrix-layout .agent-card-visual::before {
inset:8% -16% auto auto;
width:74%;
height:34%;
background:rgba(255, 255, 255, 0.34) !important;
clip-path:polygon(26% 0, 100% 0, 78% 100%, 0 100%);
}
.agent-matrix-layout .agent-card-visual::after {
right:-22%;
bottom:-8%;
width:82%;
background:rgba(255, 255, 255, 0.24) !important;
box-shadow:inset 0 0 0 12px rgba(255, 255, 255, 0.14), inset 0 0 0 36px rgba(255, 255, 255, 0.1) !important;
}
.agent-matrix-layout .m-card-content {
position:relative;
z-index:3;
height:100%;
max-width:none !important;
}
.agent-matrix-layout .m-card-top {
align-items:flex-start !important;
gap:12px;
}
.agent-feature-main {
display:flex;
flex-direction:column;
align-items:flex-start;
gap:14px;
min-width:0;
}
.agent-feature-icon {
width:44px;
height:44px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:15px;
background:#111827;
color:#fff;
box-shadow:0 16px 34px rgba(15, 23, 42, 0.16);
flex:0 0 auto;
}
.agent-card-clone .agent-feature-icon { background:#5b4cf0; }
.agent-card-product .agent-feature-icon { background:#f59e0b; }
.agent-card-fashion .agent-feature-icon { background:#0f8b7f; }
.agent-card-image .agent-feature-icon { background:#e91e4d; }
.agent-matrix-layout .m-card.video-bg .agent-feature-icon { background:rgba(255, 255, 255, 0.12); border:1px solid rgba(255, 255, 255, 0.16); color:#fff; backdrop-filter:blur(16px); }
.agent-matrix-layout .m-card .m-card-huge,
.agent-matrix-layout .m-card:first-child .m-card-huge,
.agent-matrix-layout .m-card:not(:first-child) .m-card-huge,
.agent-matrix-layout .m-card.agent-card-product .m-card-huge,
.agent-matrix-layout .m-card.agent-card-fashion .m-card-huge {
margin:0 !important;
max-width:100% !important;
color:inherit !important;
font-size:clamp(22px, 1.55vw, 30px) !important;
line-height:1.08 !important;
font-weight:860;
letter-spacing:0 !important;
white-space:normal !important;
}
.agent-matrix-layout .badge-new {
min-height:26px;
padding:0 10px;
display:inline-flex;
align-items:center;
border-radius:999px;
border:1px solid rgba(255, 255, 255, 0.58) !important;
background:rgba(255, 255, 255, 0.45) !important;
color:#334155 !important;
font-size:11px;
font-weight:760;
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
.agent-matrix-layout .m-card.video-bg .badge-new {
background:rgba(255, 255, 255, 0.15) !important;
color:#fff !important;
border-color:rgba(255, 255, 255, 0.2) !important;
}
.agent-matrix-layout .m-card-bottom {
margin-top:auto !important;
}
.agent-matrix-layout .m-card-bottom-header {
align-items:flex-end;
gap:12px;
margin-bottom:10px !important;
}
.agent-matrix-layout .m-card-title-small,
.agent-matrix-layout .m-card:not(:first-child) .m-card-title-small {
color:inherit !important;
font-size:13px;
line-height:1.2;
font-weight:780;
white-space:normal;
flex-wrap:wrap;
}
.agent-matrix-layout .tag-small,
.agent-matrix-layout .m-card:not(:first-child) .tag-small {
border-radius:999px;
padding:3px 8px;
background:rgba(255, 255, 255, 0.46) !important;
color:inherit !important;
border:1px solid rgba(255, 255, 255, 0.54) !important;
font-size:10px;
}
.agent-matrix-layout .m-card-desc,
.agent-matrix-layout .m-card:not(:first-child) .m-card-desc,
.agent-matrix-layout .m-card:first-child .m-card-desc {
max-width:100% !important;
color:inherit !important;
opacity:0.72 !important;
font-size:12px !important;
line-height:1.55 !important;
white-space:normal !important;
overflow:hidden;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}
.agent-matrix-layout .card-arrow,
.agent-matrix-layout .m-card:not(:first-child) .card-arrow,
.agent-matrix-layout .m-card:first-child .card-arrow,
.agent-matrix-layout .m-card.agent-card-clone .card-arrow {
position:static !important;
flex:0 0 auto;
width:34px;
height:34px;
border-radius:50%;
background:rgba(255, 255, 255, 0.56) !important;
color:#111827 !important;
border:1px solid rgba(255, 255, 255, 0.68);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 12px 26px rgba(15, 23, 42, 0.08);
}
.agent-matrix-layout .m-card.video-bg .card-arrow {
background:#fff !important;
color:#111827 !important;
border-color:rgba(255, 255, 255, 0.2);
}
.bottom-section { background:#000; color:#fff; margin-top:80px; position:relative; overflow:hidden; }
.starry-bg { position:absolute; inset:0; background-image:radial-gradient(#fff 1px, transparent 1px), radial-gradient(#fff 1px, transparent 1px); background-size:50px 50px; background-position:0 0, 25px 25px; opacity:0.15; z-index:1; animation:stars 60s linear infinite; }
@keyframes stars {
0% { transform:translateY(0); }
100% { transform:translateY(-50px); }
}
.footer { padding:40px 40px 30px; position:relative; z-index:2; border-top:1px solid rgba(255, 255, 255, 0.05); }
.footer-content { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; gap:40px; }
.footer-brand { flex:2; }
.footer-links-wrapper { flex:3; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:34px; }
.footer-brand h3 { color:#fff; font-size:24px; margin-bottom:16px; }
.footer-brand p { color:#888; font-size:14px; margin-bottom:24px; max-width:300px; }
.footer-col h4 { color:#fff; font-size:16px; margin-bottom:20px; font-weight:600; }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:12px; }
.footer-col ul a { color:#888; text-decoration:none; font-size:14px; transition:color 0.2s; }
.footer-col ul a:hover { color:#fff; }
.footer-bottom { max-width:1200px; margin:40px auto 0; padding-top:20px; border-top:1px solid #333; display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; color:#666; font-size:13px; }
@media (max-width: 1024px) {
.hero-graphic { padding:40px 20px; }
.feature-pills { flex-direction:column; align-items:center; }
.matrix-cards { grid-template-columns:repeat(2, 1fr); }
.agent-matrix-layout { grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-rows:260px 150px 150px; }
.agent-matrix-layout .m-card:first-child { grid-column:1 / -1; grid-row:1; }
.agent-matrix-layout .m-card.agent-card-clone { grid-column:1; grid-row:2; }
.agent-matrix-layout .m-card.agent-card-image { grid-column:2; grid-row:2; }
.agent-matrix-layout .m-card.agent-card-product { grid-column:1; grid-row:3; }
.agent-matrix-layout .m-card.agent-card-fashion { grid-column:2; grid-row:3; }
.matrix-pills { grid-template-columns:repeat(2, 1fr) !important; }
.hero-surface { padding:30px 24px 20px; border-radius:34px; }
.hero-chip { margin-bottom:12px; }
.hero-script { font-size:clamp(62px, 12vw, 118px); top:12px; }
.hero-title { font-size:42px; }
}
@media (max-width: 768px) {
.navbar { padding:0 20px; }
.nav-links, .nav-actions { display:none; }
.mobile-menu-btn { display:block; }
.footer-content { flex-direction:column; gap:40px; }
.footer-brand { text-align:left; }
.footer-links-wrapper { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:20px; }
.hero { padding:calc(var(--header-height) + var(--banner-height) - 40px) 12px 8px; }
.hero-surface { padding:24px 16px 18px; border-radius:28px; }
.hero-chip { font-size:11px; padding:6px 10px; margin-bottom:10px; }
.hero-script { font-size:58px; top:12px; opacity:0.58; }
.hero-title { font-size:30px; line-height:1.12; margin-bottom:8px; }
.hero-subtitle { font-size:13px; max-width:100%; }
.matrix-header { flex-direction:column; align-items:flex-start; gap:16px; }
.matrix-cards { grid-template-columns:1fr !important; }
.agent-matrix-layout { grid-template-columns:1fr !important; grid-template-rows:none; }
.agent-matrix-layout .m-card:first-child,
.agent-matrix-layout .m-card.agent-card-clone,
.agent-matrix-layout .m-card.agent-card-product,
.agent-matrix-layout .m-card.agent-card-fashion,
.agent-matrix-layout .m-card.agent-card-image { grid-column:auto; grid-row:auto; }
.agent-matrix-layout .m-card:first-child { min-height:320px; padding:28px 22px; }
.agent-matrix-layout .m-card:not(:first-child) { min-height:152px; }
.matrix-pills { grid-template-columns:1fr !important; }
.graphic-bg { border-radius:32px; padding:32px 0; }
.feature-pill { width:100%; max-width:100%; box-sizing:border-box; }
.feature-pills { padding:0 20px; }
.matrix-section { margin-top:92px; }
.agent-matrix-section { margin-top:28px; }
}
.stats-section { max-width:1400px; margin:100px auto; padding:0 20px; display:flex; justify-content:space-between; align-items:flex-start; gap:60px; }
.stats-left { flex:1; max-width:700px; }
.stats-left h2 { font-size:28px; font-weight:800; margin-bottom:16px; }
.stats-left h3 { font-size:24px; font-weight:600; color:#333; margin-bottom:32px; }
.stats-left p { font-size:15px; color:#666; line-height:1.8; margin-bottom:24px; }
.stats-right { display:flex; flex-direction:column; gap:40px; text-align:right; min-width:240px; }
.stat-item { display:flex; flex-direction:column; }
.stat-item .stat-num { font-size:40px; font-weight:800; margin-bottom:8px; letter-spacing:-1px; }
.stat-item .stat-desc { font-size:14px; color:#888; }
@media (max-width: 1180px) {
.stats-section { flex-direction:column; gap:60px; }
.stats-right { text-align:left; width:100%; display:grid; grid-template-columns:repeat(2, 1fr); gap:40px; }
}
@media (max-width: 768px) {
.stats-right { grid-template-columns:1fr; }
}
.home-workflow-section { max-width:1360px; margin:88px auto 84px; padding:0 20px; }
.home-section-head { max-width:760px; margin:0 auto 28px; text-align:center; }
.home-section-kicker { display:inline-flex; align-items:center; gap:8px; min-height:28px; padding:0 12px; border-radius:999px; background:#eef6ff; color:#0c4a6e; border:1px solid #d7ebff; font-size:12px; font-weight:800; margin-bottom:12px; }
.home-section-kicker::before { content:""; width:7px; height:7px; border-radius:50%; background:#f97316; }
.home-section-head h2 { color:#0f172a; font-size:34px; line-height:1.15; letter-spacing:0; margin-bottom:10px; }
.home-section-head p { color:#64748b; font-size:15px; line-height:1.8; font-weight:520; }
.workflow-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; }
.workflow-card { position:relative; min-height:238px; padding:24px; border-radius:26px; background:#fff; border:1px solid #e2e8f0; box-shadow:0 22px 58px rgba(15, 23, 42, 0.065); overflow:hidden; }
.workflow-card::after { content:""; position:absolute; right:-42px; bottom:-42px; width:130px; height:130px; border-radius:50%; background:#f0f9ff; border:24px solid #e0f2fe; opacity:0.82; }
.workflow-card b { position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:14px; background:#111827; color:#fff; font-size:14px; margin-bottom:18px; }
.workflow-card h3 { position:relative; z-index:1; color:#111827; font-size:20px; line-height:1.25; margin-bottom:10px; letter-spacing:0; }
.workflow-card p { position:relative; z-index:1; color:#64748b; font-size:14px; line-height:1.75; font-weight:520; }
.home-faq-section { max-width:1180px; margin:82px auto 0; padding:0 20px; }
.faq-list { border:1px solid #dbe8f5; border-radius:24px; background:#fff; overflow:hidden; box-shadow:0 20px 64px rgba(15, 23, 42, 0.07); }
.faq-item { border-bottom:1px solid #e2e8f0; background:#fff; }
.faq-item:last-child { border-bottom:0; }
.faq-item summary { list-style:none; cursor:pointer; min-height:78px; padding:0 26px; display:flex; align-items:center; justify-content:space-between; gap:18px; color:#111827; font-size:18px; font-weight:800; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:""; width:11px; height:11px; border-right:2px solid #64748b; border-bottom:2px solid #64748b; transform:rotate(45deg); transition:transform 0.18s ease; flex:0 0 11px; }
.faq-item[open] summary::after { transform:rotate(225deg); }
.faq-item p { color:#64748b; font-size:14px; line-height:1.85; padding:0 58px 24px 26px; max-width:960px; }
.matrix-section { scroll-margin-top:120px; }
.matrix-header { padding:0 4px; }
.matrix-header h2, .stats-left h2, .stats-left h3 { letter-spacing:0; }
.stats-section { padding:38px; border-radius:32px; background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); border:1px solid #e5eef8; box-shadow:0 24px 68px rgba(15, 23, 42, 0.06); }
.agent-matrix-section { max-width:1360px; margin:22px auto 92px; padding:0 20px; }
.agent-matrix-layout { grid-template-columns:minmax(420px, 1.28fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows:184px 184px; gap:18px; padding:0; border-radius:0; background:transparent; border:0; box-shadow:none; overflow:visible; }
.agent-matrix-layout::before { display:none; }
.agent-matrix-layout .m-card { min-height:0; border-radius:22px; border:1px solid #e2e8f0; background:#fff !important; color:#111827; box-shadow:0 18px 48px rgba(15, 23, 42, 0.07); transition:transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; }
.agent-matrix-layout .m-card:hover { transform:translateY(-5px); border-color:#cbd5e1; box-shadow:0 26px 62px rgba(15, 23, 42, 0.12); }
.agent-matrix-layout .m-card:first-child { grid-column:1; grid-row:1 / span 2; padding:30px 32px; border-radius:24px; background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important; }
.agent-matrix-layout .m-card.agent-card-clone { grid-column:2; grid-row:1; padding:26px 28px 22px; border-radius:22px; }
.agent-matrix-layout .m-card.agent-card-product { grid-column:3; grid-row:1; }
.agent-matrix-layout .m-card.agent-card-fashion { grid-column:2; grid-row:2; }
.agent-matrix-layout .m-card.agent-card-image { grid-column:3; grid-row:2; }
.agent-matrix-layout .m-card:not(:first-child) { padding:24px 26px 22px; color:#111827; background:#fff !important; }
.agent-matrix-layout .m-card.agent-card-clone { background:linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%) !important; color:#111827 !important; }
.agent-matrix-layout .m-card.agent-card-product { background:linear-gradient(180deg, #ffffff 0%, #fffaf0 100%) !important; }
.agent-matrix-layout .m-card.agent-card-fashion { background:linear-gradient(180deg, #ffffff 0%, #f0fdfa 100%) !important; }
.agent-matrix-layout .m-card.agent-card-image { background:linear-gradient(180deg, #ffffff 0%, #fff7f7 100%) !important; }
.agent-matrix-layout .m-card::before { opacity:1; }
.agent-matrix-layout .m-card:first-child::before { background:linear-gradient(90deg, rgba(226, 232, 240, 0.45) 1px, transparent 1px), linear-gradient(180deg, rgba(226, 232, 240, 0.45) 1px, transparent 1px), radial-gradient(circle at 78% 28%, rgba(17, 24, 39, 0.08), transparent 32%) !important; background-size:84px 84px, 84px 84px, auto; opacity:1; }
.agent-matrix-layout .m-card.agent-card-clone::before { background:linear-gradient(135deg, rgba(99, 102, 241, 0.10), transparent 58%) !important; z-index:1; }
.agent-matrix-layout .m-card.agent-card-product::before,
.agent-matrix-layout .m-card.agent-card-fashion::before,
.agent-matrix-layout .m-card.agent-card-image::before { background:linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.2) 52%, transparent) !important; }
.agent-matrix-layout .m-card::after { display:none; }
.agent-matrix-layout .m-card-content { position:relative; z-index:3; width:100%; max-width:none; }
.agent-matrix-layout .m-card:first-child .m-card-content { max-width:none; }
.agent-matrix-layout .m-card .m-card-top { align-items:flex-start; gap:14px; }
.agent-feature-main { display:flex; align-items:center; gap:12px; min-width:0; }
.agent-feature-icon { width:36px; height:36px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 36px; background:#111827; color:#fff; font-size:16px; box-shadow:0 12px 24px rgba(15, 23, 42, 0.12); }
.agent-matrix-layout .m-card:first-child .agent-feature-icon { width:44px; height:44px; flex-basis:44px; border-radius:15px; }
.agent-matrix-layout .m-card.agent-card-clone .agent-feature-icon { background:#4f46e5; }
.agent-matrix-layout .m-card.agent-card-product .agent-feature-icon { background:#f59e0b; }
.agent-matrix-layout .m-card.agent-card-fashion .agent-feature-icon { background:#0f766e; }
.agent-matrix-layout .m-card.agent-card-image .agent-feature-icon { background:#e11d48; }
.agent-matrix-layout .m-card:not(:first-child) .m-card-top { align-items:flex-start; gap:12px; }
.agent-matrix-layout .m-card:first-child .m-card-huge { margin-top:0; color:#111827; font-size:clamp(36px, 3vw, 48px); line-height:1.04; font-weight:860; white-space:normal; }
.agent-matrix-layout .m-card.agent-card-clone .m-card-huge,
.agent-matrix-layout .m-card:not(:first-child) .m-card-huge { margin-top:0; color:#111827; font-size:24px; line-height:1.1; font-weight:830; white-space:normal; }
.agent-matrix-layout .m-card.agent-card-product .m-card-huge,
.agent-matrix-layout .m-card.agent-card-fashion .m-card-huge,
.agent-matrix-layout .m-card.agent-card-image .m-card-huge { font-size:24px; }
.agent-matrix-layout .m-card.agent-card-clone .m-card-top,
.agent-matrix-layout .m-card.agent-card-clone .m-card-title-small,
.agent-matrix-layout .m-card.agent-card-clone .m-card-desc { max-width:88%; color:#111827 !important; }
.agent-matrix-layout .m-card:not(:first-child) .m-card-bottom-header { margin-bottom:8px; }
.agent-matrix-layout .m-card-title-small { color:inherit; font-size:13px; line-height:1.4; }
.agent-matrix-layout .m-card-desc { max-width:96%; color:#64748b !important; font-size:13px; line-height:1.65; font-weight:560; opacity:1; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.agent-matrix-layout .m-card:first-child .m-card-desc,
.agent-matrix-layout .m-card.agent-card-clone .m-card-desc { color:#64748b !important; }
.agent-matrix-layout .badge-new,
.agent-matrix-layout .tag-small { border-radius:999px; border:1px solid rgba(15, 23, 42, 0.08); background:#f8fafc !important; color:#475569 !important; font-weight:760; }
.agent-matrix-layout .m-card:first-child .badge-new { background:#111827 !important; color:#fff !important; border-color:#111827; }
.agent-matrix-layout .m-card:first-child .tag-small,
.agent-matrix-layout .m-card.agent-card-clone .tag-small { background:#f1f5f9 !important; color:#475569 !important; border-color:#e2e8f0; }
.agent-matrix-layout .m-card:first-child { background:#111827 !important; border-color:rgba(15, 23, 42, 0.18); overflow:hidden; }
.agent-matrix-layout .m-card:first-child::before { background:linear-gradient(90deg, rgba(8, 13, 24, 0.92) 0%, rgba(8, 13, 24, 0.72) 52%, rgba(8, 13, 24, 0.24) 100%) !important; opacity:1; z-index:1; }
.agent-matrix-layout .m-card:first-child .m-card-huge,
.agent-matrix-layout .m-card:first-child .m-card-title-small,
.agent-matrix-layout .m-card:first-child .m-card-desc { color:#ffffff !important; text-shadow:0 2px 14px rgba(0, 0, 0, 0.35); }
.agent-matrix-layout .m-card:first-child .m-card-desc { color:rgba(255, 255, 255, 0.88) !important; }
.agent-matrix-layout .m-card:first-child .badge-new,
.agent-matrix-layout .m-card:first-child .tag-small { background:rgba(255, 255, 255, 0.16) !important; color:#ffffff !important; border-color:rgba(255, 255, 255, 0.26) !important; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.agent-matrix-layout .m-card:first-child .agent-feature-icon { background:rgba(255, 255, 255, 0.16); color:#fff; border:1px solid rgba(255, 255, 255, 0.22); box-shadow:none; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.agent-matrix-layout .m-card.agent-card-clone { background:linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%) !important; border-color:#e2e8f0; overflow:hidden; }
.agent-matrix-layout .m-card.agent-card-clone::before { background:linear-gradient(135deg, rgba(99, 102, 241, 0.10), transparent 58%) !important; opacity:1; z-index:1; }
.agent-matrix-layout .m-card.agent-card-clone .m-card-huge,
.agent-matrix-layout .m-card.agent-card-clone .m-card-title-small { color:#111827 !important; text-shadow:none; }
.agent-matrix-layout .m-card.agent-card-clone .m-card-desc { color:#64748b !important; text-shadow:none; }
.agent-matrix-layout .m-card.agent-card-clone .badge-new,
.agent-matrix-layout .m-card.agent-card-clone .tag-small { background:#f1f5f9 !important; color:#475569 !important; border-color:#e2e8f0 !important; backdrop-filter:none; -webkit-backdrop-filter:none; }
.agent-matrix-layout .m-card.agent-card-clone .agent-feature-icon { background:#4f46e5; color:#fff; border:0; box-shadow:0 12px 24px rgba(15, 23, 42, 0.12); backdrop-filter:none; -webkit-backdrop-filter:none; }
.agent-matrix-layout .card-arrow { width:32px; height:32px; flex:0 0 32px; background:#111827 !important; color:#fff !important; box-shadow:none; }
.agent-matrix-layout .m-card:first-child .card-arrow,
.agent-matrix-layout .m-card.agent-card-clone .card-arrow { background:#111827 !important; color:#fff !important; }
.agent-matrix-layout .m-card:first-child .card-arrow { background:#ffffff !important; color:#111827 !important; }
.agent-matrix-layout .m-card.agent-card-clone .clone-card-video { display:none !important; }
.agent-matrix-layout .m-card:first-child .clone-card-video { display:block !important; }
.agent-matrix-layout .clone-card-video::after { background:linear-gradient(90deg, rgba(8, 13, 24, 0.54), rgba(8, 13, 24, 0.18)) !important; }
.agent-matrix-layout .agent-card-visual::before { opacity:0.6; }
.agent-matrix-layout .agent-card-visual::after { opacity:0.55; }
.agent-matrix-layout .m-card.agent-card-product .agent-card-visual::before,
.agent-matrix-layout .m-card.agent-card-product .agent-card-visual::after { background:rgba(245, 158, 11, 0.12); box-shadow:inset 0 0 0 8px rgba(245, 158, 11, 0.06), inset 0 0 0 30px rgba(245, 158, 11, 0.035); }
.agent-matrix-layout .m-card.agent-card-fashion .agent-card-visual::before,
.agent-matrix-layout .m-card.agent-card-fashion .agent-card-visual::after { background:rgba(20, 184, 166, 0.12); box-shadow:inset 0 0 0 8px rgba(20, 184, 166, 0.06), inset 0 0 0 30px rgba(20, 184, 166, 0.035); }
.agent-matrix-layout .m-card.agent-card-image .agent-card-visual::before,
.agent-matrix-layout .m-card.agent-card-image .agent-card-visual::after { background:rgba(244, 63, 94, 0.12); box-shadow:inset 0 0 0 8px rgba(244, 63, 94, 0.06), inset 0 0 0 30px rgba(244, 63, 94, 0.035); }
.agent-matrix-section { max-width:1280px; margin:30px auto 92px; padding:0 20px; }
.agent-matrix-layout {
display:grid !important;
grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
grid-template-rows:none !important;
gap:18px !important;
padding:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
overflow:visible !important;
}
.agent-matrix-layout::before { display:none !important; }
.agent-matrix-layout .m-card,
.agent-matrix-layout .m-card:first-child,
.agent-matrix-layout .m-card.agent-card-clone,
.agent-matrix-layout .m-card.agent-card-product,
.agent-matrix-layout .m-card.agent-card-fashion,
.agent-matrix-layout .m-card.agent-card-image,
.agent-matrix-layout .m-card.agent-card-aplus {
grid-column:auto !important;
grid-row:auto !important;
aspect-ratio:9 / 16 !important;
min-height:0 !important;
height:auto !important;
padding:18px 16px 16px !important;
border-radius:26px !important;
border:1px solid rgba(255, 255, 255, 0.68) !important;
background:linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.38)) !important;
color:#111827 !important;
backdrop-filter:blur(26px) saturate(1.18);
-webkit-backdrop-filter:blur(26px) saturate(1.18);
box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 22px 54px rgba(15, 23, 42, 0.1) !important;
}
.agent-matrix-layout .m-card:hover { transform:translateY(-4px) !important; box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 28px 68px rgba(15, 23, 42, 0.15) !important; }
.agent-matrix-layout .m-card::before {
content:"" !important;
position:absolute;
inset:0;
z-index:0;
display:block !important;
opacity:1 !important;
pointer-events:none;
background:linear-gradient(152deg, rgba(255, 255, 255, 0.88) 0 36%, rgba(255, 255, 255, 0.16) 36% 100%) !important;
}
.agent-matrix-layout .m-card::after {
content:"" !important;
display:block !important;
position:absolute;
inset:1px;
z-index:0;
border-radius:25px;
border:1px solid rgba(255, 255, 255, 0.55);
pointer-events:none;
}
.agent-matrix-layout .m-card.video-bg {
background:linear-gradient(145deg, rgba(16, 20, 28, 0.9), rgba(31, 41, 55, 0.66)) !important;
color:#fff !important;
border-color:rgba(255, 255, 255, 0.16) !important;
}
.agent-matrix-layout .m-card.video-bg::before { background:linear-gradient(180deg, rgba(4, 7, 13, 0.28), rgba(4, 7, 13, 0.86)) !important; z-index:1; }
.agent-matrix-layout .m-card.agent-card-clone { background:linear-gradient(145deg, rgba(238, 242, 255, 0.78), rgba(255, 255, 255, 0.46)) !important; }
.agent-matrix-layout .m-card.agent-card-product { background:linear-gradient(145deg, rgba(255, 248, 232, 0.82), rgba(255, 255, 255, 0.44)) !important; }
.agent-matrix-layout .m-card.agent-card-fashion { background:linear-gradient(145deg, rgba(230, 250, 247, 0.8), rgba(255, 255, 255, 0.44)) !important; }
.agent-matrix-layout .m-card.agent-card-image { background:linear-gradient(145deg, rgba(255, 237, 242, 0.82), rgba(255, 255, 255, 0.44)) !important; }
.agent-matrix-layout .clone-card-video { z-index:0; opacity:0.55; }
.agent-matrix-layout .clone-card-video::after { background:linear-gradient(180deg, rgba(4, 7, 13, 0.1), rgba(4, 7, 13, 0.78)) !important; }
.agent-matrix-layout .agent-card-visual { z-index:0; opacity:1; }
.agent-matrix-layout .agent-card-visual::before { inset:8% -16% auto auto; width:74%; height:34%; background:rgba(255, 255, 255, 0.34) !important; clip-path:polygon(26% 0, 100% 0, 78% 100%, 0 100%); }
.agent-matrix-layout .agent-card-visual::after { right:-22%; bottom:-8%; width:82%; background:rgba(255, 255, 255, 0.24) !important; box-shadow:inset 0 0 0 12px rgba(255, 255, 255, 0.14), inset 0 0 0 36px rgba(255, 255, 255, 0.1) !important; }
.agent-matrix-layout .m-card-content { z-index:3; max-width:none !important; }
.agent-matrix-layout .m-card-top { align-items:flex-start !important; gap:12px !important; }
.agent-feature-main { flex-direction:column !important; align-items:flex-start !important; gap:14px !important; }
.agent-feature-icon { width:44px !important; height:44px !important; flex:0 0 44px !important; border-radius:15px !important; box-shadow:0 16px 34px rgba(15, 23, 42, 0.16) !important; }
.agent-matrix-layout .m-card.video-bg .agent-feature-icon { background:rgba(255, 255, 255, 0.12) !important; border:1px solid rgba(255, 255, 255, 0.16) !important; color:#fff !important; backdrop-filter:blur(16px); }
.agent-matrix-layout .m-card .m-card-huge,
.agent-matrix-layout .m-card:first-child .m-card-huge,
.agent-matrix-layout .m-card:not(:first-child) .m-card-huge,
.agent-matrix-layout .m-card.agent-card-product .m-card-huge,
.agent-matrix-layout .m-card.agent-card-fashion .m-card-huge {
margin:0 !important;
color:inherit !important;
font-size:clamp(22px, 1.55vw, 30px) !important;
line-height:1.08 !important;
font-weight:860 !important;
letter-spacing:0 !important;
white-space:normal !important;
text-shadow:none !important;
}
.agent-matrix-layout .badge-new { background:rgba(255, 255, 255, 0.45) !important; color:#334155 !important; border:1px solid rgba(255, 255, 255, 0.58) !important; }
.agent-matrix-layout .m-card.video-bg .badge-new { background:rgba(255, 255, 255, 0.15) !important; color:#fff !important; border-color:rgba(255, 255, 255, 0.2) !important; }
.agent-matrix-layout .m-card-bottom { margin-top:auto !important; }
.agent-matrix-layout .m-card-title-small { color:inherit !important; font-size:13px !important; line-height:1.2 !important; white-space:normal !important; flex-wrap:wrap !important; }
.agent-matrix-layout .tag-small { background:rgba(255, 255, 255, 0.46) !important; color:inherit !important; border:1px solid rgba(255, 255, 255, 0.54) !important; border-radius:999px !important; }
.agent-matrix-layout .m-card-desc,
.agent-matrix-layout .m-card:first-child .m-card-desc,
.agent-matrix-layout .m-card.agent-card-clone .m-card-desc,
.agent-matrix-layout .m-card:not(:first-child) .m-card-desc {
max-width:100% !important;
color:inherit !important;
opacity:0.72 !important;
font-size:12px !important;
line-height:1.55 !important;
white-space:normal !important;
text-shadow:none !important;
-webkit-line-clamp:2 !important;
}
.agent-matrix-layout .card-arrow,
.agent-matrix-layout .m-card:first-child .card-arrow,
.agent-matrix-layout .m-card.agent-card-clone .card-arrow,
.agent-matrix-layout .m-card:not(:first-child) .card-arrow {
position:static !important;
width:34px !important;
height:34px !important;
flex:0 0 34px !important;
background:rgba(255, 255, 255, 0.56) !important;
color:#111827 !important;
border:1px solid rgba(255, 255, 255, 0.68) !important;
box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 12px 26px rgba(15, 23, 42, 0.08) !important;
}
.agent-matrix-layout .m-card.video-bg .card-arrow { background:#fff !important; color:#111827 !important; }
.agent-matrix-section, .home-workflow-section, .home-faq-section { scroll-margin-top:150px; }
.header-dropdown-style { position:relative; display:inline-block; }
.header-user-menu { position:absolute; top:100%; right:0; width:240px; background:white; border-radius:12px; padding:16px; margin-top:10px; box-shadow:0 10px 30px rgba(0, 0, 0, 0.15); border:1px solid #eee; opacity:0; visibility:hidden; transform:translateY(-10px); transition:all 0.3s ease; z-index:1000; color:#333; text-align:left; }
.header-dropdown-style:not(.not-logged-in):hover .header-user-menu { opacity:1; visibility:visible; transform:translateY(0); }
.popup-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid #eee; }
.popup-avatar { width:40px; height:40px; background:#000; color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:bold; }
.popup-info { flex:1; }
.popup-name { font-weight:700; font-size:15px; color:#333; }
.popup-email { font-size:11px; color:#666; margin-top:2px; }
.popup-stats-single { margin-bottom:16px; }
.stat-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; font-size:13px; }
.stat-label { color:#666; }
.stat-value { font-weight:700; color:#333; }
.stat-bar { height:6px; background-color:#f1f3f4; border-radius:3px; overflow:hidden; }
.stat-progress { height:100%; background-color:#000; border-radius:3px; width:0%; }
.popup-menu { display:flex; flex-direction:column; gap:4px; }
.menu-item { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:6px; cursor:pointer; font-size:14px; color:#333; transition:background 0.2s; text-decoration:none; }
.menu-item:hover { background-color:#f1f3f4; }
.menu-item svg { color:#666; }
.menu-divider { height:1px; background-color:#eee; margin:4px 0; }
.text-red { color:#d93025 !important; }
.text-red svg { color:#d93025 !important; }
.top-banner { position:fixed; top:0; left:0; width:100%; height:var(--banner-height); background:linear-gradient(135deg, #ff9a44 0%, #ff5e62 100%); color:#ffffff; display:flex; align-items:center; justify-content:center; font-size:14px; z-index:1001; box-shadow:0 4px 15px rgba(255, 94, 98, 0.25); font-weight:500; text-shadow:0 1px 2px rgba(0, 0, 0, 0.1); overflow:hidden; }
.top-banner::before { content:''; position:absolute; top:0; left:-100%; width:50%; height:100%; background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transform:skewX(-20deg); animation:shimmer 5s infinite; }
@keyframes shimmer {
0% { left:-100%; }
20% { left:200%; }
100% { left:200%; }
}
.top-banner .banner-content { display:flex; align-items:center; gap:12px; position:relative; z-index:1; }
.top-banner .banner-link { color:#ff5e62; text-decoration:none; font-weight:700; background:#ffffff; padding:4px 14px; border-radius:20px; transition:all 0.3s ease; box-shadow:0 2px 6px rgba(0, 0, 0, 0.1); text-shadow:none; }
.top-banner .banner-link:hover { transform:translateY(-1px); box-shadow:0 4px 10px rgba(0, 0, 0, 0.15); background:#fdfdfd; color:#ff3b3f; }
.top-banner { background:#111827; box-shadow:none; text-shadow:none; }
.top-banner::before { display:none; }
.top-banner .banner-content { gap:10px; font-weight:720; letter-spacing:0; }
.top-banner .banner-badge { display:inline-flex; align-items:center; min-height:22px; padding:0 9px; border-radius:999px; background:#ff5a3d; color:#fff; font-size:11px; font-weight:800; line-height:1; }
.top-banner .banner-link { color:#111827; box-shadow:none; }
.top-banner .banner-link:hover { color:#111827; box-shadow:none; background:#f5f5f5; }
:root { --bg-color:#ffffff; --text-color:#111827; --text-secondary:#64748b; --border-color:rgba(15,23,42,0.1); --card-bg:#ffffff; --header-height:78px; --banner-height:44px; }
body { background:#fff; color:#111827; }
.nav-brand { color:#111827; font-size:18px; font-weight:760; margin-top:0; letter-spacing:0; }
.nav-brand img { height:30px; filter:drop-shadow(0 10px 18px rgba(239, 68, 68, 0.18)); }
.nav-links { gap:34px; margin-top:0; align-items:center; }
.nav-link { color:#64748b; font-size:14px; font-weight:620; letter-spacing:0; }
.nav-link:hover, .nav-link.active { color:#111827; }
.nav-links > .nav-link { display:inline-flex; align-items:center; min-height:44px; }
.nav-dropdown { position:relative; display:flex; align-items:center; }
.nav-dropdown-trigger { display:inline-flex; align-items:center; gap:6px; min-height:44px; }
.nav-dropdown-trigger::after { content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); margin-top:-3px; opacity:0.7; transition:transform 0.2s ease; }
.nav-dropdown:hover .nav-dropdown-trigger::after { transform:rotate(225deg); margin-top:3px; }
.nav-mega { position:absolute; top:calc(100% + 10px); left:50%; width:260px; padding:8px; border-radius:16px; background:rgba(255, 255, 255, 0.98); border:1px solid rgba(226, 232, 240, 0.95); box-shadow:0 18px 48px rgba(15, 23, 42, 0.12); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); opacity:0; visibility:hidden; transform:translate(-50%, -8px); transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; pointer-events:none; z-index:1100; }
.nav-dropdown:hover .nav-mega { opacity:1; visibility:visible; transform:translate(-50%, 0); pointer-events:auto; }
.nav-dropdown:first-child .nav-mega { left:0; transform:translate(0, -8px); }
.nav-dropdown:first-child:hover .nav-mega { transform:translate(0, 0); }
.nav-mega::before { content:""; position:absolute; left:0; right:0; top:-16px; height:16px; }
.nav-mega-grid { display:grid; grid-template-columns:1fr; gap:6px; }
.nav-mega-card { position:relative; display:flex; align-items:center; gap:10px; min-height:46px; padding:9px 10px; border-radius:11px; color:#111827; text-decoration:none; background:#fff; border:1px solid transparent; overflow:hidden; transition:background 0.2s ease, border-color 0.2s ease; }
.nav-mega-card:hover { background:#f8fafc; border-color:#e2e8f0; transform:none; box-shadow:none; }
.nav-mega-card::after { display:none; }
.nav-mega-icon { width:28px; height:28px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:0 0 28px; background:var(--mega-accent, #111827); color:#fff; font-size:13px; font-weight:800; }
.nav-mega-copy { position:relative; z-index:1; min-width:0; }
.nav-mega-title { display:flex; align-items:center; gap:8px; color:#111827; font-size:14px; font-weight:760; line-height:1.25; margin-bottom:0; }
.nav-mega-title span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-mega-badge, .nav-mega-desc, .nav-mega-tags { display:none; }
.nav-mega-desc { color:#64748b; font-size:12px; line-height:1.55; margin-bottom:9px; }
.nav-mega-tags { flex-wrap:wrap; gap:6px; }
.nav-mega-tags em { display:inline-flex; align-items:center; min-height:20px; padding:0 7px; border-radius:999px; background:#f1f5f9; color:#475569; font-size:10px; font-style:normal; font-weight:700; }
.model-mega { width:240px; left:50%; }
.model-mega .nav-mega-grid { grid-template-columns:1fr; }
.model-mega .nav-mega-card { min-height:46px; }
.nav-mega { top:calc(100% + 12px); width:226px; padding:8px; border-radius:16px; border-color:#e5e7eb; box-shadow:0 18px 44px rgba(15, 23, 42, 0.12); z-index:1400; }
.nav-mega-grid { grid-template-columns:1fr; gap:4px; }
.nav-mega-card { align-items:center; min-height:44px; padding:8px 10px; border-radius:11px; gap:10px; border-color:transparent; transition:background 0.18s ease, border-color 0.18s ease; }
.nav-mega-card:hover { background:#f8fafc; border-color:#e2e8f0; transform:none; box-shadow:none; }
.nav-mega-card::after { display:none; }
.nav-mega-icon { width:28px; height:28px; flex-basis:28px; border-radius:9px; background:#f8fafc; color:var(--mega-accent, #111827); }
.nav-mega-title { margin-bottom:0; font-size:14px; font-weight:760; }
.nav-mega-badge, .nav-mega-desc, .nav-mega-tags { display:none; }
.model-mega { width:226px; }
.model-mega .nav-mega-card { min-height:44px; }
.user-profile { margin-top:0; color:#111827; background:#fff; min-height:36px; padding:0 16px; border-radius:999px; font-size:13px; font-weight:680; border:1px solid #e5e7eb; box-shadow:0 10px 26px rgba(15, 23, 42, 0.08); }
.user-profile:hover { background:#f8fafc; color:#111827; }
.user-avatar { display:none; }
.mobile-menu-btn { color:#111827; }
.hero-surface { max-width:1480px; margin:0 auto; padding:0; border-radius:0; overflow:visible; background:transparent; }
.hero-surface::before { display:none; }
.hero-surface::after { display:none; }
.hero-copy { max-width:960px; margin:0 auto 28px; text-align:center; }
.hero-orb { position:relative; z-index:2; width:112px; height:112px; margin:0 auto 20px; border-radius:50%; background:conic-gradient(from 210deg, #4f19d7 0deg, #a22cff 120deg, #6d39ff 250deg, #4f19d7 360deg); box-shadow:0 0 38px rgba(132, 48, 255, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.hero-orb::before { content:""; position:absolute; inset:16px; border-radius:50%; background:#000; box-shadow:inset 0 9px 18px rgba(0, 0, 0, 0.88), 0 0 0 10px rgba(0, 0, 0, 0.2); }
.hero-orb::after { content:""; position:absolute; inset:8px; border-radius:50%; border:12px solid rgba(255, 255, 255, 0.12); border-left-color:rgba(255,255,255,0.02); transform:rotate(-22deg); }
.hero-badge { position:relative; z-index:2; display:inline-flex; align-items:center; justify-content:center; min-height:28px; padding:0 14px; margin-bottom:18px; border-radius:999px; background:rgba(22, 24, 36, 0.82); border:1px solid rgba(255, 255, 255, 0.12); color:rgba(255, 255, 255, 0.82); font-size:11px; font-weight:620; letter-spacing:0; box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 14px 34px rgba(0,0,0,0.22); }
.hero-title { color:#111827; font-size:clamp(28px, 3.05vw, 45px); font-weight:720; line-height:1.06; letter-spacing:0; margin-bottom:16px; text-shadow:none; }
.hero-subtitle { color:#526173; max-width:750px; margin:0 auto; font-size:clamp(14px, 1.25vw, 18px); line-height:1.55; font-weight:520; letter-spacing:0; }
.hero-actions { justify-content:center; margin-top:22px; gap:10px; }
.hero-primary-action { min-height:42px; padding:0 22px; border-radius:999px; background:#111111; color:#fff; font-size:14px; font-weight:680; box-shadow:none; }
.hero-primary-action:hover { background:#000000; box-shadow:none; }
.hero-secondary-action { min-height:42px; padding:0 20px; border-radius:999px; background:#fff; border:1px solid #e5e7eb; color:#111827; font-size:14px; font-weight:680; box-shadow:none; }
.hero-secondary-action:hover { border-color:#cbd5e1; background:#f8fafc; box-shadow:none; }
.matrix-section { color:#111827; }
.matrix-header h2 { color:#111827; }
.matrix-header p { color:#64748b; }
.bottom-section { margin-top:96px; background:#000; border-top:none; color:#fff; }
.footer { padding:72px 40px 34px; border-top:1px solid rgba(255, 255, 255, 0.05); }
.footer-content { max-width:1240px; gap:68px; }
.footer-brand h3 { color:#fff; font-size:22px; font-weight:760; letter-spacing:-0.02em; margin-bottom:12px; }
.footer-brand p { color:#888; font-size:13px; line-height:1.8; max-width:360px; }
.footer-col h4 { color:#fff; font-size:13px; font-weight:720; letter-spacing:0; margin-bottom:14px; }
.footer-col ul li { margin-bottom:9px; }
.footer-col ul a { color:#888; font-size:13px; }
.footer-col ul a:hover { color:#fff; }
.footer-bottom { max-width:1240px; margin:52px auto 0; padding-top:22px; border-top:1px solid #333; color:#666; font-size:12px; gap:14px; }
@media (max-width: 1024px) {
.navbar { padding:0 24px; }
.hero { padding-top:calc(var(--header-height) + 48px); }
.hero-orb { width:92px; height:92px; }
.workflow-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
.hero { padding:calc(var(--header-height) + 32px) 14px 0; }
.hero-copy { margin-bottom:22px; }
.agent-matrix-section { margin-top:22px; }
.top-banner { min-height:42px; height:auto; padding:8px 14px; text-align:center; }
.top-banner .banner-content { flex-wrap:wrap; justify-content:center; line-height:1.35; font-size:12px; }
.top-banner .banner-link { padding:3px 10px; }
.hero-orb { width:74px; height:74px; margin-bottom:16px; }
.hero-orb::before { inset:12px; }
.hero-badge { min-height:26px; padding:0 12px; font-size:10.5px; margin-bottom:14px; }
.hero-title { font-size:29px; line-height:1.08; margin-bottom:12px; letter-spacing:0; }
.hero-subtitle { font-size:13px; line-height:1.5; max-width:92%; letter-spacing:0; }
.hero-primary-action, .hero-secondary-action { width:100%; max-width:260px; min-height:40px; font-size:13px; border-radius:999px; }
.bottom-section { width:100%; max-width:none; margin:58px 0 0; background:#000; }
.footer { width:100%; max-width:none; box-sizing:border-box; padding:34px 18px 24px; }
.footer * { box-sizing:border-box; }
.footer-content { width:100%; max-width:none; display:grid; grid-template-columns:1fr; gap:26px; margin:0; }
.footer-brand { text-align:left; }
.footer-brand h3 { font-size:20px; margin-bottom:8px; }
.footer-brand p { max-width:none; margin-bottom:0; font-size:12px; line-height:1.72; color:#888; }
.footer-links-wrapper { width:100%; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px 16px; }
.footer-col { min-width:0; }
.footer-col h4 { font-size:12px; margin-bottom:10px; }
.footer-col ul li { margin-bottom:8px; }
.footer-col ul a { font-size:12px; color:#888; }
.footer-col:nth-child(4) { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px; border:1px solid rgba(255, 255, 255, 0.12); border-radius:18px; background:rgba(255, 255, 255, 0.04); }
.footer-col:nth-child(4) h4 { margin-bottom:0; }
.footer-col:nth-child(4) img { width:74px !important; height:74px !important; margin-top:0 !important; border-radius:12px; }
.footer-bottom { width:100%; max-width:none; margin:28px 0 0; padding-top:18px; flex-direction:column; gap:8px; font-size:11px; line-height:1.4; text-align:center; color:#666; }
.footer-bottom a { font-size:11px !important; }
}
@media (max-width: 768px) {
:root { --header-height:56px; --banner-height:54px; }
html, body { width:100%; max-width:100%; overflow-x:hidden; }
.top-banner { height:var(--banner-height); min-height:var(--banner-height); padding:6px 10px; }
.top-banner .banner-content { width:100%; max-width:360px; gap:7px; row-gap:5px; font-size:11px; line-height:1.2; }
.top-banner .banner-badge { min-height:18px; padding:0 7px; font-size:10px; }
.top-banner .banner-link { padding:3px 10px; font-size:11px; line-height:1.2; }
.navbar { top:var(--banner-height); height:var(--header-height); padding:0 18px; }
.nav-left { width:100%; gap:0; justify-content:space-between; }
.nav-brand { font-size:18px; gap:9px; }
.nav-brand img { height:30px; width:30px; object-fit:contain; }
.nav-links, .nav-actions, .nav-mega { display:none !important; }
.mobile-menu-btn { display:flex; align-items:center; justify-content:center; width:40px; height:40px; }
.hero { padding:calc(var(--header-height) + var(--banner-height) + 28px) 14px 0; }
.hero-copy { width:100%; max-width:360px; margin:0 auto 24px; }
.hero-title { font-size:26px; line-height:1.16; font-weight:800; max-width:330px; margin:0 auto 12px; white-space:normal; overflow-wrap:break-word; text-align:center; }
.hero-subtitle { max-width:330px; font-size:13px; line-height:1.55; margin:0 auto; }
.hero-actions { width:100%; max-width:320px; margin:24px auto 0; gap:10px; }
.hero-primary-action, .hero-secondary-action { width:100%; max-width:none; min-height:46px; padding:0 18px; font-size:14px; }
.matrix-section { width:100%; margin:34px auto 54px; padding:0 14px; }
.agent-matrix-section { margin-top:30px; }
.agent-matrix-layout { grid-template-columns:1fr !important; grid-template-rows:none !important; gap:14px; }
.agent-matrix-layout .m-card:first-child,
.agent-matrix-layout .m-card.agent-card-clone,
.agent-matrix-layout .m-card.agent-card-product,
.agent-matrix-layout .m-card.agent-card-fashion,
.agent-matrix-layout .m-card.agent-card-image { grid-column:auto !important; grid-row:auto !important; }
.agent-matrix-layout .m-card:first-child { min-height:340px; padding:26px 22px; border-radius:22px; }
.agent-matrix-layout .m-card:not(:first-child) { min-height:154px; padding:18px 18px 16px; border-radius:22px; }
.agent-matrix-layout .m-card.agent-card-clone .m-card-content { max-width:100%; }
.agent-matrix-layout .m-card:first-child .m-card-huge { font-size:24px; white-space:normal; }
.agent-matrix-layout .m-card:not(:first-child) .m-card-huge { font-size:24px; white-space:normal; }
.m-card-title-small { font-size:13px; flex-wrap:wrap; white-space:normal; }
.m-card-desc, .agent-matrix-layout .m-card:not(:first-child) .m-card-desc { font-size:12px; line-height:1.5; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.home-workflow-section, .home-faq-section { margin:52px auto 0; padding:0 14px; }
.home-section-head { margin-bottom:20px; }
.home-section-head h2 { font-size:25px; line-height:1.22; }
.home-section-head p { font-size:13px; line-height:1.7; }
.workflow-grid { grid-template-columns:1fr; gap:12px; }
.workflow-card { min-height:auto; padding:20px; border-radius:22px; }
.faq-item summary { min-height:66px; padding:0 18px; font-size:15px; }
.faq-item p { padding:0 38px 20px 18px; font-size:13px; line-height:1.75; }
.stats-section { margin:50px auto; padding:0 18px; gap:28px; }
.stats-left h2 { font-size:24px; }
.stats-left h3 { font-size:19px; margin-bottom:18px; }
.stats-left p { font-size:13px; line-height:1.75; margin-bottom:14px; }
}
.agent-matrix-section { max-width:1680px !important; margin:26px auto 76px !important; padding:0 24px !important; }
.agent-matrix-layout {
display:grid !important;
grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
grid-template-rows:none !important;
gap:16px !important;
padding:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
overflow:visible !important;
}
.agent-matrix-layout::before { display:none !important; }
.agent-matrix-layout .m-card,
.agent-matrix-layout .m-card:first-child,
.agent-matrix-layout .m-card.agent-card-clone,
.agent-matrix-layout .m-card.agent-card-product,
.agent-matrix-layout .m-card.agent-card-fashion,
.agent-matrix-layout .m-card.agent-card-image {
grid-column:auto !important;
grid-row:auto !important;
display:block !important;
min-height:118px !important;
height:118px !important;
aspect-ratio:auto !important;
padding:0 !important;
border-radius:28px !important;
background:#ffffff !important;
border:1px solid #e5e7eb !important;
color:#111827 !important;
box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(15, 23, 42, 0.03) !important;
overflow:hidden !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
.agent-matrix-layout .m-card:hover {
transform:translateY(-2px) !important;
border-color:#d7dce4 !important;
box-shadow:0 12px 30px rgba(15, 23, 42, 0.08) !important;
}
.agent-matrix-layout .m-card.agent-card-aplus:hover {
transform:none !important;
border-color:#e5e7eb !important;
box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}
.agent-matrix-layout .m-card::before,
.agent-matrix-layout .m-card::after,
.agent-matrix-layout .agent-card-visual,
.agent-matrix-layout .clone-card-video,
.agent-matrix-layout .badge-new,
.agent-matrix-layout .m-card-title-small,
.agent-matrix-layout .tag-small,
.agent-matrix-layout .card-arrow {
display:none !important;
}
.agent-matrix-layout .m-card-content {
position:relative !important;
z-index:2 !important;
display:grid !important;
grid-template-columns:56px minmax(0, 1fr) !important;
align-items:center !important;
gap:16px !important;
width:100% !important;
height:100% !important;
max-width:none !important;
padding:22px 24px !important;
}
.agent-matrix-layout .m-card-top {
display:contents !important;
}
.agent-feature-main {
display:contents !important;
}
.agent-feature-icon,
.agent-matrix-layout .m-card:first-child .agent-feature-icon {
grid-column:1 !important;
width:56px !important;
height:56px !important;
flex:0 0 56px !important;
border-radius:16px !important;
color:#ffffff !important;
font-size:20px !important;
border:0 !important;
box-shadow:0 12px 24px rgba(15, 23, 42, 0.10) !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
.agent-matrix-layout .m-card.video-bg .agent-feature-icon { background:linear-gradient(135deg, #ff8a3d, #ef4444, #a855f7) !important; }
.agent-matrix-layout .m-card.agent-card-clone .agent-feature-icon { background:linear-gradient(135deg, #14c8d8, #2563eb) !important; }
.agent-matrix-layout .m-card.agent-card-product .agent-feature-icon { background:linear-gradient(135deg, #f97316, #f59e0b) !important; }
.agent-matrix-layout .m-card.agent-card-fashion .agent-feature-icon { background:linear-gradient(135deg, #10b981, #06b6d4) !important; }
.agent-matrix-layout .m-card.agent-card-image .agent-feature-icon { background:linear-gradient(135deg, #ec4899, #ef4444) !important; }
.agent-matrix-layout .m-card.agent-card-aplus .agent-feature-icon { background:linear-gradient(135deg, #38bdf8, #2563eb) !important; }
.agent-matrix-layout .m-card .m-card-huge,
.agent-matrix-layout .m-card:first-child .m-card-huge,
.agent-matrix-layout .m-card:not(:first-child) .m-card-huge,
.agent-matrix-layout .m-card.agent-card-product .m-card-huge,
.agent-matrix-layout .m-card.agent-card-fashion .m-card-huge,
.agent-matrix-layout .m-card.agent-card-aplus .m-card-huge {
grid-column:2 !important;
align-self:end !important;
margin:0 0 4px !important;
color:#111827 !important;
font-size:22px !important;
line-height:1.15 !important;
font-weight:850 !important;
letter-spacing:0 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
text-shadow:none !important;
}
.agent-matrix-layout .m-card-bottom {
grid-column:2 !important;
align-self:start !important;
margin:0 !important;
min-width:0 !important;
}
.agent-matrix-layout .m-card-bottom-header {
display:none !important;
}
.agent-matrix-layout .m-card-desc,
.agent-matrix-layout .m-card:first-child .m-card-desc,
.agent-matrix-layout .m-card.agent-card-clone .m-card-desc,
.agent-matrix-layout .m-card:not(:first-child) .m-card-desc {
display:block !important;
max-width:100% !important;
color:#8b8f98 !important;
opacity:1 !important;
font-size:17px !important;
line-height:1.2 !important;
font-weight:700 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
text-shadow:none !important;
}
@media (max-width: 1280px) {
.agent-matrix-layout { grid-template-columns:repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 768px) {
.agent-matrix-section { margin:24px auto 48px !important; padding:0 14px !important; }
.agent-matrix-layout { grid-template-columns:1fr !important; gap:12px !important; }
.agent-matrix-layout .m-card,
.agent-matrix-layout .m-card:first-child,
.agent-matrix-layout .m-card.agent-card-clone,
.agent-matrix-layout .m-card.agent-card-product,
.agent-matrix-layout .m-card.agent-card-fashion,
.agent-matrix-layout .m-card.agent-card-image,
.agent-matrix-layout .m-card.agent-card-aplus {
height:104px !important;
min-height:104px !important;
border-radius:24px !important;
}
.agent-matrix-layout .m-card-content { grid-template-columns:50px minmax(0, 1fr) !important; gap:14px !important; padding:18px 20px !important; }
.agent-feature-icon,
.agent-matrix-layout .m-card:first-child .agent-feature-icon {
width:50px !important;
height:50px !important;
flex-basis:50px !important;
border-radius:15px !important;
}
.agent-matrix-layout .m-card .m-card-huge,
.agent-matrix-layout .m-card:first-child .m-card-huge,
.agent-matrix-layout .m-card:not(:first-child) .m-card-huge {
font-size:20px !important;
}
.agent-matrix-layout .m-card-desc,
.agent-matrix-layout .m-card:first-child .m-card-desc,
.agent-matrix-layout .m-card:not(:first-child) .m-card-desc {
font-size:15px !important;
}
}
.hero .agent-matrix-section,
.agent-matrix-section {
width:100% !important;
max-width:1460px !important;
margin:32px auto 72px !important;
padding:0 24px !important;
box-sizing:border-box !important;
}
.agent-matrix-layout {
display:flex !important;
flex-wrap:wrap !important;
justify-content:center !important;
align-items:center !important;
gap:18px !important;
width:100% !important;
margin:0 auto !important;
padding:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
overflow:visible !important;
isolation:auto !important;
}
.agent-matrix-layout::before { display:none !important; }
.agent-matrix-layout .m-card,
.agent-matrix-layout .m-card:first-child,
.agent-matrix-layout .m-card.agent-card-clone,
.agent-matrix-layout .m-card.agent-card-product,
.agent-matrix-layout .m-card.agent-card-fashion,
.agent-matrix-layout .m-card.agent-card-image,
.agent-matrix-layout .m-card.agent-card-aplus {
position:relative !important;
display:flex !important;
flex:0 0 220px !important;
width:220px !important;
min-width:220px !important;
max-width:220px !important;
height:112px !important;
min-height:112px !important;
aspect-ratio:auto !important;
grid-column:auto !important;
grid-row:auto !important;
padding:0 !important;
border-radius:28px !important;
background:#fff !important;
border:1px solid #e5e7eb !important;
color:#111827 !important;
box-shadow:0 10px 28px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
overflow:hidden !important;
text-decoration:none !important;
transform:none !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
.agent-matrix-layout .m-card:hover {
transform:translateY(-2px) !important;
border-color:#d7dce4 !important;
box-shadow:0 16px 36px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}
.agent-matrix-layout .m-card.agent-card-aplus,
.agent-matrix-layout .m-card.agent-card-aplus:hover {
cursor:not-allowed !important;
transform:none !important;
}
.agent-matrix-layout .m-card::before,
.agent-matrix-layout .m-card::after,
.agent-matrix-layout .agent-card-visual,
.agent-matrix-layout .clone-card-video,
.agent-matrix-layout .badge-new,
.agent-matrix-layout .m-card-bottom-header,
.agent-matrix-layout .m-card-title-small,
.agent-matrix-layout .tag-small,
.agent-matrix-layout .card-arrow {
display:none !important;
}
.agent-matrix-layout .m-card-content {
position:relative !important;
z-index:2 !important;
display:grid !important;
grid-template-columns:52px minmax(0, 1fr) !important;
grid-template-rows:auto auto !important;
align-content:center !important;
align-items:center !important;
gap:4px 15px !important;
width:100% !important;
height:100% !important;
max-width:none !important;
padding:22px 23px !important;
box-sizing:border-box !important;
}
.agent-matrix-layout .m-card-top,
.agent-matrix-layout .agent-feature-main {
display:contents !important;
}
.agent-matrix-layout .agent-feature-icon,
.agent-matrix-layout .m-card:first-child .agent-feature-icon {
grid-column:1 !important;
grid-row:1 / span 2 !important;
align-self:center !important;
justify-self:start !important;
width:52px !important;
height:52px !important;
min-width:52px !important;
flex:0 0 52px !important;
border-radius:16px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
color:#fff !important;
font-size:20px !important;
border:0 !important;
box-shadow:0 12px 24px rgba(15, 23, 42, 0.10) !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
.agent-matrix-layout .m-card.video-bg .agent-feature-icon { background:linear-gradient(135deg, #ff7a45 0%, #ef4444 48%, #a855f7 100%) !important; }
.agent-matrix-layout .m-card.agent-card-clone .agent-feature-icon { background:linear-gradient(135deg, #18c7dc 0%, #2563eb 100%) !important; }
.agent-matrix-layout .m-card.agent-card-product .agent-feature-icon { background:linear-gradient(135deg, #fb923c 0%, #f59e0b 100%) !important; }
.agent-matrix-layout .m-card.agent-card-fashion .agent-feature-icon { background:linear-gradient(135deg, #10b981 0%, #06b6d4 100%) !important; }
.agent-matrix-layout .m-card.agent-card-image .agent-feature-icon { background:linear-gradient(135deg, #ec4899 0%, #ef4444 100%) !important; }
.agent-matrix-layout .m-card.agent-card-aplus .agent-feature-icon { background:linear-gradient(135deg, #38bdf8 0%, #2563eb 100%) !important; }
.agent-matrix-layout .m-card .m-card-huge,
.agent-matrix-layout .m-card:first-child .m-card-huge,
.agent-matrix-layout .m-card:not(:first-child) .m-card-huge,
.agent-matrix-layout .m-card.agent-card-product .m-card-huge,
.agent-matrix-layout .m-card.agent-card-fashion .m-card-huge,
.agent-matrix-layout .m-card.agent-card-image .m-card-huge,
.agent-matrix-layout .m-card.agent-card-aplus .m-card-huge {
grid-column:2 !important;
grid-row:1 !important;
align-self:end !important;
margin:0 !important;
max-width:100% !important;
color:#111827 !important;
font-size:21px !important;
line-height:1.15 !important;
font-weight:850 !important;
letter-spacing:0 !important;
white-space:nowrap !important;
overflow:visible !important;
text-overflow:clip !important;
text-shadow:none !important;
}
.agent-matrix-layout .m-card-bottom {
grid-column:2 !important;
grid-row:2 !important;
align-self:start !important;
margin:0 !important;
min-width:0 !important;
}
.agent-matrix-layout .m-card-desc,
.agent-matrix-layout .m-card:first-child .m-card-desc,
.agent-matrix-layout .m-card.agent-card-clone .m-card-desc,
.agent-matrix-layout .m-card:not(:first-child) .m-card-desc {
display:block !important;
max-width:100% !important;
color:#8e949f !important;
opacity:1 !important;
font-size:15px !important;
line-height:1.25 !important;
font-weight:760 !important;
white-space:nowrap !important;
overflow:visible !important;
text-overflow:clip !important;
text-shadow:none !important;
}
@media (max-width: 1500px) {
.agent-matrix-section { max-width:960px !important; }
}
@media (max-width: 768px) {
.agent-matrix-section { max-width:none !important; margin:24px auto 48px !important; padding:0 14px !important; }
.agent-matrix-layout { display:grid !important; grid-template-columns:1fr !important; gap:12px !important; }
.agent-matrix-layout .m-card,
.agent-matrix-layout .m-card:first-child,
.agent-matrix-layout .m-card.agent-card-clone,
.agent-matrix-layout .m-card.agent-card-product,
.agent-matrix-layout .m-card.agent-card-fashion,
.agent-matrix-layout .m-card.agent-card-image,
.agent-matrix-layout .m-card.agent-card-aplus {
width:100% !important;
min-width:0 !important;
max-width:none !important;
height:104px !important;
min-height:104px !important;
flex:1 1 auto !important;
border-radius:24px !important;
}
.agent-matrix-layout .m-card-content { grid-template-columns:50px minmax(0, 1fr) !important; padding:18px 20px !important; gap:4px 14px !important; }
.agent-matrix-layout .agent-feature-icon,
.agent-matrix-layout .m-card:first-child .agent-feature-icon {
width:50px !important;
height:50px !important;
min-width:50px !important;
flex-basis:50px !important;
border-radius:15px !important;
}
.agent-matrix-layout .m-card .m-card-huge,
.agent-matrix-layout .m-card:first-child .m-card-huge,
.agent-matrix-layout .m-card:not(:first-child) .m-card-huge {
font-size:20px !important;
}
.agent-matrix-layout .m-card:not(:first-child) .m-card-desc {
font-size:14px !important;
}
}
/* ==============================================================
New Horizontal Cards Layout (Referencing the Dark Theme Picture)
============================================================== */
.feature-pills-section {
max-width: 1400px;
margin: 40px auto 60px;
padding: 0 20px;
}
.feature-pills-layout {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
.h-pill {
position: relative;
display: flex;
flex-direction: column;
width: calc(33.333% - 11px);
max-width: 380px;
min-width: 280px;
background: #1e1e1e;
border: 1px solid #2d2d2d;
border-radius: 16px;
padding: 24px;
text-decoration: none;
transition: all 0.2s ease;
box-sizing: border-box;
}
.h-pill:hover {
background: #252525;
border-color: #3d3d3d;
}
.h-pill.disabled {
cursor: not-allowed;
opacity: 0.6;
}
.h-pill.disabled:hover {
background: #1e1e1e;
border-color: #2d2d2d;
}
.pill-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 100%;
margin-bottom: 24px;
}
.pill-icon {
color: #ffffff;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.pill-badge {
background: rgba(255, 255, 255, 0.08);
color: #d4d4d8;
font-size: 13px;
font-weight: 500;
padding: 6px 12px;
border-radius: 20px;
display: flex;
align-items: center;
gap: 6px;
}
.pill-badge.trending {
background: #ff2a7a;
color: #ffffff;
font-weight: 800;
font-style: italic;
padding: 4px 10px;
border-radius: 6px;
transform: skewX(-10deg);
letter-spacing: 0.5px;
}
.pill-badge.trending span {
transform: skewX(10deg);
display: inline-block;
}
.pill-title {
color: #ffffff;
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
letter-spacing: 0.2px;
}
.pill-subtitle {
color: #a1a1aa;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
position: relative;
z-index: 1;
}
/* Video Pill Special Styling for Background */
.video-feature-pill, .image-feature-pill {
overflow: hidden;
}
.pill-bg-video, .pill-bg-image {
position: absolute;
inset: 0;
z-index: 0;
}
.pill-bg-video video, .pill-bg-image img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.3;
transition: opacity 0.3s;
}
.video-feature-pill:hover .pill-bg-video video,
.image-feature-pill:hover .pill-bg-image img {
opacity: 0.5;
}
.pill-bg-video::after, .pill-bg-image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(30, 30, 30, 0.4) 0%, rgba(30, 30, 30, 0.9) 100%);
}
/* Ensure content stays above video/image */
.video-feature-pill .pill-top,
.video-feature-pill .pill-title,
.video-feature-pill .pill-subtitle,
.image-feature-pill .pill-top,
.image-feature-pill .pill-title,
.image-feature-pill .pill-subtitle {
position: relative;
z-index: 1;
}
/* Mobile overrides */
@media (max-width: 768px) {
.h-pill {
width: 100%;
max-width: none;
}
}
/* ==============================================================
Home Redesign - Capsule Nav, Hero, Feature Cards
============================================================== */
body {
background: #ffffff;
}
:root {
--home-content-max: 1400px;
}
.navbar {
top: calc(var(--banner-height) + 14px) !important;
left: 50% !important;
right: auto !important;
width: min(var(--home-content-max), calc(100% - 40px)) !important;
height: 70px !important;
padding: 0 16px 0 18px !important;
border: 1px solid rgba(229, 231, 235, 0.92) !important;
border-radius: 999px !important;
background: rgba(255, 255, 255, 0.9) !important;
box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10) !important;
transform: translateX(-50%) !important;
}
.nav-left {
gap: 28px !important;
min-width: 0;
}
.nav-brand {
margin-top: 0 !important;
font-size: 18px !important;
white-space: nowrap;
}
.nav-brand img {
height: 30px !important;
}
.nav-links {
gap: 6px !important;
margin-top: 0 !important;
align-items: center;
}
.nav-link {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 0 14px;
border-radius: 999px;
color: #4b5563 !important;
font-size: 14px !important;
font-weight: 760 !important;
}
.nav-link:hover,
.nav-link.active,
.nav-dropdown:hover .nav-dropdown-trigger {
background: #111827;
color: #ffffff !important;
}
.nav-dropdown-trigger {
min-height: 38px !important;
}
.nav-actions {
margin-left: 12px;
}
.user-profile {
min-height: 42px !important;
margin-top: 0 !important;
background: #f9fafb;
border: 1px solid #eef0f3;
}
.user-avatar {
width: 32px !important;
height: 32px !important;
font-size: 15px !important;
}
.nav-mega {
top: calc(100% + 14px) !important;
}
.home-redesign-hero.hero {
width: 100%;
max-width: none !important;
padding: calc(var(--banner-height) + 108px) 20px 0 !important;
}
.home-redesign-hero .hero-surface {
position: relative;
display: grid;
grid-template-columns: minmax(340px, 0.92fr) minmax(420px, 1.08fr);
align-items: center;
gap: 34px;
max-width: var(--home-content-max);
min-height: 430px;
margin: 0 auto !important;
padding: 54px 52px !important;
overflow: hidden;
border-radius: 34px !important;
background-color: #030303 !important;
isolation: isolate;
}
.home-redesign-hero .hero-surface::before {
content: "";
display: block !important;
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
radial-gradient(rgba(255, 255, 255, 0.95) 1.35px, transparent 1.7px),
radial-gradient(rgba(255, 255, 255, 0.72) 1.15px, transparent 1.55px);
background-size: 50px 50px;
background-position: 0 0, 25px 25px;
opacity: 0.54;
mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.10) 30%, rgba(0, 0, 0, 0.46) 58%, rgba(0, 0, 0, 0.92) 100%);
-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.10) 30%, rgba(0, 0, 0, 0.46) 58%, rgba(0, 0, 0, 0.92) 100%);
animation: stars 60s linear infinite;
}
.home-redesign-hero .hero-surface::after {
content: "";
position: absolute;
top: 0;
right: 5%;
bottom: 0;
z-index: 0;
width: 1px;
background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.32) 0 6px, transparent 6px 14px);
filter: none;
}
.home-redesign-hero .hero-copy {
position: relative;
z-index: 2;
max-width: 680px !important;
margin: 0 !important;
text-align: left !important;
}
.home-redesign-hero .hero-title {
max-width: 720px;
margin: 0 0 24px !important;
color: #ffffff !important;
font-size: 34px !important;
font-weight: 850 !important;
line-height: 1.28 !important;
letter-spacing: 0 !important;
}
.home-redesign-hero .hero-subtitle {
max-width: 560px !important;
margin: 0 !important;
color: rgba(255, 255, 255, 0.58) !important;
font-size: 17px !important;
font-weight: 720 !important;
line-height: 1.65 !important;
}
.home-redesign-hero .hero-actions {
justify-content: flex-start !important;
margin-top: 34px !important;
}
.home-redesign-hero .hero-primary-action {
min-height: 46px !important;
padding: 0 25px !important;
background: #ffffff !important;
color: #111827 !important;
box-shadow: none !important;
}
.home-redesign-hero .hero-primary-action:hover {
background: #f3f4f6 !important;
box-shadow: none !important;
}
.home-redesign-hero .hero-secondary-action {
min-height: 46px !important;
padding: 0 22px !important;
background: rgba(255, 255, 255, 0.08) !important;
border-color: rgba(255, 255, 255, 0.16) !important;
color: #ffffff !important;
box-shadow: none !important;
}
.home-redesign-hero .hero-secondary-action:hover {
background: rgba(255, 255, 255, 0.14) !important;
box-shadow: none !important;
}
.hero-collage {
position: relative;
z-index: 1;
height: 306px;
min-width: 0;
}
.hero-shot {
position: absolute;
overflow: hidden;
margin: 0;
border-radius: 10px;
background: #111827;
box-shadow: 0 22px 52px rgba(0, 0, 0, 0.28);
}
.hero-shot img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-shot-main {
right: 2%;
top: 2px;
width: 46%;
height: 150px;
}
.hero-shot-tall {
left: 11%;
top: 38px;
width: 33%;
height: 148px;
}
.hero-shot-wide {
left: 2%;
bottom: 18px;
width: 43%;
height: 116px;
}
.hero-shot-small {
right: 8%;
bottom: 8px;
width: 36%;
height: 122px;
}
.feature-pills-section {
max-width: var(--home-content-max) !important;
margin: 46px auto 70px !important;
padding: 0 20px !important;
}
.feature-section-head {
position: relative;
margin-bottom: 24px;
}
.feature-section-head h2 {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.feature-tabs {
display: flex;
align-items: center;
gap: 34px;
overflow-x: auto;
padding-bottom: 10px;
}
.feature-tab {
position: relative;
flex: 0 0 auto;
appearance: none;
border: 0;
background: transparent;
color: #a1a1aa;
cursor: default;
font: inherit;
font-size: 21px;
font-weight: 850;
line-height: 1.2;
letter-spacing: 0;
padding: 0 0 12px;
}
.feature-tab.active {
color: #111827;
}
.feature-tab.active::after {
content: "";
position: absolute;
left: 8px;
bottom: 0;
width: 42px;
height: 4px;
border-radius: 999px;
background: #a855f7;
}
.feature-panel {
display: none;
}
.feature-panel.active {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px !important;
justify-content: stretch !important;
align-items: stretch;
grid-auto-rows: 188px;
}
.h-pill.feature-card {
--card-accent: #ffffff;
--card-accent-2: rgba(255, 255, 255, 0.68);
position: relative;
display: flex;
flex-direction: column;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: 188px;
min-height: 0;
padding: 24px 26px !important;
border: 1px solid rgba(255, 255, 255, 0.09) !important;
border-radius: 20px !important;
background:
radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.13) 0%, transparent 28%),
linear-gradient(145deg, #292929 0%, #1d1d1d 48%, #141414 100%) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
inset 0 -1px 0 rgba(0, 0, 0, 0.42),
0 20px 54px rgba(0, 0, 0, 0.14) !important;
color: #ffffff;
overflow: hidden;
isolation: isolate;
}
.h-pill.feature-card:hover {
border-color: rgba(255, 255, 255, 0.14) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.09),
0 24px 58px rgba(0, 0, 0, 0.18) !important;
transform: translateY(-3px);
}
.h-pill.feature-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
background:
linear-gradient(115deg, rgba(255, 255, 255, 0.12) 0%, transparent 28%, rgba(255, 255, 255, 0.04) 62%, transparent 100%),
radial-gradient(rgba(255, 255, 255, 0.16) 0.6px, transparent 0.9px);
background-size: auto, 9px 9px;
opacity: 0.34;
pointer-events: none;
}
.h-pill.feature-card::after {
content: none !important;
display: none !important;
}
.feature-card-top {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 0;
}
.feature-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 0;
color: #ffffff;
background: transparent;
box-shadow: none;
font-size: 21px;
opacity: 0.94;
}
.feature-badge {
display: inline-flex;
align-items: center;
min-height: 32px;
max-width: 142px;
padding: 0 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.11);
color: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(255, 255, 255, 0.04);
font-size: 13px;
font-weight: 800;
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.feature-card-video-tone {
background: #171717 !important;
border-color: rgba(255, 255, 255, 0.10) !important;
}
.feature-card-bg-video {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.46;
filter: saturate(0.92) contrast(1.08);
pointer-events: none;
}
.feature-card-video-tone::before {
z-index: 1;
background:
linear-gradient(90deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.76)),
linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.36));
opacity: 1;
}
.feature-card-video-tone .feature-card-top,
.feature-card-video-tone .feature-card-copy {
z-index: 2;
}
.feature-card-clone-tone .feature-badge {
background: #ff2d86;
color: #ffffff;
border-color: transparent;
font-style: italic;
}
.feature-card-image-tone .feature-badge {
background: rgba(255, 255, 255, 0.10);
color: rgba(255, 255, 255, 0.78);
}
.feature-card-detail-tone .feature-badge {
background: #ff2d86;
color: #ffffff;
border-color: transparent;
}
.feature-card-copy {
position: relative;
z-index: 1;
padding: 0;
margin-top: auto;
}
.feature-card-title {
display: flex;
align-items: center;
gap: 0;
color: #ffffff;
font-size: 19px;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0;
}
.feature-card-title i {
display: none;
}
.feature-card:hover .feature-card-title i {
opacity: 1;
transform: translateX(0);
}
.feature-card-copy p {
margin: 12px 0 0;
color: rgba(255, 255, 255, 0.46);
font-size: 14px;
font-weight: 620;
line-height: 1.48;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 1180px) {
.navbar {
width: min(var(--home-content-max), calc(100% - 36px)) !important;
}
.nav-left {
gap: 18px !important;
}
.nav-link {
padding: 0 11px;
}
.home-redesign-hero .hero-surface {
grid-template-columns: 1fr;
min-height: 0;
padding: 42px !important;
}
.hero-collage {
height: 270px;
}
.feature-panel.active {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px !important;
grid-auto-rows: 178px;
}
}
@media (max-width: 768px) {
.navbar {
top: calc(var(--banner-height) + 8px) !important;
width: calc(100% - 24px) !important;
height: 54px !important;
padding: 0 14px !important;
}
.nav-brand {
font-size: 16px !important;
}
.nav-brand img {
height: 28px !important;
}
.home-redesign-hero.hero {
padding: calc(var(--banner-height) + 82px) 14px 0 !important;
}
.home-redesign-hero .hero-surface {
gap: 24px;
padding: 30px 22px 24px !important;
border-radius: 26px !important;
}
.home-redesign-hero .hero-surface::before {
background-size: 36px 36px;
}
.home-redesign-hero .hero-title {
font-size: 28px !important;
line-height: 1.32 !important;
}
.home-redesign-hero .hero-subtitle {
font-size: 15px !important;
}
.home-redesign-hero .hero-actions {
gap: 10px;
}
.home-redesign-hero .hero-primary-action,
.home-redesign-hero .hero-secondary-action {
width: 100%;
}
.hero-collage {
height: 230px;
}
.hero-shot-main {
right: -10px;
top: 0;
width: 48%;
height: 118px;
}
.hero-shot-tall {
left: 0;
top: 18px;
width: 36%;
height: 132px;
}
.hero-shot-wide {
left: 8%;
top: 154px;
width: 38%;
height: 70px;
}
.hero-shot-small {
right: 0;
top: 132px;
width: 34%;
height: 82px;
}
.feature-pills-section {
margin: 34px auto 54px !important;
padding: 0 14px !important;
}
.feature-tabs {
gap: 26px;
}
.feature-tab {
font-size: 19px;
}
.feature-panel.active {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 14px !important;
grid-auto-rows: 154px;
}
.h-pill.feature-card {
height: 154px;
min-height: 0;
padding: 18px !important;
border-radius: 16px !important;
}
.h-pill.feature-card::after {
content: none !important;
display: none !important;
}
.feature-card-top {
margin-bottom: 0;
}
.feature-icon {
width: 30px;
height: 30px;
border-radius: 0;
background: transparent;
box-shadow: none;
font-size: 21px;
}
.feature-badge {
max-width: 104px;
min-height: 28px;
padding: 0 10px;
font-size: 11px;
}
.feature-card-title {
font-size: 16px;
}
.feature-card-copy {
padding-bottom: 0;
}
.feature-card-copy p {
display: -webkit-box;
margin-top: 8px;
color: rgba(255, 255, 255, 0.52);
font-size: 12px;
font-weight: 620;
line-height: 1.42;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
@media (max-width: 480px) {
.feature-panel.active {
grid-template-columns: 1fr;
}
}
/* FAQ and footer alignment with the redesigned home width */
.home-faq-section {
max-width: var(--home-content-max) !important;
margin: 82px auto 0 !important;
padding: 0 20px !important;
box-sizing: border-box;
}
.home-faq-section .home-section-head {
max-width: 780px;
}
.faq-list {
width: 100%;
border-radius: 28px !important;
border-color: rgba(219, 232, 245, 0.9) !important;
box-shadow: 0 24px 72px rgba(15, 23, 42, 0.08) !important;
}
.bottom-section {
width: min(var(--home-content-max), calc(100% - 40px)) !important;
max-width: var(--home-content-max) !important;
margin: 92px auto 28px !important;
border-radius: 42px !important;
background: #000 !important;
box-shadow: 0 28px 90px rgba(15, 23, 42, 0.22);
overflow: hidden;
}
.bottom-section .starry-bg {
border-radius: inherit;
opacity: 0.15;
}
.bottom-section .footer {
padding: 58px 52px 30px !important;
border-top: 0 !important;
}
.bottom-section .footer-content,
.bottom-section .footer-bottom {
max-width: none !important;
}
.bottom-section .footer-content {
gap: 72px !important;
}
.bottom-section .footer-brand h3 {
font-size: 24px !important;
}
.bottom-section .footer-brand p {
color: rgba(255, 255, 255, 0.56) !important;
}
.bottom-section .footer-col h4 {
color: rgba(255, 255, 255, 0.94) !important;
}
.bottom-section .footer-col ul a {
color: rgba(255, 255, 255, 0.52) !important;
}
.bottom-section .footer-col ul a:hover {
color: #ffffff !important;
}
.bottom-section .footer-col:nth-child(4) img {
border-radius: 18px;
}
.bottom-section .footer-bottom {
margin-top: 44px !important;
border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
color: rgba(255, 255, 255, 0.42) !important;
}
@media (max-width: 768px) {
.home-faq-section {
margin: 52px auto 0 !important;
padding: 0 14px !important;
}
.faq-list {
border-radius: 22px !important;
}
.bottom-section {
width: calc(100% - 28px) !important;
margin: 58px auto 18px !important;
border-radius: 28px !important;
}
.bottom-section .footer {
padding: 32px 18px 24px !important;
}
.bottom-section .footer-content {
gap: 26px !important;
}
.bottom-section .footer-bottom {
margin-top: 28px !important;
}
}
/* Hero image layout: 4 images, one 1:1, no overlap */
.hero-collage {
--hero-collage-gap: 14px;
--hero-square-size: calc((316px - var(--hero-collage-gap)) / 2);
display: grid !important;
grid-template-columns: 0.9fr 1.1fr;
grid-template-rows: 1fr 1fr;
gap: var(--hero-collage-gap);
height: 316px !important;
}
.hero-shot {
position: relative !important;
inset: auto !important;
width: auto !important;
height: auto !important;
min-width: 0;
min-height: 0;
border-radius: 16px !important;
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24) !important;
}
.hero-shot-main {
grid-column: 2;
grid-row: 1;
}
.hero-shot-square {
grid-column: 1;
grid-row: 1;
width: var(--hero-square-size) !important;
height: var(--hero-square-size) !important;
aspect-ratio: 1 / 1;
align-self: end;
justify-self: end;
}
.hero-shot-wide {
grid-column: 1;
grid-row: 2;
}
.hero-shot-small {
grid-column: 2;
grid-row: 2;
}
.hero-shot img {
object-fit: cover !important;
}
.hero-shot-square img {
object-fit: cover !important;
}
@media (max-width: 1180px) {
.hero-collage {
--hero-square-size: calc((300px - var(--hero-collage-gap)) / 2);
height: 300px !important;
}
}
@media (max-width: 768px) {
.hero-collage {
--hero-collage-gap: 10px;
--hero-square-size: calc((240px - var(--hero-collage-gap)) / 2);
grid-template-columns: 1fr 1fr;
height: 240px !important;
}
.hero-shot {
border-radius: 12px !important;
}
}
/* Mobile hero and feature-card final polish */
@media (max-width: 768px) {
.home-redesign-hero .hero-surface {
background:
radial-gradient(circle at 92% 14%, rgba(96, 165, 250, .20) 0%, transparent 30%),
radial-gradient(circle at 78% 86%, rgba(244, 63, 94, .15) 0%, transparent 34%),
#030303 !important;
}
.home-redesign-hero .hero-surface::before {
display: block !important;
background-image:
radial-gradient(rgba(255, 255, 255, .94) 1.25px, transparent 1.7px),
radial-gradient(rgba(255, 255, 255, .56) .9px, transparent 1.45px);
background-size: 34px 34px, 52px 52px;
background-position: 0 0, 17px 21px;
opacity: .66;
mask-image: linear-gradient(96deg, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .22) 34%, rgba(0, 0, 0, .62) 66%, rgba(0, 0, 0, .96) 100%);
-webkit-mask-image: linear-gradient(96deg, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .22) 34%, rgba(0, 0, 0, .62) 66%, rgba(0, 0, 0, .96) 100%);
}
.feature-panel.active {
grid-auto-rows: 176px;
}
.h-pill.feature-card {
height: 176px;
}
.feature-card-copy p {
display: -webkit-box !important;
}
}
@media (max-width: 480px) {
.feature-panel.active {
grid-auto-rows: 166px;
}
.h-pill.feature-card {
height: 166px;
}
}