:root { --bg:#050b14; --bg-2:#07111f; --panel:#0b1727; --panel-2:#0d1b2e; --line:rgba(255,255,255,.09); --text:#f5f8fc; --muted:#9badc2; --cyan:#41e6d0; --cyan-2:#5bb8ff; --gold:#d7b56d; --danger:#ff7c86; --success:#69e6a6; --shadow:0 30px 80px rgba(0,0,0,.35); --radius:24px; --font-head:'Space Grotesk',sans-serif; --font-body:'Manrope',sans-serif } * { box-sizing:border-box } html { scroll-behavior:smooth } body { font-family:var(--font-body); background:var(--bg); color:var(--text); overflow-x:hidden; line-height:1.7 } /* Bilingual visibility. The page state uses a distinct class so the itself is never accidentally hidden by the content-language selector. */ .lang-en { display:none!important } body.language-en .lang-id { display:none!important } body.language-en .lang-en { display:revert!important } a { text-decoration:none; color:inherit } img { max-width:100% } .container { max-width:1200px } .section-padding { padding:110px 0 } .section-panel { background:linear-gradient(180deg,rgba(11,23,39,.72),rgba(7,17,31,.86)); border-top:1px solid var(--line); border-bottom:1px solid var(--line) } h1,h2,h3,h4,h5,h6 { font-family:var(--font-head); font-weight:700; letter-spacing:-.035em } h1 { font-size:clamp(3.1rem,6vw,6.3rem); line-height:.98 } h2 { font-size:clamp(2.3rem,4.4vw,4.5rem); line-height:1.06 } p { color:var(--muted) } .text-gradient { background:linear-gradient(110deg,var(--cyan),var(--cyan-2) 55%,#b7f6ff); -webkit-background-clip:text; background-clip:text; color:transparent } .brand-accent { color:var(--cyan) } .cursor-glow { position:fixed; inset:auto; width:420px; height:420px; border-radius:50%; pointer-events:none; z-index:-1; background:radial-gradient(circle,rgba(65,230,208,.09),transparent 68%); transform:translate(-50%,-50%); transition:opacity .3s } .navbar { padding:18px 0; transition:.35s; background:transparent } .navbar.scrolled { padding:10px 0; background:rgba(5,11,20,.82); backdrop-filter:blur(18px); border-bottom:1px solid var(--line) } .navbar-brand,.footer-brand { font-family:var(--font-head); font-size:1.25rem; font-weight:700; color:#fff } .navbar-brand:hover,.footer-brand:hover { color:#fff } .navbar-toggler { border:1px solid var(--line); filter:invert(1) } .nav-link { color:#b9c6d7!important; font-size:.91rem; font-weight:600; margin:0 .35rem; position:relative } .nav-link:after { content:''; position:absolute; left:50%; right:50%; bottom:1px; height:2px; background:var(--cyan); transition:.3s } .nav-link:hover,.nav-link.active { color:#fff!important } .nav-link:hover:after,.nav-link.active:after { left:.6rem; right:.6rem } .btn { border-radius:999px; padding:.85rem 1.35rem; font-weight:700; font-size:.9rem; transition:.3s } .btn-lg { padding:1.05rem 1.65rem } .btn-sm { padding:.72rem 1.1rem } .btn-primary { background:linear-gradient(110deg,var(--cyan),#55bfff); border:0; color:#03111b; box-shadow:0 14px 35px rgba(65,230,208,.18) } .btn-primary:hover { color:#03111b; transform:translateY(-3px); box-shadow:0 18px 45px rgba(65,230,208,.28) } .btn-ghost { border:1px solid var(--line); background:rgba(255,255,255,.035); color:#fff } .btn-ghost:hover { border-color:rgba(65,230,208,.4); background:rgba(65,230,208,.08); color:#fff; transform:translateY(-2px) } .btn-lang { border:1px solid var(--line); color:#fff; display:flex; align-items:center; gap:.5rem; padding:.67rem .85rem } .btn-lang:hover { border-color:var(--cyan); color:var(--cyan) } .hero-section { position:relative; min-height:100vh; overflow:hidden; background:radial-gradient(circle at 70% 40%,rgba(40,128,176,.15),transparent 32%),linear-gradient(180deg,#06101c,#050b14) } .hero-grid-bg,.cta-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:54px 54px; mask-image:linear-gradient(to bottom,black,transparent 90%) } .orb { position:absolute; border-radius:50%; filter:blur(2px); opacity:.45; animation:float 9s ease-in-out infinite } .orb-one { width:470px; height:470px; right:-150px; top:8%; background:radial-gradient(circle at 35% 35%,rgba(65,230,208,.2),transparent 65%); border:1px solid rgba(65,230,208,.1) } .orb-two { width:260px; height:260px; left:38%; bottom:-100px; background:radial-gradient(circle,rgba(91,184,255,.18),transparent 66%); animation-delay:-4s } @keyframes float { 50% { transform:translateY(-25px) translateX(12px) } } .eyebrow { display:flex; align-items:center; gap:.65rem; text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:800; color:var(--cyan); margin-bottom:1.25rem } .pulse-dot { width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 0 rgba(65,230,208,.6); animation:pulse 2s infinite } @keyframes pulse { 70% { box-shadow:0 0 0 10px rgba(65,230,208,0) } 100% { box-shadow:0 0 0 0 rgba(65,230,208,0) } } .hero-lead { font-size:1.12rem; max-width:680px; margin:1.7rem 0 } .hero-actions { margin:2rem 0 } .hero-proof { display:flex; align-items:center; gap:.8rem; margin-top:2.8rem; flex-wrap:wrap } .hero-proof div { display:flex; flex-direction:column } .hero-proof strong { font-family:var(--font-head); font-size:.8rem; color:var(--cyan) } .hero-proof span { font-size:.75rem; color:#cbd5e2 } .hero-proof>i { color:#445469 } .dashboard-shell { position:relative; background:linear-gradient(145deg,rgba(14,31,51,.95),rgba(7,17,31,.9)); border:1px solid rgba(255,255,255,.12); border-radius:30px; padding:18px; box-shadow:var(--shadow),0 0 0 10px rgba(255,255,255,.015); transform:perspective(1000px) rotateY(-3deg) rotateX(2deg); transition:.3s; overflow:hidden } .dashboard-shell:before { content:''; position:absolute; inset:-1px; background:linear-gradient(130deg,rgba(65,230,208,.25),transparent 30%,transparent 70%,rgba(91,184,255,.16)); pointer-events:none; border-radius:30px } .dashboard-top { display:flex; align-items:center; justify-content:space-between; padding:6px 5px 16px; border-bottom:1px solid var(--line); position:relative } .dots { display:flex; gap:5px } .dots span { width:8px; height:8px; border-radius:50%; background:#29405a } .dots span:first-child { background:#f5747a } .dots span:nth-child(2) { background:#e6bb62 } .dots span:nth-child(3) { background:#5fd49a } .dashboard-title { font-size:.75rem; font-weight:700; color:#aebdd0 } .live-pill { font-size:.62rem; color:#88efd0; border:1px solid rgba(105,230,166,.25); padding:.24rem .5rem; border-radius:99px; background:rgba(105,230,166,.06) } .live-pill i { display:inline-block; width:5px; height:5px; background:var(--success); border-radius:50%; margin-right:4px } .metric-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:15px 0 } .metric-card { padding:13px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.025) } .metric-card span { display:block; font-size:.57rem; color:#8799af } .metric-card strong { display:block; font-size:1.45rem; font-family:var(--font-head); line-height:1.2 } .metric-card small { font-size:.55rem; color:var(--success) } .metric-card small.warning { color:#f5c36e } .pipeline-board { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; background:rgba(0,0,0,.13); padding:10px; border-radius:17px } .pipeline-col { min-width:0 } .pipeline-head { display:flex; justify-content:space-between; align-items:center; font-size:.58rem; color:#91a4ba; margin:0 3px 8px } .pipeline-head b { background:#1b2c42; padding:1px 6px; border-radius:99px; color:#dbe7f5 } .lead-card { display:flex; align-items:center; gap:7px; padding:8px; border:1px solid rgba(255,255,255,.07); border-left:2px solid var(--gold); background:#0f2034; border-radius:9px; margin-bottom:7px; min-width:0 } .lead-card.cyan { border-left-color:var(--cyan) } .lead-card.success { border-left-color:var(--success) } .avatar { width:24px; height:24px; border-radius:7px; background:rgba(65,230,208,.11); color:var(--cyan); display:grid; place-items:center; font-size:.48rem; font-weight:800; flex:none } .avatar.alt { background:rgba(215,181,109,.12); color:var(--gold) } .lead-card div { min-width:0; flex:1 } .lead-card strong,.lead-card small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .lead-card strong { font-size:.55rem } .lead-card small { font-size:.45rem; color:#7f93aa } .lead-card em { font-style:normal; font-size:.47rem; color:#71859e } .activity-strip { display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding:10px 12px; border-radius:12px; background:linear-gradient(90deg,rgba(65,230,208,.08),rgba(91,184,255,.04)); font-size:.58rem; color:#a6b8cc } .activity-strip>span i { color:var(--cyan) } .activity-wave { display:flex; align-items:end; gap:2px; height:16px } .activity-wave i { display:block; width:2px; background:var(--cyan); border-radius:3px; animation:wave 1.2s ease-in-out infinite } .activity-wave i:nth-child(2) { animation-delay:.1s } .activity-wave i:nth-child(3) { animation-delay:.2s } .activity-wave i:nth-child(4) { animation-delay:.3s } .activity-wave i:nth-child(5) { animation-delay:.4s } .activity-wave i:nth-child(6) { animation-delay:.5s } .activity-wave i:nth-child(7) { animation-delay:.6s } @keyframes wave { 0%,100% { height:3px } 50% { height:15px } } .trust-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#07111f } .trust-row { display:flex; align-items:center; justify-content:space-between; gap:1.2rem; padding:22px 0; flex-wrap:wrap; color:#8fa2b8; font-size:.8rem } .trust-row>span { text-transform:uppercase; letter-spacing:.1em; font-size:.65rem } .trust-row div { display:flex; align-items:center; gap:.5rem; color:#d5dfeb } .trust-row i { color:var(--cyan) } .section-copy { font-size:1.05rem } .section-heading { max-width:780px } .section-heading p { font-size:1.02rem } .leakage-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px } .leak-card,.service-card,.addon-card,.price-card { position:relative; border:1px solid var(--line); background:linear-gradient(145deg,rgba(14,29,48,.85),rgba(8,18,31,.72)); border-radius:var(--radius); padding:28px; overflow:hidden; transition:.35s } .leak-card:hover,.service-card:hover,.addon-card:hover,.price-card:hover { transform:translateY(-8px); border-color:rgba(65,230,208,.26); box-shadow:0 24px 55px rgba(0,0,0,.22) } .leak-card>i { font-size:1.8rem; color:var(--cyan); margin:2rem 0 1.2rem; display:block } .step-no,.service-number { position:absolute; right:20px; top:15px; color:rgba(255,255,255,.14); font-family:var(--font-head); font-size:1.4rem; font-weight:700 } .leak-card h3,.service-card h3 { font-size:1.25rem } .leak-card p,.service-card p { font-size:.86rem } .leak-tag { display:inline-block; font-size:.67rem; border:1px solid rgba(255,124,134,.15); background:rgba(255,124,134,.06); color:#ff9ca4; padding:.28rem .55rem; border-radius:99px } .services-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px } .service-card { display:block; color:#fff; min-height:310px } .service-card:hover { color:#fff } .service-card.featured { background:linear-gradient(145deg,rgba(25,67,76,.85),rgba(8,18,31,.75)); border-color:rgba(65,230,208,.25) } .service-icon { width:55px; height:55px; border-radius:16px; display:grid; place-items:center; background:rgba(65,230,208,.09); color:var(--cyan); font-size:1.45rem; margin-bottom:3rem } .card-link { position:absolute; bottom:24px; left:28px; font-size:.78rem; font-weight:700; color:#dce8f5 } .card-link i { transition:.3s } .service-card:hover .card-link i { transform:translateX(5px) } .process-line { position:relative } .process-line:before { content:''; position:absolute; left:25px; top:30px; bottom:30px; width:1px; background:linear-gradient(var(--line),rgba(65,230,208,.45),var(--line)) } .process-step { position:relative; display:flex; gap:22px; padding:19px 20px 19px 0; border-radius:18px } .process-step>span { width:51px; height:51px; border-radius:15px; display:grid; place-items:center; background:#0d1b2e; border:1px solid var(--line); color:#7f93aa; font-family:var(--font-head); font-size:.76rem; z-index:1; flex:none } .process-step.active { background:rgba(65,230,208,.05) } .process-step.active>span { background:linear-gradient(135deg,var(--cyan),var(--cyan-2)); color:#03111b; border:0 } .process-step h4 { font-size:1.1rem; margin:0 0 3px } .process-step p { font-size:.83rem; margin:0 } .calculator-section { background:radial-gradient(circle at 10% 30%,rgba(65,230,208,.08),transparent 30%) } .calculator-shell { border:1px solid rgba(65,230,208,.18); border-radius:32px; overflow:hidden; background:#081422; box-shadow:var(--shadow) } .calculator-copy { padding:55px; background:linear-gradient(145deg,rgba(19,55,63,.75),rgba(8,20,34,.85)); border-right:1px solid var(--line) } .calculator-copy h2 { font-size:clamp(2.3rem,4vw,3.6rem) } .calculator-form { padding:55px } .calculator-form label,.contact-form label { display:block; color:#d4deea; font-size:.78rem; font-weight:700; margin-bottom:8px } .form-control,.form-select { background:#07111f; border:1px solid rgba(255,255,255,.11); color:#fff; border-radius:14px; padding:.95rem 1rem } .form-control:focus,.form-select:focus { background:#091625; color:#fff; border-color:var(--cyan); box-shadow:0 0 0 .22rem rgba(65,230,208,.08) } .form-control::placeholder { color:#62758d } .form-select option { background:#07111f; color:#fff } .calc-result { display:grid; grid-template-columns:1.5fr 1fr; gap:12px; margin-top:24px } .calc-result div { padding:18px; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:16px } .calc-result span { display:block; color:#8fa2b8; font-size:.68rem } .calc-result strong { font-family:var(--font-head); font-size:1.35rem; color:var(--cyan) } .check-list { list-style:none; padding:0; margin:1.5rem 0 } .check-list li { display:flex; align-items:flex-start; gap:.65rem; margin:.75rem 0; color:#c5d1df; font-size:.9rem } .check-list i { color:var(--cyan); margin-top:.2rem } .industry-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px } .industry-card { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px; border:1px solid var(--line); padding:27px; border-radius:24px; color:#fff; background:#0a1625; transition:.35s } .industry-card:hover { color:#fff; transform:translateY(-7px); border-color:rgba(65,230,208,.28) } .industry-icon { width:56px; height:56px; display:grid; place-items:center; border-radius:17px; background:rgba(65,230,208,.08); color:var(--cyan); font-size:1.45rem } .industry-card span { display:block; font-size:.62rem; text-transform:uppercase; letter-spacing:.12em; color:#7f93aa } .industry-card h3 { font-size:1.14rem; margin:.2rem 0 } .industry-card p { font-size:.7rem; margin:0 } .industry-card>i { color:#6c8199 } .ecosystem-preview { background:radial-gradient(circle at 75% 45%,rgba(91,184,255,.08),transparent 32%) } .ecosystem-orbit { height:460px; position:relative; display:grid; place-items:center } .orbit-line { position:absolute; border:1px solid rgba(65,230,208,.15); border-radius:50% } .orbit-a { width:380px; height:380px; animation:spin 30s linear infinite } .orbit-b { width:260px; height:260px; border-color:rgba(91,184,255,.16); animation:spin 20s linear infinite reverse } @keyframes spin { to { transform:rotate(360deg) } } .orbit-center { width:125px; height:125px; border-radius:50%; background:linear-gradient(145deg,#102a3a,#07111f); border:1px solid rgba(65,230,208,.25); display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 0 70px rgba(65,230,208,.12) } .orbit-center img { width:42px } .orbit-center b { font-family:var(--font-head); font-size:.72rem; margin-top:5px; color:var(--cyan) } .ecosystem-node { position:absolute; width:190px; padding:18px; border:1px solid var(--line); border-radius:17px; background:rgba(9,22,37,.95); box-shadow:0 15px 35px rgba(0,0,0,.25) } .ecosystem-node span { display:block; color:var(--cyan); font-size:.65rem } .ecosystem-node strong { display:block; font-family:var(--font-head); font-size:1.1rem } .ecosystem-node small { color:#70869e; font-size:.65rem } .trust-node { left:0; top:45px } .audit-node { right:0; top:110px } .fix-node { left:15%; bottom:30px } .pricing-preview-grid,.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px } .price-card { padding:34px } .price-card.popular { border-color:rgba(65,230,208,.4); background:linear-gradient(145deg,rgba(22,65,72,.92),rgba(8,18,31,.85)); transform:translateY(-10px) } .price-card.popular:hover { transform:translateY(-16px) } .popular-ribbon { position:absolute; top:17px; right:-36px; transform:rotate(38deg); background:var(--cyan); color:#03111b; font-size:.55rem; font-weight:800; padding:5px 42px } .price-label { font-size:.75rem; color:var(--cyan); font-weight:800; text-transform:uppercase; letter-spacing:.12em } .price-card h3 { font-size:2.15rem; margin:1rem 0 } .price-card h3 small { font-family:var(--font-body); font-size:.65rem; color:#8fa2b8; font-weight:600; margin-right:4px } .price-card p { font-size:.85rem; min-height:70px } .price-card ul { list-style:none; padding:0; margin:1.5rem 0 } .price-card li { font-size:.79rem; color:#bdc9d8; margin:.72rem 0; padding-left:1.35rem; position:relative } .price-card li:before { content:'✓'; position:absolute; left:0; color:var(--cyan) } .custom-accordion .accordion-item { background:transparent; border:0; border-bottom:1px solid var(--line) } .custom-accordion .accordion-button { background:transparent; color:#fff; font-family:var(--font-head); font-weight:600; padding:1.3rem 0; box-shadow:none } .custom-accordion .accordion-button:not(.collapsed) { color:var(--cyan) } .custom-accordion .accordion-button:after { filter:invert(1) } .custom-accordion .accordion-body { padding:0 0 1.5rem; color:#95a8bd; font-size:.9rem } .final-cta { position:relative; padding:100px 0; overflow:hidden } .cta-box { text-align:center; padding:65px 30px; border-radius:32px; border:1px solid rgba(65,230,208,.18); background:linear-gradient(145deg,rgba(17,51,60,.72),rgba(7,17,31,.86)); box-shadow:var(--shadow) } .cta-box h2 { max-width:850px; margin:0 auto } .cta-box p { max-width:680px; margin:1.2rem auto 2rem } .site-footer { padding:70px 0 25px; background:#030810; border-top:1px solid var(--line) } .footer-grid { display:grid; grid-template-columns:1.8fr 1fr 1.3fr 1.2fr; gap:45px } .footer-copy { max-width:360px; font-size:.85rem } .site-footer h6 { font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; color:#dce6f2 } .footer-links { list-style:none; padding:0; margin:1rem 0 0 } .footer-links li { margin:.65rem 0 } .footer-links a { font-size:.78rem; color:#8093aa } .footer-links a:hover { color:var(--cyan) } .footer-bottom { display:flex; justify-content:space-between; gap:20px; margin-top:55px; padding-top:22px; border-top:1px solid var(--line); font-size:.7rem; color:#667991 } .footer-bottom a { color:#b7c7d8 } .floating-wa { position:fixed; right:24px; bottom:24px; width:55px; height:55px; border-radius:50%; display:grid; place-items:center; background:#25d366; color:#03120a; font-size:1.5rem; z-index:20; box-shadow:0 12px 35px rgba(37,211,102,.25); transition:.3s } .floating-wa:hover { transform:translateY(-5px) scale(1.04); color:#03120a } .inner-hero { position:relative; padding:190px 0 95px; background:radial-gradient(circle at 75% 30%,rgba(65,230,208,.08),transparent 30%),linear-gradient(#06101c,#050b14); overflow:hidden; border-bottom:1px solid var(--line) } .inner-hero-content { max-width:900px } .inner-hero h1 { font-size:clamp(3rem,6vw,5.5rem) } .inner-hero p { font-size:1.08rem; max-width:750px; margin-top:1.5rem } .solution-detail { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:80px; padding:80px 0; border-bottom:1px solid var(--line); scroll-margin-top:90px } .solution-detail.reverse .solution-visual { order:2 } .solution-index { font-family:var(--font-head); color:rgba(255,255,255,.1); font-size:4rem; font-weight:700; line-height:1 } .solution-copy h2 { font-size:clamp(2.2rem,4vw,3.7rem) } .solution-copy>p { font-size:1rem } .mini-browser,.dashboard-mini,.playbook-card { background:#0b192a; border:1px solid var(--line); border-radius:25px; box-shadow:var(--shadow); overflow:hidden } .browser-bar { height:38px; border-bottom:1px solid var(--line); display:flex; gap:6px; align-items:center; padding:0 15px } .browser-bar span { width:8px; height:8px; border-radius:50%; background:#29405a } .browser-body { padding:25px } .mock-nav { height:10px; width:45%; border-radius:8px; background:#20354a } .mock-hero { padding:35px 0 } .mock-hero span,.mock-hero strong,.mock-hero small { display:block; border-radius:8px; background:#162b40 } .mock-hero span { height:10px; width:23%; background:rgba(65,230,208,.3) } .mock-hero strong { height:20px; width:80%; margin:13px 0 } .mock-hero small { height:10px; width:60% } .mock-hero button { width:130px; height:34px; margin-top:18px; border:0; border-radius:99px; background:linear-gradient(90deg,var(--cyan),var(--cyan-2)) } .source-badges { display:flex; flex-wrap:wrap; gap:8px } .source-badges em { font-style:normal; font-size:.66rem; background:#0d2034; border:1px solid var(--line); padding:.45rem .65rem; border-radius:99px; color:#9bb0c6 } .message-stack { padding:35px; border-radius:25px; background:linear-gradient(145deg,#102338,#081422); border:1px solid var(--line); box-shadow:var(--shadow) } .message { max-width:85%; padding:15px 18px; border-radius:16px; margin-bottom:15px } .message p { font-size:.82rem; margin:4px 0 0; color:#dbe5f1 } .message small { font-size:.57rem; color:#70849c } .incoming { background:#13263a } .outgoing { background:rgba(65,230,208,.12); margin-left:auto; border-bottom-right-radius:4px } .reminder { max-width:100%; display:flex; align-items:center; gap:14px; background:rgba(215,181,109,.09); border:1px solid rgba(215,181,109,.18) } .reminder>i { font-size:1.4rem; color:var(--gold) } .reminder strong,.reminder small { display:block } .dashboard-mini { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:22px } .dash-stat { background:#0e2034; border:1px solid var(--line); border-radius:12px; padding:12px } .dash-stat span { display:block; font-size:.57rem; color:#8295ab } .dash-stat strong { font-family:var(--font-head); font-size:1.4rem } .dash-table { grid-column:1/-1; margin-top:7px } .dash-table>div { display:grid; grid-template-columns:1.5fr 1fr 1fr; padding:12px; border-bottom:1px solid var(--line); font-size:.65rem } .dash-table em { font-style:normal; color:var(--cyan) } .dash-table em.orange { color:#f3bd6c } .dash-table em.green { color:var(--success) } .dash-table small { color:#72869d } .playbook-card { display:grid; grid-template-columns:1fr 1fr } .playbook-cover { padding:40px; background:linear-gradient(145deg,#13313a,#0a1727); min-height:320px; display:flex; flex-direction:column } .playbook-cover img { width:55px } .playbook-cover span { font-family:var(--font-head); font-weight:700; margin-top:15px } .playbook-cover h4 { font-size:2rem; margin:auto 0 1rem } .playbook-cover small { color:#7790a8 } .playbook-pages { padding:30px } .playbook-pages div { display:flex; gap:12px; padding:15px 0; border-bottom:1px solid var(--line); font-size:.73rem } .playbook-pages b { color:var(--cyan) } .addon-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px } .addon-card i { font-size:1.7rem; color:var(--cyan) } .addon-card h4 { font-size:1rem; margin-top:2rem } .addon-card p { font-size:.78rem; margin:0 } .industry-detail { display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:center; padding:95px 0; border-bottom:1px solid var(--line); scroll-margin-top:90px } .industry-detail.clinic-detail .industry-copy { order:2 } .industry-kicker { display:inline-flex; align-items:center; gap:.55rem; padding:.45rem .75rem; border:1px solid rgba(65,230,208,.16); border-radius:99px; color:var(--cyan); font-size:.7rem; font-weight:700; margin-bottom:1.4rem } .industry-copy h2 { font-size:clamp(2.3rem,4vw,4rem) } .use-case-list { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:1.5rem } .use-case-list div { display:flex; align-items:center; gap:.5rem; color:#c5d2df; font-size:.78rem } .use-case-list i { color:var(--cyan) } .timeline-demo,.appointment-phone,.deal-flow { border:1px solid var(--line); border-radius:27px; background:linear-gradient(145deg,#0e2034,#07111f); box-shadow:var(--shadow) } .timeline-demo { padding:22px } .timeline-row { display:grid; grid-template-columns:38px 1fr auto; gap:13px; align-items:center; padding:16px; border-bottom:1px solid var(--line) } .timeline-row:last-child { border-bottom:0 } .timeline-row>span { width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:#11263b; color:#7290aa; font-size:.65rem } .timeline-row strong,.timeline-row small { display:block } .timeline-row strong { font-size:.77rem } .timeline-row small { font-size:.61rem; color:#7489a0 } .timeline-row>i { color:#637b94 } .timeline-row.done>span { background:rgba(105,230,166,.08); color:var(--success) } .timeline-row.done>i { color:var(--success) } .timeline-row.current { background:rgba(65,230,208,.05); border-radius:14px } .timeline-row.current>span { background:var(--cyan); color:#03111b } .timeline-row.current>i { color:var(--cyan) } .appointment-phone { max-width:320px; margin:auto; padding:38px 28px; position:relative; text-align:center } .phone-notch { position:absolute; top:10px; left:50%; transform:translateX(-50%); width:70px; height:6px; border-radius:99px; background:#1b3046 } .appointment-phone>small { color:#7e93aa } .appointment-phone h4 { margin:1rem 0 1.5rem } .appointment-date { display:flex; align-items:center; justify-content:center; gap:12px; margin:1rem 0 } .appointment-date strong { font-family:var(--font-head); font-size:4.5rem; line-height:1; color:var(--cyan) } .appointment-date span { text-align:left; color:#aab9cb; font-size:.8rem; line-height:1.25 } .appointment-phone p { font-size:.78rem } .appointment-phone button { width:100%; border:0; border-radius:12px; padding:12px; margin-top:9px; background:var(--cyan); color:#03111b; font-weight:800; font-size:.75rem } .appointment-phone button.secondary { background:#10263a; color:#cad6e4; border:1px solid var(--line) } .deal-flow { padding:25px; display:flex; align-items:center; gap:8px } .deal-flow>div { flex:1; text-align:center; padding:16px 5px; border-radius:13px; background:#0e2034 } .deal-flow span,.deal-flow small { display:block; font-size:.58rem; color:#71869d } .deal-flow strong { font-family:var(--font-head); font-size:1.7rem } .deal-flow>i { color:#425a73 } .deal-flow .won { background:rgba(65,230,208,.08); border:1px solid rgba(65,230,208,.15) } .deal-flow .won strong { color:var(--cyan) } .mini-industries { display:grid; grid-template-columns:repeat(6,1fr); gap:14px } .mini-industries div { padding:24px 12px; text-align:center; border:1px solid var(--line); border-radius:18px; background:#091522 } .mini-industries i { display:block; color:var(--cyan); font-size:1.45rem; margin-bottom:.8rem } .mini-industries span { font-size:.75rem } .full-pricing { align-items:stretch } .full-pricing .price-card p { min-height:85px } .pricing-note { display:flex; align-items:flex-start; gap:12px; padding:18px 22px; border:1px solid rgba(215,181,109,.16); background:rgba(215,181,109,.05); border-radius:16px } .pricing-note i { color:var(--gold) } .pricing-note p { font-size:.73rem; margin:0 } .audit-summary-card { display:grid; grid-template-columns:150px 1fr; gap:28px; padding:30px; border:1px solid var(--line); border-radius:25px; background:#0a1727 } .audit-score { width:140px; height:140px; border-radius:50%; display:grid; place-items:center; align-content:center; background:conic-gradient(var(--cyan) 0 72%,#142a40 72% 100%); position:relative } .audit-score:before { content:''; position:absolute; inset:11px; background:#0a1727; border-radius:50% } .audit-score span,.audit-score small { position:relative } .audit-score span { font-family:var(--font-head); font-size:2.8rem; line-height:1 } .audit-score small { font-size:.55rem; color:#7890a8 } .audit-bars>div { display:grid; grid-template-columns:100px 1fr 25px; align-items:center; gap:10px; margin:12px 0; font-size:.65rem } .audit-bars i { height:6px; border-radius:99px; background:#152b40; overflow:hidden } .audit-bars b { display:block; height:100%; background:linear-gradient(90deg,var(--cyan),var(--cyan-2)); border-radius:99px } .audit-bars em { font-style:normal; color:#91a5bb } .audit-priority { grid-column:1/-1; display:flex; gap:12px; padding:14px; background:rgba(255,124,134,.06); border:1px solid rgba(255,124,134,.12); border-radius:13px } .audit-priority i { color:var(--danger) } .audit-priority strong,.audit-priority span { display:block } .audit-priority strong { font-size:.7rem } .audit-priority span { font-size:.63rem; color:#8fa2b8 } .comparison-table { width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#091522 } .comparison-table th,.comparison-table td { padding:18px; border-bottom:1px solid var(--line); text-align:center; font-size:.78rem } .comparison-table th:first-child,.comparison-table td:first-child { text-align:left } .comparison-table th { background:#0d1b2e; color:#dce6f1 } .comparison-table td { color:#90a4ba } .comparison-table i { color:var(--cyan) } .ecosystem-flow { display:flex; align-items:stretch; gap:14px } .ecosystem-stage { flex:1; min-width:0; padding:25px; border:1px solid var(--line); border-radius:22px; background:#091522; transition:.35s; color:#fff } .ecosystem-stage:hover { transform:translateY(-7px); color:#fff } .ecosystem-stage.trust-stage:hover { border-color:rgba(215,181,109,.35) } .ecosystem-stage.audit-stage:hover { border-color:rgba(91,184,255,.35) } .ecosystem-stage.fix-stage { border-color:rgba(65,230,208,.25) } .stage-top { display:flex; align-items:center; justify-content:space-between } .stage-top span { font-size:.68rem; color:#6f849c } .stage-top i { font-size:1.3rem; color:var(--cyan) } .ecosystem-stage small { display:block; color:#768ba2; margin-top:2rem; font-size:.65rem } .ecosystem-stage h2 { font-size:2rem; margin:.3rem 0 1rem } .ecosystem-stage p { font-size:.75rem; min-height:110px } .ecosystem-stage em { font-style:normal; font-size:.68rem; color:#c7d4e2 } .flow-connector { display:grid; place-items:center; color:#496078 } .intent-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px } .intent-grid>div { padding:25px; border:1px solid var(--line); border-radius:18px; background:#091522 } .intent-grid i { color:var(--cyan); font-size:1.4rem } .intent-grid h4 { font-size:1rem; margin:1rem 0 } .intent-grid p { margin:0; font-size:.72rem; color:var(--cyan) } .journey-track { display:grid; grid-template-columns:repeat(5,1fr); position:relative } .journey-track:before { content:''; position:absolute; left:10%; right:10%; top:42px; height:1px; background:linear-gradient(90deg,var(--gold),var(--cyan),var(--cyan-2)) } .journey-item { text-align:center; position:relative; padding:0 12px } .journey-item>span { position:absolute; top:-8px; right:23%; font-size:.55rem; color:#6d829a } .journey-item>i { width:84px; height:84px; border-radius:24px; display:grid; place-items:center; margin:0 auto 1.2rem; background:#0d1b2e; border:1px solid var(--line); font-size:1.5rem; color:var(--cyan); position:relative } .journey-item h4 { font-size:.9rem } .journey-item p { font-size:.68rem } .contact-intro h2 { font-size:clamp(2.3rem,4vw,3.8rem) } .contact-method { display:flex; align-items:center; gap:16px; padding:17px 0; border-bottom:1px solid var(--line) } .contact-method>i { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:rgba(65,230,208,.07); color:var(--cyan) } .contact-method span,.contact-method a { display:block } .contact-method span { font-size:.62rem; color:#7388a0 } .contact-method a { font-size:.82rem; color:#d5e0ec } .response-note { display:flex; gap:12px; padding:16px; margin-top:25px; border-radius:15px; background:rgba(65,230,208,.05); border:1px solid rgba(65,230,208,.12) } .response-note i { color:var(--cyan) } .response-note p { font-size:.68rem; margin:0 } .contact-form { padding:35px; border:1px solid var(--line); border-radius:27px; background:linear-gradient(145deg,#0d1b2e,#07111f); box-shadow:var(--shadow) } .issue-options { display:grid; grid-template-columns:1fr 1fr; gap:10px } .issue-options label { margin:0; cursor:pointer } .issue-options input { display:none } .issue-options span { display:block; padding:11px 13px; border:1px solid var(--line); border-radius:11px; font-size:.7rem; color:#95a8bd; transition:.25s } .issue-options input:checked+span { border-color:var(--cyan); background:rgba(65,230,208,.07); color:#dffcf8 } .form-helper { display:block; text-align:center; color:#6e839a; font-size:.64rem; margin-top:10px } .prep-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px } .prep-grid>div { padding:30px; border:1px solid var(--line); border-radius:22px; background:#091522 } .prep-grid span { color:var(--cyan); font-size:.7rem } .prep-grid h4 { font-size:1.15rem; margin:1.2rem 0 .5rem } .prep-grid p { font-size:.78rem; margin:0 } .legal-content { max-width:860px; margin:auto; padding:45px; border:1px solid var(--line); border-radius:25px; background:#091522 } .legal-content h2 { font-size:1.35rem; margin:2rem 0 .7rem } .legal-content h2:first-child { margin-top:0 } .legal-content p { font-size:.9rem } .legal-content a { color:var(--cyan) } .legal-date { margin-top:3rem; padding-top:1rem; border-top:1px solid var(--line); font-size:.75rem!important } .notfound { min-height:100vh; display:grid; place-items:center; position:relative; overflow:hidden } .notfound strong { display:block; font-family:var(--font-head); font-size:10rem; line-height:1; color:rgba(255,255,255,.07) } .notfound h1 { font-size:clamp(2.3rem,5vw,4.4rem) } .notfound p { margin:1.2rem 0 2rem } @media(max-width:991.98px) { .navbar { background:rgba(5,11,20,.9); backdrop-filter:blur(15px) } .navbar-collapse { padding:18px 0 } .hero-section .min-vh-100 { padding-top:120px!important; padding-bottom:80px } .dashboard-shell { transform:none } .leakage-grid,.services-grid { grid-template-columns:1fr 1fr } .industry-grid,.pricing-preview-grid,.pricing-grid { grid-template-columns:1fr } .price-card.popular { transform:none } .footer-grid { grid-template-columns:1fr 1fr } .solution-detail,.industry-detail { grid-template-columns:1fr; gap:40px } .solution-detail.reverse .solution-visual,.industry-detail.clinic-detail .industry-copy { order:initial } .addon-grid { grid-template-columns:1fr 1fr } .mini-industries { grid-template-columns:repeat(3,1fr) } .ecosystem-flow { display:grid; grid-template-columns:1fr 1fr } .flow-connector { display:none } .journey-track { grid-template-columns:1fr 1fr; gap:25px } .journey-track:before { display:none } .calculator-copy { border-right:0; border-bottom:1px solid var(--line) } .ecosystem-orbit { margin-top:20px } } @media(max-width:767.98px) { .section-padding { padding:78px 0 } .hero-section h1 { font-size:3.5rem } .hero-proof { gap:.55rem } .metric-row { grid-template-columns:1fr 1fr } .metric-card:last-child { grid-column:1/-1 } .pipeline-board { grid-template-columns:1fr } .dashboard-shell { padding:12px } .leakage-grid,.services-grid,.industry-grid,.addon-grid,.prep-grid { grid-template-columns:1fr } .calculator-copy,.calculator-form { padding:32px 23px } .calc-result { grid-template-columns:1fr } .industry-card { grid-template-columns:auto 1fr } .industry-card>i { display:none } .footer-grid { grid-template-columns:1fr } .footer-bottom { flex-direction:column } .ecosystem-orbit { height:520px } .orbit-a { width:310px; height:310px } .orbit-b { width:210px; height:210px } .ecosystem-node { width:160px } .trust-node { top:10px } .audit-node { top:150px } .fix-node { left:5%; bottom:10px } .solution-detail,.industry-detail { padding:60px 0 } .playbook-card { grid-template-columns:1fr } .use-case-list { grid-template-columns:1fr } .deal-flow { display:grid; grid-template-columns:1fr } .deal-flow>i { transform:rotate(90deg); margin:auto } .mini-industries { grid-template-columns:1fr 1fr } .audit-summary-card { grid-template-columns:1fr } .audit-score { margin:auto } .ecosystem-flow { grid-template-columns:1fr } .intent-grid { grid-template-columns:1fr } .journey-track { grid-template-columns:1fr } .journey-item { display:grid; grid-template-columns:80px 1fr; text-align:left; gap:18px } .journey-item>i { grid-row:1/3; margin:0; width:70px; height:70px } .journey-item>span { left:53px; right:auto } .issue-options { grid-template-columns:1fr } .contact-form,.legal-content { padding:25px } .notfound strong { font-size:7rem } .floating-wa { right:16px; bottom:16px; width:50px; height:50px } } @media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important } } /* ========================================================= NoShowFixer 2.1 production refinements ========================================================= */ html { scroll-padding-top: 92px; overflow-x: hidden; } body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } .skip-link { position: fixed; top: 12px; left: 12px; z-index: 9999; padding: 0.75rem 1rem; color: #03111b; background: var(--cyan); border-radius: 12px; font-weight: 800; transform: translateY(-160%); transition: transform 0.2s ease; } .skip-link:focus { transform: translateY(0); } :focus-visible { outline: 3px solid rgba(65, 230, 208, 0.85); outline-offset: 4px; } .brand-logo-wrap { width: 44px; height: 44px; display: inline-grid; place-items: center; flex: 0 0 auto; padding: 4px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.42); border-radius: 15px; background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(235,246,250,0.94)); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), 0 0 22px rgba(65, 230, 208, 0.08); } .footer-brand .brand-logo-wrap { width: 48px; height: 48px; border-radius: 16px; } .brand-logo { width: 100%; height: 100%; display: block; object-fit: contain; } .orbit-center .brand-logo-wrap { width: 58px; height: 58px; margin: 0 auto 0.45rem; border-radius: 18px; } .playbook-cover .brand-logo-wrap { width: 56px; height: 56px; margin-bottom: 1rem; } .navbar-toggler { filter: none; padding: 0.6rem 0.7rem; } .navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(2); } .journey-track { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; padding-inline: 12px; } .journey-track::before { left: calc(10% + 12px); right: calc(10% + 12px); } .journey-item { min-width: 0; padding-inline: 8px; } .journey-item h4, .journey-item p { overflow-wrap: anywhere; } .journey-item > i { isolation: isolate; box-shadow: inset 0 0 0 1px rgba(65,230,208,0.025), 0 16px 35px rgba(0,0,0,0.15); } .journey-item > i::after { content: ''; position: absolute; inset: 11px; z-index: -1; border-radius: 16px; background: radial-gradient(circle, rgba(65,230,208,0.11), transparent 70%); } img { height: auto; } @media (max-width: 991.98px) { .journey-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; padding-inline: 0; } .journey-track::before { display: none; } } @media (max-width: 767.98px) { .brand-logo-wrap { width: 42px; height: 42px; } .journey-track { grid-template-columns: 1fr; gap: 20px; } .journey-item { display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 16px; align-items: start; padding: 0; text-align: left; } .journey-item > span { top: -6px; left: 53px; right: auto; } .journey-item > i { grid-column: 1; grid-row: 1 / 3; width: 70px; height: 70px; margin: 0; } .journey-item h4 { grid-column: 2; margin: 7px 0 2px; } .journey-item p { grid-column: 2; margin: 0; } }