:root {
  --bg:#F7F3EE;--bg-2:#EDE7DF;--bg-3:#E3D9CE;
  --fg:#1A1410;--mute:#5A4A3A;--mute-2:#6E5E4E;
  --flame:#CC0000;--amber:#C8860A;--rust:#9B2D12;
  --moss:#1D4D38;--neon:#2D6A4F;
  --neon-dim:rgba(45,106,79,.07);--border-neon:rgba(45,106,79,.22);
  --flame-dim:rgba(204,0,0,.07);--border:rgba(26,20,16,.10);
  --border-flame:rgba(204,0,0,.20);
  --serif:'Alegreya Sans',sans-serif;--sans:'Exo 2',system-ui,sans-serif;
  --ease:cubic-bezier(0.16,1,0.3,1);--r:6px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--sans);background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.6}
body::before{content:'';position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.018;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='none'/%3E%3Cpath d='M0 40 L20 20 L40 40' fill='none' stroke='%237A6A5A' stroke-width='.5' opacity='.4'/%3E%3C/svg%3E");background-size:40px 40px}
img{display:block;max-width:100%}a{text-decoration:none;color:inherit}
button{font-family:var(--sans);cursor:pointer}::selection{background:var(--flame);color:#fff}

/* NAV */
nav.nav{position:fixed;top:0;left:0;right:0;z-index:900;display:flex;align-items:center;justify-content:space-between;padding:1.4rem 5vw;background:rgba(255,255,255,.96);border-bottom:1px solid var(--border);box-shadow:0 1px 24px rgba(0,0,0,.06);transition:box-shadow .4s var(--ease),padding .4s var(--ease)}
nav.nav.scrolled{padding:1rem 5vw;box-shadow:0 2px 40px rgba(0,0,0,.1)}
.nav-logo{display:flex;flex-direction:column;gap:2px;flex-shrink:0;text-decoration:none}
.nav-logo img{height:40px;width:auto;object-fit:contain}
.nav-links{display:flex;gap:2rem}
.nav-link{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--mute);transition:color .25s var(--ease);white-space:nowrap;position:relative;padding:.2rem 0;text-decoration:none}
.nav-link::after{content:'';position:absolute;bottom:-3px;left:50%;right:50%;height:1.5px;background:var(--flame);border-radius:2px;transition:left .3s var(--ease),right .3s var(--ease)}
.nav-link:hover{color:var(--fg)}.nav-link:hover::after,.nav-link.active::after{left:0;right:0}.nav-link.active{color:var(--fg)}
.nav-right{display:flex;align-items:center;gap:1rem}
.nav-cta{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:#fff;background:var(--flame);padding:.6rem 1.4rem;border-radius:999px;border:none;box-shadow:0 2px 14px rgba(204,0,0,.35);transition:background .25s,box-shadow .25s;flex-shrink:0;cursor:pointer;text-decoration:none}
.nav-cta:hover{background:var(--rust);box-shadow:0 4px 22px rgba(204,0,0,.5)}
.nav-hub{background:transparent;color:var(--fg);border:1px solid rgba(10,10,10,.25);box-shadow:none;margin-right:.5rem}
.nav-hub:hover{background:rgba(10,10,10,.06);border-color:rgba(10,10,10,.4);box-shadow:none}
.dark-toggle{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:none;display:flex;align-items:center;justify-content:center;font-size:.95rem;color:var(--mute);transition:all .25s;flex-shrink:0;cursor:pointer}
.dark-toggle:hover{color:var(--fg);border-color:var(--fg)}
.nav-burger{display:none;background:none;border:1px solid var(--border);color:var(--fg);flex-direction:column;gap:4px;padding:.45rem .55rem;cursor:pointer;border-radius:8px;transition:color .4s var(--ease),border-color .4s var(--ease)}
.nav-burger span{display:block;width:18px;height:1.5px;background:currentColor;transition:.3s}
.nav-burger.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;inset:0;z-index:890;background:#0D1C1A;flex-direction:column;align-items:center;justify-content:center;gap:2rem;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:clamp(2rem,7vw,3rem);font-weight:800;color:rgba(255,255,255,.35);letter-spacing:-.03em;transition:.3s;line-height:1;text-decoration:none}
.mobile-menu a:hover{color:#E8A020}
.mobile-menu .m-cta{margin-top:1rem;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--flame);padding:.75rem 2rem;border:none;border-radius:999px;cursor:pointer;text-decoration:none}
.mobile-menu .m-hub{margin-top:.5rem;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.3);padding:.65rem 1.8rem;border-radius:999px;background:transparent;text-decoration:none}
@media(max-width:900px){.nav-links{display:none}.nav-burger{display:flex}}

/* REVEAL */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.visible{opacity:1;transform:none}
.rd1{transition-delay:.1s}.rd2{transition-delay:.2s}.rd3{transition-delay:.3s}.rd4{transition-delay:.4s}.rd5{transition-delay:.5s}

/* SECTION */
.section{padding:8vh 6vw;position:relative}
.container{max-width:1280px;margin:0 auto;width:100%}
.eyebrow{display:inline-flex;align-items:center;gap:.8rem;font-size:.5rem;font-weight:800;letter-spacing:.32em;text-transform:uppercase;color:var(--neon);margin-bottom:1.4rem}
.eyebrow::before{content:'';width:24px;height:1px;background:var(--neon);flex-shrink:0}
.section-title{font-family:var(--serif);font-size:clamp(2.4rem,5vw,5.5rem);line-height:1.0;letter-spacing:-.03em;font-weight:400;margin-bottom:1.4rem}
.section-title em{font-style:italic;color:var(--flame)}
.section-sub{font-size:1rem;color:var(--mute-2);line-height:1.8;max-width:54ch}
.btn-primary{display:inline-flex;align-items:center;gap:.8rem;background:var(--flame);color:#fff;padding:1.1rem 2.4rem;border-radius:var(--r);font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.65rem;border:none;transition:.4s var(--ease);cursor:pointer}
.btn-primary:hover{background:var(--rust);transform:translateY(-2px);box-shadow:0 14px 40px rgba(204,0,0,.35)}
.btn-outline{display:inline-flex;align-items:center;gap:.8rem;background:transparent;color:var(--fg);padding:1.1rem 2.4rem;border-radius:var(--r);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.65rem;border:1px solid var(--border-flame);transition:.4s var(--ease);cursor:pointer}
.btn-outline:hover{border-color:var(--amber);color:var(--amber)}

/* HERO */
/* =========================
   DIAGONAL HERO
========================= */

.hero-diagonal{position:relative;min-height:70vh;overflow:hidden;background:#0f0d0b;display:flex;align-items:center}

.hero-bg-left{position:absolute;inset:0;width:58%;background:#0f0d0b;z-index:1}

.hero-bg-right{position:absolute;top:0;right:0;width:58%;height:100%;background:linear-gradient(135deg,rgba(204,0,0,.18),rgba(45,106,79,.12)),#171311;clip-path:polygon(18% 0,100% 0,100% 100%,0 100%);z-index:1}

.hero-overlay{position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(204,0,0,.12),transparent 35%);z-index:2}

.hero-container{position:relative;z-index:5;width:min(1280px,92%);margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:84px 0 56px}

.hero-content{max-width:620px}

.hero-kicker{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:26px;font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.6)}

.dot{width:5px;height:5px;border-radius:50%;background:#CC0000;display:inline-block}

.hero-title{display:flex;flex-direction:column;line-height:.95;margin-bottom:24px}

.hero-title span{font-size:clamp(3rem,7vw,6rem);font-weight:800;color:#fff}

.hero-title .accent{color:#CC0000}

.hero-title .sub{font-style:italic;font-weight:500;color:rgba(255,255,255,.65);font-size:clamp(1.8rem,4vw,3rem);margin-top:10px}

.hero-description{font-size:1.08rem;line-height:1.8;color:rgba(255,255,255,.72);max-width:560px;margin-bottom:34px}

.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:24px}

.btn-primary,.btn-secondary{padding:16px 28px;border-radius:999px;text-decoration:none;font-weight:600;transition:.3s ease;display:inline-flex;align-items:center;gap:.5rem}

.btn-primary{background:#CC0000;color:#fff;border:none;cursor:pointer}

.btn-primary:hover{transform:translateY(-2px);background:#a50000}

.btn-secondary{border:1px solid rgba(255,255,255,.12);color:#fff;background:rgba(255,255,255,.03)}

.btn-secondary:hover{background:rgba(255,255,255,.08)}

.hero-badge{display:inline-flex;padding:12px 18px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.7);font-size:.9rem}

.hero-visual{position:relative;display:flex;justify-content:center}

.browser-mockup{width:100%;max-width:620px;border-radius:26px;overflow:hidden;background:#171311;border:1px solid rgba(255,255,255,.08);box-shadow:0 40px 80px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.03);transform:perspective(1400px) rotateY(-8deg) rotateX(3deg)}

.browser-top{height:54px;background:#120f0d;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid rgba(255,255,255,.05)}

.browser-dots{display:flex;gap:8px}

.browser-dots span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}

.browser-url{color:rgba(255,255,255,.45);font-size:.82rem}

/* =====================================
   REALISTIC WEBSITE MOCKUP
===================================== */
.browser-screen{padding:0;background:#eceff3}
.site-shell{background:#f7f8fa;min-height:680px}
.site-nav{height:74px;padding:0 28px;background:#fff;border-bottom:1px solid #e7eaef;display:flex;align-items:center;justify-content:space-between}
.site-brand{display:flex;align-items:center;gap:12px}
.brand-logo{width:36px;height:36px;border-radius:10px;background:#CC0000}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-line-1{font-size:13px;font-weight:800;color:#111827}
.brand-line-2{font-size:11px;color:#6b7280}
.site-links{display:flex;gap:28px;font-size:13px;color:#4b5563;font-weight:500}
.site-nav-btn{height:42px;padding:0 22px;border-radius:999px;background:#111827;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}
.site-hero{display:grid;grid-template-columns:1fr 1.1fr;gap:34px;padding:54px 42px 42px;align-items:center}
.mini-kicker{display:inline-flex;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid #e6e9ee;font-size:10px;letter-spacing:.12em;font-weight:700;color:#CC0000;margin-bottom:22px}
.mockup-heading{font-size:42px;line-height:1.08;font-weight:800;color:#111827;margin-bottom:18px}
.mockup-paragraph{font-size:15px;line-height:1.7;color:#6b7280;max-width:420px;margin-bottom:26px}
.mockup-buttons{display:flex;gap:14px;margin-bottom:28px}
.mock-btn-primary{width:150px;height:48px;border-radius:999px;background:#CC0000}
.mock-btn-secondary{width:140px;height:48px;border-radius:999px;background:#fff;border:1px solid #e5e7eb}
.hero-review-row{display:flex;align-items:center;gap:14px}
.review-users{display:flex}
.review-users span{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#d1d5db,#9ca3af);border:3px solid #fff;margin-left:-8px}
.review-users span:first-child{margin-left:0}
.review-text{font-size:13px;font-weight:600;color:#4b5563}
.dashboard-preview{background:#fff;border-radius:26px;padding:24px;border:1px solid #e5e7eb;box-shadow:0 30px 60px rgba(15,23,42,.08)}
.dashboard-top{display:grid;grid-template-columns:1fr 150px;gap:18px;margin-bottom:18px}
.dashboard-stat{background:#f8fafc;border-radius:18px;border:1px solid #eef1f5}
.dashboard-stat.large{padding:20px;height:180px}
.stat-title{width:110px;height:12px;border-radius:999px;background:#dbe1e8;margin-bottom:18px}
.stat-value{width:160px;height:28px;border-radius:999px;background:#111827;margin-bottom:26px}
.stat-chart{height:70px;border-radius:16px;background:linear-gradient(180deg,rgba(204,0,0,.2),rgba(204,0,0,.02))}
.dashboard-side{display:flex;flex-direction:column;gap:18px}
.dashboard-stat.small{height:81px}
.dashboard-bottom{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
.traffic-chart,.analytics-card{background:#f8fafc;border:1px solid #eef1f5;border-radius:18px;padding:18px}
.chart-bars{height:120px;display:flex;align-items:flex-end;gap:10px}
.chart-bars span{flex:1;border-radius:999px 999px 0 0;background:#CC0000}
.chart-bars span:nth-child(1){height:35%}.chart-bars span:nth-child(2){height:60%}.chart-bars span:nth-child(3){height:50%}.chart-bars span:nth-child(4){height:90%}.chart-bars span:nth-child(5){height:72%}.chart-bars span:nth-child(6){height:82%}.chart-bars span:nth-child(7){height:100%}
.analytics-card{display:flex;align-items:center;justify-content:center;flex-direction:column}
.analytics-circle{width:92px;height:92px;border-radius:50%;border:12px solid #111827;border-top-color:#CC0000;margin-bottom:18px}
.analytics-lines{width:100%}
.analytics-lines span{display:block;height:10px;border-radius:999px;background:#d8dde5;margin-bottom:12px}
.analytics-lines span:nth-child(1){width:90%}.analytics-lines span:nth-child(2){width:75%}.analytics-lines span:nth-child(3){width:58%}
.logo-strip{padding:0 42px 32px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.logo-pill{height:58px;border-radius:16px;background:#fff;border:1px solid #e5e7eb}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:0 42px 42px}
.service-card{background:#fff;border-radius:22px;padding:24px;border:1px solid #e5e7eb}
.service-icon{width:52px;height:52px;border-radius:16px;margin-bottom:24px}
.service-icon.red{background:rgba(204,0,0,.15)}.service-icon.green{background:rgba(45,106,79,.18)}.service-icon.blue{background:rgba(59,130,246,.15)}
.service-line{border-radius:999px;background:#d8dde5}
.service-line.lg{width:80%;height:14px;margin-bottom:14px}
.service-line.sm{width:60%;height:10px}

@media(max-width:980px){
  .hero-container{grid-template-columns:1fr;padding:84px 0 56px}
  .hero-visual{order:-1}
  .browser-mockup{transform:none}
  .hero-bg-right{width:100%;clip-path:none;opacity:.4}
}

/* PLANS STRIP */
.plans-strip{background:var(--bg-2);border-bottom:1px solid var(--border);border-top:1px solid var(--border);padding:0 6vw}
.plans-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.plan-pill{padding:2.2rem 2rem;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:.6rem;transition:background .3s;cursor:pointer}
.plan-pill:last-child{border-right:none}
.plan-pill:hover{background:var(--bg-3)}
.plan-icon{width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;margin-bottom:.4rem}
.ic-red{background:var(--flame)}.ic-dark{background:var(--fg)}.ic-green{background:var(--moss)}.ic-amber{background:var(--amber)}
.plan-pill strong{font-size:.85rem;font-weight:800;color:var(--fg)}
.plan-pill span{font-size:.76rem;color:var(--mute);line-height:1.5}
@media(max-width:700px){.plans-inner{grid-template-columns:1fr 1fr}.plan-pill:nth-child(2){border-right:none}.plan-pill:nth-child(3){border-top:1px solid var(--border)}.plan-pill:nth-child(4){border-top:1px solid var(--border);border-right:none}}

/* PORTFOLIO */
.portfolio-section{background:var(--bg-2)}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);margin-top:3.5rem}
.port-card{background:var(--bg);cursor:pointer;position:relative;overflow:hidden}
.port-thumb{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative}
.port-thumb-bg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.75rem;padding:1.5rem;transition:transform .6s var(--ease);position:relative}
.port-card:hover .port-thumb-bg{transform:scale(1.04)}
/* Mockup image layer behind overlay */
.port-thumb-bg .mockup-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1}
.port-thumb-bg .mockup-overlay{position:absolute;inset:0;z-index:1;opacity:0}
.port-thumb-bg .thumb-title,.port-thumb-bg .thumb-cat{position:relative;z-index:2}
.t1{background:linear-gradient(145deg,#1a3a2a,#2d6a4f)}
.t2{background:linear-gradient(145deg,#1a0a05,#8b2000)}
.t3{background:linear-gradient(145deg,#0a1628,#1e3a6e)}
.t4{background:linear-gradient(145deg,#1a1205,#8b6000)}
.t5{background:linear-gradient(145deg,#1a0a1a,#6b1a8b)}
.t6{background:linear-gradient(145deg,#0a1a0a,#2d6a2d)}
/* Laptop frame mockup in card */
.port-mockup{display:none}
.port-card:hover .port-mockup{display:none}
.thumb-title{display:none}
.thumb-cat{display:none}
.port-card-hover{position:absolute;inset:0;background:rgba(204,0,0,.88);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s;z-index:10}
.port-card:hover .port-card-hover{opacity:1}
.port-card-hover span{font-size:.56rem;font-weight:800;text-transform:uppercase;letter-spacing:.2em;color:#fff;display:flex;align-items:center;gap:.5rem}
.port-body{padding:1.6rem 1.8rem}
.port-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.port-industry{font-size:.44rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--neon)}
.port-loc{font-size:.44rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:.3rem}
.port-loc i{font-size:.6rem}
.port-name{font-family:var(--serif);font-size:1.2rem;color:var(--fg);margin-bottom:.35rem}
.port-desc{font-size:.78rem;color:var(--mute-2);line-height:1.6;margin-bottom:1rem}
.port-link{font-size:.56rem;font-weight:800;text-transform:uppercase;letter-spacing:.16em;color:var(--flame);display:flex;align-items:center;gap:.4rem;transition:.2s}
.port-link i{transition:transform .2s var(--ease)}
.port-card:hover .port-link i{transform:translateX(4px)}
.port-full-case{font-size:.52rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--neon);display:inline-flex;align-items:center;gap:.4rem;margin-top:.6rem;padding:.4rem .7rem;background:var(--neon-dim);border:1px solid var(--border-neon);transition:background .2s,color .2s,border-color .2s;text-decoration:none}
.port-full-case:hover{background:var(--neon);color:#fff;border-color:var(--neon)}
.port-full-case i{font-size:.85rem}
@media(max-width:860px){.portfolio-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.portfolio-grid{grid-template-columns:1fr}}

/* PORTFOLIO MODAL */
.port-modal{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:1.5rem;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.port-modal.open{opacity:1;pointer-events:all}
.pm-scrim{position:absolute;inset:0;background:rgba(10,6,3,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.pm-box{position:relative;z-index:1;background:var(--bg);border:1px solid var(--border);border-radius:16px;width:100%;max-width:860px;max-height:90vh;overflow-y:auto;transform:translateY(40px) scale(.97);transition:transform .4s var(--ease);box-shadow:0 32px 80px rgba(10,6,3,.4)}
.port-modal.open .pm-box{transform:none}
.pm-close{position:sticky;top:1rem;float:right;margin-right:1.2rem;width:36px;height:36px;border:1px solid var(--border);border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--mute);cursor:pointer;transition:.2s;z-index:10;flex-shrink:0}
.pm-close:hover{background:var(--flame);color:#fff;border-color:var(--flame)}
.pm-hero{width:100%;aspect-ratio:16/6;display:flex;align-items:center;justify-content:center;border-radius:12px 12px 0 0;overflow:hidden;position:relative}
.pm-hero img.pm-mockup-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1}
.pm-hero-inner{display:none}
.pm-logo{display:none}
.pm-logo span{display:none}
.pm-body{padding:2.4rem 2.8rem 3rem;clear:both}
.pm-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.pm-tag{font-size:.43rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;padding:.28rem .75rem;border-radius:99px;border:1px solid var(--border);color:var(--mute)}
.pm-title{font-family:var(--serif);font-size:clamp(1.6rem,3.5vw,2.8rem);letter-spacing:-.04em;line-height:1.05;margin-bottom:.5rem}
.pm-title em{font-style:italic;color:var(--flame)}
.pm-client{font-size:.72rem;color:var(--mute);margin-bottom:1.8rem;font-weight:600}
.pm-quote{font-family:var(--serif);font-size:clamp(.95rem,1.7vw,1.2rem);font-style:italic;line-height:1.7;color:var(--mute);padding:1.3rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:1.8rem}
.pm-section{margin-bottom:1.6rem}
.pm-section h4{font-size:.48rem;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:var(--neon);margin-bottom:.75rem;display:flex;align-items:center;gap:.6rem}
.pm-section h4::before{content:'';width:16px;height:1px;background:var(--neon)}
.pm-section p{font-size:.88rem;color:var(--mute-2);line-height:1.8}
.pm-dels{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-top:1.6rem}
.pm-del{display:flex;align-items:flex-start;gap:.65rem;padding:.75rem;background:var(--bg-2);border-radius:6px;border:1px solid var(--border)}
.pm-del i{color:var(--moss);font-size:.85rem;flex-shrink:0;margin-top:.1rem}
.pm-del span{font-size:.76rem;color:var(--mute-2);line-height:1.4}
.pm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-top:2.2rem}
.pm-stat{background:var(--bg-2);padding:1.5rem 1.2rem;text-align:center}
.pm-stat-num{font-family:var(--serif);font-size:1.9rem;color:var(--fg);letter-spacing:-.04em;line-height:1}
.pm-stat-num sup{font-size:.8rem;color:var(--flame);vertical-align:super}
.pm-stat-lbl{font-size:.42rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--mute);margin-top:.35rem;line-height:1.4}
@media(max-width:600px){.pm-body{padding:1.8rem 1.4rem}.pm-dels{grid-template-columns:1fr}.pm-stats{grid-template-columns:1fr 1fr}}

/* FEATURES */
.features-section{background:var(--bg)}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);margin-top:4rem}
.feat-card{background:var(--bg);padding:3rem 2.6rem;display:flex;flex-direction:column;gap:1rem;transition:background .3s}
.feat-card:hover{background:var(--bg-2)}
.feat-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:.3rem;flex-shrink:0}
.fi-r{background:var(--flame-dim);color:var(--flame);border:1px solid var(--border-flame)}
.fi-g{background:var(--neon-dim);color:var(--moss);border:1px solid var(--border-neon)}
.fi-a{background:rgba(200,134,10,.07);color:var(--amber);border:1px solid rgba(200,134,10,.2)}
.feat-title{font-size:.95rem;font-weight:800;color:var(--fg)}
.feat-desc{font-size:.85rem;color:var(--mute-2);line-height:1.7}
@media(max-width:768px){.features-grid{grid-template-columns:1fr}}

/* MANIFESTO */
.manifesto{background:var(--flame);padding:5vh 6vw;overflow:hidden}
.manifesto-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:3rem;flex-wrap:wrap}
.manifesto p{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2.6rem);line-height:1.3;color:#fff;max-width:70ch}
.manifesto p em{font-style:italic;opacity:.7}
.mf-cta{flex-shrink:0;background:#fff;color:var(--flame);padding:1rem 2.2rem;border-radius:var(--r);font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;border:none;cursor:pointer;transition:.3s;white-space:nowrap}
.mf-cta:hover{background:var(--rust);color:#fff}

/* HOW IT WORKS */
.hiw-section{background:var(--bg-2)}
.hiw-steps{display:flex;flex-direction:column;border:1px solid var(--border);margin-top:3rem}
.hiw-step{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--border)}
.hiw-step:last-child{border-bottom:none}
.hiw-l,.hiw-r{padding:4.5rem 4rem}
.hiw-l{border-right:1px solid var(--border);display:flex;flex-direction:column;justify-content:center}
.hiw-r{display:flex;flex-direction:column;justify-content:center}
.hiw-step.alt .hiw-l{order:2;border-right:none;border-left:1px solid var(--border)}
.hiw-step.alt .hiw-r{order:1}
.hiw-num{font-family:var(--serif);font-size:4.5rem;line-height:1;color:rgba(204,0,0,.12);letter-spacing:-.05em;margin-bottom:.5rem}
.hiw-title{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.1;letter-spacing:-.03em;margin-bottom:.8rem}
.hiw-title em{font-style:italic;color:var(--flame)}
.hiw-desc{font-size:.9rem;color:var(--mute-2);line-height:1.8;margin-bottom:1.6rem;max-width:44ch}
.hiw-list{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.hiw-list li{display:flex;align-items:flex-start;gap:.8rem;font-size:.85rem;color:var(--mute)}
.hiw-list li i{color:var(--moss);font-size:1rem;flex-shrink:0;margin-top:.15rem}
.hiw-vis{width:100%;aspect-ratio:4/3;border-radius:12px;border:1px solid var(--border);overflow:hidden;position:relative;background:var(--bg-3)}
.hiw-vis img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.hiw-step:hover .hiw-vis img{transform:scale(1.03)}
.hiw-vis-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,6,3,.55) 0%,transparent 60%);pointer-events:none}
.hiw-vis-label{position:absolute;bottom:1.2rem;left:1.4rem;font-size:.46rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.7);display:flex;align-items:center;gap:.5rem}
.hiw-vis-label::before{content:'';width:18px;height:1px;background:rgba(255,255,255,.5)}
@media(max-width:780px){
  .hiw-step,.hiw-step.alt{grid-template-columns:1fr}
  .hiw-l,.hiw-r{padding:3rem 6vw}
  .hiw-l{border-right:none;border-bottom:1px solid var(--border)}
  .hiw-step.alt .hiw-l{order:0;border-left:none;border-bottom:1px solid var(--border)}
  .hiw-step.alt .hiw-r{order:0}
}

/* PRICING */
.pricing-section{background:var(--bg)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3.5rem}
.pricing-grid-4{grid-template-columns:repeat(4,1fr)}
.pc{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--bg-2);transition:box-shadow .3s,transform .3s var(--ease)}
.pc:hover{box-shadow:0 12px 48px rgba(26,20,16,.1);transform:translateY(-4px)}
.pc.featured{border-color:var(--flame);background:var(--bg)}
.pc.pc-lite{background:var(--bg-3);border-style:dashed}
.pc-head{padding:2rem 2.2rem 1.6rem;border-bottom:1px solid var(--border)}
.pc-badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.42rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;padding:.28rem .75rem;border-radius:99px;margin-bottom:.9rem}
.pc-badge.red{background:var(--flame);color:#fff}
.pc-badge.green{background:var(--moss);color:#fff}
.pc-badge.amber{background:var(--amber);color:#fff}
.pc-badge.grey{background:var(--border);color:var(--mute)}
.pc-server-shared .pc-server-specs span i{color:var(--mute)}
.pc-name{font-family:var(--serif);font-size:1.5rem;letter-spacing:-.03em;margin-bottom:.45rem}
.pc-desc{font-size:.78rem;color:var(--mute-2);line-height:1.6;margin-bottom:1.2rem}
.pc-amount{margin-bottom:.2rem}
.pc-kes{font-size:.7rem;font-weight:700;color:var(--mute);vertical-align:super;line-height:1}
.pc-num{font-family:var(--serif);font-size:2.6rem;color:var(--fg);letter-spacing:-.05em;line-height:1}
.pc-per{font-size:.7rem;color:var(--mute)}
.pc-usd{font-size:.62rem;color:var(--mute-2);background:var(--bg-3);padding:.18rem .45rem;border-radius:4px;display:inline-block}
.pc-server{margin-top:1.1rem;padding:.85rem 1rem;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--r)}
.pc-server-label{font-size:.46rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:.55rem}
.pc-server-specs{display:flex;flex-wrap:wrap;gap:.4rem .9rem}
.pc-server-specs span{display:flex;align-items:center;gap:.3rem;font-size:.7rem;font-weight:600;color:var(--mute-2)}
.pc-server-specs span i{font-size:.8rem;color:var(--moss)}
.pc-list{padding:1.4rem 2.2rem;display:flex;flex-direction:column;gap:.65rem;list-style:none}
.pc-list li{display:flex;align-items:flex-start;gap:.7rem;font-size:.81rem;color:var(--mute-2)}
.pc-list li i{font-size:.9rem;flex-shrink:0;margin-top:.14rem}
.pc-list li i.ri-check-line{color:var(--moss)}
.pc-list li i.ri-close-line{color:rgba(26,20,16,.22)}
.pc-foot{padding:0 2.2rem 2.2rem}
.pc-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:1rem;border-radius:var(--r);font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;border:none;cursor:pointer;transition:.3s var(--ease)}
.pc-btn.solid{background:var(--flame);color:#fff}
.pc-btn.solid:hover{background:var(--rust);box-shadow:0 6px 24px rgba(204,0,0,.3)}
.pc-btn.out{background:transparent;border:1px solid var(--border-flame);color:var(--flame)}
.pc-btn.out:hover{background:var(--flame-dim)}
/* Startup band */
.startup-band{background:var(--fg);border-radius:12px;padding:2.2rem 2.4rem;margin-top:2.4rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.sb-text strong{font-family:var(--serif);font-size:1.3rem;color:#fff;display:block;margin-bottom:.3rem}
.sb-text p{font-size:.78rem;color:rgba(247,243,238,.45);line-height:1.6;max-width:56ch}
.sb-price{text-align:right;flex-shrink:0}
.sb-label{font-size:.44rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:rgba(247,243,238,.35)}
.sb-num{font-family:var(--serif);font-size:2rem;color:#fff;letter-spacing:-.04em;line-height:1.1}
.sb-once{font-size:.65rem;color:rgba(247,243,238,.4)}
.sb-usd{font-size:.58rem;color:rgba(247,243,238,.28)}
.sb-cta{flex-shrink:0}
.price-note{margin-top:1.2rem;text-align:center;font-size:.72rem;color:var(--mute);display:flex;align-items:center;justify-content:center;gap:.5rem}
.price-note i{color:var(--neon)}
@media(max-width:1100px){.pricing-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.pricing-grid,.pricing-grid-4{grid-template-columns:1fr}.startup-band{flex-direction:column;align-items:flex-start}.sb-price{text-align:left}}

/* TESTIMONIALS */
.testi-section{background:var(--bg-2)}
.testi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);border:1px solid var(--border);margin-top:4rem}
.testi-card{background:var(--bg-2);padding:3.5rem 3rem;position:relative;overflow:hidden;transition:background .3s}
.testi-card:hover{background:var(--bg-3)}
.testi-card::before{content:'\201C';font-family:var(--serif);font-size:8rem;line-height:1;color:rgba(204,0,0,.07);position:absolute;top:1rem;right:2rem;pointer-events:none}
.testi-quote{font-family:var(--serif);font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.65;color:var(--fg);margin-bottom:2rem;font-style:italic}
.testi-author{display:flex;align-items:center;gap:1rem}
.testi-avatar{width:40px;height:40px;border-radius:50%;background:var(--bg-3);border:2px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.1rem;color:var(--mute)}
.testi-info strong{display:block;font-size:.8rem;font-weight:800;color:var(--fg)}
.testi-info span{font-size:.72rem;color:var(--mute)}
.testi-stars{display:flex;gap:2px;margin-bottom:.4rem}
.testi-stars i{color:var(--amber);font-size:.75rem}
@media(max-width:640px){.testi-grid{grid-template-columns:1fr}}

/* FAQ */
.faq-section{background:var(--bg)}
.faq-inner{display:grid;grid-template-columns:1fr 1.4fr;gap:8vw;align-items:start}
.faq-left{position:sticky;top:120px}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.6rem 0;cursor:pointer;font-size:.9rem;font-weight:700;color:var(--fg);transition:color .2s}
.faq-q:hover{color:var(--flame)}
.faq-n{font-family:var(--serif);font-size:1rem;color:rgba(204,0,0,.3);flex-shrink:0;margin-right:.3rem}
.faq-icon{flex-shrink:0;width:28px;height:28px;border-radius:50%;border:1px solid var(--border-flame);display:flex;align-items:center;justify-content:center;color:var(--flame);font-size:.85rem;transition:transform .3s var(--ease),background .2s}
.faq-item.open .faq-icon{transform:rotate(45deg);background:var(--flame);color:#fff;border-color:var(--flame)}
.faq-ans{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-ans p{font-size:.86rem;color:var(--mute-2);line-height:1.8;padding-bottom:1.5rem}
.faq-item.open .faq-ans{max-height:400px}
@media(max-width:780px){.faq-inner{grid-template-columns:1fr}.faq-left{position:static;margin-bottom:2rem}}

/* CTA */
.cta-band{background:var(--fg);padding:10vh 6vw;position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 80% 50%,rgba(204,0,0,.18) 0%,transparent 70%)}
.cta-inner{max-width:1280px;margin:0 auto;position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:4rem;flex-wrap:wrap}
.cta-text .eyebrow{color:rgba(255,255,255,.4)}.cta-text .eyebrow::before{background:rgba(255,255,255,.3)}
.cta-title{font-family:var(--serif);font-size:clamp(2rem,4.5vw,5rem);line-height:1;letter-spacing:-.04em;color:#fff;margin-bottom:1rem}
.cta-title em{font-style:italic;color:rgba(255,100,100,.85)}
.cta-sub{font-size:.95rem;color:rgba(255,255,255,.5);line-height:1.7;max-width:44ch}
.cta-actions{display:flex;gap:1rem;flex-wrap:wrap;flex-shrink:0}
.cta-actions .btn-outline{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.65)}
.cta-actions .btn-outline:hover{border-color:#fff;color:#fff}

/* FOOTER */
footer{background:#100D0A;padding:6vh 6vw 4vh}
.footer-inner{max-width:1280px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:5vw;padding-bottom:4vh;border-bottom:1px solid rgba(247,243,238,.08)}
.footer-brand strong{font-size:1.05rem;font-weight:800;letter-spacing:-.03em;color:#fff}
.footer-brand strong .dx-x{color:#CC0000}
.footer-brand p{font-size:.8rem;color:rgba(247,243,238,.4);line-height:1.7;margin-top:.8rem;max-width:30ch}
.footer-col h5{font-size:.48rem;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:rgba(247,243,238,.28);margin-bottom:1.2rem}
.footer-col a{display:block;font-size:.82rem;color:rgba(247,243,238,.5);margin-bottom:.65rem;transition:.2s}
.footer-col a:hover{color:#fff}
.footer-bottom{padding-top:3vh;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.footer-copy{font-size:.7rem;color:rgba(247,243,238,.22)}
.footer-socials{display:flex;gap:1rem}
.footer-socials a{width:34px;height:34px;border:1px solid rgba(247,243,238,.1);border-radius:8px;display:flex;align-items:center;justify-content:center;color:rgba(247,243,238,.35);font-size:.9rem;transition:.2s}
.footer-socials a:hover{border-color:var(--flame);color:var(--flame)}
@media(max-width:700px){.footer-top{grid-template-columns:1fr 1fr}.footer-top>:first-child{grid-column:1/-1}}
/* ── CONTACT MODAL ── */
.cf-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:1.5rem;opacity:0;pointer-events:none;transition:opacity .35s cubic-bezier(0.16,1,0.3,1)}
.cf-modal.open{opacity:1;pointer-events:all}
.cf-scrim{position:absolute;inset:0;background:rgba(10,6,3,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cf-box{position:relative;z-index:1;background:#fff;border-radius:20px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;padding:2.4rem 2.6rem;box-shadow:0 32px 80px rgba(10,6,3,.35);transform:translateY(28px) scale(.97);transition:transform .35s cubic-bezier(0.16,1,0.3,1)}
.cf-modal.open .cf-box{transform:none}
.cf-close{position:absolute;top:1.2rem;right:1.2rem;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--mute);cursor:pointer;transition:.2s}
.cf-close:hover{background:var(--flame);color:#fff;border-color:var(--flame)}
.cf-logo{font-family:var(--serif);font-size:1.1rem;font-weight:800;color:var(--fg);margin-bottom:1rem}
.cf-logo span{color:var(--flame)}
.cf-title{font-family:var(--serif);font-size:clamp(1.6rem,4vw,2.2rem);font-weight:700;color:var(--fg);line-height:1;margin-bottom:.5rem;letter-spacing:-.02em}
.cf-sub{font-size:.85rem;color:var(--mute);line-height:1.6;margin-bottom:1.8rem}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.cf-field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.cf-field label{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--mute)}
.cf-optional{font-weight:400;text-transform:none;letter-spacing:0;opacity:.6}
.cf-field input,.cf-field select,.cf-field textarea{font-family:var(--sans);font-size:.92rem;color:var(--fg);background:#f7f5f2;border:1.5px solid transparent;border-radius:10px;padding:.75rem 1rem;outline:none;transition:border-color .2s,box-shadow .2s;width:100%}
.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{border-color:var(--flame);box-shadow:0 0 0 3px rgba(204,0,0,.1);background:#fff}
.cf-field textarea{resize:vertical;min-height:90px}
.cf-field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A4A3A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-color:#f7f5f2;padding-right:2.5rem}
.cf-submit{width:100%;padding:1rem;background:var(--flame);color:#fff;font-family:var(--sans);font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border:none;border-radius:999px;cursor:pointer;transition:background .25s,box-shadow .25s;box-shadow:0 4px 20px rgba(204,0,0,.4);display:flex;align-items:center;justify-content:center;gap:.6rem;margin-top:.4rem}
.cf-submit:hover{background:#a50000;box-shadow:0 6px 28px rgba(204,0,0,.55)}
.cf-privacy{font-size:.65rem;color:var(--mute);text-align:center;margin-top:.85rem;opacity:.7}
.cf-success{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2rem 0}
.cf-success[hidden]{display:none}
.cf-success-icon{font-size:3rem;color:var(--moss);margin-bottom:1rem}
.cf-success h3{font-family:var(--serif);font-size:1.6rem;color:var(--fg);margin-bottom:.5rem}
.cf-success p{font-size:.9rem;color:var(--mute);margin-bottom:1.5rem}
@media(max-width:540px){.cf-row{grid-template-columns:1fr}.cf-box{padding:1.8rem 1.4rem}}

/* ── COMMAND BAR ── */
.nav-right{display:flex;align-items:center;gap:1rem}
.cmdb-trigger{display:inline-flex;align-items:center;gap:.55rem;padding:.5rem 1rem;border-radius:999px;background:rgba(26,20,16,.06);border:1px solid rgba(26,20,16,.15);color:rgba(26,20,16,.65);cursor:pointer;font-size:.55rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-family:system-ui,sans-serif;transition:background .35s,border-color .35s,color .35s,box-shadow .2s;white-space:nowrap;flex-shrink:0}
.cmdb-trigger:hover{background:rgba(26,20,16,.12);border-color:rgba(26,20,16,.25);color:#1A1410;box-shadow:0 4px 16px rgba(0,0,0,.1)}
.cmdb-overlay{display:none;position:fixed;inset:0;z-index:9000;background:rgba(15,15,20,.55);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);align-items:flex-start;justify-content:center;padding-top:12vh}
.cmdb-overlay.open{display:flex}
.cmdb-box{width:min(640px,92vw);background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:16px;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08);animation:cmdbIn .22s cubic-bezier(.16,1,.3,1) both}
@keyframes cmdbIn{from{opacity:0;transform:scale(.96) translateY(-8px)}to{opacity:1;transform:none}}
.cmdb-search{display:flex;align-items:center;gap:.85rem;padding:1rem 1.25rem;border-bottom:1px solid rgba(0,0,0,.07)}
.cmdb-search i{font-size:1.1rem;color:rgba(0,0,0,.3);flex-shrink:0}
.cmdb-search input{flex:1;background:none;border:none;outline:none;font-size:.95rem;color:#0a0a0a;font-family:system-ui,sans-serif;caret-color:#CC0000}
.cmdb-search input::placeholder{color:rgba(0,0,0,.25)}
.cmdb-esc{font-size:.48rem;color:rgba(0,0,0,.3);background:rgba(0,0,0,.05);padding:.2rem .6rem;border-radius:4px;border:1px solid rgba(0,0,0,.1);flex-shrink:0;font-family:system-ui,sans-serif;white-space:nowrap}
.cmdb-section-label{font-size:.42rem;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:rgba(0,0,0,.3);padding:.85rem 1.25rem .4rem;font-family:system-ui,sans-serif}
.cmdb-items{padding:.3rem .5rem .5rem}
.cmdb-item{display:flex;align-items:center;gap:1rem;padding:.75rem .75rem;border-radius:10px;cursor:pointer;text-decoration:none;transition:background .12s}
.cmdb-item:hover,.cmdb-item.cactive{background:rgba(0,0,0,.05)}
.cmdb-icon{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.58rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase;flex-shrink:0;border:1px solid rgba(0,0,0,.08);font-family:system-ui,sans-serif}
.cmdb-body{flex:1;min-width:0}
.cmdb-name{font-size:.82rem;font-weight:700;color:#0a0a0a;font-family:system-ui,sans-serif;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.cmdb-badge{font-size:.36rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;padding:.18rem .55rem;border-radius:100px;font-family:system-ui,sans-serif}
.cmdb-cur{font-size:.36rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:rgba(0,0,0,.07);color:rgba(0,0,0,.35);padding:.18rem .55rem;border-radius:100px;font-family:system-ui,sans-serif}
.cmdb-desc{font-size:.72rem;color:rgba(0,0,0,.42);margin-top:.15rem;font-family:system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdb-arrow{font-size:.85rem;color:rgba(0,0,0,.2);transition:color .15s,transform .15s;flex-shrink:0}
.cmdb-item:hover .cmdb-arrow,.cmdb-item.cactive .cmdb-arrow{color:rgba(0,0,0,.5);transform:translateX(2px)}
.cmdb-footer{padding:.6rem 1.25rem;border-top:1px solid rgba(0,0,0,.07);display:flex;align-items:center;gap:1.2rem}
.cmdb-footer span{font-size:.44rem;color:rgba(0,0,0,.3);display:flex;align-items:center;gap:.3rem;font-family:system-ui,sans-serif}
.cmdb-footer kbd{background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.1);border-radius:4px;padding:.1rem .4rem;font-size:.44rem;font-family:system-ui,sans-serif;color:rgba(0,0,0,.35)}
.cmdb-empty{padding:2rem 1.25rem;text-align:center;font-size:.8rem;color:rgba(0,0,0,.3);font-family:system-ui,sans-serif;display:none}