.watan-home { --w-ink:#321e37; --w-cream:#f7f3ee; --w-line:rgba(50,30,55,.15); color:var(--w-ink); }
.watan-home *, .watan-home *::before, .watan-home *::after { box-sizing:border-box; }
.aw-intro { position:fixed; inset:0; z-index:2000; display:grid; place-items:center; background:#321e37; pointer-events:none; animation:aw-intro-out .45s .85s cubic-bezier(.65,0,.25,1) both; }
.aw-intro[hidden] { display:none; }
.aw-intro svg { width:100px; height:110px; overflow:visible; }
.aw-intro path { transform-box:fill-box; transform-origin:center; animation:aw-piece-in .5s calc(var(--piece-order,0)*55ms) cubic-bezier(.2,.8,.2,1) both; }
.aw-motion-ready .aw-reveal { opacity:0; transform:translateY(30px); transition:opacity .65s var(--reveal-delay,0ms),transform .65s cubic-bezier(.2,.8,.2,1) var(--reveal-delay,0ms); }
.aw-motion-ready .aw-reveal.is-revealed { opacity:1; transform:none; }
.watan-hero__art { animation:aw-hero-in .9s .35s cubic-bezier(.65,0,.25,1) both; }
.watan-image-slot--hero img { transform-origin:center bottom; will-change:transform; }
.watan-home .watan-button:active { transform:scale(.96); }
.aw-service-ribbon { display:flex; align-items:center; gap:10px; padding:16px max(18px,calc((100% - 1280px)/2)); border-block:1px solid #321e3715; overflow:hidden; }
.aw-service-ribbon__viewport { min-width:0; overflow:hidden; flex:1; direction:ltr; mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.aw-service-ribbon__track { display:flex; width:max-content; animation:aw-marquee 32s linear infinite; }
.aw-service-ribbon__set { display:flex; gap:50px; padding-inline:25px; align-items:center; flex-shrink:0; }
.aw-service-ribbon__set a { display:inline-flex; gap:12px; align-items:center; white-space:nowrap; direction:rtl; font-size:10.8px; }
.aw-service-ribbon__set i { display:grid; place-items:center; width:37px; height:37px; border-radius:12px; background:#e5d6ed; font-size:17.1px; transition:transform .3s; }
.aw-service-ribbon__set a:hover i { transform:rotate(-8deg) scale(1.1); }
.aw-service-ribbon:hover .aw-service-ribbon__track,.aw-service-ribbon:focus-within .aw-service-ribbon__track,.aw-service-ribbon.is-paused .aw-service-ribbon__track { animation-play-state:paused; }
.aw-ribbon-pause { flex-shrink:0; border:1px solid #321e3730; color:#321e37; border-radius:50%; width:32px; height:32px; background:transparent; }
.watan-app-previews { perspective:1000px; padding-bottom:28px; position:relative; }
.watan-app-previews .watan-image-slot { transform:translateY(16px) rotate(-4deg) scale(.92); opacity:.72; transition:transform .6s cubic-bezier(.65,0,.25,1),opacity .5s; }
.watan-app-previews .watan-image-slot.is-front { transform:translateY(-12px) rotate(3deg) scale(1); opacity:1; }
.aw-app-controls { position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:center; gap:10px; }
.aw-app-controls button { border:0; padding:0; width:9px; height:9px; background:#f7f3ee60; border-radius:99px; transition:width .3s,background .3s; }
.aw-app-controls button[aria-pressed="true"] { width:28px; background:#f7f3ee; }
.watan-card-previews { perspective:1200px; }
.watan-card-previews .aw-card-interactive { position:relative; transform-style:preserve-3d; cursor:grab; touch-action:pan-y; user-select:none; transform:perspective(1000px) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg)) scale(.94); transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .4s; }
.watan-card-previews .aw-card-interactive.is-selected { transform:perspective(1000px) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg)) scale(1); box-shadow:0 20px 32px #321e3725; }
.aw-card-interactive img { pointer-events:none; -webkit-user-drag:none; }
.watan-card-previews .aw-card-interactive.is-dragging { cursor:grabbing; transition:none; }
.aw-card-interactive::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:radial-gradient(circle at var(--shine-x,50%) var(--shine-y,50%),#fff6,transparent 60%); opacity:0; transition:opacity .3s; mix-blend-mode:screen; }
.aw-card-interactive:hover::after,.aw-card-interactive:focus-visible::after { opacity:.8; }
.aw-card-interactive:focus-visible { outline:3px solid #785b7e; outline-offset:6px; }
.aw-card-controls { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:24px; }
.aw-card-controls[hidden] { display:none; }
.aw-card-controls p { font-size:9.9px; margin:0; color:#78677b; }
.aw-card-controls button { border:1px solid #321e3730; background:transparent; color:#321e37; width:40px; height:40px; border-radius:50%; }
@keyframes aw-piece-in { from{opacity:0;transform:scale(.35) translateY(12px)} to{opacity:1;transform:none} }
@keyframes aw-intro-out { to{opacity:0;visibility:hidden} }
@keyframes aw-hero-in { from{opacity:0;transform:translateY(45px) scale(.96)} to{opacity:1;transform:none} }
@keyframes aw-marquee { to{transform:translateX(-50%)} }
@media(prefers-reduced-motion:reduce) {
 .aw-intro { display:none!important; }
 .aw-motion-ready .aw-reveal { opacity:1!important; transform:none!important; }
 .watan-hero__art,.aw-service-ribbon__track { animation:none!important; }
 .aw-service-ribbon__set[aria-hidden="true"] { display:none; }
 .aw-service-ribbon__viewport { overflow-x:auto; mask-image:none; }
 .aw-ribbon-pause { display:none; }
 .watan-app-previews .watan-image-slot,.watan-card-previews .aw-card-interactive { transform:none!important; opacity:1; }
 .aw-card-interactive::after { display:none; }
}
.watan-wrap { width:min(1280px,calc(100% - 80px)); margin-inline:auto; }
.watan-home a { color:inherit; text-decoration:none; }
.watan-home h2 { margin:0; font-size:clamp(22.5px,2.7vw,37.8px); }
.watan-home h3 { margin:0; }
.watan-eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 20px; font-size:10.8px; font-weight:500; line-height:1.8; }
.watan-eyebrow>span { width:7px; height:7px; border-radius:50%; background:currentColor; }
.watan-hero { padding:70px 0 64px; }
.watan-hero__grid { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:60px; }
.watan-hero h1 { font-size:clamp(36px,4.86vw,68.4px); line-height:1.28!important; margin:0 0 24px; letter-spacing:0; }
.watan-hero h1>span { color:#785b7e; }
.watan-lead { max-width:510px; font-size:14.4px; line-height:2; margin:0 0 28px; }
.watan-actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; }
.watan-home .watan-button { display:inline-flex; align-items:center; justify-content:center; gap:28px; min-height:52px; padding:13px 25px; border:1px solid var(--w-ink); border-radius:999px; background:var(--w-ink); color:var(--w-cream); font-size:11.7px; font-weight:500; transition:transform .2s,box-shadow .2s; }
.watan-home .watan-button:hover { transform:translateY(-2px); box-shadow:0 8px 24px #321e3720; }
.watan-text-link { display:inline-flex; align-items:center; gap:18px; font-size:11.7px; font-weight:500; }
.watan-text-link:hover { text-decoration:underline; text-underline-offset:6px; }
.watan-hero__footnote { margin-top:42px; font-size:9.9px; color:#78677b; }
.watan-hero__art { padding:0 0 30px; position:relative; }
.watan-brand-panel { position:relative; min-height:440px; background:var(--w-ink); border-radius:24px; padding:32px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; }
.watan-panel-logo { width:180px; height:auto; align-self:flex-start; }
.watan-panel-symbol { width:190px; height:211px; margin-block:30px; }
.watan-panel-caption { display:flex; width:100%; justify-content:space-between; gap:15px; align-items:center; color:var(--w-cream); font-size:9.9px; }
.watan-panel-caption>span:last-child { font-size:8.1px; letter-spacing:1.2px; }
.watan-art-note { position:absolute; bottom:8px; inset-inline-end:24px; display:flex; align-items:center; gap:12px; padding:16px 24px; border:1px solid var(--w-line); background:#e7d5ee; border-radius:12px; color:var(--w-ink); font-size:10.8px; box-shadow:0 8px 18px #321e3708; }
.watan-note-dot { width:7px; height:7px; background:var(--w-ink); border-radius:50%; }
.watan-services { padding:45px 0 65px; }
.watan-section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:30px; }
.watan-section-heading .watan-eyebrow { margin-bottom:12px; }
.watan-section-heading>p { margin:0; max-width:360px; color:#78677b; font-size:11.7px; }
.watan-service-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.watan-home .watan-service { display:block; position:relative; padding:24px 20px 46px; border:1px solid var(--w-line); border-radius:16px; background:transparent; transition:background .2s,transform .2s; }
.watan-service:hover { background:#eee5ee; transform:translateY(-4px); }
.watan-service__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:30px; }
.watan-service__top>i { font-size:24.3px; line-height:1; }
.watan-service__top>span { font-size:9px; opacity:.5; }
.watan-service h3 { font-size:13.5px; }
.watan-service p { margin:12px 0 0; font-size:9.9px; color:#78677b; }
.watan-service__arrow { position:absolute; bottom:14px; inset-inline-end:20px; font-size:18px; }
.watan-options { padding:50px 0 60px; }
.watan-option-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:32px; }
.watan-option { position:relative; border-radius:20px; padding:38px; border:1px solid var(--w-line); background:#eee8e2; }
.watan-option--finance { background:#e8d9ee; }
.watan-option__label { font-size:9px; display:block; margin-bottom:40px; }
.watan-option>i { position:absolute; top:30px; inset-inline-end:34px; font-size:31.5px; }
.watan-option h3 { font-size:clamp(20.7px,2.16vw,28.8px); }
.watan-option p { max-width:430px; font-size:12.6px; margin:20px 0 30px; line-height:2; }
.watan-digital { padding:40px 0 60px; }
.watan-digital__panel { display:grid; grid-template-columns:1.4fr 1fr; gap:60px; align-items:center; background:var(--w-ink); color:var(--w-cream); border-radius:24px; padding:55px; }
.watan-digital__panel h2 { color:var(--w-cream)!important; }
.watan-digital__panel p:not(.watan-eyebrow) { font-size:12.6px; max-width:540px; margin:24px 0 30px; line-height:2; opacity:.85; }
.watan-home .watan-button--cream { background:var(--w-cream); color:var(--w-ink); border-color:var(--w-cream); }
.watan-digital__icon { position:relative; text-align:center; line-height:1; }
.watan-digital__icon>i { font-size:189px; opacity:.5; }
.watan-digital__icon>img { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:60px; height:67px; }
.watan-news { padding:50px 0 65px; }
.watan-news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.watan-news-card { border:1px solid var(--w-line); border-radius:16px; overflow:hidden; }
.watan-news-card>a { display:block; height:100%; }
.watan-news-card__image { aspect-ratio:1.65; overflow:hidden; background:#e9e2db; }
.watan-news-card__image img { width:100%; height:100%; object-fit:cover; transition:transform .32s; }
.watan-news-card:hover img { transform:scale(1.035); }
.watan-news-card__body { padding:24px; }
.watan-news-card time { display:block; font-size:9.9px; color:#78677b; margin-bottom:14px; }
.watan-news-card h3 { font-size:15.3px; min-height:70px; margin-bottom:24px; line-height:1.65!important; }
.watan-partners { padding:36px 0 65px; }
.watan-partner-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.watan-partner { display:grid; place-items:center; min-height:110px; padding:18px; border-block:1px solid var(--w-line); }
.watan-partner img { max-width:100%; max-height:65px; object-fit:contain; }
.watan-campaigns { padding:0 0 30px; }
.watan-campaigns details { border-block:1px solid var(--w-line); padding:20px 0; }
.watan-campaigns summary { cursor:pointer; font-size:11.7px; font-weight:500; }
.watan-campaign-grid { display:grid; gap:20px; margin-top:24px; }
.watan-campaign-grid img { display:block; width:100%; height:auto; border-radius:16px; }
.watan-locations { padding:35px 0 65px; }
.watan-locations .watan-wrap { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.watan-locations h2 { font-size:clamp(21.6px,2.52vw,32.4px); }
.watan-home a:focus-visible, .watan-home summary:focus-visible { outline:3px solid #785b7e; outline-offset:5px; }
.watan-image-slot { display:grid; place-items:center; overflow:hidden; border-radius:24px; background:rgba(50,30,55,.035); }
.watan-image-slot img { display:block; width:100%; height:100%; object-fit:contain; }
.watan-image-slot__placeholder { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:16px; min-width:0; padding:24px; text-align:center; color:#785b7e; }
.watan-image-slot__placeholder svg { width:48px; height:48px; }
.watan-image-slot__placeholder span { font-size:10.8px; }
.watan-image-slot.is-empty { border:1px dashed rgba(50,30,55,.25); }
.watan-image-slot--hero { height:490px; background:transparent; border-radius:0; }
.watan-image-slot--hero img { object-position:center bottom; }
.watan-option .watan-image-slot { width:100%; aspect-ratio:4/3; margin-bottom:28px; background:rgba(247,243,238,.5); }
.watan-option .watan-image-slot.has-image img { object-fit:cover; }
.watan-app-previews { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:center; }
.watan-app-previews .watan-image-slot { aspect-ratio:1/2; border-radius:22px; background:rgba(247,243,238,.08); border-color:rgba(247,243,238,.35); }
.watan-app-previews .watan-image-slot__placeholder { color:#f7f3ee; padding:12px; }
.watan-app-previews .watan-image-slot:nth-child(2) { margin-top:55px; }
.watan-cards { padding:40px 0 65px; }
.watan-card-previews { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; padding:32px; border-radius:24px; background:#eee5ef; }
.watan-card-previews .watan-image-slot { aspect-ratio:9/14; max-height:400px; width:100%; background:rgba(247,243,238,.6); border-radius:18px; }
@media(max-width:767px) { .watan-image-slot--hero { height:380px; } .watan-app-previews { max-width:380px; width:100%; margin:auto; } .watan-card-previews { gap:12px; padding:16px; } .watan-card-previews .watan-image-slot__placeholder { padding:10px; gap:10px; } .watan-card-previews .watan-image-slot__placeholder span { font-size:9px; } .watan-card-previews .watan-image-slot__placeholder svg { width:32px; height:32px; } }
@media(min-width:1600px) { .watan-hero { padding-block:85px; } }
@media(max-width:1100px) { .watan-wrap { width:calc(100% - 48px); } .watan-hero__grid { gap:32px; } .watan-service-grid { grid-template-columns:repeat(3,1fr); } .watan-service { min-height:190px; } .watan-partner-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:767px) { .watan-wrap { width:calc(100% - 36px); } .watan-hero { padding:38px 0; } .watan-hero__grid { grid-template-columns:1fr; gap:30px; } .watan-hero h1 { font-size:41.4px; } .watan-lead { font-size:12.6px; } .watan-hero__footnote { margin-top:26px; } .watan-brand-panel { min-height:330px; padding:26px; } .watan-panel-symbol { width:145px; height:160px; margin-block:20px; } .watan-section-heading { align-items:start; flex-direction:column; gap:15px; } .watan-services,.watan-options,.watan-news { padding:30px 0; } .watan-service-grid { grid-template-columns:repeat(2,1fr); gap:12px; } .watan-service-grid>a:last-child { grid-column:1/-1; } .watan-service__top { margin-bottom:22px; } .watan-option-grid,.watan-news-grid { grid-template-columns:1fr; } .watan-option { padding:28px; } .watan-digital { padding:30px 0; } .watan-digital__panel { padding:32px 26px; grid-template-columns:1fr; gap:35px; } .watan-digital__icon { display:none; } .watan-news-card h3 { min-height:0; } .watan-locations .watan-wrap { flex-direction:column; align-items:start; } .watan-partner-grid { grid-template-columns:repeat(2,1fr); } .watan-actions { gap:20px; } }
@media(prefers-reduced-motion:reduce) { .watan-home * { transition:none!important; scroll-behavior:auto; } }