@font-face { font-family: "Pretendard"; src: url("assets/fonts/PretendardVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root { --paper:#ffffff; --ink:#142d47; --muted:#667587; --line:#e1e7ee; --blue:#185adb; --navy:#142d47; --shell:min(1280px,calc(100% - 96px)); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:108px; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; }
body.has-dialog { overflow:hidden; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; color:inherit; cursor:pointer; }
button,a,img { touch-action:manipulation; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; height:auto; }
h1,h2,h3,p { margin:0; }
h1,h2,h3,p,li { word-break:keep-all; overflow-wrap:break-word; }
[hidden] { display:none !important; }
a:focus-visible,button:focus-visible { outline:3px solid #7faeff; outline-offset:5px; }
.section-shell { width:var(--shell); margin-inline:auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.icon-definitions { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:22px; height:22px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.skip-link { position:fixed; top:12px; left:12px; z-index:100; padding:12px 18px; color:white; background:var(--ink); transform:translateY(-180%); }
.skip-link:focus { transform:translateY(0); }
.site-header { position:sticky; z-index:20; top:0; border-bottom:1px solid var(--line); background:var(--paper); }
.header-inner { display:flex; min-height:80px; align-items:center; justify-content:space-between; gap:32px; }
.wordmark { display:inline-flex; align-items:center; gap:10px; }
.wordmark img { width:42px; height:42px; }
.wordmark-copy { display:flex; flex-direction:column; gap:0; }
.wordmark strong { font-size:20px; font-weight:780; letter-spacing:-.02em; line-height:1.25; }
.wordmark small { font-size:11px; font-weight:500; color:var(--muted); letter-spacing:.02em; }
.site-nav { display:flex; align-items:center; gap:42px; font-size:16px; font-weight:600; }
.site-nav a { padding-block:12px; transition:color 160ms ease; }
.site-nav a:hover { color:var(--blue); }
.menu-button { display:none; align-items:center; gap:10px; border:0; padding:12px 0 12px 12px; background:transparent; font-size:14px; font-weight:600; }
.menu-lines { position:relative; width:20px; height:12px; border-top:1.5px solid currentColor; border-bottom:1.5px solid currentColor; }
.menu-lines::after { position:absolute; top:4px; left:0; width:100%; height:1.5px; background:currentColor; content:""; }
.hero-inner { display:grid; grid-template-columns:.9fr 1.1fr; gap:52px; align-items:center; min-height:620px; padding-block:64px 68px; }
.hero h1 { font-size:clamp(46px,4.45vw,72px); font-weight:780; letter-spacing:-.045em; line-height:1.2; }
.hero-copy > p { max-width:490px; margin-top:28px; color:#455c72; font-size:18px; line-height:1.8; }
.primary-link { display:inline-flex; align-items:center; justify-content:space-between; gap:28px; margin-top:32px; min-height:56px; padding:14px 23px; border-radius:3px; background:var(--blue); color:white; font-size:17px; font-weight:650; transition:background 160ms ease; }
.primary-link:hover { background:#1147b2; }
.primary-link .icon { width:25px; height:25px; }
.hero-media { position:relative; min-width:0; height:480px; }
.hero-screen { border:1px solid #dce4ed; border-radius:5px; box-shadow:0 20px 42px -20px rgba(20,45,71,.28); }
.hero-screen-primary { position:absolute; top:14px; left:0; width:100%; }
.hero-screen-secondary { position:absolute; right:-10px; bottom:0; width:75%; }
.products { padding-block:96px 100px; }
.section-heading h2 { font-size:clamp(32px,3.4vw,48px); font-weight:740; letter-spacing:-.035em; line-height:1.3; }
.section-heading > p { margin-top:18px; font-size:18px; color:var(--muted); }
.product-filters { display:flex; gap:32px; margin-top:34px; margin-bottom:38px; border-bottom:1px solid var(--line); }
.product-filters button { position:relative; border:0; padding:12px 0 16px; background:transparent; color:var(--muted); font-size:16px; font-weight:600; }
.product-filters button::after { position:absolute; bottom:-1px; left:0; width:100%; height:2px; background:transparent; content:""; }
.product-filters button[aria-pressed="true"] { color:var(--blue); }
.product-filters button[aria-pressed="true"]::after { background:var(--blue); }
.product-filters button:hover { color:var(--blue); }
.product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:64px 48px; margin-top:36px; }
.product { min-width:0; }
.product-visual { position:relative; display:flex; width:100%; aspect-ratio:16 / 10; align-items:center; justify-content:center; overflow:hidden; padding:0; border:1px solid var(--line); border-radius:5px; background:#f6f8fb; cursor:zoom-in; }
.product-visual > img { width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
.product-visual-dark { background:#08151e; }
.visual-action { position:absolute; right:12px; bottom:12px; display:inline-flex; align-items:center; gap:5px; padding:6px 9px; border-radius:3px; background:rgba(255,255,255,.94); color:var(--ink); font-size:12px; opacity:0; transition:opacity 160ms ease; }
.visual-action .icon { width:15px; height:15px; }
.product-visual:hover .visual-action,.product-visual:focus-visible .visual-action { opacity:1; }
.product-category { margin-top:19px; margin-bottom:6px; color:var(--muted); font-size:13px; font-weight:550; }
.product h3 { font-size:clamp(24px,2.15vw,30px); line-height:1.3; font-weight:740; letter-spacing:-.03em; }
.product-description { margin-top:12px; color:#455c72; font-size:16px; line-height:1.8; }
.product-features { display:flex; flex-wrap:wrap; gap:5px 18px; padding:0; margin:13px 0 0; list-style:none; color:var(--muted); font-size:13px; }
.product-features li { position:relative; padding-left:9px; }
.product-features li::before { position:absolute; top:.75em; left:0; width:3px; height:3px; border-radius:50%; background:#8b9aac; content:""; }
.text-link,.secondary-link { display:inline-flex; align-items:center; gap:7px; min-height:44px; margin-top:12px; color:var(--blue); font-size:16px; font-weight:600; }
.text-link .icon,.secondary-link .icon { width:17px; height:17px; }
.text-link:hover,.secondary-link:hover { text-decoration:underline; text-underline-offset:5px; }
.product-wide { display:grid; grid-column:1 / -1; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:48px; padding-top:36px; border-top:1px solid var(--line); }
.product-wide .product-category { margin-top:0; }
.phone-gallery { display:flex; height:420px; justify-content:center; align-items:center; gap:28px; padding:24px; background:#edf7f3; }
.phone-gallery button { display:flex; max-width:calc(50% - 14px); height:100%; align-items:center; justify-content:center; padding:0; border:0; background:transparent; cursor:zoom-in; }
.phone-gallery img { width:auto; height:auto; max-height:100%; object-fit:contain; box-shadow:0 8px 22px -12px rgba(20,45,71,.25); }
.product-lead { margin-top:14px; font-size:24px; line-height:1.45; letter-spacing:-.025em; }
.product-links { display:flex; flex-wrap:wrap; gap:0 24px; }
.secondary-link { color:var(--muted); font-size:14px; }
.about { display:grid; grid-template-columns:1fr 1fr; gap:64px; padding-block:76px 96px; border-top:1px solid var(--line); }
.about h2 { font-size:clamp(28px,2.65vw,38px); font-weight:730; line-height:1.45; letter-spacing:-.035em; }
.about-copy { padding-left:48px; border-left:1px solid var(--line); color:#455c72; font-size:17px; line-height:1.9; }
.about-copy p + p { margin-top:20px; }
.contact { color:white; background:var(--navy); }
.contact-inner { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:64px; padding-block:76px 58px; }
.contact h2 { font-size:clamp(30px,2.75vw,42px); font-weight:700; line-height:1.45; letter-spacing:-.03em; }
.contact-details { display:flex; flex-direction:column; gap:28px; padding-left:48px; border-left:1px solid #496078; }
.contact-item { display:flex; gap:22px; align-items:start; font-size:20px; }
.contact-item > .icon { width:28px; height:28px; margin-top:3px; }
.contact-email { display:inline-block; padding-block:3px; font-size:clamp(17px,1.55vw,22px); font-weight:550; overflow-wrap:anywhere; }
.contact-email:hover { text-decoration:underline; text-underline-offset:5px; }
.contact-item div p { margin-top:5px; font-size:16px; color:#b5c7d8; }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:32px; padding-block:28px 36px; border-top:1px solid #496078; font-size:15px; }
.site-footer div > a { font-size:17px; font-weight:700; letter-spacing:-.02em; }
.site-footer p { margin-top:7px; color:#b5c7d8; font-size:13px; }
.footer-link { display:inline-flex; align-items:center; gap:6px; padding-block:10px; }
.footer-link .icon { width:18px; height:18px; }
.footer-link:hover { text-decoration:underline; text-underline-offset:5px; }
.image-dialog { width:min(1440px,calc(100% - 48px)); max-width:none; max-height:calc(100dvh - 48px); padding:20px 24px; border:1px solid var(--line); border-radius:5px; background:white; color:var(--ink); }
.image-dialog::backdrop { background:rgba(6,18,31,.8); }
.dialog-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:14px; }
.dialog-toolbar p { font-size:15px; line-height:1.5; font-weight:550; }
.dialog-close { display:grid; place-items:center; width:44px; height:44px; flex:0 0 auto; padding:0; border:1px solid var(--line); background:white; }
.dialog-image-wrap { display:flex; justify-content:center; background:#f6f8fb; }
.dialog-image { width:auto; height:auto; max-width:100%; max-height:calc(100dvh - 210px); object-fit:contain; }
.dialog-original { display:inline-flex; align-items:center; gap:6px; min-height:44px; margin-top:10px; color:var(--blue); font-size:14px; }
.dialog-original .icon { width:16px; height:16px; }
@media (max-width:1100px) {
  :root { --shell:calc(100% - 64px); }
  .hero-inner { gap:32px; min-height:570px; }
  .hero h1 { font-size:clamp(42px,4.5vw,58px); }
  .hero-copy > p { font-size:17px; }
  .hero-media { height:400px; }
  .hero-screen-secondary { right:0; width:83%; }
  .product-grid,.product-wide { column-gap:32px; }
  .about,.contact-inner { gap:36px; }
  .about-copy,.contact-details { padding-left:28px; }
  .contact-item { gap:14px; font-size:17px; }
}
@media (max-width:800px) {
  :root { --shell:calc(100% - 48px); }
  html { scroll-padding-top:92px; }
  .header-inner { min-height:72px; }
  .site-nav { gap:24px; font-size:14px; }
  .wordmark strong { font-size:17px; }
  .wordmark img { width:36px; height:36px; }
  .hero-inner { grid-template-columns:1fr; min-height:0; gap:38px; padding-block:56px 40px; }
  .hero h1 { font-size:clamp(42px,6.8vw,58px); }
  .hero-copy > p { max-width:530px; margin-top:22px; }
  .hero-media { width:min(100%,640px); height:450px; margin-inline:auto; }
  .hero-screen-primary { top:0; }
  .hero-screen-secondary { width:70%; }
  .products { padding-block:68px; }
  .section-heading > p { font-size:16px; }
  .product-grid { row-gap:48px; column-gap:28px; }
  .product-description { font-size:15px; }
  .product-features { font-size:12px; gap:4px 12px; }
  .product h3 { font-size:24px; }
  .product-wide { grid-template-columns:1fr; gap:26px; }
  .phone-gallery { height:390px; }
  .about { grid-template-columns:1fr; gap:24px; padding-block:54px 64px; }
  .about-copy { padding-left:0; border-left:0; font-size:16px; }
  .contact-inner { grid-template-columns:1fr; gap:36px; padding-block:54px 40px; }
  .contact-details { padding-left:0; border-left:0; gap:24px; }
  .contact-email { font-size:21px; }
}
@media (max-width:560px) {
  :root { --shell:calc(100% - 40px); }
  .header-inner { min-height:70px; gap:20px; }
  .wordmark strong { font-size:16px; }
  .wordmark small { font-size:10px; }
  .wordmark img { width:34px; height:34px; }
  .wordmark { gap:6px; }
  .menu-button { display:inline-flex; }
  .site-nav { position:absolute; top:70px; right:0; left:0; display:none; flex-direction:column; align-items:stretch; gap:0; padding-inline:20px; border-bottom:1px solid var(--line); background:white; font-size:16px; }
  .site-nav.is-open { display:flex; }
  .site-nav a { padding-block:16px; border-top:1px solid var(--line); }
  .hero-inner { gap:32px; padding-block:42px 30px; }
  .hero h1 { font-size:clamp(34px,9.4vw,46px); letter-spacing:-.045em; }
  .hero-copy > p { font-size:16px; line-height:1.8; margin-top:20px; }
  .primary-link { min-height:52px; margin-top:24px; padding:12px 19px; font-size:16px; }
  .hero-media { height:clamp(260px,74vw,370px); }
  .hero-screen-secondary { width:77%; }
  .products { padding-block:52px; }
  .section-heading h2 { font-size:30px; }
  .section-heading > p { margin-top:14px; font-size:15px; }
  .product-filters { justify-content:space-between; gap:12px; margin-top:24px; margin-bottom:28px; }
  .product-filters button { padding-top:12px; padding-bottom:14px; font-size:14px; white-space:nowrap; }
  .product-grid { grid-template-columns:1fr; gap:40px; margin-top:28px; }
  .product-category { margin-top:15px; font-size:12px; }
  .product-description { margin-top:10px; font-size:15px; }
  .product-features { font-size:12px; }
  .product-wide { padding-top:28px; gap:23px; }
  .phone-gallery { height:330px; gap:20px; padding:18px; }
  .phone-gallery button { max-width:calc(50% - 10px); }
  .product-lead { font-size:20px; }
  .about h2 { font-size:27px; }
  .about-copy { font-size:15px; line-height:1.8; }
  .desktop-break { display:none; }
  .contact h2 { font-size:30px; }
  .contact-item { gap:16px; font-size:17px; }
  .contact-email { font-size:18px; }
  .contact-item div p { font-size:14px; }
  .contact-item > .icon { width:25px; height:25px; }
  .site-footer { align-items:start; gap:20px; padding-block:25px 30px; }
  .site-footer p { max-width:210px; font-size:12px; }
  .footer-link { font-size:14px; padding-top:0; }
  .image-dialog { width:calc(100% - 20px); max-height:calc(100dvh - 20px); padding:12px; }
  .dialog-toolbar { gap:8px; }
  .dialog-toolbar p { font-size:13px; }
  .dialog-image { max-height:calc(100dvh - 190px); }
}
@media (hover:none) { .visual-action { opacity:1; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; } }