/* ============ Site-specific styles ============ */

/* Mobile menu */
.mobile-menu { display:none; background:none; border:none; cursor:pointer; padding:8px; }
.mobile-nav { display:none; position:fixed; top:72px; left:0; right:0; background:rgba(10,22,40,0.98); padding:24px; flex-direction:column; gap:16px; z-index:999; border-bottom:1px solid rgba(255,255,255,0.1); }
.mobile-nav.open { display:flex; }
.mobile-nav a { color:rgba(255,255,255,0.8); font-size:1.1rem; padding:8px 0; }
@media(max-width:768px){ .mobile-menu{display:block} .nav-links{display:none!important} }

/* Tabs */
.tabs { display:flex; gap:8px; justify-content:center; margin-bottom:40px; flex-wrap:wrap; }
.tab { padding:14px 28px; border-radius:50px; border:2px solid rgba(30,58,95,0.2); background:transparent; font-size:0.95rem; font-weight:600; cursor:pointer; transition:all 0.3s; color:var(--nyb-navy); font-family:'Inter',sans-serif; }
.tab:hover { border-color:var(--nyb-blue); color:var(--nyb-blue); }
.tab.active { background:linear-gradient(135deg,var(--nyb-blue),var(--nyb-accent)); color:#fff; border-color:transparent; box-shadow:0 4px 20px rgba(37,99,235,0.3); }
.tab-content { display:none; }
.tab-content.active { display:block; animation:fadeUp 0.5s ease; }
.tab-hero { text-align:center; margin-bottom:40px; }
.tab-hero h3 { font-size:1.6rem; margin-bottom:12px; }
.tab-hero p { color:var(--nyb-gray); max-width:600px; margin:0 auto; }

/* Tool cards */
.tools-showcase { display:flex; flex-direction:column; gap:40px; margin-bottom:60px; }
.tool-card { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius-lg); padding:40px; position:relative; overflow:hidden; }
.tool-featured { border:1px solid rgba(93,173,226,0.3); box-shadow:0 0 40px rgba(37,99,235,0.1); }
.tool-badge { position:absolute; top:20px; right:20px; background:linear-gradient(135deg,var(--nyb-blue),var(--nyb-accent)); color:#fff; padding:6px 16px; border-radius:50px; font-size:0.75rem; font-weight:700; letter-spacing:1px; }
.tool-badge-green { background:linear-gradient(135deg,#10b981,#059669); }
.tool-header { display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.tool-logo { font-size:2.5rem; width:64px; height:64px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.05); border-radius:16px; }
.tool-header h3 { color:#fff; font-size:1.5rem; margin:0; }
.tool-subtitle { color:var(--nyb-accent); font-size:0.9rem; }
.tool-desc { color:rgba(255,255,255,0.7); font-size:1.05rem; margin-bottom:28px; max-width:700px; }

/* Tool features grid */
.tool-features { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-bottom:32px; }
.tool-feat { display:flex; gap:14px; padding:16px; background:rgba(255,255,255,0.03); border-radius:var(--radius); border:1px solid rgba(255,255,255,0.06); }
.tool-feat span:first-child { font-size:1.5rem; flex-shrink:0; }
.tool-feat strong { color:#fff; font-size:0.95rem; }
.tool-feat div { color:rgba(255,255,255,0.6); font-size:0.85rem; line-height:1.5; }

/* Tool versions */
.tool-versions { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:28px; }
.version-card { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius); padding:24px; text-align:center; }
.version-card h4 { color:#fff; margin-bottom:8px; }
.version-card p { color:rgba(255,255,255,0.6); font-size:0.9rem; margin-bottom:16px; }
@media(max-width:600px){ .tool-versions{grid-template-columns:1fr} }

/* Audience cards */
.tool-audience { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.audience-card { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius); padding:24px; }
.audience-card h4 { color:#fff; margin-bottom:12px; font-size:1.1rem; }
.audience-card ul { list-style:none; padding:0; }
.audience-card li { color:rgba(255,255,255,0.7); font-size:0.9rem; padding:6px 0; padding-left:20px; position:relative; }
.audience-card li::before { content:'✓'; position:absolute; left:0; color:var(--nyb-accent); font-weight:700; }
@media(max-width:600px){ .tool-audience{grid-template-columns:1fr} }

/* Sell section */
.sell-section { margin-top:20px; }
.sell-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px; margin-bottom:32px; }
.sell-card { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius); padding:32px; text-align:center; }
.sell-number { font-family:'Outfit',sans-serif; font-size:3rem; font-weight:800; background:linear-gradient(135deg,var(--nyb-accent),var(--nyb-cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.sell-text { color:rgba(255,255,255,0.7); font-size:0.95rem; margin-top:8px; }

/* Light ports */
.ports-grid-light { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:20px; }
.port-card-light { background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:var(--radius); padding:28px; text-align:center; transition:all 0.3s; box-shadow:var(--shadow-sm); }
.port-card-light:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.port-name-l { font-weight:700; color:var(--nyb-navy); font-size:1.1rem; }
.port-detail-l { font-size:0.8rem; color:var(--nyb-gray); margin-top:4px; }

/* About */
.about-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:start; }
.about-grid p { color:var(--nyb-darkgray); margin-bottom:16px; }
.about-values { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; }
.value { padding:12px 16px; background:rgba(37,99,235,0.06); border-radius:var(--radius); font-weight:600; font-size:0.9rem; color:var(--nyb-navy); }
.about-card { background:var(--nyb-gradient); border-radius:var(--radius-lg); padding:36px; color:rgba(255,255,255,0.8); }
.about-card h3 { color:#fff; margin-bottom:16px; }
.about-card p { margin-bottom:12px; }
@media(max-width:768px){ .about-grid{grid-template-columns:1fr} }

/* Contact grid */
.contact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin-bottom:24px; }
.contact-block { display:flex; flex-direction:column; align-items:center; gap:8px; padding:28px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); border-radius:var(--radius); color:#fff; text-decoration:none; transition:all 0.3s; }
.contact-block:hover { background:rgba(255,255,255,0.15); transform:translateY(-3px); }
.contact-icon { font-size:2rem; }
.contact-block strong { font-size:1rem; }
.contact-block span:last-child { font-size:0.85rem; color:rgba(255,255,255,0.7); }

/* Feature card emoji icons */
.feature-card .feature-icon { font-size:1.8rem; width:56px; height:56px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(37,99,235,0.1),rgba(93,173,226,0.1)); border-radius:14px; margin-bottom:20px; }
