/* ============================================================ Rabbi IT Firm — redesign.css (Lovable same-to-same) Load AFTER bootstrap.css + style.css + responsive.css. Requires Google Fonts: Fraunces + Inter + JetBrains Mono (add the in base.blade.php ). Accent = purple #833af0 / #7c25ea ; primary = slate #0d121a. ============================================================ */ :root{ --bg:#ffffff; --ink:#0d121a; --ink-2:#151b24; --muted:#646971; --border:#e5e8ec; --secondary:#f6f8fb; --ivory:#fbf8ff; --purple:#833af0; --purple-deep:#7c25ea; --radius:.625rem; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:"Inter",system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg);font-size:16px;line-height:1.6;font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;margin:0} h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif;color:var(--ink);font-weight:500;letter-spacing:-.025em;line-height:1.05;font-optical-sizing:auto;font-variation-settings:"SOFT" 50,"WONK" 0;margin:0} p{margin:0;color:var(--muted)} a{text-decoration:none;color:inherit} ul{margin:0} ::selection{background:var(--purple);color:#fff} .font-display{font-family:"Fraunces",Georgia,serif} .mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;letter-spacing:-.01em} .wrap{max-width:1280px;margin:0 auto;padding:0 1.5rem} .wrap-sm{max-width:1120px;margin:0 auto;padding:0 1.5rem} .eyebrow{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--purple-deep)} .eyebrow.muted{color:var(--muted)} .eyebrow.dark{color:rgba(13,18,26,.8)} .eb-row{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:.85rem} .eb-line{width:24px;height:1px;background:var(--purple);display:inline-block} .hl{color:var(--purple-deep)} .hl-grad{background:linear-gradient(135deg,#a053fd,#5d1fe5);-webkit-background-clip:text;background-clip:text;color:transparent} .lead{font-size:1.125rem;line-height:1.7;color:var(--muted)} .text-purple{color:var(--purple-deep)} .text-muted2{color:var(--muted)} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:"Inter";font-weight:500;font-size:.9rem;line-height:1.2;padding:.62rem 1.3rem;border-radius:9999px;border:1px solid transparent;cursor:pointer;transition:.18s ease;white-space:nowrap} .btn i{font-size:.85em} .btn-primary{background:var(--ink);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.18)} .btn-primary:hover{background:#000;color:#fff;transform:translateY(-1px)} .btn-outline{background:#fff;color:var(--ink);border-color:var(--border)} .btn-outline:hover{border-color:rgba(131,58,240,.5);color:var(--ink)} .btn-ghost{background:transparent;color:var(--ink);border-radius:.55rem;padding:.6rem .9rem} .btn-ghost:hover{background:var(--secondary);color:var(--ink)} .btn-grad{background:linear-gradient(90deg,#7c3aed,#c026d3);color:#fff} .btn-grad:hover{opacity:.95;color:#fff;transform:translateY(-1px)} .btn-lg{padding:.74rem 1.7rem;font-size:.95rem} .btn-sm{padding:.4rem .9rem;font-size:.8rem} .linkarrow{color:var(--ink);font-weight:500;display:inline-flex;align-items:center;gap:.4rem} .linkarrow i{transition:.18s} .linkarrow:hover i{transform:translateX(3px)} /* header */ .hdr{position:sticky;top:0;z-index:1000;width:100%;border-bottom:1px solid rgba(229,232,236,.7);background:rgba(255,255,255,.8);backdrop-filter:saturate(180%) blur(14px)} .hdr-in{display:flex;align-items:center;justify-content:space-between;height:90px} .logo{display:flex;align-items:center;gap:.6rem;font-family:"Fraunces";font-weight:600;font-size:1.32rem;color:var(--ink)} .logo .mk{width:34px;height:34px;border-radius:9px;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:"Inter";font-weight:700;font-size:1rem} .nav{display:flex;align-items:center;gap:.25rem} .nav a{position:relative;border-radius:.5rem;padding:.5rem .75rem;font-size:.9rem;font-weight:500;color:var(--muted);transition:.15s} .nav a:hover{color:var(--ink)} .nav a.active{color:var(--ink)} .nav a.active::after{content:"";position:absolute;left:.75rem;right:.75rem;bottom:1px;height:1px;background:var(--purple)} @media(max-width:860px){.nav{display:none}} /* sections */ .sec{padding:5.5rem 0;position:relative} .sec-sm{padding:3.5rem 0;position:relative} .bg-secondary{background:var(--secondary)} .bg-ivory{background:var(--ivory)} .bg-dark{background:var(--ink);color:#aeb8c7} .bg-dark h1,.bg-dark h2,.bg-dark h3{color:#fff} .border-t{border-top:1px solid var(--border)} .border-b{border-bottom:1px solid var(--border)} .rel{position:relative} .ov-hidden{overflow:hidden} .z1{position:relative;z-index:1} .grid-bg{background-image:linear-gradient(to right,rgba(13,18,26,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(13,18,26,.05) 1px,transparent 1px);background-size:56px 56px} .grid-bg-abs{position:absolute;inset:0;z-index:0;background-image:linear-gradient(to right,rgba(13,18,26,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(13,18,26,.05) 1px,transparent 1px);background-size:56px 56px;opacity:.6;-webkit-mask-image:radial-gradient(ellipse at top,#000,transparent 65%);mask-image:radial-gradient(ellipse at top,#000,transparent 65%)} .glow{position:absolute;border-radius:9999px;filter:blur(90px);background:rgba(131,58,240,.16);pointer-events:none;z-index:0} .glow-strong{filter:blur(120px);background:rgba(131,58,240,.2)} /* cards */ .card{background:#fff;border:1px solid var(--border);border-radius:1rem;padding:2rem;transition:.2s ease;position:relative} .card-hover:hover{transform:translateY(-3px);border-color:rgba(131,58,240,.45);box-shadow:0 24px 60px -30px rgba(13,18,26,.22)} .shadow-soft{box-shadow:0 1px 0 rgba(0,0,0,.03),0 30px 80px -40px rgba(0,0,0,.18)} .rounded-2xl{border-radius:1rem} .rounded-xl{border-radius:.85rem} .rounded-3xl{border-radius:1.5rem} /* icon tints */ .ic{width:44px;height:44px;border-radius:.75rem;display:grid;place-items:center;font-size:1.15rem;flex:0 0 auto} .ic-sm{width:36px;height:36px;border-radius:.6rem;font-size:.95rem} .ic-circle{border-radius:9999px;border:1px solid rgba(131,58,240,.4);background:rgba(131,58,240,.1);color:var(--purple-deep)} .t-purple{background:rgba(131,58,240,.1);color:var(--purple-deep)} .t-violet{background:rgba(139,92,246,.1);color:#7c3aed} .c-violet{color:#7c3aed} .t-amber{background:rgba(245,158,11,.1);color:#d97706} .c-amber{color:#d97706} .t-fuchsia{background:rgba(217,70,239,.1);color:#c026d3} .c-fuchsia{color:#c026d3} .t-sky{background:rgba(14,165,233,.1);color:#0284c7} .c-sky{color:#0284c7} .t-blue{background:rgba(59,130,246,.1);color:#2563eb} .c-blue{color:#2563eb} .t-emerald{background:rgba(16,185,129,.1);color:#059669} .c-emerald{color:#059669} .t-indigo{background:rgba(99,102,241,.1);color:#4f46e5} .c-indigo{color:#4f46e5} .t-rose{background:rgba(244,63,94,.1);color:#e11d48} .c-rose{color:#e11d48} .t-slate{background:#f1f5f9;color:#334155} /* stat strip */ .statcard{display:flex;align-items:center;gap:1rem;border:1px solid var(--border);background:#fff;border-radius:1rem;padding:1.25rem 1.3rem} .stat-k{font-family:"Fraunces";font-weight:500;font-size:1.6rem;color:var(--ink);line-height:1} .stat-v{margin-top:.15rem;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} .chip-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.75rem;font-size:.78rem;color:var(--muted)} .chip-row span{display:inline-flex;align-items:center;gap:.45rem} .chip-row i{color:var(--purple-deep);font-size:.85rem} .hero-badge{display:inline-flex;align-items:center;gap:.6rem;border:1px solid var(--border);background:#fff;border-radius:9999px;padding:.4rem .9rem;box-shadow:0 1px 0 rgba(0,0,0,.02)} .hero-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--purple)} /* category card */ .cat{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border);background:#fff;border-radius:1rem;padding:1.25rem;transition:.2s} .cat:hover{transform:translateY(-2px);border-color:rgba(131,58,240,.4);box-shadow:0 20px 50px -30px rgba(13,18,26,.2)} .cat .ttl{font-weight:500;color:var(--ink)} .cat .sub{font-size:.78rem;color:var(--muted)} .cat .cnt{font-family:"Fraunces";font-weight:500;font-size:1.6rem} .trustbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem 2rem;border:1px solid var(--border);background:#fff;border-radius:1rem;padding:1.25rem 1.5rem;font-size:.88rem;color:var(--muted)} .trustbar span{display:inline-flex;align-items:center;gap:.5rem} .trustbar i{color:var(--purple-deep)} /* pub card */ .pub{border:1px solid var(--border);background:#fff;border-radius:.85rem;padding:1.5rem;transition:.2s;height:100%} .pub:hover{transform:translateY(-4px);border-color:rgba(131,58,240,.5);box-shadow:0 24px 60px -30px rgba(13,18,26,.25)} .verified{display:inline-flex;align-items:center;gap:.4rem;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)} .verified i{color:var(--purple-deep)} .from-lab{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)} .price{font-family:"Fraunces";font-weight:500;font-size:1.85rem;color:var(--ink);line-height:1} .ministat{text-align:center} .ministat .v{font-family:"Fraunces";font-weight:600;font-size:.95rem;color:var(--ink)} .ministat .k{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} /* journey hairline grid */ .journey{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:1rem;overflow:hidden} .journey>div{background:#fff;padding:2rem} .journey .n{font-family:"JetBrains Mono";font-size:.75rem;color:var(--purple-deep)} @media(max-width:768px){.journey{grid-template-columns:1fr}} /* numbered circle step (services/how) */ .numc{width:40px;height:40px;border-radius:9999px;border:1px solid var(--border);background:#fff;display:grid;place-items:center;font-family:"JetBrains Mono";font-size:.78rem;color:var(--purple-deep)} /* dashboard mock */ .mock{border:1px solid var(--border);background:#fff;border-radius:1rem;padding:1.75rem;box-shadow:0 30px 80px -40px rgba(13,18,26,.25);position:relative} .mock-row{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border);background:rgba(246,248,251,.6);border-radius:.6rem;padding:.6rem .75rem;font-size:.88rem} .badge-pct{border-radius:9999px;border:1px solid rgba(131,58,240,.4);background:rgba(131,58,240,.1);color:var(--purple-deep);padding:.2rem .6rem;font-size:11px;font-weight:600} .mock-cell{border:1px solid var(--border);background:rgba(246,248,251,.5);border-radius:.6rem;padding:.75rem;text-align:center} .mock-cell .v{font-family:"Fraunces";font-weight:500;font-size:1.25rem} .mock-cell .k{margin-top:.1rem;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} /* quote/testimonial */ .tcard{border:1px solid var(--border);background:#fff;border-radius:1rem;padding:1.75rem;height:100%} .stars{color:var(--purple-deep);display:flex;gap:.15rem;font-size:.8rem} .tquote{font-family:"Fraunces";font-weight:400;font-size:1.12rem;line-height:1.45;color:var(--ink)} /* final CTA */ .cta-card{position:relative;overflow:hidden;border:1px solid rgba(131,58,240,.3);border-radius:28px;background:var(--ivory);padding:4rem 1.5rem;text-align:center} /* footer */ .ft{position:relative;overflow:hidden;background:#0b1024;color:#cbd5e1} .ft-glow{position:absolute;inset:0;opacity:.7;pointer-events:none;background:radial-gradient(60% 80% at 80% 50%,rgba(120,60,180,.35) 0%,rgba(11,16,36,0) 60%),radial-gradient(50% 70% at 20% 100%,rgba(60,80,200,.25) 0%,rgba(11,16,36,0) 60%)} .ft-grid{position:absolute;inset:0;opacity:.08;pointer-events:none;background-image:linear-gradient(to right,#fff 1px,transparent 1px),linear-gradient(to bottom,#fff 1px,transparent 1px);background-size:64px 64px} .ft h4{font-family:"Fraunces";font-weight:700;font-size:1.1rem;color:#fff;margin-bottom:1.1rem} .ft a{color:#94a3b8;font-size:.9rem;transition:.15s} .ft a:hover{color:#fff} .ft p{color:#94a3b8;font-size:.9rem;line-height:1.7} .ft-news{display:flex;align-items:center;gap:.5rem;border-radius:9999px;background:#161b34;padding:.4rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);max-width:340px} .ft-news input{flex:1;background:transparent;border:0;padding:.5rem .9rem;font-size:.88rem;color:#fff;outline:none} .ft-news input::placeholder{color:#64748b} .ft-sub{border-radius:9999px;background:#3b82f6;color:#fff;border:0;padding:.5rem 1.2rem;font-size:.85rem;font-weight:600;cursor:pointer} .ft-sub:hover{background:#2563eb} .pay{border-radius:.3rem;background:rgba(255,255,255,.95);color:#1e293b;padding:.25rem .5rem;font-size:10px;font-weight:700} /* marketplace */ .mkt-hero{overflow:hidden;border:1px solid var(--border);border-radius:1.5rem;background:linear-gradient(135deg,rgba(245,243,255,.6),#fff 55%,rgba(255,251,235,.4));padding:2.5rem} .fchip{display:inline-flex;align-items:center;gap:.4rem;border-radius:9999px;padding:.3rem .75rem;font-size:.78rem;font-weight:500} .fc-emerald{background:#ecfdf5;color:#059669} .fc-sky{background:#f0f9ff;color:#0284c7} .fc-slate{background:#f1f5f9;color:#334155} .fc-amber{background:#fffbeb;color:#d97706} .hstat{border:1px solid var(--border);background:rgba(255,255,255,.8);border-radius:1rem;padding:1.25rem;backdrop-filter:blur(4px)} .hstat .v{font-family:"Fraunces";font-weight:600;font-size:1.9rem;color:var(--ink)} .hstat .k{margin-top:.2rem;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .invbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;border:1px solid var(--border);background:#fff;border-radius:1rem;padding:.75rem} .srctab{display:inline-flex;align-items:center;gap:.5rem;border-radius:9999px;padding:.45rem 1rem;font-size:.85rem;font-weight:500;color:var(--muted);border:0;background:transparent;cursor:pointer} .srctab .b{margin-left:.25rem;border-radius:9999px;background:#eef0f4;padding:.05rem .5rem;font-size:.72rem;color:var(--ink)} .srctab.active{background:#ede9fe;color:#6d28d9} .srctab.active .b{background:#ddd6fe} .srctab.gradient{background:linear-gradient(90deg,#7c3aed,#c026d3);color:#fff} .srctab.gradient .b{background:rgba(255,255,255,.2);color:#fff} .pricenotice{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;border:1px solid #fde68a;background:rgba(255,251,235,.7);border-radius:1rem;padding:1rem} .pricenotice .t{display:inline-flex;align-items:center;gap:.5rem;font-size:.88rem;font-weight:500;color:#78350f} .selpill{border:1px solid var(--border);background:#fff;border-radius:9999px;padding:.5rem 1rem;font-size:.85rem;color:var(--muted);display:inline-flex;align-items:center;gap:.4rem} .searchpill{position:relative} .searchpill i{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);color:var(--muted);font-size:.85rem} .searchpill input{width:100%;border:1px solid var(--border);border-radius:9999px;padding:.55rem .9rem .55rem 2.2rem;font-size:.88rem;outline:none} .mtable{border:1px solid var(--border);border-radius:1rem;overflow:hidden;background:#fff} .mtable table{width:100%;border-collapse:collapse} .mtable th{background:rgba(243,245,248,.5);text-align:left;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:.85rem .9rem;white-space:nowrap} .mtable td{border-top:1px solid var(--border);padding:.7rem .9rem;font-size:.88rem;vertical-align:middle} .mtable tr:hover td{background:rgba(243,245,248,.4)} .av-grad{width:36px;height:36px;border-radius:.55rem;background:linear-gradient(135deg,#8b5cf6,#d946ef);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.85rem;flex:0 0 auto} .badge-new{border-radius:.3rem;background:#d1fae5;color:#047857;padding:.1rem .4rem;font-size:10px;font-weight:700;margin-left:.4rem;vertical-align:middle} .mp{display:inline-flex;min-width:2.25rem;justify-content:center;align-items:center;border-radius:.375rem;padding:.2rem .5rem;font-size:.72rem;font-weight:600} .mp-e{background:#d1fae5;color:#047857} .mp-a{background:#fef3c7;color:#b45309} .mp-s{background:#f1f5f9;color:#334155} .nbadge{display:inline-block;border:1px solid var(--border);background:var(--secondary);border-radius:.3rem;padding:.08rem .4rem;font-size:10px;color:var(--muted);margin:.05rem} /* contact form */ .field label{display:block;font-size:.82rem;font-weight:600;color:var(--ink-2);margin-bottom:.35rem} .field input,.field textarea{width:100%;border:1px solid var(--border);border-radius:.6rem;padding:.7rem .9rem;font-size:.92rem;color:var(--ink);font-family:inherit;outline:none} .field input:focus,.field textarea:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(131,58,240,.12)} .faq{border-bottom:1px solid var(--border);padding:1.1rem 0} .faq .q{font-family:"Fraunces";font-weight:500;font-size:1.05rem;color:var(--ink)} /* utils */ .tc{text-align:center} .mx-auto{margin-left:auto;margin-right:auto} .mt1{margin-top:.5rem}.mt2{margin-top:1rem}.mt3{margin-top:1.5rem}.mt4{margin-top:2rem}.mt5{margin-top:2.5rem}.mt6{margin-top:3rem}.mt8{margin-top:4rem} .mb2{margin-bottom:1rem}.mb3{margin-bottom:1.5rem}.mb4{margin-bottom:2rem}.mb5{margin-bottom:2.5rem} .gap2{gap:.5rem}.gap3{gap:.75rem}.gaprow{display:flex;flex-wrap:wrap;gap:.6rem} .flex{display:flex}.aic{align-items:center}.jcb{justify-content:space-between}.jcc{justify-content:center}.fwrap{flex-wrap:wrap}.col{flex-direction:column} .h1{font-size:clamp(2.6rem,6vw,5.2rem);font-weight:500;line-height:1.02} .h2{font-size:clamp(1.9rem,3.6vw,3rem);font-weight:500} .h3{font-size:1.5rem;font-weight:500} .maxw-4{max-width:56rem}.maxw-3{max-width:48rem}.maxw-2{max-width:42rem}.maxw-xl{max-width:36rem}.maxw-lg{max-width:32rem} .page{display:none}.page.active{display:block} .divider-top{border-top:1px solid var(--border)} /* ---- header: services dropdown (CSS hover) + mobile menu ---- */ .navdrop{position:relative} .navdrop > a{position:relative;border-radius:.5rem;padding:.5rem .75rem;font-size:.9rem;font-weight:500;color:var(--muted);transition:.15s;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem} .navdrop:hover > a{color:var(--ink)} .navdrop-menu{position:absolute;top:calc(100% + 4px);left:0;min-width:210px;background:#fff;border:1px solid var(--border);border-radius:.7rem;box-shadow:0 24px 50px -24px rgba(13,18,26,.25);padding:.4rem;display:none;z-index:1001} .navdrop:hover .navdrop-menu{display:block} .navdrop-menu a{display:block;padding:.5rem .7rem;border-radius:.45rem;font-size:.88rem;font-weight:500;color:var(--ink)} .navdrop-menu a:hover{background:var(--secondary)} .hdr-burger{display:none;background:transparent;border:0;font-size:1.4rem;line-height:1;color:var(--ink);cursor:pointer;padding:.25rem .4rem} .hdr-mobile{display:none;border-top:1px solid var(--border);background:#fff;padding:.4rem 1.5rem 1.1rem} .hdr-mobile a{display:block;padding:.62rem .15rem;font-size:.95rem;font-weight:500;color:var(--ink);border-bottom:1px solid var(--border)} .hdr-mobile a:last-child{border-bottom:0} .hdr-mobile .sub{padding-left:1rem;color:var(--muted);font-size:.9rem} @media(max-width:860px){.hdr-burger{display:inline-flex}.hdr-mobile.open{display:block}}