/* ============================================================
   IQ CONNECT — PARTNERS HUB V1
   Premium Hospitality Partner Ecosystem
============================================================ */

.ph{
    --bg:#050b16;
    --bg2:#081426;
    --panel:#0b192c;
    --panel2:#10213a;
    --ink:#0b1930;
    --muted:#687c91;
    --line:#dce6ef;
    --blue:#147dff;
    --blue2:#315cff;
    --cyan:#46e7ff;
    --green:#48e59b;
    --violet:#8a6cff;
    --amber:#ffc96a;
    --white:#f8fbff;

    width:100%;
    overflow:hidden;
    color:var(--ink);
    background:#fff;
}

.ph *,
.ph *::before,
.ph *::after{
    box-sizing:border-box;
}

.ph a{
    text-decoration:none;
}

.ph button{
    font:inherit;
}

.ph .container{
    width:min(1180px,calc(100% - 44px));
    margin-inline:auto;
}


/* ============================================================
   SHARED
============================================================ */

.ph-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--blue);
    font-size:10px;
    font-weight:900;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.ph-eyebrow::before{
    content:"";
    width:27px;
    height:2px;
    border-radius:10px;
    background:linear-gradient(90deg,var(--blue),var(--cyan));
}

.ph-heading{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(300px,.6fr);
    align-items:end;
    gap:65px;
    margin-bottom:48px;
}

.ph-heading h2,
.ph-os__copy h2,
.ph-map__header h2,
.ph-principles__copy h2,
.ph-final h2{
    margin:13px 0 0;
    font-size:clamp(38px,4.5vw,62px);
    line-height:.96;
    letter-spacing:-.055em;
}

.ph-heading h2 span,
.ph-os__copy h2 span,
.ph-map__header h2 span,
.ph-principles__copy h2 span,
.ph-final h2 span{
    display:block;
    color:var(--blue);
}

.ph-heading > p{
    margin:0;
    color:var(--muted);
    font-size:14px;
    line-height:1.85;
}

.ph-btn{
    min-height:54px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:0 23px;
    border-radius:14px;
    font-size:13px;
    font-weight:850;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease,
        background .25s ease;
}

.ph-btn:hover{
    transform:translateY(-3px);
}

.ph-btn--primary{
    color:#fff;
    background:linear-gradient(135deg,var(--blue),var(--blue2));
    box-shadow:0 18px 45px rgba(20,125,255,.24);
}

.ph-btn--primary:hover{
    box-shadow:0 24px 55px rgba(20,125,255,.33);
}

.ph-btn--ghost{
    color:#d8e7f5;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.045);
    backdrop-filter:blur(12px);
}

.ph-btn--ghost:hover{
    border-color:rgba(70,231,255,.35);
    background:rgba(70,231,255,.07);
}


/* ============================================================
   HERO
============================================================ */

.ph-hero{
    position:relative;
    min-height:790px;
    padding:82px 0 80px;
    overflow:hidden;
    background:
        radial-gradient(circle at 78% 32%,rgba(20,125,255,.17),transparent 30%),
        radial-gradient(circle at 20% 82%,rgba(138,108,255,.09),transparent 25%),
        linear-gradient(135deg,#040914,#071325 55%,#071a30);
}

.ph-hero__grid{
    position:absolute;
    inset:0;
    opacity:.34;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(91,154,214,.07) 1px,transparent 1px),
        linear-gradient(90deg,rgba(91,154,214,.07) 1px,transparent 1px);
    background-size:46px 46px;
    mask-image:linear-gradient(to bottom,#000 5%,transparent 96%);
}

.ph-hero__glow{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    filter:blur(15px);
}

.ph-hero__glow--one{
    width:520px;
    height:520px;
    right:-210px;
    top:-230px;
    background:rgba(20,125,255,.09);
}

.ph-hero__glow--two{
    width:430px;
    height:430px;
    left:-220px;
    bottom:-230px;
    background:rgba(138,108,255,.08);
}

.ph-hero__layout{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0,.88fr) minmax(520px,1.12fr);
    align-items:center;
    gap:65px;
}

.ph-breadcrumb{
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:37px;
    color:#71869b;
    font-size:11px;
}

.ph-breadcrumb a{
    color:#93a9be;
}

.ph-breadcrumb a:hover{
    color:var(--cyan);
}

.ph-kicker{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:21px;
    color:#8eeeff;
    font-size:10px;
    font-weight:900;
    letter-spacing:.17em;
}

.ph-kicker i{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 6px rgba(72,229,155,.08);
}

.ph-hero h1{
    max-width:680px;
    margin:0;
    color:#fff;
    font-size:clamp(50px,6vw,80px);
    line-height:.91;
    letter-spacing:-.067em;
}

.ph-hero h1 span{
    display:block;
    margin-top:9px;
    background:linear-gradient(90deg,#fff,var(--cyan) 50%,#75a9ff);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.ph-hero__lead{
    max-width:620px;
    margin:27px 0 0;
    color:#9db2c7;
    font-size:16px;
    line-height:1.85;
}

.ph-hero__actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:31px;
}

.ph-hero__proof{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:39px;
}

.ph-hero__proof > div{
    min-width:145px;
    padding:12px 14px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    background:rgba(255,255,255,.025);
}

.ph-hero__proof strong{
    display:block;
    color:#e5f1fb;
    font-size:10px;
}

.ph-hero__proof span{
    display:block;
    margin-top:3px;
    color:#607991;
    font-size:8px;
}


/* ============================================================
   HERO ECOSYSTEM
============================================================ */

.ph-ecosystem{
    overflow:hidden;
    border:1px solid rgba(103,170,228,.18);
    border-radius:27px;
    background:linear-gradient(180deg,rgba(13,27,48,.97),rgba(6,14,27,.98));
    box-shadow:
        0 45px 110px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.045);
    transform-style:preserve-3d;
    transition:transform .18s ease;
}

.ph-ecosystem__header{
    min-height:62px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:0 20px;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.ph-ecosystem__header > div{
    display:flex;
    align-items:center;
    gap:10px;
}

.ph-live-dot{
    width:7px;
    height:7px;
    flex:0 0 auto;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 15px rgba(72,229,155,.6);
}

.ph-ecosystem__header small{
    display:block;
    color:#667f98;
    font-size:7px;
    font-weight:850;
    letter-spacing:.12em;
}

.ph-ecosystem__header strong{
    display:block;
    margin-top:3px;
    color:#dbe9f6;
    font-size:10px;
}

.ph-ecosystem__header > span{
    color:#647b92;
    font-size:8px;
}

.ph-ecosystem__canvas{
    position:relative;
    height:500px;
    overflow:hidden;
}

.ph-ecosystem__canvas-grid{
    position:absolute;
    inset:0;
    opacity:.36;
    background-image:
        linear-gradient(rgba(91,151,207,.065) 1px,transparent 1px),
        linear-gradient(90deg,rgba(91,151,207,.065) 1px,transparent 1px);
    background-size:31px 31px;
}

.ph-ecosystem__lines{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.ph-ecosystem__lines path{
    fill:none;
    stroke:rgba(70,231,255,.29);
    stroke-width:1.1;
    stroke-dasharray:5 8;
}

.ph-partner-node{
    position:absolute;
    z-index:4;
    width:105px;
    min-height:58px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:9px 11px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:11px;
    background:rgba(11,25,44,.95);
    box-shadow:0 13px 30px rgba(0,0,0,.23);
}

.ph-partner-node i{
    color:#fff;
    font-size:9px;
    font-style:normal;
    font-weight:900;
}

.ph-partner-node span{
    margin-top:3px;
    color:#668098;
    font-size:7px;
}

.ph-partner-node--1{left:22px;top:72px;}
.ph-partner-node--2{left:13px;top:166px;}
.ph-partner-node--3{left:13px;top:282px;}
.ph-partner-node--4{left:22px;top:377px;}

.ph-partner-node--5{right:22px;top:72px;}
.ph-partner-node--6{right:13px;top:166px;}
.ph-partner-node--7{right:13px;top:282px;}
.ph-partner-node--8{right:22px;top:377px;}

.ph-ecosystem__core{
    position:absolute;
    z-index:5;
    left:50%;
    top:50%;
    width:210px;
    height:210px;
    transform:translate(-50%,-50%);
}

.ph-core-ring{
    position:absolute;
    border-radius:50%;
}

.ph-core-ring--one{
    inset:0;
    border:1px solid rgba(70,231,255,.15);
}

.ph-core-ring--two{
    inset:29px;
    border:1px solid rgba(138,108,255,.21);
}

.ph-core-center{
    position:absolute;
    inset:57px;
    display:grid;
    place-items:center;
    align-content:center;
    border:1px solid rgba(70,231,255,.31);
    border-radius:50%;
    background:radial-gradient(circle,rgba(20,125,255,.3),rgba(6,15,29,.98) 70%);
    box-shadow:
        0 0 60px rgba(20,125,255,.21),
        inset 0 0 35px rgba(70,231,255,.06);
}

.ph-core-center strong{
    color:#fff;
    font-size:32px;
    letter-spacing:-.08em;
}

.ph-core-center span{
    color:#7ceafa;
    font-size:7px;
    font-weight:850;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.ph-ecosystem__footer{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid rgba(255,255,255,.07);
}

.ph-ecosystem__footer > div{
    padding:14px 17px;
}

.ph-ecosystem__footer > div + div{
    border-left:1px solid rgba(255,255,255,.07);
}

.ph-ecosystem__footer span{
    display:block;
    color:#5b738a;
    font-size:7px;
    text-transform:uppercase;
}

.ph-ecosystem__footer strong{
    display:block;
    margin-top:3px;
    color:#d4e3f0;
    font-size:9px;
}


/* ============================================================
   PARTNER BAND
============================================================ */

.ph-band{
    border-bottom:1px solid #e3ebf2;
    background:#f8fbfe;
}

.ph-band__inner{
    min-height:95px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.ph-band__inner > span{
    color:#9aabb9;
    font-size:8px;
    font-weight:900;
    letter-spacing:.15em;
}

.ph-band__inner > div{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    gap:15px;
}

.ph-band b{
    color:#3e5267;
    font-size:9px;
}

.ph-band i{
    width:4px;
    height:4px;
    border-radius:50%;
    background:#a9bac9;
}


/* ============================================================
   PARTNER TYPES
============================================================ */

.ph-types{
    padding:110px 0;
    background:#fff;
}

.ph-types__grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.ph-type{
    position:relative;
    min-height:350px;
    display:flex;
    flex-direction:column;
    padding:25px;
    overflow:hidden;
    border:1px solid #e0e9f1;
    border-radius:21px;
    background:#fff;
    box-shadow:0 15px 45px rgba(20,47,76,.045);
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}

.ph-type::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:3px;
    transform:scaleX(0);
    transform-origin:left;
    background:linear-gradient(90deg,var(--blue),var(--cyan));
    transition:transform .3s ease;
}

.ph-type:hover{
    transform:translateY(-7px);
    border-color:rgba(20,125,255,.24);
    box-shadow:0 28px 65px rgba(20,47,76,.1);
}

.ph-type:hover::after{
    transform:scaleX(1);
}

.ph-type--featured{
    color:#fff;
    border-color:#122d4a;
    background:
        radial-gradient(circle at 85% 15%,rgba(70,231,255,.12),transparent 30%),
        linear-gradient(145deg,#071426,#0c213b);
    box-shadow:0 28px 70px rgba(6,25,46,.16);
}

.ph-type__number{
    position:absolute;
    right:20px;
    top:18px;
    color:#bcc9d4;
    font-size:9px;
    font-weight:900;
}

.ph-type--featured .ph-type__number{
    color:#49617a;
}

.ph-type__icon{
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    margin-bottom:30px;
    border-radius:14px;
    color:var(--blue);
    background:#edf6ff;
    font-family:monospace;
    font-size:15px;
    font-weight:900;
}

.ph-type--featured .ph-type__icon{
    color:var(--cyan);
    border:1px solid rgba(70,231,255,.16);
    background:rgba(70,231,255,.07);
}

.ph-type__label{
    color:var(--blue);
    font-size:8px;
    font-weight:900;
    letter-spacing:.14em;
}

.ph-type h3{
    margin:7px 0 10px;
    color:#142a40;
    font-size:20px;
    letter-spacing:-.035em;
}

.ph-type--featured h3{
    color:#fff;
}

.ph-type p{
    margin:0;
    color:#718498;
    font-size:11px;
    line-height:1.72;
}

.ph-type--featured p{
    color:#829bb2;
}

.ph-type__tags{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-top:18px;
}

.ph-type__tags span{
    padding:6px 8px;
    border-radius:7px;
    color:#63788c;
    background:#f2f6f9;
    font-size:7px;
    font-weight:800;
}

.ph-type--featured .ph-type__tags span{
    color:#9bc7d8;
    background:rgba(255,255,255,.055);
}

.ph-type button{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
    margin-top:auto;
    padding:17px 0 0;
    cursor:pointer;
    border:0;
    border-top:1px solid #e9eef3;
    color:#31516f;
    background:transparent;
    font-size:9px;
    font-weight:850;
    text-align:left;
}

.ph-type--featured button{
    color:#9feaf5;
    border-color:rgba(255,255,255,.08);
}


/* ============================================================
   PARTNER OPERATING SYSTEM
============================================================ */

.ph-os{
    padding:115px 0;
    background:
        radial-gradient(circle at 75% 30%,rgba(20,125,255,.11),transparent 29%),
        var(--bg);
}

.ph-os__layout{
    display:grid;
    grid-template-columns:minmax(320px,.65fr) minmax(580px,1.35fr);
    align-items:center;
    gap:70px;
}

.ph-os__copy h2{
    color:#fff;
}

.ph-os__copy h2 span{
    color:var(--cyan);
}

.ph-os__copy > p{
    margin:23px 0 0;
    color:#7f95aa;
    font-size:13px;
    line-height:1.85;
}

.ph-os__nav{
    display:grid;
    gap:5px;
    margin-top:32px;
}

.ph-os__nav button{
    min-height:48px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 13px;
    cursor:pointer;
    border:1px solid transparent;
    border-radius:10px;
    color:#6e8499;
    background:transparent;
    font-size:10px;
    font-weight:800;
    text-align:left;
    transition:.2s ease;
}

.ph-os__nav button span{
    width:27px;
    color:#465d73;
    font-size:8px;
}

.ph-os__nav button.is-active{
    color:#e6f2fc;
    border-color:rgba(70,231,255,.13);
    background:rgba(70,231,255,.055);
}

.ph-os__nav button.is-active span{
    color:var(--cyan);
}

.ph-os__workspace{
    overflow:hidden;
    border:1px solid rgba(255,255,255,.09);
    border-radius:24px;
    background:linear-gradient(180deg,#0c192c,#081322);
    box-shadow:0 40px 90px rgba(0,0,0,.28);
}

.ph-os__topbar{
    min-height:57px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.ph-os__topbar > div{
    display:flex;
    align-items:center;
    gap:8px;
    color:#8399ae;
    font-size:8px;
    font-weight:850;
    letter-spacing:.1em;
}

.ph-os__topbar i{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--green);
}

.ph-os__topbar > span{
    color:#61788e;
    font-size:8px;
}

.ph-os__main{
    padding:30px;
}

.ph-os__stage > span{
    color:var(--cyan);
    font-size:8px;
    font-weight:900;
    letter-spacing:.14em;
}

.ph-os__stage h3{
    margin:7px 0 8px;
    color:#fff;
    font-size:28px;
    letter-spacing:-.04em;
}

.ph-os__stage p{
    max-width:580px;
    margin:0;
    color:#7c92a8;
    font-size:11px;
    line-height:1.75;
}

.ph-os__visual{
    position:relative;
    height:260px;
    display:grid;
    grid-template-columns:1fr 130px 1fr;
    align-items:center;
    gap:25px;
    margin-top:26px;
    padding:30px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.07);
    border-radius:17px;
    background:#07111f;
}

.ph-os__visual-grid{
    position:absolute;
    inset:0;
    opacity:.35;
    background-image:
        linear-gradient(rgba(89,148,203,.07) 1px,transparent 1px),
        linear-gradient(90deg,rgba(89,148,203,.07) 1px,transparent 1px);
    background-size:27px 27px;
}

.ph-os__partner,
.ph-os__iq{
    position:relative;
    z-index:2;
    min-height:110px;
    display:grid;
    place-items:center;
    align-content:center;
    border:1px solid rgba(255,255,255,.09);
    border-radius:15px;
    background:#0c1b2e;
}

.ph-os__partner small{
    color:#59748d;
    font-size:7px;
}

.ph-os__partner strong{
    margin-top:6px;
    color:#d7e7f4;
    font-size:13px;
}

.ph-os__iq{
    width:120px;
    height:120px;
    min-height:0;
    justify-self:center;
    border-radius:50%;
    border-color:rgba(70,231,255,.27);
    background:radial-gradient(circle,rgba(20,125,255,.25),#081526 70%);
    box-shadow:0 0 45px rgba(20,125,255,.16);
}

.ph-os__iq strong{
    color:#fff;
    font-size:28px;
}

.ph-os__iq small{
    color:#74e5f4;
    font-size:6px;
    letter-spacing:.14em;
}

.ph-os__connector{
    position:absolute;
    z-index:1;
    left:18%;
    right:18%;
    top:50%;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(70,231,255,.4),transparent);
}

.ph-os__connector span{
    position:absolute;
    top:-3px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--cyan);
    box-shadow:0 0 10px rgba(70,231,255,.6);
}

.ph-os__connector span:nth-child(1){left:18%;}
.ph-os__connector span:nth-child(2){left:49%;}
.ph-os__connector span:nth-child(3){left:80%;}

.ph-os__metrics{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-top:9px;
}

.ph-os__metrics > div{
    padding:13px;
    border:1px solid rgba(255,255,255,.065);
    border-radius:11px;
    background:rgba(255,255,255,.025);
}

.ph-os__metrics span{
    color:#456078;
    font-size:7px;
}

.ph-os__metrics strong{
    display:block;
    margin-top:5px;
    color:#d7e5f2;
    font-size:9px;
}

.ph-os__metrics small{
    display:block;
    margin-top:3px;
    color:#5e758b;
    font-size:7px;
}


/* ============================================================
   VALUE
============================================================ */

.ph-value{
    padding:110px 0;
    background:#f6f9fc;
}

.ph-value__grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}

.ph-value article{
    position:relative;
    min-height:270px;
    padding:23px;
    border:1px solid #e0e8ef;
    border-radius:18px;
    background:#fff;
    transition:.25s ease;
}

.ph-value article:hover{
    transform:translateY(-5px);
    box-shadow:0 22px 55px rgba(16,43,70,.08);
}

.ph-value article > span{
    position:absolute;
    right:17px;
    top:16px;
    color:#b5c2cd;
    font-size:8px;
    font-weight:900;
}

.ph-value article > div{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    margin-bottom:38px;
    border-radius:13px;
    color:var(--blue);
    background:#edf6ff;
    font-size:17px;
    font-weight:900;
}

.ph-value h3{
    margin:0 0 9px;
    color:#162c42;
    font-size:15px;
}

.ph-value p{
    margin:0;
    color:#73869a;
    font-size:10px;
    line-height:1.7;
}


/* ============================================================
   ECOSYSTEM MAP
============================================================ */

.ph-map{
    padding:110px 0;
    background:#fff;
}

.ph-map__header{
    max-width:700px;
    margin-bottom:45px;
}

.ph-map__canvas{
    position:relative;
    height:570px;
    overflow:hidden;
    border:1px solid #dce6ef;
    border-radius:27px;
    background:linear-gradient(145deg,#f8fbfe,#eef5fb);
}

.ph-map__grid{
    position:absolute;
    inset:0;
    opacity:.55;
    background-image:
        linear-gradient(rgba(62,120,172,.07) 1px,transparent 1px),
        linear-gradient(90deg,rgba(62,120,172,.07) 1px,transparent 1px);
    background-size:38px 38px;
}

.ph-map__canvas > svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.ph-map__canvas > svg path{
    fill:none;
    stroke:rgba(20,125,255,.25);
    stroke-width:1.2;
    stroke-dasharray:6 8;
}

.ph-map__hotel{
    position:absolute;
    z-index:4;
    left:50%;
    top:50%;
    width:210px;
    height:210px;
    display:grid;
    place-items:center;
    align-content:center;
    transform:translate(-50%,-50%);
    border:1px solid rgba(20,125,255,.2);
    border-radius:50%;
    background:#fff;
    box-shadow:0 30px 70px rgba(20,61,99,.13);
    text-align:center;
}

.ph-map__hotel > span{
    color:var(--blue);
    font-size:7px;
    font-weight:900;
    letter-spacing:.15em;
}

.ph-map__hotel strong{
    margin-top:7px;
    color:#122a42;
    font-size:20px;
    line-height:1.15;
}

.ph-map__hotel small{
    max-width:120px;
    margin-top:7px;
    color:#8a9aaa;
    font-size:7px;
    line-height:1.4;
}

.ph-map__item{
    position:absolute;
    z-index:3;
    width:150px;
    min-height:76px;
    padding:13px;
    border:1px solid #dce6ef;
    border-radius:13px;
    background:#fff;
    box-shadow:0 14px 35px rgba(18,48,77,.07);
}

.ph-map__item i{
    display:block;
    color:#9eafbd;
    font-size:7px;
    font-style:normal;
}

.ph-map__item strong{
    display:block;
    margin-top:5px;
    color:#1d354d;
    font-size:10px;
}

.ph-map__item span{
    display:block;
    margin-top:3px;
    color:#8294a6;
    font-size:7px;
}

.ph-map__item--1{left:5%;top:12%;}
.ph-map__item--2{left:3%;top:43%;}
.ph-map__item--3{left:5%;bottom:12%;}
.ph-map__item--4{right:5%;top:12%;}
.ph-map__item--5{right:3%;top:43%;}
.ph-map__item--6{right:5%;bottom:12%;}


/* ============================================================
   PRINCIPLES
============================================================ */

.ph-principles{
    padding:110px 0;
    background:#f7f9fc;
}

.ph-principles__layout{
    display:grid;
    grid-template-columns:minmax(300px,.72fr) minmax(500px,1.28fr);
    align-items:start;
    gap:85px;
}

.ph-principles__list{
    display:grid;
    gap:8px;
}

.ph-principles__list article{
    display:grid;
    grid-template-columns:50px 1fr;
    gap:15px;
    padding:18px;
    border:1px solid #e0e8ef;
    border-radius:14px;
    background:#fff;
    transition:.22s ease;
}

.ph-principles__list article:hover{
    transform:translateX(5px);
    border-color:rgba(20,125,255,.24);
}

.ph-principles__list article > strong{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:11px;
    color:var(--blue);
    background:#edf6ff;
    font-size:8px;
}

.ph-principles__list h3{
    margin:0 0 5px;
    color:#172e45;
    font-size:13px;
}

.ph-principles__list p{
    margin:0;
    color:#718498;
    font-size:10px;
    line-height:1.65;
}


/* ============================================================
   FINAL CTA
============================================================ */

.ph-final{
    position:relative;
    padding:110px 0;
    overflow:hidden;
    background:
        radial-gradient(circle at 80% 45%,rgba(20,125,255,.17),transparent 29%),
        linear-gradient(135deg,#050a15,#08182c);
}

.ph-final__grid{
    position:absolute;
    inset:0;
    opacity:.3;
    background-image:
        linear-gradient(rgba(90,149,204,.07) 1px,transparent 1px),
        linear-gradient(90deg,rgba(90,149,204,.07) 1px,transparent 1px);
    background-size:43px 43px;
}

.ph-final__layout{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0,1fr) 390px;
    align-items:center;
    gap:70px;
}

.ph-final h2{
    color:#fff;
}

.ph-final h2 span{
    color:var(--cyan);
}

.ph-final__copy > p{
    max-width:690px;
    margin:22px 0 0;
    color:#849bb1;
    font-size:13px;
    line-height:1.85;
}

.ph-final__actions{
    display:flex;
    flex-wrap:wrap;
    gap:11px;
    margin-top:28px;
}

.ph-final__visual{
    position:relative;
    width:340px;
    height:340px;
    justify-self:end;
    transform-style:preserve-3d;
}

.ph-final__ring{
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(70,231,255,.13);
}

.ph-final__ring--one{inset:0;}
.ph-final__ring--two{
    inset:48px;
    border-color:rgba(138,108,255,.17);
}
.ph-final__ring--three{
    inset:93px;
    border-color:rgba(70,231,255,.2);
}

.ph-final__core{
    position:absolute;
    left:50%;
    top:50%;
    width:115px;
    height:115px;
    display:grid;
    place-items:center;
    align-content:center;
    transform:translate(-50%,-50%);
    border:1px solid rgba(70,231,255,.3);
    border-radius:50%;
    background:radial-gradient(circle,rgba(20,125,255,.28),#081525 70%);
    box-shadow:0 0 55px rgba(20,125,255,.19);
}

.ph-final__core strong{
    color:#fff;
    font-size:30px;
    letter-spacing:-.07em;
}

.ph-final__core span{
    color:#77e7f6;
    font-size:6px;
    font-weight:900;
    letter-spacing:.13em;
}

.ph-final__node{
    position:absolute;
    min-width:58px;
    padding:8px 10px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:8px;
    color:#9ceaf5;
    background:#0a1829;
    box-shadow:0 12px 30px rgba(0,0,0,.22);
    font-size:7px;
    font-style:normal;
    font-weight:900;
    text-align:center;
}

.ph-final__node--1{left:7px;top:70px;}
.ph-final__node--2{right:4px;top:78px;}
.ph-final__node--3{left:7px;bottom:68px;}
.ph-final__node--4{right:4px;bottom:73px;}


/* ============================================================
   MODAL
============================================================ */

.ph-modal{
    position:fixed;
    z-index:9999;
    inset:0;
    display:grid;
    place-items:center;
    padding:20px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.25s ease;
}

.ph-modal.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.ph-modal__backdrop{
    position:absolute;
    inset:0;
    background:rgba(2,7,15,.76);
    backdrop-filter:blur(9px);
}

.ph-modal__dialog{
    position:relative;
    z-index:2;
    width:min(520px,100%);
    padding:38px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.11);
    border-radius:24px;
    color:#fff;
    background:
        radial-gradient(circle at 90% 10%,rgba(20,125,255,.16),transparent 32%),
        #091426;
    box-shadow:0 45px 110px rgba(0,0,0,.45);
}

.ph-modal__close{
    position:absolute;
    right:14px;
    top:13px;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    cursor:pointer;
    border:0;
    border-radius:9px;
    color:#8399ae;
    background:rgba(255,255,255,.05);
    font-size:19px;
}

.ph-modal__dialog h3{
    margin:12px 0 10px;
    font-size:30px;
    letter-spacing:-.045em;
}

.ph-modal__dialog > p{
    margin:0;
    color:#879eb4;
    font-size:11px;
    line-height:1.75;
}

.ph-modal__flow{
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr;
    align-items:center;
    gap:8px;
    margin:26px 0;
}

.ph-modal__flow > div{
    padding:12px 8px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    background:rgba(255,255,255,.035);
    text-align:center;
}

.ph-modal__flow span{
    display:block;
    color:#52718d;
    font-size:7px;
}

.ph-modal__flow strong{
    display:block;
    margin-top:4px;
    color:#d9e8f4;
    font-size:9px;
}

.ph-modal__flow > i{
    color:#47647d;
    font-style:normal;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media(max-width:1100px){

    .ph-hero__layout{
        grid-template-columns:1fr 1fr;
        gap:40px;
    }

    .ph-os__layout{
        grid-template-columns:320px 1fr;
        gap:40px;
    }

    .ph-final__layout{
        grid-template-columns:1fr 310px;
    }

    .ph-final__visual{
        width:300px;
        height:300px;
    }
}

@media(max-width:920px){

    .ph .container{
        width:min(760px,calc(100% - 32px));
    }

    .ph-hero__layout,
    .ph-os__layout,
    .ph-principles__layout,
    .ph-final__layout{
        grid-template-columns:1fr;
    }

    .ph-heading{
        grid-template-columns:1fr;
        gap:18px;
    }

    .ph-types__grid{
        grid-template-columns:1fr 1fr;
    }

    .ph-value__grid{
        grid-template-columns:1fr 1fr;
    }

    .ph-band__inner{
        align-items:flex-start;
        flex-direction:column;
        justify-content:center;
        padding:22px 0;
    }

    .ph-band__inner > div{
        justify-content:flex-start;
    }

    .ph-os__copy{
        max-width:650px;
    }

    .ph-os__nav{
        grid-template-columns:repeat(5,1fr);
    }

    .ph-os__nav button{
        justify-content:center;
        flex-direction:column;
        min-height:70px;
    }

    .ph-final__visual{
        justify-self:center;
    }
}

@media(max-width:720px){

    .ph .container{
        width:calc(100% - 28px);
    }

    .ph-hero{
        min-height:auto;
        padding:54px 0 65px;
    }

    .ph-hero h1{
        font-size:clamp(45px,13vw,65px);
    }

    .ph-types,
    .ph-os,
    .ph-value,
    .ph-map,
    .ph-principles,
    .ph-final{
        padding:80px 0;
    }

    .ph-types__grid,
    .ph-value__grid{
        grid-template-columns:1fr;
    }

    .ph-type{
        min-height:315px;
    }

    .ph-ecosystem__canvas{
        height:auto;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
        padding:20px;
    }

    .ph-ecosystem__canvas-grid,
    .ph-ecosystem__lines{
        display:none;
    }

    .ph-partner-node{
        position:static;
        width:auto;
    }

    .ph-ecosystem__core{
        position:relative;
        left:auto;
        top:auto;
        grid-column:1/-1;
        width:180px;
        height:180px;
        margin:12px auto;
        transform:none;
    }

    .ph-ecosystem__footer{
        grid-template-columns:1fr;
    }

    .ph-ecosystem__footer > div + div{
        border-left:0;
        border-top:1px solid rgba(255,255,255,.07);
    }

    .ph-os__nav{
        grid-template-columns:1fr;
    }

    .ph-os__nav button{
        min-height:45px;
        justify-content:flex-start;
        flex-direction:row;
    }

    .ph-os__visual{
        height:auto;
        grid-template-columns:1fr;
    }

    .ph-os__connector{
        display:none;
    }

    .ph-os__iq{
        order:-1;
    }

    .ph-os__metrics{
        grid-template-columns:1fr;
    }

    .ph-map__canvas{
        height:auto;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:9px;
        padding:20px;
    }

    .ph-map__grid,
    .ph-map__canvas > svg{
        display:none;
    }

    .ph-map__hotel{
        position:relative;
        left:auto;
        top:auto;
        grid-column:1/-1;
        margin:10px auto 18px;
        transform:none;
    }

    .ph-map__item{
        position:static;
        width:auto;
    }
}

@media(max-width:520px){

    .ph-heading h2,
    .ph-os__copy h2,
    .ph-map__header h2,
    .ph-principles__copy h2,
    .ph-final h2{
        font-size:38px;
    }

    .ph-hero__actions,
    .ph-final__actions{
        display:grid;
    }

    .ph-btn{
        width:100%;
    }

    .ph-hero__proof{
        display:grid;
        grid-template-columns:1fr;
    }

    .ph-map__canvas{
        grid-template-columns:1fr;
    }

    .ph-map__hotel{
        grid-column:auto;
        width:190px;
        height:190px;
    }

    .ph-final__visual{
        width:270px;
        height:270px;
    }

    .ph-modal__dialog{
        padding:34px 22px 25px;
    }
}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media(prefers-reduced-motion:reduce){

    .ph *,
    .ph *::before,
    .ph *::after{
        scroll-behavior:auto !important;
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }

    .ph-btn:hover,
    .ph-type:hover,
    .ph-value article:hover,
    .ph-principles__list article:hover{
        transform:none;
    }
}