/* Scaly Home — ported 1:1 from Claude Design "Scaly Home.dc.html" (2026-09-08) State classes on : .m (mobile ≤860px or ?mobile) · .top (scrollY>8) · .scrolled (scrollY>640) · .menu (mobile menu open) */ @font-face{font-family:'Rubik';src:url('assets/Rubik-Variable.ttf') format('truetype');font-weight:300 900;font-display:swap} @font-face{font-family:'Gveret Levin';src:url('assets/GveretLevin-Regular.ttf') format('truetype');font-weight:400;font-display:swap} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;background:#fff;color:#000000;font-family:'Rubik',system-ui,sans-serif;direction:rtl;overflow-x:hidden} html.menu body{overflow:hidden} *{box-sizing:border-box} [hidden]{display:none!important} a{color:#C43D68;text-decoration:none} a:hover{color:#A82F53} button,input{font-family:inherit} img{max-width:100%} ::selection{background:#FCE9F0;color:#000000} a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #C43D68;outline-offset:3px;border-radius:8px} h1,h2,h3{text-wrap:balance} input::placeholder{color:#8A94A3} @keyframes float{0%,100%{translate:0 0}50%{translate:0 -6px}} @keyframes wgSpin{to{transform:rotate(360deg)}} @keyframes wgSpinRev{to{transform:rotate(-360deg)}} @keyframes wgBlink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(228,138,169,.5)}50%{opacity:.35;box-shadow:0 0 0 4px rgba(228,138,169,0)}} @media (prefers-reduced-motion:reduce){#what *{animation:none!important}} @keyframes dashflow{to{stroke-dashoffset:-150}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} [data-reveal]{opacity:0;transform:translateY(10px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} [data-reveal].in{opacity:1;transform:none} [data-reveal].in [data-underline]{transform:scaleX(1)!important} @media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}} .page{min-height:100vh;background:#fff;color:#000000;font-family:'Rubik',system-ui,sans-serif} .wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,40px)} .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:500;letter-spacing:.02em;color:#A82F53} .eyebrow::before{content:"";display:inline-block;width:20px;height:1px;background:#C43D68} .eyebrow--dark{color:#E48AA9} .eyebrow--dark::before{background:#E48AA9} .eyebrow--ink::before{background:#A82F53} .h2{margin:16px 0 0;font-size:clamp(28px,4vw,44px);line-height:1.18;font-weight:600;letter-spacing:-0.015em;color:#000000;text-wrap:balance} .lead{margin:14px auto 0;font-size:clamp(16px,1.2vw,17px);line-height:1.65;color:#5B6675;text-wrap:pretty} .muted{color:#5B6675} .center{text-align:center} .glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 10% 10%,rgba(196,61,104,.22),transparent 60%),radial-gradient(ellipse 60% 55% at 85% 30%,rgba(228,138,169,.12),transparent 62%),radial-gradient(ellipse 65% 60% at 20% 90%,rgba(150,80,125,.15),transparent 62%),radial-gradient(ellipse 60% 55% at 90% 95%,rgba(196,61,104,.10),transparent 62%);background-attachment:fixed} .icon-wa{width:1em;height:1em;fill:currentColor} .chk{flex:0 0 auto} /* ---------- header ---------- */ .hdr{position:fixed;top:0;left:0;right:0;z-index:70;width:100%;max-width:1200px;margin:0 auto;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid transparent;border-radius:0;box-shadow:none;transition:max-width .35s cubic-bezier(.2,.7,.2,1),top .35s cubic-bezier(.2,.7,.2,1),border-radius .35s,border-color .3s,box-shadow .3s} html.top:not(.menu) .hdr{border-color:#E6EAF0;box-shadow:0 12px 30px -18px rgba(0,0,0,.28)} html.top:not(.m):not(.menu) .hdr{top:16px;max-width:1000px;border-radius:12px} html.menu .hdr{background:#fff} .hdr nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px;padding:0 clamp(20px,4vw,40px);transition:height .3s,padding .3s} html.top:not(.m) .hdr nav{height:60px;padding:0 12px} .hdr .logo{display:flex;align-items:center;flex-shrink:0} .hdr .logo img{height:26px;width:auto;display:block} .hdr-links{display:flex;align-items:center;gap:6px} html.m .hdr-links{display:none} .hdr-links a{display:inline-flex;align-items:center;height:38px;padding:0 14px;border-radius:8px;font-size:15px;color:#3A4453;transition:background .2s,color .2s} .hdr-links a:hover{background:#F5F7FA;color:#000000} .hdr-links .cta{margin-inline-start:8px;height:40px;padding:0 18px;background:#000000;color:#fff;font-weight:600;transition:background .2s} .hdr-links .cta:hover{background:#A82F53;color:#fff} .burger{display:none;width:44px;height:44px;border-radius:8px;border:1px solid #E6EAF0;background:#fff;place-items:center;cursor:pointer;padding:0} html.m .burger{display:grid} .burger>span{display:grid;gap:5px} .burger i{display:block;width:18px;height:2px;background:#000000;border-radius:2px;transition:transform .3s,opacity .2s} html.menu .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)} html.menu .burger i:nth-child(2){opacity:0} html.menu .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .hdr-spacer{height:68px} .menu-ov,.menu-dlg{display:none} html.m.menu .menu-ov{display:block;position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.35);animation:fadeIn .2s ease both} html.m.menu .menu-dlg{display:grid;position:fixed;top:68px;right:0;left:0;z-index:65;background:#fff;border-bottom:1px solid #EEF1F5;border-radius:0 0 16px 16px;box-shadow:0 24px 48px -24px rgba(0,0,0,.35);gap:8px;padding:8px 16px calc(16px + env(safe-area-inset-bottom));max-height:calc(100dvh - 68px);overflow-y:auto;animation:menuIn .25s cubic-bezier(.2,.7,.2,1) both} .menu-dlg nav{display:grid} .menu-dlg nav a{display:flex;align-items:center;justify-content:space-between;min-height:54px;padding:0 8px;border-bottom:1px solid #F0F2F5;font-size:17px;font-weight:500;color:#000000} .menu-dlg nav a:last-child{border-bottom:0} .menu-dlg nav a:hover{color:#A82F53} .menu-ctas{display:grid;gap:10px;padding-top:8px} .btn-pink{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;border-radius:8px;background:#C43D68;color:#fff;font-weight:600;font-size:17px;transition:background .2s} .btn-pink:hover{background:#A82F53;color:#fff} .btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:8px;border:1px solid #D9DFE7;background:#fff;color:#000000;font-weight:600;font-size:16px;transition:border-color .2s,background .2s} .btn-outline:hover{border-color:#000000;color:#000000} .btn-wa{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 22px;border-radius:8px;background:#25D366;color:#fff;border:1px solid #25D366;font-weight:600;font-size:17px;transition:background .2s,border-color .2s} .btn-wa:hover{background:#1EBE5A;border-color:#1EBE5A;color:#fff} /* ---------- hero ---------- */ .hero{position:relative;overflow:hidden;background:#fff} .hero-grid{position:relative;width:100%;max-width:1200px;margin:0 auto;padding:clamp(28px,5vw,72px) clamp(20px,4vw,40px) 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,4vw,64px);align-items:center;animation:rise .7s ease both} .hero-title{grid-column:1;grid-row:1} .hero-body{grid-column:1;grid-row:2} .hero h1{margin:16px 0 0;font-size:clamp(30px,8.6vw,60px);line-height:1.1;font-weight:600;letter-spacing:-0.02em;color:#000000;text-wrap:balance} .hero-body p{margin:20px 0 0;font-size:clamp(16px,1.4vw,18px);line-height:1.6;color:#5B6675;max-width:520px;text-wrap:pretty} .hero-ctas{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px;max-width:520px} .hero-ctas a{flex:0 1 auto;white-space:nowrap} .hero-ctas .btn-pink{padding:0 26px} .hero-phone-col{position:relative;display:flex;justify-content:center;align-items:center;padding:clamp(24px,3vw,44px) 0 clamp(32px,4vw,56px);perspective:1600px;grid-column:2;grid-row:1 / span 2} .hero-disc{position:absolute;width:min(72%,420px);aspect-ratio:1;border-radius:50%;background:#F7F0F3} .hero-phone{position:relative;width:min(84%,320px);aspect-ratio:320/650;transform:rotateY(-9deg) rotateX(3deg) rotate(3.5deg);transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.7,.2,1);animation:float 7s ease-in-out infinite 1s} .hero-phone:hover{transform:rotateY(-4deg) rotateX(1deg) rotate(1deg) scale(1.03)} .hero-phone .shadow{position:absolute;inset:8% 4% -6%;border-radius:50%;filter:blur(38px);background:rgba(0,0,0,.28)} html.m .hero-grid{grid-template-columns:minmax(0,1fr);gap:4px 0} html.m .hero-body{grid-row:3} html.m .hero-body p{margin:0} html.m .hero-ctas a{flex:1 1 100%} html.m .hero-phone-col{grid-column:1;grid-row:2;padding:4px 0 20px} html.m .hero-phone{width:min(58%,230px)} /* phone device (shared by hero + psychology) */ .dev{position:relative;height:100%;border-radius:13.5%/6.6%;padding:3px;background:linear-gradient(150deg,#F0F1F3 0%,#8E9299 14%,#3E434B 32%,#6E737B 50%,#2C3037 70%,#9BA0A7 88%,#E8E9EB 100%);box-shadow:0 40px 70px -40px rgba(0,0,0,.55),0 2px 4px rgba(255,255,255,.5) inset} .dev-bezel{position:relative;height:100%;border-radius:12.6%/6.2%;padding:7px;background:#050505;box-shadow:0 0 0 1px rgba(255,255,255,.06) inset} .dev-screen{position:relative;height:100%;border-radius:10.6%/5.3%;overflow:hidden;background:#fff;font-size:clamp(9px,1.15vw,11.5px)} .dev-scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none} .dev-scroll::-webkit-scrollbar{display:none} .dev-scroll img,.psy-screen img{display:block;width:100%;height:auto;margin-bottom:-1px} .dev-scroll img:first-child,.psy-screen img:first-child{padding-top:1.9em;background:#fff} .dev-island{position:absolute;top:0;left:0;right:0;height:3em;display:flex;align-items:flex-start;justify-content:center;padding-top:.5em} .dev-island span{width:30%;height:1.5em;border-radius:999px;background:#050505;box-shadow:0 2px 8px rgba(0,0,0,.25)} .dev-gloss{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.1) 22%,rgba(255,255,255,0) 42%)} .dev-btn{position:absolute;width:2px;border-radius:2px;background:linear-gradient(#8E9299,#3E434B)} .dev-btn.b1{top:19%;left:-2px;height:6%} .dev-btn.b2{top:28%;left:-2px;height:9%} .dev-btn.b3{top:24%;right:-2px;height:12%} /* price strip */ .strip{position:relative;margin-top:clamp(24px,4vw,48px);border-top:1px solid #E6EAF0} .strip-in{width:100%;max-width:1200px;margin:0 auto;padding:clamp(20px,2.6vw,30px) clamp(20px,4vw,40px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px} .strip-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;justify-content:space-between} .strip-price .big{font-size:clamp(30px,3.4vw,46px);font-weight:600;line-height:1;color:#000000;letter-spacing:-0.03em} .strip-price .vat{font-size:16px;color:#5B6675} .pill{padding:5px 12px;border-radius:999px;background:#FCE9F0;color:#A82F53;font-size:14px;font-weight:500} .strip ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:15px;color:#3A4453;flex-direction:row} .strip li{display:inline-flex;align-items:center;gap:8px} html.m .strip-in,html.m .strip-price{justify-content:center} html.m .strip ul{flex-direction:column} /* the 93px strip is not adjacent to another dark section, so it carries its own copy of the wash rather than a viewport slice, which on a band this thin is flat */ /* ---------- 03 problems ---------- */ .sec{padding:clamp(56px,7vw,96px) 0} .sec--grey{background:#F5F7FA} .sec--white{background:#fff} .sec-head{max-width:640px;margin:0 auto;text-align:center} .sec-head .lead{max-width:500px} .problems{margin-top:clamp(32px,4vw,56px);max-width:900px;margin-inline:auto;display:grid;gap:10px} .problem{background:#fff;border:1px solid #E6EAF0;border-radius:14px;padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,26px);display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,2vw,24px);align-items:center;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease} .problem:hover{transform:translateX(-6px);border-color:#E48AA9;box-shadow:0 16px 30px -22px rgba(0,0,0,.4)} .problem .ic{flex:0 0 auto;width:clamp(40px,5vw,46px);height:clamp(40px,5vw,46px);border-radius:12px;background:#FCE9F0;color:#A82F53;display:grid;place-items:center;align-self:start} .problem .ic svg{width:22px;height:22px} .problem .txt{display:grid;gap:5px;min-width:0} .problem h3{margin:0;font-size:17px;font-weight:600;line-height:1.35;color:#000000;text-wrap:balance} .problem p{margin:0;font-size:15px;line-height:1.6;color:#5B6675;text-wrap:pretty} .problem .n{align-self:start;font-size:12px;font-weight:500;color:#8A94A3;letter-spacing:.06em} .problems-outro{margin:clamp(24px,3vw,36px) auto 0;max-width:520px;text-align:center;font-size:clamp(16px,1.3vw,18px);line-height:1.65;color:#000000;text-wrap:pretty} .problems-outro b{color:#A82F53;font-weight:500} .ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} /* ---------- 04 benefits ---------- */ .benefits-head{max-width:720px;margin:0 auto;text-align:center} .benefits-head .lead{max-width:520px} .benefits{position:relative;margin:clamp(32px,4vw,56px) auto 0;max-width:1000px} .benefits-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);align-items:stretch} html.m .benefits-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))} .benefit{position:relative;background:#fff;border:1px solid #E6EAF0;border-radius:16px;padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease,background .3s ease} .benefit:hover{transform:scale(1.03);box-shadow:0 20px 36px -22px rgba(0,0,0,.35);border-color:#E48AA9;background:#FBFBFD} .benefit h3{margin:0 0 10px;font-size:clamp(18px,1.7vw,21px);font-weight:600;line-height:1.3;color:#000000;text-wrap:balance} .benefit [data-underline]{display:block;width:44px;height:3px;border-radius:2px;background:#C43D68;margin-bottom:14px;transform-origin:right center;transform:scaleX(0);transition:transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0s)} .benefit p{margin:0 0 22px;font-size:15px;line-height:1.65;color:#5B6675;text-wrap:pretty} .benefit ul{list-style:none;margin:auto 0 0;padding:0;display:grid;gap:11px} .benefit li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.5;color:#3A4453} .dot{flex:0 0 auto;margin-top:3px;width:16px;height:16px;border-radius:50%;background:#FCE9F0;display:grid;place-items:center} .dot::after{content:"";width:7px;height:7px;border-radius:50%;background:#A82F53} /* ---------- 05 process ---------- */ #how{scroll-margin-top:80px;overflow:hidden} #how .sec-head .lead{margin-top:16px;max-width:460px;font-size:clamp(16px,1.3vw,18px)} .steps{position:relative;margin:clamp(32px,4vw,56px) auto 0;max-width:1000px;height:860px;display:block;gap:16px} html.m .steps{height:auto;display:grid;gap:48px} .steps-path{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible} .steps-path path{fill:none;stroke:#B9C2CE;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;animation:dashflow 3s linear infinite} .steps-path--d path{stroke-dasharray:8 7} .steps-path--m path{stroke-dasharray:7 7} .steps-path--m{display:none} html.m .steps-path--d{display:none} html.m .steps-path--m{display:block} .step{position:absolute;width:31%;margin:0;min-height:0;transition:transform .35s ease;z-index:1} .step:hover{transform:scale(1.04)!important;z-index:3} .step:nth-child(odd){transform:rotate(5deg)} .step:nth-child(even){transform:rotate(-5deg)} .step.s1{top:0;right:8%;left:auto} .step.s2{top:200px;left:10%;right:auto} .step.s3{top:400px;right:12%;left:auto} .step.s4{top:600px;left:6%;right:auto} html.m .step{position:relative;top:auto;left:auto;right:auto;width:min(80%,320px)} html.m .step:nth-child(odd){transform:rotate(3deg);margin:0 0 0 auto} html.m .step:nth-child(even){transform:rotate(-3deg);margin:0 auto 0 0} .step-card{background:#fff;border:1px solid #EEF1F5;border-radius:20px;padding:8px;box-shadow:0 14px 26px -18px rgba(0,0,0,.35);display:flex;flex-direction:column} .step-pin{display:grid;place-items:center;padding:8px 0 10px} .step-pin svg{width:22px;height:22px} .step-body{flex:1;border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:8px;border:1px solid} .step-top{display:flex;align-items:center;justify-content:space-between;gap:8px} .step-n{font-size:clamp(22px,2vw,26px);font-weight:600;line-height:1;letter-spacing:-.02em} .step-badge{padding:4px 10px;border-radius:999px;background:#fff;border:1px solid;font-size:12px;font-weight:500;color:#3A4453;white-space:nowrap} .step h3{margin:0;font-size:clamp(16px,1.6vw,18px);font-weight:600;line-height:1.3;color:#000000;text-wrap:balance} .step p{margin:0;font-size:clamp(14px,1.3vw,15px);line-height:1.6;color:#5B6675;text-wrap:pretty} .step--pink{--pin:#A82F53;--tint:#FCE9F0;--tb:#F6D6E1} .step--ink{--pin:#000000;--tint:#F5F7FA;--tb:#E6EAF0} .step .step-pin svg{fill:var(--pin)} .step .step-body{background:var(--tint);border-color:var(--tb)} .step .step-n{color:var(--pin)} .step .step-badge{border-color:var(--tb)} /* ---------- 06 psychology ---------- */ .psy{position:relative;background:#000000;color:#fff} .psy-intro{position:relative;width:100%;max-width:1200px;margin:0 auto;padding:clamp(56px,8vw,112px) clamp(20px,4vw,40px) clamp(20px,3vw,40px);text-align:center} html.m .psy-intro{padding:28px 20px 4px} .psy-intro h2{margin:16px auto 0;max-width:720px;font-size:clamp(30px,4.4vw,52px);line-height:1.12;font-weight:600;letter-spacing:-0.02em;text-wrap:balance} .psy-intro p{margin:18px auto 0;max-width:460px;font-size:clamp(16px,1.3vw,18px);line-height:1.65;color:#A5AEBB;text-wrap:pretty} .psy-intro [data-underline]{display:block;width:56px;height:3px;border-radius:2px;background:#E48AA9;margin:18px auto 0;transform-origin:center;transform:scaleX(0);transition:transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0s)} .psy-line{display:block;width:1px;height:44px;margin:20px auto 0;background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.5))} html.m .psy-line{height:14px;margin-top:12px} .psy-track{height:960vh} html.m .psy-track{height:570vh} .psy-sticky{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden} .psy-stage{height:100%;width:100%;max-width:1200px;margin:0 auto;padding:clamp(88px,11vh,116px) clamp(20px,4vw,40px) clamp(12px,2vh,24px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:minmax(0,1fr);gap:clamp(16px,3vw,48px);align-items:center;min-height:0} html.m .psy-stage{padding:76px 16px 84px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:4px} .psy-text{position:relative;height:100%;min-height:0;grid-column:1;grid-row:1;min-width:0} html.m .psy-text{min-height:132px} .psy-item{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:start;gap:clamp(6px,1.3vh,12px);opacity:0;transform:translateY(24px);will-change:opacity,transform;pointer-events:none} .psy-item:first-child{opacity:1;transform:none} html.m .psy-item{align-items:center;text-align:center} .psy-tag{display:flex;align-items:center;justify-content:flex-start;gap:12px;font-size:13px;font-weight:500;letter-spacing:.02em;color:#E48AA9} html.m .psy-tag{justify-content:center} .psy-tag i{width:28px;height:1px;background:#E48AA9} .psy-item h3{margin:0;font-size:clamp(22px,min(3.2vw + 8px,5vh),40px);line-height:1.15;font-weight:600;letter-spacing:-.01em;text-wrap:balance;max-width:16ch} html.m .psy-item h3{max-width:none} .psy-item .l{margin:0;font-size:clamp(16px,min(1.3vw,2.6vh),18px);line-height:1.5;color:#fff;max-width:420px;text-wrap:pretty} .psy-item .d{margin:0;font-size:clamp(14px,2.2vh,15px);line-height:1.6;color:#A5AEBB;max-width:420px;text-wrap:pretty;display:block} html.m .psy-item .d{display:none} .psy-phone-col{position:relative;display:flex;justify-content:center;align-items:center;grid-column:2;grid-row:1;min-height:0;height:100%} html.m .psy-phone-col{grid-column:1;grid-row:2} .psy-halo{position:absolute;width:min(80%,440px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(228,138,169,.28) 0%,rgba(196,61,104,.14) 45%,rgba(196,61,104,0) 72%);filter:blur(18px)} .psy-ring1{position:absolute;width:min(72%,400px);aspect-ratio:1;border-radius:50%;border:1.5px dashed rgba(228,138,169,.4);animation:wgSpin 48s linear infinite} .psy-ring2{position:absolute;width:min(54%,300px);aspect-ratio:1;border-radius:50%;border:1.5px dashed rgba(255,255,255,.28);animation:wgSpinRev 32s linear infinite} #psy-phone{position:relative;height:min(72vh,680px);max-height:100%;aspect-ratio:320/650;will-change:transform} /* the floating buttons sit in the left 76px; derive the mockup height from the width that is guaranteed free of them (88px clear each side), so its edge can never reach one */ html.m #psy-phone{height:min(57vh,520px,calc((100vw - 176px) * 2.031))} #psy-phone .shadow{position:absolute;inset:10% 6% -4%;border-radius:50%;filter:blur(40px);background:rgba(0,0,0,.55)} #psy-phone .dev{box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 2px 4px rgba(255,255,255,.5) inset} #psy-phone .dev-gloss{background:linear-gradient(115deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.08) 22%,rgba(255,255,255,0) 42%)} .psy-screen{position:absolute;inset:0;overflow:hidden} #psy-spot{position:absolute;left:0;right:0;top:0;height:40%;border-radius:8px;box-shadow:0 0 0 2000px rgba(10,12,16,.5),0 0 0 1px rgba(255,255,255,.35) inset;pointer-events:none;will-change:top,height} .psy-status{grid-column:1 / -1;grid-row:2;display:flex;align-items:baseline;justify-content:center;gap:8px;padding-top:14px;font-variant-numeric:tabular-nums} .psy-status-n{font-size:26px;font-weight:700;line-height:1;color:#E48AA9;letter-spacing:-.02em} .psy-status-tot{font-size:13px;color:rgba(255,255,255,.42)} .psy-status-lab{font-size:14px;font-weight:600;color:#fff;padding-inline-start:8px;margin-inline-start:4px;border-inline-start:1px solid rgba(255,255,255,.2)} html.m .psy-status{grid-row:3;padding-top:6px} html.m .psy-status-n{font-size:22px} /* ---------- 07 what you get ---------- */ #what{position:relative;overflow:hidden;background:#000000;color:#fff;scroll-margin-top:80px} #what .wrap{position:relative} .what-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 40px} .what-head>div{max-width:620px} .what-head .h2{color:#fff} .what-head p{margin:0;max-width:360px;font-size:clamp(16px,1.3vw,18px);line-height:1.65;color:#A5AEBB;text-wrap:pretty} .wg{margin-top:clamp(32px,4vw,56px);display:flex;flex-wrap:wrap;gap:12px} .wg-card{background:#121212;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:20px} .wg-card h3{margin:0 0 8px;font-size:18px;font-weight:600;line-height:1.3} .wg-card p{margin:0;font-size:15px;line-height:1.65;color:#A5AEBB;text-wrap:pretty} .wg-count{position:relative;overflow:hidden;flex:1 1 240px;align-items:center;justify-content:center;text-align:center;gap:14px;min-height:220px} html.m .wg-count{min-height:180px} .wg-count .num{font-size:clamp(40px,5vw,60px);font-weight:600;line-height:1;letter-spacing:-0.03em;color:#fff;font-variant-numeric:tabular-nums} .wg-count h3{margin:0} .wg-ic{position:relative;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;color:#E48AA9} .wg-ic::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px dashed rgba(228,138,169,.45);animation:wgSpin 14s linear infinite} .wg-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .wg-a{flex:1 1 260px} .wg-b{flex:1 1 260px} .wg-c{flex:1 1 420px;padding-bottom:0} .wg-d{flex:1 1 420px} .wg-btns{margin-top:20px;display:grid;gap:8px} .wg-btn-p{display:grid;place-items:center;min-height:38px;border-radius:8px;background:#A82F53;color:#fff;font-size:13px;font-weight:600} .wg-btn2{display:grid;grid-template-columns:1fr 1fr;gap:8px} .wg-btn-o{display:grid;place-items:center;min-height:38px;border-radius:8px;border:1px solid rgba(255,255,255,.22);font-size:13px;font-weight:500;color:#E5E9EF} .wg-split{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start} .wg-d .wg-split{align-items:stretch} .wg-split>.txt{flex:1 1 200px;display:flex;flex-direction:column;gap:20px} .wg-c .wg-split>.txt{padding-bottom:clamp(22px,2.4vw,30px)} .wg-win{flex:1 1 200px;align-self:stretch;margin-bottom:-1px;border-inline-start:1px solid rgba(255,255,255,.1);border-top:1px solid rgba(255,255,255,.1);border-start-start-radius:12px;padding:20px;display:grid;gap:10px;align-content:start} .wg-win .dots3{display:flex;gap:5px} .wg-win .dots3 span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.16)} .wg-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:8px;background:rgba(255,255,255,.05);font-size:13px;color:#E5E9EF} .wg-row b{display:inline-flex;align-items:center;gap:7px;color:#E48AA9;font-weight:500} .wg-row b::before{content:"";width:6px;height:6px;border-radius:50%;background:#E48AA9;animation:wgBlink 2s ease-in-out infinite var(--bd,0s)} .wg-list{flex:1 1 200px;display:flex;flex-direction:column;justify-content:center;gap:10px} .wg-list>div{display:flex;align-items:center;gap:10px} .wg-list .k{flex:0 0 auto;width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.06);display:grid;place-items:center;font-size:12px;font-weight:600;color:#E48AA9} .wg-list .v{flex:1;padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.14);font-size:13px;color:#E5E9EF} /* ---------- 09 price ---------- */ #price{scroll-margin-top:68px} #price .sec-head{max-width:680px} #price .sec-head .lead{margin:14px 0 0;max-width:none} .price-card{margin:clamp(32px,4vw,56px) auto 0;max-width:1080px;background:#fff;border:1px solid #E6EAF0;border-radius:16px;overflow:hidden;box-shadow:0 30px 60px -40px rgba(0,0,0,.25);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)} html.m .price-card{grid-template-columns:minmax(0,1fr)} .price-l{padding:clamp(22px,3vw,40px);display:flex;flex-direction:column;gap:20px} .pc{opacity:0;transform:translateY(16px);transition:opacity .5s ease var(--d,.1s),transform .5s cubic-bezier(.2,.7,.2,1) var(--d,.1s)} .price-card.in .pc{opacity:1;transform:none} .price-l h3{margin:12px 0 0;font-size:clamp(24px,2.4vw,30px);font-weight:600;line-height:1.25;color:#000000} .price-l .sub{margin:10px 0 0;font-size:15px;line-height:1.6;color:#5B6675;text-wrap:pretty} .price-amt{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .price-amt .big{font-size:clamp(44px,6vw,72px);font-weight:600;line-height:1;letter-spacing:-0.03em;color:#000000;font-variant-numeric:tabular-nums} .price-amt .was{font-size:20px;color:#8A94A3;text-decoration:line-through} .price-vat{display:block;margin-top:8px;font-size:14px;color:#5B6675} .opts{display:grid;gap:10px} .opt{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;text-align:right;width:100%;min-height:56px;padding:12px 16px;border-radius:10px;border:1px solid #E6EAF0;background:#fff;cursor:pointer;transition:border-color .2s,background .2s} .opt[aria-pressed="true"]{border-color:#C43D68;background:#FEF3F7} .opt .t{display:grid;gap:2px} .opt .t b{font-size:15px;font-weight:600;color:#000000} .opt .t small{font-size:13px;color:#5B6675} .opt .r{display:flex;align-items:center;gap:10px;flex:0 0 auto} .opt .r b{font-size:14px;font-weight:600;color:#000000} .opt .box{width:22px;height:22px;border-radius:6px;border:1.5px solid #C9D1DB;background:#fff;display:grid;place-items:center} .opt[aria-pressed="true"] .box{border-color:#C43D68;background:#C43D68} .price-cta{margin-top:auto;display:grid;gap:10px} .price-cta .btn-pink{min-height:56px;padding:0 26px;border-radius:10px} .price-cta small{text-align:center;font-size:13px;color:#8A94A3} .price-r{padding:clamp(22px,3vw,40px);background:#F7F9FB;border-inline-start:1px solid #E6EAF0;border-top:0;display:flex;flex-direction:column;gap:clamp(18px,2vw,24px)} html.m .price-r{border-inline-start:0;border-top:1px solid #E6EAF0} .price-r .cap{font-size:13px;font-weight:500;letter-spacing:.02em;color:#5B6675} .pg{display:grid;gap:12px} .pg+.pg{padding-top:20px;border-top:1px solid #E6EAF0} .pg h4{margin:0;font-size:15px;font-weight:600;color:#000000} .pg ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:8px 20px} .pg li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.55;color:#3A4453;opacity:0;transform:translateX(14px);transition:opacity .45s ease var(--d),transform .45s cubic-bezier(.2,.7,.2,1) var(--d)} .price-card.in .pg li{opacity:1;transform:none} .pg li svg{flex:0 0 auto;margin-top:3px} .price-sum{margin-top:auto;display:grid;gap:12px} .sum-box{background:#fff;border:1px solid #E6EAF0;border-radius:12px;padding:14px 16px;display:grid;gap:8px;font-size:14px;color:#5B6675} .sum-box div{display:flex;justify-content:space-between;gap:12px} .sum-box b{font-weight:600;color:#000000} .sum-box .zero{color:#A82F53} .price-note{margin:0;font-size:12px;line-height:1.55;color:#8A94A3;text-wrap:pretty} /* ---------- 10 FAQ ---------- */ #faq{scroll-margin-top:68px} .faq-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:start} html.m .faq-grid{grid-template-columns:minmax(0,1fr);gap:48px} .faq-side{position:sticky;top:104px;align-self:start} html.m .faq-side{position:static} #faq-bubble{position:relative;will-change:transform;transition:transform .12s linear} .bubble{position:relative;background:#000000;border:1px solid rgba(255,255,255,.14);border-radius:28px;padding:clamp(24px,3vw,36px);box-shadow:0 30px 60px -28px rgba(0,0,0,.28),0 8px 20px -12px rgba(0,0,0,.12)} .bubble .t1{position:absolute;bottom:-12px;right:40px;width:24px;height:24px;background:#000000;border-right:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);border-bottom-right-radius:6px;transform:rotate(45deg);box-shadow:8px 8px 16px -10px rgba(0,0,0,.2)} .bubble .t2{position:absolute;bottom:-28px;right:24px;width:10px;height:10px;border-radius:50%;background:#000000;border:1px solid rgba(255,255,255,.14);box-shadow:0 6px 12px -6px rgba(0,0,0,.2)} .bubble .t3{position:absolute;bottom:-42px;right:13px;width:6px;height:6px;border-radius:50%;background:#000000;border:1px solid rgba(255,255,255,.14)} .bubble h2{margin:14px 0 0;font-size:clamp(26px,3.2vw,36px);line-height:1.2;font-weight:600;letter-spacing:-0.015em;color:#FFFFFF;text-wrap:balance} .bubble p{margin:12px 0 0;font-size:15px;line-height:1.6;color:rgba(255,255,255,.72);max-width:340px;text-wrap:pretty} .bubble .eyebrow{color:#E48AA9} .bubble .btn-wa{margin-top:22px;display:inline-flex;min-height:46px;padding:0 18px;border-radius:999px;font-size:15px;transition:background .2s,transform .2s} .bubble .btn-wa:hover{transform:translateY(-2px)} .faq-list{display:grid;border-top:1px solid #E6EAF0} .faq{border-bottom:1px solid #E6EAF0;padding:4px 0} .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:right;background:transparent;border:0;cursor:pointer;padding:14px 0;min-height:56px;font-size:16px;line-height:1.5;font-weight:500;color:#000000} .faq-q .chev{flex:0 0 auto;display:grid;place-items:center;opacity:.6;transition:transform .2s;transform:rotate(0deg)} .faq.open .faq-q .chev{transform:rotate(180deg)} .faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s ease-out} .faq.open .faq-a{grid-template-rows:1fr} .faq-a>div{overflow:hidden} .faq-a p{margin:0;padding:0 0 14px;font-size:15px;line-height:1.65;color:#5B6675;text-wrap:pretty} /* ---------- 11 form ---------- */ #start{background:#000000;color:#fff;position:relative;overflow:hidden;scroll-margin-top:68px} .start-grid{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(36px,5vw,72px);align-items:center} .start-copy h2{margin:16px 0 0;font-size:clamp(28px,4.2vw,50px);line-height:1.12;font-weight:600;letter-spacing:-0.02em;text-wrap:balance} .start-copy h2 span{color:#A5AEBB} .start-copy ul{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px;font-size:16px;line-height:1.5;color:#E5E9EF} .start-copy li{display:flex;align-items:center;gap:12px} .tick{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:rgba(228,138,169,.16);display:grid;place-items:center} .start-meta{margin-top:36px;display:flex;align-items:center;gap:16px;flex-wrap:wrap} .start-price{display:flex;align-items:baseline;gap:8px;padding:14px 18px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)} .start-price b{font-size:32px;font-weight:600;line-height:1;letter-spacing:-.03em} .start-price span{font-size:14px;color:#A5AEBB} .start-reply{display:flex;align-items:center;gap:10px;font-size:14px;color:#A5AEBB} .start-reply::before{content:"";width:8px;height:8px;border-radius:50%;background:#E48AA9;box-shadow:0 0 0 4px rgba(228,138,169,.18)} .form-wrap{position:relative} .form-glow{position:absolute;inset:-1px;border-radius:18px;background:linear-gradient(140deg,rgba(228,138,169,.7),rgba(196,61,104,.15) 40%,rgba(255,255,255,.08) 70%,rgba(228,138,169,.4));pointer-events:none} .form-card{position:relative;background:#fff;color:#000000;border-radius:17px;padding:clamp(24px,3vw,36px);box-shadow:0 50px 80px -40px rgba(0,0,0,.7)} .form-card form{display:grid;gap:14px} .form-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px} .form-head b{font-size:20px;font-weight:600;line-height:1.3} .form-head .pill{flex:0 0 auto;padding:5px 10px;font-size:12px} .form-card label{display:grid;gap:6px;font-size:13px;font-weight:500;color:#5B6675} .form-card label small{font-weight:400;color:#8A94A3;font-size:13px} .form-card input{width:100%;min-height:52px;padding:0 16px;border-radius:10px;border:1px solid #D9DFE7;font-size:16px;color:#000000;background:#FAFBFC;outline:none;transition:border-color .2s,background .2s,box-shadow .2s} .form-card input:focus{border-color:#C43D68;background:#fff;box-shadow:0 0 0 4px rgba(196,61,104,.12)} .form-card input[type=tel]{text-align:right;direction:rtl} .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} .form-submit{margin-top:6px;min-height:56px;border-radius:10px;border:0;background:#C43D68;color:#fff;font-weight:600;font-size:17px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:background .2s,transform .2s,box-shadow .2s;box-shadow:0 12px 24px -12px rgba(196,61,104,.7)} .form-submit:hover{background:#A82F53;transform:translateY(-1px);box-shadow:0 16px 28px -12px rgba(196,61,104,.8)} .form-submit[disabled]{opacity:.7;cursor:progress;transform:none} .form-or{display:flex;align-items:center;gap:12px;margin:4px 0} .form-or span{flex:1;height:1px;background:#EEF1F5} .form-or small{font-size:12px;color:#8A94A3} .form-card .btn-outline{border-radius:10px} .form-card .btn-outline:hover{background:#F5F7FA} .form-priv{margin:6px 0 0;display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;line-height:1.5;color:#8A94A3} .form-done{display:none;gap:14px;justify-items:center;text-align:center;padding:24px 0} .form-card.sent form{display:none} .form-card.sent .form-done{display:grid} .form-done .ok{width:64px;height:64px;border-radius:50%;background:#FCE9F0;display:grid;place-items:center;box-shadow:0 0 0 10px rgba(252,233,240,.5)} .form-done b{font-size:24px;font-weight:600;line-height:1.3} .form-done p{margin:0;font-size:15px;line-height:1.65;color:#5B6675;max-width:320px;text-wrap:pretty} .form-err{display:none;margin:0;font-size:13px;color:#A82F53} .form-card.error .form-err{display:block} /* ---------- 12 footer ---------- */ footer{background:#fff;border-top:1px solid #EEF1F5;padding:clamp(40px,6vw,72px) 0 40px} html.m footer{padding-bottom:104px} .foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(28px,4vw,56px);align-items:start} .foot-brand{display:grid;gap:16px;justify-items:start} .foot-brand img{height:28px;width:auto} .foot-brand p{margin:0;max-width:300px;font-size:14px;line-height:1.6;color:#5B6675;text-wrap:pretty} .foot-social{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:16px} .foot-social a{display:grid;place-items:center;width:20px;height:20px;color:#8A94A3} .foot-social a:hover{color:#C43D68} .foot-social svg{width:20px;height:20px} .foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:clamp(24px,3vw,40px)} html.m .foot-cols{grid-template-columns:minmax(0,1fr);gap:0} .fg{border-bottom:0} html.m .fg{border-bottom:1px solid #EEF1F5} .fg h3{margin:0 0 14px;font-size:13px;font-weight:500;letter-spacing:.02em;color:#000000} html.m .fg h3{display:none} .fg-btn{display:none;width:100%;align-items:center;justify-content:space-between;gap:12px;background:transparent;border:0;padding:16px 0;min-height:52px;cursor:pointer;text-align:right;font-size:15px;font-weight:500;color:#000000} html.m .fg-btn{display:flex} .fg-btn .chev{display:grid;place-items:center;opacity:.6;transition:transform .2s} html.m .fg.open .fg-btn .chev{transform:rotate(180deg)} .fg-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .2s ease-out} html.m .fg-body{grid-template-rows:0fr} html.m .fg.open .fg-body{grid-template-rows:1fr} .fg-body>div{overflow:hidden} .fg ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14px} html.m .fg ul{padding:0 0 16px} .fg a{color:#5B6675;display:inline-block} html.m .fg a{min-height:40px;line-height:40px} .fg a:hover{color:#C43D68} .foot-bottom{margin-top:clamp(32px,4vw,48px);border-top:1px solid #EEF1F5;padding-top:24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;font-size:13px;color:#8A94A3} .foot-bottom p{margin:0} /* ---------- floating ---------- */ .wa-fab{position:fixed;left:20px;bottom:20px;z-index:61;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 6px 16px -6px rgba(0,0,0,.3);transition:bottom .3s} .wa-fab svg{width:28px;height:28px} .call-fab{position:fixed;left:20px;bottom:88px;z-index:61;width:56px;height:56px;border-radius:50%;background:#C43D68;color:#fff;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;box-shadow:0 10px 26px -8px rgba(0,0,0,.55);transition:transform .2s,background .2s} .call-fab:hover{transform:translateY(-2px);background:#A82F53} .call-fab svg{width:26px;height:26px} html.m.scrolled:not(.menu) .call-fab{bottom:160px} html.m.scrolled:not(.menu) .wa-fab{bottom:92px} .sticky-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid #E6EAF0;padding:10px 20px calc(10px + env(safe-area-inset-bottom));align-items:center;justify-content:space-between;gap:12px} html.m.scrolled:not(.menu) .sticky-cta{display:flex} .sticky-cta .p{display:grid;line-height:1.2} .sticky-cta .p b{font-size:17px;font-weight:600} .sticky-cta .p b small{font-size:12px;font-weight:500;color:#5B6675} .sticky-cta .p span{font-size:12px;color:#A82F53;font-weight:600} .sticky-cta a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border-radius:8px;background:#C43D68;color:#fff;font-weight:600;font-size:15px} /* where each lead lands — inside the "פניות מהלקוחות" card */ .wg-dest{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)} .wg-dest-cap{display:block;font-size:13px;color:#A5AEBB;margin-bottom:10px} .wg-dest ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .wg-dest li{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:#fff;border:1px solid rgba(255,255,255,.2);font-size:13px;font-weight:600;color:#000} .wg-dest li svg{width:16px;height:16px;flex:0 0 auto} .wg-dest li svg use{fill:currentColor} /* WhatsApp buttons carry WhatsApp green wherever they appear */ .btn-outline[data-wa]{background:#25D366;border-color:#25D366;color:#fff} .btn-outline[data-wa]:hover{background:#1EBE5A;border-color:#1EBE5A;color:#fff} .btn-outline[data-wa] svg{color:#fff!important} .form-card .btn-outline[data-wa]:hover{background:#1EBE5A} /* consent checkbox on the lead form */ .form-consent{display:flex!important;align-items:flex-start;gap:9px;margin-top:2px;font-size:13px;line-height:1.55;color:#5B6675;font-weight:400;cursor:pointer} .form-consent input{flex:0 0 auto;width:18px;height:18px;min-height:0;margin-top:1px;accent-color:#C43D68;cursor:pointer} .form-consent a{color:#C43D68;text-decoration:underline;text-underline-offset:2px} .form-card.error .form-consent input:not(:checked){outline:2px solid #C43D68;outline-offset:2px;border-radius:3px} /* business contact details in the footer */ .foot-contact{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px} .foot-contact a{color:#5B6675} .foot-contact a:hover{color:#C43D68}