/* Home page specific styles (builds on css/news.css) */
*{box-sizing:border-box}

.container{width:min(1200px, 92%); margin-inline:auto}
img{max-width:100%; display:block}

/* Header small tweaks */
.site-header{position:sticky; top:0; z-index:50}
.top-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:22px}
.top-nav a.active{color:var(--color-main)}

/* Hero */
.hero{position:relative; isolation:isolate; padding:36px 0 64px}
/* Background: same image with stronger white veil (bottom more faded) */
.hero::before{content:""; position:absolute; inset:0; z-index:0; background:
  radial-gradient(60% 55% at 50% 85%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.8) 60%, rgba(255,255,255,0) 100%),
  linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.78) 40%, rgba(255,255,255,.7) 60%, rgba(255,255,255,.82) 85%, rgba(255,255,255,.95) 100%),
  url('../images/topparts_4.jpg') center/cover no-repeat; filter:saturate(0.7) brightness(1.02)}

/* Foreground framed image (covers ~3/4 width and sits to the right) */
.hero-frame{position:relative; z-index:1; width:75%; margin-left:auto; margin-right:min(3%, 28px); box-shadow:0 22px 48px rgba(0,0,0,.28)}
/* subtle left gradient to improve legibility where text overlaps edge */
.hero-frame::after{content:""; position:absolute; inset:0; width:48%; background:linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 55%, rgba(0,0,0,0) 100%); pointer-events:none; z-index:1}
.hero-img{width:100%; height:clamp(420px, 58vw, 640px); object-fit:cover; display:block; position:relative; z-index:0; border-radius:8px}

/* Caption positioned to land between faded area and visible image */
.hero-caption{position:absolute; left:-12%; /* moved further down for visual balance */ top:clamp(56px, 12vw, 140px); color:#fff; text-shadow:0 8px 24px rgba(0,0,0,.45); z-index:2; max-width:min(480px, 42%)}
.hero-caption .lead{margin:.2rem 0; /* slightly larger */ font-size:clamp(26px, 5.2vw, 36px); font-weight:700; line-height:1.2}
.hero-caption .sub{opacity:.95; /* slightly larger */ font-size:clamp(14px, 2.4vw, 16px)}

/* Scroll cue: white circular button at bottom-right */
.scroll-cue{position:absolute; right:24px; bottom:20px; width:64px; height:64px; border-radius:50%; background:#fff; color:var(--color-main); display:flex; flex-direction:column; align-items:center; justify-content:center; text-decoration:none; box-shadow:0 12px 28px rgba(0,0,0,.22); border:2px solid rgba(0,0,0,.06); z-index:3}
.scroll-cue span{font-size:12px; line-height:1}
.scroll-cue .down{font-size:18px; line-height:1}

/* Intro/Mission section (between Hero and Products) */
.intro-wave{position:relative; padding:30px 0 40px; overflow:hidden;
  background: linear-gradient(135deg, rgba(255,214,188,.28) 0%, rgba(248,251,255,.92) 55%, #ffffff 100%);
}
.wave-bg{position:absolute; inset:0 0 auto 0; top:10px; height:420px; pointer-events:none}
/* soft highlight on the right side to emulate the reference glow */
.wave-bg::before{content:""; position:absolute; right:-8%; top:0; width:54%; height:420px;
  background:radial-gradient(60% 80% at 6% 50%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.65) 22%, rgba(255,255,255,0) 62%);
  filter:blur(2px);}
/* Replace solid blue wave with subtle layered soft-blue arcs (like reference image 1) */
.wave-bg::after{content:""; position:absolute; left:0; right:0; top:0; bottom:0;
  background:
    radial-gradient(120% 90% at 12% 44%, rgba(33,140,217,.22), rgba(33,140,217,.12) 38%, rgba(33,140,217,.06) 56%, rgba(33,140,217,0) 70%),
    radial-gradient(110% 70% at 32% 86%, rgba(33,140,217,.18), rgba(33,140,217,.08) 48%, rgba(33,140,217,0) 64%),
    radial-gradient(80% 60% at 55% 8%, rgba(33,140,217,.10), rgba(33,140,217,0) 60%);
  filter: blur(0.5px);
}

.wave-inner{position:relative; height:600px}
.thumb{position:absolute; border-radius:8px; overflow:hidden; box-shadow:0 16px 40px rgba(17,58,119,.18)}
.thumb.t0{left:18%; top:-20px; width:140px; height:140px; border-radius:50%; box-shadow:0 16px 36px rgba(17,58,119,.14)}
.thumb img{width:100%; height:100%; object-fit:cover}
/* t1: small square (factory machine) near top-left edge of the blue wave */
.thumb.t1{left:7%; top:2%; width:170px; height:130px}
/* t2: large rectangle (factory floor) below t1 within blue area */
.thumb.t2{left:-10%; top:40%; width:360px; height:200px}
/* t3: small rectangle (measuring equipment) below t2, mostly in blue area */
.thumb.t3{left:16%; top:80%; width:200px; height:120px}
/* t4: small square (lens-in-hand) top-right, outside blue shape */
.thumb.t4{right:-12%; top:10%; width:380px; height:240px}
/* Central metallic disc on the boundary between wave and light area */
.disc{position:absolute; left:80%; top:78%; transform:translate(-50%, -50%); width:220px; height:220px; z-index:2; filter:drop-shadow(0 18px 36px rgba(0,0,0,.2))}
.disc img{width:100%; height:100%; object-fit:contain}

.vertical-copy{position:absolute; right:39%; top:8%; transform:none; writing-mode:vertical-rl; text-orientation:mixed; color:var(--color-text-blue); font-weight:700; letter-spacing:.12em; font-size:28px; text-shadow:0 2px 8px rgba(255,255,255,.6)}

/* Products */
/* Products block with white card and decorative background */
.products-block{position:relative; padding:56px 0 24px; background:linear-gradient(180deg, #eef4fb 0%, #ffffff 70%)}
.products-card{position:relative; z-index:2; background:#fff; border-radius:12px; box-shadow:0 24px 48px rgba(17,58,119,.14); padding:22px 26px 26px; width:min(1120px, 94%); margin:0 auto}
.products-card .section-hd{margin-bottom:10px; border-bottom:1px solid #e6eef8; padding-bottom:8px}
.products-card .section-hd .en{font-size:56px; font-weight:900; color:#154994}
.products-card .products-grid{margin-top:16px}
.products-card .section-cta{margin-top:18px}
/* Join Us – rewritten to match design exactly */
section#join-us{position:relative; overflow:hidden; color:#fff; background:linear-gradient(180deg,#f4f7fb 0%, #ffffff 70%)}
.btn.arrow::after{content:'\2192'; display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; border:2px solid rgba(255,255,255,.75); margin-left:10px; font-weight:800}
/* People background strip */
#join-us .join-visual{position:relative}
#join-us .join-photo{width:100%; height:640px; object-fit:cover; object-position:center 12%; display:block; filter:saturate(.96) brightness(1.02)}
#join-us .join-photo{width:100%; height:640px; object-fit:cover; object-position:center 12%; display:block; filter:saturate(.96) brightness(1.02); position:relative; z-index:1}
.section-hd .en{font-weight:800; font-size:28px; letter-spacing:.08em; color:var(--color-text-dark)}
/* Right-aligned gradient card */
#join-us .join-card{position:absolute; right:3.8%; top:120px; width:min(880px, 50%); min-height:560px; border-radius:0; box-shadow:0 22px 48px rgba(17,58,119,.28); padding:34px 44px 46px; z-index:3; overflow:hidden; background:transparent}
#join-us .join-card{position:absolute; right:-1.8%; top:250px; width:min(980px, 50%); min-height:460px; border-radius:0; box-shadow:0 22px 48px rgba(17,58,119,.28); padding:34px 44px 46px; z-index:5; overflow:hidden;
  /* Solid gradient overlay so card sits ON the photo */
  background:linear-gradient(180deg,#1a5fb0 0%, #2b79c2 52%, #5ca4d6 100%);
  backdrop-filter:blur(2px); /* slight glass effect */
}
/* remove image-based background; gradient acts as overlay */
#join-us .join-card-bg{display:none}
#join-us .join-kicker{margin:0 0 6px; font-size:13px; font-weight:800; letter-spacing:.06em}
#join-us .join-title{margin:0 0 16px; font-size:40px; font-weight:800; letter-spacing:.04em}
#join-us .join-desc{margin:0 0 16px; line-height:1.9; opacity:.98}
#join-us .join-cta{display:inline-flex; align-items:center; gap:12px; background:#fff; color:#154994; font-weight:800; text-decoration:none; border-radius:999px; padding:14px 24px; box-shadow:0 10px 22px rgba(17,58,119,.22), 0 0 0 3px rgba(255,255,255,.85); position:relative}
#join-us .join-cta .arrow{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; border:2px solid #c7d6ef}
/* Product tiles match the reference: only the image with a tiny blue offset shadow and a blue caption */
/* Handwritten decoration */
#join-us .join-handwrite{position:absolute; right:4%; bottom:-14px; width:clamp(220px, 27vw, 360px); height:auto; opacity:.98; filter:drop-shadow(0 18px 24px rgba(0,0,0,.2)); z-index:6; pointer-events:none}
.products-card .product p{margin:.55rem 0 0; font-size:12px; text-align:center; color:var(--color-text-blue); font-weight:700}
.section-cta{display:flex; justify-content:center; margin-top:18px}
/* Pill CTA to match screenshot (shared look with NEWS pill, but tuned for products size) */
.products-card .section-cta .pill{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:0; 
  padding:16px 64px; min-width:280px; border-radius:999px; color:#fff; text-decoration:none; font-weight:800;
  background:linear-gradient(180deg,#1d56a5 0%, #103e86 100%);
  box-shadow:0 12px 24px rgba(16,62,134,.25), 0 0 0 3px rgba(158,180,206,.65), 0 0 0 6px rgba(16,62,134,.08);
}
.products-card .section-cta .pill:hover{filter:none; background:linear-gradient(180deg,#2261b5 0%, #114991 100%)}
.products-card .section-cta .pill .arrow{position:absolute; right:22px; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; border:2px solid rgba(255,255,255,.92); color:#fff; font-size:20px}

/* Duo cards */
.duo-cards{padding:12px 0 8px; position:relative; z-index:2; margin-top:-60px}
.duo{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.card{position:relative; border-radius:10px; padding:28px; color:#fff; min-height:140px; text-decoration:none; overflow:hidden; box-shadow:0 18px 40px rgba(17,58,119,.18)}
.card.blue{background:#154994}
.card.navy{background:#154994}
.card .en{font-weight:800; font-size:26px}
.card .ja{opacity:.9; margin-top:6px}
.card .desc{opacity:.85; margin-top:8px; font-size:14px}
.circle-arrow{position:absolute; right:18px; bottom:18px; width:36px; height:36px; border-radius:50%; background:#fff; color:var(--color-main); display:grid; place-items:center; font-weight:700}

/* Recruit banner overlay card */
.recruit-banner{padding:36px 0}
.recruit-wrap{position:relative}
.recruit-img img{width:100%; height:320px; object-fit:cover; border-radius:10px}
.recruit-card{position:absolute; right:6%; top:50%; transform:translateY(-50%); background:linear-gradient(135deg, #218CD9, #8BE6F7); color:#fff; border-radius:10px; padding:22px 26px 26px; width:min(460px, 86%); box-shadow:0 20px 44px rgba(17,58,119,.3); z-index:2}
.recruit-card .kicker{margin:0; font-size:12px; opacity:.9}
.recruit-card .title{margin:4px 0 8px; font-size:28px; letter-spacing:.08em}
.recruit-card .desc{margin:0 0 12px; opacity:.95}
.recruit-card .cta{display:inline-flex; align-items:center; gap:12px; background:#fff; color:var(--color-main); padding:10px 18px; border-radius:999px; text-decoration:none; font-weight:700}
.recruit-card .cta .arrow{display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; border:2px solid #c7d6ef}
/* Handwritten 'Let's Join Us!' decoration image positioned outside the card to avoid overlap */
.recruit-wrap .handwrite-img{position:absolute; right:2%; bottom:-128px; width:clamp(120px, 18vw, 220px); height:auto; opacity:.9; filter:drop-shadow(0 18px 24px rgba(0,0,0,.2)); z-index:1; pointer-events:none}

/* News */
.news{padding:46px 0}
/* Two-column layout with left visual and right list */
/* Give the NEWS block a little extra top room so it clears the recruit section artwork */
.home-news{position:relative; background:linear-gradient(180deg, #eef4fb 0%, #ffffff 70%); padding-top:120px}
/* soft diagonal highlight so items sit on the page background (no white cards) */
.home-news::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background:
  linear-gradient(135deg, rgba(21,73,148,0.05) 8%, rgba(255,255,255,0.25) 35%, rgba(255,255,255,0.35) 55%, rgba(255,255,255,0.25) 80%),
  radial-gradient(540px 300px at 95% 8%, rgba(33,140,217,.08), transparent 70%)}
.news-inner{display:grid; grid-template-columns: 320px 1fr; gap:16px; align-items:start}
.news-left{position:relative}
.news-kicker{margin:0 0 2px; color:var(--color-text-blue); font-size:12px}
.news-inner .en{font-size:36px; font-weight:800; color:var(--color-text-blue); letter-spacing:.04em}
.news-visual{position:relative; margin-top:14px; height:220px}
/* Lens: a bit smaller and sits slightly lower to match the reference */
.news-visual .ring3d{position:absolute; left:-44px; bottom:-80px; width:160px; height:auto; filter:drop-shadow(0 22px 28px rgba(0,0,0,.22)); opacity:.98}

/* Right list */
.home-news .news-list{list-style:none; padding:0; margin:10px 0 16px; display:flex; flex-direction:column; gap:0; position:relative; z-index:1}
/* float items on the section background: no white card; use thin blue dividers */
.home-news .news-item{display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; padding:18px 8px; background:transparent; border-radius:0; text-decoration:none; color:var(--color-text-dark); box-shadow:none; border-bottom:1px solid #cfe2f6}
.home-news .news-item:first-child{border-top:1px solid #cfe2f6}
.home-news .news-item:hover{background-color:rgba(33,140,217,0.02)}
.home-news .news-item .date{color:#7d8da3; font-size:13px; letter-spacing:.02em; min-width:100px}
.home-news .news-item .texts{display:flex; flex-direction:column; gap:2px}
.home-news .news-item .texts .title{font-weight:700; margin:0; color:var(--color-text-dark); font-size:16px}
.home-news .news-item .texts .sub{margin:0; color:#6b7a8f; font-size:14px}
.home-news .circle-btn{display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:2px solid #aac3e5; color:var(--color-main); font-weight:800; background:transparent}
.home-news .news-item:hover .circle-btn{background:var(--color-main); color:#fff; border-color:var(--color-main)}
.home-news .news-more{display:flex; justify-content:flex-end; margin-top:14px}
/* Button style to match the reference: deep blue pill, light-blue ring, centered text, hollow arrow circle on the right */
.home-news .news-more .pill{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:0; 
  padding:18px 68px; min-width:320px; border-radius:999px; color:#fff; text-decoration:none; font-weight:800;
  background:linear-gradient(180deg,#1d56a5 0%, #103e86 100%);
  box-shadow:0 12px 24px rgba(16,62,134,.25), 0 0 0 3px rgba(158,180,206,.65), 0 0 0 6px rgba(16,62,134,.08);
}
.home-news .news-more .pill:hover{filter:none; background:linear-gradient(180deg,#2261b5 0%, #114991 100%)}
.home-news .news-more .pill .arrow{position:absolute; right:22px; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; border:2px solid rgba(255,255,255,.92); color:#fff; font-size:20px}

/* Contact CTA */
/* Home contact overrides to match reference */
.home-contact{padding:40px 0 90px}
.home-contact .contact-card{background:#fff; border-radius:14px; box-shadow:0 18px 44px rgba(17,58,119,.14); padding:28px 30px; display:grid; grid-template-columns:1.2fr 1fr; gap:26px; align-items:center}
.home-contact .contact-header-text{color:var(--color-text-blue)}
.home-contact .contact-card h2{color:var(--color-text-blue); letter-spacing:.08em}
.home-contact .contact-card-content p{color:var(--color-text-dark)}
.home-contact .contact-buttons{display:grid; grid-template-columns:1fr; gap:16px; align-content:start}
.home-contact .contact-buttons .contact-btn,
.home-contact .contact-buttons .phone-number-btn{width:100%}
.home-contact .contact-buttons .phone-info{display:flex; flex-direction:column; gap:6px}
.home-contact .email-btn{background:var(--color-main); color:#fff; border-radius:999px; padding:14px 22px; box-shadow:0 10px 22px rgba(17,58,119,.22); display:flex; justify-content:space-between; align-items:center}
.home-contact .email-btn .email-icon{margin-right:10px; font-size:18px; opacity:.95}
.home-contact .email-btn .arrow-icon-small{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; border:2px solid rgba(255,255,255,.7)}
.home-contact .phone-number-btn{background:#E5F2FB; border:2px solid #b3d9ff; color:var(--color-main); font-weight:800; border-radius:14px; padding:12px 18px; display:flex; align-items:center; justify-content:center; gap:10px; font-size:22px}
.home-contact .phone-hours{margin:0; font-size:12px; color:#6b7a8f}
.home-contact .phone-text{margin:0; font-size:12px; color:#6b7a8f}

/* Footer adjustments */
.footer-logo-g{width:52px}

/* Back to top */
.back-to-top-btn{position:fixed; right:22px; bottom:18px; width:52px; height:52px; border-radius:50%; background:var(--color-accent); color:#fff; display:grid; place-items:center; text-decoration:none; opacity:0; transform:translateY(10px); transition:.2s ease}
.back-to-top-btn.visible{opacity:1; transform:none}

/* Responsive */
@media (max-width: 960px){
  .products-card{width:96%}
  /* reduce products heading size on medium screens */
  .products-card .section-hd .en{font-size:40px}
  .products-grid{grid-template-columns:repeat(2,1fr)}
  .duo{grid-template-columns:1fr}
  .cta-card{grid-template-columns:1fr; gap:12px}
  .home-contact .contact-card{grid-template-columns:1fr}
  /* Join-us responsive */
  #join-us .join-photo{height:600px}
  #join-us .join-card{right:4%; top:140px; width:min(620px, 64%); min-height:420px; padding:32px 40px 42px; border-radius:0}
  #join-us .join-title{font-size:32px}
  #join-us .join-desc{font-size:14px}
  /* Intro responsiveness */
  .wave-inner{height:360px}
  .wave-bg::after{left:0; right:0; top:0; bottom:0; width:auto; height:100%}
  .wave-bg::before{right:-14%; width:60%; height:380px}
  .thumb.t0{left:14%; top:-12px; width:120px; height:120px}
  .thumb.t1{left:6%; top:8%; width:110px; height:110px}
  .thumb.t2{left:7%; top:44%; width:300px; height:170px}
  .thumb.t3{left:26%; top:70%; width:170px; height:110px}
  .thumb.t4{right:4%; top:12%; width:150px; height:150px}
  .disc{left:58%; top:62%; width:200px; height:200px}
  .vertical-copy{right:22%; font-size:16px}
}
@media (max-width: 640px){
  .products-block{padding:40px 0 10px}
  .products-card{padding:18px 18px 20px}
  /* mobile: keep Products title readable but smaller */
  .products-card .section-hd .en{font-size:28px}
  .hero-frame{width:94%; margin:0 auto}
  .hero-caption{left:clamp(12px, 4vw, 20px); top:clamp(16px, 7vw, 48px); max-width:86%}

  /* mobile: move the caption lower so the hero text isn't crowded at the top */
  .hero-caption{left:clamp(12px, 4vw, 20px); top:clamp(28px, 9vw, 72px); max-width:86%}
  .hero-img{height: clamp(300px, 70vw, 460px)}
  .scroll-cue{right:16px; bottom:14px; width:56px; height:56px}
  /* Intro small screens */
  .wave-inner{height:320px}
  .wave-bg::after{left:0; right:0; top:0; bottom:0; width:auto; height:100%}
  .wave-bg::before{right:-18%; width:70%; height:320px}
  .thumb.t0{left:10%; top:-8px; width:96px; height:96px}
  .thumb.t1{left:6%; top:12%; width:96px; height:96px}
  .thumb.t2{left:7%; top:46%; width:230px; height:140px}
  .thumb.t3{left:24%; top:72%; width:140px; height:90px}
  .thumb.t4{right:4%; top:14%; width:120px; height:120px}
  .disc{left:56%; top:64%; width:160px; height:160px}
  .vertical-copy{right:18%; font-size:14px}
  .products-grid{grid-template-columns:1fr}
  /* Join-us mobile: center the card and reduce height */
  #join-us .join-photo{height:520px; object-position:center 22%}
  #join-us .join-card{position:absolute; left:50%; transform:translateX(-50%); right:auto; top:110px; width:min(94%, 560px); min-height:400px; padding:30px 34px 38px; border-radius:0}
    #join-us .join-card{position:absolute; left:50%; transform:translateX(-50%); right:auto; top:110px; width:min(94%, 560px); min-height:400px; padding:30px 34px 38px; border-radius:0; background:linear-gradient(180deg,#1a5fb0 0%, #2b79c2 55%, #5ca4d6 100%); backdrop-filter:blur(2px)}
  #join-us .join-title{font-size:28px}
  #join-us .join-handwrite{right:5%; bottom:16px; width:clamp(180px, 42vw, 300px); z-index:6}
}

/* Decorative rings strip between products and duo cards */
.decor-rings{position:relative; height:380px; margin-top:-80px; overflow:hidden}
.decor-rings::before{content:""; position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(238,244,251,1) 0%, rgba(255,255,255,0.85) 55%, rgba(255,255,255,1) 100%),
  url('../images/topworks_2.jpg') center bottom/cover no-repeat; filter:saturate(.85); z-index:0; pointer-events:none}
.decor-rings > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1}

/* Images-with-text section (ported from General Optics reference) */
#images-with-text{width:100%; max-width:1440px; padding:170px 0 178px; display:flex; flex-direction:column; align-items:center; position:relative}
#images-with-text .bg-2{position:absolute; top:222px; width:100vw; max-width:none; aspect-ratio:1440/878; z-index:-2}
#images-with-text .text-image{width:170px; aspect-ratio:170/540}
#images-with-text .machine-01{position:absolute; top:95px; left:16%; width:16%; aspect-ratio:240/160}
#images-with-text .haruchika-polishing-machine{position:absolute; top:335px; left:0; width:28%; aspect-ratio:400/256}
#images-with-text .automatic-deposition-machine{position:absolute; top:631px; left:22%; width:14%; aspect-ratio:200/120}
#images-with-text .holding-lens{position:absolute; top:135px; right:0; width:28%; aspect-ratio:400/256}
#images-with-text .spinner{position:absolute; top:476px; right:17%; width:21%; aspect-ratio:299/275}

@media (max-width: 960px){
  #images-with-text{padding:120px 0 140px}
}

/* === Imported product/about/join-us sections (General Optics reference) === */
/* Variables subset (names distinct from existing --color-* set) */
:root{
  --max-width: 1440px; --sec-width: 89%; --sec-max-width: 1280px;
  --main-color: #154994; --main-color-30: rgba(21,73,148,.3); --main-color-16: rgba(21,73,148,.16);
  --accent-color: #218CD9; --accent-color-20: rgba(33,140,217,.2); --accent-color-30: rgba(33,140,217,.3);
  --light-blue: #8BE6F7; --light-blue-2:#8AB8D9; --dark-blue:#011D45; --white-30:rgba(255,255,255,.3);
  --shadow-3:0 0 50px rgba(21,73,148,.16);
  --main-to-dark-blue-150deg-gradient: linear-gradient(150deg, var(--main-color) 40%, var(--dark-blue) 160%);
}

/* Section heading */
.section-heading{display:flex; flex-direction:column; align-items:start}
.section-heading ul{font-weight:700; padding:0; margin:0; list-style:none}
.section-heading li::before{content:""; display:inline-block; width:12px; aspect-ratio:1/1; border-radius:50%; background:var(--main-color); margin-right:8px}
.section-heading.white li::before{background:#fff}
.section-heading h2{text-transform:uppercase; font-weight:800; letter-spacing:.02em}
.separator-line{width:100%; height:1px; background:var(--main-color)}

/* Products */
section#products{width:var(--sec-width); max-width:var(--sec-max-width); padding:100px 80px; background:#fff; display:flex; flex-direction:column; gap:40px; color:var(--main-color); box-shadow:var(--shadow-3); margin:0 auto}
.products-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.product-item{display:flex; flex-direction:column; align-items:center; gap:20px}
.product-item img{width:100%; aspect-ratio:352/248; object-fit:contain}
.site-button{width:300px; max-width:100%; border-radius:1000px; padding:4px; background:var(--main-color-30); color:#fff; font-weight:700}
.site-button>.inner{width:100%; border-radius:1000px; background:var(--main-to-dark-blue-150deg-gradient); padding:22px; display:flex; align-items:center; justify-content:center; position:relative}
.site-button img{height:24px; position:absolute; right:20px}
.site-button.white{background:var(--white-30); color:var(--main-color)}
.site-button.white>.inner{background:#fff}

/* About */
section#about{width:100%; max-width:var(--max-width); padding:328px 0 180px; display:flex; flex-direction:column; align-items:center; position:relative; color:#fff}
/* Show full original lenses image without cropping */
.many-lenses{width:auto; height:auto; max-width:100%; object-fit:contain; z-index:-2; position:absolute; bottom:250px; left:80%; transform:translateX(-50%)}
/* Center the two cards grid within the section */
.about-grid{width:75%; max-width:1080px; display:grid; grid-template-columns:repeat(2,1fr); gap:40px; position:relative; z-index:1; margin:0 auto; left: 15%;}
.about-card{display:flex; flex-direction:column; align-items:start; padding:42px 40px 54px; gap:50px; overflow:hidden; position:relative; z-index:1}
.about-card-lower{width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px}
.about-card-button{width:64px; aspect-ratio:1/1; border-radius:50%; background:var(--white-30); padding:4px; display:flex; align-items:center; justify-content:center; transition:padding .2s ease-in}
.about-card-button>.inner{width:100%; height:100%; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#fff}
.about-card-button img{width:24px}
.about-card-button:hover{padding:0}
.bg-gradient{position:absolute; inset:0; z-index:-1; background:linear-gradient(135deg, var(--main-color) -10%, var(--dark-blue) 90%); transition:transform .3s ease-out}
.about-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1}
.about-bg-image-gradient{position:absolute; inset:0; z-index:-1; opacity:.4; background:linear-gradient(270deg, var(--accent-color), var(--light-blue-2))}
.about-card:hover .bg-gradient{transform:translateX(-100%)}

/* Responsive for imported sections */
@media (max-width: 960px){
  section#products{padding:60px 28px}
  .products-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{width:90%; grid-template-columns:1fr}
}
@media (max-width: 640px){
  .products-grid{grid-template-columns:1fr}
  section#about{padding:260px 0 140px}
}

/* Center the Products section CTA button */
section#products .site-button{align-self:center; margin-left:auto; margin-right:auto}