/* UDI Home Builder v2 — High-energy crypto aesthetic */

.udi-homepage {
    --bg: #04060e;
    --card: rgba(10, 16, 32, 0.8);
    --cyan: #00e5ff;
    --green: #00ff88;
    --purple: #a855f7;
    --text: #e8edf5;
    --muted: #7a8ba8;
    --border: rgba(255,255,255,0.05);
    --radius: 20px;
    --radius-sm: 12px;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    position: relative;
}
body:has(.udi-homepage) .main-content,
body:has(.udi-homepage) #main-body { background: var(--bg) !important; }

/* Ambient BG */
.udi-homepage::before {
    content: ''; position: fixed; top:0;left:0;right:0;bottom:0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 10%, rgba(0,229,255,0.06) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 30%, rgba(168,85,247,0.05) 0%, transparent 60%),
        radial-gradient(ellipse 70% 40% at 50% 90%, rgba(0,255,136,0.04) 0%, transparent 60%);
    pointer-events: none; z-index: 0;
}
.udi-homepage::after {
    content: ''; position: fixed; inset: 0;
    background-image:
        linear-gradient(rgba(0,229,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,229,255,0.03) 1px, transparent 1px);
    background-size: 80px 80px;
    animation: udiGrid 30s linear infinite;
    pointer-events: none; z-index: 0;
}
@keyframes udiGrid { 0%{transform:translate(0,0)} 100%{transform:translate(80px,80px)} }

.udi-container { max-width:1200px; margin:0 auto; padding:0 28px; position:relative; z-index:1; }
.udi-section { padding:100px 0; position:relative; }
.udi-section-title { font-size:2.8rem; font-weight:800; text-align:center; margin-bottom:16px; color:#fff; letter-spacing:-0.03em; }
.udi-gradient-text { background:linear-gradient(135deg,var(--cyan),var(--green)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* Hero */
.udi-hero { position:relative; padding:140px 0 120px; text-align:center; overflow:hidden; min-height:600px; display:flex; align-items:center; }
.udi-hero-bg-glow { position:absolute; top:50%;left:50%; transform:translate(-50%,-50%); width:1000px;height:600px; background:radial-gradient(ellipse,rgba(0,229,255,0.12) 0%,rgba(168,85,247,0.05) 40%,transparent 70%); animation:udiGlow 6s ease-in-out infinite alternate; pointer-events:none; }
@keyframes udiGlow { 0%{opacity:.7;transform:translate(-50%,-50%) scale(1)} 100%{opacity:1;transform:translate(-50%,-50%) scale(1.1)} }
.udi-hero-grid-overlay { position:absolute;inset:0; background-image:linear-gradient(rgba(0,229,255,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,0.02) 1px,transparent 1px); background-size:60px 60px; pointer-events:none; }
.udi-hero .udi-container { position:relative; z-index:2; }
.udi-hero-content { max-width:850px; margin:0 auto; }
.udi-hero-title { font-size:4rem; font-weight:900; line-height:1.08; margin-bottom:22px; letter-spacing:-0.04em; color:#fff; }
.udi-hero-subtitle { font-size:1.2rem; color:var(--muted); max-width:600px; margin:0 auto 40px; line-height:1.75; }

/* Buttons */
.udi-hero-buttons { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.udi-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:15px 34px; border-radius:12px; font-size:0.95rem; font-weight:700; text-decoration:none; cursor:pointer; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); border:none; position:relative; overflow:hidden; }
.udi-btn-primary { background:linear-gradient(135deg,var(--cyan),#00b8d4); color:#000; box-shadow:0 0 30px rgba(0,229,255,0.35),0 4px 15px rgba(0,0,0,0.3); }
.udi-btn-primary:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 0 50px rgba(0,229,255,0.5),0 8px 25px rgba(0,0,0,0.3); color:#000; text-decoration:none; }
.udi-btn-primary::after { content:''; position:absolute; top:-50%;left:-50%; width:200%;height:200%; background:linear-gradient(transparent,rgba(255,255,255,0.1),transparent); transform:rotate(45deg); transition:0.5s; opacity:0; }
.udi-btn-primary:hover::after { opacity:1; transform:rotate(45deg) translate(50%); }
.udi-btn-secondary { background:linear-gradient(135deg,var(--green),#00cc66); color:#000; box-shadow:0 0 30px rgba(0,255,136,0.25),0 4px 15px rgba(0,0,0,0.3); }
.udi-btn-secondary:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 0 50px rgba(0,255,136,0.45),0 8px 25px rgba(0,0,0,0.3); color:#000; text-decoration:none; }
.udi-btn-outline { background:rgba(255,255,255,0.04); color:var(--text); border:1.5px solid rgba(255,255,255,0.1); backdrop-filter:blur(10px); }
.udi-btn-outline:hover { border-color:var(--cyan); color:var(--cyan); background:rgba(0,229,255,0.06); box-shadow:0 0 30px rgba(0,229,255,0.1); transform:translateY(-2px); text-decoration:none; }
.udi-btn-sm { padding:10px 24px; font-size:0.85rem; border-radius:10px; background:rgba(0,229,255,0.08); color:var(--cyan); border:1px solid rgba(0,229,255,0.2); }
.udi-btn-sm:hover { background:rgba(0,229,255,0.15); box-shadow:0 0 20px rgba(0,229,255,0.15); transform:translateY(-2px); color:var(--cyan); text-decoration:none; }

/* Glass cards */
.udi-glass-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); backdrop-filter:blur(16px); transition:all 0.4s cubic-bezier(0.4,0,0.2,1); position:relative; overflow:hidden; }
.udi-glass-card::before { content:''; position:absolute;inset:0; border-radius:var(--radius); padding:1px; background:linear-gradient(135deg,rgba(0,229,255,0.2),transparent 40%,transparent 60%,rgba(0,255,136,0.15)); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; transition:opacity 0.4s; }
.udi-glass-card:hover { border-color:rgba(0,229,255,0.15); transform:translateY(-6px); box-shadow:0 20px 60px rgba(0,0,0,0.4),0 0 50px rgba(0,229,255,0.08),inset 0 1px 0 rgba(255,255,255,0.05); }
.udi-glass-card:hover::before { background:linear-gradient(135deg,rgba(0,229,255,0.35),transparent 40%,transparent 60%,rgba(0,255,136,0.25)); }

/* Product cards */
.udi-cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.udi-card { padding:44px 32px; text-align:center; }
.udi-card-icon { width:72px;height:72px; margin:0 auto 22px; display:flex; align-items:center; justify-content:center; border-radius:18px; background:linear-gradient(135deg,rgba(0,229,255,0.1),rgba(0,229,255,0.02)); border:1px solid rgba(0,229,255,0.12); color:var(--cyan); transition:all 0.3s; }
.udi-glass-card:hover .udi-card-icon { box-shadow:0 0 30px rgba(0,229,255,0.2); border-color:rgba(0,229,255,0.3); }
.udi-card-title { font-size:1.35rem; font-weight:700; margin-bottom:12px; color:#fff; }
.udi-card-desc { font-size:0.9rem; color:var(--muted); margin-bottom:24px; line-height:1.7; }

/* Stats (disabled by default) */
.udi-stats-section { padding:50px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.udi-stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
.udi-stat-value { font-size:2.6rem; font-weight:900; background:linear-gradient(135deg,var(--cyan),var(--green)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1.2; margin-bottom:6px; }
.udi-stat-label { font-size:0.88rem; color:var(--muted); font-weight:500; }

/* Why UDI */
.udi-why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.udi-why-item { padding:32px; border-radius:var(--radius-sm); background:rgba(255,255,255,0.015); border:1px solid var(--border); transition:all 0.35s; position:relative; overflow:hidden; }
.udi-why-item::after { content:''; position:absolute; top:0;left:0;right:0; height:2px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); opacity:0; transition:opacity 0.3s; }
.udi-why-item:hover::after { opacity:1; }
.udi-why-item:hover { background:rgba(0,229,255,0.03); border-color:rgba(0,229,255,0.1); transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,0.2); }
.udi-why-icon { width:48px;height:48px; margin-bottom:16px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:linear-gradient(135deg,rgba(0,229,255,0.1),transparent); color:var(--cyan); }
.udi-why-item h4 { font-size:1.05rem; font-weight:700; margin-bottom:8px; color:#fff; }
.udi-why-item p { font-size:0.88rem; color:var(--muted); line-height:1.65; margin:0; }

/* Featured */
.udi-featured-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.udi-featured-item { padding:32px; text-align:center; }
.udi-featured-item h4 { font-size:1.1rem; font-weight:700; margin:14px 0 8px; color:#fff; }
.udi-featured-item p { font-size:0.88rem; color:var(--muted); margin-bottom:20px; line-height:1.65; }

/* Highlights */
.udi-highlight { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; margin-bottom:100px; }
.udi-highlight:last-child { margin-bottom:0; }
.udi-highlight-reverse { direction:rtl; }
.udi-highlight-reverse > * { direction:ltr; }
.udi-highlight-visual { position:relative; }
.udi-highlight-placeholder { background:linear-gradient(135deg,rgba(0,229,255,0.06),rgba(168,85,247,0.04)); border:1px solid var(--border); border-radius:var(--radius); padding:80px; display:flex; align-items:center; justify-content:center; color:var(--cyan); aspect-ratio:4/3; position:relative; overflow:hidden; }
.udi-highlight-placeholder::before { content:''; position:absolute;inset:0; background-image:linear-gradient(rgba(0,229,255,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,0.02) 1px,transparent 1px); background-size:40px 40px; animation:udiGrid 20s linear infinite; }
.udi-highlight-visual::after { content:''; position:absolute; inset:-2px; border-radius:var(--radius); background:conic-gradient(from 0deg,transparent,var(--cyan),transparent,transparent); animation:udiBorderSpin 4s linear infinite; z-index:-1; }
@keyframes udiBorderSpin { 100%{transform:rotate(360deg)} }
.udi-highlight-badge { display:inline-block; padding:5px 16px; background:rgba(0,229,255,0.08); border:1px solid rgba(0,229,255,0.2); border-radius:100px; font-size:0.78rem; font-weight:700; color:var(--cyan); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:16px; }
.udi-highlight-content h3 { font-size:2.2rem; font-weight:800; margin-bottom:16px; color:#fff; letter-spacing:-0.02em; }
.udi-highlight-content p { font-size:1rem; color:var(--muted); margin-bottom:24px; line-height:1.75; }
.udi-feature-list { list-style:none; padding:0; margin:0 0 30px 0; }
.udi-feature-list li { padding:8px 0; font-size:0.95rem; color:var(--text); display:flex; align-items:center; gap:12px; }
.udi-check { width:22px;height:22px; border-radius:6px; background:rgba(0,255,136,0.1); border:1px solid rgba(0,255,136,0.25); display:inline-flex; align-items:center; justify-content:center; color:var(--green); font-size:0.75rem; font-weight:900; flex-shrink:0; }

/* Testimonials */
.udi-testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.udi-testimonial { padding:34px; position:relative; }
.udi-testimonial-quote { color:#fbbf24; font-size:0.85rem; margin-bottom:14px; letter-spacing:2px; }
.udi-testimonial-text { font-size:0.95rem; color:var(--text); line-height:1.75; margin-bottom:24px; font-style:italic; }
.udi-testimonial-author { display:flex; align-items:center; gap:14px; }
.udi-testimonial-avatar { width:44px;height:44px; border-radius:50%; background:linear-gradient(135deg,var(--cyan),var(--green)); color:#000; font-weight:800; font-size:0.9rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 0 20px rgba(0,229,255,0.2); }
.udi-testimonial-author strong { display:block; font-size:0.92rem; color:#fff; }
.udi-testimonial-author span { display:block; font-size:0.78rem; color:var(--muted); }

/* CTA */
.udi-cta-section { text-align:center; padding:110px 0; position:relative; overflow:hidden; }
.udi-cta-glow { position:absolute; top:50%;left:50%; transform:translate(-50%,-50%); width:900px;height:500px; background:radial-gradient(ellipse,rgba(0,255,136,0.1) 0%,rgba(0,229,255,0.05) 40%,transparent 70%); animation:udiGlow 5s ease-in-out infinite alternate; pointer-events:none; }
.udi-cta-title { font-size:3.2rem; font-weight:900; color:#fff; margin-bottom:16px; letter-spacing:-0.03em; position:relative; z-index:1; }
.udi-cta-subtitle { font-size:1.15rem; color:var(--muted); margin-bottom:40px; position:relative; z-index:1; }

/* Animations */
@keyframes udiFadeInUp { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
.udi-animate { opacity:0; }
.udi-animate.udi-visible { animation:udiFadeInUp 0.7s cubic-bezier(0.16,1,0.3,1) forwards; }

/* Responsive */
@media (max-width:1024px) {
    .udi-hero-title{font-size:3rem}
    .udi-cards-grid,.udi-why-grid,.udi-featured-grid,.udi-testimonials-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px) {
    .udi-hero{padding:90px 0 70px;min-height:auto}
    .udi-hero-title{font-size:2.2rem}
    .udi-section{padding:60px 0}
    .udi-section-title{font-size:2rem;margin-bottom:12px}
    .udi-cards-grid,.udi-why-grid,.udi-featured-grid,.udi-testimonials-grid{grid-template-columns:1fr}
    .udi-stats-row{grid-template-columns:repeat(2,1fr)}
    .udi-highlight{grid-template-columns:1fr;gap:30px}
    .udi-highlight-reverse{direction:ltr}
    .udi-hero-buttons{flex-direction:column;align-items:center}
    .udi-btn{width:100%;max-width:320px}
    .udi-cta-title{font-size:2rem}
}
@media (max-width:480px) {
    .udi-container{padding:0 16px}
    .udi-hero-title{font-size:1.9rem}
    .udi-card,.udi-why-item,.udi-testimonial{padding:24px 20px}
}

/* =============================================
   PRICING TAG
   ============================================= */
.udi-card-price {
    display: inline-block;
    padding: 6px 16px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(0,255,136,0.08), rgba(0,229,255,0.05));
    border: 1px solid rgba(0,255,136,0.2);
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--green, #00ff88);
    letter-spacing: 0.01em;
}

/* =============================================
   FAQ SECTION
   ============================================= */
.udi-faq-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.udi-faq-item {
    border-radius: var(--radius-sm, 12px) !important;
    overflow: hidden;
}

.udi-faq-question {
    width: 100%;
    padding: 22px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: none;
    border: none;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.5;
    transition: color 0.2s;
}

.udi-faq-question:hover {
    color: var(--cyan, #00e5ff);
}

.udi-faq-chevron {
    flex-shrink: 0;
    color: var(--muted, #7a8ba8);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s;
}

.udi-faq-item.udi-faq-open .udi-faq-chevron {
    transform: rotate(180deg);
    color: var(--cyan, #00e5ff);
}

.udi-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s;
    padding: 0 28px;
}

.udi-faq-item.udi-faq-open .udi-faq-answer {
    max-height: 300px;
    padding: 0 28px 22px;
}

.udi-faq-answer p {
    font-size: 0.92rem;
    color: var(--muted, #7a8ba8);
    line-height: 1.75;
    margin: 0;
}

/* =============================================
   MULTI-BUTTON CARD LAYOUT
   ============================================= */
.udi-card-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}