:root{
    --navy:#14213d;
    --navy-soft:#203354;
    --cream:#fff8ed;
    --white:#ffffff;
    --text:#1f2937;
    --muted:#667085;
    --border:#d6dbe4;
    --gold:#ffb703;
    --cyan:#00b4d8;
    --cyan-soft:#e2f7fb;
    --red:#d92d20;
    --shadow:0 26px 72px rgba(20,33,61,.15);
    --radius:24px
}

*{
    box-sizing:border-box
}

html{
    scroll-behavior:smooth
}

body{
    margin:0;
    background:#f7f8fb;
    color:var(--text);
    font-family:Arial,"Helvetica Neue",sans-serif;
    line-height:1.65
}

button,
input,
textarea{
    font:inherit
}

button{
    cursor:pointer
}

.cas-container{
    width:min(1180px,calc(100% - 36px));
    margin:auto
}

.cas-skip{
    position:fixed;
    top:-70px;
    left:18px;
    z-index:99999;
    padding:10px 14px;
    border-radius:8px;
    background:var(--white);
    color:var(--navy)
}

.cas-skip:focus{
    top:18px
}

/* Header */
.cas-header{
    position:sticky;
    top:0;
    z-index:90;
    background:rgba(255,248,237,.95);
    border-bottom:1px solid var(--border);
    backdrop-filter:blur(14px)
}

.cas-header__inner{
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px
}

.cas-brand{
    display:inline-flex;
    align-items:center;
    gap:11px;
    color:var(--navy);
    text-decoration:none;
    font-weight:900
}

.cas-brand__icon{
    position:relative;
    width:38px;
    height:38px;
    display:block;
    border-radius:50%;
    background:var(--navy)
}

.cas-brand__icon i,
.cas-brand__icon b{
    position:absolute;
    left:50%;
    bottom:50%;
    width:2px;
    border-radius:99px;
    background:var(--white);
    transform-origin:bottom
}

.cas-brand__icon i{
    height:10px;
    transform:translateX(-50%) rotate(15deg)
}

.cas-brand__icon b{
    height:14px;
    transform:translateX(-50%) rotate(118deg)
}

.cas-brand__icon em{
    position:absolute;
    top:50%;
    left:50%;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--gold);
    transform:translate(-50%,-50%)
}

.cas-navigation{
    display:flex;
    align-items:center;
    gap:25px
}

.cas-navigation a{
    color:#475467;
    text-decoration:none;
    font-weight:750
}

.cas-navigation a:hover{
    color:var(--navy)
}

.cas-menu-toggle{
    display:none;
    border:0;
    background:transparent
}

.cas-menu-toggle span{
    display:block;
    width:25px;
    height:2px;
    margin:5px 0;
    background:var(--navy)
}

/* Hero */
.cas-hero{
    padding:76px 0 56px;
    background:
        radial-gradient(circle at 10% 0,rgba(0,180,216,.13),transparent 30%),
        linear-gradient(180deg,var(--cream),#f7f8fb)
}

.cas-hero__grid{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(290px,.5fr);
    gap:68px;
    align-items:end
}

.cas-label,
.cas-section-title p{
    margin:0;
    color:var(--cyan);
    font-size:.76rem;
    font-weight:900;
    letter-spacing:.16em
}

.cas-hero h1{
    margin:12px 0 22px;
    font-size:clamp(3.8rem,9vw,7.5rem);
    line-height:.9;
    letter-spacing:-.072em;
    color:var(--navy)
}

.cas-hero__copy>p:last-child{
    max-width:710px;
    margin:0;
    color:var(--muted);
    font-size:1.17rem
}

.cas-now-card{
    padding:24px;
    border-left:5px solid var(--gold);
    border-radius:0 16px 16px 0;
    background:var(--white);
    box-shadow:var(--shadow)
}

.cas-now-card span,
.cas-now-card small{
    display:block;
    color:var(--muted)
}

.cas-now-card span{
    margin-bottom:5px;
    font-size:.75rem;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase
}

.cas-now-card strong{
    display:block;
    color:var(--navy);
    font-size:clamp(2.3rem,5vw,3.8rem);
    line-height:1.05;
    font-variant-numeric:tabular-nums
}

/* Clock */
.cas-clock-section{
    padding:20px 0 84px
}

.cas-clock-shell{
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--white);
    box-shadow:var(--shadow)
}

.cas-clock-shell__controls{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:16px 18px;
    border-bottom:1px solid var(--border);
    background:#fbfcfe
}

.cas-tabs{
    display:flex;
    align-items:center;
    gap:4px;
    padding:4px;
    border-radius:13px;
    background:#eef1f6
}

.cas-tabs button{
    border:0;
    border-radius:10px;
    padding:10px 18px;
    background:transparent;
    color:var(--muted);
    font-weight:850
}

.cas-tabs button.is-active{
    background:var(--white);
    color:var(--navy);
    box-shadow:0 4px 12px rgba(20,33,61,.08)
}

.cas-format-switch{
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:auto;
    color:#475467;
    font-size:.88rem;
    font-weight:800;
    white-space:nowrap
}

.cas-format-switch input{
    position:absolute;
    opacity:0;
    pointer-events:none
}

.cas-format-switch>span{
    position:relative;
    width:44px;
    height:25px;
    border-radius:99px;
    background:#cfd5df;
    transition:.2s
}

.cas-format-switch>span i{
    position:absolute;
    top:3px;
    left:3px;
    width:19px;
    height:19px;
    border-radius:50%;
    background:var(--white);
    transition:.2s
}

.cas-format-switch input:checked+span{
    background:var(--cyan)
}

.cas-format-switch input:checked+span i{
    transform:translateX(19px)
}

.cas-fullscreen{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    flex:0 0 42px;
    border:1px solid var(--border);
    border-radius:11px;
    background:var(--white);
    color:var(--navy)
}

.cas-fullscreen svg{
    width:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9
}

.cas-clock-shell__body{
    min-height:510px;
    display:grid;
    place-items:center;
    padding:48px
}

.cas-clock-panel{
    width:100%
}

.cas-clock-panel[hidden]{
    display:none!important
}

.cas-digital{
    text-align:center
}

.cas-digital time{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:.15em;
    white-space:nowrap
}

.cas-digital time span{
    color:var(--navy);
    font-size:clamp(4.8rem,11vw,10.4rem);
    line-height:.88;
    font-weight:800;
    letter-spacing:-.07em;
    font-variant-numeric:tabular-nums
}

.cas-digital time em{
    padding-bottom:.25em;
    color:var(--cyan);
    font-size:1.4rem;
    font-style:normal;
    font-weight:900
}

.cas-digital>p{
    margin:25px 0 14px;
    color:var(--navy-soft);
    font-size:1.24rem;
    font-weight:700
}

.cas-meta{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px
}

.cas-meta span{
    padding:7px 11px;
    border-radius:99px;
    background:var(--cyan-soft);
    color:#155b6a;
    font-size:.84rem
}

/* Analog */
.cas-analog{
    text-align:center
}

.cas-face{
    position:relative;
    width:min(390px,76vw);
    aspect-ratio:1;
    margin:auto;
    border:3px solid var(--navy);
    border-radius:50%;
    background:
        radial-gradient(circle at center,#fff 0 68%,#f2f5f8 69% 100%);
    box-shadow:inset 0 0 0 10px #f8fafc,0 20px 45px rgba(20,33,61,.13)
}

.cas-hour{
    position:absolute;
    top:50%;
    left:50%;
    width:30px;
    height:30px;
    margin:-15px;
    display:grid;
    place-items:center;
    color:var(--navy);
    font-size:1rem;
    font-weight:900
}

.cas-hour--1{transform:rotate(30deg) translateY(-163px) rotate(-30deg)}
.cas-hour--2{transform:rotate(60deg) translateY(-163px) rotate(-60deg)}
.cas-hour--3{transform:rotate(90deg) translateY(-163px) rotate(-90deg)}
.cas-hour--4{transform:rotate(120deg) translateY(-163px) rotate(-120deg)}
.cas-hour--5{transform:rotate(150deg) translateY(-163px) rotate(-150deg)}
.cas-hour--6{transform:rotate(180deg) translateY(-163px) rotate(-180deg)}
.cas-hour--7{transform:rotate(210deg) translateY(-163px) rotate(-210deg)}
.cas-hour--8{transform:rotate(240deg) translateY(-163px) rotate(-240deg)}
.cas-hour--9{transform:rotate(270deg) translateY(-163px) rotate(-270deg)}
.cas-hour--10{transform:rotate(300deg) translateY(-163px) rotate(-300deg)}
.cas-hour--11{transform:rotate(330deg) translateY(-163px) rotate(-330deg)}
.cas-hour--12{transform:rotate(0deg) translateY(-163px) rotate(0deg)}

.cas-hand{
    position:absolute;
    left:50%;
    bottom:50%;
    border-radius:99px;
    transform-origin:bottom
}

.cas-hand--hour{
    width:7px;
    height:25%;
    background:var(--navy)
}

.cas-hand--minute{
    width:5px;
    height:34%;
    background:var(--cyan)
}

.cas-hand--second{
    width:2px;
    height:40%;
    background:var(--gold)
}

.cas-center{
    position:absolute;
    top:50%;
    left:50%;
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 0 4px var(--navy);
    transform:translate(-50%,-50%)
}

.cas-analog__info{
    margin-top:22px
}

.cas-analog__info strong{
    display:block;
    font-size:1.45rem;
    font-variant-numeric:tabular-nums
}

.cas-analog__info span{
    color:var(--muted)
}

.cas-clock-shell__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:14px 20px;
    border-top:1px solid var(--border);
    color:var(--muted);
    font-size:.88rem
}

.cas-clock-shell__footer span{
    display:flex;
    align-items:center;
    gap:8px
}

.cas-clock-shell__footer span i{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#12b76a
}

.cas-clock-shell__footer button{
    border:0;
    background:transparent;
    color:var(--cyan);
    font-weight:850
}

/* Lower homepage */
.cas-benefits,
.cas-content,
.cas-faq{
    padding:72px 0
}

.cas-section-title{
    max-width:760px;
    margin-bottom:28px
}

.cas-section-title h2{
    margin:7px 0;
    color:var(--navy);
    font-size:clamp(2.1rem,4.7vw,3.8rem);
    line-height:1.05;
    letter-spacing:-.05em
}

.cas-benefit-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px
}

.cas-benefit-grid article{
    min-height:205px;
    padding:23px;
    border-radius:18px;
    background:var(--cream)
}

.cas-benefit-grid article:nth-child(2),
.cas-benefit-grid article:nth-child(4){
    background:var(--navy);
    color:var(--white)
}

.cas-benefit-grid span{
    color:var(--cyan);
    font-weight:900
}

.cas-benefit-grid h3{
    margin:28px 0 7px
}

.cas-benefit-grid p{
    margin:0;
    color:var(--muted)
}

.cas-benefit-grid article:nth-child(2) p,
.cas-benefit-grid article:nth-child(4) p{
    color:#cbd5e1
}

.cas-prose{
    max-width:930px;
    margin:auto;
    padding:clamp(28px,5vw,56px);
    border:1px solid var(--border);
    border-radius:22px;
    background:var(--white)
}

.cas-prose h2{
    margin:1.65em 0 .5em;
    color:var(--navy);
    font-size:2rem;
    line-height:1.2;
    letter-spacing:-.025em
}

.cas-prose h2:first-child{
    margin-top:0
}

.cas-prose p,
.cas-prose li{
    color:#475467
}

.cas-prose a{
    color:var(--cyan)
}

.cas-faq__list{
    max-width:930px
}

.cas-faq details,
.cas-side-faq details{
    margin:10px 0;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--white);
    padding:17px 19px
}

.cas-faq summary,
.cas-side-faq summary{
    display:flex;
    justify-content:space-between;
    gap:15px;
    cursor:pointer;
    font-weight:850
}

.cas-faq details p,
.cas-side-faq details p{
    color:var(--muted)
}

/* Static pages */
.cas-page-hero{
    padding:64px 0 32px;
    color:var(--white);
    background:var(--navy)
}

.cas-breadcrumbs{
    display:flex;
    gap:8px;
    margin-bottom:25px;
    color:#98a2b3
}

.cas-breadcrumbs a{
    color:var(--gold);
    text-decoration:none
}

.cas-page-hero h1{
    margin:10px 0 16px;
    max-width:900px;
    font-size:clamp(3rem,7vw,5.6rem);
    line-height:.94;
    letter-spacing:-.06em
}

.cas-page-hero__intro{
    max-width:760px;
    color:#d0d5dd;
    font-size:1.08rem
}

.cas-document{
    padding:48px 0 88px
}

.cas-document__grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 310px;
    gap:28px;
    align-items:start
}

.cas-side-faq{
    position:sticky;
    top:95px
}

.cas-contact{
    display:grid;
    gap:16px;
    margin-top:28px
}

.cas-contact__row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px
}

.cas-contact label{
    display:grid;
    gap:7px;
    font-weight:800
}

.cas-contact input,
.cas-contact textarea{
    width:100%;
    border:1px solid var(--border);
    border-radius:10px;
    background:#f9fafb;
    padding:12px
}

.cas-primary{
    justify-self:start;
    border:0;
    border-radius:10px;
    background:var(--navy);
    color:var(--white);
    padding:12px 17px;
    font-weight:850
}

.hp-field{
    position:absolute;
    left:-9999px
}

.cas-alert{
    padding:13px;
    border-radius:10px
}

.cas-alert.is-success{
    background:#dcfae6;
    color:#05603a
}

.cas-alert.is-error{
    background:#fee4e2;
    color:#912018
}

/* Footer */
.cas-footer{
    padding:52px 0;
    background:var(--navy);
    color:var(--white)
}

.cas-brand--footer{
    color:var(--white)
}

.cas-footer__layout{
    display:grid;
    grid-template-columns:1.2fr .8fr 1fr;
    gap:36px
}

.cas-footer p{
    color:#98a2b3
}

.cas-footer__links{
    display:grid;
    gap:8px
}

.cas-footer__links a{
    color:#e4e7ec;
    text-decoration:none
}

.cas-footer__note{
    text-align:right
}

/* Fullscreen */
.cas-clock-shell:fullscreen,
.cas-clock-shell.is-screen-mode{
    width:100vw;
    height:100dvh;
    border:0;
    border-radius:0;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    background:var(--white)
}

.cas-clock-shell.is-screen-mode{
    position:fixed;
    inset:0;
    z-index:99999
}

.cas-lock{
    overflow:hidden!important
}

.cas-clock-shell:fullscreen .cas-clock-shell__body,
.cas-clock-shell.is-screen-mode .cas-clock-shell__body{
    min-height:0
}

.cas-clock-shell:fullscreen .cas-digital time span,
.cas-clock-shell.is-screen-mode .cas-digital time span{
    font-size:clamp(7rem,17vw,16rem)
}

.cas-clock-shell:fullscreen .cas-face,
.cas-clock-shell.is-screen-mode .cas-face{
    width:min(68vh,68vw,720px)
}

/* Responsive */
@media(max-width:920px){
    .cas-hero__grid,
    .cas-document__grid,
    .cas-footer__layout{
        grid-template-columns:1fr
    }

    .cas-now-card{
        max-width:430px
    }

    .cas-benefit-grid{
        grid-template-columns:repeat(2,1fr)
    }

    .cas-side-faq{
        position:static
    }

    .cas-footer__note{
        text-align:left
    }
}

@media(max-width:720px){
    .cas-menu-toggle{
        display:block
    }

    .cas-navigation{
        display:none;
        position:absolute;
        top:72px;
        left:18px;
        right:18px;
        flex-direction:column;
        align-items:stretch;
        padding:16px;
        border:1px solid var(--border);
        border-radius:14px;
        background:var(--white);
        box-shadow:var(--shadow)
    }

    .cas-navigation.is-open{
        display:flex
    }

    .cas-clock-shell__controls{
        gap:9px;
        padding:12px
    }

    .cas-tabs{
        flex:1;
        min-width:0
    }

    .cas-tabs button{
        flex:1;
        min-width:0;
        padding:10px 8px;
        font-size:.86rem
    }

    .cas-format-switch{
        gap:6px;
        font-size:.78rem
    }

    .cas-fullscreen{
        width:40px;
        height:40px;
        flex-basis:40px
    }

    .cas-clock-shell__body{
        padding:38px 18px
    }

    .cas-contact__row{
        grid-template-columns:1fr
    }
}

@media(max-width:520px){
    .cas-container{
        width:min(100% - 20px,1180px)
    }

    .cas-hero{
        padding:52px 0 40px
    }

    .cas-hero h1{
        font-size:clamp(3.2rem,18vw,5rem)
    }

    .cas-format-switch b{
        display:none
    }

    .cas-format-switch>span{
        width:38px;
        height:22px
    }

    .cas-format-switch>span i{
        width:16px;
        height:16px
    }

    .cas-format-switch input:checked+span i{
        transform:translateX(16px)
    }

    .cas-fullscreen{
        width:38px;
        height:38px;
        flex-basis:38px
    }

    .cas-digital time span{
        font-size:clamp(3.3rem,18vw,5.2rem)
    }

    .cas-digital time em{
        font-size:1rem
    }

    .cas-benefit-grid{
        grid-template-columns:1fr
    }

    .cas-clock-shell__footer{
        align-items:flex-start;
        flex-direction:column
    }

    .cas-face{
        width:min(310px,82vw)
    }

    .cas-hour--1{transform:rotate(30deg) translateY(-128px) rotate(-30deg)}
    .cas-hour--2{transform:rotate(60deg) translateY(-128px) rotate(-60deg)}
    .cas-hour--3{transform:rotate(90deg) translateY(-128px) rotate(-90deg)}
    .cas-hour--4{transform:rotate(120deg) translateY(-128px) rotate(-120deg)}
    .cas-hour--5{transform:rotate(150deg) translateY(-128px) rotate(-150deg)}
    .cas-hour--6{transform:rotate(180deg) translateY(-128px) rotate(-180deg)}
    .cas-hour--7{transform:rotate(210deg) translateY(-128px) rotate(-210deg)}
    .cas-hour--8{transform:rotate(240deg) translateY(-128px) rotate(-240deg)}
    .cas-hour--9{transform:rotate(270deg) translateY(-128px) rotate(-270deg)}
    .cas-hour--10{transform:rotate(300deg) translateY(-128px) rotate(-300deg)}
    .cas-hour--11{transform:rotate(330deg) translateY(-128px) rotate(-330deg)}
    .cas-hour--12{transform:rotate(0deg) translateY(-128px) rotate(0deg)}

    .cas-clock-shell.is-screen-mode .cas-clock-shell__footer,
    .cas-clock-shell:fullscreen .cas-clock-shell__footer{
        display:none
    }
}

@supports(padding:max(0px)){
    .cas-clock-shell.is-screen-mode{
        padding-top:env(safe-area-inset-top);
        padding-right:env(safe-area-inset-right);
        padding-bottom:env(safe-area-inset-bottom);
        padding-left:env(safe-area-inset-left)
    }
}