/* Island Sync Online homepage, Gayap-first pass. Ole Talk colour-block language:
   aqua/teal/cobalt with deep ink outlines, modest offset shadows, tactile buttons. */
:root{
  --ink:#182722; --muted:#3f5a53; --paper:#f7faf7; --card:#fff;
  --green:#076450; --deep-teal:#0e5f56;
  --aqua:#a7e8df; --aqua-deep:#50d6ce; --cobalt:#345ee8;
  --peri:#b6caff; --sky:#c8dbff; --wash:#e9eefb; --line:#d8e3df;
}
*{box-sizing:border-box;letter-spacing:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;font-family:"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6}
a{color:inherit}
a:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid var(--cobalt);outline-offset:4px}
:root [hidden]{display:none!important}
.skip{position:absolute;left:16px;top:-56px;z-index:50;background:#fff;color:var(--green);font-weight:700;font-size:14px;padding:10px 16px;border:2px solid var(--ink);border-radius:8px;text-decoration:none;box-shadow:3px 3px 0 var(--ink);transition:top .15s}
.skip:focus-visible{top:12px}
h1,h2,h3,p,figure{margin:0}
p{color:var(--muted)}
h1,h2,h3{color:var(--ink);overflow-wrap:break-word}
h2{font-size:38px;line-height:1.16;font-weight:800}
.section{max-width:1200px;margin:auto;padding:56px 32px}
.eyebrow{font-size:12px;font-weight:800;text-transform:uppercase;margin-bottom:20px;color:var(--deep-teal)}
/* Header */
header{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:14px max(24px,calc((100vw - 1136px)/2));background:#f7faf7f2;backdrop-filter:blur(16px);border-bottom:2px solid var(--ink)}
.brand{display:flex;gap:12px;align-items:center;text-decoration:none;font-weight:700;font-size:18px}
.brand>span{font-family:Georgia,serif}
.brand small{display:block;font-family:"Segoe UI",Arial,sans-serif;font-size:11px;font-weight:400;color:var(--muted)}
header nav{display:flex;gap:28px}
header nav a{text-decoration:none;font-size:14px;font-weight:600}
header nav a:hover{color:var(--cobalt)}
/* Hero: Gayap-led band, copy column + responsive image column. */
.hero{background:var(--aqua);border-bottom:2px solid var(--ink)}
.hero-grid{max-width:1200px;margin:auto;padding:56px 32px;display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}
.hero-copy{min-width:0}
.site-name{font-size:23px;line-height:1.2;font-weight:500;margin-bottom:20px;color:var(--ink)}
.headline{font-size:clamp(36px,4.6vw,58px);line-height:1.08;font-weight:850;text-shadow:3px 3px 0 #e5fffb}
.lead{color:#23403a;max-width:36ch;font-size:17px;margin:24px 0}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero-link{display:inline-flex;align-items:center;background:#fff;color:var(--ink);text-decoration:none;border:2px solid var(--ink);border-radius:8px;box-shadow:3px 3px 0 var(--ink);padding:12px 22px;font-weight:750;min-height:48px;transition:background .12s,transform .12s,box-shadow .12s}
.hero-link:hover{background:#e5fffb}
.hero-link:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.demo-link{display:inline-flex;align-items:center;background:var(--ink);color:#fff;text-decoration:none;border:2px solid var(--ink);border-radius:8px;box-shadow:3px 3px 0 #e5fffb;padding:12px 22px;font-weight:750;min-height:48px;transition:transform .12s,box-shadow .12s,filter .12s}
.demo-link:hover{filter:brightness(1.25)}
.demo-link:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #e5fffb}
.demo-note{font-size:12px;font-weight:600;color:#23403a;margin-top:12px}
.hero-media{min-width:0}
.hero-media img{display:block;width:100%;height:auto;background:#e5fffb;border:2px solid var(--ink);border-radius:12px;box-shadow:6px 6px 0 var(--ink);animation:arrival 1.4s ease-out}
.hero-media figcaption{font-size:12px;color:#23403a;margin-top:10px}
/* Gayap explorer: four capability tabs, stable preview, scenario + outcome. */
.platforms{background:var(--wash);padding-bottom:55px}
.explorer-intro{max-width:70ch;margin:16px 0 24px;font-size:17px}
.tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tabs [role=tab]{font:inherit;text-align:left;background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:10px;padding:14px 16px;cursor:pointer;min-height:96px;transition:background .12s,box-shadow .12s,transform .12s}
.tabs [role=tab] strong{display:block;font-size:16px;font-weight:800}
.tabs [role=tab] small{display:block;margin-top:6px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.tabs [role=tab]:hover{background:#f2fbf9}
.tabs [role=tab][aria-selected=true]{background:var(--aqua);box-shadow:3px 3px 0 var(--ink)}
[role=tabpanel]{background:#fff;border:2px solid var(--ink);border-radius:12px;box-shadow:5px 5px 0 var(--ink);margin-top:16px;padding:28px}
[role=tabpanel]:focus{outline:none}
[role=tabpanel]:focus-visible{outline:3px solid var(--cobalt);outline-offset:4px}
.panel-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:28px;align-items:start}
.panel-copy{min-width:0}
.field{margin-bottom:16px;font-size:15px}
.field span{display:block;font-size:11px;font-weight:800;text-transform:uppercase;color:var(--deep-teal);margin-bottom:4px}
.panel-copy details{margin:18px 0;border:1px solid var(--line);border-radius:8px;padding:0 14px}
.panel-copy summary{cursor:pointer;font-weight:700;font-size:14px;padding:12px 0}
.panel-copy details p{font-size:14px;padding-bottom:14px}
.demo-try{display:inline-flex;align-items:center;min-height:46px;padding:10px 20px;background:var(--green);color:#fff;border:2px solid var(--ink);border-radius:8px;box-shadow:3px 3px 0 var(--ink);text-decoration:none;font-weight:750;transition:filter .12s,transform .12s,box-shadow .12s}
.demo-try:hover{filter:brightness(1.12)}
.demo-try:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.preview{min-width:0}
.preview-frame{display:block;aspect-ratio:16/10;border:2px solid var(--ink);border-radius:10px;overflow:hidden;background:#eef3f1}
.preview-frame img{display:block;width:100%;height:100%;object-fit:cover}
.preview figcaption{font-size:12px;margin-top:10px}
/* Hosting: two deployment cards, one enquiry path. */
.hosting-lead{max-width:70ch;margin:16px 0 24px;font-size:17px}
.host-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.host-card{background:#fff;border:2px solid var(--ink);border-radius:10px;box-shadow:4px 4px 0 var(--ink);padding:24px}
.host-card:first-child{background:#e2faf5}
.host-card:last-child{background:#e9eefb}
.host-card h3{font-size:21px;margin-bottom:10px}
.host-card p{font-size:15px}
.host-note{margin:22px 0;font-size:14px;max-width:70ch}
/* Standalone app cards. */
.apps{background:#fff;border-block:2px solid var(--ink)}
.apps-intro{margin:16px 0 24px;font-size:17px}
.app-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.product{display:flex;flex-direction:column;background:var(--card);border:2px solid var(--ink);border-radius:10px;box-shadow:4px 4px 0 var(--ink)}
.product-head{display:flex;align-items:center;gap:16px;padding:20px 24px 0}
.product-head>img{flex:0 0 auto;border:2px solid var(--ink);border-radius:10px;background:#fff}
.product-id{min-width:0}
.product-id h3{font-size:24px;line-height:1.2;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.product-id .live{font-style:normal;background:#e8f5ee;color:#075b4c;border:1px solid #a8d5c2;border-radius:999px;padding:2px 10px;font-size:11px;font-weight:700;white-space:nowrap}
.tag{font-size:14px;margin-top:4px}
.product .desc{padding:14px 24px 0;font-size:15px}
.product .note{padding:10px 24px 16px;font-size:12px;font-weight:600}
.action{display:inline-flex;align-items:center;align-self:flex-start;min-height:46px;margin-top:auto;padding:10px 20px;background:var(--green);color:#fff;border:2px solid var(--ink);border-radius:8px;box-shadow:3px 3px 0 var(--ink);text-decoration:none;font-weight:750;transition:filter .12s,transform .12s,box-shadow .12s}
#boxhand .action{background:#243e65}
#oletalk .action{background:var(--cobalt)}
.action:hover{filter:brightness(1.12)}
.action:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.product .action{margin-left:24px;margin-right:24px}
.cu-note{margin:16px 24px 0;font-size:13px;background:var(--wash);border:1px solid var(--ink);border-radius:8px;padding:10px 12px}
.dir-link{margin:10px 24px 24px;font-size:13px}
/* Mission: compact illustrated section. */
.mission-head{margin-bottom:28px}
.mission-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:48px;align-items:center}
.mission-media{min-width:0}
.mission-media img{display:block;width:100%;height:auto;background:#fff;border:2px solid var(--ink);border-radius:12px;box-shadow:6px 6px 0 var(--ink)}
.large{font-size:23px;line-height:1.4;color:var(--ink);margin-bottom:18px}
.values{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:25px;font-size:12px;font-weight:650;color:var(--ink)}
.values span:before{content:"+";color:var(--green);margin-right:8px}
/* Contact + footer. */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:65px}
.contact p:not(.eyebrow){margin-top:20px}
.contact-links a{display:block;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none}
.contact-links span{display:block;font-size:12px;color:var(--muted)}
.contact-links strong{font-size:18px;font-weight:600;overflow-wrap:anywhere}
.contact-links a:hover strong{color:var(--cobalt)}
footer.section{padding-top:22px;padding-bottom:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted)}
footer div{display:flex;gap:8px 20px;flex-wrap:wrap}
footer a{text-decoration:none}
/* Entrance motion (JS adds .motion-ready; content is visible without it). */
.motion-ready .reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}
.motion-ready .reveal.visible{opacity:1;transform:none}
@keyframes arrival{from{transform:scale(1.04)}to{transform:scale(1)}}
/* Narrow screens: stack media below copy, keep targets usable. */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:32px;padding:42px 24px}
  .mission-grid{grid-template-columns:1fr;gap:28px}
  .panel-grid{grid-template-columns:1fr}
  .panel-grid .preview{order:-1}
}
@media(max-width:760px){
  header{padding:12px 20px;flex-wrap:wrap;gap:12px}
  .brand{font-size:16px}
  header nav{gap:22px;width:100%;justify-content:space-between}
  header nav a{font-size:12px}
  .tabs{grid-template-columns:1fr 1fr}
  .tabs [role=tab]{min-height:110px;padding:12px}
  .tabs [role=tab] strong{font-size:14px}
  [role=tabpanel]{padding:20px 18px}
  .host-grid{grid-template-columns:1fr}
  .app-grid{grid-template-columns:1fr}
  .section{padding:38px 24px}
  h2{font-size:30px}
  .large{font-size:20px}
  .contact{grid-template-columns:1fr;gap:25px}
  footer.section{flex-direction:column}
  html{scroll-padding-top:125px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .motion-ready .reveal{opacity:1;transform:none}
}