/* Rapheldor Software — showcase styles. System fonts only, no external assets. */
:root{
  --bg:#000000;--surface:#161617;--ink:#f5f5f7;--muted:#a1a1a6;--line:#2c2c2e;
  --link:#c4a8e6;--accent:#69418e;--ease:cubic-bezier(.2,.7,.2,1);
  --wrap:1080px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;color-scheme:dark
}
/* App tints are light pastels; on black derive a deep tint from the accent instead (beats the inline value on <body>). */
body{--tint:color-mix(in srgb,var(--accent) 22%,#000)!important}
*{box-sizing:border-box}
html{scroll-padding-top:72px}
body{margin:0;font-size:17px;line-height:1.5;background:var(--bg);overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
img{max-width:100%;display:block}
p{margin:0 0 1em}
h1,h2,h3{margin:0;font-weight:700;text-wrap:balance}
:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:6px}
.wrap{width:min(var(--wrap),calc(100% - 48px));margin-inline:auto}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
[hidden]{display:none!important}
.skip{position:fixed;inset-inline-start:16px;top:-100px;background:var(--ink);color:var(--bg);z-index:100;padding:10px 16px;border-radius:8px}
.skip:focus{top:10px}
.lead{font-size:21px;line-height:1.45;color:var(--muted);max-width:40em}
/* App icons share the iOS squircle radius everywhere they appear. */
.icon{border-radius:22.5%;object-fit:cover;flex-shrink:0;box-shadow:0 0 0 1px #ffffff1a}

/* header */
.site-header{position:sticky;top:0;z-index:20;background:#000000b8;backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);border-bottom:1px solid #ffffff14}
.header-inner{height:56px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600}
.header-inner nav{display:flex;gap:24px;margin-inline-start:auto;font-size:14px}
.header-inner nav a{color:var(--muted)}
.header-inner nav a:hover{color:var(--ink)}
.language-menu{position:relative}
.language-menu summary{list-style:none;display:flex;gap:6px;align-items:center;font-size:14px;color:var(--muted);cursor:pointer;min-height:44px}
.language-menu summary:hover,.language-menu[open] summary{color:var(--ink)}
summary::-webkit-details-marker{display:none}
.language-options{position:absolute;inset-inline-end:0;top:48px;width:220px;max-height:min(420px,70vh);overflow:auto;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 50px #000000b3}
.language-options a{display:block;padding:8px 12px;border-radius:8px;font-size:14px}
.language-options a:hover{background:#ffffff12}
.language-options a[aria-current=page]{font-weight:600;color:var(--link)}

/* home */
.hero{position:relative;min-height:min(86vh,860px);display:grid;place-items:center;overflow:hidden;isolation:isolate;margin-bottom:24px}
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 46% 40% at 50% 50%,#000 35%,#0000)}
.hero-copy{position:relative;z-index:1;text-align:center;padding-block:96px}
.hero-copy h1{font-size:clamp(48px,8vw,104px);line-height:1;letter-spacing:-.04em;margin-bottom:28px}
.hero-copy .lead{margin-inline:auto;max-width:30em}
.icon-field{position:absolute;inset:0;z-index:0;pointer-events:none}
.float-icon{position:absolute;left:var(--x);top:var(--y);width:calc(104px*var(--d));height:auto;aspect-ratio:1;translate:-50% -50%;
  opacity:calc(.12 + .6*var(--d));filter:blur(calc((1 - var(--d))*7px));will-change:transform}
.catalogue{position:relative;display:grid;gap:72px;padding-bottom:96px}
/* Pointer spotlight behind the catalogue; JS moves it, it stays off for touch and reduced motion. */
.catalogue::before{content:"";position:absolute;inset:-40px -120px;z-index:-1;pointer-events:none;opacity:var(--spot,0);transition:opacity .4s;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),#ffffff10,transparent 70%)}
.group h2{position:relative;font-size:28px;letter-spacing:-.015em;padding-bottom:20px;margin-bottom:32px}
.group h2::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--line);transform-origin:left}
[dir=rtl] .group h2::after{transform-origin:right}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:40px 24px}
.tile{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
/* Icons tilt toward the pointer like tvOS focus; JS sets --rx/--ry. */
.tile .icon,.product-icon{transform:perspective(500px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px)) scale(var(--press,1));
  transition:transform .5s var(--ease),box-shadow .35s var(--ease),filter .35s}
.tile .icon{width:96px;height:96px;margin-bottom:14px}
.tile:hover .icon{--lift:-6px;filter:brightness(1.06);box-shadow:0 0 0 1px #ffffff1a,0 22px 44px -14px color-mix(in srgb,var(--glow,#fff) 60%,transparent)}
.tile:active .icon{--press:.94;transition-duration:.12s}
.icon.is-tilting{transition:transform .12s linear,box-shadow .35s var(--ease),filter .35s}
.tile-name{font-size:17px;font-weight:600;line-height:1.3}
.tile:hover .tile-name{text-decoration:underline;text-underline-offset:3px}
.tile-sub{font-size:14px;line-height:1.4;color:var(--muted);margin-top:4px}
.tile-note{font-size:12px;color:var(--muted);margin-top:8px}
.tiles.small{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:28px 16px}
.tiles.small .tile{align-items:center;text-align:center}
.tiles.small .icon{width:64px;height:64px;margin-bottom:10px}
.tiles.small .tile-name{font-size:13px;font-weight:500}
.contact{padding-block:64px 88px;border-top:1px solid var(--line)}
.contact h2{font-size:28px;letter-spacing:-.015em;margin-bottom:12px}
.contact p{color:var(--muted);max-width:40em}
.mail{color:var(--link);font-size:19px;font-weight:600}
.mail:hover{text-decoration:underline;text-underline-offset:3px}

/* footer */
.site-footer{border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.footer-inner{display:flex;flex-wrap:wrap;gap:12px 24px;padding-block:22px}
.footer-inner nav{display:flex;flex-wrap:wrap;gap:8px 24px;margin-inline-start:auto}
.footer-inner a:hover{color:var(--ink);text-decoration:underline}

/* product page */
.product-head{position:relative;overflow:hidden;isolation:isolate;padding-block:28px 88px;text-align:center}
.glow{position:absolute;z-index:-1;left:var(--gx,50%);top:var(--gy,34%);width:min(900px,140vw);aspect-ratio:1;translate:-50% -50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 55%,transparent),transparent);opacity:.5;transition:left 1.2s var(--ease),top 1.2s var(--ease)}
.back-link{display:block;width:max-content;font-size:14px;color:var(--link);margin-bottom:40px}
.back-link::before{content:"‹ "}
.back-link:hover{text-decoration:underline}
.product-grid{display:grid;justify-items:center;gap:28px}
.product-icon{width:128px;height:128px;box-shadow:0 0 0 1px #ffffff1a,0 30px 60px -20px color-mix(in srgb,var(--accent) 70%,transparent)}
.product-name{font-size:17px;font-weight:600;margin-bottom:18px}
.product-name span{display:block;font-weight:400;color:var(--muted);font-size:15px}
.product-head h1{font-size:clamp(38px,6vw,76px);line-height:1.03;letter-spacing:-.035em;margin:0 auto 24px;max-width:14em}
.product-head .lead{margin-inline:auto;max-width:34em}
.store-links{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;margin-top:32px}
.store{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:999px;background:var(--ink);color:#000;font-size:16px;font-weight:600}
.store:hover{opacity:.85}
.release-note{margin:0;font-size:16px;font-weight:600;color:color-mix(in srgb,var(--accent) 40%,#fff)}
.screens{padding-block:8px 28px;view-timeline:--screens block}
.screens-row{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;scrollbar-width:thin}
.shot{flex:none;padding:0;border:0;background:none;border-radius:22px;overflow:hidden;scroll-snap-align:start;box-shadow:0 0 0 1px #ffffff1a}
.shot img{height:min(560px,70vh);width:auto}
.screens-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:8px}
.note{font-size:12px;color:var(--muted);margin:0}
.screens-nav{display:flex;gap:10px;flex-shrink:0}
.screens-nav button{width:44px;height:44px;border:0;border-radius:50%;background:#ffffff1f;font-size:22px;line-height:1;display:grid;place-items:center;transition:background .2s}
.screens-nav button:hover:not(:disabled){background:#ffffff33}
.screens-nav button:disabled{opacity:.3;cursor:default}
.features{padding-block:80px 64px}
.features h2,.more-apps h2,.product-support h2{font-size:28px;letter-spacing:-.015em}
.features h2{margin-bottom:32px}
.feature-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.feature{padding-block:22px;border-top:1px solid var(--line)}
.feature h3{font-size:19px;line-height:1.3;margin-bottom:6px}
.feature p{color:var(--muted);margin:0;font-size:16px}
.download-inner{display:grid;justify-items:center;text-align:center;gap:20px;padding:64px 24px;border-radius:28px;background:radial-gradient(120% 90% at 50% 0%,var(--tint),var(--surface))}
.download-inner h2{font-size:32px;letter-spacing:-.02em}
.download-inner .store-links{margin:0;justify-content:center}
.product-support{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-block:56px;border-bottom:1px solid var(--line)}
.product-support h2{margin-bottom:8px}
.product-support p{color:var(--muted);max-width:44em}
.product-support a{color:var(--link)}
.product-support a:hover{text-decoration:underline}
.legal-links{display:grid;gap:6px;align-content:start;font-size:15px}
.legal-links small{color:var(--muted);font-size:12px}
.more-apps{padding-block:56px 88px}
.more-apps h2{margin-bottom:32px}

/* screenshot viewer */
.image-dialog{border:0;padding:16px;background:var(--surface);color:var(--ink);border-radius:16px;max-width:min(94vw,720px);max-height:94dvh}
.image-dialog::backdrop{background:#000000cc}
.image-dialog>img{max-height:calc(90dvh - 130px);width:auto;margin:auto;border-radius:12px}
.dialog-tools,.dialog-navigation{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:14px;color:var(--muted)}
.dialog-tools{margin-bottom:12px}
.dialog-navigation{margin-top:12px}
.image-dialog button{min-height:44px;padding:0 16px;border:0;border-radius:999px;background:#ffffff1a;font-size:14px;font-weight:600}
.image-dialog button:disabled{opacity:.4;cursor:default}

/* legal + deletion */
.legal-main{padding-block:64px 88px;min-height:70vh}
.legal-main h1{font-size:44px;letter-spacing:-.03em;margin-bottom:12px}
.legal-app-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-block:32px 56px}
.related-app{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;font-size:15px;font-weight:500}
.related-app:hover{background:var(--surface)}
.related-app img{border-radius:22.5%}
.legal-app-picker a[aria-current=page]{background:var(--surface);font-weight:600}
.policy-text{max-width:42em;overflow-wrap:anywhere}
.policy-text h1{font-size:32px;margin-bottom:16px}
.policy-text h2{font-size:22px;margin:40px 0 12px}
.policy-text h3{font-size:18px;margin:28px 0 8px}
.policy-text p,.policy-text li{line-height:1.65}
.policy-text a,.deletion-main section a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.policy-text li{margin-bottom:8px}
.legal-scope{display:flex;flex-wrap:wrap;gap:12px 28px;margin-block:24px 32px}
.legal-scope a{display:inline-flex;align-items:center;min-height:44px;color:var(--link);text-decoration:underline;text-underline-offset:3px}
.legal-scope a[aria-current=page]{color:var(--ink);font-weight:600}
#app-policies{margin-top:56px;padding-top:32px;border-top:1px solid var(--line);scroll-margin-top:88px}
#app-policies>h2{font-size:26px;margin:0 0 12px}
.policy-text code{font-size:.9em;overflow-wrap:anywhere}
.deletion-main{max-width:760px;padding-block:56px 88px}
.deletion-main h1{font-size:40px;letter-spacing:-.03em;margin-bottom:16px}
.deletion-main h2{font-size:22px;margin-bottom:12px}
.app-label{display:flex;align-items:center;gap:14px;font-weight:600;margin-bottom:28px}
.app-label img{width:56px;height:56px;border-radius:22.5%}
.deletion-main section{padding-block:28px;border-bottom:1px solid var(--line)}
.deletion-main section:first-of-type{margin-top:32px}
.deletion-main li{margin-bottom:8px}
.deletion-main .small{color:var(--muted);font-size:14px}
.two-column{display:grid;grid-template-columns:1fr 1fr;gap:40px}

h1:lang(ar),h2:lang(ar),h1:lang(hi),h2:lang(hi),h1:lang(th),h2:lang(th){letter-spacing:normal;line-height:1.3}

/* responsive */
@media (max-width:760px){
  body{font-size:16px}
  .wrap{width:calc(100% - 32px)}
  .header-inner{gap:16px}
  .brand span{display:none}
  .header-inner nav{gap:18px}
  .hero{min-height:auto}
  .hero-copy{padding-block:120px}
  .float-icon{width:calc(64px*var(--d))}
  .lead{font-size:18px}
  .catalogue{gap:48px;padding-bottom:64px}
  .group h2{font-size:22px;margin-bottom:24px;padding-bottom:14px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px}
  .tile .icon{width:80px;height:80px}
  .tiles.small{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 8px}
  .tiles.small .icon{width:56px;height:56px}
  .tiles.small .tile-name{font-size:11px}
  .product-head{padding-block:16px 40px}
  .back-link{margin-bottom:24px}
  .product-grid{gap:20px}
  .product-icon{width:96px;height:96px}
  .screens{padding-block:28px 20px}
  .shot{border-radius:14px}
  .shot img{height:440px}
  .features{padding-block:48px 40px}
  .feature-list{grid-template-columns:1fr}
  .features h2,.more-apps h2,.product-support h2,.contact h2{font-size:24px}
  .download-inner{padding:40px 20px}
  .download-inner h2{font-size:26px}
  .product-support{padding-block:40px}
  .legal-main{padding-block:40px 64px}
  .legal-main h1,.deletion-main h1{font-size:34px}
  .two-column{grid-template-columns:1fr;gap:20px}
  .footer-inner nav{margin-inline-start:0}
}
@media (max-width:360px){
  .header-inner nav{gap:12px;font-size:13px}
  .tiles.small{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* motion: one load sequence on the hero, then only motion that follows the pointer or scroll */
@media (prefers-reduced-motion:no-preference){
  .hero-copy>*,.product-grid>*{animation:enter 1.1s var(--ease) both}
  .hero-copy .lead,.product-grid>:nth-child(2){animation-delay:.12s}
  .float-icon{animation:icon-in 1.6s var(--ease) both;animation-delay:calc(.25s + var(--i)*70ms)}
  .glow{animation:breathe 9s ease-in-out infinite}
  @keyframes enter{from{opacity:0;transform:translateY(28px);filter:blur(10px)}}
  @keyframes icon-in{from{opacity:0;scale:.5}}
  @keyframes breathe{50%{opacity:.32;scale:1.12}}
  @supports (animation-timeline:view()){
    /* Scroll-linked: the hero recedes, tiles rise in, rules draw across, features light up as they are read. */
    .hero-copy,.product-grid{animation:recede linear both;animation-timeline:scroll();animation-range:0 70vh}
    @keyframes recede{to{opacity:0;transform:scale(.92) translateY(-40px);filter:blur(6px)}}
    .tile{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    @keyframes rise{from{opacity:0;transform:translateY(48px) scale(.94)}}
    .group h2::after{animation:draw linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
    @keyframes draw{from{transform:scaleX(0)}}
    .feature{animation:read linear both;animation-timeline:view();animation-range:entry 10% cover 35%}
    @keyframes read{from{opacity:.15;transform:translateY(28px)}}
    .download-inner{animation:grow linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
    @keyframes grow{from{transform:scale(.9);opacity:.3}}
    .shot{animation:shot-in linear both;animation-timeline:--screens;animation-range:entry 5% cover 42%}
    .shot:nth-child(2){animation-range:entry 12% cover 48%}
    .shot:nth-child(n+3){animation-range:entry 18% cover 54%}
    @keyframes shot-in{from{opacity:.2;transform:translateY(90px) scale(.9)}}
  }
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}