:root{--green:#0dcd62;--ink:#121512;--muted:#687068;--line:#dfe4df;--surface:#f3f5f3}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;color:var(--ink);background:#fff;font-family:Arial,Tahoma,sans-serif;font-size:16px;line-height:1.6}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #008c40;outline-offset:5px}.skip{position:absolute;top:-100px}.skip:focus{top:0;background:white;z-index:20}header{height:100px;padding:0 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#ffffffed;position:sticky;top:0;z-index:10;backdrop-filter:blur(14px)}.brand{display:flex;flex-direction:column;width:116px;align-items:center;gap:4px;direction:ltr}.brand img{width:116px;height:auto}.brand span{font-size:10px;font-weight:800;letter-spacing:3px}nav{display:flex;gap:38px;font-size:14px}nav a:hover{color:#008c40}.language{border:1px solid var(--line);background:white;padding:9px 16px;border-radius:30px;font-size:14px}.language span{margin-inline-start:12px}.hero{display:grid;grid-template-columns:1fr 1fr;min-height:650px;padding:55px 6% 35px;gap:50px;align-items:center}.eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;margin:0 0 24px;direction:inherit}h1{font-size:clamp(54px,6.5vw,94px);line-height:1.12;letter-spacing:-4px;margin:0 0 28px;font-weight:700}html[dir=rtl] h1{letter-spacing:-2px;line-height:1.3;font-size:clamp(48px,5.8vw,82px)}.intro{color:var(--muted);font-size:18px;line-height:1.8;margin-bottom:30px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:45px;padding:16px 26px;border-radius:5px;background:var(--green);font-weight:700;font-size:15px;transition:transform .25s,background .25s}.button:hover{background:#15e06e;transform:translateY(-3px)}.hero-facts{display:flex;gap:35px;margin-top:50px}.hero-facts span{display:flex;flex-direction:column;border-inline-end:1px solid var(--line);padding-inline-end:28px}.hero-facts span:last-child{border:0}.hero-facts b{font-size:23px;direction:ltr}.hero-facts small{font-size:12px;color:var(--muted)}.hero-visual{position:relative;background:#f0f4f0;border-radius:12px;min-height:520px;display:flex;align-items:center;justify-content:center;overflow:hidden;direction:ltr}.giant{position:absolute;top:-50px;font-size:270px;font-weight:800;color:#dce8df;letter-spacing:-22px}.giant span{font-size:140px}.hero-visual img{width:73%;max-width:440px;position:relative;mix-blend-mode:multiply;transform:rotate(-9deg);transition:transform .6s}.hero-visual:hover img{transform:rotate(-5deg) translateY(-8px)}.visual-label{position:absolute;bottom:64px;left:30px;right:30px;display:flex;justify-content:space-between;font-size:12px;letter-spacing:1px}.visual-caption{position:absolute;bottom:24px;left:30px;font-size:18px;font-weight:700}.ribbon{display:flex;justify-content:space-around;background:var(--ink);color:white;padding:21px 6%;font-size:12px;letter-spacing:2px;gap:20px;direction:ltr}.ribbon span:first-child{color:var(--green)}.section{padding:100px 6%}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:36px}h2{font-size:clamp(32px,3.6vw,52px);line-height:1.25;letter-spacing:-1px;margin:0}.section-heading>p{max-width:300px;color:var(--muted)}.filters{display:flex;gap:9px;margin-bottom:30px}.filters button{border:1px solid var(--line);background:white;border-radius:30px;padding:10px 23px;font-size:14px}.filters button.active{background:var(--ink);color:#fff;border-color:var(--ink)}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.product-card{min-width:0}.product-image{position:relative;background:var(--surface);height:270px;border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;width:100%;border:0}.product-image img{width:80%;height:80%;object-fit:contain;mix-blend-mode:multiply;transition:transform .4s}.product-image:hover img{transform:scale(1.07)}.product-image .spec{position:absolute;top:14px;inset-inline-start:14px;background:white;border-radius:4px;font-size:12px;padding:3px 9px;direction:ltr;z-index:1}.product-card h3{font-size:17px;margin:19px 0 4px}.product-card p{font-size:14px;color:var(--muted);margin:0}.product-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:20px;font-size:12px}.detail-button{border:0;background:none;font-size:14px;border-bottom:1px solid var(--ink);padding:4px 0}.feature-section{background:var(--ink);color:white}.feature-section .eyebrow{color:var(--green)}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin-top:55px}.feature-grid article{border-top:1px solid #3a403a;padding-top:25px}.feature-grid b{font-size:36px;color:var(--green);direction:ltr;display:block}.feature-grid h3{font-size:20px}.feature-grid p{color:#b7c0b7}.best{background:var(--surface)}.best-content{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}.best-content img{width:75%;max-height:330px;object-fit:contain;mix-blend-mode:multiply;margin:auto}.best-content p{color:var(--muted);max-width:460px}.badge{display:inline-block;border:1px solid #b9c6bb;border-radius:30px;padding:4px 12px;font-size:12px}.compat-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}.compat-layout p{color:var(--muted)}.compat-box{background:var(--surface);padding:32px;border-radius:10px}.compat-box label{display:block;margin-bottom:12px}.compat-box select{width:100%;padding:14px;border:1px solid #bec7be;border-radius:5px;background:white;font:inherit;color:var(--ink)}#compat-result{min-height:95px;margin-top:20px;font-size:15px}.cta{margin:0 6% 90px;padding:60px;background:var(--green);border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:30px}.cta .button{background:var(--ink);color:white}.cta p{margin-bottom:0}footer{border-top:1px solid var(--line);padding:40px 6%;display:flex;align-items:center;justify-content:space-between;gap:30px}footer p,footer a:not(.brand){font-size:14px}footer small{font-size:12px;color:var(--muted)}dialog{max-width:850px;width:90%;border:0;border-radius:14px;padding:45px;color:var(--ink)}dialog::backdrop{background:#07130bb3;backdrop-filter:blur(5px)}.close{position:absolute;inset-inline-end:16px;top:8px;border:0;background:none;font-size:30px}.detail-layout{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center}.detail-layout img{width:100%;object-fit:contain}.detail-layout h2{font-size:28px}.detail-layout dl{font-size:14px}.detail-layout dt{color:var(--muted)}.detail-layout dd{margin:0 0 12px;direction:ltr;text-align:start}.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s}.reveal.visible{opacity:1;transform:none}@media(max-width:1000px){.hero{gap:25px;min-height:550px}.hero-visual{min-height:420px}.giant{font-size:210px}.giant span{font-size:90px}.hero-facts{gap:18px}.hero-facts span{padding-inline-end:15px}.product-grid{grid-template-columns:repeat(2,1fr)}footer{flex-wrap:wrap}.compat-layout{gap:35px}}@media(max-width:650px){header{height:82px;padding:0 5%}.brand,.brand img{width:95px}nav{gap:14px}nav a{font-size:12px}nav a:nth-child(2){display:none}.language{padding:7px 10px}.language span{display:none}.hero{grid-template-columns:1fr;padding:40px 5%;gap:35px}.hero-copy{max-width:100%}h1,html[dir=rtl] h1{font-size:52px}.hero-facts{margin-top:30px}.hero-visual{min-height:380px}.hero-visual img{max-width:290px}.giant{top:-30px;font-size:220px}.ribbon{flex-wrap:wrap;font-size:10px;gap:12px 25px}.section{padding:65px 5%}.section-heading{display:block}.section-heading>p{max-width:none}.filters button{padding:9px 16px}.product-grid{gap:25px 14px}.product-image{height:190px}.product-card h3{font-size:16px}.product-bottom{gap:10px;flex-wrap:wrap}.feature-grid{grid-template-columns:1fr;gap:20px}.best-content,.compat-layout,.detail-layout{grid-template-columns:1fr}.best-content img{max-height:250px}.cta{margin:0 5% 60px;padding:30px;display:block}.cta .button{margin-top:25px}.cta h2{font-size:30px}footer{padding:30px 5%;gap:20px}footer small{width:100%}dialog{padding:40px 24px;max-height:90vh}.detail-layout img{max-height:210px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}}
.brand span{white-space:nowrap;font-size:9px;letter-spacing:2.5px}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,Tahoma,sans-serif}

.new-badge{display:inline-block;background:#e0f8e9;color:#05652d;font-size:12px;padding:3px 10px;border-radius:20px;margin-top:14px}.new-badge+h3{margin-top:8px}.product-gallery{min-width:0}.product-gallery>img{height:340px;object-fit:contain;width:100%;max-height:none}.gallery-thumbs{display:flex;justify-content:center;gap:12px;margin-top:16px}.gallery-thumbs button{width:74px;height:74px;background:white;border:1px solid var(--line);border-radius:6px;padding:5px}.gallery-thumbs button[aria-pressed=true]{border:2px solid #07883e}.gallery-thumbs img{width:100%;height:100%;object-fit:contain}.product-description{font-size:15px;color:var(--muted)}@media(max-width:650px){.product-gallery>img{height:250px}}
/* Refined product presentation and motion */
:root{--ease:cubic-bezier(.22,1,.36,1)}
header{transition:box-shadow .35s,height .35s;background:#ffffffed}header.scrolled{box-shadow:0 8px 32px #13291b0a}
.hero{padding-top:64px;padding-bottom:64px;gap:5vw}.hero-copy{animation:editorial-in .9s var(--ease) both}.hero-visual{background:radial-gradient(ellipse at 50% 42%,#fff 5%,#f3f6f3 55%,#e8eee9 100%);border:1px solid #e3eae3;border-radius:24px;isolation:isolate;animation:editorial-in 1.1s var(--ease) .1s both;min-height:560px}.hero-visual .giant{top:0;font-size:245px;color:#dce7dd99;letter-spacing:-20px;line-height:1.15}.hero-visual img{width:94%;max-width:570px;transform:translate3d(var(--px,0px),var(--py,0px),0) rotate(-8deg);transition:transform 1s var(--ease);will-change:transform}.hero-visual:hover img{transform:translate3d(var(--px,0px),var(--py,0px),0) rotate(-5deg) scale(1.035)}.visual-label{bottom:70px;left:32px;right:32px;border-top:1px solid #cdd8cf;padding-top:18px}.visual-caption{bottom:26px;left:32px}.hero-facts small{font-size:13px}
.button{border-radius:999px;padding:17px 28px;box-shadow:0 8px 20px #0dcd6217;transition:transform .45s var(--ease),box-shadow .45s,background .3s}.button:hover{transform:translateY(-4px);box-shadow:0 12px 30px #0dcd622c}.button>span:last-child{transition:transform .4s var(--ease)}.button:hover>span:last-child{transform:translate(3px,-3px)}
.product-grid{gap:24px}.product-card{padding:10px 10px 20px;border:1px solid #e8ece8;border-radius:18px;background:#fff;transition:transform .5s var(--ease),box-shadow .5s,border-color .5s;animation:editorial-in .6s var(--ease) both;animation-delay:calc(var(--i,0)*65ms)}.product-card:hover{transform:translateY(-7px);box-shadow:0 20px 50px #1735210c;border-color:#bdcec0}.product-image{height:295px;border-radius:12px;background:radial-gradient(ellipse at 50% 40%,#fff,#f0f3f0);isolation:isolate}.product-image img{width:94%;height:94%;transition:transform .8s var(--ease),opacity .45s;transform:scale(1);object-fit:contain}.product-image:hover img{transform:scale(1.075) translateY(-3px)}.product-image .spec{top:13px;inset-inline-start:13px;border:1px solid #e5eae5;background:#ffffffda;border-radius:20px;font-size:12px;padding:4px 10px;backdrop-filter:blur(6px)}.product-card h3,.product-card>p,.product-bottom,.product-card>.new-badge{margin-inline:10px}.product-card h3{min-height:54px;display:flex;align-items:center}.product-card>p{min-height:44px}.product-bottom{border-top:1px solid var(--line);padding-top:14px}.new-badge{margin-bottom:-5px}.product-card:has(.new-badge) h3{margin-top:8px}.detail-button{transition:color .25s,border-color .25s}.detail-button:hover{color:#00803a;border-color:#00803a}.filters button{transition:background .3s,color .3s,transform .3s}.filters button:hover{transform:translateY(-2px)}
.best{background:#f5f7f5}.best-content{gap:7vw}.best-content>img{width:100%;max-height:470px;border-radius:20px;mix-blend-mode:normal;box-shadow:0 24px 60px #0b1e2314}.feature-grid article{transition:transform .5s var(--ease)}.feature-grid article:hover{transform:translateY(-5px)}.reveal{transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}.feature-grid article:nth-child(2){transition-delay:.08s}.feature-grid article:nth-child(3){transition-delay:.16s}
dialog{width:min(1000px,94vw);max-width:1000px;max-height:90vh;border:1px solid #ffffff80;border-radius:24px;padding:48px;box-shadow:0 40px 120px #0003}dialog[open]{animation:dialog-in .4s var(--ease)}dialog::backdrop{background:#07110bc4}.detail-layout{gap:45px}.product-gallery{background:radial-gradient(ellipse at center,#fff,#f3f6f3);padding:18px;border-radius:18px}.product-gallery>img{height:380px;mix-blend-mode:multiply;cursor:zoom-in;transition:transform .6s var(--ease);transform-origin:center}.product-gallery.zoomed>img{transform:scale(1.35);cursor:zoom-out}.product-gallery{overflow:hidden}.gallery-thumbs{position:relative;z-index:1}.gallery-thumbs button{transition:transform .3s,border-color .3s;box-shadow:0 3px 12px #00000005}.gallery-thumbs button:hover{transform:translateY(-3px)}.close{background:#f0f3f0;border-radius:50%;width:36px;height:36px;font-size:25px;line-height:1;top:12px;inset-inline-end:12px;z-index:2}.detail-layout dl{display:grid;grid-template-columns:auto 1fr;gap:12px 20px;border-top:1px solid var(--line);padding-top:20px}.detail-layout dd{margin:0;text-align:end}.detail-layout dt{font-size:13px}.cta{border-radius:20px}
@keyframes editorial-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes dialog-in{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}@keyframes photo-in{from{opacity:.2;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
@media(min-width:1001px){.product-card h3{font-size:16px}}@media(max-width:1000px){.hero-visual{min-height:470px}.hero-visual .giant{font-size:190px}.product-image{height:300px}}@media(max-width:650px){.hero{padding:38px 5% 45px;gap:30px}.hero-visual{min-height:410px;border-radius:18px}.hero-visual img{max-width:400px}.hero-visual .giant{font-size:215px}.product-card{padding:6px 6px 14px;border-radius:14px}.product-image{height:205px}.product-card h3{font-size:15px;min-height:66px;line-height:1.5}.product-card h3,.product-card>p,.product-bottom{margin-inline:5px}.product-card>p{font-size:13px;min-height:42px}.product-bottom{font-size:11px}.product-grid{gap:14px}.detail-button{font-size:13px}.best-content>img{max-height:380px}.detail-layout{gap:24px}dialog{padding:46px 22px 26px}.product-gallery>img{height:275px}.product-gallery{padding:12px}.hero-facts small{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hero-visual img{will-change:auto;transform:none!important}.reveal{opacity:1;transform:none}.product-card:hover{transform:none}}
.hero-visual img{width:120%;max-width:none;flex-shrink:0}.product-card:has([data-model="NB-PC003"]) .product-image img{width:135%;height:135%;max-width:none}.product-card{position:relative}.product-card>.new-badge{position:absolute;top:49px;inset-inline-start:14px;z-index:2;margin:0}.product-card:has(.new-badge) h3{margin-top:19px}

/* Transparent high-detail hero, sized without excessive enlargement. */
.hero-visual img{width:96%;max-width:590px;mix-blend-mode:normal;filter:drop-shadow(0 22px 18px #10211720);transform:translate3d(var(--px,0px),var(--py,0px),0) rotate(-3deg);transition:transform .75s cubic-bezier(.22,1,.36,1)}
.hero-visual:hover img{transform:translate3d(var(--px,0px),var(--py,0px),0) rotate(-1deg) scale(1.025)}
.product-card:has([data-model="NB-PC003"]) .product-image img{width:96%;height:96%;mix-blend-mode:normal}
@media(max-width:650px){.hero-visual img{width:96%;max-width:390px}}
@media(prefers-reduced-motion:reduce){.hero-visual img,.hero-visual:hover img{transform:none!important}}

/* Charging intro: the hero "charges" before the charger fully appears. */
.hero-copy{animation:hero-copy-in .9s var(--ease) both}
.hero-visual .giant{text-align:center;font-variant-numeric:tabular-nums}
.hero-facts b{display:inline-block;font-variant-numeric:tabular-nums}
.visual-label::before{content:"";position:absolute;top:-1px;left:0;height:2px;width:calc(var(--charge,1)*100%);background:var(--green);border-radius:2px;box-shadow:0 0 12px #0dcd6299}
.charge-pct{color:#05652d;font-weight:700;font-variant-numeric:tabular-nums}
.hero-visual img{opacity:calc(.25 + var(--charge,1)*.75);transform:translate3d(var(--px,0px),calc(var(--py,0px) + (1 - var(--charge,1))*18px),0) rotate(-3deg)}
.hero-visual::after{content:"";position:absolute;inset:16% 12%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,#0dcd6240,#0dcd6200);opacity:0;transform:scale(.8)}
.hero-visual.charged::after{animation:charged-glow 1.4s var(--ease) forwards}

/* Arabic headings keep natural letter joins; the caption follows its own text direction. */
html[dir=rtl] h1,html[dir=rtl] h2{letter-spacing:0}.visual-caption{unicode-bidi:plaintext}

/* Cable line drawn down the page gutter, plugging into the CTA. */
.cable-line{position:absolute;top:0;left:0;z-index:5;pointer-events:none;overflow:visible}
.cable-line path{fill:none;stroke:var(--green);stroke-linecap:round}
.cable-line .track{stroke-width:2;stroke-opacity:.14}
.cable-line .wire{stroke-width:2.5}
.cable-line .spark{opacity:0;fill:var(--green);filter:drop-shadow(0 0 6px #0dcd62);transition:opacity .3s}
.cable-line .plug{opacity:0;transition:opacity .4s}
.cable-line.plugged .plug{opacity:1}
.cable-line .plug-body{fill:var(--ink)}
.cable-line .plug-tip{fill:#aeb8b0}

@keyframes hero-copy-in{from{opacity:.35;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes charged-glow{0%{opacity:0;transform:scale(.8)}40%{opacity:1;transform:scale(1.06)}100%{opacity:.6;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.hero-visual.charged::after{opacity:.6;transform:none}}

/* Header: logo condenses on scroll (scale only, so the page never shifts). */
.brand{transition:transform .45s var(--ease);transform-origin:center}
header.scrolled .brand{transform:scale(.86)}

/* Product cards: a green "connected" glow replaces the lift. */
.product-card:hover,.product-card:focus-within{transform:none;border-color:#0dcd6266;box-shadow:0 0 0 1px #0dcd6240,0 18px 44px #0dcd621c}
.product-image::before{content:"";position:absolute;inset:10%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,#0dcd6230,#0dcd6200);opacity:0;transform:scale(.7);transition:opacity .5s,transform .7s var(--ease)}
.product-card:hover .product-image::before,.product-card:focus-within .product-image::before{opacity:1;transform:scale(1)}
.product-image .spec{transition:background .35s,color .35s,border-color .35s}
.product-card:hover .spec,.product-card:focus-within .spec{background:var(--green);border-color:var(--green);color:var(--ink)}

/* Filters: one ink pill slides between options. */
.filters{position:relative;isolation:isolate;width:max-content;max-width:100%}
.filters button,.filters button.active{background:transparent;transition:color .35s,border-color .35s}
.filters button.active{color:#fff;border-color:transparent}
.filters button:hover{transform:none;border-color:#b9c6bb}
.filters button.active:hover{border-color:transparent}
.filters .pill{position:absolute;top:0;left:0;z-index:-1;border-radius:30px;background:var(--ink);transition:transform .55s var(--ease),width .55s var(--ease)}

/* Ribbon: continuous slow marquee. */
.ribbon.marquee{display:block;overflow:hidden;padding-inline:0}
.ribbon-track{display:flex;width:max-content;animation:marquee var(--dur,30s) linear infinite}
.ribbon:hover .ribbon-track{animation-play-state:paused}
.ribbon-track span{display:inline-flex;align-items:center;gap:32px;padding-right:32px;white-space:nowrap}
.ribbon-track span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--green)}
.ribbon-track span:first-child{color:inherit}.ribbon-track span:nth-child(4n+1){color:var(--green)}

/* Features: numbers switch on like LEDs; a soft green light follows the cursor. */
.feature-section{position:relative;isolation:isolate;overflow:hidden}
.feature-section::before{content:"";position:absolute;left:var(--gx,50%);top:var(--gy,50%);width:560px;height:560px;z-index:-1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,#0dcd6224,#0dcd6200);opacity:0;transition:opacity .6s;pointer-events:none}
.feature-section:hover::before{opacity:1}
.feature-grid article:hover{transform:none}
.feature-grid b{color:#1f4a30}
.feature-grid article.visible b{animation:led-on .9s both}
.feature-grid article:nth-child(1).visible b{animation-delay:.35s}
.feature-grid article:nth-child(2).visible b{animation-delay:.7s}
.feature-grid article:nth-child(3).visible b{animation-delay:1.05s}


/* Card photo morphs into the product dialog. */
::view-transition-group(product-photo){animation-duration:.6s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
dialog.morphing[open]{animation:none}

@keyframes marquee{to{transform:translateX(calc(-100% / var(--copies,2)))}}
@keyframes led-on{0%{color:#1f4a30;text-shadow:none}25%{color:var(--green);text-shadow:0 0 18px #0dcd6280}40%{color:#1f4a30;text-shadow:none}60%,100%{color:var(--green);text-shadow:0 0 16px #0dcd6266}}
@media(prefers-reduced-motion:reduce){.feature-grid b{color:var(--green)}.filters .pill{transition:none}}

/* CTA powers on when the cable plugs in: dim until connected, then a light wave
   spreads from the plug, the green surges and settles into a breathing glow. */
@property --wave{syntax:"<percentage>";inherits:false;initial-value:0%}
.cta{position:relative;overflow:hidden;--plug-x:0%;transition:box-shadow .8s var(--ease)}
.cta>*{position:relative;z-index:1}
.cta::before,.cta::after{content:"";position:absolute;inset:0;pointer-events:none}
.cta::before{background:#121512;opacity:0;transition:opacity 1.1s .2s var(--ease)}
.cta.awaiting:not(.plugged)::before{opacity:.32;transition-delay:0s}
.cta::after{opacity:0;background:radial-gradient(circle at var(--plug-x) var(--plug-y,50%),#0dcd6200 calc(var(--wave) - 16%),#f2fff7cc var(--wave),#0dcd6200 calc(var(--wave) + 5%))}
.cta.plugged{box-shadow:0 0 0 1px #0dcd6255,0 22px 70px #0dcd6247;animation:cta-surge 1.3s var(--ease),cta-breathe 3.2s 1.3s ease-in-out infinite}
.cta.plugged::after{animation:cta-wave 1.5s .05s cubic-bezier(.3,.7,.4,1)}
.cable-line .flow{stroke:#eafff2;stroke-width:2.5;stroke-dasharray:3 28;opacity:0;transition:opacity .5s}
.cable-line.plugged .flow{opacity:.9;animation:cable-flow .9s linear infinite}
.cable-line .led{fill:#1f4a30;transition:fill .3s}
.cable-line.plugged .led{fill:var(--green);filter:drop-shadow(0 0 4px #0dcd62)}
@keyframes cta-wave{0%{--wave:0%;opacity:1}80%{opacity:.8}100%{--wave:130%;opacity:0}}
@keyframes cta-surge{0%{filter:brightness(1);box-shadow:0 0 0 0 #0dcd6200}25%{filter:brightness(1.16) saturate(1.1);box-shadow:0 0 0 6px #0dcd6233,0 0 90px #0dcd62aa}100%{filter:none;box-shadow:0 0 0 1px #0dcd6255,0 22px 70px #0dcd6247}}
@keyframes cta-breathe{50%{box-shadow:0 0 0 1px #0dcd6277,0 22px 90px #0dcd6266}}
@keyframes cable-flow{to{stroke-dashoffset:-31}}
@media(prefers-reduced-motion:reduce){.cta.awaiting:not(.plugged)::before{opacity:0}}

/* IBM Plex Sans Arabic, self-hosted (SIL OFL, see fonts/OFL.txt). */
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
body,button,select{font-family:"IBM Plex Sans Arabic",-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,sans-serif}
h1,h2,h3,.hero-facts b,.feature-grid b,.button{font-weight:700}
h1{letter-spacing:-2.5px}html[dir=rtl] h1{line-height:1.35}
html[dir=rtl] h2{line-height:1.4}
html[dir=rtl] .intro,html[dir=rtl] p{line-height:1.85}
.product-card h3{font-weight:600}nav a,.filters button,.language{font-weight:500}

/* One vertical rhythm for every section; no loose gaps before the CTA or footer. */
:root{--space:clamp(56px,7vw,92px)}
.section{padding-block:var(--space)}
.hero{padding-bottom:calc(var(--space) * .7)}
#compatibility{padding-bottom:calc(var(--space) * .6)}
.cta{margin-bottom:calc(var(--space) * .6)}
.section-heading{margin-bottom:28px}.feature-grid{margin-top:40px}
#compat-result{min-height:0}
footer{padding-block:32px}

/* Phones */
@media(max-width:650px){
  :root{--space:52px}
  header{height:70px}html{scroll-padding-top:70px}
  .brand,.brand img{width:84px}.brand span{font-size:7.5px;letter-spacing:2px}
  nav{gap:18px}nav a{font-size:13px}
  .hero{padding-top:28px;gap:26px}
  h1,html[dir=rtl] h1{font-size:clamp(38px,11vw,48px);letter-spacing:-1px;margin-bottom:18px}
  html[dir=rtl] h1{letter-spacing:0}
  .intro{font-size:16px;margin-bottom:24px}
  .hero .button{width:100%}
  .hero-facts{margin-top:28px;justify-content:space-between;gap:0}.hero-facts span{flex:1;padding-inline:0 12px;margin-inline-end:12px}
  .hero-facts b{font-size:21px}
  .hero-visual{min-height:360px}.hero-visual .giant{font-size:170px}
  .visual-label{left:20px;right:20px;bottom:58px;font-size:11px}.visual-caption{left:20px;bottom:20px;font-size:16px}
  .ribbon{padding-block:15px}
  h2{font-size:clamp(28px,8vw,34px)}
  .section-heading>p{margin:12px 0 0}
  .filters{width:100%}.filters button{flex:1;padding:9px 8px;font-size:13px}
  .product-image{height:180px}
  .product-card h3{min-height:0;font-size:14px;margin-block:12px 2px}.product-card>p{min-height:0;font-size:12px}
  .product-card>.new-badge{top:auto;bottom:calc(100% - 6px - 180px + 10px);inset-inline-start:16px;font-size:10px;padding:2px 8px}
  .feature-grid{gap:0;margin-top:28px}.feature-grid article{padding-block:20px}.feature-grid b{font-size:30px}.feature-grid h3{margin:6px 0}
  .best-content{gap:28px}.best-content>img{max-height:300px}
  .compat-layout{gap:24px}.compat-box{padding:22px}
  .cta{padding:28px 24px;border-radius:18px}.cta h2{font-size:26px}.cta .button{width:100%;margin-top:20px}
  footer{padding-block:26px;gap:14px}
}
@media(pointer:coarse){.product-card.in-focus{border-color:#0dcd6266;box-shadow:0 0 0 1px #0dcd6240,0 14px 34px #0dcd621c}.product-card.in-focus .product-image::before{opacity:1;transform:scale(1)}.product-card.in-focus .spec{background:var(--green);border-color:var(--green);color:var(--ink)}}

/* Phones: centred hero copy. */
@media(max-width:650px){
  .hero-copy{text-align:center}
  .hero .button{justify-content:center;gap:14px}
  .hero-facts span{align-items:center;padding-inline:6px;margin:0}
}

/* Glass buttons: translucent brand green, frosted, with a soft top highlight,
   the arrow in its own glass bead, and a light sweep on hover. */
.button{position:relative;overflow:hidden;isolation:isolate;padding:9px 9px 9px 0;padding-inline:26px 9px;color:var(--ink);
  background:linear-gradient(135deg,#0dcd62eb,#0dcd62b8);border:1px solid #ffffff8c;
  -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:inset 0 1px 0 #ffffffb3,inset 0 -1px 0 #05652d26,0 10px 28px #0dcd6238,0 2px 6px #0dcd6224}
.button::before{content:"";position:absolute;inset:1px;z-index:-1;border-radius:inherit;background:linear-gradient(180deg,#ffffff66,#ffffff00 58%);pointer-events:none}
.button::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-45%;width:32%;z-index:-1;background:linear-gradient(100deg,#fff0,#ffffff8c,#fff0);transform:skewX(-20deg);transition:left .9s var(--ease);pointer-events:none}
.button:hover{background:linear-gradient(135deg,#15e06ef2,#0dcd62c7);box-shadow:inset 0 1px 0 #ffffffcc,inset 0 -1px 0 #05652d26,0 16px 36px #0dcd6247,0 3px 8px #0dcd622e}
.button:hover::after{left:125%}
.button>span:last-child{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;
  background:#ffffff59;border:1px solid #ffffffa6;box-shadow:inset 0 1px 0 #fff,0 2px 6px #05652d1f}
.cta .button{color:#fff;background:linear-gradient(135deg,#121512eb,#121512bd);border-color:#ffffff38;
  box-shadow:inset 0 1px 0 #ffffff47,inset 0 -1px 0 #00000040,0 10px 28px #1215122e}
.cta .button::before{background:linear-gradient(180deg,#ffffff26,#ffffff00 58%)}
.cta .button:hover{background:linear-gradient(135deg,#1c211ced,#121512c2)}
.cta .button>span:last-child{background:#ffffff1f;border-color:#ffffff47;box-shadow:inset 0 1px 0 #ffffff4d}
@media(max-width:650px){.hero .button,.cta .button{padding-inline:22px 9px;justify-content:center;gap:14px}}

/* Phones: a slightly bolder cable so it reads on a small screen. */
@media(max-width:650px){.cable-line .track{stroke-opacity:.22}.cable-line .wire{stroke-width:3}}

/* Phones: centred CTA and footer, matching the hero. */
@media(max-width:650px){
  .cta{text-align:center}
  footer{flex-direction:column;align-items:center;text-align:center;gap:12px}
}

/* Runway above the CTA for the cable to turn and drop into its centre. */
#compatibility{padding-bottom:calc(var(--space) * .6 + 40px)}