.product-page { overflow:hidden; background:#f4f9ff; }.product-hero { display:grid; grid-template-columns:minmax(0,.88fr) minmax(360px,.72fr); align-items:center; gap:clamp(42px,8vw,130px); min-height:720px; padding:78px clamp(22px,10vw,160px); background:#f4f9ff; }.product-copy { position:relative; z-index:1; max-width:580px; }.product-kicker { display:flex; align-items:center; gap:9px; margin:0 0 19px; color:#0c6e63; font-size:14px; font-weight:800; }.product-kicker i { display:block; width:11px; height:11px; border-radius:50%; background:#ffc400; }.product-copy h1 { margin:0; color:#111a34; font-size:clamp(43px,5vw,68px); line-height:1.08; }.product-limit { display:block; margin:16px 0 13px; color:#155dff; font:800 clamp(48px,6vw,82px)/1 "DM Sans","Noto Sans Thai",sans-serif; }.product-copy>p { max-width:530px; margin:0; color:#52617d; font-size:17px; line-height:1.78; }.product-copy>.product-login-note { display:flex; align-items:center; gap:9px; margin-top:17px; color:#17304d; font-size:14px; font-weight:800; }.product-login-note span { display:grid; place-items:center; flex:none; width:22px; height:22px; border-radius:50%; color:white; background:#0c9f88; font-size:12px; }.product-perks { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:30px; }.product-perks div { min-height:126px; padding:17px 15px; border:1px solid #c9dce2; border-radius:7px; background:white; }.product-perks b,.product-perks span { display:block; }.product-perks b { margin-bottom:7px; color:#155dff; font-size:17px; }.product-perks span { color:#52617d; font-size:13px; line-height:1.55; }.product-visual { position:relative; display:grid; place-items:center; min-height:610px; }.product-visual::before { position:absolute; inset:9% 4% 8%; border-radius:48% 48% 10px 10px; background:#d9f2ec; content:""; }.product-phone { position:relative; z-index:1; display:block; width:min(100%,420px); height:auto; filter:drop-shadow(0 32px 30px rgba(17,26,52,.22)); }.product-flow { padding:88px clamp(22px,10vw,160px) 102px; background:white; }.product-flow-head { display:flex; align-items:end; justify-content:space-between; gap:25px; padding-bottom:21px; border-bottom:2px solid #111a34; }.product-flow-head span { color:#0c6e63; font-size:14px; font-weight:800; }.product-flow-head h2 { margin:7px 0 0; color:#111a34; font-size:clamp(31px,4vw,47px); line-height:1.12; }.product-flow-head p { max-width:350px; margin:0; color:#52617d; font-size:14px; line-height:1.75; }.product-steps { display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin:45px 0 64px; }.product-step { position:relative; display:grid; gap:10px; justify-items:start; min-width:0; }.product-step:not(:last-child)::after { position:absolute; z-index:0; top:20px; right:16px; left:47px; height:2px; background:#c9dce2; content:""; }.product-step b { position:relative; z-index:1; display:grid; place-items:center; width:42px; height:42px; border:1px solid #a8c5d4; border-radius:50%; color:#155dff; background:white; font:800 14px "DM Sans",sans-serif; }.product-step strong { max-width:165px; color:#111a34; font-size:15px; line-height:1.5; }.product-after { padding-top:27px; border-top:1px solid #c9dce2; }.product-after h3 { margin:0 0 26px; color:#0c6e63; font-size:17px; }.product-after-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.product-after-grid div { min-height:116px; padding:18px; border-radius:7px; background:#e1f8f1; }.product-after-grid b { display:block; color:#155dff; font:800 14px "DM Sans",sans-serif; }.product-after-grid span { display:block; margin-top:10px; color:#203850; font-size:15px; font-weight:800; }
@media (prefers-reduced-motion:no-preference) { .product-copy { animation:product-rise .7s ease both; }.product-visual { animation:product-rise .8s .14s ease both; }.product-phone { animation:product-float 5s 1s ease-in-out infinite; }.product-perks div { transition:transform .24s ease,box-shadow .24s ease; }.product-perks div:hover { transform:translateY(-5px); box-shadow:0 15px 26px rgba(17,26,52,.1); }.product-step { animation:product-rise .55s calc(var(--step-index) * 90ms) ease both; }.product-after-grid div { transition:transform .24s ease,background .24s ease; }.product-after-grid div:hover { transform:translateY(-4px); background:#fff1c9; } }
@keyframes product-rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes product-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }
@media (max-width:800px) { .product-hero { grid-template-columns:1fr; gap:26px; min-height:0; padding-top:56px; padding-bottom:51px; }.product-copy h1 { font-size:42px; }.product-copy>p { font-size:15px; }.product-copy>.product-login-note { font-size:13px; }.product-perks { margin-top:27px; }.product-perks div { min-height:108px; padding:14px 12px; }.product-perks b { font-size:15px; }.product-perks span { font-size:12px; }.product-visual { min-height:0; }.product-visual::before { inset:8% 2% 4%; }.product-phone { width:min(86%,390px); }.product-flow { padding-top:60px; padding-bottom:65px; }.product-flow-head { display:block; }.product-flow-head p { margin-top:16px; }.product-steps { grid-template-columns:1fr; gap:0; margin:32px 0 46px; }.product-step { grid-template-columns:42px minmax(0,1fr); align-items:center; gap:12px; padding:8px 0; }.product-step:not(:last-child)::after { top:42px; right:auto; bottom:-8px; left:16px; width:2px; height:auto; }.product-step b { width:34px; height:34px; font-size:12px; }.product-step strong { max-width:none; font-size:14px; line-height:1.4; }.product-after-grid { grid-template-columns:repeat(2,1fr); }.product-after-grid div { min-height:96px; padding:15px; } }