:root { --ink:#102443; --muted:#607495; --blue:#2386fa; --line:#e2ebf5; --paper:#f5faff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:32px; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial,'Apple SD Gothic Neo','Malgun Gothic',sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
::selection { background:#d5e8ff; }
.wrap { width:min(1320px,calc(100% - 96px)); margin:auto; }
header { height:84px; background:#ffffffed; border-bottom:1px solid #edf3fa; }
.nav { height:100%; display:flex; align-items:center; gap:64px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-size:29px; letter-spacing:-1.2px; font-weight:750; }
.mark { width:28px; height:28px; display:grid; grid-template-columns:repeat(2,1fr); gap:3px; }
.mark i { background:#288cff; border-radius:4px; }
.mark i:nth-child(2),.mark i:nth-child(3) { background:#66adff; }
.navlinks { display:flex; align-items:center; gap:34px; font-size:14px; }
.navlinks a:hover,.footer-links a:hover { color:var(--blue); }
.navtools { margin-left:auto; display:flex; gap:36px; align-items:center; }
.language { display:flex; gap:3px; }
.language button { padding:10px 7px; border:0; background:transparent; font-size:12px; color:#8596ad; cursor:pointer; }
.language button[aria-pressed=true] { color:var(--blue); font-weight:700; }
.contact-link { padding:13px 21px; color:#fff; background:var(--blue); border-radius:8px; font-size:13px; box-shadow:0 5px 15px #2386fa19; }
.arrow { margin-left:12px; }
.hero { position:relative; isolation:isolate; overflow:hidden; background:#ecf6ff; }
.hero-photo { position:absolute; z-index:-2; right:0; top:0; height:100%; width:67%; }
.hero-photo img { width:100%; height:100%; object-fit:cover; object-position:65% 50%; }
.hero::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#edf7ff 0%,#eef7ff 27%,#eff8ffec 35%,#f1f9ff94 46%,#fff0 65%); }
.hero-inner { min-height:535px; position:relative; display:flex; align-items:center; }
.hero-content { padding:64px 0 70px; width:59%; }
.eyebrow { color:var(--blue); font-size:11px; font-weight:700; letter-spacing:2.7px; }
h1 { margin:26px 0 23px; font-size:clamp(39px,4.1vw,59px); letter-spacing:-2.9px; line-height:1.27; font-weight:750; }
h1 .soft { color:var(--blue); }
.hero-content p { font-size:17px; color:#587092; line-height:1.9; margin:0 0 29px; word-break:keep-all; }
.hero-actions { display:flex; gap:30px; align-items:center; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:23px; padding:17px 25px; background:var(--blue); color:white; border-radius:8px; font-size:14px; box-shadow:0 8px 19px #2386fa20; transition:background .2s,transform .2s; }
.button:hover,.contact-link:hover { background:#096ce0; transform:translateY(-2px); }
.text-link { display:inline-flex; gap:16px; color:var(--blue); font-size:14px; border-bottom:1px solid #8fc1ff; padding:5px 0; }
.photo-chip { position:absolute; display:flex; align-items:center; gap:10px; padding:15px 19px; background:#ffffffed; border:1px solid #e6f0fa; border-radius:13px; box-shadow:0 10px 30px #2949760b; font-size:12px; color:#284366; }
.photo-chip.idea { top:54px; left:58%; }
.photo-chip.idea>span:first-child { color:#469aff; font-size:25px; line-height:1; }
.photo-chip.done { right:0; bottom:64px; }
.done-icon { display:grid; place-items:center; width:23px; height:23px; background:var(--blue); border-radius:50%; color:#fff; }
.products { padding:61px 0 79px; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:29px; }
.section-head .eyebrow { display:none; }
h2 { margin:0; font-size:34px; font-weight:700; letter-spacing:-1.4px; line-height:1.4; }
.section-head p { max-width:345px; color:var(--muted); font-size:13px; line-height:1.8; margin:0; word-break:keep-all; }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.product { background:#fff; border:1px solid #e9f1fa; border-radius:13px; overflow:hidden; display:flex; flex-direction:column; transition:transform .25s,box-shadow .25s; }
.product:hover { transform:translateY(-5px); box-shadow:0 16px 35px #315f9610; }
.product-cover { display:block; height:190px; overflow:hidden; background:#eaf3fc; }
.product-cover img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.product-work .product-cover img { object-position:70% 57%; }
.product:hover .product-cover img { transform:scale(1.035); }
.product-body { padding:25px 25px 23px; display:flex; flex-direction:column; flex:1; position:relative; }
.product-top { position:absolute; top:24px; left:25px; }
.product-icon { width:43px; height:46px; border-radius:10px; display:grid; place-items:center; color:#fff; background:var(--blue); }
.product-icon svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.number { display:none; }
h3 { font-size:23px; letter-spacing:-.7px; font-weight:700; margin:0 0 4px; padding-left:60px; }
h3 span { font-weight:700; }
.product p { color:var(--muted); font-size:13px; line-height:1.85; margin:22px 0 0; word-break:keep-all; }
.product .tagline { font-size:12px; padding-left:60px; color:#486080; margin:0; line-height:1.7; }
.tags { display:none; }
.product-link { display:flex; align-items:center; gap:15px; font-size:13px; font-weight:500; color:var(--blue); margin-top:auto; padding-top:23px; }
.product-link span:last-child { font-size:19px; }
.philosophy { display:grid; grid-template-columns:1fr 1fr; gap:70px; padding:55px 60px; background:#e9f4ff; border:1px solid #deedfc; border-radius:15px; }
.philosophy h2 { margin-top:20px; font-size:32px; line-height:1.55; }
.philosophy em { color:var(--blue); font-style:normal; }
.steps { display:grid; gap:23px; }
.step { display:flex; gap:20px; }
.step-number { color:#6da8e8; font-size:11px; padding-top:3px; }
.step strong { font-size:14px; font-weight:600; }
.step p { font-size:12px; color:var(--muted); line-height:1.8; margin:8px 0 0; }
.start { display:flex; justify-content:space-between; align-items:center; gap:35px; padding:72px 0; }
.start h2 { font-size:31px; margin-bottom:12px; }
.start p { margin:0; font-size:13px; line-height:1.8; color:var(--muted); }
.start .button { white-space:nowrap; }
footer { padding:34px 0 25px; background:#fff; border-top:1px solid var(--line); }
.footer-top { display:flex; justify-content:space-between; align-items:start; gap:30px; }
.footer-brand .brand { font-size:25px; }
.footer-brand p { color:var(--muted); font-size:11px; margin-top:15px; }
.footer-links { display:flex; gap:28px; font-size:12px; padding-top:6px; }
.footer-bottom { margin-top:30px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:#889bb2; font-size:10px; }
.skip { position:absolute; top:-60px; left:20px; background:var(--ink); color:#fff; padding:12px; z-index:5; }
.skip:focus { top:10px; }
a:focus-visible,button:focus-visible { outline:3px solid #428ff2; outline-offset:5px; }
html[lang=en] h1 { font-size:clamp(35px,3.7vw,53px); letter-spacing:-2px; }
@media(min-width:1600px) { .hero-inner { min-height:590px; } }
@media(max-width:1050px) { .wrap { width:calc(100% - 56px); } .nav { gap:40px; } .navtools { gap:20px; } .hero-inner { min-height:490px; } .hero-content { width:66%; } h1 { font-size:44px; } .hero-content p { font-size:14px; } .photo-chip.idea { left:67%; top:30px; } .photo-chip.done { bottom:30px; } .section-head h2 { font-size:29px; } .section-head p { max-width:260px; font-size:12px; } .product-body { padding:22px 18px; } .product-top { left:18px; top:22px; } h3 { font-size:20px; padding-left:53px; } .product .tagline { padding-left:53px; font-size:11px; } .product-icon { width:39px; height:43px; } .product p { font-size:12px; } .product-cover { height:160px; } .philosophy { padding:40px; gap:35px; } }
@media(max-width:700px) { .wrap { width:calc(100% - 40px); } header { height:72px; } .nav { gap:20px; } .brand { font-size:25px; } .mark { width:25px; height:25px; } .navlinks { display:none; } .navtools { gap:12px; } .contact-link { padding:10px 12px; font-size:11px; } .contact-link .arrow { margin-left:5px; } .language button { font-size:10px; padding:7px 4px; } .hero-inner { min-height:690px; align-items:start; } .hero-content { width:100%; padding:43px 0 0; } .eyebrow { font-size:10px; letter-spacing:2px; } h1 { font-size:clamp(30px,7.3vw,47px); letter-spacing:-1.8px; margin:21px 0 19px; line-height:1.35; } html[lang=en] h1 { font-size:clamp(30px,7.3vw,44px); letter-spacing:-1.7px; } .hero-content p { font-size:13px; line-height:1.85; margin-bottom:22px; } .hero-actions { gap:24px; } .button { padding:14px 19px; font-size:12px; gap:15px; } .text-link { font-size:12px; } .hero-photo { width:100%; height:360px; top:auto; bottom:0; } .hero-photo img { object-position:65% 55%; } .hero::after { background:linear-gradient(180deg,#edf7ff 0%,#edf7ff 43%,#edf7ffcf 49%,#edf7ff00 65%); } .photo-chip { font-size:10px; padding:11px 13px; border-radius:10px; } .photo-chip.idea { top:auto; bottom:265px; left:0; } .photo-chip.done { bottom:24px; right:0; } .products { padding:43px 0 47px; } .section-head { display:block; margin-bottom:24px; } .section-head h2 { font-size:27px; letter-spacing:-1.5px; word-break:keep-all; } .section-head p { margin-top:14px; max-width:none; } .cards { grid-template-columns:1fr; gap:21px; } .product-cover { height:210px; } .product-body { padding:23px; } .product-top { top:23px; left:23px; } h3 { font-size:23px; padding-left:58px; } .product .tagline { padding-left:58px; font-size:12px; } .product-icon { width:43px; height:45px; } .product p { font-size:13px; margin-top:20px; } .product-link { padding-top:20px; } .philosophy { grid-template-columns:1fr; gap:30px; padding:30px 25px; } .philosophy h2 { font-size:28px; margin-top:15px; } .start { display:block; padding:49px 0; } .start h2 { font-size:27px; } .start p { font-size:12px; } .start .button { margin-top:23px; } .footer-top { display:block; } .footer-links { margin-top:25px; gap:22px; font-size:11px; } .footer-bottom { font-size:9px; gap:20px; line-height:1.8; } .footer-bottom span:last-child { text-align:right; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }
/* Support and policy information */
.faq { padding:72px 0 0; }
.faq .eyebrow { display:block; margin-bottom:15px; }
.faq-list { border-top:1px solid var(--line); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; padding:23px 36px 23px 0; font-size:16px; font-weight:600; position:relative; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; position:absolute; right:8px; top:20px; color:var(--blue); font-size:23px; font-weight:400; }
.faq details[open] summary::after { content:'−'; }
.faq details p { margin:0; padding:0 40px 24px 0; color:var(--muted); font-size:14px; line-height:1.9; max-width:900px; word-break:keep-all; }
.footer-groups { display:flex; gap:60px; }
.footer-groups nav { display:flex; flex-direction:column; gap:13px; font-size:12px; }
.footer-groups h3 { font-size:12px; padding:0; margin:0 0 5px; color:var(--ink); letter-spacing:0; }
.footer-groups a { color:var(--muted); }
.footer-groups a:hover { color:var(--blue); }
.footer-groups .privacy-link { font-weight:700; color:var(--ink); }
.operator { display:flex; flex-direction:column; gap:8px; color:var(--muted); font-size:11px; line-height:1.8; margin-top:30px; }
.back-link { margin-left:auto; font-size:13px; color:var(--muted); }
.policy-page { max-width:920px; padding-top:65px; padding-bottom:80px; }
.policy-page h1 { font-size:40px; letter-spacing:-1.8px; margin:20px 0 30px; }
.policy-page h2 { font-size:22px; letter-spacing:-.7px; margin-bottom:16px; }
.policy-page section { margin:34px 0; }
.policy-page p { color:var(--muted); font-size:14px; line-height:1.95; word-break:keep-all; }
.page-intro { font-size:17px!important; }
.draft-notice { padding:23px 26px; background:#e7f2ff; border:1px solid #d1e4fc; border-radius:12px; }
.draft-notice strong { font-size:15px; }
.draft-notice p { margin:10px 0 0; }
.table-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:#fff; }
table { width:100%; border-collapse:collapse; text-align:left; font-size:13px; min-width:450px; }
th,td { padding:15px; border-bottom:1px solid var(--line); line-height:1.7; }
th { background:#eaf4ff; }
td { color:var(--muted); }
td:first-child { white-space:nowrap; }
tr:last-child td { border:0; }
.contact-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; margin-top:30px; }
.contact-options section { margin:0; padding:23px; background:#fff; border:1px solid var(--line); border-radius:12px; }
.contact-options .eyebrow { font-size:9px; letter-spacing:1px; }
.contact-options h2 { font-size:18px; margin:17px 0 12px; }
.contact-options p { margin:0; font-size:13px; }
.info-list { background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px 22px; font-size:13px; }
.info-list div { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:15px 0; border-bottom:1px solid var(--line); }
.info-list div:last-child { border:0; }
.info-list dt { color:var(--muted); }
.info-list dd { margin:0; }
.policy-footer { display:flex; flex-wrap:wrap; gap:24px; font-size:12px; color:var(--muted); }
summary:focus-visible { outline:3px solid #428ff2; outline-offset:3px; }
@media(max-width:1050px) { .nav { gap:25px; } .navlinks { gap:20px; font-size:12px; } .footer-groups { gap:30px; } }
@media(max-width:700px) { .faq { padding-top:45px; } .faq summary { font-size:14px; line-height:1.7; padding-top:20px; padding-bottom:20px; } .faq details p { font-size:12px; padding-right:15px; } .footer-groups { margin-top:30px; display:grid; grid-template-columns:1fr 1fr; gap:27px 20px; } .footer-groups nav:last-child { grid-column:1 / -1; } .operator { font-size:10px; margin-top:27px; } .policy-page { padding-top:40px; padding-bottom:50px; } .policy-page h1 { font-size:31px; margin:20px 0 25px; } .policy-page h2 { font-size:20px; } .policy-page p { font-size:13px; } .contact-options { grid-template-columns:1fr; } .draft-notice { padding:20px; } .back-link { font-size:11px; } .info-list { padding:6px 17px; font-size:12px; } .policy-footer { gap:18px; font-size:11px; } }
/* Product benefits grounded in the individual products */
.product-details { padding:5px 0 68px; }
.detail-intro { text-align:center; max-width:720px; margin:0 auto 30px; }
.detail-intro h2 { font-size:38px; margin-top:20px; }
.detail-intro p { color:var(--muted); font-size:14px; line-height:1.9; margin:20px 0 0; }
.product-jump { display:flex; justify-content:center; gap:12px; margin-bottom:55px; }
.product-jump a { background:white; border:1px solid var(--line); border-radius:30px; padding:11px 24px; font-size:13px; color:var(--muted); }
.product-jump a:hover { border-color:var(--blue); color:var(--blue); }
.product-jump span { margin-left:17px; color:var(--blue); }
.detail-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:64px; padding:55px 0; border-top:1px solid var(--line); scroll-margin-top:32px; }
.detail-row:nth-of-type(even) .detail-copy { order:2; }
.detail-row:nth-of-type(even) .detail-visual { order:1; }
.detail-copy h2 { font-size:32px; margin:18px 0; line-height:1.45; }
.detail-description { font-size:14px; color:var(--muted); line-height:1.9; margin:0; word-break:keep-all; }
.feature-list { list-style:none; padding:0; margin:25px 0 26px; display:grid; gap:20px; }
.feature-list li { display:flex; gap:12px; }
.feature-check { color:var(--blue); font-size:12px; background:#e3efff; border-radius:50%; display:grid; place-items:center; width:20px; height:20px; flex-shrink:0; margin-top:2px; }
.feature-list h3 { padding:0; margin:0 0 6px; font-size:15px; letter-spacing:-.3px; }
.feature-list p { margin:0; color:var(--muted); font-size:13px; line-height:1.85; word-break:keep-all; }
.detail-visual { background:linear-gradient(150deg,#e6f3ff,#f5faff); border:1px solid #dceafa; padding:30px; border-radius:18px; }
.visual-flow { background:linear-gradient(150deg,#e9edff,#f5f7ff); }
.visual-docs { background:linear-gradient(150deg,#e4f4f6,#f6fcff); }
.visual-top { display:flex; flex-direction:column; gap:12px; margin-bottom:27px; }
.visual-brand { font-size:21px; font-weight:700; letter-spacing:-.7px; }
.example-label { font-size:11px; color:var(--muted); }
.example-steps { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.example-steps li { display:flex; align-items:center; gap:13px; padding:17px; background:#ffffffed; border:1px solid #dce8f6; border-radius:9px; box-shadow:0 5px 15px #3d6a9d06; font-size:13px; }
.example-number { font-size:10px; color:var(--blue); background:#edf6ff; border-radius:5px; padding:7px; }
.technical-note { padding-top:23px; margin-top:25px; border-top:1px solid #ccdef0; }
.tech-caption { font-size:9px; letter-spacing:1.8px; color:var(--blue); font-weight:700; }
.technical-note p { font-size:12px; line-height:1.9; color:#49668a; margin:9px 0 0; }
.example-note { font-size:10px; line-height:1.8; color:var(--muted); margin:20px 0 0; }
.overview-detail { display:flex; gap:12px; font-size:12px; color:var(--muted); padding:0 25px 23px; }
.overview-detail:hover { color:var(--blue); }
@media(max-width:1050px) { .detail-row { gap:35px; } .detail-copy h2 { font-size:28px; } .detail-visual { padding:24px; } }
@media(max-width:700px) { .product-details { padding-top:12px; padding-bottom:25px; } .detail-intro h2 { font-size:28px; } .detail-intro p { font-size:12px; } .detail-intro .eyebrow { font-size:9px; } .product-jump { margin-bottom:32px; gap:8px; } .product-jump a { padding:10px 16px; font-size:12px; } .product-jump span { margin-left:8px; } .detail-row { grid-template-columns:1fr; padding:35px 0; gap:27px; } .detail-row:nth-of-type(even) .detail-copy,.detail-row:nth-of-type(even) .detail-visual { order:initial; } .detail-copy h2 { font-size:27px; } .detail-description { font-size:13px; } .feature-list p { font-size:12px; } .detail-visual { padding:24px; } .overview-detail { padding-left:23px; } }
/* Product concept artwork */
.detail-visual { padding:22px; width:100%; max-width:480px; justify-self:center; }
.visual-top { flex-direction:row; justify-content:space-between; align-items:center; gap:15px; margin-bottom:18px; }
.visual-brand { font-size:19px; white-space:nowrap; }
.example-label { font-size:10px; text-align:right; line-height:1.6; }
.feature-art { margin:0 0 16px; position:relative; border-radius:12px; overflow:hidden; background:#f3f9ff; border:1px solid #ffffffb3; }
.feature-art img { display:block; width:100%; height:clamp(190px,19vw,250px); object-fit:contain; }
.feature-art figcaption { position:absolute; right:10px; bottom:10px; border-radius:20px; background:#ffffffed; color:#7185a0; padding:5px 9px; font-size:9px; }
.example-steps { display:flex; gap:7px; }
.example-steps li { flex:1; flex-direction:column; align-items:flex-start; gap:8px; padding:11px 10px; font-size:11px; line-height:1.6; box-shadow:none; }
.example-number { padding:0; background:none; font-size:9px; }
.technical-note { margin-top:16px; padding-top:14px; }
.example-note { margin-top:13px; }
@media(max-width:700px) { .detail-visual { padding:20px; max-width:none; } .feature-art img { height:auto; aspect-ratio:3/2; } .visual-top { flex-direction:column; align-items:flex-start; gap:7px; } .example-label { text-align:left; } .example-steps li { font-size:10px; padding:10px 8px; } .feature-art { margin-bottom:15px; } }