/*
Theme Name: myKedai Redesign
Theme URI: https://mykedai.com.my/
Author: Telin
Description: Tema landing page myKedai dwibahasa yang mandiri dan responsif.
Version: 1.0.1
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: mykedai-landing
*/

:root{--red:#ff3340;--red2:#b80d24;--ink:#f2f1f6;--muted:#aaa8b2;--black:#08080a;--panel:#111116;--line:rgba(255,255,255,.13);--progress:0;--scroll-y:0}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--black);overflow-x:clip}body,main{width:100%;max-width:100%;overflow-x:clip}body{margin:0;background:var(--black);color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}[hidden]{display:none!important}.progress-bar{position:fixed;left:0;top:0;z-index:100;width:calc(var(--progress)*100%);height:2px;background:linear-gradient(90deg,var(--red),#a27cff)}

.admin-bar .site-header{top:32px}.admin-bar .progress-bar{top:32px}@media(max-width:782px){.admin-bar .site-header{top:46px}.admin-bar .progress-bar{top:46px}}

.site-header{position:absolute;z-index:30;left:0;right:0;top:0;height:90px;padding:0 3vw;display:flex;align-items:center;justify-content:space-between}.brand-logo{width:176px;height:auto;display:block}.site-header nav{display:flex;gap:28px;font-size:12px;color:#c7c5cc}.site-header nav a{transition:.25s}.site-header nav a:hover{color:white}.header-tools{display:flex;align-items:center;gap:12px}.lang-switch{display:flex;background:rgba(255,255,255,.08);border:1px solid var(--line);padding:4px;border-radius:999px}.lang-switch button{border:0;background:none;color:#777580;border-radius:99px;padding:7px 10px;font-size:10px;cursor:pointer}.lang-switch button.active{background:white;color:#111}.round-cta{display:flex;align-items:center;gap:22px;border:1px solid var(--line);background:rgba(255,255,255,.06);padding:12px 15px 12px 18px;border-radius:999px;font-size:11px;backdrop-filter:blur(18px)}.round-cta span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:white;color:#111}

.hero{height:190vh;min-height:1350px;position:relative;background:#08080a;isolation:isolate}.hero:before{content:"";position:absolute;z-index:-2;inset:0;background:radial-gradient(ellipse at 69% 25%,rgba(92,61,174,.5),transparent 33%),radial-gradient(ellipse at 63% 40%,rgba(255,38,58,.22),transparent 32%),linear-gradient(120deg,#08080a 45%,#101018)}.kinetic-canvas{position:absolute!important;inset:0;opacity:.24;mix-blend-mode:screen;mask-image:linear-gradient(#000 0 55%,transparent 82%)}.hero-grid{position:absolute;inset:0;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(to right,transparent,black,transparent)}.hero-copy{position:sticky;z-index:5;top:0;height:100vh;padding:104px 0 40px 2.5vw;display:flex;flex-direction:column;justify-content:flex-start;pointer-events:none}.hero-copy>*{pointer-events:auto}.eyebrow{order:2;margin:28vh 0 0;font-size:10px;text-transform:uppercase;letter-spacing:.18em;color:#bcbac4}.eyebrow span{color:var(--red);margin-right:9px}.hero h1{order:1;position:absolute;top:88px;left:2.5vw;margin:0;font-size:clamp(76px,9.6vw,148px);line-height:.76;letter-spacing:-.085em;font-weight:500;white-space:nowrap}.hero h1 span,.hero h1 em{display:block}.hero h1 em{font-style:normal;margin-left:12vw}.hero-intro{order:3;max-width:390px;font-size:14px;line-height:1.55;color:#bbb9c1;margin:18px 0}.hero-actions{order:4;display:flex;align-items:center;gap:12px}.primary-btn,.text-btn{display:inline-flex;align-items:center;gap:24px;font-size:11px}.primary-btn{background:white;color:#111;padding:14px 16px 14px 20px;border-radius:999px;font-weight:700}.primary-btn span{font-size:17px}.text-btn{border:1px solid var(--line);padding:13px 16px;border-radius:999px;color:#d5d3da}.hero-object{position:sticky;z-index:4;top:0;margin-left:42vw;width:58vw;height:100vh;transform:perspective(1400px) translateY(calc(var(--scroll-y)*-.13px));transform-style:preserve-3d;pointer-events:none}.hero-phone{position:absolute;left:22%;top:28%;width:300px;height:610px;border-radius:52px;padding:9px;background:linear-gradient(145deg,#36363b,#070708 42%,#2a2a30);box-shadow:-50px 70px 100px rgba(0,0,0,.65),0 0 130px rgba(107,77,255,.25);transform:perspective(1100px) rotateY(-19deg) rotateZ(7deg) translateY(calc(var(--scroll-y)*.07px));transition:transform .2s linear}.hero-phone:after{content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);width:86px;height:24px;border-radius:15px;background:#08080a}.hero-phone-screen{height:100%;border-radius:44px;background:linear-gradient(160deg,#121217,#070708);padding:32px 22px;overflow:hidden;border:1px solid rgba(255,255,255,.09)}.hp-top{display:flex;justify-content:space-between;font-size:8px;margin-bottom:42px}.hp-top b{font-size:5px;color:#a8a7af}.hero-phone-screen>small{color:#888791;font-size:9px}.hero-phone-screen h3{font-size:33px;line-height:.95;letter-spacing:-.06em;white-space:pre-line;font-weight:500;margin:14px 0 35px}.hp-balance{background:linear-gradient(135deg,#ee2037,#8b061e);border-radius:22px;padding:22px;box-shadow:0 20px 55px rgba(224,27,52,.24)}.hp-balance span,.hp-balance strong{display:block}.hp-balance span{font-size:8px;color:#ffc5cb}.hp-balance strong{font-size:27px;margin-top:7px}.hp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.hp-grid i{height:86px;border-radius:18px;background:#19191f;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#ff5662;font-style:normal;font-size:21px}.hp-grid small{font-size:7px;color:#9f9da7;margin-top:9px}.object-ring{position:absolute;border:1px solid rgba(255,255,255,.1);border-radius:50%;left:37%;top:43%;transform:translate(-50%,-50%) rotateX(72deg)}.ring-one{width:700px;height:700px}.ring-two{width:510px;height:510px}.ring-three{width:350px;height:350px}.hero-float-card{position:absolute;border:1px solid var(--line);background:rgba(20,20,27,.62);backdrop-filter:blur(20px);border-radius:25px;padding:20px;box-shadow:0 25px 70px rgba(0,0,0,.3)}.card-store{right:4vw;top:38%;width:210px}.card-store small,.card-store b{display:block}.card-store small{font-size:11px;color:#aaa8b2;line-height:1.4}.card-store b{font-size:12px;margin-top:18px}.card-live{right:6vw;bottom:9%;width:145px}.card-live span{font-size:7px;color:#78f79a}.card-live strong{display:block;font-size:30px;margin:12px 0 0}.card-live small{font-size:8px;color:#9997a0}.hero-bottom{position:absolute;z-index:6;left:3vw;right:3vw;bottom:28px;display:flex;justify-content:space-between;align-items:end;color:#777580;font-size:8px;text-transform:uppercase;letter-spacing:.1em}.hero-bottom p{display:flex;gap:22px}.hero-bottom a{display:flex;gap:10px;align-items:center}.hero-bottom i{width:30px;height:30px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-style:normal}

.floating-dock{position:fixed;z-index:80;left:50%;bottom:18px;transform:translateX(-50%);display:grid;grid-template-columns:62px 1fr 145px;align-items:center;width:405px;height:60px;border:1px solid rgba(255,255,255,.28);background:rgba(236,235,240,.9);color:#111;border-radius:17px;padding:6px;backdrop-filter:blur(20px);box-shadow:0 20px 70px rgba(0,0,0,.4)}.floating-dock>a:first-child{font-size:18px;padding-left:17px}.floating-dock>span{font-weight:900;text-align:center}.floating-dock>a:last-child{background:#111;color:white;border-radius:13px;height:48px;display:grid;place-items:center;font-size:11px}


.signal-section{height:105vh;min-height:760px;position:relative;overflow:hidden;padding:10vh 4vw;background:radial-gradient(circle at 74% 48%,rgba(89,63,194,.5),transparent 28%),#0a0a0d;display:flex;align-items:center}.signal-noise{position:absolute;inset:0;opacity:.07;background-image:radial-gradient(white .7px,transparent .7px);background-size:5px 5px}.signal-index{position:absolute;top:8vh;left:4vw;font-size:8px;letter-spacing:.18em;color:#777580}.signal-copy{position:relative;z-index:3;width:74%}.signal-copy h2{font-size:clamp(65px,9vw,138px);font-weight:500;line-height:.79;letter-spacing:-.085em;margin:0}.signal-copy h2 em{display:block;font-style:normal;color:#aaa8b2;margin-left:9vw}.signal-copy>p{max-width:400px;margin:42px 0 0 10vw;color:#aaa8b2;line-height:1.6;font-size:13px}.signal-orb{position:absolute;right:-2vw;top:19%;width:36vw;height:36vw;border-radius:50%;background:radial-gradient(circle at 32% 28%,#ff8190,#e5213a 24%,#4e173f 66%,#0d0c17 72%);box-shadow:0 0 160px rgba(117,77,255,.38);animation:orbFloat 7s ease-in-out infinite}.signal-orb>div{position:absolute;inset:-14%;border:1px solid rgba(255,255,255,.12);border-radius:50%;transform:rotateX(72deg);box-shadow:0 0 0 5vw rgba(255,255,255,.025),0 0 0 10vw rgba(255,255,255,.018)}.signal-orb>span{position:absolute;inset:0;display:grid;place-items:center;font-size:13vw;font-weight:900;color:rgba(255,255,255,.85)}@keyframes orbFloat{50%{transform:translateY(-25px) rotate(5deg)}}.signal-readout{position:absolute;right:4vw;bottom:7vh;width:180px;border-top:1px solid var(--line);padding-top:12px;display:grid;grid-template-columns:1fr auto;gap:7px}.signal-readout span{color:#6aff8d;font-size:8px}.signal-readout b{text-align:right}.signal-readout small{grid-column:1/-1;color:#84828d;font-size:7px;letter-spacing:.12em;line-height:1.5}

.story{min-height:410vh;display:grid;grid-template-columns:55% 45%;background:#0c0c10}.story-stage{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 55% 50%,rgba(102,64,209,.3),transparent 37%),#0b0b0e}.story-heading{position:absolute;left:4vw;top:7vh;width:46%}.story-heading p,.lab-head>p,.how-title>p,.faq-title>p,.download-copy>p{color:#ff5c67;font-size:9px;letter-spacing:.17em}.story-heading h2{font-size:clamp(32px,4vw,60px);line-height:.92;letter-spacing:-.06em;margin:18px 0}.story-index{position:absolute;left:4vw;bottom:6vh;display:flex;align-items:end;gap:6px}.story-index b{font-size:55px;letter-spacing:-.08em}.story-index span{font-size:10px;color:#777;margin-bottom:10px}.story-copy{padding:52vh 7vw 32vh 6vw}.story-copy article{min-height:95vh;border-top:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}.story-copy article>span{font-size:9px;color:#ff5c67}.story-copy h3{font-size:clamp(39px,4.6vw,70px);line-height:.92;letter-spacing:-.07em;margin:24px 0}.story-copy p{max-width:450px;color:#96949e;line-height:1.7;font-size:14px}

.device-wrap{position:relative;width:270px;height:560px;display:grid;place-items:center;margin-left:12vw}.device-glow{position:absolute;width:430px;height:430px;border-radius:50%;background:radial-gradient(circle,rgba(94,66,205,.45),transparent 68%)}.device{position:relative;z-index:2;width:244px;height:500px;border-radius:40px;background:#08080a;border:1px solid #4a4950;padding:8px;box-shadow:0 45px 100px rgba(0,0,0,.58);transform:rotate(3deg);transition:.35s}.device:hover{transform:rotate(0) scale(1.025)}.device-notch{position:absolute;z-index:4;top:8px;left:50%;transform:translateX(-50%);width:76px;height:21px;background:#08080a;border-radius:0 0 14px 14px}.device-screen{position:relative;height:100%;border-radius:31px;background:#121217;color:#f2f1f6;overflow:hidden;padding:30px 15px 15px}.app-header{height:27px;display:flex;justify-content:space-between;align-items:center;color:#ff5c67;font-size:9px}.mini-logo{width:20px;height:20px;border-radius:6px;background:var(--red);color:white;display:grid;place-items:center}.app-header i{color:#777}.screen-label{margin:28px 0 15px;font-size:10px;font-weight:700}.screen-label span{color:#ff5c67;margin-right:8px}.screen-scene{animation:screenIn .4s ease}@keyframes screenIn{from{opacity:0;transform:translateY(12px)}}.wallet-scene{height:280px;border-radius:20px;padding:25px 18px;background:linear-gradient(135deg,#ed253d,#7e071d);position:relative;overflow:hidden}.wallet-scene small,.wallet-scene strong{display:block;position:relative;z-index:2}.wallet-scene small{font-size:7px;color:#ffc0c6}.wallet-scene strong{font-size:28px;margin:9px 0}.wallet-scene button,.receipt-scene button,.points-scene button{border:0;border-radius:999px;padding:10px 15px;background:white;color:#b80d24;font-size:8px;font-weight:800}.wave{position:absolute;width:310px;height:310px;border-radius:50%;border:1px solid rgba(255,255,255,.25);left:-40px;bottom:-210px;box-shadow:0 0 0 25px rgba(255,255,255,.06),0 0 0 55px rgba(255,255,255,.04)}.product-scene{display:grid;grid-template-columns:1fr 1fr;gap:8px}.product-scene>div{height:96px;border-radius:14px;background:#1b1b21;display:grid;place-items:center;text-align:center}.product-scene span{font-size:22px;color:#ff5c67}.product-scene small{font-size:8px}.receipt-scene,.points-scene{text-align:center;padding:16px 7px}.success{margin:0 auto 15px;width:52px;height:52px;border-radius:50%;background:#173a25;color:#65ef8a;display:grid;place-items:center}.receipt-scene b{display:block;color:#65ef8a;font-size:7px}.receipt-scene strong{display:block;font-size:30px;margin:18px}.receipt-scene p{font-size:8px;color:#888;margin-bottom:20px}.receipt-scene button,.points-scene button{background:var(--red);color:white}.points-scene{height:280px;border-radius:18px;background:#19191f}.points-scene>span{font-size:8px;color:#888}.points-scene>strong{display:block;font-size:39px;color:#ff5c67;margin:10px}.coin{width:85px;height:85px;border-radius:50%;background:var(--red);display:grid;place-items:center;margin:18px auto;font-size:28px;font-weight:900}.app-tabs{position:absolute;left:14px;right:14px;bottom:10px;height:35px;border-radius:12px;background:#1b1b21;display:flex;align-items:center;justify-content:space-around;color:#777}

.product-lab{padding:130px 4vw;background:#ececf0;color:#101014}.lab-head{display:grid;grid-template-columns:1fr 2fr 1fr;gap:4vw;align-items:end;margin-bottom:70px}.lab-head>p{color:#b31228}.lab-head h2{font-size:clamp(54px,7vw,105px);line-height:.82;letter-spacing:-.08em;margin:0;font-weight:500}.lab-head>span{color:#5f5d65;font-size:13px;line-height:1.6}.lab-window{min-height:550px;display:grid;grid-template-columns:32% 68%;background:#d9d9df;border-radius:28px;padding:10px;overflow:hidden}.lab-menu{display:flex;flex-direction:column;padding:8px}.lab-menu button{flex:1;border:0;border-bottom:1px solid rgba(0,0,0,.13);background:transparent;text-align:left;padding:20px 22px;font-size:18px;display:flex;align-items:center;gap:28px;cursor:pointer;border-radius:15px}.lab-menu button span{font-size:8px}.lab-menu button.active,.lab-menu button:hover{background:#111116;color:white}.lab-card{margin:0;background:#111116;color:white;border-radius:22px;position:relative;padding:58px;display:flex;align-items:flex-end;overflow:hidden}.lab-symbol{position:absolute;right:8%;top:3%;font-size:230px;color:var(--red);line-height:1;transform:rotate(-8deg)}.lab-card small{color:#ff6e78;font-size:9px;letter-spacing:.12em}.lab-card h3{font-size:64px;letter-spacing:-.07em;margin:8px 0}.lab-card p{max-width:390px;color:#9997a1;line-height:1.6}.lab-arrow{position:absolute;right:30px;bottom:30px;font-size:30px}

.how{padding:130px 4vw;background:#0b0b0e}.how-title{display:flex;justify-content:space-between;align-items:end;padding-bottom:30px;border-bottom:1px solid var(--line)}.how-title h2{max-width:760px;font-size:clamp(52px,7vw,100px);line-height:.85;letter-spacing:-.08em;margin:0;font-weight:500}.steps{display:grid;grid-template-columns:repeat(4,1fr)}.steps article{min-height:360px;padding:42px 24px;border-right:1px solid var(--line);display:flex;flex-direction:column}.steps article>span{font-size:8px;color:#ff5c67}.step-dot{width:66px;height:66px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;margin:45px 0 auto;transition:.3s}.steps article:hover .step-dot{background:var(--red);border-color:var(--red);transform:rotate(12deg)}.steps h3{font-size:22px;margin:24px 0 8px}.steps p{font-size:12px;color:#8e8c96;line-height:1.6}

.proof-section{padding:130px 4vw 75px;background:radial-gradient(circle at 80% 20%,#6d44c8,transparent 40%),linear-gradient(135deg,#d91d36,#6f0b2f);color:white}.proof-copy{display:grid;grid-template-columns:1fr 2.5fr;gap:4vw;padding-bottom:82px;border-bottom:1px solid rgba(255,255,255,.25)}.proof-copy>p{color:#ffc6cd}.proof-copy h2{font-size:clamp(46px,6.3vw,92px);line-height:.92;letter-spacing:-.07em;margin:0;font-weight:500}.stats{display:grid;grid-template-columns:repeat(3,1fr)}.stats>div{padding:50px 25px;border-right:1px solid rgba(255,255,255,.25)}.stats>div:last-child{border:0}.stats span{font-size:8px;color:#ffc6cd}.stats strong{display:block;font-size:clamp(50px,6vw,90px);letter-spacing:-.06em;margin:25px 0 3px}.stats p{font-size:9px;text-transform:uppercase;letter-spacing:.14em}.proof-section>small{display:block;text-align:right;color:#ffc1c9;font-size:8px}

.faq{display:grid;grid-template-columns:38% 62%;padding:130px 4vw;background:#ededf1;color:#111116}.faq-title>p{color:#b11228}.faq-title h2{font-size:clamp(52px,6vw,88px);line-height:.85;letter-spacing:-.08em;max-width:430px}.faq-list{border-top:1px solid #c8c8ce}.faq-list details{border-bottom:1px solid #c8c8ce}.faq-list summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:45px 1fr 30px;align-items:center;padding:27px 0;font-size:18px}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary>span{font-size:8px;color:#b11228}.faq-list summary i{font-style:normal;font-size:22px;color:#b11228}.faq-list details[open] summary i{transform:rotate(45deg)}.faq-list details>p{margin:-4px 45px 27px;color:#65636b;font-size:14px;line-height:1.65}

.download{min-height:100vh;position:relative;overflow:hidden;padding:115px 6vw;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;background:radial-gradient(circle at 75% 45%,rgba(117,78,255,.5),transparent 30%),#09090c}.download-rings{position:absolute;right:-20vw;top:-10vw;width:67vw;height:67vw;border:1px solid var(--line);border-radius:50%;box-shadow:0 0 0 7vw rgba(255,255,255,.02),0 0 0 14vw rgba(255,255,255,.015)}.download-copy{position:relative;z-index:3}.download-copy h2{max-width:850px;font-size:clamp(60px,7.4vw,108px);line-height:.82;letter-spacing:-.08em;margin:24px 0;font-weight:500}.download-copy>span{color:#aaa8b2;line-height:1.6}.download-copy>div{display:flex;gap:12px;margin-top:34px}.store-button{min-width:165px;display:flex;align-items:center;gap:12px;background:white;color:#111;padding:12px 16px;border-radius:12px;transition:.25s}.store-button:hover{transform:translateY(-3px);background:var(--red);color:white}.store-button>span{font-size:18px}.store-button small,.store-button b{display:block}.store-button small{font-size:8px}.store-button b{font-size:14px;margin-top:3px}.download-device{position:absolute;right:5vw;bottom:-95px;transform:rotate(-7deg)}.download-device .device-wrap{margin:0}.download-device .device{width:290px;height:590px}.download-device .product-scene>div{height:116px}

footer{padding:50px 4vw 100px;background:#08080a;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.5fr 1fr auto;align-items:center;gap:40px}footer>p{font-size:11px;color:#85838c;max-width:270px;line-height:1.5}footer>div{display:flex;gap:20px;font-size:10px}footer>small{font-size:8px;color:#777580}.mobile-cta{display:none}.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s}.reveal.is-visible{opacity:1;transform:none}

@media(max-width:960px){.site-header nav{display:none}.hero h1{font-size:12vw}.hero-object{margin-left:36vw;width:64vw}.hero-phone{left:12%}.card-store{display:none}.story{grid-template-columns:50% 50%}.story-heading{width:80%}.device-wrap{margin-left:0;transform:scale(.82)}.lab-head{grid-template-columns:1fr}.lab-window{grid-template-columns:1fr}.lab-menu{display:grid;grid-template-columns:repeat(3,1fr)}.steps{grid-template-columns:1fr 1fr}.faq{grid-template-columns:1fr;gap:40px}.download-device{opacity:.35}footer{grid-template-columns:1fr 1fr}}

@media(max-width:600px){html,body,main{width:100%;max-width:100%;overflow-x:hidden}.site-header{height:70px;padding:0 18px}.brand-logo{width:135px}.round-cta{display:none}.hero{height:1350px;min-height:1350px}.hero-copy{height:760px;padding:92px 18px 40px}.hero h1{top:90px;left:18px;font-size:clamp(56px,17.2vw,72px);line-height:.78;white-space:normal}.hero h1 em{margin-left:0}.eyebrow{margin-top:250px}.hero-intro{max-width:92%;font-size:13px}.hero-actions{align-items:flex-start;flex-direction:column}.hero-object{top:355px;margin-left:0;width:100vw;height:750px;transform:translateY(calc(var(--scroll-y)*-.09px))}.hero-phone{left:50%;top:70px;width:240px;height:490px;transform:translateX(-50%) perspective(900px) rotateY(-15deg) rotateZ(6deg)}.hero-phone-screen{padding:28px 17px}.hero-phone-screen h3{font-size:27px}.hp-grid i{height:64px}.object-ring{left:50%;top:45%}.ring-one{width:480px;height:480px}.ring-two{width:360px;height:360px}.ring-three{width:250px;height:250px}.card-live{right:18px;bottom:70px}.hero-bottom{left:18px;right:18px;bottom:20px}.hero-bottom p{display:none}.floating-dock{width:calc(100% - 28px);grid-template-columns:55px 1fr 125px}.signal-section{height:820px;min-height:820px;padding:80px 18px;align-items:flex-start}.signal-index{left:18px;top:40px}.signal-copy{width:100%;margin-top:40px}.signal-copy h2{font-size:clamp(53px,16vw,67px)}.signal-copy h2 em{margin-left:0}.signal-copy>p{margin:28px 0;max-width:92%}.signal-orb{width:77vw;height:77vw;right:-20vw;top:auto;bottom:90px}.signal-readout{right:18px;bottom:28px}.story{display:block;min-height:auto}.story-stage{height:700px}.story-heading{left:18px;top:40px;width:72%}.story-heading h2{font-size:31px}.story-index{left:18px}.device-wrap{transform:scale(.63);margin-left:30vw}.story-copy{padding:80px 18px}.story-copy article{min-height:580px}.story-copy h3{font-size:43px}.product-lab{padding:80px 18px}.lab-head{margin-bottom:40px}.lab-head h2{font-size:52px}.lab-window{min-height:auto;border-radius:20px}.lab-menu{grid-template-columns:1fr 1fr}.lab-menu button{font-size:13px;padding:17px 13px}.lab-card{min-height:410px;padding:30px 22px;border-radius:16px}.lab-symbol{font-size:145px}.lab-card h3{font-size:45px}.how{padding:80px 18px}.how-title{display:block}.how-title h2{font-size:52px;margin-top:20px}.steps{grid-template-columns:1fr}.steps article{min-height:270px;border-right:0;border-bottom:1px solid var(--line)}.step-dot{margin:30px 0 auto}.proof-section{padding:80px 18px 55px}.proof-copy{grid-template-columns:1fr;padding-bottom:55px}.proof-copy h2{font-size:45px}.stats{grid-template-columns:1fr}.stats>div{border-right:0;border-bottom:1px solid rgba(255,255,255,.25);padding:34px 0}.stats strong{font-size:65px;margin:12px 0}.proof-section>small{text-align:left;margin-top:25px}.faq{padding:80px 18px}.faq-title h2{font-size:52px}.faq-list summary{grid-template-columns:32px 1fr 22px;font-size:14px}.faq-list details>p{margin-left:32px}.download{min-height:850px;padding:90px 18px;display:block}.download-copy h2{font-size:55px}.download-copy>div{flex-direction:column;max-width:190px}.download-device{right:-130px;bottom:-110px}.download-device .device-wrap{transform:scale(.55)}footer{grid-template-columns:1fr;padding:40px 18px 110px;gap:14px}.mobile-cta{display:none}}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.hero-phone,.hero-object{transform:none!important}}

/* Responsive precision pass */
.hero-object{position:absolute;right:0;margin-left:0}

@media (min-width:601px) and (max-width:960px){
  .hero{height:1500px;min-height:1500px}
  .hero h1{font-size:11.4vw;max-width:calc(100vw - 38px);white-space:normal}
  .hero-object{width:64vw;right:0}
  .hero-phone{left:7%;top:27%}
  .card-live{right:3vw;bottom:7%}
  .ring-one{width:min(700px,82vw);height:min(700px,82vw)}
  .ring-two{width:min(510px,62vw);height:min(510px,62vw)}
  .ring-three{width:min(350px,44vw);height:min(350px,44vw)}
  .signal-section,.story-stage,.download{overflow:hidden}
}

@media(max-width:600px){
  .hero{height:1180px;min-height:1180px}
  .hero-copy{height:690px;padding:92px 18px 40px}
  .hero h1{top:90px;left:18px;width:calc(100vw - 36px);max-width:calc(100vw - 36px);font-size:clamp(51px,15.5vw,64px);line-height:.8}
  .eyebrow{margin-top:235px}
  .hero-intro{max-width:100%}
  .hero-object{top:335px;right:0;width:100vw;height:700px;transform:translateY(calc(var(--scroll-y)*-.07px))}
  .hero-phone{left:50%;top:76px;width:228px;height:466px;transform:translateX(-50%) perspective(900px) rotateY(-12deg) rotateZ(5deg)}
  .hero-phone-screen{padding:27px 16px}
  .hero-phone-screen h3{font-size:25px;margin-bottom:25px}
  .hp-top{margin-bottom:32px}
  .hp-balance{padding:18px}
  .hp-balance strong{font-size:23px}
  .hp-grid i{height:61px}
  .object-ring{left:50%;top:43%}
  .ring-one{width:440px;height:440px}
  .ring-two{width:330px;height:330px}
  .ring-three{width:230px;height:230px}
  .card-live{right:18px;bottom:32px;width:132px;padding:16px;border-radius:20px}
  .hero-bottom{bottom:17px}
  .floating-dock{height:58px;grid-template-columns:50px 1fr 122px}
  .floating-dock>a:last-child{height:46px}
  .signal-copy h2{font-size:clamp(50px,14.8vw,61px)}
  .signal-orb{width:74vw;height:74vw;right:-18vw;bottom:105px}
  .story-stage{height:680px}
  .device-wrap{transform:scale(.6);margin-left:28vw}
  .story-copy{padding:70px 18px}
  .story-copy article{min-height:530px}
  .story-copy h3{font-size:41px}
  .product-lab,.how,.proof-section,.faq{padding-top:76px;padding-bottom:76px}
  .lab-head h2,.how-title h2,.faq-title h2{font-size:49px}
  .lab-card{min-height:390px;padding:28px 20px}
  .lab-symbol{font-size:132px}
  .lab-card h3{font-size:42px}
  .steps article{min-height:250px}
  .proof-copy h2{font-size:42px}
  .stats strong{font-size:61px}
  .download{min-height:820px;padding-top:86px;padding-bottom:86px}
  .download-copy h2{font-size:51px}
}

/* Balanced composition pass */
.hero{height:900px;min-height:760px;overflow:hidden}
.hero-copy{position:relative;top:auto;width:46%;height:100%;padding:150px 0 120px 4vw;justify-content:center}
.hero .eyebrow{order:1;margin:0 0 25px}
.hero h1{order:2;position:static;width:auto;max-width:720px;margin:0;font-size:clamp(64px,7.1vw,108px);line-height:.84;white-space:normal}
.hero h1 em{margin-left:0}
.hero-intro{max-width:500px;margin:30px 0 24px;font-size:15px}
.hero-object{top:0;right:0;width:55%;height:100%;transform:none}
.hero-phone{left:23%;top:17%;width:300px;height:610px;transform:perspective(1100px) rotateY(-14deg) rotateZ(5deg)}
.object-ring{left:42%;top:50%}
.card-store{right:4vw;top:25%}
.card-live{right:5vw;bottom:15%}
.hero-bottom{bottom:24px}
.floating-dock{display:none!important}

.signal-section{height:820px;min-height:760px}
.story{min-height:0;grid-template-columns:48% 52%;align-items:start}
.story-stage{position:relative;top:auto;height:920px;min-height:920px}
.story-heading{top:70px;left:5vw;width:52%}
.story-copy{padding:80px 5vw 80px 4vw;display:grid;grid-template-columns:1fr 1fr;gap:0 34px}
.story-copy article{min-height:390px;padding:38px 0;justify-content:flex-start}
.story-copy h3{font-size:clamp(34px,3.2vw,52px);margin:20px 0}
.story-copy p{font-size:13px}
.story-index{bottom:55px}

@media(min-width:601px) and (max-width:960px){
  .hero{height:1080px;min-height:1080px}
  .hero-copy{width:100%;height:auto;padding:125px 5vw 0;justify-content:flex-start}
  .hero h1{font-size:clamp(66px,10.8vw,90px);max-width:90%}
  .hero-intro{max-width:470px}
  .hero-object{top:450px;width:100%;height:600px}
  .hero-phone{left:50%;top:15px;transform:translateX(-50%) perspective(1000px) rotateY(-10deg) rotateZ(4deg);width:270px;height:550px}
  .object-ring{left:50%;top:45%}
  .card-live{right:7vw;bottom:13%}
  .hero-bottom{bottom:18px}
  .story{display:block}
  .story-stage{height:760px;min-height:760px}
  .story-heading{width:46%}
  .story-copy{grid-template-columns:1fr 1fr;padding:70px 5vw}
  .story-copy article{min-height:330px}
}

@media(max-width:600px){
  .site-header{background:linear-gradient(180deg,rgba(8,8,10,.92),transparent)}
  .hero{height:1040px;min-height:1040px}
  .hero-copy{width:100%;height:auto;padding:104px 18px 0;justify-content:flex-start}
  .hero .eyebrow{margin-bottom:18px}
  .hero h1{width:100%;max-width:100%;font-size:clamp(50px,14.5vw,60px);line-height:.82}
  .hero-intro{margin:24px 0 20px;font-size:13px}
  .hero-actions{flex-direction:row;align-items:center;gap:10px}
  .primary-btn,.text-btn{gap:15px;font-size:10px}
  .hero-object{top:500px;width:100%;height:500px}
  .hero-phone{left:50%;top:6px;width:218px;height:445px;transform:translateX(-50%) perspective(850px) rotateY(-9deg) rotateZ(4deg)}
  .hero-phone-screen{padding:26px 15px}
  .hero-phone-screen h3{font-size:24px}
  .hp-grid i{height:57px}
  .object-ring{left:50%;top:45%}
  .ring-one{width:410px;height:410px}
  .ring-two{width:305px;height:305px}
  .ring-three{width:215px;height:215px}
  .card-live{right:14px;bottom:24px;width:120px;padding:14px}
  .card-live strong{font-size:25px}
  .hero-bottom{display:none}
  .signal-section{height:760px;min-height:760px}
  .story-stage{height:640px;min-height:640px}
  .story-heading{top:42px;width:75%}
  .story-copy{display:block;padding:55px 18px}
  .story-copy article{min-height:320px;padding:48px 0}
  .story-copy h3{font-size:38px}
}

/* Final layout precision: keep the hero stable and restore sequential storytelling. */
.hero-copy.reveal{opacity:1;transform:none}
.hero h1{text-wrap:balance}

@media(min-width:961px){
  .hero{height:clamp(760px,100svh,940px);min-height:760px}
  .hero-phone{left:12%}
  .story{
    min-height:0;
    grid-template-columns:52% 48%;
    align-items:start;
  }
  .story-stage{
    position:sticky;
    top:0;
    height:100svh;
    min-height:760px;
  }
  .story-heading{
    top:8vh;
    left:4vw;
    width:min(43%,470px);
    z-index:4;
  }
  .story-heading h2{
    font-size:clamp(38px,3.25vw,56px);
    text-wrap:balance;
  }
  .story-stage>.device-wrap{
    position:absolute;
    top:50%;
    right:4vw;
    margin:0;
    transform:translateY(-45%);
  }
  .story-copy{
    display:block;
    padding:18vh 5vw 18vh 4vw;
  }
  .story-copy article{
    min-height:clamp(520px,62vh,680px);
    padding:clamp(48px,6vh,72px) 0;
    justify-content:center;
  }
  .story-copy h3{
    max-width:12ch;
    font-size:clamp(42px,4vw,66px);
    overflow-wrap:normal;
    text-wrap:balance;
  }
  .story-copy p{max-width:42ch}
}

@media(min-width:961px) and (max-width:1240px){
  .story{grid-template-columns:50% 50%}
  .story-heading{width:72%;top:6vh}
  .story-heading h2{font-size:clamp(34px,4.4vw,48px)}
  .story-stage>.device-wrap{
    top:58%;
    right:50%;
    transform:translate(50%,-42%) scale(.82);
  }
  .story-copy h3{font-size:clamp(38px,4.4vw,54px)}
}

/* Bright myKedai theme */
:root{
  --ink:#241316;
  --muted:#746268;
  --black:#fff9f7;
  --panel:#ffffff;
  --line:rgba(120,20,38,.16);
}
html,body,main{background:#fff9f7;color:var(--ink)}
.site-header nav{color:#5c4b50}
.site-header nav a:hover{color:#d4142d}
.site-header .brand,footer .brand{display:inline-flex;width:max-content;padding:8px 10px;border-radius:10px;background:#d71931;box-shadow:0 10px 28px rgba(177,17,42,.16)}
.lang-switch{background:rgba(255,255,255,.72);border-color:rgba(130,24,42,.14);box-shadow:0 8px 30px rgba(105,22,39,.08)}
.lang-switch button{color:#8a747a}
.round-cta{background:rgba(255,255,255,.78);border-color:rgba(130,24,42,.15);color:#421c24;box-shadow:0 12px 35px rgba(105,22,39,.08)}
.round-cta span{background:#e71935;color:white}

.hero{background:#fff9f7}
.hero:before{background:radial-gradient(ellipse at 72% 25%,rgba(173,132,255,.34),transparent 35%),radial-gradient(ellipse at 64% 58%,rgba(255,73,95,.24),transparent 35%),linear-gradient(120deg,#fffdfc 36%,#fff1f2 72%,#f5efff)}
.hero-grid{opacity:.32;background-image:linear-gradient(rgba(112,28,45,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(112,28,45,.06) 1px,transparent 1px)}
.kinetic-canvas{opacity:.42;mix-blend-mode:multiply}
.hero h1{color:#231316}
.eyebrow{color:#6b555b}
.hero-intro{color:#68565c}
.primary-btn{background:#e71935;color:white;box-shadow:0 14px 34px rgba(205,24,49,.22)}
.text-btn{border-color:rgba(111,35,48,.2);background:rgba(255,255,255,.62);color:#4f343b}
.object-ring{border-color:rgba(101,48,83,.16)}
.hero-float-card{background:rgba(255,255,255,.78);border-color:rgba(111,35,48,.14);color:#351d23;box-shadow:0 25px 70px rgba(98,42,66,.13)}
.card-store small,.card-live small{color:#79666c}
.hero-bottom{color:#735f65}

.hero-phone-screen.is-screenshot,.device-screen.is-screenshot{padding:0;background:#fff;overflow:hidden}
.app-screenshot{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#fff}
.hero-mockup{position:absolute;left:-20%;top:-8%;display:block;width:145%;max-width:none;height:auto;filter:drop-shadow(-34px 42px 50px rgba(72,44,61,.2));transform:translateY(calc(var(--scroll-y)*.015px))}
@media(min-width:601px) and (max-width:960px){.hero-mockup{left:-15%;top:-11%;width:130%}}
@media(max-width:600px){.hero-mockup{left:-43%;top:-9%;width:186%}}
.device-glow{background:radial-gradient(circle,rgba(255,68,93,.28),rgba(148,111,255,.18) 46%,transparent 70%)}

.signal-section{color:#2b171c;background:radial-gradient(circle at 75% 45%,rgba(255,255,255,.72),transparent 24%),radial-gradient(circle at 72% 48%,rgba(149,110,255,.28),transparent 35%),linear-gradient(135deg,#ffecee,#fff8f4 48%,#f2edff)}
.signal-copy h2 em,.signal-copy>p{color:#705d63}
.signal-index{color:#9b727c}
.signal-readout{color:#45252d;border-color:rgba(117,29,46,.18)}
.signal-readout small{color:#7b656b}

.story{background:#fffaf8}
.story-stage{background:radial-gradient(circle at 64% 55%,rgba(255,68,93,.22),transparent 34%),radial-gradient(circle at 58% 54%,rgba(130,96,245,.16),transparent 52%),#fff5f3}
.story-copy article{border-color:rgba(118,31,48,.15)}
.story-copy p{color:#756269}
.story-index span{color:#8d777d}

.how{background:linear-gradient(180deg,#fff7f5,#fffdfc);color:#281519}
.how-title{border-color:rgba(118,31,48,.15)}
.steps article{border-color:rgba(118,31,48,.14)}
.steps p{color:#77656b}
.step-dot{border-color:rgba(118,31,48,.2);background:#fff}

.download{color:#281519;background:radial-gradient(circle at 76% 44%,rgba(152,113,255,.31),transparent 31%),radial-gradient(circle at 28% 55%,rgba(255,74,96,.18),transparent 38%),#fff6f4}
.download-copy>span{color:#715e64}
.download-rings{border-color:rgba(109,46,61,.16);box-shadow:0 0 0 7vw rgba(217,31,57,.035),0 0 0 14vw rgba(136,98,235,.035)}
footer{background:#fffdfc;color:#2f1a20;border-color:#eadadd}
footer>p,footer>small{color:#78656b}

.signal-section{
  height:auto;
  min-height:820px;
  padding:120px 5vw 90px;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);
  gap:7vw;
  align-items:center;
}
.signal-copy{width:auto}
.signal-copy h2{font-size:clamp(66px,7.7vw,118px);line-height:.82}
.signal-copy h2 em{margin-left:0;color:#d9233d}
.signal-copy>p{max-width:520px;margin:36px 0 0;color:#705d63}
.country-grid{position:relative;z-index:3;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.country-card{min-height:76px;padding:14px 17px;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:12px;border:1px solid rgba(121,32,50,.12);border-radius:18px;background:rgba(255,255,255,.78);box-shadow:0 18px 45px rgba(111,43,70,.09);backdrop-filter:blur(14px)}
.country-card>span{font-size:34px;line-height:1;filter:drop-shadow(0 5px 8px rgba(70,28,36,.12))}
.country-card>small{order:3;font-size:8px;color:#b98d96}
.country-card>b{font-size:14px;font-weight:600;color:#382027}

@media(max-width:600px){
  .site-header{background:linear-gradient(180deg,rgba(255,249,247,.96),rgba(255,249,247,0))}
}

@media(max-width:960px){
  .signal-section{height:auto;min-height:0;padding:110px 5vw 80px;grid-template-columns:1fr;gap:48px;align-items:start}
  .signal-copy{margin:0;width:100%}
  .signal-copy h2{font-size:clamp(58px,10vw,86px)}
  .signal-copy>p{margin:28px 0 0}
  .country-grid{width:100%;grid-template-columns:1fr 1fr}
}

@media(max-width:600px){
  .signal-section{padding:96px 18px 70px;gap:38px}
  .signal-index{top:36px;left:18px}
  .signal-copy h2{font-size:clamp(48px,14.5vw,60px);line-height:.86}
  .country-grid{gap:9px}
  .country-card{min-height:70px;padding:11px 12px;grid-template-columns:38px 1fr;gap:8px;border-radius:14px}
  .country-card>span{font-size:28px}
  .country-card>small{display:none}
  .country-card>b{font-size:12px}
}

/* Official myKedai benefits composition */
.how{padding:105px 0 0;background:#fff;color:#211719;overflow:hidden}
.how-title{display:block;padding:0 5vw 62px;border:0;text-align:center}
.how-title p{position:relative;display:inline-block;margin:0 0 22px;padding-top:27px;color:#d4142d;font-size:8px;font-weight:800;letter-spacing:.14em}
.how-title p:before{content:"";position:absolute;top:0;left:50%;width:18px;height:18px;border-radius:50%;background:#c90821;transform:translateX(-50%);box-shadow:0 7px 0 -5px #c90821}
.how-title h2{max-width:none;margin:0;font-size:clamp(38px,4.2vw,64px);line-height:.95;letter-spacing:-.055em;font-weight:700;text-wrap:balance}
.benefit-stage{position:relative;min-height:900px;display:grid;grid-template-columns:56% 44%;align-items:center;isolation:isolate}
.benefit-stage:after{content:"";position:absolute;z-index:-1;right:-11%;top:17%;width:43%;height:72%;border-radius:52% 0 0 48% / 34% 0 0 66%;background:#edd1ce;transform:rotate(-7deg)}
.benefit-art{position:relative;align-self:stretch;min-height:900px}
.benefit-art:before{content:"";position:absolute;inset:7% 18% 0 0;border-radius:0 145px 145px 0;background:linear-gradient(145deg,#d30720,#a80018);box-shadow:inset -55px -80px 110px rgba(112,0,18,.14)}
.benefit-art:after{content:"";position:absolute;left:-14%;top:-4%;width:49%;aspect-ratio:1;border-radius:50%;background:#bd001a;box-shadow:0 33vw 0 3vw rgba(177,0,25,.7)}
.benefit-art .device-wrap{position:absolute;z-index:3;left:43%;top:12%;margin:0;transform:translateX(-50%) scale(1.08)}
.benefit-art .device{background:#f8f8f8;border-color:#d5d2d2;box-shadow:0 38px 80px rgba(66,7,20,.24)}
.benefit-dots{position:absolute;z-index:2;left:2.5vw;bottom:11%;width:110px;height:180px;opacity:.58;background-image:radial-gradient(#ff3147 2px,transparent 2.5px);background-size:13px 13px;transform:rotate(-6deg)}
.benefit-list{position:relative;z-index:3;display:grid;gap:27px;padding:75px 7vw 75px 10px}
.benefit-list article{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start}
.benefit-list article>span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#cf0824;color:#fff;font-size:8px;font-weight:800}
.benefit-list h3{margin:1px 0 7px;font-size:17px;line-height:1.1;letter-spacing:-.025em}
.benefit-list p{max-width:42ch;margin:0;color:#6e6063;font-size:12px;line-height:1.55}

@media(max-width:960px){
  .how{padding-top:88px}
  .how-title{padding:0 5vw 45px}
  .benefit-stage{min-height:780px;grid-template-columns:52% 48%}
  .benefit-art{min-height:780px}
  .benefit-art:before{inset:8% 10% 0 0;border-radius:0 105px 105px 0}
  .benefit-art .device-wrap{left:48%;top:13%;transform:translateX(-50%) scale(.86)}
  .benefit-list{gap:21px;padding:55px 4vw 55px 8px}
}

@media(max-width:600px){
  .how{padding-top:76px}
  .how-title{padding:0 18px 42px}
  .how-title h2{font-size:43px}
  .benefit-stage{display:block;min-height:0}
  .benefit-stage:after{right:-34%;top:47%;width:92%;height:48%}
  .benefit-art{min-height:570px}
  .benefit-art:before{inset:5% 19% 0 0;border-radius:0 90px 90px 0}
  .benefit-art:after{left:-24%;top:-6%;width:70%;box-shadow:0 400px 0 20px rgba(177,0,25,.65)}
  .benefit-art .device-wrap{left:49%;top:3%;transform:translateX(-50%) scale(.77)}
  .benefit-dots{left:8px;bottom:9%;width:88px;height:130px;background-size:11px 11px}
  .benefit-list{gap:24px;padding:62px 24px 82px}
  .benefit-list article{grid-template-columns:30px 1fr;gap:12px}
  .benefit-list h3{font-size:16px}
}

/* Brand grid in the Reload product panel */
.lab-card-copy{position:relative;z-index:2}
.brand-showcase{
  position:absolute;
  z-index:1;
  top:54px;
  right:54px;
  display:grid;
  gap:12px;
}
.operator-showcase{width:min(64%,620px);grid-template-columns:repeat(4,minmax(0,1fr))}
.brand-logo-card{
  height:82px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:17px;
  background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.18);
}
.operator-showcase .brand-logo-card{padding:11px}
.brand-logo-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

@media(max-width:960px){
  .brand-showcase{top:42px;right:42px}
  .operator-showcase{width:min(68%,610px)}
}

@media(max-width:600px){
  .lab-card:has(.brand-showcase){min-height:500px;padding-top:272px}
  .brand-showcase{top:24px;left:20px;right:20px;width:auto;gap:8px}
  .operator-showcase{grid-template-columns:repeat(3,minmax(0,1fr))}
  .brand-logo-card{height:66px;border-radius:12px}
  .operator-showcase .brand-logo-card{padding:8px}
}

/* Official store badges in the hero */
.app-badge-link{display:block;flex:0 0 auto;border-radius:8px;transition:transform .2s ease,filter .2s ease}
.app-badge-link:hover{transform:translateY(-2px);filter:drop-shadow(0 10px 16px rgba(91,19,39,.18))}
.app-badge-link:focus-visible{outline:3px solid rgba(231,25,53,.35);outline-offset:4px}
.app-badge-link img{display:block;width:clamp(150px,13vw,180px);height:auto}

@media(max-width:600px){
  .hero-actions{flex-direction:row;align-items:center;gap:10px}
  .app-badge-link img{width:min(42vw,160px)}
}

/* High-contrast header call to action */
.site-header .round-cta{
  background:#e71935;
  border-color:#e71935;
  color:#fff;
  box-shadow:0 12px 30px rgba(192,18,43,.28);
}
.site-header .round-cta:hover{background:#c90f29;border-color:#c90f29;color:#fff;transform:translateY(-1px)}
.site-header .round-cta:focus-visible{outline:3px solid rgba(231,25,53,.28);outline-offset:4px}

/* Company details in the footer */
footer{grid-template-columns:1.1fr 1.35fr .9fr auto;align-items:start;padding-top:64px}
.footer-brand{display:block}
.footer-brand>p{max-width:270px;margin:20px 0 0;color:#78656b;font-size:11px;line-height:1.6}
.footer-contact{display:grid;gap:14px;margin:0;font-style:normal}
.footer-contact p{display:grid;grid-template-columns:minmax(150px,.95fr) 1fr;gap:4px 18px;margin:0;font-size:11px;line-height:1.45}
.footer-contact span{color:#957c83}
.footer-contact strong,.footer-contact a{color:#351d23;font-weight:650}
.footer-contact a:hover{color:#d4142d}
.footer-contact small{grid-column:2;color:#957c83;font-size:8px;letter-spacing:.04em}
.footer-nav{display:flex;flex-direction:column;align-items:flex-start;gap:12px;font-size:10px}
.footer-nav a:hover{color:#d4142d}
.footer-rights{color:#78656b;font-size:8px;white-space:nowrap}

@media(max-width:960px){
  footer{grid-template-columns:1fr 1.35fr;gap:42px 56px}
  .footer-rights{align-self:end}
}

@media(max-width:600px){
  footer{grid-template-columns:1fr;padding:46px 18px 82px;gap:34px}
  .footer-contact p{grid-template-columns:1fr;gap:4px}
  .footer-contact small{grid-column:1}
  .footer-nav{flex-direction:row;flex-wrap:wrap;gap:12px 18px}
  .footer-rights{white-space:normal}
}