:root{
    --spring-ease:cubic-bezier(.175,.885,.32,1.275);
    --font-body:'Plus Jakarta Sans',sans-serif;
    --font-display:'Sora',sans-serif;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:var(--font-body);
    scroll-behavior:smooth;
}

body{
    background:#f5f8fc;
    color:#10213d;
    line-height:1.65;
    overflow-x:hidden;
}

header{
    position:fixed;
    width:100%;
    top:0;
    z-index:1000;
    backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    background:rgba(255,255,255,.62);
    border-bottom:1px solid rgba(255,255,255,.72);
    box-shadow:0 8px 30px rgba(30,55,88,.08);
    padding:12px 8%;
    gap:24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:max-content;
    font-family:var(--font-display);
    font-size:21px;
    font-weight:700;
    color:#123466;
    letter-spacing:-.3px;
}

.logo img{
    width:40px;
    height:40px;
    flex:0 0 40px;
    object-fit:contain;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}

.logo span{
    line-height:1;
}

nav{
    display:flex;
    align-items:center;
    gap:4px;
}

nav a{
    color:#243954;
    text-decoration:none;
    padding:8px 12px;
    border-radius:10px;
    font-size:15px;
    font-weight:600;
    transition:color .25s ease,background-color .25s ease,transform .25s ease;
}

nav a:hover{
    color:#1763d1;
    background:rgba(37,113,207,.08);
    transform:translateY(-1px);
}

.theme-toggle{
    position:relative;
    display:grid;
    flex:0 0 40px;
    width:40px;
    height:40px;
    place-items:center;
    border:1px solid rgba(255,255,255,.45);
    border-radius:50%;
    background:#1558bd;
    color:#fff;
    box-shadow:0 5px 14px rgba(21,88,189,.25);
    cursor:pointer;
    transition:transform .35s var(--spring-ease),box-shadow .25s ease;
}

.theme-toggle input{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
}

.theme-toggle span{
    grid-area:1/1;
    font-size:22px;
    line-height:1;
}

.theme-icon-moon{display:none}

.theme-toggle:hover{
    transform:translateY(-2px);
    box-shadow:0 1px 1px rgba(21,88,189,.34);
}

.theme-toggle:active{transform:scale(.95)}
.theme-toggle:focus-within{outline:3px solid #70a9f5;outline-offset:3px}

:root:has(#theme-toggle:checked) .theme-icon-sun{display:none}
:root:has(#theme-toggle:checked) .theme-icon-moon{display:block}

.hero{
    min-height:720px;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
    align-items:center;
    gap:7%;
    position:relative;
    isolation:isolate;
    overflow:hidden;
    padding:130px 9% 100px;
    background-color:#f7faff;
    background-image:linear-gradient(rgba(35,93,170,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(35,93,170,.035) 1px,transparent 1px);
    background-size:48px 48px;
}

.hero::before{
    content:"";
    position:absolute;
    z-index:-1;
    top:0;
    right:0;
    width:43%;
    height:100%;
    background:#1558bd;
    clip-path:polygon(15% 0,100% 0,100% 100%,0 100%);
}

.hero-content{
    max-width:590px;
    animation:rise-in .75s ease both;
}

.eyebrow{
    display:flex;
    align-items:center;
    gap:12px;
    color:#52708f;
    font-size:12px;
    font-weight:700;
    letter-spacing:1.5px;
}

.eyebrow span{
    width:25px;
    height:1px;
    background:#4383df;
}

.promo{
    display:inline-block;
    margin:28px 0 15px;
    padding:7px 12px;
    border:1px solid #c8dcfa;
    background:#eaf2ff;
    color:#174b94;
    font-size:11px;
    font-weight:700;
}

.hero-scroll{
    position:absolute;
    left:9%;
    bottom:28px;
    display:flex;
    align-items:center;
    gap:10px;
    color:#ffffff;
    font-size:9px;
    font-weight:700;
    letter-spacing:1.2px;
    text-decoration:none;
}

.hero-scroll span{
    display:inline-block;
    width:28px;
    height:1px;
    background:#f3f3f4;
}

.hero-visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:460px;
    animation:rise-in .9s .12s ease both;
}

.hero-visual img{
    width:100%;
    height:470px;
    object-fit:contain;
    mix-blend-mode:multiply;
    filter:drop-shadow(0 26px 22px rgba(9,35,76,.18));
    transition:transform .6s cubic-bezier(.2,.75,.25,1);
}

.hero-visual:hover img{
    transform:translateY(-8px) rotate(1deg);
}

.hero-caption{
    position:absolute;
    right:0;
    bottom:30px;
    display:grid;
    gap:3px;
    min-width:205px;
    padding:14px 18px;
    border-left:3px solid #2672de;
    background:rgba(255,255,255,.94);
    box-shadow:0 12px 35px rgba(13,43,82,.12);
}

.hero-caption span,
.hero-caption small{
    color:#6b7b91;
    font-size:10px;
}

.hero-caption span{
    font-weight:700;
    letter-spacing:1px;
}

.hero-caption strong{
    color:#102d56;
    font-family:var(--font-display);
    font-size:20px;
}

.hero h1{
    margin-top:14px;
    color:#102d56;
    font-family:var(--font-display);
    font-size:64px;
    font-weight:600;
    line-height:1.08;
}

.hero span{
    color:#1763d1;
}

.hero p{
    max-width:460px;
    margin:20px 0 28px;
    color:#5b6c82;
}

.hero .hero-description{
    font-size:16px;
}

.btn{
    display:inline-block;
    background:#1558bd;
    color:#fff;
    text-decoration:none;
    padding:14px 22px;
    border-radius:5px;
    font-weight:600;
    box-shadow:0 9px 20px rgba(21,88,189,.2);
    transition:background .25s ease,transform .35s var(--spring-ease),box-shadow .25s ease;
}

.btn:hover{
    transform:translateY(-3px) scale(1.02);
    background:#0d438f;
    box-shadow:0 14px 26px rgba(21,88,189,.28);
}

.btn span{
    margin-left:8px;
    color:inherit;
}

section{
    padding:88px 8%;
}

.section-title{
    text-align:center;
    margin-bottom:50px;
    color:#102d56;
    font-family:var(--font-display);
    font-size:38px;
    font-weight:600;
}

.products{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-rows:1fr;
    gap:24px;
}

@media(max-width:1100px){
    .products{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
}

.card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:460px;
    overflow:hidden;
    background:rgb(255, 255, 255);
    -webkit-backdrop-filter:blur(18px) saturate(155%);
    backdrop-filter:blur(18px) saturate(155%);
    border:1px solid rgba(255,255,255,.82);
    border-radius:20px;
    padding:16px;
    box-shadow:0 8px 32px rgba(0,0,0,.1),0 0 22px rgba(38,120,255,.14);
    transition:transform .4s var(--spring-ease),border-color .3s ease,box-shadow .3s ease;
}

.card:focus-within{
    outline:2px solid #4383df;
    outline-offset:3px;
}

.card:hover{
    border-color:#bad2f1;
    box-shadow:0 14px 36px rgba(21,48,82,.12),0 0 30px rgba(38,120,255,.28);
}

.product-image{
    display:block;
    width:100%;
    height:245px;
    border-radius:14px;
    background:#f4f7fb;
    object-fit:contain;
    box-shadow:0 6px 20px rgba(21,48,82,.09);
    transition:transform .45s ease,box-shadow .3s ease;
}

.card:hover .product-image{
    transform:scale(1.035);
    box-shadow:0 10px 24px rgba(21,48,82,.12);
}

.card h3{
    margin-top:18px;
    color:#17345a;
    font-family:var(--font-display);
    font-size:21px;
}

.card p{
    color:#738197;
    margin:6px 0 12px;
    font-size:13px;
}

.price{
    color:#0d3776;
    font-weight:700;
    font-size:17px;
    margin-top:auto;
    margin-bottom:16px;
}

.about{
    background:#eaf2fc;
    border-left:4px solid #1153a9;
    padding:50px 8%;
    text-align:center;
}

.about p{
    max-width:800px;
    margin:auto;
    color:#52657e;
}

.testimonials{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:25px;
}

.testi{
    background:#fff;
    border:1px solid #09407f;
    border-radius:7px;
    padding:24px;
    color:#52657e;
    box-shadow:0 8px 24px rgba(21,48,82,.04),0 0 22px rgba(38,120,255,.14);
    transition:transform .25s ease,box-shadow .25s ease;
}

.testi:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 28px rgba(21,67,126,.1),0 0 30px rgba(38,120,255,.28);
}

.contact{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
}

.contact-box{
    display:flex;
    align-items:center;
    gap:14px;
    background:#fff;
    border:1px solid #07376f;
    border-radius:10px;
    padding:22px;
    box-shadow:0 8px 24px rgba(21,48,82,.04),0 0 22px rgba(38,120,255,.14);
    transition:box-shadow .25s ease,border-color .25s ease;
}

.contact-box:hover{
    border-color:#347fdf;
    box-shadow:0 10px 28px rgba(21,67,126,.1),0 0 30px rgba(38,120,255,.28);
}

.contact-icon{
    width:35px;
    height:35px;
    flex:0 0 35px;
    object-fit:contain;
}

.contact-detail{
    min-width:0;
}

.contact-box h3{
    color:#17345a;
    font-size:15px;
}

.contact-box p{
    margin-top:7px;
    color:#718096;
    overflow-wrap:anywhere;
}

footer{
    text-align:center;
    padding:40px;
    color:#657791;
    background:#edf3fb;
    border-top:1px solid #dce6f2;
    font-size:13px;
}

@media(max-width:768px){
    .hero{grid-template-columns:1fr;gap:24px;min-height:auto;padding:120px 7% 80px}
    .hero::before{top:auto;bottom:0;width:100%;height:38%;clip-path:polygon(0 18%,100% 0,100% 100%,0 100%)}
    .hero-content{max-width:640px}
    .hero h1{font-size:52px}
    .hero-visual{min-height:340px}
    .hero-visual img{height:340px}
    .hero-caption{right:4%;bottom:12px}
    .hero-scroll{left:7%;bottom:22px}
    .stats{gap:24px;padding:32px 7%}
    .products{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
    section{padding:70px 7%}
    .about{padding:38px 7%}
}

.modal{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(9,28,55,.58);
    backdrop-filter:blur(5px);
    z-index:9999;
    justify-content:center;
    align-items:center;
}

.modal-content{
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .65);
    padding:30px;
    width:90%;
    max-width:600px;
    border-radius:20px;
    color:#52657e;
    position:relative;
    box-shadow:0 24px 70px rgba(4,24,55,.25);
    animation:modal-pop .38s var(--spring-ease) both;
}

.close{
    position:absolute;
    top:10px;
    right:12px;
    font-family:Arial,sans-serif;
    font-size:24px;
    cursor:pointer;
    color:hsl(180, 100%, 100%);
    background:#0a3271;
    border:0;
    width:32px;
    height:32px;
    padding:0;
    line-height:1;
    border-radius:50%;
    display:grid;
    place-items:center;
    transition:transform .35s var(--spring-ease),background .2s ease;
}

.modal h2{
    color:#17345a;
    margin-bottom:15px;
    font-family:var(--font-display);
}

.buy-btn{
    display:block;
    text-align:center;
    margin-top:0;
    padding:12px;
    background:#2047b2;
    color:white;
    text-decoration:none;
    border-radius:12px;
    font-weight:600;
    transition:transform .35s var(--spring-ease),box-shadow .25s ease;
}

.buy-btn:hover{
    box-shadow:0 8px 18px rgba(32,71,178,.2);
}

.search-box{
    position:relative;
    margin-bottom:8px;
}

.search-box img{
    position:absolute;
    top:50%;
    left:7px;
    width:40px;
    height:40px;
    transform:translateY(-50%);
    pointer-events:none;
}

#searchInput{
    width:100%;
    padding:14px 16px 14px 48px;
    border:2px solid #d9e3ef;
    border-radius:5px;
    background:#fff;
    color:#17345a;
    font-size:14px;
    outline:0;
    transition:border-color .2s ease,box-shadow .2s ease;
}

#searchInput:focus{
    border-color:#4383df;
    box-shadow:0 0 0 3px rgba(67,131,223,.14);
}

.result-count{
    min-height:24px;
    margin:0 0 18px;
    color:#718096;
    font-size:12px;
}

.wa-float{
    position:fixed;
    bottom:25px;
    right:25px;
    width:60px;
    height:60px;
    background:#1475d1;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:27px;
    text-decoration:none;
    z-index:9999;
    color:#fff;
    box-shadow:0 10px 25px rgba(20,91,174,.28);
    transition:transform .35s var(--spring-ease),box-shadow .25s ease;
}

.wa-float:hover{
    transform:translateY(-4px) scale(1.04);
    box-shadow:0 14px 30px rgba(20,91,174,.36);
}

.btn:active,
.buy-btn:active,
.close:active,
.wa-float:active{
    transform:scale(.95);
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes rise-in{
    from{opacity:0;transform:translateY(18px)}
    to{opacity:1;transform:translateY(0)}
}

.scroll-reveal{
    opacity:0;
    translate:0 26px;
    transition:opacity .65s ease,translate .65s var(--spring-ease);
}

.scroll-reveal.is-visible{
    opacity:1;
    translate:0 0;
}

@keyframes modal-pop{
    from{opacity:0;transform:translateY(14px) scale(.94)}
    72%{opacity:1;transform:translateY(-2px) scale(1.01)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

.stats{
    display:flex;
    justify-content:space-evenly;
    gap:30px;
    text-align:left;
    padding:36px 9%;
    background:#fff;
    border-bottom:1px solid #e2eaf3;
}

.stats h2{
    color:#1558bd;
    font-family:var(--font-display);
    font-size:32px;
}

.stats p{
    color:#718096;
    font-size:14px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
}

html{
    scroll-behavior:smooth;
}

.cursor-glow{
    position:fixed;
    width:300px;
    height:300px;
    background:radial-gradient(circle,rgba(37,113,207,.1) 0%,rgba(37,113,207,0) 70%);
    border-radius:50%;
    pointer-events:none;
    z-index:0;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--font-body)}
button,a,input{font:inherit}
a:focus-visible,button:focus-visible{outline:3px solid #70a9f5;outline-offset:3px}

@media(max-width:560px){
    header{padding:10px 5%;gap:8px}
    .logo{font-size:18px;gap:7px}
    .logo img{width:32px;height:32px;flex-basis:32px;border-radius:0;background:transparent;box-shadow:none}
    .theme-toggle{flex-basis:32px;width:32px;height:32px}
    .theme-toggle span{font-size:19px}
    nav{gap:0}
    nav a{padding:7px 8px;font-size:13px}
    .hero{padding:110px 6% 72px}
    .hero h1{font-size:42px}
    .hero .hero-description{font-size:14px}
    .promo{font-size:10px}
    .hero-visual{min-height:280px}
    .hero-visual img{height:280px}
    .hero-caption{right:0;bottom:0;min-width:170px;padding:10px 13px}
    .hero-caption strong{font-size:17px}
    .hero-scroll{font-size:8px}
    .stats{gap:14px;padding:25px 6%}
    .stats h2{font-size:25px}
    .stats p{font-size:10px;letter-spacing:.5px}
    section{padding:60px 6%}
    .section-title{font-size:31px;margin-bottom:30px}
    .products{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
    .card{min-height:350px;padding:12px}
    .product-image{height:145px}
    .card h3{margin-top:10px;font-size:16px;line-height:1.35}
    .card p{margin:5px 0 8px;font-size:11px;line-height:1.45}
    .price{font-size:14px}
    .buy-btn{margin-top:0;padding:9px 7px;font-size:11px;line-height:1.35}
    .about{padding:32px 6%}
    .testimonials,.contact{grid-template-columns:1fr}
}

@media(max-width:390px){
    header{padding-inline:4%}
    .logo{font-size:16px}
    .logo img{width:29px;height:29px;flex-basis:29px}
    .theme-toggle{flex-basis:29px;width:29px;height:29px}
    .theme-toggle span{font-size:17px}
    nav a{padding:6px;font-size:12px}
    .products{gap:12px}
    .card{padding:10px}
    .product-image{height:125px}
}

@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
    .scroll-reveal{opacity:1;translate:none;transition:none}
}

:root:has(#theme-toggle:checked){color-scheme:dark}
:root:has(#theme-toggle:checked) body{background:#171b23;color:#e7ebf2}
:root:has(#theme-toggle:checked) header{background:rgba(22,27,37,.78);border-bottom-color:rgba(255,255,255,.12);box-shadow:0 8px 30px rgba(0,0,0,.24)}
:root:has(#theme-toggle:checked) .logo{color:#f0f3f8}
:root:has(#theme-toggle:checked) nav a{color:#c4ccd8}
:root:has(#theme-toggle:checked) nav a:hover{color:#80b5ff}
:root:has(#theme-toggle:checked) .hero{background-color:#191f2a;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px)}
:root:has(#theme-toggle:checked) .hero::before{background:#1b365a}
:root:has(#theme-toggle:checked) .hero h1,
:root:has(#theme-toggle:checked) .section-title{color:#edf1f7}
:root:has(#theme-toggle:checked) .hero h1 span{color:#8dbbff}
:root:has(#theme-toggle:checked) .hero p{color:#c0c9d6}
:root:has(#theme-toggle:checked) .eyebrow{color:#aab8ca}
:root:has(#theme-toggle:checked) .promo{background:#243751;border-color:#405b7a;color:#c6dcff}
:root:has(#theme-toggle:checked) .hero-caption{background:rgba(28,36,49,.92);border-left-color:#6da7f3}
:root:has(#theme-toggle:checked) .hero-caption span,
:root:has(#theme-toggle:checked) .hero-caption small{color:#b7c4d5}
:root:has(#theme-toggle:checked) .hero-caption strong{color:#f0f3f8}
:root:has(#theme-toggle:checked) .hero-scroll{color:#d5deea}
:root:has(#theme-toggle:checked) .stats{background:#1d232e;border-bottom-color:#303947}
:root:has(#theme-toggle:checked) .stats p,
:root:has(#theme-toggle:checked) .card p,
:root:has(#theme-toggle:checked) .about p,
:root:has(#theme-toggle:checked) .contact-box p,
:root:has(#theme-toggle:checked) .result-count{color:#aeb8c7}
:root:has(#theme-toggle:checked) .stats h2{color:#8dbbff}
:root:has(#theme-toggle:checked) .card{background:rgba(35,42,55,.84);border-color:rgba(255,255,255,.12);box-shadow:0 8px 32px rgba(0,0,0,.28),0 0 22px rgba(45,130,255,.2)}
:root:has(#theme-toggle:checked) .card:hover{border-color:rgba(141,187,255,.42);box-shadow:0 14px 36px rgba(0,0,0,.38),0 0 32px rgba(45,130,255,.36)}
:root:has(#theme-toggle:checked) .product-image{background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.2)}
:root:has(#theme-toggle:checked) .card h3,
:root:has(#theme-toggle:checked) .price{color:#edf2fa}
:root:has(#theme-toggle:checked) .about{background:#202a39;border-left-color:#6da7f3}
:root:has(#theme-toggle:checked) .testi,
:root:has(#theme-toggle:checked) .contact-box{background:#202630;border-color:#343e4c;color:#c5ceda;box-shadow:0 8px 24px rgba(0,0,0,.18),0 0 22px rgba(45,130,255,.2)}
:root:has(#theme-toggle:checked) .testi:hover,
:root:has(#theme-toggle:checked) .contact-box:hover{border-color:#4f94f5;box-shadow:0 12px 28px rgba(0,0,0,.28),0 0 32px rgba(45,130,255,.36)}
:root:has(#theme-toggle:checked) .contact-box h3{color:#e7edf6}
:root:has(#theme-toggle:checked) footer{background:#13171e;border-top-color:#303743;color:#aeb8c7}
:root:has(#theme-toggle:checked) .modal-content{background:rgba(31,38,50,.96);color:#c5ceda}
:root:has(#theme-toggle:checked) .modal h2{color:#edf2fa}
:root:has(#theme-toggle:checked) .close{background:#293a53;color:#c8ddff}
:root:has(#theme-toggle:checked) #searchInput{background:#202630;border-color:#3a4656;color:#edf2fa}
:root:has(#theme-toggle:checked) #searchInput::placeholder{color:#9daabc}

::view-transition-old(root){animation:none}
::view-transition-new(root){
    z-index:1;
    animation:theme-wave .9s var(--spring-ease) both;
    clip-path:circle(0 at var(--theme-wave-x, calc(100% - 38px)) var(--theme-wave-y, 38px));
}

@keyframes theme-wave{
    to{clip-path:circle(150vmax at var(--theme-wave-x, calc(100% - 38px)) var(--theme-wave-y, 38px))}
}