/* ==========================================================
   The hero phone: the iOS app's connect screen, 1:1.
   Sources: AkcaDashboardView.swift (layout, type, colours), ConnectFlower.swift and
   CornflowerGardenView.swift (drawn by js/phone.js with the same maths), RootTabView.swift
   (the glass tab bar). Everything inside the screen is set in iOS points: an iPhone 17 Pro
   screen is 402 x 874 pt, so 1pt = 100cqw / 402 of the screen. The Mac window further down
   (.mac-win) runs the same screen at its own 460 x 760 pt.
   ========================================================== */

/* The phone is Apple's own iPhone 17 Pro bezel (Deep Blue), from fastlane/frameit-frames:
   a 1350 x 2760 PNG whose screen cutout starts at 72,69 and is 1206 x 2622. The live app sits
   in the cutout, a hair larger so no seam shows, and the bezel (with its Dynamic Island) lies on top. */
.app-phone{ position: relative; width: 320px; aspect-ratio: 1350 / 2760; }
.app-phone::before{ content: ""; position: absolute; inset: 1.6% 3.3%; border-radius: 18% / 8.6%; background: #000;
  box-shadow: 0 50px 100px -40px rgba(20,30,80,.55), 0 20px 50px -30px rgba(46,91,255,.45); }
.app-phone::after{ content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: url(/assets/iphone-17-pro-deep-blue.webp) 0 0 / 100% 100% no-repeat; }
.ap-screen{ position: absolute; inset: 2.4% 5.1%; z-index: 1; border-radius: 14% / 6.5%; overflow: hidden; background: #0A0A0B;
  container-type: inline-size; color: #fff; text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", var(--sans);
  -webkit-font-smoothing: antialiased; }
/* Screen size, safe-area top and bottom (status bar, tab bar) and the tab bar's gap, in points. */
.ap-screen{ --pw: 402; --ph: 874; --st: 62; --sb: 95; --tb: 40; }
.ap-screen > *{ --p: calc(100cqw / var(--pw)); }

/* The room: cold neutral when exposed, a deep blue that breathes from the centre when protected. */
.ap-amb, .ap-amb-on{ position: absolute; inset: 0; }
.ap-amb{ background: linear-gradient(#151518, #0A0A0B); }
.ap-amb-on{ background: linear-gradient(#101E3E, #05080F); opacity: 0; transition: opacity .9s ease-in-out; }
.ap-glow{ position: absolute; left: 50%; top: 50%; width: calc(840 * var(--p)); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(46,91,255,.30) 1%, rgba(46,91,255,0)); mix-blend-mode: screen;
  opacity: 0; transition: opacity .9s ease-in-out; }
.ap-app[data-state="on"] .ap-amb-on{ opacity: 1; }
.ap-app[data-state="on"] .ap-glow{ opacity: 1; animation: ap-breath 3.4s ease-in-out infinite alternate; }
@keyframes ap-breath{ from{ transform: scale(.857); opacity: .6; } to{ transform: scale(1); opacity: .9; } }

/* Cornflowers sprout from the bottom edge once protected (drawn by js/phone.js). */
.ap-garden{ position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Status bar: time in the left ear, signal, 5G and battery in the right, level with the island. */
.ap-sbar{ position: absolute; z-index: 3; left: 0; right: 0; top: calc(14.3 * var(--p)); height: calc(35.7 * var(--p));
  display: grid; grid-template-columns: calc(139 * var(--p)) 1fr calc(139 * var(--p)); align-items: center; justify-items: center; pointer-events: none; }
.ap-sbar b{ font-size: calc(17 * var(--p)); font-weight: 600; letter-spacing: calc(-.4 * var(--p)); line-height: 1; padding-left: calc(8 * var(--p)); }
.ap-sbar-r{ grid-column: 3; display: flex; align-items: center; gap: calc(5.5 * var(--p)); padding-right: calc(8 * var(--p)); }
.ap-sbar-r i{ font-style: normal; font-size: calc(15 * var(--p)); font-weight: 600; letter-spacing: calc(-.2 * var(--p)); line-height: 1; }
.ap-cell{ width: calc(18 * var(--p)); height: calc(12 * var(--p)); fill: #fff; }
.ap-batt{ width: calc(28 * var(--p)); height: calc(13 * var(--p)); fill: #fff; color: #fff; }

/* The VStack: 62pt status area, then padding 12 / 28 / 28 down to the tab bar. */
.ap-ui{ position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--st) * var(--p)); bottom: calc(var(--sb) * var(--p));
  display: flex; flex-direction: column; align-items: center; padding: calc(12 * var(--p)) calc(28 * var(--p)) calc(28 * var(--p)); }
.ap-top{ align-self: stretch; display: flex; align-items: center; gap: calc(9 * var(--p)); }
.ap-top img{ width: calc(22 * var(--p)); height: calc(22 * var(--p)); opacity: .95; }
.ap-top b{ font-size: calc(16 * var(--p)); font-weight: 600; letter-spacing: calc(1.5 * var(--p)); color: rgba(255,255,255,.9); line-height: 1; }
.ap-plus{ margin-left: calc(-6 * var(--p)); font-style: normal; font-size: calc(21 * var(--p)); font-weight: 800; line-height: 1; color: #fff;
  translate: 0 calc(-1.5 * var(--p)); text-shadow: 0 0 calc(4 * var(--p)) rgba(255,255,255,.4), 0 0 calc(1.5 * var(--p)) rgba(255,255,255,.35);
  animation: ap-plus 1.6s ease-in-out infinite alternate; }
@keyframes ap-plus{ to{ text-shadow: 0 0 calc(10 * var(--p)) rgba(255,255,255,.9), 0 0 calc(1.5 * var(--p)) rgba(255,255,255,.35); } }

/* The quiet server line. */
.ap-loc{ margin-top: auto; margin-bottom: calc(24 * var(--p)); display: inline-flex; align-items: center; gap: calc(10 * var(--p));
  padding: calc(12 * var(--p)) calc(18 * var(--p)); border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 calc(1 * var(--p)) rgba(255,255,255,.10);
  font-size: calc(15 * var(--p)); font-weight: 500; line-height: 1.2; color: rgba(255,255,255,.9); }
.ap-loc i{ font-style: normal; font-weight: 400; color: rgba(255,255,255,.5); }
.ap-glyph{ display: grid; place-items: center; width: calc(20 * var(--p)); height: calc(20 * var(--p)); color: #5C82FF; }
.ap-glyph svg{ width: 70%; height: 70%; }
.ap-chev{ width: calc(12 * var(--p)); height: calc(12 * var(--p)); color: rgba(255,255,255,.35); }

/* The flower IS the button: 230pt wide, the 300 x 430 drawing. */
.ap-flower{ position: relative; flex: none; width: calc(230 * var(--p)); height: calc(329.7 * var(--p)); padding: 0; border: 0; background: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ap-flower:focus-visible{ outline: 2px solid #5C82FF; outline-offset: 4px; border-radius: 24px; }
.ap-plant{ position: absolute; left: -10%; top: -6%; width: 120%; height: 112%; pointer-events: none; }
/* "It's a button": two rings swell out of the head, before the first connect only. */
.ap-rings{ position: absolute; left: calc(59 * var(--p)); top: calc(83.6 * var(--p)); width: calc(96 * var(--p)); height: calc(96 * var(--p)); pointer-events: none; display: none; }
.ap-rings i{ position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 calc(1.5 * var(--p)) rgba(92,130,255,.55);
  animation: ap-ring 1.8s ease-out infinite; }
.ap-rings i + i{ animation-delay: .9s; }
@keyframes ap-ring{ from{ transform: scale(.72); opacity: .9; } to{ transform: scale(1.5); opacity: 0; } }
.ap-hint{ display: none; align-items: center; gap: calc(6 * var(--p)); margin-top: calc(6 * var(--p));
  font-size: calc(14 * var(--p)); font-weight: 600; color: #5C82FF; animation: ap-hint 1.5s ease-in-out infinite alternate; }
.ap-hint svg{ width: calc(13 * var(--p)); height: calc(13 * var(--p)); }
@keyframes ap-hint{ from{ opacity: .4; } to{ opacity: .95; } }
.ap-app:not(.met)[data-state="off"] .ap-rings{ display: block; }
.ap-app:not(.met)[data-state="off"] .ap-hint{ display: flex; }

/* Status line. */
.ap-status{ margin-bottom: auto; padding-top: calc(34 * var(--p)); display: grid; gap: calc(8 * var(--p)); text-align: center; }
.ap-status b{ font-size: calc(27 * var(--p)); font-weight: 600; line-height: 1.2; color: rgba(255,255,255,.95); }
.ap-status span{ font-size: calc(14 * var(--p)); line-height: 1.2; color: rgba(255,255,255,.5); font-variant-numeric: tabular-nums; }

/* The slim tab on the right edge that pulls out the location wheel. */
.ap-handle{ position: absolute; z-index: 3; right: calc(6 * var(--p)); top: calc((var(--st) + var(--ph) - var(--sb)) / 2 * var(--p)); translate: 0 -50%;
  display: grid; gap: calc(8 * var(--p)); justify-items: center; padding: calc(14 * var(--p)) calc(8 * var(--p)); border-radius: 999px;
  background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 calc(1 * var(--p)) rgba(255,255,255,.12); }
.ap-chevl{ width: calc(12 * var(--p)); height: calc(12 * var(--p)); color: rgba(255,255,255,.7); }
.ap-handle .ap-glyph{ width: calc(18 * var(--p)); height: calc(18 * var(--p)); }

/* Liquid Glass tab bar: VPN, Travel, Settings, 40pt in from the sides, 6pt above the home indicator. */
.ap-tabs{ position: absolute; z-index: 4; left: calc(40 * var(--p)); right: calc(40 * var(--p)); bottom: calc(var(--tb) * var(--p));
  display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(6 * var(--p)); border-radius: 999px;
  background: rgba(255,255,255,.07);
  -webkit-backdrop-filter: blur(calc(10 * var(--p))) saturate(1.6); backdrop-filter: blur(calc(10 * var(--p))) saturate(1.6);
  box-shadow: inset 0 calc(1 * var(--p)) 0 rgba(255,255,255,.22), inset 0 0 0 calc(.5 * var(--p)) rgba(255,255,255,.12),
    0 calc(5 * var(--p)) calc(14 * var(--p)) rgba(0,0,0,.26); }
.ap-tabs span{ display: grid; justify-items: center; gap: calc(3 * var(--p)); padding: calc(10 * var(--p)) 0; border-radius: 999px; color: rgba(255,255,255,.45); }
.ap-tabs span.on{ color: #1AD98C; background: rgba(26,217,140,.22); box-shadow: inset 0 calc(1 * var(--p)) 0 rgba(255,255,255,.18); }
.ap-tabs svg{ width: calc(20 * var(--p)); height: calc(20 * var(--p)); }
.ap-tabs b{ font-size: calc(10 * var(--p)); font-weight: 700; letter-spacing: calc(.5 * var(--p)); line-height: 1.2; }
.ap-home{ position: absolute; z-index: 5; left: 50%; bottom: calc(8 * var(--p)); width: calc(134 * var(--p)); height: calc(5 * var(--p));
  translate: -50% 0; border-radius: 999px; background: #fff; }

/* Hero placement and the line under the phone. */
.hero-visual .app-phone{ position: relative; z-index: 1; width: 330px; }
.hero-visual .app-caption{ position: absolute; bottom: -44px; left: 0; right: 0; }
.app-caption{ margin-top: 16px; text-align: center; font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink-2); transition: color .4s var(--ease); }
.app-caption::before{ content: "\2191"; display: inline-block; margin-right: 8px; color: var(--cf); animation: cap-nudge 1.6s ease-in-out infinite; }
.app-caption.on{ color: #2f9e64; }
.app-caption.on::before{ content: "\273F"; animation: none; color: #2f9e64; }
@keyframes cap-nudge{ 0%, 100%{ transform: translateY(2px); } 50%{ transform: translateY(-3px); } }
@media (max-width: 600px){
  .hero-visual .app-phone{ width: min(290px, 78vw); }
}

/* Power Saving / Reduce Motion: the app settles, the same way. */
@media (prefers-reduced-motion: reduce){
  .ap-plus, .ap-hint, .app-caption::before{ animation: none; }
  .ap-hint{ opacity: .95; }
  .ap-app[data-state="on"] .ap-glow{ animation: none; transform: scale(.857); opacity: .6; }
  .ap-app:not(.met)[data-state="off"] .ap-rings{ display: none; }
}

/* ==========================================================
   The Mac: the same app in its own window (wormtocol-macos: 460 x 760 pt, hidden title
   bar, tabs VPN · Garden · Settings, a shield in the menu bar), on a MacBook Pro 16 whose
   bezel comes from fastlane/frameit-frames (3910 x 2241 PNG, screen 3072 x 1920 at 419,98).
   The desktop is the default 1536 x 960 pt, so 1pt = 100cqw / 1536 of the screen.
   ========================================================== */
/* Its own section: the heading and one line on the left, the download on the right, then the laptop. */
.mac-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.mac-head .lead{ margin-top: 14px; }
.mac-get{ display: flex; align-items: center; gap: 14px; margin: 0; }
.mac-get span{ font-size: 14px; color: var(--ink-3); }
.mac-crop{ margin-top: 48px; }
.mac{ position: relative; margin: 0 auto; width: min(100%, 1000px); aspect-ratio: 3910 / 2241; }
.mac::after{ content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: url(/assets/macbook-pro-16-space-gray.webp) 0 0 / 100% 100% no-repeat; }
.mac-screen{ position: absolute; left: 10.69%; top: 4.35%; width: 78.62%; height: 85.72%; overflow: hidden; container-type: inline-size;
  background: #0d1222; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--sans); color: #fff; -webkit-font-smoothing: antialiased; }
.mac-screen > *{ --m: calc(100cqw / 1536); }
.mac-wall{ position: absolute; inset: 0;
  background: radial-gradient(70% 55% at 50% 108%, rgba(92,130,255,.42), rgba(92,130,255,0) 70%), linear-gradient(#0d1222 0%, #111a36 58%, #1d2f6a 100%); }
/* The menu bar: transparent, white type, the app's menus on the left and the shield among the extras. */
.mac-bar{ position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: calc(24 * var(--m)); display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(14 * var(--m)); font-size: calc(13 * var(--m)); line-height: 1; white-space: nowrap; text-shadow: 0 0 calc(6 * var(--m)) rgba(0,0,0,.25); }
.mb-l, .mb-r{ display: flex; align-items: center; }
.mb-l{ gap: calc(20 * var(--m)); }
.mb-l svg{ width: calc(15 * var(--m)); height: calc(15 * var(--m)); translate: 0 calc(-1 * var(--m)); }
.mb-l b{ font-weight: 700; }
.mb-r{ gap: calc(16 * var(--m)); }
.mb-r svg{ width: calc(16 * var(--m)); height: calc(16 * var(--m)); }
.mb-r .mb-batt{ width: calc(25 * var(--m)); height: calc(12 * var(--m)); }
.mb-check{ opacity: 0; transition: opacity .4s; }
.mac:has(.ap-app[data-state="on"]) .mb-check{ opacity: 1; }
.mb-date{ margin-right: calc(-9 * var(--m)); }
/* The window, centred on the desktop below the menu bar. */
.mac-win{ position: absolute; z-index: 1; left: calc(538 * var(--m)); top: calc(112 * var(--m)); width: calc(460 * var(--m)); height: calc(760 * var(--m));
  border-radius: calc(16 * var(--m));
  box-shadow: 0 calc(24 * var(--m)) calc(70 * var(--m)) rgba(0,0,0,.55), 0 0 0 calc(.5 * var(--m)) rgba(255,255,255,.2); }
.mac-win .ap-screen{ inset: 0; border-radius: inherit; --pw: 460; --ph: 760; --st: 28; --sb: 61; --tb: 6; }
.mac-lights{ position: absolute; z-index: 6; left: calc(14 * var(--m)); top: calc(14 * var(--m)); display: flex; gap: calc(8 * var(--m)); }
.mac-lights i{ width: calc(12 * var(--m)); height: calc(12 * var(--m)); border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 calc(.5 * var(--m)) rgba(0,0,0,.18); }
.mac-lights i:nth-child(2){ background: #FEBC2E; }
.mac-lights i:nth-child(3){ background: #28C840; }
/* On a phone the laptop is cropped in on the window, so the app stays readable. */
@media (max-width: 600px){
  .mac-crop{ overflow: hidden; margin-inline: -16px; }
  .mac{ width: 240%; max-width: none; margin-left: -70%; }
}