/* XtraTough 2026 design - responsive (phone / tablet / laptop / desktop). All classes prefixed xt- */
:root{--navy:#06283D;--blue:#0077B6;--aq:#00B4D8;--tint:#E6F6FB;--co:#FF6B35;--bg:#F5FBFD;--sf:#fff;--tx:#0f2330;--mu:#5b7280;--ln:#d8ebf2}
@media(prefers-color-scheme:dark){:root{--bg:#071a26;--sf:#0d2a3b;--tint:#0b2433;--tx:#e8f5fa;--mu:#9bb5c2;--ln:#17435a}}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0!important;background:var(--bg)!important;color:var(--tx);font-family:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;line-height:1.6;overflow-x:hidden}
.xt img{max-width:100%;display:block}.xt a{text-decoration:none;color:inherit}.xt button{font-family:inherit}
.xt-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,28px)}
.xt-btn{display:inline-block;padding:13px 26px;min-height:46px;border-radius:99px;font-weight:700;font-size:15px;border:0;cursor:pointer;transition:.25s;text-align:center}
.xt-btn:hover{transform:translateY(-2px)}.xt-co{background:var(--co);color:#fff!important}.xt-ol{border:2px solid #fff8;color:#fff!important}.xt-bl{background:var(--blue);color:#fff!important}
/* header */
.xt-header{position:sticky;top:0;z-index:100;background:#fffffff2;backdrop-filter:blur(12px);box-shadow:0 4px 24px #06283d1f}
.xt-hd{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,28px);height:68px;display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative}
.xt-logo img{height:34px;width:auto}
.xt-nav{display:flex;gap:28px;font-weight:600;font-size:15px;color:#0f2330}.xt-nav a{color:#0f2330!important}.xt-nav a:hover{color:var(--blue)!important}
.xt-hr{display:flex;gap:8px;align-items:center}
.xt-ib{position:relative;width:44px;height:44px;border-radius:50%;background:var(--tint);color:#0f2330!important;display:grid;place-items:center;border:0;font-size:18px;cursor:pointer}
.xt-ib em{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;border-radius:9px;background:var(--co);color:#fff;font:700 11px/18px sans-serif;text-align:center;font-style:normal}
.xt-mb{display:none}
/* slider core */
.xt-slider{position:relative}.xt-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.xt-track::-webkit-scrollbar{display:none}.xt-track>*{scroll-snap-align:start;flex:none}
.xt-arr{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;border:0;background:#fff;color:var(--navy);font-size:24px;line-height:1;cursor:pointer;box-shadow:0 8px 20px #0004;display:grid;place-items:center}
.xt-arr:hover{background:var(--co);color:#fff}.xt-prev{left:10px}.xt-next{right:10px}
.xt-dots{display:flex;justify-content:center;gap:8px;position:absolute;left:0;right:0;bottom:16px;z-index:5}
.xt-dots button{width:10px;height:10px;padding:0;border:0;border-radius:99px;background:#ffffff66;cursor:pointer;transition:.3s}.xt-dots button.on{width:30px;background:var(--co)}
/* hero slider */
.xt-hero{background:radial-gradient(circle at 85% 15%,#00B4D8 0,transparent 45%),linear-gradient(160deg,#06283D,#0077B6);color:#fff;position:relative;overflow:hidden}
.xt-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,#ffffff14 2px,transparent 2px) 0 0/34px 34px;pointer-events:none}
.xt-hs .xt-track{gap:0}.xt-hs .xt-track>*{flex:0 0 100%}
.xt-hsl{min-height:min(620px,86vh);display:flex;align-items:center;padding:50px 0 90px}
.xt-hin{display:grid;grid-template-columns:1.05fr 1fr;gap:24px;align-items:center;width:100%}
.xt-chip{display:inline-block;background:#ffffff1f;border:1px solid #ffffff40;padding:6px 16px;border-radius:99px;font-size:13px;font-weight:600;margin-bottom:16px}
.xt-hh{font-size:clamp(32px,5.2vw,62px);line-height:1.05;font-weight:800;letter-spacing:-.03em;margin:0 0 16px;color:#fff}.xt-hh em{font-style:normal;color:#7DE3F7}
.xt-hp{font-size:clamp(15px,1.6vw,18px);color:#cfeaf4;max-width:500px;margin:0 0 26px}.xt-hb{display:flex;gap:12px;flex-wrap:wrap}
.xt-hv{position:relative;display:grid;place-items:center;min-height:320px}
.xt-hv::before{content:"";position:absolute;width:min(430px,92%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--ac,#FFC21A) 0,transparent 68%);opacity:.55}
.xt-hv::after{content:"";position:absolute;width:min(400px,86%);aspect-ratio:1;border-radius:50%;border:1px solid #ffffff40}
.xt-hv img{position:relative;z-index:2;max-height:clamp(240px,40vw,440px);width:auto;filter:drop-shadow(0 25px 30px #0006);animation:xtf 5s ease-in-out infinite}
.xt-hv img+img{margin-left:-6%;max-height:clamp(200px,32vw,360px);animation-delay:1s}
@keyframes xtf{50%{transform:translateY(-12px)}}
.xt-wave{display:block;width:100%;height:60px;position:absolute;bottom:-1px;left:0;z-index:3}
/* trust */
.xt-tp{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:-30px;position:relative;z-index:6}
.xt-tp div{background:var(--sf);border:1px solid var(--ln);border-radius:18px;padding:18px;box-shadow:0 10px 30px #0077b61a}.xt-tp i{font-style:normal;font-size:24px}.xt-tp b{display:block}.xt-tp small{color:var(--mu)}
/* sections */
.xt-s{padding:clamp(48px,8vw,84px) 0}
.xt-sh{max-width:640px;margin:0 auto 38px;text-align:center}.xt-sh small{display:inline-block;background:var(--tint);color:var(--blue);padding:5px 14px;border-radius:99px;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.xt-sh h2{font-size:clamp(26px,4vw,42px);line-height:1.12;letter-spacing:-.02em;margin:12px 0 10px;font-weight:800;color:var(--tx)}.xt-sh p{color:var(--mu);margin:0}
@media(prefers-color-scheme:dark){.xt-sh small{color:#7DE3F7}}
.xt-ab{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,50px);align-items:center}.xt-ab .xt-sh{text-align:left;margin:0}.xt-ab p{color:var(--mu)}
.xt-vs{display:grid;grid-template-columns:1fr 1fr;gap:14px}.xt-vc{background:var(--sf);border:1px solid var(--ln);border-radius:20px;padding:22px}.xt-vc i{font-style:normal;font-size:26px}.xt-vc h3{font-size:16px;margin:6px 0 2px}.xt-vc p{font-size:13px;margin:0}
.xt-sol{background:var(--tint)}.xt-tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
.xt-tab{border:1px solid var(--ln);background:var(--sf);color:var(--tx);padding:11px 22px;min-height:44px;border-radius:99px;font-weight:600;font-size:14px;cursor:pointer;transition:.2s}.xt-tab.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.xt-pane{display:none;background:var(--sf);border-radius:30px;padding:clamp(22px,4vw,44px);grid-template-columns:1.1fr 1fr;gap:28px;align-items:center;box-shadow:0 20px 50px #0077b61f}.xt-pane.on{display:grid}
.xt-pane small{color:var(--co);font-weight:700}.xt-pane h3{font-size:clamp(24px,3.4vw,32px);line-height:1.1;margin:6px 0 12px}.xt-pane p{color:var(--mu);margin:0 0 16px}.xt-pane ul{list-style:none;margin:0 0 22px;padding:0}
.xt-pane li{padding:6px 0 6px 30px;position:relative;font-weight:600}.xt-pane li::before{content:"✓";position:absolute;left:0;top:9px;width:20px;height:20px;border-radius:50%;background:var(--aq);color:#fff;font-size:12px;display:grid;place-items:center}
.xt-pv{background:radial-gradient(circle,#CAF0F8,#9fdcf0);border-radius:26px;height:clamp(250px,32vw,340px);display:grid;place-items:center}.xt-pv img{max-height:clamp(210px,27vw,290px);max-width:80%;width:auto;filter:drop-shadow(0 18px 22px #06283d55)}
.xt-dd{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.xt-dc{background:var(--sf);border:1px solid var(--ln);border-radius:20px;padding:22px 14px;text-align:center;position:relative}
.xt-dc img{width:64px;height:64px;margin:0 auto 12px;border-radius:50%;background:#fff;border:2px solid var(--aq);padding:10px;object-fit:contain}.xt-dc b{position:absolute;top:10px;left:12px;width:24px;height:24px;border-radius:50%;background:var(--co);color:#fff;font-size:12px;display:grid;place-items:center}.xt-dc p{font-size:14px;font-weight:600;margin:0}
.xt-ph{flex:0 0 clamp(220px,28vw,300px)!important;border-radius:22px;overflow:hidden;position:relative;margin:0}.xt-ph img{width:100%;height:clamp(200px,24vw,260px);object-fit:cover}.xt-ph figcaption{position:absolute;left:0;right:0;bottom:0;padding:36px 16px 12px;background:linear-gradient(transparent,#06283Dee);color:#fff;font-weight:700;font-size:14px}
.xt-ph.k{flex-basis:clamp(180px,22vw,240px)!important}.xt-ph.k img{height:clamp(240px,30vw,310px)}
.xt-pc{background:linear-gradient(160deg,var(--navy),var(--blue));color:#fff}.xt-pc .xt-sh p{color:#bfe6f2}.xt-pc .xt-sh h2{color:#fff}.xt-pc .xt-sh small{background:#ffffff22;color:#fff}
.xt-sps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.xt-st{background:#ffffff14;border:1px solid #ffffff2e;border-radius:22px;padding:26px}.xt-st span{font-size:44px;font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1.5px #7DE3F7}.xt-st h3{margin:12px 0 4px;color:#fff}.xt-st p{color:#bfe6f2;font-size:14px;margin:0}
.xt-pg{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.xt-pp{text-align:center}.xt-pp a{display:block}
.xt-pb{height:clamp(150px,19vw,230px);border-radius:26px;display:grid;place-items:center;margin-bottom:10px;transition:.3s}.xt-pb img{max-height:clamp(120px,15vw,190px);max-width:78%;width:auto;filter:drop-shadow(0 12px 14px #0003);transition:.3s}.xt-pp:hover .xt-pb img{transform:scale(1.08) rotate(-3deg)}
.xt-pp h3{font-size:16px;margin:0 0 2px;color:var(--tx)}.xt-pr{font-weight:800;color:var(--blue);margin-bottom:8px}.xt-pp .xt-btn{padding:9px 18px;min-height:40px;font-size:13px}
@media(prefers-color-scheme:dark){.xt-pb{filter:brightness(.85)}}
.xt-cta{background:linear-gradient(135deg,var(--co),#ff9a62);color:#fff;border-radius:34px;padding:clamp(28px,5vw,54px);display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:center}
.xt-cta h2{font-size:clamp(24px,4vw,40px);line-height:1.1;margin:0 0 8px;color:#fff}.xt-cta p{margin:0}.xt-ci{display:flex;flex-direction:column;gap:10px}.xt-ci a{background:#fff;color:var(--navy)!important;padding:14px 20px;border-radius:99px;font-weight:700;text-align:center}
.xt-footer{background:var(--navy);color:#a9c8d6;margin-top:clamp(48px,8vw,84px);padding:46px 0 26px;font-size:14px}.xt-fg{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.4fr;gap:28px}
.xt-footer h4{color:#fff;margin:0 0 10px}.xt-footer ul{list-style:none;margin:0;padding:0}.xt-footer li{margin-bottom:6px}.xt-footer a{color:#a9c8d6}.xt-fg img{height:34px;background:#fff;border-radius:99px;padding:4px 14px;margin-bottom:12px}
.xt-cp{margin-top:26px;padding-top:16px;border-top:1px solid #ffffff1f;text-align:center;font-size:13px}
.xt-call{display:none}
/* large screens */
@media(min-width:1500px){.xt-wrap,.xt-hd{max-width:1320px}.xt-hsl{min-height:660px}}
/* laptop / tablet landscape */
@media(max-width:1100px){.xt-nav{gap:18px}.xt-pg{grid-template-columns:repeat(3,1fr)}.xt-dd{grid-template-columns:repeat(3,1fr)}.xt-sps{grid-template-columns:1fr 1fr}.xt-fg{grid-template-columns:1fr 1fr}}
/* tablet portrait + phones */
@media(max-width:900px){
 .xt-mb{display:grid}.xt-nav{display:none;position:absolute;top:68px;left:0;right:0;background:var(--sf);flex-direction:column;gap:0;padding:8px 20px 16px;box-shadow:0 18px 30px #0004}.xt-nav.o{display:flex}.xt-nav a{padding:13px 0;border-bottom:1px solid var(--ln);color:var(--tx)!important}
 .xt-hsl{padding:30px 0 84px;min-height:0}.xt-hin{grid-template-columns:1fr;text-align:center;gap:6px}.xt-hv{order:-1;min-height:250px}.xt-hp{margin-left:auto;margin-right:auto}.xt-hb{justify-content:center}
 .xt-arr{display:none}.xt-tp{grid-template-columns:1fr 1fr;margin-top:-24px}.xt-ab,.xt-pane,.xt-cta{grid-template-columns:1fr}.xt-ab .xt-sh{text-align:center}
 .xt-dd{grid-template-columns:repeat(2,1fr)}.xt-dd .xt-dc:last-child{grid-column:1/-1}.xt-pg{grid-template-columns:repeat(2,1fr);gap:12px}
 .xt-call{display:flex;position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:90;gap:8px}.xt-call a{flex:1;text-align:center;padding:14px;border-radius:99px;font-weight:700;box-shadow:0 8px 24px #0005;background:var(--co);color:#fff!important}.xt-call a+a{background:#fff;color:var(--navy)!important}.xt-footer{padding-bottom:92px}}
@media(max-width:600px){.xt-vs{grid-template-columns:1fr}.xt-sps{grid-template-columns:1fr}.xt-fg{grid-template-columns:1fr}.xt-btn{width:100%}.xt-pp .xt-btn{width:auto}.xt-tab{padding:10px 16px;font-size:13px}.xt-hb .xt-btn{flex:1 1 100%}.xt-tp{gap:10px}.xt-tp div{padding:14px}}
@media(max-width:360px){.xt-pg{grid-template-columns:1fr}.xt-hh{font-size:29px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
