@charset "utf-8";

/* Hero */
.hero{position:relative; height:100vh; overflow:hidden; color:#fff; background:#071521;}
.hero video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;}
.hero-dim{position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,17,28,.88) 0%,rgba(5,19,31,.62) 42%,rgba(3,12,20,.14) 72%,rgba(4,14,23,.2) 100%),linear-gradient(0deg,rgba(4,15,24,.6),transparent 42%);}
.hero-inner{position:relative; z-index:2; height:100%; display:flex; align-items:center; padding-top:82px;}
.hero-copy{width:590px;}
.hero-badge{display:inline-flex; align-items:center; min-height:34px; padding:0 13px; margin-bottom:25px; border:1px solid rgba(255,255,255,.28); border-radius:999px; font-size:12px; font-weight:700; color:rgba(255,255,255,.78); background:rgba(255,255,255,.06);}
.hero h1{font-size:72px; line-height:1.1; letter-spacing:-.065em;}
.hero h1 em{font-style:normal; color:var(--mint);}
.hero-copy>p{margin-top:24px; font-size:16px; line-height:1.75; color:rgba(255,255,255,.68);}
.hero-facts{display:flex; margin-top:96px;}
.hero-facts div{min-width:145px; padding:0 25px; border-left:1px solid rgba(255,255,255,.24);}
.hero-facts div:first-child{padding-left:0; border-left:0;}
.hero-facts b{display:block; font-size:21px; line-height:1.15;}
.hero-facts span{display:block; margin-top:6px; font-size:10px; color:rgba(255,255,255,.52);}

/* Category */
.category-section{padding:120px 0 118px; background:var(--paper);}
.section-heading.compact h2{font-size:37px; line-height:1.15; letter-spacing:-.055em;}
.section-heading.compact p{margin-top:10px; font-size:14px; color:#94a0ab;}
.category-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:44px;}
.category-card{min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:15px; background:#fff; transition:.22s ease; padding: 20px;}
.category-card:hover{transform:translateY(-4px); border-color:#bfe7ec; box-shadow:0 15px 32px rgba(21,54,76,.07);}
.category-card img{width:65px; height:auto; }
.category-card b{margin-top:14px; font-size:16px;}
.category-card span{margin-top:4px; font-size:10px; color:#9aa5af; text-transform:capitalize;}

/* Products */
.product-section{padding:104px 0 136px;}
.product-heading{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:40px;}
.product-heading h2{font-size:37px; line-height:1.15; letter-spacing:-.055em;}
.tabs{display:flex; align-items:center; gap:7px;}
.tabs button{height:36px; padding:0 16px; border-radius:999px; font-size:11px; font-weight:800; color:#8b98a3; background:#f0f4f6;}
.tabs button.active{color:#fff; background:var(--navy);}
.product-grid{display:grid; grid-template-columns:1.16fr .84fr .84fr; grid-template-rows:320px 320px; gap:14px;}
.product-card{position:relative; overflow:hidden; border-radius:18px; background:#ddd;}
.product-card--main{grid-row:1/3;}
.product-card img{transition:.45s ease;}
.product-card:hover img{transform:scale(1.035);}
.product-shade{position:absolute; inset:0; background:linear-gradient(0deg,rgba(3,14,24,.9) 0%,rgba(5,17,27,.18) 60%,transparent 100%);}
.product-copy{position:absolute; z-index:2; left:25px; right:25px; bottom:22px; color:#fff;}
.product-copy h3{font-size:23px; line-height:1.35; letter-spacing:-.045em;}
.product-copy strong{display:block; margin-top:9px; font-size:14px;}
.product-card--main .product-copy{left:32px; right:32px; bottom:31px;}
.product-card--main .product-copy h3{font-size:30px;}
.product-card--main .product-copy strong{font-size:16px;}
.add-button{position:absolute; z-index:3; right:14px; bottom:14px; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; font-size:21px; color:var(--navy); background:#fff;}
.product-card--main .add-button{right:20px; bottom:20px;}

/* Technology */
.technology-section{position:relative; overflow:hidden; padding:142px 0; color:#fff; background:linear-gradient(115deg,#0b2b42 0%,#12475a 62%,#287e88 100%);}
.technology-mark{position:absolute; right:-70px; bottom:-220px; width:610px; height:610px; border:70px solid rgba(85,206,219,.15); border-radius:140px 30px 140px 30px; transform:rotate(45deg);}
.technology-layout{position:relative; z-index:2; display:grid; grid-template-columns:430px 1fr; gap:78px; align-items:center;}
.technology-copy h2{font-size:43px; line-height:1.2; letter-spacing:-.055em;}
.technology-copy>p{margin-top:22px; font-size:15px; line-height:1.8; color:rgba(255,255,255,.58);}
.technology-stats{display:grid; grid-template-columns:repeat(2,1fr); gap:11px; margin-top:32px;}
.technology-stats div{padding:17px 18px; border:1px solid rgba(255,255,255,.48); border-radius:10px;}
.technology-stats b{display:block; font-size:21px; color:var(--mint);}
.technology-stats span{display:block; margin-top:4px; font-size:10px; color:rgba(255,255,255,.52);}
.technology-images{display:grid; grid-template-columns:1.12fr .88fr; grid-template-rows:240px 240px; gap:12px;}
.technology-image{position:relative; overflow:hidden; border-radius:18px;}
.technology-image--main{grid-row:1/3;}
.technology-image:after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(4,17,26,.72),transparent 57%);}
.technology-image figcaption{position:absolute; z-index:2; left:19px; bottom:16px; font-weight:800;}
.technology-image--main figcaption{font-size:17px;}

/* Media */
.media-section{padding:118px 0; background:#fff;}
.media-layout{display:grid; grid-template-columns:1.1fr .9fr; gap:76px; align-items:center;}
.media-poster{position:relative; height:390px; overflow:hidden; border-radius:2px;}
.media-poster:after{content:""; position:absolute; inset:0; background:rgba(5,18,28,.15);}
.play-button{position:absolute; z-index:2; top:50%; left:50%; width:80px; height:80px; display:grid; place-items:center; border-radius:50%; color:var(--navy); background:#fff; transform:translate(-50%,-50%); box-shadow:0 15px 30px rgba(0,0,0,.15);}
.play-button svg{width:37px; height:37px; fill:currentColor; stroke:none;}
.media-copy h2{font-size:39px; line-height:1.28; letter-spacing:-.055em;}
.media-copy p{margin-top:25px; font-size:15px; line-height:1.8; color:var(--muted);}
.square-button{width:215px; height:62px; margin-top:30px; display:flex; align-items:center; justify-content:space-between; padding:0 27px; font-size:15px; font-weight:800; color:var(--navy); background:#e1f2f5;}
.square-button span{font-size:24px;}

/* Story */
.story-section{padding:136px 0; background:var(--paper);}
.story-layout{display:grid; grid-template-columns:1fr 1fr; gap:82px; align-items:center;}
.story-visual{position:relative; height:560px;}
.story-store{position:absolute; top:0; left:0; width:66%; height:88%; overflow:hidden; border-radius:18px;}
.story-food{position:absolute; right:5%; bottom:0; width:43%; height:43%; overflow:hidden; border:8px solid var(--paper); border-radius:15px;}
.story-copy h2{font-size:43px; line-height:1.2; letter-spacing:-.055em;}
.story-copy blockquote{margin-top:20px; font-size:21px; font-weight:800; letter-spacing:-.04em;}
.story-copy ol{display:grid; gap:14px; margin-top:29px; list-style:none;}
.story-copy li{display:grid; grid-template-columns:42px 1fr; gap:14px; align-items:start;}
.story-copy li>b{width:42px; height:42px; display:grid; place-items:center; border-radius:10px; font-size:10px; color:#1e6674; background:#dff3f6;}
.story-copy li strong{display:block; font-size:16px;}
.story-copy li span{display:block; margin-top:4px; font-size:13px; line-height:1.6; color:#8b98a3;}
.story-description{margin-top:32px; padding-top:23px; border-top:1px solid var(--line); font-size:17px; line-height:1.75; color:#87939e;}

/* Benefit */
.benefit-section{padding:112px 0 94px;}
.benefit-banner{position:relative; height:345px; overflow:hidden; border-radius:22px; color:#fff; background:var(--navy);}
.benefit-dim{position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,27,44,.96) 0%,rgba(7,27,44,.72) 47%,rgba(7,27,44,.1) 83%);}
.benefit-copy{position:absolute; z-index:2; top:50%; left:48px; transform:translateY(-50%);}
.benefit-copy h2{font-size:36px; line-height:1.25; letter-spacing:-.05em;}
.benefit-copy p{margin-top:14px; font-size:12px; color:rgba(255,255,255,.63);}
.pill-button{display:inline-flex; align-items:center; gap:13px; height:45px; padding:0 20px; margin-top:22px; border-radius:999px; font-size:12px; font-weight:800; color:var(--navy); background:var(--mint);}

/* Community */
.community-section{padding:42px 0 128px;}
.community-layout{display:grid; grid-template-columns:1.25fr .75fr; gap:21px;}
.review-panel,.notice-panel{padding:29px; border:1px solid var(--line); border-radius:17px; background:#fff;}
.panel-heading{display:flex; align-items:center; justify-content:space-between;}
.panel-heading h3{font-size:18px;}
.panel-heading a{font-size:13px; font-weight:800; color:#8b97a2;}
.review-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:18px;}
.review-grid article{padding:18px; border-radius:12px; background:#f6f9fa;}
.stars{font-size:12px; letter-spacing:2px; color:#efa43b;}
.review-grid p{margin-top:10px; font-size:16px; line-height:1.65;}
.review-grid article>span{display:block; margin-top:13px; font-size:13px; color:#a0aab2;}
.notice-panel ul{margin-top:15px; list-style:none;}
.notice-panel li{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); font-size:14px;}
.notice-panel li:last-child{border-bottom:0;}
.notice-panel time{font-size:14px; color:#a5aeb6;}

/* CSS-only video modal */
.video-modal{position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:40px; visibility:hidden; opacity:0; pointer-events:none; transition:.2s ease;}
.video-modal:target{visibility:visible; opacity:1; pointer-events:auto;}
.video-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.84); backdrop-filter:blur(6px);}
.video-dialog{position:relative; z-index:2; width:min(1120px,92vw); aspect-ratio:16/9; background:#000; box-shadow:0 30px 80px rgba(0,0,0,.45);}
.video-dialog video{width:100%; height:100%; display:block; background:#000;}
.video-close{position:absolute; z-index:3; top:-45px; right:0; width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.5); border-radius:50%; font-size:24px; color:#fff;}